:root{--primary:#6c5ce7;--bg:color-mix(in srgb, var(--primary) 7%, #fff);--mine:var(--primary);--mine-text:#fff;--theirs:#fff;--theirs-text:#2d2a3e;--muted:#8a85a3;--surface:#fff;--border:color-mix(in srgb, var(--primary) 16%, #fff)}@media (prefers-color-scheme:dark){:root{--bg:color-mix(in srgb, var(--primary) 8%, #141318);--theirs:#2a2738;--theirs-text:#f1effa;--surface:#211e2d;--border:color-mix(in srgb, var(--primary) 20%, #211e2d);--muted:#a39fbb}}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--theirs-text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:19px}button{font:inherit;cursor:pointer}input{font:inherit}.login{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.login-emoji{font-size:72px}.login h1{margin:8px 0 24px}.login form{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.login input{border:2px solid var(--border);background:var(--surface);color:inherit;text-align:center;border-radius:14px;padding:14px;font-size:22px}.login button{background:var(--primary);color:#fff;border:0;border-radius:14px;padding:14px;font-size:22px;font-weight:700}.error{color:#e05555;margin:0}.chat{flex-direction:column;height:100dvh;display:flex}.chat header{background:var(--primary);color:#fff;align-items:center;gap:12px;padding:12px 16px;display:flex}.chat header h1{margin:0;font-size:24px}.avatar{width:44px;height:44px;color:var(--primary);background:#fff;border-radius:50%;place-items:center;font-size:22px;font-weight:800;display:grid}.messages[hidden]{display:none}.messages{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow-y:auto}.empty{text-align:center;color:var(--muted);margin-top:40px}.bubble{border-radius:20px;max-width:min(80%,640px);padding:10px 14px 6px;box-shadow:0 1px 2px #00000014}.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.bubble p.big-emoji{font-size:44px;line-height:1.2}.bubble time{opacity:.7;text-align:right;margin-top:2px;font-size:12px;display:block}.bubble.mine{background:var(--mine);color:var(--mine-text);border-bottom-right-radius:6px;align-self:flex-end}.bubble.theirs{background:var(--theirs);color:var(--theirs-text);border-bottom-left-radius:6px;align-self:flex-start}.emojis{gap:6px;padding:8px 12px 0;display:flex;overflow-x:auto}.emojis button{background:var(--surface);border:0;border-radius:14px;flex:none;width:52px;height:52px;font-size:28px}.emojis button:active{transform:scale(.9)}.composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;display:flex}.composer input{border:2px solid var(--border);background:var(--surface);min-width:0;color:inherit;border-radius:26px;flex:1;padding:14px 16px}.composer button{background:var(--primary);color:#fff;border:0;border-radius:50%;width:56px;height:56px;font-size:24px}.composer button:disabled{opacity:.4}.admin{max-width:560px;margin:0 auto;padding:16px;font-size:17px}.admin header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.admin h1{margin:0}.admin h2{margin:0 0 4px;font-size:18px}.notice{border-radius:12px;margin:0 0 12px;padding:10px 14px}.notice.error{background:#e0555522}.notice.ok{color:inherit;background:#2ecc7122}.user-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:10px;margin-bottom:12px;padding:16px;display:flex}.user-card.new{border-style:dashed}.user-card label{color:var(--muted);flex-direction:column;gap:4px;font-size:14px;display:flex}.user-card input{border:2px solid var(--border);background:var(--bg);color:var(--theirs-text);border-radius:10px;padding:10px 12px;font-size:17px}.hint{color:var(--muted);overflow-wrap:anywhere;margin:0;font-size:13px}.actions{gap:8px;display:flex}.actions button,.link{background:var(--primary);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:16px;font-weight:600}.actions .danger{color:#e05555;background:0 0;margin-left:auto}.link{color:var(--primary);background:0 0;padding:6px 0}.emojis .more{background:var(--primary);color:#fff;font-size:30px;font-weight:700}.picker{background:var(--surface);border:1px solid var(--border);border-radius:18px;flex-direction:column;flex:1;min-height:0;margin:12px 12px 0;display:flex;overflow:hidden}.picker-search{border:2px solid var(--border);background:var(--bg);color:inherit;border-radius:14px;margin:10px 10px 4px;padding:10px 14px}.picker-tabs{border-bottom:1px solid var(--border);gap:2px;padding:0 6px;display:flex;overflow-x:auto}.picker-tabs button{opacity:.55;background:0 0;border:0;border-bottom:3px solid #0000;flex:none;padding:6px 8px;font-size:24px}.picker-tabs button[aria-selected=true]{opacity:1;border-bottom-color:var(--primary)}.picker-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));align-content:start;padding:6px;display:grid;overflow-y:auto}.picker-grid button{background:0 0;border:0;border-radius:12px;height:52px;font-size:32px}.picker-grid button:active{background:var(--bg);transform:scale(.9)}.picker-empty{text-align:center;color:var(--muted);grid-column:1/-1}.chat header h1{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.header-button{color:#fff;background:#ffffff26;border:0;border-radius:50%;width:40px;height:40px;font-size:20px}.chat{--gutter:max(16px, calc((100vw - 1100px) / 2))}.chat header,.messages{padding-inline:var(--gutter)}.emojis,.composer{padding-inline:calc(var(--gutter) - 4px)}.picker{margin-inline:calc(var(--gutter) - 4px)}.menu{position:relative}.menu-panel{z-index:10;background:var(--surface);width:228px;color:var(--theirs-text);border:1px solid var(--border);border-radius:16px;padding:12px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 28px #0000002e}.menu-label{color:var(--muted);margin:0 0 8px;font-size:13px;font-weight:600}.swatches{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.swatch{aspect-ratio:1;box-shadow:inset 0 0 0 2px var(--surface);border:3px solid #0000;border-radius:50%}.swatch[aria-pressed=true]{border-color:var(--theirs-text)}.menu-panel hr{border:0;border-top:1px solid var(--border);margin:12px -12px 6px}.menu-item{text-align:left;width:100%;color:inherit;background:0 0;border:0;border-radius:10px;padding:10px 8px;font-size:17px}.menu-item:hover{background:var(--bg)}