html[data-theme="midnight"]{--bg:#0b0e14;--bg-elev:#12161f;--bg-sunken:#080b10;--text:#e6e9ef;--muted:#7d8595;--line:#1e2430;--accent:#4d86ff;--accent-2:#7c5cff;--accent-soft:#182234;--bubble-in:#141a24}
html[data-theme="nord"]{--bg:#2e3440;--bg-elev:#3b4252;--bg-sunken:#272c36;--text:#eceff4;--muted:#a3abbd;--line:#434c5e;--accent:#88c0d0;--accent-2:#5e81ac;--accent-soft:#3b4a5a;--bubble-in:#3b4252;--bubble-out:#5e81ac}
html[data-theme="sepia"]{--bg:#f4ecd8;--bg-elev:#fbf6ea;--bg-sunken:#ece0c8;--text:#3b3226;--muted:#7d7160;--line:#ddd0b4;--accent:#a2673f;--accent-2:#c08552;--accent-soft:#ecdfc9;--bubble-in:#fbf6ea;--bubble-out:#a2673f}
html[data-theme="light"]{--bg:#f2f3f7;--bg-elev:#fff;--bg-sunken:#e8eaf0;--text:#14161a;--muted:#6b7280;--line:#dfe3ea;--accent:#2f6df6;--accent-2:#7c5cff;--accent-soft:#e5edff;--bubble-in:#fff;--bubble-out:#2f6df6}
html[data-theme="contrast"]{--bg:#000;--bg-elev:#111;--bg-sunken:#000;--text:#fff;--muted:#c9c9c9;--line:#666;--accent:#ffd400;--accent-2:#ffd400;--accent-soft:#332d00;--bubble-in:#1a1a1a;--bubble-out:#ffd400;--bubble-out-text:#000}
html[data-theme="forest"]{--bg:#0f1a15;--bg-elev:#16251d;--bg-sunken:#0a120e;--text:#e3f0e8;--muted:#88a396;--line:#20362b;--accent:#2fbf86;--accent-2:#7fd15f;--accent-soft:#17321f;--bubble-in:#16251d;--bubble-out:#2fbf86}
html[data-theme="ocean"]{--bg:#0a1622;--bg-elev:#10202f;--bg-sunken:#07111a;--text:#e2eef7;--muted:#7f97a8;--line:#1d3346;--accent:#22a6d6;--accent-2:#38d6c0;--accent-soft:#12303d;--bubble-in:#10202f;--bubble-out:#22a6d6}
html[data-theme="rose"]{--bg:#1c1216;--bg-elev:#281920;--bg-sunken:#140c10;--text:#f7e7ee;--muted:#b08e9c;--line:#3a242e;--accent:#ef5f8a;--accent-2:#b06cff;--accent-soft:#331a25;--bubble-in:#281920;--bubble-out:#ef5f8a}
html[data-theme="coffee"]{--bg:#1b1713;--bg-elev:#251f19;--bg-sunken:#14110d;--text:#f1e7db;--muted:#a89684;--line:#382e25;--accent:#c98b4b;--accent-2:#8fae55;--accent-soft:#2f261d;--bubble-in:#251f19;--bubble-out:#c98b4b}
html[data-theme="violet"]{--bg:#151129;--bg-elev:#1e1838;--bg-sunken:#0f0c1e;--text:#ece7ff;--muted:#9a8fc0;--line:#2c2450;--accent:#8b5cf6;--accent-2:#e05cff;--accent-soft:#241a47;--bubble-in:#1e1838;--bubble-out:#8b5cf6}
html[data-theme="mono"]{--bg:#141414;--bg-elev:#1d1d1d;--bg-sunken:#0d0d0d;--text:#ececec;--muted:#9a9a9a;--line:#2b2b2b;--accent:#d8d8d8;--accent-2:#ffffff;--accent-soft:#242424;--bubble-in:#1d1d1d;--bubble-out:#3a3a3a;--bubble-out-text:#fff}
html[data-theme="sunset"]{--bg:#1d1114;--bg-elev:#2a191c;--bg-sunken:#150c0e;--text:#ffece6;--muted:#c1968c;--line:#3d2426;--accent:#ff7a45;--accent-2:#ff3d81;--accent-soft:#37191c;--bubble-in:#2a191c;--bubble-out:#ff7a45}
html[data-theme="sepia"],html[data-theme="light"]{color-scheme:light}
html[data-theme="midnight"],html[data-theme="nord"],html[data-theme="contrast"],html[data-theme="forest"],html[data-theme="ocean"],html[data-theme="rose"],html[data-theme="coffee"],html[data-theme="violet"],html[data-theme="mono"],html[data-theme="sunset"]{color-scheme:dark}

html[data-font="inter"] body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-font="system"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html[data-font="manrope"] body{font-family:Manrope,Inter,system-ui,sans-serif}
html[data-font="rubik"] body{font-family:Rubik,Inter,system-ui,sans-serif;letter-spacing:.1px}
html[data-font="ptsans"] body{font-family:"PT Sans",system-ui,sans-serif}
html[data-font="condensed"] body{font-family:"Roboto Condensed","Arial Narrow",system-ui,sans-serif}
html[data-font="wide"] body{font-family:Verdana,Tahoma,Geneva,sans-serif;letter-spacing:.2px}
html[data-font="round"] body{font-family:Nunito,"Comfortaa",system-ui,sans-serif;letter-spacing:.2px}
html[data-font="serif"] body{font-family:Georgia,"Times New Roman",serif}
html[data-font="mono"] body{font-family:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace}
html[data-size="s"]{--fs:13px}html[data-size="m"]{--fs:15px}html[data-size="l"]{--fs:17px}html[data-size="xl"]{--fs:19px}
.messages,.list-item .name,.input,.btn,.sub{font-size:var(--fs)}
.preview,.time,.tab,#chat-status,.status-line{font-size:calc(var(--fs) - 2px)}

.avatar{position:relative}
.avatar.is-online::after,.avatar.is-offline::after{content:"";position:absolute;right:-1px;bottom:-1px;
width:13px;height:13px;border-radius:50%;border:2.5px solid var(--bg-elev);background:var(--ok);z-index:2}
.avatar.is-offline::after{background:var(--muted)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:middle}
.status-dot.online{background:var(--ok)}.status-dot.typing{background:var(--accent);animation:pulse 1.2s infinite}
.status-dot.lastseen{background:transparent;border:1.5px solid var(--muted)}
@keyframes pulse{50%{opacity:.3}}

.badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;
font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.fav-mark{color:#ffb400;width:14px;height:14px}
.cat-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-sunken);
color:var(--muted);font-size:13px;cursor:pointer;transition:all var(--dur)}
.chip.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.date-sep{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:12px}
.date-sep::before,.date-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.skeleton{height:64px;margin:0 8px 4px;border-radius:var(--r-md);
background:linear-gradient(100deg,var(--bg-sunken) 25%,var(--bg-elev) 50%,var(--bg-sunken) 75%);
background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.reconnect-banner{position:fixed;top:0;left:0;right:0;z-index:60;padding:calc(7px + env(safe-area-inset-top)) 7px 7px;
text-align:center;font-size:12px;font-weight:600;background:var(--danger);color:#fff;
transform:translateY(-100%);transition:transform var(--dur)}
.reconnect-banner.show{transform:none}
.toast-wrap{position:fixed;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:10px 15px;border-radius:var(--r-md);background:var(--bg-elev);color:var(--text);
border:1px solid var(--line);box-shadow:var(--shadow-1);font-size:13px;animation:toastIn var(--dur)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}

.ui-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ui-title{font-weight:600;font-size:15px;margin-bottom:8px}
.ui-section .ui-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.ui-section .ui-row label{font-size:14px}
.ui-section select,.ui-section input[type=range]{background:var(--bg-sunken);color:var(--text);
border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;font:inherit;font-size:14px;max-width:180px}
.ui-section input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;
transition:transform var(--dur),border-color var(--dur)}
.swatch.active{border-color:var(--accent);transform:scale(1.12)}
.snd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.snd{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--r-md);cursor:pointer;
background:var(--bg-sunken);border:1px solid var(--line);color:var(--text);font-size:13px;
transition:all var(--dur)}
.snd:hover{border-color:var(--accent)}
.snd.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.snd .bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.snd .bars i{width:2px;background:currentColor;border-radius:2px;opacity:.7}
.snd.playing .bars i{animation:eq .7s infinite alternate}
.snd .bars i:nth-child(1){height:6px}.snd .bars i:nth-child(2){height:12px}
.snd .bars i:nth-child(3){height:9px}.snd .bars i:nth-child(4){height:14px}
.snd .bars i:nth-child(2){animation-delay:.12s}.snd .bars i:nth-child(3){animation-delay:.24s}
.snd .bars i:nth-child(4){animation-delay:.36s}
@keyframes eq{from{transform:scaleY(.4)}to{transform:scaleY(1.1)}}