/* ============================================================================
 * Widgets — scene tabs/grid, filter grid, palette grid, stock-video chooser,
 * toggles, sliders, action buttons, video queue rows, spinners, transcribe
 * progress strip. Anything that lives inside the settings panel that isn't
 * pure layout chrome.
 * ========================================================================== */

/* Scene tabs + grid — active state uses the accent so the currently-selected
   tab is unmistakable at a glance. Inactive chips stay quiet so the panel
   doesn't shout. ------------------------------------------------------------ */
.scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.scene-tab {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  padding: 5px 10px;
  border-radius: var(--radius-5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
  text-transform: uppercase;
}
.scene-tab:hover  { background: var(--surface-4); color: var(--ink); }
.scene-tab.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.scene-btn {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 8px 4px;
  border-radius: var(--radius-2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              transform 0.1s var(--ease-out);
  text-align: center;
  min-height: 34px;
  line-height: 1.2;
}
.scene-btn:hover  { background: var(--surface-4); }
.scene-btn:active { transform: scale(0.97); }
.scene-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Filter chooser ------------------------------------------------------------ */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: var(--space-3);
}
.filter-btn {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 7px 4px;
  border-radius: var(--radius-2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              transform 0.1s var(--ease-out);
  text-align: center;
  min-height: 38px;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-btn:hover  { background: var(--surface-4); }
.filter-btn:active { transform: scale(0.97); }
.filter-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Palette chooser ----------------------------------------------------------- */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.palette-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 8px 10px;
  border-radius: var(--radius-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}
.palette-btn:hover  { background: var(--surface-4); }
.palette-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.palette-swatches { display: flex; gap: 3px; }
.palette-swatch   { width: 10px; height: 10px; border-radius: 50%; }

/* Stock-video chooser ------------------------------------------------------- */
.stock-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-bottom: var(--space-2);
}
.stock-btn {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out);
}
.stock-btn:hover { background: var(--surface-4); }
.stock-empty {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--ink-4);
  padding: 6px 4px;
}

.stock-url-row { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.stock-url-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  transition: border-color 0.15s var(--ease-out);
}
.stock-url-row input:focus { outline: none; border-color: var(--accent); }
.stock-url-row button {
  background: var(--surface-4);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s var(--ease-out);
}
.stock-url-row button:hover { background: var(--surface-5); }

/* Toggles + sliders — toggles use the Vizzy accent in the "on" state so they
   read as a real activation rather than a contrast flip. ------------------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;   /* the whole row toggles (drawer.js) */
  user-select: none;
}
.toggle {
  width: 36px; height: 20px;
  background: var(--surface-5);
  border-radius: var(--radius-4);
  position: relative;
  cursor: pointer;
  transition: background 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
  flex-shrink: 0;
}
.toggle.on {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.2s var(--ease-out),
              background 0.2s var(--ease-out);
  transform: translateX(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.toggle.on::after       { transform: translateX(16px); }

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 12px;
}
.slider-row label                 { width: 90px; color: var(--ink-3); }
.slider-row input[type=range]     { flex: 1; accent-color: var(--accent); }
.slider-row .val {
  width: 44px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Action buttons + spinner — `.active` reads as a primary CTA in the Vizzy
   accent; `.recording` keeps the dedicated red status so live-capture is
   visually distinct from "this control is selected." --------------------- */
.action-btn {
  width: 100%;
  background: var(--surface-4);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  padding: 10px;
  border-radius: var(--radius-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--space-2);
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              box-shadow 0.2s var(--ease-out),
              transform 0.1s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.action-btn:hover:not(:disabled) {
  background: var(--surface-5);
  border-color: var(--ink-5);
}
.action-btn:active:not(:disabled) { transform: scale(0.98); }
.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.action-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.action-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Recording state: pulsing red glow so it's obvious we're live capturing. */
.action-btn.recording {
  background: rgba(255, 50, 70, 0.22);
  border-color: var(--record);
  color: #ffb0b8;
  box-shadow: 0 0 16px var(--record-glow);
  animation: recordPulse 1.4s ease-in-out infinite;
}
@keyframes recordPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 50, 70, 0.55); }
  50%      { box-shadow: 0 0 26px rgba(255, 50, 70, 0.85); }
}

.action-btn .spinner {
  width: 12px; height: 12px;
  border: 1.5px solid var(--ink-5);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}
.action-btn.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Video queue --------------------------------------------------------------- */
.video-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 220px;
  overflow-y: auto;
  margin-top: var(--space-2);
}
.vq-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}
.vq-item:hover  { background: var(--surface-4); }
.vq-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.vq-num  {
  color: var(--ink-4);
  min-width: 18px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.vq-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-btn {
  background: var(--surface-4);
  border: none; color: var(--ink);
  padding: 2px 7px;
  border-radius: var(--radius-1);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background 0.15s var(--ease-out);
}
.vq-btn:hover { background: var(--surface-5); }
.vq-empty {
  font-size: 11px;
  color: var(--ink-4);
  padding: var(--space-3);
  text-align: center;
  background: var(--surface-3);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-2);
  margin-top: var(--space-2);
}

/* Transcribe (Scribe) progress strip — accent gradient so it matches the
   main progress bar and reads as the same kind of "live" signal. --------- */
.detect-status {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
  min-height: 14px;
  line-height: 1.4;
}
.detect-progress {
  width: 100%;
  height: 3px;
  background: var(--surface-4);
  border-radius: var(--radius-1);
  overflow: hidden;
  margin-bottom: var(--space-2);
  display: none;
}
.detect-progress.show { display: block; }
.detect-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff8eb2);
  width: 0%;
  transition: width 0.3s var(--ease-out);
}

/* ============================================================================
   Select row + hint — used by the Auto-change preset dropdown (Look tab).
   .row-hint is also the drawer's standard one-line helper text. Matches the existing .slider-row layout (label on left, control
   filling the rest), with a small descriptive line below.
   ========================================================================= */
.select-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 12px;
}
.select-row label { width: 90px; color: var(--ink-3); }
.row-select {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  padding: 7px 28px 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px)  50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.row-select:hover  { border-color: var(--hairline-2); background-color: var(--surface-4); }
.row-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.row-hint {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  color: var(--ink-3);
  opacity: 0.75;
  line-height: 1.45;
}

/* ============================================================================
   Download progress bar + status pill — surface for the yt-dlp helper flow.
   Shown under the paste-URL input in the stock-videos section while a
   download is in progress; auto-hidden when idle.
   ========================================================================= */
.dl-progress-bar {
  margin-top: 6px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.dl-progress-bar[hidden] { display: none !important; }
.dl-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #ff8eb2);
  transition: width 0.25s var(--ease-out);
}
.dl-status {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
}
.dl-status[hidden] { display: none !important; }
.dl-status[data-kind="ok"]    { color: #9beaa8; }
.dl-status[data-kind="warn"]  { color: #f7c66f; }
.dl-status[data-kind="error"] { color: #ff9b9b; }

/* ============================================================================
   Auto-change chips (Look tab) — which sections automation may change.
   Same pill language as .scene-tab; "on" uses the accent. Under the Manual /
   OFF presets the whole group dims and the chips are disabled (settings.js
   refreshAutoChips) — the hint below says why.
   ========================================================================= */
.auto-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-2);
  transition: opacity 0.2s var(--ease-out);
}
.auto-chip {
  background: var(--surface-3);
  border: 1px solid var(--hairline-2);
  color: var(--ink-3);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}
.auto-chip:hover:not(:disabled) { background: var(--surface-4); color: var(--ink); }
.auto-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.auto-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auto-chip:disabled { cursor: not-allowed; }
.auto-chips.is-idle { opacity: 0.4; }

/* Track tab — "Replace track" button with the current file name under it. */
.track-btn {
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}
.track-btn .track-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
}

/* Row of equal buttons (video queue prev / next / clear). */
.btn-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.btn-row .action-btn { margin: 0; }

/* Inline text button (e.g. Motion → "Change in Look ›"). */
.link-btn {
  background: none;
  border: 0;
  padding: 0 0 0 var(--space-2);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.motion-preset b { color: var(--ink-2); }

/* Small label above a full-width select. */
.field-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin: var(--space-3) 0 var(--space-1);
}
.field-label + .tts-select { margin-top: 0; }
.row-hint code {
  background: var(--surface-4);
  padding: 1px 4px;
  border-radius: 3px;
}
.row-hint[hidden] { display: none; }
.tts-input + .row-hint { margin-top: var(--space-2); }

/* Phone (and any touch screen, e.g. a phone in landscape that gets the
   desktop drawer): every tappable thing in the drawer is ≥44px tall, and
   nothing depends on hover. */
@media (max-width: 767px), (pointer: coarse) {
  .scene-tab      { min-height: 44px; padding: 8px 12px; font-size: 11px; }
  .scene-grid,
  .filter-grid    { gap: 6px; }
  .scene-btn,
  .filter-btn     { min-height: 44px; font-size: 11px; }
  .palette-btn    { min-height: 44px; }
  .stock-btn      { min-height: 44px; font-size: 11px; }
  .auto-chip      { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .action-btn     { min-height: 44px; font-size: 13px; }
  .toggle-row     { min-height: 44px; font-size: 14px; }
  .toggle         { width: 44px; height: 26px; border-radius: 13px; }
  .toggle::after  { top: 3px; left: 3px; width: 20px; height: 20px; }
  .toggle.on::after { transform: translateX(18px); }
  .toggle::before { content: ''; position: absolute; inset: -9px -4px; } /* 44px hit area */
  .slider-row     { min-height: 44px; }
  .slider-row input[type=range] { height: 32px; }
  .row-select,
  .tts-select,
  .tts-input      { min-height: 44px; font-size: 16px; } /* 16px: no iOS zoom */
  .stock-url-row input,
  .stock-url-row button { min-height: 44px; font-size: 16px; }
  .vq-item        { min-height: 44px; }
  .vq-btn         { min-width: 44px; min-height: 44px; font-size: 14px; }
  .link-btn       { min-height: 44px; }
  .file-drop      { padding: var(--space-5); }
  textarea        { font-size: 16px; }
  .ai-gen .ai-gen-prompt { min-height: 92px; }
  .ai-gen .mv-inline-link { padding: 6px 0; margin: -6px 0; }
}

/* ============================================================================
   AI image controls (Backdrop → AI Backdrop, Track → Generate cover art)
   ========================================================================== */
.ai-gen { display: grid; gap: 8px; margin-top: 8px; }
.ai-gen-prompt { resize: vertical; min-height: 56px; font-family: inherit; line-height: 1.4; }
.ai-gen .action-btn.is-off { opacity: 0.55; }
.ai-gen a.action-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ai-gen a.action-btn[hidden] { display: none; }
.ai-gen .mv-inline-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }