/**
 * ⚗️ THE LAB - Alchemist's Workshop
 * Transformation, experimentation, creation magic
 * 
 * Architectural Metaphor: Medieval Alchemist Lab / Wizard's Workshop / Forge
 * - Bubbling potions, glowing runes
 * - Electric energy, transmutation
 * - Where raw samples become gold
 */

/* ==================== ALCHEMY VARIABLES ==================== */
:root {
  /* Fibonacci Spacing (shared) */
  --fib-1: 8px;
  --fib-2: 13px;
  --fib-3: 21px;
  --fib-4: 34px;
  --fib-5: 55px;
  --fib-6: 89px;
  
  /* Lab Palette - Purple depths with electric accents */
  --lab-void: #0d0a15;
  --lab-deep: #1a1528;
  --lab-surface: #251d38;
  --lab-elevated: #302848;
  
  /* Electric/Energy colors */
  --electric-cyan: #00f0ff;
  --electric-glow: rgba(0, 240, 255, 0.2);
  --alchemical-green: #39ff14;
  --alchemical-glow: rgba(57, 255, 20, 0.2);
  
  /* Process/Active colors */
  --process-pink: #ff006e;
  --process-glow: rgba(255, 0, 110, 0.2);
  
  /* Rune gold */
  --rune-gold: #ffd700;
  --rune-glow: rgba(255, 215, 0, 0.2);
  
  /* Text */
  --lab-text: #e8e0f0;
  --lab-text-muted: #8878a8;
}

/* ==================== ENTERING THE WORKSHOP ==================== */
/* Jobs audit: All ambient animations removed. Keeping simple fade only. */
@keyframes lab-materialize {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* electric-pulse, bubbling, rune-glow, process-active - REMOVED (decorative) */

/* ==================== LAB ZONE BASE ==================== */
.zone-lab {
  --zone-bg: var(--lab-void);
  --zone-accent: var(--electric-cyan);
}

.zone-lab .dig-space,
.zone-lab #lab-zone {
  background: var(--lab-void);
  animation: lab-materialize 0.15s ease-out;
}

/* Electric ambient and rune decorations - REMOVED (Jobs audit: decorative) */

/* ==================== WORKBENCH AREA ==================== */
.zone-lab .lab-container,
.zone-lab .lab-workspace {
  background: var(--lab-surface);
  border: 1px solid var(--lab-elevated);
  border-radius: var(--fib-2);
  position: relative;
}

/* Glowing edge - REMOVED (Jobs audit: decorative) */

/* ==================== PROCESS PANELS ==================== */
.zone-lab .lab-panel,
.zone-lab .lab-section {
  background: var(--lab-deep);
  border: 1px solid var(--lab-elevated);
  border-radius: var(--fib-2);
  transition: all 0.3s ease;
}

.zone-lab .lab-panel:hover {
  border-color: var(--electric-cyan);
  box-shadow: 0 0 20px var(--electric-glow);
}

/* Active processing state - simplified (Jobs audit: removed pulsing) */
.zone-lab .lab-panel.processing,
.zone-lab .lab-section.active {
  border-color: var(--process-pink);
  box-shadow: 0 0 20px var(--process-glow);
}

/* ==================== BUTTONS - ALCHEMICAL TRIGGERS ==================== */
.zone-lab button,
.zone-lab .lab-btn {
  background: var(--lab-surface);
  border: 1px solid var(--electric-cyan);
  color: var(--electric-cyan);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.zone-lab button:hover,
.zone-lab .lab-btn:hover {
  background: var(--electric-cyan);
  color: var(--lab-void);
  box-shadow: 0 0 20px var(--electric-glow);
}

/* Primary action buttons */
.zone-lab .lab-btn-primary,
.zone-lab button.primary {
  background: linear-gradient(135deg, var(--electric-cyan), var(--alchemical-green));
  border: none;
  color: var(--lab-void);
  font-weight: 700;
}

.zone-lab .lab-btn-primary:hover {
  box-shadow: 0 0 30px var(--electric-glow), 0 0 60px var(--alchemical-glow);
  transform: scale(1.02);
}

/* ==================== WAVEFORM DISPLAY ==================== */
.zone-lab .waveform-container,
.zone-lab .lab-waveform {
  background: var(--lab-void);
  border: 1px solid var(--lab-elevated);
  border-radius: var(--fib-1);
  position: relative;
  overflow: hidden;
}

/* Scan line effect - REMOVED (Jobs audit: decorative, WaveSurfer has its own) */

/* ==================== STEM TRACKS ==================== */
.zone-lab .stem-track,
.zone-lab .lab-track {
  background: var(--lab-deep);
  border: 1px solid transparent;
  border-radius: var(--fib-1);
  transition: all 0.2s ease;
}

.zone-lab .stem-track:hover,
.zone-lab .lab-track:hover {
  border-color: var(--electric-cyan);
  background: var(--lab-surface);
}

/* Stem type colors */
.zone-lab .stem-track[data-type="vocals"] { --stem-color: var(--process-pink); }
.zone-lab .stem-track[data-type="drums"] { --stem-color: var(--rune-gold); }
.zone-lab .stem-track[data-type="bass"] { --stem-color: var(--alchemical-green); }
.zone-lab .stem-track[data-type="other"] { --stem-color: var(--electric-cyan); }

.zone-lab .stem-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--stem-color, var(--electric-cyan));
  border-radius: var(--fib-1) 0 0 var(--fib-1);
}

/* ==================== PROGRESS INDICATORS ==================== */
.zone-lab .progress-bar {
  background: var(--lab-void);
  border-radius: 10px;
  overflow: hidden;
}

.zone-lab .progress-fill {
  background: linear-gradient(90deg, var(--electric-cyan), var(--alchemical-green));
  box-shadow: 0 0 10px var(--electric-glow);
  transition: width 0.3s ease;
}

/* ==================== EFFECT CONTROLS ==================== */
.zone-lab .effect-knob,
.zone-lab .lab-slider {
  accent-color: var(--electric-cyan);
}

.zone-lab .effect-label {
  color: var(--lab-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==================== ZONE TITLE ==================== */
.zone-lab .float-zone-title {
  color: var(--electric-cyan);
  text-shadow: 0 0 10px var(--electric-glow);
}

/* ==================== TOOLTIPS ==================== */
.zone-lab [data-tooltip]::after {
  background: var(--lab-surface);
  border: 1px solid var(--electric-cyan);
  color: var(--lab-text);
}

/* ==================== BYTE MASCOT ==================== */
.zone-lab .byte-mascot {
  filter: drop-shadow(0 0 10px var(--electric-glow));
}

.zone-lab .byte-speech {
  background: var(--lab-surface);
  border: 1px solid var(--electric-cyan);
  color: var(--electric-cyan);
}

/* ==================== LOADING/PROCESSING STATE ==================== */
.zone-lab .loading-spinner {
  border-color: var(--lab-elevated);
  border-top-color: var(--electric-cyan);
}

.zone-lab .processing-text {
  color: var(--electric-cyan);
  animation: rune-glow 2s ease-in-out infinite;
}

/* ==================== SEARCH BAR ==================== */
.zone-lab .float-search input:focus {
  border-color: var(--electric-cyan);
  box-shadow: 0 0 15px var(--electric-glow);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .zone-lab .dig-space::before {
    opacity: 0.5;
  }
  
  .zone-lab .dig-space::after {
    display: none;
  }
}