:root{--bg:#f8fafc;--surface:#fff;--surface-2:#f1f5f9;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--accent:#1e3a8a;--accent-contrast:#fff;--accent-soft:#e0e7ff;--danger:#dc2626;--ok:#16a34a;--radius:10px;--radius-sm:6px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--font-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--shadow:0 1px 2px #0f172a0f,0 4px 16px #0f172a14;--rail-w:72px;--list-w:340px;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)}@media (prefers-color-scheme:dark){:root{--bg:#0b1220;--surface:#111a2e;--surface-2:#18233b;--border:#22304d;--text:#e6ecf7;--text-muted:#8a9ab8;--accent:#6d8cff;--accent-contrast:#0b1220;--accent-soft:#1c2a52}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.45 var(--font-sans);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,textarea,select{font:inherit;color:inherit}.btn{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;touch-action:manipulation;min-height:40px;padding:8px 14px;transition:transform 50ms,background .1s}.btn:active{background:var(--surface-2);transform:scale(.97)}.btn.primary{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}.btn.primary:active{filter:brightness(.9)}.btn:disabled{opacity:.55;cursor:default}.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.input{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);width:100%;min-height:40px;padding:9px 12px}.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));border-radius:var(--radius-sm);background-size:200% 100%;animation:1.1s linear infinite sk}@keyframes sk{to{background-position:-200% 0}}.muted{color:var(--text-muted)}.row{align-items:center;gap:var(--space-2);display:flex}.grow{flex:1;min-width:0}.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.toast-host{right:16px;bottom:calc(16px + var(--safe-bottom));z-index:100;flex-direction:column;gap:8px;display:flex;position:fixed}.toast{background:var(--text);color:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow);max-width:340px;padding:10px 14px}.avatar{color:#fff;border-radius:50%;flex:none;place-items:center;width:36px;height:36px;font-weight:600;display:grid}.appnav{background:var(--surface);border-bottom:1px solid var(--border);gap:4px;padding:8px;display:flex}.appnav a{border-radius:var(--radius-sm);color:var(--text-muted);padding:6px 12px;text-decoration:none}.appnav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}.login{max-width:380px;padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:var(--space-3);flex-direction:column;margin:12vh auto;display:flex}.shell{flex-direction:column;height:100dvh;min-height:0;display:flex}.app-main{flex-direction:column;flex:1;min-height:0;display:flex}.split{grid-template-columns:var(--list-w) minmax(0, 1fr);flex:1;min-height:0;display:grid}.list-pane{border-right:1px solid var(--border);flex-direction:column;min-width:0;min-height:0;display:flex}.detail-pane{flex-direction:column;min-width:0;min-height:0;display:flex}.app-main>.list,.app-main>.chat,.list-pane>.list,.detail-pane>.chat,.detail-pane>.placeholder{flex:1;min-height:0}.small{font-size:13px}.title{font-weight:600}.placeholder{color:var(--text-muted);padding:var(--space-5);text-align:center;place-items:center;display:grid}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.list{background:var(--surface);flex-direction:column;min-width:0;min-height:0;display:flex}.list-head{padding:var(--space-3);border-bottom:1px solid var(--border)}.chat-list{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow:auto}.chat-item{gap:var(--space-3);width:100%;min-height:64px;padding:10px var(--space-3);border:0;border-bottom:1px solid var(--border);text-align:left;cursor:pointer;background:0 0;align-items:center;display:flex}.chat-item:hover{background:var(--surface-2)}.chat-item[aria-current=true]{background:var(--accent-soft)}.chat-main{gap:2px;min-width:0;display:grid}.time{flex:none}.preview{font-size:14px}.badge{background:var(--accent);min-width:22px;height:22px;color:var(--accent-contrast);border-radius:999px;flex:none;place-items:center;padding:0 7px;font-size:12px;font-weight:600;display:inline-grid}.empty{padding:var(--space-4);text-align:center;list-style:none}.search-results{border-bottom:1px solid var(--border);max-height:45%;padding:var(--space-2) 0;background:var(--surface-2);overflow:auto}.search-results h3{margin:var(--space-2) var(--space-3) 4px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:12px}.hit{text-align:left;width:100%;min-width:0;padding:8px var(--space-3);cursor:pointer;background:0 0;border:0;display:grid}.hit:hover:not(:disabled){background:var(--surface)}.hit:disabled{opacity:.55;cursor:default}.hit span{min-width:0;display:block}.hit mark{background:var(--accent-soft);color:inherit;border-radius:3px}.begin{text-align:center;padding:var(--space-2) 0}.preview.deleted{font-style:italic}.chat{background:var(--bg);flex-direction:column;min-width:0;min-height:0;display:flex}.chat-head{align-items:center;gap:var(--space-2);padding:calc(10px + var(--safe-top)) var(--space-3) 10px;border-bottom:1px solid var(--border);background:var(--surface);display:flex}.chat-head .title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-body{flex:1;min-height:0;display:flex}.messages{overflow-anchor:none;overscroll-behavior:contain;flex:1;min-width:0;overflow:auto}.col{box-sizing:border-box;width:100%;max-width:760px;padding:var(--space-3) var(--space-4);flex-direction:column;gap:6px;margin:0 auto;display:flex}.older{padding:var(--space-2) 0;justify-items:center;display:grid}.older-loading{gap:6px;width:100%;max-width:220px;display:grid}.day-sep{color:var(--text-muted);background:var(--surface-2);margin:var(--space-2) 0;border-radius:999px;align-self:center;padding:3px 10px;font-size:12px}.msg-row{justify-content:flex-start;display:flex}.msg-row.mine{justify-content:flex-end}.bubble{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:2px;min-width:0;max-width:min(560px,82%);padding:6px 30px 6px 10px;display:grid;position:relative}.msg-row.mine .bubble{background:var(--accent-soft);border-color:#0000}.bubble[data-pending=true]{opacity:.7}.bubble.failed{border-color:var(--danger)}.bubble.gone{background:0 0}.body.deleted{color:var(--text-muted);font-style:italic}.edited{color:var(--text-muted)}.state.fail{color:var(--danger)}.offline-hint{color:var(--text-muted)}.failed-row{gap:var(--space-2);color:var(--danger);flex-wrap:wrap;align-items:center;font-size:13px;display:flex}.failed-text{overflow-wrap:anywhere;align-items:center;gap:4px;min-width:0;display:inline-flex}.failed-row .btn{min-height:30px;padding:4px 10px;font-size:13px}.failed-row svg,.state.fail svg{flex:none;width:12px;height:12px}.msg-menu-btn{border-radius:var(--radius-sm);width:24px;height:24px;color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;top:4px;right:4px}.msg-menu-btn svg{width:14px;height:14px}.bubble:hover .msg-menu-btn,.bubble:focus-within .msg-menu-btn,.msg-menu-btn[aria-expanded=true]{opacity:1}.msg-menu-btn:focus-visible{outline:2px solid var(--accent);opacity:1}.msg-menu{z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:140px;box-shadow:var(--shadow);padding:4px;display:grid;position:absolute;top:30px;right:4px}.msg-menu button{text-align:left;border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:0;min-height:36px;padding:6px 10px}.msg-menu button:hover,.msg-menu button:focus-visible{background:var(--surface-2);outline:none}.confirm{gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);margin-top:4px;padding:8px;display:grid}.row.end{justify-content:flex-end}.btn.danger{color:var(--danger);border-color:var(--danger)}.edit-banner{align-items:center;gap:var(--space-2);padding:6px var(--space-3);background:var(--accent-soft);color:var(--accent);border-top:1px solid var(--border);font-size:13px;display:flex}.composer-wrap{border-top:1px solid var(--border);background:var(--surface)}.composer-wrap .composer{border-top:0}.composer-err{padding:4px var(--space-3) 0;color:var(--danger)}.undo-toast{z-index:70;left:50%;bottom:calc(92px + var(--safe-bottom));align-items:center;gap:var(--space-3);max-width:calc(100% - 32px);display:flex;position:fixed;transform:translate(-50%)}.undo-toast .btn{min-height:30px;color:var(--text);padding:4px 10px}@media (hover:none){.msg-menu-btn{opacity:1}.bubble{-webkit-touch-callout:none}}.sender{color:var(--accent);font-size:12px;font-weight:600}.body{white-space:pre-wrap;overflow-wrap:anywhere}.meta{color:var(--text-muted);justify-content:flex-end;align-items:center;gap:6px;font-size:11px;display:flex}.meta svg{vertical-align:-2px;width:12px;height:12px}.state{align-items:center;gap:3px;display:inline-flex}.info-pane{width:260px;padding:var(--space-3);background:var(--surface);border-left:1px solid var(--border);flex:none;overflow:auto}.info-pane ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.info-pane li{align-items:center;gap:8px;display:flex}.composer{gap:var(--space-2);padding:var(--space-2) var(--space-3) calc(var(--space-2) + var(--safe-bottom));border-top:1px solid var(--border);background:var(--surface);align-items:flex-end;display:flex}.composer textarea{resize:none;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);flex:1;min-width:0;min-height:40px;max-height:160px;padding:9px 12px;line-height:1.35}.overlay{z-index:50;padding:var(--space-4);background:color-mix(in srgb, var(--text) 40%, transparent);place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--surface);border-radius:var(--radius);width:min(480px,100%);max-height:80dvh;box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.dialog-head{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}.dialog-head h2{margin:0;font-size:18px}.contacts{min-height:0;margin:0;padding:0;list-style:none;overflow:auto}.contact{align-items:center;gap:var(--space-2);width:100%;min-height:48px;padding:10px var(--space-4);text-align:left;cursor:pointer;background:0 0;border:0;display:flex}.contact:hover:not(:disabled){background:var(--surface-2)}.contact:disabled{opacity:.55;cursor:default}label.contact{cursor:pointer}.group-form{gap:var(--space-2);padding:var(--space-3) var(--space-4);min-height:0;display:grid;overflow:auto}.group-form .btn{justify-self:end}.notif-host{z-index:60;top:calc(64px + var(--safe-top));flex-direction:column;gap:8px;width:min(420px,100% - 32px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.notif{text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border:0;width:100%;max-width:none;display:block;overflow:hidden}@media (max-width:380px){.bubble{max-width:90%}}