/* Figma 8863:4. Keep the exported controls and animated layers on one 393 × 852 canvas. */
#mode-voice .feature-canvas{position:relative}
.voice-demo{position:absolute;inset:0;overflow:hidden;direction:ltr;background:#f2f2f7}
.voice-demo-stage{position:absolute;left:50%;top:50%;width:393px;height:852px;transform:translate(-50%,-50%) scale(var(--voice-demo-scale,.515));transform-origin:center;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro",Inter,sans-serif;font-weight:400;text-align:left;letter-spacing:0;color:#000}
.voice-demo-stage *{box-sizing:border-box}
.voice-demo-static{position:absolute;inset:0;display:block;width:393px;height:852px;max-width:none}
.voice-demo-chat{position:absolute;left:16px;top:175px;width:361px;height:414px;display:flex;flex-direction:column;gap:18px;padding-top:8px;overflow:hidden;border-radius:24px}
.voice-demo-bubble{flex:none;display:flex;flex-direction:column;gap:12px;width:342px;max-width:100%;padding:18px 20px;overflow:hidden;animation:voice-bubble 10s ease-in-out infinite}
.voice-demo-bubble--you{align-self:flex-end;min-height:146px;border-radius:24px 24px 7px 24px;background:rgba(0,136,255,.1);transform-origin:bottom right}
.voice-demo-bubble--other{align-self:flex-start;min-height:198px;border-radius:24px 24px 24px 7px;background:#fff;transform-origin:bottom left;animation-name:voice-reply}
.voice-demo-stage p{margin:0;max-width:none;letter-spacing:0;text-wrap:wrap}
.voice-demo-source{font-size:18px;line-height:26px;color:rgba(60,60,67,.72)}
.voice-demo-translation{font-size:26px;line-height:34px;animation:voice-translation 10s ease-in-out infinite}
.voice-demo-bubble--other .voice-demo-translation{font-weight:590;animation-name:voice-reply-translation}
.voice-demo-wave{position:absolute;left:137.5px;top:614px;width:118px;height:60px;display:flex;align-items:center;justify-content:center;gap:8px}
.voice-demo-wave span{flex:none;width:10px;height:var(--bar-height);border-radius:5px;background:linear-gradient(180deg,#59c4ff,#0d9cff 45%,#0088ff);opacity:var(--bar-opacity);box-shadow:0 0 3px rgba(0,153,255,.1);animation:voice-wave 1.3s ease-in-out infinite;animation-delay:var(--bar-delay)}
.voice-demo [data-voice-motion]{animation-play-state:paused}
.voice-demo:not(.is-ready) [data-voice-motion]{animation:none}
.voice-demo.is-playing [data-voice-motion]{animation-play-state:running}
.voice-demo-toggle{position:absolute;right:16px;bottom:16px;z-index:6;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.9);color:var(--muted)}
.voice-demo-toggle::before{content:"";width:9px;height:11px;border-inline:3px solid currentColor}
.voice-demo-toggle[aria-pressed=true]::before{width:0;height:0;margin-left:2px;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.voice-demo-toggle[hidden]{display:none}
/* Both translated messages remain fully visible from 5s through 9s. */
@keyframes voice-bubble{0%,3%{opacity:0;transform:translateY(10px) scale(.98)}10%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes voice-reply{0%,27%{opacity:0;transform:translateY(10px) scale(.98)}35%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes voice-translation{0%,13%{opacity:0;transform:translateY(4px)}20%,100%{opacity:1;transform:none}}
@keyframes voice-reply-translation{0%,38%{opacity:0;transform:translateY(4px)}50%,100%{opacity:1;transform:none}}
@keyframes voice-wave{0%,100%{height:var(--bar-height)}35%{height:calc(var(--bar-height)*.45)}70%{height:calc(var(--bar-height)*1.1)}}
@media(prefers-reduced-motion:reduce){.voice-demo [data-voice-motion]{animation:none!important}.voice-demo-toggle{display:none}}