/* Mosaik's styles for Chat replies: the classes a model may put on its own
 * HTML, written into the Markdown (chat/pages.guidance, ui/safe_html).
 *
 * They are the answer's own typography, not boxes pasted into it: a
 * highlighted phrase, a coloured word, a tinted note, a row of key figures, a
 * timeline, bars, columns. Running text always keeps the reader's size: only
 * headlines, figures and pull quotes are set larger. Each is set in the
 * reader's size and spacing (em and --block-gap, as prose.css is), and every
 * colour is a theme token, so both themes get them right.
 *
 * safe_html writes each class as "s-" + its name, so nothing here can collide
 * with the application's own rules, and nothing a model writes can reach them.
 * A reply's own style sheet is scoped to that reply and outweighs these rules
 * there (safe_html.clean_sheet), so a model can restyle any of them.
 */

/* The short names the model is told about, for its inline styles. */
#view-chat .body {
  --sans: var(--font-sans);
  --serif: var(--display);
  --mono: var(--font-mono);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --c1: var(--chart-1);
  --c2: var(--chart-2);
  --c3: var(--chart-3);
  --c4: var(--chart-4);
  --c5: var(--chart-5);
  --c6: var(--chart-6);
  --success: var(--added);
  /* A card's or panel's fill, visible on either theme's page. */
  --panel: color-mix(in srgb, var(--text) 4.5%, transparent);
  --navy: var(--tile-navy);
  --oxblood: var(--tile-oxblood);
  --teal: var(--tile-teal);
  --gold: var(--tile-gold);
  --amber: var(--tile-amber);
  --cream: var(--tile-cream);
}

/* "Allow other fonts in answers" switched off (Settings › Styled answers;
   the class is looks.js's): an answer is set in the reader's own font,
   whatever face it asks for, a serif headline included. Code, maths and the
   code block's own chrome keep theirs. */
html.fixed-answer-fonts #view-chat .body { --serif: var(--font-sans); }
html.fixed-answer-fonts #view-chat .body :not(pre, code, kbd, samp, math, .s-mono, pre *, code *, math *, .code-block, .code-block *, .work, .work *){
  font-family: inherit !important;
}

/* ---- words ---------------------------------------------------------------- */
#view-chat .body .s-accent { color: var(--accent-ink); }
#view-chat .body .s-c1 { color: var(--chart-1); }
#view-chat .body .s-c2 { color: var(--chart-2); }
#view-chat .body .s-c3 { color: var(--chart-3); }
#view-chat .body .s-c4 { color: var(--chart-4); }
#view-chat .body .s-c5 { color: var(--chart-5); }
#view-chat .body .s-c6 { color: var(--chart-6); }
#view-chat .body .s-muted { color: var(--text2); }
#view-chat .body .s-faint { color: var(--text3); }
#view-chat .body :is(.s-hl, mark) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 0.22em;
  padding: 0.04em 0.22em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#view-chat .body .s-serif { font-family: var(--display); font-variation-settings: "SOFT" 30; }
#view-chat .body .s-sans { font-family: var(--font-sans); }
#view-chat .body .s-mono { font-family: var(--font-mono); font-size: 0.92em; }
#view-chat .body .s-caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8em; font-weight: 620; }
#view-chat .body .s-big { font-size: 1.22em; }
#view-chat .body .s-small { font-size: 0.86em; }
#view-chat .body .s-num { font-variant-numeric: tabular-nums; }
#view-chat .body .s-center { text-align: center; }
#view-chat .body .s-tag {
  display: inline-block;
  padding: 0.02em 0.55em;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.78em;
  font-weight: 620;
  line-height: 1.6;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* ---- openings and headlines ---------------------------------------------- */
/* An opening that sums up the answer: the reader's own size, like every
   paragraph, so a reply never starts in larger type than it goes on in. */
#view-chat .body .s-lead { color: var(--text); }
#view-chat .body .s-display {
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.85em;
  line-height: 1.14;
  letter-spacing: -0.014em;
  font-variation-settings: "SOFT" 40, "opsz" 72;
  border: 0;
  padding: 0;
  text-wrap: balance;
}
#view-chat .body :is(h3, h4).s-display { font-size: 1.4em; }
#view-chat .body .s-kicker {
  margin: 0 0 0.3em;
  font-size: 0.76em;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
#view-chat .body .s-kicker + :is(h1, h2, h3, h4) { margin-top: 0; }

/* ---- notes ------------------------------------------------------------------ */
#view-chat .body .s-callout {
  --tint: var(--accent);
  margin: 0 0 var(--block-gap);
  padding: 0.62em 1em 0.66em 1.05em;
  border-left: 3px solid var(--tint);
  border-radius: 0 0.6em 0.6em 0;
  background: color-mix(in srgb, var(--tint) 8%, transparent);
}
#view-chat .body .s-callout.s-tip { --tint: var(--chart-3); }
#view-chat .body .s-callout.s-warn { --tint: var(--danger); }
#view-chat .body .s-callout.s-note { --tint: var(--text3); }
#view-chat .body .s-callout > :first-child { margin-top: 0; }
#view-chat .body .s-callout > :last-child { margin-bottom: 0; }

#view-chat .body blockquote.s-pull {
  margin: 0.5em 0 calc(var(--block-gap) * 1.2);
  padding: 0.05em 0 0.05em 0.9em;
  border-left: 3px solid var(--accent);
  font-family: var(--display);
  font-size: 1.3em;
  line-height: 1.42;
  color: var(--text);
  font-variation-settings: "SOFT" 50;
}

#view-chat .body .s-formula {
  display: block;
  margin: 0.2em 0 var(--block-gap);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.32em;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ---- figures ------------------------------------------------------------------ */
#view-chat .body .s-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr));
  gap: 0.6em 1.6em;
  margin: 0.35em 0 calc(var(--block-gap) * 1.15);
}
#view-chat .body .s-stats > * {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.4;
  color: var(--text2);
}
/* A figure with a source is wrapped with its label in the claim's .cited span
   (chat.js, wrapCited), and still looks a figure. */
#view-chat .body :is(.s-stats > *, .s-figure) > :is(b, strong):first-child,
#view-chat .body :is(.s-stats > *, .s-figure) > .cited:first-child > :is(b, strong):first-child {
  display: block;
  margin-bottom: 0.1em;
  font-family: var(--display);
  font-size: 2.1em;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  font-variant-numeric: lining-nums;
}
#view-chat .body .s-stats > * > span,
#view-chat .body .s-stats > * > .cited > span { display: block; }
#view-chat .body .s-figure { color: var(--text2); }
#view-chat .body .s-figure > :is(b, strong):first-child,
#view-chat .body .s-figure > .cited:first-child > :is(b, strong):first-child { font-size: 2.6em; }

/* One grid for all the bars, so every label takes the widest one's room and
   the bars start on one line. */
#view-chat .body .s-bars {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(4em, 1fr) auto;
  gap: 0.45em 0.85em;
  margin: 0.3em 0 var(--block-gap);
  font-size: 0.92em;
}
#view-chat .body .s-bars > * {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  margin: 0;
}
#view-chat .body .s-bars > *::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 0.62em;
  border-radius: 0.31em;
  background:
    linear-gradient(90deg, var(--bar, var(--chart-1)) 0 var(--v, 0%), transparent 0) no-repeat,
    color-mix(in srgb, var(--text) 7%, transparent);
}
#view-chat .body .s-bars > * > :first-child { grid-column: 1; max-width: 16em; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-chat .body .s-bars > * > :is(b, strong) { grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A drawing the model wrote inline: as wide as the column, never wider. */
/* A reply's groups of steps (chat.js mountGroups) are not its drawings or folds. */
#view-chat .body svg:where(:not(.work, .work *)) { max-width: 100%; height: auto; overflow: visible; }
#view-chat .body svg:not([width]):where(:not(.work, .work *)) { width: 100%; }
#view-chat .body svg:where(:not(.work, .work *)) text { fill: currentColor; font-family: var(--font-sans); }
#view-chat .body figure { margin: 0 0 var(--block-gap); }
#view-chat .body figcaption { margin-top: 0.4em; font-size: 0.86em; color: var(--text2); }

/* ---- sequences ---------------------------------------------------------------- */
#view-chat .body ol.s-timeline {
  list-style: none;
  margin-left: 0.32em;
  padding-left: 0;
  border-left: 1.5px solid var(--border-strong);
}
#view-chat .body ol.s-timeline > li {
  position: relative;
  padding-left: 1.25em;
  margin-bottom: 0.62em;
}
#view-chat .body ol.s-timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-0.3em - 0.75px);
  top: calc(var(--line-height, 1.68) * 0.5em - 0.3em);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  background: var(--bg);
}
#view-chat .body ol.s-timeline > li > :is(b, strong):first-child {
  margin-right: 0.3em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

#view-chat .body ol.s-steps { list-style: none; padding-left: 0; counter-reset: s-step; }
#view-chat .body ol.s-steps > li {
  counter-increment: s-step;
  position: relative;
  min-height: 1.7em;
  padding-left: 2.25em;
  margin-bottom: 0.6em;
}
#view-chat .body ol.s-steps > li::before {
  content: counter(s-step);
  position: absolute;
  left: 0;
  top: calc((var(--line-height, 1.68) - 1.5) * 0.5em);
  width: 1.83em;
  height: 1.83em;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.82em;
  font-weight: 650;
  line-height: 1.83em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- lists with a meaning ------------------------------------------------------- */
#view-chat .body :is(ul.s-pros, ul.s-cons, ul.s-checks) { list-style: none; padding-left: 1.55em; }
#view-chat .body :is(ul.s-pros, ul.s-cons, ul.s-checks) > li { position: relative; }
#view-chat .body :is(ul.s-pros, ul.s-cons, ul.s-checks) > li::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: calc(var(--line-height, 1.68) * 0.5em - 0.46em);
  width: 0.92em;
  height: 0.92em;
  background: var(--chart-3);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
#view-chat .body :is(ul.s-pros, ul.s-checks) > li {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#view-chat .body ul.s-cons > li {
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#view-chat .body ul.s-cons > li::before { background: var(--chart-4); }
#view-chat .body ul.s-checks > li::before { background: var(--accent); }

#view-chat .body dl.s-defs {
  display: grid;
  grid-template-columns: minmax(auto, max-content) 1fr;
  gap: 0.4em 1.2em;
  margin: 0 0 var(--block-gap);
}
#view-chat .body dl.s-defs > dt { font-weight: 620; color: var(--text); }
#view-chat .body dl.s-defs > dd { margin: 0; color: var(--text2); }

/* ---- side by side -------------------------------------------------------------- */
#view-chat .body .s-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
  gap: 0.4em 2em;
  margin: 0 0 var(--block-gap);
}
#view-chat .body :is(.s-cols, .s-cards) > * { min-width: 0; }
#view-chat .body :is(.s-cols, .s-cards) > * > :first-child { margin-top: 0; }
#view-chat .body :is(.s-cols, .s-cards) > * > :last-child { margin-bottom: 0; }
#view-chat .body .s-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr));
  gap: 0.7em;
  margin: 0.2em 0 var(--block-gap);
}
#view-chat .body .s-cards > * {
  padding: 0.75em 0.95em;
  border-radius: 0.75em;
  background: var(--panel);
}
/* A card that opens on a bold run (safe_html marks it) has it as its title,
   on a line of its own: written straight on, it ran into the text after it.
   A break the model put after it adds no empty line. */
#view-chat .body .s-cards > * > .s-opens {
  display: block;
  margin-bottom: 0.3em;
}
#view-chat .body .s-cards > * > .s-opens + br { display: none; }

/* A part set apart (a summary, the short version): tinted, never the whole reply. */
#view-chat .body .s-panel {
  margin: 0.2em 0 var(--block-gap);
  padding: 0.8em 1.05em;
  border-radius: 0.8em;
  background: var(--panel);
}
#view-chat .body .s-panel > :first-child { margin-top: 0; }
#view-chat .body .s-panel > :last-child { margin-bottom: 0; }

/* A small square of colour beside a word: a key to a chart, a palette. */
#view-chat .body .s-swatch {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.4em;
  border-radius: 0.16em;
  background: var(--sw, var(--accent));
  vertical-align: -0.04em;
}

/* Choices to pick from, the recommended one marked. */
#view-chat .body :is(ol, ul).s-options { list-style: none; padding-left: 0; display: grid; gap: 0.3em; }
#view-chat .body .s-options > li {
  margin: 0;
  padding: 0.42em 0.7em;
  border-radius: 0.55em;
}
#view-chat .body .s-options > li.s-rec {
  background: color-mix(in srgb, var(--chart-3) 13%, transparent);
}
#view-chat .body .s-options > li.s-rec::after {
  content: "Recommended";
  margin-left: 0.6em;
  font-size: 0.72em;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chart-3);
}

#view-chat .body table.s-compare td:first-child { font-weight: 600; color: var(--text); }
#view-chat .body table.s-compare :is(td, th):not(:first-child) { text-align: center; }

#view-chat .body details:where(:not(.work, .work *)) { margin: 0 0 var(--block-gap); }
#view-chat .body details:where(:not(.work, .work *)) > summary { cursor: pointer; font-weight: 600; }
#view-chat .body details[open]:where(:not(.work, .work *)) > summary { margin-bottom: 0.4em; }