:root{font:16px system-ui,sans-serif;color-scheme:dark;background:#120c20;color:#f4edff;--ink:#f4edff;--muted:#bfadd4;--line:#47355e;--field:#211731;--active:#b892fa}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overscroll-behavior:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.58}
:focus-visible{outline:2px solid #c9a6ff;outline-offset:2px}
#app{height:var(--chat-height,100dvh);min-height:0;max-width:880px;margin:auto;display:flex;flex-direction:column;background:#160e25}
.top{padding:max(10px,env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:10px;min-height:65px;background:#1b1229;border-bottom:1px solid var(--line)}
.mark{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid #7453a4;background:#2c1d48;color:#c6a0ff;font-size:25px;font-weight:850;font-style:italic}
.title{min-width:0;flex:1}.title h1,.title p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title h1{font-size:17px;margin:0}.title p{font-size:12px;color:var(--muted);margin:3px 0 0}
#secure{display:inline-block;margin-inline-start:2px;vertical-align:2px;padding:2px 4px;border-radius:5px;color:#aef5d9;background:#22443e;font-size:8px;letter-spacing:.3px}
.gate{flex:1;overflow:auto;padding:24px 14px}.gate-card{max-width:378px;margin:3vh auto 0;padding:19px;border-radius:19px;border:1px solid var(--line);background:var(--field)}
h2{margin:0 0 14px;font-size:19px}
label{display:grid;gap:6px;margin:0 0 12px;color:var(--muted);font-size:13px}
input:not([type=file]),textarea{width:100%;padding:10px 12px;min-height:42px;border-radius:13px;border:1px solid var(--line);background:#170f25;color:var(--ink);font-size:16px}
.primary,.secondary{min-height:39px;padding:7px 12px;border-radius:12px;color:var(--ink);font-size:13px;font-weight:650;border:1px solid var(--line);background:#2b1e40}
.primary{background:#6d38b7;border-color:#a571ee}
#auth{display:grid;gap:3px}
#auth p{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.45}
.auth-link{display:grid;place-items:center;text-decoration:none}
.status{margin:8px 0 0;color:#efd4ff;font-size:13px;overflow-wrap:anywhere}.status:empty{display:none}
#device-id{font-family:ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere;color:var(--muted)}
#chat{min-height:0;flex:1;display:flex;flex-direction:column}
#log{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:12px 14px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.day{align-self:center;color:var(--muted);background:#2d2041;padding:4px 9px;margin:4px 0;border-radius:999px;font-size:11px}
.empty{margin:auto;color:var(--muted);text-align:center;font-size:13px}
.row{display:flex;align-items:end;gap:7px}.row.own{justify-content:flex-end}.row.continued{margin-top:-4px}
.avatar{width:31px;flex:none}.avatar:not(:empty){height:31px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:#634294;font-size:12px;font-weight:700}
.bubble{min-width:0;max-width:min(82%,530px);background:#281a3e;border-radius:15px 15px 15px 5px;padding:7px 10px 5px;overflow-wrap:anywhere}
.row.own .bubble{background:#462668;border-radius:15px 15px 5px 15px}
.row.continued:not(.own) .bubble{border-top-left-radius:6px}.row.continued.own .bubble{border-top-right-radius:6px}
.author{color:#d0adff;font-size:12px}.message{white-space:pre-wrap;margin:3px 0;font-size:14px;line-height:1.42;unicode-bidi:plaintext}
.quote{margin:3px 0 5px;padding:3px 6px;border-inline-start:2px solid #b991f7;background:#1b122b;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.meta{min-height:19px;display:flex;align-items:center;justify-content:flex-end;gap:4px;color:var(--muted);font-size:11px}.meta .menu{background:none;border:0;color:inherit;padding:0 2px;font-size:17px}
.reaction-list{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.reaction-list button{border-radius:999px;border:1px solid var(--line);background:var(--field);color:var(--ink);font-size:12px;padding:3px 6px}.reaction-list button[aria-pressed=true]{border-color:var(--active)}
.bubble img,.bubble video{display:block;max-width:100%;max-height:260px;margin:4px 0;border-radius:9px}.bubble audio,#attachment audio{width:min(260px,100%)}
#composer{padding:8px 9px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#1b1229}
#composer .status{margin:0 4px 5px}
#send-form{display:flex;gap:6px;align-items:end}
#message{flex:1;min-width:0;min-height:42px;max-height:100px;line-height:20px;resize:none;border-radius:22px}
#context,#attachment{min-height:36px;margin:0 4px 6px;padding:3px 7px;border-inline-start:2px solid var(--active);background:var(--field);display:flex;align-items:center;gap:6px;font-size:12px}
#context span,#attachment span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon{border:0;border-radius:50%;width:42px;height:42px;padding:0;flex:none;display:grid;place-items:center;background:transparent;color:#d8c2ff}
.icon svg{width:21px;height:21px}
.icon.accent{background:#6836ab;color:var(--ink);border:1px solid #a571ee}
.icon.accent:disabled{opacity:.72}
dialog{width:min(100% - 30px,410px);max-height:calc(100dvh - 30px);border:1px solid var(--line);border-radius:18px;background:#251936;color:var(--ink);padding:16px}
dialog::backdrop{background:#090611b8}dialog p{color:var(--muted);font-size:13px}
.dialog-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.reactions-menu{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.recording{color:#ff9ba8;font-variant-numeric:tabular-nums}