/*
  Pythia – Oracle Theme
  Drop-in replacement for your existing style.css
  Vibe: nocturne oracle, ember accents, glass panels, soft neon meters
*/

/* --- Fonts (fallback-safe) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;600&display=swap');

:root {
  /* Core palette */
  --bg-0: #0a0b12;          /* deep night */
  --bg-1: #111322;          /* card base */
  --bg-2: #171a2c;          /* raised */
  --line: #262a44;          /* borders */

  --accent: #e0aaff;        /* amethyst */
  --accent-2: #ffb86b;      /* ember */
  --accent-3: #8be9fd;      /* mist */

  --text: #ececf3;          /* primary text */
  --muted: #a7a8c3;         /* secondary text */

  /* Effects */
  --glow-strong: 0 0 24px rgba(224,170,255,0.35), 0 0 48px rgba(255,184,107,0.15);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --radius: 16px;
}

/* --- Global --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, #12142a 0%, var(--bg-0) 50%),
              radial-gradient(1000px 600px at 120% 30%, #1a0f27 0%, transparent 60%),
              radial-gradient(800px 700px at -10% 100%, #0c1b2b 0%, transparent 60%);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
}

/* Subtle floating particulate */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.08) 40%, transparent 41%),
              radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.06) 40%, transparent 41%),
              radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.05) 40%, transparent 41%);
  pointer-events: none; filter: blur(0.2px);
}

.container {
  width: min(960px, 92vw);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px) saturate(110%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  padding: clamp(20px, 3vw, 32px);
}

header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

h1 {
  margin: 0 0 6px 0;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: clamp(28px, 4.6vw, 48px);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(224,170,255,0.15));
  animation: shimmer 14s linear infinite;
  background-size: 200% 100%;
}

@keyframes shimmer { to { background-position: -200% 0; } }

header p {
  margin: 6px 0 0 0;
  color: var(--muted);
}

/* IO panel */
.io-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 22px);
  margin-bottom: 22px;
}

.input-group {
  background: linear-gradient(180deg, rgba(17,19,34,0.9), rgba(17,19,34,0.65));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  padding: 16px;
}

.input-group h3 { margin: 0 0 8px 0; font-weight: 600; }
.input-group p  { margin: 0 0 10px 0; color: var(--muted); font-size: 0.95rem; }

/* File input */
input[type="file"] {
  width: 100%;
  color: var(--muted);
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--text);
  padding: 8px 12px; margin-right: 12px;
  border-radius: 10px; cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); box-shadow: var(--glow-strong); }
input[type="file"]::file-selector-button:active { transform: translateY(1px); }

/* Option group */
.option-group { display: flex; gap: 10px; align-items: center; margin: 6px 0 12px; }
.option-group label { color: var(--muted); }

/* Mode Selector */
.mode-selector {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(17, 19, 34, 0.5);
    border-radius: 12px;
    border: 1px solid var(--line);
}
.radio-group { display: flex; align-items: center; gap: 8px; }
.radio-group label { cursor: pointer; color: var(--muted); }
input[type="radio"]:checked + label { color: var(--text); }


/* Controls */
.controls-panel { display: grid; gap: 16px; }

#play-button, #record-button {
  padding: 14px 16px;
  font-size: 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: filter .15s ease, transform .06s ease;
}

#play-button {
  color: #0b0b12;
  background: linear-gradient(180deg, var(--accent) 0%, #cf90ff 100%);
  box-shadow: var(--glow-strong);
}
#record-button {
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.playback-controls {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
}


#play-button:hover { filter: brightness(1.05); }
#play-button:active { transform: translateY(1px); }
#play-button:disabled, #record-button:disabled {
  background: linear-gradient(180deg, #3b2f48, #2a2337);
  color: #b9a7c7; box-shadow: none; cursor: not-allowed;
  filter: none;
}
#record-button.recording {
    background: linear-gradient(180deg, #ff8a8a, #e05c5c);
    color: #1f0b0b;
    box-shadow: 0 0 15px rgba(255,100,100,0.5);
}


.slider-group {
  display: grid; grid-template-columns: 180px 1fr 64px; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(23,26,44,0.85), rgba(23,26,44,0.55));
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  transition: opacity 0.3s ease;
}
.slider-group.hidden { display: none; }

.slider-group label { color: var(--muted); font-size: 0.95rem; }
.slider-group span  { text-align: right; font-variant-numeric: tabular-nums; }

/* Range styling */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: transparent; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(139,233,253,0.15), rgba(224,170,255,0.22));
}
input[type="range"]::-moz-range-track {
  height: 10px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(139,233,253,0.15), rgba(224,170,255,0.22));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -6px;
  border-radius: 50%; border: 1px solid #3a2e46;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f4e7ff 35%, #d8b8ff 36%, #b57cf5 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, var(--glow-strong);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #3a2e46;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f4e7ff 35%, #d8b8ff 36%, #b57cf5 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, var(--glow-strong);
}

/* Visualization meter */
.visualization, .recordings-container { margin-top: 18px; }
.visualization h3, .recordings-container h3 { margin: 0 0 10px; color: var(--muted); font-weight: 600; }
.meter-container {
  width: 100%; height: 18px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #121323, #0e0f1b);
  position: relative;
}
.meter-container::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,0.04) 16px 20px);
  pointer-events: none;
}
.meter-bar { height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3));
  box-shadow: var(--glow-strong);
  transition: width 0.06s linear;
}

/* Recordings list */
#recordings-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#recordings-list a {
    display: block;
    padding: 10px;
    background: rgba(17,19,34,0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--accent-3);
    transition: background .2s ease;
}
#recordings-list a:hover { background: var(--bg-2); }


/* Lookahead group state cues */
#lookahead-group[style*='opacity: 0.5'] { filter: grayscale(0.2) saturate(0.8); }
#source-input-group[style*='opacity: 0.5'] { filter: grayscale(0.2) saturate(0.8); }

/* Responsive */
@media (max-width: 760px) {
  .io-panel { grid-template-columns: 1fr; }
  .slider-group { grid-template-columns: 1fr; gap: 10px; }
  .slider-group span { text-align: left; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
  .meter-bar { transition: width 0.1s linear; }
}