/* ════════════════════════════════════════════════════════════════
   EHDARKMUSE — MOCKUP REDESIGN OVERLAY
   ════════════════════════════════════════════════════════════════
   Visual polish to match the v9 sequencer mockup.
   - Loaded LAST so it overrides earlier !important rules.
   - Pure visual / DOM-positional changes. No new JS behavior here.
   - The right context panel is preserved (we do NOT replace it
     with an AI Assistant column).
   ════════════════════════════════════════════════════════════════ */

/* ── 1. LOGO REBRAND : EHDarkMuse ──────────────────────────────── */
.ls-logo-text {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 19px !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
  color: #f0eadc !important;
  white-space: nowrap !important;
}
.ls-logo-text > span {
  color: #e8b84b !important;
}
.ls-tag {
  display: block !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 8.5px !important;
  letter-spacing: 1.8px !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* ── 2. ADVANCED MODE — toggle slider visual ───────────────────── */
.mode-switcher {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.mode-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
  position: relative !important;
}
.mode-label::after {
  /* Yellow ON toggle pill (visual only — does not break the existing dropdown) */
  content: "";
  display: inline-block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8b84b, #b88a2d);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4),
              0 0 6px rgba(232,184,75,.4);
  flex-shrink: 0;
  margin-left: 10px;
}
.mode-label .mode-arrow {
  display: none !important; /* arrow hidden — replaced by slider visual */
}
.mode-label::before {
  /* The knob of the toggle */
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff8e5;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ── 3. SECTION COLUMN HEADERS — clean compact look ────────────── */
/* Hide drag handle + dropdown caret by default, show on hover.
   Lets the section name + duration take the full width. */
.sec-col-hdr {
  justify-content: center !important;
  position: relative !important;
}
.sec-col-hdr .sec-drag-handle {
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  cursor: grab !important;
}
.sec-col-hdr .sec-col-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  background: none !important;
  border: none !important;
  color: var(--text3) !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
}
.sec-col-hdr:hover .sec-drag-handle,
.sec-col-hdr:hover .sec-col-btn {
  opacity: .7 !important;
}
.sec-col-hdr:hover .sec-drag-handle:hover,
.sec-col-hdr:hover .sec-col-btn:hover {
  opacity: 1 !important;
  color: var(--gold2, #e8b84b) !important;
}

.sec-col-name {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.85) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: calc(100% - 60px) !important;
}
.sec-col-dur {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.4) !important;
  margin-left: 6px !important;
  opacity: 1 !important;
}

/* Slightly taller header so the colored top stripe reads cleanly */
.track-col-headers {
  height: 38px !important;
}

/* ── 4. INTENSITY (arc-bar) AREA — clean layout ────────────────── */
.arc-bar {
  background: linear-gradient(180deg,
              rgba(20,20,28,.4),
              rgba(12,12,18,.6)) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* INTENSITY label + All/Global at top-left */
.arc-bar-labels {
  top: 8px !important;
  left: 14px !important;
  gap: 12px !important;
  z-index: 5 !important;
}
.arc-bar-labels .arc-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
}
.arc-mode-btn {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
  cursor: pointer !important;
  transition: .15s !important;
  pointer-events: all !important;
}
.arc-mode-btn:hover { color: rgba(255,255,255,.8) !important; }
.arc-mode-btn.active {
  background: rgba(232,184,75,.15) !important;
  border-color: rgba(232,184,75,.5) !important;
  color: #e8b84b !important;
}

/* MIN / MAX y-axis hints (decorative — overlayed left side) */
.arc-bar::before {
  content: "MAX";
  position: absolute;
  top: 28px;
  left: 14px;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 1;
}
.arc-bar::after {
  content: "MIN";
  position: absolute;
  bottom: 26px;
  left: 14px;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 1;
}

/* Hint text — move it OUT of the curve area (down-left, small) */
.arc-hint {
  bottom: 4px !important;
  left: 14px !important;
  font-size: 8.5px !important;
  letter-spacing: .3px !important;
  color: rgba(255,255,255,.22) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* Focus button — small icon-only top right */
.arc-fs-btn {
  bottom: auto !important;
  top: 6px !important;
  right: 195px !important;
  font-size: 9px !important;
  padding: 3px 8px !important;
  letter-spacing: 1px !important;
  background: rgba(0,0,0,.4) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.4) !important;
}
.arc-fs-btn:hover { color: #e8b84b !important; border-color: rgba(232,184,75,.4) !important; }

/* Legend on the right — cleaner stack */
.arc-legend {
  top: 6px !important;
  right: 10px !important;
  gap: 3px !important;
  max-width: 170px !important;
  padding: 6px 8px !important;
  background: linear-gradient(180deg,
              rgba(12,12,18,.85),
              rgba(8,8,14,.7)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 4px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 5 !important;
}
.arc-legend-item {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.75) !important;
  /* mockup uses mixed case (Piano, Dist. Guitar…) — keep as inst.name */
  text-transform: none !important;
  gap: 6px !important;
}
/* (the legend color bar is rendered inline by app-core.js, so we don't add another with ::before) */

/* feedback text inside the bar — keep but mute */
.arc-feedback {
  bottom: 4px !important;
  left: auto !important;
  right: 14px !important;
  font-size: 9px !important;
  color: rgba(255,255,255,.3) !important;
  opacity: .6 !important;
}

/* ── 5. ZOOM ROW — section jump buttons polish ─────────────────── */
.zoom-row {
  padding: 6px 14px !important;
  background: linear-gradient(180deg,
              rgba(0,0,0,.25),
              rgba(0,0,0,.1)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.sec-jump-row {
  gap: 5px !important;
}
.sec-jump-btn {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.3px !important;
  padding: 4px 9px !important;
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: .15s !important;
}
.sec-jump-btn:hover {
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.05) !important;
}
.sec-jump-btn.active {
  color: #e8b84b !important;
  border-color: rgba(232,184,75,.6) !important;
  background: rgba(232,184,75,.1) !important;
}

/* Reset btn */
.zoom-reset {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  padding: 3px 9px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.5) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

/* ── 6. STRUCTURE/TIMELINE BAR ─────────────────────────────────── */
.seq-timeline {
  background: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.seq-timeline-offset {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.5) !important;
}
.seq-time-mark {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,.45) !important;
}

/* ── 7. INSTRUMENT label column header ─────────────────────────── */
.track-col-hdr-offset {
  background: rgba(0,0,0,.25) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;
}

/* ── 8. GLOBAL PROMPT FOOTER PANEL ─────────────────────────────── */
.gp-footer {
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg,
              rgba(18,18,26,.95),
              rgba(12,12,18,.95));
  border-top: 1px solid rgba(232,184,75,.18);
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 10px 14px;
  gap: 16px;
  flex-shrink: 0;
}
.gp-footer-text {
  flex: 1;
  min-width: 0;
}
.gp-footer-lbl {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #e8b84b;
  text-transform: uppercase;
  margin-bottom: 3px;
  opacity: .85;
}
.gp-footer-body {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  letter-spacing: .3px;
}
.gp-footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.gp-ready {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gp-ready::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ec77a;
  box-shadow: 0 0 6px rgba(78,199,122,.6);
}
.gp-vol-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-vol-lbl {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.gp-vol-slider {
  width: 100px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.gp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  cursor: pointer;
}
.gp-vol-slider::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.4);
  cursor: pointer;
}
.gp-vol-pct {
  font-family: var(--ff-cinzel, "Cinzel", serif);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.55);
  min-width: 30px;
  text-align: right;
}

/* The big LET ALYX COMPOSE button (replaces the floating one) */
.gp-compose-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(180deg,
              rgba(232,184,75,.18),
              rgba(232,184,75,.08));
  border: 1px solid rgba(232,184,75,.5);
  border-radius: 4px;
  color: #e8b84b;
  cursor: pointer;
  transition: .15s;
  font-family: var(--ff-cinzel, "Cinzel", serif);
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.05);
}
.gp-compose-btn:hover {
  background: linear-gradient(180deg,
              rgba(232,184,75,.28),
              rgba(232,184,75,.14));
  border-color: rgba(232,184,75,.7);
  color: #ffd97a;
}
.gp-compose-icon {
  font-size: 14px;
  line-height: 1;
}
.gp-compose-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.gp-compose-main {
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700;
}
.gp-compose-sub {
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(232,184,75,.55);
  margin-top: 2px;
}

/* Hide the old floating Compose button — replaced by gp-compose-btn */
#alyxComposeBtn {
  display: none !important;
}

/* ── 9. HIDE BOTTOM ALYX INSIGHTS STRIP (not in mockup) ────────── */
#alyxInsightsPanel.ehdm-hidden,
#alyxInsightsPanel { /* by default keep but compress  */
  /* keep visible but the redesign script will minimize it */
}
/* Toggle class added by JS to fully collapse */
body.ehdm-redesign #alyxInsightsPanel {
  display: none !important;
}

/* ── 10. CENTER LAYOUT FIX so footer panel sits cleanly ────────── */
.app-center {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.sequencer-wrap {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── 11. STEP / PROGRESS STEPPER — minor polish ────────────────── */
.stepper {
  background: linear-gradient(180deg,
              rgba(0,0,0,.2),
              rgba(0,0,0,.05)) !important;
}
.step .step-num {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
}
.step.active .step-num {
  background: #e8b84b !important;
  color: #18181e !important;
  box-shadow: 0 0 10px rgba(232,184,75,.4) !important;
}
.step .step-title {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  letter-spacing: .5px !important;
}

/* ── 12. PROJ CHIPS — make sure they read cleanly ──────────────── */
.proj-chip {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.3px !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
}
.proj-chip-bpm {
  background: rgba(232,184,75,.1) !important;
  border-color: rgba(232,184,75,.4) !important;
  color: #e8b84b !important;
}
.proj-chip-key {
  background: rgba(180,80,140,.12) !important;
  border-color: rgba(180,80,140,.45) !important;
  color: #d289b3 !important;
}
.proj-chip-genre {
  background: rgba(140,90,200,.12) !important;
  border-color: rgba(140,90,200,.45) !important;
  color: #b8a0e8 !important;
}

/* ── 13. SIDEBAR SECTION LABELS ────────────────────────────────── */
.ls-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.45) !important;
  text-transform: uppercase !important;
}

/* ── 14. INSTRUMENT row label column — readable ────────────────── */
.seq-row .row-label,
.seq-row .track-label {
  font-family: var(--ff-cinzel, "Cinzel", serif);
}

/* ── 15. RESPONSIVE GUARD ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .gp-footer-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gp-vol-slider { width: 70px; }
  .gp-compose-sub { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PART 2 — bottom area cleanup
   ════════════════════════════════════════════════════════════════ */

/* ── 16. HIDE the legacy transport-bar (its functions live in
   gp-footer + the top toolbar now) ───────────────────────────── */
.transport-bar {
  display: none !important;
}

/* ── 17. Make the preview-bar (play/stop transport) sit at bottom 0
   and span the center column nicely. It stays below gp-footer. ── */
.preview-bar {
  bottom: 0 !important;
  height: 50px !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg,
              rgba(14,14,20,.97),
              rgba(8,8,14,.99)) !important;
  border-top: 1px solid rgba(232,184,75,.15) !important;
  gap: 12px !important;
}
.preview-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
.preview-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,.4) !important;
  min-width: auto !important;
}
.preview-vol {
  width: 80px !important;
  height: 3px !important;
}
.preview-chord-label {
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  color: rgba(232,184,75,.7) !important;
}

/* Ensure my gp-footer doesn't get covered by the preview-bar.
   Add bottom padding equal to preview-bar height. */
.app-center {
  padding-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* ── 18. Force-hide the comparison panel when it has the hidden
   class — protect against it slipping up the layout when empty. */
.cmp-panel.hidden {
  display: none !important;
}

/* ── 19. ARC-HINT — ensure smaller, even against older rules ──── */
.arc-bar .arc-hint,
#arcBar .arc-hint {
  bottom: 4px !important;
  left: 14px !important;
  font-size: 8.5px !important;
  letter-spacing: .3px !important;
  color: rgba(255,255,255,.22) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── 20. SECTION COLORED-BAR ROW (DURATION / SECTIONS / INSTRUMENTS)
   — show with a subtle background and inline alignment. */
.dur-bar,
.section-info-bar,
.duration-bar,
.seq-info-bar {
  background: rgba(0,0,0,.15) !important;
}

/* ── 21. Top-bar buttons icon polish ───────────────────────────── */
.app-topbar .btn-icon {
  color: rgba(255,255,255,.55) !important;
  transition: color .15s !important;
}
.app-topbar .btn-icon:hover {
  color: #e8b84b !important;
}

/* ── 22. EXPORT / IMPORT buttons in topbar — match mockup pill ── */
.app-topbar .btn.gold {
  background: linear-gradient(180deg,
              rgba(232,184,75,.18),
              rgba(232,184,75,.06)) !important;
  border: 1px solid rgba(232,184,75,.5) !important;
  color: #e8b84b !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}
.app-topbar .btn.gold:hover {
  background: linear-gradient(180deg,
              rgba(232,184,75,.28),
              rgba(232,184,75,.12)) !important;
}

/* ── 23. GENERATE button in stepper — strong gold pill ─────────── */
#genMainBtn,
.gen-btn,
.gen-btn.idle {
  background: linear-gradient(180deg, #e8b84b, #b88a2d) !important;
  color: #18181e !important;
  border: 1px solid rgba(232,184,75,.6) !important;
  font-family: var(--ff-cinzel, "Cinzel", serif) !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(232,184,75,.25),
              inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#genMainBtn:hover {
  background: linear-gradient(180deg, #f0c460, #c89a35) !important;
}

/* ════════════════════════════════════════════════════════════════
   PART 3 — bug fixes
   ════════════════════════════════════════════════════════════════ */

/* ── BUG 1 — Quick Ideas text clipping (Sadness / Fear) ────────
   The 2-column grid in a 210px sidebar leaves ~90px per button,
   not enough for "Sadness" beside an icon. Stack icon over label
   so the full word always fits. */
.alyx-quick-emotions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  min-width: 0 !important;
}
.alyx-quick-emo-btn {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 9px 6px !important;
  font-size: 12px !important;
  gap: 4px !important;
  letter-spacing: .2px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.alyx-quick-emo-btn > span:not(.alyx-quick-emo-icon) {
  min-width: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.alyx-quick-emo-icon {
  font-size: 17px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ── BUG 2 — duplicate prompt panel ────────────────────────────
   atp-prompt-preview.js injects #alyxPromptPreview at the bottom
   of the sequencer. Our new GLOBAL PROMPT footer replaces that
   role, so hide the original to avoid duplication. */
#alyxPromptPreview {
  display: none !important;
}