/*
 * Prophet-5 slide-out edit panel.
 *
 * Two mount points:
 *   .prophet5-panel--top    → slides DOWN from under the top-bar progress strip,
 *                             edits the song-side Prophet-5 instance.
 *   .prophet5-panel--bottom → slides UP from above the piano-roll keyboard,
 *                             edits the user-side Prophet-5 instance.
 *
 * Both anchors overlay the waterfall (no reflow) so the frosted-glass backdrop
 * has live note streams to soften behind it — top and bottom share the same
 * visual treatment.
 *
 * Both share the same .prophet5-panel base and the same synth control surface
 * (built by buildProphet5ParametersUI). A subtle accent strip differentiates
 * "SONG" (top) from "YOU" (bottom) so a glance confirms which lane you're
 * editing.
 */

:root {
  /* Bottom-panel open height — JS computes the exact value based on the
   * content's natural size and the viewport, then writes it here so the
   * panel hugs the controls with no wasted space. The fallback (280px) is
   * only used briefly before _fitContent runs on first open. */
  --user-instrument-panel-open-height: 280px;
  /* Hard ceiling: don't let the panel grow taller than this share of the
   * space between the top progress strip and the piano-roll keyboard. JS
   * reads this when computing the final panel height. */
  --user-instrument-panel-max-share: 0.92;
  /* Scale applied to the parameter surface so the full control set fits the
   * available width without scrolling. JS recomputes this on open and on
   * window resize. */
  --prophet5-fit-scale: 1;
  --sampler-panel-fit-scale: 1;
}

.prophet5-panel {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 11; /* above piano-roll (10), below modals (2000) */
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-1, #e8e8ea);
  border-color: var(--border-2, rgba(255, 255, 255, 0.08));
  border-style: solid;
  border-width: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transition: transform 0.25s ease, opacity 0.2s ease;
  will-change: transform;
  max-height: calc(100vh - var(--transport-topbar-height, 60px) - var(--transport-progress-height, 45px) - var(--statusbar-height, 28px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ───── Top variant: slides DOWN from under the progress strip ───── */
.prophet5-panel--top {
  top: calc(var(--transport-topbar-height, 60px) + var(--transport-progress-height, 45px));
  border-bottom-width: 1px;
  transform: translateY(-100%);
  opacity: 0;
}

.prophet5-panel--top.prophet5-panel--open {
  transform: translateY(0);
  opacity: 1;
}

/* ───── Bottom variant: slides UP from above the piano-roll keyboard ─────
 * The panel overlays the bottom of the waterfall so its frosted-glass
 * backdrop has live notes to blur behind it — matching the top variant's
 * treatment. The waterfall keeps its full height; only the keyboard and
 * status bar remain uncovered.
 */
.prophet5-panel--bottom {
  bottom: calc(var(--statusbar-height, 28px) + var(--keyboard-height, 150px));
  border-top-width: 1px;
  border-bottom-width: 1px;
  /* Closed: zero height (collapses, no overlay). Open: var-driven height. */
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
  /* Suppress the broad drop-shadow on the bottom panel — it would cast over the
   * keyboard, which the user explicitly didn't want. */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.45);
}

.prophet5-panel--bottom.prophet5-panel--open {
  height: min(
    var(--user-instrument-panel-open-height, 540px),
    max(
      180px,
      calc(100vh - var(--transport-topbar-height, 60px) - var(--transport-progress-height, 45px) - var(--statusbar-height, 28px) - var(--keyboard-height, 150px))
    )
  );
  opacity: 1;
}

/* ───── Accent strip — labels which lane this panel edits ───── */
.prophet5-panel__accent {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  padding: 4px 0 3px;
  user-select: none;
  flex-shrink: 0;
}

.prophet5-panel__accent-label {
  /* Label stays centered; the reset pill sits absolutely on the right so it
   * doesn't shift the label off-axis. */
  display: inline-block;
}

.prophet5-panel__reset-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px 3px;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.prophet5-panel__reset-btn:hover,
.prophet5-panel__reset-btn:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.prophet5-panel__reset-btn:active {
  background: rgba(255, 255, 255, 0.24);
}

.prophet5-panel--song .prophet5-panel__accent {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0.18));
  color: #93c5fd;
  border-bottom: 1px solid rgba(96, 165, 250, 0.25);
}

.prophet5-panel--user .prophet5-panel__accent {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.18), rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.18));
  color: #fdba74;
  border-top: 1px solid rgba(251, 146, 60, 0.25);
}

.dx7-panel--song .prophet5-panel__accent {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.08), rgba(45, 212, 191, 0.18));
  color: #5eead4;
  border-bottom: 1px solid rgba(45, 212, 191, 0.28);
}

.dx7-panel--user .prophet5-panel__accent {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.18));
  color: #86efac;
  border-top: 1px solid rgba(52, 211, 153, 0.28);
}

/* Bottom-anchored panel puts its accent at the top edge for visual symmetry
 * with the top-anchored panel's bottom-edge accent. */
.prophet5-panel--bottom .prophet5-panel__accent {
  order: -1;
}

/* ───── Control surface — hosts buildProphet5ParametersUI's output ─────
 * No scrollbars — content is scaled (via transform) by JS so every knob and
 * toggle is visible regardless of viewport height.
 */
.prophet5-panel__surface {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 8px 12px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.prophet5-panel__surface > .parameters-panel {
  transform: scale(var(--prophet5-fit-scale, 1));
  transform-origin: top center;
}

/* Override the column-based layout from prophet5.css ONLY inside the in-app
 * panel. The standalone prophet5.html page keeps its 3-column shape because
 * it has plenty of vertical space; embedded inside ChordBuddy we want all
 * 10 sections to flow as siblings in a single flex-wrap row so the content
 * uses the panel's full width before adding height. display: contents makes
 * the wrapper divs (.modulation-column, .center-area, .right-area) disappear
 * from layout while leaving their children where they are. */
.prophet5-panel__surface .modulation-column,
.prophet5-panel__surface .center-area,
.prophet5-panel__surface .right-area {
  display: contents;
}

.prophet5-panel__surface .parameters-panel {
  /* Wrap sections into a rectangular block — Prophet-5 hardware-inspired:
   * modulation cluster, voice path, envelopes, global. The flex-wrap means
   * sections wrap as the viewport narrows, growing the natural content
   * height. Combined with the wide-short internal section overrides below
   * (which flip oscillator/mixer/wheel-mod from column to row), the natural
   * content shape matches the panel surface aspect — so the fit-scale stays
   * higher (~0.65+) and text stays legible. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--prophet5-area-gap);
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  max-width: none;
  width: 100%;
}

/* Sections size to their natural content; no flex-grow so widths stay
 * stable as rows wrap. */
.prophet5-panel__surface .prophet-section {
  flex: 0 0 auto;
}

/* ───── Wide-short section internals (in-app panel only) ─────────────────
 * The standalone prophet5.html page renders sections tall-narrow because
 * it has plenty of vertical space (a full standalone window). In the
 * embedded panel that wastes horizontal space and forces aggressive
 * fit-scale shrinkage. We flip the three column-stacked grids to row so
 * each section becomes wide-short, matching the panel aspect.
 *
 * Affected builder classes:
 *   .oscillator-grid — Osc A / Osc B knob stacks (the biggest culprit)
 *   .mixer-grid      — Osc-A / Osc-B / Noise level knobs
 *   .wheel-mod-grid  — mod source mix + switches
 *
 * The horizontal `*-switches` rows inside each section stay as-is — they
 * were already flex-row.
 */
.prophet5-panel__surface .oscillator-grid,
.prophet5-panel__surface .mixer-grid,
.prophet5-panel__surface .wheel-mod-grid {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───── Edit-toggle button in the host bars (StatusBar + TopbarSongControls) ───── */
.instrument-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border-2, rgba(255, 255, 255, 0.16));
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-2, rgba(255, 255, 255, 0.75));
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.instrument-edit-btn:hover {
  background: var(--surface-3, rgba(255, 255, 255, 0.08));
  color: var(--text-1, #fff);
  border-color: var(--border-1, rgba(255, 255, 255, 0.28));
}

.instrument-edit-btn[aria-expanded="true"] {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.4);
  color: #bfdbfe;
}

.instrument-edit-btn .instrument-edit-btn__glyph {
  display: block;
  width: 12px;
  height: 12px;
  background-image: radial-gradient(circle at 6px 6px, currentColor 1.4px, transparent 1.8px);
  background-size: 6px 6px;
  background-repeat: repeat;
  opacity: 0.85;
}

/* ───── In-app effects sections (Reverb / Chorus / Delay) ───────────────
 * The new buildProphet5EffectsUI emits .prophet-section[data-fx] blocks
 * with native <input type="range">, <select>, and .chorus-btn controls
 * inside .control-container. The standalone-drawer slider/select rules in
 * styles/prophet5.css are scoped to .prophet-fx-row and don't apply here,
 * so we provide panel-scoped equivalents that match the dense, dark
 * .compact-knob/.compact-toggle aesthetic of the synth sections.
 */

/* Wide-short row layout for the seven delay controls. Mirrors the
 * existing .oscillator-grid / .mixer-grid / .wheel-mod-grid flex-row
 * override block above. */
.prophet5-panel__surface .delay-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* Slim native range sliders that fit the .control-container shell. */
.prophet5-panel__surface .control-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.prophet5-panel__surface .control-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-1, #4ea1ff);
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.prophet5-panel__surface .control-container input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-1, #4ea1ff);
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* Clickable value chip — used by the delay TIME chip to flip between
 * milliseconds and tempo-synced divisions. Pointer cursor + dotted
 * underline tells users the chip is an affordance, not just readout. */
.prophet5-panel__surface .control-value-clickable {
  cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
}

.prophet5-panel__surface .control-value-clickable:hover {
  color: var(--accent-1, #4ea1ff);
}

.prophet5-panel__surface .control-value-clickable.is-sync {
  color: var(--accent-1, #4ea1ff);
}

/* Compact dark select to match adjacent slider density. */
.prophet5-panel__surface .control-container select {
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-1, #fff);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  font-size: 10px;
  padding: 2px 4px;
  height: 18px;
  cursor: pointer;
}

/* Chorus mode pills — small, dark, with active accent. */
.prophet5-panel__surface .chorus-btn {
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-2, rgba(255, 255, 255, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  min-width: 32px;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.prophet5-panel__surface .chorus-btn:hover {
  background: var(--surface-3, rgba(255, 255, 255, 0.08));
  color: var(--text-1, #fff);
  border-color: rgba(255, 255, 255, 0.28);
}

.prophet5-panel__surface .chorus-btn.active {
  background: var(--accent-1, #4ea1ff);
  color: #000;
  border-color: var(--accent-1, #4ea1ff);
}

/* ─── Sampler panel ────────────────────────────────────────────────────── */
/* Reuses prophet5-panel chrome (open/closed transitions, accent bar) and
   adds sampler-specific surfaces: waveform, browser, controls. Sized to
   stay compact — single visible row of controls, scrollable browser. */

.sampler-panel__accent {
  background: linear-gradient(180deg, rgba(74,163,255,0.18), rgba(74,163,255,0.06));
}

.sampler-panel {
  z-index: 1100;
}

.sampler-panel--bottom {
  max-height: calc(100vh - var(--transport-topbar-height, 60px) - var(--transport-progress-height, 45px) - var(--statusbar-height, 40px));
}

.sampler-panel__close-btn {
  margin-left: auto;
  font-size: 11px;
  background: transparent;
  color: var(--text-2, #cbd5e1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.sampler-panel__close-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

.sampler-panel__surface {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 10px 10px;
  height: auto;
  background: #0b0d12;
}

.sampler-panel__content {
  width: 100%;
  max-width: 1800px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: scale(var(--sampler-panel-fit-scale, 1));
  transform-origin: top center;
}

.sampler-panel__top,
.sampler-panel__main { width: 100%; }

.sampler-panel__top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 300px);
  gap: 8px;
  align-items: stretch;
}

.sampler-panel__waveform-wrap {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: #0b0d12;
  height: 64px;
  overflow: hidden;
}
.sampler-panel__waveform-wrap--drop-active {
  border-color: rgba(74,163,255,0.7);
  box-shadow: inset 0 0 0 2px rgba(74,163,255,0.35);
}
.sampler-panel__waveform {
  display: block;
  width: 100%;
  height: 100%;
}
.sampler-panel__waveform-hint {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(203,213,225,0.55);
  pointer-events: none;
}
.sampler-panel__waveform-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(74,163,255,0.35), transparent 60%);
  opacity: 0;
  transition: opacity 80ms linear;
}
.sampler-panel__waveform-flash--active { opacity: 1; transition: none; }

.sampler-panel__file-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: var(--text-2, #cbd5e1);
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(17,21,27,0.72);
}
.sampler-panel__file-input { color: var(--text-2, #cbd5e1); font-size: 11px; }
.sampler-panel__sample-name {
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-1, #fff);
}

.sampler-panel__main {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 8px;
}

.sampler-panel__browser {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(17,21,27,0.85);
  padding: 6px;
  max-height: 128px;
  overflow-y: auto;
}
.sampler-panel__browser-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(203,213,225,0.7);
  margin-bottom: 6px;
}
.sampler-panel__browser-group { margin-bottom: 8px; }
.sampler-panel__browser-heading {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(74,163,255,0.8);
  letter-spacing: 0.05em;
  margin: 4px 0 2px;
}
.sampler-panel__browser-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2, #cbd5e1);
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
}
.sampler-panel__browser-item:hover {
  background: rgba(74,163,255,0.12);
  border-color: rgba(74,163,255,0.3);
  color: #fff;
}

.sampler-panel__controls {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 8px;
  align-items: start;
}
.sampler-panel__control-group--sample {
  grid-column: 1;
  grid-row: 1;
}
.sampler-panel__control-group--amp-env {
  grid-column: 2;
  grid-row: 1;
}
.sampler-panel__control-group--filter {
  grid-column: 2;
  grid-row: 2;
}
.sampler-panel__control-group--pitch-env {
  grid-column: 1;
  grid-row: 2;
}
.sampler-panel__control-group {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 4px 6px 5px;
  background: rgba(17,21,27,0.55);
}
.sampler-panel__control-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(74,163,255,0.85);
  margin-bottom: 3px;
}
.sampler-panel__control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  align-items: flex-start;
}
.sampler-panel__control {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 clamp(76px, 4.8vw, 92px);
  max-width: 92px;
  min-width: 0;
  font-size: 10px;
  color: var(--text-2, #cbd5e1);
}
.sampler-panel__control-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px;
  color: rgba(203,213,225,0.65);
}
.sampler-panel__control-slider {
  width: 100%;
  height: 6px;
  accent-color: #4aa3ff;
}
.sampler-panel__control-value {
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1, #fff);
}
.sampler-panel__control-toggle { align-self: flex-start; }
.sampler-panel__control-select { width: 100%; font-size: 11px; }
.sampler-panel__control-readout {
  font-size: 11px;
  color: var(--text-1, #fff);
}

@media (max-width: 820px) {
  .sampler-panel__top,
  .sampler-panel__main {
    grid-template-columns: 1fr;
  }

  .sampler-panel__file-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .sampler-panel__sample-name {
    text-align: left;
  }

  .sampler-panel__controls {
    grid-template-columns: 1fr;
  }

  .sampler-panel__control-group {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-height: 520px) {
  .sampler-panel__content {
    gap: 4px;
  }

  .sampler-panel__top {
    grid-template-columns: 1fr;
  }

  .sampler-panel__waveform-wrap {
    display: none;
  }

  .sampler-panel__file-row {
    min-height: 26px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 4px 6px;
  }

  .sampler-panel__sample-name {
    text-align: left;
  }

  .sampler-panel__main {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 6px;
  }

  .sampler-panel__browser {
    max-height: 96px;
    padding: 4px;
  }

  .sampler-panel__browser-group {
    margin-bottom: 4px;
  }

  .sampler-panel__browser-item {
    padding: 2px 4px;
    font-size: 10px;
  }

  .sampler-panel__controls {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 4px 6px;
  }

  .sampler-panel__control-group {
    padding: 3px 5px 4px;
  }

  .sampler-panel__control-row {
    gap: 4px 5px;
  }

  .sampler-panel__control {
    flex-basis: clamp(74px, 4.6vw, 88px);
    max-width: 88px;
  }
}