body.voice-open{overflow:hidden}
.hero{grid-template-columns:minmax(0,1.15fr) minmax(320px,.75fr);gap:clamp(32px,5vw,76px)}
.call-card{width:min(100%,390px);padding:24px 28px 28px;border-radius:28px}
.call-card>img{width:156px;height:156px;margin:40px 0 24px}
.call-card strong{font-size:29px}
.call-card p{font-size:16px;margin:10px 0 25px}
.call-card button{min-height:52px;font-size:16px}
.call-top{font-size:13px}
@media(max-width:760px){.hero{display:block}.call-card{width:min(100%,370px);padding:22px}.call-card>img{width:136px;height:136px;margin-top:30px}}
.actions{flex-wrap:wrap}
.actions>.primary,.actions>.secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;min-height:48px}
.actions>.primary span,.actions>.secondary span{flex:0 0 auto;margin-left:0;line-height:1}
@media(max-width:420px){.hero .actions{display:grid;grid-template-columns:1fr;gap:10px}.hero .actions>.primary,.hero .actions>.secondary{width:100%;padding:14px 16px}}
#voice-dialog{width:min(640px,calc(100% - 32px));height:min(820px,94dvh);max-height:94dvh;padding:0;border:1px solid #dce7dd;border-radius:28px;background:#f8faf7;color:#172421;overflow:auto;overscroll-behavior:contain}
#voice-dialog[open]{display:flex;flex-direction:column}
#voice-dialog::backdrop{background:#071a15aa;backdrop-filter:blur(12px)}
#voice-dialog .dialog-head{flex-shrink:0;align-items:center;padding:16px 24px;border:0;font-size:14px;color:#5e7166}
#close-dialog{min-height:44px;min-width:60px}
#voice-dialog .dialog-body{flex:1;display:flex;flex-direction:column;padding:12px 28px 20px;min-height:0}
.voice-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:310px;padding:22px 0}
.voice-orb{width:clamp(140px,27vw,218px);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 22%,#edffd6 0%,#adddb1 26%,#4caa8c 55%,#176552 79%,#073c35 100%);box-shadow:inset -12px -18px 30px #074d4155,0 22px 65px #37886322;transform:scale(.95);transition:filter .5s,opacity .5s;animation:orb-breathe 5s ease-in-out infinite}
.voice-orb>div{position:absolute;inset:-30%;border-radius:40%;background:conic-gradient(from 30deg,transparent,#eeffd8aa,transparent 45%,#194e4080,transparent);filter:blur(20px);animation:orb-turn 14s linear infinite}
#voice-dialog[data-state=speaking] .voice-orb{animation:orb-speak 1.3s ease-in-out infinite}
#voice-dialog[data-state=speaking] .voice-orb>div{animation-duration:4s}
#voice-dialog[data-state=connecting] .voice-orb{animation-duration:2s;opacity:.65}
#voice-dialog[data-state=muted] .voice-orb{filter:saturate(.35)}
#voice-dialog[data-state=ended] .voice-orb{animation:none;filter:saturate(.15);opacity:.55}
#voice-dialog[data-state=ended] .voice-orb>div{animation:none}
#voice-dialog #call-title{font:500 clamp(25px,5vw,34px)/1.2 Manrope,sans-serif;letter-spacing:-.04em;margin:35px 0 12px}
#voice-dialog #call-status{min-height:44px;margin:0;max-width:390px;font-size:16px;font-weight:500;line-height:1.5}
#voice-dialog .call-hint{font-size:14px;color:#64756b;margin:10px 0 0}
.voice-transcript{text-align:left;border:1px solid #dde5db;border-radius:15px;background:#fff;margin:0 0 12px}
.voice-transcript summary{padding:13px 16px;cursor:pointer;min-height:48px;font-size:14px;color:#40594b}
#voice-dialog #transcript{max-height:150px;background:transparent;border-radius:0 0 15px 15px}
#transcript:empty:after{content:'Your conversation will appear here.';display:block;padding:12px 16px;color:#657569;font-size:14px}
#voice-dialog #transcript:empty{display:block}
#voice-dialog .call-controls{flex-shrink:0;margin:8px 0 0;gap:12px}
#voice-dialog .call-controls button{min-height:54px;border-radius:28px;padding:14px 24px;font-size:15px}
#voice-dialog .voice-privacy{font-size:12px;color:#6c7a70;margin:16px 0 0}
#voice-dialog button:focus-visible,#voice-dialog summary:focus-visible{outline:3px solid #26725c;outline-offset:3px}
@keyframes orb-breathe{50%{transform:scale(1)}}
@keyframes orb-speak{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
@keyframes orb-turn{to{transform:rotate(360deg)}}
@media(max-width:600px){#voice-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding-top:env(safe-area-inset-top)}#voice-dialog .dialog-body{padding:0 20px max(20px,env(safe-area-inset-bottom))}.voice-stage{min-height:280px}.voice-orb{width:180px}#voice-dialog .call-controls button{padding:14px 20px}.voice-transcript[open] #transcript{max-height:120px}}
@media(max-height:650px){.voice-stage{min-height:220px;padding:12px 0}.voice-orb{width:110px}#voice-dialog #call-title{margin-top:20px}.voice-transcript[open] #transcript{max-height:100px}}
@media(prefers-reduced-motion:reduce){#voice-dialog .voice-orb,#voice-dialog .voice-orb>div{animation:none;transition:none}}

/* Reserve the controls' rows. Opening the transcript overlays the stage,
   so neither the orb nor the call controls are pushed or compressed. */
#voice-dialog{overflow:hidden}
#voice-dialog .dialog-body{display:grid;grid-template-rows:minmax(0,1fr) 48px auto auto;gap:12px;position:relative;overflow:hidden}
.voice-stage{min-height:0;overflow:auto;padding:22px 8px;justify-content:safe center;scrollbar-width:thin}
.voice-orb{--orb-size:clamp(140px,27vw,200px);width:var(--orb-size);height:var(--orb-size);min-width:var(--orb-size);min-height:var(--orb-size);flex:0 0 var(--orb-size);aspect-ratio:1;animation:orb-breathe 5s ease-in-out infinite}
.voice-stage>*{flex-shrink:0}
#voice-dialog #call-title{margin:28px 0 10px;font-size:clamp(24px,4.5vw,32px)}
#voice-dialog #call-status{min-height:48px;font-weight:400;color:#65756b}
#voice-dialog:not([data-state=connecting]) .call-hint{display:none}
.voice-transcript{position:relative;height:48px;min-height:48px;margin:0;z-index:2;background:#f8faf7;border-color:#dce5da}
.voice-transcript summary{height:46px;min-height:46px;padding:12px 16px;user-select:none}
#voice-dialog .voice-transcript[open] #transcript{position:absolute;left:-1px;right:-1px;bottom:58px;height:min(230px,36dvh);max-height:min(230px,36dvh);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #dce5da;border-radius:16px;box-shadow:0 -12px 40px #12342216;padding:6px 0;overflow-wrap:anywhere}
#voice-dialog .call-controls{margin:0;align-items:center}
#voice-dialog .voice-privacy{margin:0;line-height:1.5}
@keyframes orb-speak{0%,100%{transform:scale(.98)}50%{transform:scale(1.02)}}
@media(max-width:600px){#voice-dialog .dialog-body{padding:0 16px max(16px,env(safe-area-inset-bottom));gap:10px}.voice-orb{--orb-size:160px}.voice-stage{min-height:0}#voice-dialog .call-controls button{padding:12px 16px;min-height:50px}}
@media(max-height:650px){.voice-orb{--orb-size:104px}.voice-stage{min-height:0;padding:12px 6px}#voice-dialog #call-title{margin-top:18px}#voice-dialog .dialog-head{padding:8px 16px}#voice-dialog .voice-privacy{font-size:12px}}
