/* ═══════════════════════════════════════════════════════════════
   SWARM PROGRESS — Persistent sticky header during multi-agent
   research runs. Lives above #explorerMessages and updates in
   place every second so the user never stares at a blank pane
   while a 15-minute synthesis is in flight.
   maintainer 2026-05-07 — added after the smoke where the user got
   zero progress signal during a successful 15-minute run.
   ═══════════════════════════════════════════════════════════════ */

#swarmProgressHeader {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream-bg, var(--cream, #f6efe2));
  border-bottom: 1px solid var(--brown-light, #d4c5a8);
  padding: 8px 14px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  color: var(--brown-dark, #3e2723);
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: 0 1px 4px rgba(62, 39, 35, 0.06);
}

#swarmProgressHeader .swarm-progress-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
}

#swarmProgressHeader .swarm-progress-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

#swarmProgressHeader .swarm-progress-label {
  color: var(--brown-mid, #6d4c41);
  opacity: 0.78;
  font-size: 0.78rem;
}

#swarmProgressHeader .swarm-progress-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brown-dark, #3e2723);
}

#swarmProgressHeader .swarm-progress-sep {
  color: var(--brown-light, #d4c5a8);
  user-select: none;
}

#swarmProgressHeader .swarm-progress-elapsed {
  font-variant-numeric: tabular-nums;
}

/* Section-timeout warning banner (Fix 3). Distinct visual from
   the "Archive is empty" warning — amber left-border, rendered
   ABOVE the per-section accordions when any section's text starts
   with "(Section synthesis failed:". */
.swarm-section-timeout-banner {
  border-left: 3px solid #b89020;
  padding: 8px 12px;
  margin: 10px 0;
  background: rgba(184, 144, 32, 0.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  color: var(--brown-dark, #3e2723);
}

.swarm-section-timeout-banner strong {
  color: #8a6a14;
}

.swarm-section-timeout-banner ul {
  margin: 4px 0 0 18px;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SUBMIT-ARROW → SPINNER → STOP → RETRY MORPH
   Single morphing slot (R5 chat-skin alignment, 2026-05-08). The
   #explorerSend button carries data-state="idle|running|stopping|retry"
   and stacks four 16×16 SVG glyphs in the same pixel box. The active
   glyph fades in; the others fade out. No layout shift.
   Legacy .spinning class kept as an alias for data-state="running"
   so older code paths keep working until full migration.
   ═══════════════════════════════════════════════════════════════ */

#explorerSend {
  position: relative;
}

#explorerSend .disc-send-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  vertical-align: middle;
}

/* idle — arrow */
#explorerSend[data-state="idle"] .disc-send-arrow,
#explorerSend:not([data-state]) .disc-send-arrow { opacity: 1; }

/* running — spinner */
#explorerSend[data-state="running"] .disc-send-spin,
#explorerSend.spinning .disc-send-spin {
  opacity: 1;
  animation: disc-send-spin 0.7s linear infinite;
}

/* stopping — solid stop square (red tint by background change) */
#explorerSend[data-state="stopping"] .disc-send-stop { opacity: 1; }
#explorerSend[data-state="stopping"] {
  background: rgba(183, 28, 28, 0.85);
}

/* retry — arrow + small indicator dot (post-error state) */
#explorerSend[data-state="retry"] .disc-send-retry { opacity: 1; }
#explorerSend[data-state="retry"] {
  background: rgba(184, 144, 32, 0.7);
}

@keyframes disc-send-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   NARRATOR STRIP — Live narration above #explorerMessages.
   Replaces the dry numeric progress header during multi-agent
   research runs. Mounted by swarm/swarm-narrator.js::attach().
   Strip + pill row; aria-live="polite" for screen-reader
   announcements on the active line.
   maintainer 2026-05-07 — see plan: serialized-herding-knuth.md §B.
   ═══════════════════════════════════════════════════════════════ */

#swarmNarratorStrip {
  /* maintainer 2026-05-10: narrator strip now lives INSIDE the swarm-
   * dashboard body. Position relative (not sticky), background
   * white to match the chat area, serif font to match Mira's
   * scholarly register. Active line gets serif italic; the green
   * pills row remains structural. */
  position: relative;
  z-index: 2;
  background: var(--white, #fff);
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border, #d7ccc8);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  color: var(--brown-dark, #3e2723);
}
#swarmNarratorStrip .narr-active-line {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--brown-dark, #3e2723);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   Wave 2 — progressive reveal blocks (planner + synthesis)
   maintainer 2026-05-10. Each phase appends a <details> block to
   #explorerMessages with a typewriter-revealed body. Reasoning
   tokens render italic; response tokens regular. After the phase
   ends the summary updates and the block collapses by default.
   ═══════════════════════════════════════════════════════════════ */
/* maintainer 2026-05-10: reveal host lives directly after the narrator
 * strip and holds the per-phase <details> blocks. Sticky-top so the
 * blocks stay visible while the user scrolls the chat. */
.swarm-reveal-host {
  position: sticky;
  top: 90px;
  z-index: 1;
  padding: 4px 14px 6px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
}

/* Fix 11 (maintainer 2026-05-15): when a run ends, the reveal blocks are
 * relocated out of the soon-to-be-hidden dashboard and into the
 * conversation thread inside this wrapper so they persist and scroll
 * with the chat. NOT sticky (it lives inline in scrollback, unlike
 * the live #swarmRevealHost). The inner .swarm-reveal-block elements
 * keep their own (unscoped) styling. */
.swarm-reveal-archived {
  margin: 8px 0 4px;
  padding: 2px 14px 6px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  border-left: 2px solid var(--brown-light, #a07c5b);
}
.swarm-reveal-archived .swarm-reveal-block {
  margin-left: 0;
}

/* maintainer 2026-05-10: Strategy + Prompt collapsibles unified to a
 * single tight visual treatment. Closed: a low-emphasis row that
 * reads as a button (chevron, label, hover state). Open: same row
 * highlighted + body slides down. Both font-matched to Mira serif
 * for the chrome and serif/mono for the body content. */

/* maintainer 2026-05-14 (S45-1): consolidated reasoning trace container.
 * ONE <details class="swarm-reasoning-trace"> per run holds the
 * planner + every synth pass as inner <section class="swarm-reveal-block">
 * elements. Replaces the previous 3-4 separate top-level <details>
 * blocks. Stays in the conversation after the essay lands (S45-2). */
.swarm-reasoning-trace {
  margin: 6px 0 12px 0;
  padding: 0;
  border-left: 2px solid var(--border, #d4c8a8);
  font-family: var(--font-serif, Georgia, serif);
}
.swarm-reasoning-trace-summary {
  cursor: pointer;
  padding: 6px 10px;
  color: var(--text-muted, #6a6259);
  font-size: 0.85rem;
  font-style: italic;
  list-style: none;
}
.swarm-reasoning-trace-summary::-webkit-details-marker { display: none; }
.swarm-reasoning-trace-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.swarm-reasoning-trace[open] > .swarm-reasoning-trace-summary::before {
  transform: rotate(90deg);
}
.swarm-reveal-pass-header {
  margin: 8px 10px 4px 10px;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #6a6259);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* maintainer 2026-05-14 (S45-4): conversation message timestamps. Muted
 * suffix that doesn't compete with the message text. Hover reveals
 * absolute time via the `title` attribute. */
.msg-timestamp {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-faint, #c7bfb5);
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 0.95;
  cursor: default;
}
.msg-timestamp:hover { opacity: 1; color: var(--text-near, #e8dfd4); }

.swarm-reveal-block {
  margin: 4px 0;
  padding: 0;
  border: 1px solid var(--border, #d7ccc8);
  border-radius: 6px;
  background: var(--white, #fff);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  color: var(--brown-dark, #3e2723);
  font-size: 0.85rem;
  line-height: 1.5;
  transition: border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
}
.swarm-reveal-block[open] {
  border-color: var(--brown-light, #6b4d40);
}
/* maintainer 2026-05-11: the Thinking · Strategy block is the FIRST
 * visible deliverable of the run — it deserves more emphasis at
 * the start. While it's closed AND active (the chevron is nudging
 * because the block is mid-stream), give it a stronger 3px
 * left-rule in accent-brown, a slightly warmer background tint,
 * and a faint gold glow on the summary so the eye lands there
 * first. The treatment naturally relaxes once the block is
 * opened. */
/* Active (closed + streaming) block — strong accent treatment. */
.swarm-reveal-block:not([open]):not([data-finished]) {
  border-left-width: 3px;
  border-left-color: var(--accent, #7a3a10);
  background: linear-gradient(180deg, var(--cream, #faf6f0) 0%, #f5ead2 100%);
  box-shadow: 0 0 0 1px rgba(122, 58, 16, 0.08),
              0 1px 0 rgba(74, 55, 40, 0.04);
}
.swarm-reveal-block:not([open]):not([data-finished]) .swarm-reveal-summary {
  color: var(--brown-dark, #3e2723);
  font-weight: 700;
}
/* Finished block — drop back to plain cream, thin brown-light border,
 * calm typography. Still clickable, but no longer demanding the eye. */
.swarm-reveal-block[data-finished]:not([open]) {
  border-left-width: 2px;
  border-left-color: var(--border, #d7ccc8);
  background: var(--cream, #faf6f0);
  box-shadow: none;
}
.swarm-reveal-block:not([open]) {
  max-height: none;
  overflow: visible;
}

/* maintainer 2026-05-10: technical Prompt collapsible — sits in the
 * same reveal host as the Strategy block but visually distinct
 * (monospace body, cooler tone) so researchers can compare what
 * the model was asked vs. how it reasoned. */
.swarm-prompt-block {
  /* maintainer 2026-05-10: Prompt block uses same visual treatment as
   * Strategy — same border, same font, same summary styling. The
   * pre/code body inside differentiates it as technical-view. */
}
/* maintainer 2026-05-11 (Mira aesthetic re-skin):
 *   The Prompt block previously rendered each section as a <pre>
 *   in ui-monospace at 0.74rem — too tight, too tech-bro, very
 *   cumbersome to navigate per maintainer's report. Re-skin:
 *     • Body uses Mira serif at 0.88rem with 1.65 line-height
 *       so academic prose reads cleanly.
 *     • Section labels become small-caps serif with a fine gold
 *       hairline-rule underline so each section is clearly
 *       demarcated.
 *     • Text blocks lose the heavy box-border; instead a thin
 *       brown-light left rule (4px) marks each one as a quotation
 *       block in the academic register.
 *     • Cream background instead of stark white — matches the
 *       rest of the Atelier.
 *     • Max-height per block raised to 38vh so long system prompts
 *       don't get trapped behind a tiny scroll window.
 *     • Comfortable padding all round; first/last margins
 *       collapsed so consecutive sections don't double-gap.
 *
 * The block remains usable for "raw prompt inspection" — we
 * preserve `white-space: pre-wrap` so newlines + indentation
 * inside the prompt still render as intended; we just stop
 * dressing the whole thing as terminal output. */
.swarm-prompt-body {
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, var(--cream, #faf6f0) 0%, #fbf6ec 100%);
}
.swarm-prompt-section-label {
  margin: 12px 0 4px;
  padding-bottom: 4px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-light, #6b4d40);
  border-bottom: 1px solid rgba(170, 140, 90, 0.30);
}
.swarm-prompt-section-label:first-child {
  margin-top: 0;
}
.swarm-prompt-text {
  margin: 0 0 4px;
  padding: 8px 4px 8px 14px;
  background: transparent;
  border: none;
  border-left: 3px solid rgba(170, 140, 90, 0.35);
  border-radius: 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--brown-dark, #3e2723);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 38vh;
  overflow: auto;
}
.swarm-prompt-text::-webkit-scrollbar { width: 8px; }
.swarm-prompt-text::-webkit-scrollbar-track { background: transparent; }
.swarm-prompt-text::-webkit-scrollbar-thumb {
  background: rgba(74, 55, 40, 0.18);
  border-radius: 4px;
}
.swarm-prompt-text::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 55, 40, 0.30);
}
.swarm-reveal-block[open] {
  border-left-color: var(--accent, #7a3a10);
  animation: swarm-reveal-pulse 2.4s ease-in-out infinite;
}
@keyframes swarm-reveal-pulse {
  0%, 100% { border-left-color: var(--accent, #7a3a10); }
  50% { border-left-color: var(--brown-light, #d4c5a8); }
}
.swarm-reveal-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--brown-dark, #3e2723);
  background: var(--cream, #faf6f0);
  list-style: none;
  margin: 0;
  user-select: none;
  transition: background 0.18s ease;
}
.swarm-reveal-summary:hover {
  background: var(--cream-dark, #f0ebe3);
}
.swarm-reveal-summary::-webkit-details-marker { display: none; }
/* maintainer 2026-05-11: aggressive chevron affordance for closed
 * reveal blocks (Strategy, Synthesis, etc. — they spend most of
 * their lifetime showing "Thinking…" and the previous tiny grey
 * caret was almost invisible). Bigger glyph, bold weight, dark
 * brown, and a continuous nudge animation when closed so the
 * eye is drawn to it. Stops the moment the block opens. */
.swarm-reveal-summary::before {
  content: "▸";
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 1;
  text-align: center;
  transition: transform 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
  color: var(--brown-dark, #3e2723);
  font-size: 1.1rem;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(74, 55, 40, 0.18);
}
/* maintainer 2026-05-11 (hardcore revision): active reveal blocks
 * need MUCH more aggressive chevron motion so the user immediately
 * notices the click affordance — BUT ONLY while the block is
 * actively streaming. Once `data-finished="1"` is set on the block
 * (typewriter finalize handler), the chevron stops moving — the
 * work is done, calmly displaying the click-imperative label
 * ("View strategy") is enough. */
.swarm-reveal-block:not([open]):not([data-finished]) .swarm-reveal-summary::before {
  animation: mira-reveal-chevron-nudge 0.65s ease-in-out infinite;
}
.swarm-reveal-block[data-finished] .swarm-reveal-summary::before {
  animation: none;
  color: var(--brown-light, #6b4d40);
  opacity: 0.7;
}
.swarm-reveal-block[data-finished] .swarm-reveal-summary {
  /* Once finished, the block reads as a calm linked entry rather
   * than an urgent in-progress one. */
  font-weight: 500;
}
.swarm-reveal-block[data-finished]:hover .swarm-reveal-summary::before {
  opacity: 1;
  color: var(--accent, #7a3a10);
  transform: translateX(2px);
}
.swarm-reveal-summary:hover::before {
  color: var(--accent, #7a3a10);
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.45);
}
@keyframes mira-reveal-chevron-nudge {
  0% {
    transform: translateX(0) scale(1);
    opacity: 0.55;
    color: var(--brown-dark, #3e2723);
    text-shadow: 0 1px 0 rgba(74, 55, 40, 0.18);
  }
  40% {
    transform: translateX(6px) scale(1.18);
    opacity: 1;
    color: var(--accent, #7a3a10);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6),
                 0 1px 0 rgba(74, 55, 40, 0.18);
  }
  70% {
    transform: translateX(3px) scale(1.06);
    opacity: 0.9;
    color: var(--brown-dark, #3e2723);
    text-shadow: 0 0 3px rgba(212, 175, 55, 0.3);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 0.55;
    color: var(--brown-dark, #3e2723);
    text-shadow: 0 1px 0 rgba(74, 55, 40, 0.18);
  }
}
html[data-atelier-entrance="off"] .swarm-reveal-block:not([open]) .swarm-reveal-summary::before,
html[data-atelier-reduced-motion="on"] .swarm-reveal-block:not([open]) .swarm-reveal-summary::before {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .swarm-reveal-block:not([open]) .swarm-reveal-summary::before { animation: none !important; }
}
.swarm-reveal-block[open] .swarm-reveal-summary {
  background: var(--cream-dark, #f0ebe3);
  border-bottom: 1px solid var(--border, #d7ccc8);
}
.swarm-reveal-block[open] .swarm-reveal-summary::before {
  transform: rotate(90deg);
}
.swarm-reveal-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 10px 14px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.86rem;
  line-height: 1.55;
  max-height: 40vh;
  overflow: auto;
}
.swarm-reveal-text {
  color: var(--brown-dark, #3e2723);
}
.swarm-reveal-text.swarm-reveal-reasoning {
  font-style: italic;
  color: var(--brown, #513728);
  opacity: 0.85;
}
.swarm-reveal-caret {
  display: inline-block;
  width: 0.5em;
  color: var(--accent, #7a3a10);
  animation: swarm-reveal-blink 1s steps(2, end) infinite;
}
@keyframes swarm-reveal-blink {
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .swarm-reveal-block[open] { animation: none; }
  .swarm-reveal-caret { animation: none; opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════
   Wave 3 — per-agent reasoning popover (maintainer 2026-05-10).
   Anchored to .narr-pill clicks; pattern from Radix UI Popover.
   ═══════════════════════════════════════════════════════════════ */
#swarmNarratorStrip .narr-pill {
  cursor: pointer;
  transition: outline 0.15s ease, transform 0.1s ease;
}
#swarmNarratorStrip .narr-pill:hover {
  outline: 1px solid var(--brown-light, #6b4d40);
  outline-offset: 2px;
}
#swarmNarratorStrip .narr-pill:active {
  transform: scale(0.95);
}
#swarmNarratorStrip .narr-pill:focus-visible {
  outline: 2px solid var(--accent, #7a3a10);
  outline-offset: 2px;
}

.swarm-agent-popover {
  position: fixed;
  z-index: 1000;
  width: 420px;
  max-width: calc(100vw - 16px);
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--cream, #faf6f0);
  border: 1.5px solid var(--brown-dark, #35201a);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(40, 25, 15, 0.28);
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--brown-dark, #3e2723);
  font-size: 0.85rem;
}
.sap-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #d7ccc8);
  background: var(--cream-dark, #f0ebe3);
  border-radius: 10px 10px 0 0;
}
.sap-role {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--brown-light, #6b4d40);
}
.sap-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.sap-tab {
  padding: 4px 12px;
  border: 1px solid var(--border, #d7ccc8);
  background: var(--white, #fff);
  color: var(--brown, #513728);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sap-tab:hover {
  background: var(--cream-dark, #f0ebe3);
  border-color: var(--brown-light, #6b4d40);
}
.sap-tab-active {
  background: var(--brown-dark, #35201a);
  color: var(--cream, #faf6f0);
  border-color: var(--brown-dark, #35201a);
}
.sap-tab-active:hover {
  background: var(--brown, #513728);
  border-color: var(--brown, #513728);
}
.sap-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--serif, Georgia, serif);
  line-height: 1.55;
  color: var(--brown-dark, #3e2723);
  background: var(--white, #fff);
  border-radius: 0 0 10px 10px;
}
.sap-body::-webkit-scrollbar { width: 8px; }
.sap-body::-webkit-scrollbar-track { background: transparent; }
.sap-body::-webkit-scrollbar-thumb {
  background: var(--brown-light, #6b4d40);
  border-radius: 4px;
  opacity: 0.4;
}
.sap-empty {
  font-style: italic;
  color: var(--brown-light, #6b4d40);
  padding: 16px 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Wave 4 — stage telemetry strip (maintainer 2026-05-10).
   Single-line state below the narrator pills + plain-language
   stall reason. Detailed timeline goes to SessionLogger only.
   ═══════════════════════════════════════════════════════════════ */
#swarmStageTelemetry {
  position: sticky;
  top: 60px;
  z-index: 1;
  padding: 6px 14px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.78rem;
  color: var(--brown-dark, #3e2723);
  border-bottom: 1px dashed var(--brown-light, #d4c5a8);
  background: transparent;
}
.swarm-stage-telemetry .sst-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.swarm-stage-telemetry .sst-phase {
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-weight: 600;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--brown-dark, #3e2723);
}
.swarm-stage-telemetry .sst-elapsed {
  color: var(--brown-light, #6b4d40);
  font-variant-numeric: tabular-nums;
}
.swarm-stage-telemetry .sst-stall {
  margin-top: 4px;
  padding: 6px 10px;
  font-style: italic;
  color: var(--accent, #7a3a10);
  background: rgba(184, 144, 32, 0.08);
  border-left: 3px solid var(--accent, #7a3a10);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
}
.swarm-stage-telemetry .sst-fallback {
  margin-top: 4px;
  padding: 6px 10px;
  color: var(--brown-dark, #3e2723);
  background: rgba(160, 48, 48, 0.06);
  border-left: 3px solid #a03030;
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
}
  border-bottom: 1px solid var(--brown-light, #d4c5a8);
  padding: 10px 14px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  color: var(--brown-dark, #3e2723);
  font-size: 0.88rem;
  line-height: 1.45;
}

#swarmNarratorStrip .narr-active-line {
  font-style: italic;
  color: var(--brown-dark, #3e2723);
  margin-bottom: 6px;
  min-height: 1.2em;
}

#swarmNarratorStrip .narr-pills {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 6px 0;
  padding: 0;
}

#swarmNarratorStrip .narr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--brown-light, #d4c5a8);
  background: rgba(0,0,0,0.02);
  color: var(--brown-mid, #6d4c41);
  position: relative;
  transition: all 0.2s ease;
}

#swarmNarratorStrip .narr-pill.narr-pending { opacity: 0.45; }
#swarmNarratorStrip .narr-pill.narr-running {
  border-color: var(--accent, #b89020);
  color: var(--accent, #b89020);
  animation: narr-pulse 1.4s ease-in-out infinite;
}
#swarmNarratorStrip .narr-pill.narr-done {
  background: rgba(70, 130, 70, 0.12);
  border-color: #4a8a4a;
  color: #2d7a2d;
}
#swarmNarratorStrip .narr-pill.narr-failed {
  background: rgba(160, 48, 48, 0.10);
  border-color: #a03030;
  color: #7a1515;
}

@keyframes narr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 144, 32, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(184, 144, 32, 0); }
}

#swarmNarratorStrip[hidden] {
  display: none;
}

/* Atelier post-completion action buttons (MiraXR compile, show more
   passages). Mirrors the .mira-quote-icon style: hairline outline,
   gold accent on hover, compact 14×14 SVG inside. */
.swarm-action-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.swarm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.84rem;
  color: var(--brown-dark, #3e2723);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--brown-light, #d4c5a8);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.swarm-action-btn:hover {
  background: var(--cream-bg, #f6efe2);
  border-color: var(--accent, #b89020);
  color: var(--accent, #b89020);
}

.swarm-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.swarm-action-btn svg {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOOL-CALL PILLS — narrator strip support row (R5 chat-skin
   alignment, 2026-05-08). One pill per active tool call: pending →
   running → success/error. Auto-collapse 8 s after success. Click
   to expand a small details panel below.
   Compact 28 px pill height; horizontal scroll if many fire at once.
   ═══════════════════════════════════════════════════════════════ */

#swarmNarratorStrip .narr-tool-pills {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  max-width: 100%;
  /* Horizontal-scroll fallback if a wave of tool calls fires at once. */
  overflow-x: auto;
  scrollbar-width: thin;
}

#swarmNarratorStrip .narr-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  min-height: 24px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--brown-light, #d4c5a8);
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 0.74rem;
  color: var(--brown-mid, #6d4c41);
  cursor: pointer;
  user-select: none;
  flex-direction: row;
  flex-wrap: wrap;
  transition: background 0.15s ease, border-color 0.15s ease,
              opacity 0.35s ease, transform 0.35s ease;
}

#swarmNarratorStrip .narr-tool-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}

#swarmNarratorStrip .narr-tool-pill .narr-tool-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}

#swarmNarratorStrip .narr-tool-pill .narr-tool-label {
  font-weight: 600;
}

#swarmNarratorStrip .narr-tool-pill .narr-tool-chip {
  color: var(--brown-mid, #6d4c41);
  opacity: 0.78;
  font-style: italic;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#swarmNarratorStrip .narr-tool-pill .narr-tool-count {
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(74, 138, 74, 0.15);
  color: #2d7a2d;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}

#swarmNarratorStrip .narr-tool-running {
  border-color: var(--accent, #b89020);
  color: var(--accent, #b89020);
  animation: narr-pulse 1.4s ease-in-out infinite;
}

#swarmNarratorStrip .narr-tool-running .narr-tool-icon {
  display: inline-block;
  animation: narr-tool-icon-spin 0.9s linear infinite;
  transform-origin: center;
}

@keyframes narr-tool-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#swarmNarratorStrip .narr-tool-success {
  background: rgba(70, 130, 70, 0.10);
  border-color: #4a8a4a;
  color: #2d7a2d;
}

#swarmNarratorStrip .narr-tool-error {
  background: rgba(160, 48, 48, 0.10);
  border-color: #a03030;
  color: #7a1515;
}

#swarmNarratorStrip .narr-tool-collapsing {
  opacity: 0;
  transform: scale(0.85);
}

#swarmNarratorStrip .narr-tool-details {
  flex: 0 0 100%;
  display: none;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-family: Menlo, Consolas, monospace;
  font-size: 0.68rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--brown-dark, #3e2723);
}

#swarmNarratorStrip .narr-tool-open .narr-tool-details {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PER-MESSAGE ACTION ROW — Copy / Regenerate / Export / Share
   (R5 chat-skin alignment, 2026-05-08). Reuses .swarm-action-btn
   styling; this rule adds the export popover and disabled-share
   visual treatment.
   ═══════════════════════════════════════════════════════════════ */

.mira-permsg-actions {
  position: relative; /* anchor the export popover */
}

.mira-permsg-actions .mira-permsg-export-popover {
  position: absolute;
  top: 100%;
  /* Anchor under the export button — left offset is rough but stable
   * because the row uses the .swarm-action-row flex layout. */
  left: 0;
  margin-top: 4px;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--cream-bg, #f6efe2);
  border: 1px solid var(--brown-light, #d4c5a8);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.12);
  z-index: 10;
}

.mira-permsg-actions .mira-permsg-export-popover[hidden] {
  display: none;
}

.mira-permsg-actions .mira-permsg-share[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Strategy block list — maintainer 2026-05-11.
 *   The planner's structured JSON gets rendered here as a clean
 *   Mira-academic ordered list (one item per search angle). The
 *   "Strategy" block sits AS A SIBLING of the "Thinking" block,
 *   not as a re-labelled version of it, so the two have
 *   substantively different content: prose deliberation vs
 *   structured plan. */
.swarm-reveal-strategy-body {
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, var(--cream, #faf6f0) 0%, #fbf6ec 100%);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
}
.swarm-strategy-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  color: var(--brown-dark, #3e2723);
}
.swarm-strategy-item {
  margin: 8px 0 14px;
  padding-left: 4px;
  line-height: 1.55;
  break-inside: avoid;
}
.swarm-strategy-item::marker {
  color: var(--brown-light, #6b4d40);
  font-weight: 700;
}
.swarm-strategy-label {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--brown-dark, #3e2723);
  margin-bottom: 3px;
}
.swarm-strategy-query,
.swarm-strategy-keywords,
.swarm-strategy-strategy {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--brown-dark, #3e2723);
  margin: 1px 0;
}
.swarm-strategy-meta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-light, #6b4d40);
  font-style: normal;
}