/* --- 1. CORE LAYOUT --- */
        #chat-interface {
            width: 800px; max-width: 100%;
            height: 500px; max-height: 100%;
            display: flex; flex-direction: column;
            transform: translateZ(0);
        }

        .chat-layout { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; }
        .chat-sidebar { width: 300px; background: rgba(0,0,0,0.02); height: 100%; display: flex; flex-direction: column; }
        .chat-window { background: transparent; height: 100%; display: flex; flex-direction: column; position: relative; }

        .chat-list, .chat-messages { overscroll-behavior: contain; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }

        /* --- 2. UTILS --- */
        .chat-search-input::placeholder { color: var(--text-muted); opacity: 0.8; }
        .msg-meta { font-size: 0.65rem; margin-top: 4px; color: var(--text-muted); font-weight: 500; }
        body.dark-mode .msg-meta { color: #94a3b8; }

        .nav-tabs-custom { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: none; }
        .nav-tabs-custom::-webkit-scrollbar { display: none; }
        .nav-tabs-custom .nav-item { white-space: nowrap; }
        .nav-tabs-custom .nav-link { color: var(--text-muted); border: none; border-bottom: 2px solid transparent; font-size: 0.85rem; font-weight: 600; padding: 10px 0; margin-right: 15px; background: transparent; }
        .nav-tabs-custom .nav-link:hover { color: var(--primary); }
        .nav-tabs-custom .nav-link.active { color: var(--primary); background: transparent; border-bottom: 2px solid var(--primary); }
        /* --- 3. SIDEBAR ACTIONS (CẬP NHẬT CSS) --- */
        .chat-actions-btn {
            position: absolute; top: 50%; right: 10px;
            transform: translateY(-50%); z-index: 10;
        }

        .chat-actions-btn.show {
            z-index: 1000 !important;
        }

        .chat-actions-btn .btn-icon {
            color: #94a3b8;
            background: rgba(255, 255, 255, 0.9); /* Light Mode: Nền trắng mờ */
            border: 1px solid var(--btn-border);
            transition: all 0.2s;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            padding: 0;
        }
        .chat-actions-btn .btn-icon:hover { color: var(--primary); background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

        /* [DARK MODE FIX] Nút trong suốt, chỉ hiện nền khi hover */
        body.dark-mode .chat-actions-btn .btn-icon {
            color: var(--text-muted);
            background: transparent;
            border-color: transparent;
        }
        body.dark-mode .chat-actions-btn .btn-icon:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
        }

        /* --- MENU DROPDOWN CHUNG (SOLID) --- */
        .chat-sidebar .dropdown-menu, .header-dropdown-menu {
            border: 1px solid var(--popup-border) !important; 
            box-shadow: var(--popup-glow) !important;
            background-color: var(--popup-bg) !important; 
            border-radius: 16px !important;
            overflow: hidden;
        }

        .chat-sidebar .dropdown-item { color: var(--text-color); font-size: 0.9rem; }
        .chat-sidebar .dropdown-item:hover { background-color: var(--link-hover-bg); color: var(--primary); }

        /* --- 4. HEADER DROPDOWN --- */
        .header-dropdown-menu {
            width: 260px;
        }
        .header-dropdown-item {
            padding: 10px 15px; font-size: 0.9rem; display: flex; align-items: center;
            color: var(--text-color);
        }
        .header-dropdown-item:hover { background-color: var(--link-hover-bg); color: var(--primary); }
        .header-dropdown-item i { width: 25px; text-align: center; margin-right: 10px; }
        .no-arrow::after { display: none; }
        .dropdown-menu.show { z-index: 10050 !important; }

        /* [DARK MODE FIX] Màu chữ hover trong menu popup */
        body.dark-mode .chat-sidebar .dropdown-item:hover,
        body.dark-mode .header-dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #f8fafc !important; /* Màu chữ sáng dễ đọc */
        }
        body.dark-mode .chat-sidebar .dropdown-item.text-danger:hover,
        body.dark-mode .header-dropdown-item.text-danger:hover {
            color: #ff6b6b !important; /* Giữ màu đỏ cho nút xoá/chặn */
        }

        /* --- 5. TYPING INDICATOR --- */
        .chat-typing-indicator {
            position: absolute;
            bottom: 100%;
            left: 20px;
            z-index: 20;
            display: flex; align-items: center;
            background: var(--popup-bg);
            padding: 6px 14px;
            border-radius: 16px 16px 16px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            border: 1px solid var(--popup-border);
            border-bottom: none;
            backdrop-filter: blur(4px);
            margin-bottom: -4px;
            animation: slideUpFade 0.3s ease-out;
            pointer-events: none;
        }

        .typing-dots { display: flex; align-items: center; gap: 3px; }
        .typing-dots span { width: 4px; height: 4px; background: var(--primary); border-radius: 50%; display: inline-block; animation: typingBounce 1.4s infinite ease-in-out both; }
        .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
        .typing-dots span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
        @keyframes slideUpFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* --- 6. AUTO-EXPAND TEXTAREA & SCALABLE INPUT --- */
        #chat-input-field {
            resize: none;
            overflow-y: hidden;
            min-height: 2.6rem; /* Scalable height */
            max-height: 120px;
            line-height: 1.5;
            padding-top: 8px; padding-bottom: 8px;
        }
        #chat-input-field.scroll-active { overflow-y: auto; }

        /* --- 6.1. SEPARATED CHAT INPUT WRAPPER --- */
        .chat-input-wrapper {
            width: 100%;
        }
        
        .chat-textarea {
            background: var(--bg-body) !important;
            border: 1px solid var(--btn-border) !important;
            border-radius: 20px !important;
            transition: all 0.3s ease;
            padding-left: 14px !important;
            padding-right: 14px !important;
        }

        .chat-textarea:focus {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 1px #0ea5e9, 0 0 12px rgba(14, 165, 233, 0.25) !important;
            outline: none !important;
        }

        .chat-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50% !important;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            background: rgba(127, 127, 127, 0.1);
            border: 1px solid transparent;
        }
        .chat-action-btn:hover {
            background: rgba(127, 127, 127, 0.2);
        }
        
        #btn-send-message:hover {
            background: #0284c7 !important;
        }

        /* --- 6.2. TECH INPUT GROUP (Search bars) --- */
        .tech-input-group .form-control:focus,
        .tech-input-group .btn:focus,
        .tech-input-group .btn:active {
            box-shadow: none !important;
            outline: none !important;
            z-index: 1 !important;
        }
        .tech-input-group {
            border: 1px solid var(--btn-border);
            transition: all 0.3s ease;
        }
        .tech-input-group .form-control,
        .tech-input-group .btn {
            border: none !important;
            box-shadow: none !important;
        }
        .tech-input-group.rounded-pill {
            border-radius: 50rem;
        }
        .tech-input-group:focus-within {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 1px #0ea5e9, 0 0 12px rgba(14, 165, 233, 0.25) !important;
        }

        /* --- 7. MOBILE RESPONSIVE --- */
        .mobile-nav-btn { display: none; }
        .desktop-nav-element { display: block; }
        .btn-back-mobile { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; padding: 0; background-color: var(--bg-body); border: 1px solid var(--btn-border); color: var(--text-muted); transition: all 0.2s; }

        /* HEADER & LAYOUT UPDATES */
        /* Header Sidebar Overlay (Absolute + Blur) */
        .chat-sidebar { position: relative; } /* Ensure absolute children position correctly */
        .chat-overlay-header {
            position: absolute; top: 0; left: 0; right: 0; z-index: 50;
            padding: 15px 15px 0 15px; height: 115px;
            border-bottom: 1px solid var(--popup-border);
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            display: flex; flex-direction: column; justify-content: flex-start;
        }
        body.dark-mode .chat-overlay-header { background-color: rgba(15, 23, 42, 0.8); }

        /* Content Padding for Sidebar */
        .chat-scrollable-content {
            height: 100%; overflow-y: auto;
            padding-top: 115px; /* Offset for header */
            overscroll-behavior: contain;
        }

        /* Chat Window Header Overlay */
        .chat-window { position: relative; }
        .chat-window .chat-overlay-header {
            height: 70px; padding: 0 15px; justify-content: center;
        }
        .chat-window .chat-scrollable-content {
            padding-top: 70px; /* Offset for header */
        }



        /* MEDIA QUERY */
        @media (max-width: 997.98px) {
            #chat-interface {
                width: 100% !important; max-width: none !important;
                height: 70vh;
            }
            #nav-popup {
                transition: height 0.1s ease-out, opacity 0.2s, transform 0.2s !important;
            }
            .chat-sidebar { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 10; background: var(--popup-bg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); border-right: none; }
            .chat-window { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 10; background: var(--popup-bg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(100%); }

            #chat-interface.in-conversation .chat-sidebar { transform: translateX(-20%); opacity: 0; pointer-events: none; }
            #chat-interface.in-conversation .chat-window { transform: translateX(0); }

            .mobile-nav-btn { display: block !important; }
            .desktop-nav-element { display: none !important; }

            .chat-input-area {
                padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }