/* =========================================================
   VIBERO DAW – CLEAN CSS FOUNDATION
   Cosmic dark theme · FL-style timeline · SmartTune sidecar
   ========================================================= */

/* ---------------------------
   0. Design Tokens / Root
   --------------------------- */

:root {
  --bg-main: #050109;
  --bg-panel-grad: radial-gradient(circle at top, #1a102f 0%, #050109 70%);
  --bg-chip: rgba(32, 16, 48, 0.95);

  --accent: #a57cff;
  --accent-soft: rgba(165, 124, 255, 0.7);
  --accent-strong: #e390ff;

  --accent-green: #4bffb9;
  --accent-orange: #ffb36a;
  --accent-red: #ff6f6f;
  --accent-cyan: #63e9ff;

  --text-main: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.75);
  --text-subtle: rgba(255, 255, 255, 0.55);

  --border-subtle: rgba(190, 160, 255, 0.35);
  --border-strong: rgba(199, 163, 255, 0.9);

  --shadow-soft: 0 26px 70px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   PER-CLIP PROCESSING TARGET + STATUS
   Restored after the platform stylesheet rollout.
   ========================================================= */
.clip-processing-target {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(181, 150, 255, 0.48);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(38, 20, 72, 0.76), rgba(15, 7, 31, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.clip-processing-target[data-state="active"] {
  border-color: rgba(75, 255, 185, 0.72);
  box-shadow: 0 0 14px rgba(75, 255, 185, 0.16);
}

.clip-processing-target[data-state="busy"] {
  border-color: rgba(227, 144, 255, 0.82);
  box-shadow: 0 0 14px rgba(165, 124, 255, 0.24);
}

.clip-processing-target-label {
  color: var(--text-subtle);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.clip-processing-target-value {
  color: var(--text-main);
  font-size: 10px;
  line-height: 1.35;
}

.clip-processing-badges {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: none;
}

.clip-block--gain-tiny .clip-processing-badges {
  display: none;
}

.clip-processing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(8, 4, 18, 0.8);
  color: rgba(255, 255, 255, 0.94);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.clip-processing-badge--smarttune {
  border-color: rgba(165, 124, 255, 0.86);
  color: #e390ff;
}

.clip-processing-badge--aimix {
  border-color: rgba(75, 255, 185, 0.86);
  color: #4bffb9;
}

.clip-processing-badge--dirty {
  border-color: rgba(255, 179, 106, 0.88);
  color: #ffb36a;
}

.track-smart-btn.clip-smarttune-on,
.track-smart-btn.smarttune-on {
  border-color: rgba(227, 144, 255, 0.9);
  background: rgba(165, 124, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 12px rgba(165, 124, 255, 0.52);
}

/* =========================================================
   VIBERO WEB ACCOUNT UI
   Login gate, profile panel, and signed-in controls.
   ========================================================= */
body.vibero-auth-locked {
  overflow: hidden;
}

body.vibero-auth-locked .app-root {
  pointer-events: none;
  user-select: none;
  filter: blur(4px) saturate(0.72);
  opacity: 0.42;
}

.vibero-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(165, 124, 255, 0.24), transparent 38%),
    radial-gradient(circle at 80% 5%, rgba(255, 99, 201, 0.18), transparent 34%),
    rgba(2, 0, 8, 0.94);
  backdrop-filter: blur(18px);
}

.vibero-auth-overlay[hidden] {
  display: none !important;
}

.vibero-auth-card {
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid rgba(190, 160, 255, 0.52);
  border-radius: 28px;
  background: radial-gradient(circle at top, rgba(63, 34, 116, 0.94), rgba(13, 6, 29, 0.98) 52%, rgba(5, 1, 12, 0.99));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.82), 0 0 54px rgba(165, 124, 255, 0.24);
}

.vibero-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.vibero-auth-wordmark {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.24em;
}

.vibero-auth-kicker {
  margin-top: 3px;
  color: var(--text-subtle);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vibero-auth-title {
  margin: 0;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.vibero-auth-copy {
  margin: 9px 0 20px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.vibero-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid rgba(181, 150, 255, 0.26);
  border-radius: 999px;
  background: rgba(8, 3, 20, 0.75);
}

.vibero-auth-tab {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}

.vibero-auth-tab-active {
  background: linear-gradient(135deg, #a57cff, #ff63c9);
  color: #08020f;
  box-shadow: 0 0 18px rgba(255, 99, 201, 0.36);
}

.vibero-auth-form {
  display: flex;
  flex-direction: column;
}

.vibero-auth-form[hidden] {
  display: none !important;
}

.vibero-auth-label {
  margin: 0 0 6px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vibero-auth-input {
  width: 100%;
  height: 44px;
  margin-bottom: 14px;
  padding: 0 14px;
  border: 1px solid rgba(181, 150, 255, 0.48);
  border-radius: 13px;
  outline: none;
  background: rgba(7, 2, 17, 0.9);
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.vibero-auth-input:focus {
  border-color: rgba(255, 99, 201, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 99, 201, 0.11);
}

.vibero-auth-submit {
  min-height: 44px;
  margin-top: 4px;
  border: 0;
  font-size: 11px;
}

.vibero-auth-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.vibero-auth-text-btn {
  align-self: center;
  margin-top: 13px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
}

.vibero-auth-text-btn:hover,
.vibero-auth-text-btn:focus-visible {
  color: #fff;
  text-decoration: underline;
  outline: none;
}

.vibero-auth-text-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}

.vibero-auth-status {
  min-height: 18px;
  margin-top: 14px;
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.vibero-auth-status[data-state="error"] {
  color: #ff8d9c;
}

.vibero-auth-status[data-state="success"] {
  color: var(--accent-green);
}

.vibero-account-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 4px 5px 4px 11px;
  border: 1px solid rgba(181, 150, 255, 0.36);
  border-radius: 999px;
  background: rgba(15, 6, 31, 0.78);
}

.vibero-account-shell[hidden] {
  display: none !important;
}

.vibero-account-email {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.vibero-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #cbd3df;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.vibero-auth-check input {
  margin-top: 2px;
  accent-color: #8b5cf6;
}

.vibero-account-panel {
  position: absolute;
  z-index: 1000;
  right: 0;
  top: calc(100% + 10px);
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid rgba(190, 160, 255, 0.42);
  border-radius: 16px;
  background: radial-gradient(circle at top right, rgba(63, 34, 116, 0.96), rgba(13, 6, 29, 0.985) 58%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.62), 0 0 28px rgba(165, 124, 255, 0.14);
}

.vibero-account-panel[hidden] {
  display: none;
}

.vibero-account-panel > strong {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vibero-account-plan,
.vibero-account-verify,
.vibero-account-message {
  color: #aeb8c7;
  font-size: 12px;
  line-height: 1.4;
}

.vibero-account-verify[data-verified="true"],
.vibero-account-message[data-state="success"] {
  color: #6ee7b7;
}

.vibero-account-message[data-state="error"] {
  color: #fca5a5;
}

@media (max-width: 760px) {
  .vibero-auth-overlay {
    padding: 14px;
  }

  .vibero-auth-card {
    padding: 22px;
    border-radius: 22px;
  }

  .vibero-account-email {
    max-width: 80px;
  }
}

/* ---------------------------
   1. Reset / Global
   --------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(circle at top, #0b0617 0%, #010007 55%, #000000 100%);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Roboto", sans-serif;
  overflow-x: hidden;
overflow-y: auto;
}

/* App root – column: top bar + DAW shell */
.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------
   2. Top Bar
   --------------------------- */

.top-bar {
  padding: 14px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #ff63c9, #6a28ff);
  box-shadow: 0 0 16px rgba(255, 99, 201, 0.9);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-size: 16px;
  letter-spacing: 0.22em;
  font-weight: 650;
}

.brand-sub {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.top-center {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.session-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-name {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--accent-strong);
  background: rgba(25, 12, 39, 0.92);
}

.top-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.top-meter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.top-meter-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
}

.top-meter-fill {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, #4bffb9, #e390ff);
  box-shadow: 0 0 20px rgba(75, 255, 185, 0.6);
  border-radius: 999px;
  transform-origin: left center;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------------------
   3. Buttons + Icons + Dots
   --------------------------- */

.primary-btn,
.ghost-btn,
.ghost-icon-btn,
.ghost-pill {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.primary-btn {
  background: linear-gradient(135deg, #a57cff, #ff63c9);
  color: #050109;
  box-shadow: 0 0 20px rgba(255, 99, 201, 0.7);
}

.primary-btn-small {
  padding: 6px 11px;
  font-size: 10px;
}

.primary-btn-full {
  width: 100%;
  justify-content: center;
}

.ghost-btn {
  background: rgba(20, 10, 40, 0.78);
  color: var(--text-soft);
  border: 1px solid rgba(181, 150, 255, 0.4);
}

.ghost-btn-small {
  padding: 5px 10px;
  font-size: 10px;
}

.ghost-btn-full {
  width: 100%;
  justify-content: center;
}

.ghost-btn-sub {
  margin-top: 6px;
  opacity: 0.85;
}

.ghost-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  background: rgba(18, 9, 36, 0.85);
  border: 1px solid rgba(181, 150, 255, 0.4);
  color: var(--text-soft);
}

.ghost-pill {
  background: rgba(20, 10, 40, 0.72);
  color: var(--text-soft);
  border: 1px solid rgba(181, 150, 255, 0.45);
  padding-inline: 10px;
  padding-block: 4px;
  font-size: 10px;
}

.ghost-pill-small {
  font-size: 9px;
}

.ghost-pill-active {
  background: radial-gradient(circle at top, #a57cff 0%, #ff63c9 90%);
  color: #050109;
  border-color: transparent;
}

.icon {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: radial-gradient(circle at 30% 20%, #e390ff, #5c2ad7);
  position: relative;
}

/* Simple glyphs inside icon square */

.icon-plus::before,
.icon-loop::before,
.icon-monitor::before,
.icon-template::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.icon-rocket::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-radius: 2px;
  background: #050109;
}



/* Dots */

.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

.dot-green {
  background: radial-gradient(circle at 30% 20%, #4bffb9, #158a64);
  box-shadow: 0 0 12px rgba(75, 255, 185, 0.8);
}

/* ---------------------------
   4. DAW Shell Layout
   --------------------------- */

.daw-shell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 6px 12px 18px;
}

.daw-inner {
  width: 100%;
  max-width: 1180px;
  height: calc(100vh - 80px); /* top bar ~80px */
  border-radius: 40px;
  background: radial-gradient(
    circle at top,
    rgba(70, 44, 140, 0.85) 0%,
    rgba(12, 8, 26, 0.98) 28%,
    #050109 80%
  );
  box-shadow: 0 0 60px rgba(110, 80, 216, 0.55);
  border: 1px solid rgba(169, 134, 255, 0.4);

  display: grid;
  grid-template-columns:
    minmax(180px, 0.8fr)   /* Tracks */
    minmax(520px, 2.2fr)   /* Timeline */
    minmax(220px, 0.9fr);  /* SmartTune */
  column-gap: 18px;
  padding: 18px 24px 22px;
}

/* --- Shared Panel Shell --- */

.panel {
  background: radial-gradient(
    circle at top,
    rgba(51, 29, 96, 0.9) 0%,
    rgba(12, 6, 32, 0.98) 40%,
    rgba(6, 2, 16, 1) 100%
  );
  border-radius: 26px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  min-height: 0; /* allow flex children to define scroll area */
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.panel-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------
   5. Left Panel – Tracks
   --------------------------- */
.tracks-panel {
  display: flex;
  flex-direction: column;

  /* FIX: allow ST / MIC / REC buttons to be visible and clickable */
  overflow: visible !important;
  position: relative;
  z-index: 50;
}


.tracks-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tracks-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.tracks-meta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.meta-value {
  font-size: 11px;
}

.track-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.track-header-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
}

.track-header-label-right {
  opacity: 0.8;
}

/* Scrollable list of tracks */

.tracks-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 6px;
}

.tracks-list::-webkit-scrollbar {
  width: 6px;
}

.tracks-list::-webkit-scrollbar-thumb {
  background: rgba(143, 104, 255, 0.7);
  border-radius: 999px;
}

.tracks-footer {
  margin-top: 6px;
}

/* Track pills */

.track-pill {
  width: 100%;
  display: flex;
  align-items: flex-start;      /* FIX clipping */
  gap: 10px;
  margin-bottom: 6px;
  padding: 12px 10px;           /* Taller area so ST/MIC fit */
  border-radius: 14px;
  border: 1px solid rgba(181, 150, 255, 0.4);
  background: radial-gradient(circle at top, rgba(30, 18, 61, 0.95), #050109);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease, transform 0.08s ease;

  position: relative;           
  z-index: 9999;                /* FIX button clickability */
}


.track-pill--active {
  border-color: rgba(198, 163, 255, 0.9);
  box-shadow: 0 0 28px rgba(165, 124, 255, 0.7);
  transform: translateY(-1px);
}

.track-pill-color {
  width: 16px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a57cff, #ff63c9);
}

.track-pill-color--lead {
  background: linear-gradient(180deg, #a57cff, #ff63c9);
}

.track-pill-color--double {
  background: linear-gradient(180deg, #ffb36a, #ff63c9);
}

.track-pill-color--adlib {
  background: linear-gradient(180deg, #63e9ff, #a57cff);
}

.track-pill-color--beat {
  background: linear-gradient(180deg, #4bffb9, #63e9ff);
}

.track-pill-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.track-pill-name {
  font-size: 12px;
  font-weight: 500;
}

.track-pill-sub {
  font-size: 10px;
  color: var(--text-subtle);
}

.track-pill-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.track-tag {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(167, 136, 255, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

.track-tag-orange {
  border-color: rgba(255, 179, 106, 0.9);
  color: #ffb36a;
}

.track-tag-purple {
  border-color: rgba(165, 124, 255, 0.9);
}

.track-tag-cyan {
  border-color: rgba(99, 233, 255, 0.9);
  color: #63e9ff;
}

.track-tag-green {
  border-color: rgba(75, 255, 185, 0.95);
  color: #4bffb9;
}

/* ============================================
   TRACK ROW + CONTROLS ABOVE EACH TRACK PILL
   ============================================ */

.track-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  gap: 6px;
}

.track-controls {
  display: flex;
  gap: 6px;
  padding-left: 40px; /* aligns with pill left padding */
}

.track-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: 24px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );

  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}


.track-controls button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}
.track-controls button.active {
  background: rgba(160, 130, 255, 0.25);
  border-color: rgba(160, 130, 255, 0.6);
  box-shadow: 0 0 10px rgba(160, 130, 255, 0.45);
}

/* Track mute / solo buttons */
.track-mute-btn.track-muted {
  background: rgba(255, 111, 111, 0.28);
  border-color: rgba(255, 111, 111, 0.78);
  box-shadow: 0 0 12px rgba(255, 111, 111, 0.45);
  color: #ffffff;
}

.track-solo-btn.track-soloed {
  background: rgba(255, 179, 106, 0.30);
  border-color: rgba(255, 179, 106, 0.88);
  box-shadow: 0 0 12px rgba(255, 179, 106, 0.48);
  color: #ffffff;
}

.track-pill.track-muted {
  opacity: 0.62;
}

.track-pill.track-soloed {
  border-color: rgba(255, 179, 106, 0.95);
  box-shadow: 0 0 22px rgba(255, 179, 106, 0.45);
}

/* Track load buttons */

.track-load-btn {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.7);
  background: radial-gradient(circle at top, rgba(60, 34, 118, 0.95), rgba(12, 6, 40, 0.95));
  box-shadow: 0 0 14px rgba(145, 113, 240, 0.7);
  cursor: pointer;
  font-size: 0; /* hide ▇▇▇ text */
  position: relative;
}

.track-load-btn::before {
  content: "";
  position: absolute;
  inset: 3px 5px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* ---------------------------
   6. Center – Timeline
   --------------------------- */

.timeline-panel {
  display: flex;
  flex-direction: column;
}

.timeline-header {
  margin-bottom: 10px;
}

.timeline-right {
  font-size: 11px;
  color: var(--text-soft);
}

.timeline-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
}

/* =========================
   BPM / KEY / ANALYZE CONTROLS
   ========================= */

.timeline-meta-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-bpm-input,
.timeline-key-select {
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.55);
  background: rgba(20, 10, 40, 0.78);
  color: var(--text-main);
  font-size: 10px;
  letter-spacing: 0.08em;
  outline: none;
}

.timeline-bpm-input {
  width: 58px;
  padding: 0 8px;
}

.timeline-key-select {
  width: 92px;
  padding: 0 8px;
}

.timeline-key-select option {
  background: #241040;
  color: #ffffff;
}

.timeline-analyze-btn {
  height: 24px;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: 0.10em;
}

.timeline-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Small toolbar for Clean / Waveform toggle */
.timeline-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 6px;
}
/* =========================
   TIMELINE – DISABLED TOGGLE
   ========================= */

.timeline-toggle-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.timeline-toggle-disabled:hover {
  background: none;
}

.timeline-toggle-btn {
  font-size: 10px;
  padding: 4px 10px;
}

/* Outer timeline container */

.timeline-bars {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  background: radial-gradient(circle at top, #21103d 0%, #080313 55%, #050109 100%);
  border: 1px solid rgba(171, 140, 255, 0.8);
  padding: 10px 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}

/* Top ruler */

.timeline-bars-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  margin-bottom: 6px;
}

/* Scrollable lane area */

.timeline-bars-inner {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(161, 134, 244, 0.8);
  background: radial-gradient(circle at top, #160e33 0%, #05020d 60%, #050109 100%);
  height: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: auto;
  scrollbar-width: thin;
}

.timeline-bars-inner::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.timeline-bars-inner::-webkit-scrollbar-thumb {
  background: rgba(143, 104, 255, 0.7);
  border-radius: 999px;
}

/* Grid background (beats) */

.timeline-background-grid {
  /*
    The old absolute grid was sized to the visible scroll viewport, so after
    scrolling down it ended partway through the track list. The grid now lives
    on .timeline-lanes::before, which grows with every rendered track lane.
  */
  display: none;
}

/* Playhead cursor */

.timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  pointer-events: none;
  z-index: 3;
}

.timeline-cursor-line {
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

.timeline-cursor-handle {
  position: absolute;
  top: 8px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.7);
}

/* Lanes container */

.timeline-lanes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 100%;
  z-index: 1;
}

.timeline-lanes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to right, rgba(165, 124, 255, 0.34) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size:
    var(--vibero-beat-px, 32px) 100%,
    var(--vibero-bar-px, 128px) 100%,
    100% 40px;
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
  display: none;
}

/* Single lane */

.timeline-lane {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  min-height: 52px;
  padding: 3px 8px 3px 8px;
  overflow: hidden;
  cursor: pointer;
  /*
    Paint the beat grid on every lane instead of on one viewport-height
    pseudo-element. This keeps vertical beat/bar lines visible through all
    64 scrollable lanes, even when the lane stack overflows its flex parent.
  */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.038) 1px, transparent 1px),
    linear-gradient(to right, rgba(165, 124, 255, 0.082) 2px, transparent 2px);
  background-size:
    var(--vibero-beat-px, 32px) 100%,
    var(--vibero-bar-px, 128px) 100%;
  background-position: 0 0;
}

.timeline-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02),
    rgba(165, 124, 255, 0.09)
  );
  opacity: 0.6;
  border-radius: 10px;
  transition: opacity 0.15s ease, box-shadow 0.18s ease;
}

/* Track name label inside lane */

.timeline-lane-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

/* Index pill on right */

.timeline-lane-index {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(185, 158, 255, 0.8);
  background: rgba(24, 10, 55, 0.92);
  color: rgba(255, 255, 255, 0.85);
}

.timeline-lane-placeholder {
  font-size: 11px;
  color: var(--text-subtle);
}

/* Lane hover + has audio */

.timeline-lane:hover::before {
  opacity: 0.85;
  box-shadow: 0 0 22px rgba(165, 124, 255, 0.75);
}

.timeline-lane--has-audio::before {
  opacity: 1;
  box-shadow: 0 0 22px rgba(135, 249, 204, 0.85);
}

/* Optional waveform mode */

.timeline-panel[data-view="waveform"] .timeline-lane::before {
  opacity: 0.95;
  box-shadow: 0 0 18px rgba(143, 104, 255, 0.7);
}

/* Transport row */

.timeline-transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 16px;
  background: radial-gradient(circle at top, #1a0f37 0%, #050109 70%);
  border: 1px solid rgba(169, 134, 255, 0.7);
}

.transport-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.transport-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transport-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Hide Loop button (unused in MVP) */
.timeline-transport .transport-right .ghost-icon-btn {
  display: none !important;
}

.transport-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.6);
  background: radial-gradient(circle at top, #2b174e 0%, #070310 75%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.transport-svg {
  display: block;
  color: #050109;
}
.transport-btn-monitor.active {
  border-color: rgba(120, 255, 180, 0.9);
  box-shadow: 0 0 12px rgba(120, 255, 180, 0.6);
}

.transport-icon {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.transport-btn svg {
  display: block;
  line-height: 1;
}


.transport-btn-main {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.6);
}

.transport-time {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.time-main {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 13px;
}

.time-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.playback-bar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.playback-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #4bffb9, #e390ff);
  box-shadow: 0 0 16px rgba(75, 255, 185, 0.6);
  border-radius: 999px;
  transform-origin: left center;
}

.playback-handle {
  position: absolute;
  top: -3px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
}

.smarttune-panel {
  display: flex;
  flex-direction: column;
  height: 100%;

  font-size: 0.92rem;
  min-width: 0;

  /* FIX: prevent top clipping of tabs / pills */
  padding-top: 10px;
  overflow: hidden;
}
/* ============================
   Voice Model Panel (MVP)
   ============================ */

.voice-model-body {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voice-model-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.voice-model-card {
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(circle at top, #221037 0%, #080413 72%);
  border: 1px solid rgba(158, 130, 245, 0.75);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.voice-model-card-hero {
  border-color: rgba(255, 99, 201, 0.75);
  background:
    radial-gradient(circle at top left, rgba(255, 99, 201, 0.20), transparent 42%),
    radial-gradient(circle at top, #241043 0%, #080413 75%);
}

.voice-model-kicker {
  margin-bottom: 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-strong);
}

.voice-model-title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.voice-model-copy {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.voice-model-actions {
  display: flex;
  gap: 8px;
}

.voice-model-status {
  margin-top: 8px;
  font-size: 9px;
  color: var(--text-subtle);
}

.voice-model-note {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-subtle);
}

/* ============================
   AI Mix & Master (MVP)
   ============================ */

.ai-mix-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;

  background: radial-gradient(circle at top, #221037 0%, #080413 70%);
  border: 1px solid rgba(158, 130, 245, 0.9);
}

.ai-mix-header {
  margin-bottom: 8px;
}

.ai-mix-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.ai-mix-sub {
  font-size: 9px;
  color: var(--text-subtle);
}

.ai-mix-preset-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 10px;
}

.ai-mix-preset-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.ai-mix-preset-select {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;

  background: radial-gradient(circle at top, #3a1764 0%, #160822 85%);
  border: 1px solid rgba(181, 150, 255, 0.75);
  color: #ffffff;

  font-size: 10px;
  cursor: pointer;
}

.ai-mix-preset-select option {
  background: #241040;
  color: #ffffff;
}

.ai-mix-preset-select option:checked {
  background: #6f35d8;
  color: #ffffff;
}

.ai-mix-preset-select:focus {
  outline: none;
  border-color: rgba(255, 99, 201, 0.9);
  box-shadow: 0 0 14px rgba(165, 124, 255, 0.35);
}

.ai-mix-controls {
  display: flex;
  gap: 8px;
}

.ai-btn {
  flex: 1;
  padding: 8px 10px;

  border-radius: 10px;
  border: 1px solid rgba(181, 150, 255, 0.6);

  background: transparent;
  color: var(--text-main);

  font-size: 10px;
  cursor: pointer;
}
.ai-btn--emphasis {
  border-color: rgba(255, 99, 201, 0.75);
  background: rgba(255, 99, 201, 0.10);
}
/* =========================
   AI MIX – DISABLED STATE
   ========================= */

#btnAiMixSession[disabled] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}

/* Kill emphasis glow when disabled */
#btnAiMixSession[disabled].ai-btn--emphasis {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* =========================
   AI MIX BUTTON STATE FIX
   ========================= */

#btnAiMixSession:focus,
#btnAiMixSession:active,
#btnAiMixTrack:focus,
#btnAiMixTrack:active {
  outline: none;
  box-shadow: none;
}

#btnAiMixSession[disabled],
#btnAiMixTrack[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-mix-status {
  margin-top: 8px;
  font-size: 9px;
  color: var(--text-subtle);
}


.smarttune-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.smarttune-title-row {
  display: flex;
  justify-content: center;
}

.smarttune-title-row .panel-title {
  font-size: 12px;
  letter-spacing: 0.18em;
}

.smarttune-tab-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* =========================
   SMARTTUNE TITLE VISIBILITY
   ========================= */

.smarttune-title-hidden {
  display: none;
}


.smarttune-left {
  display: flex;
  align-items: center;
  gap: 8px;
}



.smarttune-right {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}
/* ============================
   SmartTune Input / Output
   ============================ */

.smarttune-io {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.smarttune-io-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smarttune-io-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.smarttune-io-select {
  appearance: none;
  -webkit-appearance: none;

  padding: 6px 10px;
  border-radius: 10px;

  background: radial-gradient(circle at top, #241040 0%, #090215 80%);
  border: 1px solid rgba(181, 150, 255, 0.6);

  color: var(--text-main);
  font-size: 11px;

  cursor: pointer;
}


/* ============================
   Mic Permission Button
   ============================ */

.mic-permission-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(181, 150, 255, 0.35);
  background: radial-gradient(circle at top, rgba(36, 16, 64, 0.75), rgba(9, 2, 21, 0.85));
}

.mic-permission-status {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.mic-permission-status--ok {
  color: var(--accent-green);
}

.mic-permission-status--error {
  color: var(--accent-red);
}



.smarttune-body {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;

  /* FIX: prevent horizontal offset */
  padding: 16px 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* SmartTune top row */
/* =========================
   SMARTTUNE MODE BADGE
   ========================= */

.smarttune-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 18px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.85);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(181, 150, 255, 0.95);

  background: transparent;

  box-shadow:
    0 0 10px rgba(181, 150, 255, 0.35);

  white-space: nowrap;
  user-select: none;
}


.smarttune-top {
  margin-bottom: 8px;
}

.smarttune-display {
  display: grid;
  grid-template-columns: 1.55fr 1.05fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: radial-gradient(circle at top, #2b154f 0%, #070310 80%);
  border: 1px solid rgba(181, 150, 255, 0.7);
  margin-bottom: 10px;
    min-width: 0;
  overflow: hidden;
}

.smarttune-display-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.smarttune-key-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.smarttune-key-value {
  font-size: 12px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}



.smarttune-display-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
}

.smarttune-led-row {
  display: flex;
  gap: 4px;
}

.led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #382051, #11061f);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  opacity: 0.4;
}

.led--on {
  background: radial-gradient(circle at 30% 20%, #4bffb9, #158a64);
  box-shadow: 0 0 16px rgba(75, 255, 185, 0.9);
  opacity: 1;
}

.smarttune-display-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}
.smarttune-engine-status {
  display: none;
}



/* Sliders */

.smarttune-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.slider-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a57cff, #ff63c9);
  box-shadow: 0 0 16px rgba(165, 124, 255, 0.8);
  cursor: pointer;
}

.range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a57cff, #ff63c9);
  box-shadow: 0 0 16px rgba(165, 124, 255, 0.8);
  cursor: pointer;
}

/* SmartTune tabs + content */

.smarttune-bottom {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.smarttune-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(11, 3, 28, 0.9);
  border: 1px solid rgba(148, 116, 243, 0.7);
  margin-bottom: 8px;
}


.smarttune-tab {
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  background: transparent;
  color: var(--text-subtle);
}

.smarttune-tab--active,
.smarttune-tab.smarttune-tab--active {
  background: radial-gradient(circle at top, #a57cff 0%, #ff63c9 80%);
  color: #050109;
  box-shadow: 0 0 16px rgba(165, 124, 255, 0.8);
}

/* NOTE: HTML uses smarttune-tab-content classes; JS uses smart-panel/smart-tab,
   but this CSS still renders correctly for your current markup. */

.smarttune-tab-content {
  display: none;
  padding: 8px 2px 8px 0;

  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;

  min-height: 0;
}

.smarttune-tab-content--active {
  display: block;
}

/* Core / Pro / Router cards */

.core-grid{
  display: grid;

  /* STACKED FULL-WIDTH CARDS (no clipping possible) */
  grid-template-columns: 1fr;

  gap: 12px;

  /* prevents weird shrink behavior in nested flex/grid parents */
  min-width: 0;
}




.core-card,
.pro-card {
  border-radius: 14px;
  background: radial-gradient(circle at top, #221037 0%, #080413 70%);
  border: 1px solid rgba(158, 130, 245, 0.9);
  padding: 12px 14px;
  overflow: visible;
  font-size: 9px;
  line-height: 1.35;
  height: auto;
  min-height: auto;
  width: 100%;
  min-width: 0;          /* critical: allows wrapping inside grid */
}
/* ============================================
   SMARTTUNE CARD CONTAINMENT HARDENING
   (prevents any child from forcing overflow)
   ============================================ */

.core-card *,
.pro-card * {
  min-width: 0;
}

.core-card,
.pro-card {
  word-break: break-word;
}

.core-list li,
.pro-list li {
  white-space: normal;
}

.pro-card {
  background: radial-gradient(circle at top, #241040 0%, #090215 80%);
  border-color: rgba(176, 146, 245, 0.9);
}

.core-card-top,
.pro-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
/* Prevent mid-word breaks in PRO titles */
.pro-card-header .core-title {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.3;
}

.core-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.core-pill {
  font-size: 9px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(158, 130, 245, 0.9);
}

.core-pill-purple {
  border-color: rgba(199, 163, 255, 0.95);
  color: #e390ff;
}

.core-pill-green {
  border-color: rgba(75, 255, 185, 0.95);
  color: #4bffb9;
}

.core-meter {
  margin-bottom: 6px;
}

.core-meter-bar {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.core-meter-fill {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, #ffb36a, #ff63c9);
  box-shadow: 0 0 16px rgba(255, 179, 106, 0.7);
  border-radius: 999px;
  transform-origin: left center;
}

.core-meter-fill--green {
  background: linear-gradient(90deg, #4bffb9, #63e9ff);
  box-shadow: 0 0 16px rgba(75, 255, 185, 0.85);
}

.core-meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 9px;
  color: var(--text-subtle);
}

.core-knob-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.core-knob-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.core-list {
  list-style: none;
  margin: 0;
  padding-left: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;

  font-size: 11px;
  line-height: 1.4;
  color: var(--text-soft);

  white-space: normal;
}



/* Pro tab */

.pro-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.pro-col {
  border-radius: 12px;
  padding: 8px 10px;
  background: radial-gradient(circle at top, #291247 0%, #090315 80%);
}

/* =========================
   PRO TAB — LOCKED LABEL GRID
   ========================= */

.pro-label-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}


.pro-label-row .meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  white-space: normal;
  overflow-wrap: anywhere;
}

.pro-label-row .meta-value {
  font-size: 10px;
  white-space: nowrap;
  text-align: right;
  opacity: 0.95;
}



.pro-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pro-tag {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(158, 130, 245, 0.9);
  color: var(--text-soft);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-tag-soft {
  border-style: dashed;
  opacity: 0.9;
}

.pro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pro-copy {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-soft);
  margin: 0;
  white-space: normal;
}

/* Router tab */

.router-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
}

.router-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(21, 9, 40, 0.9);
}

.router-row-soft {
  opacity: 0.9;
}

.router-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}

.router-value {
  color: var(--text-soft);
}

/* SmartTune footer LEDs */

.smarttune-footer {
  margin-top: 8px;
}

.smart-led-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}

.smart-led {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #382051, #0c0316);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.9);
  opacity: 0.4;
}

.smart-led--on,
.smart-led--active {
  background: radial-gradient(circle at 30% 20%, #4bffb9, #158a64);
  box-shadow: 0 0 16px rgba(75, 255, 185, 0.9);
  opacity: 1;
}

/* ---------------------------
   8. Toast
   --------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 4, 24, 0.95);
  border: 1px solid rgba(165, 124, 255, 0.8);
  color: var(--text-main);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 999;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ============================================================
   EXPORT / BOUNCE MENU (TOP BAR)
   ============================================================ */

.export-wrapper {
  position: relative;
}

.export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;

  min-width: 220px;
  padding: 10px;

  border-radius: 16px;
  background: radial-gradient(circle at top, #2b154f 0%, #070310 80%);
  border: 1px solid rgba(181, 150, 255, 0.85);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);

  display: none;
  flex-direction: column;
  gap: 6px;

  z-index: 1000;
}

.export-menu.export-menu--open {
  display: flex;
}

.export-menu button {
  width: 100%;
  text-align: left;

  padding: 8px 12px;
  border-radius: 12px;

  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  cursor: pointer;

  background: rgba(20, 10, 40, 0.9);
  border: 1px solid rgba(165, 124, 255, 0.45);
  color: var(--text-soft);

  transition: 0.15s ease;
}

.export-menu button:hover {
  background: radial-gradient(circle at top, #a57cff 0%, #ff63c9 90%);
  color: #050109;
  box-shadow: 0 0 16px rgba(165, 124, 255, 0.7);
}

/* ---------------------------
   9. Responsive Tweaks
   --------------------------- */

@media (max-width: 1080px) {
  .daw-inner {
    grid-template-columns: minmax(220px, 1.2fr) minmax(0, 1.8fr);
  }

  .smarttune-panel {
    display: none; /* hide side panel on very narrow views */
  }
}

@media (max-width: 820px) {
  .top-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .daw-inner {
    height: calc(100vh - 100px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    overflow: auto;
  }

  .tracks-panel,
  .timeline-panel {
    min-height: 260px;
  }
}
/* Ensure the Add Track button row stays visible */
.tracks-footer {
  flex-shrink: 0;
  padding-top: 8px;
  padding-bottom: 4px;
  z-index: 5;
}

/* Ensure the track list scrolls but footer stays fixed */
.tracks-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Ensure hidden file input still works */
#trackFileInput {
  position: fixed;   /* moves it out of scroll containers */
  top: -2000px;
  left: -2000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.tracks-list {
  position: relative;
  pointer-events: auto !important;
  z-index: 5;
}
.track-pill {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}
.panel,
.tracks-panel,
.daw-inner {
  pointer-events: auto !important;
}
/* Lane-wide waveform is disabled for MVP (we draw waveform inside clip bubbles) */
.waveform-canvas {
  display: none;
}
/* =========================
   CLIP BLOCKS (MVP)
   Non-destructive editing visuals
   ========================= */
.clip-layer {
  position: absolute;
  inset: 0;
  /* Match lane padding so clips don’t sit under labels */
  left: 0px;
  right: 0px; /* leaves room for the index pill */
  top: 0;
  bottom: 0;
  pointer-events: auto;     /* ✅ allow clicking/dragging clips */
  z-index: 4;               /* ✅ above waveform canvas */
}

.clip-block {
  overflow: hidden;
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    rgba(165, 124, 255, 0.22),
    rgba(135, 249, 204, 0.14)
  );
  border: 1px solid rgba(185, 158, 255, 0.55);
  box-shadow: 0 0 14px rgba(165, 124, 255, 0.35);
  pointer-events: auto;
  cursor: grab;
  overflow: hidden;
  transition: transform 90ms ease, opacity 90ms ease, box-shadow 120ms ease, outline 120ms ease;
}

/* Selected clip */
.clip-block.is-selected {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 14px rgba(165, 124, 255, 0.45),
    0 0 0 3px rgba(165, 124, 255, 0.20);
}

/* Muted clip */
.clip-block.is-muted {
  opacity: 0.38;
  filter: grayscale(0.8);
  border-color: rgba(255, 111, 111, 0.75);
  box-shadow: 0 0 12px rgba(255, 111, 111, 0.25);
}

.clip-block.is-muted::before {
  content: "MUTED";
  position: absolute;
  left: 10px;
  bottom: 7px;
  z-index: 8;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 80, 80, 0.32);
  border: 1px solid rgba(255, 120, 120, 0.55);
  border-radius: 999px;
  padding: 2px 7px;
  pointer-events: none;
}

.clip-mute-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 12;

  width: 22px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);

  background: rgba(8, 4, 18, 0.72);
  color: rgba(255, 255, 255, 0.88);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.clip-mute-btn:hover {
  border-color: rgba(255, 111, 111, 0.9);
  background: rgba(255, 80, 80, 0.34);
}

.clip-block.is-muted .clip-mute-btn {
  background: rgba(255, 80, 80, 0.72);
  border-color: rgba(255, 150, 150, 0.95);
  color: #ffffff;
}

/* =========================================================
   CLIP GAIN CONTROLS — RESPONSIVE
   Fixes small/trimmed clips cutting off fixed-size dB controls.
   ========================================================= */

.clip-gain-controls {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 13;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  max-width: calc(100% - 12px);
  min-width: 0;

  padding: 2px 4px;
  border-radius: 999px;

  background: rgba(8, 4, 18, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

  overflow: hidden;
}

.clip-gain-btn {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(165, 124, 255, 0.22);
  color: rgba(255, 255, 255, 0.95);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.clip-gain-btn:hover {
  background: rgba(165, 124, 255, 0.52);
  border-color: rgba(227, 144, 255, 0.85);
}

.clip-gain-label {
  flex: 0 1 auto;

  min-width: 38px;
  max-width: 52px;

  text-align: center;

  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.9);
  user-select: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wide clips: full - / dB / + control */
.clip-block--gain-full .clip-gain-controls {
  opacity: 1;
}

/* Medium clips: show only - and +, hide dB text */
.clip-block--gain-compact .clip-gain-controls {
  right: 5px;
  bottom: 5px;
  gap: 2px;
  padding: 2px 3px;
}

.clip-block--gain-compact .clip-gain-label {
  display: none;
}

.clip-block--gain-compact .clip-gain-btn {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

/* Tiny clips: hide gain UI so the clip does not look broken.
   Keyboard shortcuts [ and ] still work after selecting the clip. */
.clip-block--gain-tiny .clip-gain-controls {
  display: none;
}

.clip-block--gain-tiny.is-selected {
  outline-offset: 1px;
}

/* Clip fade indicators */
.clip-block.has-fade-in {
  box-shadow:
    inset 10px 0 18px rgba(75, 255, 185, 0.22),
    0 0 14px rgba(165, 124, 255, 0.35);
}

.clip-block.has-fade-out {
  box-shadow:
    inset -10px 0 18px rgba(255, 179, 106, 0.22),
    0 0 14px rgba(165, 124, 255, 0.35);
}

.clip-block.has-fade-in.has-fade-out {
  box-shadow:
    inset 10px 0 18px rgba(75, 255, 185, 0.22),
    inset -10px 0 18px rgba(255, 179, 106, 0.22),
    0 0 14px rgba(165, 124, 255, 0.35);
}

.clip-fade-badge {
  position: absolute;
  z-index: 14;

  top: 6px;
  padding: 2px 6px;
  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;

  color: rgba(255, 255, 255, 0.92);
  background: rgba(8, 4, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);

  pointer-events: none;
  user-select: none;
}

.clip-fade-in-badge {
  left: 8px;
  border-color: rgba(75, 255, 185, 0.55);
}

.clip-fade-out-badge {
  right: 8px;
  border-color: rgba(255, 179, 106, 0.58);
}

/* Trim handles */
.clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: auto;
}

.clip-handle.left {
  left: -4px;
  cursor: ew-resize;
}

.clip-handle.right {
  right: -4px;
  cursor: ew-resize;
}

/* Visual grip so you can see the handle */
.clip-handle::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 3px;
  right: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Waveform drawn inside each clip (FL-style) */
.clip-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}
/* Make SmartTune tabs visible when selected */
.smart-panel[data-tab="core"] .tab-core {
    display: block !important;
}
.smart-panel[data-tab="pro"] .tab-pro {
    display: block !important;
}
.smart-panel[data-tab="router"] .tab-router {
    display: block !important;
}

/* Hide non-active SmartTune tabs */
.tab-core,
.tab-pro,
.tab-router {
    display: none;
}

.track-smart-btn:hover {
  background: #3a3a3a;
}

/* ============================================================
   PREMIUM VIBERO TRACK CONTROL BUTTONS
   ============================================================ */

/* =========================
   TRACK MIC BUTTON (MODERN)
   ========================= */

.track-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 26px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(165, 124, 255, 0.45);

  background: radial-gradient(
    circle at top,
    #1a0f37 0%,
    #070310 80%
  );

  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(165, 124, 255, 0.25);

  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

/* Hover lift */
.track-mic-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 124, 255, 0.7);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(165, 124, 255, 0.45);
}
/* =========================
   TRACK RECORD ARM BUTTON
   ========================= */

.track-recarm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  border-radius: 999px;
  border: 1px solid rgba(255, 110, 110, 0.45);

  background: radial-gradient(
    circle at top,
    #1a0f37 0%,
    #070310 80%
  );

  color: #ff6f6f;
  font-size: 14px;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(255, 110, 110, 0.25);

  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

/* Hover lift */
.track-recarm-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 110, 110, 0.75);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(255, 110, 110, 0.45);
}
/* =========================
   TRACK SMARTTUNE BUTTON
   ========================= */

.track-smart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 26px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(165, 124, 255, 0.45);

  background: radial-gradient(
    circle at top,
    #1a0f37 0%,
    #070310 80%
  );

  color: rgba(165, 124, 255, 0.95);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 10px rgba(165, 124, 255, 0.25);

  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

/* Hover lift */
.track-smart-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 124, 255, 0.8);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(165, 124, 255, 0.45);
}

/* =========================
   MIC ARMED (ACTIVE STATE)
   ========================= */

.track-mic-btn.mic-armed {
  background: radial-gradient(
    circle at top,
    #63e9ff 0%,
    #034b58 85%
  );

  border-color: rgba(99, 233, 255, 0.95);
  color: #ffffff;

  box-shadow:
    0 0 14px rgba(99, 233, 255, 0.9),
    0 0 28px rgba(99, 233, 255, 0.55);
}

.track-controls button {
  position: relative;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;

  background: radial-gradient(circle at top, #1a0f37, #0a0318 80%);
  color: #ffffff;

  border: 1px solid rgba(165, 124, 255, 0.35);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.08),
    0 0 10px rgba(165,124,255,0.25);

  transition: 0.18s ease;
}

/* Hover lift */
.track-controls button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.12),
    0 0 14px rgba(165,124,255,0.45);
}

/* -----------------------
   REC ARMED (Premium Red)
   ----------------------- */

.track-recarm-btn.rec-armed {
  background: radial-gradient(circle at top, #ff4d4d, #7a0000 85%);
  border-color: rgba(255, 85, 85, 0.95);
  color: #ffffff;

  box-shadow:
    0 0 14px rgba(255, 60, 60, 0.9),
    0 0 28px rgba(255, 60, 60, 0.55);
}

/* Pulse effect when armed */
.track-recarm-btn.rec-armed::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: rgba(255, 60, 60, 0.25);
  filter: blur(10px);
  animation: recPulse 1.4s ease-in-out infinite;
}

@keyframes recPulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

/* -----------------------
   MIC ARMED (Premium Cyan)
   ----------------------- */

.track-mic-btn.mic-armed {
  background: radial-gradient(circle at top, #63e9ff, #034b58 85%);
  border-color: rgba(99, 233, 255, 0.95);
  color: #ffffff;

  box-shadow:
    0 0 14px rgba(99,233,255,0.9),
    0 0 28px rgba(99,233,255,0.55);
}

/* -----------------------
   ST Active (Premium Vibero Purple)
   ----------------------- */

.track-smart-btn.smarttune-on {
  background: radial-gradient(circle at top, #b57dff, #4a1c80 85%);
  border-color: rgba(181,150,255, 0.95);
  color: white;

  box-shadow:
    0 0 14px rgba(181,150,255,0.9),
    0 0 28px rgba(181,150,255,0.55);
}
/* FINAL SMARTTUNE TEXT SAFETY */
.smarttune-panel * {
  box-sizing: border-box;
}

/* =========================
   SMARTTUNE / MIXER PANEL
   SAFE BASELINE LAYOUT
   ========================= */

.panel-view-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* =========================
   SONG GEN VIEW (Scroll-safe)
   ========================= */

#songGenView {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#songGenView .songgen-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

#songGenView .songgen-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px; /* gives space for scrollbar */
}

.songgen-output {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);

  white-space: pre-wrap;
  word-break: break-word;

  max-height: 260px;   /* key: keeps panel usable */
  overflow-y: auto;    /* key: output scrolls */
  line-height: 1.35;
}

#smarttuneView,
#mixerView,
#songGenView {
  display: block;
  width: 100%;
  box-sizing: border-box;
}




/* Hard guarantee hidden panels do not render */
#smarttuneView[hidden],
#mixerView[hidden],
#songGenView[hidden] {
  display: none !important;
}
/* =========================
   MASTER MIXER CHANNEL
   ========================= */

.mixer-channel-master {
  width: 92px;
  background: linear-gradient(
    180deg,
    rgba(120, 90, 255, 0.18),
    rgba(20, 10, 45, 0.95)
  );
  border-left: 2px solid rgba(160, 130, 255, 0.6);
}

.mixer-meter-master {
  background: linear-gradient(
    180deg,
    rgba(180, 140, 255, 0.35),
    rgba(60, 30, 120, 0.9)
  );
}

.mixer-fader-master {
  accent-color: #b58aff;
}

/* =========================================================
   TRACK PILL ROUTING – MODERN OVERRIDE
   (MIC / ST / BUS / MONO pills)
   ========================================================= */

.track-pill .ghost-pill {
  height: 22px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03)
  );

  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;

  color: rgba(255, 255, 255, 0.95);

  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.06),
    0 0 10px rgba(165, 124, 255, 0.22);

  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

.track-pill .ghost-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.track-pill .ghost-pill.ghost-pill-active,
.track-pill .ghost-pill.active {
  background: radial-gradient(circle at top, #a57cff 0%, #ff63c9 90%);
  color: #050109;
  border-color: transparent;

  box-shadow:
    0 0 14px rgba(165, 124, 255, 0.85),
    0 0 26px rgba(255, 99, 201, 0.6);
}
/* ============================================================
   FINAL TRACK BUTTON OVERRIDES (AUTHORITATIVE)
   This block MUST be last in daw.css
   ============================================================ */

/* MIC */
.track-mic-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 26px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(165, 124, 255, 0.45) !important;

  background: radial-gradient(circle at top, #1a0f37 0%, #070310 80%) !important;

  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;

  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.08),
    0 0 10px rgba(165,124,255,0.25) !important;
}

/* RECORD */
.track-recarm-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 26px !important;
  height: 26px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 110, 110, 0.45) !important;

  background: radial-gradient(circle at top, #1a0f37 0%, #070310 80%) !important;

  color: #ff6f6f !important;
  font-size: 14px !important;
}

/* SMARTTUNE */
.track-smart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 26px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(165, 124, 255, 0.45) !important;

  background: radial-gradient(circle at top, #1a0f37 0%, #070310 80%) !important;

  color: rgba(165, 124, 255, 0.95) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;

  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.08),
    0 0 10px rgba(165,124,255,0.25) !important;
}
/* =========================================================
   MIC BUTTON — HARD OVERRIDE (FINAL)
   ========================================================= */

.track-controls button.track-mic-btn.mic-armed {
  background: radial-gradient(
    circle at top,
    #63e9ff 0%,
    #034b58 85%
  ) !important;

  border-color: rgba(99, 233, 255, 0.95) !important;
  color: #ffffff !important;

  box-shadow:
    0 0 14px rgba(99, 233, 255, 0.9),
    0 0 28px rgba(99, 233, 255, 0.55) !important;
}
/* =========================================================
   SMARTTUNE ACTIVE — HARD OVERRIDE (PURPLE)
   ========================================================= */

.track-controls button.track-smart-btn.smarttune-on {
  background: radial-gradient(
    circle at top,
    #b57dff 0%,
    #4a1c80 85%
  ) !important;

  border-color: rgba(181, 150, 255, 0.95) !important;
  color: #ffffff !important;

  box-shadow:
    0 0 14px rgba(181, 150, 255, 0.9),
    0 0 28px rgba(181, 150, 255, 0.55) !important;
}
/* =========================
   REMOVE UNUSED PLACEHOLDER BUTTONS
   ========================= */

/* Tracks panel header useless icon */
.tracks-panel .panel-header button:not(.ghost-btn) {
  display: none !important;
}
@keyframes viberoClipPop {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0; }
}

.clip-block.is-deleting {
  animation: viberoClipPop 90ms ease forwards;
}
/* =========================
   RIGHT PANEL TAB CUT-OFF FIX
   ========================= */

/* Give the right panel enough room for 4 tabs when space allows */
.daw-inner {
  grid-template-columns:
    minmax(180px, 0.8fr)
    minmax(520px, 2.1fr)
    minmax(250px, 1fr);
}

/* Allow SmartTune / Mixer / Song Gen / Voice Model tabs to wrap instead of clipping */
.smarttune-tab-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

/* Make right-panel tab pills smaller and non-clipping */
.smarttune-tab-row .ghost-pill,
.smarttune-tab-row .ghost-pill-small {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 112px;
  padding: 5px 8px;
  font-size: 8px;
  line-height: 1.05;
  letter-spacing: 0.08em;
  white-space: normal;
  text-align: center;
  overflow: visible;
}

/* Keep the right panel header from hiding wrapped tabs */
.smarttune-header,
.smarttune-panel .panel-header {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  overflow: visible;
}

/* Prevent the SmartTune title from stealing tab width */
.smarttune-title-row {
  width: 100%;
  justify-content: center;
}
/* ============================
   Mic Permission Button
   ============================ */

.mic-permission-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(181, 150, 255, 0.35);
  background: radial-gradient(circle at top, rgba(36, 16, 64, 0.75), rgba(9, 2, 21, 0.85));
}

.mic-permission-status {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.mic-permission-status--ok {
  color: var(--accent-green);
}

.mic-permission-status--error {
  color: var(--accent-red);
}
/* =========================================================
   VIBERO UI REVAMP PASS 1
   Goal:
   - Fix M / S track buttons visibility
   - Reduce DAW clutter
   - Make panels feel cleaner and more professional
   - Keep current HTML/JS working
   ========================================================= */

/* Make the whole DAW breathe more on wider screens */
.daw-shell {
  padding: 4px 10px 14px;
}

.daw-inner {
  max-width: 1320px;
  height: calc(100vh - 76px);
  border-radius: 30px;
  padding: 16px 20px 18px;
  column-gap: 14px;

  grid-template-columns:
    minmax(235px, 0.95fr)
    minmax(560px, 2.25fr)
    minmax(280px, 1.05fr);
}

/* Slightly cleaner panels */
.panel {
  border-radius: 22px;
  padding: 12px 12px 14px;
}

.panel-header {
  margin-bottom: 9px;
}

/* Top bar: less spread, cleaner button spacing */
.top-bar {
  padding: 12px 18px 8px;
  gap: 12px;
}

.ghost-btn-small,
.primary-btn-small {
  padding: 5px 10px;
  font-size: 9px;
  letter-spacing: 0.10em;
}

/* Left track panel: reduce metadata clutter */
.tracks-meta {
  gap: 6px;
  margin-bottom: 10px;
}

.meta-label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.meta-value {
  font-size: 10px;
}

.track-list-header {
  margin-bottom: 5px;
}

.track-header-label {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Track rows: tighter and cleaner */
.track-row {
  margin-bottom: 10px;
  gap: 4px;
}

/* FIX: five controls now fit: REC / MIC / ST / M / S */
.track-controls {
  display: grid;
  grid-template-columns: 24px 42px 30px 24px 24px;
  gap: 4px;
  padding-left: 0;
  align-items: center;
  justify-content: end;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.track-controls button {
  height: 22px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 999px;

  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.04em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Exact button widths so M/S never get cut off */
.track-recarm-btn {
  width: 24px;
  padding: 0 !important;
}

.track-mic-btn {
  width: 42px;
  padding: 0 !important;
}

.track-smart-btn {
  width: 30px;
  padding: 0 !important;
}

.track-mute-btn,
.track-solo-btn {
  width: 24px;
  padding: 0 !important;
  font-weight: 800;
}

/* Track pills: less bulky, more professional */
.track-pill {
  min-height: 58px;
  margin-bottom: 0;
  padding: 9px 8px;
  gap: 8px;
  border-radius: 14px;
  align-items: center;
}

.track-pill-color {
  width: 11px;
  height: 40px;
  flex: 0 0 auto;
}

.track-pill-main {
  min-width: 0;
  flex: 1;
}

.track-pill-name {
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-pill-sub {
  font-size: 8.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-pill-meta {
  max-width: 62px;
  flex: 0 0 auto;
  gap: 3px;
}

.track-tag {
  max-width: 62px;
  font-size: 7.5px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-load-btn {
  margin-left: 2px;
  padding: 3px 7px;
}

/* Stronger visual states for M / S without making them huge */
.track-mute-btn.track-muted,
.track-mute-btn.active {
  background: rgba(255, 111, 111, 0.36);
  border-color: rgba(255, 111, 111, 0.95);
  box-shadow: 0 0 10px rgba(255, 111, 111, 0.55);
}

.track-solo-btn.track-soloed,
.track-solo-btn.active {
  background: rgba(255, 179, 106, 0.38);
  border-color: rgba(255, 179, 106, 0.95);
  box-shadow: 0 0 10px rgba(255, 179, 106, 0.55);
}

/* Timeline toolbar: make edit controls feel like one clean tool strip */
.timeline-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;

  margin-bottom: 7px;
  padding: 4px;

  border-radius: 999px;
  background: rgba(10, 4, 24, 0.42);
  border: 1px solid rgba(181, 150, 255, 0.18);
}

.timeline-toggle-btn {
  font-size: 8.5px;
  padding: 4px 8px;
  letter-spacing: 0.08em;
}

/* Make Reset Fades less dominant */
#btnResetClipFades {
  opacity: 0.82;
}

/* Make Undo visually important but not huge */
#btnUndoEdit {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.075);
}

/* Timeline area: slightly cleaner and less heavy */
.timeline-bars {
  border-radius: 17px;
  padding: 8px 10px;
}

.timeline-bars-inner {
  border-radius: 12px;
}

.timeline-lane {
  min-height: 46px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.timeline-lane-label {
  font-size: 9px;
  letter-spacing: 0.10em;
}

.timeline-lane-index {
  font-size: 8px;
  padding: 2px 6px;
}

/* Transport: less chunky */
.timeline-transport {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 14px;
}

.transport-btn {
  width: 29px;
  height: 29px;
}

.transport-btn-main {
  width: 37px;
  height: 37px;
}

/* Right panel tab row: prevent ugly crowding */
.smarttune-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.smarttune-tab-row .ghost-pill-small {
  font-size: 8px;
  padding: 4px 7px;
  letter-spacing: 0.07em;
}

/* Right panel form controls: compact */
.smarttune-io {
  gap: 7px;
}

.smarttune-io-label,
.smarttune-display-label,
.smarttune-label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* Keep the whole app from feeling like every card is screaming */
.track-pill,
.timeline-bars,
.smarttune-panel,
.tracks-panel,
.timeline-panel {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.68);
}
/* =========================================================
   VIBERO UI REVAMP PASS 1.1
   Track controls centered + readable track pill text
   ========================================================= */

/* Center REC / MIC / ST / M / S above each track pill */
.track-controls {
  display: grid !important;
  grid-template-columns: 24px 44px 32px 26px 26px !important;
  gap: 5px !important;

  width: max-content !important;
  max-width: 100% !important;

  margin: 0 auto 3px auto !important;
  padding-left: 0 !important;

  justify-content: center !important;
  align-items: center !important;
}

/* Make the buttons consistent and fully visible */
.track-controls button {
  height: 23px !important;
  min-width: 0 !important;
  border-radius: 999px !important;

  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Exact control sizing */
.track-recarm-btn {
  width: 24px !important;
  padding: 0 !important;
}

.track-mic-btn {
  width: 44px !important;
  padding: 0 !important;
}

.track-smart-btn {
  width: 32px !important;
  padding: 0 !important;
}

.track-mute-btn,
.track-solo-btn {
  width: 26px !important;
  padding: 0 !important;
}

/* Give each row better vertical rhythm */
.track-row {
  gap: 5px !important;
  margin-bottom: 12px !important;
}

/* Track pill: slightly taller so the text can breathe */
.track-pill {
  min-height: 66px !important;
  padding: 11px 10px !important;
  gap: 9px !important;
  align-items: center !important;
}

/* Enlarge the main track name */
.track-pill-name {
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Enlarge subtitle but keep it secondary */
.track-pill-sub {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  color: rgba(255, 255, 255, 0.62) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Make the colored strip fit the larger text */
.track-pill-color {
  width: 12px !important;
  height: 44px !important;
}

/* Keep routing badges readable but not dominant */
.track-pill-meta {
  max-width: 70px !important;
  gap: 4px !important;
}

.track-tag {
  max-width: 70px !important;
  font-size: 8px !important;
  padding: 2px 6px !important;
}

/* Make the load button less visually loud */
.track-load-btn {
  transform: scale(0.92);
  opacity: 0.88;
}
/* =========================================================
   VIBERO UI REVAMP PASS 2
   Cleaner timeline edit toolbar
   No HTML/JS changes required
   ========================================================= */

/* Make timeline toolbar look like a professional edit strip */
.timeline-toolbar {
  justify-content: center !important;
  gap: 6px !important;

  padding: 5px 7px !important;
  margin-bottom: 8px !important;

  border-radius: 999px !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(7, 2, 18, 0.74) !important;

  border: 1px solid rgba(181, 150, 255, 0.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

/* Base toolbar buttons */
.timeline-toolbar .timeline-toggle-btn {
  height: 24px !important;
  padding: 0 10px !important;

  border-radius: 999px !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.075em !important;

  background: rgba(18, 8, 40, 0.78) !important;
  border: 1px solid rgba(181, 150, 255, 0.26) !important;
  color: rgba(255, 255, 255, 0.78) !important;

  box-shadow: none !important;
}

.timeline-toolbar .timeline-toggle-btn:hover {
  background: rgba(50, 25, 95, 0.82) !important;
  border-color: rgba(227, 144, 255, 0.58) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Disabled Clean Lanes should fade into the background */
#timelineViewToggle {
  opacity: 0.38 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

/* Split + Duplicate = edit group */
#btnSplitClip,
#btnDuplicateClip {
  border-color: rgba(165, 124, 255, 0.42) !important;
}

/* Fade group = slightly different tint */
#btnFadeInClip,
#btnFadeOutClip,
#btnResetClipFades {
  background: rgba(24, 10, 48, 0.78) !important;
  border-color: rgba(255, 179, 106, 0.25) !important;
}

/* Reset Fades should be smaller visually */
#btnResetClipFades {
  opacity: 0.68 !important;
}

/* Undo = history action, make it readable and separate */
#btnUndoEdit {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Add subtle separators before Fade group and Undo */
#btnFadeInClip {
  margin-left: 8px !important;
  position: relative;
}

#btnFadeInClip::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

#btnUndoEdit {
  margin-left: 8px !important;
  position: relative;
}

#btnUndoEdit::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

/* Make toolbar wrap cleanly on smaller widths */
@media (max-width: 1200px) {
  .timeline-toolbar {
    border-radius: 18px !important;
    justify-content: flex-start !important;
  }

  #btnFadeInClip,
  #btnUndoEdit {
    margin-left: 0 !important;
  }

  #btnFadeInClip::before,
  #btnUndoEdit::before {
    display: none !important;
  }
}
/* =========================================================
   VIBERO UI REVAMP PASS 3
   Right panel cleanup: SmartTune / Mixer / SongGen / Voice Model
   No HTML/JS changes required
   ========================================================= */

/* Prevent ugly horizontal scrolling in the right panel */
.smarttune-panel,
.smarttune-panel * {
  max-width: 100%;
  box-sizing: border-box;
}

.smarttune-panel {
  overflow: hidden !important;
}

/* Main right panel content area */
.panel-view-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px;
}

/* Cleaner scrollbars */
.panel-view-container::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}

.panel-view-container::-webkit-scrollbar-thumb {
  background: rgba(165, 124, 255, 0.55);
  border-radius: 999px;
}

.panel-view-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Right panel header: tighter and more premium */
.smarttune-header {
  margin-bottom: 8px !important;
  gap: 6px !important;
}

.smarttune-title-row {
  justify-content: center;
  margin-bottom: 4px;
}

.smarttune-title-row .panel-title,
.smarttune-header .panel-title {
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  opacity: 0.82;
}

/* Tabs: make them cleaner and less cramped */
.smarttune-tab-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  justify-content: stretch !important;
}

.smarttune-tab-row .ghost-pill-small {
  width: 100% !important;
  justify-content: center !important;

  height: 22px !important;
  padding: 0 6px !important;

  font-size: 7.8px !important;
  font-weight: 750 !important;
  letter-spacing: 0.055em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SmartTune body spacing */
.smarttune-body {
  gap: 10px !important;
}

/* Input / output selects cleaner */
.smarttune-io {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.smarttune-io-block {
  min-width: 0 !important;
}

.smarttune-io-label {
  font-size: 8.5px !important;
  letter-spacing: 0.13em !important;
  margin-bottom: 4px !important;
}

.smarttune-io-select {
  width: 100% !important;
  height: 24px !important;
  font-size: 8.5px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
}

/* Mic permission row */
.mic-permission-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(10, 4, 24, 0.42) !important;
  border: 1px solid rgba(181, 150, 255, 0.16) !important;
}

.mic-permission-row .ghost-btn-small {
  width: 100% !important;
  justify-content: center !important;
  font-size: 8px !important;
  padding: 5px 6px !important;
}

.mic-permission-status {
  font-size: 8.5px !important;
  line-height: 1.2 !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

/* SmartTune key/display box */
.smarttune-display {
  border-radius: 14px !important;
  padding: 10px 11px !important;
  margin-bottom: 8px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(7, 2, 18, 0.72) !important;

  border: 1px solid rgba(181, 150, 255, 0.24) !important;
}

.smarttune-key-label,
.smarttune-display-label {
  font-size: 8.5px !important;
  letter-spacing: 0.14em !important;
  opacity: 0.72;
}

.smarttune-key-value,
.smarttune-display-value {
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  font-weight: 750 !important;
}

/* Slider rows: compact and aligned */
.smarttune-control,
.smarttune-slider-row {
  margin-bottom: 8px !important;
}

.smarttune-label {
  font-size: 8.5px !important;
  letter-spacing: 0.13em !important;
}

.smarttune-value {
  font-size: 9px !important;
  font-weight: 750 !important;
}

/* Sliders feel less bulky */
.smarttune-slider,
input[type="range"] {
  height: 4px !important;
}

/* Core / Pro / Routing tabs inside SmartTune */
.smarttune-mode-tabs,
.smarttune-inner-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;

  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(10, 4, 24, 0.48) !important;
  border: 1px solid rgba(181, 150, 255, 0.18) !important;
}

.smarttune-tab,
.smarttune-mode-tabs button,
.smarttune-inner-tabs button {
  min-width: 0 !important;
  height: 21px !important;
  padding: 0 6px !important;

  font-size: 7.8px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* AI Mix card cleanup */
.ai-mix-card,
.aimix-card,
.smarttune-card,
.mixer-card,
.songgen-card,
.voice-model-card {
  border-radius: 14px !important;
  padding: 10px !important;
  margin-top: 9px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(7, 2, 18, 0.68) !important;

  border: 1px solid rgba(181, 150, 255, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

/* AI Mix labels/buttons */
.ai-mix-card .panel-title,
.aimix-card .panel-title,
.smarttune-card .panel-title {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}

.ai-mix-card button,
.aimix-card button,
.mixer-card button,
.songgen-card button,
.voice-model-card button {
  min-height: 25px !important;
  font-size: 8.2px !important;
  letter-spacing: 0.07em !important;
}

/* Preset select/input fields */
.smarttune-panel select,
.smarttune-panel input,
.smarttune-panel textarea {
  max-width: 100% !important;
  font-size: 9px !important;
}

/* Bottom routing/status rows: make them less loud */
.smarttune-routing-row,
.routing-row,
.status-row {
  min-height: 23px !important;
  padding: 4px 7px !important;

  font-size: 8px !important;
  letter-spacing: 0.08em !important;

  background: rgba(255, 255, 255, 0.028) !important;
  border-radius: 8px !important;
}

/* Prevent long labels from pushing panel wide */
.smarttune-panel span,
.smarttune-panel label,
.smarttune-panel div,
.smarttune-panel button {
  min-width: 0;
}

/* Mobile/smaller desktop safety */
@media (max-width: 1200px) {
  .daw-inner {
    grid-template-columns:
      minmax(220px, 0.95fr)
      minmax(520px, 2.2fr)
      minmax(260px, 1fr);
  }

  .smarttune-tab-row {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* =========================================================
   VIBERO UI REVAMP PASS 4
   Song Gen + Voice Model tab cleanup
   No HTML/JS changes required
   ========================================================= */

/* Shared cleanup for Song Gen + Voice Model views */
#songGenView,
#voiceModelView {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#songGenView *,
#voiceModelView * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Main tab titles */
#songGenView .panel-title,
#voiceModelView .panel-title,
#songGenView h1,
#songGenView h2,
#songGenView h3,
#voiceModelView h1,
#voiceModelView h2,
#voiceModelView h3 {
  margin: 0 0 4px 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Subtitle text */
#songGenView .panel-sub,
#voiceModelView .panel-sub,
#songGenView .voice-model-note,
#voiceModelView .voice-model-note,
#songGenView small,
#voiceModelView small {
  font-size: 8.5px !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.56) !important;
}

/* Turn raw labels into proper DAW labels */
#songGenView label,
#voiceModelView label,
.songgen-label {
  display: block !important;
  margin: 8px 0 4px !important;

  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  color: rgba(255, 255, 255, 0.62) !important;
}

/* Inputs/selects/textareas: remove raw white browser look */
#songGenView input,
#songGenView select,
#songGenView textarea,
#voiceModelView input,
#voiceModelView select,
#voiceModelView textarea,
.songgen-input,
.songgen-textarea {
  width: 100% !important;

  border-radius: 10px !important;
  border: 1px solid rgba(181, 150, 255, 0.30) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    ),
    rgba(8, 3, 21, 0.86) !important;

  color: rgba(255, 255, 255, 0.92) !important;

  font-size: 9.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

#songGenView input,
#songGenView select,
#voiceModelView input,
#voiceModelView select,
.songgen-input {
  height: 28px !important;
  padding: 0 9px !important;
}

#songGenView textarea,
#voiceModelView textarea,
.songgen-textarea {
  min-height: 64px !important;
  max-height: 110px !important;
  resize: vertical !important;
  padding: 8px 9px !important;
}

/* Focus state */
#songGenView input:focus,
#songGenView select:focus,
#songGenView textarea:focus,
#voiceModelView input:focus,
#voiceModelView select:focus,
#voiceModelView textarea:focus {
  border-color: rgba(227, 144, 255, 0.72) !important;
  box-shadow:
    0 0 0 2px rgba(227, 144, 255, 0.12),
    0 0 16px rgba(227, 144, 255, 0.18) !important;
}

/* Placeholder color */
#songGenView ::placeholder,
#voiceModelView ::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

/* Song Gen form layout */
#songGenView {
  padding-top: 2px !important;
}

#songGenPrompt {
  min-height: 72px !important;
}

/* Make genre / mood / length stack cleanly */
#songGenGenre,
#songGenMood,
#songGenLength {
  margin-bottom: 2px !important;
}

/* Explicit checkbox row */
#songGenView input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
  accent-color: #ff63c9 !important;
  box-shadow: none !important;
}

/* Buttons inside Song Gen + Voice Model */
#songGenView button,
#voiceModelView button,
.ai-btn {
  min-height: 28px !important;
  padding: 0 11px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.02)
    ),
    rgba(18, 8, 40, 0.82) !important;

  color: rgba(255, 255, 255, 0.90) !important;

  font-size: 8.8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

#songGenView button:hover,
#voiceModelView button:hover,
.ai-btn:hover {
  border-color: rgba(227, 144, 255, 0.72) !important;
  background:
    linear-gradient(
      180deg,
      rgba(227, 144, 255, 0.24),
      rgba(165, 124, 255, 0.12)
    ),
    rgba(18, 8, 40, 0.86) !important;
}

/* Primary action buttons */
#btnSongGen,
#btnCreateVoiceModel,
.ai-btn--emphasis {
  background:
    linear-gradient(135deg, rgba(255, 99, 201, 0.90), rgba(165, 124, 255, 0.85)) !important;
  border-color: transparent !important;
  color: #080313 !important;
  box-shadow: 0 0 18px rgba(255, 99, 201, 0.36) !important;
}

/* Song Gen output selector + single generate button */
.songgen-output-mode {
  margin-top: 8px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#songGenEngineMode.songgen-select,
#songGenVoiceMode.songgen-select,
#songGenOutputMode.songgen-select {
  width: 100% !important;
  height: 30px !important;

  padding: 0 10px !important;
  border-radius: 11px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(8, 3, 21, 0.92) !important;

  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;

  outline: none !important;
  cursor: pointer !important;
}

#songGenEngineMode.songgen-select option,
#songGenVoiceMode.songgen-select option,
#songGenOutputMode.songgen-select option {
  background: #140724 !important;
  color: #ffffff !important;
}

#songGenVoiceMode option:disabled {
  color: rgba(196, 190, 210, 0.48) !important;
  cursor: not-allowed;
}

.songgen-voice-warning {
  margin-top: 7px;
  color: #e8bb72;
  font-size: 11px;
  line-height: 1.4;
}

#btnSongGen.songgen-generate-btn {
  width: 100% !important;
  margin-top: 8px !important;
}

/* Song Gen status */
#songGenStatus,
.voice-model-status {
  margin-top: 8px !important;
  min-height: 24px !important;

  display: flex !important;
  align-items: center !important;

  padding: 6px 8px !important;
  border-radius: 10px !important;

  font-size: 8.5px !important;
  line-height: 1.25 !important;

  color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(181, 150, 255, 0.14) !important;
}

/* Song Gen output box */
#songGenOutput {
  width: 100% !important;
  min-height: 82px !important;
  max-height: 160px !important;

  margin-top: 8px !important;
  padding: 9px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(181, 150, 255, 0.22) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    ),
    rgba(4, 1, 12, 0.82) !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
  font-size: 8.4px !important;
  line-height: 1.35 !important;

  overflow: auto !important;
  white-space: pre-wrap !important;
}

/* Voice Model cards */
.voice-model-card {
  margin-top: 10px !important;
  padding: 11px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(181, 150, 255, 0.22) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    ),
    rgba(7, 2, 18, 0.72) !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30) !important;
}

/* Voice card kicker */
.voice-model-kicker {
  margin-bottom: 7px !important;

  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;

  color: rgba(227, 144, 255, 0.78) !important;
}

/* Voice upload/record row */
#btnVoiceRecordSample,
#btnVoiceUploadSample {
  width: calc(50% - 4px) !important;
  margin-top: 8px !important;
}

#btnVoiceRecordSample {
  margin-right: 4px !important;
}

#btnVoiceUploadSample {
  margin-left: 4px !important;
}

/* Voice model create button full width */
#btnCreateVoiceModel {
  width: 100% !important;
  margin-top: 4px !important;
}

/* Active voice area */
#voiceModelSelect {
  margin-bottom: 8px !important;
}

#btnUseVoiceForSongGen {
  width: 100% !important;
}

/* Legal/permission note */
.voice-model-note {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

  font-size: 8px !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.50) !important;
}

/* Fix label + input crowding in Voice Model Step 2 */
#voiceModelView .voice-model-card label {
  margin-top: 7px !important;
}

#voiceModelName,
#voiceModelDescription {
  display: block !important;
  width: 100% !important;
}

/* Keep textareas from looking like white raw boxes on Chromium */
textarea#songGenPrompt,
textarea#voiceModelDescription {
  background-color: rgba(8, 3, 21, 0.88) !important;
}

/* Hide any accidental raw file input */
#voiceSampleInput {
  display: none !important;
}


/* =========================================================
   SMARTTUNE CORE / PRO / ROUTING TAB ALIGNMENT FIX
   CSS-only. Keeps current JS and tab behavior.
   ========================================================= */

#smarttuneView .smarttune-tabs {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;

  gap: 4px !important;
  padding: 4px !important;
  margin: 8px 0 10px !important;

  border-radius: 999px !important;
  background: rgba(10, 4, 24, 0.72) !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

#smarttuneView .smarttune-tab {
  width: 100% !important;
  min-width: 0 !important;
  height: 23px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 6px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  border: none !important;

  font-size: 8.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.075em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  background: transparent !important;
  color: rgba(255, 255, 255, 0.68) !important;

  box-sizing: border-box !important;
}

#smarttuneView .smarttune-tab.smarttune-tab--active {
  background: linear-gradient(135deg, #ff63c9 0%, #a57cff 100%) !important;
  color: #07020f !important;
  box-shadow:
    0 0 12px rgba(255, 99, 201, 0.38),
    0 0 18px rgba(165, 124, 255, 0.24) !important;
}

#smarttuneView .smarttune-tab-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
/* =========================================================
   VIBERO MIXER TAB — FINAL PROFESSIONAL RESET
   One source of truth.
   Goals:
   - Mixer strips use the full vertical height
   - Volume faders are longer and easier to grab
   - Pan controls are bigger and usable
   - Keep native fader JS behavior
   - Keep horizontal mixer scrolling
   ========================================================= */

/* Right panel view container must let Mixer fill the panel */
.panel-view-container {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Mixer view fills the entire right panel content area */
#mixerView {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* Mixer body is the horizontal scroll area */
#mixerView .mixer-body {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  align-items: stretch !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding: 10px 8px 14px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.85) rgba(5, 1, 14, 0.78) !important;
}

/* Horizontal mixer scrollbar */
#mixerView .mixer-body::-webkit-scrollbar {
  height: 9px !important;
}

#mixerView .mixer-body::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.78) !important;
  border-radius: 999px !important;
}

#mixerView .mixer-body::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

/* Channel row: always one horizontal row */
#mixerView .mixer-channels {
  height: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  gap: 12px !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* Mixer channel strip: taller, clean, professional */
#mixerView .mixer-channel,
#mixerView .mixer-channel-master {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;

  height: calc(100vh - 245px) !important;
  min-height: 560px !important;
  max-height: 690px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  padding: 12px 8px 14px !important;
  gap: 9px !important;

  border-radius: 20px !important;

  background:
    radial-gradient(circle at top, rgba(92, 48, 180, 0.62), rgba(18, 7, 39, 0.98) 62%),
    rgba(7, 2, 18, 0.98) !important;

  border: 1px solid rgba(165, 124, 255, 0.42) !important;

  box-shadow:
    inset 0 0 13px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(165, 124, 255, 0.18) !important;

  overflow: hidden !important;
}

/* Master strip accent only */
#mixerView .mixer-channel-master {
  border-color: rgba(190, 160, 255, 0.62) !important;
  background:
    radial-gradient(circle at top, rgba(130, 94, 245, 0.48), rgba(18, 7, 39, 0.98) 66%),
    rgba(7, 2, 18, 0.98) !important;
}

/* Header area stays compact so controls can be long */
#mixerView .mixer-channel-header {
  width: 100% !important;
  flex: 0 0 58px !important;
  min-height: 58px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 5px !important;
}

/* Channel title */
#mixerView .mixer-channel-header .meta-label {
  max-width: 72px !important;

  font-size: 10px !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: 0.075em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  color: rgba(255, 255, 255, 0.86) !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Bus tag */
#mixerView .mixer-channel-header .track-tag {
  max-width: 72px !important;
  padding: 3px 7px !important;

  font-size: 7.5px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0.045em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Level meter: longer, but not stealing the whole strip */
#mixerView .mixer-meter {
  position: relative !important;

  width: 22px !important;
  min-width: 22px !important;

  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  flex: 0 0 150px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(180deg, rgba(5, 1, 14, 0.96), rgba(11, 4, 31, 0.98)) !important;

  border: 1px solid rgba(165, 124, 255, 0.24) !important;

  overflow: hidden !important;

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.90),
    0 0 10px rgba(165, 124, 255, 0.12) !important;
}

#mixerView .mixer-meter-fill {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 55% !important;

  border-radius: 999px !important;

  background:
    linear-gradient(0deg, #ff63c9 0%, #d06dff 50%, #a57cff 100%) !important;

  box-shadow:
    0 0 12px rgba(255, 99, 201, 0.42),
    0 0 18px rgba(165, 124, 255, 0.28) !important;

  transition: height 80ms linear !important;
}

/* Main volume fader: much longer + easier to grab */
#mixerView .mixer-fader {
  display: block !important;

  writing-mode: bt-lr !important;
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;

  width: 44px !important;
  min-width: 44px !important;

  height: 265px !important;
  min-height: 265px !important;
  max-height: 265px !important;
  flex: 0 0 265px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  cursor: ns-resize !important;
  outline: none !important;

  /* Keep the current daw.js direction fix working */
  transform: rotate(180deg) !important;

  accent-color: #a57cff !important;

  background:
    repeating-linear-gradient(
      to top,
      rgba(255, 255, 255, 0.11) 0px,
      rgba(255, 255, 255, 0.11) 1px,
      transparent 1px,
      transparent 12px
    ) !important;

  border-radius: 999px !important;
}

/* Bigger fader thumb */
#mixerView .mixer-fader::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 24px !important;
  height: 24px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #decaff 18%, #a57cff 52%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.40) !important;

  box-shadow:
    0 0 13px rgba(165, 124, 255, 0.74),
    0 0 22px rgba(255, 99, 201, 0.34) !important;

  cursor: ns-resize !important;
}

#mixerView .mixer-fader::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #decaff 18%, #a57cff 52%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.40) !important;
}

/* Master fader accent */
#mixerView .mixer-fader-master {
  accent-color: #b58aff !important;
}

/* dB label */
#mixerView .mixer-db-label {
  width: 100% !important;
  min-height: 24px !important;
  flex: 0 0 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;

  color: rgba(255, 255, 255, 0.88) !important;
}

/* Pan control: larger and usable */
#mixerView .mixer-pan-control {
  width: 100% !important;

  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 10px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;

  opacity: 0.96 !important;
}

#mixerView .mixer-pan-label {
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  color: rgba(255, 255, 255, 0.56) !important;
}

#mixerView .mixer-pan-slider {
  width: 72px !important;
  height: 13px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      rgba(165, 124, 255, 0.38),
      rgba(5, 1, 14, 0.94) 48%,
      rgba(255, 99, 201, 0.38)
    ) !important;

  border: 1px solid rgba(165, 124, 255, 0.36) !important;
  outline: none !important;

  cursor: ew-resize !important;
  accent-color: #a57cff !important;
}

#mixerView .mixer-pan-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 20px !important;
  height: 20px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff, #bda2ff 30%, #a57cff 58%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.42) !important;

  box-shadow:
    0 0 10px rgba(165, 124, 255, 0.72),
    0 0 15px rgba(255, 99, 201, 0.34) !important;
}

#mixerView .mixer-pan-slider::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff, #bda2ff 30%, #a57cff 58%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.42) !important;
}

#mixerView .mixer-pan-value {
  min-height: 16px !important;

  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;

  color: rgba(255, 255, 255, 0.82) !important;
  text-align: center !important;
}

/* Active Mixer tab polish */
#btnPanelMixer.ghost-pill-active {
  background: linear-gradient(135deg, #ff63c9 0%, #a57cff 100%) !important;
  color: #07020f !important;
  box-shadow:
    0 0 13px rgba(255, 99, 201, 0.42),
    0 0 18px rgba(165, 124, 255, 0.28) !important;
}
/* =========================================================
   RIGHT PANEL EXPANSION FOR MIXER
   Goal:
   - Do NOT move track panel
   - Do NOT move timeline
   - Let the right panel grow into empty right-side space
   - Make mixer faders and pan controls usable
   ========================================================= */

/* Allow right panel to visually extend beyond the original grid cell */
.daw-shell,
.daw-inner {
  overflow: visible !important;
}

/* Keep left + timeline grid behavior unchanged.
   Only the right panel is allowed to grow visually. */
.smarttune-panel {
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;

  justify-self: start !important;
  overflow: hidden !important;
}

/* Make the content area use the wider panel */
.smarttune-panel .panel-view-container {
  width: 100% !important;
  max-width: 100% !important;

  flex: 1 !important;
  min-height: 0 !important;

  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Mixer tab gets the full expanded width */
#mixerView {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;

  overflow: hidden !important;
}

/* Horizontal mixer scroll area */
#mixerView .mixer-body {
  width: 100% !important;
  max-width: 100% !important;

  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding: 12px 10px 14px !important;
}

/* Keep all channels in one row */
#mixerView .mixer-channels {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  gap: 14px !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;

  height: 100% !important;
}

/* Bigger channel strips now that panel has room */
#mixerView .mixer-channel,
#mixerView .mixer-channel-master {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;

  min-height: 560px !important;
  height: calc(100vh - 245px) !important;
  max-height: 680px !important;

  padding: 13px 10px 16px !important;
  gap: 10px !important;

  border-radius: 20px !important;
}

/* Keep header compact */
#mixerView .mixer-channel-header {
  min-height: 58px !important;
  flex: 0 0 58px !important;
}

#mixerView .mixer-channel-header .meta-label {
  max-width: 82px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

#mixerView .mixer-channel-header .track-tag {
  max-width: 82px !important;
  font-size: 7.8px !important;
  padding: 3px 7px !important;
}

/* Longer meter */
#mixerView .mixer-meter {
  width: 24px !important;
  min-width: 24px !important;

  height: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;
  flex: 0 0 165px !important;
}

/* Longer, easier-to-grab volume fader */
#mixerView .mixer-fader {
  width: 46px !important;
  min-width: 46px !important;

  height: 285px !important;
  min-height: 285px !important;
  max-height: 285px !important;
  flex: 0 0 285px !important;

  margin: 0 auto !important;

  writing-mode: bt-lr !important;
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;

  transform: rotate(180deg) !important;
}

/* Bigger volume fader thumb */
#mixerView .mixer-fader::-webkit-slider-thumb {
  width: 25px !important;
  height: 25px !important;
}

#mixerView .mixer-fader::-moz-range-thumb {
  width: 25px !important;
  height: 25px !important;
}

/* dB text */
#mixerView .mixer-db-label {
  min-height: 24px !important;
  flex: 0 0 24px !important;

  font-size: 10.5px !important;
  font-weight: 850 !important;
}

/* Bigger pan control */
#mixerView .mixer-pan-control {
  margin-top: auto !important;
  padding-top: 10px !important;
  gap: 5px !important;
}

#mixerView .mixer-pan-label {
  font-size: 8px !important;
}

#mixerView .mixer-pan-slider {
  width: 82px !important;
  height: 14px !important;
}

#mixerView .mixer-pan-slider::-webkit-slider-thumb {
  width: 21px !important;
  height: 21px !important;
}

#mixerView .mixer-pan-slider::-moz-range-thumb {
  width: 21px !important;
  height: 21px !important;
}

#mixerView .mixer-pan-value {
  font-size: 9.5px !important;
  min-height: 16px !important;
}

/* Make horizontal scroll easier to grab */
#mixerView .mixer-body::-webkit-scrollbar {
  height: 10px !important;
}

#mixerView .mixer-body::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.78) !important;
  border-radius: 999px !important;
}

#mixerView .mixer-body::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  min-width: 90px !important;
}
/* =========================================================
   DAW OUTER SHELL EXTENSION FOR WIDE MIXER
   Fixes mixer panel hanging outside the black/purple shell.
   Keeps left tracks + timeline visually stable.
   ========================================================= */

.daw-inner {
  max-width: 1420px !important;

  grid-template-columns:
    260px
    610px
    460px !important;

  column-gap: 18px !important;

  background: radial-gradient(
    circle at top,
    rgba(70, 44, 140, 0.85) 0%,
    rgba(12, 8, 26, 0.98) 28%,
    #050109 80%
  ) !important;

  border: 1px solid rgba(169, 134, 255, 0.46) !important;
  box-shadow:
    0 0 60px rgba(110, 80, 216, 0.55),
    0 0 120px rgba(110, 80, 216, 0.22) !important;

  overflow: hidden !important;
}

/* Right panel now lives INSIDE the widened shell */
.smarttune-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  overflow: hidden !important;
}

/* Mixer should use the full right panel width */
#mixerView,
#mixerView .mixer-body {
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep mixer scrolling inside the panel, not outside the shell */
#mixerView .mixer-body {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
/* =========================================================
   SMARTTUNE PANEL POLISH — TAB SPACING + SLIDERS
   CSS-only. No daw.js changes.
   Fixes:
   - SmartTune / Mixer / Song Gen / Voice Model spacing
   - Correct Amount / Speed / Glide slider usability
   ========================================================= */

/* ---------- Main right-panel tab buttons ---------- */

.smarttune-panel .smarttune-header {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.smarttune-panel .smarttune-title-row {
  width: 100% !important;
  justify-content: center !important;
  margin-bottom: 2px !important;
}

.smarttune-panel .smarttune-title-row .panel-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Clean 2x2 button grid */
.smarttune-panel .smarttune-tab-row {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 14px !important;

  align-items: center !important;
  justify-content: stretch !important;

  padding: 0 !important;
  margin: 0 auto !important;

  overflow: visible !important;
}

/* Equal-size top tabs */
.smarttune-panel .smarttune-tab-row .ghost-pill,
.smarttune-panel .smarttune-tab-row .ghost-pill-small {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 26px !important;
  padding: 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(181, 150, 255, 0.48) !important;

  background: rgba(11, 3, 28, 0.72) !important;

  color: rgba(255, 255, 255, 0.82) !important;

  font-size: 8.8px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.085em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Active top tab */
.smarttune-panel .smarttune-tab-row .ghost-pill-active {
  background: linear-gradient(135deg, #ff63c9 0%, #a57cff 100%) !important;
  color: #07020f !important;
  border-color: transparent !important;

  box-shadow:
    0 0 14px rgba(255, 99, 201, 0.42),
    0 0 22px rgba(165, 124, 255, 0.28) !important;
}

/* ---------- SmartTune sliders ---------- */

/* Force the 3 SmartTune sliders to sit cleanly in one row when panel is wide */
#smarttuneView .smarttune-sliders {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;

  margin: 8px 0 14px !important;
}

/* Each slider block */
#smarttuneView .slider-block {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Label + value row */
#smarttuneView .slider-label-row {
  min-height: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#smarttuneView .slider-label-row .meta-label {
  font-size: 8.4px !important;
  font-weight: 850 !important;
  letter-spacing: 0.115em !important;
  line-height: 1.05 !important;
  color: rgba(255, 255, 255, 0.56) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#smarttuneView .slider-label-row .meta-value {
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.92) !important;

  flex: 0 0 auto !important;
}

/* Actual SmartTune range sliders */
#smarttuneView .range,
#smarttuneView input[type="range"].range,
#smarttuneView #amtSlider,
#smarttuneView #speedSlider,
#smarttuneView #glideSlider {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  height: 8px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(181, 150, 255, 0.18) !important;

  background:
    linear-gradient(
      90deg,
      rgba(255, 99, 201, 0.72),
      rgba(165, 124, 255, 0.45)
    ) !important;

  box-shadow:
    inset 0 0 7px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(165, 124, 255, 0.13) !important;

  outline: none !important;
  cursor: pointer !important;
}

/* Chrome/WebView thumb */
#smarttuneView .range::-webkit-slider-thumb,
#smarttuneView input[type="range"].range::-webkit-slider-thumb,
#smarttuneView #amtSlider::-webkit-slider-thumb,
#smarttuneView #speedSlider::-webkit-slider-thumb,
#smarttuneView #glideSlider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 17px !important;
  height: 17px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #f0d7ff 18%, #ff63c9 48%, #a57cff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.42) !important;

  box-shadow:
    0 0 12px rgba(255, 99, 201, 0.58),
    0 0 20px rgba(165, 124, 255, 0.38) !important;

  cursor: pointer !important;
}

/* Firefox thumb */
#smarttuneView .range::-moz-range-thumb,
#smarttuneView input[type="range"].range::-moz-range-thumb,
#smarttuneView #amtSlider::-moz-range-thumb,
#smarttuneView #speedSlider::-moz-range-thumb,
#smarttuneView #glideSlider::-moz-range-thumb {
  width: 17px !important;
  height: 17px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #f0d7ff 18%, #ff63c9 48%, #a57cff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.42) !important;

  box-shadow:
    0 0 12px rgba(255, 99, 201, 0.58),
    0 0 20px rgba(165, 124, 255, 0.38) !important;
}

/* Focus polish */
#smarttuneView .range:focus,
#smarttuneView input[type="range"].range:focus,
#smarttuneView #amtSlider:focus,
#smarttuneView #speedSlider:focus,
#smarttuneView #glideSlider:focus {
  border-color: rgba(255, 99, 201, 0.52) !important;
  box-shadow:
    0 0 0 2px rgba(255, 99, 201, 0.10),
    0 0 14px rgba(165, 124, 255, 0.28) !important;
}

/* Keep Core / Pro / Routing tabs aligned inside SmartTune */
#smarttuneView .smarttune-tabs {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;

  padding: 4px !important;
  margin: 10px 0 12px !important;

  border-radius: 999px !important;
  background: rgba(10, 4, 24, 0.76) !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  overflow: hidden !important;
}

#smarttuneView .smarttune-tab {
  width: 100% !important;
  height: 25px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 8px !important;
  margin: 0 !important;

  font-size: 8.6px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;

  border-radius: 999px !important;
}

/* Smaller right panel fallback */
@media (max-width: 1180px) {
  #smarttuneView .smarttune-sliders {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .smarttune-panel .smarttune-tab-row {
    gap: 6px !important;
  }
}
/* =========================================================
   SMARTTUNE TAB — SAFE VERTICAL SCROLL RESTORE
   Fixes:
   - Restores SmartTune vertical scrollbar
   - Does NOT squish Core / Pro / Routing
   - Does NOT compress tab content wording
   - Keeps Mixer horizontal scroll separate
   ========================================================= */

/* Right panel shared container should hold one visible tab cleanly */
.panel-view-container {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* SmartTune view itself becomes the scrollable area */
#smarttuneView:not([hidden]) {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 8px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.85) rgba(5, 1, 14, 0.58) !important;
}

/* Do NOT make .smarttune-body the scroll box.
   Let it grow naturally so tabs/text do not get crushed. */
#smarttuneView:not([hidden]) .smarttune-body {
  height: auto !important;
  min-height: auto !important;
  flex: none !important;

  overflow: visible !important;
  padding-right: 0 !important;
}

/* Chrome / WebView scrollbar */
#smarttuneView:not([hidden])::-webkit-scrollbar {
  width: 8px !important;
}

#smarttuneView:not([hidden])::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.58) !important;
  border-radius: 999px !important;
}

#smarttuneView:not([hidden])::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Restore Core / Pro / Routing as a full-width clean pill */
#smarttuneView:not([hidden]) .smarttune-tabs {
  width: 100% !important;
  max-width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;

  gap: 4px !important;
  padding: 4px !important;
  margin: 10px 0 12px !important;

  border-radius: 999px !important;
  background: rgba(10, 4, 24, 0.76) !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  overflow: hidden !important;
}

/* Restore Core / Pro / Routing button text */
#smarttuneView:not([hidden]) .smarttune-tab {
  width: 100% !important;
  min-width: 0 !important;
  height: 25px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 8px !important;
  margin: 0 !important;

  font-size: 8.6px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  border-radius: 999px !important;
}

/* Active Core / Pro / Routing tab */
#smarttuneView:not([hidden]) .smarttune-tab.smarttune-tab--active {
  background: linear-gradient(135deg, #ff63c9 0%, #a57cff 100%) !important;
  color: #07020f !important;
  box-shadow:
    0 0 12px rgba(255, 99, 201, 0.38),
    0 0 18px rgba(165, 124, 255, 0.24) !important;
}

/* Let tab content breathe naturally */
#smarttuneView:not([hidden]) .smarttune-tab-content,
#smarttuneView:not([hidden]) .smarttune-tab-content--active {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Mixer keeps its own horizontal behavior */
#mixerView:not([hidden]) {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#mixerView:not([hidden]) .mixer-body {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
/* =========================================================
   MIXER MUTE / SOLO BUTTONS
   Addition 8B
   Synced with track-pill M/S state.
   ========================================================= */

#mixerView .mixer-ms-row {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;

  margin: 0 0 4px !important;
  padding: 0 4px !important;
}

#mixerView .mixer-ms-btn {
  height: 22px !important;
  min-width: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background: rgba(6, 1, 18, 0.82) !important;
  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 8px rgba(0, 0, 0, 0.30) !important;
}

#mixerView .mixer-ms-btn:hover {
  border-color: rgba(227, 144, 255, 0.75) !important;
  background: rgba(38, 15, 75, 0.82) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

#mixerView .mixer-mute-btn.mixer-muted,
#mixerView .mixer-mute-btn.active {
  background: rgba(255, 111, 111, 0.30) !important;
  border-color: rgba(255, 111, 111, 0.88) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 11px rgba(255, 111, 111, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

#mixerView .mixer-solo-btn.mixer-soloed,
#mixerView .mixer-solo-btn.active {
  background: rgba(255, 179, 106, 0.30) !important;
  border-color: rgba(255, 179, 106, 0.92) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 11px rgba(255, 179, 106, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

#mixerView .mixer-channel-muted {
  opacity: 0.58 !important;
}

#mixerView .mixer-channel-soloed {
  border-color: rgba(255, 179, 106, 0.92) !important;
  box-shadow:
    inset 0 0 12px rgba(255, 179, 106, 0.08),
    0 0 20px rgba(255, 179, 106, 0.32) !important;
}
/* =========================================================
   MIXER TAB — VERTICAL + HORIZONTAL SCROLL FIX
   Keeps current mixer design.
   Adds vertical scrolling so tall mixer strips do not get cut off.
   ========================================================= */

#mixerView:not([hidden]) {
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* Mixer body owns BOTH scroll directions now */
#mixerView:not([hidden]) .mixer-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;

  overflow-x: auto !important;
  overflow-y: auto !important;

  padding: 12px 10px 18px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.85) rgba(5, 1, 14, 0.72) !important;
}

/* Let mixer strips keep their real height instead of being clipped */
#mixerView:not([hidden]) .mixer-channels {
  height: auto !important;
  min-height: max-content !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;

  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* Keep strips tall enough to use, and allow vertical scroll to reveal bottom */
#mixerView:not([hidden]) .mixer-channel,
#mixerView:not([hidden]) .mixer-channel-master {
  height: auto !important;
  min-height: 620px !important;
  max-height: none !important;
}

/* WebView / Chrome scrollbars */
#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar {
  width: 8px !important;
  height: 10px !important;
}

#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.72) !important;
  border-radius: 999px !important;
}

#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Horizontal scrollbar thumb should still look good */
#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, #6a28ff, #a57cff, #ff63c9) !important;
}

/* Make bottom-right scrollbar corner invisible/clean */
#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-corner {
  background: rgba(5, 1, 14, 0.72) !important;
}

/* =========================================================
   MIXER LIVE METERS
   Addition 8C
   JS now controls .mixer-meter-fill height.
   ========================================================= */

#mixerView .mixer-meter-fill {
  height: 0% !important;
  transition: height 70ms linear !important;
  will-change: height;
}
/* =========================================================
   CLIP GAIN CONTROLS — RESPONSIVE, INSIDE-CLIP ONLY
   No floating controls above clips.
   ========================================================= */

.clip-gain-controls {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 13;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  max-width: calc(100% - 10px);
  min-width: 0;

  padding: 2px 3px;
  border-radius: 999px;

  background: rgba(8, 4, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

  overflow: hidden;
}

.clip-gain-btn {
  flex: 0 0 auto;

  width: 17px;
  height: 17px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(165, 124, 255, 0.24);
  color: rgba(255, 255, 255, 0.95);

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.clip-gain-btn:hover {
  background: rgba(165, 124, 255, 0.52);
  border-color: rgba(227, 144, 255, 0.85);
}

.clip-gain-label {
  flex: 0 1 auto;

  min-width: 36px;
  max-width: 50px;

  text-align: center;

  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.9);
  user-select: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wide clips: full - / dB / + */
.clip-block--gain-full .clip-gain-controls {
  display: inline-flex !important;
}

/* Medium clips: show only - and + inside the clip */
.clip-block--gain-compact .clip-gain-controls {
  display: inline-flex !important;
  right: 4px !important;
  bottom: 4px !important;
  gap: 2px !important;
  padding: 2px 3px !important;
}

.clip-block--gain-compact .clip-gain-label {
  display: none !important;
}

.clip-block--gain-compact .clip-gain-btn {
  width: 15px !important;
  height: 15px !important;
  font-size: 10px !important;
}

/* Tiny clips: no visible gain controls.
   Select clip and use [ / ] keyboard shortcuts instead. */
.clip-block--gain-tiny .clip-gain-controls,
.clip-block--gain-tiny.is-selected .clip-gain-controls {
  display: none !important;
}

/* Selected small clips still come forward for dragging/editing */
.clip-block.is-selected {
  z-index: 90 !important;
}

.clip-handle,
.clip-gain-controls {
  z-index: 95 !important;
}
/* =========================================================
   SELECTED CLIP GAIN TOOLBAR
   Fixes tiny clips: gain remains controllable without
   forcing controls into tiny clip blocks.
   ========================================================= */

.clip-toolbar-gain {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  margin-left: 8px !important;
  padding-left: 8px !important;

  border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.clip-toolbar-gain-btn {
  min-width: 58px !important;
}

.clip-toolbar-gain-value {
  min-width: 48px !important;
  height: 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 8px !important;
  border-radius: 999px !important;

  background: rgba(8, 4, 18, 0.72) !important;
  border: 1px solid rgba(181, 150, 255, 0.28) !important;

  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.86) !important;

  white-space: nowrap !important;
}
/* =========================================================
   MIXER PAN + FX FINAL VISIBILITY FIX
   One clean tail block. PAN + FX stay visible.
   ========================================================= */

#mixerView .mixer-channel,
#mixerView .mixer-channel-master {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#mixerView .mixer-channel-header {
  order: 1 !important;
  flex: 0 0 auto !important;
}

#mixerView .mixer-ms-row {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-bottom: 4px !important;
}

#mixerView .mixer-pan-control {
  order: 3 !important;
  flex: 0 0 auto !important;

  width: 100% !important;
  margin: 3px 0 5px !important;
  padding: 0 4px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

#mixerView .mixer-pan-label {
  font-size: 7.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

#mixerView .mixer-pan-slider {
  width: 72px !important;
  height: 12px !important;
}

#mixerView .mixer-pan-slider::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
}

#mixerView .mixer-pan-value {
  font-size: 8.5px !important;
  min-height: 12px !important;
}

#mixerView .mixer-insert-channel-btn {
  order: 4 !important;
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 22px !important;

  margin: 0 auto 6px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(181, 150, 255, 0.42) !important;

  background: rgba(6, 1, 18, 0.82) !important;
  color: rgba(255, 255, 255, 0.82) !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;

  cursor: pointer !important;
}

#mixerView .mixer-insert-channel-btn:hover,
#mixerView .mixer-insert-channel-btn.is-selected {
  background: linear-gradient(135deg, #ff63c9 0%, #a57cff 100%) !important;
  color: #07020f !important;
  border-color: transparent !important;
  box-shadow:
    0 0 10px rgba(255, 99, 201, 0.35),
    0 0 15px rgba(165, 124, 255, 0.25) !important;
}

#mixerView .mixer-meter {
  order: 5 !important;
  flex: 0 0 130px !important;
  height: 130px !important;
  min-height: 130px !important;
  max-height: 130px !important;
}

#mixerView .mixer-fader {
  order: 6 !important;
  flex: 0 0 220px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

#mixerView .mixer-db-label {
  order: 7 !important;
  flex: 0 0 auto !important;
}

#mixerView .mixer-selected-insert-rack {
  display: block !important;
  flex: 0 0 auto !important;

  margin-top: 10px !important;
  padding: 10px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ),
    rgba(5, 1, 14, 0.72) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

#mixerView .mixer-selected-insert-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin-bottom: 8px !important;
}

#mixerView .mixer-selected-insert-header span {
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

#mixerView .mixer-selected-insert-header strong {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#mixerView .mixer-selected-insert-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#mixerView .mixer-selected-insert-slot {
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
}

#mixerView .mixer-selected-insert-slot span {
  font-size: 7.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

#mixerView .mixer-insert-select {
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  padding: 0 7px !important;
  border-radius: 9px !important;

  border: 1px solid rgba(181, 150, 255, 0.28) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(8, 3, 21, 0.92) !important;

  color: rgba(255, 255, 255, 0.86) !important;

  font-size: 8px !important;
  font-weight: 800 !important;

  outline: none !important;
  cursor: pointer !important;
}

#mixerView .mixer-insert-select option {
  background: #140724 !important;
  color: #ffffff !important;
}
/* =========================================================
   MIXER SEND ROUTING / AUX BUS CONTROLS
   Addition 8E
   UI + state only. Audio bus processing comes later.
   ========================================================= */

#mixerView .mixer-send-rack {
  display: block !important;
  flex: 0 0 auto !important;

  margin-top: 10px !important;
  padding: 10px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ),
    rgba(5, 1, 14, 0.72) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

#mixerView .mixer-send-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin-bottom: 8px !important;
}

#mixerView .mixer-send-header span {
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

#mixerView .mixer-send-header strong {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#mixerView .mixer-send-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#mixerView .mixer-send-row {
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 7px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(181, 150, 255, 0.18) !important;
  background: rgba(8, 3, 21, 0.50) !important;
}

#mixerView .mixer-send-track-name {
  min-width: 0 !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  color: rgba(255, 255, 255, 0.78) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#mixerView .mixer-send-control {
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 5px !important;
}

#mixerView .mixer-send-control span {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

#mixerView .mixer-send-slider {
  width: 100% !important;
  height: 7px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  border-radius: 999px !important;

  background:
    linear-gradient(90deg, rgba(5, 1, 14, 0.92), rgba(165, 124, 255, 0.60)) !important;

  border: 1px solid rgba(181, 150, 255, 0.25) !important;
  outline: none !important;

  cursor: pointer !important;
  accent-color: #a57cff !important;
}

#mixerView .mixer-send-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 13px !important;
  height: 13px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff, #a57cff 48%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.38) !important;

  box-shadow:
    0 0 9px rgba(165, 124, 255, 0.65),
    0 0 13px rgba(255, 99, 201, 0.28) !important;
}

#mixerView .mixer-send-value {
  font-style: normal !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  text-align: right !important;
}
/* =========================================================
   MIXER SEND ROUTING / AUX BUS CONTROLS
   Addition 8E
   REV A and DLY B are real audio sends.
   ========================================================= */

#mixerView .mixer-send-rack {
  display: block !important;
  flex: 0 0 auto !important;

  margin-top: 10px !important;
  padding: 10px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(181, 150, 255, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ),
    rgba(5, 1, 14, 0.72) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

#mixerView .mixer-send-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

#mixerView .mixer-send-header span {
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

#mixerView .mixer-send-header strong {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#mixerView .mixer-send-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#mixerView .mixer-send-row {
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 7px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(181, 150, 255, 0.18) !important;
  background: rgba(8, 3, 21, 0.50) !important;
}

#mixerView .mixer-send-track-name {
  min-width: 0 !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  color: rgba(255, 255, 255, 0.78) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#mixerView .mixer-send-control {
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 5px !important;
}

#mixerView .mixer-send-control span {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

#mixerView .mixer-send-slider {
  width: 100% !important;
  height: 7px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  border-radius: 999px !important;

  background:
    linear-gradient(90deg, rgba(5, 1, 14, 0.92), rgba(165, 124, 255, 0.60)) !important;

  border: 1px solid rgba(181, 150, 255, 0.25) !important;
  outline: none !important;

  cursor: pointer !important;
  accent-color: #a57cff !important;
}

#mixerView .mixer-send-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 13px !important;
  height: 13px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff, #a57cff 48%, #6a28ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.38) !important;

  box-shadow:
    0 0 9px rgba(165, 124, 255, 0.65),
    0 0 13px rgba(255, 99, 201, 0.28) !important;
}

#mixerView .mixer-send-value {
  font-style: normal !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  text-align: right !important;
}
/* =========================================================
   MIXER SEND SLIDER VISUAL STATE FIX
   Visual-only: makes saved REV A / DLY B values show after load.
   ========================================================= */

#mixerView .mixer-send-slider {
  --send-pct: 0%;

  background:
    linear-gradient(
      90deg,
      rgba(165, 124, 255, 0.95) 0%,
      rgba(255, 99, 201, 0.82) var(--send-pct),
      rgba(5, 1, 14, 0.92) var(--send-pct),
      rgba(5, 1, 14, 0.92) 100%
    ) !important;
}
/* =========================================================
   VIBERO MODERN KNOB RACK v1
   Professional plugin-style controls · no visible sliders
   ========================================================= */

/* Hide old SmartTune horizontal sliders but keep them alive for JS/backend wiring */
#amtSlider,
#speedSlider,
#glideSlider {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Optional: soften old slider rows if wrappers remain */
#amtSlider,
#speedSlider,
#glideSlider {
  accent-color: var(--accent);
}

.vibero-plugin-panel {
  margin: 10px 0 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(181, 150, 255, 0.38);
  background:
    radial-gradient(circle at top left, rgba(165, 124, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.vibero-plugin-panel--smart {
  border-color: rgba(255, 99, 201, 0.42);
}

.vibero-plugin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.vibero-plugin-name {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.vibero-plugin-sub {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

.vibero-plugin-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 118px;
  height: 28px;
  padding: 0 28px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(52, 24, 95, 0.98), rgba(12, 4, 26, 0.98));
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.vibero-plugin-select option {
  background: #241040;
  color: #ffffff;
}

.vibero-plugin-knobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.vibero-plugin-knobs--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vibero-knob-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.vibero-knob-label {
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  white-space: nowrap;
}

.vibero-knob {
  --pct: 0.5;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(215, 190, 255, 0.32);
  background:
    radial-gradient(circle at 50% 52%, #090313 0 42%, transparent 43%),
    conic-gradient(
      from 225deg,
      #4bffb9 0deg,
      #a57cff calc(var(--pct) * 270deg),
      rgba(255, 255, 255, 0.08) calc(var(--pct) * 270deg),
      rgba(255, 255, 255, 0.08) 270deg,
      transparent 270deg
    ),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), rgba(25, 10, 42, 0.98) 64%);
  box-shadow:
    0 0 22px rgba(165, 124, 255, 0.35),
    inset 0 0 13px rgba(0, 0, 0, 0.78);
  position: relative;
  cursor: ns-resize;
}

.vibero-knob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  transform-origin: 50% 20px;
  transform: translateX(-50%) rotate(calc(-135deg + (var(--pct) * 270deg)));
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.7);
}

.vibero-knob::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(180deg, rgba(36, 16, 64, 0.96), rgba(5, 1, 9, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.vibero-knob:hover {
  border-color: rgba(227, 144, 255, 0.72);
  box-shadow:
    0 0 30px rgba(227, 144, 255, 0.44),
    inset 0 0 13px rgba(0, 0, 0, 0.78);
}

.vibero-knob-value {
  min-height: 13px;
  font-size: 9px;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, 0.86);
}

.mixer-selected-insert-rack {
  margin-top: 14px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(181, 150, 255, 0.38);
  background:
    radial-gradient(circle at top, rgba(76, 44, 137, 0.35), rgba(5, 1, 9, 0.88) 70%);
}

.mixer-insert-rack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.mixer-insert-rack-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.mixer-insert-rack-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.46);
}

.mixer-insert-slot-card {
  margin-top: 10px;
  padding: 11px;
  border-radius: 16px;
  border: 1px solid rgba(181, 150, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015));
}

.mixer-insert-slot-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mixer-insert-slot-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
}

.mixer-insert-power {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.mixer-insert-power.is-on {
  border-color: rgba(75, 255, 185, 0.78);
  background: rgba(75, 255, 185, 0.14);
  color: #4bffb9;
  box-shadow: 0 0 14px rgba(75, 255, 185, 0.38);
}

.mixer-insert-empty {
  padding: 8px 0 2px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}

.mixer-insert-param-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* =========================================================
   MIXER FINAL LAYOUT TUNE
   - Main mixer view scrolls vertically with Vibero scrollbar
   - Mixer channel box is dominant
   - Mixer channel box keeps horizontal scrollbar
   - Insert FX is smaller
   - Sends stays below
   ========================================================= */

/* Keep old SmartTune UI hidden now that knobs exist */
#smarttuneView .smarttune-display,
#smarttuneView .smarttune-sliders,
#smarttuneView .smarttune-control,
#smarttuneView .smarttune-slider-row {
  display: none !important;
}

/* Keep hidden SmartTune sliders alive for JS */
#smarttuneView #amtSlider,
#smarttuneView #speedSlider,
#smarttuneView #glideSlider {
  display: block !important;
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main Mixer tab gets the vertical scrollbar */
#mixerView:not([hidden]) {
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 6px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.95) rgba(5, 1, 14, 0.72) !important;
}

/* Main vertical scrollbar color */
#mixerView:not([hidden])::-webkit-scrollbar {
  width: 8px !important;
}

#mixerView:not([hidden])::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.72) !important;
  border-radius: 999px !important;
}

#mixerView:not([hidden])::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* THE BIG MIXER CHANNEL / VOLUME SLIDER BOX */
#mixerView:not([hidden]) .mixer-body {
  flex: 0 0 calc(100vh - 190px) !important;
  height: calc(100vh - 190px) !important;
  min-height: 585px !important;
  max-height: 680px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 12px !important;
  padding-right: 0 !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.95) rgba(5, 1, 14, 0.72) !important;
}

/* Mixer channel box horizontal scrollbar only */
#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar {
  height: 10px !important;
}

#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.72) !important;
  border-radius: 999px !important;
}

#mixerView:not([hidden]) .mixer-body::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Let channels fill the bigger mixer box */
#mixerView:not([hidden]) .mixer-channels {
  height: 100% !important;
  min-height: 100% !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

/* Make Insert FX about half its current size */
#mixerView:not([hidden]) .mixer-selected-insert-rack {
  flex: 0 0 160px !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin-top: 8px !important;
  padding: 8px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 99, 201, 0.95) rgba(5, 1, 14, 0.72) !important;
}

/* Insert FX internal scrollbar color */
#mixerView:not([hidden]) .mixer-selected-insert-rack::-webkit-scrollbar {
  width: 7px !important;
}

#mixerView:not([hidden]) .mixer-selected-insert-rack::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.72) !important;
  border-radius: 999px !important;
}

#mixerView:not([hidden]) .mixer-selected-insert-rack::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a28ff, #a57cff, #ff63c9) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Make empty FX cards less tall so the rack really becomes compact */
#mixerView:not([hidden]) .mixer-insert-slot-card {
  margin-top: 6px !important;
  padding: 7px !important;
  min-height: 52px !important;
}

#mixerView:not([hidden]) .mixer-insert-empty {
  padding: 2px 0 0 !important;
  font-size: 8px !important;
}

/* Sends stays below Insert FX */
#mixerView:not([hidden]) .mixer-send-rack {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
}


/* =========================================================
   VIBERO ASSISTANT ✦ — Floating Helper Window
   Add-only MVP assistant UI. Does not replace DAW panels.
   ========================================================= */

.assistant-float-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5000;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  min-height: 44px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(227, 144, 255, 0.72);

  background:
    radial-gradient(circle at 20% 15%, rgba(255, 99, 201, 0.38), transparent 38%),
    linear-gradient(135deg, rgba(30, 14, 60, 0.96), rgba(5, 1, 9, 0.96));

  color: #ffffff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(165, 124, 255, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease;
}

.assistant-float-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 99, 201, 0.95);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(255, 99, 201, 0.52),
    0 0 22px rgba(165, 124, 255, 0.52);
}

.assistant-float-btn.assistant-float-btn--active {
  opacity: 0.92;
  transform: translateY(-2px) scale(0.98);
}

.assistant-float-orb {
  width: 27px;
  height: 27px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050109;
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #e390ff 40%, #a57cff 100%);
  box-shadow: 0 0 18px rgba(227, 144, 255, 0.82);
  font-size: 14px;
}

.assistant-float-label::after {
  content: " ✦";
  color: var(--accent-strong);
}

.assistant-panel {
  position: fixed;
  right: 24px;
  bottom: 82px;
  z-index: 4999;

  width: min(392px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 24px;
  border: 1px solid rgba(190, 160, 255, 0.58);
  background:
    radial-gradient(circle at top left, rgba(255, 99, 201, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(165, 124, 255, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(20, 8, 42, 0.97), rgba(5, 1, 9, 0.985));

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.82),
    0 0 52px rgba(103, 66, 210, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.assistant-panel[hidden] {
  display: none !important;
}

.assistant-panel.assistant-panel--minimized {
  height: 74px;
}

.assistant-panel.assistant-panel--minimized .assistant-context-strip,
.assistant-panel.assistant-panel--minimized .assistant-messages,
.assistant-panel.assistant-panel--minimized .assistant-quick-row,
.assistant-panel.assistant-panel--minimized .assistant-input-row {
  display: none !important;
}

.assistant-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid rgba(181, 150, 255, 0.24);
}

.assistant-title-wrap {
  min-width: 0;
}

.assistant-title {
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

.assistant-subtitle {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
}

.assistant-window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.assistant-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.42);
  background: rgba(10, 4, 24, 0.72);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.assistant-icon-btn:hover {
  border-color: rgba(255, 99, 201, 0.82);
  box-shadow: 0 0 14px rgba(255, 99, 201, 0.28);
}

.assistant-context-strip {
  margin: 10px 13px 0;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.30);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 99, 201, 0.85) rgba(5, 1, 14, 0.55);
}

.assistant-messages::-webkit-scrollbar {
  width: 7px;
}

.assistant-messages::-webkit-scrollbar-track {
  background: rgba(5, 1, 14, 0.55);
  border-radius: 999px;
}

.assistant-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a28ff, #a57cff, #ff63c9);
  border-radius: 999px;
}

.assistant-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assistant-message-user {
  align-items: flex-end;
}

.assistant-message-ai {
  align-items: flex-start;
}

.assistant-message-label {
  padding: 0 3px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.assistant-message-bubble {
  max-width: 94%;
  padding: 10px 11px;
  border-radius: 15px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.assistant-message-ai .assistant-message-bubble {
  border: 1px solid rgba(181, 150, 255, 0.32);
  background: radial-gradient(circle at top left, rgba(165, 124, 255, 0.16), rgba(255, 255, 255, 0.045));
  color: rgba(255, 255, 255, 0.88);
}

.assistant-message-user .assistant-message-bubble {
  border: 1px solid rgba(255, 99, 201, 0.42);
  background: linear-gradient(135deg, rgba(165, 124, 255, 0.35), rgba(255, 99, 201, 0.20));
  color: #ffffff;
}

.assistant-action-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.assistant-action-card {
  border-radius: 14px;
  border: 1px solid rgba(181, 150, 255, 0.34);
  background: rgba(5, 1, 14, 0.52);
  padding: 9px;
}

.assistant-action-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-action-title {
  color: #ffffff;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.04em;
}

.assistant-action-rationale {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  line-height: 1.34;
}

.assistant-action-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.assistant-action-btn,
.assistant-action-confirm,
.assistant-action-cancel {
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.42);
  background: rgba(25, 12, 42, 0.78);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 9px;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
}

.assistant-action-btn {
  border-color: rgba(255, 99, 201, 0.66);
  background: rgba(255, 99, 201, 0.13);
}

.assistant-action-confirm {
  border-color: rgba(75, 255, 185, 0.62);
  background: rgba(75, 255, 185, 0.10);
}

.assistant-action-cancel {
  border-color: rgba(255, 111, 111, 0.56);
  background: rgba(255, 111, 111, 0.09);
}

.assistant-action-btn:disabled,
.assistant-action-confirm:disabled,
.assistant-action-cancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.assistant-quick-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 13px 11px;
}

.assistant-quick-btn {
  border-radius: 999px;
  border: 1px solid rgba(181, 150, 255, 0.34);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 7px 8px;
  cursor: pointer;
}

.assistant-quick-btn:hover {
  border-color: rgba(255, 99, 201, 0.72);
  color: #ffffff;
}

.assistant-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 13px 13px;
  border-top: 1px solid rgba(181, 150, 255, 0.24);
}

.assistant-input {
  flex: 1;
  min-height: 42px;
  max-height: 86px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(181, 150, 255, 0.42);
  background: rgba(5, 1, 14, 0.58);
  color: #ffffff;
  outline: none;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.assistant-input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.assistant-send-btn {
  align-self: stretch;
  min-width: 68px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #a57cff, #ff63c9);
  color: #050109;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 99, 201, 0.45);
}

.assistant-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 720px) {
  .assistant-float-btn {
    right: 16px;
    bottom: 16px;
  }

  .assistant-panel {
    right: 16px;
    bottom: 72px;
    height: min(540px, calc(100vh - 96px));
  }
}
/* =========================================================
   ASSISTANT ✦ VISUAL PREVIEW HIGHLIGHTS
   Shows exactly what the Assistant changed during Preview.
   ========================================================= */

.assistant-preview-glow {
  outline: 2px solid rgba(227, 144, 255, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 18px rgba(227, 144, 255, 0.95),
    0 0 34px rgba(165, 124, 255, 0.70) !important;
  border-radius: 14px !important;
  animation: assistantPreviewPulse 900ms ease-in-out infinite alternate;
}

.assistant-preview-track-glow {
  outline: 2px solid rgba(75, 255, 185, 0.95) !important;
  box-shadow:
    0 0 18px rgba(75, 255, 185, 0.75),
    0 0 32px rgba(165, 124, 255, 0.55) !important;
}

@keyframes assistantPreviewPulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.22);
  }
}

/* =========================================================
   VIBERO WEB BETA — MOBILE ASSISTANT CHAT PANEL FIX
   Makes Assistant usable on phone/tablet with internal scroll.
   ========================================================= */

@media (max-width: 900px) {
  .assistant-panel {
    position: fixed !important;

    left: 10px !important;
    right: 10px !important;
    top: 72px !important;
    bottom: 72px !important;

    width: auto !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    border-radius: 20px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    z-index: 99999 !important;
  }

  .assistant-panel[hidden] {
    display: none !important;
  }

  .assistant-header,
  .assistant-panel-header {
    flex: 0 0 auto !important;
  }

  .assistant-body,
  .assistant-messages,
  .assistant-chat,
  .assistant-thread,
  .assistant-log {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .assistant-input-row,
  .assistant-compose,
  .assistant-footer {
    flex: 0 0 auto !important;
  }

  .assistant-input,
  .assistant-textarea,
  .assistant-compose textarea,
  .assistant-panel textarea {
    font-size: 16px !important; /* prevents iPhone zoom-in on input */
  }

  .assistant-float-btn {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 100000 !important;
  }
}
/* Vibero Web Beta - Mobile Horizontal DAW Scroll */
@media (max-width: 1024px) {
  .app-root {
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    padding-left: 12px;
    padding-right: 12px;
  }

  .daw-shell {
    width: 1180px;
    max-width: none;
    flex: 0 0 auto;
  }

  .daw-inner {
    grid-template-columns: minmax(420px, 0.95fr) minmax(560px, 1.25fr);
  }
}
/* =========================================================
   VIBERO MOBILE — SHOW RIGHT PANEL ONLY
   Does not touch horizontal scrolling or DAW canvas width.
   ========================================================= */

@media (max-width: 900px) {
  .smarttune-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .smarttune-panel .smarttune-header,
  .smarttune-panel .smarttune-tab-row {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .smarttune-panel .smarttune-tab-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }
}
/* =========================================================
   VIBERO MOBILE — SMARTTUNE CUT-OFF FIX ONLY
   Does not touch page horizontal scrolling or top bar.
   ========================================================= */

@media (max-width: 900px) {
  .smarttune-panel {
    overflow: visible !important;
  }

  .smarttune-panel .panel-view-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  #smarttuneView:not([hidden]),
  #mixerView:not([hidden]),
  #songGenView:not([hidden]),
  #voiceModelView:not([hidden]) {
    min-width: 420px !important;
    width: 420px !important;
    max-width: none !important;
  }

  #smarttuneView:not([hidden]) {
    overflow-y: auto !important;
    overflow-x: visible !important;
  }
}
/* =========================================================
   VIBERO MOBILE — SMARTTUNE COLUMN WIDTH FIX ONLY
   Fixes right-side SmartTune cutoff by giving the right panel
   enough canvas width. Does not touch top bar layout.
   ========================================================= */

@media (max-width: 900px) {
  .daw-inner {
    width: 1500px !important;
    min-width: 1500px !important;
    max-width: 1500px !important;

    grid-template-columns:
      260px
      610px
      560px !important;

    overflow: hidden !important;
  }

  .smarttune-panel {
    width: 560px !important;
    min-width: 560px !important;
    max-width: 560px !important;

    overflow: hidden !important;
  }

  .panel-view-container,
  #smarttuneView:not([hidden]),
  #mixerView:not([hidden]),
  #songGenView:not([hidden]),
  #voiceModelView:not([hidden]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* =========================================================
   VIBERO MOBILE — LEFT EDGE ALIGN FIX ONLY
   Stops the wide DAW canvas from being centered/cut off.
   Does not touch SmartTune width or top bar.
   ========================================================= */

@media (max-width: 900px) {
  .daw-shell {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}
/* =========================================================
   VIBERO MOBILE — TOP BAR LEFT STACK ONLY
   Puts all top controls back on the left.
   Does not touch DAW panels, SmartTune, daw-shell, or daw-inner.
   ========================================================= */

@media (max-width: 900px) {
  .top-bar {
    position: relative !important;

    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;

    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-content: flex-start !important;

    gap: 10px 12px !important;

    padding: 18px 18px 14px !important;
    margin: 0 !important;
  }

  .brand,
  #btnShare,
  #btnSaveProject,
  #btnLoadProject,
  .top-right.export-wrapper {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    flex: 0 0 auto !important;
  }

  .brand {
    flex-basis: 100% !important;
  }

  .top-center {
    display: none !important;
  }

  .top-right.export-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    flex-basis: 100% !important;
  }
}
/* =========================================================
   VIBERO MOBILE — CLIP TOUCH DRAG ONLY
   Empty DAW space still pans normally.
   Touching a clip manipulates the clip.
   ========================================================= */

@media (max-width: 900px) {
  .clip-block {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}