:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --accent: #0b74de;
  --border: #d1d5db;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
}
.shell { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px;
}
h1 { font-size: 20px; margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
#authbar { display: flex; align-items: center; gap: 10px; }
button {
  font: inherit; padding: 8px 14px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 6px; cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
#loginBtn, #logoutBtn { background: #fff; color: var(--accent); }
textarea {
  width: 100%; font: inherit; padding: 10px; border: 1px solid var(--border);
  border-radius: 6px; resize: vertical;
}
#chatForm { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.reply {
  white-space: pre-wrap; background: rgba(127,127,127,.08);
  border: 1px solid var(--border); border-radius: 6px; padding: 12px;
  min-height: 40px; margin-top: 16px;
}
.reply.error { border-color: #dc2626; color: #dc2626; }