:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; background:#030912; color:#f2f7ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 80% 0,#12345a 0,transparent 35%),linear-gradient(180deg,#07111f,#030912); }
button,textarea,input { font:inherit; }
select { font:inherit; }
button { border:1px solid #2a4563; color:#eef8ff; background:#10243a; border-radius:14px; min-height:48px; padding:.7rem 1rem; }
button:active { transform:scale(.98); }
.shell { width:min(760px,100%); min-height:100dvh; margin:auto; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
.activation { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(3,9,18,.96); backdrop-filter:blur(18px); }
.activation.hidden { display:none; }
.activation>div { width:min(420px,100%); padding:28px; border:1px solid #294965; border-radius:24px; background:#081725; text-align:center; box-shadow:0 24px 80px #000a; }
.activation h2 { margin:.25rem 0; font-size:2rem; }
.activation p:not(.eyebrow) { color:#a9c8de; line-height:1.5; }
.activation button { width:100%; margin-top:10px; font-size:1.1rem; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { margin:0; font-size:1.65rem; letter-spacing:-.03em; }
.eyebrow { margin:0 0 3px; color:#67d9ff; font-size:.68rem; letter-spacing:.18em; }
.status { border:1px solid #294965; border-radius:99px; color:#a9c8de; padding:.35rem .65rem; font-size:.75rem; }
.status.ready { color:#75efbd; border-color:#24664d; }
.conversation { flex:1; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:8px 0; }
.message { max-width:88%; border:1px solid #1e3852; border-radius:18px; padding:12px 14px; background:rgba(10,27,45,.9); box-shadow:0 12px 35px #0004; }
.message.user { align-self:flex-end; background:#123c5c; }
.message span { color:#67d9ff; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.message p { margin:5px 0 0; line-height:1.45; white-space:pre-wrap; }
.options { display:grid; gap:8px; }
.learning { border:1px solid #1e3852; border-radius:16px; padding:10px 12px; background:#081725; }
.learning summary { cursor:pointer; color:#a9c8de; font-weight:700; }
.correction-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.correction-form select,.correction-form input { min-height:44px; border:1px solid #294965; border-radius:12px; padding:9px; color:#fff; background:#07111f; }
.correction-form select,.correction-form button { grid-column:span 2; }
.correction-list { display:grid; gap:7px; margin-top:10px; }
.correction { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#d9ecfa; }
.correction.inactive span { opacity:.45; text-decoration:line-through; }
.correction button { min-height:36px; padding:.3rem .7rem; }
.option { text-align:left; min-height:56px; }
.option strong,.option small { display:block; }
.option small { color:#a8bfd2; margin-top:3px; }
.composer { display:grid; grid-template-columns:1fr auto; gap:8px; }
textarea { resize:none; width:100%; border:1px solid #294965; border-radius:16px; padding:12px; color:#fff; background:#081725; outline:none; }
textarea:focus { border-color:#50caf3; box-shadow:0 0 0 3px #50caf322; }
.send,.primary { background:linear-gradient(135deg,#1688c2,#08a98a); border:0; font-weight:700; }
.primary.listening { background:linear-gradient(135deg,#e34d65,#b91f4a); }
.controls { display:grid; grid-template-columns:1fr .75fr auto; gap:8px; align-items:center; }
.driving { min-height:48px; display:flex; align-items:center; gap:7px; padding:0 5px; white-space:nowrap; }
.privacy { color:#7695ac; font-size:.72rem; text-align:center; margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (display-mode:standalone) { .shell { padding-top:max(28px,env(safe-area-inset-top)); } }
@media (max-width:520px) { .correction-form { grid-template-columns:1fr; } .correction-form select,.correction-form button { grid-column:auto; } }