:root { font-family: system-ui, sans-serif; color: #17212b; background: #eef2f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.chat-shell { width: min(760px, 100%); height: min(820px, 100vh); background: white; display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 12px 40px #1c2b3a22; }
header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #dde4ea; }
h1, header p { margin: 0; } header p { color: #607080; margin-top: .25rem; }
.messages { overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.message { max-width: 82%; padding: .75rem 1rem; border-radius: 1rem; white-space: pre-wrap; line-height: 1.45; }
.message.user { align-self: flex-end; background: #185adb; color: white; border-bottom-right-radius: .25rem; }
.message.assistant { align-self: flex-start; background: #edf1f5; border-bottom-left-radius: .25rem; }
.message.error { align-self: center; color: #a21b1b; background: #fdecec; }
form { padding: 1rem; border-top: 1px solid #dde4ea; display: flex; gap: .75rem; }
textarea { flex: 1; resize: none; padding: .75rem; font: inherit; border: 1px solid #b8c4ce; border-radius: .75rem; }
button { border: 0; border-radius: .75rem; padding: 0 1.25rem; color: white; background: #185adb; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (max-width: 600px) { .chat-shell { height: 100vh; } }