/*!
 * chat-content.css — shared assistant-message styling for ALL KMS chat widgets.
 *
 * Styles EVERY markdown construct the LLM can emit (see chat-content.js), so a
 * new chat widget onboarding gets correct formatting for free. Pairs with the
 * `.chat-md` wrapper class on the assistant message body.
 *
 * THEME VIA TOKENS, NOT FORKS. Set these `--chat-*` custom properties on the
 * widget root (or any ancestor) to skin it; every rule below reads them with a
 * sensible fallback so the stylesheet also works standalone:
 *
 *   --chat-fg            body text color            (default: currentColor)
 *   --chat-muted         secondary text / rules     (default: 60% fg)
 *   --chat-accent        links + citation color     (default: #2563eb)
 *   --chat-border        borders (pre/table/quote)  (default: 18% fg)
 *   --chat-code-fg       inline/code-block text     (default: --chat-fg)
 *   --chat-code-bg       code background tint        (default: 8% accent)
 *   --chat-cite          citation superscript color (default: --chat-accent)
 *   --chat-font          body font-family           (default: inherit)
 *   --chat-font-mono     monospace font-family       (default: ui-monospace…)
 *   --chat-heading-weight heading weight             (default: 700)
 *   --chat-radius        corner radius for code/table(default: 0.4rem)
 *
 * SPACING TOKENS — the vertical rhythm. Tune these to make a widget tighter or
 * airier without touching the rules; defaults suit a chat bubble:
 *   --chat-space         gap between blocks (p, lists, quotes, pre, table, hr)
 *   --chat-space-tight   gap between list items / nested lists
 *   --chat-heading-top   space ABOVE a heading (section separation)
 *   --chat-heading-bottom space below a heading before its body
 *
 * Spacing/rhythm rules below use `.chat-md:is(.chat-md)` — a no-op match that
 * doubles specificity to (0,2,1) so the shared rhythm takes effect over a
 * widget's class-scoped legacy margin rules (no extra class needed). Widgets
 * scoped by ID (e.g. the floating widget's `#panel …`) add a matching
 * id-scoped override that reads the same tokens. Everything else stays in
 * :where() (zero specificity) so a widget can still override look without
 * fighting.
 */

:where(.chat-md) {
  color: var(--chat-fg, currentColor);
  font-family: var(--chat-font, inherit);
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: break-word;
  /* Spacing scale — override on the widget root to make a bubble tighter/airier. */
  --chat-space: 0.72em;
  --chat-space-tight: 0.28em;
  --chat-heading-top: 1.3em;
  --chat-heading-bottom: 0.4em;
}

/* ── Vertical rhythm (authoritative; doubled-class specificity) ────────────── */
.chat-md:is(.chat-md) > :first-child { margin-top: 0 !important; }
.chat-md:is(.chat-md) > :last-child { margin-bottom: 0 !important; }
.chat-md:is(.chat-md) :is(p, ul, ol, blockquote, pre, table, hr) {
  margin-block: var(--chat-space, 0.72em) !important;
}
.chat-md:is(.chat-md) :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--chat-heading-top, 1.3em) var(--chat-heading-bottom, 0.4em) !important;
}
/* A heading that opens the message shouldn't push down from the top. */
.chat-md:is(.chat-md) > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0 !important; }
.chat-md:is(.chat-md) li { margin-block: var(--chat-space-tight, 0.28em) !important; }
.chat-md:is(.chat-md) li > p { margin-block: 0 !important; }
.chat-md:is(.chat-md) blockquote p { margin-block: 0.25em !important; }
.chat-md:is(.chat-md) :is(ul, ol) :is(ul, ol) {
  margin-block: var(--chat-space-tight, 0.28em) !important;
}
/* Pull a list/quote slightly closer to the line that introduces it. */
.chat-md:is(.chat-md) p + :is(ul, ol, blockquote) { margin-top: calc(var(--chat-space, 0.72em) * 0.6) !important; }

/* ── Paragraphs (base look; rhythm handled above) ─────────────────────────── */
:where(.chat-md) p {
  margin: 0.5em 0;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
:where(.chat-md) h1,
:where(.chat-md) h2,
:where(.chat-md) h3,
:where(.chat-md) h4,
:where(.chat-md) h5,
:where(.chat-md) h6 {
  margin: 0.7em 0 0.3em;
  line-height: 1.3;
  font-weight: var(--chat-heading-weight, 700);
  color: var(--chat-fg, currentColor);
}
:where(.chat-md) h1 { font-size: 1.3em; }
:where(.chat-md) h2 { font-size: 1.18em; }
:where(.chat-md) h3 { font-size: 1.08em; }
:where(.chat-md) h4 { font-size: 1em; }
:where(.chat-md) h5 { font-size: 0.92em; }
:where(.chat-md) h6 { font-size: 0.88em; opacity: 0.85; }

/* ── Lists (native nesting → indentation, no data-depth needed) ───────────── */
:where(.chat-md) ul,
:where(.chat-md) ol {
  margin: 0.45em 0;
  padding-left: 1.4em;
  list-style-position: outside;
}
:where(.chat-md) ul { list-style-type: disc; }
:where(.chat-md) ol { list-style-type: decimal; }
:where(.chat-md) li { margin: 0.2em 0; }
/* Nested lists tighten up. */
:where(.chat-md) li > ul,
:where(.chat-md) li > ol { margin: 0.2em 0; }
:where(.chat-md) ul ul { list-style-type: circle; }
:where(.chat-md) ul ul ul { list-style-type: square; }

/* ── Inline emphasis ──────────────────────────────────────────────────────── */
:where(.chat-md) strong,
:where(.chat-md) b { font-weight: 700; }
:where(.chat-md) em,
:where(.chat-md) i { font-style: italic; }
:where(.chat-md) del,
:where(.chat-md) s { text-decoration: line-through; opacity: 0.8; }

/* ── Links ────────────────────────────────────────────────────────────────── */
:where(.chat-md) a {
  color: var(--chat-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
:where(.chat-md) a:hover { text-decoration-thickness: 2px; }

/* ── Code ─────────────────────────────────────────────────────────────────── */
:where(.chat-md) code {
  font-family: var(--chat-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
  font-size: 0.85em;
  color: var(--chat-code-fg, var(--chat-fg, currentColor));
  background: var(--chat-code-bg, color-mix(in srgb, var(--chat-accent, #2563eb) 8%, transparent));
  border-radius: 0.35em;
  padding: 0.08em 0.34em;
}
:where(.chat-md) pre {
  margin: 0.55em 0;
  padding: 0.6em 0.7em;
  overflow-x: auto;
  border-radius: var(--chat-radius, 0.4rem);
  border: 1px solid var(--chat-border, color-mix(in srgb, currentColor 18%, transparent));
  background: var(--chat-code-bg, color-mix(in srgb, var(--chat-accent, #2563eb) 6%, transparent));
}
:where(.chat-md) pre code {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.82em;
  color: var(--chat-code-fg, var(--chat-fg, currentColor));
}

/* ── Blockquote (verbatim poem/passage quoting) ───────────────────────────── */
:where(.chat-md) blockquote {
  margin: 0.6em 0;
  padding: 0.2em 0 0.2em 0.85em;
  border-left: 3px solid var(--chat-border, color-mix(in srgb, currentColor 25%, transparent));
  color: var(--chat-muted, color-mix(in srgb, currentColor 65%, transparent));
  font-style: italic;
}
:where(.chat-md) blockquote p { margin: 0.25em 0; }

/* ── Horizontal rule ──────────────────────────────────────────────────────── */
:where(.chat-md) hr {
  margin: 0.9em 0;
  border: 0;
  border-top: 1px solid var(--chat-border, color-mix(in srgb, currentColor 18%, transparent));
}

/* ── Tables (scroll horizontally inside a narrow panel) ───────────────────── */
:where(.chat-md) table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.6em 0;
  border-collapse: collapse;
  font-size: 0.92em;
}
:where(.chat-md) th,
:where(.chat-md) td {
  border: 1px solid var(--chat-border, color-mix(in srgb, currentColor 18%, transparent));
  padding: 0.3em 0.55em;
  text-align: left;
  vertical-align: top;
}
:where(.chat-md) th {
  font-weight: 700;
  background: var(--chat-code-bg, color-mix(in srgb, var(--chat-accent, #2563eb) 8%, transparent));
}

/* ── Citations ────────────────────────────────────────────────────────────── */
/* Style by the data attribute, not a class, so EVERY widget's citation class
 * (chat-cite, blk-cw-cite, adm-cw-cite, …) gets the base superscript look. A
 * widget's own class rules (hover, per-source-type active color) layer on top. */
:where(.chat-md) sup[data-cite-id] {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.1em;
  color: var(--chat-cite, var(--chat-accent, #2563eb));
  cursor: pointer;
  font-weight: 600;
}
:where(.chat-md) sup[data-cite-id]:hover {
  text-decoration: underline;
}