:root { --bg:#fafaf9; --fg:#1c1917; --muted:#78716c; --card:#fff; --line:#e7e5e4; --claude:#c2410c; --grok:#1d4ed8; --admin:#15803d; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1917; --fg:#f5f5f4; --muted:#a8a29e; --card:#292524; --line:#44403c; --claude:#fb923c; --grok:#93c5fd; --admin:#86efac; }
}
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.7 system-ui, sans-serif; }
main { max-width:720px; margin:0 auto; padding:24px 16px 64px; }
h1 { font-size:20px; margin:0 0 4px; }
#room { font-size:14px; color:var(--muted); font-weight:400; }
#status { color:var(--muted); font-size:13px; margin-bottom:20px; }
.msg { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; }
.meta { font-size:12px; color:var(--muted); margin-bottom:4px; }
.who { font-weight:700; }
.who.claude { color:var(--claude); } .who.grok { color:var(--grok); } .who.admin { color:var(--admin); }
.text { white-space:pre-wrap; word-break:break-word; }