: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%;color:var(--text);overscroll-behavior:none;background:var(--surface)}#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;background:var(--bg)}.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);overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.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:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:.68rem;margin-top:2px}.bubble .meta .time,.bubble .edited{opacity:.65}.bubble.pending{opacity:.6}.bubble .edited{font-style:italic}.ticks{flex:0 0 auto;vertical-align:middle;opacity:.6}.ticks.read{opacity:1;color:#7fd4ff}.bubble.mine .ticks.read{color:#d9f2ff}.quote{border-left:3px solid currentColor;padding:2px 0 2px 8px;margin-bottom:4px;opacity:.75;font-size:.85rem;max-height:3.2em;overflow:hidden}.quote-author{font-weight:600}.quote-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bubble{position:relative;transition:transform .18s ease-out;touch-action:pan-y;-webkit-touch-callout:none}@media(pointer:coarse){.bubble{user-select:none;-webkit-user-select:none}}.bubble-actions{position:absolute;top:-10px;right:8px;display:none;gap:2px;background:var(--surface-hi);border:1px solid var(--border);border-radius:8px;padding:2px}.bubble.mine .bubble-actions{right:auto;left:8px}@media(hover:hover)and (pointer:fine){.bubble:hover .bubble-actions{display:flex}}.bubble-actions .icon-btn{padding:4px 6px;font-size:.9rem}.bubble-menu{display:none;position:absolute;top:50%;transform:translateY(-50%);right:-30px;width:28px;height:28px;border-radius:50%;color:var(--text-dim);font-size:1rem;line-height:1}.bubble.mine .bubble-menu{right:auto;left:-30px}@media(hover:none),(pointer:coarse){.bubble-menu{display:block}.messages{padding-left:34px;padding-right:34px}}.sheet-backdrop{position:fixed;inset:0;z-index:20;background:#00000080;display:flex;align-items:flex-end;animation:sheet-fade .15s ease-out}.sheet{width:100%;background:var(--surface);border-top:1px solid var(--border);border-radius:16px 16px 0 0;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px;animation:sheet-rise .18s ease-out}@media(min-width:640px){.sheet-backdrop{align-items:center;justify-content:center}.sheet{width:min(320px,90vw);border-radius:16px;border:1px solid var(--border)}}.sheet-item{padding:14px 16px;border-radius:10px;text-align:left;font-size:1rem}.sheet-item:hover{background:var(--surface-hi)}.sheet-item.cancel{color:var(--text-dim);text-align:center;margin-top:4px}@keyframes sheet-fade{0%{opacity:0}}@keyframes sheet-rise{0%{transform:translateY(12px)}}.compose-hint{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border);flex:0 0 auto}.compose-hint .body{flex:1;min-width:0;border-left:3px solid var(--accent);padding-left:8px}.compose-hint .label{font-size:.75rem;font-weight:600;color:var(--accent)}.compose-hint .text{font-size:.85rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-sep{align-self:center;font-size:.75rem;color:var(--text-dim);padding:6px 0}.composer{display:flex;gap:8px;align-items:flex-end;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:40vh;overflow-y:auto;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);font-size:16px;line-height:1.35}.composer .btn{flex:0 0 auto;align-self:flex-end;height:42px;padding:0 18px}.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)}