:root[data-theme="dark"] {
            --bg-icon-bar: #1c1710;
            --bg-sidebar: #241d14;
            --bg-main: #120f0b;
            --bg-header: #2a2116;
            --border-color: #334155;
            --text-main: #f8fafc;
            --text-sub: #94a3b8;
            --hover-bg: #3a2d1d;
            --active-bg: var(--primary);
            --bubble-me: #005ae0;
            --bubble-other: #202c33;
            --input-bg: #17120d;
            --menu-bg: #1e293b;
            --menu-hover: #fef0db;
        }


        :root[data-theme="light"] {
            --bg-icon-bar: #fff4e5;
            --bg-sidebar: #fffaf3;
            --bg-main: #fffaf4;
            --bg-header: #fff7ed;
            --border-color: #e2e8f0;
            --text-main: #0f172a;
            --text-sub: #64748b;
            --hover-bg: #f1f5f9;
            --active-bg: var(--primary);
            --bubble-me: #e5efff;
            --bubble-other: #ffffff;
            --input-bg: #fff3e0;
            --menu-bg: #ffffff;
            --menu-hover: #f1f5f9;
        }


        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }

        
        html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-main); }

        body { display: flex; flex-direction: row; width: 100vw; height: 100vh; color: var(--text-main); transition: background 0.3s; }

        
        ::-webkit-scrollbar { width: 4px; height: 4px; }

        ::-webkit-scrollbar-track { background: transparent; }

        ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.2); border-radius: 10px; }


        .sidebar-icon { width: 72px; background: var(--bg-icon-bar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: 16px 0; justify-content: space-between; flex-shrink: 0; z-index: 40; height: 100%; }

        .sidebar-top { display: flex; flex-direction: column; align-items: center; gap: 16px; }

        .sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }


        .nav-icons { display: flex; flex-direction: column; gap: 12px; align-items: center; }

        .nav-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-sub); cursor: pointer; transition: 0.2s; }

        .nav-icon svg { width: 22px; height: 22px; fill: currentColor; }

        .nav-icon:hover { background: var(--hover-bg); color: var(--text-main); }

        .nav-icon.active { background: var(--active-bg); color: white; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 0.4, transparent); }

        
        .avatar { width: 42px; height: 42px; background: linear-gradient(135deg, var(--primary), var(--primary-hover, var(--primary))); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

        .avatar img { width: 100%; height: 100%; object-fit: cover; }

        
        .icon-btn { background: none; border: none; color: var(--text-sub); cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }

        .icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

        .icon-btn:hover { background: var(--hover-bg); color: var(--text-main); }


        .settings-popup-menu { position: absolute; bottom: 0; left: 65px; background: var(--menu-bg); border: 1px solid var(--border-color); border-radius: 12px; width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: none; flex-direction: column; padding: 6px 0; z-index: 1000; }

        .settings-popup-menu.show { display: flex !important; }


        .menu-item { padding: 10px 16px; font-size: 13px; color: var(--text-main); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.15s; }

        .menu-item svg { width: 16px; height: 16px; fill: var(--text-sub); }

        .menu-item:hover { background: var(--menu-hover); color: var(--active-bg); }

        .menu-item:hover svg { fill: var(--active-bg); }

        .menu-divider { height: 1px; background: var(--border-color); margin: 4px 0; }

        .menu-item.danger { color: #ef4444; }

        .menu-item.danger svg { fill: #ef4444; }

        .menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); }


        .sidebar-menu { width: 280px; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; z-index: 30; height: 100%; }

        .sidebar-menu.collapsed { width: 0; overflow: hidden; border: none; }

        
        .search-box-area { padding: 12px 16px; border-bottom: 1px solid var(--border-color); display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

        .search-input { flex: 1; padding: 8px 12px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-main); font-size: 13px; outline: none; min-width: 0; }

        .search-input:focus { border-color: var(--primary); }

        .create-btn { background: var(--primary); color: white; border: none; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }

        .create-btn:hover { background: color-mix(in srgb, var(--primary) 85%, #000); }


        .filter-tabs { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 600; color: var(--text-sub); flex-shrink: 0; }

        .filter-tab { cursor: pointer; padding-bottom: 4px; transition: 0.2s; }

        .filter-tab.active { color: var(--active-bg); border-bottom: 2px solid var(--active-bg); }


        .sidebar-scroll-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 4px 8px; min-height: 0; }

        .section-header { padding: 12px 8px 6px; font-size: 11px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.8px; flex-shrink: 0; }

        
        .room-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 12px; margin-bottom: 4px; transition: 0.15s; position: relative; flex-shrink: 0; }

        .room-item:hover { background: var(--hover-bg); }

        .room-item.active { background: var(--active-bg); color: white; }

        .room-item.active .room-sub { color: rgba(255,255,255,0.8); }

        
        .room-avt { width: 44px; height: 44px; background: #273449; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; overflow: hidden; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

        .room-avt img { width: 100%; height: 100%; object-fit: cover; }

        
        .room-avt.is-private { border-radius: 50%; background: var(--primary); }

        .room-avt.is-group { border-radius: 12px; background: #1e293b; }


        .group-grid-avt { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); background: #1e293b; overflow: hidden; gap: 1px; padding: 1px; border-radius: 12px; }

        .group-grid-cell { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: white; overflow: hidden; background: #475569; border-radius: 4px; }

        .group-grid-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

        .group-grid-cell.more-count { background: rgba(0, 0, 0, 0.75); font-size: 10px; font-weight: 700; border-radius: 4px; }


        .room-info { flex: 1; overflow: hidden; }

        .room-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .room-sub { font-size: 12px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


        .unread-badge { background: #ef4444; color: white; border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: bold; flex-shrink: 0; }


        .chat-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); position: relative; min-width: 0; height: 100%; }

        
        .chat-header { height: 60px; padding: 0 16px; background: var(--bg-header); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; z-index: 10; flex-shrink: 0; gap: 10px; }

        .chat-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

        .chat-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

        
        .chat-header-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .chat-header-status { font-size: 11px; color: #10b981; display: flex; align-items: center; gap: 4px; }

        .chat-header-status::before { content: ''; width: 6px; height: 6px; background: #10b981; border-radius: 50%; display: inline-block; }


        .msg-search-wrapper { position: relative; }

        .msg-search-box { padding: 6px 12px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); font-size: 12px; width: 160px; outline: none; }


        .chat-window { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; min-height: 0; position: relative; }

        
        .msg-row { display: flex; flex-direction: column; max-width: 80%; position: relative; margin-bottom: 2px; }

        .msg-row.me { align-self: flex-end; align-items: flex-end; }

        .msg-row.other { align-self: flex-start; align-items: flex-start; }

        .msg-sender { font-size: 11px; font-weight: 600; color: var(--text-sub); margin-bottom: 2px; padding-left: 4px; }

        
        .msg-bubble-wrapper { display: flex; align-items: flex-end; gap: 6px; position: relative; }

        .msg-row.me .msg-bubble-wrapper { flex-direction: row-reverse; }


        .msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.1); position: relative; }

        .msg-row.me .msg-bubble { background: var(--bubble-me); color: #fff; }

        :root[data-theme="light"] .msg-row.me .msg-bubble { color: #0f172a; }

        .msg-row.other .msg-bubble { background: var(--bubble-other); border: 1px solid var(--border-color); color: var(--text-main); }

        .msg-bubble img { max-width: 100%; width: 240px; border-radius: 8px; display: block; margin-top: 6px; cursor: pointer; }


        .msg-bubble.emoji-only { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 40px; padding: 2px 4px; line-height: 1; }

        .msg-time { font-size: 10px; opacity: 0.7; float: right; margin-left: 10px; margin-top: 4px; display: inline-flex; align-items: center; vertical-align: bottom; }


        .reply-quote-box { background: rgba(0, 0, 0, 0.25); border-left: 3px solid var(--primary-hover, var(--primary)); padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 12px; cursor: pointer; }

        .reply-quote-sender { font-weight: 700; color: var(--primary-hover, var(--primary)); margin-bottom: 2px; }

        .reply-quote-content { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


        #replyPreviewBar { display: none; background: #111827; border-top: 1px solid var(--border-color); padding: 8px 16px; align-items: center; justify-content: space-between; font-size: 12px; z-index: 15; flex-shrink: 0; }

        .msg-status { font-size: 10px; color: var(--text-sub); margin-top: 2px; text-align: right; }


        /* KHUNG PREVIEW ẢNH STAGING */
        #imagePreviewContainer { display: none; flex-direction: column; padding: 10px 16px; background: var(--bg-header); border-top: 1px solid var(--border-color); flex-shrink: 0; }

        .preview-thumb-wrap { position: relative; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); flex-shrink: 0; background: #000; }

        .preview-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

        .preview-thumb-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

        .preview-add-btn { width: 60px; height: 60px; border-radius: 8px; border: 2px dashed var(--border-color); background: none; color: var(--text-sub); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; flex-shrink: 0; transition: 0.2s; }

        .preview-add-btn:hover { border-color: var(--primary); color: var(--primary); }


        .collapse-circle-btn { width: 32px; height: 32px; background: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-weight: bold; flex-shrink: 0; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

        .collapse-circle-btn:hover { background: var(--active-bg); color: white; transform: scale(1.1); }


        .scroll-bottom-btn { position: absolute; bottom: 20px; right: 20px; width: 34px; height: 34px; background: var(--bg-header); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 50; }


        .msg-actions { display: flex; gap: 4px; align-items: center; opacity: 0; transition: 0.2s; align-self: center; }

        .msg-row:hover .msg-actions { opacity: 1; }

        .action-icon-btn { background: rgba(255, 255, 255, 0.08); border: none; color: var(--text-main); cursor: pointer; font-size: 12px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; }

        .action-icon-btn:hover { background: var(--primary); transform: scale(1.1); }


        .reaction-popup { position: absolute; bottom: 100%; left: 0; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: 20px; padding: 6px 12px; display: none; gap: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2); z-index: 50; }

        .reaction-popup.show { display: flex !important; }

        .reaction-popup span { cursor: pointer; font-size: 18px; transition: transform 0.15s; }

        .reaction-popup span:hover { transform: scale(1.35); }


        .reactions-badge { position: absolute; bottom: -8px; right: 10px; background: var(--bg-header); border: 1px solid var(--border-color); padding: 1px 6px; border-radius: 12px; font-size: 11px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 5; display: flex; gap: 2px; align-items: center; }


        /* ===== ZALO-STYLE MESSAGE ACTIONS ===== */
        .msg-bubble-wrapper { position: relative; }

        .msg-actions {
            display: flex;
            gap: 3px;
            align-items: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            padding: 4px;
            border-radius: 18px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            z-index: 20;
            transition: opacity .16s ease, transform .16s ease, visibility .16s;
        }

        .msg-row.other .msg-actions { left: calc(100% + 8px); }

        .msg-row.me .msg-actions { right: calc(100% + 8px); }

        .msg-row:hover .msg-actions,
        .msg-row.msg-active .msg-actions {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .action-icon-btn, .message-copy-btn {
            width: 28px;
            height: 28px;
            min-width: 28px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-sub);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            transition: background .15s, color .15s, transform .15s;
        }

        .action-icon-btn:hover, .message-copy-btn:hover {
            background: var(--hover-bg);
            color: var(--text-main);
            transform: scale(1.08);
        }

        .reaction-popup {
            position: absolute;
            bottom: calc(100% + 7px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 22px;
            padding: 6px 8px;
            display: none;
            gap: 5px;
            box-shadow: 0 8px 24px rgba(0,0,0,.25);
            z-index: 100;
            white-space: nowrap;
        }

        .reaction-popup.show { display: flex !important; }

        .reaction-popup span {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            font-size: 19px;
            transition: transform .12s, background .12s;
        }

        .reaction-popup span:hover {
            transform: scale(1.25);
            background: var(--hover-bg);
        }

        /* Reaction thật sự bám vào bong bóng tin nhắn */
        .reactions-badge {
            position: absolute;
            bottom: -9px;
            left: 10px;
            right: auto;
            min-height: 22px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            padding: 1px 7px;
            border-radius: 12px;
            font-size: 12px;
            line-height: 18px;
            box-shadow: 0 2px 7px rgba(0,0,0,.22);
            z-index: 8;
            display: flex;
            gap: 2px;
            align-items: center;
            pointer-events: none;
        }

        .msg-row.me .reactions-badge { left: auto; right: 10px; }

        .msg-row.msg-active .msg-bubble { outline: 1px solid color-mix(in srgb, var(--primary) .22, transparent); }


        .typing-hint { font-size: 12px; color: var(--text-sub); padding: 4px 16px; font-style: italic; display: none; flex-shrink: 0; }


        .chat-input-zone { background: var(--bg-header); border-top: 1px solid var(--border-color); display: flex; flex-direction: column; position: relative; flex-shrink: 0; }

        .zalo-toolbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); flex-shrink: 0; }

        .z-tool-icon { width: 24px; height: 24px; color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }

        .z-tool-icon svg { width: 20px; height: 20px; fill: currentColor; }

        .z-tool-icon:hover { color: var(--primary); }


        .zalo-input-area { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-shrink: 0; }

        .zalo-input-box { flex: 1; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 12px; display: flex; align-items: center; }

        .chat-input { background: none; border: none; color: var(--text-main); font-size: 14px; outline: none; width: 100%; resize: none; max-height: 100px; line-height: 1.5; padding: 4px 0; display: block; }

        .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }

        
        .send-submit-btn { background: var(--primary); color: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: 0.2s; border: none; width: 38px; height: 38px; flex-shrink: 0; }

        .send-submit-btn:hover { background: color-mix(in srgb, var(--primary) 85%, #000); }


        .emoji-panel { position: absolute; bottom: 110px; left: 16px; background: #181c24; border: 1px solid #334155; border-radius: 12px; display: none; flex-direction: column; box-shadow: 0 15px 35px rgba(0,0,0,0.5); z-index: 100; width: 340px; max-width: 90vw; overflow: hidden; }

        .zalo-popup-tabs { display: flex; border-bottom: 1px solid #334155; background: #11151c; }

        .zp-tab { flex: 1; text-align: center; padding: 10px; font-size: 12px; font-weight: 700; color: var(--text-sub); cursor: pointer; transition: 0.2s; }

        .zp-tab.active { color: #ffffff; border-bottom: 2px solid var(--primary); background: #181c24; }

        
        .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 220px; overflow-y: auto; padding: 10px; }

        .emoji-cell { font-size: 20px; cursor: pointer; text-align: center; padding: 4px; border-radius: 6px; transition: 0.1s; user-select: none; }

        .emoji-cell:hover { background: rgba(255,255,255,0.1); transform: scale(1.2); }


        .sticker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 200px; overflow-y: auto; padding: 10px; }

        .sticker-item { width: 100%; height: 90px; object-fit: contain; cursor: pointer; border-radius: 8px; background: rgba(0,0,0,0.05); transition: transform 0.15s; }

        .sticker-item:hover { transform: scale(1.05); }


        .zalo-popup-footer { display: flex; justify-content: space-around; align-items: center; padding: 8px; background: #11151c; border-top: 1px solid #334155; font-size: 16px; color: var(--text-sub); }

        .zalo-popup-footer span { cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: 0.2s; }

        .zalo-popup-footer span:hover { background: rgba(255,255,255,0.1); color: white; }


        .right-info-panel { width: 280px; background: var(--bg-sidebar); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: 0.3s ease; overflow: hidden; display: none; z-index: 35; height: 100%; }

        .right-info-panel.show { display: flex; }

        
        .panel-top { padding: 16px; text-align: center; border-bottom: 1px solid var(--border-color); position: relative; flex-shrink: 0; }

        .panel-avt { width: 50px; height: 50px; background: var(--primary); color: white; border-radius: 50%; font-size: 20px; font-weight: bold; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

        .panel-avt img { width: 100%; height: 100%; object-fit: cover; }

        .panel-body { padding: 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }


        .panel-section-box { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; position: relative; }

        .panel-section-title { font-size: 11px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; margin-bottom: 6px; }

        .add-box { display: flex; gap: 6px; position: relative; }

        .add-input { flex: 1; padding: 7px 10px; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); font-size: 12px; outline: none; min-width: 0; }

        .add-btn { background: #10b981; color: white; border: none; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

        .add-btn:hover { background: #059669; }


        .search-suggestions-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; max-height: 150px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

        .suggestion-item { padding: 8px 12px; font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }

        .suggestion-item:hover { background: var(--hover-bg); }


        .member-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; }

        .member-list-wrapper { display: none; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 180px; overflow-y: auto; padding-right: 4px; }

        .member-list-wrapper.show { display: flex; }

        
        .member-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: rgba(255,255,255,0.02); border-radius: 8px; font-size: 12px; }

        .member-left { display: flex; align-items: center; gap: 8px; min-width: 0; }

        .member-dot { width: 24px; height: 24px; background: #334155; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; overflow: hidden; }

        .member-dot img { width: 100%; height: 100%; object-fit: cover; }

        .kick-btn { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 11px; flex-shrink: 0; }


        .admin-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); justify-content: center; align-items: center; padding: 10px; }

        .admin-modal-content { background: var(--bg-card, #1e293b); width: 1100px; max-width: 100%; height: 85vh; max-height: 95vh; border-radius: 16px; border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }

        .admin-modal-header { height: 56px; background: var(--bg-header); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; padding: 0 16px; font-weight: 700; font-size: 15px; flex-shrink: 0; }

        .admin-modal-body { padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

        .admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; flex-wrap: wrap; }

        .atab-btn { background: none; border: none; padding: 6px 12px; font-weight: 700; color: var(--text-sub); cursor: pointer; border-radius: 6px; font-size: 12px; }

        .atab-btn.active { background: var(--primary, #f59e0b); color: white; }

        .atab-pane { display: none; flex-direction: column; gap: 14px; }

        .atab-pane.active { display: flex; }

        
        .table-responsive { width: 100%; overflow-x: auto; }

        .admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; min-width: 550px; }

        .admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); }

        .admin-table th { font-weight: 700; color: var(--text-sub); text-transform: uppercase; font-size: 10px; background: rgba(255,255,255,0.02); }


        .msg-mgmt-container { display: flex; height: 60vh; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--input-bg); }

        .msg-mgmt-sidebar { width: 260px; border-right: 1px solid var(--border-color); overflow-y: auto; background: var(--bg-sidebar); }

        .msg-mgmt-room-item { padding: 12px 16px; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .msg-mgmt-room-item:hover { background: var(--hover-bg); }

        .msg-mgmt-room-item.active { background: var(--active-bg); color: white; }

        .msg-mgmt-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }


        .sub-modal { display: none; position: fixed; z-index: 2500; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; padding: 12px; }

        .sub-modal-box { background: var(--bg-card, #1e293b); padding: 20px; border-radius: 12px; width: 380px; max-width: 100%; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; }


        .image-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); justify-content: center; align-items: center; }

        .image-modal img { max-width: 90vw; max-height: 90vh; border-radius: 12px; object-fit: contain; }

        .modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }

    
        /* ===== THEME FIX: Admin + all modal surfaces ===== */
        :root[data-theme="light"] .admin-modal { background: rgba(15, 23, 42, 0.28); }

        :root[data-theme="light"] .admin-modal-content,
        :root[data-theme="light"] .admin-modal-body,
        :root[data-theme="light"] .atab-pane,
        :root[data-theme="light"] .admin-table,
        :root[data-theme="light"] .msg-mgmt-container,
        :root[data-theme="light"] .msg-mgmt-content {
            color: var(--text-main);
        }

        :root[data-theme="light"] .admin-modal-content { background: #ffffff !important; }

        :root[data-theme="light"] .admin-modal-body { background: #f8fafc !important; }

        :root[data-theme="light"] .admin-tabs { background: #ffffff; }

        :root[data-theme="light"] .admin-table th { background: #f1f5f9 !important; color: #64748b !important; }

        :root[data-theme="light"] .admin-table td { color: #0f172a; }

        :root[data-theme="light"] .msg-mgmt-container { background: #f8fafc !important; }

        :root[data-theme="light"] .msg-mgmt-sidebar { background: #ffffff !important; }

        :root[data-theme="light"] .msg-mgmt-room-item { color: #0f172a; }

        :root[data-theme="light"] .sub-modal-box { background: #ffffff !important; color: #0f172a; }

        :root[data-theme="light"] .settings-popup-menu { background: #ffffff !important; }

        :root[data-theme="light"] .menu-item { color: #0f172a; }

        :root[data-theme="light"] .menu-item:hover { background: #f1f5f9; }

        :root[data-theme="light"] .zalo-toolbar { border-bottom-color: #e2e8f0; }

        :root[data-theme="light"] .chat-input { color: #0f172a; }

        :root[data-theme="light"] .chat-input::placeholder { color: #94a3b8; }


        /* Message action buttons */
        .message-copy-btn { border: 0; background: transparent; color: var(--text-sub); cursor: pointer; padding: 3px 6px; border-radius: 6px; font-size: 12px; }

        .message-copy-btn:hover { background: var(--hover-bg); color: var(--text-main); }

        .msg-actions { display: flex; align-items: center; gap: 3px; margin-top: 3px; }

        .copy-ok { color: #10b981 !important; }


    
        /* Light theme: override remaining dark-only popups/panels so the whole workspace follows one theme. */
        :root[data-theme="light"] #replyPreviewBar { background: var(--bg-header) !important; color: var(--text-main) !important; }

        :root[data-theme="light"] .emoji-panel { background: #ffffff !important; border-color: var(--border-color) !important; box-shadow: 0 15px 35px rgba(15,23,42,.18); }

        :root[data-theme="light"] .zalo-popup-tabs,
        :root[data-theme="light"] .zalo-popup-footer { background: #f8fafc !important; border-color: var(--border-color) !important; }

        :root[data-theme="light"] .zp-tab.active { background: #ffffff !important; color: var(--text-main) !important; }

        :root[data-theme="light"] .action-icon-btn { background: rgba(15,23,42,.06); }

        :root[data-theme="light"] .reply-quote-box { background: #eef2f7; }

        :root[data-theme="light"] .member-row { background: rgba(15,23,42,.025); }

        :root[data-theme="light"] .room-avt.is-group,
        :root[data-theme="light"] .group-grid-avt { background: #e2e8f0; }

        :root[data-theme="light"] .emoji-cell:hover,
        :root[data-theme="light"] .zalo-popup-footer span:hover { background: rgba(15,23,42,.07); color: var(--text-main); }


.message-notification-popup{position:fixed;top:auto;right:18px;bottom:18px;z-index:100000;width:min(380px,calc(100vw - 30px));display:none;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 12px 35px rgba(0,0,0,.35);cursor:pointer;animation:notifInBottom .22s ease-out}
.mnp-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:white;font-size:20px;flex-shrink:0}
.mnp-content{min-width:0;flex:1}
.mnp-title{font-weight:700;font-size:13px}
.mnp-body{color:var(--text-sub);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnp-close{border:0;background:transparent;color:var(--text-sub);font-size:20px;cursor:pointer}
@keyframes notifInBottom{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}


/* ===== ZALO-LIKE @MENTION SUGGESTIONS ===== */
.mention-suggestions{
  position:absolute;left:16px;bottom:92px;width:min(330px,calc(100% - 32px));max-height:280px;overflow-y:auto;
  display:none;padding:6px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);z-index:300;
}

.mention-suggestion-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:transparent;color:var(--text-main);text-align:left;border-radius:10px;cursor:pointer}

.mention-suggestion-item:hover,.mention-suggestion-item.active{background:var(--hover-bg)}

.mention-suggestion-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:700;overflow:hidden;flex:0 0 34px}

.mention-suggestion-avatar img{width:100%;height:100%;object-fit:cover}

.mention-suggestion-info{display:flex;flex-direction:column;min-width:0;line-height:1.2}

.mention-suggestion-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mention-suggestion-info small{font-size:11px;color:var(--text-sub);margin-top:3px}

.message-mention{color:var(--primary-hover, var(--primary));font-weight:700;background:rgba(251,146,60,.10);border-radius:4px;padding:0 2px}

:root[data-theme="light"] .mention-suggestions{background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.16)}

:root[data-theme="light"] .message-mention{color:#0369a1;background:rgba(14,165,233,.10)}


/* ===== V22 FINAL MOBILE/PWA HARDENING ===== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100svh;
}

/* In a normal browser the OS/browser address bar cannot legally be hidden.
   Installed PWA (manifest display=standalone) removes browser chrome. */
@media (display-mode: standalone) {
    body {
        min-height: 100dvh;
    }
}


    
/* Typing indicator - Zalo-like, always visible above composer */
.typing-hint{
  min-height:22px; padding:3px 16px 5px; font-size:12px; line-height:16px;
  color:var(--text-sub); font-style:italic; display:none; flex:0 0 auto;
  background:var(--bg-card); position:relative; z-index:25;
}

.typing-hint::before{content:'• • •'; display:inline-block; margin-right:6px; letter-spacing:2px; animation:typingDots 1.2s infinite ease-in-out;}

@keyframes typingDots{0%,100%{opacity:.35}50%{opacity:1}}


/* ===== V5 message edit/delete/read details ===== */
.msg-status-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    font: inherit;
    color: var(--text-sub, #94a3b8);
    transition: background .18s ease, color .18s ease;
}

.msg-status-button:hover {
    background: color-mix(in srgb, var(--primary) .10, transparent);
    color: var(--primary, #f59e0b);
}

.danger-action:hover {
    color: #ef4444 !important;
    background: rgba(239,68,68,.10) !important;
}

.deleted-message {
    color: var(--text-sub, #94a3b8);
    font-style: italic;
    opacity: .9;
    padding: 2px 0;
}

.edited-label {
    color: var(--text-sub, #94a3b8);
    font-size: 10px;
    margin-left: 4px;
    opacity: .85;
}

.message-info-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}

.message-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
}

.message-info-card {
    position: relative;
    width: min(430px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 32px));
    overflow: auto;
    background: var(--bg-card, #151c2e);
    color: var(--text-main, #f8fafc);
    border: 1px solid var(--border-color, #273449);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    padding: 16px;
}

.message-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.message-info-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(148,163,184,.12);
    color: var(--text-main, #f8fafc);
    font-size: 22px;
    cursor: pointer;
}

.message-info-preview {
    background: var(--input-bg, #0b0f19);
    border: 1px solid var(--border-color, #273449);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    word-break: break-word;
    white-space: pre-wrap;
    max-height: 110px;
    overflow: auto;
}

.message-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-info-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 12px;
    background: rgba(148,163,184,.06);
}

.message-info-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) .16, transparent);
    font-weight: 700;
}

.message-info-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-info-user-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.message-info-user-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-info-user-main small {
    color: var(--text-sub, #94a3b8);
    font-size: 11px;
}

.message-info-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    font-weight: 600;
}

.message-info-status small {
    color: var(--text-sub, #94a3b8);
    font-size: 10px;
    margin-top: 2px;
}

.message-info-status.seen { color: var(--primary, #f59e0b); }

.message-info-status.delivered { color: #64748b; }

.message-info-status.pending { color: #94a3b8; }

.message-info-empty {
    text-align: center;
    color: var(--text-sub, #94a3b8);
    padding: 20px;
}

.message-info-bottom-close {
    width: 100%;
    margin-top: 14px;
    border: 0;
    border-radius: 11px;
    padding: 10px 14px;
    background: var(--primary, #f59e0b);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}



/* =========================================================
   CHATCOMPANY V5 - RESPONSIVE PC/MOBILE LAYOUT STABILITY
   ========================================================= */
html, body {
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:none;
}


body {
  min-height:100vh;
  min-height:100dvh;
}


/* PC: keep the three-column app inside the viewport. */
.sidebar-icon,
.sidebar-menu,
.chat-main,
.right-info-panel {
  min-height:0;
}


.chat-main,
.chat-window,
.sidebar-menu,
.sidebar-scroll-content,
.right-info-panel {
  min-width:0;
}


.chat-window {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}


/* Mobile only */
@media screen and (max-width: 768px) {
  html {
    width:100%;
    height:100%;
    height:100dvh;
    overflow:hidden !important;
    background:var(--bg-main);
    overscroll-behavior:none;
  }

  body {
    width:100%;
    height:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden !important;
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    overscroll-behavior:none;
    touch-action:pan-y;
  }

  /* Bottom app navigation stays inside the actual viewport. */
  .sidebar-icon {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    min-height:calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding:0 10px env(safe-area-inset-bottom, 0px) !important;
    box-sizing:border-box !important;
    z-index:1000 !important;
    pointer-events:auto !important;
  }

  .sidebar-top,
  .sidebar-bottom,
  .nav-icons,
  .user-section {
    min-width:0;
  }

  /* List screen occupies everything above bottom navigation. */
  .sidebar-menu {
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    max-height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    z-index:20 !important;
    overflow:hidden !important;
    transform:translate3d(0,0,0);
    transition:transform .22s ease;
    pointer-events:auto;
  }

  .sidebar-menu.collapsed {
    transform:translate3d(-100%,0,0) !important;
    pointer-events:none !important;
  }

  .sidebar-scroll-content {
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    padding-bottom:12px !important;
  }

  /* Chat screen: no hidden top strip and no extra bottom gap. */
  .chat-main,
  #chatMainContainer {
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    max-height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    min-height:0 !important;
    z-index:30 !important;
    overflow:hidden !important;
    transform:translate3d(100%,0,0);
    transition:transform .22s ease;
    pointer-events:none;
  }

  .chat-main.mobile-active,
  #chatMainContainer.mobile-active {
    transform:translate3d(0,0,0) !important;
    pointer-events:auto !important;
  }

  /* When chat is open, the list must not sit on top and steal taps. */
  body:has(#chatMainContainer.mobile-active) .sidebar-menu {
    pointer-events:none !important;
  }

  .chat-header {
    flex:0 0 60px !important;
    height:60px !important;
    min-height:60px !important;
    padding:0 12px !important;
    position:relative !important;
    z-index:10 !important;
  }

  .chat-window {
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding:10px 10px 8px !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Input is part of chat-main, not fixed to the browser window. */
  .chat-input-zone {
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding-bottom:0 !important;
    position:relative !important;
    z-index:20 !important;
  }

  .zalo-toolbar {
    padding:6px 12px !important;
    gap:14px !important;
    min-height:38px !important;
  }

  .zalo-input-area {
    padding:7px 10px !important;
    padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    gap:8px !important;
  }

  .zalo-input-box {
    min-width:0 !important;
  }

  .chat-input {
    min-height:24px !important;
    max-height:96px !important;
    font-size:16px !important; /* prevents iOS auto zoom */
  }

  .send-submit-btn {
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }

  /* Image preview must remain inside the chat column. */
  #imagePreviewContainer {
    max-width:100% !important;
    overflow:hidden !important;
    flex-shrink:0 !important;
  }

  /* Emoji/GIF panels must never create a page-sized overflow. */
  .emoji-panel,
  .reaction-popup,
  .settings-popup-menu {
    max-width:calc(100vw - 20px) !important;
  }

  .emoji-panel {
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:min(42dvh,360px) !important;
    overflow-y:auto !important;
  }

  /* Right info panel behaves like a full-screen mobile sheet. */
  .right-info-panel {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:calc(60px + env(safe-area-inset-bottom,0px)) !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    z-index:1100 !important;
    overflow:hidden !important;
    transform:translate3d(100%,0,0);
  }

  .right-info-panel.show {
    transform:translate3d(0,0,0) !important;
  }

  /* Modals use dynamic viewport height, avoiding the old 100vh overflow. */
  .admin-modal,
  .image-modal,
  .sub-modal {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding:0 !important;
  }

  .admin-modal-content {
    width:100% !important;
    height:100dvh !important;
    max-width:100% !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  /* Never allow accidental horizontal page overflow. */
  * {
    max-width:100%;
  }

  img, video, canvas {
    max-width:100%;
  }
}


/* Small phones */
@media screen and (max-width:390px) {
  .sidebar-icon { height:calc(56px + env(safe-area-inset-bottom,0px)) !important; }
  .chat-main,
  #chatMainContainer {
    height:calc(100dvh - 56px - env(safe-area-inset-bottom,0px)) !important;
    max-height:calc(100dvh - 56px - env(safe-area-inset-bottom,0px)) !important;
  }
  .right-info-panel {
    bottom:calc(56px + env(safe-area-inset-bottom,0px)) !important;
  }
  .nav-icons { gap:14px !important; }
  .nav-icon { width:40px !important; height:40px !important; }
}



/* Conversation loading overlay must never cover the whole contact list. */
.conversation-loading,
.chat-loading-overlay,
#chatLoadingOverlay {
  pointer-events:none !important;
}



/* Deep conversation isolation marker */
#messagesContainer,
#chatMessages,
.messages-container,
.chat-messages {
  contain:layout paint;
}



/* Verified isolation: message list belongs to one active conversation. */
#messagesContainer[data-conversation-key],
#chatMessages[data-conversation-key],
.messages-container[data-conversation-key],
.chat-messages[data-conversation-key] {
  contain:layout paint;
}





/* Admin message action buttons */
.admin-message-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.admin-action-button{appearance:none;border:1px solid transparent;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;line-height:1;cursor:pointer;color:#fff;white-space:nowrap}.admin-action-edit{background:var(--primary)}.admin-action-toggle{background:color-mix(in srgb, var(--primary) 85%, #000)}.admin-action-delete{background:#dc2626}.admin-action-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.admin-action-button:focus-visible{outline:3px solid rgba(251,146,60,.4);outline-offset:2px}.admin-status-hidden{color:#ef4444;font-weight:700}.admin-status-visible{color:#10b981;font-weight:700}.admin-empty-cell{text-align:center;color:var(--text-sub);padding:24px!important}

/* User presence indicators */
.room-avt-wrap,.member-dot-wrap{position:relative;display:inline-flex;flex-shrink:0}.room-avt-wrap .room-avt{position:relative}.presence-dot{display:block;width:9px;height:9px;border-radius:50%;border:2px solid var(--panel-bg,#fff);position:absolute;right:-1px;bottom:0;z-index:2;box-sizing:content-box}.presence-dot.online{background:#22c55e}.presence-dot.offline{background:#94a3b8}.presence-label{font-size:10px;font-weight:600}.online-text{color:#16a34a}.offline-text{color:#94a3b8}.member-dot-wrap{width:28px;height:28px}.member-dot-wrap .member-dot{width:24px;height:24px}.member-dot-wrap .presence-dot{right:0;bottom:0;width:7px;height:7px}.member-name-wrap{display:flex;flex-direction:column;min-width:0;line-height:1.2}.room-info .presence-label{margin-right:2px}
:root[data-theme="dark"] .presence-dot{border-color:#0f172a}

/* Presence visual state: online = green, offline = gray. */
.online-name { color: #22c55e !important; }
.offline-name { color: #94a3b8 !important; }
.presence-avatar-online { background: #16a34a !important; border-color: #22c55e !important; box-shadow: 0 0 0 1px rgba(34,197,94,.25); }
.presence-avatar-offline { background: #64748b !important; border-color: #94a3b8 !important; box-shadow: none; }
.room-avt.presence-avatar-online img,
.room-avt.presence-avatar-offline img,
.member-dot.presence-avatar-online img,
.member-dot.presence-avatar-offline img { border: 2px solid currentColor; }
.presence-avatar-online img { border-color: #22c55e !important; }
.presence-avatar-offline img { border-color: #94a3b8 !important; }


/* ===== V5.3 Zalo-like emoji composer polish ===== */
.emoji-panel{
  width:390px !important;
  max-width:min(92vw,390px) !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.25) !important;
  background:var(--bg-card,#fff) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
  overflow:hidden !important;
}
.zalo-popup-tabs{
  min-height:48px !important;
  padding:0 6px !important;
  align-items:stretch !important;
}
.zp-tab{
  padding:14px 10px !important;
  font-size:12px !important;
  letter-spacing:.35px !important;
}
.emoji-grid{
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:3px !important;
  max-height:280px !important;
  padding:12px !important;
}
.emoji-cell{
  min-width:40px !important;
  min-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:27px !important;
  padding:3px !important;
  border-radius:10px !important;
  line-height:1 !important;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease !important;
}
.emoji-cell:hover,
.emoji-cell:focus-visible{
  background:color-mix(in srgb, var(--primary) .12, transparent) !important;
  transform:scale(1.16) !important;
  outline:none !important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--primary) .12, transparent) !important;
}
.sticker-grid{
  gap:10px !important;
  max-height:270px !important;
  padding:12px !important;
}
.sticker-item{
  height:110px !important;
  border-radius:14px !important;
}
.zalo-popup-footer{
  min-height:46px !important;
  padding:7px 10px !important;
}
.zalo-popup-footer span{
  font-size:20px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
}
.z-tool-icon{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background .15s ease,transform .15s ease !important;
}
.z-tool-icon svg{
  width:23px !important;
  height:23px !important;
}
.z-tool-icon:hover{
  background:color-mix(in srgb, var(--primary) .12, transparent) !important;
  transform:translateY(-1px) !important;
}
@media (max-width:700px){
  .emoji-panel{
    left:8px !important;
    right:8px !important;
    bottom:calc(100% + 8px) !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(55dvh,430px) !important;
    border-radius:18px !important;
  }
  .emoji-grid{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    max-height:min(38dvh,300px) !important;
    padding:10px !important;
  }
  .emoji-cell{
    min-width:40px !important;
    min-height:40px !important;
    font-size:27px !important;
  }
  .sticker-item{height:92px !important;}
}

/* =========================================================
   V5.3 FINAL CHAT POLISH
   1) White Zalo-style reaction picker with soft dark shadow.
   2) Dark theme composer uses white input + dark text for readability.
   ========================================================= */

/* Reaction picker: clean white pill, never a dark overlay */
.reaction-popup.zalo-reaction-picker-v2{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 4px 12px rgba(0,0,0,.12) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.reaction-popup.zalo-reaction-picker-v2 .reaction-choice{
  background:transparent !important;
  color:#111827 !important;
  -webkit-text-fill-color:initial !important;
}
.reaction-popup.zalo-reaction-picker-v2 .reaction-choice:hover,
.reaction-popup.zalo-reaction-picker-v2 .reaction-choice:focus-visible{
  background:color-mix(in srgb, var(--primary) .12, transparent) !important;
  box-shadow:none !important;
}
.reaction-popup.zalo-reaction-picker-v2 .reaction-picker-close{
  color:#64748b !important;
  background:transparent !important;
}
.reaction-popup.zalo-reaction-picker-v2 .reaction-picker-close:hover,
.reaction-popup.zalo-reaction-picker-v2 .reaction-picker-close:focus-visible{
  color:#334155 !important;
  background:rgba(15,23,42,.06) !important;
}

/* The reaction badge remains white and readable in dark mode. */
:root[data-theme="dark"] .msg-bubble-wrapper > .reactions-badge{
  background:#ffffff !important;
  color:#111827 !important;
  border-color:rgba(15,23,42,.10) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.28) !important;
}

/* Dark theme: deliberately keep the typing area white so typed text is
   always visible, just like a familiar mobile chat composer. */
:root[data-theme="dark"] .zalo-input-box{
  background:#ffffff !important;
  border-color:#e2e8f0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}
:root[data-theme="dark"] .chat-input{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  caret-color:var(--primary) !important;
  background:transparent !important;
}
:root[data-theme="dark"] .chat-input::placeholder{
  color:#94a3b8 !important;
  opacity:1 !important;
}

/* Make the composer input consistent on iOS Safari. */
.chat-input{
  -webkit-appearance:none;
  appearance:none;
  text-shadow:none !important;
}

/* Emoji/sticker chooser: white surface in both themes, with a soft shadow
   so it reads as a floating panel instead of a dark block over the chat. */
.emoji-panel{
  background:#ffffff !important;
  color:#111827 !important;
  border-color:rgba(15,23,42,.10) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.22),0 4px 12px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.emoji-panel .zalo-popup-tabs,
.emoji-panel .zalo-popup-footer{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
}
.emoji-panel .zp-tab{
  color:#64748b !important;
}
.emoji-panel .zp-tab.active{
  color:#111827 !important;
  background:#ffffff !important;
}
.emoji-panel .emoji-cell:hover,
.emoji-panel .zalo-popup-footer span:hover{
  background:color-mix(in srgb, var(--primary) .10, transparent) !important;
  color:#111827 !important;
}


/* V7.8 presence state: active/idle/busy/offline. Only presence visuals. */
.presence-dot.idle{background:var(--primary)}.presence-dot.busy{background:#ef4444}.presence-dot.offline{background:#94a3b8}
.idle-name{color:var(--primary) !important}.busy-name{color:#ef4444 !important}.idle-text{color:color-mix(in srgb, var(--primary) 85%, #000) !important}.busy-text{color:#dc2626 !important}
.presence-avatar-idle{background:var(--primary) !important;border-color:#fbbf24 !important;box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) .22, transparent)}
.presence-avatar-busy{background:#ef4444 !important;border-color:#f87171 !important;box-shadow:0 0 0 1px rgba(239,68,68,.22)}
.presence-dot-inline.idle{background:var(--primary)}.presence-dot-inline.busy{background:#ef4444}.presence-dot-inline.offline{background:#94a3b8}.presence-dot-inline.active{background:#22c55e}