/* Custom Scrollbar & Range Sliders for Cyberpunk Neon Aesthetic */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Range Input */
.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #1E293B;
  border-radius: 999px;
  outline: none;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #06B6D4;
  border: 2px solid #FFFFFF;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #8B5CF6;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.8);
}

.preset-card.active {
  border-color: #8B5CF6 !important;
  background-color: #131C2E !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important;
}

/* Glassmorphism subtle overlay */
.backdrop-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Pulsing record button */
@keyframes pulse-record {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(244, 63, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
  }
}

.recording-pulse {
  animation: pulse-record 1.5s infinite;
}