/*
 * 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;
  --prophet5-panel-open-height: var(--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));
  height: min(
    var(--prophet5-panel-open-height, var(--user-instrument-panel-open-height, 280px)),
    calc(100vh - var(--transport-topbar-height, 60px) - var(--transport-progress-height, 45px) - var(--statusbar-height, 28px))
  );
  border-bottom-width: 1px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease;
}

.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(--prophet5-panel-open-height, 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;
}

.prophet5-panel__surface > .parameters-panel--faceplate {
  width: 2710px;
  height: 838px;
  max-width: none;
}

/* ───── Prophet-5 hardware faceplate ──────────────────────────────────── */
.prophet5-panel__surface .p5-faceplate {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% -30%, rgba(255, 255, 255, 0.11), transparent 30%),
    linear-gradient(180deg, #252625 0, #111 62px, #090909 692px, #070707 693px, #111 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -22px 42px rgba(0, 0, 0, 0.88),
    0 24px 70px rgba(0, 0, 0, 0.42);
}

.prophet5-panel__surface .p5-faceplate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 5px 7px, 9px 5px;
  mix-blend-mode: screen;
}

.prophet5-panel__surface .p5-section {
  position: absolute;
  border: 4px solid rgba(238, 246, 246, 0.96);
  border-radius: 18px;
  background: transparent;
  padding: 0;
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.prophet5-panel__surface .p5-section-title {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 10px;
  border: 0;
  background: #101111;
  color: rgba(246, 249, 247, 0.96);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.prophet5-panel__surface .p5-logo {
  position: absolute;
  left: 2050px;
  top: 126px;
  color: #f7f8f2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 108px;
  line-height: 1;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -7px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.45);
}

.prophet5-panel__surface .p5-control {
  position: absolute;
  width: 92px;
  height: 122px;
  align-items: center;
  gap: 0;
  text-align: center;
}

.prophet5-panel__surface .p5-control--toggle,
.prophet5-panel__surface .p5-control--display-button {
  width: 66px;
  height: 88px;
}

.prophet5-panel__surface .p5-knob-scale span {
  position: absolute;
  left: 46px;
  top: 52px;
  color: rgba(246, 249, 247, 0.96);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  transform:
    rotate(var(--p5-tick-rotation))
    translateY(-46px)
    rotate(calc(var(--p5-tick-rotation) * -1))
    translate(-50%, -50%);
}

.prophet5-panel__surface .p5-control--large .p5-knob-scale span {
  left: 46px;
  top: 50px;
  transform:
    rotate(var(--p5-tick-rotation))
    translateY(-55px)
    rotate(calc(var(--p5-tick-rotation) * -1))
    translate(-50%, -50%);
}

.prophet5-panel__surface .p5-knob {
  position: absolute;
  left: 18px;
  top: 23px;
  width: 56px;
  height: 56px;
  border: 4px solid #e5ece9;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #686968, #272827 34%, #111 68%, #050505);
  box-shadow:
    inset -8px -9px 12px rgba(0, 0, 0, 0.76),
    inset 3px 3px 5px rgba(255, 255, 255, 0.18),
    0 4px 9px rgba(0, 0, 0, 0.72);
  transition: none;
}

.prophet5-panel__surface .p5-knob:hover {
  border-color: #f4f8f5;
  transform: none;
}

.prophet5-panel__surface .p5-knob::before {
  top: 4px;
  left: 50%;
  width: 4px;
  height: 25px;
  border-radius: 2px;
  background: #f8fbf8;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
  transform-origin: 50% 24px;
  transition: transform 0.1s ease;
}

.prophet5-panel__surface .p5-knob--large {
  left: 8px;
  top: 10px;
  width: 76px;
  height: 76px;
  background: radial-gradient(circle at 42% 28%, #fbfaf4 0 16%, #dedbd1 26%, #5c5b58 43%, #111 100%);
}

.prophet5-panel__surface .p5-knob--large::before {
  height: 34px;
  background: #151515;
  transform-origin: 50% 33px;
}

.prophet5-panel__surface .p5-toggle {
  position: absolute;
  left: 16px;
  top: 23px;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(70, 8, 10, 0.92);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.24) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.18) 47% 53%, transparent 54%),
    radial-gradient(circle at 45% 36%, #ff8586 0, #ff3037 42%, #821016 100%);
  box-shadow:
    0 0 16px rgba(255, 48, 55, 0.84),
    inset 0 0 8px rgba(255, 255, 255, 0.38);
  transition: none;
}

.prophet5-panel__surface .p5-toggle:hover {
  border-color: rgba(120, 20, 22, 0.95);
  transform: none;
}

.prophet5-panel__surface .p5-toggle::before {
  display: none;
}

.prophet5-panel__surface .p5-toggle.on {
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.3) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.22) 47% 53%, transparent 54%),
    radial-gradient(circle at 45% 36%, #ffc2c2 0, #ff4b50 42%, #a81219 100%);
  border-color: rgba(110, 20, 22, 0.95);
  box-shadow:
    0 0 22px rgba(255, 68, 74, 0.95),
    inset 0 0 9px rgba(255, 255, 255, 0.46);
}

.prophet5-panel__surface .p5-toggle--dark {
  left: 14px;
  top: 19px;
  width: 38px;
  height: 46px;
  border-color: #161616;
  border-radius: 4px;
  background: linear-gradient(180deg, #444, #161616);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.16),
    0 4px 8px rgba(0, 0, 0, 0.72);
}

.prophet5-panel__surface .p5-toggle--dark.on {
  background: linear-gradient(180deg, #575757, #1e1e1e);
  border-color: #252525;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    0 0 10px rgba(255, 255, 255, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.72);
}

.prophet5-panel__surface .p5-control-label {
  position: absolute;
  left: -16px;
  right: -16px;
  top: 99px;
  max-width: none;
  color: rgba(246, 249, 247, 0.96);
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

.prophet5-panel__surface .p5-control--toggle .p5-control-label,
.prophet5-panel__surface .p5-control--display-button .p5-control-label {
  top: 73px;
  left: -24px;
  right: -24px;
  font-size: 11px;
}

.prophet5-panel__surface .p5-control-value {
  position: absolute;
  left: 50%;
  top: 117px;
  min-height: 0;
  transform: translateX(-50%);
  color: transparent;
  font-size: 0;
  pointer-events: none;
}

.prophet5-panel__surface .p5-faceplate > .p5-control .p5-control-value,
.prophet5-panel__surface .p5-section .p5-control-value {
  color: transparent !important;
  font-size: 0 !important;
}

.prophet5-panel__surface .p5-control--toggle .p5-control-value {
  top: 90px;
}

.prophet5-panel__surface .p5-caption {
  position: absolute;
  color: rgba(246, 249, 247, 0.96);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prophet5-panel__surface .p5-caption--small {
  font-size: 10px;
}

.prophet5-panel__surface .p5-rule {
  position: absolute;
  height: 3px;
  background: rgba(238, 246, 246, 0.96);
}

.prophet5-panel__surface .p5-led {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdf72 0 24%, #ff9d24 50%, rgba(255, 157, 36, 0) 78%);
  box-shadow: 0 0 12px rgba(255, 157, 36, 0.95);
}

.prophet5-panel__surface .p5-secondary-rack {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 686px;
  height: 126px;
  display: grid;
  grid-template-columns: 270px 270px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 0;
  overflow: hidden;
}

.prophet5-panel__surface .p5-secondary-rack .prophet-section {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 8px 12px 7px;
  border: 2px solid rgba(238, 246, 246, 0.72);
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% -20%, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(35, 36, 35, 0.92), rgba(12, 12, 12, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 18px rgba(0, 0, 0, 0.55);
}

.prophet5-panel__surface .p5-secondary-rack .prophet-section h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 7px;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(238, 246, 246, 0.34);
  color: rgba(246, 249, 247, 0.96);
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.prophet5-panel__surface .p5-rack-grid,
.prophet5-panel__surface .p5-effects-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.prophet5-panel__surface .p5-effects-panel {
  display: grid;
  grid-template-columns: 370px 150px minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.prophet5-panel__surface .p5-fx-group {
  min-width: 0;
  padding: 0 8px;
  border-left: 1px solid rgba(238, 246, 246, 0.18);
}

.prophet5-panel__surface .p5-fx-group:first-child {
  border-left: 0;
}

.prophet5-panel__surface .p5-fx-group h4 {
  margin: 0 0 4px;
  color: rgba(246, 249, 247, 0.9);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.prophet5-panel__surface .p5-secondary-rack .control-container {
  width: 58px;
  min-width: 0;
  gap: 3px;
}

.prophet5-panel__surface .p5-secondary-rack .compact-knob,
.prophet5-panel__surface .p5-secondary-rack .knob,
.prophet5-panel__surface .p5-secondary-rack .p5-fx-knob {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border-width: 2px;
  background: radial-gradient(circle at 34% 28%, #626362, #242524 38%, #0b0b0b 100%);
}

.prophet5-panel__surface .p5-secondary-rack .compact-knob::before,
.prophet5-panel__surface .p5-secondary-rack .knob::before,
.prophet5-panel__surface .p5-secondary-rack .p5-fx-knob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: #f8fbf8;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
  transform-origin: 50% 17px;
}

.prophet5-panel__surface .p5-secondary-rack .p5-fx-knob {
  cursor: ns-resize;
}

.prophet5-panel__surface .p5-secondary-rack .p5-fx-knob:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 2px;
}

.prophet5-panel__surface .p5-secondary-rack .compact-toggle,
.prophet5-panel__surface .p5-secondary-rack .toggle {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(70, 8, 10, 0.92);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.18) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.12) 47% 53%, transparent 54%),
    radial-gradient(circle at 45% 36%, #ff6e70 0, #d92a31 44%, #6e0e13 100%);
  box-shadow: 0 0 9px rgba(255, 48, 55, 0.52), inset 0 0 6px rgba(255, 255, 255, 0.22);
}

.prophet5-panel__surface .p5-secondary-rack .compact-toggle::before,
.prophet5-panel__surface .p5-secondary-rack .toggle::before {
  display: none;
}

.prophet5-panel__surface .p5-secondary-rack .compact-toggle.on,
.prophet5-panel__surface .p5-secondary-rack .toggle.on {
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.24) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.18) 47% 53%, transparent 54%),
    radial-gradient(circle at 45% 36%, #ff9a9b 0, #f34046 44%, #981217 100%);
  box-shadow: 0 0 14px rgba(255, 65, 70, 0.78), inset 0 0 7px rgba(255, 255, 255, 0.32);
}

.prophet5-panel__surface .p5-secondary-rack .control-label {
  max-width: 70px;
  color: rgba(246, 249, 247, 0.9);
  font-size: 10.5px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.prophet5-panel__surface .p5-secondary-rack .control-value {
  min-height: 10px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9.5px;
  line-height: 1;
}

.prophet5-panel__surface .p5-secondary-rack .delay-grid,
.prophet5-panel__surface .p5-secondary-rack .filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 5px 10px;
}

.prophet5-panel__surface .p5-secondary-rack .lfo-switches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.prophet5-panel__surface .p5-secondary-rack .chorus-btn {
  min-width: 42px;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 10.5px;
}

.prophet5-panel__surface .p5-secondary-rack .control-container input[type="range"] {
  width: 58px;
  height: 7px;
}

.prophet5-panel__surface .p5-secondary-rack .control-container select {
  max-width: 70px;
  height: 20px;
  font-size: 9.5px;
  padding: 1px 3px;
}

@media (max-width: 700px) {
  .prophet5-panel {
    overflow: hidden;
  }

  .prophet5-panel__surface {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .prophet5-panel__surface > .parameters-panel--faceplate {
    width: calc(100vw - 24px);
    height: auto;
    min-height: 0;
  }

  .prophet5-panel__surface .p5-faceplate {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    padding: 14px 10px 12px;
    background:
      radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.1), transparent 32%),
      linear-gradient(180deg, #242524 0, #0b0b0b 100%);
  }

  .prophet5-panel__surface .p5-faceplate::before {
    opacity: 0.1;
  }

  .prophet5-panel__surface .p5-logo {
    position: static;
    order: -1;
    margin: 0 0 6px;
    font-size: 50px;
    letter-spacing: -4px;
    text-align: center;
  }

  .prophet5-panel__surface .p5-section,
  .prophet5-panel__surface .p5-secondary-rack,
  .prophet5-panel__surface .p5-control,
  .prophet5-panel__surface .p5-caption,
  .prophet5-panel__surface .p5-rule,
  .prophet5-panel__surface .p5-led {
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .prophet5-panel__surface .p5-section {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px 8px;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    padding: 30px 12px 12px;
    border-width: 2px;
    border-radius: 10px;
  }

  .prophet5-panel__surface .p5-section-title {
    top: 8px;
    font-size: 13px;
    background: #0d0d0d;
  }

  .prophet5-panel__surface .p5-control {
    position: relative;
    width: 78px;
    height: 104px;
    flex: 0 0 78px;
  }

  .prophet5-panel__surface .p5-control--toggle,
  .prophet5-panel__surface .p5-control--display-button {
    width: 66px;
    height: 86px;
    flex-basis: 66px;
  }

  .prophet5-panel__surface .p5-control--large {
    width: 88px;
    flex-basis: 88px;
  }

  .prophet5-panel__surface .p5-faceplate > .p5-control--vintage {
    align-self: center;
    flex: 0 0 78px;
    margin-top: -4px;
  }

  .prophet5-panel__surface .p5-caption,
  .prophet5-panel__surface .p5-rule,
  .prophet5-panel__surface .p5-led {
    display: none;
  }

  .prophet5-panel__surface .p5-control-label:empty::before {
    content: attr(data-mobile-label);
  }

  .prophet5-panel__surface .p5-control-label {
    left: -8px;
    right: -8px;
    font-size: 10px;
    line-height: 1;
  }

  .prophet5-panel__surface .p5-control--toggle .p5-control-label,
  .prophet5-panel__surface .p5-control--display-button .p5-control-label {
    left: -8px;
    right: -8px;
    font-size: 10px;
  }

  .prophet5-panel__surface .p5-control-value {
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    line-height: 1;
  }

  .prophet5-panel__surface .p5-control--toggle .p5-control-value {
    top: 86px;
  }

  .prophet5-panel__surface .p5-secondary-rack {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    gap: 10px;
    overflow: visible;
  }

  .prophet5-panel__surface .p5-secondary-rack .prophet-section {
    height: auto;
    min-height: 130px;
  }

  .prophet5-panel__surface .p5-secondary-rack .p5-rack-module--effects {
    grid-column: 1 / -1;
  }

  .prophet5-panel__surface .p5-effects-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
  }

  .prophet5-panel__surface .p5-effects-panel .prophet-section,
  .prophet5-panel__surface .p5-effects-panel .prophet-section[data-fx="chorus"],
  .prophet5-panel__surface .p5-effects-panel .prophet-section[data-fx="delay"] {
    flex: none;
  }

  .prophet5-panel__surface .p5-secondary-rack .control-container {
    width: 62px;
  }
}

/* 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:not(.parameters-panel--faceplate) {
  /* 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 .parameters-panel:not(.parameters-panel--faceplate) .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;
  }
}