/* Disco IconsAI: paleta original laranja #f97316 e azul profundo #102a43.
 * Contrastes e decisão documentados em docs/inspecao-identidade-2026-10-25.dv-md.
 * Cor não governa os estados nem os prazos do microfone. */
.dv-disco {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  --simbolo-voz: #fbf9f4;
  background: var(--cor-escura-disco, #102a43);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fbf9f4, 0 0 0 2px var(--cor-escura-disco, #102a43);
  cursor: pointer;
  transition: background .5s ease, transform .7s ease;
}

/* Única diferença cromática do artefato DiscoVoz aprovado 10c0e42e.
 * O token só existe no disco cujo host optou pela variante. */
.dv-disco[data-paleta="laranja-preto"] { --cor-escura-disco: #14171a; }

.dv-disco:disabled { cursor: default; }
.dv-disco:focus-visible { outline: 3px solid var(--cor-escura-disco, #102a43); outline-offset: 3px; box-shadow: 0 0 0 7px #fbf9f4; }

.dv-anelGovernado {
  position: absolute;
  z-index: 8;
  inset: 3px;
  pointer-events: none;
}

.dv-anelGovernado svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.dv-anelGovernado circle {
  fill: none;
  stroke: var(--simbolo-voz);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 295.31;
  stroke-dashoffset: 295.31;
  animation: dv-fechar-anel var(--duracao-anel) linear forwards;
}

/* Contorno duplo: creme no plano escuro, azul no claro. */
/* No microfone o disco inteiro é o laranja da marca — o ponto cresceu até virar
 * o fundo. A transição de `background` é o que costura o crescimento do ponto
 * com a troca de cor, e por isso as duas duram o mesmo. */
.dv-disco[data-fase="ouvindo"],
.dv-disco[data-fase="processando"],
.dv-disco[data-fase="saudacao"],
.dv-disco[data-fase="respondendo"] { background: #f97316; --simbolo-voz: var(--cor-escura-disco, #102a43); }

.dv-giro {
  position: absolute;
  z-index: 0;
  left: -23%;
  top: -23%;
  width: 146%;
  height: 146%;
  opacity: 0;
  background: linear-gradient(112deg, var(--cor-escura-disco, #102a43) 0 47%, #f97316 47% 100%);
  transition: opacity .9s ease;
  animation: dv-girar 7s linear infinite;
}

.dv-disco[data-fase="espera"] .dv-giro { opacity: 1; }

.dv-simboloEstado {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  fill: var(--simbolo-voz);
  pointer-events: none;
}

/* Na espera o corte gira atrás da pausa. O miolo azul contrasta com o
 * laranja e a guarda creme mantém o símbolo visível sobre a metade azul. */
.dv-disco[data-fase="espera"] .dv-simboloEstado {
  fill: var(--cor-escura-disco, #102a43);
  stroke: #fbf9f4;
  stroke-width: 3;
  paint-order: stroke fill;
}
.dv-disco[data-fase="espera"] .dv-anelGovernado circle {
  filter: drop-shadow(1px 0 0 var(--cor-escura-disco, #102a43)) drop-shadow(-1px 0 0 var(--cor-escura-disco, #102a43)) drop-shadow(0 1px 0 var(--cor-escura-disco, #102a43)) drop-shadow(0 -1px 0 var(--cor-escura-disco, #102a43));
}

/* As três peças do microfone. Elas nascem e morrem DENTRO do ponto, com atrasos
 * diferentes — 0,18s, 0,09s e 0 —, o que dá a saída em leque descrita na
 * referência («defasadas em 90 ms, passando da posição final e voltando»). */
.dv-capsula,
.dv-arco,
.dv-pe {
  position: absolute;
  z-index: 3;
  opacity: 0;
  background: var(--simbolo-voz);
  transition:
    left .54s cubic-bezier(.34, 1.56, .64, 1),
    top .54s cubic-bezier(.34, 1.56, .64, 1),
    width .54s cubic-bezier(.34, 1.56, .64, 1),
    height .54s cubic-bezier(.34, 1.56, .64, 1),
    border-radius .54s ease,
    border-width .54s ease,
    opacity .26s ease;
}

.dv-microfone {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: center;
  transition: transform .07s linear;
}

/* Scale the complete microphone together, driven only by captured voice. */
.dv-disco[data-fase="ouvindo"] .dv-microfone {
  transform: scale(calc(1 + var(--energia-voz, 0) * .09));
}

.dv-equalizador {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.8043%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s linear;
}

/* O limiar de 0,01 que antes vivia em JavaScript (`falando && energia > 0.01`)
   agora é aritmética de CSS: multiplicar por 100 e travar em 1 dá 0 no silêncio
   e .92 assim que há voz. Em JavaScript ele custava um render por quadro. */
.dv-equalizador[data-ativo] { opacity: calc(min(1, var(--energia-voz, 0) * 100) * .92); }
.dv-equalizador > span {
  width: 3.8043%;
  height: calc(4.3478% + var(--banda-voz, 0) * 41.3043%);
  border-radius: 999px;
  background: var(--simbolo-voz);
  transition: height .06s linear;
}

.dv-capsula { transition-delay: .18s; }
.dv-arco { background: none; border-style: solid; border-color: var(--simbolo-voz); transition-delay: .09s; }

.dv-disco[data-fase="ouvindo"] .dv-capsula,
.dv-disco[data-fase="ouvindo"] .dv-arco,
.dv-disco[data-fase="ouvindo"] .dv-pe { opacity: 1; }

.dv-leitorDeTela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes dv-girar { to { transform: rotate(360deg); } }
@keyframes dv-fechar-anel { to { stroke-dashoffset: 0; } }

/* Quem pede menos movimento continua vendo o QUE está acontecendo — o disco
 * troca de cor e as peças aparecem —, sem respiro, giro nem pulso. A regra da
 * casa é entregar o fim, não suprimir o estado. */
@media (prefers-reduced-motion: reduce) {
  .dv-disco,
  .dv-giro,
  .dv-letraL,
  .dv-letraT,
  .dv-preenchimento { animation: none !important; }
  .dv-anelGovernado circle { animation-duration: .01ms !important; }
  .dv-palavra,
  .dv-preenchimento,
  .dv-capsula,
  .dv-arco,
  .dv-pe,
  .dv-microfone { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .dv-microfone { transform: none !important; }
}