cax-design-system 2.7.12 → 2.8.0

package/resources/components/commentbox/commentbox.scss

@@ -1,611 +1,611 @@
-@layer cax {
-    .cax-comments-wrapper {
-        width: 100%;
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-    .cax-comments-list {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: 100%;
-        padding-bottom: 0px;
-
-        // Better performance
-        will-change: transform;
-        transform: translate3d(0, 0, 0);
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-        scrollbar-width: thin;
-
-        &::after {
-            content: '';
-            display: block;
-            min-height: 20px;
-            scroll-snap-align: end;
-        }
-        scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
-
-        &::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: rgba(85, 83, 83, 0.1);
-            border-radius: 4px;
-            border: 2px solid transparent;
-            background-clip: padding-box;
-        }
-    }
-
-    .cax-comment-item {
-        display: flex;
-        align-items: flex-end;
-        max-width: 85%;
-        gap: 4px;
-
-        &.consecutive-message {
-            margin-top: 0;
-        }
-
-        &.new-sender {
-            margin-top: 12px;
-        }
-
-        &.new-date {
-            margin-top: 0px;
-        }
-    }
-
-    .cax-user-comment {
-        align-self: flex-start;
-        display: flex;
-        flex-direction: row;
-        text-align: left;
-
-        .cax-commentbox-avatar-container {
-            display: flex;
-            align-items: flex-end;
-        }
-
-        .cax-comment-content {
-            margin-bottom: 0;
-            display: flex;
-            flex-direction: column;
-            border-radius: 12px 12px 12px 0;
-
-            &.no-avatar {
-                border-radius: 12px;
-                margin-left: 25px;
-            }
-
-            .cax-comment-sender {
-                font-size: 14px;
-                font-weight: 600;
-                color: var(--neutral-900);
-                margin-bottom: 0px;
-                line-height: 20px;
-            }
-        }
-
-        &.consecutive-message {
-            .cax-comment-content {
-                border-radius: 12px;
-            }
-        }
-    }
-
-    .cax-admin-comment {
-        align-self: flex-end;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        text-align: right;
-
-        .cax-commentbox-avatar-container {
-            display: flex;
-            align-items: flex-end;
-        }
-
-        .cax-comment-content {
-            margin-bottom: 0;
-            display: flex;
-            flex-direction: column;
-            border-radius: 12px 12px 0 12px;
-            text-align: left;
-
-            .cax-comment-sender {
-                font-size: 14px;
-                font-weight: 600;
-                color: var(--neutral-900);
-                margin-bottom: 0px;
-                line-height: 20px;
-            }
-        }
-        &.consecutive-message {
-            .cax-comment-content {
-                border-radius: 12px;
-            }
-        }
-    }
-
-    .cax-commentbox-avatar {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        margin: 0 8px;
-    }
-
-    .cax-comment-content {
-        background: var(--white-100);
-        border-radius: 12px 12px 12px 0px;
-        padding: 8px;
-        max-width: 100%;
-        word-wrap: break-word;
-        display: flex;
-        flex-direction: column;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-
-        .cax-comment-text {
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-
-            ::ng-deep {
-                .mention {
-                    display: inline-block;
-                    font-weight: 600;
-                    color: var(--primary-500);
-                }
-
-                .hashtag {
-                    display: inline-block;
-                    font-weight: 600;
-                    color: var(--primary-500);
-                }
-            }
-        }
-
-        .cax-comment-sender {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--neutral-900);
-            margin-bottom: 0px;
-            line-height: 20px;
-        }
-    }
-
-    .cax-file-attachment {
-        margin-bottom: 12px;
-
-        .file-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            border-color: 1px solid var(--neutral-150);
-            padding: 10px 16px;
-            background: var(--neutral-75);
-            border-radius: 8px;
-            cursor: pointer;
-            margin-bottom: 8px;
-
-            .file-details {
-                display: flex;
-                flex: 1;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .file-name {
-                color: var(--neutral-900);
-                font-weight: 500;
-                font-size: 14px;
-                line-height: 20px;
-                flex: 1;
-                white-space: nowrap;
-                overflow: hidden;
-            }
-
-            .file-size {
-                color: var(--neutral-600);
-                font-weight: 400;
-                font-size: 12px;
-                line-height: 18px;
-                margin-right: 8px;
-            }
-
-            i {
-                color: var(--neutral-900);
-                font-size: 1.1rem;
-                margin-left: auto;
-                order: 2;
-            }
-
-            i.cax-download {
-                cursor: pointer;
-                transition: color 0.2s ease;
-
-                &:hover {
-                    color: var(--primary-600);
-                }
-
-                &:active {
-                    color: var(--primary-700);
-                }
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .cax-comment-date {
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 18px;
-        color: var(--neutral-600);
-        align-self: flex-end;
-    }
-
-    .cax-chat-input-container {
-        display: flex;
-        gap: 0.5rem;
-
-        .chat-input {
-            flex: 1;
-        }
-
-        .send-button {
-            cursor: pointer;
-        }
-    }
-
-    .input-wrapper {
-        position: relative;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .cax-date-header {
-        text-align: center;
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 18px;
-        color: var(--neutral-700);
-        background: var(--neutral-100);
-        align-self: center;
-        width: fit-content;
-        padding: 4px 12px;
-        border-radius: 4px;
-        margin: 11px 0;
-        position: relative;
-        z-index: 1;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    .cax-comments-container {
-        display: flex;
-        flex-direction: column;
-        height: calc(100vh - 200px);
-        overflow: hidden;
-        position: relative;
-        transform: translateZ(0);
-        backface-visibility: hidden;
-    }
-
-    .selected-files {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        padding: 0px 0px 5px 0px;
-        position: relative;
-
-        .cax-chip {
-            background: var(--neutral-100);
-
-            i {
-                margin-right: 0.5rem;
-            }
-        }
-
-        .files-overlay {
-            position: absolute;
-            background: var(--white-100);
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            width: 300px;
-            max-height: 400px;
-            z-index: 1000;
-            overflow: hidden;
-            border: 1px solid var(--neutral-200);
-
-            .files-overlay-header {
-                padding: 12px 16px;
-                font-weight: 600;
-                font-size: 14px;
-                border-bottom: 1px solid var(--neutral-100);
-                background: var(--neutral-50);
-            }
-
-            .files-overlay-content {
-                max-height: 350px;
-                overflow-y: auto;
-                padding: 8px 0;
-
-                .file-item {
-                    display: flex;
-                    align-items: center;
-                    padding: 8px 16px;
-                    transition: background-color 0.2s ease;
-
-                    &:hover {
-                        background-color: var(--neutral-50);
-                    }
-
-                    i.cax-paperclip {
-                        color: var(--neutral-600);
-                        margin-right: 8px;
-                    }
-
-                    .file-name {
-                        flex: 1;
-                        font-size: 14px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        margin-right: 8px;
-                    }
-
-                    .file-size {
-                        color: var(--neutral-600);
-                        font-size: 12px;
-                        margin-right: 8px;
-                    }
-
-                    i.cax-times {
-                        color: var(--neutral-600);
-                        cursor: pointer;
-                        transition: color 0.2s ease;
-
-                        &:hover {
-                            color: var (--error-500);
-                        }
-                    }
-                }
-            }
-        }
-
-        :deep(.file-chip) {
-            background: var(--neutral-50);
-            border: 1px solid var(--neutral-100);
-
-            .file-details {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            }
-
-            i {
-                color: var(--primary-500);
-                margin-right: 8px;
-            }
-
-            .file-name {
-                font-weight: 500;
-            }
-
-            .file-size {
-                color: var(--neutral-600);
-                font-size: 0.8rem;
-            }
-        }
-    }
-
-    :host ::ng-deep {
-        .cax-sidebar {
-            width: 589px !important;
-            border: 1px solid var(--neutral-200) !important;
-            .cax-sidebar-content {
-                display: flex;
-                flex-direction: column;
-                background: var(--neutral-25);
-                padding: 24px 8px !important;
-            }
-
-            .cax-sidebar-footer {
-                padding: 12px !important;
-                background: var(--neutral-50);
-                border-top: 1px solid var(--neutral-200);
-            }
-            .cax-sidebar-header {
-                border-bottom: 1px solid var(--neutral-200);
-                background: var(--neutral-50);
-                padding: 16px 24px !important;
-            }
-        }
-
-        .cax-overlay {
-            position: absolute;
-            bottom: 0px !important;
-            top: unset !important;
-            left: unset !important;
-        }
-
-        .suggestion-panel {
-            background: var(--white-100);
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            z-index: 9999;
-            padding: 12px 4px;
-            margin-left: 20px;
-            width: 224px;
-            border-radius: 8px;
-            border: 1px solid var(--neutral-200);
-
-            .suggestion-list {
-                max-height: 200px;
-                overflow-y: auto;
-
-                .suggestion-item {
-                    padding: 6px 8px;
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: space-between;
-                    transition: background-color 0.2s ease;
-                    align-items: center;
-
-                    &:hover {
-                        background-color: var(--neutral-50);
-                    }
-
-                    &.selected {
-                        background-color: var(--neutral-50);
-                    }
-
-                    .suggestion-label {
-                        font-weight: 500;
-                    }
-
-                    .suggestion-id {
-                        color: var(--neutral-600);
-                        font-size: 0.85em;
-                    }
-                }
-
-                // Better performance
-                will-change: transform;
-                transform: translate3d(0, 0, 0);
-                backface-visibility: hidden;
-                -webkit-backface-visibility: hidden;
-                scrollbar-width: thin;
-
-                &::after {
-                    content: '';
-                    display: block;
-                    min-height: 20px;
-                    scroll-snap-align: end;
-                }
-                scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
-
-                &::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background-color: rgba(85, 83, 83, 0.1);
-                    border-radius: 4px;
-                    border: 2px solid transparent;
-                    background-clip: padding-box;
-                }
-            }
-        }
-
-        .chat-footer {
-            position: sticky;
-            bottom: 0;
-            z-index: 10;
-        }
-
-        .cax-chat-input-container {
-            .chat-input {
-                .cax-paperclip {
-                    color: var(--neutral-900) !important;
-                }
-            }
-        }
-
-        .files-list-overlay {
-            border: 1px solid var(--neutral-200);
-            background: var(--white-100);
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            z-index: 9999;
-            padding: 12px 4px;
-            width: 224px;
-            border-radius: 8px;
-
-            &.cax-overlay {
-                transform-origin: right center !important;
-            }
-
-            .files-overlay-content {
-                max-height: 200px;
-                overflow-y: auto;
-
-                .file-item {
-                    transition: background-color 0.2s ease;
-                    padding: 6px 8px;
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-
-                    &:hover {
-                        background-color: var(--neutral-50);
-                    }
-
-                    .file-name {
-                        flex: 1;
-                        font-size: 14px;
-                        font-weight: 500;
-                        line-height: 20px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        margin-right: 8px;
-                    }
-
-                    .file-size {
-                        color: var(--neutral-600);
-                        font-size: 12px;
-                        margin-right: 8px;
-                    }
-
-                    i.cax-times {
-                        color: var(--neutral-600);
-                        cursor: pointer;
-                        border: 1.1rem solid var(--neutral-200);
-                        transition: color 0.2s ease;
-                    }
-
-                    // Better performance
-                    will-change: transform;
-                    transform: translate3d(0, 0, 0);
-                    backface-visibility: hidden;
-                    -webkit-backface-visibility: hidden;
-                    scrollbar-width: thin;
-
-                    &::after {
-                        content: '';
-                        display: block;
-                        min-height: 20px;
-                        scroll-snap-align: end;
-                    }
-                    scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
-
-                    &::-webkit-scrollbar-track {
-                        background: transparent;
-                    }
-
-                    &::-webkit-scrollbar-thumb {
-                        background-color: rgba(85, 83, 83, 0.1);
-                        border-radius: 4px;
-                        border: 2px solid transparent;
-                        background-clip: padding-box;
-                    }
-                }
-            }
-        }
-    }
-}
+@layer cax {
+    .cax-comments-wrapper {
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .cax-comments-list {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 100%;
+        padding-bottom: 0px;
+
+        // Better performance
+        will-change: transform;
+        transform: translate3d(0, 0, 0);
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+        scrollbar-width: thin;
+
+        &::after {
+            content: '';
+            display: block;
+            min-height: 20px;
+            scroll-snap-align: end;
+        }
+        scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(85, 83, 83, 0.1);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+        }
+    }
+
+    .cax-comment-item {
+        display: flex;
+        align-items: flex-end;
+        max-width: 85%;
+        gap: 4px;
+
+        &.consecutive-message {
+            margin-top: 0;
+        }
+
+        &.new-sender {
+            margin-top: 12px;
+        }
+
+        &.new-date {
+            margin-top: 0px;
+        }
+    }
+
+    .cax-user-comment {
+        align-self: flex-start;
+        display: flex;
+        flex-direction: row;
+        text-align: left;
+
+        .cax-commentbox-avatar-container {
+            display: flex;
+            align-items: flex-end;
+        }
+
+        .cax-comment-content {
+            margin-bottom: 0;
+            display: flex;
+            flex-direction: column;
+            border-radius: 12px 12px 12px 0;
+
+            &.no-avatar {
+                border-radius: 12px;
+                margin-left: 25px;
+            }
+
+            .cax-comment-sender {
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--neutral-900);
+                margin-bottom: 0px;
+                line-height: 20px;
+            }
+        }
+
+        &.consecutive-message {
+            .cax-comment-content {
+                border-radius: 12px;
+            }
+        }
+    }
+
+    .cax-admin-comment {
+        align-self: flex-end;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        text-align: right;
+
+        .cax-commentbox-avatar-container {
+            display: flex;
+            align-items: flex-end;
+        }
+
+        .cax-comment-content {
+            margin-bottom: 0;
+            display: flex;
+            flex-direction: column;
+            border-radius: 12px 12px 0 12px;
+            text-align: left;
+
+            .cax-comment-sender {
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--neutral-900);
+                margin-bottom: 0px;
+                line-height: 20px;
+            }
+        }
+        &.consecutive-message {
+            .cax-comment-content {
+                border-radius: 12px;
+            }
+        }
+    }
+
+    .cax-commentbox-avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        margin: 0 8px;
+    }
+
+    .cax-comment-content {
+        background: var(--white-100);
+        border-radius: 12px 12px 12px 0px;
+        padding: 8px;
+        max-width: 100%;
+        word-wrap: break-word;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+        .cax-comment-text {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+
+            ::ng-deep {
+                .mention {
+                    display: inline-block;
+                    font-weight: 600;
+                    color: var(--primary-500);
+                }
+
+                .hashtag {
+                    display: inline-block;
+                    font-weight: 600;
+                    color: var(--primary-500);
+                }
+            }
+        }
+
+        .cax-comment-sender {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--neutral-900);
+            margin-bottom: 0px;
+            line-height: 20px;
+        }
+    }
+
+    .cax-file-attachment {
+        margin-bottom: 12px;
+
+        .file-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            border-color: 1px solid var(--neutral-150);
+            padding: 10px 16px;
+            background: var(--neutral-75);
+            border-radius: 8px;
+            cursor: pointer;
+            margin-bottom: 8px;
+
+            .file-details {
+                display: flex;
+                flex: 1;
+                align-items: center;
+                gap: 12px;
+            }
+
+            .file-name {
+                color: var(--neutral-900);
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 20px;
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+
+            .file-size {
+                color: var(--neutral-600);
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 18px;
+                margin-right: 8px;
+            }
+
+            i {
+                color: var(--neutral-900);
+                font-size: 1.1rem;
+                margin-left: auto;
+                order: 2;
+            }
+
+            i.cax-download {
+                cursor: pointer;
+                transition: color 0.2s ease;
+
+                &:hover {
+                    color: var(--primary-600);
+                }
+
+                &:active {
+                    color: var(--primary-700);
+                }
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .cax-comment-date {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--neutral-600);
+        align-self: flex-end;
+    }
+
+    .cax-chat-input-container {
+        display: flex;
+        gap: 0.5rem;
+
+        .chat-input {
+            flex: 1;
+        }
+
+        .send-button {
+            cursor: pointer;
+        }
+    }
+
+    .input-wrapper {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .cax-date-header {
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 18px;
+        color: var(--neutral-700);
+        background: var(--neutral-100);
+        align-self: center;
+        width: fit-content;
+        padding: 4px 12px;
+        border-radius: 4px;
+        margin: 11px 0;
+        position: relative;
+        z-index: 1;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .cax-comments-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 200px);
+        overflow: hidden;
+        position: relative;
+        transform: translateZ(0);
+        backface-visibility: hidden;
+    }
+
+    .selected-files {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        padding: 0px 0px 5px 0px;
+        position: relative;
+
+        .cax-chip {
+            background: var(--neutral-100);
+
+            i {
+                margin-right: 0.5rem;
+            }
+        }
+
+        .files-overlay {
+            position: absolute;
+            background: var(--white-100);
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            width: 300px;
+            max-height: 400px;
+            z-index: 1000;
+            overflow: hidden;
+            border: 1px solid var(--neutral-200);
+
+            .files-overlay-header {
+                padding: 12px 16px;
+                font-weight: 600;
+                font-size: 14px;
+                border-bottom: 1px solid var(--neutral-100);
+                background: var(--neutral-50);
+            }
+
+            .files-overlay-content {
+                max-height: 350px;
+                overflow-y: auto;
+                padding: 8px 0;
+
+                .file-item {
+                    display: flex;
+                    align-items: center;
+                    padding: 8px 16px;
+                    transition: background-color 0.2s ease;
+
+                    &:hover {
+                        background-color: var(--neutral-50);
+                    }
+
+                    i.cax-paperclip {
+                        color: var(--neutral-600);
+                        margin-right: 8px;
+                    }
+
+                    .file-name {
+                        flex: 1;
+                        font-size: 14px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        margin-right: 8px;
+                    }
+
+                    .file-size {
+                        color: var(--neutral-600);
+                        font-size: 12px;
+                        margin-right: 8px;
+                    }
+
+                    i.cax-times {
+                        color: var(--neutral-600);
+                        cursor: pointer;
+                        transition: color 0.2s ease;
+
+                        &:hover {
+                            color: var (--error-500);
+                        }
+                    }
+                }
+            }
+        }
+
+        :deep(.file-chip) {
+            background: var(--neutral-50);
+            border: 1px solid var(--neutral-100);
+
+            .file-details {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            i {
+                color: var(--primary-500);
+                margin-right: 8px;
+            }
+
+            .file-name {
+                font-weight: 500;
+            }
+
+            .file-size {
+                color: var(--neutral-600);
+                font-size: 0.8rem;
+            }
+        }
+    }
+
+    :host ::ng-deep {
+        .cax-sidebar {
+            width: 589px !important;
+            border: 1px solid var(--neutral-200) !important;
+            .cax-sidebar-content {
+                display: flex;
+                flex-direction: column;
+                background: var(--neutral-25);
+                padding: 24px 8px !important;
+            }
+
+            .cax-sidebar-footer {
+                padding: 12px !important;
+                background: var(--neutral-50);
+                border-top: 1px solid var(--neutral-200);
+            }
+            .cax-sidebar-header {
+                border-bottom: 1px solid var(--neutral-200);
+                background: var(--neutral-50);
+                padding: 16px 24px !important;
+            }
+        }
+
+        .cax-overlay {
+            position: absolute;
+            bottom: 0px !important;
+            top: unset !important;
+            left: unset !important;
+        }
+
+        .suggestion-panel {
+            background: var(--white-100);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+            padding: 12px 4px;
+            margin-left: 20px;
+            width: 224px;
+            border-radius: 8px;
+            border: 1px solid var(--neutral-200);
+
+            .suggestion-list {
+                max-height: 200px;
+                overflow-y: auto;
+
+                .suggestion-item {
+                    padding: 6px 8px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    transition: background-color 0.2s ease;
+                    align-items: center;
+
+                    &:hover {
+                        background-color: var(--neutral-50);
+                    }
+
+                    &.selected {
+                        background-color: var(--neutral-50);
+                    }
+
+                    .suggestion-label {
+                        font-weight: 500;
+                    }
+
+                    .suggestion-id {
+                        color: var(--neutral-600);
+                        font-size: 0.85em;
+                    }
+                }
+
+                // Better performance
+                will-change: transform;
+                transform: translate3d(0, 0, 0);
+                backface-visibility: hidden;
+                -webkit-backface-visibility: hidden;
+                scrollbar-width: thin;
+
+                &::after {
+                    content: '';
+                    display: block;
+                    min-height: 20px;
+                    scroll-snap-align: end;
+                }
+                scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background-color: rgba(85, 83, 83, 0.1);
+                    border-radius: 4px;
+                    border: 2px solid transparent;
+                    background-clip: padding-box;
+                }
+            }
+        }
+
+        .chat-footer {
+            position: sticky;
+            bottom: 0;
+            z-index: 10;
+        }
+
+        .cax-chat-input-container {
+            .chat-input {
+                .cax-paperclip {
+                    color: var(--neutral-900) !important;
+                }
+            }
+        }
+
+        .files-list-overlay {
+            border: 1px solid var(--neutral-200);
+            background: var(--white-100);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+            padding: 12px 4px;
+            width: 224px;
+            border-radius: 8px;
+
+            &.cax-overlay {
+                transform-origin: right center !important;
+            }
+
+            .files-overlay-content {
+                max-height: 200px;
+                overflow-y: auto;
+
+                .file-item {
+                    transition: background-color 0.2s ease;
+                    padding: 6px 8px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &:hover {
+                        background-color: var(--neutral-50);
+                    }
+
+                    .file-name {
+                        flex: 1;
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 20px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        margin-right: 8px;
+                    }
+
+                    .file-size {
+                        color: var(--neutral-600);
+                        font-size: 12px;
+                        margin-right: 8px;
+                    }
+
+                    i.cax-times {
+                        color: var(--neutral-600);
+                        cursor: pointer;
+                        border: 1.1rem solid var(--neutral-200);
+                        transition: color 0.2s ease;
+                    }
+
+                    // Better performance
+                    will-change: transform;
+                    transform: translate3d(0, 0, 0);
+                    backface-visibility: hidden;
+                    -webkit-backface-visibility: hidden;
+                    scrollbar-width: thin;
+
+                    &::after {
+                        content: '';
+                        display: block;
+                        min-height: 20px;
+                        scroll-snap-align: end;
+                    }
+                    scrollbar-color: rgba(94, 92, 92, 0.3) transparent;
+
+                    &::-webkit-scrollbar-track {
+                        background: transparent;
+                    }
+
+                    &::-webkit-scrollbar-thumb {
+                        background-color: rgba(85, 83, 83, 0.1);
+                        border-radius: 4px;
+                        border: 2px solid transparent;
+                        background-clip: padding-box;
+                    }
+                }
+            }
+        }
+    }
+}