/* Rich content in a text (js/richhtml.js): the columns of a markdown table, and the frame an agent's
   HTML stands in. Loaded by the module itself. The table's own rules are in tokens.css (.rich-table). */

/* A column of numbers: right-aligned, figures of one width. */
.rich-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rich-table .mid { text-align: center; }
.rich-table-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* An HTML block: a frame without an edge of its own, as tall as its content, at most most of the screen. */
/* A block of its own formatting, so that beside something floated (the answers of a question) it takes the
   room that is left instead of dropping below it. */
.rh { position: relative; display: flow-root; max-width: 100%; min-width: 0; contain: paint; }
/* A frame without an origin is drawn by a process of its own, and the browser asks that process where a click
   lands. Scrolled out under the head of a conversation it would still take the clicks meant for the controls
   there (seen in Chromium, where a message has a transform), unless the block is a clip of its own: contain on
   the block, a clip path on the frame. Either is enough; both stand. */
.rh-frame { display: block; width: 100%; height: 96px; max-height: 70vh; border: 0; background: transparent; clip-path: inset(0); }
/* Beyond the cap it scrolls inside, and says so with a rule at its foot. */
.rh.is-capped .rh-frame { border-bottom: 1px solid var(--line-strong); }

/* "Open large": quiet, at the block's upper right; it stands when the block is cut or wider than its
   place, and comes on hover or focus otherwise. */
.rh-open {
  position: absolute; top: 0; right: 0; z-index: 1; min-height: 26px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--muted);
  font: 600 var(--t-xs)/1 var(--font); letter-spacing: .02em; white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity var(--d-fast) ease-out;
}
.rh:hover .rh-open, .rh-open:focus-visible, .rh.is-capped .rh-open, .rh.is-wide .rh-open { opacity: 1; pointer-events: auto; }
.rh-open:hover { color: var(--fg); border-color: var(--fg); }
/* Where it always stands it sits under the block, so it never covers a table's head. */
.rh.is-capped, .rh.is-wide { padding-bottom: 34px; }
.rh.is-capped .rh-open, .rh.is-wide .rh-open { top: auto; bottom: 0; }

/* The big view. */
/* The big view is a page of its own (large.html): a thin bar, and the frame fills the rest. */
.rh-page { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); color: var(--fg); font: 400 15px/1.5 var(--font); }
.rh-large-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.rh-large-name { font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rh-large-bar a { color: var(--muted); font-size: var(--t-sm); text-underline-offset: 3px; }
.rh-large-stage { flex: 1; min-height: 0; }
.rh-large-stage .rh-frame { height: 100%; max-height: none; }
.rh-large-stage p { margin: var(--s-6) var(--s-4); color: var(--muted); }
a.rh-open { text-decoration: none; display: inline-flex; align-items: center; }

/* Phone polish (docs/qa-phone-design.md): a table that is too wide scrolls sideways in its frame; its words stay
   whole (the text around it breaks anywhere, and a narrow column then stood one syllable per line). */
@media (max-width: 860px) {
  .rich-table th, .rich-table td { overflow-wrap: normal; word-break: normal; }
  .rh-open { min-height: 36px; }
  .rh.is-capped, .rh.is-wide { padding-bottom: 44px; }
}