:root{--c:#2563eb;--bg:#f1f5f9;--panel:#fff;--in:#fff;--out:#dbeafe;--b:#e2e8f0;--fg:#0f172a;--mut:#64748b}
@media(prefers-color-scheme:dark){:root{--bg:#0f172a;--panel:#111c33;--in:#1e293b;--out:#1e3a8a;--b:#334155;--fg:#e2e8f0;--mut:#94a3b8}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,Tahoma,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg);overflow:hidden}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:10px;padding:8px 14px;background:var(--c);color:#fff}
button.ghost{background:transparent;color:var(--c);border:1px solid var(--c)}
input[type=text],input[type=search],input:not([type]),input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--b);border-radius:10px;background:var(--panel)}

#auth{max-width:340px;margin:12vh auto 0;padding:24px;display:grid;gap:10px;background:var(--panel);border-radius:16px;box-shadow:0 4px 24px #0002}
#auth h2{margin:0 0 4px;text-align:center;color:var(--c)}
#err{color:#dc2626;min-height:1.2em;font-size:.9em}

#app{display:grid;grid-template-columns:320px 1fr;height:100dvh}
#side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-inline-end:1px solid var(--b)}
#side header,#chat>header{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--b);min-height:56px}
#side header button{background:transparent;padding:4px 8px;font-size:1.1em}
.spacer{flex:1}
#net{font-size:.75em;color:var(--mut)}
.search{padding:8px 12px;border-bottom:1px solid var(--b)}
#users{flex:1;overflow:auto}
.sec{padding:8px 12px;font-size:.8em;color:var(--mut);background:var(--bg)}
#users .empty{margin:0;padding:20px;text-align:center}
.u{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--b);cursor:pointer}
.u:hover,.u.active{background:var(--bg)}
.av{width:42px;height:42px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.u .t{flex:1;min-width:0}
.u .t b,.u .t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u small{color:var(--mut)}
.badge{background:var(--c);color:#fff;border-radius:99px;padding:1px 8px;font-size:.8em}
.av{position:relative}
.dot{position:absolute;bottom:0;inset-inline-end:0;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--panel)}
.meta{display:grid;justify-items:end;gap:4px;flex:none}
.tm{color:var(--mut);font-size:.72em}
.peerbox{display:grid;line-height:1.3}
#peerStatus{color:var(--mut);font-size:.78em}
#peerStatus.on{color:#16a34a}
.tick{margin-inline-start:2px}
.tick.seen{color:#0ea5e9;font-weight:700}
#warn{color:#b45309}
#side footer{padding:10px 12px;border-top:1px solid var(--b);font-size:.8em;color:var(--mut);display:grid;gap:4px}

#chat{display:flex;flex-direction:column;min-height:0;min-width:0}
#chat>header{background:var(--panel)}
#back{display:none;background:transparent;color:var(--fg);padding:4px 10px;font-size:1.3em}
#msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.empty{margin:auto;color:var(--mut)}
.m{max-width:min(78%,520px);padding:8px 12px;border-radius:14px;background:var(--in);word-break:break-word;white-space:pre-wrap}
.m.out{align-self:flex-start;background:var(--out)}
.m.in{align-self:flex-end}
.m small{display:block;margin-top:2px;color:var(--mut);font-size:.72em}
.media{display:grid;gap:4px;margin-bottom:4px}
.media audio{width:260px;max-width:100%}
.media video,.media img{max-width:100%;max-height:320px;border-radius:10px;display:block}
.media a{color:var(--c)}
.save{background:transparent;color:var(--c);border:1px solid var(--b);padding:2px 8px;font-size:.75em;justify-self:start}
.save.ok{color:#16a34a;border-color:#16a34a}
#composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--b);background:var(--panel);padding-bottom:max(10px,env(safe-area-inset-bottom))}
#composer input{flex:1}
.attach{display:grid;place-items:center;padding:0 10px;font-size:1.3em;cursor:pointer}

@media(max-width:700px){
  #app{grid-template-columns:1fr}
  #chat{display:none}
  body.chat-open #side{display:none}
  body.chat-open #chat{display:flex}
  #back{display:block}
}