/* =========================================================================
 * Audio Studio
 * Built on the SAME st-* primitives as Video Studio (studio.css) so the two
 * studios are visually identical; only the few bits unique to audio live here.
 * ========================================================================= */

/* Toolbar badge: audio uses a rounded gradient chip instead of an SVG icon. */
#audioStudioView .st-toolbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

/* Attachment links inside the card action row must line up with the buttons. */
#audioStudioView a.st-btn {
  text-decoration: none;
}
#audioStudioView a.st-btn,
#audioStudioView a.st-btn:visited {
  color: inherit;
}

/* Keep the long transcript textarea readable and resizable. */
#audioStudioView textarea#asContent {
  line-height: 1.5;
}

/* The source row (library / upload buttons) wraps on narrow screens. */
#audioStudioView .st-row {
  flex-wrap: wrap;
}

/* Status pill colours for the audio-specific states. */
#audioStudioView .studio-card-status.status-ready {
  background: #e0f2fe;
  color: #0369a1;
}
#audioStudioView .studio-card-status.status-error {
  background: #fee2e2;
  color: #b91c1c;
}

/* Audio preview player on the job card (kept compact). */
#audioStudioView audio {
  width: 100%;
  height: 34px;
}

/* =========================================================================
 * Job panel — numbered step cards
 * ========================================================================= */
#audioStudioView .as-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  /* Generous internal padding: the step badge sits close to the rounded top-left
     corner and was being clipped by the card's overflow:hidden. */
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
#audioStudioView .as-card.as-run { background: #f8fafc; }
#audioStudioView .as-card.as-card-note { padding: 16px 20px; }

#audioStudioView .as-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#audioStudioView .as-step b { font-size: 14px; color: #1e293b; }
#audioStudioView .as-step-sub {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 1px;
}
/* The number badge — solid, inset far enough that the card radius can't clip it. */
#audioStudioView .as-step-n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}

#audioStudioView .as-h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #334155;
}
#audioStudioView .as-dim { color: #94a3b8; font-weight: 500; }

/* URL + its "Use link" button on one line, wrapping on narrow screens. */
#audioStudioView .as-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
#audioStudioView .as-inline input { flex: 1 1 260px; min-width: 0; }
#audioStudioView .as-inline .as-go { flex: 0 0 auto; white-space: nowrap; }

/* "or pick a file" divider */
#audioStudioView .as-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cbd5e1;
}
#audioStudioView .as-or::before,
#audioStudioView .as-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eef2f6;
}

#audioStudioView .as-srcrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#audioStudioView .as-srcrow a.st-btn { text-decoration: none; }

/* Equal-width option fields that wrap gracefully. */
#audioStudioView .as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
#audioStudioView .as-grid select,
#audioStudioView .as-grid input { width: 100%; }

#audioStudioView .as-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #2c3e50;
  margin-top: 12px;
  cursor: pointer;
}

#audioStudioView .as-ready {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 12.5px;
  word-break: break-all;
}
#audioStudioView .as-note {
  font-size: 13px;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 10px 12px;
}
/* The "last run failed" note has to be ACKNOWLEDGED (the button clears the
   stored reason), so it reads as one row: the reason, then OK. */
#audioStudioView .as-errdlg {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between;
}
#audioStudioView .as-errdlg-txt { flex: 1 1 220px; min-width: 0; }
#audioStudioView .as-errdlg-ok { flex: none; }
#audioStudioView .as-rate {
  font-size: 11.5px;
  color: #b45309;
  margin-top: 8px;
}
#audioStudioView .as-ta {
  width: 100%;
  min-height: 200px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #2c3e50;
  resize: vertical;
  box-sizing: border-box;
}

/* =========================================================================
 * THE PROGRESS CARD (2026-10-30)
 *
 * "the representation of the % of work done should be made more graphical and
 * like what video studio shows". The video studio reports a run as a CARD: a
 * stage name with its icon, a big percentage, a thick filled bar and the steps
 * under it. This is the same read, in the Audio Studio's palette.
 *
 * It replaced a 13px status line over a 10px bar, which read as a footnote
 * rather than as work in progress.
 * ========================================================================= */
#audioStudioView .as-prog {
  border: 1px solid var(--border-2, #e2e8f0);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f5f8fd);
  padding: 14px 16px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
#audioStudioView .as-prog-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#audioStudioView .as-prog-ic {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #eef2ff; color: #4f46e5;
  font-size: 15px; line-height: 1;
}
#audioStudioView .as-prog-titles {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
#audioStudioView .as-prog-stage {
  font-size: 14px; font-weight: 800; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#audioStudioView .as-prog-sub {
  font-size: 11.5px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The percentage is a PILL, not a word: it is the number the user came for. */
#audioStudioView .as-prog-pct {
  flex: none;
  min-width: 52px; text-align: center;
  padding: 4px 10px; border-radius: 999px;
  background: #e0e7ff; color: #4338ca;
  font-size: 13.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#audioStudioView .as-prog-track {
  height: 12px;
  border-radius: 999px;
  background: #e6ecf5;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}
#audioStudioView .as-prog-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #0ea5e9 55%, #6366f1);
  transition: width .35s ease;
  box-shadow: 0 0 8px rgba(99, 102, 241, .35);
}
/* While work is in flight the fill carries a moving stripe, so a long stage that
   sits at 82% for a minute still looks alive. */
#audioStudioView .as-prog.is-running .as-prog-fill {
  background-image:
    linear-gradient(90deg, #22c55e, #0ea5e9 55%, #6366f1),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 8px,
                              rgba(255, 255, 255, 0) 8px 16px);
  background-blend-mode: overlay;
  background-size: 100% 100%, 32px 32px;
  animation: as-prog-slide 1s linear infinite;
}
@keyframes as-prog-slide {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 32px 0; }
}
#audioStudioView .as-prog.is-done .as-prog-fill {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  box-shadow: 0 0 8px rgba(34, 197, 94, .45);
}
#audioStudioView .as-prog.is-done .as-prog-pct { background: #dcfce7; color: #15803d; }
#audioStudioView .as-prog.is-error .as-prog-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
}
#audioStudioView .as-prog.is-error .as-prog-pct { background: #fee2e2; color: #b91c1c; }

/* The step chips: pills with a state, instead of one line of faint text. */
#audioStudioView .as-prog-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
#audioStudioView .as-prog-steps > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: #f1f5f9; color: #94a3b8;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
#audioStudioView .as-prog-steps .done {
  color: #15803d; background: #dcfce7; font-weight: 700;
}
#audioStudioView .as-prog-steps .active {
  color: #4338ca; background: #e0e7ff; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .18);
}
@media (prefers-reduced-motion: reduce) {
  #audioStudioView .as-prog.is-running .as-prog-fill { animation: none; }
}

/* =========================================================================
 * "Write a transcript" switch + the ❗ engine-comparison bubble
 * ========================================================================= */

/* A real switch, not a tick box: it turns transcription OFF for the whole run,
   which is a heavier decision than the other boxes on this step. Logical
   properties so the knob lands on the correct side in RTL (the app's default). */
#audioStudioView .as-switch { gap: 10px; align-items: flex-start; }
#audioStudioView .as-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
#audioStudioView .as-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: inset-inline-start .15s ease;
}
#audioStudioView .as-switch input[type="checkbox"]:checked { background: var(--brand-600, #4f46e5); }
#audioStudioView .as-switch input[type="checkbox"]:checked::after { inset-inline-start: 18px; }
#audioStudioView .as-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-500, #6366f1); outline-offset: 2px; }

#audioStudioView .as-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}
#audioStudioView .as-info-btn {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50, #eef2ff);
  color: var(--brand-700, #4338ca);
}
#audioStudioView .as-info-btn:hover { background: var(--brand-100, #e0e7ff); }

/* The bubble itself is mounted on document.body (`.sw-card` is
   `overflow: hidden`, which would clip it inside the wizard), so these rules are
   deliberately scoped to `.as-thought` — never to #audioStudioView. */
.as-thought {
  position: fixed;
  z-index: 95;
  width: min(440px, calc(100vw - 24px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px 16px 14px;
  background: #fff;
  color: var(--text, #0f172a);
  border: 1px solid var(--border-2, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
}
.as-thought h5 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
/* The thought-cloud tail: three shrinking circles climbing towards the ❗. */
.as-thought-dots {
  position: absolute;
  top: -11px;
  inset-inline-start: 18px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.as-thought-dots i {
  display: block;
  background: #fff;
  border: 1px solid var(--border-2, #e2e8f0);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .1);
}
.as-thought-dots i:nth-child(1) { width: 9px; height: 9px; }
.as-thought-dots i:nth-child(2) { width: 7px; height: 7px; }
.as-thought-dots i:nth-child(3) { width: 5px; height: 5px; }
.as-thought .as-eng {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #f1f5f9);
}
.as-thought .as-eng:first-of-type { margin-top: 6px; padding-top: 0; border-top: none; }
.as-thought .as-eng-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.as-thought .as-eng-t b { font-size: 13.5px; }
.as-thought .as-tag { font-size: 11.5px; font-weight: 700; color: var(--text-3, #94a3b8); }
.as-thought .as-li { display: flex; gap: 7px; margin-top: 5px; }
.as-thought .as-li > span:first-child { flex: none; font-weight: 800; }
.as-thought .as-yes { color: #047857; font-weight: 700; }
.as-thought .as-no { color: #b91c1c; font-weight: 700; }
.as-thought .as-price {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-3, #94a3b8);
}

/* =========================================================================
 * The waveform right-click menu. Mounted on document.body (nothing clips it),
 * so these rules are scoped to `.as-menu` — NEVER to #audioStudioView.
 * ========================================================================= */
.as-menu {
  position: fixed;
  z-index: 96;
  min-width: 224px;
  padding: 6px;
  box-sizing: border-box;
  background: #fff;
  color: var(--text, #0f172a);
  border: 1px solid var(--border-2, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  font-family: inherit;
  font-size: 13px;
}
.as-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.as-menu-item:hover:not(:disabled) { background: #f1f5f9; }
.as-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.as-menu-ic { flex: none; width: 18px; text-align: center; }
.as-menu-sep { height: 1px; margin: 5px 6px; background: var(--border, #f1f5f9); }
.as-menu-head {
  padding: 7px 10px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3, #94a3b8);
  border-bottom: 1px solid var(--border, #f1f5f9);
  margin-bottom: 4px;
}
.as-menu-label {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-3, #94a3b8);
}
.as-menu-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 8px; }
.as-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
  cursor: pointer;
}
.as-swatch:hover:not(:disabled) { transform: scale(1.12); }
.as-swatch:disabled { opacity: .4; cursor: not-allowed; }

/* The "unsaved audio changes" leave-guard — shown in the app's own modal, so it
   is scoped to `.as-leave`, never to #audioStudioView. */
.as-leave { padding: 4px 2px; }
.as-leave-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text, #0f172a);
}
.as-leave-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* =========================================================================
 * The synced transcript: waveform player + cue columns
 * ========================================================================= */

/* The player is custom, so the native <audio> is hidden (the old rule styled a
   visible 34px control; this one takes over). */
#audioStudioView .as-player audio,
#audioStudioView #asAudio { display: none; }

#audioStudioView .as-player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f1f5f9);
}
#audioStudioView .as-play-btn {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 3px 10px rgba(79, 70, 229, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#audioStudioView .as-play-btn:hover { filter: brightness(1.06); }
#audioStudioView .as-mini-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#audioStudioView .as-mini-btn:hover { background: #f1f5f9; }

#audioStudioView .as-wave-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 160px;
  /* Back to the ORIGINAL 56px wave. Growing the BOX was the wrong fix for "the
     waves are too small": the box was already empty space, and the envelope was
     drawn at its true amplitude inside it. The height now comes from the DRAWING
     (a normalised view in paintCanvas) and the box only carries the extra 16px
     the scrollbar needs (5px gap + 11px track). */
  height: 72px;
  display: flex;
  flex-direction: column;
}
#audioStudioView .as-wave {
  display: block;
  width: 100%;
  height: 56px;
  cursor: pointer;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #eef2f6;
}
/* The waveform's own horizontal SCROLLBAR (thumb width = the visible share). */
#audioStudioView .as-wave-scroll {
  position: relative;
  flex: none;
  height: 11px;
  margin-top: 5px;
  border-radius: 999px;
  background: #eef2f6;
  cursor: pointer;
  overflow: hidden;
}
#audioStudioView .as-wave-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  opacity: .85;
  cursor: grab;
}
#audioStudioView .as-wave-thumb:hover { opacity: 1; }
#audioStudioView .as-wave-scroll.as-nodrag { cursor: default; }
#audioStudioView .as-wave-scroll.as-nodrag .as-wave-thumb {
  cursor: default;
  opacity: .45;
  background: #94a3b8;
}
#audioStudioView .as-wave-hint {
  position: absolute;
  inset-inline-end: 8px;
  top: 4px;
  font-size: 10px;
  color: #94a3b8;
  pointer-events: none;
}

/* ---- The keyboard-shortcut strip, just above the waveform -------------------
   Every binding the wave honours is listed here, because a shortcut nobody can
   discover is a shortcut nobody uses. `kbd` chips rather than prose so the keys
   are what the eye lands on, and the strip wraps on a phone instead of
   overflowing. It scrolls away with the wave — it is a reference, not a
   toolbar. */
#audioStudioView .as-keys {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #64748b;
}
#audioStudioView .as-keys-title {
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 10px;
  color: #94a3b8;
}
#audioStudioView .as-keys span.as-key { white-space: nowrap; }
#audioStudioView .as-keys kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-inline-end: 3px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f8fafc;
  color: #334155;
  font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

/* ---- The ⌨️ Shortcuts BUTTON above the waveform -----------------------------
   The full list now lives in a popup (opened from here) instead of a chip strip
   that pushed the wave down. */
#audioStudioView .as-keysbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }

/* ---- A hand-made bilingual pair ("Choose my own…") ---------------------------
   Two pickers (a third is optional), grouped under one tiny label. */
#audioStudioView .as-langparts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
#audioStudioView .as-langparts-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #94a3b8;
}
#audioStudioView .as-langpart {
  padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 9px;
  background: #fff; color: #2c3e50; font-size: 13px; cursor: pointer;
}

/* ---- the same list inside that popup --------------------------------------
   The modal is rendered at BODY level, outside #audioStudioView, so these rules
   are deliberately unscoped: one row per shortcut, the action on the left and
   its keys as `kbd` chips on the right. */
.as-keys { display: block; }
.as-keys .as-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2f6;
}
.as-keys .as-key-lbl { font-size: 13.5px; color: #475569; }
.as-keys .as-key-combo { display: inline-flex; gap: 4px; flex-shrink: 0; }
.as-keys kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font: 600 11.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

/* ---- "✨ Clean up audio" — the one-click DSP + AI denoise button ------------
   The single most valuable action on this page, so it is the only filled,
   coloured control in the player row: the transport and zoom buttons are all
   neutral circles, and "Clean up" has to be findable without reading. */
#audioStudioView .as-enh-btn {
  flex: none;
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28);
}
#audioStudioView .as-enh-btn:hover { filter: brightness(1.07); }
#audioStudioView .as-enh-btn:disabled { opacity: .5; filter: none; box-shadow: none; }

/* What the last cleanup actually did (mode · AI denoise · loudness). A quiet
   line rather than a badge: it is a record, not a notification. */
#audioStudioView .as-enh-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: #475569;
}
#audioStudioView .as-time {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  min-width: 82px;
  text-align: center;
}
#audioStudioView .as-speedwrap {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #475569;
}
#audioStudioView .as-speedwrap select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  color: #334155;
}

/* The cue columns. Two side by side when a translation exists, one otherwise.
   Each column scrolls on its own so the active cue can be pinned to its top
   without dragging the other column with it. */
#audioStudioView .as-cues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
#audioStudioView .as-cues.as-cues-two { grid-template-columns: 1fr 1fr; }
#audioStudioView .as-cue-col {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  min-width: 0;
}
#audioStudioView .as-cue-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6;
}
/* Each column's own Copy — the direct answer to "copy the transcript /
   translation" (the toolbar buttons say the same thing, spelled out). */
#audioStudioView .as-cue-copy {
  flex: none;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 2px 9px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
#audioStudioView .as-cue-copy:hover { background: #f1f5f9; }

/* The waveform selection toolbar (shown once a range is selected). */
#audioStudioView .as-selbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #eef6ff;
  border: 1px solid #bfdbfe;
}
#audioStudioView .as-sel-read {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
  margin-inline-end: 6px;
}
#audioStudioView .as-sel-btn { font-size: 12px; padding: 4px 9px; }

/* Zoom controls in the player bar (plus Ctrl + scroll / pinch on the wave). */
#audioStudioView .as-zoomwrap {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#audioStudioView .as-zoom-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The STAGED-audio-edits bar ("💾 Save changes"). Amber like the text-edit bar,
   because it means the same thing: work that is not saved yet. */
#audioStudioView .as-opsbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
#audioStudioView .as-opsbar #asOpsMsg {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
}
#audioStudioView .as-ops-note {
  font-size: 11.5px;
  color: #a16207;
  white-space: nowrap;
}
/* A control that is unavailable while edits are staged (playback and the
   server-side selection actions — the audio on disk is still the old one). */
#audioStudioView .as-off,
#audioStudioView button:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}
/* Zoomed waveform: shift-drag grabs and slides the window. */
#audioStudioView .as-wave.as-zoomed { cursor: grab; }
#audioStudioView .as-wave.as-zoomed:active { cursor: grabbing; }

/* The TRANSLATED column's own download/copy actions, sitting UNDER its cue list. */
#audioStudioView .as-cue-foot {
  border-top: 1px solid #eef2f6;
  background: #f8fafc;
  padding: 8px;
}
#audioStudioView .as-cue-foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#audioStudioView .as-cue-foot-row .as-foot-btn { font-size: 12px; padding: 4px 9px; }

/* Find & Replace, sitting under the cue columns — the slot the two Slides
   buttons used to occupy. It edits the STAGED copy, so its hint says so. */
#audioStudioView .as-findbar {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
#audioStudioView .as-findrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#audioStudioView .as-findrow input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: #2c3e50;
  box-sizing: border-box;
}
#audioStudioView .as-findrow input[type="text"]:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .25);
}
#audioStudioView .as-findscope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
#audioStudioView .as-findscope select {
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  background: #fff;
  color: #334155;
}
#audioStudioView .as-find-note {
  min-height: 15px;
  margin-top: 6px;
  font-size: 12px;
}
#audioStudioView .as-find-note.is-ok { color: #16a34a; }
#audioStudioView .as-find-note.is-none { color: #dc2626; }
#audioStudioView .as-find-hint { margin-top: 2px; font-size: 11.5px; }

/* ↑ / ↓ — step through the matches RIGHT BESIDE Find. They are a tight pair so
   they read as one stepper, not as two more buttons in a long row. */
#audioStudioView .as-findnav {
  flex: none;
  display: inline-flex;
  gap: 2px;
}
#audioStudioView .as-findstep {
  min-width: 34px;
  justify-content: center;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* The FOUND WORDS, painted into the cue text. All matches are highlighted; the
   one the ↑/↓ pointer is on is stronger, so it is obvious which word Replace will
   touch. (A contenteditable div has no text range to select, hence marks.) */
#audioStudioView mark.as-find-mark {
  background: #fef08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px #fde047 inset;
}
#audioStudioView mark.as-find-mark.is-cur {
  background: #fbbf24;
  box-shadow: 0 0 0 1px #f59e0b inset;
}

/* The cue the Find pointer is on. The WORDS themselves are marked inside it
   (`mark.as-find-mark`), so this is only the row's frame — the flash makes the
   moved-to row obvious even when the term sits on its last line. */
#audioStudioView .as-cue.as-cue-hit {
  background: #fef9c3;
  box-shadow: inset 3px 0 0 #eab308;
}

/* "Translate again" control in the run card (a target picker + its button). */
#audioStudioView .as-retr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#audioStudioView .as-retr select {
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 12.5px;
  background: #fff;
  color: #334155;
}
#audioStudioView .as-cue-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}
#audioStudioView .as-cue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
#audioStudioView .as-cue:hover { background: #f8fafc; }
#audioStudioView .as-cue.as-cue-on {
  background: #e0f2fe;
  box-shadow: inset 3px 0 0 #0ea5e9;
}
#audioStudioView .as-cue-time {
  flex: none;
  margin-top: 1px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
  color: #0369a1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
#audioStudioView .as-cue-time:hover { background: #e0f2fe; }
#audioStudioView .as-cue-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #2c3e50;
  word-break: break-word;
}
#audioStudioView .as-cue-tr .as-cue-text { color: #334155; }
#audioStudioView .as-cue-empty { padding: 10px; color: #94a3b8; font-size: 12px; }

/* The raw transcript textareas are kept for Copy, but out of the way. */
#audioStudioView textarea.as-raw-ta {
  display: none;
}

/* =========================================================================
 * Editing the transcript / translation (in-place cue editing)
 * ========================================================================= */

/* A cue line is editable — make that legible without shouting. */
#audioStudioView .as-cue-text {
  border-radius: 6px;
  padding: 2px 4px;
  outline: none;
  transition: background .12s ease, box-shadow .12s ease;
}
#audioStudioView .as-cue-text:hover {
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}
#audioStudioView .as-cue-text:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px #38bdf8;
}
#audioStudioView .as-edit-cue-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: #94a3b8;
}

/* Pending-edits bar. Sticks to the bottom of the card so Save is always in
   reach while the user is editing cues further up. */
#audioStudioView .as-editbar {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
#audioStudioView .as-edit-dot { color: #f59e0b; font-size: 12px; }
#audioStudioView .as-editbar #asEditMsg {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
}

/* "You are viewing your edited version" banner + the way back. */
#audioStudioView .as-edited-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 12.5px;
}
#audioStudioView .as-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

/* Download version picker (Original | Your edits). */
#audioStudioView .as-vers {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 8px;
  font-size: 11.5px;
  color: #64748b;
}
#audioStudioView .as-ver-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
#audioStudioView .as-ver-btn.is-on {
  background: var(--brand-600, #4f46e5);
  border-color: var(--brand-600, #4f46e5);
  color: #fff;
}
#audioStudioView .as-linkbtn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* A phone cannot show two readable columns; stack them instead. */
  #audioStudioView .as-cues.as-cues-two { grid-template-columns: 1fr; }
  #audioStudioView .as-cue-scroll { max-height: 260px; }
  #audioStudioView .as-time { min-width: 70px; font-size: 11px; }
  /* Find & Replace: one control per line beats two 60px-wide inputs. */
  #audioStudioView .as-findrow input[type="text"] { flex: 1 1 100%; }
}

/* ===========================================================================
   AI insights — structured summary + chart (ADDITIVE)
   ---------------------------------------------------------------------------
   Nothing here touches the audio-editing controls: these are the two result
   panels that sit BELOW the transcript, plus the wizard's two new screens.
   =========================================================================== */

/* ---- the summary: rendered markdown -------------------------------------- */
#audioStudioView .as-insight-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
#audioStudioView .as-insight-head h5 {
  margin: 0; font-size: 14px; font-weight: 800; color: #2c3e50;
}
#audioStudioView .as-prose {
  font-size: 14px; line-height: 1.7; color: #334155;
  max-height: 60vh; overflow: auto;
  border: 1px solid #eef2f6; border-radius: 12px; padding: 12px 14px;
  background: #fbfdff;
}
#audioStudioView .as-prose.is-rtl { text-align: right; }
#audioStudioView .as-prose h1 { font-size: 19px; margin: 2px 0 10px; color: #0f172a; }
#audioStudioView .as-prose h2 {
  font-size: 15.5px; margin: 16px 0 6px; color: #1b74bc;
  padding-bottom: 4px; border-bottom: 1px solid #eef2f6;
}
#audioStudioView .as-prose h3 { font-size: 14px; margin: 12px 0 4px; color: #334155; }
#audioStudioView .as-prose h4, #audioStudioView .as-prose h5, #audioStudioView .as-prose h6 {
  font-size: 13.5px; margin: 10px 0 4px; color: #475569;
}
#audioStudioView .as-prose p { margin: 6px 0; }
#audioStudioView .as-prose ul { margin: 4px 0 8px; padding-inline-start: 20px; }
#audioStudioView .as-prose li { margin: 3px 0; }
#audioStudioView .as-prose code {
  background: #f1f5f9; border-radius: 5px; padding: 1px 5px;
  font: 500 12.5px ui-monospace, Menlo, Consolas, monospace;
}

/* ---- the chart: the style tabs + the drawing ---------------------------- */
#audioStudioView .as-chart-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
#audioStudioView .as-chart-viewlbl {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #94a3b8; margin-inline-end: 2px;
}
#audioStudioView .as-chart-tab {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #475569;
  cursor: pointer;
}
#audioStudioView .as-chart-tab:hover { background: #f1f5f9; }
#audioStudioView .as-chart-tab.is-on {
  background: #eff6ff; border-color: #93c5fd; color: #1b74bc;
}
#audioStudioView .as-chart-body {
  border: 1px solid #eef2f6; border-radius: 12px; padding: 12px;
  background: #fbfdff; overflow: auto; max-height: 65vh;
}
#audioStudioView .as-chart-svg { display: block; width: 100%; }
/* Mermaid lays every label out for LTR text. Without this the RTL page makes the
   SVG inherit `direction: rtl` and each label's origin jumps to the RIGHT edge of
   its node, so the words render OUTSIDE their boxes. See renderMermaidInto(). */
#audioStudioView .as-chart-svg svg { display: block; margin: 0 auto; direction: ltr; }
#audioStudioView .as-chart-busy { color: #64748b; font-size: 13px; padding: 18px 0; text-align: center; }
#audioStudioView .as-chart-src {
  font: 500 11.5px/1.6 ui-monospace, Menlo, Consolas, monospace;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 10px; overflow: auto; max-height: 220px; color: #475569;
}

/* ---- the wizard's chart-type cards ------------------------------------- */
#audioStudioView .as-chartcard {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: start; cursor: pointer; margin-bottom: 8px;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 14px;
  padding: 10px 12px;
}
#audioStudioView .as-chartcard:hover { background: #f8fafc; }
#audioStudioView .as-chartcard.is-on {
  border-color: #1b74bc; background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(27,116,188,.12);
}
#audioStudioView .as-chartcard-ico { font-size: 20px; }
#audioStudioView .as-chartcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#audioStudioView .as-chartcard-t { font-weight: 700; font-size: 13.5px; color: #2c3e50; }
#audioStudioView .as-chartcard-s { font-size: 12px; color: #64748b; }
#audioStudioView .as-chartcard-thumb { width: 120px; flex: 0 0 auto; }
#audioStudioView .as-chartcard-thumb svg { width: 100%; height: auto; }
#audioStudioView .as-chartcard-thumb .t-root { fill: #dbeafe; stroke: #93c5fd; }
#audioStudioView .as-chartcard-thumb .t-n { fill: #f1f5f9; stroke: #cbd5e1; }
#audioStudioView .as-chartcard-thumb .t-line { stroke: #cbd5e1; stroke-width: 1.4; }

#audioStudioView .as-note.as-warn { color: #b45309; }

/* ---- Summary → PDF (the browser's own print pipeline) --------------------
   There is NO server-side HTML→PDF renderer in this app (the only one is a
   build-time script for the printed marketing flyers), so "PDF" prints a
   container placed directly on <body>. While `as-printing` is set, everything
   except that container is hidden — and the container carries the transcript's
   own `dir`, so RTL comes out right without a dependency. */
#asPrintArea { display: none; }
@media print {
  body.as-printing > *:not(#asPrintArea) { display: none !important; }
  body.as-printing #asPrintArea { display: block !important; padding: 0; margin: 0; color: #111; }
  body.as-printing { background: #fff !important; }
  body.as-printing #asPrintArea .as-print-head {
    border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 14px;
  }
  body.as-printing #asPrintArea .as-print-title { display: block; font-size: 17pt; font-weight: 800; }
  body.as-printing #asPrintArea .as-print-sub { font-size: 10pt; color: #555; }
  body.as-printing #asPrintArea h1 { font-size: 19pt; margin: 10px 0 8px; }
  body.as-printing #asPrintArea h2 { font-size: 14pt; margin: 14px 0 5px; }
  body.as-printing #asPrintArea h3 { font-size: 12pt; margin: 10px 0 4px; }
  body.as-printing #asPrintArea p, body.as-printing #asPrintArea li { font-size: 11pt; line-height: 1.6; }
  body.as-printing #asPrintArea ul { padding-inline-start: 20px; margin: 4px 0 10px; }
  body.as-printing #asPrintArea li { break-inside: avoid; }
  body.as-printing #asPrintArea .as-mix-names {
    border: 1px solid #ddd; background: #fafafa; break-inside: avoid;
    padding: 6px 10px; margin-bottom: 12px;
  }
  body.as-printing #asPrintArea .as-mix-names li { font-size: 10pt; }
}

/* ===========================================================================
   COMBINE SEVERAL JOBS — the picker in the list, and the result modal.
   ---------------------------------------------------------------------------
   The modal is mounted on <body>, OUTSIDE #audioStudioView, so the scoped rules
   above cannot reach it. Rather than thread `:is(#audioStudioView, .as-mixwrap)`
   through twenty selectors, the pieces this modal REUSES are restated under
   `.as-mixwrap` — exactly what `.as-keys` already does for the shortcut popup.
   =========================================================================== */
#audioStudioView .as-pickwrap {
  display: inline-flex; align-items: center; margin-inline-end: 8px;
  cursor: pointer;
}
#audioStudioView .as-pick {
  width: 16px; height: 16px; accent-color: #4f46e5; cursor: pointer;
}
#audioStudioView .studio-card.is-picked {
  border-color: #818cf8; box-shadow: 0 0 0 2px rgba(99, 102, 241, .16);
}
#audioStudioView .as-mixbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
  padding: 10px 12px; margin: 0 0 14px;
}
#audioStudioView .as-mixcount { font-weight: 700; font-size: 13.5px; color: #3730a3; }
/* A combined generation running in the background, kept on the LIST (the popup
   that started it may already be closed). Same indigo family as the selection
   bar, but with the run's own progress track. */
#audioStudioView .as-mixlivehost { margin: 0 0 14px; }
#audioStudioView .as-mixlive {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
  padding: 9px 12px 10px;
}
#audioStudioView .as-mixlive + .as-mixlive { margin-top: 8px; }
#audioStudioView .as-mixlive-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
#audioStudioView .as-mixlive-ic { font-size: 15px; line-height: 1; }
#audioStudioView .as-mixlive-txt {
  flex: 1 1 220px; min-width: 0; font-size: 13px; color: #3730a3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#audioStudioView .as-mixlive-txt b { font-weight: 700; }
#audioStudioView .as-mixlive-txt .as-dim { font-weight: 500; color: #6366f1; }
#audioStudioView .as-mixlive-pct { font-size: 12.5px; color: #3730a3; }
#audioStudioView .as-mixlive-open { padding: 3px 10px; font-size: 12px; }
#audioStudioView .as-mixlive .st-progress-track { margin-top: 7px; }

.as-mixwrap { font-size: 14px; color: var(--text, #0f172a); }
.as-mixwrap .as-dim { color: #94a3b8; font-weight: 500; }
.as-mixwrap .as-insight-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.as-mixwrap .as-insight-head h5 { margin: 0; font-size: 15px; font-weight: 800; color: #2c3e50; }
.as-mixwrap .as-prose {
  font-size: 14px; line-height: 1.7; color: #334155;
  max-height: 55vh; overflow: auto;
  border: 1px solid #eef2f6; border-radius: 12px; padding: 12px 14px;
  background: #fbfdff;
}
.as-mixwrap .as-prose.is-rtl { text-align: right; }
.as-mixwrap .as-prose h1 { font-size: 19px; margin: 2px 0 10px; color: #0f172a; }
.as-mixwrap .as-prose h2 {
  font-size: 15.5px; margin: 16px 0 6px; color: #1b74bc;
  padding-bottom: 4px; border-bottom: 1px solid #eef2f6;
}
.as-mixwrap .as-prose h3 { font-size: 14px; margin: 12px 0 4px; color: #334155; }
.as-mixwrap .as-prose p { margin: 6px 0; }
.as-mixwrap .as-prose ul { margin: 4px 0 8px; padding-inline-start: 20px; }
.as-mixwrap .as-prose li { margin: 3px 0; }
.as-mixwrap .as-prose code {
  background: #f1f5f9; border-radius: 5px; padding: 1px 5px;
  font: 500 12.5px ui-monospace, Menlo, Consolas, monospace;
}
.as-mixwrap .as-srcrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.as-mixwrap .as-srcrow a.st-btn { text-decoration: none; }
.as-mixwrap .as-note {
  font-size: 13px; color: #0369a1; background: #f0f9ff;
  border: 1px solid #bae6fd; border-radius: 10px; padding: 10px 12px;
}
.as-mixwrap .as-note.as-warn { color: #b45309; }
/* The "what background really means" list under the Generate buttons. Small,
   muted and bulleted so it reads as fine print — it explains behaviour the user
   is about to rely on, not a warning. */
.as-mixwrap .as-mix-notes {
  margin: 6px 0 2px; padding-inline-start: 18px;
  font-size: 11.5px; line-height: 1.55; color: var(--text-3, #64748b);
}
.as-mixwrap .as-mix-notes li { margin: 2px 0; }
.as-mixwrap .as-chart-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.as-mixwrap .as-chart-viewlbl {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #94a3b8; margin-inline-end: 2px;
}
.as-mixwrap .as-chart-tab {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #475569;
  cursor: pointer;
}
.as-mixwrap .as-chart-tab:hover { background: #f1f5f9; }
.as-mixwrap .as-chart-tab.is-on { background: #eff6ff; border-color: #93c5fd; color: #1b74bc; }
.as-mixwrap .as-chart-body {
  border: 1px solid #eef2f6; border-radius: 12px; padding: 12px;
  background: #fbfdff; overflow: auto; max-height: 68vh;
}
.as-mixwrap .as-chart-svg { display: block; width: 100%; }
/* Same LTR pin as the job screen — see renderMermaidInto(). */
.as-mixwrap .as-chart-svg svg { display: block; margin: 0 auto; direction: ltr; }
.as-mixwrap .as-chart-busy { color: #64748b; font-size: 13px; padding: 18px 0; text-align: center; }

.as-mix-saved { border-top: 1px dashed #e2e8f0; margin-top: 14px; padding-top: 2px; }
/* A row is a WRAPPER with two buttons: the result (open it) and the 🗑. It used
   to be one button, and a button inside a button is invalid HTML — the parser
   hoists the inner one out, so the 🗑 would have landed outside the row it
   deletes. The wrapper keeps the old class name (and the tooltip on the open
   button) so nothing that looks for a saved row has to change. */
.as-mix-savedrow { display: flex; align-items: stretch; gap: 6px; margin: 0 0 6px; }
.as-mix-savedrow .as-mix-open {
  flex: 1 1 auto; min-width: 0; text-align: start; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px;
  font: inherit; font-size: 13px; color: #334155; cursor: pointer;
}
.as-mix-savedrow .as-mix-open:hover { background: #eef2ff; border-color: #c7d2fe; }
.as-mix-savedrow .as-mix-del {
  flex: 0 0 auto; background: #fff; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.as-mix-savedrow .as-mix-del:hover { background: #fef2f2; border-color: #fca5a5; }
/* A LABEL on each of the two language pickers in the run row — 🎙️ the SPOKEN
   language and 🌍 the translation target. Both selects hold language names and
   sat next to each other unlabelled, which made them impossible to tell apart.
   (.as-retr itself is styled with the run card, ~line 807.) */
#audioStudioView .as-retr-lbl { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* Rename the job: a pencil beside the title, on the dark header it sits on. */
#audioStudioView .as-pen {
  background: transparent; border: 0; padding: 0 4px; margin: 0; cursor: pointer;
  font-size: 14px; line-height: 1; color: #cbd5e1; vertical-align: middle;
}
#audioStudioView .as-pen:hover { color: #ffffff; }

/* The job's name field, on the first screen of a new job. */
#audioStudioView .as-jobname { margin: 0 0 14px; }
#audioStudioView .as-jobname input { font-weight: 600; }

/* WHICH jobs a combination is of. Deliberately UNSCOPED: the combine modal and
   the print container are both placed directly on <body>, so a rule nested under
   #audioStudioView would never reach them. See mixNamesHtml(). */
.as-mix-names {
  border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
  padding: 8px 12px; margin: 0 0 10px;
}
.as-mix-names-h { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 2px; }
.as-mix-names ul { margin: 2px 0 0; padding-inline-start: 20px; }
.as-mix-names li { font-size: 13px; color: #334155; margin: 2px 0; }
.as-mix-names .as-mix-name-off { color: #64748b; }

/* =========================================================================
 * ✂ AUTOCLIP — the toolbar button, the paste dialog, and the clip list under
 * the wave. A "clip" is a COLOURED MARK with a title, so everything here is
 * scoped to the audio studio view except the dialog (mounted on <body> so
 * nothing clips it, exactly like .as-menu).
 * ========================================================================= */
#audioStudioView .as-autoclip-btn { white-space: nowrap; }

/* The list of clips. One row each: colour, name, range, and its own actions. */
#audioStudioView .as-clips {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--border-2, #e2e8f0); background: #fff;
}
#audioStudioView .as-clips-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
}
#audioStudioView .as-clips-title { font-size: 13.5px; color: var(--text, #0f172a); }
#audioStudioView .as-clips-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-inline-start: 4px;
  border-radius: 999px; background: #e0f2fe; color: #0369a1;
  font-size: 11.5px; font-weight: 800; text-align: center;
}
#audioStudioView .as-clips-bulk { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#audioStudioView .as-clips-bulk .st-btn { margin: 0; }

#audioStudioView .as-clip-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px;
  border-top: 1px solid var(--border, #f1f5f9); font-size: 13px;
}
#audioStudioView .as-clip-row:first-of-type { border-top: 0; }
#audioStudioView .as-clip-dot {
  flex: none; width: 12px; height: 12px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
}
#audioStudioView .as-clip-name {
  flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#audioStudioView .as-clip-time {
  flex: none; color: var(--text-2, #475569); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#audioStudioView .as-clip-badge {
  flex: none; padding: 1px 7px; border-radius: 999px; background: #dcfce7;
  color: #15803d; font-size: 11px; font-weight: 800; white-space: nowrap;
}
#audioStudioView .as-clip-acts { flex: none; display: inline-flex; gap: 4px; }
#audioStudioView .as-clip-btn {
  border: 1px solid var(--border-2, #e2e8f0); background: #fff; color: inherit;
  border-radius: 8px; width: 28px; height: 26px; line-height: 1; cursor: pointer;
  font-size: 13px; padding: 0;
}
#audioStudioView .as-clip-btn:hover { background: #f1f5f9; }
#audioStudioView .as-clip-btn.as-clip-danger:hover { background: #fee2e2; border-color: #fecaca; }
/* Auditioning a clip: the play glyph is the row's first action, so it reads as
   "this is a clip you can listen to" rather than as one more icon. While it is
   playing the row says so — the button turns accent and the title goes with it,
   which is the only thing that tells you WHICH clip is making the sound. */
#audioStudioView .as-clip-play {
  color: var(--brand, #4f46e5); border-color: var(--brand-line, #c7d2fe);
  font-size: 11px;
}
#audioStudioView .as-clip-play:hover { background: #eef2ff; }
#audioStudioView .as-clip-row.is-playing { background: #eef2ff; }
#audioStudioView .as-clip-row.is-playing .as-clip-name { color: var(--brand, #4f46e5); }
#audioStudioView .as-clip-row.is-playing .as-clip-play {
  background: var(--brand, #4f46e5); color: #fff; border-color: var(--brand, #4f46e5);
}

/* The paste dialog (on <body>, so never scoped to the view). */
.as-clipdlg-ovl {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.as-clipdlg {
  width: min(520px, 100%); max-height: 88vh; overflow: auto;
  background: #fff; color: var(--text, #0f172a); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
  font-family: inherit; font-size: 13.5px;
}
.as-clipdlg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px 6px;
}
.as-clipdlg-head b { font-size: 15px; }
.as-clipdlg-x {
  border: 0; background: none; cursor: pointer; font-size: 15px;
  color: var(--text-3, #94a3b8); padding: 4px 6px; border-radius: 8px;
}
.as-clipdlg-x:hover { background: #f1f5f9; color: #0f172a; }
.as-clipdlg-body { padding: 0 16px; }
.as-clipdlg-hint { margin: 2px 0 8px; color: var(--text-2, #475569); }
.as-clipdlg-body textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 130px;
  padding: 9px 11px; border: 1px solid var(--border-2, #e2e8f0); border-radius: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  line-height: 1.6; color: inherit; background: #fbfcff;
}
.as-clipdlg-note { margin: 6px 0 0; font-size: 12px; color: var(--text-3, #94a3b8); }
.as-clipdlg-err { margin: 8px 0 0; color: #b91c1c; font-weight: 700; font-size: 12.5px; }
.as-clipdlg-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 14px;
}

/* ---- the progress bar INSIDE a job card (the jobs list) --------------------
 * It had no height at all: `.st-progress-track` only gets one from
 * `.st-progress-card` / `.st-list-progress`, so a running or uploading job drew a
 * percentage with NO bar under it (the reported "64%" floating on its own). Same
 * gradient as the result page's card, and the number becomes a pill. */
#audioStudioView .studio-card-progress .st-progress-track {
  height: 10px;
  border-radius: 999px;
  background: #e6ecf5;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}
#audioStudioView .studio-card-progress .studio-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #0ea5e9 55%, #6366f1);
  transition: width .35s ease;
}
#audioStudioView .studio-progress-head b,
#audioStudioView .studio-progress-head .studio-progress-pct {
  flex: none;
  min-width: 44px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   INTERACTIVE INFOGRAPHIC — the iframe and its design panel.
   ---------------------------------------------------------------------------
   The generated file is a whole document (its own Tailwind + Chart.js), so it
   lives in a sandboxed iframe that fills the card. There is no design panel
   beside it — the dashboard keeps the look the generation gave it.
   `:is()` because the same panel is painted inside #audioStudioView (a job) and
   inside `.as-mixwrap` (a combination), which is mounted on <body>.
   =========================================================================== */
:is(#audioStudioView, .as-mixwrap) .as-info {
  display: block;
}
:is(#audioStudioView, .as-mixwrap) .as-info-framewrap {
  width: 100%; min-width: 0;
  border: 1px solid #eef2f6; border-radius: 12px; overflow: hidden;
  background: #fff;
}
:is(#audioStudioView, .as-mixwrap) .as-info-frame {
  display: block; width: 100%; height: 720px; border: 0; background: #fff;
}

/* ---- quiz submissions report (the 📥 button's modal) ---------------------- */
.as-subs-wrap { max-height: 70vh; overflow: auto; }
.as-subs { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-subs th, .as-subs td {
  padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: start;
  white-space: nowrap;
}
.as-subs th {
  position: sticky; top: 0; background: #f8fafc; color: #475569;
  font-weight: 600; font-size: 12px;
}
.as-subs tbody tr.as-subs-row { cursor: pointer; }
.as-subs tbody tr.as-subs-row:hover { background: #f5f3ff; }
.as-subs tr.as-subs-detail > td { background: #fafafe; white-space: normal; }
.as-subs-q { font-size: 12.5px; line-height: 1.9; margin-bottom: 8px; }