/* Vocals Studio — compact dark-purple instrument panel */
.vocals-window.instrument-window, .vocals-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 16px), 960px);
  min-height: 0;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: vocals;
  /* Default: stay in viewport. WM inline height+maxHeight:none wins after explicit resize. */
  overflow: hidden;
  max-height: min(calc(100vh - 16px), calc(100dvh - 16px));
  background: rgba(17, 14, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  color: var(--text, #e8e8f2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
}

.vocals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.12));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vocals-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.vocals-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  flex-shrink: 0;
}
.vocals-close:hover { background: rgba(255, 255, 255, 0.14); }
.vocals-close:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }

.vocals-practice-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.vocals-practice-row span { font-size:12px; line-height:1.45; color:#d3cbeb; }

.vocals-recovery { padding:12px; border:1px solid #bda3eb66; border-radius:10px; background:#a78bfa12; color:#e3d9f8; }
.vocals-recovery p { margin:0 0 10px; line-height:1.5; font-size:12px; }
.vocals-recovery[hidden] { display:none; }

/* Wrappers dissolve on narrow; become real cols when wide container query hits */
.vocals-col {
  display: contents;
}

.vocals-body {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.vocals-section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.65rem 0.75rem;
  flex-shrink: 0;
}

.vocals-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 0.45rem;
}

.vocals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.vocals-btn {
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border2, #333345);
  background: var(--surface, #1a1a22);
  color: var(--text, #e8e8f2);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.vocals-btn:hover:not(:disabled) { border-color: #ad8bdf; color: #fff; }
.vocals-btn:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.vocals-btn:disabled { opacity: 0.4; cursor: default; }

.vocals-btn.primary {
  background: linear-gradient(135deg, #6d32ce, #7045b7);
  border-color: transparent;
  color: #fff;
}
.vocals-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #7839db, #7a4dbf); }

.vocals-btn.recording {
  background: #3a1414;
  border-color: #ef4444;
  color: #fca5a5;
  animation: vocalsRecPulse 1.1s ease-in-out infinite;
}
@keyframes vocalsRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

.vocals-btn.danger {
  border-color: #ef444455;
  color: #fca5a5;
  background: #2a1518;
}

.vocals-btn.ghost {
  background: transparent;
  color: var(--muted, #666680);
}

.vocals-meter-wrap {
  flex: 1;
  min-width: 120px;
  height: 28px;
  border-radius: 6px;
  background: #0d0d12;
  border: 1px solid var(--border2, #333345);
  overflow: hidden;
  position: relative;
}
#vocals-meter {
  display: block;
  width: 100%;
  height: 100%;
}

.vocals-status {
  font-size: 0.68rem;
  color: #b9b9ce;
  min-height: 1.1em;
  margin-top: 0.35rem;
}
.vocals-status.error { color: #fca5a5; }
.vocals-status.ok { color: #86efac; }

.vocals-drop {
  border: 1.5px dashed rgba(167, 139, 250, 0.45);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  color: #b9b9ce;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.vocals-drop:hover,
.vocals-drop.dragover {
  background: rgba(124, 58, 237, 0.12);
  border-color: #a78bfa;
  color: #fff;
}
.vocals-drop input[type="file"] { display: none; }

.vocals-label {
  display: block;
  font-size: 0.65rem;
  color: #aaaabf;
  margin-bottom: 0.2rem;
}

.vocals-select,
.vocals-input,
.vocals-textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border2, #333345);
  background: var(--surface, #1a1a22);
  color: var(--text, #e8e8f2);
  font: inherit;
  font-size: 0.72rem;
  outline: none;
}
.vocals-select:focus,
.vocals-input:focus,
.vocals-textarea:focus { border-color: var(--accent, #7c3aed); }
.vocals-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.4;
}

.vocals-field { flex: 1; min-width: 120px; }

.vocals-slider-row {
  display: grid;
  grid-template-columns: 72px 1fr 40px;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.35rem;
}
.vocals-slider-row label {
  font-size: 0.65rem;
  color: #aaaabf;
}
.vocals-slider-row input[type="range"] {
  width: 100%;
  accent-color: #a78bfa;
  height: 28px;
  touch-action: manipulation;
}
.vocals-slider-row output {
  font-size: 0.65rem;
  color: #c4b5fd;
  text-align: right;
}

.vocals-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.vocals-character-note { margin: 0.45rem 0 0.75rem; }
.vocals-character-controls { margin: 0.6rem 0; padding: 0.7rem; border: 1px solid rgba(196, 181, 253, 0.18); border-radius: 12px; background: rgba(124, 58, 237, 0.055); }
.vocals-character-controls[hidden] { display: none; }
.vocals-character-controls .vocals-label { margin-top: 0; }
.vocals-character-controls .vocals-honest { margin-bottom: 0; }
.vocals-preset {
  min-height: 32px;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text, #e8e8f2);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.vocals-preset.active,
.vocals-preset[aria-pressed="true"],
.vocals-preset:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d32ce, #7045b7);
  border-color: transparent;
  color: #fff;
}

.vocals-honest {
  font-size: 0.62rem;
  color: #8a8299;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.vocals-lib-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Let the panel body be the primary scroll when resized tall */
  max-height: none;
  overflow: visible;
}
.vocals-lib-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.vocals-lib-item.active { border-color: rgba(167, 139, 250, 0.55); }
.vocals-lib-name {
  flex: 1;
  min-width: 80px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #eee7f6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vocals-lib-meta {
  font-size: 0.6rem;
  color: #8a8299;
  width: 100%;
}
.vocals-lib-empty {
  font-size: 0.68rem;
  color: #8a8299;
  padding: 0.4rem 0;
}

.vocals-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #b9b9ce;
  cursor: pointer;
  min-height: 36px;
  touch-action: manipulation;
}
.vocals-toggle input { accent-color: #a78bfa; width: 16px; height: 16px; }

@media (max-width: 420px) {
  .vocals-window.instrument-window, .vocals-window { width: calc(100vw - 12px); border-radius: 14px; }
  .vocals-body { padding: 0.6rem 0.7rem 0.85rem; }
  .vocals-slider-row { grid-template-columns: 64px 1fr 36px; }
}

/* ── Vocals player chrome + single wide 2-col shell (UI sole-owns vocals.css) ── */
.vocals-player {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: auto;
  min-height: min-content;
  max-height: none;
  gap: 0.35rem;
  box-sizing: border-box;
}

.vocals-wave-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 100px;
  max-height: 220px;
  border-radius: 10px;
  background: #0b0b10;
  border: 1px solid rgba(167, 139, 250, 0.35);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  outline: none;
  box-sizing: border-box;
}
.vocals-wave-wrap:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}
.vocals-wave-wrap[data-ready="1"] {
  border-color: rgba(167, 139, 250, 0.55);
}

.vocals-wave-canvas,
#vocals-wave-canvas {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 72px;
  height: auto;
  box-sizing: border-box;
}

.vocals-wave-ruler,
#vocals-wave-ruler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  margin: 0;
  display: block;
  font-size: 0.58rem;
  font-family: "Courier New", ui-monospace, monospace;
  color: #8a8299;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.vocals-wave-tick {
  position: absolute;
  top: 2px;
  font-size: 0.62rem;
  color: #8b8499;
  white-space: nowrap;
  pointer-events: none;
}

.vocals-playhead,
#vocals-playhead {
  position: absolute;
  top: 0;
  bottom: 18px;
  width: 2px;
  margin-left: -1px;
  background: #f9a8d4;
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.7);
  pointer-events: none;
  left: 0;
  transform: translateX(0);
  opacity: 0.95;
  z-index: 3;
}

.vocals-wave-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 28px;
  flex-shrink: 0;
}
.vocals-wave-time,
#vocals-time {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: 0.68rem;
  font-family: "Courier New", ui-monospace, monospace;
  color: #c4b5fd;
  font-variant-numeric: tabular-nums;
}
.vocals-wave-seek,
#vocals-seek {
  flex: 1 1 auto;
  width: 100%;
  height: 28px;
  accent-color: #a78bfa;
  touch-action: manipulation;
}
.vocals-wave-transport,
.vocals-player .vocals-honest {
  flex-shrink: 0;
}

/* ONE compact wide layout — true independent columns (no rowspan blank) */
@container vocals (min-width: 700px) {
  .vocals-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
    grid-template-areas:
      "job job"
      "left right"
      "library library";
    grid-template-rows: max-content max-content max-content;
    gap: 0.7rem;
    align-content: start;
    align-items: start;
  }
  .vocals-col {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    min-height: min-content;
    height: auto;
    align-self: start;
  }
  .vocals-col-left { grid-area: left; }
  .vocals-col-right { grid-area: right; }
  #vocals-sec-library { grid-area: library; }
  #vocals-sec-clip.vocals-player {
    height: auto;
    min-height: min-content;
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
  }
  .vocals-wave-wrap {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 100px;
    max-height: 220px;
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .vocals-body {
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
      grid-template-areas:
        "job job"
        "left right"
        "library library";
      grid-template-rows: max-content max-content max-content;
      gap: 0.7rem;
      align-content: start;
      align-items: start;
    }
    .vocals-col {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      min-width: 0;
      align-self: start;
    }
    .vocals-col-left { grid-area: left; }
    .vocals-col-right { grid-area: right; }
    #vocals-sec-library { grid-area: library; }
    #vocals-sec-clip.vocals-player {
      height: auto;
      min-height: min-content;
      flex: 0 0 auto;
    }
    .vocals-wave-wrap {
      flex-shrink: 0;
      min-height: 100px;
    }
  }
}

/* Vocal studio: a working player beside one focused tool panel. */
.vocals-window [hidden] { display:none !important; }
.vocals-subtitle { font-size:12px; color:#b4a6cf; }
.vocals-section-title { font-size:12px; letter-spacing:.08em; }
.vocals-select,.vocals-input,.vocals-textarea,.vocals-btn,.vocals-preset,
.vocals-label,.vocals-slider-row label,.vocals-slider-row output,.vocals-toggle { font-size:14px; }
.vocals-honest,.vocals-status,.vocals-lib-meta,.vocals-lib-empty { font-size:12px; line-height:1.5; }
.vocals-label { margin-top:8px; margin-bottom:4px; }
.vocals-section { padding:14px; }
.vocals-row { margin-top:10px; gap:8px; }
.vocals-drop { margin-top:12px; font-size:14px; }
.vocals-section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.vocals-section-head .vocals-section-title { margin:0; }
.vocals-details { margin-top:14px; border-top:1px solid #ffffff12; padding-top:10px; }
.vocals-details summary { font-size:14px; font-weight:600; color:#d8caf4; cursor:pointer; padding:6px 0; }
.vocals-slider-row { grid-template-columns:118px minmax(70px,1fr) 56px; margin-top:8px; }
.vocals-tabs { display:flex; gap:6px; padding:4px; background:#100d19; border:1px solid #ffffff15; border-radius:12px; }
.vocals-tabs button { flex:1; min-height:40px; font:inherit; color:#b7abc9; background:transparent; border:0; border-radius:8px; cursor:pointer; }
.vocals-tabs button[aria-selected="true"] { color:white; background:#6034ae; box-shadow:0 2px 8px #0005; }
.vocals-tabs button:focus-visible { outline:2px solid #c4b5fd; }
.vocals-chain { display:flex; justify-content:space-between; color:#bca8db; font-size:12px; padding:10px 0 16px; }
.vocals-chain span { color:#6f547f; }
.vocals-job { grid-area:job; padding:14px 16px; border:1px solid #9665ed55; background:linear-gradient(100deg,#29183e,#191624); border-radius:12px; }
.vocals-job-top { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; }
.vocals-job [hidden] { display:none; }
.vocals-job-spinner { width:18px; height:18px; box-sizing:border-box; flex-shrink:0; border:2px solid #bd8dff40; border-top-color:#d6b6ff; border-right-color:#d6b6ff; border-radius:50%; animation:vocalsJobSpin .8s linear infinite; }
@keyframes vocalsJobSpin { to { transform:rotate(360deg); } }
#vocals-job-percent { color:#e4cffd; font-variant-numeric:tabular-nums; flex-shrink:0; }
#vocals-job-elapsed { color:#b4a7cf; font-variant-numeric:tabular-nums; }
.vocals-job progress { display:block; width:100%; height:7px; margin-top:10px; accent-color:#bd8dff; }
.vocals-job p { margin:8px 0 0; color:#ae9ac5; font-size:12px; }
.vocals-window .vocals-wave-wrap { min-height:140px; }
.vocals-wave-time { font-size:12px; }
@container vocals (min-width:700px) {
  .vocals-body { grid-template-columns:minmax(280px,1.15fr) minmax(280px,1fr); }
}
@container vocals (max-width:699px) {
  .vocals-tabs { margin-top:4px; }
  .vocals-slider-row { grid-template-columns:112px minmax(60px,1fr) 52px; }
}
@media (prefers-reduced-motion:reduce) { .vocals-btn,.vocals-drop { transition:none; } .vocals-job-spinner { animation:none; } }

#vocals-job-stage { flex:1; min-width:0; }
#vocals-job-elapsed { flex-shrink:0; white-space:nowrap; }

.vocals-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.vocals-presets .vocals-preset { min-height:57px; padding:10px 11px; text-align:left; font-weight:600; border-radius:10px; line-height:1.25; }
.vocals-preset span { display:block; margin-top:4px; font-size:11px; font-weight:400; color:#b8aacb; }
.vocals-preset[aria-pressed="true"] span { color:#e2d5fa; }
.vocals-character-controls { padding:9px 12px 12px; margin-top:12px; border:1px solid #a879ef35; border-radius:10px; background:#241936; }
.vocals-style-note { color:#c6b7db; margin:12px 0; }

/* Keep native controls and scrollbars in the same palette as the studio. */
.vocals-window { color-scheme:dark; scrollbar-color:#75618a #19151f; }
.vocals-body { scrollbar-color:#75618a #19151f; scroll-padding:12px; }
.vocals-window :is(.vocals-btn,.vocals-preset,.vocals-close) {
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease;
}
.vocals-window :is(.vocals-select,.vocals-input,.vocals-textarea,summary):focus-visible {
  outline:2px solid #c4b5fd; outline-offset:3px; border-radius:8px;
}
.vocals-window input[type="checkbox"] { accent-color:#b49ae8; flex-shrink:0; }
.vocals-window input[type="range"] { min-width:0; cursor:pointer; }
.vocals-window input[type="range"]:disabled { cursor:default; opacity:.45; }
.vocals-window .vocals-honest,.vocals-window .vocals-lib-meta,.vocals-window .vocals-lib-empty { color:#aea2bc; }
.vocals-window .vocals-details summary { min-height:36px; display:list-item; align-content:center; }
.vocals-window .vocals-job-top { flex-wrap:wrap; gap:8px 12px; }
.vocals-window #vocals-job-stage { flex-basis:100px; overflow-wrap:anywhere; }
.vocals-window .vocals-job p,.vocals-window .vocals-style-note { overflow-wrap:anywhere; }
.vocals-window .vocals-tabs button { min-width:0; padding:8px; line-height:1.35; }
.vocals-window .vocals-presets .vocals-preset { min-width:0; overflow-wrap:anywhere; }
.vocals-window .vocals-slider-row input { min-width:0; }
.vocals-window .vocals-wave-seek { min-width:0; }
.vocals-window .vocals-wave-time { font-variant-numeric:tabular-nums; }

/* A floating panel can be narrower than the screen after a resize. */
@container vocals (max-width:360px) {
  .vocals-body { padding:10px; }
  .vocals-section { padding:12px; }
  .vocals-slider-row { grid-template-columns:minmax(0,1fr) 52px; gap:4px 8px; }
  .vocals-slider-row label { grid-column:1; line-height:1.4; }
  .vocals-slider-row output { grid-column:2; grid-row:1; }
  .vocals-slider-row input[type="range"] { grid-column:1 / -1; grid-row:2; }
  .vocals-wave-meta { flex-wrap:wrap; gap:2px; }
  .vocals-wave-seek { flex-basis:100%; }
  .vocals-field { min-width:min(120px,100%); }
  .vocals-chain { gap:6px; flex-wrap:wrap; }
}
@media (pointer:coarse) {
  .vocals-window :is(.vocals-btn,.vocals-select,.vocals-input,.vocals-tabs button,.vocals-details summary) { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .vocals-window :is(.vocals-btn,.vocals-preset,.vocals-close) { transition:none; }
  .vocals-window .vocals-btn.recording { animation:none; }
}