/* ── DOCK ZONES ── */
.dock-zone {
  display: none;       /* JS shows via _refreshZone when populated */
  flex-shrink: 0;
  background: var(--bg);
  overflow: hidden;
}
.dock-left, .dock-right {
  flex-direction: column;
  width: 280px;
}
.dock-right { border-left:  1px solid var(--border); width: 340px; }

/* Right rail: visualizer pinned on top, a draggable splitter, then editors +
   song info below.  CSS `order` lays them out regardless of DOM order. */
#dockRight #panelWin-visualizer { order: 0; flex: 0 0 auto; height: 240px; min-height: 100px; }
.right-split-handle {
  order: 1; flex: 0 0 6px; height: 6px;
  cursor: ns-resize; background: var(--border);
  transition: background .15s;
}
.right-split-handle:hover, .right-split-handle.dragging { background: var(--accent2); }
.seq-right-rail {
  order: 2; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* Editors relocated into the rail fill its width and scroll independently. */
.seq-right-rail .eff-view-editor,
.seq-right-rail .seq-rule-panel,
.seq-right-rail .seq-chord-panel {
  width: 100% !important; flex: 1 1 auto; min-height: 0;
  border-left: none; overflow: auto;
}

/* ── EFFECT EDITOR as a movable panel (float / dock like the visualizer) ── */
/* Docked into a bare left/right column: fill the width, scroll internally. */
.dock-left  > .eff-view-editor,
.dock-right > .eff-view-editor {
  width: 100% !important; flex: 1 1 auto; min-height: 0;
  border-left: none; overflow: auto;
}
/* Docked into a top/bottom row: keep a sensible width, fill the row height. */
.dock-top    > .eff-view-editor,
.dock-bottom > .eff-view-editor {
  height: 100%; flex: 0 0 320px; min-height: 0; overflow: auto;
}
/* Floating: same chrome as a floating panel-win. */
.eff-view-editor.floating {
  position: absolute; flex: none;
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-float);
  pointer-events: auto; z-index: 50;
  border-radius: var(--r-md);
}
.eff-view-editor.floating .eff-ve-header { cursor: move; border-radius: var(--r-md) var(--r-md) 0 0; }
.eff-view-editor.floating .panel-win-resize { display: block; }

/* ── SONG-INFO RAIL as a movable window (holds song-info + every editor) ── */
.seq-rail-bar { flex: 0 0 auto; }              /* window bar pinned at the top */
/* When docked into a bare left/top/bottom zone, fill that zone. */
.dock-left   > .seq-right-rail,
.dock-top    > .seq-right-rail,
.dock-bottom > .seq-right-rail { order: 0; flex: 1 1 auto; min-height: 0; }
.dock-top    > .seq-right-rail,
.dock-bottom > .seq-right-rail { flex: 0 0 340px; height: 100%; }
/* Floating: same chrome as a floating panel-win. */
.seq-right-rail.floating {
  position: absolute; flex: none; order: 0;
  background: var(--bg);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-float);
  pointer-events: auto; z-index: 50;
  border-radius: var(--r-md);
}
.seq-right-rail.floating .seq-rail-bar { cursor: move; border-radius: var(--r-md) var(--r-md) 0 0; }
.seq-right-rail.floating .panel-win-resize { display: block; }
/* With the rail floated out of the right dock, let the visualizer fill it. */
#dockRight:not(:has(.seq-right-rail)) #panelWin-visualizer { flex: 1 1 auto; height: auto !important; }

.seq-info-panel {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 12px 14px; font-family: 'DM Mono', monospace;
}
.sip-title { font-size: 9px; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; }
.sip-hint  { font-size: 10px; line-height: 1.6; color: var(--text2); }
.sip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sip-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 6px 9px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.sip-stat span { font-size: 8px; letter-spacing: 1px; color: var(--label); text-transform: uppercase; }
.sip-stat b    { font-size: 12px; color: var(--fg); font-weight: 500; }
.sip-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sip-recs li {
  position: relative; padding: 4px 0 4px 15px;
  font-size: 10px; line-height: 1.5; color: var(--text2);
}
.sip-recs li::before { content: '▸'; position: absolute; left: 2px; color: var(--accent2); }

/* Wizard callout in the song-info panel */
.sip-wizard { margin-top: 14px; }
.sip-wizard.recommended {
  padding: 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(0,232,143,0.4);
  background: rgba(0,232,143,0.06);
}
.sip-wizard-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.sip-badge {
  font-size: 7px; letter-spacing: 2px; color: var(--bg);
  background: var(--accent2); padding: 2px 6px; border-radius: var(--r-pill);
}
.sip-wizard-title { font-size: 11px; color: var(--accent2); }
.sip-wizard-desc { font-size: 10px; line-height: 1.55; color: var(--text2); margin-bottom: 10px; }
.sip-wizard-note { font-size: 9px; color: var(--label); margin-top: 6px; text-align: center; }
.sip-wizard-btn {
  width: 100%; font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 2px; padding: 9px 10px;
  border: 1px solid var(--border2); border-radius: var(--r-sm);
  background: var(--surface2); color: var(--text); cursor: pointer;
  transition: all var(--trans);
}
.sip-wizard-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.sip-wizard-btn.primary {
  border-color: var(--accent2); color: var(--accent2);
  background: rgba(0,232,143,0.10);
}
.sip-wizard-btn.primary:hover { background: rgba(0,232,143,0.2); box-shadow: 0 0 12px rgba(0,232,143,0.25); }
.dock-left  { border-right: 1px solid var(--border); }
.dock-top, .dock-bottom {
  flex-direction: row;
  height: 200px;
}
.dock-top    { border-bottom: 1px solid var(--border); }
.dock-bottom { border-top:    1px solid var(--border); }

/* ── DOCK RESIZE HANDLES (between zone and timeline) ── */
.dock-resizer {
  display: none;       /* JS shows when adjacent zone is non-empty */
  flex-shrink: 0;
  background: transparent;
  transition: background .15s;
  z-index: 10;
}
.dock-resizer:hover,
.dock-resizer.dragging { background: var(--accent2); opacity: .5; border-radius: var(--r-pill); }
.dock-resizer-h { height: 5px; cursor: ns-resize; }
.dock-resizer-v { width:  5px; cursor: ew-resize; }

/* ── PANEL WINDOW ── */
.panel-win {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  flex: 1;
  min-width: 140px;
  min-height: 80px;
  border: 1px solid var(--border);
}
.panel-win.floating {
  position: absolute;
  flex: none;
  border-color: var(--border2);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  z-index: 50;
  border-radius: var(--r-md);
}
/* Docked panels: zone provides outer edge; panels share inner borders */
.dock-left   .panel-win,
.dock-right  .panel-win  { border: none; border-bottom: 1px solid var(--border); }
.dock-left   .panel-win:last-child,
.dock-right  .panel-win:last-child { border-bottom: none; }
.dock-top    .panel-win,
.dock-bottom .panel-win  { border: none; border-right: 1px solid var(--border); }
.dock-top    .panel-win:last-child,
.dock-bottom .panel-win:last-child { border-right: none; }

/* ── PANEL TITLE BAR ── */
.panel-win-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: default;
  flex-shrink: 0;
  user-select: none;
}
.panel-win.floating .panel-win-bar { cursor: move; border-radius: var(--r-md) var(--r-md) 0 0; }

.panel-win-title {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--label);
  text-transform: uppercase;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-win-hint {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--border2);
}
.panel-win-acts {
  display: flex;
  gap: 1px;
  align-items: center;
}

/* Full/Solo playback-mode toggle relocated into the visualizer panel bar.
   Compact so it fits the slim bar; keeps the vta-mode pill look. */
.viz-bar-mode { flex-shrink: 0; }
.viz-bar-mode .vta-mode-btn { height: 18px; min-width: 30px; padding: 2px 7px; font-size: 8px; }

/* ── PANEL ACTION MICRO-BUTTONS ── */
.pbtn {
  font-size: 9px;
  padding: 2px 4px;
  background: none;
  border: 1px solid transparent;
  color: var(--border2);
  cursor: pointer;
  line-height: 1;
  transition: var(--trans);
  font-family: inherit;
  border-radius: var(--r-xs);
}
.pbtn:hover             { color: var(--text);  border-color: var(--border); }
.pbtn.panel-close:hover { color: #ff4d00;      border-color: #ff4d0066; }

/* ── PANEL BODY ── */
.panel-win-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

/* ── RESIZE CORNER (floating only) ── */
.panel-win-resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  cursor: nwse-resize;
  z-index: 6;              /* above content + any scrollbar corner */
  display: none;
}
.panel-win.floating .panel-win-resize { display: block; }
/* Two visible grip lines so the handle is easy to find and aim at. */
.panel-win-resize::after {
  content: '';
  position: absolute;
  bottom: 3px; right: 3px;
  width: 9px; height: 9px;
  border-right:  2px solid var(--border2);
  border-bottom: 2px solid var(--border2);
  border-radius: 0 0 2px 0;
  transition: border-color .12s;
}
.panel-win-resize:hover::after { border-color: var(--accent2); }
/* Square the bottom-right corner on floating panels so the resize grip reaches
   the true corner — the rounded corner + overflow:hidden clipped it, leaving
   the spot users aim at unclickable. */
.panel-win.floating,
.eff-view-editor.floating,
.seq-right-rail.floating { border-bottom-right-radius: 0; }

/* ── DRAG-TO-DOCK ── */
/* Title bars are drag handles whether docked or floating (drag to move / dock
   / undock).  No more arrow / float buttons. */
.panel-win-bar, .seq-rail-bar { cursor: move; }
#panelDropZone {
  position: fixed; z-index: 200; pointer-events: none; display: none;
  background: rgba(0, 232, 143, 0.14);
  border: 2px dashed var(--accent2);
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(0, 232, 143, 0.15);
}
/* Right-dock reorder — swap the visualizer ↔ song-info rail stacking order. */
#dockRight.rail-first #panelWin-visualizer { order: 2; }
#dockRight.rail-first .right-split-handle  { order: 1; }
#dockRight.rail-first .seq-right-rail       { order: 0; }

/* ── FLOAT LAYER ── */
#panelFloatLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* pass-through to timeline unless over a panel-win */
  z-index: 100;
  overflow: hidden;
}

/* ── DOCK SPLITTERS (between panels in the same zone) ── */
.dock-splitter {
  background: transparent;
  flex-shrink: 0;
  transition: background .15s;
  z-index: 5;
}
/* left/right zones stack vertically → horizontal splitter bar */
.dock-splitter-v { height: 4px; cursor: ns-resize; }
/* top/bottom zones go side-by-side → vertical splitter bar   */
.dock-splitter-h { width:  4px; cursor: ew-resize; }
.dock-splitter:hover,
.dock-splitter.dragging { background: var(--accent2); opacity: .5; border-radius: var(--r-pill); }

/* ── VISUALIZER CANVAS INSIDE PANEL-WIN ── */
#seqPreviewWrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #050705;
  min-height: 0;
}
#seqPreviewWrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── EFFECTS BODY (now lives inside panel-win) ── */
.effects-panel-body {
  flex: 1;
  overflow-y: scroll;
  padding: 12px;
  min-height: 0;
}
.effects-panel-body::-webkit-scrollbar { width: 6px; }
.effects-panel-body::-webkit-scrollbar-track { background: transparent; }
.effects-panel-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-pill); }
.effects-panel-body::-webkit-scrollbar-thumb:hover { background: var(--label); }