/* Aurora Canvas Background Styles */
#aurora-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Glass Effects */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.card-border {
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: inset 0 0 30px rgba(79, 70, 229, 0.1),
              inset 0 0 60px rgba(59, 130, 246, 0.05),
              0 0 50px rgba(139, 92, 246, 0.2);
}

.gradient-border {
  position: relative;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, #4f46e5, #3b82f6, #8b5cf6, #f59e0b);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
}

/* Custom Range Slider */
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 9999px;
  background: #8b5cf6;
  cursor: pointer;
  border: none;
}

/* Loading Animation */
.loading-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Disabled State */
button:disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

button[aria-disabled="true"] {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 4px;
}

.tooltip:hover::after {
  opacity: 1;
}

/* Playback Indicator Glow Effect */
.shadow-glow {
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Status Line */
.status-line {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

/* Disabled Icons */
button:disabled i,
button[aria-disabled="true"] i {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* Prompt Input Styling */
.prompt-input {
  font-family: inherit;
  line-height: 1.4;
}

.prompt-input:focus {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* Modal Animations */
.modal-enter {
  opacity: 0;
  transform: scale(0.95);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.modal-exit {
  opacity: 1;
  transform: scale(1);
}

.modal-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* Text truncation utility */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modal backdrop blur enhancement */
.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* UI/UX Polish for Concurrent Generation */
.card.is-generating {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5), inset 0 0 30px rgba(79, 70, 229, 0.1),
              inset 0 0 60px rgba(59, 130, 246, 0.05),
              0 0 50px rgba(139, 92, 246, 0.2);
  animation: pulse-border 1.5s infinite alternate;
}

@keyframes pulse-border {
  from {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5), inset 0 0 30px rgba(79, 70, 229, 0.1),
                inset 0 0 60px rgba(59, 130, 246, 0.05),
                0 0 50px rgba(139, 92, 246, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.8), inset 0 0 30px rgba(79, 70, 229, 0.2),
                inset 0 0 60px rgba(59, 130, 246, 0.1),
                0 0 70px rgba(139, 92, 246, 0.4);
  }
}
/* Fix dropdown option visibility */
select option {
  color: #000;
  background-color: #fff;
}