/* Botón de parlante (TTS) en el header del chat, junto al botón de cerrar */
.chat-voz-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  margin-right: 14px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.chat-voz-btn:hover {
  opacity: 1;
}

.chat-voz-btn.chat-voz-activa {
  opacity: 1;
}

/* Botón de micrófono (STT) dentro del form de envío, junto al input.
   Selector ".chat-form .chat-mic-btn" (no ".chat-mic-btn" solo) a propósito:
   necesita más especificidad que la regla genérica ".chat-form button" de
   chat.css (que le pone fondo/color azul a TODO botón del form), si no,
   esa regla gana y el ícono queda azul sobre fondo azul en hover. */
.chat-form .chat-mic-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--bg-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.chat-form .chat-mic-btn:hover {
  color: var(--primary-color);
}

.chat-form .chat-mic-btn.chat-mic-grabando {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger-color);
  animation: chatMicPulso 1.2s infinite ease-in-out;
}

@keyframes chatMicPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}