/* ============================================================================
 * BlazeByte Chatbot  |  Phase A component styles
 * ----------------------------------------------------------------------------
 * NOT in bb-pillar.css, deliberately. CHATBOT-SPEC.md §9 said pillar "since the
 * component is sitewide", but bb-pillar.css is enqueued only for the front page
 * plus the slugs in the $pages array in functions.php. Chat styles there would
 * render the launcher unstyled on every page outside that array,
 * /privacy-policy/ included. Spec corrected 2026-08-23.
 *
 * ACCESSIBILITY CONSTRAINT, CLAUDE.md §2
 * --------------------------------------
 * #FF6A00 on white is 2.9:1 and FAILS AA. Every orange TEXT on the white panel
 * uses #C24A00 (4.91:1). #FF6A00 survives only as a border, as a fill behind
 * white text, and on the black header. Do not "fix" the option buttons back to
 * #FF6A00 text.
 * ========================================================================== */

.bb-chat {
	/* Raised by a future sticky mobile CTA bar by setting this one value.
	   No sticky bar exists today: there is no fixed-position rule anywhere in
	   the theme CSS. CHATBOT-SPEC.md §4.1 anticipates one at bottom:72px. */
	/* SIDE BY SIDE with Astra's #ast-scroll-top, not stacked above it.
	   Stacking made the launcher JUMP: the scroll button only appears after
	   scrolling, so a stacked launcher sits at one height on load and another
	   once it shows, and visitors build muscle memory for a position that
	   moves. Side by side keeps the launcher fixed at one place always.

	   Astra's button is fixed at bottom:30px right:30px, 32px square, z-index
	   99. Ours is z-index 99998, which is why it previously sat ON TOP of the
	   scroll button and ate its clicks: the button was not dead, it was
	   covered.

	   --bb-chat-offset is the shared bottom edge, so a future sticky CTA bar
	   shifts BOTH by changing this one value.
	   --bb-chat-launcher-right = 30 (Astra right) + 32 (Astra width)
	                            + 16 (gap) = 78px. */
	--bb-chat-offset: var(--bb-chat-bottom);
	--bb-chat-launcher-right: 78px;
	/* Astra's button is 32px, ours is 56px. Equal BOTTOM offsets leave the
	   small one visually sinking, because two shapes of different heights only
	   look level when their CENTRES align. Astra's centre sits at
	   30 + 32/2 = 46px from the bottom, so ours must sit at 46 - 56/2 = 18px.
	   --bb-chat-align is that correction, derived not guessed. */
	--bb-chat-astra-h: 32px;
	--bb-chat-launcher-h: 56px;
	--bb-chat-align: calc(var(--bb-chat-offset) + (var(--bb-chat-astra-h) - var(--bb-chat-launcher-h)) / 2);
	--bb-chat-or:     #FF6A00;
	--bb-chat-or-d:   #ED4B00;
	--bb-chat-or-tx:  #C24A00;   /* the AA-safe orange for text on white */
	--bb-chat-ink:    #111827;
	--bb-chat-muted:  #4F5B68;
	--bb-chat-line:   #E8E8E8;
	--bb-chat-bot:    #F4F6F8;
	--bb-chat-head:   #0A0E14;

	position: fixed;
	right: 24px;
	bottom: var(--bb-chat-offset);
	z-index: 99998;                 /* below the exit popup's 99999 */
	/* Zero height: the launcher is position:fixed and out of flow, so the
	   container exists only to anchor the panel. */
	height: 0;
	/* Right-aligns the launcher. Do NOT rely on `margin-left:auto` on the
	   button: the scoped reset below sets `#bb-chat button { margin:0
	   !important }`, and an ID selector (1,0,1) beats `.bb-chat-launcher`
	   (0,1,0) even when both are !important. That defeated the alignment and
	   put the launcher bottom-LEFT on mobile, where `.bb-chat` is stretched
	   full width by `left:16px; right:16px`. Caught in a screenshot, not by a
	   numeric assertion. */
	display: flex;
	justify-content: flex-end;
	font-family: var(--bb-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ============================================================================
 * SHARED BOTTOM EDGE for the whole bottom-right cluster.
 * ----------------------------------------------------------------------------
 * Raised from Astra's default 30px to 48px on request: the cluster sat too
 * close to the bottom of the screen.
 *
 * It lives on :root, and Astra's #ast-scroll-top is moved to match, because
 * the two buttons are CENTRE aligned. Raising only the launcher would silently
 * undo that alignment. One value moves the pair together, and it is still the
 * single value a future sticky CTA bar changes.
 *
 * This deliberately overrides a theme-owned position. If Astra's scroll-top
 * offset is ever changed in the Customizer it will be overridden here, which
 * is the intent: the pair must stay level.
 * ========================================================================== */
:root { --bb-chat-bottom: 48px; }

#ast-scroll-top { bottom: var(--bb-chat-bottom) !important; }

/* ============================================================================
 * SCOPED RESET, LOAD BEARING. DO NOT REMOVE.
 * ----------------------------------------------------------------------------
 * Elementor's global kit ships `.elementor-kit-532 button { ... }`, which is
 * specificity (0,1,1) and beats every plain `.bb-chat-*` class at (0,1,0).
 * Measured in a real browser on 2026-08-23, BEFORE this block existed, every
 * button in the component rendered wrong:
 *
 *   launcher   background #FE8301 instead of #FF6A00, padding 18px 22px
 *   option     background #FE8301 with WHITE text, instead of white with
 *              #C24A00 text. That silently destroyed the AA contrast fix.
 *   close      background #FE8301 instead of transparent
 *   all        text-transform: capitalize, so "Yes, check my site" rendered
 *              as "Yes, Check My Site"
 *
 * None of it is visible in the page source, so curl checks pass while every
 * control looks broken. CLAUDE.md §3 rule 3: layout-critical rules need
 * !important to beat Astra and Elementor resets.
 *
 * If a control ever renders in the wrong orange, check here first.
 * ========================================================================== */
#bb-chat button,
#bb-chat input,
#bb-chat textarea {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.45 !important;
	text-shadow: none !important;
	margin: 0 !important;
	max-width: none !important;
}
#bb-chat button {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: none !important;
	width: auto;
}
/* Astra applies text-transform:capitalize to h1 through h6 site-wide and it
   corrupts prose. Bot copy is not a heading, but transform inherits, so pin
   the whole component. */
#bb-chat,
#bb-chat * {
	text-transform: none;
}

/* ============================================================================
 * [hidden] MUST BE RESTATED. LOAD BEARING.
 * ----------------------------------------------------------------------------
 * The UA stylesheet's `[hidden] { display: none }` is an AUTHOR-vs-UA loss:
 * any author `display` rule beats it, whatever the specificity. So
 * `.bb-chat-panel { display: flex }` silently defeated `hidden` and the panel
 * was PAINTED AT ALL TIMES, 380x560, sitting over the page.
 *
 * It looked like the close button was broken. It was not: close() set
 * hidden=true and data-state=closed correctly, and the panel stayed on screen
 * because nothing was telling it to go away. Reported by Haider as "clicking
 * the cross does nothing".
 *
 * My own assertions missed it for the same reason twice over: they checked
 * `panel.hidden`, the ATTRIBUTE, which was perfectly true, instead of the
 * computed display, which is the thing that decides whether a visitor sees it.
 * Caught by looking at a full-viewport screenshot.
 *
 * Any element in this component that has an author `display` rule AND is
 * toggled with `hidden` needs its own line here.
 * ========================================================================== */
#bb-chat[hidden],
.bb-chat-panel[hidden],
.bb-chat-teaser[hidden] { display: none !important; }

/* ---- launcher ----------------------------------------------------------- */
.bb-chat-launcher {
	position: fixed;
	bottom: var(--bb-chat-align);
	right: var(--bb-chat-launcher-right);
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--bb-chat-or) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(255, 106, 0, .35) !important;
	transition: background-color .2s ease, transform .2s ease;
}
.bb-chat-launcher:hover  { background-color: var(--bb-chat-or-d) !important; transform: translateY(-2px); }
.bb-chat-launcher:focus-visible {
	outline: 3px solid var(--bb-chat-or-d);
	outline-offset: 3px;
}
/* Centre the glyph on the BUTTON, not on a wrapper of a different size.
   The icon spans are inline by default, so they inherit line-height and sit on
   a text baseline: the svg then centres against the span's line box rather
   than the circle, which is what made it look off. line-height:0 plus
   display:block on the svg removes the baseline entirely. */
.bb-chat-launcher-icon,
.bb-chat-launcher-close {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0 !important;
	width: 26px;
	height: 26px;
}
.bb-chat-launcher svg { display: block; }

/* Optical, not geometric. The Feather message-circle path spans x 3 to 21 and
   y 2.6 to 21, and its tail hangs bottom-left, which drags the visual mass
   down and left of the true centre. A geometrically centred copy still reads
   wrong. 1px right and 1px up, judged on a screenshot. */
.bb-chat-launcher-icon svg { transform: translate(1px, -1px); }

.bb-chat-launcher-close  { display: none; }
.bb-chat[data-state="open"] .bb-chat-launcher-icon  { display: none; }
.bb-chat[data-state="open"] .bb-chat-launcher-close { display: flex; }

/* ---- teaser --------------------------------------------------------------
 * Replaces panel auto-open. A tab, not a dialog: no overlay, nothing covered,
 * the page keeps working around it. Sits directly above the launcher, right
 * aligned to the container so it clears both the launcher and Astra's
 * scroll-top.
 * ------------------------------------------------------------------------- */
.bb-chat-teaser {
	position: absolute;
	right: 0;
	/* 18px launcher offset + 56px launcher + 12px gap = 86px from the viewport
	   bottom. The container already sits at --bb-chat-offset (30px), so the
	   remainder is measured from there. */
	bottom: 56px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	width: max-content;
	max-width: 260px;
	padding: 12px 10px 12px 14px;
	background: #FFFFFF;
	border: 1px solid var(--bb-chat-line);
	border-radius: 12px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
	animation: bb-chat-in .22s ease;
}
.bb-chat-teaser[hidden] { display: none; }

.bb-chat-teaser-open {
	flex: 1 1 auto;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #0A0E14 !important;
	font-size: .84rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	text-align: left !important;
	cursor: pointer;
}
.bb-chat-teaser-open:hover { color: var(--bb-chat-or-tx) !important; }
.bb-chat-teaser-open:focus-visible { outline: 3px solid var(--bb-chat-or-d); outline-offset: 3px; border-radius: 4px; }

.bb-chat-teaser-close {
	flex: 0 0 auto;
	padding: 2px !important;
	margin-top: 1px !important;
	border: 0 !important;
	background: transparent !important;
	color: #9AA5B1 !important;
	border-radius: 4px !important;
	cursor: pointer;
	display: flex !important;
}
.bb-chat-teaser-close:hover { color: var(--bb-chat-ink) !important; }
.bb-chat-teaser-close:focus-visible { outline: 2px solid var(--bb-chat-or-d); outline-offset: 2px; }
.bb-chat-teaser svg { display: block; }

/* ---- panel -------------------------------------------------------------- */
.bb-chat-panel {
	position: absolute;
	right: 0;
	bottom: 72px;   /* 30 offset + 56 launcher + 16 gap = 102 from viewport */
	width: 380px;
	max-width: calc(100vw - 32px);
	/* Sized against the raised container: the panel bottom sits 76px above
	   --bb-chat-offset, so 96 + 76 + 24px of breathing room at the top. */
	/* Taller, and a consistent floor so the panel does not resize between
	   steps. At 560px max the transcript was squeezed to a couple of lines
	   and both the answer and the buttons under it got clipped. */
	height: min(680px, calc(100vh - 140px));
	max-height: min(680px, calc(100vh - 140px));
	min-height: min(560px, calc(100vh - 140px));
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid var(--bb-chat-line);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
	overflow: hidden;
	animation: bb-chat-in .22s ease;
}
@keyframes bb-chat-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* WHITE header. The old dark header on a white body read as half-loaded,
   like the panel had failed to finish rendering. One light card now. */
.bb-chat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--bb-chat-line);
	flex: 0 0 auto;
}
/* The mark sits on a DARK tile. BLAZEBYTE-Solutions-Transparent.webp is a
   white wordmark on transparency, drawn for dark headers, so on the new white
   header it rendered completely invisible: a 32px hole beside the title.
   Caught in a screenshot, not by the "mark present" assertion, which only
   checked that the element existed. */
.bb-chat-mark {
	width: 32px !important;
	height: 32px !important;
	flex: 0 0 auto;
	object-fit: contain !important;
	max-width: 32px !important;   /* beats Astra's global img rule */
	border-radius: 8px;
	background: #0A0E14;
	padding: 5px !important;
	box-sizing: border-box !important;
}
.bb-chat-header-text { display: flex; flex-direction: column; line-height: 1.35; margin-right: auto; min-width: 0; }
.bb-chat-title { font-size: .9375rem; font-weight: 600; color: #0A0E14; }
.bb-chat-sub { font-size: .8125rem; color: #6B7280; margin-top: 1px; }
.bb-chat-close {
	background-color: transparent !important;
	border: 0 !important;
	color: #6B7280 !important;
	cursor: pointer;
	padding: 4px !important;
	border-radius: 6px !important;
	display: flex !important;
	flex: 0 0 auto;
}
.bb-chat-close:hover { color: var(--bb-chat-or) !important; }
.bb-chat-close:focus-visible { outline: 2px solid var(--bb-chat-or); outline-offset: 2px; }

/* ---- transcript --------------------------------------------------------- */
.bb-chat-log {
	flex: 1 1 auto;
	/* The controls area must never crush the transcript. With six opener
	   buttons the log was squeezed to ~2 lines: the offer bubble clipped
	   mid-sentence and the question the buttons answer scrolled out of
	   sight entirely. 150px keeps roughly two bubbles readable; the
	   CONTROLS scroll instead when space runs out. */
	min-height: 210px;
	overflow-y: auto;
	padding: 20px 20px 8px;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}
.bb-chat-row { display: flex; }
.bb-chat-row--bot  { justify-content: flex-start; }
.bb-chat-row--user { justify-content: flex-end; }

.bb-chat-bubble {
	max-width: 85%;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: .88rem;
	line-height: 1.55;
	word-break: break-word;
}
.bb-chat-bubble--bot  { background: #F4F6F8; color: #0A0E14; }
.bb-chat-bubble--user { background: var(--bb-chat-or); color: #FFFFFF; }

/* ---- Phase B scan results bubble ----------------------------------------
 * Finding lines inside a normal bot bubble. AA on #F4F6F8: the found mark is
 * a dark green, the absent line stays muted grey. Neither uses #FF6A00 text.
 * ------------------------------------------------------------------------- */
.bb-chat-scan { max-width: 100% !important; width: 100%; }
.bb-chat-scan-head { margin: 0 0 8px !important; font-weight: 600; }
.bb-chat-scan-line {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 2px 0;
	font-size: .86rem;
	line-height: 1.5;
	word-break: break-word;
}
.bb-chat-scan-mark { flex: 0 0 auto; font-weight: 700; }
.bb-chat-scan-line.is-found  .bb-chat-scan-mark { color: #1B7F4B; }
.bb-chat-scan-line.is-absent { color: var(--bb-chat-muted); }
.bb-chat-scan-line.is-absent .bb-chat-scan-mark { color: #9AA5B1; }

/* ---- typing indicator ---------------------------------------------------
 * Three dots. The global reduced-motion block in globals.css sets
 * animation-duration:0.01ms on *, which would freeze these mid-cycle at
 * whatever opacity they happened to hold. The reduced-motion branch below
 * therefore sets a STATIC visible state rather than relying on the keyframe.
 * The JS skips the delay entirely in that mode, so this is belt and braces.
 * ------------------------------------------------------------------------- */
.bb-chat-typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.bb-chat-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9AA5B1;
	animation: bb-chat-blink 1.2s infinite ease-in-out;
}
.bb-chat-dot:nth-child(2) { animation-delay: .18s; }
.bb-chat-dot:nth-child(3) { animation-delay: .36s; }
@keyframes bb-chat-blink {
	0%, 80%, 100% { opacity: .28; }
	40%           { opacity: 1; }
}

/* ---- controls ----------------------------------------------------------- */
.bb-chat-controls {
	/* 0 0 auto, NOT 0 1 auto. With flex-shrink on, the log (flex-grow 1, and
	   always full of content) won the space fight and squeezed the controls to
	   135px while they needed 313px, so three of five buttons sat inside their
	   own hidden scroll area. The log has min-height and its own scrollbar; it
	   is the one that should yield. */
	flex: 0 0 auto;
	max-height: 52%;
	overflow-y: auto;
	padding: 8px 20px 20px;
	background: #FFFFFF;
	border-top: 1px solid transparent;
}
/* NO scroll-edge fade here. A gradient on .bb-chat-controls::before at a
   negative top is clipped by this element's own overflow:auto, so it never
   paints, and it perturbs the scroll anchoring on the way. The log's native
   scrollbar is the affordance. */
.bb-chat-options { display: flex; flex-direction: column; gap: 7px; }

.bb-chat-opt {
	width: 100% !important;
	text-align: left !important;
	padding: 10px 13px !important;
	border: 1.5px solid var(--bb-chat-or) !important;
	border-radius: 10px !important;
	background-color: #fff !important;
	color: var(--bb-chat-or-tx) !important;   /* NOT #FF6A00. See file header. */
	font-size: .86rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}
.bb-chat-opt:hover { background-color: var(--bb-chat-or) !important; color: #fff !important; }
.bb-chat-opt:focus-visible { outline: 3px solid var(--bb-chat-or-d); outline-offset: 2px; }

.bb-chat-opt--ghost {
	border-color: var(--bb-chat-line) !important;
	color: var(--bb-chat-muted) !important;
	font-weight: 500 !important;
}
.bb-chat-opt--ghost:hover { background-color: #F4F6F8 !important; color: var(--bb-chat-ink) !important; }

/* The "answering this question" line above a retrieved answer. Quieter than
   the answer, but the question itself is emphasised so it is scannable. */
.bb-chat-matched { font-size: .8rem !important; color: var(--bb-chat-muted) !important; }
.bb-chat-matched-lead { display: block; }
.bb-chat-matched-q { display: block; margin-top: 3px; color: #0A0E14; font-weight: 600; font-style: italic; }

/* ---- ask anything -------------------------------------------------------
 * Free text is the primary affordance in the question step, so the input sits
 * above the quick buttons and is visually the first thing in the controls.
 * ------------------------------------------------------------------------- */
.bb-chat-ask { margin-bottom: 10px; }
.bb-chat-ask-form { display: flex; gap: 8px; align-items: stretch; }
.bb-chat-ask-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 13px !important;
	border: 1.5px solid var(--bb-chat-or) !important;
	border-radius: 10px !important;
}
.bb-chat-ask-btn {
	flex: 0 0 auto;
	padding: 11px 16px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: var(--bb-chat-or) !important;
	color: #fff !important;
	font-size: .86rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background-color .16s ease;
}
.bb-chat-ask-btn:hover { background-color: var(--bb-chat-or-d) !important; }
.bb-chat-ask-btn:focus-visible { outline: 3px solid var(--bb-chat-or-d); outline-offset: 2px; }

/* Source line under a knowledge-base answer: quieter than the answer, and the
   link is #C24A00 for AA on the grey bubble. */
.bb-chat-src { font-size: .8rem !important; color: var(--bb-chat-muted) !important; }
.bb-chat-src a { color: var(--bb-chat-or-tx); text-decoration: underline; font-weight: 600; }

/* ---- forms -------------------------------------------------------------- */
.bb-chat-form { display: flex; flex-direction: column; gap: 9px; }

.bb-chat-input {
	width: 100% !important;
	padding: 11px 13px !important;
	border: 1px solid #D7DBE2 !important;
	border-radius: 9px !important;
	font-size: .88rem !important;
	color: var(--bb-chat-ink) !important;
	background-color: #fff !important;
}
.bb-chat-input::placeholder { color: #8A94A0; }
.bb-chat-input:focus {
	border-color: var(--bb-chat-or) !important;
	box-shadow: 0 0 0 3px rgba(255, 106, 0, .16) !important;
	outline: none;
}
.bb-chat-input--area { resize: vertical; min-height: 74px; }

/* Honeypot. Hidden from sight but NOT with display:none, which some bots skip.
   aria-hidden and tabindex -1 are set in JS so assistive tech never sees it. */
.bb-chat-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.bb-chat-consent {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .76rem;
	line-height: 1.5;
	color: var(--bb-chat-muted);
	cursor: pointer;
	padding: 2px 0;
}
.bb-chat-consent input {
	margin: 2px 0 0 !important;
	width: 15px !important;
	height: 15px !important;
	padding: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--bb-chat-or);
	cursor: pointer;
}
.bb-chat-consent a { color: var(--bb-chat-or-tx); text-decoration: underline; }
.bb-chat-consent.is-missing { color: #B42318; }
.bb-chat-consent.is-missing input { outline: 2px solid #B42318; outline-offset: 2px; }

.bb-chat-err { margin: 0; font-size: .78rem; line-height: 1.45; color: #B42318; }

.bb-chat-submit {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 9px !important;
	background-color: var(--bb-chat-or) !important;
	color: #fff !important;
	font-size: .88rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background-color .16s ease;
}
.bb-chat-submit:hover:not(:disabled) { background-color: var(--bb-chat-or-d) !important; }
.bb-chat-submit:disabled { opacity: .62; cursor: default; }
.bb-chat-submit:focus-visible { outline: 3px solid var(--bb-chat-or-d); outline-offset: 2px; }

/* ---- optional WhatsApp, on the confirmation only ------------------------
 * Lives INSIDE a bot bubble: it is part of the conversation, not a form
 * bolted under it, and that framing is what signals optional. The button is
 * the outlined option pattern, never solid orange, so it does not read as the
 * primary action on a step whose primary action is already done.
 * ------------------------------------------------------------------------- */
.bb-chat-wa-row { margin-top: 4px; }
.bb-chat-wa { max-width: 100% !important; width: 100%; }
.bb-chat-wa-label {
	margin: 0 0 10px !important;
	font-size: .84rem;
	line-height: 1.5;
	color: #0A0E14;
}
.bb-chat-wa-form { display: flex; flex-direction: column; gap: 8px; }
.bb-chat-wa-code,
.bb-chat-wa-num {
	width: 100% !important;
	padding: 12px !important;
	border: 1px solid var(--bb-chat-line) !important;
	border-radius: 10px !important;
	font-size: .84rem !important;
	font-family: inherit !important;
	color: var(--bb-chat-ink) !important;
	background-color: #fff !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.bb-chat-wa-code {
	background-image: linear-gradient(45deg, transparent 50%, #6B7280 50%),
	                  linear-gradient(135deg, #6B7280 50%, transparent 50%) !important;
	background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50% !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
	padding-right: 30px !important;
}
.bb-chat-wa-code:focus,
.bb-chat-wa-num:focus {
	border-color: var(--bb-chat-or) !important;
	box-shadow: 0 0 0 3px rgba(255, 106, 0, .16) !important;
	outline: none;
}
/* Option-button pattern, matching .bb-chat-opt. Not solid orange. */
.bb-chat-wa-btn {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1.5px solid var(--bb-chat-or) !important;
	border-radius: 10px !important;
	background-color: #fff !important;
	color: var(--bb-chat-or-tx) !important;   /* AA on white, never #FF6A00 */
	font-size: .84rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}
.bb-chat-wa-btn:hover:not(:disabled) { background-color: var(--bb-chat-or) !important; color: #fff !important; }
.bb-chat-wa-btn:disabled { opacity: .6; cursor: default; }
.bb-chat-wa-btn:focus-visible { outline: 3px solid var(--bb-chat-or-d); outline-offset: 2px; }
/* Plain text link, not a button. A second button reads as a second decision. */
.bb-chat-wa-skip {
	display: block;
	margin: 10px auto 0 !important;
	padding: 2px 4px !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--bb-chat-muted) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
	text-decoration: underline;
	cursor: pointer;
}
.bb-chat-wa-skip:hover { color: var(--bb-chat-ink) !important; }
.bb-chat-wa.is-done .bb-chat-wa-skip { display: none; }
.bb-chat-wa-msg { margin: 8px 0 0 !important; font-size: .78rem; line-height: 1.45; }
.bb-chat-wa-msg.is-err { color: #B42318; }
.bb-chat-wa-msg.is-ok  { color: #1B7F4B; font-weight: 600; margin: 0 !important; }

/* ---- mobile -------------------------------------------------------------
 * The panel must never cover the sticky CTA bar. There is no sticky bar
 * today; --bb-chat-offset is the single value to raise when one ships.
 * ------------------------------------------------------------------------- */
@media (max-width: 560px) {
	/* Full width minus 32px, so 16px each side. Offset stays 96px: Astra's
	   scroll-top is on mobile too (scroll-to-top-on-devices = both). */
	.bb-chat { right: 16px; left: 16px; }
	.bb-chat-panel {
		width: auto;
		left: 0;
		right: 0;
		bottom: 66px;
		height: min(640px, calc(100vh - 130px));
		max-height: min(640px, calc(100vh - 130px));
	}
	/* 52px launcher + 16 gap + 32 Astra + 30 Astra-right = 130px of the 390px
	   viewport. Comfortably clear of the left edge, so the pair stays side by
	   side at the narrowest breakpoint rather than stacking. */
	/* A little more room for the button stack on the narrowest viewport, where
	   every option wraps to two lines. The log keeps its 210px floor. */
	.bb-chat-controls { max-height: 57%; }
	.bb-chat-launcher { width: 52px !important; height: 52px !important; }
	/* 52px launcher against the same 32px Astra button: centre offset is
	   30 + (32 - 52)/2 = 20px. */
	.bb-chat { --bb-chat-launcher-h: 52px; }
	/* Teaser stays on mobile. 240px of a 390px viewport, right aligned to the
	   16px gutter, so 134px of page remains uncovered and it sits above the
	   launcher row rather than over content. The copy is unchanged: it wraps
	   to two lines at this width and still reads cleanly, so there was no need
	   to shorten it. */
	.bb-chat-teaser { max-width: 240px; bottom: 54px; }
}

/* Very short viewports: a keyboard-open phone. */
@media (max-height: 560px) {
	.bb-chat-panel { max-height: calc(100vh - 150px); }
}

/* ---- reduced motion ------------------------------------------------------
 * globals.css already collapses animation site-wide, which would leave the
 * typing dots frozen at an arbitrary opacity. Pin them visible instead.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bb-chat-panel { animation: none; }
	.bb-chat-launcher:hover { transform: none; }
	.bb-chat-log { scroll-behavior: auto; }
	.bb-chat-dot { animation: none; opacity: .55; }
}

/* ---------------------------------------------------------------------------
   RELATED PUBLISHED QUESTIONS
   Shown under an answer the intent layer resolved. These are adjacent
   published questions, not a second answer, so they read quieter than the
   primary options: lighter border, normal weight, tighter type. They must not
   compete with the answer above them or with the exits below.
   --------------------------------------------------------------------------- */
.bb-chat-rel-lead {
	font-size: .72rem;
	color: var(--bb-chat-muted);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 1px;
}
.bb-chat-related { margin-bottom: 12px; gap: 6px; }
.bb-chat-opt--rel {
	border-color: rgba(194, 74, 0, 0.32) !important;
	font-weight: 500 !important;
	font-size: .82rem !important;
	padding: 8px 12px !important;
	line-height: 1.35 !important;
}

/* One line of context above a forward CTA, explaining why that step and not
   the other. Quieter than an answer: it is a suggestion, not information. */
.bb-chat-cta-lead {
	font-size: .78rem;
	color: var(--bb-chat-muted);
	line-height: 1.45;
	margin: 2px 0 1px;
}

/* The forward step is the one action on screen we actually want taken, so it
   is the only solid button. White on #FF6A00 is the approved treatment for a
   full-orange surface (CLAUDE.md §2); the outline variants stay #C24A00 on
   white because orange text on white fails AA. */
.bb-chat-opt--cta {
	background-color: var(--bb-chat-or) !important;
	border-color: var(--bb-chat-or) !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
}
.bb-chat-opt--cta:hover {
	background-color: var(--bb-chat-or-d) !important;
	border-color: var(--bb-chat-or-d) !important;
	color: #FFFFFF !important;
}