/* Milo: a conversation-first learning companion. */
:root{--bg:oklch(.975 .006 250);--canvas:oklch(1 0 0);--ink:oklch(.24 .035 250);--muted:oklch(.47 .035 250);--primary:oklch(.44 .14 250);--primary-hover:oklch(.38 .14 250);--primary-soft:oklch(.95 .025 250);--border:oklch(.88 .015 250);--accent:oklch(.88 .12 100);--error:oklch(.45 .16 25);--error-soft:oklch(.97 .015 25);--shadow:oklch(.24 .035 250/.07);--font:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip;height:100%;color:var(--ink);background:var(--bg);font-family:var(--font)}button,textarea{font:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;white-space:nowrap}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,label:focus-visible,textarea:focus-visible{outline:3px solid var(--primary);outline-offset:4px}button{transition:background .18s,color .18s,transform .18s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}svg{width:23px;height:23px;flex-shrink:0}h1,h2,p{margin:0}h1,h2{text-wrap:balance;overflow-wrap:anywhere}p{text-wrap:pretty}img{display:block}.app{display:flex;max-width:1600px;margin:auto;height:100dvh;min-height:440px}main{display:flex;flex-direction:column;min-width:0;flex:1;background:var(--canvas)}.topbar{height:92px;flex-shrink:0;border-bottom:1px solid var(--border);padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:12px}.identity{display:flex;align-items:center;gap:12px;min-width:0}.identity h1{font-size:18px;font-weight:700;line-height:1.3}.identity p{font-size:12px;color:var(--muted);margin-top:3px}.header-actions{display:flex;align-items:center;gap:12px}.plain{background:none;border:0;color:var(--muted);padding:8px;border-radius:12px;min-height:44px;min-width:44px}.plain:hover:not(:disabled){background:var(--bg);color:var(--ink)}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.language{font-size:13px}.call-button{background:var(--primary-soft);border:1px solid var(--border);border-radius:13px;padding:11px 17px;color:var(--primary);display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650;min-height:46px}.call-button:hover{background:var(--bg)}.workspace{display:flex;flex-direction:column;flex:1;min-height:0}.scroll{overflow:auto;overscroll-behavior:contain;flex:1;padding:0 32px 20px;scroll-behavior:smooth}.welcome{max-width:650px;margin:45px auto 30px;text-align:center}.hello-art{width:160px;margin:0 auto 22px;position:relative;display:flex;justify-content:center}.hello-art img{filter:drop-shadow(0 9px 15px var(--shadow))}.spark{position:absolute;color:var(--primary);font-size:28px}.spark.one{right:0;top:4px}.spark.two{left:0;bottom:5px;font-size:18px;color:var(--muted)}.hello-label{font-size:13px;color:var(--muted);margin-bottom:12px}.welcome h2{font-size:34px;letter-spacing:-.03em;font-weight:650;line-height:1.2}.welcome>p:last-of-type{font-size:16px;line-height:1.7;color:var(--muted);margin:14px auto 29px;max-width:50ch}.suggestions{display:flex;flex-direction:column;gap:0;max-width:440px;margin:auto;text-align:left;border-top:1px solid var(--border)}.suggestion{border:0;border-bottom:1px solid var(--border);background:var(--canvas);padding:16px 6px;display:flex;align-items:center;gap:15px;text-align:left;white-space:normal;min-height:74px}.suggestion:hover{background:var(--bg)}.suggestion-icon{width:34px;flex-shrink:0;color:var(--primary);font-size:27px;text-align:center}.suggestion strong{display:block;font-size:14px;font-weight:600}.suggestion small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.arrow{margin-left:auto;padding-right:5px;color:var(--muted)}.composer-area{padding:12px 32px max(20px,env(safe-area-inset-bottom));flex-shrink:0;max-width:870px;width:100%;margin:0 auto;background:var(--canvas)}.composer{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--border);border-radius:20px;padding:9px;background:var(--canvas);box-shadow:0 4px 18px var(--shadow)}.composer:focus-within{border-color:var(--primary)}.attach{color:var(--muted);border:0;border-radius:12px;cursor:pointer}.attach:hover{background:var(--bg)}textarea{width:100%;resize:none;border:0;background:none;outline:none!important;color:var(--ink);font-size:16px;line-height:1.5;min-height:44px;max-height:155px;padding:10px 3px;overflow-y:auto}textarea::placeholder{color:var(--muted)}.send{background:var(--primary);color:var(--canvas);border:0;border-radius:13px}.send:hover:not(:disabled){background:var(--primary-hover)}.send:disabled{opacity:1;background:var(--primary-soft);color:var(--muted)}.composer-foot{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin:12px 5px 0;line-height:1.5}.messages{max-width:730px;margin:auto;padding-top:28px}.message{display:flex;align-items:flex-start;gap:12px;margin-bottom:26px;min-width:0;animation:arrive .18s ease-out}.message.user{justify-content:flex-end}.message .avatar{flex-shrink:0;width:30px;margin-top:4px}.message-body{max-width:min(66ch,calc(100% - 42px));min-width:0;font-size:16px;line-height:1.7;overflow-wrap:anywhere}.message.user .message-body{background:var(--primary-soft);padding:12px 18px;border-radius:18px 18px 4px 18px}.message.assistant .message-body{padding:5px 0}.message-body p{margin:0 0 10px;white-space:pre-wrap}.message-body p:last-child{margin-bottom:0}.message-body a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}.message-body pre{font:13px/1.65 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;padding:15px;background:var(--bg);border-radius:12px}.message-body strong{font-weight:650}.file-tag{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);padding-bottom:7px;word-break:break-all}.failure-tag{font-size:12px;color:var(--error)}.thinking{max-width:730px;margin:0 auto 15px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.thinking-dots{font-size:26px;animation:think 1s ease-in-out infinite}.attachment{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--primary);margin:0 0 8px;padding:4px 8px 4px 15px;background:var(--primary-soft);border-radius:12px;overflow-wrap:anywhere}.error{font-size:14px;line-height:1.5;background:var(--error-soft);color:var(--error);padding:12px 15px;border-radius:12px;margin-bottom:10px}.network{background:var(--accent);color:var(--ink);padding:10px 20px;font-size:13px}.gate{margin:auto;padding:40px 24px;text-align:center;max-width:430px}.gate img{margin:0 auto 24px}.gate h2{font-size:28px;letter-spacing:-.02em}.gate p{font-size:16px;color:var(--muted);line-height:1.7;margin:18px 0}.primary{padding:12px 20px;color:var(--canvas);background:var(--primary);border:0;border-radius:12px;min-height:44px}dialog{border:1px solid var(--border);border-radius:28px;background:var(--canvas);color:var(--ink);width:min(420px,calc(100% - 32px));padding:0;box-shadow:0 20px 90px var(--shadow);max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:oklch(.15 .03 250/.45)}.voice-content{padding:34px 28px;text-align:center}.voice-eyebrow{font-size:11px;letter-spacing:.12em;color:var(--muted)}.voice-avatar{width:150px;height:150px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:32px auto 22px;background:var(--primary-soft)}.voice-content h2{font-size:29px;letter-spacing:-.02em}.voice-content>p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:12px}.voice-content #voice-detail{font-size:12px;max-width:29ch;margin:12px auto 0}.voice-actions{display:flex;align-items:center;justify-content:center;gap:18px;margin:28px 0}.voice-mute,.hangup{min-width:112px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;min-height:48px;border-radius:14px}.voice-mute{border:1px solid var(--border)}.voice-mute[aria-pressed=true]{background:var(--accent);color:var(--ink)}.hangup{background:var(--error);color:var(--canvas);border:0}.voice-content .voice-privacy{font-size:11px;line-height:1.7}.voice-connected .voice-avatar{box-shadow:0 0 0 12px var(--bg)}.voice-connecting .voice-avatar{animation:think 1.4s ease-in-out infinite}@keyframes arrive{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes think{50%{opacity:.5}}
@media(min-height:1000px){.welcome{margin-top:90px}}@media(max-width:1050px){.topbar{padding:0 26px}.header-actions{gap:5px}}@media(max-width:780px){.app{min-height:320px}.topbar{height:80px;padding:0 22px}.welcome{margin-top:38px}.scroll{padding:0 22px 12px}.composer-area{padding-left:20px;padding-right:20px}.welcome h2{font-size:31px}.header-actions{gap:6px}}@media(max-width:450px){.topbar{height:74px;padding:0 14px}.identity{gap:9px}.identity img{width:36px;height:36px}.identity p{font-size:10px}.identity h1{font-size:17px}.header-actions{gap:0}.call-button{padding:10px 12px;margin-left:4px}.call-button svg{width:19px;height:19px}.call-button span{font-size:12px}.language{font-size:12px;min-width:40px}.header-actions .icon-button{width:40px}.welcome{margin-top:24px;margin-bottom:20px}.hello-art{margin-bottom:16px}.hello-art img{width:90px;height:90px}.welcome h2{font-size:28px}.welcome>p:last-of-type{font-size:14px;margin:12px auto 20px}.suggestion{min-height:68px;padding:12px 4px;gap:11px}.suggestion strong{font-size:13px}.scroll{padding-left:16px;padding-right:16px}.composer-area{padding:8px 12px max(12px,env(safe-area-inset-bottom))}.composer{gap:3px;padding:7px;border-radius:18px}textarea{font-size:16px}.composer-foot{font-size:10px;margin:10px 3px 0}.message{gap:9px;margin-bottom:22px}.message-body{font-size:16px}.message.user .message-body{padding:10px 14px}.message .avatar{width:27px}.messages{padding-top:20px}}@media(max-width:350px){.identity p{display:none}.call-button span{display:none}.call-button{width:44px;justify-content:center}.composer-foot #file-hint{display:none}.welcome h2{font-size:26px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.preserve,#voice-privacy{white-space:pre-line}

.voice-content .voice-caption{font-size:13px;line-height:1.6;white-space:pre-line;max-height:140px;overflow:auto;color:var(--ink);text-align:left;margin-top:18px}

.draw[aria-pressed=true]{color:var(--primary);background:var(--primary-soft)}.generated-image{aspect-ratio:1/1;object-fit:contain;width:100%;max-width:380px;border-radius:16px;margin-top:12px;height:auto}.drawing-link{display:block;max-width:380px}.composer .draw{min-width:44px;padding:10px}

.recovery{background:var(--primary-soft);padding:10px 14px;border-radius:12px;margin-bottom:10px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.recovery-actions{display:flex;flex-wrap:wrap;gap:4px}.recovery .plain{color:var(--primary);font-size:14px}.transfer{font-size:14px;color:var(--muted);padding:8px 0}.transfer progress{display:block;width:100%;height:8px;margin-top:8px;accent-color:var(--primary)}.external-content{padding:24px;max-width:460px;line-height:1.6}.external-content h2{font-size:20px}.external-content p{margin-block:16px;overflow-wrap:anywhere}.external-content a{display:inline-flex;align-items:center;color:var(--primary)}#external-dialog{max-width:calc(100vw - 32px);border:1px solid var(--border);border-radius:16px;color:var(--ink)}#external-dialog::backdrop{background:oklch(.24 .035 250/.35)}

/* Foreground phone view: two equal panes, with the conversation always reachable. */
.call-layout{display:flex;flex:1;min-height:0}.conversation-pane{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}.call-panel{flex:0 0 50%;min-width:0;overflow:auto;background:var(--primary-soft);border-right:1px solid var(--border)}.call-panel .voice-content{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px}.call-panel .voice-avatar{margin:22px auto;background:var(--canvas)}.call-panel .voice-actions{flex-wrap:wrap;gap:12px;margin:22px 0}.call-panel .voice-caption{width:100%;max-width:36ch}.call-clock{font-variant-numeric:tabular-nums}.in-call .welcome{margin:24px auto}.in-call .suggestions{display:none}.in-call .composer-area{padding:10px 16px}.in-call .composer-foot #file-hint{display:none}.in-call .voice-privacy{max-width:30ch}.in-call .scroll{padding-inline:20px}.call-panel #answer-call{margin-top:12px}.call-panel .voice-eyebrow{font-size:16px;font-weight:600;letter-spacing:0}.call-panel .voice-content h2{font-size:26px}
@media(max-width:700px),(orientation:portrait){.in-call .call-layout{flex-direction:column}.call-panel{flex:0 0 50%;border-right:0;border-bottom:1px solid var(--border)}.call-panel .voice-content{padding:14px 16px}.call-panel .voice-avatar{width:76px;height:76px;margin:8px auto}.call-panel .voice-avatar img{width:64px;height:64px}.call-panel .voice-content h2{font-size:20px}.call-panel .voice-content>p{margin-top:5px;font-size:13px}.call-panel .voice-actions{margin:12px 0;gap:12px}.call-panel .voice-privacy,.call-panel #voice-mode,.call-panel #voice-detail{display:none}.call-panel .voice-caption{max-height:48px;margin-top:8px}.in-call .welcome .hello-art,.in-call .welcome .hello-label,.in-call .welcome>p{display:none}.in-call .welcome h2{font-size:22px}.in-call .composer-foot{display:none}}

.notification-panel{border-bottom:1px solid var(--border);padding:12px 24px;background:var(--bg);font-size:14px;line-height:1.5;max-height:45dvh;overflow:auto}.notification-heading{display:flex;align-items:center;justify-content:space-between}.notification-heading h2{font-size:16px}.notification-panel .plain{color:var(--primary);font-size:13px}.notification-panel>p{color:var(--muted);max-width:65ch}.reminder-row{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}.reminder-row p{overflow-wrap:anywhere}@media(max-width:380px){.topbar .identity p{display:none}.topbar .call-button span{display:none}.topbar .call-button{width:44px;padding:10px;justify-content:center}.notification-panel{padding:10px 16px}}

/* Keep the personal name together while fitting compact header actions. */
.identity h1{white-space:nowrap}.for-learner{font-size:.78em;font-weight:500}.identity>img{flex-shrink:0}.header-actions{flex-shrink:0}
@media(max-width:600px){.topbar{flex-wrap:wrap;height:auto;min-height:80px;padding-block:10px;gap:4px 12px}.identity h1{font-size:17px}.header-actions{margin-left:auto}.identity p{display:none}}

/* Matching message identities: Milo leads; William follows his bubble. */
.message .user-avatar{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:25px;line-height:1;user-select:none}
@media(max-width:450px){.message .user-avatar{font-size:23px}}

/* The call is a caption-first space: compact identity, flexible transcript, fixed controls. */
.call-panel{min-height:0;overflow:hidden}
.call-panel .voice-content{height:100%;min-height:0;justify-content:flex-start;padding:20px 24px;gap:16px}
.voice-heading{display:grid;grid-template-columns:48px auto auto;gap:2px 12px;align-items:center;flex-shrink:0;text-align:left}
.call-panel .voice-avatar{grid-column:1;grid-row:1 / 3;width:48px;height:48px;margin:0;background:var(--canvas)}
.call-panel .voice-avatar img{width:42px;height:42px}
.call-panel .voice-content h2{grid-column:2;grid-row:1;font-size:20px}
.call-panel #call-clock{grid-column:3;grid-row:1;margin:0;font-size:13px;color:var(--muted)}
.call-panel #voice-state{grid-column:2 / 4;grid-row:2;font-size:13px;line-height:1.4;margin:0;color:var(--muted)}
.call-panel #voice-mode,.call-panel #voice-detail,.call-panel .voice-privacy{display:none}
.call-panel .voice-content .voice-caption{flex:1;min-height:0;max-height:none;width:100%;max-width:68ch;margin:0;padding:12px 4px;font-size:17px;line-height:1.65;overflow:auto;overflow-wrap:anywhere;overscroll-behavior:contain;white-space:pre-wrap;text-wrap:wrap;scroll-behavior:auto}
.call-panel .voice-actions{flex-shrink:0;flex-wrap:nowrap;margin:0;gap:12px}
.call-panel #answer-call{flex-shrink:0;margin:0}
@media(max-width:700px),(orientation:portrait){.call-panel .voice-content{padding:14px 20px;gap:12px}}
@media(max-height:500px){.call-panel .voice-content{padding:10px 16px;gap:8px}.call-panel .voice-caption{padding-block:4px}}
@media(min-width:560px) and (max-width:700px) and (max-height:500px){
 .call-panel .voice-content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:8px 12px}
 .call-panel .voice-heading{grid-column:1;grid-row:1;justify-self:start}
 .call-panel .voice-actions{grid-column:2;grid-row:1}
 .call-panel .voice-content .voice-caption{grid-column:1 / -1;grid-row:2;height:100%;padding-block:4px}
 .call-panel #answer-call{grid-column:1 / -1;grid-row:3}
}