/* Rendered Markdown, shared by both conversation documents.
 *
 * One Python renderer (ui/markdown_html) produces the HTML for Chat Mode and
 * for Code Mode, and until this file existed each page styled the result its
 * own way. Chat Mode set prose in em and in the reader's own density; Code
 * Mode set it in pixels, so a 14.5px h3 sat under 21px paragraphs and the
 * font-size slider could not reach a code block at all. Worse, half of Code
 * Mode's rules described markup the renderer does not emit — `pre > .scroll`,
 * `.code-head .copy` — so its code blocks wore an unstyled native button.
 *
 * An answer is an answer. It is set the same way wherever it is read.
 *
 * Everything here is relative: `em` against the reader's font size, and
 * `--block-gap` against the reader's density. Nothing in this file is a pixel
 * unless it is a hairline or a radius, and those come from the one scale in
 * styles/metrics.py.
 *
 * A reply that works in turns has groups of steps set between its paragraphs
 * (chat.js mountGroups), inside its body. They are not its prose, so every
 * rule here stops at their edge: `:where(:not(.work *))`, which adds nothing
 * to a rule's specificity and so changes no other rule's standing against it.
 */

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body > *:first-child{ margin-top: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body > *:last-child{ margin-bottom: 0; }

/* break-word, not anywhere: prose and table cells should break between words.
   Only code and URLs, which can exceed a line on their own, may break inside
   a word. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body{ overflow-wrap: break-word; }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body p:where(:not(.work *)){ margin: 0 0 var(--block-gap); }

/* Headings take more space above than below, so a section reads as a group
   rather than as a line that happens to be bold. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h1:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h2:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h3:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h4:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h5:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h6:where(:not(.work *)){
  margin: calc(var(--block-gap) * 1.9) 0 calc(var(--block-gap) * 0.8);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h1:where(:not(.work *)){ font-size: 1.5em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h2:where(:not(.work *)){ font-size: 1.29em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h3:where(:not(.work *)){ font-size: 1.13em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h4:where(:not(.work *)){ font-size: 1em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h5:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h6:where(:not(.work *)){ font-size: 0.93em; color: var(--text2); }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body h2:where(:not(.work *)){
  padding-bottom: 0.34em;
  border-bottom: var(--hairline) solid var(--border);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ul:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ol:where(:not(.work *)){ margin: 0 0 var(--block-gap); padding-left: 1.55em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li:where(:not(.work *)){ margin: 0 0 calc(var(--block-gap) * 0.34); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li:last-child:where(:not(.work *)){ margin-bottom: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li > ul:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li > ol:where(:not(.work *)){ margin: calc(var(--block-gap) * 0.34) 0 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li > p:where(:not(.work *)){ margin: 0 0 calc(var(--block-gap) * 0.34); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li > p:last-child:where(:not(.work *)){ margin-bottom: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ul li:where(:not(.work *))::marker{ color: var(--text3); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ol li:where(:not(.work *))::marker{ color: var(--text3); font-variant-numeric: tabular-nums; }

/* "- [ ] Glue up the top": the box stands where the bullet would, so tasks and
   plain items share one edge (ui/markdown_html._task_items). */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li.task-item:where(:not(.work *)){ list-style: none; position: relative; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .task-box:where(:not(.work *)){
  position: absolute;
  left: -1.42em;
  top: calc((var(--line-height, 1.68) - 0.98) * 0.5em);
  width: 0.98em;
  height: 0.98em;
  border: 1.5px solid var(--border-strong);
  border-radius: 0.28em;
  background: var(--bg);
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .task-box.done:where(:not(.work *)){ background: var(--accent); border-color: var(--accent); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .task-box.done:where(:not(.work *))::after{
  content: "";
  position: absolute;
  left: 0.29em;
  top: 0.1em;
  width: 0.24em;
  height: 0.48em;
  border: solid var(--accent-text);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li.task-item.done:where(:not(.work *)){ color: var(--text2); }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body blockquote:where(:not(.work *)){
  margin: 0 0 var(--block-gap);
  padding: 0.15em 0 0.15em 1.1em;
  border-left: 3px solid var(--border-strong);
  color: var(--text2);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body hr:where(:not(.work *)){
  border: 0;
  border-top: var(--hairline) solid var(--border);
  margin: calc(var(--block-gap) * 1.8) 0;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body a:where(:not(.work *)){
  color: var(--link);
  text-decoration: none;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--link) 35%, transparent);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body a:hover:where(:not(.work *)){ border-bottom-color: var(--link); }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body strong:where(:not(.work *)){ font-weight: 650; color: var(--text); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body em:where(:not(.work *)){ font-style: italic; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body del:where(:not(.work *)){ color: var(--text3); }
/* Words changed after the reader saw them (chat/tracked_edits.py): the new
   words wear a soft wash of the accent, and the words they replace are kept
   beside them, hidden, for the tip shown when the pointer rests on them
   (core.js editTip), until the edits are committed. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body del.mk-edit-old:where(:not(.work *)){ display: none; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ins.mk-edit-new:where(:not(.work *)){
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: help;
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ins.mk-edit-new:where(:not(.work *)):hover{
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body code:where(:not(.work *)){
  font-family: var(--font-mono);
  font-size: 0.895em;
  background: var(--inline-code-bg);
  padding: 0.12em 0.36em;
  border-radius: var(--radius-badge);
  overflow-wrap: anywhere;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body img:where(:not(.work *)){ max-width: 100%; border-radius: var(--radius-card); }

/* ---- Tables ----------------------------------------------------------- */
/* A table reads as rows: no box round it, its heads over a firmer line, a
   hairline under each row, and its own horizontal scroll so a wide one never
   stretches the reading column. Chrome.decorateBody adds the wrapper; the
   renderer emits a bare <table>. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .table-wrap{
  margin: 0 0 var(--block-gap);
  overflow-x: auto;
  /* Sideways only: scrollable downwards by a rounding pixel, it would take
     a run of wheel notches from the conversation (js/scroll.js guard). */
  overflow-y: hidden;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body table:where(:not(.work *)){
  border-collapse: collapse;
  width: 100%;
  font-size: 0.945em;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body thead th:where(:not(.work *)){
  color: var(--text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  padding: 0 16px 9px 0;
  border-bottom: var(--hairline) solid var(--border-strong);
}

/* A wide table goes on into its scroll card rather than being squeezed: nine
   columns in the reading width wrapped a cell over five lines and cut the
   last ones off at a word (live, 2026-10-14). */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body :is(thead th, tbody td):where(:not(.work *)){ min-width: 7em; }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body tbody td:where(:not(.work *)){
  padding: 10px 16px 10px 0;
  border-bottom: var(--hairline) solid var(--border);
  vertical-align: top;
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body :is(thead th, tbody td):last-child:where(:not(.work *)){ padding-right: 0; }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body tbody tr:last-child td:where(:not(.work *)){ border-bottom: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body td code:where(:not(.work *)){ background: var(--inline-code-bg); }

/* ---- Answer frames ---------------------------------------------------- */
/* A table asked for is drawn on Send and filled a cell at a time (js/chat.js
   buildFrame): a cell not written yet holds a still bar, and a label read
   from the words stays quiet until the model's own replaces it. A cell rises
   from a little faint as it is first written (opacity only; nothing moves
   or runs at rest). */
#view-chat .answer-frame .frame-hole{
  display: inline-block;
  width: 4.5em;
  max-width: 80%;
  height: 0.7em;
  border-radius: 999px;
  background: var(--border);
  vertical-align: middle;
}
#view-chat .answer-frame .frame-guess{ color: var(--text3); }
#view-chat .answer-frame .frame-lead:empty{ display: none; }
#view-chat .answer-frame :is(td, th).frame-in{ animation: frame-in 160ms var(--ease-out) both; }
@keyframes frame-in { from { opacity: 0.4; } to { opacity: 1; } }

/* ---- Code blocks ------------------------------------------------------ */
/* The markup is fixed by ui/markdown_html._render_fence: a .code-block holding
   a .code-head (language, copy button) and a pre.code-body. These selectors
   are that contract written down. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-block{
  margin: 0 0 var(--block-gap);
  border: 0;
  border-radius: 14px;
  background: var(--code-bg);
  overflow: hidden;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 0 18px;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-lang{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: var(--meta, 12px);
  font-weight: 500;
  color: color-mix(in srgb, var(--code-fg) 62%, transparent);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-copy{
  font: inherit;
  font-size: var(--meta, 12px);
  font-weight: 500;
  color: color-mix(in srgb, var(--code-fg) 55%, transparent);
  background: transparent;
  border: var(--hairline) solid transparent;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-copy:hover{ background: color-mix(in srgb, var(--code-fg) 9%, transparent); color: var(--code-fg); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-copy:active{ background: color-mix(in srgb, var(--code-fg) 14%, transparent); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-copy.copied{ color: var(--accent); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-copy:focus-visible{ outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-body{
  margin: 0;
  padding: 14px 18px;
  color: var(--code-fg);
  overflow-x: auto;
  overflow-y: hidden;
  font-family: var(--font-mono);
  /* The reader's code size (Settings › Appearance › Advanced), relative to
     their reading size: 0.875em unless they chose another. */
  font-size: var(--code-size, 0.875em);
  line-height: 1.58;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-body code{ background: none; padding: 0; border-radius: 0; font-size: inherit; }

/* Line numbers and wrapping, when the reader turns them on. The renderer puts
   each line in a .code-line; a number is a counter drawn before it in the
   block's left padding, so selecting the code never selects a number, and a
   wrapped line continues under its own text rather than under its number. */
html.look-code-lines :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-body{ padding-left: calc(18px + 3.2em); }
html.look-code-lines :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-body code{ counter-reset: code-line; }
html.look-code-lines :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-line::before{
  counter-increment: code-line;
  content: counter(code-line);
  display: inline-block;
  width: 2.4em;
  margin-left: -3.2em;
  margin-right: 0.8em;
  text-align: right;
  color: color-mix(in srgb, var(--code-fg) 34%, transparent);
  user-select: none;
}
html.look-code-wrap :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .code-body{ white-space: pre-wrap; overflow-wrap: anywhere; }

/* Maths: TeX a model wrote, drawn as MathML (ui/math_tex.py). A displayed
   formula is centred on a line of its own and scrolls sideways rather than
   pushing the column wider; the TeX stays on the wrapper for Copy LaTeX. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body math:where(:not(.work *)){ font-family: "Latin Modern Math", "Cambria Math", "STIX Two Math", math; font-size: 1.14em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-block:where(:not(.work *)),
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-display:where(:not(.work *)){
  display: block;
  margin: calc(var(--block-gap) * 0.9) 0;
  padding: 0.2em 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-display:where(:not(.work *)){ margin: calc(var(--block-gap) * 0.5) 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-block math:where(:not(.work *)){ font-size: 1.22em; }
/* Room above a radicand: with Latin Modern Math the radical sign hangs below
   the line and its bar sits on the digits, so a number under a root looks
   lifted. Raising the bar lifts the sign with it; the number stays on the
   baseline. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body :is(msqrt > mrow, mroot > :first-child):where(:not(.work *)){ padding-top: 0.12em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body mtd[columnalign="left"]:where(:not(.work *)){ text-align: left; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body mtd[columnalign="right"]:where(:not(.work *)){ text-align: right; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body menclose[notation="box"]:where(:not(.work *)){ padding: 0.15em 0.3em; border: var(--hairline) solid currentColor; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-raw:where(:not(.work *)){ white-space: pre-wrap; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .math-block.math-raw code:where(:not(.work *)){ display: inline-block; text-align: left; }

/* Ornaments (Settings › Appearance › Motion and details › Answer ornaments).
 * Small tile shapes where plain prose had a dot or a line: a tessera for a
 * bullet, three tiles for a rule, a tiled edge for a quote, and figures that
 * line up. None of it moves. Lists and quotes an answer
 * styles itself keep their own look, and the switch takes all of it away. A
 * block settling in (chat.js settleNew, dynamic.js) carries a style of the
 * app's own, its animation-delay, which an answer cannot write (ui/safe_html):
 * it keeps its ornaments, which every list but the first in a part had lost
 * (live, 2026-10-14). :where() keeps each rule's specificity as it was. */
html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ul:is(:not([style]), :where(.settle)[style^="animation-delay"]) > li:not(.task-item):not([style]):where(:not(.work *)){
  list-style: none;
  position: relative;
}
html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body ul:is(:not([style]), :where(.settle)[style^="animation-delay"]) > li:not(.task-item):not([style]):where(:not(.work *))::before{
  content: "";
  position: absolute;
  left: -1.02em;
  top: calc(var(--line-height, 1.68) * 0.5em - 0.17em);
  width: 0.34em;
  height: 0.34em;
  border-radius: 0.05em;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  transform: rotate(45deg);
}
html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body li ul:is(:not([style]), :where(.settle)[style^="animation-delay"]) > li:not(.task-item):not([style]):where(:not(.work *))::before{
  background: transparent;
  border: 0.08em solid color-mix(in srgb, var(--accent) 72%, transparent);
}

html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body hr:is(:not([style]), :where(.settle)[style^="animation-delay"]):where(:not(.work *)){
  border-top: 0;
  height: 0.34em;
  overflow: visible;
  position: relative;
}
html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body hr:is(:not([style]), :where(.settle)[style^="animation-delay"]):where(:not(.work *))::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.34em;
  height: 0.34em;
  margin-left: -0.17em;
  border-radius: 0.05em;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  transform: rotate(45deg);
  /* Rotated with the tile, so ±0.78em on both axes lands ±1.1em to each side. */
  box-shadow: 0.78em -0.78em 0 var(--border-strong), -0.78em 0.78em 0 var(--border-strong);
}

html:not(.no-ornaments) :is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body blockquote:is(:not([style]), :where(.settle)[style^="animation-delay"]):where(:not(.work *)){
  border-left: 0;
  padding-left: calc(1.1em + 3px);
  background: repeating-linear-gradient(to bottom, var(--border-strong) 0 0.62em, transparent 0.62em 0.8em) left top / 3px 100% no-repeat;
}

:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body tbody td:where(:not(.work *)){ font-variant-numeric: tabular-nums; }

/* Several companies' answers (chat/views.py): each in a box of its own, its
   head naming the company and the model, its words set as any answer's. */
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-boxes:where(:not(.work *)){
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  margin: 0 0 var(--block-gap);
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-box:where(:not(.work *)){
  position: relative;
  margin: 0 0 var(--block-gap);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-boxes > .view-box:where(:not(.work *)){ margin: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-head:where(:not(.work *)){
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.55em 1em;
  border-bottom: var(--hairline) solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--table-head);
  font-size: var(--chrome, 12.6px);
  line-height: 1.5;
}
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-company:where(:not(.work *)){ font-weight: 650; color: var(--text); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-model:where(:not(.work *)){ color: var(--text2); }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-body:where(:not(.work *)){ padding: 0.85em 1em; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-body > :first-child:where(:not(.work *)){ margin-top: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-body > :last-child:where(:not(.work *)){ margin-bottom: 0; }
:is(#view-chat, #view-agent, #quick-ask, #editor, #ask) .body .view-note:where(:not(.work *)){
  color: var(--text3);
  font-size: var(--chrome, 12.6px);
  font-weight: 500;
}