/* Workspace hierarchy upgrade.
 *
 * This changes the silhouette of the application instead of applying another
 * coat of polish to the old three-row header. Desktop gets one app bar plus
 * one command deck; narrower screens wrap that deck in intentional rows. The
 * asset rail starts with Songs, uses a scalable pattern type selector, and
 * fits substantially more useful pattern rows on screen.
 */

@layer v6-shell {
  body.v6-app-bar-active {
    --v6-app-bar-h: 44px;
  }

  @media (min-width: 1500px) {
    body.v6-app-bar-active { --sidebar-width: 288px; }
  }

  body.v6-app-bar-active .v6-app-bar {
    height: var(--v6-app-bar-h) !important;
    grid-template-columns: minmax(220px, var(--sidebar-width, 260px)) minmax(260px, 1fr) auto;
    gap: 10px;
    padding-inline: 12px;
  }

  .v6-app-bar__logo { gap: 8px; padding: 2px 6px 2px 2px; }
  .v6-app-bar__logo-img { width: 26px; height: 26px; }
  .v6-app-bar__logo-text { font-size: 14px; }
  .v6-song-name { font-size: 15px; }
  .v6-song-status { font-size: 10px; }
  .v6-app-bar__actions { gap: 6px; }

  /* My Songs is already the first, persistent control in the rail. */
  @media (min-width: 901px) {
    #mySongsBtn { display: none !important; }
  }

  /* One command deck: transport/settings and workspace actions share a row.
     The edit-context banner remains a second row only in Pattern view. */
  .control-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    padding: 5px 10px !important;
    background: var(--surface-200, #111114) !important;
  }

  .playback-bar {
    min-width: 0;
    min-height: 48px !important;
    height: 48px !important;
    gap: 8px !important;
    padding: 0 8px !important;
    background: color-mix(in srgb, var(--surface-400, #1f1f23) 88%, transparent);
    border: 1px solid var(--v6-border, rgba(255,255,255,.08));
    border-radius: 11px;
  }

  .playback-controls {
    min-width: 0;
    gap: 6px !important;
  }

  .playback-settings {
    flex: 0 1 auto !important;
    min-width: 0;
    gap: 6px !important;
    margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid var(--v6-border-faint, rgba(255,255,255,.06));
  }

  .playback-settings::before {
    content: 'SONG';
    color: var(--text-muted, #71717a);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .playback-settings .zt-disclosure__btn {
    height: 28px;
    padding-inline: 8px;
    background: transparent;
  }

  .v6-master-meter { width: 72px !important; }
  .v6-now-playing {
    width: 160px;
    min-width: 130px !important;
    max-width: 160px;
  }
  .v6-now-playing__label,
  .v6-now-playing__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .playback-settings .setting-compact { gap: 5px; }
  .playback-settings #masterVolume { width: 54px; }

  .v6-ai-strip {
    align-self: stretch;
    height: 48px;
    gap: 7px;
    padding: 0 6px !important;
    background: color-mix(in srgb, var(--surface-400, #1f1f23) 88%, transparent) !important;
    border: 1px solid var(--v6-border, rgba(255,255,255,.08)) !important;
    border-radius: 11px;
  }
  .v6-ai-strip__group { gap: 6px; }
  .v6-ai-strip__group--generative {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .v6-ai-strip #aiMenuBtn { min-width: 92px; }
  .v6-ai-strip #exportWavBtn { height: 30px; }
  .v6-ai-strip .zt-view-toggle { margin-right: 0; }
  .v6-ai-strip .zt-view-toggle__btn { padding: 6px 11px; }

  .edit-context-banner {
    grid-column: 1 / -1;
    margin: 0 !important;
  }

  @media (max-width: 1500px) {
    .v6-master-meter { display: none !important; }
    .v6-now-playing { width: 142px; max-width: 142px; }
    .playback-settings #masterVolume { display: none; }
    #keyDisclosure .zt-disclosure__label { max-width: 96px; }
  }

  @media (max-width: 1220px) {
    .control-panel {
      grid-template-columns: minmax(0, 1fr);
      gap: 5px;
    }
    .v6-ai-strip {
      height: 40px;
      justify-content: space-between;
    }
    .playback-bar {
      height: 44px !important;
      min-height: 44px !important;
    }
  }

  @media (max-width: 900px) {
    body.v6-app-bar-active .v6-app-bar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 5px;
      padding-inline: 8px;
    }
    .v6-app-bar__logo-text,
    .v6-song-status,
    .v6-session-group .btn-text { display: none; }
    .control-panel { padding: 4px 6px !important; }
    .playback-bar {
      height: auto !important;
      min-height: 44px !important;
      flex-wrap: wrap;
      row-gap: 4px !important;
      padding-block: 4px !important;
    }
    .playback-controls { flex: 1 1 auto; }
    .playback-settings {
      order: 2;
      flex: 1 1 100% !important;
      justify-content: space-between;
      padding: 4px 0 0;
      border-left: 0;
      border-top: 1px solid var(--v6-border-faint, rgba(255,255,255,.06));
    }
  }

  @media (max-width: 520px) {
    .v6-song-name { max-width: 140px; font-size: 13px; }
    .v6-master-meter { display: none !important; }
    .v6-now-playing { min-width: 0 !important; width: auto; flex: 1 1 auto; }
    .v6-now-playing__sr { display: none; }
    .v6-now-playing__follow .btn-text { display: none; }
    .v6-now-playing__follow { width: 28px; min-width: 28px; padding-inline: 0 !important; }
    .playback-settings::before,
    .playback-settings .setting-label,
    .playback-settings #volumeValue { display: none; }
    .v6-ai-strip__group--generative .btn-text,
    .v6-ai-strip__group--output .btn-text,
    .v6-ai-strip .v6-versions__pill .btn-text { display: none; }
    .v6-ai-strip #aiMenuBtn { min-width: 34px; }
    .playback-bar,
    .v6-ai-strip {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0 !important;
      overflow: hidden;
    }
    .playback-controls,
    .playback-settings { width: 100%; }
    .v6-ai-strip { gap: 3px; }
    .v6-ai-strip__group { gap: 3px; min-width: 0; }
    .v6-ai-strip .zt-view-toggle__btn { padding: 6px 8px; font-size: 11px; }
  }
}

/* Songs are the first door, asset kinds are navigation, and pattern filtering
   is one scalable control. */
.v6-rail-song-switcher {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
  padding: 8px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(139,92,246,.13), transparent 42%),
    var(--surface-200, #111114) !important;
  border-bottom: 1px solid var(--v6-border, rgba(255,255,255,.08)) !important;
}
.v6-rail-song-switcher__button {
  min-height: 48px !important;
  padding: 7px 9px !important;
  background: var(--surface-400, #1f1f23) !important;
  border-color: rgba(139,92,246,.34) !important;
  box-shadow: inset 3px 0 0 var(--accent-primary, #8b5cf6);
}
.v6-rail-song-switcher__button:hover {
  background: var(--surface-500, #27272a) !important;
  transform: none !important;
}
.v6-rail-song-switcher__collapse {
  width: 28px !important;
  height: 36px !important;
  color: var(--text-muted, #71717a) !important;
}

.v6-rail-tabs {
  padding: 5px 8px 0 !important;
  background: var(--surface-300, #18181b) !important;
}
.v6-rail-tab {
  min-height: 32px;
  border-radius: 7px 7px 0 0 !important;
  font-size: 10px !important;
}

.v6-pattern-pane-toolbar {
  min-height: 37px;
  padding: 6px 8px !important;
  background: transparent !important;
}
.v6-pattern-pane-toolbar__title {
  margin-right: auto;
  color: var(--text-secondary, #a1a1aa);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.v6-pattern-pane-toolbar #sidebarNewPatternBtn {
  height: 27px;
  padding-inline: 9px;
}
.v6-pattern-view-switch { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:0 8px 7px; padding:2px; border:1px solid var(--v6-border, rgba(255,255,255,.09)); border-radius:7px; background:var(--surface-400, #1f1f23); }
.v6-pattern-view-switch button { min-height:27px; padding:4px 6px; color:var(--text-muted, #71717a); background:transparent; border:0; border-radius:5px; font-size:10px; font-weight:700; cursor:pointer; }
.v6-pattern-view-switch button[aria-selected="true"] { color:var(--text-primary, #fafafa); background:color-mix(in srgb, var(--accent-primary) 15%, var(--surface-500)); }
.v6-pattern-in-song { min-height:0; overflow:auto; padding:0 7px 10px; }
.v6-rail-pane--patterns .v6-pattern-in-song[hidden],
.v6-rail-pane--patterns .v6-pattern-browser-tools[hidden],
.v6-rail-pane--patterns .v6-pattern-browser-explanation[hidden],
.v6-rail-pane--patterns .library-patterns-container[hidden],
.v6-rail-pane--patterns .sidebar-footer[hidden] { display:none !important; }
.v6-pattern-song-section { margin:0 0 9px; }
.v6-pattern-song-section h3 { margin:0; padding:6px 5px; color:var(--text-secondary); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.v6-pattern-song-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; margin:0 0 4px; padding:4px; border:1px solid var(--v6-border, rgba(255,255,255,.09)); border-radius:7px; background:var(--surface-400); }
.v6-pattern-song-row button { min-width:0; padding:5px 7px; color:var(--text-secondary); background:transparent; border:0; border-radius:5px; text-align:left; cursor:pointer; }
.v6-pattern-song-row button[data-action="locate"] { display:grid; gap:2px; }
.v6-pattern-song-row button[data-action="locate"] strong { overflow:hidden; color:var(--text-primary); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.v6-pattern-song-row button[data-action="locate"] span { font-size:9px; }
.v6-pattern-song-row button[data-action="edit"] { align-self:center; border:1px solid var(--border-default); }
.v6-pattern-song-row button:hover { background:color-mix(in srgb, var(--accent-primary) 9%, transparent); }
.v6-pattern-in-song__empty { display:grid; gap:5px; padding:26px 12px; color:var(--text-secondary); text-align:center; font-size:10px; }

.v6-pattern-browser-tools {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 6px;
  padding: 0 8px 7px;
  border-bottom: 1px solid var(--v6-border-faint, rgba(255,255,255,.05));
}
.v6-pattern-type-filter {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.v6-pattern-type-filter__label {
  position: absolute;
  left: 8px;
  top: 4px;
  z-index: 1;
  color: var(--text-muted, #71717a);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
  pointer-events: none;
  text-transform: uppercase;
}
.v6-pattern-type-select {
  width: 100%;
  height: 37px;
  padding: 13px 24px 2px 7px;
  color: var(--text-primary, #fafafa);
  background: var(--surface-400, #1f1f23);
  border: 1px solid var(--v6-border, rgba(255,255,255,.09));
  border-radius: 7px;
  font-size: 11px;
  outline: none;
}
.v6-pattern-type-select:focus { border-color: var(--accent-primary, #8b5cf6); }
.v6-pattern-browser-tools .library-search { padding: 0 !important; }
.v6-pattern-browser-tools .library-search-input {
  min-height: 37px !important;
  border-radius: 7px !important;
}
.v6-pattern-browser-tools .v6-library-filters {
  grid-column: 1 / -1;
  padding: 0 !important;
}
.v6-pattern-browser-tools .v6-library-chip {
  width: 100%;
  justify-content: flex-start;
  min-height: 27px;
}
.v6-pattern-browser-tools .v6-library-chip__count { margin-left: auto; }
.v6-pattern-browser-explanation {
  margin: 0;
  padding: 1px 9px 7px;
  color: var(--text-muted, #71717a);
  font-size: 9px;
  line-height: 1.35;
}
.v6-pattern-category-source { display: none !important; }

/* Compact pattern rows preserve the musical preview and double the number of
   useful entries visible in the rail. */
.library-patterns-container { padding: 7px !important; }
.pattern-section-group {
  margin: 3px 0 8px !important;
  border-left-width: 2px !important;
  background: transparent !important;
}
.pattern-section-header { padding: 6px 7px !important; }
.pattern-section-cards { gap: 4px !important; padding: 0 3px 4px !important; }
.library-patterns-container .pattern-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 102px;
  grid-template-areas:
    'info preview'
    'actions preview';
  align-items: center !important;
  gap: 5px 8px !important;
  min-height: 78px;
  margin: 0 !important;
  padding: 8px 8px 8px 10px !important;
  border-radius: 8px !important;
  transform: none !important;
}
.pattern-card .pattern-info { grid-area: info; align-self: end; min-width: 0; }
.pattern-card .pattern-name { font-size: 12px; font-weight: 650; }
.pattern-card .pattern-meta {
  flex-wrap: wrap;
  gap: 3px 6px;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.2;
}
.pattern-card .pattern-preview {
  grid-area: preview;
  align-self: stretch;
  min-width: 0;
  padding: 5px !important;
}
.pattern-card .preview-grid,
.pattern-card .preview-empty { height: 40px !important; }
.pattern-card .pattern-actions {
  grid-area: actions;
  align-self: start;
  gap: 3px;
  opacity: .62 !important;
}
.pattern-card:hover .pattern-actions,
.pattern-card:focus-within .pattern-actions { opacity: 1 !important; }
.pattern-card .btn-pattern-action { width: 23px; height: 21px; }
.pattern-card .pattern-playing-badge { margin-top: 3px; }
/* A source nothing in the arrangement uses: quieter, and its usage line
   says so instead of a coloured count. */
.pattern-card--unused .pattern-name { color: var(--text-secondary, #a1a1aa); }
.pattern-card--unused .pattern-preview { opacity: .6; }
.pattern-card--unused:hover .pattern-preview,
.pattern-card--unused.selected .pattern-preview { opacity: 1; }
.pattern-card .pattern-clips--unused { color: var(--text-secondary, #a1a1aa); font-weight: 500; }

/* Import/export live in the main overflow menu. Keep only cleanup here. */
.v6-rail-pane--patterns .sidebar-footer {
  padding: 6px 8px !important;
  background: var(--surface-300, #18181b) !important;
}
.v6-rail-pane--patterns #libraryImportBtn,
.v6-rail-pane--patterns #libraryExportBtn { display: none !important; }
.v6-rail-pane--patterns #libraryCleanupBtn {
  width: 100%;
  justify-content: center;
  min-height: 27px;
}

@layer v6-components {
  .pattern-library-sidebar .pattern-card.pattern-card--in-song {
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .pattern-library-sidebar .pattern-card.pattern-card--in-song::before {
    width: 2px;
    opacity: .58;
  }
  .pattern-library-sidebar .pattern-card.pattern-card--playing {
    box-shadow: inset 3px 0 0 var(--accent-warning, #f59e0b), 0 0 0 1px rgba(245,158,11,.22) !important;
  }
}

body[data-theme="light"] .playback-bar,
body[data-theme="light"] .v6-ai-strip,
body[data-theme="light"] .v6-rail-song-switcher__button,
body[data-theme="light"] .v6-pattern-type-select {
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
body[data-theme="light"] .v6-rail-song-switcher {
  background:
    radial-gradient(circle at 10% 0%, rgba(109,40,217,.10), transparent 44%),
    #f8fafc !important;
}

@media (max-width: 520px) {
  .library-patterns-container .pattern-card {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
}

@media (max-width: 1200px) {
  .library-patterns-container .pattern-card {
    grid-template-columns: minmax(0, 1fr) 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v6-app-bar *, .playback-bar *, .v6-ai-strip *,
  .v6-rail-song-switcher *, .pattern-card * { transition: none !important; }
}