:root { --bg:#0b1116; --card:#151c23; --ink:#eef4f8; --muted:#93a4b3; --accent:#5ee0c4; --warn:#f5c16c; --bad:#ff8a80; --pad: max(12px, env(safe-area-inset-bottom)); }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%; }
header { padding:14px 16px 8px; padding-top: max(14px, env(safe-area-inset-top)); position:sticky; top:0; background:linear-gradient(var(--bg), rgba(11,17,22,.92)); z-index:2; }
button, select, input, textarea { touch-action: manipulation; }
h1 { font-size:1.1rem; margin:0; }
.sub { color:var(--muted); font-size:.85rem; margin-top:4px; }
main { max-width:720px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; }
#log { flex:1; overflow:auto; padding:8px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.msg { background:var(--card); border-radius:16px; padding:12px 14px; line-height:1.45; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self:flex-end; background:#1e2a33; max-width:92%; }
.msg .meta { color:var(--muted); font-size:.75rem; margin-top:8px; }
.banner { border-radius:12px; padding:8px 10px; font-size:.85rem; margin-top:8px; }
.warn { background:#3a2e12; color:var(--warn); }
.bad { background:#3a1515; color:var(--bad); }
.composer { position:sticky; bottom:0; background:var(--bg); padding:8px 16px var(--pad); }
textarea { width:100%; min-height:88px; font-size:16px; border:0; border-radius:14px; padding:12px; background:#10171d; color:var(--ink); resize:vertical; }
.row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
button, select { font-size:1rem; border:0; border-radius:12px; padding:12px 14px; background:var(--accent); color:#04221b; font-weight:700; }
button.secondary { background:#253039; color:var(--ink); font-weight:600; }
select { background:#253039; color:var(--ink); font-weight:600; }
button:disabled { opacity:.5; }
#login { padding:24px 16px; }
input[type=password], input[type=text] { width:100%; font-size:16px; padding:12px; border-radius:12px; border:0; background:#10171d; color:var(--ink); }
.hidden { display:none !important; }
.err { color:var(--bad); }