/* ================================================================
 *  quote-cards.css — Atelier pull-quote visual contract (REDESIGN)
 *
 *  maintainer 2026-05-03 feedback drove this redesign:
 *    - No brown left border. The card must look like part of the
 *      essay, not a sticker dropped onto the page.
 *    - No "UNVERIFIED" badge, no "syn-q-4" id tag, no relevance
 *      score. Those were noise.
 *    - Double-justified body, prose-matching typography (Times /
 *      Georgia, same size as surrounding synthesis), with subtle
 *      indentation so the eye treats the quote as a pull-quote.
 *    - Affordances are SVG icons in a discreet row at the footer,
 *      each with a hover tooltip. Open in reader, send to desk,
 *      copy citation, expand-to-full.
 *    - Full Chicago citation (with page number) reads as a normal
 *      footnote line below the quote.
 *
 *  Loaded from index.html after journal.css.
 * ================================================================ */

/* ── Card frame ─────────────────────────────────────────────── */
.mira-quote-card{
  display:block;
  /* maintainer 2026-05-03 directive: spacing between glue prose and
   * cards should be uniform. The card carries its own breathing room
   * via vertical margins; horizontal padding gives the slight pull-
   * quote indent without disrupting reading flow. The numeric was
   * tuned to match the rhythm of `.msg-llm` paragraphs in
   * css/explorer.css line 214 (which use `--ex-msg-pad`). */
  margin:1em 0 1em 0;
  padding:0 1.6em;
  border:none;
  background:transparent;
  /* Card body must look identical to surrounding LLM glue prose
   * (Mira's design contract: cards are evidence, prose is glue —
   * the cut IS prose, just verbatim and citable). The card lives
   * inside `.msg-llm`, whose font-size is cascade-derived (not
   * explicitly set). Inheriting font-family/size/line-height makes
   * the card body track the surrounding prose 1:1 — if Mira's chat
   * column resizes, both glue and card resize together. The pull-
   * quote treatment comes from the smart-quote glyphs and the
   * side-margin indent, never from font/size differences. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--text, var(--brown-dark, #2c2820));
  position:relative;
}

/* Empty / paraphrase fallbacks keep their warning styling so the
 * user knows when something is NOT a citable quote. */
.mira-quote-card.mira-quote-empty{
  font-style:italic;
  color:#9a8f74;
  text-align:center;
  padding:0.4em 0;
}
.mira-quote-card.mira-quote-noncanonical{
  border-left:3px solid #c0392b;
  padding-left:1em;
  background:#fbeae6;
  color:#5d2a23;
}
.mira-quote-warning{
  background:#c0392b;
  color:#fff;
  font-weight:700;
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:3px 6px;
  margin-bottom:0.4em;
  display:inline-block;
}

/* ── Body — pull-quote prose ────────────────────────────────── */
.mira-quote-text{
  margin:0;
  padding:0;
  /* Inherit family/size/line-height/color from the card frame so
   * the body matches surrounding glue prose 1:1 (maintainer 2026-05-03
   * directive: "no different from the remaining text produced by
   * the LLM which is gluing the [passages] together"). */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-style: normal;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: inherit;
  text-indent: 0;
}
.mira-quote-text::before{
  content: "“";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.18em;
  color: var(--accent, #8b6e3a);
  margin-right: 0.08em;
}
.mira-quote-text::after{
  content: "”";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.18em;
  color: var(--accent, #8b6e3a);
  margin-left: 0.04em;
}

/* ── Footer — citation + icon row ───────────────────────────── */
.mira-quote-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 1em;
  margin-top: 0.6em;
  padding-left: 1.2em;     /* slight indent so it reads as footnote-ish */
  font-size: 0.86em;
  line-height: 1.4;
  /* #1 (WCAG 1.4.6 / APCA Lc≈75): footer text reads at sustained-
   * reading distance, so push contrast above 7:1 against cream.
   * Old #6b5d49 on #faf6ec was ~6.3:1 — passed 1.4.3 but missed
   * the AAA target for body. New #5a4f3c clears 7.4:1. */
  color: var(--brown-mid, #5a4f3c);
}
.mira-quote-source{
  font-style: italic;
  flex: 1 1 auto;
  cursor: pointer;
  font-family: "Times New Roman", Georgia, serif;
  /* #10 (two clickability signifiers, one persistent): italic +
   * cursor:pointer alone don't read as interactive — italic is
   * also the prose convention for titles. A persistent low-opacity
   * underline marks the citation as a click target without
   * shouting; the hover state intensifies it. */
  text-decoration: underline;
  text-decoration-color: rgba(139, 110, 58, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}
.mira-quote-source:hover{
  color: var(--accent, #8b6e3a);
  text-decoration-color: currentColor;
}

/* Icon row — sized up 2026-05-03 per maintainer's "SVG pop ups are too
 * small" feedback. Touch-target target ≥28px (WCAG 2.5.5 sets 44px
 * as AAA but for a high-density desktop tool 28-30px reads cleanly
 * without dominating the footer). */
.mira-quote-icons{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}
.mira-quote-icon{
  position: relative;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  /* #1: same 7:1+ target as the citation footer. */
  color: var(--brown-mid, #5a4f3c);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* #13 (motion budget 150-250ms; below 150ms reads as state-jump,
   * above 350ms exceeds an eye fixation). 150ms is the lower bound
   * and right for micro-feedback like an icon hover. */
  transition: color 150ms ease, background 150ms ease;
  line-height: 0;
}
.mira-quote-icon svg{ display:block; width: 20px; height: 20px; }
.mira-quote-icon:hover{
  color: var(--accent, #8b6e3a);
  background: rgba(139, 110, 58, 0.08);
}
/* #11 (active state must survive a 3-second blink test): a color flip
 * alone is too quiet for the "sent" ack — add a check glyph via
 * ::before so the user can scan a list of cards and see at a glance
 * which were already deposited on the desk. */
.mira-quote-icon.copied{
  color: #4d6e2f;
  background: rgba(77, 110, 47, 0.10);
}
.mira-quote-icon.copied::before{
  content: "\2713";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: -2px;
  right: -2px;
  background: #4d6e2f;
  color: #faf6ec;
  width: 11px;
  height: 11px;
  line-height: 11px;
  border-radius: 50%;
  text-align: center;
}
.mira-quote-icon:focus-visible{
  outline: 2px solid var(--accent, #8b6e3a);
  outline-offset: 1px;
}

/* Hover tooltip popup. Uses Mira's design tokens (var(--brown) and
 * var(--sans)) so the tooltip reads as part of Mira's chrome rather
 * than as a generic browser tooltip. Padding sized up 2026-05-04 per
 * maintainer's "brown area too tight" feedback. */
.mira-quote-tooltip{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--brown, #513728);
  color: var(--cream, #FAF6F0);
  font-family: var(--sans, 'Segoe UI', system-ui, -apple-system, sans-serif);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .15px;
  padding: 9px 14px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(53, 32, 26, .25);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* #13: 150ms is the lower bound of perceived motion. */
  transition: opacity 150ms ease, visibility 150ms ease;
  z-index: 50;
}
.mira-quote-tooltip::after{
  /* Down-pointing tail */
  content:"";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--brown, #513728);
}
.mira-quote-icon:hover .mira-quote-tooltip,
.mira-quote-icon:focus-visible .mira-quote-tooltip{
  opacity: 1;
  visibility: visible;
}

/* Dark theme tweak — accent stays warm gold but base color flips */
@media (prefers-color-scheme: dark){
  .mira-quote-card{
    color: var(--cream, #ece4ce);
  }
  .mira-quote-footer{
    color: var(--brown-mid, #b6a583);
  }
}

/* "Show context" modal popup. Native <dialog> with cream background,
 * centered, max-width tied to a comfortable reading column. Added
 * 2026-05-03 per maintainer's "BRING UP A POP UP VERSION OF THE READING
 * ROOM VIEWER" request triggered by the magnifying-glass icon. */
.mira-context-dialog{
  /* Centering for showModal()'d dialogs. The UA stylesheet handles
   * this via `inset: 0; margin: auto` for top-layer dialogs, but our
   * authored CSS overrides padding/max-width without restoring the
   * centering rules — leaving the dialog pinned to the top-left.
   * Restoring inset+margin keeps the dialog visually centered while
   * respecting our width/max-height. */
  inset: 0;
  margin: auto;
  border: 1px solid var(--brown-light, #d6c8a8);
  background: var(--cream, #faf6ec);
  color: var(--brown-dark, #2c2820);
  padding: 28px 32px 24px 32px;
  max-width: 720px;
  width: min(90vw, 720px);
  max-height: 86vh;
  border-radius: 5px;
  box-shadow: 0 12px 36px rgba(40, 25, 15, 0.28);
  font-family: var(--serif, "Georgia", "Times New Roman", serif);
}
.mira-context-dialog::backdrop{ background: rgba(40, 25, 15, 0.45); }
.mira-context-close{
  position: absolute;
  top: 12px; right: 12px;
  background: transparent; border: none;
  cursor: pointer;
  color: var(--brown-mid, #5a4f3c);
  padding: 6px;
  border-radius: 4px;
  display: inline-flex;
}
.mira-context-close:hover{
  background: rgba(139, 110, 58, 0.1);
  color: var(--brown-dark, #2c2820);
}
.mira-context-header{
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(139, 110, 58, 0.18);
}
.mira-context-title{
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--brown-dark, #2c2820);
}
.mira-context-citation{
  font-size: 0.9rem;
  font-style: italic;
  color: var(--brown-mid, #5a4f3c);
  line-height: 1.4;
}
.mira-context-body{
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.mira-context-prose{
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  margin: 0;
  white-space: pre-wrap;
  color: var(--brown-dark, #2c2820);
}
.mira-context-footer{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 110, 58, 0.18);
  text-align: right;
}

/* In-context highlight: the verbatim cut wrapped inside the full
 * source passage in the Show-context popup. Lets the eye land on the
 * cut while still seeing surrounding prose. */
.mira-context-cut{
  background: rgba(122, 58, 16, 0.14);
  color: var(--brown-dark, #2c2820);
  padding: 1px 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(122, 58, 16, 0.18);
}

/* Verbatim-cut reference shown at the top of the Show-context popup —
 * the sentence the user is looking for on the embedded PDF page.
 * Visually distinct from the prose-mode body (above) and the embedded
 * iframe (below), but typographically consistent with card bodies. */
.mira-context-quote-ref{
  margin: 0 0 14px 0;
  padding: 10px 14px;
  background: rgba(139, 110, 58, 0.06);
  border-left: 3px solid var(--accent, #8b6e3a);
  font-family: var(--serif, "Times New Roman", Georgia, serif);
  font-size: .92rem;
  line-height: 1.5;
  font-style: normal;
  color: var(--brown-dark, #2c2820);
}

/* Embedded native PDF viewer for the Show-context popup. Sized to
 * fill the dialog body comfortably while leaving room for the
 * quote-ref above and the open-reading-room footer below. */
.mira-context-pdf-frame{
  width: 100%;
  height: min(70vh, 600px);
  border: 1px solid rgba(139, 110, 58, 0.18);
  border-radius: 4px;
  background: var(--white, #ffffff);
  display: block;
}

/* Progress Panel CSS removed (maintainer 2026-05-08, post-Smoke-27).
 * The .mira-progress-panel / .mira-progress-stage / .mira-progress-message
 * / .mira-progress-counts rules and the @keyframes mira-progress-pulse
 * are gone with the panel itself (see swarm-ui.js panel-removal note).
 * No replacement; the narrator strip carries the live progress load. */

/* Inline citation rendered for footnote-style [QUOTE-N] references
 * that aren't card-mountable (maintainer 2026-05-03 strict-cut gate).
 * Visually subordinate to the prose; clickable like the card
 * citations are. */
.mira-inline-cite{
  font-style: italic;
  color: var(--brown-mid, #5a4f3c);
  text-decoration: underline;
  text-decoration-color: rgba(139, 110, 58, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mira-inline-cite:hover{
  color: var(--accent, #8b6e3a);
  text-decoration-color: currentColor;
}
.mira-context-open-reader{
  background: var(--brown-dark, #2c2820);
  color: var(--cream, #faf6ec);
  border: none;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms ease;
}
.mira-context-open-reader:hover{ background: var(--brown-mid, #5a4f3c); }

/* #14 (prefers-reduced-motion is a hard kill switch): collapse
 * transitions to 0.01ms — not 0, since Safari historically treats
 * 0 as "use default". Covers every transition on the card surface,
 * not just the icon row, so the rule survives future component
 * changes without needing per-element opt-in. */
@media (prefers-reduced-motion: reduce){
  .mira-quote-card,
  .mira-quote-card *,
  .mira-quote-icon,
  .mira-quote-tooltip,
  .mira-quote-source{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Inline citation superscripts (swarm-ui.js _transformSwarmText) ─
 * Paired with .mira-quote-card. The transform rewrites synthesis
 * `[CITE-N]` markers into <sup class="mira-cite-link"> anchors that
 * scroll to the matching aside.mira-quote-card[data-quote-n=N].
 * Orphans (CITE with no QUOTE) get a muted, non-interactive style. */
.mira-cite-link{
  cursor: pointer;
  color: var(--accent, #b89020);
  text-decoration: none;
  padding: 0 2px;
  font-size: 0.78em;
}
.mira-cite-link:hover{ text-decoration: underline; }
.mira-cite-link.mira-cite-orphan{
  color: var(--brown-mid, #8a7660);
  cursor: default;
  text-decoration: none;
}
.mira-cite-link.mira-cite-orphan:hover{ text-decoration: none; }

/* ── Citation hover-card (Perplexity pattern, R5 chat-skin alignment,
 * 2026-05-08). Floating preview card on 200 ms hover-delay over
 * <sup.mira-cite-link>. Singleton element appended to body, positioned
 * via fixed-position math in swarm-ui.js. role="tooltip" +
 * aria-describedby on the <sup>. ─────────────────────────────── */
.mira-cite-hover-card {
  position: fixed;
  z-index: 1000;
  max-width: 360px;
  min-width: 240px;
  padding: 10px 12px 8px;
  background: var(--cream-bg, #f6efe2);
  border: 1px solid var(--brown-light, #d4c5a8);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(62, 39, 35, 0.18);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--brown-dark, #3e2723);
  pointer-events: auto; /* allow user to mouse over the tooltip */
  /* Subtle fade-in on appear; no fade-out so dismissal feels instant. */
  animation: mira-cite-hover-in 0.18s ease-out;
}

@keyframes mira-cite-hover-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mira-cite-hover-card .mira-cite-hover-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--brown-dark, #3e2723);
  margin-bottom: 6px;
  line-height: 1.3;
}

.mira-cite-hover-card .mira-cite-hover-meta {
  font-size: 0.78rem;
  color: var(--brown-mid, #6d4c41);
  margin-bottom: 6px;
  font-style: italic;
}

.mira-cite-hover-card .mira-cite-hover-quote {
  font-style: italic;
  color: var(--brown-dark, #3e2723);
  border-left: 2px solid var(--accent, #b89020);
  padding-left: 8px;
  margin: 4px 0 6px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.mira-cite-hover-card .mira-cite-hover-arrow {
  font-size: 0.74rem;
  color: var(--accent, #b89020);
  text-align: right;
  margin-top: 4px;
  opacity: 0.85;
}

/* Brief flash highlight when a CITE link scrolls a card into view */
.mira-quote-card.mira-quote-flash{
  background: rgba(184, 144, 32, 0.12);
  transition: background 350ms ease;
}

/* Inline pull-quote modifier — magazine-style centered block-level
   appearance for the LLM-selected most-evidence-forward citations.
   Sits between paragraphs of essay prose at the citation point. */
.mira-quote-card.mira-quote-pull {
  max-width: 80%;
  margin: 1.4em auto;
  padding: 1em 1.5em;
  border-left-width: 3px;
  font-size: 1.05em;
  line-height: 1.55;
}

.mira-quote-card.mira-quote-pull .mira-quote-text {
  font-style: italic;
  color: var(--brown-dark, #3e2723);
}

.mira-quote-card.mira-quote-pull .mira-quote-footer {
  margin-top: 0.6em;
}

/* ── v4 M1 (2026-05-08): citation-js bibliography output ────────
 * citation-js wraps every formatted bibliography in
 *   <div class="csl-bib-body">
 *     <div class="csl-entry">…</div>
 *   </div>
 * Hanging indent per CMOS §14.66 — the entry's first line is flush,
 * subsequent lines indent. The numbers below match what's in the
 * Bibliography section of the synthesis surface AND in the M4
 * retrieved-but-not-cited <ol>. */
.csl-bib-body {
  padding-left: 1.5em;
  text-indent: -1.5em;
  line-height: 1.45;
}
.csl-bib-body .csl-entry {
  margin: 0.5em 0;
}

/* ── v4 M4 (2026-05-08): retrieved-but-not-cited disclosure ─────
 * Sits below the Bibliography. Italic summary, hanging-indent list,
 * muted brown so it reads as provenance footer rather than another
 * level of citation. Border-top hairline separates it from the
 * Bibliography section above. */
.swarm-retrieved-not-cited {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--brown-light, #d4c5a8);
  font-size: 0.86rem;
  color: var(--brown-mid, #6d4c41);
}
.swarm-retrieved-not-cited summary {
  cursor: pointer;
  user-select: none;
  font-style: italic;
  opacity: 0.85;
}
.swarm-retrieved-not-cited summary:hover {
  opacity: 1;
}
.swarm-retrieved-list {
  margin: 0.5em 0 0 1.5em;
  padding: 0;
}
.swarm-retrieved-list li {
  margin: 0.4em 0;
  padding-left: 1.5em;
  text-indent: -1.5em;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Wave C8 (maintainer 2026-05-10) — synthesis essay typography.
   Subheadings need breathing room; cards need margin from
   surrounding paragraphs so they read as evidence-blocks rather
   than collisions in the prose flow.
   ═══════════════════════════════════════════════════════════════ */
.msg-synthesis h1,
.msg-llm h1 {
  margin: 1.8em 0 0.7em;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--brown-dark, #3e2723);
}
.msg-synthesis h2,
.msg-llm h2 {
  margin: 1.6em 0 0.6em;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--brown-dark, #3e2723);
}
.msg-synthesis h3,
.msg-llm h3 {
  margin: 1.2em 0 0.4em;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--brown-dark, #3e2723);
}
.msg-synthesis p,
.msg-llm p {
  margin: 0.9em 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  line-height: 1.6;
}
.msg-synthesis p + .mira-quote-card,
.msg-llm  p + .mira-quote-card {
  margin-top: 1.1em;
}
.msg-synthesis .mira-quote-card + p,
.msg-llm  .mira-quote-card + p {
  margin-top: 1.1em;
}
.msg-synthesis .mira-quote-card + .mira-quote-card,
.msg-llm  .mira-quote-card + .mira-quote-card {
  margin-top: 0.6em;
}

/* Wave E14 (maintainer 2026-05-10) — card-coverage caution line. */
.swarm-coverage-caution {
  margin: 1.4em 0 0.6em;
  padding: 8px 12px;
  background: rgba(184, 144, 32, 0.08);
  border-left: 3px solid var(--accent, #b89020);
  border-radius: 0 4px 4px 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--brown-dark, #3e2723);
}

/* Wave C6 — bibliography section, when present, gets visual
 * separation from the essay body. */
.msg-synthesis section#swarmBibliography,
.msg-llm  section#swarmBibliography {
  margin: 2em 0 0.6em;
  padding-top: 1em;
  border-top: 1px solid var(--border, #d7ccc8);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
}
.msg-synthesis section#swarmBibliography h2,
.msg-llm  section#swarmBibliography h2 {
  margin: 0 0 0.6em;
  font-size: 1.1rem;
}

/* Wave E12 (maintainer 2026-05-10) — Chicago notes-and-bibliography list.
 * CMOS bibliographies are unnumbered and hanging-indented. Suppress
 * the <ol> markers (we still use <ol> + per-entry refN ids so
 * superscript [N] anchors keep working) and inherit the hanging
 * indent from .csl-bib-body above. */
section#swarmBibliography ol.bibliography {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
section#swarmBibliography ol.bibliography > li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin: 0.5em 0;
  line-height: 1.45;
}
section#swarmBibliography ol.bibliography > li .csl-entry {
  display: inline;
}
/* Gap-flag span: muted brown, italic, smaller font so the entry text
 * still reads as the primary content but missing-field markers are
 * unmistakably visible (per maintainer's "gaps must be visible, not
 * silently produced" directive). */
section#swarmBibliography .bib-gap {
  font-style: italic;
  font-size: 0.85em;
  color: var(--brown-mid, #8d6e63);
  margin-left: 0.4em;
}

/* Wave D9 — inline source-context popover anchored to a quote card. */
.swarm-card-context-popover {
  position: fixed;
  z-index: 1000;
  width: 460px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  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(--serif, Georgia, "Times New Roman", serif);
  color: var(--brown-dark, #3e2723);
  display: flex;
  flex-direction: column;
}
.swarm-card-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #d7ccc8);
  background: var(--cream-dark, #f0ebe3);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown-light, #6b4d40);
  border-radius: 10px 10px 0 0;
}
.swarm-card-context-body {
  padding: 12px 14px;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.swarm-card-context-rrlink {
  display: inline-block;
  margin-left: auto;
  padding: 2px 8px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.72rem;
  color: var(--accent, #7a3a10);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
}
.swarm-card-context-rrlink:hover {
  color: var(--brown-dark, #35201a);
}
.swarm-card-context-close {
  background: transparent;
  border: none;
  font-size: 1rem;
  color: var(--brown-light, #6b4d40);
  cursor: pointer;
  padding: 0 4px;
  margin-left: 8px;
}
.swarm-card-context-close:hover {
  color: var(--brown-dark, #35201a);
}

/* ═══════════════════════════════════════════════════════════════
   Mira-aesthetic tooltips (maintainer 2026-05-10).
   Canonical [data-tip] tooltip used by:
   - Atelier history sidebar (.ah-row-main, .ah-collapse, .ah-newchat,
     .ah-pin, .ah-rename, .ah-delete)
   - Per-message synthesis action row (.swarm-action-btn)
   - MiraXR compile button + outcome buttons
   - Quote card SVG buttons
   - Any other [data-tip] in the application
   Pattern: brown-dark bubble + cream text + sans 0.72rem + soft
   shadow + 200ms fade. Renders below the trigger; flips to above
   on .tip-up modifier. Replaces OS-native title= tooltips. */
.ah-row-main[data-tip],
.ah-collapse[data-tip],
.ah-newchat[data-tip],
.ah-row-btn[data-tip],
.swarm-action-btn[data-tip],
.outcome-btn[data-tip],
.mira-quote-card [data-tip],
.explorer-workbench-btn[data-tip],
.sidebar-collapse-btn[data-tip],
.sidebar-settings-btn[data-tip] {
  position: relative;
}
.ah-row-main[data-tip]::after,
.ah-collapse[data-tip]::after,
.ah-newchat[data-tip]::after,
.ah-row-btn[data-tip]::after,
.swarm-action-btn[data-tip]::after,
.outcome-btn[data-tip]::after,
.mira-quote-card [data-tip],
.explorer-workbench-btn[data-tip]::after,
/* maintainer 2026-05-11: include the dark-sidebar buttons in the base
 * tooltip rule. The earlier exclusion meant the user-settings gear
 * + logout button + sidebar collapse arrow rendered no tooltip at
 * all — the later "flip upward" rules at line 885+ only re-position
 * an existing pseudo, so without this content/style block they
 * were invisible. maintainer 2026-05-11 (later): also include the
 * sidebar nav items (Acquisitions / Resource Management / Main
 * Library / Reading Room / Atelier / Writing Desk) so when the
 * sidebar is collapsed and only icons show, the user can hover to
 * see what each one is. */
.sidebar-collapse-btn[data-tip]::after,
.sidebar-settings-btn[data-tip]::after,
.sidebar-logout-btn[data-tip]::after,
.sidebar-nav-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--brown-dark, #35201a);
  /* maintainer 2026-05-11: pure white instead of cream — the dark sidebar
   * + user-photo chip behind these tooltips made the cream tint hard
   * to read. White reads against the brown-dark fill with maximum
   * contrast and matches maintainer's request. */
  color: #ffffff;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 3px 10px rgba(40, 25, 15, 0.18);
  z-index: 1000;
}
.ah-row-main[data-tip]::before,
.ah-collapse[data-tip]::before,
.ah-newchat[data-tip]::before,
.ah-row-btn[data-tip]::before,
.swarm-action-btn[data-tip]::before,
.outcome-btn[data-tip]::before,
.mira-quote-card [data-tip],
.explorer-workbench-btn[data-tip]::before,
.sidebar-collapse-btn[data-tip]::before,
.sidebar-settings-btn[data-tip]::before,
.sidebar-logout-btn[data-tip]::before,
.sidebar-nav-item[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--brown-dark, #35201a);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}
.ah-row-main[data-tip]:hover::after,
.ah-collapse[data-tip]:hover::after,
.ah-newchat[data-tip]:hover::after,
.ah-row-btn[data-tip]:hover::after,
.swarm-action-btn[data-tip]:hover::after,
.outcome-btn[data-tip]:hover::after,
.mira-quote-card [data-tip],
.explorer-workbench-btn[data-tip]:hover::after,
.sidebar-collapse-btn[data-tip]:hover::after,
.sidebar-settings-btn[data-tip]:hover::after,
.sidebar-logout-btn[data-tip]:hover::after,
.sidebar-nav-item[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ah-row-main[data-tip]:hover::before,
.ah-collapse[data-tip]:hover::before,
.ah-newchat[data-tip]:hover::before,
.ah-row-btn[data-tip]:hover::before,
.swarm-action-btn[data-tip]:hover::before,
.outcome-btn[data-tip]:hover::before,
.mira-quote-card [data-tip],
.explorer-workbench-btn[data-tip]:hover::before,
.sidebar-collapse-btn[data-tip]:hover::before,
.sidebar-settings-btn[data-tip]:hover::before,
.sidebar-logout-btn[data-tip]:hover::before,
.sidebar-nav-item[data-tip]:hover::before {
  opacity: 1;
}
/* Above-trigger variant — for elements near the bottom of the
 * viewport where the default below-tip would overflow. */
.tip-up[data-tip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}
.tip-up[data-tip]::before {
  top: auto;
  bottom: calc(100% + 2px);
  border-bottom-color: transparent;
  border-top-color: var(--brown-dark, #35201a);
}

/* maintainer 2026-05-10: bottom-of-viewport buttons — sidebar profile
 * row (collapse + gear settings + logout) and the Atelier composer's
 * Multi-Agent Architecture gear (#sidebarSettingsBtn / class
 * `.explorer-workbench-btn`). Their tooltips MUST go UP, not down,
 * or they get clipped by the viewport edge. Match the existing
 * `.sidebar-logout-btn` upward-popup pattern.
 *
 * maintainer 2026-05-10 (later): the Atelier-composer gear's tooltip
 * was being obscured by the atelier-history sidebar's chevron and
 * other surfaces with positive z-index. Boosting tooltip z-index
 * to 99999 + lifting the button's z-index on hover so the parent
 * stacking context wins regardless of nested siblings. */
/* maintainer 2026-05-11 v3: sidebar-collapse-btn EXCLUDED from the upward
 * flip — maintainer wants its tooltip to drop DOWN, not up. The base
 * [data-tip]::after rule above already positions it below the
 * trigger, so just leaving it out of this override is enough. The
 * other three (settings/logout/explorer-workbench) stay in the
 * upward-flip family because they sit at the BOTTOM of the viewport
 * where a downward tooltip would clip. */
.sidebar-settings-btn[data-tip]::after,
.sidebar-logout-btn[data-tip]::after,
.explorer-workbench-btn[data-tip]::after {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  z-index: 99999;
}
.sidebar-settings-btn[data-tip]:hover::after,
.sidebar-logout-btn[data-tip]:hover::after,
.explorer-workbench-btn[data-tip]:hover::after {
  transform: translateX(-50%) translateY(0);
}
.sidebar-settings-btn[data-tip]::before,
.sidebar-logout-btn[data-tip]::before,
.explorer-workbench-btn[data-tip]::before {
  top: auto;
  bottom: calc(100% + 2px);
  border-bottom-color: transparent;
  border-top-color: var(--brown-dark, #35201a);
  z-index: 99999;
}
/* Sidebar collapse-btn — DOWNWARD tooltip, left-anchored to the
 * button so it extends RIGHTWARD into the viewport (never clipped by
 * the left edge). The default base rule centers the tooltip via
 * left:50%; transform:translateX(-50%) — when the sidebar is
 * collapsed (52px wide) and the button sits at x≈30, that centered
 * tooltip's left edge goes NEGATIVE and disappears off-screen.
 *
 * Override: anchor at the button's left edge with left:0 + no
 * X-translation, so the tooltip always grows rightward. Same for
 * the arrow ::before. High z-index keeps it above the atelier-
 * history aside (z-index 50) and the Atelier composer SVG. */
.sidebar-collapse-btn[data-tip]::after {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-4px) !important;
  z-index: 99999;
}
.sidebar-collapse-btn[data-tip]:hover::after {
  transform: translateY(0) !important;
}
.sidebar-collapse-btn[data-tip]::before {
  /* Arrow centered above where the tooltip's left edge starts —
   * roughly 14px in from the tooltip's left, which lines up with the
   * collapse button's icon center in the 28px-wide hit-target. */
  left: 12px !important;
  right: auto !important;
  transform: none !important;
  z-index: 99999;
}

/* ah-collapse (atelier-history toggle) — maintainer 2026-05-11: tooltip
 * was getting cut off by the LEFT edge of the screen when the
 * atelier-history is collapsed (button near x=0). Anchor at left:0
 * + no X-translation so the tooltip grows RIGHTWARD into the
 * viewport. Z-index high so it paints above sidebar surfaces. */
.ah-collapse[data-tip]::after {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-4px) !important;
  z-index: 99999 !important;
}
.ah-collapse[data-tip]:hover::after {
  transform: translateY(0) !important;
}
.ah-collapse[data-tip]::before {
  left: 8px !important;
  right: auto !important;
  transform: none !important;
  z-index: 99999 !important;
}
.ah-collapse[data-tip]:hover {
  z-index: 99999;
}

/* maintainer 2026-05-11: lift the Atelier composer's input-bar's
 * stacking context when the user hovers the Multi-Agent Architecture
 * gear, so the gear's upward tooltip can escape its parent stacking
 * context (z-index:10) and paint above the Mira sidebar (z-index:100)
 * and the atelier-history aside (z-index:50). Without this, the
 * tooltip was being obscured by the collapsed sidebars whenever the
 * cursor crossed over them. */
.explorer-input-bar:has(.explorer-workbench-btn:hover){
  z-index: 99999 !important;
}
/* Lift the trigger button's stacking context on hover so its
 * tooltip pseudo-elements paint above any sibling surfaces (e.g.
 * the atelier-history cream sidebar at z-index:5). */
.sidebar-collapse-btn[data-tip]:hover,
.sidebar-settings-btn[data-tip]:hover,
.sidebar-logout-btn[data-tip]:hover,
.explorer-workbench-btn[data-tip]:hover {
  z-index: 99999;
}