/* =========================================================
   GEXI — public/chat/v2/scriptPart.css   (FP-3 presentation, lane H)
   The SCRIPT PAGE and the PICTURE CARD in the thread. Theme-aware (core tokens only); mobile-first (reads at 360 px);
   nothing truncated (words wrap between words, no ellipsis). Screenplay conventions, scaled for a phone: the heading and
   the cue in caps, the cue centred, dialogue indented, the parenthetical in italics, a transition right-aligned.
   ========================================================= */
.cv-script {
  margin: 4px 0; padding: 16px 18px; border-radius: 16px;
  background: var(--card-alt); border: 1px solid var(--line); color: var(--ink);
  font: 15px/1.5 "Courier Prime", "Courier New", ui-monospace, monospace;
  overflow-wrap: break-word; word-break: normal;
}
.cv-script-title { margin: 0 0 10px; font: 600 1rem/1.3 var(--font-sans, inherit); color: var(--ink); }
.cv-script-b { margin: 0 0 8px; white-space: pre-wrap; }
.cv-script-heading { font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.cv-script-cue { text-align: center; text-transform: uppercase; font-weight: 700; margin: 10px 0 0; }
.cv-script-paren { text-align: center; font-style: italic; margin: 0 14% 0; color: var(--ink-2); }
.cv-script-dialogue { margin: 0 12% 8px; }
.cv-script-transition { text-align: right; text-transform: uppercase; font-weight: 700; }
.cv-script-actions { margin: 12px 0 0; font-family: var(--font-sans, inherit); }
.cv-script-dl { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.cv-script-dl:focus-visible { outline: 2px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.cv-script-empty { color: var(--muted); font-family: var(--font-sans, inherit); }
@media (min-width: 640px) {
  .cv-script-dialogue { margin-left: 20%; margin-right: 20%; }
  .cv-script-paren { margin-left: 26%; margin-right: 26%; }
}

/* ---- the picture card: one still, its caption, tap = the media lens ---- */
.cv-pic { margin: 4px 0; max-width: 420px; }
.cv-pic-open { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--card-alt); cursor: zoom-in; }
.cv-pic-open:focus-visible { outline: 2px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.cv-pic-img { display: block; width: 100%; height: auto; }
.cv-pic-cap { margin: 8px 2px 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: break-word; }
.cv-pic-missing { padding: 28px 16px; border-radius: 16px; border: 1px dashed var(--line-strong, var(--line)); color: var(--muted); text-align: center; font-size: 14px; }
.cv-script-scene + .cv-script-scene { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }