/* Voice stage: sound and captions, not another phone or sender console. */
@media(scripting:enabled){#voice-message-product .voice-visual{visibility:hidden}}
.voice-demo{--voice-content-inset:30px;width:min(593px,100%);flex:0 1 593px;min-width:0;aspect-ratio:auto;color:#142b50;font-family:inherit;isolation:isolate}
.voice-demo *{box-sizing:border-box}.voice-demo button,.voice-demo select{font-family:inherit;cursor:pointer}.voice-demo svg{width:18px;height:18px;flex-shrink:0}
.voice-demo button:focus-visible,.voice-demo select:focus-visible{outline:2px solid #245de0;outline-offset:4px}.voice-demo button:disabled{opacity:.4;cursor:default}
.voice-demo__toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#526984;font-size:12px}.voice-demo__toolbar>div{display:flex;gap:6px}
.voice-demo__toolbar button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c6d5f1;border-radius:50%;background:#f6f9ff;color:#405b88}.voice-demo__toolbar svg{width:15px;height:15px}.voice-demo__toolbar button:hover{background:#e3ecff}
.voice-demo__stage{padding:24px var(--voice-content-inset) 20px;background:#fff;border-radius:16px;box-shadow:0 22px 42px rgb(43 81 127/.1)}
.voice-demo__receiver-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#edf6f1;color:#326e53;border-radius:6px;padding:8px 10px;margin:0 -10px 18px;font-size:10px}.voice-demo__receiver-head strong{display:flex;align-items:center;gap:6px;font-weight:600}.voice-demo__receiver-head svg{width:14px;height:14px}.voice-demo__receiver-head>span{font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.voice-demo__header{display:flex;align-items:center;justify-content:space-between;gap:14px}.voice-demo__identity{display:flex;align-items:center;gap:10px}.voice-demo__identity h3{font-size:16px;line-height:1.3;margin:0 0 3px;letter-spacing:-.02em}.voice-demo__identity p{margin:0;font-size:10px;color:#597092}
.voice-demo__avatar{display:grid;place-items:center;width:42px;height:42px;background:#e4eeff;color:#2f6ee9;border-radius:50%;flex-shrink:0}.voice-demo__avatar svg{width:20px;height:20px}
.voice-demo__call-state{text-align:right;font-size:11px;color:#326e53;line-height:1.5;max-width:48%}.voice-demo__timer{display:block;font-size:10px;color:#58718b;font-variant-numeric:tabular-nums;margin-top:3px}
.voice-demo__scene{position:relative;min-height:222px;display:grid;align-items:center}
.voice-demo__prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:18px 10px;opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.voice-demo__prompt-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#eaf1ff;color:#2f6ee9;margin-bottom:2px}.voice-demo__prompt-icon svg{width:26px;height:26px}
.voice-demo__prompt h4{font-size:17px;line-height:1.4;margin:0;font-weight:600;letter-spacing:-.015em}.voice-demo__prompt p{font-size:12px;line-height:1.6;max-width:320px;margin:0;color:#597092}
.voice-demo__end-summary{display:none;font-size:11px;line-height:1.5;background:#e8f3ed;color:#287453;border-radius:6px;padding:6px 10px}
.voice-demo[data-phase=connected] .voice-demo__prompt,.voice-demo[data-phase=settling] .voice-demo__prompt,.voice-demo[data-phase=complete] .voice-demo__prompt{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.voice-demo[data-phase=ready] .voice-demo__script,.voice-demo[data-phase=dispatch] .voice-demo__script,.voice-demo[data-phase=incoming] .voice-demo__script,.voice-demo[data-phase=ended] .voice-demo__script{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.voice-demo[data-phase=dispatch] [data-v-send-icon] svg{animation:voice-connect 1s linear infinite}
.voice-demo[data-phase=incoming] .voice-demo__prompt-icon{background:#e1f1e9;color:#24684e;animation:voice-ring 1.6s ease-in-out infinite}
.voice-demo[data-phase=incoming] [data-v-answer]{background:#287453;color:#fff;font-weight:600}
.voice-demo[data-phase=ended] .voice-demo__prompt-icon{background:#edf1f6;color:#58718b}.voice-demo[data-phase=ended] .voice-demo__end-summary{display:block}
.voice-demo[data-outcome=cancelled] .voice-demo__end-summary{background:#edf1f6;color:#526984}
.voice-demo__script{text-align:center;margin:22px 0 18px;opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.voice-demo__script>[data-v-intro]{margin:0;font-size:12px;line-height:1.5;color:#4c6486;opacity:0;transition:opacity .35s}.voice-demo__script>[data-v-intro].is-active{opacity:1}
.voice-demo__digits{display:flex;justify-content:center;gap:14px;margin:10px auto 4px;height:52px;align-items:center}
.voice-demo__digits span{position:relative;display:inline-block;width:30px;line-height:1;font-size:38px;font-weight:600;font-variant-numeric:tabular-nums;color:transparent;transform:translateY(6px);transition:color .4s,transform .4s}
.voice-demo__digits span::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;background:#bed0eb;border-radius:50%;transform:translate(-50%,-50%);transition:opacity .3s}
.voice-demo__digits .is-read{color:#2f6ee9;transform:translateY(0)}.voice-demo__digits .is-read::after{opacity:0}.voice-demo__digits .is-speaking{color:#174ecc;transform:translateY(-3px) scale(1.08)}
.voice-demo__wave{position:relative;display:grid;align-items:center;height:74px;max-width:100%;margin:8px 0;overflow:hidden}.voice-demo__wave-bars{display:flex;align-items:center;justify-content:center;gap:5px;height:74px;width:100%}.voice-demo__wave i{display:block;width:4px;flex:0 1 4px;min-width:2px;height:var(--bar);border-radius:4px;background:#7ca7f3;transform:scaleY(.1);transition:background-color .5s}
.voice-demo[data-phase=connected] .voice-demo__wave i,.voice-demo[data-phase=settling] .voice-demo__wave i,.voice-demo[data-phase=ended] .voice-demo__wave i{background:#487fea;animation:voice-wave .95s ease-in-out var(--delay) infinite alternate}
.voice-demo__playback-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#287453;opacity:0;visibility:hidden}.voice-demo__playback-result svg{width:22px;height:22px}
.voice-demo[data-phase=complete] .voice-demo__wave-bars{opacity:0;visibility:hidden}.voice-demo[data-phase=complete] .voice-demo__playback-result{opacity:1;visibility:visible}
.voice-demo__subtitle{min-height:23px;font-size:13px;line-height:1.6;color:#35587f;margin:0 0 9px}
.voice-demo__controlbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid #e5edf8}
.voice-demo__language{display:flex;align-items:center;gap:8px;min-width:0}.voice-demo__language label{font-size:10px;color:#526984;white-space:nowrap}
.voice-demo__language select{appearance:none;border:1px solid #cfdef4;background:#f6f9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23244674' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;border-radius:7px;color:#244674;padding:9px 28px 9px 10px;font-size:11px;min-width:0}
.voice-demo__actions{display:flex;gap:8px}.voice-demo__actions button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;line-height:1.4;padding:10px 12px;border:0;border-radius:8px;background:#e1f1e9;color:#24684e;white-space:nowrap;transition:background-color .2s}.voice-demo__actions svg{width:15px;height:15px}.voice-demo__actions button:not(:disabled):hover{background:#cce7d9}.voice-demo__actions [data-v-hang]{background:#fce9ec;color:#b53046}.voice-demo__actions [data-v-hang] svg{transform:rotate(135deg)}.voice-demo__actions [data-v-hang]:not(:disabled):hover{background:#f9d4dc}
.voice-demo[data-phase=incoming] [data-v-answer]:not(:disabled):hover{background:#205d42}
.voice-demo__secondary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}.voice-demo__secondary button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#42617e;font-size:11px;padding:5px 0}.voice-demo__secondary button:hover{color:#205bd1}.voice-demo__secondary svg{width:14px;height:14px}.voice-demo__sound[aria-pressed=true]{color:#205bd1}
.voice-demo__secondary [data-v-listen]{padding-right:var(--voice-repeat-inset,12px)}
.voice-demo[data-phase=incoming] .voice-demo__avatar{animation:voice-ring 2s ease-in-out infinite}.voice-demo.is-paused *{animation-play-state:paused!important}.voice-demo__note{font-size:10px;line-height:1.5;color:#5b718a;text-align:center;margin:14px 0 0}
@keyframes voice-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}@keyframes voice-ring{50%{transform:scale(1.07)}}@keyframes voice-connect{to{transform:rotate(360deg)}}
@media(max-width:920px){.voice-demo{flex:none;width:min(593px,100%);margin-inline:auto}}
@media(max-width:600px){.voice-demo__stage{padding:20px}.voice-demo__controlbar{gap:12px;flex-wrap:wrap}.voice-demo__language{flex:1}.voice-demo__language label{display:none}.voice-demo__actions button{padding:9px 10px;font-size:10px}.voice-demo__actions{gap:6px}.voice-demo__language select{font-size:10px;padding:9px 25px 9px 8px}.voice-demo__digits{gap:12px}.voice-demo__digits span{font-size:32px;width:26px}.voice-demo__script{margin-top:22px}.voice-demo__wave{gap:3px}.voice-demo__wave i{width:3px;min-width:1px}.voice-demo__identity h3{font-size:14px}.voice-demo__call-state{font-size:10px}.voice-demo__toolbar{font-size:11px}.voice-demo__subtitle{font-size:11px;min-height:36px}}
@media(prefers-reduced-motion:reduce){.voice-demo *{animation:none!important;transition:none!important}.voice-demo__digits .is-read{transform:none}}
@media(max-width:600px){.voice-demo__toolbar button{width:44px;height:44px}.voice-demo__toolbar>div{gap:8px}.voice-demo__controlbar{gap:12px}.voice-demo__language{flex:1 0 100%;justify-content:space-between}.voice-demo__language label{display:block}.voice-demo__language select{min-height:44px}.voice-demo__actions{width:100%;gap:12px}.voice-demo__actions button{flex:1;min-height:44px;font-size:11px}.voice-demo__secondary button{min-height:44px}}
.voice-demo__sender{padding:16px calc(var(--voice-content-inset) - 1px);background:#f8fbff;border:1px solid #d6e3f7;border-radius:12px}
.voice-demo__sender-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px}.voice-demo__sender-head strong{display:flex;align-items:center;gap:7px}.voice-demo__sender-head strong svg{color:#2f6ee9;width:16px;height:16px}.voice-demo__sender-head>span{font-size:10px;color:#597092;text-align:right}
.voice-demo__sender-body{display:flex;align-items:center;justify-content:space-between;gap:12px}.voice-demo__sender-body>div{min-width:0}.voice-demo__sender-body>div>span{display:block;font-size:10px;color:#526984;margin-bottom:5px}.voice-demo__sender-body b{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.voice-demo__sender-body button{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:8px;padding:13px 18px;min-height:46px;min-width:160px;background:#2f6ee9;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .2s}.voice-demo__sender-body button:hover:not(:disabled){background:#205bd1}.voice-demo__sender-body button svg{width:16px;height:16px}
.voice-demo[data-phase=ready] .voice-demo__sender{border-color:#80a8f4}.voice-demo[data-phase=ready] [data-v-send]{box-shadow:0 5px 12px rgb(47 110 233/.18)}
.voice-demo [data-v-send]:disabled{opacity:1;background:#e7efff;color:#35587f;box-shadow:none}.voice-demo [data-v-send-icon]{display:flex}
.voice-demo__connection{display:grid;place-items:center;height:32px;color:#94b0d7;transition:color .35s}.voice-demo__connection svg{width:24px;height:32px;overflow:hidden}.voice-demo__connection-track{opacity:.4;transition:opacity .35s}.voice-demo__connection-packet{opacity:0}
.voice-demo[data-phase=dispatch] .voice-demo__connection,.voice-demo[data-phase=incoming] .voice-demo__connection{color:#2f6ee9}.voice-demo[data-phase=dispatch] .voice-demo__connection-packet,.voice-demo[data-phase=incoming] .voice-demo__connection-packet{animation:voice-request 1.5s ease-in-out infinite}
.voice-demo[data-phase=connected] .voice-demo__connection,.voice-demo[data-phase=settling] .voice-demo__connection,.voice-demo[data-phase=complete] .voice-demo__connection{color:#287453}.voice-demo:is([data-phase=connected],[data-phase=settling],[data-phase=complete]) .voice-demo__connection-track{opacity:.65}
.voice-demo[data-phase=dispatch] .voice-demo__sender-head>span,.voice-demo[data-phase=incoming] .voice-demo__sender-head>span,.voice-demo[data-phase=connected] .voice-demo__sender-head>span{color:#205bd1}.voice-demo[data-phase=complete] .voice-demo__sender-head>span{color:#287453}
@keyframes voice-request{0%{transform:translateY(0);opacity:0}18%,75%{opacity:1}100%{transform:translateY(20px);opacity:0}}
@media(max-width:600px){.voice-demo{--voice-content-inset:20px}.voice-demo__sender{padding:14px calc(var(--voice-content-inset) - 1px)}.voice-demo__sender-head{font-size:11px}.voice-demo__sender-body b{font-size:10px}.voice-demo__sender-body button{font-size:12px;padding:12px;min-height:46px;min-width:0}.voice-demo__sender-body{gap:8px}.voice-demo__prompt h4{font-size:15px}.voice-demo__prompt p{font-size:11px}}
@media(max-width:380px){.voice-demo__sender-body{align-items:stretch;flex-direction:column}.voice-demo__sender-body button{width:100%}}
@media(max-width:600px){.voice-demo__wave-bars{gap:3px}.voice-demo__sender-head{align-items:flex-start}.voice-demo__sender-head strong{max-width:55%;line-height:1.5}.voice-demo__sender-head>span{max-width:45%;line-height:1.5}.voice-demo__receiver-head{flex-wrap:wrap;row-gap:5px}.voice-demo__playback-result{font-size:11px}}