/*
 * voice.css -- Estilos do Voice Engine
 * ======================================
 * PORQUE: Estilos para o botao de microfone e estados
 * visuais de "ouvindo" e "falando". Separado para nao
 * poluir input.css com logica de voz.
 */

/* ── Botao microfone no input ── */
.voice-btn {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--muted);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
 flex-shrink: 0;
}

.voice-btn:hover {
 border-color: var(--red-dim);
 color: var(--white);
}

/* Estado: ouvindo (microfone ativo) */
.voice-btn.listening {
 background: var(--red);
 border-color: var(--red);
 color: #fff;
 animation: voicePulse 1.5s ease-in-out infinite;
}

/* Estado: desabilitado (browser sem suporte) */
.voice-btn:disabled {
 opacity: 0.3;
 cursor: not-allowed;
}

/* ── Toggle de auto-speak ── */
.voice-toggle {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: transparent;
 color: var(--muted);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
}

.voice-toggle:hover {
 border-color: var(--red-dim);
 color: var(--white);
}

.voice-toggle.active {
 background: rgba(196, 30, 30, 0.15);
 border-color: var(--red-dim);
 color: var(--red);
}

/* ── Pulsacao do mic quando ouvindo ── */
@keyframes voicePulse {
 0%, 100% {
 box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.4);
 }
 50% {
 box-shadow: 0 0 0 8px rgba(196, 30, 30, 0);
 }
}