/* Color & typography variables */
:root {
  --font-family: 'Inter', sans-serif;
  --primary-start: #7b42f6;
  --primary-end:   #b01eff;
  --bg-base:       #1e1e1e;
  --bg-accent:     #2a2a2a;
  --text-light:    #eee;
}

/* Typography */
body {
  font-family: var(--font-family);
  background: var(--bg-base);
  color: var(--text-light);
}

/* Sticky navbar with shadow */
.navbar {
  background: var(--bg-base) !important;
}
.sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 1020;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Card hover lift */
.card {
  background: var(--bg-accent) !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

/* Button hover */
.btn-primary {
  transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* Upload dropzone */
.upload-dropzone {
  border: 2px dashed var(--primary-end);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  transition: background 0.2s;
}
.upload-dropzone.dragover {
  background: rgba(123,66,246,0.1);
}
body { margin:0; font-family:sans-serif; background:#121212; color:#eee; }
.btn, .navbar, .card { border-radius: 0.5rem; }
.nav-link.active { background-color: #17a2b8 !important; color: #fff !important; }
.footer { border-top: 1px solid #444; }
.card-body { padding: 1.5rem; }
:root { --plyr-color-main: #17a2b8; --plyr-color-text: #eee; --plyr-range-thumb-background: #17a2b8; }
.plyr { background: #1f1f1f; border-radius: 4px; }
/* Gradio-like accent gradient for primary buttons */
:root {
  --accent-gradient-start: #7b42f6;
  --accent-gradient-end: #b01eff;
  --accent-text-color: #fff;
}

/* Primary button styling */
.btn-primary {
  background: linear-gradient(90deg, var(--accent-gradient-start), var(--accent-gradient-end)) !important;
  color: var(--accent-text-color) !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transition: opacity 0.2s ease-in-out;
}
.btn-primary:hover, .btn-primary:focus {
  opacity: 0.9 !important;
}

/* Card styling for a more modern look */
.card {
  background: #1e1e1e !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Form controls */
.form-control {
  background: #2a2a2a !important;
  border: none !important;
  border-radius: 0.5rem !important;
  color: #ddd !important;
}
.form-control:focus {
  border: none !important;
  box-shadow: 0 0 0 0.2rem rgba(123, 66, 246, 0.25) !important;
}


/* Wavesurfer waveform styling */
.waveform {
  border-radius: 4px;
  background: #1f1f1f;
  overflow: hidden;
}


/* Smaller volume slider styling */
.volume-slider {
  width: 100px !important;
  height: 0.5rem !important;
}

/* Lighten form labels and input text in auth forms */
.auth-card .form-label,
.auth-card .form-control,
.auth-card .form-control::placeholder {
    color: #eee !important;
}

/* Loader styles */
.waveform-wrapper { position: relative; }
.dots-loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 0.5rem; z-index: 1000;
}
.dots-loader .dot {
  width: 8px; height: 8px; background: #b01eff;
  border-radius: 50%; animation: bounce 0.6s infinite ease-in-out both;
}
.dots-loader .dot:nth-child(1) { animation-delay: -0.32s; }
.dots-loader .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}


/* Custom upload button */
.btn-primary {
  background: linear-gradient(90deg, #7b42f6, #b01eff) !important;
  border: none !important;
}
.btn-primary:hover {
  opacity: 0.9;
}

/* File input label styling */
.custom-file-label {
  display: block;
  width: 100%;
  cursor: pointer;
}


/* Site-wide Montserrat font */
body, input, button, select, textarea {
  font-family: 'Montserrat', sans-serif !important;
}


/* Play button circle styling */
.btn-play-circle {
  background: linear-gradient(90deg, #7b42f6, #b01eff) !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: none !important;
}
.btn-play-circle:hover {
  opacity: 0.9;
}


/* Custom purple, thin volume slider */
.form-range {
  height: 4px;              /* thinner track */
  background: transparent;
  padding: 0;               /* remove default padding */
}
.form-range:focus {
  outline: none;            /* remove focus outline */
}
.form-range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, #7b42f6, #b01eff);
  border-radius: 2px;
}
.form-range::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;          /* center thumb on track */
  background: #b01eff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.form-range::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, #7b42f6, #b01eff);
  border-radius: 2px;
}
.form-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #b01eff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.form-range::-ms-track {
  height: 4px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.form-range::-ms-fill-lower {
  background: linear-gradient(90deg, #7b42f6, #b01eff);
  border-radius: 2px;
}
.form-range::-ms-fill-upper {
  background: #ddd;
  border-radius: 2px;
}
.form-range::-ms-thumb {
  width: 12px;
  height: 12px;
  background: #b01eff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0; /* IE edge alignment */
}


/* Reduce card body padding and waveform wrapper margins by 30% */
.card-body {
  padding: 0.875rem !important; /* default ~1.25rem -> 0.875rem (30% smaller) */
}
.waveform-wrapper {
  margin-bottom: 0.7rem !important; /* reduce vertical spacing */
}

/* Loader animation styles */
.results-container .loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
}
.results-container .dots {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.results-container .dots span {
  width: 12px;
  height: 12px;
  background-color: var(--primary-purple, var(--bs-primary, #6f42c1)) !important;
  border-radius: 50%;
  opacity: 0;
  animation: wave 1s infinite;
}
.results-container .dots span:nth-child(1) { animation-delay: 0s; }
.results-container .dots span:nth-child(2) { animation-delay: 0.2s; }
.results-container .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 60%, 100% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-8px); }
}