/**
 * AI Voice Input Styles
 *
 * Progressive enhancement — these styles only apply when the JS injects
 * the mic button (browser supports SpeechRecognition).
 *
 * The mic sits on the LEFT side of the input, replacing the sparkle/AI
 * icon. The mic IS the AI signifier — its presence signals intelligence.
 */

.hfse-ai-form .hfse-ai-form-input-container {
  position: relative !important;
}

/* -----------------------------------------------------------------------
   Mic button: flush-left inside the input
   ----------------------------------------------------------------------- */

.hfse-ai-form .ai-voice-btn {
  position: absolute !important;
  left: 6px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
  min-width: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

.hfse-ai-form .ai-voice-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #9b6bc6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* Hover: deeper purple with tinted background */
.hfse-ai-form .ai-voice-btn:hover {
  background-color: rgba(127, 17, 224, 0.08) !important;
}
.hfse-ai-form .ai-voice-btn:hover svg {
  stroke: #7f11e0;
}

/* Press: scale down */
.hfse-ai-form .ai-voice-btn:active {
  transform: translateY(-50%) scale(0.92);
}

/* -----------------------------------------------------------------------
   Listening state
   ----------------------------------------------------------------------- */

.hfse-ai-form .ai-voice-btn.ai-voice-listening {
  background-color: rgba(127, 17, 224, 0.08) !important;
  animation: ai-voice-breathe 2s ease-in-out infinite;
}
.hfse-ai-form .ai-voice-btn.ai-voice-listening svg {
  stroke: #7f11e0;
}

/* Pulse ring */
.hfse-ai-form .ai-voice-btn.ai-voice-listening::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(127, 17, 224, 0.25);
  animation: ai-voice-ring 1.6s ease-out infinite;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   Input padding — clear space on the left for the mic
   ----------------------------------------------------------------------- */

.hfse-ai-form.ai-voice-enabled .ai_search_input {
  padding-left: 48px !important;
}

/* Hide any existing sparkle/AI icon on the input container or input
   (theme-level icons we're replacing with the mic). */
.hfse-ai-form.ai-voice-enabled .hfse-ai-form-input-container::before,
.hfse-ai-form.ai-voice-enabled .ai_search_input::before {
  display: none !important;
}

/* -----------------------------------------------------------------------
   Active listening — border glow
   ----------------------------------------------------------------------- */

.hfse-ai-form.ai-voice-active .ai_search_input {
  box-shadow: 0 0 0 2px rgba(127, 17, 224, 0.18);
  transition: box-shadow 0.3s ease;
}

/* -----------------------------------------------------------------------
   Keyframes
   ----------------------------------------------------------------------- */

@keyframes ai-voice-breathe {
  0%, 100% { background-color: rgba(127, 17, 224, 0.06); }
  50%      { background-color: rgba(127, 17, 224, 0.12); }
}

@keyframes ai-voice-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}