:root { color-scheme: light; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #172b3a; background: #f3f6f7; }
* { box-sizing: border-box; }
body { margin: 0; padding: 22px 16px; }
.container { max-width: 1000px; margin: 0 auto; }
.panel { background: #fff; border: 1px solid #dfe7e8; border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
h1 { margin: 0 0 18px; font-size: 30px; letter-spacing: -.7px; }
.eyebrow { color: #46626a; margin: 0 0 8px; font-size: 14px; }
.selectors { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px; }
label { display: block; font-weight: 600; }
select, input, textarea { border: 1px solid #aebec3; border-radius: 8px; font: inherit; color: inherit; background: #fff; padding: 10px; }
select { display: block; margin-top: 6px; }
.controls, .composer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
button { border: 1px solid #b9c8cd; border-radius: 8px; padding: 10px 15px; background: #fff; color: #173b48; font: inherit; cursor: pointer; }
button:hover { background: #edf4f5; }
button.active, button.primary { background: #16596a; border-color: #16596a; color: white; }
button:disabled, select:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 3px solid #eab85b; outline-offset: 2px; }
#status, #mic-status { color: #48616a; font-size: 14px; margin-bottom: 0; }
#chat { min-height: 240px; height: 48vh; overflow-y: auto; }
.message { padding: 14px; border-radius: 10px; margin-bottom: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.user { background: #e1eef9; margin-left: 12%; }
.assistant { background: #eef5f1; margin-right: 12%; }
.system { background: #f4f5f6; color: #48616a; }
.label { font-weight: 650; margin-bottom: 6px; }
.field { margin-top: 10px; }
.field strong { display: block; }
textarea { width: 100%; min-height: 90px; resize: vertical; margin-bottom: 10px; }
.hint { color: #586e75; font-size: 13px; line-height: 1.5; }
.login { max-width: 480px; margin: 10vh auto 0; padding: 32px; }
.login input { width: 100%; margin: 8px 0 16px; }
.login button { width: 100%; }
#login-status { color: #9e2a32; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.session-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.session-row label { flex: 1 1 260px; min-width: 0; }
.session-row input, .session-row select { display: block; width: 100%; max-width: 100%; margin-top: 6px; }
#save-status { margin: 8px 0 16px; }
#sessions-error { color: #9e2a32; margin-bottom: 0; }
@media (max-width:600px) { body { padding: 12px 8px; } .panel { padding: 14px; } .user,.assistant { margin-left: 0; margin-right: 0; } h1 { font-size: 26px; } .selectors { gap: 10px; } select { max-width: 100%; } .composer-actions button { flex: 1; } #chat { height: 45vh; } }