:root{
  --bg:#ffffff;--bg-alt:#f4f4f5;--bg-side:#f7f7f8;--bg-msg:#ffffff;--bg-msg-own:#e3f2fd;
  --border:#e4e4e7;--text:#111827;--text-muted:#6b7280;--accent:#3390ec;--accent-soft:#d6ebff;
  --shadow:0 1px 2px rgba(0,0,0,.05);--danger:#dc2626;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#17212b;--bg-alt:#0e1621;--bg-side:#0e1621;--bg-msg:#182533;--bg-msg-own:#2b5278;
  --border:#243447;--text:#e9edef;--text-muted:#8a97a4;--accent:#5eb5f7;--accent-soft:#2b5278;
  --shadow:0 1px 2px rgba(0,0,0,.3);--danger:#ef4444;
}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg-alt)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
input,button,select,textarea{font:inherit;color:var(--text)}
button{cursor:pointer}

/* ======= Auth pages ======= */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:32px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-card.wide{max-width:520px}
.auth-card h1{margin:0 0 18px;font-size:22px}
.auth-card label{display:block;margin-bottom:12px;font-size:13px;color:var(--text-muted)}
.auth-card input{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.auth-card input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.auth-card button{margin-top:6px;width:100%;padding:10px 14px;background:var(--accent);color:#fff;border:0;border-radius:10px;font-weight:600}
.auth-card button:hover{filter:brightness(1.08)}
.err{background:#fee2e2;color:#991b1b;padding:10px 12px;border-radius:8px;margin-bottom:14px;font-size:13px}
@media (prefers-color-scheme: dark){.err{background:#7f1d1d;color:#fecaca}}
.muted{color:var(--text-muted);font-size:13px}
.stepper{display:flex;gap:12px;margin-bottom:18px;font-size:12px;color:var(--text-muted)}
.stepper span{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:20px;text-align:center}
.stepper span.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.stepper span.done{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}

/* ======= Admin ======= */
body.admin{background:var(--bg-alt)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.topbar h1{margin:0;font-size:18px}
.topbar nav{display:flex;gap:18px}
.topbar nav a{color:var(--text-muted);padding:6px 10px;border-radius:6px}
.topbar nav a.active{color:var(--accent);background:var(--accent-soft)}
.page{max-width:900px;margin:24px auto;padding:0 20px}
.page section{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:20px;box-shadow:var(--shadow)}
.page h2{margin:0 0 14px;font-size:16px}
.row{display:flex;gap:10px}
.row input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.row button{padding:0 20px;background:var(--accent);color:#fff;border:0;border-radius:10px;font-weight:600}
table.chats{width:100%;border-collapse:collapse;font-size:13px}
table.chats th,table.chats td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border)}
table.chats th{font-weight:600;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.row-actions{white-space:nowrap;display:flex;gap:6px}
.btn-ghost{background:transparent;border:1px solid var(--border);padding:4px 10px;border-radius:8px;color:var(--text)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-danger{background:var(--danger);color:#fff;border:0;padding:4px 12px;border-radius:8px;font-size:12px}

/* ======= Viewer ======= */
body.viewer{overflow:hidden}
#app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:100vh;height:100vh;min-height:0}
#sidebar{background:var(--bg-side);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.side-head{padding:14px 16px;border-bottom:1px solid var(--border)}
.side-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.side-title h1{margin:0;font-size:18px;font-weight:600}
.side-actions{display:flex;gap:10px}
.side-actions a{color:var(--text-muted);font-size:18px;padding:2px 6px;border-radius:6px}
.side-actions a:hover{background:var(--bg-alt);color:var(--text)}
#chat-filter,#msg-search{width:100%;padding:8px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg);outline:none;font-size:13px}
#chat-filter:focus,#msg-search:focus{border-color:var(--accent)}
#chat-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;flex:1}
#chat-list li{display:flex;gap:12px;align-items:center;padding:10px 16px;cursor:pointer;border-left:3px solid transparent}
#chat-list li:hover{background:var(--bg-alt)}
#chat-list li.active{background:var(--accent-soft);border-left-color:var(--accent)}
#chat-list .ci-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-list .ci-sub{font-size:12px;color:var(--text-muted)}
.side-user{padding:8px 16px;border-top:1px solid var(--border);font-size:12px}

#main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-alt);overflow:hidden}
#chat-header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 18px;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:2;flex-shrink:0}
#chat-header .title{font-weight:600;font-size:15px}
#chat-header .subtitle{font-size:12px;color:var(--text-muted)}
#msg-search{max-width:260px;justify-self:end}
#messages{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 10% 60px;scroll-behavior:smooth}
@media (max-width:900px){#app{grid-template-columns:1fr}#sidebar{display:none}#messages{padding:12px}}

.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px;flex-shrink:0}
.avatar.sm{width:32px;height:32px;font-size:13px}

.day-sep{text-align:center;margin:18px 0 10px}
.day-sep span{background:rgba(0,0,0,.12);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px}
@media (prefers-color-scheme: dark){.day-sep span{background:rgba(255,255,255,.1)}}

.msg{display:flex;gap:10px;margin-bottom:8px;max-width:720px}
.msg .bubble{background:var(--bg-msg);border-radius:12px;padding:8px 12px;box-shadow:var(--shadow);min-width:0;max-width:100%;word-wrap:break-word}
.msg .sender{font-weight:600;font-size:13px;color:var(--accent);margin-bottom:2px}
.msg .text{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.msg .text b{font-weight:700}
.msg .text i{font-style:italic}
.msg .text u{text-decoration:underline}
.msg .text s{text-decoration:line-through}
.msg .text code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-family:"Consolas","Monaco",monospace;font-size:.92em}
.msg .text pre{background:rgba(0,0,0,.06);padding:8px 10px;border-radius:6px;overflow-x:auto;font-family:"Consolas","Monaco",monospace;font-size:.9em;margin:4px 0;white-space:pre-wrap}
@media (prefers-color-scheme: dark){.msg .text code,.msg .text pre{background:rgba(255,255,255,.08)}}
.msg .text blockquote{border-left:3px solid var(--accent);margin:4px 0;padding:2px 10px;color:var(--text-muted)}
.msg .text .spoiler{background:rgba(107,114,128,.35);color:transparent;padding:0 3px;border-radius:3px;cursor:pointer;transition:all .2s;user-select:none;filter:blur(5px);position:relative;outline:1px dashed rgba(255,255,255,.25)}
.msg .text .spoiler:hover{outline-color:var(--accent);filter:blur(3px)}
.msg .text .spoiler.revealed{background:rgba(0,0,0,.04);color:inherit;filter:none;user-select:auto;outline:none}
@media (prefers-color-scheme: dark){.msg .text .spoiler.revealed{background:rgba(255,255,255,.06)}}
.reveal-all{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11px;padding:1px 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);cursor:pointer}
.reveal-all:hover{filter:brightness(1.1)}
.msg .meta{font-size:11px;color:var(--text-muted);margin-top:4px;display:flex;gap:8px;align-items:center}
.msg .meta .edited{font-style:italic}
.msg .fwd{border-left:3px solid var(--accent);padding:2px 8px;margin-bottom:4px;font-size:12px;color:var(--text-muted)}
.msg .reply{border-left:3px solid var(--accent);padding:2px 8px;margin-bottom:6px;font-size:12px;background:rgba(0,0,0,.03);border-radius:4px;cursor:pointer;max-height:3.6em;overflow:hidden;text-overflow:ellipsis}
.msg .text a{color:var(--accent);text-decoration:underline;word-break:break-all}
.msg .text a:hover{filter:brightness(1.2)}
.extras{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.extras .extra{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.02);font-size:12px}
@media (prefers-color-scheme: dark){.extras .extra{background:rgba(255,255,255,.03)}}
.extras .extra .ic{width:30px;height:30px;border-radius:50%;background:#1a73e8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.extras .extra.pending .ic{background:var(--text-muted)}
.extras .extra.error .ic{background:var(--danger)}
.extras .extra .info{flex:1;min-width:0}
.extras .extra .name{font-weight:600;word-break:break-all}
.extras .extra .meta{color:var(--text-muted)}
.extras .extra a{color:var(--accent)}
@media (prefers-color-scheme: dark){.msg .reply{background:rgba(255,255,255,.05)}}
.msg .reply .rep-name{font-weight:600;color:var(--accent)}

.media{margin:4px 0;border-radius:10px;overflow:hidden;max-width:480px}
.media img,.media video{display:block;max-width:100%;max-height:480px;border-radius:10px;cursor:pointer}
.media.sticker{max-width:200px;background:transparent}
.media.sticker img,.media.sticker video{max-height:200px;background:transparent;border-radius:0}
.media.sticker-tgs{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;border:1px dashed var(--border);border-radius:10px;color:var(--text-muted);font-size:14px;max-width:200px}
.media audio{width:100%;min-width:260px}
.media-doc{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);max-width:360px}
.media-doc:hover{background:var(--bg)}
.media-doc .icon{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.media-doc .doc-meta{font-size:12px;color:var(--text-muted)}
.media-doc .doc-name{font-weight:600;word-break:break-all;font-size:13px}

#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:999;padding:24px}
#lightbox.open{display:flex}
#lightbox img{max-width:100%;max-height:100%}
#lightbox .close{position:absolute;top:16px;right:22px;color:#fff;font-size:32px;cursor:pointer;background:none;border:none}

mark{background:#ffeb3b;color:#000;padding:0 2px;border-radius:2px}
#load-more{display:block;margin:10px auto;padding:6px 14px;background:var(--bg);border:1px solid var(--border);border-radius:16px;color:var(--text)}
#load-more:hover{background:var(--bg-alt)}
.empty-state{text-align:center;color:var(--text-muted);margin-top:20vh;font-size:15px}

#messages::-webkit-scrollbar,#chat-list::-webkit-scrollbar{width:10px}
#messages::-webkit-scrollbar-thumb,#chat-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}

/* ======= Status bar ======= */
#statusbar{position:fixed;bottom:0;right:16px;width:min(560px,95vw);background:var(--bg);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.25);font-size:12px;z-index:100;display:flex;flex-direction:column;transition:max-height .2s ease}
#statusbar.collapsed{max-height:36px;overflow:hidden}
#statusbar:not(.collapsed){max-height:260px}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;gap:10px;flex-shrink:0}
.sb-counters{display:flex;gap:8px;flex-wrap:wrap}
.sb-chip{background:var(--bg-alt);border:1px solid var(--border);padding:3px 10px;border-radius:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sb-chip.ok{background:rgba(76,175,80,.15);border-color:rgba(76,175,80,.35)}
.sb-chip.working{background:rgba(51,144,236,.15);border-color:rgba(51,144,236,.35)}
#sb-toggle{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:2px 8px;font-size:11px}
#statusbar.collapsed #sb-toggle{transform:rotate(180deg)}
.sb-logs{flex:1;overflow-y:auto;padding:4px 12px 10px;font-family:"Consolas","Monaco",monospace;font-size:11px;line-height:1.35;border-top:1px solid var(--border);background:var(--bg-alt)}
.sb-logs .ln{white-space:pre-wrap;word-break:break-all;padding:1px 0;color:var(--text-muted)}
.sb-logs .ln.ok{color:#4caf50}
.sb-logs .ln.err{color:var(--danger)}
.sb-logs .ln.info{color:var(--accent)}