/* public/voice.css — Oi! Voice mic button + states */

/* ── Floating button (hidden — replaced by inline button) ── */
.oi-voice-btn {
  display: none !important;
}
.oi-voice-status {
  display: none !important;
}

/* ── Inline mic button inside the chat input bar ── */
#voice-input-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-3, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

@media (hover: hover) {
  #voice-input-btn:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    color: var(--text-1, #f1f5f9);
  }
}

/* Listening — red pulse */
#voice-input-btn.listening {
  color: var(--red, #ef4444);
  animation: oi-voice-pulse 1.2s ease-in-out infinite;
}

/* Thinking — muted spin */
#voice-input-btn.thinking {
  color: var(--text-3, #6b7280);
  animation: oi-voice-spin 1s linear infinite;
}

/* Speaking — blue */
#voice-input-btn.speaking {
  color: var(--blue, #3b82f6);
}

/* Error — amber */
#voice-input-btn.error {
  color: var(--orange, #f59e0b);
}

@keyframes oi-voice-pulse {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(239, 68, 68, 0)); }
  50%       { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8)); }
}

@keyframes oi-voice-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}