/* ==========================================================================
   UNI DEMO — Demonstração animada da assistente financeira Uni (por VOZ)
   Reaproveita tokens/classes já existentes em style.css
   (.greet, .balance-card, .ring-row, .list-row, .report-link, --blue, --purple,
   --emerald, --text-2, --text-3, --border-soft, --mono, --font). Aqui só entra
   o que é NOVO: viewport com slide, interface de voz, meta e toast.
   ========================================================================== */

.uni-demo{
  position:relative;
  isolation:isolate;
}

/* ---------- Viewport (palco onde as duas telas alternam) ---------- */
.uni-demo__viewport{
  position:relative;
  overflow:hidden;
  min-height:430px;
  border-radius:18px;
}

.uni-screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  transform:translateX(0);
  opacity:1;
  transition:transform .62s cubic-bezier(.83,0,.17,1), opacity .5s ease;
  will-change:transform;
}
.uni-screen[data-hidden="true"]{
  pointer-events:none;
}

.uni-screen--dashboard[data-pos="left"]{transform:translateX(-108%);opacity:0;}
.uni-screen--dashboard[data-pos="center"]{transform:translateX(0);opacity:1;}

.uni-screen--voice[data-pos="right"]{transform:translateX(108%);opacity:0;}
.uni-screen--voice[data-pos="center"]{transform:translateX(0);opacity:1;}

/* ---------- Contadores animados no dashboard ---------- */
.balance-value.is-live,
.list-value.is-live{
  font-variant-numeric:tabular-nums;
}
.balance-change{
  transition:color .3s ease;
}
.balance-change.is-down{
  color:#fb7185;
}

.uni-ring-seg{
  transition:stroke-dasharray .85s cubic-bezier(.22,1,.36,1),
             stroke-dashoffset .85s cubic-bezier(.22,1,.36,1);
}

.list-value.is-updating,
.list-pct.is-updating{
  animation:uniValueSwap .5s ease;
}
@keyframes uniValueSwap{
  0%{opacity:1;transform:translateY(0);}
  35%{opacity:0;transform:translateY(-3px);}
  36%{opacity:0;transform:translateY(3px);}
  100%{opacity:1;transform:translateY(0);}
}

/* ---------- Meta trimestral (barra discreta, evolui a cada ciclo) ---------- */
.uni-goal{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--border-soft, rgba(255,255,255,.06));
}
.uni-goal__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:7px;
}
.uni-goal__label{
  font-size:10px;
  letter-spacing:.03em;
  color:var(--text-3,#64748b);
  text-transform:uppercase;
}
.uni-goal__pct{
  font-family:var(--mono, monospace);
  font-size:11.5px;
  font-weight:600;
  color:var(--emerald,#10B981);
  transition:color .3s ease;
}
.uni-goal__track{
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.uni-goal__fill{
  height:100%;
  border-radius:999px;
  width:0%;
  background:linear-gradient(90deg,var(--blue,#1D4EDB),var(--emerald,#10B981));
  transition:width 1s cubic-bezier(.22,1,.36,1);
}

/* ---------- Toast de confirmação (flutua sobre o dashboard) ---------- */
.uni-toast{
  position:absolute;
  top:10px;
  left:50%;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px 9px 10px;
  border-radius:999px;
  background:rgba(15,20,38,.94);
  border:1px solid var(--border-soft, rgba(255,255,255,.06));
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  transform:translate(-50%,-14px);
  opacity:0;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.uni-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}
.uni-toast__icon{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.uni-toast__icon svg{width:11px;height:11px;}
.uni-toast--income .uni-toast__icon{background:rgba(16,185,129,.18);color:var(--emerald,#10B981);}
.uni-toast--expense .uni-toast__icon{background:rgba(124,58,237,.2);color:var(--purple,#7C3AED);}

/* ==========================================================================
   INTERFACE DE VOZ
   Nada de bolhas, nada de teclado, nada de caixa de texto.
   ========================================================================== */
.uni-voice{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  padding-top:6px;
  text-align:center;
}

/* ---------- Palco do microfone ---------- */
.uni-voice__stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-height:400px;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:max-height .5s cubic-bezier(.6,0,.3,1), opacity .4s ease, transform .4s ease, margin .5s ease;
  overflow:hidden;
}
.uni-voice__stage.is-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-6px) scale(.96);
  margin-bottom:0 !important;
}

.uni-mic{
  position:relative;
  width:58px;height:58px;
  border-radius:50%;
  border:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--blue,#1D4EDB),var(--purple,#7C3AED));
  box-shadow:0 10px 26px -8px rgba(29,78,219,.55);
  flex-shrink:0;
}
.uni-mic__icon{
  width:20px;height:20px;
  color:#fff;
  position:relative;
  z-index:2;
  transition:opacity .3s ease;
}
.uni-mic__pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid var(--blue,#1D4EDB);
  opacity:0;
}
.uni-mic.is-listening .uni-mic__pulse{
  animation:uniMicPulse 1.8s ease-out infinite;
}
.uni-mic.is-listening .uni-mic__pulse--2{
  animation-delay:.6s;
}
@keyframes uniMicPulse{
  0%{opacity:.55;transform:scale(1);}
  100%{opacity:0;transform:scale(2.05);}
}
.uni-mic.is-muted .uni-mic__icon{opacity:.45;}

/* destaque breve quando o usuário toca no microfone, antes de escutar */
.uni-mic.is-tapped{
  animation:uniMicTap .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes uniMicTap{
  0%{transform:scale(1);box-shadow:0 10px 26px -8px rgba(29,78,219,.55);}
  40%{transform:scale(.9);box-shadow:0 6px 18px -6px rgba(124,58,237,.7);}
  100%{transform:scale(1);box-shadow:0 10px 26px -8px rgba(29,78,219,.55);}
}

/* ondas sonoras (barras CSS puras, sem canvas) */
.uni-wave{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  height:22px;
  opacity:0;
  transition:opacity .3s ease;
}
.uni-wave.is-active{opacity:1;}
.uni-wave span{
  width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--blue,#1D4EDB),var(--purple,#7C3AED));
  height:6px;
  animation:uniWaveBar 1.1s ease-in-out infinite;
}
.uni-wave.is-scanning span{
  background:var(--text-3,#64748b);
  animation-name:uniWaveScan;
  animation-duration:1.3s;
}
.uni-wave span:nth-child(1){animation-delay:0s;}
.uni-wave span:nth-child(2){animation-delay:.09s;}
.uni-wave span:nth-child(3){animation-delay:.18s;}
.uni-wave span:nth-child(4){animation-delay:.27s;}
.uni-wave span:nth-child(5){animation-delay:.36s;}
.uni-wave span:nth-child(6){animation-delay:.45s;}
.uni-wave span:nth-child(7){animation-delay:.54s;}
@keyframes uniWaveBar{
  0%,100%{height:5px;}
  50%{height:20px;}
}
@keyframes uniWaveScan{
  0%,100%{height:4px;opacity:.35;}
  50%{height:9px;opacity:.8;}
}

.uni-voice__status{
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-2,#94a3b8);
  min-height:14px;
  transition:opacity .25s ease;
}

/* ---------- Transcrição reconhecida (não é balão de mensagem) ---------- */
.uni-voice__transcript{
  width:100%;
  padding:0 6px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
  margin-top:2px;
}
.uni-voice__transcript.is-visible{
  opacity:1;
  transform:translateY(0);
}
.uni-voice__transcript-text{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  color:#f4f6fb;
}
.uni-voice__transcript-text .uni-word{
  display:inline-block;
  opacity:0;
  filter:blur(2px);
  transform:translateY(3px);
  animation:uniWordIn .38s ease forwards;
}
@keyframes uniWordIn{
  to{opacity:1;filter:blur(0);transform:translateY(0);}
}
.uni-voice__transcript-tag{
  display:block;
  margin-top:5px;
  font-size:9.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-3,#64748b);
}

/* ---------- "Uni analisando" ---------- */
.uni-thinking{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:0;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .35s ease, max-height .35s ease, margin .35s ease;
}
.uni-thinking.is-visible{
  opacity:1;
  max-height:30px;
  margin-top:16px;
}
.uni-thinking__dot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple,#7C3AED),var(--emerald,#10B981));
  animation:uniThinkBreathe 1.3s ease-in-out infinite;
}
.uni-thinking__label{
  font-size:11px;
  font-weight:600;
  color:var(--text-2,#94a3b8);
  transition:opacity .2s ease;
}
@keyframes uniThinkBreathe{
  0%,100%{transform:scale(.7);opacity:.5;}
  50%{transform:scale(1.15);opacity:1;}
}

/* ---------- Resposta da Uni (cartão de voz, não balão de chat) ---------- */
.uni-voice__response{
  width:100%;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border-soft, rgba(255,255,255,.06));
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
  text-align:left;
}
.uni-voice__response.is-visible{
  opacity:1;
  transform:translateY(0);
}
.uni-voice__response-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
}
.uni-voice__avatar{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple,#7C3AED),var(--emerald,#10B981));
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;
  flex-shrink:0;
}
.uni-voice__response-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-2,#94a3b8);
  letter-spacing:.02em;
}
.uni-voice__response-text{
  font-size:12.5px;
  line-height:1.6;
  color:#e7ebf5;
}
.uni-voice__response-text p{
  margin:0 0 7px;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .5s ease, transform .5s ease;
}
.uni-voice__response-text p.is-visible{
  opacity:1;
  transform:translateY(0);
}
.uni-voice__response-text p:last-child{margin-bottom:0;}
.uni-voice__response-text strong{color:#fff;}

.uni-voice__followup{
  margin:11px 0 0;
  font-size:11.5px;
  font-style:italic;
  color:var(--text-3,#64748b);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .5s ease, transform .5s ease;
}
.uni-voice__followup.is-visible{
  opacity:1;
  transform:translateY(0);
}
.uni-voice__followup::before{
  content:"— ";
}

@media (prefers-reduced-motion: reduce){
  .uni-screen,.uni-toast,.uni-ring-seg,.balance-change,.uni-mic__pulse,.uni-mic.is-tapped,
  .uni-wave span,.uni-thinking__dot,.uni-thinking__label,.uni-voice__transcript,.uni-voice__response,
  .uni-voice__response-text p,.uni-voice__followup,.uni-goal__fill{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}