:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0b1020; color: #e8edf7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #182442, #0b1020 55%); }
.centered { display: grid; place-items: center; }
.shell { width: min(900px, 100%); min-height: 100vh; margin: auto; padding: 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #263455; padding-bottom: 16px; }
h1 { margin: 0; font-size: 1.35rem; }
p { color: #aab7d2; }
.actions { display: flex; gap: 8px; }
#messages { overflow-y: auto; padding: 12px 0; }
.message { max-width: 82%; margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: #17213a; white-space: pre-wrap; line-height: 1.5; }
.message.user { margin-left: auto; background: #244c91; }
.message strong { display: block; margin-bottom: 6px; font-size: .8rem; color: #9db8ea; }
form { display: grid; gap: 8px; }
label { font-size: .85rem; color: #b9c5dc; }
textarea, input { width: 100%; border: 1px solid #344563; border-radius: 9px; background: #10182b; color: #fff; padding: 12px; font: inherit; }
button { border: 1px solid #4773c2; border-radius: 8px; padding: 9px 14px; background: #245bb8; color: #fff; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.composer { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
#status, #error { color: #f2ad69; }
.login-card { width: min(420px, calc(100% - 32px)); padding: 28px; border: 1px solid #2a395a; border-radius: 14px; background: #111a2e; box-shadow: 0 18px 50px #0007; }
.login-card button { margin-top: 8px; }