*{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#f8f5ff;--bg-card:#ffffff;--bg-input:#faf8ff;
    --border:#e8e0f0;--border-focus:#d0c4f0;
    --text:#2d2b3a;--text-muted:#9892a6;--text-bright:#1a1828;
    --accent:#ff4d8a;--accent2:#6c63ff;--accent3:#36d7b7;
    --grad:linear-gradient(135deg,#ff4d8a,#c44dff);
    --grad2:linear-gradient(135deg,#6c63ff,#36d7b7);
    --grad3:linear-gradient(135deg,#ff4d8a,#ff8c42);
    --shadow:0 2px 12px rgba(108,99,255,.08);
    --shadow-lg:0 8px 32px rgba(108,99,255,.12);
    --accent-bg:rgba(255,77,138,.08);--accent-shadow:rgba(255,77,138,.28);
    --bubble-bg:#ffffff;--bubble-border:#e8e0f0;
    --bubble-text:#2d2b3a;--bubble-text-bright:#1a1828;--bubble-text-muted:#9892a6;
    --bubble-mine-bg:#ffe9f2;--bubble-mine-border:#ffd6e7;--bubble-mine-text:#2d2b3a;
    --ia-bg:#f2f3f5;--ia-border:#e5e7eb;--ia-icon:#8a9099;--ia-divider:#dcdfe3;
    --ia-field-bg:#ffffff;--ia-field-border:#e0e2e6;--ia-text:#333333;--ia-muted:#666666;--ia-placeholder:#b4b8bf;
    --ia-accent:#12b7f5;--ia-accent-hover:#0ea8e3;--ia-accent-active:#0c94c9;
    --ia-accent-weak:rgba(18,183,245,.1);--ia-accent-weaker:rgba(18,183,245,.18);
    --ia-btn-bg:#12b7f5;--ia-btn-hover:#0ea8e3;--ia-btn-active:#0c94c9;--ia-btn-disabled:#bfe8fa;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#d5d7db;--ia-btn2-border-disabled:#e3e5e8;--ia-btn2-text:#4d5155;--ia-btn2-text-disabled:#c3c7cc;
    --ia-soft:#f6f7f8;--ia-soft-active:#eceeef;--ia-voice-hover:#f5fcff;
}
body[data-theme="breeze"]{
    --bg:#eff6fb;--bg-card:#ffffff;--bg-input:#f6fbfe;
    --border:#d8e6ef;--border-focus:#b3d4ea;
    --text:#22303c;--text-muted:#7f93a3;--text-bright:#13202b;
    --accent:#0ea5e9;--accent2:#2563eb;--accent3:#14b8a6;
    --grad:linear-gradient(135deg,#0ea5e9,#2563eb);
    --grad2:linear-gradient(135deg,#2563eb,#14b8a6);
    --grad3:linear-gradient(135deg,#0ea5e9,#22d3a7);
    --shadow:0 2px 12px rgba(37,99,235,.08);--shadow-lg:0 8px 32px rgba(37,99,235,.12);
    --accent-bg:rgba(14,165,233,.1);--accent-shadow:rgba(14,165,233,.3);
    --bubble-mine-bg:#e0f2fe;--bubble-mine-border:#bae6fd;
    --ia-bg:#eef4f9;--ia-border:#dfe8ef;--ia-icon:#7d8f9d;--ia-divider:#d5dee6;
    --ia-field-bg:#ffffff;--ia-field-border:#dbe4ec;--ia-text:#22303c;--ia-muted:#5c6f7d;--ia-placeholder:#a5b6c2;
    --ia-accent:#0ea5e9;--ia-accent-hover:#0284c7;--ia-accent-active:#0369a1;
    --ia-accent-weak:rgba(14,165,233,.12);--ia-accent-weaker:rgba(14,165,233,.2);
    --ia-btn-bg:#0ea5e9;--ia-btn-hover:#0284c7;--ia-btn-active:#0369a1;--ia-btn-disabled:#a5ddf6;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#ccd9e3;--ia-btn2-border-disabled:#e2eaf1;--ia-btn2-text:#3a4a56;--ia-btn2-text-disabled:#b6c5d1;
    --ia-soft:#f0f6fa;--ia-soft-active:#e2edf5;--ia-voice-hover:#eef8fe;
}
body[data-theme="sunrise"]{
    --bg:#fdf6ef;--bg-card:#ffffff;--bg-input:#fdf9f4;
    --border:#f0e2d3;--border-focus:#e8c9a8;
    --text:#3c2f25;--text-muted:#a08d7a;--text-bright:#2a1f16;
    --accent:#f97316;--accent2:#0d9488;--accent3:#f59e0b;
    --grad:linear-gradient(135deg,#f97316,#ef4444);
    --grad2:linear-gradient(135deg,#0d9488,#f59e0b);
    --grad3:linear-gradient(135deg,#f97316,#f59e0b);
    --shadow:0 2px 12px rgba(249,115,22,.08);--shadow-lg:0 8px 32px rgba(249,115,22,.12);
    --accent-bg:rgba(249,115,22,.1);--accent-shadow:rgba(249,115,22,.3);
    --bubble-mine-bg:#ffedd5;--bubble-mine-border:#fed7aa;
    --ia-bg:#f7efe6;--ia-border:#ecdfd0;--ia-icon:#9c8875;--ia-divider:#e5d6c4;
    --ia-field-bg:#ffffff;--ia-field-border:#e9dcc9;--ia-text:#3c2f25;--ia-muted:#7d6952;--ia-placeholder:#c2ac95;
    --ia-accent:#f97316;--ia-accent-hover:#ea6c0e;--ia-accent-active:#d45d08;
    --ia-accent-weak:rgba(249,115,22,.12);--ia-accent-weaker:rgba(249,115,22,.2);
    --ia-btn-bg:#f97316;--ia-btn-hover:#ea6c0e;--ia-btn-active:#d45d08;--ia-btn-disabled:#fcd0ae;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#e2d2bf;--ia-btn2-border-disabled:#efe5d7;--ia-btn2-text:#5a4632;--ia-btn2-text-disabled:#c8b49e;
    --ia-soft:#faf3ea;--ia-soft-active:#f0e4d4;--ia-voice-hover:#fef4ea;
}
body[data-theme="midnight"]{
    --bg:#14121f;--bg-card:#1e1b2e;--bg-input:#181526;
    --border:#2e2942;--border-focus:#4a4166;
    --text:#c9c4d8;--text-muted:#7c7691;--text-bright:#ece9f6;
    --accent:#ff5c9d;--accent2:#7c6cff;--accent3:#2dd4bf;
    --grad:linear-gradient(135deg,#ff5c9d,#b44dff);
    --grad2:linear-gradient(135deg,#7c6cff,#2dd4bf);
    --grad3:linear-gradient(135deg,#ff5c9d,#ff9c5c);
    --shadow:0 2px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 32px rgba(0,0,0,.45);
    --accent-bg:rgba(255,92,157,.12);--accent-shadow:rgba(255,92,157,.35);
    --bubble-mine-bg:#efe9ff;--bubble-mine-border:#ddd2fb;
    --ia-bg:#191627;--ia-border:#2e2942;--ia-icon:#8b85a3;--ia-divider:#332e4a;
    --ia-field-bg:#221e33;--ia-field-border:#373150;--ia-text:#d5d1e4;--ia-muted:#a49dbd;--ia-placeholder:#6f6889;
    --ia-accent:#8f7dff;--ia-accent-hover:#7c6cff;--ia-accent-active:#6a59f0;
    --ia-accent-weak:rgba(124,108,255,.14);--ia-accent-weaker:rgba(124,108,255,.22);
    --ia-btn-bg:#7c6cff;--ia-btn-hover:#6a59f0;--ia-btn-active:#5b4be0;--ia-btn-disabled:#3a3457;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#3a3457;--ia-btn2-border-disabled:#302b49;--ia-btn2-text:#b9b3cf;--ia-btn2-text-disabled:#5e5878;
    --ia-soft:#241f38;--ia-soft-active:#2c2650;--ia-voice-hover:#241f38;
}
body[data-theme="forest"]{
    --bg:#0f1714;--bg-card:#16211c;--bg-input:#131c17;
    --border:#24352d;--border-focus:#3a5448;
    --text:#c4d2ca;--text-muted:#75877d;--text-bright:#e4efe8;
    --accent:#34d399;--accent2:#0ea5a5;--accent3:#a3e635;
    --grad:linear-gradient(135deg,#34d399,#0ea5a5);
    --grad2:linear-gradient(135deg,#0ea5a5,#a3e635);
    --grad3:linear-gradient(135deg,#34d399,#a3e635);
    --shadow:0 2px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 32px rgba(0,0,0,.45);
    --accent-bg:rgba(52,211,153,.12);--accent-shadow:rgba(52,211,153,.35);
    --bubble-mine-bg:#dcf5e8;--bubble-mine-border:#b9e9d2;
    --ia-bg:#131c17;--ia-border:#24352d;--ia-icon:#7e9187;--ia-divider:#2a3d34;
    --ia-field-bg:#1a2721;--ia-field-border:#2c4036;--ia-text:#d2ded7;--ia-muted:#9db2a6;--ia-placeholder:#5f7168;
    --ia-accent:#34d399;--ia-accent-hover:#2bc48c;--ia-accent-active:#25ad7c;
    --ia-accent-weak:rgba(52,211,153,.12);--ia-accent-weaker:rgba(52,211,153,.2);
    --ia-btn-bg:#25ad7c;--ia-btn-hover:#219c70;--ia-btn-active:#1d8a62;--ia-btn-disabled:#204636;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#2c4036;--ia-btn2-border-disabled:#24352d;--ia-btn2-text:#c4d2ca;--ia-btn2-text-disabled:#5f7168;
    --ia-soft:#1c2a23;--ia-soft-active:#24352d;--ia-voice-hover:#1c2a23;
}
body[data-theme="graphite"]{
    --bg:#111214;--bg-card:#1a1b1e;--bg-input:#151619;
    --border:#2a2c31;--border-focus:#43464d;
    --text:#c9ccd1;--text-muted:#7e838b;--text-bright:#eceded;
    --accent:#5b8def;--accent2:#8a6cf5;--accent3:#3ecfb2;
    --grad:linear-gradient(135deg,#5b8def,#8a6cf5);
    --grad2:linear-gradient(135deg,#8a6cf5,#3ecfb2);
    --grad3:linear-gradient(135deg,#5b8def,#3ecfb2);
    --shadow:0 2px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 32px rgba(0,0,0,.45);
    --accent-bg:rgba(91,141,239,.12);--accent-shadow:rgba(91,141,239,.35);
    --bubble-mine-bg:#e5eefc;--bubble-mine-border:#c8dcf8;
    --ia-bg:#151619;--ia-border:#2a2c31;--ia-icon:#83878f;--ia-divider:#313338;
    --ia-field-bg:#1e1f23;--ia-field-border:#34363c;--ia-text:#d4d6da;--ia-muted:#a0a4ab;--ia-placeholder:#60646c;
    --ia-accent:#5b8def;--ia-accent-hover:#4a7de2;--ia-accent-active:#3d6cd0;
    --ia-accent-weak:rgba(91,141,239,.14);--ia-accent-weaker:rgba(91,141,239,.22);
    --ia-btn-bg:#5b8def;--ia-btn-hover:#4a7de2;--ia-btn-active:#3d6cd0;--ia-btn-disabled:#2c3242;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#34363c;--ia-btn2-border-disabled:#2a2c31;--ia-btn2-text:#c9ccd1;--ia-btn2-text-disabled:#60646c;
    --ia-soft:#232529;--ia-soft-active:#2b2d32;--ia-voice-hover:#232529;
}
body[data-theme="sakura"]{
    --bg:#f7fbef;--bg-card:#ffffff;--bg-input:#f9fcf3;
    --border:#e2edd2;--border-focus:#c8e0a4;
    --text:#2f3a22;--text-muted:#8a966f;--text-bright:#1c2412;
    --accent:#84cc16;--accent2:#65a30d;--accent3:#facc15;
    --grad:linear-gradient(135deg,#84cc16,#65a30d);
    --grad2:linear-gradient(135deg,#65a30d,#facc15);
    --grad3:linear-gradient(135deg,#84cc16,#a3e635);
    --shadow:0 2px 12px rgba(132,204,22,.08);--shadow-lg:0 8px 32px rgba(132,204,22,.12);
    --accent-bg:rgba(132,204,22,.12);--accent-shadow:rgba(132,204,22,.3);
    --bubble-mine-bg:#ecfccb;--bubble-mine-border:#d9f99d;
    --ia-bg:#f4f9ea;--ia-border:#e5efd4;--ia-icon:#8b967a;--ia-divider:#dce7c8;
    --ia-field-bg:#ffffff;--ia-field-border:#e3ecd0;--ia-text:#2f3a22;--ia-muted:#6f7a58;--ia-placeholder:#b3bd9c;
    --ia-accent:#84cc16;--ia-accent-hover:#74b20f;--ia-accent-active:#65a30d;
    --ia-accent-weak:rgba(132,204,22,.12);--ia-accent-weaker:rgba(132,204,22,.2);
    --ia-btn-bg:#84cc16;--ia-btn-hover:#74b20f;--ia-btn-active:#65a30d;--ia-btn-disabled:#d9f99d;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#dce7c8;--ia-btn2-border-disabled:#ebf2dd;--ia-btn2-text:#4a5439;--ia-btn2-text-disabled:#c2caa8;
    --ia-soft:#f6faed;--ia-soft-active:#edf4dd;--ia-voice-hover:#f9fcf3;
}
body[data-theme="obsidian"]{
    --bg:#08090b;--bg-card:#101215;--bg-input:#0d0f12;
    --border:#22262c;--border-focus:#39424e;
    --text:#c8cdd4;--text-muted:#7a828c;--text-bright:#f2f4f6;
    --accent:#00e5cf;--accent2:#00b0ff;--accent3:#a3ff12;
    --grad:linear-gradient(135deg,#00e5cf,#00b0ff);
    --grad2:linear-gradient(135deg,#00b0ff,#a3ff12);
    --grad3:linear-gradient(135deg,#00e5cf,#a3ff12);
    --shadow:0 2px 12px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.55);
    --accent-bg:rgba(0,229,207,.1);--accent-shadow:rgba(0,229,207,.35);
    --bubble-mine-bg:#d9fbf6;--bubble-mine-border:#b2f4ea;
    --ia-bg:#0d0f12;--ia-border:#22262c;--ia-icon:#7f868f;--ia-divider:#2a2f36;
    --ia-field-bg:#15181c;--ia-field-border:#2a2f36;--ia-text:#d3d7dc;--ia-muted:#9aa1ab;--ia-placeholder:#565c66;
    --ia-accent:#00e5cf;--ia-accent-hover:#00c9b6;--ia-accent-active:#00ad9d;
    --ia-accent-weak:rgba(0,229,207,.12);--ia-accent-weaker:rgba(0,229,207,.2);
    --ia-btn-bg:#00bfa8;--ia-btn-hover:#00a895;--ia-btn-active:#008f80;--ia-btn-disabled:#123a35;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#2a2f36;--ia-btn2-border-disabled:#22262c;--ia-btn2-text:#c8cdd4;--ia-btn2-text-disabled:#565c66;
    --ia-soft:#1a1e23;--ia-soft-active:#22272e;--ia-voice-hover:#1a1e23;
}
body[data-theme="rose"]{
    --bg:#fff1f2;--bg-card:#ffffff;--bg-input:#fff8f9;
    --border:#fddde2;--border-focus:#f9b4be;
    --text:#4a2633;--text-muted:#b07888;--text-bright:#2d1520;
    --accent:#fb7185;--accent2:#f43f5e;--accent3:#fda4af;
    --grad:linear-gradient(135deg,#fb7185,#f43f5e);
    --grad2:linear-gradient(135deg,#f43f5e,#fb923c);
    --grad3:linear-gradient(135deg,#fb7185,#fb923c);
    --shadow:0 2px 12px rgba(244,63,94,.08);--shadow-lg:0 8px 32px rgba(244,63,94,.12);
    --accent-bg:rgba(244,63,94,.08);--accent-shadow:rgba(244,63,94,.3);
    --bubble-mine-bg:#ffe4e8;--bubble-mine-border:#ffd0d8;
    --ia-bg:#f7f0f1;--ia-border:#f5d9de;--ia-icon:#9e6f78;--ia-divider:#f0d0d6;
    --ia-field-bg:#ffffff;--ia-field-border:#f0d7dd;--ia-text:#4a2633;--ia-muted:#8a6675;--ia-placeholder:#c9a0ac;
    --ia-accent:#fb7185;--ia-accent-hover:#f63f5c;--ia-accent-active:#e0254a;
    --ia-accent-weak:rgba(251,113,133,.12);--ia-accent-weaker:rgba(251,113,133,.2);
    --ia-btn-bg:#fb7185;--ia-btn-hover:#f63f5c;--ia-btn-active:#e0254a;--ia-btn-disabled:#fdd0d6;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#f5d9de;--ia-btn2-border-disabled:#fde8eb;--ia-btn2-text:#5c3340;--ia-btn2-text-disabled:#c9a0ac;
    --ia-soft:#fdf2f4;--ia-soft-active:#fce8ec;--ia-voice-hover:#fdf5f6;
}
body[data-theme="violet"]{
    --bg:#faf5ff;--bg-card:#ffffff;--bg-input:#faf7ff;
    --border:#e9d5ff;--border-focus:#c4b5fd;
    --text:#3b2d56;--text-muted:#8b6fa8;--text-bright:#241638;
    --accent:#a78bfa;--accent2:#8b5cf6;--accent3:#c4b5fd;
    --grad:linear-gradient(135deg,#a78bfa,#8b5cf6);
    --grad2:linear-gradient(135deg,#8b5cf6,#a855f7);
    --grad3:linear-gradient(135deg,#a78bfa,#c084fc);
    --shadow:0 2px 12px rgba(139,92,246,.08);--shadow-lg:0 8px 32px rgba(139,92,246,.12);
    --accent-bg:rgba(139,92,246,.08);--accent-shadow:rgba(139,92,246,.3);
    --bubble-mine-bg:#ede9ff;--bubble-mine-border:#ddd0fb;
    --ia-bg:#f5f1fc;--ia-border:#e9d5ff;--ia-icon:#9680a8;--ia-divider:#e0d4f8;
    --ia-field-bg:#ffffff;--ia-field-border:#ddd0fb;--ia-text:#3b2d56;--ia-muted:#7a6290;--ia-placeholder:#b49fd0;
    --ia-accent:#a78bfa;--ia-accent-hover:#9771f5;--ia-accent-active:#8a5cf0;
    --ia-accent-weak:rgba(167,139,250,.12);--ia-accent-weaker:rgba(167,139,250,.2);
    --ia-btn-bg:#a78bfa;--ia-btn-hover:#9771f5;--ia-btn-active:#8a5cf0;--ia-btn-disabled:#ddd0fb;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#e9d5ff;--ia-btn2-border-disabled:#f3edff;--ia-btn2-text:#4c3580;--ia-btn2-text-disabled:#b49fd0;
    --ia-soft:#f7f2ff;--ia-soft-active:#ede8ff;--ia-voice-hover:#faf5ff;
}
body[data-theme="ocean"]{
    --bg:#ecfeff;--bg-card:#ffffff;--bg-input:#f0fafb;
    --border:#cffafe;--border-focus:#a5f3fc;
    --text:#164e63;--text-muted:#5eacc2;--text-bright:#0c3d4f;
    --accent:#06b6d4;--accent2:#0891b2;--accent3:#67e8f9;
    --grad:linear-gradient(135deg,#06b6d4,#0891b2);
    --grad2:linear-gradient(135deg,#0891b2,#0ea5e9);
    --grad3:linear-gradient(135deg,#06b6d4,#0ea5e9);
    --shadow:0 2px 12px rgba(8,145,178,.08);--shadow-lg:0 8px 32px rgba(8,145,178,.12);
    --accent-bg:rgba(8,145,178,.08);--accent-shadow:rgba(8,145,178,.3);
    --bubble-mine-bg:#e0f9fc;--bubble-mine-border:#c0f2f8;
    --ia-bg:#e8f8fa;--ia-border:#cffafe;--ia-icon:#5ea0b2;--ia-divider:#c0eef5;
    --ia-field-bg:#ffffff;--ia-field-border:#c0eef5;--ia-text:#164e63;--ia-muted:#4d8298;--ia-placeholder:#8fc4d4;
    --ia-accent:#06b6d4;--ia-accent-hover:#0891b2;--ia-accent-active:#0e7490;
    --ia-accent-weak:rgba(6,182,212,.12);--ia-accent-weaker:rgba(6,182,212,.2);
    --ia-btn-bg:#06b6d4;--ia-btn-hover:#0891b2;--ia-btn-active:#0e7490;--ia-btn-disabled:#b0e8f0;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#c0eef5;--ia-btn2-border-disabled:#e0f7fb;--ia-btn2-text:#1c5a72;--ia-btn2-text-disabled:#8fc4d4;
    --ia-soft:#f0fbfc;--ia-soft-active:#dff6fa;--ia-voice-hover:#f0fafb;
}
body[data-theme="honey"]{
    --bg:#fefce8;--bg-card:#ffffff;--bg-input:#fef9e6;
    --border:#fef08a;--border-focus:#fde047;
    --text:#4a3f0a;--text-muted:#a08c52;--text-bright:#2d2506;
    --accent:#fbbf24;--accent2:#f59e0b;--accent3:#fcd34d;
    --grad:linear-gradient(135deg,#fbbf24,#f59e0b);
    --grad2:linear-gradient(135deg,#f59e0b,#f97316);
    --grad3:linear-gradient(135deg,#fbbf24,#f97316);
    --shadow:0 2px 12px rgba(245,158,11,.08);--shadow-lg:0 8px 32px rgba(245,158,11,.12);
    --accent-bg:rgba(245,158,11,.08);--accent-shadow:rgba(245,158,11,.3);
    --bubble-mine-bg:#fef3c7;--bubble-mine-border:#fde68a;
    --ia-bg:#fdf6e2;--ia-border:#fde68a;--ia-icon:#9c8050;--ia-divider:#fae090;
    --ia-field-bg:#ffffff;--ia-field-border:#fde68a;--ia-text:#4a3f0a;--ia-muted:#857048;--ia-placeholder:#c4ad7a;
    --ia-accent:#fbbf24;--ia-accent-hover:#f59e0b;--ia-accent-active:#d97706;
    --ia-accent-weak:rgba(251,191,36,.12);--ia-accent-weaker:rgba(251,191,36,.2);
    --ia-btn-bg:#fbbf24;--ia-btn-hover:#f59e0b;--ia-btn-active:#d97706;--ia-btn-disabled:#fef0b0;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#fae090;--ia-btn2-border-disabled:#fef7d0;--ia-btn2-text:#5c4818;--ia-btn2-text-disabled:#c4ad7a;
    --ia-soft:#fef9e6;--ia-soft-active:#fdf3c0;--ia-voice-hover:#fefce8;
}
body[data-theme="crimson"]{
    --bg:#1a0f0f;--bg-card:#220f0f;--bg-input:#1c0d0d;
    --border:#3d1a1a;--border-focus:#5c2c2c;
    --text:#d4b8b8;--text-muted:#8c6e6e;--text-bright:#f0dada;
    --accent:#f87171;--accent2:#dc2626;--accent3:#fca5a5;
    --grad:linear-gradient(135deg,#f87171,#dc2626);
    --grad2:linear-gradient(135deg,#dc2626,#b91c1c);
    --grad3:linear-gradient(135deg,#f87171,#fca5a5);
    --shadow:0 2px 12px rgba(220,38,38,.25);--shadow-lg:0 8px 32px rgba(220,38,38,.35);
    --accent-bg:rgba(248,113,113,.1);--accent-shadow:rgba(248,113,113,.35);
    --bubble-mine-bg:#2d1818;--bubble-mine-border:#3d2020;
    --ia-bg:#1c0d0d;--ia-border:#3d1a1a;--ia-icon:#8c6e6e;--ia-divider:#4a2222;
    --ia-field-bg:#241212;--ia-field-border:#4a2222;--ia-text:#d4b8b8;--ia-muted:#9a7a7a;--ia-placeholder:#6a4a4a;
    --ia-accent:#f87171;--ia-accent-hover:#ef4444;--ia-accent-active:#dc2626;
    --ia-accent-weak:rgba(248,113,113,.12);--ia-accent-weaker:rgba(248,113,113,.2);
    --ia-btn-bg:#dc2626;--ia-btn-hover:#c42020;--ia-btn-active:#b91c1c;--ia-btn-disabled:#3a1a1a;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#4a2222;--ia-btn2-border-disabled:#3d1a1a;--ia-btn2-text:#d4b8b8;--ia-btn2-text-disabled:#6a4a4a;
    --ia-soft:#2a1515;--ia-soft-active:#331a1a;--ia-voice-hover:#2a1515;
}
body[data-theme="aurora"]{
    --bg:#0c0f1a;--bg-card:#111527;--bg-input:#0e1120;
    --border:#1e2540;--border-focus:#2d3860;
    --text:#c4cce8;--text-muted:#6e789a;--text-bright:#e2e7f6;
    --accent:#22d3ee;--accent2:#818cf8;--accent3:#a5b4fc;
    --grad:linear-gradient(135deg,#22d3ee,#818cf8);
    --grad2:linear-gradient(135deg,#818cf8,#c084fc);
    --grad3:linear-gradient(135deg,#22d3ee,#a5b4fc);
    --shadow:0 2px 12px rgba(34,211,238,.12);--shadow-lg:0 8px 32px rgba(129,140,248,.2);
    --accent-bg:rgba(34,211,238,.1);--accent-shadow:rgba(34,211,238,.35);
    --bubble-mine-bg:#0e1a2d;--bubble-mine-border:#142240;
    --ia-bg:#0e1120;--ia-border:#1e2540;--ia-icon:#6e789a;--ia-divider:#252d4a;
    --ia-field-bg:#13172a;--ia-field-border:#252d4a;--ia-text:#c4cce8;--ia-muted:#7d869f;--ia-placeholder:#505878;
    --ia-accent:#22d3ee;--ia-accent-hover:#06b6d4;--ia-accent-active:#0891b2;
    --ia-accent-weak:rgba(34,211,238,.12);--ia-accent-weaker:rgba(34,211,238,.2);
    --ia-btn-bg:#22b5d4;--ia-btn-hover:#06b6d4;--ia-btn-active:#0891b2;--ia-btn-disabled:#1a2040;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#252d4a;--ia-btn2-border-disabled:#1e2540;--ia-btn2-text:#c4cce8;--ia-btn2-text-disabled:#505878;
    --ia-soft:#161b30;--ia-soft-active:#1e2540;--ia-voice-hover:#161b30;
}
body[data-theme="slate"]{
    --bg:#0f1117;--bg-card:#16181e;--bg-input:#121418;
    --border:#22262f;--border-focus:#333a47;
    --text:#c8cdd4;--text-muted:#7a828c;--text-bright:#f2f4f6;
    --accent:#94a3b8;--accent2:#64748b;--accent3:#cbd5e1;
    --grad:linear-gradient(135deg,#94a3b8,#64748b);
    --grad2:linear-gradient(135deg,#64748b,#475569);
    --grad3:linear-gradient(135deg,#94a3b8,#cbd5e1);
    --shadow:0 2px 12px rgba(0,0,0,.35);--shadow-lg:0 8px 32px rgba(0,0,0,.45);
    --accent-bg:rgba(148,163,184,.1);--accent-shadow:rgba(148,163,184,.3);
    --bubble-mine-bg:#1e2228;--bubble-mine-border:#282d36;
    --ia-bg:#121418;--ia-border:#22262f;--ia-icon:#7a828c;--ia-divider:#2a2e37;
    --ia-field-bg:#1a1d22;--ia-field-border:#2a2e37;--ia-text:#c8cdd4;--ia-muted:#8a9099;--ia-placeholder:#5a6068;
    --ia-accent:#94a3b8;--ia-accent-hover:#7f93a5;--ia-accent-active:#6b7a8c;
    --ia-accent-weak:rgba(148,163,184,.12);--ia-accent-weaker:rgba(148,163,184,.2);
    --ia-btn-bg:#64748b;--ia-btn-hover:#566478;--ia-btn-active:#475569;--ia-btn-disabled:#252830;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#2a2e37;--ia-btn2-border-disabled:#22262f;--ia-btn2-text:#c8cdd4;--ia-btn2-text-disabled:#5a6068;
    --ia-soft:#1e2128;--ia-soft-active:#252930;--ia-voice-hover:#1e2128;
}
body[data-theme="emerald"]{
    --bg:#0a1210;--bg-card:#0f1a15;--bg-input:#0d1612;
    --border:#1a3028;--border-focus:#284d3e;
    --text:#b8d4ca;--text-muted:#6e8880;--text-bright:#e4f2ec;
    --accent:#10b981;--accent2:#059669;--accent3:#6ee7b7;
    --grad:linear-gradient(135deg,#10b981,#059669);
    --grad2:linear-gradient(135deg,#059669,#047857);
    --grad3:linear-gradient(135deg,#10b981,#6ee7b7);
    --shadow:0 2px 12px rgba(5,150,105,.2);--shadow-lg:0 8px 32px rgba(5,150,105,.3);
    --accent-bg:rgba(16,185,129,.1);--accent-shadow:rgba(16,185,129,.35);
    --bubble-mine-bg:#0d2018;--bubble-mine-border:#142c22;
    --ia-bg:#0d1612;--ia-border:#1a3028;--ia-icon:#6e8880;--ia-divider:#203830;
    --ia-field-bg:#13241a;--ia-field-border:#203830;--ia-text:#b8d4ca;--ia-muted:#80958d;--ia-placeholder:#506858;
    --ia-accent:#10b981;--ia-accent-hover:#0ea76f;--ia-accent-active:#0c9060;
    --ia-accent-weak:rgba(16,185,129,.12);--ia-accent-weaker:rgba(16,185,129,.2);
    --ia-btn-bg:#059669;--ia-btn-hover:#047857;--ia-btn-active:#036540;--ia-btn-disabled:#1a3028;--ia-btn-fg:#ffffff;
    --ia-btn2-border:#203830;--ia-btn2-border-disabled:#1a3028;--ia-btn2-text:#b8d4ca;--ia-btn2-text-disabled:#506858;
    --ia-soft:#142b1d;--ia-soft-active:#1a3222;--ia-voice-hover:#142b1d;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 20% 30%,rgba(108,99,255,.04) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,77,138,.04) 0,transparent 50%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(108,99,255,.07) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
.page{height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1}

.top-header{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0 32px;height:64px;display:flex;align-items:center;position:relative;box-shadow:0 1px 8px rgba(108,99,255,.06)}
.top-header-inner{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:28px;height:28px;color:var(--accent);filter:drop-shadow(0 2px 4px rgba(255,77,138,.25))}
.brand-text{font-size:18px;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.link-admin{font-size:13px;color:var(--text-muted);text-decoration:none;font-weight:600;padding:6px 14px;border:1px solid var(--border);border-radius:20px;transition:.2s}
.link-admin:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,77,138,.04)}

.home-content{flex:1;overflow-y:auto;padding:32px}
.home-title{font-size:26px;font-weight:700;margin-bottom:6px;color:var(--text-bright)}
.home-desc{color:var(--text-muted);margin-bottom:28px;font-size:14px}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.room-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px;cursor:pointer;transition:.2s;box-shadow:var(--shadow)}
.room-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.room-card-name{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text-bright)}
.room-card-meta{display:flex;gap:12px;font-size:13px;color:var(--text-muted)}

.chat-header{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(108,99,255,.05)}
.chat-header-right{display:flex;align-items:center;gap:6px}
.chat-header-left{display:flex;align-items:center;gap:12px}
.chat-title{font-size:16px;font-weight:700;color:var(--text-bright)}
.chat-status{display:flex;align-items:center;gap:4px;font-size:12px;color:#03b752;font-weight:600;margin-top:2px}
.lock-icon{width:12px;height:12px;filter:drop-shadow(0 1px 2px rgba(54,215,183,.3))}
.btn-icon{width:36px;height:36px;border:1px solid var(--border);background:var(--bg-card);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:.2s}
.btn-icon:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(108,99,255,.04)}
.btn-icon svg{width:18px;height:18px}
#toggleSidebarBtn .icon-shrink,#toggleSidebarBtn .icon-enlarge{display:none}
#exitBtn:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(255,77,138,.04)!important}

.chat-body{flex:1;display:flex;overflow:hidden}
.messages-area{flex:1;overflow-y:auto;padding:24px 24px 24px 24px;display:flex;flex-direction:column}

.message{display:flex;gap:10px;margin-bottom:16px;animation:msgIn .2s ease-out;max-width:70%}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-mine{align-self:flex-end}
.msg-other{align-self:flex-start}
.msg-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.msg-avatar:hover{transform:scale(1.1)}
.msg-body{flex:1;min-width:0;display:flex;flex-direction:column}
.msg-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.msg-name{font-weight:600;font-size:13px;color:var(--text)}
.msg-time{font-size:11px;color:var(--text-muted)}
.msg-time-right{align-self:flex-end;margin-top:2px;font-size:11px;color:var(--text-muted)}

.msg-text{font-size:14px;line-height:1.6;color:var(--bubble-text);word-break:break-word;padding:10px 16px;border-radius:18px;display:inline-block;max-width:100%}
.msg-other .msg-text{background:var(--bubble-bg);border:1px solid var(--bubble-border);border-radius:4px 18px 18px 18px}
.msg-mine .msg-text{background:var(--bubble-mine-bg);border:1px solid var(--bubble-mine-border);color:var(--bubble-mine-text);border-radius:18px 4px 18px 18px}

.msg-file{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bubble-bg);border:1px solid var(--bubble-border);border-radius:14px;cursor:pointer;margin-top:4px;font-size:13px;color:var(--bubble-text);transition:.2s}
.msg-mine .msg-file{background:var(--bubble-mine-bg);border-color:var(--bubble-mine-border);color:var(--bubble-mine-text)}
.msg-file:hover{border-color:var(--accent2);box-shadow:0 2px 8px rgba(108,99,255,.12)}
.msg-file svg{width:20px;height:20px;color:var(--accent2)}
.msg-mine .msg-file svg{color:var(--bubble-mine-text)}
.msg-file-info{display:flex;flex-direction:column;gap:2px}
.msg-file-name{font-weight:600;color:var(--bubble-text-bright)}
.msg-mine .msg-file-name{color:var(--bubble-mine-text)}
.msg-file-size{font-size:11px;color:var(--bubble-text-muted)}
.msg-mine .msg-file-size{color:var(--bubble-text-muted)}
.msg-image{max-width:320px;border-radius:14px;cursor:pointer;margin-top:4px;border:1px solid var(--border);transition:.2s}
.msg-mine .msg-image{border-color:var(--bubble-mine-border)}
.msg-image:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(108,99,255,.15)}
.msg-video{display:block;width:100%;max-width:400px;border-radius:14px;margin-top:4px;border:1px solid var(--border);background:#0b0b10 center/cover no-repeat}
.msg-audio{width:280px;margin-top:4px;border-radius:14px}

.msg-voice{display:inline-flex;align-items:center;gap:8px;min-width:80px;padding:10px 16px;border-radius:18px;cursor:pointer;margin-top:4px;font-size:14px;font-weight:600;transition:.2s;user-select:none}
.msg-other .msg-voice{background:var(--bubble-bg);border:1px solid var(--bubble-border);color:var(--bubble-text);border-radius:4px 18px 18px 18px}
.msg-mine .msg-voice{background:var(--bubble-mine-bg);border:1px solid var(--bubble-mine-border);color:var(--bubble-mine-text);border-radius:18px 4px 18px 18px}
.msg-voice:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(108,99,255,.18)}
.msg-voice .voice-icon{width:20px;height:20px;flex-shrink:0}
.msg-voice .voice-duration{font-variant-numeric:tabular-nums;min-width:22px;text-align:center}
.msg-voice .voice-bars{display:none;align-items:flex-end;gap:2px;height:16px}
.msg-voice .voice-bar{width:3px;background:currentColor;border-radius:2px;height:6px;opacity:.9}
.msg-voice.playing .voice-bars{display:flex}
.msg-voice.playing .voice-icon{display:none}
.msg-voice.playing .voice-bar{animation:voiceBar .6s ease-in-out infinite alternate}
.msg-voice.playing .voice-bar:nth-child(1){height:6px;animation-delay:0s}
.msg-voice.playing .voice-bar:nth-child(2){height:12px;animation-delay:.15s}
.msg-voice.playing .voice-bar:nth-child(3){height:16px;animation-delay:.3s}
.msg-voice.playing .voice-bar:nth-child(4){height:9px;animation-delay:.45s}
@keyframes voiceBar{from{height:6px}to{height:3px}}

.users-panel{width:240px;background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:.3s;box-shadow:-1px 0 8px rgba(108,99,255,.05);position:relative}
.users-panel.hidden{display:none}
.users-panel-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text-bright)}
.user-count{background:var(--grad);padding:2px 10px;border-radius:12px;font-size:11px;color:#fff;font-weight:700}
.users-panel-close{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;min-width:76px;height:40px;border:none;border-radius:20px;background:var(--accent-bg);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:.2s}
.users-panel-close:hover{transform:translateX(-50%) translateY(-1px);background:var(--accent-bg);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.users-panel-close:active{transform:translateX(-50%);opacity:.85}
.users-panel-close svg{width:26px;height:26px}
.users-list{flex:1;overflow-y:auto;padding:8px 8px 68px}
.user-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;transition:.15s;margin-bottom:2px}
.user-item:hover{background:rgba(108,99,255,.04)}
.user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.user-name{font-size:13px;font-weight:600;color:var(--text)}

.chat-input-area{background:var(--ia-bg);border-top:1px solid var(--ia-border);padding:8px 16px 10px}
.input-toolbar{display:flex;align-items:center;gap:12px;margin-top:6px}
.toolbar-btn{width:30px;height:30px;border:none;background:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ia-icon);transition:.15s;position:relative;padding:0}
.toolbar-btn:hover{color:var(--ia-accent);background:var(--ia-accent-weak)}
.toolbar-btn:active{background:var(--ia-accent-weaker)}
.toolbar-btn svg{width:21px;height:21px}
.toolbar-divider{width:1px;height:18px;background:var(--ia-divider);margin:0}
.input-row{display:flex;flex-direction:row;align-items:flex-end;gap:8px}
.input-hint{display:none;color:var(--ia-placeholder)}
.msg-input{flex:1;width:100%;box-sizing:border-box;height:40px;min-height:40px;max-height:140px;padding:9px 12px;border:1px solid var(--ia-field-border);border-radius:6px;font-size:14px;line-height:1.5;font-family:inherit;outline:none;transition:border-color .15s;background:var(--ia-field-bg);color:var(--ia-text);resize:none;overflow-y:auto}
.msg-input:focus{border-color:var(--ia-accent)}
.msg-input::placeholder{color:var(--ia-placeholder)}
.msg-input[contenteditable]{white-space:pre-wrap;word-break:break-word}
.msg-input:empty::before{content:attr(data-placeholder);color:var(--ia-placeholder);pointer-events:none}
.msg-input img{width:24px;height:24px;vertical-align:-7px;margin:0 1px}
.send-btn{min-width:60px;height:40px;padding:0 16px;border:none;background:var(--ia-btn-bg);color:var(--ia-btn-fg);border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.send-btn:hover{background:var(--ia-btn-hover)}
.send-btn:active{background:var(--ia-btn-active)}
.send-btn:disabled{background:var(--ia-btn-disabled);cursor:not-allowed}

.voice-record{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:10px 0 6px;min-height:180px}
.voice-cancel-hint{height:20px;font-size:13px;color:var(--ia-icon);opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.voice-record.recording .voice-cancel-hint{opacity:1}
.voice-record.cancel-mode .voice-cancel-hint{opacity:0}
.voice-cancel-arrow{font-size:15px;line-height:1;font-weight:700}
.voice-btn{position:relative;width:112px;height:112px;border:none;border-radius:50%;background:var(--ia-accent-weak);color:var(--ia-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;user-select:none;-webkit-user-select:none;touch-action:none;padding:0;flex-shrink:0;outline:none}
.voice-btn:hover{background:var(--ia-accent-weaker)}
.voice-btn:active{transform:scale(.96)}
.voice-btn.recording{background:var(--ia-accent);color:var(--ia-btn-fg);box-shadow:0 8px 24px rgba(18,183,245,.35);transform:scale(1.05)}
.voice-btn.cancel-mode{background:rgba(245,108,108,.15);color:#f56c6c;box-shadow:0 8px 24px rgba(245,108,108,.28);transform:scale(1.05)}
.voice-btn svg{width:46px;height:46px}
.voice-hint-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ia-muted);font-weight:500;line-height:1}
.voice-hint{color:inherit}
.voice-timer{font-size:13px;font-weight:600;color:var(--ia-icon);font-variant-numeric:tabular-nums;min-width:38px;text-align:center;opacity:.7}
.voice-record.recording .voice-timer{opacity:1;color:var(--ia-accent)}

.emoji-container{position:relative}
.emoji-picker{position:absolute;bottom:44px;left:0;background:#f5f7fa;border:1px solid var(--bubble-border);border-radius:14px;padding:10px;box-shadow:var(--shadow-lg);width:404px;z-index:50;max-height:260px;overflow-y:auto;overflow-x:hidden}
.emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.emoji-item{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:.12s;padding:2px}
.emoji-item:hover{background:rgba(255,77,138,.1);transform:scale(1.12)}
.emoji-item img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.chat-emote{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin:0 2px;display:inline-block}

.modal-overlay{position:fixed;inset:0;background:rgba(45,43,58,.35);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(6px)}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:32px;width:90%;max-width:420px;position:relative;box-shadow:var(--shadow-lg);overflow:hidden}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.modal h3{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--text-bright)}
.modal-desc{font-size:14px;color:var(--text-muted);margin-bottom:18px}
.form-input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:12px;font-size:14px;outline:none;transition:.2s;background:var(--bg-input);color:var(--text)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,77,138,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(255,77,138,.2)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,77,138,.3)}

/* ===== 消息撤回按钮 ===== */
.msg-mine .msg-body{position:relative}
.msg-recall{position:absolute;left:-38px;top:14px;width:28px;height:28px;border:none;border-radius:50%;background:var(--bg-card);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:var(--shadow);border:1px solid var(--border)}
.msg-recall:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.msg-recall svg{width:14px;height:14px}

/* ===== 图片灯箱 ===== */
.img-viewer{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:40px;background:rgba(8,8,12,.88);backdrop-filter:blur(6px)}
.img-viewer img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 12px 60px rgba(0,0,0,.55);object-fit:contain}
.viewer-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .35s ease,background .2s ease}
.viewer-close:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.viewer-close svg{width:20px;height:20px}

.toast{position:fixed;top:24px;left:50%;transform:translate(-50%,0);align-items:center;gap:10px;padding:13px 24px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:14px;font-size:14px;font-weight:600;display:none;z-index:500;box-shadow:var(--shadow-lg);backdrop-filter:blur(8px)}
.toast.show{display:flex;animation:toastIn .38s cubic-bezier(.34,1.56,.64,1)}
.toast-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-icon svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toast.success .toast-icon{background:var(--accent3)}
.toast.error .toast-icon{background:var(--accent)}
.toast.success{border-color:var(--accent3);color:var(--accent3)}
.toast.error{border-color:var(--accent);color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== 确认弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(15,12,25,.5);backdrop-filter:blur(5px);z-index:450;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.open{display:flex;animation:maskIn .25s ease}
.modal-card{width:min(340px,92vw);background:var(--bg-card);border:1px solid var(--border);border-radius:22px;padding:30px 26px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:cardIn .32s cubic-bezier(.34,1.56,.64,1)}
.modal-icon{width:60px;height:60px;margin:0 auto 16px;border-radius:20px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center}
.modal-icon svg{width:28px;height:28px}
.modal-title{font-size:17px;font-weight:700;color:var(--text-bright);margin-bottom:8px}
.modal-text{font-size:13.5px;line-height:1.7;color:var(--text-muted);margin-bottom:22px}
.modal-actions{display:flex;gap:10px}
.modal-btn{flex:1;height:42px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.modal-cancel{background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted)}
.modal-cancel:hover{background:var(--border);color:var(--text)}
.modal-confirm{background:var(--grad);color:#fff;box-shadow:0 4px 14px var(--accent-shadow)}
.modal-confirm:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--accent-shadow)}
.modal-confirm:active{transform:translateY(0)}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-icon{width:48px;height:48px;margin:0 auto 16px;opacity:.3}
.empty-state p{font-size:14px;font-weight:500}

.join-error{background:rgba(255,77,138,.06);border:1px solid rgba(255,77,138,.3);color:var(--accent);padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:0;display:none}
.join-error.show{display:block;animation:fadeSlideIn .25s ease}
.join-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:36px 32px 30px;width:90%;max-width:380px;position:relative;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.18);overflow:hidden}
.join-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.join-modal-icon{width:60px;height:60px;border-radius:20px;background:linear-gradient(135deg,rgba(255,77,138,.12),rgba(108,99,255,.12));color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.join-modal-icon svg{width:28px;height:28px}
.join-modal-title{font-size:20px;font-weight:700;color:var(--text-bright);margin-bottom:6px}
.join-modal-desc{font-size:13px;color:var(--text-muted);margin-bottom:24px}
.join-field{margin-bottom:14px;text-align:left}
.join-label{display:inline-block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:8px;letter-spacing:.3px}
.join-modal .form-input{margin-bottom:0}
.join-modal .btn-primary{width:100%;margin-top:20px;height:46px;font-size:15px;border-radius:14px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

.avatar-0{background:linear-gradient(135deg,#ff4d8a,#ff8c42)}.avatar-1{background:linear-gradient(135deg,#6c63ff,#36d7b7)}
.avatar-2{background:linear-gradient(135deg,#c44dff,#6c63ff)}.avatar-3{background:linear-gradient(135deg,#ff8c42,#ffcc02)}
.avatar-4{background:linear-gradient(135deg,#ff4d4d,#ff4d8a)}.avatar-5{background:linear-gradient(135deg,#ff4d8a,#c44dff)}
.avatar-6{background:linear-gradient(135deg,#36d7b7,#6c63ff)}.avatar-7{background:linear-gradient(135deg,#84cc16,#36d7b7)}

@media(max-width:768px){
    .users-panel{position:fixed;right:0;top:60px;bottom:0;z-index:50;width:260px;box-shadow:-4px 0 24px rgba(0,0,0,.1);transform:translateX(100%);transition:.3s}
    .users-panel.show{transform:translateX(0)}
    .users-panel.hidden{transform:translateX(100%)}
    .room-grid{grid-template-columns:1fr}
    .chat-input-area{padding:8px 12px}
    .msg-input{font-size:16px;height:40px;min-height:40px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
    .msg-input::-webkit-scrollbar{display:none;width:0;height:0}
    .top-header{padding:0 16px}
    .home-content{padding:20px 16px}
    .home-title{font-size:22px}
    .messages-area{padding:16px}
    .message{max-width:85%}
    .msg-text{font-size:13px;padding:8px 14px}
    .msg-image{max-width:240px}
    .msg-video{max-width:280px}
    .msg-audio{width:220px}
    .emoji-picker{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;border-radius:0;border:none;border-top:1px solid var(--border);background:#f5f7fa;padding:6px 4px;box-shadow:0 -4px 24px rgba(0,0,0,.14);z-index:auto;transform:none;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .emoji-picker.open{max-height:42vh;overflow-y:auto}
    .emoji-grid{grid-template-columns:repeat(6,1fr);gap:8px 2px;padding:0 2px}
    .emoji-item{width:38px;height:38px;padding:2px;justify-self:center;align-self:center}
    .input-toolbar{gap:0}
    .toolbar-divider{display:none}
    .input-toolbar>.toolbar-btn{flex:1;width:auto;height:40px}
    .toolbar-btn svg{width:24px;height:24px}
    .emoji-container{flex:1;display:flex}
    .emoji-container .toolbar-btn{flex:1;width:auto;height:40px}
    .input-row{align-items:stretch}
    .send-btn{height:auto;min-height:40px}
    .join-modal .form-input{height:48px}
    .join-modal .btn-primary{height:52px}
    .modal-mask{padding:16px}
    .modal-card{width:min(320px,90vw);padding:26px 22px 20px;border-radius:20px}
    .modal-title{font-size:16px}
    .modal-text{font-size:13px;margin-bottom:20px}
    .modal-btn{height:44px}
}
@media(max-width:480px){
    .chat-header{padding:0 12px}
    .chat-title{font-size:14px}
    .input-toolbar>.toolbar-btn{height:40px}
    .toolbar-btn svg{width:24px;height:24px}
    .send-btn{height:auto;min-height:40px;min-width:56px;padding:0 12px}
    .msg-avatar{width:32px;height:32px;font-size:12px}
    .emoji-picker{max-height:0}
    .emoji-grid{grid-template-columns:repeat(6,1fr)}
    .emoji-item{width:38px;height:38px;padding:2px;justify-self:center;align-self:center}
}
@media(min-width:769px){
    .chat-input-area{display:flex;flex-direction:column;background:var(--ia-field-bg);border-top:1px solid var(--ia-border);padding:4px 20px 10px}
    .input-toolbar{order:1;gap:14px;margin-top:0;padding:2px 0}
    .input-row{order:2;flex-wrap:wrap;gap:8px}
    .msg-input{flex:1 1 100%;min-height:96px;max-height:170px;border:none;border-radius:0;padding:10px 4px;background:var(--ia-field-bg);line-height:1.6}
    .msg-input:focus{border:none}
    .input-hint{display:block;margin-left:auto;align-self:flex-end;font-size:12px;color:var(--ia-placeholder);line-height:32px}
    .send-btn{background:var(--ia-field-bg);border:1px solid var(--ia-btn2-border);color:var(--ia-btn2-text);border-radius:3px;height:32px;min-width:84px;padding:0 20px;font-size:14px;font-weight:400;letter-spacing:2px}
    .send-btn:hover{background:var(--ia-soft)}
    .send-btn:active{background:var(--ia-soft-active)}
    .send-btn:disabled{background:var(--ia-field-bg);border-color:var(--ia-btn2-border-disabled);color:var(--ia-btn2-text-disabled)}
    .voice-record{order:3}
    .page-chat{display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr auto}
    .chat-header{grid-column:1/-1;grid-row:1}
    .chat-body{display:contents}
    .users-panel{grid-column:1;grid-row:2/-1;border-left:none;border-right:1px solid var(--border);box-shadow:1px 0 8px rgba(108,99,255,.05)}
    .messages-area{grid-column:2;grid-row:2;min-height:0}
    .chat-input-area{grid-column:2;grid-row:3}
    #toggleSidebarBtn .icon-users{display:none}
    body:not(.compact) #toggleSidebarBtn .icon-shrink{display:block}
    body.compact #toggleSidebarBtn .icon-enlarge{display:block}
    body.compact{display:flex;align-items:center;justify-content:center;overflow:hidden}
    body.compact .page{width:1100px;height:680px;min-height:0;max-width:100vw;max-height:100vh;flex:none;border-radius:10px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35)}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,138,.2)}50%{box-shadow:0 0 0 10px rgba(255,77,138,0)}}