:root{color-scheme:light;--bg:#f5f1ea;--surface:#fffcf8;--surface2:#ece5db;--text:#211f1c;--muted:#6e6860;--accent:#292724;--accentText:#fff;--incoming:#fff;--outgoing:#292724;--danger:#b3261e;--warning:#8a5a00;--warningBg:#fff0c2;--scrim:#0008;--focus:#c84f42;--border:#ddd5ca;--shadow:0 8px 30px #211f1c1a;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#11110f;--surface:#1b1a18;--surface2:#26231f;--text:#f6f1ea;--muted:#b8b0a5;--accent:#d9c8b8;--accentText:#211f1c;--incoming:#24221f;--outgoing:#d9c8b8;--danger:#ff8a80;--warning:#ffd180;--warningBg:#3b2c12;--scrim:#000b;--focus:#ff9d8f;--border:#38332e;--shadow:0 8px 30px #0008}}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit;color:inherit}button{min-width:44px;min-height:44px}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#login{max-width:400px;margin:auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:32px;gap:13px;text-align:center}.mark{margin:auto auto 22px;width:92px;height:92px;border-radius:29px;background:var(--accent);color:var(--accentText);display:grid;place-items:center;font:600 24px Georgia}h1{font:500 32px Georgia;margin:0}p{color:var(--muted);margin:0 0 24px}input{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:15px;font-size:17px}#enter{border:0;border-radius:15px;padding:15px;background:var(--accent);color:var(--accentText);font-weight:650}#loginError{color:var(--danger);min-height:20px}
main{height:100dvh;max-width:720px;margin:auto;background:var(--surface);display:flex;flex-direction:column}header{padding:calc(8px + env(safe-area-inset-top)) 12px 8px;min-height:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px)}header>div:nth-child(2){display:flex;flex-direction:column;flex:1}header strong{font-size:17px}header small{font-size:13px;color:var(--muted)}.avatar{width:40px;height:40px;border-radius:50%;background:#d89580;display:grid;place-items:center;color:#fff}.ghost{border:0;background:none;font-size:20px;border-radius:50%}
#messages{flex:1;overflow:auto;padding:14px 12px 22px;display:flex;flex-direction:column;gap:5px;scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.msg{max-width:82%;padding:9px 12px;border-radius:18px 18px 18px 5px;background:var(--incoming);border:1px solid var(--border);align-self:flex-start;overflow-wrap:anywhere;font-size:17px;line-height:1.32;box-shadow:0 1px 2px color-mix(in srgb,var(--text) 7%,transparent)}.msg.mine{align-self:flex-end;background:var(--outgoing);color:var(--accentText);border-color:transparent;border-radius:18px 18px 5px 18px}.meta{font-size:12px;color:var(--muted);margin-left:7px;white-space:nowrap}.mine .meta{color:color-mix(in srgb,var(--accentText) 78%,transparent)}.replying{font-size:13px;border-left:3px solid var(--focus);padding-left:8px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deleted{font-style:italic;color:var(--muted)}.file{display:block;color:inherit;margin:4px 0;text-decoration:underline;text-underline-offset:2px}.reactions{font-size:14px;margin-top:5px}.pending{border-style:dashed}.failed{border:2px solid var(--danger)}
#composer{display:flex;align-items:flex-end;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg)}.attach,#send,#emojiToggle{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:0;display:grid;place-items:center;font-size:24px}.attach{cursor:pointer}#send{background:var(--accent);color:var(--accentText)}#send:disabled{opacity:.45}textarea{flex:1;resize:none;min-height:44px;max-height:120px;border:1px solid var(--border);background:var(--surface);border-radius:22px;padding:10px 14px;font-size:17px;line-height:1.3;outline:none}
@media(min-width:721px){body{background:var(--surface2)}main{box-shadow:var(--shadow)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}