/* ================================================================
 *  Mira — css/markdown.css   (Phase 2a: clean main output)
 *
 *  Typographic styling for markdown-rendered assistant/synthesis
 *  messages. Scoped to .msg-llm / .msg-synthesis so it never touches
 *  other surfaces. Uses the existing design tokens (css/reset.css).
 *  The scholarly serif identity is preserved; the synthesis essay is
 *  the visual culmination. Loaded AFTER quote-cards.css so these win
 *  where intended. Dark mode is out of scope (per direction).
 * ================================================================ */

/* Comfortable reading measure — was effectively full-width ("a total
 * mess"). ~46rem ≈ 70–75 characters, the classic prose measure. */
.explorer-messages .msg-llm,
.explorer-messages .msg-synthesis {
  max-width: 46rem;
  line-height: 1.7;
  font-size: 1rem;
  color: var(--text, #35201A);
}
.explorer-messages .msg-user {
  max-width: 40rem;
}

/* Headings — clear hierarchy; the essay reads like a paper, not a dump. */
.msg-llm h1, .msg-synthesis h1 { font-size: 1.5rem; }
.msg-llm h2, .msg-synthesis h2 { font-size: 1.28rem; }
.msg-llm h3, .msg-synthesis h3 { font-size: 1.12rem; }
.msg-llm h4, .msg-synthesis h4 { font-size: 1rem; }
.msg-llm h1, .msg-synthesis h1,
.msg-llm h2, .msg-synthesis h2,
.msg-llm h3, .msg-synthesis h3,
.msg-llm h4, .msg-synthesis h4 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  color: var(--brown-dark, #35201A);
  line-height: 1.3;
  margin: 1.4em 0 0.5em;
}
.msg-llm h2, .msg-synthesis h2 {
  border-bottom: 1px solid var(--border-light, #EFEBE9);
  padding-bottom: 0.2em;
}
.msg-llm > :first-child, .msg-synthesis > :first-child { margin-top: 0; }

/* Paragraphs + prose */
.msg-llm p, .msg-synthesis p { margin: 0 0 0.85em; }

/* Lists */
.msg-llm ul, .msg-synthesis ul,
.msg-llm ol, .msg-synthesis ol {
  margin: 0.6em 0 0.95em;
  padding-left: 1.6em;
}
.msg-llm li, .msg-synthesis li { margin: 0.3em 0; }
.msg-llm li > ul, .msg-synthesis li > ul,
.msg-llm li > ol, .msg-synthesis li > ol { margin: 0.3em 0; }

/* Blockquotes (non-card) */
.msg-llm blockquote, .msg-synthesis blockquote {
  margin: 0.9em 0;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--gold-light, #B89868);
  color: var(--text-light, #5C3D2E);
  font-style: italic;
}

/* Inline + block code */
.msg-llm code, .msg-synthesis code {
  font-family: var(--mono, Consolas, monospace);
  font-size: 0.88em;
  background: var(--cream-dark, #F0EBE3);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.msg-llm pre, .msg-synthesis pre {
  background: var(--cream-dark, #F0EBE3);
  border: 1px solid var(--border, #D7CCC8);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.9em 0;
  line-height: 1.5;
}
.msg-llm pre code, .msg-synthesis pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}

/* Links */
.msg-llm a, .msg-synthesis a {
  color: var(--accent, #7A3A10);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-llm a:hover, .msg-synthesis a:hover { color: var(--accent-light, #904920); }

/* Tables */
.msg-llm table, .msg-synthesis table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.92em;
}
.msg-llm th, .msg-synthesis th,
.msg-llm td, .msg-synthesis td {
  border: 1px solid var(--border, #D7CCC8);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.msg-llm th, .msg-synthesis th {
  background: var(--cream-dark, #F0EBE3);
  font-weight: 600;
}

/* Horizontal rule + emphasis */
.msg-llm hr, .msg-synthesis hr {
  border: 0;
  border-top: 1px solid var(--border, #D7CCC8);
  margin: 1.4em 0;
}
.msg-llm strong, .msg-synthesis strong { font-weight: 700; color: var(--brown-dark, #35201A); }
.msg-llm em, .msg-synthesis em { font-style: italic; }

/* ---- Phase 2b: quote-card verification indicator (quiet by default) ----
 * Loaded after quote-cards.css. A small dot + label in the card footer;
 * the dot color is driven by the inline --vc set by renderQuoteBlock.
 * Only not_found / frankenstein get a loud, bold treatment. */
.mira-quote-verify {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, #7D5F50);
  margin: 0 8px;
  white-space: nowrap;
}
.mira-quote-verify-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vc, #7a6a3a);
  flex: 0 0 auto;
}
.mira-quote-verify-label { opacity: 0.75; }
.mira-quote-verify[data-status="not_found"],
.mira-quote-verify[data-status="frankenstein"] {
  color: var(--vc, #a03030);
  font-weight: 700;
}
.mira-quote-verify[data-status="not_found"] .mira-quote-verify-label,
.mira-quote-verify[data-status="frankenstein"] .mira-quote-verify-label { opacity: 1; }