/* Custom styles & animations for ESP32 Voice Ingestion Dashboard */

@layer utilities {
  /* Thin custom scrollbar */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 4px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #475569;
  }
}

/* Glowing pulsing ring for active recording */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    transform: scale(1.08);
  }
}

.recording-pulse {
  animation: pulse-glow 1.5s infinite;
  background-color: #ef4444 !important;
}

/* Subtle pulse for listening mode */
@keyframes listening-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
}

.listening-pulse {
  animation: listening-pulse 2s infinite;
  background-color: #f59e0b !important;
}

/* Custom styling for HTML5 audio controls */
audio {
  height: 32px;
  max-width: 100%;
  border-radius: 8px;
  outline: none;
}

audio::-webkit-media-controls-panel {
  background-color: #0f172a;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
  filter: invert(1);
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #94a3b8;
  font-family: monospace;
  font-size: 11px;
}

audio::-webkit-media-controls-timeline {
  filter: hue-rotate(120deg);
}

/* Visualizer canvas smoothing */
#visualizerCanvas {
  image-rendering: auto;
}