/* Bolha de áudio no estilo "Audio Visualizer" (framer.com/marketplace/components/audio-visualizer,
 * 28/10/2026), 1:1 no visual com o marrom trocado pelo azul FiveDesk (#629EE9). Medidas da referência
 * (card 140px): botão 90px, barras 6px com vão de 8px, raio 12px, altura 50–100% centrada; aqui na
 * escala da bolha. Ao tocar, as barras já ouvidas ficam claras e uma onda corre por elas (escala
 * vertical 1 → 0,8 → 1). O botão de velocidade é o nosso. Horários, cursor e microfone ficam ocultos
 * (a lógica deles continua: duração no aria-label, "ouvido" no microfone).
 * Especificidade com dois :not(#…) para vencer as regras antigas da bolha sem apagá-las. */
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b){align-items:center;gap:0.75rem}

.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-play{
  flex:0 0 2.5rem;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;
  background:#629ee9;color:#fff;
  box-shadow:0 0.82px 1.64px rgba(8,8,8,.1),inset 0 4.91px 9.82px rgba(255,255,255,.12),inset 0 0.82px 0.82px rgba(255,255,255,.2);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,box-shadow .2s ease
}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-play:hover{background:#5a95e0;transform:scale(1.05)}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-play:active{transform:scale(.94)}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-play svg{
  width:1.55rem;height:1.55rem;margin:0;fill:currentColor
}
/* Giro do ícone só quando play/pausa troca (30/10/2026): no envio a bolha é remontada 3-4 vezes (arquivo
   local, duração lida, resposta do servidor, anexo real) e o ícone nascia girando a cada uma. */
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-play[data-trocou] svg{animation:fd-audio-icone .26s cubic-bezier(.34,1.56,.64,1)}

/* Faixa das barras: ocupa o meio da bolha; sem cursor nem horários. */
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-track{flex:1 1 auto;min-width:0}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) :is(.fd-v2-audio-times,.fd-v2-audio-microphone){display:none}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave{
  /* A faixa é um flex em coluna: com o flex:1 antigo (base 0%) a altura da onda zerava. */
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:0.25rem;
  width:100%;max-width:none;height:2.75rem;margin:0;padding:0;overflow:visible;cursor:pointer
}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>.fd-v2-audio-head{display:none}
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>span:not(.fd-v2-audio-head){
  flex:0 0 3px;width:3px;min-width:3px;max-width:3px;height:var(--fd-audio-bar-height,50%);max-height:100%;
  border-radius:12px;background:#629ee9;transform-origin:center center;will-change:transform;
  transition:background-color .3s ease
}
/* No claro, o preenchimento já ouvido fica mais forte e escuro; no escuro mantém o desenho anterior. */
.fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>span.is-played{background:#397fd4}
:is(.fd-app-dark,.fd-portal-dark) .fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>span:not(.fd-v2-audio-head){background:#629ee9}
:is(.fd-app-dark,.fd-portal-dark) .fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>span.is-played{background:#eef4fd}

/* Tocando: a onda corre pelas barras (cada uma atrasada pelo índice). */
.fd-v2-messages .fd-v2-audio.fd-audio-viz.is-playing:not(#fd-a):not(#fd-b) .fd-v2-audio-wave>span:not(.fd-v2-audio-head){
  animation:fd-audio-onda 1.15s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.07s)
}
@keyframes fd-audio-onda{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.8)}}
@keyframes fd-audio-icone{from{opacity:0;transform:scale(.6) rotate(-35deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fd-v2-messages .fd-v2-audio.fd-audio-viz:not(#fd-a):not(#fd-b) :is(.fd-v2-audio-wave>span,.fd-v2-audio-play svg){animation:none!important}
}