:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; color: #e5edf8; background: #0b1220; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top, #18304c, #0b1220 65%); }
.chat { width: min(850px, 100%); height: min(800px, calc(100dvh - 48px)); min-height: 440px; display: flex; flex-direction: column; background: #111c2d; border: 1px solid #2b3b51; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 70px #0005; }
header { display: flex; align-items: center; gap: 14px; padding: 24px; border-bottom: 1px solid #2b3b51; }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; background: #65e2c0; color: #102b29; border-radius: 14px; font-size: 25px; font-weight: 800; }
h1 { font-size: 22px; margin: 0; }
header p { margin: 4px 0 0; color: #a6b8cd; font-size: 13px; }
button, input { font: inherit; }
button { border: 0; border-radius: 10px; padding: 12px 18px; cursor: pointer; background: #65e2c0; color: #102b29; font-weight: 650; }
button:hover { filter: brightness(1.1); }
button:focus-visible, input:focus-visible { outline: 3px solid #a5f3df; outline-offset: 3px; }
.secondary { margin-left: auto; background: #22334a; color: #d6e3f2; font-size: 12px; }
#messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.message { max-width: 85%; align-self: flex-start; }
.message.user { align-self: flex-end; }
.message strong { display: block; font-size: 12px; color: #a6b8cd; margin: 0 4px 6px; }
.message p { margin: 0; padding: 14px 18px; background: #22334a; border-radius: 4px 16px 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user p { background: #184e4b; border-radius: 16px 4px 16px 16px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 18px; }
.suggestions button { font-size: 12px; background: transparent; color: #b8cce1; border: 1px solid #3b506b; padding: 9px 12px; }
form { padding: 20px 24px; background: #0e1828; border-top: 1px solid #2b3b51; }
label { display: block; margin-bottom: 8px; font-size: 13px; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; border: 1px solid #3b506b; background: #162337; color: #fff; border-radius: 10px; padding: 14px; }
.notice { margin: 12px 0 0; font-size: 11px; color: #9badc3; line-height: 1.5; }
@media (max-width: 550px) { body { padding: 0; } .chat { height: 100dvh; min-height: 100dvh; border-radius: 0; border: 0; } header, #messages, form { padding: 16px; } header { flex-wrap: wrap; } .secondary { padding: 9px; } .suggestions { padding: 0 16px 14px; } .message { max-width: 95%; } }
.voice-controls { padding: 0 24px 12px; }
.voice-controls label { display: inline-block; margin: 8px; }
.voice-controls input { accent-color: #65e2c0; }
#voice-status { font-size: 12px; color: #a6b8cd; margin: 8px 0 0; }
button:disabled { opacity: .5; cursor: default; }

.mode-status { margin: 0; padding: 10px 24px; background: #162b3e; color: #b8cce1; font-size: 12px; line-height: 1.5; }

.action-link { align-self: flex-start; display: inline-block; padding: 12px 18px; background: #65e2c0; color: #102b29; border-radius: 10px; font-weight: 650; }

.ai-settings { padding: 8px 24px; font-size: 12px; border-top: 1px solid #2b3b51; }
.ai-settings summary { cursor: pointer; color: #65e2c0; }
.ai-settings label { margin: 8px 0; }
.ai-settings p { color: #a6b8cd; line-height: 1.5; }
.ai-settings input[type="password"] { width: 100%; padding: 8px; }

/* Keep the composer reachable when the mobile keyboard reduces the viewport. */
.chat { overflow-y: auto; }
.chat > :not(#messages) { flex-shrink: 0; }
#messages { flex: 1 0 180px; min-height: 180px; }
input { font-size: 16px; }
@media (max-width: 550px) {
  .voice-controls, .ai-settings { padding-left: 16px; padding-right: 16px; }
  .mode-status { padding: 8px 16px; }
  header { gap: 10px; }
  .secondary { margin-left: auto; }
  .input-row button { padding: 12px; }
}

.speech-toggle { margin: 8px 0 8px 8px; min-height: 44px; }
.speech-toggle[aria-pressed="true"] { background: #184e4b; color: #b7f8e8; }

#ai-user { width: 100%; margin-bottom: 8px; }
#login, #lock, #erase-legacy { margin-top: 8px; min-height: 44px; }

#password-setup input { width:100%; margin-bottom:8px; }
#password-setup { margin-top:12px; }