/*
  Réplica da tela "Falar os gastos" do app (src/components/VoiceSheet.js +
  src/components/voice/*), em CSS puro, desenhada em "dp" (390 x 800) e
  ampliada por quem usa (--k). Usada no site (index) e na apresentação da
  loja. Mesmas cores de src/components/voice/palette.js.

  Estados (classe no .vx, trocados por voice.js em loop):
    .is-idle      -> anel ondulando devagar, onda-convite saindo do botão
    .is-listening -> barras dançando, partículas sugadas, palavras acendendo
    .is-thinking  -> barras encolhem, cometa girando
    .is-review    -> anel encolhe pro topo, cupom imprime da fenda
    .is-stamped   -> carimbo "ANOTADO" bate no cupom
*/
.vx{--bg:#050B09;--deep:#020605;--green:#2BB585;--mint:#7CF5C8;--teal:#19D3C5;--gold:#E5B454;--violet:#7B4BA8;
  --text:#F2FFF9;--dim:rgba(214,245,232,.56);--faint:rgba(214,245,232,.28);--glass:rgba(255,255,255,.055);--line:rgba(160,255,220,.16);
  --paper:#F7F4EC;--ink:#17201C;--soft:#6F7A74;--stamp:#16A06F;
  position:relative;width:390px;height:800px;overflow:hidden;color:var(--text);font-family:'Poppins',system-ui,sans-serif;
  background:radial-gradient(circle,rgba(124,245,200,.09) 1px,transparent 1.5px) 0 0/22px 22px,var(--bg)}
.vx::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,6,5,.9) 0,transparent 30%,transparent 65%,rgba(2,6,5,.95) 100%)}
.vx .glow{position:absolute;left:-190px;top:-160px;width:770px;height:770px;border-radius:50%;background:radial-gradient(circle,rgba(43,181,133,.28) 0,rgba(123,75,168,.08) 55%,transparent 70%);transition:transform .7s,opacity .5s}
.vx.is-listening .glow{animation:vxGlow 1.1s ease-in-out infinite}
.vx.is-review .glow,.vx.is-stamped .glow{transform:translateY(-80px) scale(.7);opacity:.6}
@keyframes vxGlow{50%{opacity:.7;transform:scale(1.06)}}
@keyframes vxDrift{from{transform:translate(-40px,25px) scale(1)}to{transform:translate(40px,-25px) scale(1.15)}}

/* topo */
.vx .top{position:absolute;left:0;right:0;top:44px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:3}
.vx .gl{width:40px;height:40px;border-radius:20px;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px}
.vx .brandx{font-size:12px;font-weight:700;letter-spacing:3px;display:flex;align-items:center;gap:6px}
.vx .brandx i{color:var(--gold);font-size:13px}
.vx .quota{height:30px;padding:0 11px;border-radius:15px;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--dim)}
.vx .quota em{width:6px;height:6px;border-radius:3px;background:var(--mint)}.vx .quota em:nth-of-type(3){margin-right:5px}
.vx .quota small{font-size:11.5px}

/* anel */
.vx .core{position:absolute;left:50%;top:108px;width:264px;height:264px;margin-left:-132px;z-index:2;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.vx .halo{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(43,181,133,.4) 15%,rgba(43,181,133,.1) 50%,transparent 70%);opacity:.35;transition:opacity .4s}
.vx.is-listening .halo{opacity:.9}
.vx .bars{position:absolute;inset:0;animation:vxSpin 26s linear infinite}
.vx .bars i{position:absolute;left:50%;top:50%;width:4px;height:15px;margin:-7.5px 0 0 -2px;border-radius:2px;background:var(--c);
  transform:rotate(var(--r)) translateY(-92px) scaleY(1);animation:vxWave 3.4s linear var(--w) infinite}
@keyframes vxWave{0%,100%{transform:rotate(var(--r)) translateY(-92px) scaleY(.55)}50%{transform:rotate(var(--r)) translateY(-92px) scaleY(1.05)}}
@keyframes vxBeat{0%,100%{transform:rotate(var(--r)) translateY(-92px) scaleY(1)}50%{transform:rotate(var(--r)) translateY(-92px) scaleY(var(--amp))}}
@keyframes vxSquash{to{transform:rotate(var(--r)) translateY(-92px) scaleY(.35)}}
.vx.is-listening .bars i{animation:vxBeat var(--b) ease-in-out infinite}
.vx.is-thinking .bars i{animation:vxSquash .35s forwards}
.vx .dots{position:absolute;inset:0;opacity:.35;transition:opacity .5s}
.vx.is-listening .dots{opacity:1}
.vx.is-review .dots,.vx.is-stamped .dots{opacity:0}
.vx .dots s{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--mint);opacity:0;animation:vxSuck var(--t) ease-in var(--d) infinite}
.vx .dots s:nth-child(3n){background:var(--gold)}.vx .dots s:nth-child(3n+1){background:var(--teal)}
@keyframes vxSuck{0%{transform:rotate(var(--r)) translateY(-260px);opacity:0}25%{opacity:.9}85%{opacity:.9}100%{transform:rotate(var(--r)) translateY(-96px);opacity:0}}
.vx .comet{position:absolute;inset:3px;border-radius:50%;opacity:0;transition:opacity .35s;
  background:conic-gradient(from 0deg,transparent 0 65%,rgba(124,245,200,.9) 99%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 63%,#000 64%,#000 66%,transparent 67%)}
.vx.is-thinking .comet{opacity:1;animation:vxSpin 1s linear infinite}
.vx .invite{position:absolute;left:50%;top:50%;width:122px;height:122px;margin:-61px;border-radius:50%;border:1.5px solid var(--mint);opacity:0}
.vx.is-idle .invite{animation:vxInvite 3s ease-out infinite}
@keyframes vxInvite{0%{transform:scale(1);opacity:0}6%{opacity:.6}55%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.vx .disc{position:absolute;left:50%;top:50%;width:122px;height:122px;margin:-61px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#123329,var(--deep));box-shadow:inset 0 0 0 2px rgba(124,245,200,.55),0 0 30px rgba(43,181,133,.35);transition:background .25s,transform .25s}
.vx .disc i{position:absolute;font-size:42px;transition:opacity .2s}
.vx .disc .mic{color:var(--mint)}.vx .disc .wav{color:var(--deep);opacity:0;font-size:46px}
.vx.is-listening .disc{background:radial-gradient(circle at 40% 35%,#fff,var(--mint) 35%,var(--green));animation:vxPress 1.1s ease-in-out infinite}
.vx.is-listening .disc .mic{opacity:0}.vx.is-listening .disc .wav{opacity:1}
@keyframes vxPress{0%,100%{transform:scale(1.04)}30%{transform:scale(1.13)}60%{transform:scale(1.06)}80%{transform:scale(1.15)}}
@keyframes vxSpin{to{transform:rotate(360deg)}}
.vx.is-review .core,.vx.is-stamped .core{transform:translateY(-62px) scale(.5)}

/* status */
.vx .status-l{position:absolute;left:0;right:0;top:396px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:2.4px;color:var(--dim);z-index:2;transition:top .6s cubic-bezier(.3,1.2,.5,1)}
.vx .status-l i{width:6px;height:6px;border-radius:3px;background:currentColor;box-shadow:0 0 8px currentColor}
.vx.is-listening .status-l{color:var(--mint)}
.vx.is-listening .status-l,.vx.is-thinking .status-l{animation:vxPulse 1.4s ease-in-out infinite}
.vx.is-review .status-l,.vx.is-stamped .status-l{top:226px}
@keyframes vxPulse{50%{opacity:.4}}
.vx .status-l span::after{content:"SEGURE O ANEL E FALE"}
.vx.is-listening .status-l span::after{content:"OUVINDO · SOLTE PARA GERAR"}
.vx.is-thinking .status-l span::after{content:"CRIANDO SEUS GASTOS…"}
.vx.is-review .status-l span::after,.vx.is-stamped .status-l span::after{content:"CONFIRA ANTES DE LANÇAR"}

/* palavras: valores acendem em dourado */
.vx .words{position:absolute;left:26px;right:26px;top:436px;text-align:center;font-size:23px;line-height:1.38;font-weight:500;letter-spacing:-.2px;transition:opacity .4s}
.vx .words b{display:inline-block;margin:0 .14em;font-weight:500;opacity:0;transform:translateY(10px) scale(.92);transition:opacity .36s cubic-bezier(.2,.7,.3,1),transform .36s cubic-bezier(.2,.7,.3,1)}
.vx .words b.n{color:var(--gold);font-weight:800;text-shadow:0 0 14px rgba(229,180,84,.8)}
.vx .words b.on{opacity:1;transform:none}
.vx.is-review .words,.vx.is-stamped .words{opacity:0}

/* cupom */
.vx .slot{position:absolute;left:20px;right:20px;top:262px;height:10px;border-radius:5px;background:var(--deep);border:1px solid var(--line);z-index:4;opacity:0;transition:opacity .3s}
.vx .slot::after{content:"";position:absolute;left:18px;right:18px;top:3px;height:2px;border-radius:1px;background:var(--mint);box-shadow:0 0 8px var(--mint);opacity:.75}
.vx .paperwrap{position:absolute;left:32px;right:32px;top:267px;overflow:hidden;z-index:3;pointer-events:none}
/* papel + borda serrilhada descem juntos da fenda */
.vx .roll{transform:translateY(-105%);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.vx .paper{position:relative;background:var(--paper);color:var(--ink);padding:16px 16px 10px}
.vx .zig{height:7px;background:linear-gradient(-45deg,transparent 5px,var(--paper) 0) 0 0/12px 7px repeat-x,linear-gradient(45deg,transparent 5px,var(--paper) 0) 0 0/12px 7px repeat-x;margin-top:-1px}
.vx.is-review .slot,.vx.is-stamped .slot{opacity:1}
.vx.is-review .roll,.vx.is-stamped .roll{transform:none}
.vx .ph{text-align:center}.vx .ph b{display:block;font-weight:800;font-size:15px;letter-spacing:3px}
.vx .ph small,.vx .lt small,.vx .tot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--soft)}
.vx .dash{border-top:1.5px dashed #C9CCC4;margin:9px 0}
.vx .ln{display:flex;align-items:center;gap:10px;padding:6px 0;opacity:0;transform:translateY(-8px);transition:opacity .26s,transform .26s}
.vx.is-review .ln,.vx.is-stamped .ln{opacity:1;transform:none}
.vx.is-review .ln{transition-delay:calc(.45s + var(--i) * .17s)}
.vx .li{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:color-mix(in srgb,var(--c) 22%,transparent)}
.vx .lt{flex:1;min-width:0}.vx .lt b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.vx .lv{font-weight:800;font-size:15px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.vx .lx{color:var(--soft);font-size:12px}
.vx .tot{display:flex;justify-content:space-between;align-items:baseline}
.vx .tot small{font-weight:700;color:var(--ink);font-size:12px;letter-spacing:1px}
.vx .tot b{font-size:22px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.vx .code{height:28px;width:180px;margin:12px auto 2px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3.5px,var(--ink) 3.5px 4.5px,transparent 4.5px 7px,var(--ink) 7px 10px,transparent 10px 11.5px)}
.vx .stamp{position:absolute;left:50%;top:46%;padding:4px 16px;border:3.5px solid var(--stamp);border-radius:12px;color:var(--stamp);font-weight:800;font-size:28px;letter-spacing:4px;
  transform:translate(-50%,-50%) rotate(-12deg) scale(2.6);opacity:0}
.vx.is-stamped .stamp{animation:vxStamp .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes vxStamp{to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:.88}}

/* base */
.vx .bottom{position:absolute;left:20px;right:20px;bottom:34px;display:flex;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .5s .9s,transform .6s .9s cubic-bezier(.3,1.35,.5,1)}
.vx.is-review .bottom,.vx.is-stamped .bottom{opacity:1;transform:none}
.vx .micb{flex:0 0 58px;height:58px;border-radius:29px;background:rgba(255,255,255,.09);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:22px}
.vx .go{flex:1;height:58px;border-radius:29px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--deep);
  background:linear-gradient(135deg,var(--mint),var(--green) 55%,var(--teal));box-shadow:0 10px 40px -6px rgba(43,181,133,.7)}
.vx.is-stamped .go{opacity:.4}

@media (prefers-reduced-motion:reduce){.vx *{animation:none!important;transition:none!important}}