/* Vici shared markdown - rendered replies.
   The modal is the master copy: rules moved verbatim, in source order, from
   dock/panel/panel.css; loaded after shared-tokens.css and before the host's
   own sheet (panel.css here, styles.css on the web under /panel/).
   What markdown.js builds: prose, headings, lists, quotes, code blocks
   with their head and copy control, tables.
   Shared files (dock/HANDOFF.md, "Shared files"): they hold exactly what the
   modal ships; a host need is a selector in the host's own sheet; no
   transition, animation, filter or blur, and no CSS the board's WebKit has
   not already shipped; every rule renders right with no host-toggled class.
   An edit here is a dock landing (live first) that also deploys the web. */

.conversation-markdown { line-height: 1.45; min-width: 0; }
.conversation-markdown > :first-child { margin-top: 0; }
.conversation-markdown > :last-child { margin-bottom: 0; }
.conversation-markdown p { margin: 0.55em 0; }
.conversation-markdown h1,
.conversation-markdown h2,
.conversation-markdown h3,
.conversation-markdown h4,
.conversation-markdown h5,
.conversation-markdown h6 {
  margin: 0.85em 0 0.35em;
  line-height: 1.25;
  font-weight: 650;
}
.conversation-markdown h1 { font-size: 1.2em; }
.conversation-markdown h2 { font-size: 1.12em; }
.conversation-markdown h3 { font-size: 1.05em; }
.conversation-markdown h4,
.conversation-markdown h5,
.conversation-markdown h6 { font-size: 1em; }
.conversation-markdown ul,
.conversation-markdown ol {
  margin: 0.45em 0;
  padding-left: 1.45em;
}
.conversation-markdown li { margin: 0.18em 0; }
.conversation-markdown li > ul,
.conversation-markdown li > ol { margin: 0.18em 0; }
.conversation-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.5px 5px;
  overflow-wrap: break-word;
}
/* Fenced code is a self-contained, copy-able box (ChatGPT-style): a
   header bar naming the language with a Copy button, the code below.
   The box owns the chrome and clips its own width (max-width:100% +
   min-width:0 up the chain), so wide code can never spill past the
   narrow card. On glass there is no horizontal-scroll affordance, so
   the code WRAPS rather than hiding to the right — the Copy button
   still carries the exact, unwrapped bytes. */
.conversation-markdown .code-block {
  margin: 0.7em 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  max-width: 100%;
  min-width: 0;
}
.conversation-markdown .code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 5px 3px 11px;
  background: color-mix(in srgb, var(--border) 34%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.conversation-markdown .code-block-lang {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-transform: lowercase;
}
.conversation-markdown .code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}
.conversation-markdown .code-copy:hover,
.conversation-markdown .code-copy.kb-hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.conversation-markdown .code-copy.copied {
  color: var(--ok);
  border-color: transparent;
  background: transparent;
}
.conversation-markdown .code-copy-glyph { display: inline-flex; }
.conversation-markdown .code-copy-glyph svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conversation-markdown pre {
  margin: 0;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 0;
  overflow-x: auto;
  max-width: 100%;
}
.conversation-markdown pre code {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  /* Wrap on glass instead of clipping to the card edge; indentation is
     preserved (pre-wrap keeps leading runs), long tokens break. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.conversation-markdown blockquote {
  margin: 0.55em 0;
  padding: 2px 0 2px 11px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.conversation-markdown hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.8em 0;
}
.conversation-markdown a {
  color: var(--accent-link);
  text-decoration: underline;
}
/* A web citation: a raised number after the words it supports. It never
 * grows the line; the anchor is padded so the pointer finds it. */
.conversation-markdown sup.cite {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
}
.conversation-markdown sup.cite + sup.cite { margin-left: 0.15em; }
.conversation-markdown sup.cite a {
  padding: 0 0.2em 0 0.02em;
  color: var(--accent-link);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.conversation-markdown strong { font-weight: 650; }
.conversation-markdown .table-scroll {
  margin: 0.55em 0;
  overflow-x: auto;
  max-width: 100%;
}
.conversation-markdown table {
  border-collapse: collapse;
  font-size: 0.95em;
}
.conversation-markdown th,
.conversation-markdown td {
  border: 1px solid var(--border);
  padding: 4px 9px;
  text-align: left;
  vertical-align: top;
}
.conversation-markdown th { background: var(--surface); }
.conversation-markdown { font-size:15px; line-height:23px; }
.conversation-markdown pre,.conversation-markdown code { font-family:var(--font-code); font-size:13px; line-height:20px; }