:root{--bg: #0e1116;--surface: #161b22;--surface-hi: #1f262f;--border: #2a323d;--text: #e8edf2;--text-dim: #98a4b3;--accent: #4f8ef7;--accent-text: #ffffff;--danger: #f2685c;--ok: #4ec98a;--radius: 12px;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overscroll-behavior:none}#app{height:100%}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}.screen{display:flex;flex-direction:column;height:100%;height:100dvh}.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border);flex:0 0 auto}.topbar h1{font-size:1.05rem;margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .sub{display:block;font-size:.75rem;font-weight:400;color:var(--text-dim)}.icon-btn{padding:8px;border-radius:8px;color:var(--text-dim);font-size:1.1rem;line-height:1}.icon-btn:hover{background:var(--surface-hi);color:var(--text)}.scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.conn{padding:6px 16px;font-size:.8rem;text-align:center;background:var(--surface-hi);color:var(--text-dim)}.conn.offline{background:#3a2420;color:#ffb4a8}.chat-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}.chat-row:hover{background:var(--surface)}.avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--surface-hi);display:grid;place-items:center;font-weight:600;color:var(--text-dim)}.chat-row .body{flex:1;min-width:0}.chat-row .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-row .preview{font-size:.85rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:var(--accent-text);font-size:.75rem;font-weight:600;display:grid;place-items:center}.messages{display:flex;flex-direction:column;gap:4px;padding:16px}.bubble{max-width:min(78%,560px);padding:8px 12px;border-radius:var(--radius);background:var(--surface);align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap}.bubble.mine{align-self:flex-end;background:var(--accent);color:var(--accent-text)}.bubble.unreadable{background:transparent;border:1px dashed var(--border);color:var(--text-dim);font-style:italic}.bubble .author{display:block;font-size:.75rem;font-weight:600;color:var(--text-dim);margin-bottom:2px}.bubble .meta{display:block;font-size:.68rem;opacity:.65;text-align:right;margin-top:2px}.bubble.pending{opacity:.6}.day-sep{align-self:center;font-size:.75rem;color:var(--text-dim);padding:6px 0}.composer{display:flex;gap:8px;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);flex:0 0 auto}.composer textarea{flex:1;resize:none;max-height:140px;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);font-size:16px}.composer textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.form{max-width:380px;margin:0 auto;padding:32px 20px;padding-top:calc(32px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:14px}.form h1{margin:0 0 4px;font-size:1.4rem}.form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text-dim)}.form input{padding:11px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);font-size:16px}.form input:focus{outline:2px solid var(--accent);outline-offset:-1px}.btn{padding:12px 16px;border-radius:var(--radius);background:var(--accent);color:var(--accent-text);font-weight:600;text-align:center}.btn:disabled{opacity:.5;cursor:default}.btn.ghost{background:transparent;color:var(--accent);font-weight:500}.btn.subtle{background:var(--surface-hi);color:var(--text)}.btn.danger{background:transparent;color:var(--danger)}.error{padding:10px 12px;border-radius:var(--radius);background:#3a2420;color:#ffb4a8;font-size:.88rem}.notice{padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:.85rem;line-height:1.5}.notice strong{color:var(--text)}.empty{padding:48px 24px;text-align:center;color:var(--text-dim);line-height:1.6}.section{padding:16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}.section h2{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;letter-spacing:.06em;padding:10px 12px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);user-select:all;overflow-wrap:anywhere}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-dot.ok{background:var(--ok)}.status-dot.warn{background:var(--danger)}