/* styles/phone-agent.css — THE PHONE AGENT PAGE (6 Oct 2026, phone page group 1): src/PhoneAgent.jsx, from Hugo's
   mockups 11 (Agent: Chat and Review) and 23 (the Agent review card window). Built on the phone kit
   (styles/phone-kit.css, loaded first, docs/phone-kit.md): phone tier only (every rule under body[data-ui-tier="s"],
   scoped to .pag-* or to the page via :has(.pag-page)), skin tokens only, nothing past the right edge.
   The chat itself is the desktop's AgentChat (src/AgentPage.jsx) and its picture cards (src/AgentMedia.jsx) - their
   classes are restyled HERE, inside .pag-page only, so the desktop never changes.

   THE MOCKUPS, MEASURED (6 Oct 2026, the fair bench: a copy of the live data, the project's skin + photo worn,
   412 x 915 at DPR 3.5; every size below is the mockup's own at 412 CSS px, ours / mockup within 0.95-1.05):
   - the band is ONE small project chip (154.8 x 18.8); under it the page's own PROJECT / AGENT (Bebas 38) / the line
     "Ask for what you want ...", straight on the photo; then ONE slot (y 141, ~33 tall) - the chat bar (Chats | the
     open chat | + New chat | Instructions) in Chat, the Chat | Review switch in Review - so nothing below moves;
   - from ~180px down the page is the dark page (the shell's veil, L* ~9); cards are slate glass a step lighter
     (L* ~15) with a cool 1px rim; controls a step lighter again (L* ~19) with a lit hairline; the primary actions
     are amber (solid OpenAI pill + count, bronze glass New chat / send, a 2px amber rim on the active Review tab);
   - a prompt is a card of three lines with Copy and "Show full prompt"; a picture is its own card: the shot left,
     "model · version" right, a wide picture (3.2:1), Good | Shot frame | Discard (Discard red, a shot frame green);
   - the composer is one dock right on the bottom bar: OpenAI | Gemini | the model ▾ | today's spend over its bar,
     then + | the message box (two quiet lines) | send;
   - the review card (23) is ONE navy window: its head (the title + ✕, [Grid | Full image] Show in chat · Mark
     reviewed, the summary + Check) stays put while the pictures scroll under it; the first picture sits inside the
     window, every other one is its own card 2.8px below; Good green, Shot frame neutral (amber once it IS the shot
     frame: a 2.7px amber rim round the whole card), Discard red.
   Small controls keep a 40px TAP area: the visual box is the padding box, a transparent top / bottom border makes up
   the 40px and an equal negative margin gives the space back; the corner is elliptical (R / R + border) so the
   visible corner is R. Corners are the phone's tight scale (--pk-radius-*), tighter than the mockups by design. */

/* ════════ THE PALETTE (tokens only; the glass family's dark material, measured) ════════ */
body[data-ui-tier="s"] .pag-page,
body[data-ui-tier="s"] .pag-cv {
  --pag-deep: var(--card-bg-solid);                                                         /* (glass: the dark page) */
  --pag-card: var(--card-bg-solid);                                                         /* L* ~15: cards, rows, dock */
  --pag-card-rim: color-mix(in srgb, var(--ink) 14%, transparent);                          /* the cool 1px rim */
  --pag-ctl: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));                       /* L* ~19: a button */
  --pag-ctl-rim: color-mix(in srgb, var(--ink) 30%, transparent);                           /* its lit hairline */
  --pag-txt: color-mix(in srgb, var(--ink) 88%, var(--card-bg-solid));                      /* body text on a card */
  --pag-txt-2: var(--ink-muted);                                                             /* secondary */
  --pag-amber: var(--accent);
  --pag-amber-hi: color-mix(in srgb, var(--accent) 40%, var(--warn));                       /* the solid pill's lit top */
  --pag-amber-solid: color-mix(in srgb, var(--accent) 62%, var(--warn));                    /* the solid pill */
  --pag-amber-ink: color-mix(in srgb, var(--black) 88%, var(--accent));                     /* dark text on amber */
  --pag-bronze: color-mix(in srgb, var(--accent) 24%, var(--pag-deep));                           /* bronze glass (New chat, send) */
  --pag-bronze-rim: color-mix(in srgb, var(--accent) 88%, var(--black));
  --pag-gold-rim: color-mix(in srgb, var(--gold-5) 80%, var(--black));                      /* the open chat's rim */
  --pag-tag: color-mix(in srgb, var(--sk-a4, var(--accent)) 44%, var(--pag-deep));                /* INTAKE */
  --pag-red: var(--danger);
  --pag-red-rim: color-mix(in srgb, var(--danger) 72%, var(--black));
  --pag-wine: color-mix(in srgb, var(--danger) 8%, var(--card-bg-solid));
  --pag-green: var(--ok);
  --pag-green-rim: color-mix(in srgb, var(--ok) 82%, var(--black));
  --pag-green-fill: color-mix(in srgb, var(--ok) 26%, var(--pag-deep));
  --pag-halo: 0 1px 2px color-mix(in srgb, var(--black) 60%, transparent), 0 0 8px color-mix(in srgb, var(--black) 35%, transparent);
}

body[data-ui-tier="s"][data-skin-family="glass"] .pag-page,
body[data-ui-tier="s"][data-skin-family="glass"] .pag-cv { --pag-deep: var(--bg); }

/* ════════ THE MATERIAL UNDER THE SHELL (7 Oct 2026) ════════
   The header, the project band, the bottom bar and the photo's framing are the shell's (styles/phone-shell.css, the
   same on every page). Under the band (glass family) the page turns into the mockup's deep navy page: a short warm
   ramp, then flat (L* ~9), the photo's bokeh still glowing faintly through on the right edge and at the bottom (11);
   the review card (23) sits on the full dark page. The picture itself is never changed. */
body[data-ui-tier="s"] .main-content:has(> .pag-page) { box-shadow: none; }   /* the desktop panel's lit edge: no mockup has it */
/* (the band zone) the photo vivid behind the header and the title, then darkening towards the band's foot, as the
   mockup darkens it under its title; the page goes on from there (the two veils compound: 1 - .38 x .42 = .84) */
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pk-page.pag-page:not(.is-card)) {
  background-image: linear-gradient(to bottom, transparent 0, transparent 66px, color-mix(in srgb, var(--shl-veil) 30%, transparent) 96px, color-mix(in srgb, var(--shl-veil) 62%, transparent) 128px, color-mix(in srgb, var(--shl-veil) 62%, transparent) 100%);
}
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page.pag-page {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--shl-veil) 21%, transparent) 0, color-mix(in srgb, var(--shl-veil) 47%, transparent) 24px,
    color-mix(in srgb, var(--shl-veil) 58%, transparent) 60px, color-mix(in srgb, var(--shl-veil) 58%, transparent) calc(100% - 260px), color-mix(in srgb, var(--shl-veil) 5%, transparent) 100%);
  background-repeat: no-repeat;
}
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page.pag-page.is-card {
  --pag-night: color-mix(in srgb, var(--shl-veil) 50%, var(--black));   /* mockup 23: the page is near-black (L* 3) */
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--pag-night) 60%, transparent) 0, var(--pag-night) 26px, var(--pag-night) 100%);
}

/* ════════ THE PAGE ════════ */
body[data-ui-tier="s"] .main-content > .pk-page.pag-page { gap: 0; padding: 0; overflow: hidden; }
body[data-ui-tier="s"][data-skin-family="glass"] .main-content > .pk-page.pag-page { background-color: transparent; }
body[data-ui-tier="s"] .pag-head { flex: 0 0 auto; padding: 0 16.8px; min-width: 0; }
body[data-ui-tier="s"] .pag-lede {
  margin: -0.6px 0 0; font-family: var(--font-body); font-size: 9.9px; font-weight: 400; line-height: 13px; letter-spacing: -0.015em; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"][data-skin-family="glass"] .pag-lede { color: color-mix(in srgb, var(--ink-cream-7) 86%, transparent); text-shadow: var(--pag-halo); }
body[data-ui-tier="s"] .pag-status { flex: 0 0 auto; padding: 4px 16px 0; font-size: 10px; color: var(--danger); }

/* ── THE SLOT (y 141, the same height in both states) ── */
body[data-ui-tier="s"] .pag-bar,
body[data-ui-tier="s"] .pag-switch { flex: 0 0 auto; height: 35px; margin-top: 11.4px; min-width: 0; }
/* the chat bar: Chats ▾ | the open chat | + New chat | Instructions · N documents */
body[data-ui-tier="s"] .pag-bar { display: flex; align-items: center; gap: 7.2px; padding: 0 14.2px 0 14.8px; }
body[data-ui-tier="s"] .pag-bbtn {
  flex: 0 1 auto; min-width: 0; height: 41px; margin: -5px 0; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; white-space: nowrap;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px);
  background-color: color-mix(in srgb, var(--pag-card) 86%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: color-mix(in srgb, var(--ink) 88%, transparent); font-family: var(--font-body); font-size: 9px; font-weight: var(--fw-semi); line-height: 1; letter-spacing: -0.02em;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pag-bbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-bbtn svg { flex: 0 0 auto; width: 10px; height: 10px; }
body[data-ui-tier="s"] .pag-bchats { flex-basis: 56.5px; height: 41px; border-width: 4px 0; margin: -4px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); }
body[data-ui-tier="s"] .pag-bcur {
  flex: 0 1 112.4px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 6.7px;
  height: 41px; border-width: 3px 0; margin: -3px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 3px);
  background-color: color-mix(in srgb, var(--pag-card) 92%, transparent); box-shadow: inset 0 0 0 1.5px var(--pag-gold-rim);
}
body[data-ui-tier="s"] .pag-bcur-t { max-width: 100%; font-size: 9px; font-weight: var(--fw-semi); line-height: 11px; color: var(--pag-txt); overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-bcur-m { display: flex; align-items: center; gap: 6px; min-width: 0; }
body[data-ui-tier="s"] .pag-tag {
  flex: 0 0 auto; height: 12.8px; padding: 0 3.5px; display: inline-flex; align-items: center; border-radius: var(--pk-radius-small);
  background: var(--pag-tag); color: var(--ink); font-size: 8px; font-weight: var(--fw-bold); letter-spacing: var(--track-02); text-transform: uppercase; line-height: 1;
}
body[data-ui-tier="s"] .pag-bcur-d { font-size: 8.5px; font-weight: 400; color: var(--pag-txt-2); white-space: nowrap; }
body[data-ui-tier="s"] .pag-bnew {
  flex-basis: 75.4px; background-color: color-mix(in srgb, var(--accent) 31%, var(--pag-deep)); box-shadow: inset 0 0 0 1.5px var(--pag-bronze-rim);
}
body[data-ui-tier="s"] .pag-bnew { gap: 3px; font-size: 9.6px; letter-spacing: -0.01em; }
body[data-ui-tier="s"] .pag-bnew svg { color: var(--ink); width: 6.6px; height: 6.6px; }
body[data-ui-tier="s"] .pag-bkb { flex-basis: 117.1px; padding: 0 4px; font-size: 8.15px; font-weight: var(--fw-med); background-color: color-mix(in srgb, var(--pag-ctl) 72%, transparent); }
body[data-ui-tier="s"] .pag-bbtn:disabled { opacity: 0.55; cursor: default; }
/* the Chat | Review switch: two abutting segments, no outer track */
body[data-ui-tier="s"] .pag-switch { display: flex; align-items: flex-start; padding: 0 15.4px 0 16.2px; }
body[data-ui-tier="s"] .pag-sw {
  flex: 1 1 0; min-width: 0; height: 41.6px; margin: -6.4px 0 0; padding: 0 8px; cursor: pointer;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--pag-card) 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  color: color-mix(in srgb, var(--ink) 90%, transparent); font-family: var(--font-body); font-size: 9.6px; font-weight: var(--fw-semi); letter-spacing: -0.02em;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pag-sw.is-chat { flex-basis: 192.5px; border-radius: var(--pk-radius-control) 0 0 var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px) 0 0 calc(var(--pk-radius-control) + 5px); }
body[data-ui-tier="s"] .pag-sw.is-review { flex-basis: 187.8px; border-radius: 0 var(--pk-radius-control) var(--pk-radius-control) 0 / 0 calc(var(--pk-radius-control) + 5px) calc(var(--pk-radius-control) + 5px) 0; }
body[data-ui-tier="s"] .pag-sw.is-on {
  background-color: color-mix(in srgb, var(--accent) 30%, var(--pag-deep)); color: var(--ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, var(--warn)), 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ════════ THE CONVERSATION (the desktop's AgentChat, restyled) ════════
   Mockup 11 is a column of cards on the dark page: a PROMPT card (three lines, Copy, "Show full prompt"), a RESULT card
   (the shot, "model · version", the wide picture, Good | Shot frame | Discard), 4-5px apart. An agent reply that holds
   prompts or pictures is laid out as exactly those cards (its words sit on the page between them); a reply of words only
   is one card; your own messages are a quiet slate card on the right (the mockup draws none: no warm fill). The list
   fades out under the chat bar and into the composer, so no card is ever cut by a hard edge. */
body[data-ui-tier="s"] .pag-chatwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; margin-top: 2px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pag-chatwrap .agent-main {
  position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-msgs {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4.6px; padding: 9px 10.1px 6px 11.4px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--black) 12px, var(--black) calc(100% - 7px), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--black) 12px, var(--black) calc(100% - 7px), transparent);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-msg { margin: 0; max-width: 100%; }
body[data-ui-tier="s"] .pag-chatwrap .agent-bub {
  max-width: 100%; padding: 7.4px 11.5px 8px; border-radius: var(--pk-radius-card);
  font-family: var(--font-body); font-size: 10px; line-height: 13.1px; color: var(--pag-txt);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-msg--assistant .agent-bub {
  width: 100%; box-sizing: border-box; background: var(--pag-card); border: 1px solid var(--pag-card-rim);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-msg--user { display: flex; justify-content: flex-end; }
body[data-ui-tier="s"] .pag-chatwrap .agent-msg--user .agent-bub {
  max-width: 86%; background: color-mix(in srgb, var(--ink) 5%, var(--pag-card)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--pag-card-rim)); color: var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-md p { margin: 0 0 6px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-md p:last-child { margin-bottom: 0; }
body[data-ui-tier="s"] .pag-chatwrap .agent-md ul,
body[data-ui-tier="s"] .pag-chatwrap .agent-md ol { margin: 0 0 6px; padding-left: 16px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-md h1,
body[data-ui-tier="s"] .pag-chatwrap .agent-md h2,
body[data-ui-tier="s"] .pag-chatwrap .agent-md h3,
body[data-ui-tier="s"] .pag-chatwrap .agent-md .agent-md-h {
  margin: 2px 0 4px; font-family: var(--font-body); font-size: 11px; line-height: 14px; font-weight: var(--fw-semi); letter-spacing: 0; text-transform: none; color: var(--ink);
}
/* the per-message bill line (the spend is the composer's "Today $0 of $20"); what the agent did stays */
body[data-ui-tier="s"] .pag-chatwrap .agent-costline { display: none; }
body[data-ui-tier="s"] .pag-chatwrap .agent-didline { margin-top: 5px; font-size: 8.5px; line-height: 11px; color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-chatwrap .agent-msg--assistant .agent-bub img { max-width: 100%; border-radius: var(--pk-radius-small); }
/* a reply holding prompts or pictures: no bubble - its prompts and pictures are the cards, its words sit on the page */
body[data-ui-tier="s"] .pag-chatwrap .agent-msg--assistant .agent-bub:has(.agent-md-codeblock, .am-grid) {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-bub:has(.agent-md-codeblock, .am-grid) > .agent-md { display: flex; flex-direction: column; gap: 4.6px; min-width: 0; }
body[data-ui-tier="s"] .pag-chatwrap .agent-bub:has(.agent-md-codeblock, .am-grid) > .agent-md > :is(p, ul, ol, blockquote, table, h1, h2, h3, .agent-md-h) { margin: 0; padding: 2px 11.5px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-bub:has(.agent-md-codeblock, .am-grid) > :is(.agent-costline, .agent-didline) { padding: 0 11.5px; }
/* a picture's own heading repeats its name (the card carries it) */
body[data-ui-tier="s"] .pag-chatwrap .agent-md .agent-md-h:has(+ .am-grid) { display: none; }
/* a PROMPT card: three lines, Copy at its top right, "Show full prompt ▾" under it; a tap unfolds it */
body[data-ui-tier="s"] .pag-page .agent-md-codeblock {
  position: relative; margin: 0; padding: 6.4px 115px 7px 10.5px; cursor: pointer; box-sizing: border-box;
  border: 1px solid var(--pag-card-rim); border-radius: var(--pk-radius-card); background: var(--pag-card);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .pag-page .agent-md-pre {
  margin: 0; padding: 0; max-height: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; border: 0;
  font-family: var(--font-body); font-size: 9.5px; line-height: 13.1px; letter-spacing: 0.025em; color: color-mix(in srgb, var(--ink-muted) 80%, var(--ink));   /* mockup 11: #cfd5da */
}
body[data-ui-tier="s"] .pag-page .agent-md-pre code { font-family: inherit; font-size: inherit; background: transparent; padding: 0; color: inherit; }   /* (the desktop paints code in the full ink) */
body[data-ui-tier="s"] .pag-page .agent-md-codeblock:not([data-pag-open]) .agent-md-pre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
body[data-ui-tier="s"] .pag-page .agent-md-codeblock::after {
  content: "Show full prompt"; display: block; margin-top: 5.4px; height: 11px;
  font-family: var(--font-body); font-size: 8.9px; font-weight: var(--fw-med); line-height: 11px; letter-spacing: 0.025em; color: var(--pag-txt-2);
}
body[data-ui-tier="s"] .pag-page .agent-md-codeblock[data-pag-open]::after { content: "Show less"; }
/* its chevron, 9px after the words (the words are fixed, so is where they end): two border edges of a 4px square turned
   45deg - drawn at the screen's own pixels (a 6 x 3.3 mask came out 2.9 or 4.0 tall, never the mockup's 3.7) */
body[data-ui-tier="s"] .pag-page .agent-md-codeblock::before {
  content: ""; position: absolute; left: 95.2px; bottom: 10.8px; width: 4.03px; height: 4.03px; box-sizing: border-box;
  border: 0 solid var(--pag-txt-2); border-right-width: 1.1px; border-bottom-width: 1.1px; transform: rotate(45deg);
}
body[data-ui-tier="s"] .pag-page .agent-md-codeblock[data-pag-open]::before { left: 65.5px; bottom: 8.8px; transform: rotate(225deg); }
body[data-ui-tier="s"] .pag-page .agent-md-copy {
  position: absolute; top: -4.3px; right: 7.8px; width: 49.1px; min-width: 0; height: 41.5px; min-height: 0; box-sizing: border-box; padding: 0; margin: 0; cursor: pointer; opacity: 1;
  border: 11px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 11px);
  background-color: var(--pag-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 9px; font-weight: var(--fw-med); line-height: 1;
}
/* the RESULT cards: the generation cards (AgentGenCards) and the pictures the agent named (AgentMediaGrid) - each picture
   its own card: the shot, "model · version", the wide picture, Good | Shot frame | Discard. A generation card's head
   (summary, Check, Mark reviewed) lives in the review card (tap the picture). */
body[data-ui-tier="s"] .pag-page .agent-msg--cards .agent-bub { width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .pag-page .am-cards { display: flex; flex-direction: column; align-items: stretch; gap: 4.6px; margin: 0; }
body[data-ui-tier="s"] .pag-page .am-cards-bar,
body[data-ui-tier="s"] .pag-page .am-card-head { display: none; }
body[data-ui-tier="s"] .pag-page .am-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-ui-tier="s"] .pag-page .am-card-row,
body[data-ui-tier="s"] .pag-page .am-grid { display: flex; flex-direction: column; align-items: stretch; gap: 4.6px; margin: 0; padding: 0; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t m" "p p" "c c" "a a";
  column-gap: 8px; min-width: 0; margin: 0; padding: 5.2px 8.8px 7.3px; box-sizing: border-box;
  border: 1px solid var(--pag-card-rim); border-radius: var(--pk-radius-card); background: color-mix(in srgb, var(--pag-card) 50%, var(--pag-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); outline: 0;
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile::before {
  content: attr(data-pag-t); grid-area: t; min-width: 0; padding-left: 2.7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semi); line-height: 13px; color: var(--ink);
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile::after {
  content: attr(data-pag-m); grid-area: m; justify-self: end; padding-right: 1.6px; white-space: nowrap;
  font-family: var(--font-body); font-size: 8.6px; font-weight: 400; line-height: 13px; color: var(--pag-txt-2);
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-cap,
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-sub:not(.is-err),
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-badge { display: none; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-sub.is-err { grid-area: c; height: auto; padding: 4px 0 0; font-size: 9.5px; line-height: 12px; color: var(--danger); white-space: normal; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-thumb {
  grid-area: p; display: block; width: 100%; height: 115.1px; aspect-ratio: auto !important; max-height: none; margin: 3.9px 0 0; padding: 0; overflow: hidden; position: relative;
  border: 0; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--black) 40%, var(--card-bg-solid)); cursor: pointer;
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-thumb > img,
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-chk { top: 6px; right: 6px; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-chkrow { grid-area: c; height: auto; padding: 4px 0 0; font-size: 9px; line-height: 11px; color: var(--pag-txt-2); white-space: normal; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-acts {
  grid-area: a; display: grid; grid-template-columns: minmax(0, 117.1fr) minmax(0, 122.5fr) minmax(0, 117.1fr); gap: 8.4px; height: auto; margin: 6.7px 0 0; padding: 0 0.4px;
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-acts-none { grid-column: 1 / -1; font-size: 9px; line-height: 12px; color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-act {
  min-width: 0; height: 41.9px; min-height: 0; margin: -9px 0; padding: 0 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 9px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px);
  background-color: var(--pag-ctl); box-shadow: inset 0 0 0 1px var(--pag-ctl-rim); color: var(--ink);
  font-family: var(--font-body); font-size: 8.9px; font-weight: var(--fw-semi); line-height: 1; letter-spacing: 0;
}
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-act.agent-btn--danger { background-color: color-mix(in srgb, var(--danger) 14%, var(--card-bg-solid)); box-shadow: inset 0 0 0 1.5px var(--pag-red-rim); color: var(--pag-red); }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-act--frame.is-on { background-color: var(--pag-green-fill); box-shadow: inset 0 0 0 1.5px var(--pag-green-rim); color: var(--ink); }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-act--good.is-on { background-color: var(--pag-green-fill); box-shadow: inset 0 0 0 1px var(--pag-green-rim); color: var(--ink); }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile .am-act:disabled { opacity: 0.5; cursor: default; }
body[data-ui-tier="s"] .pag-page .am-card .am-tile.is-slot .am-thumb { display: grid; place-items: center; font-size: 10px; color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-page .am-card .am-tile.is-slot .am-cap { display: none; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-chkrow:not(.is-pass):not(.is-fail):not(.is-unclear) { display: none; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile.is-frame-on .am-thumb,
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-tile.is-good-on .am-thumb { outline: 0; box-shadow: none; }
body[data-ui-tier="s"] .pag-page :is(.am-card, .am-grid) .am-thumb::after { box-shadow: none; }
body[data-ui-tier="s"] .pag-page .am-card.is-flash .am-tile { box-shadow: inset 0 0 0 2px var(--accent); }
/* the plan / stop / undo rows the agent may add */
body[data-ui-tier="s"] .pag-page .agent-undo-row button,
body[data-ui-tier="s"] .pag-page .agent-stopcard button,
body[data-ui-tier="s"] .pag-page .agent-plan-acts button { min-height: 32px; font-size: 10px; }
/* the thinking line + Stop: floats over the end of the conversation (nothing below moves) */
body[data-ui-tier="s"] .pag-chatwrap .agent-thinking {
  position: absolute; left: 12px; right: 12px; bottom: 75px; z-index: 2; min-height: 0; height: auto; padding: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--pag-txt-2); text-shadow: var(--pag-halo);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-thinking > * { pointer-events: auto; }
body[data-ui-tier="s"] .pag-chatwrap .agent-stop { min-height: 28px; padding: 0 10px; font-size: 10px; }

/* ── THE COMPOSER DOCK (on the bottom bar): OpenAI | Gemini | model ▾ | Today $0 of $20, then + | message | send ── */
body[data-ui-tier="s"] .pag-chatwrap .agent-composer {
  position: relative; flex: 0 0 auto; display: block; height: 69.3px; margin: 0 10.1px; padding: 0; box-sizing: border-box; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-bottom-width: 0;
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: color-mix(in srgb, var(--pag-card) 96%, var(--black));
  box-shadow: 0 -6px 14px color-mix(in srgb, var(--black) 30%, transparent);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-composer > .agent-seg:not(.agent-seg--model) {
  position: absolute; left: 3px; top: 3px; display: flex; gap: 0.8px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-seg-btn {
  width: 52px; height: 41.5px; min-height: 0; margin: -10px 0; padding: 0; cursor: pointer;
  border: 10px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 10px);
  background-color: color-mix(in srgb, var(--ink) 1.5%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 9px; font-weight: var(--fw-semi); line-height: 1;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-seg-btn.is-on {
  background-image: linear-gradient(to bottom, var(--pag-amber-hi), var(--pag-amber-solid)); background-color: var(--pag-amber-solid);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, var(--white)); color: var(--pag-amber-ink); font-weight: var(--fw-bold);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-seg--model,
body[data-ui-tier="s"] .pag-chatwrap .agent-siwc { display: none; }
body[data-ui-tier="s"] .pag-chatwrap .agent-attach {
  position: absolute; left: -1px; right: -1px; bottom: 100%; z-index: 2; padding: 6px 8px; min-width: 0;
  border: 1px solid var(--pag-card-rim); border-bottom: 0; border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0; background: var(--pag-card);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-composer-row {
  position: absolute; left: 36.7px; right: 0; top: 28.6px; display: block; height: 35.7px; padding: 0; margin: 0;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-input {
  position: absolute; left: 0; top: 0; width: calc(100% - 38.7px); height: 35.7px; min-height: 0; margin: 0; padding: 8.5px 8px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--pk-radius-control); resize: none; overflow: hidden;
  background: color-mix(in srgb, var(--pag-card) 92%, var(--black)); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-16); line-height: 18px; white-space: nowrap;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-input::placeholder { color: transparent; }
body[data-ui-tier="s"] .pag-chatwrap .agent-input:focus { outline: 0; border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
body[data-ui-tier="s"] .pag-chatwrap .agent-send {
  position: absolute; right: -4px; top: -3px; width: 41.6px; height: 41px; margin: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 5px solid transparent; background-clip: padding-box;
  border-radius: calc(var(--pk-radius-control) + 5px);
  background-color: color-mix(in srgb, var(--accent) 22%, var(--pag-deep)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-send svg { width: 15px; height: 15px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-send:disabled { opacity: 1; cursor: default; color: color-mix(in srgb, var(--ink) 80%, transparent); }
body[data-ui-tier="s"] .pag-chatwrap .agent-statusline {
  position: absolute; left: 4px; right: 4px; bottom: calc(100% + 4px); height: auto; min-height: 0; padding: 0; pointer-events: none;
  font-size: 9.5px; line-height: 12px; color: var(--pag-txt-2); text-align: right; text-shadow: var(--pag-halo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-statusline.is-err { color: var(--danger); }
/* 9 Oct 2026 — voice input: the mic left of send, the same 40px tap box (5px clear border) as send; the box
   is 37.7px narrower so nothing else on the dock moves. Listening = the danger tint + the seconds. */
body[data-ui-tier="s"] .pag-chatwrap .agent-composer-row .agent-input { width: calc(100% - 76.4px); }
body[data-ui-tier="s"] .pag-chatwrap .agent-mic {
  position: absolute; right: 33.7px; top: -3px; width: 41.6px; height: 41px; margin: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 5px solid transparent; background-clip: padding-box; border-radius: calc(var(--pk-radius-control) + 5px);
  background-color: color-mix(in srgb, var(--ink) 5%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-mic svg { width: 15px; height: 15px; }
body[data-ui-tier="s"] .pag-chatwrap .agent-mic:disabled:not(.is-busy) { opacity: 1; color: color-mix(in srgb, var(--ink) 55%, transparent); }
body[data-ui-tier="s"] .pag-chatwrap .agent-mic.is-on {
  background-color: color-mix(in srgb, var(--danger) 26%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pag-chatwrap .agent-mic-time { font-size: 9.5px; }
/* listening / writing down: a small solid pill over the end of the conversation, so the line reads over any message */
body[data-ui-tier="s"] .pag-chatwrap .agent-statusline.is-voice {
  left: auto; display: flex; align-items: center; height: 26px; padding: 0 2px 0 12px; overflow: visible; pointer-events: auto;
  border-radius: var(--pk-radius-chip); background: var(--pag-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent), 0 4px 12px color-mix(in srgb, var(--black) 35%, transparent);
  color: var(--pag-txt); font-size: 10px; line-height: 12px; text-shadow: none;
}
body[data-ui-tier="s"] .pag-chatwrap .agent-voice-cancel {
  pointer-events: auto; height: 40px; margin: -7px 0; padding: 0 12px 0 10px; font-size: 10px; font-weight: var(--fw-semi); color: var(--pag-txt);
}
/* the page's own pieces on the dock: the model ▾, today's spend, the two quiet lines in the box, + */
body[data-ui-tier="s"] .pag-model {
  position: absolute; left: 130.6px; bottom: 33.8px; z-index: 2; width: 120.5px; height: 41.5px; margin: 0; padding: 0 9px 0 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 10px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 10px);
  background-color: var(--pag-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 9px; font-weight: var(--fw-med); line-height: 1; white-space: nowrap;
}
body[data-ui-tier="s"] .pag-model > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-model svg { flex: 0 0 auto; width: 11px; height: 11px; }
body[data-ui-tier="s"] .pag-spend {
  position: absolute; left: 267.9px; right: 12.8px; bottom: 43.7px; z-index: 2; height: 21.8px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
body[data-ui-tier="s"] .pag-spend-t { font-family: var(--font-body); font-size: 8.7px; font-weight: 400; line-height: 11px; color: var(--pag-txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-spend-t b { font-weight: var(--fw-semi); color: var(--pag-txt); margin-right: 3px; }
body[data-ui-tier="s"] .pag-spendbar {
  display: block; width: 100%; height: 5.4px; overflow: hidden; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--black) 18%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
}
body[data-ui-tier="s"] .pag-spendbar > span { display: block; height: 100%; background: var(--accent); }
body[data-ui-tier="s"] .pag-inhint {
  position: absolute; left: 55.9px; bottom: 8.3px; z-index: 2; display: none; flex-direction: column; gap: 3.2px; pointer-events: none;
  font-family: var(--font-body); color: color-mix(in srgb, var(--ink-muted) 74%, var(--card-bg-solid));
}
body[data-ui-tier="s"] .pag-chatwrap:has(.agent-input:placeholder-shown) .pag-inhint { display: flex; }
body[data-ui-tier="s"] .pag-inhint-a { font-size: 9.5px; line-height: 11px; }
body[data-ui-tier="s"] .pag-inhint-b { font-size: 8.5px; line-height: 10px; letter-spacing: 0.01em; }
body[data-ui-tier="s"] .pag-attach {
  position: absolute; left: 10.2px; bottom: 1.1px; z-index: 2; width: 41.5px; height: 40.9px; padding: 0; margin: 0; cursor: pointer; display: grid; place-items: center;
  border: 9px solid transparent; border-left-width: 10px; border-right-width: 10px; background-clip: padding-box;
  border-radius: calc(var(--pk-radius-small) + 10px) / calc(var(--pk-radius-small) + 9px);
  background-color: color-mix(in srgb, var(--ink) 5%, var(--pag-card)); box-shadow: none; color: var(--ink);
}
body[data-ui-tier="s"] .pag-attach svg { width: 13px; height: 13px; }

/* ════════ WAITING FOR REVIEW (mockup 11, Review) ════════ */
body[data-ui-tier="s"] .pag-reviewbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12.2px 12px 14.1px; }
body[data-ui-tier="s"] .pag-review { display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .pag-review-head { display: flex; align-items: center; gap: 11px; height: 17.5px; margin: 6.7px 0 0 2.7px; }
body[data-ui-tier="s"] .pag-h2 {
  margin: 0; font-family: "Bebas Neue", var(--font-display); font-size: 13.4px; font-weight: 400; line-height: 1; letter-spacing: 0.147em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 92%, transparent);
}
body[data-ui-tier="s"] .pag-count {
  min-width: 26.3px; height: 17.5px; padding: 0 6px; display: inline-grid; place-items: center; box-sizing: border-box; border-radius: var(--pk-radius-chip);
  background-image: linear-gradient(to bottom, var(--pag-amber-hi), var(--pag-amber-solid)); background-color: var(--pag-amber-solid);
  color: var(--pag-amber-ink, var(--black)); font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums;
}
body[data-ui-tier="s"] .pag-review-sub { margin: 0.5px 0 0 2.7px; font-size: 8.9px; line-height: 12px; color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-rows { display: flex; flex-direction: column; gap: 6.9px; min-width: 0; margin-top: 7px; }
body[data-ui-tier="s"] .pag-row {
  position: relative; display: grid; grid-template-columns: 249px minmax(0, 1fr) 5.6px; grid-template-areas: "t t t" "s m c"; column-gap: 10.1px; row-gap: 0;
  width: 100%; min-width: 0; min-height: 64.6px; padding: 5.7px 8.6px 7.3px 8.5px; margin: 0; text-align: left; cursor: pointer; box-sizing: border-box;
  border: 1px solid var(--pag-card-rim); border-radius: var(--pk-radius-row); background: color-mix(in srgb, var(--pag-card) 84%, var(--pag-deep)); color: var(--ink); font-family: var(--font-body);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent); -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pag-row:active { background: color-mix(in srgb, var(--ink) 6%, var(--pag-card)); }
body[data-ui-tier="s"] .pag-row-t { grid-area: t; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: var(--fw-semi); line-height: 13px; color: var(--ink); }
body[data-ui-tier="s"] .pag-strip { grid-area: s; display: grid; grid-template-columns: minmax(0, 59.9fr) minmax(0, 55.2fr) minmax(0, 54.5fr) minmax(0, 55.2fr); gap: 7.4px; margin-top: 6.6px; min-width: 0; }
body[data-ui-tier="s"] .pag-strip > img,
body[data-ui-tier="s"] .pag-strip-slot {
  display: block; width: 100%; height: 31.3px; object-fit: cover; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--black) 40%, var(--card-bg-solid)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 70%, transparent);
}
body[data-ui-tier="s"] .pag-row-sub {
  grid-area: m; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: 2.9px; margin-top: 2.9px;
  font-size: 9px; line-height: 12px; color: var(--pag-txt-2); white-space: nowrap;
}
body[data-ui-tier="s"] .pag-row-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-row-sub > span:last-child { white-space: normal; overflow: visible; line-height: 11.5px; }
body[data-ui-tier="s"] .pag-row-sub > span:last-child > span { white-space: nowrap; }
body[data-ui-tier="s"] .pag-row-sub .is-bad { color: var(--danger); }
body[data-ui-tier="s"] .pag-chev { grid-area: c; align-self: start; justify-self: start; display: grid; place-items: center; margin-top: 10.1px; color: var(--ink); }
body[data-ui-tier="s"] .pag-chev svg { width: 5.6px; height: 10.2px; }
body[data-ui-tier="s"] .pag-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40.9px; margin: -7px 0 0; padding: 0; cursor: pointer;
  border: 7px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px);
  background-color: color-mix(in srgb, var(--ink) 1%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .pag-rows > .pag-more { margin-top: -3.3px; }
body[data-ui-tier="s"] .pag-more svg { width: 11px; height: 11px; }

/* ════════ THE REVIEW CARD (mockup 23): ONE navy window over the page, its head pinned, the pictures scrolling ════════ */
body[data-ui-tier="s"] .pag-page.is-card > :not(.pag-cv):not(.pk-bsheet):not(.pk-sheet) { display: none; }
body[data-ui-tier="s"] .pag-cv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 4.6px 9.5px 0 11px; padding-bottom: 9.6px; }
body[data-ui-tier="s"] .pag-cv-head {
  flex: 0 0 auto; position: relative; z-index: 1; padding: 8.6px 10.1px 0 9.2px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-bottom: 0; border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0;
  background: color-mix(in srgb, var(--pag-card) 86%, var(--pag-deep)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
body[data-ui-tier="s"] .pag-cv-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28.7px; }
body[data-ui-tier="s"] .pag-cv-title {
  min-width: 0; margin: -2px 0 0 5.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-bold); line-height: 20px; letter-spacing: 0; color: var(--ink);
}
body[data-ui-tier="s"] .pag-cv-close {
  flex: 0 0 auto; width: 40.8px; height: 40.7px; margin: -6px -2.4px -6px 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 6px solid transparent; border-left-width: 5px; border-right-width: 5px; background-clip: padding-box;
  border-radius: calc(var(--pk-radius-control) + 5px) / calc(var(--pk-radius-control) + 6px);
  background-color: color-mix(in srgb, var(--ink) 4%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink);
}
body[data-ui-tier="s"] .pag-cv-close svg { width: 17px; height: 17px; stroke-width: 2; }
body[data-ui-tier="s"] .pag-cv-tools { display: flex; align-items: center; gap: 8.2px; height: 31.5px; margin-top: 6.9px; min-width: 0; }
body[data-ui-tier="s"] .pag-cv-seg {
  flex: 0 1 165.6px; display: flex; align-items: center; height: 31.5px; padding: 2.4px; box-sizing: border-box; min-width: 0;
  border-radius: var(--pk-radius-control); background: color-mix(in srgb, var(--black) 6%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
}
body[data-ui-tier="s"] .pag-cv-segbtn {
  flex: 1 1 0; min-width: 0; height: 40.7px; margin: -7px 0; padding: 0; cursor: pointer;
  border: 7px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 7px); background-color: transparent;
  color: color-mix(in srgb, var(--ink-muted) 82%, var(--card-bg-solid)); font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semi); line-height: 1;
}
body[data-ui-tier="s"] .pag-cv-segbtn:first-child { flex: 0 1 72.5px; }
body[data-ui-tier="s"] .pag-cv-segbtn.is-on { background-color: var(--pag-amber-solid); color: var(--pag-amber-ink); }
body[data-ui-tier="s"] .pag-cv-segbtn:disabled { cursor: default; }
body[data-ui-tier="s"] .pag-btn,
body[data-ui-tier="s"] .pag-cv .am-rev-btn {
  flex: 0 0 auto; height: 41.5px; min-height: 0; width: auto; margin: -5px 0; padding: 0 10px; cursor: pointer; white-space: nowrap;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px);
  background-color: color-mix(in srgb, var(--ink) 1%, var(--pag-card)); background-image: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent);
  color: var(--ink); font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-semi); line-height: 1; letter-spacing: 0;
}
body[data-ui-tier="s"] .pag-cv-show { flex: 0 1 89px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pag-cv .pag-cv-tools .am-rev-btn { flex: 1 1 99.2px; min-width: 0; border-color: transparent; padding: 0 6px; background-color: color-mix(in srgb, var(--ink) 1%, var(--pag-card)); color: var(--ink); }
body[data-ui-tier="s"] .pag-cv .pag-cv-tools .am-rev-btn.is-on { background-color: color-mix(in srgb, var(--ok) 14%, var(--pag-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 70%, transparent); color: var(--ink); }
body[data-ui-tier="s"] .pag-btn:disabled { opacity: 0.5; cursor: default; }
body[data-ui-tier="s"] .pag-cv-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26.7px; margin-top: 6.1px; min-width: 0; }
body[data-ui-tier="s"] .pag-cv-sumt {
  flex: 1 1 auto; min-width: 0; margin-left: 4.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; line-height: 15px; color: color-mix(in srgb, var(--ink-muted) 92%, var(--white));
}
/* the "•" between the parts of a line (the summary, a picture's "v015_f1 • 2K • 16:9"): small, with air (mockup 23) */
body[data-ui-tier="s"] .pag-cv .pag-dot { display: inline-block; font-size: 0.8em; margin: 0 0.09em; vertical-align: 0.14em; }
body[data-ui-tier="s"] .pag-cv-sumt.is-err { color: var(--danger); }
body[data-ui-tier="s"] .pag-cv-check { flex: 0 0 74.6px; height: 40.7px; margin: -7px 0; border-width: 7px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
body[data-ui-tier="s"] .pag-cv-div {
  height: 1.4px; margin: 3.5px 0 0; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ink) 9%, transparent) 15%, color-mix(in srgb, var(--ink) 9%, transparent) 85%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--black) 30%, transparent);
}
body[data-ui-tier="s"] .pag-cv-list {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2.8px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity;
}
/* one picture: the window's first one has no top (it continues the head) */
body[data-ui-tier="s"] .pag-pic {
  flex: 0 0 auto; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 7.5px 10.2px 9.9px; box-sizing: border-box; scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: var(--pk-radius-card); background: color-mix(in srgb, var(--pag-card) 90%, var(--pag-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
body[data-ui-tier="s"] .pag-cv-list > .pag-pic:first-child,
body[data-ui-tier="s"] .pag-cv-list > .pag-full:first-child > .pag-pic { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 9.5px; box-shadow: none; background: color-mix(in srgb, var(--pag-card) 86%, var(--pag-deep)); }
/* the card resting under the pinned head continues the window, as the first one does (data-pag-top, set on scroll) */
body[data-ui-tier="s"] .pag-cv-list > .pag-pic[data-pag-top]:not(.is-frame) { border-top-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--pag-card) 86%, var(--pag-deep)); }
body[data-ui-tier="s"] .pag-cv-end { flex: 0 0 auto; }
body[data-ui-tier="s"] .pag-pic.is-frame { border: 2.7px solid color-mix(in srgb, var(--accent) 45%, var(--warn)); padding: 5.8px 8.5px 8.2px; }
body[data-ui-tier="s"] .pag-pic.is-frame .pag-pic-media { width: calc(100% + 6.7px); margin: 0 -3.35px; aspect-ratio: 374.4 / 172.5; box-shadow: 0 0 0 2px color-mix(in srgb, var(--black) 55%, transparent); }
/* mockup 23: the window's picture is drawn 186 tall, a card's 176 (both 371 wide); ONE height for every picture, 181,
   within both, so a card never changes size while it scrolls up under the head (the scrolled mockup redraws it 186) */
body[data-ui-tier="s"] .pag-pic-media {
  position: relative; width: 100%; aspect-ratio: 370.6 / 181; overflow: hidden; border-radius: var(--pk-radius-small);
  background: color-mix(in srgb, var(--black) 50%, var(--card-bg-solid)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
}
body[data-ui-tier="s"] .pag-pic-media > img,
body[data-ui-tier="s"] .pag-pic-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-ui-tier="s"] .pag-pic.is-archived .pag-pic-media > img { opacity: 0.35; }
body[data-ui-tier="s"] .pag-state {
  position: absolute; top: 6.2px; left: 8.2px; height: 20.5px; padding: 0 10.5px; display: inline-flex; align-items: center; box-sizing: border-box;
  border-radius: var(--pk-radius-chip); background: color-mix(in srgb, var(--card-bg-solid) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: 0;
}
body[data-ui-tier="s"] .pag-state.is-frame { height: 21.9px; padding: 0 10px; font-size: 11px; background: color-mix(in srgb, var(--accent) 17%, var(--pag-deep)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 85%, var(--black)); }
body[data-ui-tier="s"] .pag-state.is-good { box-shadow: inset 0 0 0 1px var(--pag-green-rim); }
body[data-ui-tier="s"] .pag-state.is-archived { background: color-mix(in srgb, var(--danger) 30%, var(--pag-deep)); box-shadow: inset 0 0 0 1px var(--pag-red-rim); }
body[data-ui-tier="s"] .pag-ck {
  position: absolute; top: 6.2px; right: 8.2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--pag-deep) 85%, transparent); color: var(--ink); font-size: 12px; font-weight: var(--fw-bold);
}
body[data-ui-tier="s"] .pag-ck.is-pass { color: var(--ok); }
body[data-ui-tier="s"] .pag-ck.is-fail { color: var(--danger); }
body[data-ui-tier="s"] .pag-pic-meta { display: flex; flex-direction: column; gap: 2.5px; min-width: 0; padding: 3.6px 0 0 5.2px; }
body[data-ui-tier="s"] .pag-pic-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.9px; font-weight: var(--fw-bold); line-height: 17px; letter-spacing: -0.01em; color: var(--ink); }   /* the best fit to the mockup's four names (their drawn widths vary +-4%) */
body[data-ui-tier="s"] .pag-pic-sub { font-size: 13.5px; line-height: 16px; letter-spacing: -0.005em; color: color-mix(in srgb, var(--ink-muted) 92%, var(--white)); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pag-pic-sub.is-bad { color: var(--danger); font-size: 11px; line-height: 14px; white-space: normal; }
body[data-ui-tier="s"] .pag-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8.2px; min-width: 0; padding: 0; margin-top: 8.9px; }
body[data-ui-tier="s"] .pag-act {
  min-width: 0; height: 41.4px; margin: -6px 0; padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px);
  --pag-act-line: color-mix(in srgb, var(--ink) 34%, transparent); box-shadow: inset 0 0 0 1px var(--pag-act-line);
  background-color: color-mix(in srgb, var(--ink) 3%, var(--pag-card)); color: var(--ink);
  font-family: var(--font-body); font-size: 11.2px; font-weight: var(--fw-semi); line-height: 1; letter-spacing: -0.03em;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pag-act > svg { flex: 0 0 auto; width: 13.1px; height: 13.7px; }
/* Good: the mockup's bright green rim and a vivid green thumbs-up; Discard: a pinker red (relative colours of the skin's
   own --ok / --danger; a browser without them keeps the plain token) */
body[data-ui-tier="s"] .pag-act.is-good { background-color: color-mix(in srgb, var(--ok) 12%, var(--pag-card)); box-shadow: inset 0 0 0 1.5px var(--ok); }
body[data-ui-tier="s"] .pag-act.is-good > svg { width: 13.4px; height: 15.4px; color: var(--ok); color: oklch(from var(--ok) calc(l + 0.1) calc(c + 0.05) h); }
body[data-ui-tier="s"] .pag-act.is-good.is-on { background-color: color-mix(in srgb, var(--ok) 26%, var(--pag-card)); }
body[data-ui-tier="s"] .pag-act.is-frame.is-on { height: 43.5px; margin: -7.05px 0; background-color: color-mix(in srgb, var(--accent) 10%, var(--pag-card)); box-shadow: inset 0 0 0 2px var(--warn); box-shadow: inset 0 0 0 2px oklch(from var(--warn) calc(l + 0.05) calc(c + 0.01) calc(h + 4)); }
body[data-ui-tier="s"] .pag-act.is-frame.is-on > svg { color: color-mix(in srgb, var(--accent) 45%, var(--warn)); width: 17px; height: 17px; }
body[data-ui-tier="s"] .pag-act.is-frame.is-on > svg .pag-ckc-tick { stroke: var(--pag-card); }
body[data-ui-tier="s"] .pag-act.is-danger {
  color: var(--danger); color: oklch(from var(--danger) calc(l - 0.03) calc(c + 0.03) calc(h - 18)); background-color: var(--pag-wine);
  box-shadow: inset 0 0 0 1.5px var(--pag-red-rim); box-shadow: inset 0 0 0 1.5px oklch(from var(--danger) calc(l - 0.12) c calc(h - 22));
}
body[data-ui-tier="s"] .pag-act.is-danger > svg { width: 11.6px; height: 16.6px; }
body[data-ui-tier="s"] .pag-act:disabled { opacity: 0.45; cursor: default; }
body[data-ui-tier="s"] .pag-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
body[data-ui-tier="s"] .pag-slot-t { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-semi); color: var(--pag-txt-2); }
body[data-ui-tier="s"] .pag-slot-t.is-bad { color: var(--danger); }
body[data-ui-tier="s"] .pag-slot-why { max-width: 100%; font-size: 11px; line-height: 14px; color: var(--pag-txt-2); text-align: center; overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pag-cv-wait { padding: 24px 12px; }
/* Full image: one picture at a time, its reference one tap away */
body[data-ui-tier="s"] .pag-full { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body[data-ui-tier="s"] .pag-full-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-top: 0; border-bottom: 0;
  background: var(--pag-card);
}
body[data-ui-tier="s"] .pag-full-n { font-size: 12px; font-weight: var(--fw-semi); color: var(--pag-txt-2); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .pag-cv-list > .pag-full:first-child > .pag-pic { border-top: 0; }
body[data-ui-tier="s"] .pag-pic.is-big .pag-pic-media { aspect-ratio: auto; height: min(52vh, 420px); }
body[data-ui-tier="s"] .pag-pic.is-big .pag-pic-media > img { object-fit: contain; }

/* ════════ THE CHATS SHEET + RENAME + the model sheet ════════ */
body[data-ui-tier="s"] .pag-sheetreview { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
body[data-ui-tier="s"] .pag-sheetreview .pk-row-main { flex: 1 1 auto; }
body[data-ui-tier="s"] .pag-chatlist { margin: 0 4px; }
body[data-ui-tier="s"] .pag-chatitem { display: flex; align-items: center; min-width: 0; border-top: 1px solid var(--card-border); }
body[data-ui-tier="s"] .pag-chatitem:first-child { border-top: 0; }
body[data-ui-tier="s"] .pag-chatitem > .pk-row { flex: 1 1 auto; border-top: 0; }
body[data-ui-tier="s"] .pag-chatitem.is-on > .pk-row { background: color-mix(in srgb, var(--accent) 12%, transparent); }
body[data-ui-tier="s"] .pag-rename {
  flex: 0 0 auto; min-height: 48px; padding: 0 var(--pk-3); margin: 0; cursor: pointer; border: 0; background: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi);
}
body[data-ui-tier="s"] .pag-sheetbtn { margin: var(--pk-3) 4px 4px; width: auto; gap: var(--pk-1); }
body[data-ui-tier="s"] .pag-renameform { display: flex; flex-direction: column; gap: var(--pk-3); padding: var(--pk-2) var(--pk-2) var(--pk-3); }
body[data-ui-tier="s"] .pag-input {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; margin: 0; box-sizing: border-box;
  border: 1px solid var(--input-border); border-radius: var(--pk-radius-control); background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .pag-formacts { display: flex; justify-content: flex-end; gap: var(--pk-2); }
body[data-ui-tier="s"] .pag-modellist { display: flex; flex-direction: column; min-width: 0; }
body[data-ui-tier="s"] .pag-modelitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-ui-tier="s"] .pag-modelitem.is-on { color: var(--accent); }
body[data-ui-tier="s"] .pag-modelprice { font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .pag-siwc { padding: var(--pk-3) 4px 4px; }
body[data-ui-tier="s"] .pag-siwc .agent-siwc { visibility: visible !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; height: auto; font-size: var(--fs-12); }
body[data-ui-tier="s"] .pag-siwc button { min-height: 40px; }
/* the instructions + documents panel (the desktop's AgentKnowledgePanel) inside a full-screen sheet */
body[data-ui-tier="s"] .pag-kb .agent-kb-panel,
body[data-ui-tier="s"] .pag-kb .agent-kb { max-width: 100%; min-width: 0; }
body[data-ui-tier="s"] .pag-kb button { min-height: 40px; }
body[data-ui-tier="s"] .pag-kb textarea { font-size: var(--fs-16); max-width: 100%; box-sizing: border-box; }