/* Shared theme tokens */
        :root {
            color-scheme: light;
            --bg: #f5f6f7;
            --surface: #fff;
            --surface2: #f5f5f5;
            --surface3: #ebebeb;
            --surface4: #e0e0e0;
            --text: #1a1a1a;
            --text2: #666;
            --text3: #7a7a7a;
            --accent: #12b7f5;
            --accent2: #0ea5e0;
            --accent-glow: rgba(18,183,245,0.1);
            --accent-strong: rgba(18,183,245,0.12);
            --danger: #e74c3c;
            --danger2: #c0392b;
            --online: #07c160;
            --badge: #ff3b30;
            --border: #e5e5e5;
            --border2: #d4d4d4;
            --incoming: #fff;
            --incoming-hover: #fafafa;
            --overlay: rgba(0,0,0,0.4);
            --icon: #777;
            --announcement-bg-start: #fff8e1;
            --announcement-bg-end: #fff3cd;
            --announcement-border: #ffe082;
            --announcement-text: #8d6e00;
            --announcement-muted: #9a8528;
            --sidebar-w: 280px;
            --radius: 10px;
            --radius-sm: 8px;
            --radius-lg: 14px;
            --radius-xl: 18px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
        }

        /* Login/register page */
        body.auth-page { align-items:center; justify-content:center; background:var(--bg); }
        .auth-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:36px 28px; width:min(360px, calc(100vw - 32px)); box-shadow:var(--shadow); }
        .auth-box h2 { font-size:20px; color:var(--text); text-align:center; margin-bottom:24px; font-weight:600; }
        .auth-box input { width:100%; padding:12px 14px; margin:8px 0; border:1px solid var(--border2); border-radius:8px; font-size:15px; outline:none; transition:border .2s; background:var(--surface2); color:var(--text); }
        .auth-box input:focus { border-color:var(--accent); background:var(--surface); }
        .auth-box input::placeholder { color:var(--text3); }
        .auth-box button { width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; margin-top:12px; transition:opacity .2s; }
        .auth-box button:hover { opacity:0.88; }
        .auth-box button:disabled { opacity:0.5; cursor:not-allowed; }
        .auth-box .hint { text-align:center; margin-top:16px; font-size:13px; color:var(--text3); }
        .auth-box .hint a { color:var(--accent); cursor:pointer; text-decoration:none; }
        .auth-box .hint a:hover { text-decoration:underline; }
        .error { color:var(--danger); font-size:13px; margin:4px 0; text-align:center; min-height:20px; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; background:var(--bg); height:100vh; overflow:hidden; display:flex; user-select:none; -webkit-user-select:none; color:var(--text); }
        *, *::before, *::after { -webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:rgba(0,0,0,0); }
        button, [role="button"], input, textarea, select, a, div[onclick], .nav-item, .search-result-item, .friend-context-menu div, .bubble-popup div, .group-member-item, .user-check-item { -webkit-tap-highlight-color:transparent; }
        button:focus, input:focus, textarea:focus, select:focus, a:focus, div:focus { outline:none; }
        @media (hover:hover) { button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } }
        .bubble, .bubble * { user-select:text; -webkit-user-select:text; }
        .modal-box input, .sidebar-search input, #messageInput { user-select:text; -webkit-user-select:text; }
        .nav-section-title, .sidebar-logo, .chat-header, .msg-name, .msg-time, .msg-footer, .sys-notice, .quote-bar, .room-title, .room-subtitle, .sidebar-footer, .nav-item, .input-area, .date-divider, .nav-name, .nav-preview, .nav-note, .modal-box h3, .modal-box p, .online-text, .header-right, .preview-title, .preview-info, .file-name, .file-size, .clear-chat-btn, .create-group-btn, .back-to-bottom, .friend-context-menu, .hamburger-btn, .section-badge, .pin-icon, .preview-btns button, .search-result-item, .friend-req-item, .user-check-item, .tool-btn, .send-btn, .sys-close, .group-menu-btn { user-select:none; -webkit-user-select:none; }
        ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
        ::-webkit-scrollbar-thumb:hover { background:var(--text3); }

        .sidebar { width:var(--sidebar-w); max-width:100vw; height:100vh; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; z-index:10; transition:left .3s; }
        .sidebar-search { width:100%; min-width:0; padding:18px 16px 14px; position:relative; overflow:hidden; }
        .sidebar-search input { display:block; width:100%; min-width:0; max-width:100%; padding:8px 14px 8px 34px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; background-color:var(--surface2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E"); background-position:10px center; background-repeat:no-repeat; transition:border-color .2s, background-color .2s; color:var(--text); }
        .sidebar-search input::placeholder { color:var(--text3); }
        .sidebar-search input:focus { border-color:var(--accent); background-color:var(--surface); }
        .search-submit-row { display:flex; width:100%; min-width:0; gap:8px; }
        .search-submit-row input { flex:1; width:auto; }
        .search-submit-row button { flex:0 0 auto; border:0; border-radius:8px; padding:0 12px; background:var(--accent); color:#fff; cursor:pointer; }
        .search-submit-row button:disabled { opacity:.55; cursor:not-allowed; }
        .sidebar-nav { flex:1; overflow-y:auto; padding:0 10px; }
        .nav-section { margin-bottom:8px; }
        .nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:all .12s; margin:1px 0; position:relative; }
        .nav-item:hover { background:var(--surface2); }
        .nav-item.active { background:rgba(18,183,245,0.08); }
        .nav-item .nav-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:15px; }
        .nav-item .nav-info { flex:1; min-width:0; }
        .nav-item .nav-name { font-size:14px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; }
        .nav-item .nav-preview { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
        .nav-item .nav-badge { display:inline-block; background:var(--badge); color:#fff; font-size:10px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; flex-shrink:0; font-weight:600; }
        .nav-item .nav-online { display:inline-block; color:var(--text3); font-size:10px; flex-shrink:0; margin-left:4px; opacity:0.7; }
        .nav-item .nav-note { font-size:11px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .nav-item .pin-icon { font-size:10px; flex-shrink:0; margin-left:2px; opacity:0.7; }
        .nav-item .nav-channel-icon { width:32px; height:32px; border-radius:8px; background:var(--surface2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text3); }
        .nav-item.active .nav-channel-icon { background:var(--accent); color:#fff; }
        .nav-item .nav-channel-icon svg { fill:currentColor; }
        .nav-item.active .nav-name { color:var(--accent); }
        .create-group-btn { display:block; width:100%; padding:9px; margin:4px 0; border:1.5px dashed var(--border2); border-radius:8px; background:none; color:var(--text2); font-size:13px; cursor:pointer; transition:all .2s; }
        .create-group-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(18,183,245,0.04); }
        .sidebar-footer { padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; background:var(--surface); }
        .sidebar-footer .status-text { font-size:11px; cursor:pointer; padding:2px 10px; border-radius:10px; transition:all .15s; white-space:nowrap; max-width:100px; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
        .sidebar-footer .status-text:hover { background:var(--surface2); opacity:0.85; }
        .sidebar-footer .user-name { font-size:13px; color:var(--text); font-weight:500; cursor:pointer; }
        .sidebar-footer .user-name:hover { color:var(--accent); }
        .sidebar-footer .my-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:13px; cursor:pointer; }
        .profile-title-card { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0 0 14px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(135deg,var(--accent-glow),var(--surface2)); }
        .profile-title-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#d59b18; background:rgba(213,155,24,.14); font-size:16px; }
        .profile-title-caption { font-size:11px; color:var(--text3); }
        .profile-title-value { margin-top:2px; color:var(--accent); font-weight:700; font-size:14px; }
        .role-title-badge { display:inline-flex; align-items:center; margin-left:5px; padding:1px 6px; border-radius:5px; background:var(--accent-glow); color:var(--accent); font-size:10px; font-weight:600; vertical-align:middle; }
        .admin-center-btn { flex-shrink:0; padding:5px 9px; border:1px solid var(--border2); border-radius:6px; background:var(--surface2); color:var(--text); font-size:12px; cursor:pointer; }
        .admin-center-btn:hover { border-color:var(--accent); color:var(--accent); }
        .admin-user-row, .admin-audit-row { margin:6px 0; padding:9px 10px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface2); line-height:1.7; }
        .admin-user-row > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
        .admin-user-row button, .admin-tabs button { padding:6px 10px; border:1px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }
        .admin-user-row button:hover, .admin-tabs button:hover { border-color:var(--accent); color:var(--accent); }
        .admin-tabs { display:flex; gap:6px; margin-bottom:10px; }
        #moderationModal textarea { display:block; width:100%; min-height:76px; margin-top:6px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; resize:vertical; background:var(--surface2); color:var(--text); font:inherit; }

        .main { flex:1; display:flex; flex-direction:column; height:100vh; min-width:0; background:var(--surface); position:relative; }
        .loading-bar { position:absolute; top:0; left:0; right:0; height:2px; z-index:999; pointer-events:none; opacity:0; transition:opacity .3s; }
        .loading-bar.active { opacity:1; }
        .loading-bar .bar-inner { height:100%; width:0; background:linear-gradient(90deg, #12b7f5, #0ea5e0, #12b7f5); background-size:200% 100%; animation:loadingBar 1.5s ease-in-out infinite; }
        @keyframes loadingBar { 0% { width:0; background-position:0 0; } 50% { width:60%; background-position:100% 0; } 100% { width:100%; background-position:0 0; } }
        .chat-header { padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
        .chat-header .room-title { font-size:16px; font-weight:600; color:var(--text); }
        .chat-header .room-subtitle { font-size:11px; color:var(--text3); margin-top:1px; }
        .connection-status { display:inline-flex; align-items:center; gap:4px; margin-left:6px; font-size:10px; white-space:nowrap; }
        .connection-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
        .connection-status.is-online { color:var(--online); }
        .connection-status.is-connecting { color:#d99b18; }
        .connection-status.is-offline { color:var(--danger); }
        .chat-header .header-right { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text3); }
        .messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:6px; background:var(--bg); }
        .date-divider { display:flex; align-items:center; justify-content:center; margin:14px 0 6px; color:var(--text3); font-size:11px; }
        .date-divider span { background:var(--surface); padding:3px 14px; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
        .msg-row { display:flex; gap:10px; max-width:70%; align-items:flex-start; }
        .msg-row.self { flex-direction:row-reverse; align-self:flex-end; }
        .msg-row.system { align-self:center; width:100%; display:flex; justify-content:center; margin:1px 0; }
        .msg-row.system .sys-notice { display:inline-flex; align-items:center; gap:4px; color:var(--text3); font-size:11px; padding:0; animation:sysMsgIn .25s ease; }
        @keyframes sysMsgIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
        .msg-row.system .sys-close { cursor:pointer; line-height:1; color:var(--text3); padding:2px 4px; border-radius:50%; transition:all .15s; flex-shrink:0; opacity:0; display:flex; align-items:center; }
        .msg-row.system .sys-notice:hover .sys-close { opacity:1; }
        .msg-row.system .sys-close:hover { background:var(--surface3); color:var(--text); }
        .msg-row.system .sys-close svg { fill:currentColor; }
        .msg-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; }
        .msg-body { display:flex; flex-direction:column; }
        .msg-row.self .msg-body { align-items:flex-end; }
        .msg-name { font-size:11px; color:var(--text3); margin-bottom:2px; padding:0 4px; }
        .bubble { padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; word-break:break-word; position:relative; }
        .msg-row:not(.self) .bubble { background:var(--incoming); border:1px solid var(--border); border-top-left-radius:2px; color:var(--text); box-shadow:var(--shadow-sm); }
        .msg-row:not(.self) .bubble:hover { background:var(--incoming-hover); }
        .self .bubble { background:var(--accent); border-top-right-radius:2px; color:#fff; box-shadow:0 1px 2px rgba(18,183,245,0.2); }
        .self .bubble:hover { background:var(--accent2); }
        .msg-row.self .bubble.recalled { background:transparent; border:1px dashed var(--border2); color:var(--text3); cursor:default; }
        .msg-row.self .bubble.recalled:hover { background:transparent; }
        .msg-row:not(.self) .bubble.recalled { background:transparent; border:1px dashed var(--border2); color:var(--text3); cursor:default; }
        .msg-row:not(.self) .bubble.recalled:hover { background:transparent; }
        .bubble img { max-width:240px; max-height:240px; border-radius:8px; cursor:pointer; display:block; margin:6px 0; }
        .file-attach { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.04); padding:8px 10px; border-radius:6px; margin:4px 0; cursor:pointer; transition:background .15s; }
        .file-attach:hover { background:rgba(0,0,0,0.08); }
        .self .file-attach { background:rgba(255,255,255,0.15); }
        .self .file-attach:hover { background:rgba(255,255,255,0.25); }
        .file-attach .file-icon { flex-shrink:0; width:32px; height:32px; border-radius:6px; background:rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:center; }
        .file-attach .file-icon svg { width:16px; height:16px; fill:var(--text2); }
        .self .file-attach .file-icon { background:rgba(255,255,255,0.2); }
        .self .file-attach .file-icon svg { fill:#fff; }
        .file-attach .file-info { flex:1; min-width:0; }
        .file-attach .file-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .file-attach .file-size { font-size:11px; opacity:0.6; }
        .self .file-attach .file-name, .self .file-attach .file-size { color:#fff; }
        .quote-block { background:rgba(0,0,0,0.04); padding:6px 10px; margin-bottom:6px; border-radius:4px; font-size:12px; color:var(--text2); }
        .self .quote-block { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.85); }
        .msg-link { color:var(--accent); text-decoration:underline; word-break:break-all; }
        .self .msg-link { color:#fff; text-decoration:underline; }
        .msg-time { font-size:10px; color:var(--text3); margin-top:3px; padding:0 4px; }
        .self .msg-time { text-align:right; }
        .msg-footer { display:flex; gap:3px; margin-top:3px; padding:0 4px; flex-wrap:wrap; opacity:0; transition:opacity .15s; }
        .msg-row.self .msg-footer { justify-content:flex-end; }
        .msg-row:hover .msg-footer { opacity:1; }
        .msg-footer button { background:transparent; border:none; color:var(--text3); font-size:10px; cursor:pointer; padding:2px 6px; border-radius:3px; transition:all .15s; white-space:nowrap; }
        .msg-footer button:hover { background:var(--surface3); color:var(--text); }
        .highlight-mention { background:rgba(255,200,0,0.2); border-radius:3px; padding:0 2px; color:#e6a800; }

        .friend-more-btn { display:none; width:28px; height:28px; border-radius:50%; border:none; background:transparent; cursor:pointer; flex-shrink:0; align-items:center; justify-content:center; transition:background .12s; }
        .friend-more-btn:hover { background:var(--surface3); }
        .friend-more-btn svg { width:16px; height:16px; fill:var(--text3); }
        @media (max-width:768px) { .friend-more-btn { display:flex; } }
        .nav-item-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }

        .menu-icon { width:14px; height:14px; margin-right:6px; vertical-align:middle; flex-shrink:0; }
        .friend-context-menu div, .bubble-popup div { display:flex; align-items:center; }
        .friend-context-menu div svg.menu-icon, .bubble-popup div svg.menu-icon { fill:currentColor; }

        .quote-bar { display:none; padding:8px 16px; background:var(--surface2); border-bottom:1px solid var(--border); align-items:center; gap:10px; font-size:12px; color:var(--text2); }
        .quote-bar.active { display:flex; }
        .quote-bar .quote-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .quote-bar .quote-close { cursor:pointer; color:var(--text3); background:none; border:none; line-height:1; padding:2px 4px; transition:color .15s; display:flex; align-items:center; }
        .quote-bar .quote-close:hover { color:var(--danger); }
        .quote-bar .quote-close svg { fill:currentColor; }

        .input-area { display:flex; gap:6px; padding:10px 16px; background:var(--surface); border-top:1px solid var(--border); align-items:center; position:relative; }
        .input-area .tool-btn { width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:transparent; flex-shrink:0; transition:all .15s; }
        .input-area .tool-btn:hover { background:var(--surface2); }
        .input-area .tool-btn { color:var(--icon); }
        .input-area .tool-btn svg { width:20px; height:20px; }
        .input-area .tool-btn svg [fill]:not([fill="none"]) { fill:currentColor; }
        .input-area .tool-btn svg [stroke] { stroke:currentColor; }
        .input-area input { flex:1; padding:9px 14px; border:1px solid var(--border); border-radius:20px; background:var(--surface2); font-size:14px; outline:none; transition:all .2s; color:var(--text); }
        .input-area input:focus { border-color:var(--accent); background:var(--surface); }
        .input-area input::placeholder { color:var(--text3); }
        .send-btn { width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
        .send-btn:hover { background:var(--accent2); }
        .send-btn svg { width:18px; height:18px; fill:#fff; }
        .emoji-panel { display:none; position:absolute; bottom:56px; left:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px; grid-template-columns:repeat(7,1fr); gap:3px; box-shadow:var(--shadow-lg); z-index:50; }
        .emoji-panel.active { display:grid; }
        .emoji-panel span { font-size:22px; cursor:pointer; text-align:center; padding:5px; border-radius:6px; transition:background .15s; }
        .emoji-panel span:hover { background:var(--surface2); }

        .back-to-bottom { display:none; position:fixed; bottom:90px; right:24px; width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--border); cursor:pointer; align-items:center; justify-content:center; z-index:30; box-shadow:var(--shadow); transition:all .2s; }
        .back-to-bottom.show { display:flex; }
        .back-to-bottom:hover { background:var(--surface2); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
        .back-to-bottom svg { width:18px; height:18px; fill:var(--text2); }
        .back-to-bottom .count-badge { position:absolute; top:-6px; right:-6px; background:var(--badge); color:#fff; font-size:10px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 4px; font-weight:600; display:none; }
        .back-to-bottom .count-badge.show { display:block; }

        .image-preview-modal { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:var(--overlay); z-index:110; justify-content:center; align-items:center; flex-direction:column; }
        .image-preview-modal.active { display:flex; }
        .image-preview-modal .preview-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow-lg); }
        .image-preview-modal .preview-box img { max-width:70vw; max-height:50vh; border-radius:8px; object-fit:contain; }
        .image-preview-modal .preview-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:12px; }
        .image-preview-modal .preview-info { font-size:12px; color:var(--text2); margin-top:8px; }
        .image-preview-modal .preview-btns { display:flex; gap:12px; margin-top:16px; }
        .image-preview-modal .preview-btns button { padding:10px 28px; border:none; border-radius:8px; font-size:14px; cursor:pointer; font-weight:500; transition:all .2s; }
        .image-preview-modal .preview-btns button:hover { opacity:0.85; }
        .image-preview-modal .btn-send { background:var(--accent); color:#fff; }
        .image-preview-modal .btn-cancel-preview { background:var(--surface2); color:var(--text2); }

        .clear-chat-btn { background:transparent; border:none; color:var(--text3); font-size:11px; cursor:pointer; padding:4px 10px; border-radius:4px; transition:all .15s; }
        .clear-chat-btn:hover { background:var(--surface2); color:var(--danger); }

        .group-menu-btn { background:transparent; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; color:var(--text2); transition:all .15s; display:none; line-height:1; }
        .group-menu-btn:hover { background:var(--surface2); color:var(--text); }
        .group-menu-btn.show { display:inline-flex; align-items:center; justify-content:center; }
        .group-menu-btn svg { fill:currentColor; }

        .hamburger-btn { position:relative; width:38px; height:38px; border-radius:50%; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .hamburger-btn:hover { background:var(--surface2); }
        .hamburger-btn .hamburger-lines { display:flex; flex-direction:column; gap:4px; }
        .hamburger-btn .hamburger-lines span { display:block; width:18px; height:2px; background:var(--text); border-radius:1px; transition:all .2s; }
        .hamburger-badge { position:absolute; top:-2px; right:-2px; background:var(--badge); color:#fff; font-size:10px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; font-weight:600; display:none; }
        .hamburger-badge.show { display:block; }

        .mute-btn { background:transparent; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; color:var(--text2); transition:all .15s; display:none; line-height:1; }
        .mute-btn:hover { background:var(--surface2); color:var(--text); }
        .mute-btn.show { display:inline-flex; align-items:center; justify-content:center; }
        .mute-btn.muted { color:var(--danger); }
        .mute-btn svg { fill:currentColor; }
        .header-dropdown { display:none; position:absolute; top:100%; right:0; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; padding:4px; min-width:130px; }
        .header-dropdown.active { display:block; }
        .header-dropdown div { padding:8px 14px; font-size:13px; cursor:pointer; border-radius:6px; white-space:nowrap; color:var(--text); transition:background .12s; display:flex; align-items:center; gap:6px; }
        .header-dropdown div:hover { background:var(--surface3); }
        .header-dropdown .menu-danger { color:var(--danger); }
        .header-dropdown .menu-sep { height:1px; background:var(--border); margin:4px 8px; padding:0 !important; pointer-events:none; }
        .header-right { position:relative; display:flex; align-items:center; gap:4px; }

        .file-download-modal { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:var(--overlay); z-index:110; justify-content:center; align-items:center; }
        .file-download-modal.active { display:flex; }
        .file-download-modal .dl-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; min-width:300px; max-width:420px; width:90%; box-shadow:var(--shadow-lg); text-align:center; }
        .file-download-modal .dl-icon { margin-bottom:12px; }
        .file-download-modal .dl-icon svg { fill:var(--accent); }
        .file-download-modal .dl-name { font-size:15px; font-weight:600; color:var(--text); margin-bottom:4px; word-break:break-all; }
        .file-download-modal .dl-size { font-size:12px; color:var(--text3); margin-bottom:16px; }
        .file-download-modal .dl-btns { display:flex; gap:10px; justify-content:center; }
        .file-download-modal .dl-btns button { padding:10px 28px; border:none; border-radius:8px; font-size:14px; cursor:pointer; font-weight:500; transition:all .2s; }
        .file-download-modal .dl-btns button:hover { opacity:0.85; }
        .file-download-modal .btn-download { background:var(--accent); color:#fff; }
        .file-download-modal .btn-cancel-dl { background:var(--surface2); color:var(--text2); }

        .file-attach { cursor:pointer; }

        /* ===== Toast ===== */
        .toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.75); color:#fff; padding:10px 24px; border-radius:8px; z-index:999; animation:toast 2s forwards; pointer-events:none; font-size:14px; }
        @keyframes toast { 0%,100%{opacity:0;} 10%,90%{opacity:1;} }

        .modal-overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:var(--overlay); z-index:100; justify-content:center; align-items:center; }
        .modal-overlay.active { display:flex; }
        #confirmModal { z-index:200 !important; }
        #groupManageModal { z-index:100; }
        .modal-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; min-width:300px; max-width:440px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
        .modal-box h3 { font-size:16px; margin-bottom:16px; color:var(--text); font-weight:600; }
        .modal-box input { width:100%; padding:10px 14px; margin:6px 0; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; background:var(--surface2); color:var(--text); transition:border .2s; }
        .modal-box input:focus { border-color:var(--accent); }
        .modal-box .btns { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
        .modal-box button { padding:9px 22px; border:none; border-radius:6px; font-size:14px; cursor:pointer; font-weight:500; transition:all .15s; }
        .btn-cancel { background:var(--surface2); color:var(--text2); }
        .btn-cancel:hover { background:var(--surface3); }
        .btn-primary { background:var(--accent); color:#fff; }
        .btn-primary:hover { background:var(--accent2); }
        .btn-danger { background:var(--danger); color:#fff; }
        .btn-danger:hover { background:var(--danger2); }
        .user-check-list { max-height:200px; overflow-y:auto; margin:8px 0; }
        .user-check-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; color:var(--text); font-size:14px; transition:background .15s; }
        .user-check-item:hover { background:var(--surface2); }
        .user-check-item input { width:auto; margin:0; accent-color:var(--accent); }
        .default-avatars { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; }
        .default-avatar { width:44px; height:44px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .2s; }
        .default-avatar:hover { border-color:var(--accent); transform:scale(1.1); }
        .friend-req-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); margin:4px 0; background:var(--surface2); }
        .friend-req-item .req-info { flex:1; }
        .friend-req-item .req-name { font-size:14px; font-weight:500; color:var(--text); }
        .friend-req-item .req-time { font-size:11px; color:var(--text3); }
        .friend-req-item .req-actions { display:flex; gap:6px; }
        .friend-req-item .req-actions button { padding:6px 14px; border:none; border-radius:6px; font-size:13px; cursor:pointer; font-weight:500; }
        .search-result-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius); margin:2px 0; transition:background .15s; }
        .search-result-item:hover { background:var(--surface2); }
        .search-result-item .add-btn { padding:5px 14px; background:linear-gradient(135deg, var(--accent), #7B85F5); color:#fff; border:none; border-radius:6px; font-size:12px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:4px; }
        .search-result-item .add-btn svg { fill:#fff; flex-shrink:0; }
        .search-result-item .added-label { font-size:12px; color:var(--text3); white-space:nowrap; }

        .friend-context-menu { display:none; position:fixed; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; padding:4px; min-width:130px; }
        .friend-context-menu.active { display:block; }
        .friend-context-menu div { padding:8px 14px; font-size:13px; cursor:pointer; border-radius:6px; white-space:nowrap; color:var(--text); transition:background .12s; }
        .friend-context-menu div:hover { background:var(--surface3); }
        .friend-context-menu .menu-danger { color:var(--danger); }
        .friend-context-menu .menu-sep { height:1px; background:var(--border); margin:4px 8px; padding:0 !important; pointer-events:none; }

        .bubble-popup { display:none; position:fixed; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; padding:4px; min-width:120px; }
        .bubble-popup.active { display:block; }
        .bubble-popup div { padding:8px 14px; font-size:13px; cursor:pointer; border-radius:6px; white-space:nowrap; color:var(--text); transition:background .12s; }
        .bubble-popup div:hover { background:var(--surface3); }
        .bubble-popup .menu-danger { color:var(--danger); }
        .bubble-popup .menu-sep { height:1px; background:var(--border); margin:4px 8px; padding:0 !important; pointer-events:none; }
        .bubble-popup .status-option.active { background:var(--accent-glow); color:var(--accent); font-weight:500; }

        .group-member-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); margin:2px 0; color:var(--text); font-size:14px; transition:background .15s; }
        .group-member-item:hover { background:var(--surface2); }
        .group-member-item .member-avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:13px; background-size:cover; background-position:center; }
        .group-member-item .member-name { flex:1; }
        .group-member-item .member-badge { font-size:10px; background:var(--accent); color:#fff; padding:1px 6px; border-radius:4px; font-weight:600; }
        .group-member-item .member-kick { font-size:11px; color:var(--danger); cursor:pointer; padding:2px 8px; border-radius:4px; background:transparent; border:none; transition:all .15s; }
        .group-member-item .member-kick:hover { background:rgba(224,85,106,0.15); }

        @media (max-width:768px) {
            * { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; }
            button, a, div, span, input, textarea, select { -webkit-tap-highlight-color: transparent !important; }
            button:active, a:active, .nav-item:active, .friend-more-btn:active, .send-btn:active, .tool-btn:active, .clear-chat-btn:active, .group-menu-btn:active, .hamburger-btn:active, .create-group-btn:active, .friend-context-menu div:active, .bubble-popup div:active, .status-text:active, .search-result-item:active, .user-check-item:active, .group-member-item:active { background-color: transparent !important; }
            .sidebar { position:fixed; left:-100%; top:0; bottom:0; z-index:50; width:85vw; max-width:320px; }
            .sidebar.open { left:0; box-shadow:8px 0 40px rgba(0,0,0,0.6); }
            .mobile-overlay { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.5); z-index:49; }
            .mobile-overlay.active { display:block; }
            .hamburger-btn { display:flex !important; }
            .chat-header { padding:10px 14px; }
            .chat-header .room-title { font-size:15px; }
            .chat-header .room-subtitle { font-size:10px; }
            .messages { padding:12px 10px; gap:4px; }
            .msg-row { max-width:88%; }
            .msg-row.self { max-width:88%; }
            .msg-row.system { max-width:92%; }
            .msg-avatar { width:30px; height:30px; font-size:12px; }
            .bubble { padding:9px 12px; font-size:14px; }
            .bubble img { max-width:180px; max-height:180px; }
            .msg-row:not(.self) .bubble { border-top-left-radius:2px; }
            .self .bubble { border-top-right-radius:2px; }
            .msg-name { font-size:10px; }
            .msg-time { font-size:9px; }
            .msg-footer button { font-size:10px; padding:2px 6px; }
            .input-area { padding:8px 10px; gap:4px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
            .input-area input { padding:9px 14px; font-size:14px; min-width:0; }
            .input-area .tool-btn { width:34px; height:34px; min-width:34px; background:var(--surface2); border:1px solid var(--border); color:var(--icon); }
            .input-area .tool-btn:hover, .input-area .tool-btn:focus-visible { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }
            .input-area .send-btn { min-width:36px; }
            .profile-title-card { margin-bottom:12px; }
            .admin-user-row > div { gap:5px; }
            .admin-user-row button { padding:6px 8px; }
            body.keyboard-open .input-area { position:fixed; left:0; right:0; bottom:env(keyboard-inset, 0px); z-index:80; transform:translateY(-72px); }
            body.keyboard-open .messages { padding-bottom:90px; }
            .input-area .tool-btn svg { width:17px; height:17px; }
            .send-btn { width:36px; height:36px; }
            .send-btn svg { width:17px; height:17px; }
            .emoji-panel { bottom:56px; left:8px; right:8px; grid-template-columns:repeat(8,1fr); }
            .modal-box { width:92%; padding:20px; }
            .back-to-bottom { bottom:70px; right:14px; }
        }
        @media (min-width:769px) { .hamburger-btn { display:none; } }

        [data-theme="dark"] {
            color-scheme: dark;
            --bg: #0d0d0d;
            --surface: #1a1a1a;
            --surface2: #222;
            --surface3: #2a2a2a;
            --surface4: #333;
            --text: #e0e0e0;
            --text2: #aaa;
            --text3: #777;
            --accent: #4fc3f7;
            --accent2: #29b6f6;
            --accent-glow: rgba(79,195,247,0.1);
            --accent-strong: rgba(79,195,247,0.15);
            --border: #2a2a2a;
            --border2: #3a3a3a;
            --incoming: #222;
            --incoming-hover: #2a2a2a;
            --overlay: rgba(0,0,0,0.7);
            --icon: #aaa;
            --announcement-bg-start: #3d3520;
            --announcement-bg-end: #4a4020;
            --announcement-border: #5a5020;
            --announcement-text: #e0c060;
            --announcement-muted: #c0a040;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
            --shadow: 0 2px 8px rgba(0,0,0,0.6);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.7);
        }
        [data-theme="dark"] .msg-row:not(.self) .bubble { box-shadow:none; }
        [data-theme="dark"] .self .bubble { box-shadow:0 1px 2px rgba(79,195,247,0.3); border-top-right-radius:2px; }
        [data-theme="dark"] .messages { background:var(--bg); }
        [data-theme="dark"] .emoji-panel span:hover { background:var(--surface3); }
        [data-theme="dark"] .msg-row.self .bubble.recalled { background:transparent; }
        [data-theme="dark"] .msg-row:not(.self) .bubble.recalled { background:transparent; }
        [data-theme="dark"] .highlight-mention { background:rgba(255,200,0,0.25); color:#ffd54f; }

        .announcement-bar { display:none; padding:10px 16px; background:linear-gradient(135deg, var(--announcement-bg-start), var(--announcement-bg-end)); border-bottom:1px solid var(--announcement-border); font-size:13px; color:var(--announcement-text); align-items:center; gap:10px; }
        .announcement-bar.active { display:flex; }
        .announcement-bar .ann-icon { flex-shrink:0; font-size:16px; color:var(--announcement-text); }
        .announcement-bar .ann-icon svg { fill:currentColor; }
        .announcement-bar .ann-content { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .announcement-bar .ann-meta { font-size:11px; color:var(--announcement-muted); flex-shrink:0; }
        .announcement-bar .ann-close { cursor:pointer; color:var(--announcement-muted); background:none; border:none; line-height:1; padding:2px 4px; flex-shrink:0; display:flex; align-items:center; }
        .announcement-bar .ann-close:hover { color:var(--announcement-text); }
        .announcement-bar .ann-close svg { fill:currentColor; }

        .msg-search-bar { display:none; padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--border); align-items:center; gap:8px; }
        .msg-search-bar.active { display:flex; }
        .msg-search-bar input { flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; outline:none; background:var(--surface2); color:var(--text); transition:border .2s; }
        .msg-search-bar input:focus { border-color:var(--accent); }
        .msg-search-bar .search-nav { display:flex; gap:4px; }
        .msg-search-bar .search-nav button { background:var(--surface2); border:1px solid var(--border); border-radius:5px; padding:4px 8px; cursor:pointer; color:var(--text2); transition:all .15s; display:flex; align-items:center; justify-content:center; }
        .msg-search-bar .search-nav button:hover { background:var(--surface3); color:var(--text); }
        .msg-search-bar .search-nav button svg { fill:currentColor; }
        .msg-search-bar .search-count { font-size:12px; color:var(--text3); white-space:nowrap; }
        .msg-search-bar .search-close { cursor:pointer; color:var(--text3); background:none; border:none; line-height:1; display:flex; align-items:center; }
        .msg-search-bar .search-close:hover { color:var(--text); }
        .msg-search-bar .search-close svg { fill:currentColor; }
        .search-highlight { background:#ffeb3b; padding:0 2px; border-radius:2px; }
        [data-theme="dark"] .search-highlight { background:#ffeb3b; color:#1a1a1a; }

        .mention-dropdown { display:none; position:absolute; bottom:100%; left:58px; right:58px; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); z-index:60; max-height:180px; overflow-y:auto; }
        .mention-dropdown.active { display:block; }
        .mention-dropdown .mention-item { padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text); transition:background .12s; display:flex; align-items:center; gap:8px; }
        .mention-dropdown .mention-item:hover, .mention-dropdown .mention-item.selected { background:var(--surface2); }
        .mention-dropdown .mention-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:11px; }

        .edit-message-modal { display:none; position:fixed; top:0;left:0;right:0;bottom:0; background:var(--overlay); z-index:110; justify-content:center; align-items:center; }
        .edit-message-modal.active { display:flex; }
        .edit-message-modal .edit-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; width:90%; max-width:400px; box-shadow:var(--shadow-lg); }
        .edit-message-modal .edit-box h3 { font-size:15px; margin-bottom:12px; color:var(--text); }
        .edit-message-modal .edit-box textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:14px; resize:none; outline:none; background:var(--surface2); color:var(--text); font-family:inherit; min-height:80px; }
        .edit-message-modal .edit-box textarea:focus { border-color:var(--accent); }
        .edit-message-modal .edit-box .btns { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
        .edit-message-modal .edit-box .btns button { padding:8px 18px; border:none; border-radius:6px; font-size:13px; cursor:pointer; font-weight:500; }
        .msg-edited-tag { font-size:10px; color:var(--text3); margin-left:4px; font-style:italic; }
        .self .msg-edited-tag { color:rgba(255,255,255,0.6); }