:root{--bg:#f6f7f9;--panel:#fff;--panel-2:#f0f2f5;--line:#e3e6ea;--text:#16191d;--muted:#6b7480;--accent:#2f6fed;--accent-soft:#e8effd;--own:#d9fdd3;--danger:#c0392b;--ok:#2f9e44;--radius:10px}@media (prefers-color-scheme:dark){:root{--bg:#0f1216;--panel:#171b21;--panel-2:#1e242c;--line:#2a313a;--text:#e8eaed;--muted:#96a0ac;--accent:#5b8dff;--accent-soft:#1d2c4a;--own:#204d3c;--danger:#e06c5f;--ok:#6cc47f}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,textarea,select{font:inherit;color:inherit}.app{grid-template-rows:auto 1fr;height:100dvh;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:10px 16px;display:flex}.topbar .brand{letter-spacing:-.01em;font-weight:650}.topbar nav{gap:4px;margin-left:auto;display:flex}.topbar a,.linkbtn{border-radius:var(--radius);color:var(--muted);cursor:pointer;background:0 0;border:0;padding:6px 12px;text-decoration:none}.topbar a:hover,.linkbtn:hover{background:var(--panel-2);color:var(--text)}.topbar a.active{background:var(--accent-soft);color:var(--accent)}.messenger{grid-template-columns:320px 1fr;min-height:0;display:grid}.chats{border-right:1px solid var(--line);background:var(--panel);min-height:0;overflow-y:auto}.chat-item{border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;background:0 0;grid-template-columns:1fr auto;gap:2px 8px;width:100%;padding:10px 14px;display:grid}.chat-item:hover{background:var(--panel-2)}.chat-item.active{background:var(--accent-soft)}.chat-item .title{font-weight:550}.chat-item .preview{color:var(--muted);grid-column:1;font-size:13px}.chat-item .meta{color:var(--muted);text-align:right;font-size:12px}.chat-item .badge{background:var(--accent);color:#fff;text-align:center;border-radius:10px;min-width:20px;padding:1px 6px;font-size:12px;display:inline-block}.thread{grid-template-rows:auto 1fr auto;min-height:0;display:grid}.thread-head{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:10px 16px;display:flex}.messages{flex-direction:column;gap:8px;min-height:0;padding:16px;display:flex;overflow-y:auto}.bubble{background:var(--panel);border:1px solid var(--line);overflow-wrap:anywhere;border-radius:14px;align-self:flex-start;max-width:min(560px,78%);padding:8px 12px}.bubble.own{background:var(--own);border-color:#0000;align-self:flex-end}.bubble .sender{color:var(--accent);margin-bottom:2px;font-size:12px;font-weight:600}.bubble .stamp{color:var(--muted);text-align:right;margin-top:4px;font-size:11px}.bubble .stamp .failed{color:var(--danger)}.bubble img{border-radius:8px;max-width:100%;display:block}.bubble audio{width:260px;max-width:100%}.bubble a.file{color:var(--accent);align-items:center;gap:6px;display:inline-flex}.composer{background:var(--panel);border-top:1px solid var(--line);align-items:flex-end;gap:8px;padding:10px 14px;display:flex}.composer textarea{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);resize:none;flex:1;min-height:44px;max-height:160px;padding:9px 12px;font-size:16px}.composer button{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);cursor:pointer;height:40px;padding:0 14px}.composer button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.composer button.recording{background:var(--danger);border-color:var(--danger);color:#fff}.composer button:disabled{opacity:.5;cursor:default}.empty{color:var(--muted);text-align:center;margin:auto;padding:40px}.page{width:100%;max-width:900px;margin:0 auto;padding:24px;overflow-y:auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:16px}.card h3{margin:0 0 4px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.spacer{flex:1}.status{background:var(--panel-2);color:var(--muted);border-radius:10px;padding:2px 8px;font-size:13px}.status.online{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok)}.status.error,.status.logged_out{background:color-mix(in srgb, var(--danger) 18%, transparent);color:var(--danger)}.status.connecting{background:var(--accent-soft);color:var(--accent)}input[type=text],input[type=email],input[type=password],select{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);min-height:44px;padding:9px 12px;font-size:16px}button.primary{border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;padding:9px 16px}button.ghost{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);cursor:pointer;padding:9px 14px}button.danger{border-color:var(--danger);color:var(--danger);background:0 0}.login{place-items:center;height:100dvh;display:grid}.login form{gap:10px;width:min(340px,90vw);display:grid}.error{color:var(--danger);font-size:14px}.hint{color:var(--muted);font-size:13px}.qr{border-radius:var(--radius);background:#fff;width:fit-content;padding:12px}.thread-head .back{display:none}.thread-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topbar{padding-top:max(10px, env(safe-area-inset-top))}.composer{padding-bottom:max(10px, env(safe-area-inset-bottom))}.page{padding-bottom:max(24px, env(safe-area-inset-bottom))}@media (max-width:760px){.messenger{grid-template-columns:1fr}.messenger .thread,.messenger.has-chat .chats{display:none}.messenger.has-chat .thread{display:grid}.chats{border-right:0}.chat-item{min-height:60px;padding:12px 14px}.chat-item .title{font-size:15px}.app:has(.messenger.has-chat) .topbar{display:none}.app:has(.messenger.has-chat){grid-template-rows:1fr}.thread-head{padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));gap:8px}.thread-head .back{border-radius:var(--radius);background:var(--panel-2);cursor:pointer;border:0;flex:none;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;line-height:1;display:inline-flex}.thread-head .hint{display:none}.messages{padding:12px 10px}.bubble{max-width:88%}.bubble audio{width:100%;min-width:200px}.composer{padding:8px 10px max(8px, env(safe-area-inset-bottom));gap:6px}.composer button{min-width:44px;height:44px;padding:0 10px}.composer button.primary{padding:0 14px;font-size:0}.composer button.primary:after{content:"➤";font-size:18px}.composer button.primary:disabled{opacity:.4}.topbar{gap:10px;padding:8px 12px}.topbar .hint{display:none}.topbar a,.linkbtn{padding:8px 10px}.page{padding:14px 12px max(14px, env(safe-area-inset-bottom))}.card{padding:14px 12px}.card .row{gap:8px}.card .row button{flex:auto;min-height:44px}.card .row input,.card .row select{flex:100%}.card .spacer{display:none}.qr img{width:100%;max-width:260px;height:auto}.login form{width:min(340px,88vw)}}@media (max-width:380px){.composer button{min-width:40px;padding:0 6px}.bubble{max-width:92%}}@media (max-width:900px) and (max-height:480px){.topbar{padding-top:4px;padding-bottom:4px}.composer textarea{max-height:80px}}
