/* ============================================================================
   marketing-contact-chat.css — the /contact chat-first page (CC-01, plan 3.40)
   operator-2026-09-27-CONTACT-CHAT-A: "a clean page where the CTA is opening up a chat, like a chat
   widget" · on the frame: "CONTACT-CHAT: i like it, keep it as you have planned".
   THE FRAME: autorun/runs/CONTACT-CHAT/frame/ — Main.dc.html (768 and wider), Phone.dc.html and
   PhoneChat.dc.html (below 768), ChatWidget.dc.html (the chat). Every value below is the frame's
   (`cp-*` page classes, `pp-*` phone classes, `lrc-*` chat classes), transcribed, not chosen.

   LINKED BY THE PAGE, NOT THE LAYOUT (`ContactChatPage.tsx`, the EmployerHome pattern): nothing here
   can reach another route. Page rules are scoped under `.cc-page`; the chat and its launcher are
   `position: fixed` siblings of the page, scoped under `.cc-chat` / `.cc-launch`.

   ⛔ THE BAND IS NOT STYLED HERE. `.mkt-hero`, its radius, colour, notches, arrow field, accent tile
   and spotlight are the site's own (marketing.css / marketing-cms.css), reused as the operator's
   notes on the frame require. This sheet only lays out what the frame ADDS inside the band: the lead,
   the question box and the chips.

   NO ANIMATION AND NO TRANSITION anywhere in the chat, so reduced motion has nothing to take away.
   ============================================================================ */

/* ---- the band's contents (Main: h1 52px, lead 18px/1.55 #E8EEFE max 620, bar 760, chips) ---- */
.page.fin.mkt .cc-hero .mkt-hwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  max-width: 876px;
  margin-inline: auto;
  box-sizing: border-box;
}
.page.fin.mkt .cc-hero .mkt-hcopy { width: 100%; position: relative; }
/* THE ACCENT TILE IS THE SITE'S (`.mkt-hcopy::before`, hero-arrow-tile.svg; marketing-cms.css), only
   placed where Main.dc.html draws it: beside the title, 161 px from the band's left edge and 65 px
   from its top (`.cp-acc`), instead of in flow above the title, which would push the question box
   62 px down and under the docked chat. The copy column starts 143 px in (hwrap 876 = 780 + 2 x 48,
   centred in the 1066 band), so 18 px; its top is the band's 62 px padding, so 3 px. The arrow field
   is anchored to the accent (marketing-cms.css P2-13), so the accent stays on a field tile wherever it
   sits. Phone.dc.html draws it centred above the title (`.pp-acc` left 161, top 33 of 390). */
.page.fin.mkt section.mkt-hero.cc-hero .mkt-hcopy::before {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 18px;
  margin: 0;
}
.page.fin.mkt .cc-hero .mkt-hcopy p {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
  color: #E8EEFE;
}
.page.fin.mkt .cc-hero .cc-ask {
  position: relative;
  margin-top: 28px;
  width: 760px;
  max-width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
}
.page.fin.mkt .cc-hero .cc-ask:focus-within { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #1A52C4; }
.page.fin.mkt .cc-hero .cc-ask-ic { flex: none; }
.page.fin.mkt .cc-hero .cc-ask-in {
  flex: 1;
  min-width: 0;
  border: 0;
  height: 56px;
  font: 400 17px Inter, sans-serif;
  color: #1D1D1F;
  padding: 0 6px;
  background: transparent;
}
.page.fin.mkt .cc-hero .cc-ask-in:focus { outline: none; }
.page.fin.mkt .cc-hero .cc-ask-go {
  flex: none;
  font: 600 16px Inter, sans-serif;
  color: #FFFFFF;
  background: #2164F4;
  border: 0;
  border-radius: 12px;
  padding: 0 26px;
  height: 56px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.page.fin.mkt .cc-hero .cc-ask-go:hover { background: #143C96; }
.page.fin.mkt .cc-hero .cc-chips {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.page.fin.mkt .cc-hero .cc-pop { font-size: 14px; color: #E8EEFE; }
.page.fin.mkt .cc-hero .cc-chip {
  font: 500 14px Inter, sans-serif;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.page.fin.mkt .cc-hero .cc-chip:hover { background: rgba(255, 255, 255, .22); }
.page.fin.mkt .cc-hero .cc-chip:focus-visible,
.page.fin.mkt .cc-hero .cc-ask-go:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ---- the three cards (Main: 1068 wide, 3 columns, gap 20, 48 below the band) ---- */
.page.fin.mkt .cc-cards {
  width: 1068px;
  max-width: calc(100% - 40px);
  margin: 48px auto 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.page.fin.mkt .cc-card {
  background: #FFFFFF;
  border: 1px solid #E7E9F2;
  border-radius: 14px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}
.page.fin.mkt .cc-card h2 {
  margin: 0;
  font-family: 'Hanken Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: #1D1D1F;
}
.page.fin.mkt .cc-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #33343A; }
.page.fin.mkt .cc-card a { color: #2164F4; }
.page.fin.mkt .cc-card a:hover { color: #143C96; }

/* 768-1023: the frame draws 1440 only; the three cards stack before they get too narrow to read */
@media (max-width: 1023.98px) {
  .page.fin.mkt .cc-cards { grid-template-columns: minmax(0, 1fr); max-width: calc(100% - 40px); }
}

/* ---- phone (Phone.dc.html: h1 34px, lead 16px, the bar stacks: input over a full-width button) ---- */
@media (max-width: 767.98px) {
  .page.fin.mkt section.mkt-hero.cc-hero .mkt-hcopy::before { inset-block-start: -44px; inset-inline-start: calc(50% - 34px); }
  .page.fin.mkt .cc-hero .mkt-hcopy p { font-size: 16px; margin-top: 14px; }
  .page.fin.mkt .cc-hero .cc-ask {
    margin-top: 20px;
    width: 100%;
    border-radius: 14px;
    padding: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .page.fin.mkt .cc-hero .cc-ask-ic { display: none; }
  .page.fin.mkt .cc-hero .cc-ask-in { flex: none; width: 100%; box-sizing: border-box; height: 52px; font-size: 16px; padding: 0 14px; }
  .page.fin.mkt .cc-hero .cc-ask-go { height: 52px; width: 100%; justify-content: center; padding: 0 16px; }
  .page.fin.mkt .cc-hero .cc-chips { margin-top: 14px; gap: 8px; }
  .page.fin.mkt .cc-hero .cc-chip { padding: 10px 14px; }
  .page.fin.mkt .cc-cards { margin: 24px 16px 40px; max-width: none; width: auto; gap: 12px; }
  .page.fin.mkt .cc-card { padding: 18px 20px; gap: 6px; }
  .page.fin.mkt .cc-card h2 { font-size: 18px; }
}

/* ---- width switches: the frame draws different copy for the two boards (Main at 768 and wider,
   Phone below). Only `display: none` is written, so each element keeps its own display otherwise;
   (0,6,0) so it outranks every layout rule above without resting on order. ---- */
@media (min-width: 768px) {
  .page.fin.mkt.cc-page :is(.cc-hero, .cc-cards) .cc-narrow { display: none; }
}
@media (max-width: 767.98px) {
  .page.fin.mkt.cc-page :is(.cc-hero, .cc-cards) .cc-wide { display: none; }
}

/* ============================================================================
   THE LAUNCHER (Main `cp-launch`, right 40 bottom 32 · Phone `pp-launch`, right 16 bottom 20)
   ============================================================================ */
/* W5-SHARED round 2 (T-0316, T-0197, T-0198, T-0256 + d3-focus-obscured family): ONE place states where the launcher sits and how much room a page must keep for it.
   The numbers are the launcher's own (below): bottom 32 / height 56 on desktop, 20 / 52 under 768, lifted to bottom 96 / 84 above a real `footer.pfoot`, the 44px icon
   on the row-list pages (`data-cc-compact`). `--cc-launch-room` = the launcher's top edge + 16px of air: what scroll-into-view, an in-page anchor and Tab must leave clear
   at the bottom of the viewport, so a control the browser parks "nearest" is never left under the launcher (the scan parked them 8-60px under it at 1280/1440).
   Derived, not typed per sheet: every sheet that clears the launcher reads this token. Where the launcher rides above a bottom-anchored action bar it is lifted by script
   (GlobalSupportChat.tsx), which publishes the real room as `--cc-launch-bar-room` (lift + height + 16, e.g. 162px); the token takes the larger of the two. */
html { --cc-launch-bottom: 32px; --cc-launch-h: 56px; --cc-launch-gap: 16px;
  --cc-launch-room: max(calc(var(--cc-launch-bottom) + var(--cc-launch-h) + var(--cc-launch-gap) + env(safe-area-inset-bottom, 0px)), var(--cc-launch-bar-room, 0px)); }
@media (max-width: 767.98px) { html { --cc-launch-bottom: 20px; --cc-launch-h: 52px; } }
html:has(footer.pfoot:not([aria-hidden='true'] *)) { --cc-launch-bottom: 96px; }
@media (max-width: 767.98px) { html:has(footer.pfoot:not([aria-hidden='true'] *)) { --cc-launch-bottom: 84px; } }
html:has(.cc-launch[data-cc-compact='true']) { --cc-launch-h: 44px; }
.cc-launch {
  position: fixed;
  right: 40px;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  font: 600 16px Inter, sans-serif;
  color: #FFFFFF;
  background: #2164F4;
  border: 0;
  border-radius: 999px;
  padding: 0 22px 0 8px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(18, 26, 64, .16);
}
.cc-launch[hidden] { display: none; }
.cc-launch:hover { background: #143C96; }
/* DQ1-SHELL (design QA d3-focus-low-contrast 1.00:1 and d3-no-focus-indicator on "Chat with us"): the ring was ONE colour, so it
   vanished on a ground of its own colour (the inverted white pill's white ring on a white page, the blue pill's blue ring on
   a blue band). A two-tone ring cannot: a 3px halo in the opposite colour sits between the pill and the 2px outline, so one of
   the two always reads against any ground (white halo 5.01:1 on #2164F4, blue outline 6.89:1 on white; WCAG 1.4.11 / 2.4.11). */
.cc-launch:focus-visible { outline: 2px solid #1A52C4; outline-offset: 3px; box-shadow: 0 0 0 3px #FFFFFF, 0 12px 34px rgba(18, 26, 64, .16); }
.cc-launch-bubble { display: none; }
/* W6-SHARED (d4-open-panel-covered, 233 routes, employer + recruiter, plus the Notifications / Account menu / row-action / popover family):
   an open menu is the foreground task, so the launcher yields to it, the same way it already yields to the marketing header's More menu
   (marketing-chat-safe.css). The measured case: below 768 the "Open menu" sheet (rail, z 45) and the Account menu (topbar, z 40) opened under
   the launcher (z 60), whose teaser bubble sat on the sheet's items and whose 52px circle sat on the foot of the menu (Sign out row).
   ONE rule for every portal and the public site: while any menu-type trigger reports aria-expanded="true" (the hamburger `[data-nav-toggle]`,
   or anything carrying aria-haspopup: profile menu, notification bell, row kebabs, shared Popover triggers), or the rail sheet is open
   (`[data-nav-open]`), the launcher drops to z 5 (above page content, whose ceiling is 4; below every header, rail, menu and popover layer,
   all 10 or more) and its teaser bubble is not drawn. Back to z 60 the moment the menu closes. Not hidden: it is still on the page, only
   under the menu. impeccable layout: one stacking policy, transient overlays above floating utilities; ui-ux-pro-max z-index-management. */
html:has(:is([data-nav-toggle], [aria-haspopup]:not([aria-haspopup='false']))[aria-expanded='true'], aside.rail[data-nav-open]) .cc-launch { z-index: 5; }
html:has(:is([data-nav-toggle], [aria-haspopup]:not([aria-haspopup='false']))[aria-expanded='true'], aside.rail[data-nav-open]) .cc-launch .cc-launch-bubble { display: none; }
.cc-launch .cc-av { width: 40px; height: 40px; border-radius: 999px; background: #FFFFFF; }
.cc-launch .cc-mark { width: 20px; height: 20px; }
@media (max-width: 767.98px) {
  .cc-launch { right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 15px; padding: 0 18px 0 6px; height: 52px; gap: 8px; }
}
/* P10-14 (2026-10-06): on the portal pages the launcher sat on the footer bar and covered "Terms of service"
   (employer /employer/jobs at 1440, demo walk). Every portal shell draws the same `footer.pfoot` (employer,
   recruiter, affiliate, admin, messages), so on a page that has one the launcher rides above it — the bar is
   ~64 px tall, plus the launcher's own 32/20 px margin. Marketing pages have no `.pfoot` and keep 32/20. */
/* W3-CHAT (founder report 2026-10-30): the home hero draws an aria-hidden, decorative copy of a portal screen (`.hs-glass`) that
   contains its own `footer.pfoot`. A bare `body:has(footer.pfoot)` matched that picture, so on the marketing home the
   launcher rode 96 px up (64 px too high) with no bar on the page. Only a REAL footer bar counts: one that is not inside
   an aria-hidden illustration. */
body:has(footer.pfoot:not([aria-hidden='true'] *)) .cc-launch { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767.98px) {
  body:has(footer.pfoot:not([aria-hidden='true'] *)) .cc-launch { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* W5-SHARED T-0099 (RESCAN4 covered-control, 7 seeker /jobs/jobs-full-* routes, WebKit 390 + 1440): the seeker dark footer (`.darkfoot`,
   SeekerFooter) ends in the "Place data / CC BY 4.0" credit, 40 to 60px above the page bottom, which is exactly where the fixed launcher
   rides (32px up and 56px tall; 20px and 52px under 768). At the end of the page the launcher's avatar sat on the "CC BY 4.0" licence link.
   A legal link must be reachable at every scroll position, so the footer keeps the launcher's own band free under its last line
   (launcher bottom + height + 8px = 96px; 80px under 768, safe-area added): end-of-page room, the pattern the portal shells use
   (e2-global.css `padding-bottom: 120px`), instead of lifting the launcher for the whole page. Only the bottom edge moves, and only
   on a page that really draws the launcher. impeccable layout: reserve the fixed element's band; ui-ux-pro-max fixed-element-offset. */
html:has(.cc-launch:not([hidden])) .darkfoot.darkfoot { padding-bottom: var(--cc-launch-room); }
/* FIX-LOW3 (5f low note b): on the row list pages (employer jobs and applications, recruiter jobs; data-cc-compact is set by GlobalSupportChat.tsx)
   the launcher is the same 44px icon at every width, so at desktop it no longer sits over the last visible row's actions. */
.cc-launch[data-cc-portal='true'][data-cc-compact='true'] { width: 44px; height: 44px; min-width: 44px; padding: 4px; right: 12px; opacity: .92; }
.cc-launch[data-cc-portal='true'][data-cc-compact='true'] .cc-av { width: 36px; height: 36px; }
.cc-launch[data-cc-portal='true'][data-cc-compact='true'] .cc-launch-bubble { pointer-events: none; animation: cc-portal-teaser 7s ease forwards; }
.cc-launch[data-cc-portal='true'][data-cc-compact='true']:hover .cc-launch-bubble,
.cc-launch[data-cc-portal='true'][data-cc-compact='true']:focus-visible .cc-launch-bubble { animation: none; opacity: 1; visibility: visible; }
/* W6-SHARED r3 (D6-MKT / D6-AFF-04 / D6-EMPREC-15 / W6-REC /clients, "launcher covers live content at rest"): GlobalSupportChat.tsx samples what lies under the
   resting teaser bubble and under the wide desktop pill at the current scroll position, and sets data-cc-yield="bubble" and/or "pill" on the launcher when
   that is a control or a line of text. The bubble then fades out (hover and keyboard focus still bring it back); the pill collapses to the same 52px icon
   the phones get. The launcher itself never leaves the page and keeps its accessible name (aria-label). impeccable layout: a floating utility yields to
   content; ui-ux-pro-max fixed-element-offset, touch-target-size (52px). */
.cc-launch[data-cc-yield~='bubble']:not(:hover):not(:focus-visible) .cc-launch-bubble { animation: none; opacity: 0; visibility: hidden; }
.cc-launch[data-cc-yield~='pill'] { width: 52px; height: 52px; min-width: 52px; padding: 6px; gap: 0; justify-content: center; }
.cc-launch[data-cc-yield~='pill'] .cc-launch-label { display: none; }
/* P10-14 round 2 (emp27, 2026-10-07): the reserved bottom gutter for the LIFTED launcher. While the cookie banner is
   unanswered the launcher is lifted above it (GlobalSupportChat.tsx) and, measured on the live demo at the bottom of /,
   its pill/bubble then sat on the marketing footer's links: 768x1024 "Terms of service" 2900 px² + "Privacy policy"
   1019 px²; 1280x720 "Terms of service" 1051 px² + "Cookie page" 1657 px². The component publishes how far it lifted
   the launcher as `--cc-lift-reserve` on <html>; the footer grows by exactly that, in its own colour, so at the end of
   the page its links scroll clear of the lifted launcher just as they clear the unlifted one (0 px² at every width).
   Unset (no banner, or banner answered) the spacer is 0 px tall: no footer moves. `.p-foot` is a plain block
   (marketing.css:297) and draws no ::after anywhere, so this pseudo-element is free. */
footer.p-foot::after {
  content: "";
  display: block;
  height: var(--cc-lift-reserve, 0px);
}
/* On phones and tablets the icon stays visible, but its label is removed so the floating control
   cannot stretch across the cookie choices. Keep the 40px arrow medallion and a 52px circular hit
   area (above the mobile 44px minimum); desktop keeps the named pill. */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  .cc-launch {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 6px;
    gap: 0;
    justify-content: center;
  }
  .cc-launch-label { display: none; }
  .cc-launch-bubble {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    display: block;
    box-sizing: border-box;
    max-width: min(240px, calc(100vw - 32px));
    width: max-content;
    padding: 10px 14px;
    border-radius: 12px;
    background: #2164F4;
    color: #FFFFFF;
    font: 600 16px/1.25 Inter, sans-serif;
    text-align: center;
    box-shadow: 0 8px 24px rgba(18, 26, 64, .16);
  }
  .cc-launch[dir='rtl'] .cc-launch-bubble { right: auto; left: 0; }
  .cc-launch-bubble--footer { background: #FFFFFF; color: #2164F4; }
}

/* ---- ST-18 (row ST-18, operator walk 2026-10-01 pp 11/13/18/22/25/30): portal theme + inverted colourway ----
   MEASURED: NOT MEASURED in a browser this pass (builder brief forbids browsers); source-read only. Inline style on
   the launcher sets only right/left/bottom (GlobalSupportChat.tsx), so these colour rules can WIN. No var(): every
   colour is a literal taken from the sheets (§9b is moot — the launcher may sit outside `.page`, where the tokens live).
   Colours: brand #2164F4 (marketing.css:685 --brand) · employer navy #0E1746 (marketing.css:680 --login-panel, :685
   --navy) · hover overlay rgba(255,255,255,.10) (marketing.css:680 --side-on-bg) · inverted hover #E0E8FB (this sheet,
   .cc-chat .cc-av) · focus ring on the inverted pill #FFFFFF (the footer's sibling focus rings, brief 2026-09-05).
   Specificity (0,3,0) outranks the later `.cc-launch .cc-av` / `.cc-launch .cc-mark` (0,2,0) without resting on order.
   NO FRAME for the inverted state. INTERIM DEVIATION · UNRATIFIED. */
/* W3-CHAT (founder report 2026-10-30): the colour change is a short ease-out-quart fade (impeccable motion: exponential
   ease-out, 100-200 ms for state feedback; ui-ux-pro-max `duration-timing`, `easing`), not the generic `ease` at 200 ms
   that read as lag behind the scroll. Colours only, no layout property. Reduced motion: none (below). */
.cc-launch { transition: background-color .16s cubic-bezier(.25, 1, .5, 1), color .16s cubic-bezier(.25, 1, .5, 1); }
.cc-launch .cc-av, .cc-launch .cc-mark { transition: background-color .16s cubic-bezier(.25, 1, .5, 1); }
.cc-launch[data-cc-theme='employer'] { background-color: #0E1746; }
.cc-launch[data-cc-theme='employer'] .cc-mark { background-color: #0E1746; }
.cc-launch[data-cc-theme='employer']:hover {
  background-color: #0E1746;
  background-image: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10));
}
/* Inverted: the theme-colour parts turn white, the white medallion turns the theme colour (p11 verbatim). */
.cc-launch[data-cc-inverted='true'] { background-color: #FFFFFF; background-image: none; color: #2164F4; }
.cc-launch[data-cc-inverted='true'] .cc-av { background-color: #2164F4; }
.cc-launch[data-cc-inverted='true'] .cc-mark { background-color: #FFFFFF; }
.cc-launch[data-cc-inverted='true'][data-cc-theme='employer'] { color: #0E1746; }
.cc-launch[data-cc-inverted='true'][data-cc-theme='employer'] .cc-av { background-color: #0E1746; }
.cc-launch[data-cc-inverted='true']:hover { background-color: #E0E8FB; background-image: none; }
/* DQ1-SHELL (design QA d3-state-low-contrast, hover): the inverted pill's label is #2164F4 (5.01:1 on white) but on the hover
   fill #E0E8FB it fell to 4.08:1. The default (blue) theme steps the label to --cta-fill #1A52C4 (5.61:1) on hover; the employer
   and affiliate inks (#0E1746, #181818) already clear 4.5 and keep their own rule. */
.cc-launch[data-cc-inverted='true']:not([data-cc-theme='employer']):not([data-cc-theme='affiliate']):hover { color: #1A52C4; }
.cc-launch[data-cc-inverted='true']:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 3px #1A52C4, 0 12px 34px rgba(18, 26, 64, .16); }
/* The phone/tablet name bubble sits ABOVE the launcher, so it keeps its own footer test; it only takes the theme. */
.cc-launch[data-cc-theme='employer'] .cc-launch-bubble { background: #0E1746; }
.cc-launch[data-cc-theme='employer'] .cc-launch-bubble.cc-launch-bubble--footer { background: #FFFFFF; color: #0E1746; }
/* ---- ST-46 (row ST-46, ST-18 follow-up): the affiliate portal theme ----
   MEASURED: NOT MEASURED in a browser (builder brief forbids one); source-read only. FRAME: the affiliate hero ground
   #181818 is the frame's own (`.page.wm-aff{--wm-bg:#181818}`, marketing.css:601 / design-system.css:100, applied to
   `section.mkt-hero` by marketing.css:583 with !important). Hover overlay rgba(255,255,255,.10) is the affiliate
   `--side-on-bg` (marketing.css:682). No var(): literals only, as the ST-18 block above (the launcher sits outside
   `.page`, where those tokens are scoped). Same (0,2,0)/(0,3,0) specificity as the employer pair, no inline colour on
   the launcher (GlobalSupportChat.tsx sets position only), so it can WIN. Recruiter needs NO rule: its hero
   (`.page.wm-lr`) and footer (`.page.fin .p-foot`) are both literal #2164F4 = the brand default above.
   NO FRAME for the launcher in the affiliate colour or its inverted state. INTERIM DEVIATION · UNRATIFIED. */
/* This block sits AFTER the inverted rules at equal specificity, so the resting rules are fenced with
   :not([data-cc-inverted='true']) — otherwise they would win by order and cancel the inversion. */
.cc-launch[data-cc-theme='affiliate']:not([data-cc-inverted='true']) { background-color: #181818; }
.cc-launch[data-cc-theme='affiliate']:not([data-cc-inverted='true']) .cc-mark { background-color: #181818; }
.cc-launch[data-cc-theme='affiliate']:not([data-cc-inverted='true']):hover {
  background-color: #181818;
  background-image: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10));
}
.cc-launch[data-cc-inverted='true'][data-cc-theme='affiliate'] { color: #181818; }
.cc-launch[data-cc-inverted='true'][data-cc-theme='affiliate'] .cc-av { background-color: #181818; }
.cc-launch[data-cc-theme='affiliate'] .cc-launch-bubble { background: #181818; }
.cc-launch[data-cc-theme='affiliate'] .cc-launch-bubble.cc-launch-bubble--footer { background: #FFFFFF; color: #181818; }
@media (prefers-reduced-motion: reduce) {
  .cc-launch, .cc-launch .cc-av, .cc-launch .cc-mark { transition: none; }
}

/* ST-64 (2026-10-02, operator: "the chat widget design being different" on /jobs?lang=ar). The launcher is
   the same component in both directions, but three of its declarations were PHYSICAL, so `dir="rtl"`
   flipped the order of its children and nothing else. MEASURED on :4300 (build W8Px258LlKwHNVZgYfRcx,
   /jobs 1440): English pill 176x56, circle 8px from its outer edge, label 22px from the other edge;
   Arabic pill 151x56, circle 22px from its outer edge and label 8px from the other, i.e. the padding
   stayed `0 22px 0 8px` while the content swapped sides, so the white circle floated off its end and
   the label hugged the rim. The arrow mask (pointing down-right, toward the label in English) was not
   mirrored, and the label fell back from Inter (no Arabic glyphs) to whatever the OS picks per glyph
   (label 22px tall vs 20px). The cure mirrors only by direction: padding swapped per breakpoint
   (same order as the base rules above so the 6px circle-only form still wins at <=1199px), arrow
   flipped, label in the site's Arabic stack (literal copy of marketing-rtl.css `--ar-sans`, which this
   sheet cannot rely on: /jobs does not load marketing-rtl.css) at the English 20px line box.
   English is untouched: every selector requires dir='rtl', which GlobalSupportChat sets only for ar. */
.cc-launch[dir='rtl'] { padding: 0 8px 0 22px; }
@media (max-width: 767.98px) {
  .cc-launch[dir='rtl'] { padding: 0 6px 0 18px; }
}
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  .cc-launch[dir='rtl'] { padding: 6px; }
}
.cc-launch[dir='rtl'] .cc-mark { transform: scaleX(-1); }
.cc-launch[dir='rtl'] .cc-launch-label,
.cc-launch[dir='rtl'] .cc-launch-bubble {
  font-family: "SF Arabic", "Geeza Pro", "Segoe UI", "Segoe UI Arabic", "Noto Naskh Arabic", "Noto Sans Arabic",
               "Droid Arabic Naskh", "Tahoma", sans-serif;
}
.cc-launch[dir='rtl'] .cc-launch-label { line-height: 20px; }

/* ============================================================================
   THE CHAT (ChatWidget.dc.html `lrc-*`)
   ============================================================================ */
.cc-chat {
  position: fixed;
  z-index: 70;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  overflow: hidden;
  font-family: Inter, sans-serif;
  color: #1D1D1F;
  text-align: start;
}
/* dock: 420 x 640, right 40, flush with the bottom, top corners rounded, the frame's shadow */
.cc-chat.cc-dock {
  right: 40px;
  bottom: 0;
  width: 420px;
  height: 640px;
  max-height: 100%;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 12px 34px rgba(18, 26, 64, .16);
}
/* phone: the whole screen, square, no shadow */
.cc-chat.cc-full { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.cc-chat, .cc-chat * { animation: none; transition: none; }

.cc-chat .cc-av, .cc-launch .cc-av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E0E8FB;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-launch .cc-av { width: 40px; height: 40px; border-radius: 999px; background: #FFFFFF; }
.cc-chat .cc-mark, .cc-launch .cc-mark {
  width: 18px;
  height: 18px;
  background: #2164F4;
  -webkit-mask: url(/design/arrow-nav-alpha.png) center / contain no-repeat;
  mask: url(/design/arrow-nav-alpha.png) center / contain no-repeat;
}
.cc-launch .cc-mark { width: 20px; height: 20px; }

.cc-chat .cc-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid #E7E9F2;
}
.cc-chat .cc-title { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-chat .cc-title h2 {
  margin: 0;
  font-family: 'Hanken Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: #1D1D1F;
}
.cc-chat .cc-title span { font-size: 13px; color: #6E6E73; }
.cc-chat .cc-x {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: none;
  color: #33343A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cc-chat .cc-scroll {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  padding: 16px 18px;
}
.cc-chat .cc-stack { display: flex; flex-direction: column; gap: 12px; }
.cc-chat .cc-today { text-align: center; font-size: 13px; color: #6E6E73; }
.cc-chat .cc-log { display: flex; flex-direction: column; gap: 12px; }
.cc-chat .cc-botrow { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; }
.cc-chat .cc-bot {
  background: #F1F3F7;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cc-chat .cc-me {
  align-self: flex-end;
  max-width: 80%;
  background: #E8EEFE;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cc-chat .cc-opts { display: flex; flex-wrap: wrap; gap: 8px; padding-inline-start: 46px; }
.cc-chat .cc-opt {
  font: 600 15px/1.2 Inter, sans-serif;
  color: #2164F4;
  background: #FFFFFF;
  border: 1.5px solid #2164F4;
  border-radius: 12px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
  text-align: start;
}
.cc-chat .cc-opt:hover { background: #E8EEFE; }
.cc-chat .cc-opt:focus-visible,
.cc-chat .cc-link:focus-visible,
.cc-chat .cc-send:focus-visible,
.cc-chat .cc-x:focus-visible { outline: 2px solid #1A52C4; outline-offset: 2px; }

.cc-chat .cc-form {
  margin-inline-start: 46px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #E7E9F2;
  border-radius: 14px;
  background: #FFFFFF;
  position: relative;
}
.cc-chat .cc-hp { position: absolute; inset-inline-start: -9999px; top: -9999px; }
.cc-chat .cc-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.cc-chat .cc-hint { font-weight: 400; color: #6E6E73; }
.cc-chat .cc-in {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #858EA6; /* W7-SHARED d3-ui-boundary-contrast: founder #14 field border (3.27:1), was the 1.4:1 #D9DDEA */
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
  font: 400 15px Inter, sans-serif;
  color: #1D1D1F;
  box-sizing: border-box;
  background: #FFFFFF;
}
.cc-chat .cc-in:focus, .cc-chat .cc-ta:focus { outline: 2px solid #1A52C4; outline-offset: 1px; }
.cc-chat .cc-ta {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #858EA6;
  border-radius: 12px;
  padding: 10px 14px;
  font: 400 15px/1.45 Inter, sans-serif;
  color: #1D1D1F;
  resize: none;
  background: #FFFFFF;
}
.cc-chat .cc-consent { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: #6E6E73; }
.cc-chat .cc-err { font-size: 13px; color: #C0362C; }
.cc-chat .cc-submit { background: #2164F4; color: #FFFFFF; text-align: center; }
.cc-chat .cc-submit:hover { background: #143C96; }

.cc-chat .cc-type {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #E7E9F2;
}
.cc-chat .cc-send {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 0;
  background: #2164F4;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.cc-chat .cc-bar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid #E7E9F2;
  background: #F7F8FB;
}
.cc-chat .cc-bar span { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #6E6E73; }
.cc-chat .cc-link {
  font: 500 13px/1 Inter, sans-serif;
  color: #2164F4;
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ST-61 (operator walk p32 -> ST-43 audit B47 -> operator APPROVED option A, 2026-10-02): the three /contact cards
   take the system card radius. MEASURED (ST-43/measure.json, :4300, 1440 dpr2; not re-read this pass): `.cc-card`
   14px x3 while `--r-card` read 18px on this page. NO FRAME for /contact cards (the 14px above is this lane's own).
   §9b: the root is `page mkt lvl2 portal-candidate tok-iter3 fin cc-page` (ContactChatPage.tsx:87), which declares
   `--r-card`. CAN IT WIN: same (0,4,0) selector as the rule above, later; no inline radius on `.cc-card`. */
.page.fin.mkt .cc-card { border-radius: var(--r-card); }

/* ---- ST-80 LiveBot connected (founder 2026-10-03: "the AI is called LiveBot ... connect it so I can test it") ----
   Every rule is gated on `.cc-live`, which ChatWidget sets ONLY when NEXT_PUBLIC_LIVEBOT_BASE was set at build: with
   it unset the chat renders exactly the rules above. Nothing minted: colours are this sheet's own (#6E6E73 secondary
   text, #2164F4 link, #E7E9F2 rule), the box/Send are the existing `.cc-in`/`.cc-send` (height 48, radius 12, focus
   ring #1A52C4) — the removed `.cc-form` used the same `.cc-in`. MEASURED: NOT MEASURED in a browser (builder brief
   forbids one); source-read only. MOBILE.md §4: a phone's form field renders at 16px (iOS zooms below it) and every
   tap target is >= 44px; §2: article titles wrap (`.cc-link` is nowrap) so a long title cannot widen the panel.
   PLACED BEFORE the themed-colourway block below on purpose: SupportChatPanel.theme.test reads from that block's id to
   EOF and requires every rule there to be theme-gated; nothing here sets a colour the themed rules override. */
.cc-chat.cc-live .cc-arts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-chat.cc-live .cc-arts .cc-link {
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
  font-size: 14px;
  line-height: 1.35;
  padding: 6px 0;
}
.cc-chat.cc-live .cc-disc { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #6E6E73; }
.cc-chat.cc-live .cc-typing { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.cc-chat.cc-live .cc-dot { width: 7px; height: 7px; border-radius: 999px; background: #6E6E73; opacity: .55; }
.cc-chat.cc-live .cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cc-chat.cc-live .cc-send:disabled { opacity: .55; cursor: default; }
.cc-chat.cc-live .cc-in[readonly] { background: #F7F8FB; }
.cc-chat.cc-live .cc-count {
  flex: none;
  padding: 0 16px 8px;
  margin-top: -6px;
  font-size: 12px;
  color: #6E6E73;
  text-align: end;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes cc-live-dot { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
  .cc-chat.cc-live .cc-typing .cc-dot { animation: cc-live-dot 1.2s ease-in-out infinite; }
  .cc-chat.cc-live .cc-typing .cc-dot:nth-child(2) { animation-delay: .15s; }
  .cc-chat.cc-live .cc-typing .cc-dot:nth-child(3) { animation-delay: .3s; }
}
.cc-chat.cc-live.cc-full .cc-in { font-size: 16px; }
.cc-chat.cc-live.cc-full .cc-arts .cc-link { min-height: 44px; display: inline-flex; align-items: center; }
/* Blind walk 9 (2026-10-03, walk9.log `LAYOUT M after replies`): at 390 the bar's "Browse help articles" measured
   134x29 px, under MOBILE.md §4's 44px tap target. `.cc-full` is the phone panel only (below 768), so the dock at 768+
   is unchanged. Gated on `.cc-full`, NOT on `.cc-live`: the scripted chat's bar link was the same 29px. The bar's
   "Start over" (also `.cc-link`) gets the same floor. Box only: font, colour and padding are unchanged. MEASURED: NOT
   MEASURED in a browser (brief forbids one); source-read only. */
.cc-chat.cc-full .cc-bar .cc-link { min-height: 44px; display: inline-flex; align-items: center; }

/* 2026-10-06 — the affiliate panel's MINIMISE (operator: "the one in the affiliate portal is way more advanced"; P4's
   ChatWithUsPanel CH-5). On a desktop the dock collapses to its header bar and expands again without losing the
   conversation; on a phone (cc-full) there is no minimise button. Links after a LiveBot answer sit under the thread. */
.cc-chat.cc-dock.cc-min { height: auto !important; min-height: 0 !important; }
.cc-chat.cc-dock.cc-min > :not(.cc-head) { display: none !important; }
/* the minimise button wears the close button's box (.cc-chat .cc-x above), under its own class so `.cc-x` stays "Close" */
.cc-chat .cc-minbtn { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: #33343A; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-chat .cc-minbtn:focus-visible { outline: 2px solid #1A52C4; outline-offset: 2px; }
.cc-chat .cc-help.cc-after { padding: 4px 0 0 44px; }
[dir="rtl"] .cc-chat .cc-help.cc-after { padding: 4px 44px 0 0; }

/* ---- P10-27 THE LIVEBOT STANDARD (founder order relayed by the P4 lead, 2026-10-06: "The Livebot chat widget built in
   the P4 affiliate portal is the standard everywhere, the marketing site included"). ROUND 3 (operator 2026-10-06: no buttons
   or options in the box; "match the election"): the "+" menu rules are REMOVED with the menu. Thinking, steps and settle are
   the ELECTED preview's (P4 st1006/previews/livebot-chat.html ?t=A: t=A = "Compass"); the typing is the P4 lead's spec of
   the elected caret, matched to P4's landed build (c2f84311f), whose numbers live in ChatWidget `STREAM_PACE` and are pinned
   to these by ChatWidget.livebotStandard.test.tsx: glide 120ms, fade 200ms; word 220ms and breathing 1.1s 1<->.3 as P4's.
   GATED on `.cc-live` (LiveBot connected), so the scripted chat renders exactly the rules above.
   ⚠ THE ONE EXCEPTION TO "NO ANIMATION ANYWHERE IN THE CHAT" (header, and `.cc-chat, .cc-chat * { animation: none }`
   at (0,1,0)): these rules outrank it ONLY for the thinking arrow, the step word, the words, the caret, the bubble's rise
   and the links' fade, at (0,4,0) and up. Everything else in the panel stays still.
   COLOURS ARE THIS SHEET'S OWN, NONE MINTED: avatar ground #E0E8FB (= the preview's --av), the arrow #2164F4 (= the
   preview's --brand-ink; white on the accent in the themed panels below), muted #6E6E73. The caret paints `--cc-accent` (the
   launcher's own THEME_HEX: brand #2164F4, employer #0E1746, affiliate #181818) on the #F1F3F7 bubble, so it is never the
   colour of its ground. NOT MEASURED in a browser (none allowed on this Mac; none on the box); source-read only. */
.cc-chat.cc-live .lb-row { align-items: flex-start; }
.cc-chat.cc-live .lb-av { transition: box-shadow .4s ease; }
.cc-chat.cc-live .lb-av .lb-mk { width: 18px; height: 18px; display: block; color: #2164F4; }
.cc-chat.cc-live .lb-av.is-thinking { box-shadow: inset 0 0 0 1.5px rgba(33, 100, 244, .3); }
/* A "Compass": the arrow spins, overshoots and wobbles back to point home (preview, k = A). The settle when the answer is
   in is Web Animations from wherever the arrow is (ChatWidget `settleMark`, the preview's `settle()`). */
.cc-chat.cc-live .lb-av.is-thinking .lb-mk { animation: lb-compass 2s cubic-bezier(.55, 0, .25, 1) infinite; }
@keyframes lb-compass { 0% { transform: rotate(0deg); } 48% { transform: rotate(392deg); } 62% { transform: rotate(348deg); } 74% { transform: rotate(366deg); } 84%, 100% { transform: rotate(360deg); } }
/* the real phase word beside the arrow: rolls in (preview `.lb-step.pre`), and the steps fade when the answer is in */
.cc-chat.cc-live .lb-steps { position: relative; height: 36px; min-width: 220px; max-width: 100%; overflow: hidden; }
.cc-chat.cc-live .lb-step {
  position: absolute; inset-inline-start: 0; top: 0; line-height: 36px; white-space: nowrap; font-size: 14px; font-weight: 500; color: #6E6E73;
  transition: opacity .28s ease, transform .28s ease;
}
.cc-chat.cc-live .lb-step.pre { opacity: 0; transform: translateY(6px); }
.cc-chat.cc-live .lb-steps.gone { transition: opacity .25s; opacity: 0; }
/* the answer bubble rises in; its links fade in after the typing (preview `.lb-ans`, `.lb-fade-in`) */
.cc-chat.cc-live .cc-bot.lb-ans { animation: lb-rise .25s ease-out both; }
.cc-chat.cc-live .lb-fade-in { animation: lb-rise .35s ease-out both; }
@keyframes lb-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* typing, as P4's landed build (affiliate-st1006-shared.css at c2f84311f, `.lb-stream` / `.w` / `.lb-caret`): the words box is a
   BLOCK, so the measured box is the caret's origin (an inline span wrapping lines measured 42px off); each word fades and
   rises in; the space between words is plain text, so a wrapped line starts flush. */
.cc-chat.cc-live .lb-stream { position: relative; display: block; }
.cc-chat.cc-live .lb-stream .w { display: inline-block; animation: lb-word 220ms ease-out both; }
@keyframes lb-word { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
/* the caret: the founder's arrow, 10px, 4px after the newest word, measured there by ChatWidget (inline transform); it
   GLIDES along a line (120ms) and SNAPS onto a new one, breathes 1<->.3 over 1.1s but holds still while moving, and fades
   out over 200ms when the reply is complete */
.cc-chat.cc-live .lb-caret {
  display: inline-block; width: 10px; height: 10px; margin-inline-start: 4px; vertical-align: -1px; color: var(--cc-accent, #2164F4);
  animation: lb-breathe 1.1s ease-in-out infinite; transition: opacity 200ms ease-out;
}
.cc-chat.cc-live .lb-caret.is-placed { position: absolute; left: 0; top: 0; margin: 0; transition: transform 120ms ease-out, opacity 200ms ease-out; }
.cc-chat.cc-live .lb-caret.is-moving { animation-play-state: paused; opacity: 1; }
.cc-chat.cc-live .lb-caret.is-placed.is-snap { transition: opacity 200ms ease-out; }
.cc-chat.cc-live .lb-caret.is-leaving { animation: none; opacity: 0; }
@keyframes lb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.cc-chat.cc-live .lb-caret svg { width: 10px; height: 10px; display: block; }
/* round 4 (operator 2026-10-06, "no buttons or options in the chat"): on a line that cannot answer, the help centre is ONE
   link inside the sentence, not a row: it takes the sentence's own size and wraps like text (`.cc-link` is a 13px nowrap
   control with 8px padding) */
.cc-chat.cc-live .cc-bot .cc-link.cc-inline { font: inherit; padding: 0; white-space: normal; overflow-wrap: anywhere; }
/* reduced motion: the arrow never turns, nothing slides, blurs or glides; the words arrive 4 at a time and only fade; the
   caret is static (it snaps, no breathing) and fades */
@keyframes lb-soft { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes lb-soft-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cc-chat.cc-live .lb-av.is-thinking .lb-mk { animation: lb-soft 1.8s ease-in-out infinite; transform: none; }
  .cc-chat.cc-live .lb-av.is-thinking { box-shadow: none; }
  .cc-chat.cc-live .lb-step { transition: opacity .3s ease; transform: none; }
  .cc-chat.cc-live .lb-stream .w { animation: lb-soft-in .15s ease-out both; filter: none; transform: none; }
  .cc-chat.cc-live :is(.cc-bot.lb-ans, .lb-fade-in) { animation: lb-soft-in .2s ease-out both; filter: none; transform: none; }
  .cc-chat.cc-live :is(.lb-caret, .lb-caret.is-placed) { animation: none; opacity: .8; transition: opacity 200ms ease-out; }
  .cc-chat.cc-live .lb-caret.is-leaving { opacity: 0; }
}

/* FIX-PORTAL (2026-10-28, employer design sweep D1): the signed-in portals' launcher (data-cc-portal, set by the seeker, employer
   and recruiter layouts only) must never cover controls. GlobalSupportChat.tsx lifts it above a fixed/sticky bar anchored to the
   bottom of the viewport; here, on phones and tablets, it is a smaller icon, its bubble is a teaser that never takes a tap and
   fades (same as the marketing pages, marketing-chat-safe.css), and it rests a little translucent until hovered or focused. */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  .cc-launch[data-cc-portal='true'] { width: 44px; height: 44px; min-width: 44px; padding: 4px; right: 12px; opacity: .92; }
  .cc-launch[data-cc-portal='true'] .cc-av { width: 36px; height: 36px; }
  .cc-launch[data-cc-portal='true'] .cc-launch-bubble { pointer-events: none; animation: cc-portal-teaser 7s ease forwards; }
  .cc-launch[data-cc-portal='true']:hover .cc-launch-bubble,
  .cc-launch[data-cc-portal='true']:focus-visible .cc-launch-bubble { animation: none; opacity: 1; visibility: visible; }
}
@keyframes cc-portal-teaser {
  0%, 85% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* FIX-PORTAL (recruiter sweep D6): the portals' sticky action bars (Save / Cancel / Publish) sit over the bottom of the viewport. A field focused with the keyboard
   or reached by an in-page anchor must scroll clear of them, so the page keeps the bar's height as scroll padding (the bars are in-flow at the page end, so nothing else moves). */
html:has(.cc-launch[data-cc-portal='true']) { scroll-padding-bottom: max(112px, var(--cc-launch-room)); }

/* ---- ST-71 (operator 2026-10-02: "the send button, the arrow inside, and the colorway for those should be the color
   of whatever page it is on ... If it's on employers and the chat widget is navy blue, the inside should have navy blue
   instead of that light blue or that regular blue") ----
   MEASURED: NOT MEASURED in a browser (builder brief forbids one); source-read only. REACH: `--cc-accent` is set on the
   panel root itself (ChatWidget.tsx inline custom property, value = GlobalSupportChat THEME_HEX, the launcher's own table:
   employer #0E1746, affiliate #181818) — no `.page` token scope involved. WIN: no inline colour inside `.cc-chat`; every
   rule below is (0,3,0)+ against the base (0,2,0)/(0,3,0) rules above. SHOW: white on #0E1746 17.1:1, white on #181818
   17.8:1; #0E1746 on #FFFFFF / #F1F3F7 / #F7F8FB 17.1 / 15.4 / 16.1:1; #181818 on the same 17.8 / 16.0 / 16.7:1;
   white on the hover wash (#262E59 / #2F2F2F) 13.0 / 13.4:1 (WCAG 2.x relative luminance, node one-liner in ST-71/SHIP.md).
   GATED to the two portal themes: brand (/, /recruiter, every other page) renders exactly the pre-ST-71 rules (frame
   ChatWidget.dc.html, as drawn). Colourway taken from the neighbours, nothing minted: theme medallion + white arrow is the
   launcher's own inverted colourway (ST-18); hover white wash is the launcher's portal hover (`--side-on-bg`); the
   option hover #F1F3F7 is this panel's own bot-bubble ground. Focus rings take the theme colour: they sit 2px off the
   control on the white panel ground (ring pixels change white -> theme, 17:1). NO FRAME for a themed panel:
   INTERIM DEVIATION · UNRATIFIED, operator-directed. ORDER MATTERS: `.cc-submit` is also `.cc-opt`, so its rules follow. */
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-send { background: var(--cc-accent); color: #FFFFFF; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-av { background: var(--cc-accent); }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-mark { background: #FFFFFF; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-me { background: var(--cc-accent); color: #FFFFFF; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-opt { color: var(--cc-accent); border-color: var(--cc-accent); }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-opt:hover { background: #F1F3F7; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-submit { background: var(--cc-accent); color: #FFFFFF; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-submit:hover {
  background-color: var(--cc-accent);
  background-image: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10));
}
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-link { color: var(--cc-accent); }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-opt:focus-visible,
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-link:focus-visible,
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-send:focus-visible,
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-x:focus-visible,
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-in:focus,
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .cc-ta:focus { outline-color: var(--cc-accent); }
/* P10-27 (the Livebot standard, round 3): the thinking arrow takes the themed avatar's white, like `.cc-mark` above. */
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .lb-av .lb-mk { color: #FFFFFF; }
.cc-chat:is([data-cc-theme='employer'], [data-cc-theme='affiliate']) .lb-av.is-thinking { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }