:root { --bg:#0a0c0e; --fg:#7aa0b3; --ink:#e8eaed; --muted:#9aa3ad; --card:#16181c; --line:#2a2e33; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font: 16px/1.45 system-ui, -apple-system, sans-serif; min-height:100%; }
body { display:flex; flex-direction:column; min-height:100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; }
.brand img { border-radius:10px; }
h1 { margin:0; font-size:1.15rem; }
.tag { margin:0; color:var(--muted); font-size:.8rem; }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:.75rem; color:var(--muted); }
.pill.on { border-color:var(--fg); color:var(--fg); }
.pill.hot { border-color:#c44; color:#f88; }
.hidden { display:none !important; }
.tabs { display:flex; gap:8px; padding:8px 16px; border-bottom:1px solid var(--line); }
.tab { background:transparent; color:var(--muted); border:0; padding:8px 12px; border-radius:8px; }
.tab.on { background:var(--card); color:var(--ink); }
main { flex:1; display:flex; flex-direction:column; min-height:0; }
.view { display:none; flex:1; flex-direction:column; min-height:0; }
.view.on { display:flex; }
.thread { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:42rem; padding:10px 12px; border-radius:12px; background:var(--card); }
.msg.me { align-self:flex-end; background:#1c2228; }
.msg .who { font-size:.75rem; color:var(--muted); margin-bottom:4px; }
.composer { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--bg); }
textarea { flex:1; resize:none; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }
.send { background:var(--fg); color:#111; border:0; border-radius:10px; padding:0 16px; font-weight:700; }
.hint, .foot { color:var(--muted); font-size:.8rem; padding:8px 16px; }
.typing { padding:0 16px 8px; color:var(--muted); font-size:.85rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.confirms { margin-top:8px; padding:8px; border:1px solid var(--fg); border-radius:8px; }
@media (min-width: 880px) {
  body { max-width: 880px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
  h1 { font-size:1.35rem; }
}