/* Google Stitch project 13979297575303282419.
   Tokens and layout adapted from exported chat/settings screens; no CDN dependencies. */
:root{--bg:#f9f9ff;--surface:#fff;--surface2:#eef4ff;--ink:#0e1c2f;--muted:#536375;--accent:#006194;--accentInk:#fff;--aqua:#006780;--line:#d9e5f0;--out:#007bb9;--outInk:#fff;--glass:rgba(249,249,255,.84);--tint:#d7efff;--glow1:#dcf3ff;--glow2:#e5efff;--shadow:0 2px 8px #0e558308;--radius:18px;--reading-size:15px}
:root[data-theme="dark"]{--bg:#081b2b;--surface:#112638;--surface2:#152e42;--ink:#f0f6fc;--muted:#abc0d0;--accent:#90d0ff;--accentInk:#082035;--aqua:#8ce5e1;--line:#274456;--out:#0369a1;--outInk:#fff;--glass:rgba(10,30,46,.88);--tint:#184765;--glow1:#103546;--glow2:#0c2c42;--shadow:0 2px 10px #0001;--sheet:#102a3d}
:root[data-font="small"]{--reading-size:14px}
:root[data-font="large"]{--reading-size:19px}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse at 92% 8%,var(--glow1),transparent 42%),radial-gradient(ellipse at 0% 88%,var(--glow2),transparent 55%),var(--bg);background-attachment:fixed}
header,.nav{box-shadow:none;background:var(--surface);border:0}
header{padding:7px 14px;min-height:60px;border-bottom:1px solid var(--line)}
.profile-row{gap:10px;min-height:44px}
.profile-row .avatar{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.profile-row h2{font-size:17px;font-weight:650;margin-bottom:2px;letter-spacing:-.25px}
.profile-meta{font-size:11px;color:var(--muted)}
.profile-row .icon-btn{width:44px;height:44px;background:transparent;border:0;margin-right:-8px}
.level-pill{min-height:44px;min-width:44px;padding:7px 10px;border:0;background:transparent;color:var(--accent);font-size:12px;border-radius:14px;gap:4px}
.level-pill:hover{background:var(--tint)}
.level-pill svg{width:13px;height:13px}
.screen-header{display:flex;align-items:center;gap:8px;min-height:44px}
.screen-header>.icon-btn{margin-left:-9px}
.screen-header>.icon-btn svg{transform:rotate(180deg);width:19px}
.screen-header h2{font-size:18px;font-weight:600;letter-spacing:-.35px;margin:0;flex:1;min-width:0}
.screen-header .level-pill{margin-left:auto}
.nav{margin:0;padding:3px 14px calc(3px + var(--safe));border-top:1px solid var(--line);border-radius:0;gap:16px}
.nav button{min-height:48px;max-height:54px;padding:5px 10px;gap:3px;border-radius:15px;font-size:10px;font-weight:500;line-height:1.1}
.nav button svg{width:20px;height:20px}
.nav button.active{box-shadow:none;background:var(--tint);color:var(--accent)}
.nav button.active svg{stroke-width:1.9}
.chat{padding:8px 14px 14px;gap:6px}
.day{font-size:10px;background:var(--surface2);color:var(--muted);border:0;margin:9px auto 12px;padding:5px 10px}
.message{max-width:86%;gap:0}
.bubble{border:1px solid var(--line);padding:9px 12px 6px;font-size:var(--reading-size);line-height:1.42;border-radius:17px 17px 17px 4px;box-shadow:var(--shadow);background:var(--surface);color:var(--ink)}
.user .bubble{border-color:transparent;background:var(--out);color:var(--outInk);border-radius:17px 17px 4px 17px;box-shadow:0 3px 7px #006b921b}
.message-text{display:block;overflow-wrap:anywhere}
.message-footer{font-size:10px;line-height:1.2;color:var(--muted);padding:2px 0 0;min-height:16px;gap:7px;justify-content:flex-end}
.message-footer time{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:10px}
.user .message-footer{color:#f0fbff}
.user .message-footer time{margin-left:auto}
.review-button{min-height:44px;min-width:44px;padding:7px 4px;font-size:11px;line-height:1.2;gap:3px}
.user .review-button{color:#fff;margin-top:-3px;margin-bottom:-5px}
.user .review-button.major{color:#fff;background:#00354b50;border-radius:9px}
.user .review-button:hover{background:#00354b40}
.review-button svg{width:12px;height:12px}
.status-failed{color:inherit;border:1px solid currentColor;border-radius:9px;padding:5px 8px}
.play-button{width:44px;height:44px;background:var(--tint);color:var(--accent);box-shadow:none}
.user .play-button{background:#ffffff26;color:#fff}
.voice-row{min-width:200px;max-width:100%;gap:10px}
.voice-row>svg{width:17px;height:17px;color:var(--muted)}
.wave{gap:3px;color:var(--accent);max-width:170px;height:28px;overflow:hidden}
.wave i{width:3px;flex-shrink:0;background:currentColor}
.wave i:nth-child(n+15){opacity:.35}
.user .wave,.user .voice-row>svg{color:#fff}
.transcript-button{min-height:44px;font-size:11px;color:var(--accent);padding:5px 0;text-decoration:none}
.user .transcript-button{color:#fff}
.transcript{font-size:var(--reading-size);margin-top:4px;padding-top:8px}
.composer-wrap{padding:5px 10px;background:var(--surface);border-top:1px solid var(--line)}
.composer{padding:3px 4px 3px 12px;gap:3px;border-radius:26px;background:var(--surface);box-shadow:none;border:1px solid var(--line)}
.composer{min-height:52px}
.composer textarea{font-size:16px;line-height:22px;padding:11px 0;height:44px;min-height:44px;max-height:132px;margin:0;display:block}
.composer .icon-btn{width:44px;height:44px;color:var(--accent)}
.send-button{width:44px;height:44px;background:#007bb9;color:#fff;box-shadow:0 2px 6px #006b9220}
.composer-hint{margin:0}.composer-hint:empty{display:none}
.typing{background:var(--surface);border:1px solid var(--line);width:58px;padding:12px 15px}
.page{padding:16px 16px 24px}
.card{border-radius:18px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:13px;background:var(--surface)}
.card-title{margin-bottom:15px}.card-title h3{font-size:16px}.card-title svg{width:30px;height:30px;padding:6px;border-radius:10px}
.settings-overview{padding-top:14px;display:flex;flex-direction:column;min-height:100%}
.identity-row{display:flex;align-items:center;gap:10px;padding:4px 0 11px}
.identity-avatar{width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;font-size:15px;font-weight:650;flex-shrink:0}
.identity-row>div:not(.identity-avatar){min-width:0}
.identity-row strong{display:block;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.identity-row small{display:block;font-size:11px;margin-top:3px}
.theme-segments{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;margin:0 0 15px}
.theme-segments button{flex:1;min-height:44px;padding:8px 3px;border-radius:9px;background:transparent;color:var(--muted);font-size:12px}
.theme-segments button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 5px #0e558310}
.category-group{padding:0;overflow:hidden}
.settings-category{display:flex;align-items:center;gap:11px;min-height:68px;width:100%;padding:12px 14px;background:transparent;text-align:left;color:var(--ink)}
.settings-category+.settings-category{border-top:1px solid var(--line)}
.category-icon{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:11px;background:var(--tint);color:var(--accent);border:1px solid var(--line)}
.category-icon svg{width:18px;height:18px}
.category-appearance .category-icon,.category-memory .category-icon{color:var(--aqua);background:var(--surface2)}
.category-copy{min-width:0;flex:1}.category-copy strong{display:block;font-size:14px;font-weight:600;line-height:1.25}
.category-copy small{display:block;font-size:11px;line-height:1.35;margin-top:4px;color:var(--muted);overflow-wrap:anywhere}
.settings-category>svg{width:16px;height:16px;color:var(--muted);stroke-width:1.5}
.settings-category:hover{background:var(--surface2)}
.settings-overview .account-actions{gap:0;margin-top:auto;padding-top:16px;align-items:center}
.settings-overview .text-button{min-height:44px;padding:10px 0;font-size:12px;text-decoration:none}
.settings-overview .about-max{margin:6px 0;color:var(--muted);font-size:12px}
.settings-overview .about-max summary{min-height:44px;padding:10px 0;cursor:pointer}
.version-label{font-size:10px;margin:16px 0 0;color:var(--muted)}
.settings-detail .field{margin-bottom:18px}
.field label{font-size:13px;font-weight:550}.field small{font-size:11px}
input,select,textarea.transcript-edit{background:var(--surface2);border-radius:12px;border-color:var(--line);padding:12px;color:var(--ink);font-size:16px}
.toggle-copy strong{font-size:14px;font-weight:550}.toggle-copy small{font-size:11px}
.toggle-row{margin:18px 0}.privacy-note{font-size:12px}
.primary{background:#007bb9;color:#fff;box-shadow:none;border-radius:14px;font-size:14px}
.secondary{border-radius:12px;background:var(--surface2);font-size:14px}
.sheet{background:var(--surface);border-radius:24px 24px 0 0;border:1px solid var(--line);padding-inline:20px}
.sheet-top h2{font-size:21px}.sheet .explanation{font-size:var(--reading-size)}
.message-menu{display:flex;flex-direction:column;gap:10px;margin-top:16px}.message-menu button{width:100%}
.update-banner{margin-top:3px;padding:3px 8px;background:var(--surface2);font-size:12px}.update-banner button{min-height:44px}
.toast{border:0;font-size:12px;padding:12px 16px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root:not([data-glass="false"]) header,:root:not([data-glass="false"]) .nav,:root:not([data-glass="false"]) .composer-wrap,:root:not([data-glass="false"]) .card{background:var(--glass);backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);box-shadow:inset 0 1px 0 #ffffff14}
}
@media(prefers-reduced-transparency:reduce){header,.nav,.composer-wrap,.card,.sheet{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(max-width:350px){.chat{padding-inline:10px}.page{padding-inline:12px}.settings-category{padding-inline:12px;gap:9px}.voice-row{min-width:165px}.wave{gap:2px}}
@media(min-width:700px){body{background:radial-gradient(ellipse at 92% 8%,var(--glow1),transparent 42%),radial-gradient(ellipse at 0% 88%,var(--glow2),transparent 55%),var(--bg)}#app{background:transparent}}
@media(max-height:550px){header{min-height:48px;padding-block:2px}.profile-row .avatar{width:30px;height:30px}.nav{display:none}.sheet{max-height:94dvh}}

/* Modal controls remain aligned when the keyboard or large text reduces room. */
.overlay{top:var(--visible-top,0px);bottom:auto;height:var(--visible-height,100dvh)}
.sheet{display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--visible-height,100dvh) * .94)}
.handle,.sheet-top{flex-shrink:0}.sheet-top{gap:12px}.sheet-top h2{min-width:0;overflow-wrap:anywhere}
.sheet-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sheet[data-sheet="voicePreview"],.sheet[data-sheet="transcriptEdit"]{padding-bottom:calc(16px + var(--safe))}
.voice-editor{display:flex;flex-direction:column;gap:12px}.voice-editor .voice-preview-meta{margin:0;font-size:12px}
.voice-editor .transcript-edit{margin:0;resize:none;min-height:96px;height:clamp(96px,calc(var(--visible-height,100dvh) * .28),240px);font-size:var(--reading-size)}
.voice-editor-actions{display:flex;gap:10px;position:sticky;bottom:0;padding:4px 0 0;background:var(--surface)}
.voice-editor-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 10px;white-space:normal;line-height:1.25}
.voice-editor-actions svg{width:18px;height:18px}.voice-editor-actions .voice-listen{flex:.85}
@media(max-width:350px){.voice-editor-actions{gap:8px}.voice-editor-actions button{font-size:13px;gap:5px;padding-inline:8px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}