/* Boca de Lucy: sin caja, barras de voz (barras-lucy.js) con el color de cada estado. */
.voz-dock { padding: 24px 0 28px; gap: 14px; }

#voz-centro,
body.escuchando #voz-centro,
body.pensando:not(.lucy-sonando):not(.escuchando) #voz-centro,
body.lucy-sonando:not(.escuchando) #voz-centro {
  width: 300px;
  height: 116px;
  margin: 0 22px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  overflow: visible;
}
#voz-centro:focus-visible { outline: none; }

#voz-centro > .voz-boca-barras {
  position: relative;
  z-index: 1;
  width: 280px;
  height: 112px;
  pointer-events: none;
}
.lucy-barras { display: flex; align-items: center; justify-content: center; gap: calc(var(--barra) * 0.6); }
.lucy-barras i {
  display: block;
  width: var(--barra);
  min-height: var(--barra);
  border-radius: 999px;
  background: var(--color);
  box-shadow: 0 0 calc(var(--barra) * 0.9) color-mix(in srgb, var(--color) 55%, transparent);
  transition: background-color 0.4s ease, box-shadow 0.4s ease, opacity 0.15s linear;
}

@media (max-width: 820px) {
  #voz-centro,
  body.escuchando #voz-centro,
  body.pensando:not(.lucy-sonando):not(.escuchando) #voz-centro,
  body.lucy-sonando:not(.escuchando) #voz-centro { width: 240px; height: 92px; margin: 0 12px; }
  #voz-centro > .voz-boca-barras { width: 228px; height: 88px; }
}