*,:after,:before{box-sizing:border-box}body,html{height:100%;margin:0;padding:0;overflow:hidden}:root{--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--bg:#0b0f14;--panel:#0f141b;--bg-elev:#141a23;--text:#e6edf3;--subtext:#97a3b6;--muted:#6b7280;--border:#1f2a37;--accent:#22c55e;--accent-2:#86efac;--bubble-me:#0f2a1d;--bubble-them:#111827;--red:#ef4444;--shadow:0 8px 28px rgba(0,0,0,.35);color-scheme:dark}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.link,a{color:var(--subtext);text-decoration:none;cursor:pointer}.link:hover,a:hover{color:var(--text)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}button,input,textarea{font:inherit;color:inherit}input,textarea{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:10px 12px}input::placeholder,textarea::placeholder{color:var(--muted)}button{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:10px 14px;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);font-size:12px;line-height:1}.chip.secondary{background:transparent;color:var(--subtext)}.muted{color:var(--muted)}.error{color:var(--red)}.chat{height:100vh}@supports (height:100dvh){.chat{height:100dvh}}@supports (height:100svh){.chat{height:100svh}}.chat{display:grid;grid-template-columns:280px 1fr}.sidebar{position:-webkit-sticky;position:sticky;top:0;align-self:start;height:100%;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);padding:calc(8px + var(--safe-top)) 10px 10px 10px;gap:10px;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.sidebar-header strong{font-size:14px;letter-spacing:.3px;color:var(--subtext)}.me-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:10px}.me-row{display:flex;align-items:center;justify-content:space-between}.me-name{font-weight:600}.me-edit{display:grid;grid-template-columns:1fr auto;grid-gap:10px;gap:10px;align-items:center}.me-actions{display:inline-flex;gap:8px;justify-self:end}@media (max-width:480px){.me-edit{grid-template-columns:1fr}.me-actions{justify-self:stretch}.me-actions .chip{width:100%;text-align:center}}.userlist{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}.userbtn{width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-gap:10px;gap:10px;align-items:center;text-align:left;background:transparent;border:1px solid transparent;padding:8px;border-radius:12px}.userbtn:hover{background:hsla(0,0%,100%,.03)}.userbtn.active{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25)}.avatarWrap{position:relative;width:32px;height:32px}.avatarWrap-lg{width:72px;height:72px}.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--border);display:block;background:var(--bg-elev)}.avatar.placeholder{display:grid;place-items:center;font-weight:700;color:var(--subtext)}.statusDot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--panel)}.statusDot.online{background:var(--accent-2);box-shadow:0 0 12px rgba(138,255,193,.6)}.dot,.statusDot.offline{background:#566070}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline:6px}.dot.online{background:var(--accent-2)}.usernames .displayName{font-weight:600}.usernames .sub{color:var(--muted);font-size:12px}.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:#06120a;font-size:12px;font-weight:700}.main{height:100%;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.topbar{position:-webkit-sticky;position:sticky;top:var(--safe-top);z-index:50;background:var(--panel);border-bottom:1px solid var(--border);padding:8px 12px;padding-top:calc(8px + var(--safe-top));display:grid;grid-template-columns:auto 1fr auto;grid-gap:8px}.title,.topbar{gap:8px;align-items:center}.title,.title-row{display:flex}.title-row{align-items:center;gap:6px}.title-name{font-weight:700}.title-sub{color:var(--muted);font-size:12px}.usersToggle{border-radius:10px;padding:8px 10px;border:1px solid var(--border);background:var(--bg-elev)}.messages{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 20px}.date-sep{position:-webkit-sticky;position:sticky;top:calc(var(--safe-top) + 44px);z-index:1;text-align:center;margin:8px 0 12px}.date-sep span{display:inline-block;font-size:12px;color:var(--muted);background:var(--panel);padding:4px 10px;border:1px solid var(--border);border-radius:999px}.row{display:flex;margin:6px 0}.row.left{justify-content:flex-start}.row.right{justify-content:flex-end}.bubble{max-width:min(640px,80%);padding:10px 12px;border-radius:14px;line-height:1.35;border:1px solid var(--border);box-shadow:var(--shadow)}.bubble.me{background:var(--bubble-me)}.bubble.them{background:var(--bubble-them)}.bubble .sender{font-size:12px;color:var(--muted);margin-bottom:4px}.preview{display:block;width:100%;max-height:50vh;object-fit:contain;border-radius:12px;border:1px solid var(--border);margin-top:8px}.meta{margin-top:6px;color:var(--muted);font-size:11px;display:flex;gap:8px;align-items:center}.ticks{opacity:.9}.composer{display:grid;grid-template-columns:auto auto 1fr auto;grid-gap:8px;gap:8px;padding:8px 12px;padding-bottom:calc(8px + var(--safe-bottom));border-top:1px solid var(--border);background:var(--panel)}.composer>*{min-width:0}.composer input{min-width:0;width:100%}.main,.messages{min-width:0}.attach-label{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--bg-elev);border:1px solid var(--border);-webkit-user-select:none;-moz-user-select:none;user-select:none}.attach-input{display:none}@media (max-width:900px){.chat{grid-template-columns:1fr}.sidebar{position:fixed;top:0;left:0;bottom:0;right:min(30%,120px);max-width:340px;padding-left:calc(10px + var(--safe-left));padding-right:10px;z-index:80}.sidebar:not(.open){display:none}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:70}}.card.page{margin:0 auto;padding:clamp(16px,2vw,22px);padding-top:calc(clamp(16px, 2vw, 22px) + var(--safe-top));background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:160px 1fr;grid-gap:12px;gap:12px;align-items:center}.form-grid>label{color:var(--subtext)}@media (max-width:700px){.form-grid{grid-template-columns:1fr}}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--bg-elev);border:1px solid var(--border);padding:16px;border-radius:16px;width:min(560px,92vw);box-shadow:var(--shadow)}.modal img{width:100%;max-height:50vh;object-fit:contain;border-radius:12px;border:1px solid var(--border)}.modal-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}:root[data-theme=dark-red]{--accent:#ff9aa2;--accent-2:#ffb3b3;--bubble-me:#2b151a;--bubble-them:#1f1a20}:root[data-theme=light]{color-scheme:light;--bg:#f5f7fb;--panel:#fff;--bg-elev:#fff;--text:#0e1116;--subtext:#506177;--muted:#6b7280;--border:#d9e0ea;--accent:#3d7bf6;--accent-2:#22c55e;--bubble-me:#e7f2ff;--bubble-them:#f1f5f9;--red:#dc2626;--shadow:0 6px 24px rgba(0,0,0,.08)}strong{font-weight:700}h1,h2,h3{margin:0 0 12px}h1{font-size:clamp(20px,2.2vw,24px)}.attach-label,.bubble,.chip,.topbar,.userbtn{transition:background-color .2s ease,border-color .2s ease,color .2s ease}