/* ===================== Device panel (bottom) ===================== */
.device-panel { position: relative; display: flex; flex-direction: column; min-height: 0; flex: none; }
.device-panel.closed { height: auto; }
.device-resizer:hover, body.dv-resizing .device-resizer { background: color-mix(in srgb, var(--accent) 55%, transparent); }
body.dv-resizing, body.dv-resizing * { cursor: ns-resize !important; user-select: none; }

/* ---- header ---- */
.device-header { flex: none; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.device-panel.closed .device-header { border-bottom: 0; }
.dv-header-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; min-height: 34px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; }
.dv-header-row > * { flex: none; }
.dv-header-row > .spacer { flex: 1; }
.dv-collapse { width: 24px; height: 24px; }
.dv-swatch { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.dv-title { font-weight: 600; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.dv-hint { color: var(--text-3); font-size: 12px; }
.dv-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 10px; background: var(--bg-4); color: var(--text-2); border: 1px solid var(--line); }
.dv-preset-group { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 1px; }
.dv-preset-group .icon-btn { width: 22px; height: 24px; }
.dv-prev .icon, .dv-move-left .icon { transform: rotate(180deg); }
select.dv-preset { border: 0; background: transparent; max-width: 230px; height: 24px; font-weight: 500; }
select.dv-preset:focus { border: 0; outline: 1px solid var(--accent); }
.dv-mod { font-size: 10px; color: var(--warn); background: none; border: 0; cursor: pointer; padding: 0 2px; }
.dv-mod:hover { text-decoration: underline; }

/* ---- body / chain ---- */
.device-body { flex: 1; min-height: 0; display: flex; background: var(--bg); }
.device-chain { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 8px; }
.dv-arrow { flex: none; display: flex; align-items: center; color: var(--text-3); padding: 0 1px; opacity: .7; }
.dv-empty { margin: auto; max-width: 460px; text-align: center; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; }
.dv-empty h3 { margin: 0; color: var(--text); font-size: 15px; }
.dv-empty p { margin: 0; font-size: 12px; }

/* ---- card ---- */
.dv-card {
  flex: none; display: flex; flex-direction: column; min-height: 0; position: relative;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 4px 14px rgba(0,0,0,.18);
}
.dv-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--card-color, var(--line-2)); z-index: 1; }
.dv-instrument { --card-color: var(--accent); }
.dv-card-head {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 4px; min-height: 28px;
  background: var(--bg-3); border-bottom: 1px solid var(--line);
}
.dv-card-head .icon-btn { width: 22px; height: 22px; }
.dv-card-head .icon-btn:disabled { opacity: .25; pointer-events: none; }
.dv-card-title { font-weight: 600; font-size: 12px; white-space: nowrap; cursor: default; }
.dv-card-body { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.dv-card.collapsed { width: 32px; }
.dv-card.collapsed .dv-card-head { justify-content: center; padding: 3px 0; }
.dv-card.collapsed .dv-card-head > :not(.dv-card-collapse) { display: none; }
.dv-folded { flex: 1; writing-mode: vertical-rl; display: flex; align-items: center; padding: 10px 0; font-size: 11px; font-weight: 600; color: var(--text-2); cursor: pointer; letter-spacing: .04em; }
.dv-folded:hover { color: var(--text); background: var(--bg-3); }
.dv-card.bypassed .dv-card-body { opacity: .42; filter: grayscale(.85); }
.dv-card.bypassed .dv-card-title { color: var(--text-3); text-decoration: line-through; }
.dv-card.dragging { opacity: .5; }
.dv-card.drop-before { box-shadow: -3px 0 0 var(--accent); }
.dv-card.drop-after { box-shadow: 3px 0 0 var(--accent); }
.dv-card.flash { animation: dv-flash .9s ease-out; }
@keyframes dv-flash { 0% { box-shadow: 0 0 0 2px var(--accent-2); } 100% { box-shadow: 0 0 0 2px transparent; } }
.dv-fx .dv-card-head { cursor: grab; }
.dv-fx .dv-move-left, .dv-fx .dv-move-right { opacity: 0; transition: opacity .12s; }
.dv-fx .dv-card-head:hover .dv-move-left, .dv-fx .dv-card-head:hover .dv-move-right { opacity: 1; }
.dv-fx .dv-remove:hover { color: var(--bad); }
.dv-grip { color: var(--text-3); font-size: 9px; letter-spacing: -2px; padding: 0 3px 0 1px; cursor: grab; }
.dv-power {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text-3);
}
.dv-power.on { color: var(--good); border-color: color-mix(in srgb, var(--good) 70%, var(--line)); box-shadow: 0 0 6px color-mix(in srgb, var(--good) 40%, transparent); }
.dv-fx-preset { font-size: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; cursor: pointer; color: var(--text-2); height: 20px; }
.dv-fx-preset:hover { color: var(--text); border-color: var(--accent); }
.dv-gr { position: relative; width: 44px; height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; margin-left: 4px; }
.dv-gr-fill { position: absolute; right: 0; top: 0; bottom: 0; width: 0; background: var(--warn); opacity: .85; transition: width .06s; }
.dv-gr-val { position: absolute; inset: 0; font: 8px/10px var(--mono); text-align: center; color: var(--text); }
.dv-fx-desc { font-size: 10.5px; color: var(--text-3); margin: 0 2px 6px; max-width: 340px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dv-note { font-size: 11.5px; color: var(--text-2); margin: 2px 0 6px; max-width: 260px; white-space: normal; }

/* param panel layout inside cards: sections side by side, knobs wrap within a section */
.dv-params .param-panel { flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.dv-params .param-section { flex: none; background: var(--bg-3); }
.dv-params .param-row { max-width: 240px; }
.dv-params .param-section:not([open]) { min-width: 0; }
.dv-card .knob { width: 56px; }

/* ---- synth visuals ---- */
.dv-viz { display: flex; gap: 6px; margin-bottom: 6px; }
.dv-viz-item { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px 5px; }
.dv-viz-item > span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.dv-viz-canvas { width: 150px; height: 50px; display: block; }

/* ---- organ drawbars ---- */
.dv-drawbars { display: flex; gap: 5px; width: max-content; margin-bottom: 6px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.dv-db { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 22px; }
.dv-db-label { font-size: 9px; color: var(--text-3); white-space: nowrap; }
.dv-db-slot { position: relative; width: 14px; height: 86px; border-radius: 3px; background: #0b0c10; box-shadow: inset 0 0 0 1px var(--line-2); cursor: ns-resize; overflow: hidden; touch-action: none; }
.dv-db-fill { position: absolute; left: 1px; right: 1px; top: 0; border-radius: 0 0 3px 3px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.6); background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(0,0,0,.25) 9px 10px) !important; background-blend-mode: multiply; }
.dv-db-val { font: 10px var(--mono); color: var(--text-2); }

/* ---- drums ---- */
.dv-drums { display: flex; gap: 10px; margin-bottom: 6px; align-items: flex-start; }
.dv-pads { display: grid; grid-template-columns: repeat(4, 64px); grid-auto-rows: 40px; gap: 4px; flex: none; }
.dv-pad {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left;
  padding: 4px 6px; border-radius: 5px; cursor: pointer; overflow: hidden; color: var(--text);
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  transition: background .08s, transform .05s;
}
.dv-pad:hover { border-color: color-mix(in srgb, var(--card-color, var(--accent)) 60%, var(--line-2)); }
.dv-pad.selected { border-color: var(--card-color, var(--accent)); box-shadow: inset 0 0 0 1px var(--card-color, var(--accent)); }
.dv-pad.hit { background: color-mix(in srgb, var(--card-color, var(--accent)) 50%, var(--bg-3)); transform: scale(.97); }
.dv-pad.muted-pad { opacity: .4; }
.dv-pad.drop { outline: 2px dashed var(--accent-2); outline-offset: -2px; }
.dv-pad-name { font-size: 10.5px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-pad-sub { font: 9px var(--mono); color: var(--text-3); }
.dv-pad-flag { position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; }
.dv-pad.edited .dv-pad-flag { background: var(--warn); }
.dv-pad.has-sample .dv-pad-flag { background: var(--accent-2); box-shadow: 0 0 4px var(--accent-2); }
.dv-pad-editor { display: flex; flex-direction: column; gap: 4px; min-width: 260px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.dv-pad-ed-head { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.dv-pad-ed-head .toggle { height: 20px; }
.dv-pad-ed-head .icon-btn { width: 22px; height: 22px; }
.dv-pad-knobs { display: flex; gap: 2px; flex-wrap: wrap; }
.dv-pad-sample-row { display: flex; align-items: center; gap: 4px; font-size: 11px; border-top: 1px solid var(--line); padding-top: 4px; }
.dv-pad-sample-row .icon-btn { width: 22px; height: 22px; }
.dv-pad-sample { color: var(--text-3); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-pad-sample.has { color: var(--accent-2); }

/* ---- sampler ---- */
.dv-sampler { width: 520px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.dv-sample-bar { display: flex; align-items: center; gap: 4px; }
.dv-sample-bar .icon-btn { width: 24px; height: 24px; }
.dv-sample-select { max-width: 220px; height: 24px; font-size: 12px; }
.dv-mini-label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.dv-slice-btn { height: 22px; padding: 0 6px; font-size: 11px; }
.dv-wave { position: relative; height: 92px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; overflow: hidden; }
.dv-wave.dragging { cursor: ew-resize; }
.dv-wave-canvas { width: 100%; height: 100%; display: block; }
.dv-drop { display: none; height: 92px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px dashed var(--line-2); border-radius: 6px; color: var(--text-2); font-size: 12px; }
.dv-sampler.empty .dv-wave { display: none; }
.dv-sampler.empty .dv-drop { display: flex; }
.dv-sampler.drop .dv-wave, .dv-sampler.drop .dv-drop { outline: 2px dashed var(--accent-2); outline-offset: -2px; }
.dv-sample-foot { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- info cards (code / audio / bus) ---- */
.dv-info .dv-card-body { width: 280px; display: flex; flex-direction: column; gap: 6px; }
.dv-code { margin: 0; font: 11px/1.4 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; max-height: 120px; overflow: auto; white-space: pre; color: var(--text-2); user-select: text; }
.dv-code-status { font-size: 11px; color: var(--good); }
.dv-code-status.err { color: var(--bad); }

/* ---- add effect ---- */
.dv-add-col { flex: none; width: 132px; display: flex; flex-direction: column; gap: 6px; }
.dv-add-fx {
  flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 1.5px dashed var(--line-2); border-radius: 8px; color: var(--text-3); cursor: pointer; font-size: 12px;
}
.dv-add-fx:hover, .dv-add-fx.drop { border-color: var(--accent); color: var(--text); background: var(--bg-2); }
.dv-quick { display: flex; flex-wrap: wrap; gap: 3px; }
.dv-quick-btn { font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; }
.dv-quick-btn:hover { border-color: var(--accent); color: var(--text); }

/* instrument card: custom editor on the left, generic params flowing to the right */
.dv-instrument > .dv-card-body { display: flex; align-items: flex-start; gap: 8px; }
.dv-instrument > .dv-card-body > .dv-params { flex: none; }
.dv-instrument .dv-viz { flex-direction: column; margin: 0; gap: 4px; }
.dv-instrument .dv-viz-canvas { width: 156px; height: 40px; }
.dv-instrument .dv-drums, .dv-instrument .dv-sampler, .dv-instrument .dv-drawbars { margin: 0; flex: none; }

/* folded param sections become slim vertical tabs */
.dv-params .param-section:not([open]) { width: 26px; min-width: 26px; padding: 0; display: flex; }
.dv-params .param-section:not([open]) > summary { writing-mode: vertical-rl; padding: 8px 5px; white-space: nowrap; flex: 1; }
.dv-params .param-section:not([open]) > summary::before { transform: rotate(90deg); }
.dv-params .param-section:not([open]):hover { border-color: var(--accent); }

/* narrow device panel: shortcut buttons collapse to icons so the header doesn't scroll them out of view */
.device-header { container-type: inline-size; }
@container (max-width: 820px) {
  .dv-header-row .btn.small > span:not(.icon) { display: none; }
  .dv-header-row .btn.small { padding-left: 6px; padding-right: 6px; }
  select.dv-preset { max-width: 160px; }
}