/* Custom styles that complement Tailwind CSS */

/* Audio visualizer canvas */
#visualizer {
  width: 100%;
  height: 100px;
  display: none;
}

/* Progress bar animation */
.progress-bar-fill {
  transition: width 0.1s ease;
}

/* Now playing cover animation */
.now-playing-cover.visible {
  opacity: 1 !important;
}

/* Song item playing state */
.song-item.playing {
  background-color: #e3f2fd !important;
}

/* Loading spinner animation */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Status spinner for activity panel */
.status-spinner {
  animation: spin 1s linear infinite;
}

/* Volume slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
  background: #e5e7eb;
  height: 4px;
  border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #3498db;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: none;
  margin-top: -6px;
}

input[type="range"]::-moz-range-track {
  background: #e5e7eb;
  height: 4px;
  border-radius: 2px;
  border: none;
}

input[type="range"]::-moz-range-thumb {
  background: #3498db;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: none;
  margin-top: -6px;
}

/* Focus states for accessibility */
button:focus,
input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Smooth transitions */
.transition-all {
  transition: all 0.2s ease;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}