/* 17-a-mode.css — Phase 4b: A (Analyzer) action layer.
 *
 * Loaded via <link> in base.html (matches 15-u-overlay / 16-abc-pills).
 * Extracted from v2-a-mode.js to keep the JS file under the 500-line cap.
 */

/* A-mode transcript is a scrollable viewport. Scrolling it seeks the media
 * to the sentence sitting ~30% down the visible area. */
body.v2-mode-A #action-layer-A {
  max-height: 56vh;
  margin-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  border: 0;
  border-top: 1px solid var(--border, #dee2e6);
  border-radius: 0;
  padding: 4px 8px 4px;
  background: var(--card-bg, #fff);
  position: relative;  /* anchor for the floating Play in audio sources */
}

/* Audiobook / podcast (audio-only, no video surface to tap): a simple player
 * row sitting directly under the [A][B][C] pill bar. Outside the scrolling
 * transcript, so it stays visible during playback. Full-bleed to match
 * .v2-abc-pills above it. Transport = prev | play (centered) | next, reusing
 * the B-mode .ctrl-* buttons; the speed cycle sits at the right edge. */
.v2-audio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -12px;
  padding: 6px 12px 8px;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--border, #dee2e6);
}
.v2-audio-bar .v2ab-transport {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;     /* play centered, prev/next flanking it */
  gap: 24px;
}
/* Borrowed B-mode buttons keep their native .ctrl-* look — just neutralize the
 * float/sticky positioning they carried while floating over the transcript. */
body.v2-mode-A #play-btn.v2-audio-bar-btn,
body.v2-mode-A #prev-btn.v2-audio-bar-btn,
body.v2-mode-A #next-btn.v2-audio-bar-btn,
body.v2-mode-A #speed-btn.v2-audio-bar-btn {
  position: static;
  float: none;
}

/* Focused text view (– chip after [X]): collapse the transcript to the current
 * sentence + its immediate neighbours. Keyed on .aam-current (maintained by
 * v2-a-mode.js); :has() picks the previous sibling. Full view (≡, default) has
 * no body class, so the whole transcript shows. */
body.v2-aview-focused.v2-mode-A #action-layer-A .aam-segment { display: none; }
/* current + next — no :has() needed */
body.v2-aview-focused.v2-mode-A #action-layer-A .aam-segment.aam-current,
body.v2-aview-focused.v2-mode-A #action-layer-A .aam-segment.aam-current + .aam-segment {
  display: flex;
}
/* previous sibling — isolated so an unsupported :has() can't invalidate the
 * rule above (old browsers then show current+next, just not prev). */
body.v2-aview-focused.v2-mode-A #action-layer-A .aam-segment:has(+ .aam-current) {
  display: flex;
}

/* Per-segment block. Sentence text + a left-margin ▶ glyph for playback. */
.aam-segment {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 6px 10px; margin: 4px 0; border-radius: 6px;
  background: var(--v2-surface, #fff);
  transition: background 120ms ease;
}
.aam-segment:hover { background: var(--v2-surface-2, #f3f1ea); }
.aam-segment.is-playing {
  background: transparent;
  box-shadow: inset 0 0 0 2px #ff4700;
}
/* While the user is scrolling: the chunk currently at the anchor row gets
 * an orange rim — visually answers "what plays if I release now?". Listed
 * after .is-playing so it wins when both classes co-occur on the same node. */
.aam-segment.is-scroll-target {
  background: transparent;
  box-shadow: inset 0 0 0 2px #ff4700;
}

.aam-play-btn {
  flex: 0 0 28px; width: 28px; height: 28px;
  border: 1px solid var(--v2-ink, #14140f);
  background: #fff;
  color: var(--v2-ink, #14140f);
  font: 700 14px/1 ui-monospace, SF Mono, Menlo, monospace;
  cursor: pointer;
  border-radius: 6px; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.aam-play-btn:hover { background: var(--v2-surface-2, #ece9df); }
.aam-play-btn:active { transform: scale(0.94); }

/* Per-line U trigger — match the A/B mode pills: rounded square, subtle
 * border (NOT the harsh dark box), single letter. Was unstyled (raw button). */
.aam-u-btn {
  flex: 0 0 30px; box-sizing: border-box;
  width: 30px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius, 8px);
  background: var(--card-bg, #fff);
  color: var(--fg, #212529);
  font: 700 0.82rem/1 ui-monospace, SF Mono, Menlo, monospace;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.aam-u-btn:hover { background: var(--v2-surface-2, #f3f1ea); border-color: var(--primary, #2563eb); }
.aam-u-btn:active { transform: scale(0.94); }
/* U is parked while the overlay is being rebuilt. */
.aam-play-btn:disabled,
.aam-u-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
 * Inline U expansion — pushes lines down instead of opening a modal.
 * Skeleton for the 4-stage UnChew dive (BRD: a Listen, b Repeat, c Accel,
 * d Relax). Stages b/c/d are placeholders until backend STT wiring lands.
 */
.aam-segment.has-u-open {
  flex-wrap: wrap;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #dee2e6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 6px 10px 10px;
}
.aam-u-inline {
  flex: 0 0 100%;
  margin: 6px -6px -4px;
  padding: 10px 10px 12px;
  border-top: 1px solid var(--border, #dee2e6);
  background: var(--bg, #f8f9fa);
  border-radius: 0 0 8px 8px;
  font: 400 0.88rem/1.45 Inter, system-ui, sans-serif;
  color: var(--fg, #212529);
}
.aam-u-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.aam-u-title {
  font: 600 0.82rem/1 Inter, system-ui, sans-serif;
  color: var(--muted, #6b7280);
  letter-spacing: 0.02em;
}
.aam-u-close {
  width: 24px; height: 24px;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 50%;
  background: var(--card-bg, #fff);
  color: var(--muted, #6b7280);
  font: 700 14px/1 system-ui;
  cursor: pointer;
}
.aam-u-close:hover { color: var(--fg, #212529); border-color: var(--primary, #2563eb); }
.aam-u-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.aam-u-tab {
  flex: 1 1 auto;
  height: 30px; padding: 0 8px;
  border: 1px solid var(--border, #dee2e6);
  background: var(--card-bg, #fff);
  color: var(--muted, #6b7280);
  border-radius: 999px;
  font: 600 0.72rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.aam-u-tab:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }
.aam-u-tab.is-active {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}
.aam-u-body { min-height: 64px; }
.aam-u-pane { display: none; }
.aam-u-pane.is-active { display: block; }
.aam-u-cta { margin: 0 0 8px; color: var(--fg, #212529); font-weight: 500; }
.aam-u-hint { margin: 6px 0 0; color: var(--muted, #6b7280); font-size: 0.78rem; }
.aam-u-row {
  display: flex; align-items: center; gap: 10px;
}
.aam-u-play {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border, #dee2e6);
  background: var(--card-bg, #fff);
  color: var(--fg, #212529);
  border-radius: 999px;
  font: 600 0.85rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.aam-u-play:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }
.aam-u-counter {
  font: 700 0.85rem/1 ui-monospace, SF Mono, Menlo, monospace;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.aam-u-stack {
  display: flex; gap: 6px; margin: 8px 0;
}
.aam-u-bar {
  flex: 1; height: 12px;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 6px;
  background: transparent;
}
.aam-u-bar.is-on {
  background: var(--success, #16a34a);
  border-color: var(--success, #16a34a);
}
.aam-u-dial {
  display: flex; align-items: baseline; gap: 8px;
  margin: 8px 0;
}
.aam-u-dial-num {
  font: 700 1.6rem/1 ui-monospace, SF Mono, Menlo, monospace;
  color: var(--fg, #212529);
  font-variant-numeric: tabular-nums;
}
.aam-u-pillows {
  display: flex; gap: 6px; margin: 8px 0;
}
.aam-u-pillow {
  flex: 1; height: 40px;
  border: 1px solid var(--border, #dee2e6);
  background: var(--card-bg, #fff);
  color: var(--fg, #212529);
  border-radius: 12px;
  font: 700 0.9rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.aam-u-pillow:hover { border-color: var(--primary, #2563eb); }
.aam-u-pillow.is-selected {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

/* Per-chunk star on the right edge of each segment. */
.aam-star-btn {
  flex: 0 0 24px; width: 24px; height: 24px;
  margin-left: auto;
  border: 0; background: transparent;
  color: var(--v2-ink-3, #8a877e);
  font: 400 18px/1 system-ui;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, transform 80ms ease;
}
.aam-star-btn:hover { color: var(--v2-target, #b08d34); }
.aam-star-btn:active { transform: scale(0.92); }
.aam-star-btn.is-starred { color: var(--v2-target, #b08d34); }

.aam-sent {
  flex: 1; margin: 0; line-height: 1.65;
  font: 400 1.08rem/1.65 Inter, system-ui, sans-serif;
  color: var(--v2-ink, #14140f);
  word-wrap: break-word;
}
.aam-segment.is-loading .aam-sent { opacity: 0.85; }

/* Token states. .lookup-word is REUSED so existing 60-lookup.js styles apply;
 * we ADD A-specific modifiers under .action-layer-A scope. */
.action-layer-A .lookup-word {
  cursor: pointer; border-radius: 3px; padding: 0 1px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.10s ease, color 0.10s ease, opacity 0.10s ease;
}
.action-layer-A .lookup-word:hover { background: rgba(45, 78, 106, 0.10); }
.action-layer-A .lookup-word.is-pressing { background: rgba(45, 78, 106, 0.22); }

/* A1 state machine on a word:
 *   untouched → long-press → looked-up (blue underline)
 *   looked-up → tap → untouched (no rim)
 *   untouched → tap → known (orange underline)
 *   known → tap → untouched
 * The two underline classes are mutually exclusive (JS strips the other on flip). */
.action-layer-A .lookup-word.is-looked-up {
  text-decoration: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}
.action-layer-A .lookup-word.is-known {
  text-decoration: underline;
  text-decoration-color: #ff4700;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* Tiny stat header */
.action-layer-A-header {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 10px; margin-bottom: 4px;
  font: 500 0.85rem/1.4 Inter, system-ui, sans-serif;
  color: var(--v2-ink-3, #8a877e);
  border-bottom: 1px solid var(--v2-hairline, #e5e3dc);
}
.action-layer-A-header .aam-hint { font-style: italic; opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────────────
 * Phase 10 — view (d) "Лише нові" toggle chip.
 *
 * Lives in the .action-layer-A-header. Pushed to the right. When toggled
 * ON, the layer gets class `view-d-only-new` and the rules at the
 * bottom of this file flip the visible/hidden semantics:
 *   - KNOWN tokens collapse to placeholders.
 *   - UNKNOWN (non-known) tokens remain visible as full text.
 * Inverse of the layer's default A-protocol behavior, where unknowns
 * dominate and knowns get the hairline silhouette.
 */
.aam-view-d-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 999px;
  background: var(--v2-surface, #fff);
  color: var(--v2-ink-3, #8a877e);
  font: 500 0.82rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.aam-view-d-toggle:hover { background: var(--v2-surface-2, #f3f1ea); }
.aam-view-d-toggle.is-on,
.aam-view-d-toggle[aria-pressed="true"] {
  background: var(--v2-correct-tint, #e8efe0);
  border-color: var(--v2-known, #2d4e6a);
  color: var(--v2-ink, #14140f);
}
.aam-view-d-toggle .aam-view-d-glyph { font-size: 1rem; line-height: 1; }
.aam-view-d-toggle .aam-view-d-label { white-space: nowrap; }

/* View-d active: KNOWN tokens turn into placeholders (hide actual text),
 * UNKNOWN tokens regain full text + a subtle "new" rim.
 *
 * We piggyback on .is-known so the data layer (lemma identity) is
 * unchanged — only the visual stays inverted while the toggle is on. */
/* A2: known words render as solid square placeholders sized to their text. */
.action-layer-A.view-d-only-new .lookup-word.is-known {
  color: transparent;
  background: var(--v2-surface-2, #f3f1ea);
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 3px;
  padding: 0 1px;
}
.action-layer-A.view-d-only-new .lookup-word.is-known:hover {
  background: var(--v2-surface-3, #ece9df);
  border-color: var(--v2-hairline-strong, #c9c5b9);
}
.action-layer-A.view-d-only-new .lookup-word:not(.is-known) {
  background: var(--v2-new-tint, rgba(45, 78, 106, 0.06));
  border-radius: 3px;
  padding: 0 2px;
}