:root {
  color-scheme: light dark;
  --accent: #6246ea;
  --bg-question: color-mix(in srgb, var(--accent) 12%, transparent);
  --bg-answer: color-mix(in srgb, currentColor 8%, transparent);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: system-ui, sans-serif; margin: 0; line-height: 1.7; }
main { max-width: 42rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1 { font-size: 1.4rem; }
#chat-log { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.msg { padding: 0.6rem 0.9rem; border-radius: 0.8rem; white-space: pre-wrap; max-width: 90%; }
.msg.question { background: var(--bg-question); align-self: flex-start; }
.msg.answer { background: var(--bg-answer); align-self: flex-end; }
.msg.system { font-size: 0.9rem; opacity: 0.8; align-self: center; }
textarea { width: 100%; font: inherit; padding: 0.6rem; border-radius: 0.5rem; }
.buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
button { font: inherit; padding: 0.55rem 1.1rem; border-radius: 0.5rem; border: 1px solid var(--accent);
  background: var(--accent); color: white; cursor: pointer; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
#skip-button, #complete-button { background: transparent; color: inherit; }
#round-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
#error-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: #b91c1c; color: white; padding: 0.6rem 1rem; border-radius: 0.5rem; max-width: 90%; }
.note { font-size: 0.85rem; opacity: 0.85; }