/* Certant Flat — chatbots page local rules. Tokens only, prefix .pg-chatbots-. */ /* flat.css styles no 
; the embed snippet must keep its line breaks and scroll rather than wrap.
   font-family is set because the UA stylesheet defaults 
 to monospace, and this system carries one family. */
.pg-chatbots-code { white-space: pre; overflow-x: auto; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--paper); margin: 0; font-family: inherit; }

/* The old snippet sat on a charcoal slab with white text; the flat system has no `.tint--ink`, so
   the ink token stands the card on the dark ground directly - the silhouette alone reads "code"
   even set in the body face (monospace is a DESIGN.md decision for flat/pages/blog.css only). */
.pg-chatbots-code-slab { background: var(--ink); }

/* the transcript builds over ~2.4s; without a floor the two columns jump as bubbles land. */
.pg-chatbots-thread { min-height: 240px; }

/* Bubbles stage in one at a time; flat.css has no entry animation and the transcript is the page's
   argument. Opacity only — the old page also translated 6px, which is the banned float. */
.pg-chatbots-in { animation: pg-chatbots-in 0.22s var(--ease) both; }
@keyframes pg-chatbots-in { from { opacity: 0; } }

/* The typing indicator. The old page bounced three dots (vs-bounce, 1.2s, delays 0/0.15/0.3s);
   the bounce is a translate, so the flat equivalent keeps the cadence and cycles opacity only. */
.pg-chatbots-typing { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.pg-chatbots-typing span {
  width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--fg-3); opacity: 0.3;
  animation: pg-chatbots-typing 1.2s var(--ease) infinite;
}
.pg-chatbots-typing span:nth-child(2) { animation-delay: 0.15s; }
.pg-chatbots-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pg-chatbots-typing { 0%, 70%, 100% { opacity: 0.3; } 35% { opacity: 1; } }

/* Answer bubbles default to cloud, and cloud on a pink or blue tint reads muddy; the system's
   pairing is paper on a tint (architecture.html's detail card is the same move, inverted).
   Scoped to the comparison stage only. The hero widget's bubbles no longer sit directly on the
   blue tint panel — they sit inside a paper device shell (.pg-chatbots-widget__shell) — so
   forcing paper here too would erase them against it. Cloud on paper is the system's pairing,
   and flat.css's own .viz-bubble--answer default (background: var(--bg-tint)) already gives
   the hero that without an override. */
.pg-chatbots-stage .viz-bubble--answer { background: var(--paper); }

/* The citation chips carry chip--paper, which now matches the bubble ground above (both
   var(--paper)) and disappears — the whole page's argument rides on these being legible.
   Ground them on cloud instead, the same tone the unsure-state chip already lands on inside
   a hued panel, and let them wrap: flat.css sets nowrap, but the longest citation string is
   wider than the bubble at narrow widths and would otherwise overhang the rounded corner.
   The fill alone is only 1.2:1 against the paper bubble, so the pill also takes a hairline
   edge (the chip has no border in flat.css) rather than relying on the fill to read as a pill.
   Scoped to the stage only, not the hero: the hero's .answer__cites sits beside the bubble on
   the blue tint panel, not nested inside it, so its chip--paper already reads correctly there
   (paper on tint, the system default) — widening this rule to the hero would put a cloud chip
   back on a blue tint, the exact muddy pairing this rule exists to avoid. */
.pg-chatbots-stage .viz-bubble--answer .answer__cites .chip {
  --_bg: var(--bg-tint);
  border: 1px solid var(--line);
  white-space: normal;
}

@media (max-width: 720px) {
  /* Wrapped citation chips take a second line on narrow columns, so the good thread grows
     once when its answer lands; hold that height too rather than only the desktop floor. */
  .pg-chatbots-thread { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-chatbots-in { animation: none; }
  .pg-chatbots-typing span { animation: none; opacity: 0.55; }
}


/* ==========================================================================
   The hero widget — a real-looking embedded chat, not a floating Q&A.
   ========================================================================== */

/* The widget is a device, not a card: its zones own their own padding
   (rules below), and the fixed height is what makes the transcript scroll
   rather than push the hero section long. --pad restated at sp-5 so the
   outer blue frame keeps its margin regardless of .tint--panel/.viz-frame--hero
   cascade order in flat.css. */
.pg-chatbots-widget { --pad: var(--sp-5); }
.pg-chatbots-widget__shell {
  --pad: 0;
  display: flex;
  flex-direction: column;
  /* 520px left the cited answer's  and its citation chips scrolled
     above the scroll box entirely when the widget loads bottom-anchored
     (a 336px scroll viewport against a 648px transcript). 650px keeps the
     bottom-anchor behaviour but grows the scroll viewport enough that the
     cited answer, the follow-up question and the "can't find that" answer
     all land inside it, with the cited bubble's top clearing the 24px mask
     fade rather than sitting under it. */
  height: 650px;
  overflow: hidden;
  border-radius: var(--r-panel);
}

/* The head is a three-part row — mark, identity, Example chip — and the
   identity block absorbs the slack so the chip stays pinned right. */
.pg-chatbots-widget__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.pg-chatbots-widget__id { flex: 1; min-width: 0; }

/* flat.css's .tile is 70% white (--tile-bg), tuned to sit on a hued tint
   block, where it reads as a lightened disc of that hue. This tile sits on
   the paper shell instead, where 70% white is invisible and only the bare
   glyph shows. Give it the cloud ground it would get for free inside a
   tint block, the same ground §03 and §04's tiles already sit on — do not
   widen this selector to those tiles, they are correct as they are. */
.pg-chatbots-widget__head .tile { background: var(--bg-tint); }

/* The tabs sit in the head's own gutter; no hairline divider, per the
   Whitespace-Not-Rules Rule. */
.pg-chatbots-widget__tabs { padding: 0 var(--sp-4) var(--sp-3); }

/* flat.css's .tab has no explicit `display`, trusting