/* BetTrackr chatbot widget - all classes namespaced cb-, no host dependencies.
   Theme via CSS vars mapped onto the tokens_v2 design tokens, so the widget
   follows the host's data-bettrackr-theme (brandNavy/carbon/light) with no
   attribute selectors here. The literal fallbacks are the standalone light
   look for pages that don't load the token sheet. */

:root {
  --cb-accent: var(--bettrackr-primary, #003399);
  --cb-accent-contrast: var(--bettrackr-on-primary, #ffffff);
  --cb-surface: var(--bettrackr-surface, #ffffff);
  --cb-surface-2: var(--bettrackr-bg, #f2f4f8);
  --cb-code-bg: var(--bettrackr-surface-alt, rgba(0, 0, 0, .08));
  --cb-text: var(--bettrackr-text, #22262a);
  --cb-muted: var(--bettrackr-text-muted, #6c757d);
  --cb-border: var(--bettrackr-border, rgba(0, 0, 0, .08));
  --cb-input-bg: var(--bettrackr-input-bg, #ffffff);
  --cb-input-border: var(--bettrackr-input-border, rgba(0, 0, 0, .15));
  --cb-focus-ring: var(--bettrackr-focus-ring, rgba(0, 51, 153, .12));
  --cb-error-bg: var(--bettrackr-negative-wash, #fdecea);
  --cb-error-text: var(--bettrackr-negative, #91312b);
  --cb-radius: 14px;
  --cb-z: 10000001; /* panel only: above the app's mobile nav (9999999) */
  --cb-z-launcher: 1049; /* pill/teaser: under Bootstrap modal backdrops (1050)
                            so the import/share modals dim and cover them, like
                            the old FAB rail; above the offcanvas backdrop (1040) */
  --cb-font: var(--bettrackr-font-sans, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* touch-action:manipulation kills the ~300ms double-tap-to-zoom wait iOS adds
   before committing a tap, so taps focus/click immediately */
.cb-pill,
.cb-teaser,
.cb-head-close,
.cb-form input,
.cb-form button,
.cb-chip,
.cb-fb-btn,
.cb-fb-link,
.cb-fb-box textarea,
.cb-fb-box-btns button,
.cb-header-ask input {
  touch-action: manipulation;
}

/* one visible focus style for every control in the widget - the inputs below
   clear their native outline, so without this a keyboard user gets nothing */
.cb-pill:focus-visible,
.cb-teaser-body:focus-visible,
.cb-teaser-close:focus-visible,
.cb-head-close:focus-visible,
.cb-form button:focus-visible,
.cb-chip:focus-visible,
.cb-fb-btn:focus-visible,
.cb-fb-link:focus-visible,
.cb-fb-box textarea:focus-visible,
.cb-fb-box-btns button:focus-visible,
.cb-header-ask:focus-within {
  outline: 2px solid var(--cb-accent);
  outline-offset: 2px;
}

/* ---------- pill launcher ---------- */

/* Round icon by default: the corner is where people look for help, but it does
   not need to shout. The labelled form is the exception, switched back on only
   for a desktop host with no header ask-input - there the pill is the only
   thing naming the assistant. */
.cb-pill {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--cb-z-launcher);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cb-accent);
  color: var(--cb-accent-contrast);
  font: 600 15px/1 var(--cb-font);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.cb-pill-label { display: none; }
.cb-pill:hover { transform: scale(1.04); box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
/* currentColor - on token pages the pill's background IS the brand green, so
   the mark has to be the label's colour (dark on the dark themes, white on
   light) rather than an accent of its own. This is also why the sparkle is an
   SVG and not the ✨ emoji it replaced: an emoji is a colour glyph, it ignores
   `color` entirely, and its gold sat at ~1.2:1 against the green. */
.cb-pill .cb-ic { width: 24px; height: 24px; color: currentColor; }
.cb-pill.cb-hidden { opacity: 0; pointer-events: none; }

/* ---------- teaser bubble ---------- */

.cb-teaser {
  position: fixed;
  right: 20px;
  bottom: 84px; /* clears the 56px round launcher at bottom:20 */
  z-index: var(--cb-z-launcher);
  max-width: 260px;
  padding: 12px 30px 12px 14px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font: 400 14px/1.4 var(--cb-font);
  border-radius: var(--cb-radius);
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  cursor: pointer;
  animation: cb-pop .25s ease;
}
.cb-teaser-close {
  position: absolute;
  top: 4px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--cb-muted);
  font-size: 16px;
  cursor: pointer;
}
/* the teaser body is a real button (it was a click-handled div, so keyboard
   users could not open it) reset back to looking like the text it is */
.cb-teaser-body {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- panel ---------- */

.cb-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--cb-z);
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 40px);
  display: none;
  flex-direction: column;
  background: var(--cb-surface);
  color: var(--cb-text);
  font: 400 14px/1.45 var(--cb-font);
  border-radius: var(--cb-radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
  overflow: hidden;
  overscroll-behavior: contain;
}
.cb-panel.cb-show { display: flex; animation: cb-pop .2s ease; }

/* Neutral head, not a solid accent bar: with the send button and every user
   bubble already carrying the brand green, a full-width green header made the
   panel read as one large green block. The accent stays, on the sparkle. */
.cb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--cb-surface);
  color: var(--cb-text);
  border-bottom: 1px solid var(--cb-border);
}
.cb-head-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.cb-head-title .cb-ic { width: 18px; height: 18px; color: var(--cb-accent); }
.cb-head-close {
  border: 0;
  background: none;
  color: var(--cb-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
}
.cb-head-close:hover { opacity: 1; color: var(--cb-text); }

.cb-msgs {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* don't chain scroll to the page behind */
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cb-surface-2);
}
.cb-msg {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.cb-msg code {
  background: var(--cb-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.cb-msg-user {
  align-self: flex-end;
  background: var(--cb-accent);
  color: var(--cb-accent-contrast);
  border-bottom-right-radius: 4px;
}
.cb-msg-assistant {
  align-self: flex-start;
  background: var(--cb-surface);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cb-msg.cb-error { background: var(--cb-error-bg); color: var(--cb-error-text); }

/* ---------- starter chips (empty panel) ---------- */

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  max-width: 95%;
}
.cb-chip {
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font: 400 13px/1.3 var(--cb-font);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cb-chip:hover {
  border-color: var(--cb-accent);
  background: var(--cb-surface-2);
}

/* ---------- feedback row (thumbs + comment box under a reply) ---------- */

/* Quiet by design: muted glyphs tucked under the bubble, accent only on the
   chosen thumb - rating an answer is a side note, not part of the chat. */
.cb-fb { align-self: flex-start; max-width: 85%; margin: -6px 0 0 2px; }
.cb-fb-strip { display: flex; align-items: center; gap: 2px; }
.cb-fb-btn {
  border: 0;
  background: none;
  color: var(--cb-muted);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .7;
}
.cb-fb-btn .cb-ic { width: 14px; height: 14px; }
.cb-fb-btn:hover { opacity: 1; background: var(--cb-surface); color: var(--cb-text); }
.cb-fb-btn.cb-sel { color: var(--cb-accent); opacity: 1; }
.cb-fb-link {
  border: 0;
  background: none;
  color: var(--cb-muted);
  font: 400 12px var(--cb-font);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
  opacity: .8;
}
.cb-fb-link:hover { opacity: 1; color: var(--cb-text); }
.cb-fb-note { color: var(--cb-muted); font: 400 12px var(--cb-font); padding: 2px 4px; }
.cb-fb-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cb-fb-box textarea {
  border: 1px solid var(--cb-input-border);
  border-radius: 10px;
  padding: 8px 10px;
  font: 400 13px/1.4 var(--cb-font);
  color: var(--cb-text);
  background: var(--cb-input-bg);
  resize: vertical;
  outline: none;
}
.cb-fb-box textarea:focus { border-color: var(--cb-accent); box-shadow: 0 0 0 3px var(--cb-focus-ring); }
.cb-fb-box-btns { display: flex; gap: 6px; }
.cb-fb-box-btns button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 12px var(--cb-font);
  cursor: pointer;
}
.cb-fb-send { background: var(--cb-accent); color: var(--cb-accent-contrast); }
.cb-fb-send:hover { filter: brightness(1.15); }
.cb-fb-send:disabled { opacity: .7; cursor: default; }
.cb-fb-cancel { background: none; color: var(--cb-muted); }
.cb-fb-cancel:hover { color: var(--cb-text); }

/* live-appended bubbles slide in; redraw()n history appears instantly */
.cb-msg.cb-in { animation: cb-msg-in .18s ease both; }
@keyframes cb-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.cb-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--cb-surface);
  border-top: 1px solid var(--cb-border);
}
.cb-form input {
  flex: 1;
  border: 1px solid var(--cb-input-border);
  border-radius: 999px;
  padding: 9px 14px;
  font: 400 14px var(--cb-font);
  color: var(--cb-text);
  background: var(--cb-input-bg);
  outline: none;
}
.cb-form input:focus { border-color: var(--cb-accent); box-shadow: 0 0 0 3px var(--cb-focus-ring); }
.cb-form button {
  border: 0;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-accent);
  color: var(--cb-accent-contrast);
  cursor: pointer;
}
.cb-form button .cb-ic { width: 16px; height: 16px; }
.cb-form button:hover { filter: brightness(1.15); }

.cb-foot {
  padding: 6px 12px 9px;
  background: var(--cb-surface);
  color: var(--cb-muted);
  font: 400 11px/1.3 var(--cb-font);
  text-align: center;
}

/* ---------- typing dots ---------- */

.cb-dots { display: inline-flex; gap: 4px; padding: 3px 2px; }
.cb-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-muted);
  animation: cb-bounce 1.2s infinite;
}
.cb-dots span:nth-child(2) { animation-delay: .15s; }
.cb-dots span:nth-child(3) { animation-delay: .3s; }

/* ---------- header ask-input ---------- */

/* Token-driven, not white-on-translucent: the old rgba(255,255,255,.12) fill
   and .25 border assumed a dark host header, so in the light theme (header =
   #ffffff) the field and its border disappeared and the rotating example
   floated in the header with nothing marking it as an input. */
.cb-header-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-input-border);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--cb-text);
}
.cb-header-ask .cb-ic { width: 16px; height: 16px; flex: none; color: var(--cb-accent); }
.cb-ask-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* let the field shrink instead of pushing the pill off-screen */
}
.cb-header-ask input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 14px var(--cb-font);
  outline: none;
}
.cb-header-ask input::placeholder { color: inherit; opacity: .65; }

/* rotating example question - sits over the (empty) placeholder and matches
   its look exactly, so the crossfade reads as the placeholder changing */
.cb-ask-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  font: 400 14px var(--cb-font);
  opacity: .65;
  transition: opacity .22s ease;
}
/* cb-swap = mid-crossfade, cb-off = field in use; either one hides it */
.cb-ask-hint.cb-swap,
.cb-ask-hint.cb-off { opacity: 0; }

/* The hint stops rotating entirely under reduced motion (handled in the JS),
   so this only has to cover the widget's other animations. */
@media (prefers-reduced-motion: reduce) {
  .cb-ask-hint { transition: none; }
  .cb-panel.cb-show,
  .cb-teaser { animation: none; }
  .cb-msg.cb-in { animation: none; }
  .cb-dots span { animation: none; opacity: .5; }
  .cb-dots span:nth-child(2) { opacity: .75; }
  .cb-dots span:nth-child(3) { opacity: 1; }
  .cb-pill { transition: none; }
  .cb-pill:hover { transform: none; }
}

/* ---------- mobile ---------- */

/* 16px kills iOS Safari's auto-zoom on focus: it zooms into any input whose
   font-size is under 16px (the app's viewport meta sets no maximum-scale),
   which blew the panel up past the viewport and hid the send button. Scoped
   to touch devices so the desktop look keeps 14px. */
@media (pointer: coarse) {
  .cb-form input,
  .cb-header-ask input,
  .cb-fb-box textarea,
  .cb-ask-hint { font-size: 16px; } /* hint must track the input or the swap jumps size */
}

/* ---------- launcher breakpoints ----------

   The pill stays in the corner at every width: that is where people look for
   help, and after the panel closes mid-conversation it is the only thing
   saying the chat is still there. The teaser is the launcher that interrupts,
   so where the host renders a header ask-input it stops at lg - the rotating
   examples in that field already advertise the assistant, without a popup. */

@media (min-width: 1200px) {
  .cb-teaser.cb-has-header { display: none; }
}

/* The labelled pill, restored only for a desktop host with no header
   ask-input (the marketing site): there it is the one thing naming the
   assistant, and there is room for it. */
@media (min-width: 992px) {
  .cb-pill:not(.cb-has-header) {
    width: auto;
    height: auto;
    padding: 12px 18px;
    border-radius: 999px;
  }
  .cb-pill:not(.cb-has-header) .cb-ic { width: 18px; height: 18px; }
  .cb-pill:not(.cb-has-header) .cb-pill-label { display: inline; }
  .cb-teaser:not(.cb-has-header) { bottom: 76px; } /* shorter labelled pill */
}

@media (max-width: 767.98px) {
  .cb-pill { bottom: 80px; } /* clear the app's fixed bottom nav */
  .cb-teaser { bottom: 144px; }
  .cb-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

@keyframes cb-pop {
  from { transform: translateY(8px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes cb-bounce {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(-5px); }
}