/* ─── AGENT MEDIA (1 Oct 2026) — pictures and review cards in the Project Agent chat ─────────────
   src/agentMarkdown.js (Copy pill, media grid) + src/AgentMedia.jsx (tiles, one card per target,
   the "Waiting for review" panel). Tokens only. Every tile, placeholder, caption and action row has
   a FIXED size, so a picture landing, a Good click or a Discard never moves anything (inv. #20). */

/* ── one-click Copy on every fenced block (Hugo: long Seedance prompts) ── */
.agent-md-codeblock { position: relative; }
.agent-md-codeblock .agent-md-pre { padding-right: 76px; }
.agent-md-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 60px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--fs-11);
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
.agent-md-copy:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent); }
.agent-md-copy .agent-md-copy-done { display: none; }
.agent-md-copy[data-copied] { color: var(--ok-deep); border-color: var(--ok-border); }
.agent-md-copy[data-copied] .agent-md-copy-idle { display: none; }
.agent-md-copy[data-copied] .agent-md-copy-done { display: inline; }

/* a page without the media card (fallback): the names, as chips */
.agent-md-media { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-md-media-ref {
  font-size: var(--fs-11-5);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
}

/* ── surfaces (v2, 1 Oct 2026 — Hugo: "i dont like the grey boxes") ──
   v1 painted the tiles, cards and the review panel with --ivory / --cream-2 washes: pale stone in Forest,
   a flat grey slab on the dark glass skins. They read the SEPARATION LADDER now (tokens.css; every skin
   family sets it): a card is one step lighter than the chat it sits in (--sep-card-fill), a tile one step
   lighter than its card (--sep-row-fill), and the review panel is the same panel as the chat list beside
   it. The buttons are the Agent page's own .agent-btn. */

/* ── the tile: one picture, at its OWN ratio ── */
.am-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  gap: 10px;
  margin-top: 8px;
  align-items: start;
}
.am-grid.is-one { grid-template-columns: 320px; }
.am-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-sm);
  background: var(--sep-row-fill);
  overflow: hidden;
}
/* the box takes the picture's ratio (inline aspect-ratio: its stored size, else the job's canvas), so the
   WHOLE picture shows (contain) and a picture landing in a slot never resizes it */
.am-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  cursor: zoom-in;
  overflow: hidden;
}
.am-thumb:disabled { cursor: default; }
.am-thumb img, .am-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.am-thumb-empty, .am-slot-t { font-size: var(--fs-11-5); color: var(--ink-muted); }
.am-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-02);
  background: color-mix(in srgb, var(--card-bg-solid) 86%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
}
.am-badge.is-good, .am-badge.is-frame { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.am-badge.is-archived { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.am-tile.is-archived .am-thumb img { opacity: 0.35; }
.am-cap, .am-sub {
  padding: 0 8px;
  height: 18px;
  line-height: 18px;
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-cap { margin-top: 5px; font-weight: var(--fw-semi); color: var(--ink); }
.am-sub { font-size: var(--fs-11); color: var(--ink-muted); }
.am-sub.is-err { color: var(--danger); }
.am-acts {
  display: flex;
  gap: 4px;
  height: 26px;
  padding: 3px 6px 6px;
  box-sizing: content-box;
  align-items: center;
}
/* .agent-btn gives the look; this only sizes it to share the row */
.am-act {
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
}
.am-act.is-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); font-weight: var(--fw-bold); }
.am-acts-none { font-size: var(--fs-11); color: var(--ink-muted); }
/* 2 Oct 2026 — the failed tile's fix link ("Top up", "Keys") shares the row with Resend: same box, same font */
.am-act.am-act-fix { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; overflow: hidden; }
.am-fixlink { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
/* 6 Oct 2026 — a failed tile says its plain line; "Details" (the whole box is the button) opens the provider's own words */
.am-slot-more { margin-top: 2px; font-size: var(--fs-10); font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 2px; opacity: 0.85; }
.am-err-plain { margin: 0 0 8px; font-weight: var(--fw-semi); }

/* a job that has not landed: the same box (its canvas), holding its state */
.am-slot { flex-direction: column; gap: 6px; cursor: default; }
.am-tile.is-slot.is-failed .am-slot-t { color: var(--danger); }

/* ── one card per target ── */
.am-cards { display: flex; flex-direction: column; gap: 10px; }
.am-cards-note { font-size: var(--fs-12); color: var(--ink-muted); }
.am-card {
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-md);
  background: var(--sep-card-fill);
  padding: 10px;
  transition: box-shadow var(--dur-1) ease;
}
.am-card.is-flash { box-shadow: 0 0 0 2px var(--leaf); }
.am-card-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-bottom: 8px; height: 20px; }
.am-card-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.am-card-sub { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-11-5); color: var(--ink-muted); white-space: nowrap; }
.am-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
/* a card in the chat is not inside a bubble: no grey bubble behind it, it takes the column */
.agent-msg--cards .agent-bub { max-width: 100%; width: 100%; background: transparent; border: 0; padding: 0; box-shadow: none; }

/* ── the right-hand panel: the same panel as the chat list ── */
.agent-body.agent-body--review { grid-template-columns: 200px minmax(0, 1fr) 280px; }
.am-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  overflow: hidden;
}
.am-panel-head {
  flex: 0 0 auto;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--card-border) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 34%, transparent);
}
.am-panel-n { font-size: var(--fs-12); color: var(--ink); }
.am-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
}
.am-panel-empty { padding: 16px 10px; font-size: var(--fs-12); line-height: 1.5; color: var(--sep-panel-ink-muted); }
.am-prow {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  flex: 0 0 auto;
  text-align: left;
  font: inherit;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-sm);
  background: var(--sep-card-fill);
  color: var(--ink);
  cursor: pointer;
}
.am-prow:hover { border-color: color-mix(in srgb, var(--leaf) 45%, transparent); background: var(--sep-row-fill-hover); }
.am-prow-t {
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-prow-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-items: start; }
.am-prow-strip img, .am-prow-slot {
  width: 100%;
  height: auto;
  aspect-ratio: var(--am-ar, 1.7778);
  object-fit: contain;
  border-radius: 3px;
  background: color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  display: block;
}
.am-prow-s { font-size: var(--fs-11); color: var(--sep-panel-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* glass: the chat list's own glass panel (skin-glass.css .agent-chatlist), hairlines from the skin's light */
body[data-skin-family="glass"] .am-panel { background: color-mix(in srgb, var(--card-bg-light-solid) 92%, transparent); border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--sk-dark) 35%, transparent); }
body[data-skin-family="glass"] .am-panel-head { background: color-mix(in srgb, var(--sk-light) 4%, transparent); border-bottom-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }
body[data-skin-family="glass"] :is(.am-card, .am-tile, .am-prow) { border-color: color-mix(in srgb, var(--sk-light) 10%, transparent); }
body[data-skin-family="glass"] .am-prow:hover { border-color: color-mix(in srgb, var(--leaf) 45%, transparent); }
body[data-skin-family="glass"] .am-badge { border-color: color-mix(in srgb, var(--sk-light) 14%, transparent); }
body[data-skin-family="glass"] .am-badge:is(.is-good, .is-frame) { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
body[data-skin-family="glass"] .am-badge.is-archived,
body[data-skin-family="glass"] .am-sub.is-err,
body[data-skin-family="glass"] .am-tile.is-slot.is-failed .am-slot-t { color: var(--danger-ink); }

/* ── the large view (AgentGenViewer): the Lightbox's backdrop, arrows and close button ── */
.lightbox-backdrop.am-viewer { cursor: default; padding: 24px 92px; }
.am-viewer-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
/* sized to the GENERATION's ratio and the screen; the reference is drawn in the same box (contain) */
.am-viewer-stage {
  position: relative;
  aspect-ratio: var(--am-ar, 1.7778);
  width: min(calc(100vw - 200px), calc((100vh - 140px) * var(--am-ar, 1.7778)));
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--shade-6) 70%, transparent);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--shade-6) 65%, transparent);
  /* the frame stays visible when a reference of another ratio sits inside it */
  outline: 1px solid color-mix(in srgb, var(--ink-cream-3) 14%, transparent);
  cursor: pointer;
  animation: lightbox-pop var(--dur-4) var(--ease-pop);
}
.am-viewer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}
.am-viewer-img.is-on { visibility: visible; }
.am-viewer-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-6) 70%, transparent);
  color: var(--ink-cream-3);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
}
.am-viewer-tag.is-ref { background: color-mix(in srgb, var(--leaf) 85%, transparent); color: var(--ink-on-accent); }
/* one fixed-height bar: what it is, the Generation | Reference switch, n / N, the review buttons */
.am-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg-light-solid);
  color: var(--ink);
  min-width: 0;
}
.am-viewer-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.am-viewer-title, .am-viewer-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-viewer-title { font-size: var(--fs-13); font-weight: var(--fw-bold); }
.am-viewer-sub { font-size: var(--fs-11-5); color: var(--sep-panel-ink-muted); }
.am-viewer-seg { margin-bottom: 0; flex: 0 0 auto; }
.am-viewer-seg .agent-seg-btn { min-width: 104px; }
.am-viewer-seg .agent-seg-btn:disabled { cursor: default; color: var(--disabled-ink); }
.am-viewer-key {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  font-size: var(--fs-10-5);
  line-height: 1.4;
}
.am-viewer-count { flex: 0 0 auto; width: 56px; text-align: center; font-size: var(--fs-12); color: var(--sep-panel-ink-muted); }
.am-acts--big { flex: 0 0 auto; height: 30px; padding: 0; gap: 6px; }
.am-acts--big .am-act { flex: 0 0 auto; width: 92px; height: 30px; font-size: var(--fs-11-5); }
.am-viewer-err { display: none; }
.am-viewer-err.is-on { display: block; position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r-sm); background: var(--card-bg-light-solid); color: var(--danger); font-size: var(--fs-12); }
body[data-skin-family="glass"] .am-viewer-bar { border-color: color-mix(in srgb, var(--sk-light) 12%, transparent); }
body[data-skin-family="glass"] .am-viewer-seg { background: color-mix(in srgb, var(--sk-light) 6%, transparent); }
body[data-skin-family="glass"] .am-viewer-err.is-on { color: var(--danger-ink); }

/* -- v3: a card's grid in a modal (AgentCardModal), opened from "Waiting for review" -- */
.lightbox-backdrop.am-modal-back { cursor: default; padding: 32px; }
.am-modal {
  display: flex;
  flex-direction: column;
  width: min(1640px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg-light-solid);
  color: var(--ink);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--shade-6) 60%, transparent);
  overflow: hidden;
  animation: lightbox-pop var(--dur-4) var(--ease-pop);
}
.am-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
}
.am-modal-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-15); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-modal-close { width: 32px; padding: 0; display: grid; place-items: center; }
.am-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }
.am-modal-body .am-card { scroll-margin: 14px; }
body[data-skin-family="glass"] .am-modal { border-color: color-mix(in srgb, var(--sk-light) 12%, transparent); }
body[data-skin-family="glass"] .am-modal-head { border-bottom-color: color-mix(in srgb, var(--sk-light) 8%, transparent); }

/* -- v4: the shot frame is GOLD, Good is --ok (Hugo: "nothing happens visually to say I have selected and promoted
   this one ... a gold border around the button and the frame too"). Borders are outlines / inset shadows: no box grows. -- */
.am-act { overflow: hidden; text-overflow: ellipsis; }
.am-act .am-viewer-key { margin-left: 5px; }
.am-act--frame.is-on, .am-act--frame.is-on:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--gold);
  font-weight: var(--fw-bold);
}
.am-act--good.is-on, .am-act--good.is-on:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 24%, transparent);
  box-shadow: inset 0 0 0 1px var(--ok);
  font-weight: var(--fw-bold);
}
.am-tile.is-good-on { outline: 2px solid var(--ok); outline-offset: -2px; }
.am-tile.is-frame-on { outline: 2px solid var(--gold); outline-offset: -2px; }
.am-tile.is-good-on .am-thumb::after,
.am-tile.is-frame-on .am-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px var(--ok); }
.am-tile.is-frame-on .am-thumb::after { box-shadow: inset 0 0 0 3px var(--gold); }
.am-badge.is-frame { color: var(--ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 34%, var(--card-bg-solid)); }
.am-viewer-stage.is-good-on { outline: 3px solid var(--ok); }
.am-viewer-stage.is-frame-on { outline: 3px solid var(--gold); }
body[data-skin-family="glass"] .am-badge.is-frame { border-color: var(--gold); }

/* -- v4: a failed job: its reason in the box (clamped, fixed box), the whole message on click, Resend -- */
button.am-slot { font: inherit; color: inherit; cursor: pointer; padding: 10px 14px; text-align: center; }
.am-slot-why {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-size: var(--fs-11);
  line-height: 1.35;
  color: var(--ink-muted);
  word-break: break-word;
}
.am-tile.is-slot.is-failed .am-slot-t { font-weight: var(--fw-bold); }
.am-err-modal { width: min(980px, calc(100vw - 64px)); }
.am-err-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--ink);
}
body[data-skin-family="glass"] .am-tile.is-slot.is-failed .am-slot-t { color: var(--danger-ink); }

@media (max-width: 1280px) {
  .agent-body.agent-body--review { grid-template-columns: 200px minmax(0, 1fr); }
  .agent-body--review .am-panel { display: none; }
}
@media (max-width: 900px) {
  .am-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .am-grid.is-one { grid-template-columns: minmax(0, 320px); }
  .lightbox-backdrop.am-viewer { padding: 16px; }
  .am-viewer-stage { width: min(calc(100vw - 32px), calc((100vh - 200px) * var(--am-ar, 1.7778))); }
  .am-viewer-bar { flex-wrap: wrap; height: auto; padding: 8px; }
}

/* -- 1 Oct 2026 — AUTO-CHECK (check_generations): a tick / cross chip on the picture (top right, opposite the
   state badge), the failed criteria in a fixed two-line row under the caption (every tile of a card has the row,
   checked or not, so a verdict landing never moves anything), Check / Check all in the card head and the batch
   bar, and every criterion with its reason in a fixed block under the large view's bar. -- */
.am-chk {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: 1;
  background: color-mix(in srgb, var(--card-bg-solid) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  color: var(--ink-muted);
}
.am-chk.is-pass { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.am-chk.is-fail { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.am-chkrow {
  padding: 0 8px;
  height: 30px;
  line-height: 15px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.am-chkrow.is-pass { color: var(--ok); }
.am-chkrow.is-fail { color: var(--danger); }
.am-card-head { align-items: center; }
.am-chk-line {
  flex: 0 1 auto;
  max-width: 340px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-chk-line.is-err { color: var(--danger); }
.am-chk-btn { flex: 0 0 auto; width: 78px; height: 20px; padding: 0 8px; font-size: var(--fs-11); font-weight: var(--fw-semi); }
/* 2 Oct 2026 — Mark reviewed / Reviewed ✓: ONE fixed width in both states (no layout shift) */
.am-rev-btn { flex: 0 0 auto; width: 104px; height: 20px; padding: 0 8px; font-size: var(--fs-11); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-rev-btn--big { width: 128px; height: auto; font-size: var(--fs-12); }
.am-rev-btn.is-on, .am-rev-btn.is-on:hover:not(:disabled) { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.am-rev-btn.is-err { color: var(--danger); }
body[data-skin-family="glass"] .am-rev-btn.is-err { color: var(--danger-ink); }
.am-cards-bar { display: flex; align-items: center; gap: 10px; height: 24px; min-width: 0; }
.am-cards-bar-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-viewer-main.has-checks .am-viewer-stage { width: min(calc(100vw - 200px), calc((100vh - 228px) * var(--am-ar, 1.7778))); }
.am-viewer-checks {
  height: 76px;
  overflow-y: auto;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg-light-solid);
  color: var(--ink);
  font-size: var(--fs-12);
  line-height: 1.45;
}
.am-vchk { display: grid; grid-template-columns: 16px minmax(0, max-content) minmax(0, 1fr); gap: 8px; align-items: baseline; }
.am-vchk-m { font-weight: var(--fw-bold); color: var(--ink-muted); }
.am-vchk.is-pass .am-vchk-m { color: var(--ok); }
.am-vchk.is-fail .am-vchk-m, .am-vchk.is-fail .am-vchk-c { color: var(--danger); }
.am-vchk-c { font-weight: var(--fw-semi); }
.am-vchk-r { color: var(--sep-panel-ink-muted); }
.am-vchk.is-none { display: block; color: var(--sep-panel-ink-muted); }
.agent-spend-redo { white-space: normal; }
.agent-spend-redo-row { padding-left: 12px; color: var(--ink-muted); }
body[data-skin-family="glass"] .am-viewer-checks { border-color: color-mix(in srgb, var(--sk-light) 12%, transparent); }
body[data-skin-family="glass"] :is(.am-chk.is-fail, .am-chkrow.is-fail, .am-chk-line.is-err, .am-vchk.is-fail .am-vchk-m, .am-vchk.is-fail .am-vchk-c) { color: var(--danger-ink); }