/*
 * Answer typography: callouts, numbered parts, and the reply's own rhythm.
 * Drawn by blocks/callouts.js (two passes, no fence); tokens in blocks.css.
 *
 * A callout is a soft tinted card: an icon and a small label on top (with
 * the optional title beside them), then the body in the reply's own book
 * serif. One hue per kind, always from a token, so a palette and both
 * themes restyle it:
 *   note blue (calc) . tip paper . key accent, outlined . check green (good)
 *   trap red (measure) . warning amber (warn) . example dashed, no fill
 * The body moves with the reply's serif; the head stays in the UI sans.
 *
 * Specificity: the chat view's reply rules carry body:not(#_) (chatclean.css)
 * or body[data-view] (styles.css), so the rules here that must win inside a
 * reply carry body:not(#_) too. Every rule that is not a callout or a part is
 * scoped to an assistant reply in the chat view and nothing else.
 */

/* blocks.css declares its alias tokens (--ab-ink: var(--text), ...) on :root,
   where var(--text) is still the dark theme's: the light theme sets --text on
   body. Until the aliases are declared on body, a callout and a part re-read
   them where they are drawn. A palette restates tokens on body itself, so
   with one set this steps aside. */
body:not([data-ab-palette]) :is(.ab-callout, .ab-part) {
  --ab-ink: var(--text);
  --ab-muted: var(--text-muted);
  --ab-card: var(--bg-elev-1);
  --ab-paper: var(--bg-elev-2);
  --ab-rule: var(--border-strong);
  --ab-hair: var(--border);
  --ab-accent: var(--accent);
}

/* ── Callouts ─────────────────────────────────────────────────────────── */
.ab-callout {
  --abc-tone: var(--ab-calc);
  --abc-fill: var(--ab-calc-soft);
  --abc-line: transparent;
  /* The label reads a step darker than the tone on light, lighter on dark. */
  --abc-kind: color-mix(in srgb, var(--abc-tone) 80%, var(--ab-ink));
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 1.15em 0;
  padding: 12px 16px 14px;
  border: 1px solid var(--abc-line);
  border-radius: var(--ab-radius);
  background: var(--abc-fill);
  color: var(--ab-ink);
  overflow-wrap: break-word;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ab-callout-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 20px;
  font-family: var(--ab-font-ui);
}
.ab-callout-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1.5px;
  /* Through color: styles.css strokes every 24-unit svg with currentColor. */
  color: var(--abc-tone);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-callout-kind {
  flex: none;
  font-family: var(--ab-font-ui);
  font-size: 11px;
  font-weight: 650;
  line-height: 20px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--abc-kind);
}
.ab-callout-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 3px;
  font-family: var(--ab-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.003em;
  color: var(--ab-ink);
}
.ab-callout-body {
  min-width: 0;
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.6;
}
.ab-callout-body > :first-child { margin-top: 0; }
.ab-callout-body > :last-child { margin-bottom: 0; }
.ab-callout-body .katex { color: inherit; }

.ab-callout--note { --abc-tone: var(--ab-calc); --abc-fill: var(--ab-calc-soft); }
.ab-callout--tip { --abc-tone: var(--ab-accent); --abc-fill: var(--ab-paper); --abc-line: var(--ab-hair); }
.ab-callout--key {
  --abc-tone: var(--ab-accent);
  --abc-fill: var(--ab-card);
  --abc-line: color-mix(in srgb, var(--ab-accent) 55%, transparent);
  border-width: 1.5px;
}
.ab-callout--check { --abc-tone: var(--ab-good); --abc-fill: var(--ab-good-soft); }
.ab-callout--trap { --abc-tone: var(--ab-measure); --abc-fill: var(--ab-measure-soft); }
.ab-callout--warning { --abc-tone: var(--ab-warn); --abc-fill: var(--ab-warn-soft); }
.ab-callout--example {
  --abc-tone: var(--ab-muted);
  --abc-kind: var(--ab-muted);
  --abc-fill: transparent;
  --abc-line: var(--ab-rule);
  border-style: dashed;
}
/* A marker still arriving mid-stream: the same box, nothing named yet. */
.ab-callout--pending { --abc-fill: var(--ab-paper); --abc-line: var(--ab-hair); }
.ab-callout--pending .ab-callout-icon {
  display: block;
  border-radius: 50%;
  background: var(--ab-hair);
}
.ab-callout--pending .ab-callout-kind {
  width: 72px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ab-hair);
}

/* In the chat the body takes the reply's serif, a half step smaller. */
body:not(#_) .view-chat .msg.assistant .msg-content .ab-callout-body {
  font-family: var(--cc-serif, inherit);
  font-size: 15.75px;
  line-height: 1.62;
  letter-spacing: 0;
}
body:not(#_) .msg-content .ab-callout-body p { margin: 0 0 0.55em; }
body:not(#_) .msg-content .ab-callout-body :is(ul, ol) { margin: 0.2em 0 0.55em; padding-left: 1.35em; }
body:not(#_) .msg-content .ab-callout-body li { margin-bottom: 0.2em; }
body:not(#_) .msg-content .ab-callout-body > :last-child { margin-bottom: 0; }
body:not(#_) .msg-content .ab-callout-body .math-block { margin: 8px 0; }
/* Inside a list item the box keeps to the item's own measure. */
body:not(#_) .msg-content li > .ab-callout { margin: 0.5em 0 0.6em; }

@media (max-width: 480px) {
  .ab-callout { padding: 11px 13px 13px; }
  body:not(#_) .view-chat .msg.assistant .msg-content .ab-callout-body { font-size: 15.5px; }
}
@media (forced-colors: active) {
  .ab-callout { border: 1px solid CanvasText; }
  .ab-callout-icon { color: CanvasText; }
}

/* ── Numbered parts: "### 1. Short name" ───────────────────────────────── */
/* The number sits in a small round badge; its "." stays in the text for
   copy and screen readers but out of sight. From the second part on, a
   hairline above says "new request". */
.ab-part {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ab-part-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ab-accent) 16%, transparent);
  color: color-mix(in srgb, var(--ab-accent) 85%, var(--ab-ink));
  font-family: var(--ab-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transform: translateY(-1px);
}
.ab-part-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ab-part-name { flex: 1 1 auto; min-width: 0; }
.ab-part ~ .ab-part {
  margin-top: 1.7em;
  padding-top: 1.05em;
  border-top: 1px solid var(--ab-hair);
}

/* ── The reply's own rhythm (assistant replies in the chat view only) ──── */
/* Headings: more air above a section than below it, and a heading straight
   under another one sits close to it. */
body:not(#_) .view-chat .msg.assistant .msg-content > h2 { margin: 1.5em 0 0.5em; }
body:not(#_) .view-chat .msg.assistant .msg-content > h3 { margin: 1.35em 0 0.45em; }
body:not(#_) .view-chat .msg.assistant .msg-content > h4 { margin: 1.2em 0 0.3em; }
body:not(#_) .view-chat .msg.assistant .msg-content > :is(h1, h2, h3, h4):first-child { margin-top: 0; }
body:not(#_) .view-chat .msg.assistant .msg-content > :is(h1, h2, h3, h4) + :is(h2, h3, h4) { margin-top: 0.55em; }
/* Parts after the first: the section break the base rule above draws. */
body:not(#_) .view-chat .msg.assistant .msg-content > h3.ab-part ~ h3.ab-part { margin-top: 1.7em; }

/* Nested lists: tucked under their item, not a paragraph's gap away. */
body:not(#_) .view-chat .msg.assistant .msg-content li > :is(ul, ol) { margin: 0.3em 0 0.15em; }
body:not(#_) .view-chat .msg.assistant .msg-content li > p { margin: 0 0 0.35em; }
body:not(#_) .view-chat .msg.assistant .msg-content li > p:last-child { margin-bottom: 0; }

/* A rule between parts of an answer: a hairline with room on both sides. */
body:not(#_) .view-chat .msg.assistant .msg-content > hr {
  height: 0;
  margin: 1.6em 0;
  border: 0;
  border-top: 1px solid var(--border);
}
/* A "---" the model put between two parts is the part's rule: not two lines. */
body:not(#_) .view-chat .msg.assistant .msg-content > hr + h3.ab-part {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* A plain quote (no marker) keeps its look, minus the empty band its last
   paragraph's margin left under the text. */
body:not(#_) .view-chat .msg.assistant .msg-content blockquote { padding-top: 8px; padding-bottom: 8px; }
body:not(#_) .view-chat .msg.assistant .msg-content blockquote > :last-child { margin-bottom: 0; }

/* Inline code and links never push the column wider than the screen: they
   break where they must, and a broken code pill keeps its ends on each line. */
body:not(#_) .view-chat .msg.assistant .msg-content :not(pre) > code {
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body:not(#_) .view-chat .msg.assistant .msg-content a { overflow-wrap: anywhere; }
body:not(#_) .view-chat .msg.assistant .msg-content > :is(p, li, h1, h2, h3, h4) { overflow-wrap: break-word; }

/* Tables: as wide as their columns, up to the reply; wider ones scroll inside
   their own frame. The frame used to span the column while the rows stopped
   short, leaving an empty bordered strip on the right.
   That is only for a table that is its own frame (styles.css). A table in a
   block's frame or in the tables pass's frame (.ab-mdtable) fills that frame
   (width: 100% in sheet.css, chart.css, derive.css), or the frame would show
   the same strip. */
body:not(#_) .view-chat .msg.assistant .msg-content table {
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
body:not(#_) .view-chat .msg.assistant .msg-content table:not(.ab-block table, .ab-mdtable table) {
  width: max-content;
}
@media (max-width: 480px) {
  body:not(#_) .view-chat .msg.assistant .msg-content :is(th, td) { padding: 8px 10px; }
}