/* Blue glass controls above the supplied full-scene Xiaopu videos. */
.realtime-phone{--glass:rgba(219,242,255,.27);--glass-border:rgba(234,255,255,.75);--ink:#f4fdff;--accent:#23bfd5;background:#789dc3 url('../assets/video/xiaopu-idle-poster.png?v=20261008') center/cover;color:var(--ink)}
.realtime-phone::before{display:none}
.ui-icon{--icon:none;mask-image:var(--icon);-webkit-mask-image:var(--icon);display:inline-block;width:20px;height:20px;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;flex:none}
.icon-mic{--icon:url('../assets/ui/microphone.svg')}.icon-phone{--icon:url('../assets/ui/phone.svg')}.icon-stop{--icon:url('../assets/ui/player-stop.svg')}.icon-volume{--icon:url('../assets/ui/volume-2.svg')}.icon-pause{--icon:url('../assets/ui/player-pause.svg')}.icon-play,.icon-next{--icon:url('../assets/ui/player-play.svg')}.icon-next{transform:rotate(90deg)}.icon-close{--icon:url('../assets/ui/x.svg')}.icon-sun{--icon:url('../assets/ui/sun.svg')}.icon-cloud{--icon:url('../assets/ui/cloud.svg')}.icon-rain{--icon:url('../assets/ui/cloud-rain.svg')}.icon-snow{--icon:url('../assets/ui/snowflake.svg')}.icon-storm{--icon:url('../assets/ui/cloud-storm.svg')}.icon-mist{--icon:url('../assets/ui/mist.svg')}
.realtime-phone [hidden]{display:none!important}
.realtime-phone .realtime-header{position:absolute;top:max(7.5%,env(safe-area-inset-top));left:4.6%;right:auto;width:44%;z-index:4;display:block;padding:0;background:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f6fdff;text-shadow:0 1px 7px #245f9266}
.realtime-phone header h1{font-size:max(18px,4.6cqw);line-height:1.4;font-weight:650;letter-spacing:.02em;margin:0;white-space:nowrap;color:inherit;text-shadow:inherit}
.realtime-phone header .community-location{position:absolute;bottom:100%;font-size:max(10px,2.55cqw);letter-spacing:.08em;line-height:1.4;margin:0 0 4px;color:#edf8ff;text-shadow:inherit}
#shanghai-clock{display:block;margin:3px 0 0;font-size:13.2cqw;line-height:1.05;letter-spacing:-.06em;font-weight:250;font-variant-numeric:tabular-nums}
.realtime-phone header .clock-date{font-size:max(12px,3.1cqw);line-height:1.5;letter-spacing:0;margin:3px 0 0;color:#f4fdff;text-shadow:inherit}
.weather-line{display:flex;align-items:center;gap:5px;max-width:100%;min-height:22px;margin-top:2px;border:0;background:none;padding:0;color:#f4fdff;font-size:max(11px,2.9cqw);white-space:nowrap;text-shadow:inherit}
.weather-line .ui-icon{width:18px;height:18px}.weather-line #weather-summary{max-width:5em;overflow:hidden;text-overflow:ellipsis}
.realtime-phone #character{left:0;top:20%;width:100%;height:68%;z-index:1;overflow:hidden}
.realtime-phone .character-fallback{width:auto;height:101.15%;left:50%;top:1.13%;transform:translateX(-50%)}
.realtime-phone .recommendations{--question-row:max(30px,8cqw);position:absolute;top:7.1%;right:2%;width:48%;padding:1.7cqw 2cqw 1.3cqw;border:1px solid var(--glass-border);border-radius:2.1cqw;background:var(--glass);box-shadow:inset 0 1px 2px #e7ffff80,0 5px 22px #17477412;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5}
.recommendation-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;border-bottom:1px solid #e9ffff8c;padding-bottom:1cqw;margin-bottom:0}
.recommendation-heading h2{font-size:max(13px,3.25cqw);line-height:1.5;font-weight:600;margin:0;color:#fff}
#questions-pause{width:24px;height:24px;border:0;background:none;color:#edfaff;padding:5px;display:grid;place-items:center;border-radius:5px}
#questions-pause .ui-icon{width:13px;height:13px}
.questions-viewport{height:calc(var(--question-row) * 3);overflow:hidden;outline-offset:3px}
.questions-track{list-style:none;margin:0;padding:0;transition:transform .5s ease-in-out;will-change:transform}
.questions-track.no-transition{transition:none}
.questions-track li{height:var(--question-row);display:flex;align-items:center;gap:1.3cqw;min-width:0;border-bottom:1px solid #e1ffff70;color:#f8feff;font-size:max(12px,3.1cqw);line-height:1.3}
.question-symbol{display:grid;place-items:center;flex:none;width:max(16px,4.2cqw);height:max(16px,4.2cqw);border-radius:50%;background:#e2f9ffd9;color:#24a7c2}
.question-symbol .ui-icon{width:70%;height:70%}.question-text{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.realtime-phone .conversation{position:absolute;left:6%;width:88%;top:calc(63% + 10px);height:auto;min-height:64px;padding:4px 4cqw;border:1px solid var(--glass-border);border-radius:3.3cqw;background:rgba(216,242,255,.3);box-shadow:inset 0 1px 2px #ffffff9c,0 8px 28px #194f7912;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);z-index:6;display:flex;flex-direction:column;gap:2px;color:#135576}
.realtime-phone .conversation::before{display:none}
.caption-heading{display:flex;align-items:center;justify-content:center;gap:2.3cqw;min-height:20px;color:#0b9ec4}
.caption-heading h2{font-size:max(14px,3.5cqw);font-weight:550;line-height:1.5;margin:0;white-space:nowrap}
.caption-wave{display:flex;align-items:center;gap:3px;height:12px;color:#17b9d6}
.caption-wave i{display:block;width:2px;height:calc(3px + var(--level,0) * 9px);border-radius:2px;background:currentColor;transition:height .07s linear}
.caption-wave i:nth-child(2n){min-height:6px}.caption-wave i:nth-child(3){min-height:9px}
.subtitle-row{display:flex;align-items:center;gap:6px;min-width:0;min-height:24px}
.subtitle-viewport{flex:1;min-width:0;overflow:hidden;text-align:center;outline-offset:3px;scrollbar-width:thin}
.subtitle-viewport.is-overflowing{text-align:left}
.subtitle-track{display:inline-block;width:max-content;white-space:nowrap;vertical-align:top;will-change:transform}
.realtime-phone #reply{display:block;flex:none;overflow:visible;margin:0;padding:0;font-size:max(14px,3.6cqw);line-height:1.4;color:#135576;white-space:nowrap;font-weight:450}
.caption-levels{height:5px;display:flex;align-items:center;gap:4px;width:80%;margin:0 auto;justify-content:center;color:#1ba8cc}
.caption-levels i{height:calc(2px + var(--level,0) * 3px);width:2px;flex:1;max-width:2px;border-radius:2px;background:currentColor;transition:height .07s linear;opacity:.75}
.realtime-phone .voice{position:absolute;top:88%;width:100%;z-index:6;text-align:center}
.voice-controls{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
#call-toggle{width:54cqw;max-width:300px;min-height:44px;height:10.8cqw;flex:none;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 10px;border:1.5px solid #d9f3ff;border-radius:99px;background:rgba(8,119,178,.7);box-shadow:inset 0 1px 2px #ffffff50,0 4px 18px #06578940;color:#fff;touch-action:manipulation;font-size:max(14px,3.7cqw);font-weight:600;line-height:1.3;transition:transform .15s,background .2s,width .2s}
#call-toggle .ui-icon{width:20px;height:20px}.realtime-phone #call-toggle:active{transform:scale(.98)}
.realtime-phone .secondary{display:grid;place-items:center;width:40px;height:40px;min-width:40px;border:1px solid #e9ffffb8;border-radius:50%;background:#c9f4ff59;box-shadow:inset 0 1px 2px #ffffff66;color:#fff;opacity:1}
.realtime-phone .secondary .ui-icon{width:18px;height:18px}.realtime-phone .secondary:disabled{opacity:.4;cursor:default}
[data-call-state=idle] .secondary,[data-call-state=error] .secondary{display:none}
.realtime-phone:is([data-call-state=connecting],[data-call-state=listening],[data-call-state=speaking],[data-call-state=thinking],[data-call-state=stopping]) #call-toggle{width:52cqw}
[data-call-state=connecting] #call-toggle,[data-call-state=stopping] #call-toggle{background:#4a8fb8}
.realtime-phone:is([data-call-state=listening],[data-call-state=speaking],[data-call-state=thinking]) #call-toggle{background:rgba(5,100,158,.94);border-color:#d9f3ff}
#mute[aria-pressed=true]{background:#e098b078}#mute[aria-pressed=true] .ui-icon{--icon:url('../assets/ui/microphone-off.svg')}
.call-meta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:24px;margin-top:5px;font-size:max(12px,3cqw);color:#245e7b;text-shadow:0 1px 5px #e7fbffb3}
#call-duration{font-variant-numeric:tabular-nums;font-size:11px}
.realtime-phone .voice>p{font-size:max(10px,2.5cqw);line-height:1.45;color:#285773;text-shadow:0 1px 5px #ebffff9c;margin:0 4%}
[data-call-state=idle] .voice>p{visibility:hidden}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;margin:0!important}
.realtime-phone button:focus-visible,.realtime-phone a:focus-visible,.subtitle-viewport:focus-visible,.questions-viewport:focus-visible{outline:2px solid #f1ffff;outline-offset:3px}
.realtime-phone #subtitle-viewport:focus-visible{outline-color:#168eb4}
.close .ui-icon{width:23px;height:23px}
.weather-location{margin-bottom:8px}.weather-current{font-size:32px;font-weight:700;color:#1b6797;display:flex;align-items:baseline;gap:14px;margin:16px 0}.weather-current small{font-size:16px;font-weight:500}
.weather-days{list-style:none;padding:0;margin:16px 0}.weather-days li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#41667e;border-bottom:1px solid #d3e8f0;padding:12px 0}
#weather-dialog .weather-updated,#weather-dialog .weather-note{font-size:12px;line-height:1.65;margin:8px 0;color:#628196}
.weather-source{display:inline-block;color:#2a779f;font-size:12px;text-decoration:none;line-height:1.5}
#weather-refresh{display:block;margin-top:20px;border:0;border-radius:12px;background:#176faf;color:#fff;min-height:42px;padding:8px 18px;font-size:14px}
@media(max-width:600px) and (orientation:portrait){.realtime-phone{height:100svh;min-height:0;aspect-ratio:auto}}
@media(max-width:360px){.realtime-phone .realtime-header{top:6.5%;left:4%}.realtime-phone header h1{font-size:16px}.realtime-phone header .community-location{font-size:9px}.realtime-phone header .clock-date{font-size:11px}.weather-line{gap:3px;font-size:10px}.weather-line .ui-icon{width:15px;height:15px}.realtime-phone .recommendations{top:6.5%}.questions-track li{font-size:11px;gap:4px}.realtime-phone #character{top:21%;height:67%}.realtime-phone .secondary{width:36px;height:36px;min-width:36px}}
@media(max-height:660px) and (max-width:600px){.realtime-phone .voice{top:85.5%}.call-meta{min-height:20px;font-size:11px}.realtime-phone .voice>p{font-size:9px}.realtime-phone .conversation{top:calc(62% + 10px)}.realtime-phone #character{height:65%}}
@media(prefers-reduced-motion:reduce){.subtitle-viewport{overflow-x:auto}.questions-track{transition:none}}
/* Both source clips include their background; fill the scene rather than
   positioning them in the old transparent-character crop. */
.realtime-phone #character[data-renderer=video]{inset:0;width:100%;height:100%;z-index:1}
.avatar-poster,.avatar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.avatar-video{opacity:0}
.avatar-video.is-active{opacity:1}