/**
 * Leo AI Live Chat — frontend chat widget styles.
 *
 * Floating/sticky placement (Milestone 5): the widget is fixed to the
 * viewport's bottom-right corner so it stays visible while scrolling,
 * regardless of where the shortcode/widget is placed in page content,
 * and never inherits width from a narrow parent container. Every
 * offset is a CSS custom property with a sensible default, specifically
 * so a future Elementor "Appearance" control (Milestone 7) can override
 * position/spacing per-instance via inline custom properties without
 * touching this stylesheet.
 *
 * Color palette (v0.6.0): the --leo-chat-* custom properties below are
 * a deliberately small, semantic set (never referenced by any other
 * name in this file), so the widget's look stays customizable in one
 * place. Default values are taken from Mattress Deal Hub's own live
 * site palette (its Elementor Global Colors — deep navy/warm gold/
 * cream), not invented, so the widget matches the storefront out of
 * the box without a redesign of the site itself.
 */

.leo-ai-chat {
	--leo-ai-chat-offset-right: 24px;
	--leo-ai-chat-offset-bottom: 24px;
	--leo-ai-chat-z-index: 999999;
	--leo-ai-chat-panel-width: 380px;

	--leo-chat-primary: #102544;
	--leo-chat-primary-text: #ffffff;
	--leo-chat-accent: #c89b5b;
	--leo-chat-background: #f6f2eb;
	--leo-chat-surface: #ffffff;
	--leo-chat-border: rgba(200, 155, 91, 0.25);
	--leo-chat-muted: #6b7280;
	--leo-chat-danger: #b3261e;
	--leo-chat-success: #458e67;
	/*
	 * Mobile-only (v0.6.1, see the max-width: 600px block below).
	 * --leo-chat-visible-height/--leo-chat-keyboard-offset are
	 * intentionally NOT given a value here — leo-ai-live-chat.js sets
	 * them on documentElement (from window.visualViewport) only while a
	 * widget is open on a narrow screen, and the var()-with-fallback
	 * pattern at each point of use covers every other case (desktop,
	 * no JS, no visualViewport support). Declaring them here too would
	 * shadow/override that document-level value, since a closer
	 * ancestor's declaration always wins over a farther one.
	 */
	--leo-chat-mobile-gutter: 8px;

	position: fixed;
	right: var(--leo-ai-chat-offset-right);
	bottom: var(--leo-ai-chat-offset-bottom);
	z-index: var(--leo-ai-chat-z-index);
	font-family: inherit;
	color: #232323;
}

.leo-ai-chat__launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--leo-chat-primary);
	color: var(--leo-chat-primary-text);
	border: none;
	border-radius: 24px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

/*
 * v0.8.1 fix: the launcher previously had NO :focus or :active rule at
 * all (only :hover) — a real, previously-unaudited gap. `!important`
 * here is deliberate and narrow, scoped to this one uniquely-named
 * class: the v0.7.1/v0.8.0 fixes relied on plain specificity to beat a
 * hostile theme rule, which works only when our selector's specificity
 * is HIGHER than the theme's — not guaranteed against every possible
 * theme/Elementor selector shape. v0.8.2: uses the `background`
 * SHORTHAND (not just `background-color`) — a longhand-only override
 * never resets a theme's `background-image` (a gradient hover/active
 * effect, common in Elementor button presets, would otherwise still
 * paint through on top of a "correctly" overridden solid color).
 */
.leo-ai-chat__launcher:hover,
.leo-ai-chat__launcher:focus,
.leo-ai-chat__launcher:active {
	background: #0c1c34 !important;
	/*
	 * v0.9.0 fix (see AI_INSTRUCTIONS.md): live-verified via an
	 * ANONYMOUS (logged-out) browser session — the theme's own
	 * wp-content/themes/hello-elementor/assets/css/reset.css sets a
	 * white text color on every button's hover/focus state, site-wide,
	 * competing directly with this element's own base color (not
	 * !important) whenever this rule itself left color unset. Every
	 * OTHER interactive element in this file already had color
	 * !important on its hover/focus/active state (v0.8.1/v0.8.2) — this
	 * one was the one genuine remaining gap, previously masked here only
	 * because this button's base text color already happens to be white
	 * too (the theme's hover color and this element's own color
	 * coincided, so no visible symptom — but the underlying leak was
	 * real and would misbehave the moment either color ever changed).
	 */
	color: var(--leo-chat-primary-text) !important;
	outline: none;
}

/*
 * v0.7.1: the SVG-icon variant used by the compact circular mobile
 * launcher below (max-width: 600px). Hidden here so desktop keeps
 * rendering the existing emoji+label pill completely unchanged.
 */
.leo-ai-chat__launcher-svg {
	display: none;
	width: 24px;
	height: 24px;
	color: var(--leo-chat-primary-text);
}

.leo-ai-chat--open .leo-ai-chat__launcher {
	display: none;
}

.leo-ai-chat__panel {
	display: none;
	flex-direction: column;
	/*
	 * An explicit, protected width — not inherited from whatever
	 * container the shortcode/widget happens to be placed in (a narrow
	 * sidebar, a narrow Elementor column, etc.), which otherwise made
	 * the panel shrink to fit that container and wrap message text to
	 * one word/character per line. min() picks the smaller of the
	 * configured desktop width and the viewport width minus a safe
	 * margin, so the panel never overflows on narrow mobile screens
	 * either — no separate media-query override needed for width. The
	 * 24px subtracted here is matched by the container's own
	 * bottom/right offsets on mobile (see the max-width: 480px query
	 * below) so the panel keeps equal margins on both sides instead of
	 * hugging the right edge and overflowing on the left.
	 */
	width: min(var(--leo-ai-chat-panel-width), calc(100vw - 24px));
	border: 1px solid var(--leo-chat-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--leo-chat-surface);
	box-shadow: 0 10px 32px rgba(16, 37, 68, 0.16);
	box-sizing: border-box;
	/*
	 * Bounded by the viewport, not just a fixed pixel value — a short
	 * viewport (a landscape phone, a small browser window) would
	 * otherwise let the panel's max-height push its top edge off-screen
	 * or, when logged in, up behind the WordPress admin bar. 120px
	 * covers the fixed bottom offset plus a safety margin.
	 */
	max-height: min(520px, calc(100vh - 120px));
}

.leo-ai-chat--open .leo-ai-chat__panel {
	display: flex;
}

.leo-ai-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: var(--leo-chat-primary);
	color: var(--leo-chat-primary-text);
}

.leo-ai-chat__title {
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leo-ai-chat__close,
.leo-ai-chat__lead-toggle,
.leo-ai-chat__new-chat {
	background: none;
	border: none;
	color: var(--leo-chat-primary-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	flex: 0 0 auto;
}

/*
 * v0.7.1 fix, extended v0.8.1 and v0.8.2: explicitly re-assert
 * `background: none` on every interactive state of these plain/text-
 * style buttons, not just hover/focus — v0.7.1 and v0.8.0 never
 * covered :active at all (fixed v0.8.1). v0.8.2: the live site kept
 * leaking pink even after the v0.8.1 :active fix — root-caused to two
 * compounding gaps: (1) `background-color !important` alone never
 * resets `background-image`, so a theme's GRADIENT hover/active effect
 * (very common in Elementor button presets) still painted through on
 * top of the correctly-overridden solid color — fixed by using the
 * `background` SHORTHAND with `!important` instead, which resets every
 * background sub-property; (2) `color` was never `!important`, so a
 * theme's text-color override could still win independently of the
 * background fix. Both are now `!important`, narrowly scoped to these
 * exact classes only — never applied outside this widget.
 */
.leo-ai-chat__close:hover,
.leo-ai-chat__close:focus,
.leo-ai-chat__close:active,
.leo-ai-chat__lead-toggle:hover,
.leo-ai-chat__lead-toggle:focus,
.leo-ai-chat__lead-toggle:active,
.leo-ai-chat__new-chat:hover,
.leo-ai-chat__new-chat:focus,
.leo-ai-chat__new-chat:active {
	background: transparent !important;
	color: var(--leo-chat-accent) !important;
}

.leo-ai-chat__close {
	font-size: 20px;
}

.leo-ai-chat__disabled-notice {
	padding: 10px 16px;
	background: #fcf0f1;
	color: var(--leo-chat-danger);
	font-size: 13px;
}

.leo-ai-chat__messages {
	flex: 1;
	padding: 12px 16px;
	overflow-y: auto;
	min-height: 220px;
	max-height: 340px;
	flex-direction: column;
	gap: 10px;
	background: var(--leo-chat-surface);
}

/*
 * `display` must only be set here, guarded by :not([hidden]) — see the
 * identical comment on .leo-ai-chat__loading below. Milestone 5's lead
 * panel toggles `hidden` on this element (and on .leo-ai-chat__form,
 * below) via JS, so an unconditional `display: flex` here would repeat
 * the exact v0.4.4 typing-indicator bug: the browser's default
 * `[hidden] { display: none }` rule would be silently overridden.
 */
.leo-ai-chat__messages:not([hidden]) {
	display: flex;
}

.leo-ai-chat__message {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.leo-ai-chat__message a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--leo-chat-accent);
}

/*
 * v0.8.1 — verified product links (Leo_AI_Live_Chat_Product_Linker).
 * Deliberately readable-but-quiet: navy text with a gold underline,
 * never a loud/bright treatment, never the generic browser blue a
 * bare <a> would otherwise inherit. Wraps normally on mobile — no
 * white-space/overflow rule of its own is needed, since the parent
 * .leo-ai-chat__message already sets word-wrap: break-word and this
 * is an inline element within that same wrapping text flow.
 */
.leo-ai-chat__product-link {
	color: var(--leo-chat-primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--leo-chat-accent);
	text-underline-offset: 2px;
}

.leo-ai-chat__product-link:hover,
.leo-ai-chat__product-link:active {
	color: #0c1c34 !important;
	background: transparent !important;
	text-decoration-color: var(--leo-chat-primary);
}

.leo-ai-chat__product-link:focus-visible {
	outline: 2px solid var(--leo-chat-accent);
	outline-offset: 2px;
}

/* A visited product link stays within the palette — never the browser default purple. */
.leo-ai-chat__product-link:visited {
	color: var(--leo-chat-primary);
}

.leo-ai-chat__message--user {
	align-self: flex-end;
	background: var(--leo-chat-primary);
	color: var(--leo-chat-primary-text);
	border-bottom-right-radius: 4px;
}

.leo-ai-chat__message--assistant {
	align-self: flex-start;
	background: var(--leo-chat-background);
	color: var(--leo-chat-primary);
	border-bottom-left-radius: 4px;
}

.leo-ai-chat__message--notice {
	align-self: center;
	background: #fcf0f1;
	color: var(--leo-chat-danger);
	font-size: 12px;
	text-align: center;
}

.leo-ai-chat__loading {
	gap: 4px;
	padding: 0 16px 8px;
}

/*
 * `display` must only be set here, guarded by :not([hidden]) — setting
 * it unconditionally on .leo-ai-chat__loading itself would have the
 * same specificity as (and load after) the browser's default
 * `[hidden] { display: none }` rule and silently win, making the
 * `hidden` attribute toggled by JS have no visual effect at all. This
 * is exactly what happened before: the typing indicator was visible
 * on every page load, before any message was ever sent.
 */
.leo-ai-chat__loading:not([hidden]) {
	display: flex;
}

.leo-ai-chat__typing-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--leo-chat-muted);
	animation: leo-ai-chat-blink 1.2s infinite ease-in-out both;
}

.leo-ai-chat__typing-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.leo-ai-chat__typing-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes leo-ai-chat-blink {
	0%, 80%, 100% { opacity: 0.2; }
	40% { opacity: 1; }
}

.leo-ai-chat__error {
	padding: 8px 16px;
	color: var(--leo-chat-danger);
	font-size: 13px;
}

.leo-ai-chat__form {
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--leo-chat-border);
	background: var(--leo-chat-surface);
}

/* See the .leo-ai-chat__messages comment above — same [hidden] guard, same reason. */
.leo-ai-chat__form:not([hidden]) {
	display: flex;
}

.leo-ai-chat__input {
	/*
	 * flex-basis auto + min-width: 0 (rather than the flex-item default
	 * of `min-width: auto`, which refuses to shrink below the element's
	 * intrinsic content size) — this is what lets the input shrink
	 * before the Send button next to it ever gets clipped on a narrow
	 * mobile viewport (v0.6.1).
	 */
	flex: 1 1 auto;
	min-width: 0;
	resize: none;
	border: 1px solid rgba(16, 37, 68, 0.15);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	max-height: 90px;
	box-sizing: border-box;
}

.leo-ai-chat__input:focus {
	outline: none;
	border-color: var(--leo-chat-accent);
	box-shadow: 0 0 0 2px rgba(200, 155, 91, 0.25);
}

.leo-ai-chat__send {
	/* Never shrinks — the input above shrinks first (v0.6.1). */
	flex: 0 0 auto;
	background: var(--leo-chat-primary);
	color: var(--leo-chat-primary-text);
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 16px;
}

/* v0.8.1: :active added — see the comment above .leo-ai-chat__launcher.
 * v0.9.0: `color !important` added — the one remaining genuine gap
 * found via live anonymous-session inspection (see the comment above
 * .leo-ai-chat__launcher:hover for the exact theme rule/mechanism). */
.leo-ai-chat__send:hover:not(:disabled),
.leo-ai-chat__send:focus:not(:disabled),
.leo-ai-chat__send:active:not(:disabled) {
	background: #0c1c34 !important;
	color: var(--leo-chat-primary-text) !important;
}

.leo-ai-chat__send:disabled,
.leo-ai-chat__input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Lead capture panel (Milestone 5; dual gate/details mode v0.6.0) — the
 * same markup serves both the pre-chat contact gate (Name/Preferred
 * Contact Method/Email-or-WhatsApp/Consent only) and, once a
 * conversation exists, "Your Details" (the same fields, plus the
 * secondary "+ Add more details" block) — leo-ai-live-chat.js toggles
 * text/visibility per mode; nothing here needs to know which mode is
 * active.
 */

.leo-ai-chat__lead-panel {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
	background: var(--leo-chat-surface);
}

.leo-ai-chat__lead-back {
	background: none;
	border: none;
	color: var(--leo-chat-primary);
	font-size: 13px;
	cursor: pointer;
	padding: 0 0 8px;
}

/* v0.7.1 fix, extended v0.8.1/v0.8.2: see the comment above .leo-ai-chat__close:hover —
 * same missing-hover-state gap (now including :active, `background` shorthand, and
 * `!important` color), closed the same way. */
.leo-ai-chat__lead-back:hover,
.leo-ai-chat__lead-back:focus,
.leo-ai-chat__lead-back:active {
	background: transparent !important;
	color: var(--leo-chat-accent) !important;
}

.leo-ai-chat__lead-intro {
	font-size: 13px;
	color: var(--leo-chat-muted);
	margin: 0 0 12px;
}

.leo-ai-chat__lead-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.leo-ai-chat__lead-form label {
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--leo-chat-muted);
}

/*
 * `display` set here only, guarded by :not([hidden]) — the three
 * `.leo-ai-chat__lead-contact-field` labels are toggled via the
 * `hidden` attribute (leo-ai-live-chat.js, based on the selected
 * Preferred Contact Method), so an unconditional `display: flex` here
 * would repeat the exact v0.4.4/Milestone 5 bug where the browser's
 * default `[hidden] { display: none }` gets silently overridden. See
 * AI_INSTRUCTIONS.md's "CSS [hidden] rule".
 */
.leo-ai-chat__lead-form label:not([hidden]) {
	display: flex;
}

/*
 * :not([type="checkbox"]) — the consent checkbox below is also matched
 * by this selector's `input` clause; without this exclusion it
 * inherited `width: 100%` + text-field padding/border meant for text
 * inputs, stretching the checkbox to fill the row and pushing its
 * label far away from it (the v0.5.5 consent-alignment bug). See
 * .leo-ai-chat__lead-consent below for its own, correct sizing.
 */
.leo-ai-chat__lead-form input:not([type="checkbox"]),
.leo-ai-chat__lead-form select,
.leo-ai-chat__lead-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(16, 37, 68, 0.15);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 14px;
	font-family: inherit;
}

.leo-ai-chat__lead-form input:not([type="checkbox"]):focus,
.leo-ai-chat__lead-form select:focus,
.leo-ai-chat__lead-form textarea:focus {
	outline: none;
	border-color: var(--leo-chat-accent);
	box-shadow: 0 0 0 2px rgba(200, 155, 91, 0.25);
}

.leo-ai-chat__lead-more {
	border: 1px solid var(--leo-chat-border);
	border-radius: 6px;
	padding: 6px 10px;
}

.leo-ai-chat__lead-more[open] {
	padding-bottom: 10px;
}

.leo-ai-chat__lead-more summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: var(--leo-chat-accent);
	background: none;
	padding: 4px 0;
}

/*
 * v0.8.0, extended v0.8.1 (:active): same gap as .leo-ai-chat__close:hover
 * above — a native <summary> element with no explicit hover/focus/active
 * background is just as exposed to a theme's generic default as a <button>.
 */
.leo-ai-chat__lead-more summary:hover,
.leo-ai-chat__lead-more summary:focus,
.leo-ai-chat__lead-more summary:active {
	background: transparent !important;
	color: var(--leo-chat-primary) !important;
	outline: none;
}

.leo-ai-chat__lead-more[open] summary {
	margin-bottom: 8px;
}

.leo-ai-chat__lead-more label {
	margin-top: 8px;
}

.leo-ai-chat__lead-more label:first-of-type {
	margin-top: 0;
}

.leo-ai-chat__lead-consent {
	flex-direction: row !important;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	cursor: pointer;
}

/*
 * A compact, natural checkbox size instead of the text-input styling
 * above — the actual v0.5.5 alignment fix. flex: 0 0 auto keeps it
 * from stretching in the row; the small top margin optically aligns
 * it with the first line of label text (which may wrap to a second
 * line on narrow screens without affecting the checkbox's position).
 */
.leo-ai-chat__lead-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	cursor: pointer;
	accent-color: var(--leo-chat-primary);
}

/*
 * v0.8.1: a native checkbox's own :focus outline is browser/theme
 * default (commonly a bright blue ring, occasionally themed pink by a
 * host site) — explicit navy/gold replaces it rather than leaving it
 * unset for the theme to fill in.
 */
.leo-ai-chat__lead-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--leo-chat-accent);
	outline-offset: 1px;
}

.leo-ai-chat__lead-consent-error {
	color: var(--leo-chat-danger);
	font-size: 11px;
	margin: -2px 0 0;
}

.leo-ai-chat__lead-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.leo-ai-chat__lead-cancel {
	background: none;
	border: none;
	color: var(--leo-chat-muted);
	cursor: pointer;
	font-size: 13px;
}

/* v0.7.1 fix, extended v0.8.1/v0.8.2: see the comment above .leo-ai-chat__close:hover —
 * the live-site "hover turns pink" bug traced to this exact selector
 * (this is the "No thanks" button) never re-asserting `background` on
 * hover/focus, leaving it open to the site theme's own default
 * button-hover background. v0.8.1 added :active; v0.8.2 switched to
 * the `background` SHORTHAND (a theme gradient hover effect survives a
 * `background-color`-only override) and made `color` !important too —
 * this exact selector was reported still leaking pink live even after
 * the v0.8.1 fix, root-caused to both of those gaps. */
.leo-ai-chat__lead-cancel:hover,
.leo-ai-chat__lead-cancel:focus,
.leo-ai-chat__lead-cancel:active {
	background: transparent !important;
	color: var(--leo-chat-primary) !important;
}

.leo-ai-chat__lead-submit {
	background: var(--leo-chat-primary);
	color: var(--leo-chat-primary-text);
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}

/* v0.8.1: :active added — see the comment above .leo-ai-chat__launcher.
 * v0.9.0: `color !important` added — same live-verified gap as
 * .leo-ai-chat__send:hover above. */
.leo-ai-chat__lead-submit:hover:not(:disabled),
.leo-ai-chat__lead-submit:focus:not(:disabled),
.leo-ai-chat__lead-submit:active:not(:disabled) {
	background: #0c1c34 !important;
	color: var(--leo-chat-primary-text) !important;
}

.leo-ai-chat__lead-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.leo-ai-chat__lead-status {
	font-size: 12px;
	margin: 4px 0 0;
}

.leo-ai-chat__lead-status--success {
	color: var(--leo-chat-success);
}

.leo-ai-chat__lead-status--error {
	color: var(--leo-chat-danger);
}

/*
 * Preferred Contact Method toggle (v0.8.0). Replaces a native <select>
 * — see the comment in templates/chat-shell.php — with a small
 * two-option segmented control, fully within the navy/gold/cream
 * palette at every state (no browser/OS default blue is possible,
 * since nothing here is a native select/radio relying on system
 * accent-color).
 */
.leo-ai-chat__lead-method-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--leo-chat-muted);
}

.leo-ai-chat__lead-method {
	display: flex;
	gap: 6px;
}

.leo-ai-chat__lead-method-option {
	flex: 1 1 0;
	padding: 7px 10px;
	border-radius: 6px;
	border: 1px solid rgba(16, 37, 68, 0.15);
	background: var(--leo-chat-surface);
	color: var(--leo-chat-primary);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

/* v0.8.1: :active added alongside :hover — see the comment above
 * .leo-ai-chat__launcher for why `!important` is used narrowly here.
 * v0.8.2: border-color also made !important (a theme's own border
 * color override on hover/active is just as plausible a leak point).
 * v0.9.0 fix (see AI_INSTRUCTIONS.md): THE actual live, customer-facing
 * bug — live-verified via an ANONYMOUS browser session hovering the
 * inactive Email/WhatsApp toggle button. The theme's own reset.css sets
 * `button:hover { color: #fff }` (specificity 0,1,1) against this
 * element's base, non-!important `color: var(--leo-chat-primary)`
 * (specificity 0,1,0) — the theme wins while hovering, since this
 * block never redeclared `color` at all. Unlike every other button in
 * this file (whose base color is already white, so the same theme leak
 * happened to be invisible), this one's base color is NAVY on a
 * cream/white background — so the leak was directly visible: white
 * text on a near-white hover background, effectively illegible. This
 * is the confirmed root cause of the live pink/illegible-hover report. */
.leo-ai-chat__lead-method-option:hover,
.leo-ai-chat__lead-method-option:active {
	background: var(--leo-chat-background) !important;
	border-color: var(--leo-chat-accent) !important;
	color: var(--leo-chat-primary) !important;
}

.leo-ai-chat__lead-method-option:focus-visible {
	outline: none;
	border-color: var(--leo-chat-accent) !important;
	box-shadow: 0 0 0 2px rgba(200, 155, 91, 0.25);
}

.leo-ai-chat__lead-method-option.is-active {
	background: var(--leo-chat-primary) !important;
	border-color: var(--leo-chat-primary) !important;
	color: var(--leo-chat-primary-text) !important;
}

.leo-ai-chat__lead-method-option.is-active:hover,
.leo-ai-chat__lead-method-option.is-active:active,
.leo-ai-chat__lead-method-option.is-active:focus-visible {
	background: #0c1c34 !important;
}

/*
 * Mobile sheet layout (v0.6.1, fixed v0.6.2). Below ~600px, the
 * desktop's compact 380px-max floating panel becomes a near-full-width
 * sheet instead of just a scaled-down version of the same box — real
 * phone widths (iPhone included) are always well under 600px, so this
 * only ever engages there, never on a small desktop browser window.
 *
 * DELIBERATELY LAST IN THIS FILE. v0.6.1 placed this block earlier
 * (right after .leo-ai-chat__send), which put its font-size: 16px
 * override for the lead-form's Name/Email/WhatsApp/select fields
 * BEFORE those same selectors' own unconditional (14px) declaration
 * further down the file (see "Lead capture panel" above). Since both
 * rules share the exact same selector and therefore equal specificity,
 * the LATER one always wins a tie regardless of the media query — so
 * the 14px base rule silently overrode the 16px mobile rule for every
 * contact-gate field, on every screen size, the whole time. The main
 * chat input (.leo-ai-chat__input) has no such later re-declaration,
 * which is exactly why it alone rendered correctly at 16px and the bug
 * only ever reproduced on the Name/Email/WhatsApp fields — confirmed
 * against a real iPhone: focusing Email (still 14px) triggered Safari's
 * genuine auto-zoom-on-focus, and because that is a real browser-level
 * zoom (not a CSS transform this plugin applied), nothing in this
 * stylesheet could "undo" it afterwards — the only correct fix is
 * preventing Safari from ever zooming in the first place, by making
 * sure this block's font-size: 16px genuinely is the last word for
 * every focusable text-entry/select control. Keep this block last if
 * any future edit adds another selector shared with an earlier rule.
 *
 * Two distinct iOS Safari problems are fixed here, not just one:
 *
 * 1. The auto-zoom-on-focus/horizontal-clipping bug above — every text
 *    input/select/textarea in this widget must compute to >= 16px on a
 *    real device, not just declare it somewhere in the stylesheet.
 * 2. Vertical clipping (composer hidden behind the keyboard): CSS
 *    alone (vh, position: fixed) tracks the LAYOUT viewport, which
 *    does not shrink when the iOS keyboard opens — only the VISUAL
 *    viewport does. leo-ai-live-chat.js watches window.visualViewport
 *    and publishes --leo-chat-visible-height/--leo-chat-keyboard-offset
 *    on documentElement; both are referenced here with a fallback
 *    (100dvh / 0px) so a browser without visualViewport support, or
 *    the widget before JS has run once, still renders correctly. Width
 *    is deliberately derived from 100dvw (a stable LAYOUT-viewport
 *    unit) rather than anything visualViewport-based, so keyboard-open
 *    state can only ever affect this panel's height/vertical position,
 *    never its width — see AI_INSTRUCTIONS.md.
 */
@media (max-width: 600px) {
	.leo-ai-chat {
		--leo-ai-chat-offset-right: max(var(--leo-chat-mobile-gutter), env(safe-area-inset-right, 0px));
		/*
		 * Rises above the keyboard by --leo-chat-keyboard-offset (the
		 * portion of the layout viewport the keyboard currently
		 * covers) — 0px whenever the keyboard is closed or
		 * visualViewport isn't available, so this is a no-op the rest
		 * of the time.
		 */
		--leo-ai-chat-offset-bottom: calc(var(--leo-chat-mobile-gutter) + var(--leo-chat-keyboard-offset, 0px));
	}

	.leo-ai-chat__panel {
		/*
		 * 100dvw, not visualViewport-derived — horizontal size must stay
		 * stable regardless of keyboard state (see block comment above).
		 */
		width: calc(100dvw - (2 * var(--leo-chat-mobile-gutter)));
		/*
		 * Capped to the real visible height (not the full layout
		 * viewport), so the panel itself never extends behind the
		 * keyboard in the first place — the message area scrolls
		 * inside that bound instead of the whole panel overflowing.
		 */
		max-height: calc(var(--leo-chat-visible-height, 100dvh) - (2 * var(--leo-chat-mobile-gutter)));
		/* A single, inner application of the safe-area inset — never added again to the outer offset above. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.leo-ai-chat__title {
		font-size: 13px;
	}

	.leo-ai-chat__messages,
	.leo-ai-chat__lead-panel {
		/*
		 * Overrides the flex-item default of `min-height: auto` (which
		 * refuses to shrink below content size — the desktop
		 * min-height: 220px above has the same effect there) so this
		 * scrollable area shrinks to fit whatever's actually visible
		 * and scrolls internally, instead of forcing the whole panel
		 * taller than the visible viewport when space is tight (e.g.
		 * the keyboard open on a short screen).
		 */
		min-height: 0;
		/* Governed by the panel's own max-height (flex: 1 above) instead of a second, independent cap. */
		max-height: none;
	}

	/*
	 * 16px is iOS Safari's own auto-zoom-on-focus threshold — see the
	 * block comment above. This IS the actual fix for the real-device
	 * zoom bug, not a cosmetic font-size tweak — every one of these
	 * selectors must have no later, equal-or-higher-specificity
	 * declaration anywhere below this block.
	 */
	.leo-ai-chat__input,
	.leo-ai-chat__lead-form input:not([type="checkbox"]),
	.leo-ai-chat__lead-form select,
	.leo-ai-chat__lead-form textarea {
		font-size: 16px;
	}

	/*
	 * v0.7.1 — compact circular mobile launcher. Desktop keeps the
	 * existing pill (icon + "Chat with Mattress Deal Hub" text)
	 * completely unchanged; only this breakpoint's collapsed/closed
	 * launcher becomes a small round icon-only button, since the full
	 * pill is visually heavy on narrow product pages. Positioning
	 * still comes entirely from the parent .leo-ai-chat container's
	 * existing right/bottom offsets (already safe-area-aware via
	 * --leo-ai-chat-offset-right/--leo-ai-chat-offset-bottom above),
	 * so nothing here needs its own env(safe-area-inset-*) — this
	 * only changes the button's own size/shape. This rule lives in
	 * this trailing media query (not earlier in the file) for the
	 * same cascade-order reason documented above .leo-ai-chat__input:
	 * an unconditional .leo-ai-chat__launcher rule placed after this
	 * block would silently win regardless of specificity.
	 */
	.leo-ai-chat__launcher {
		width: 54px;
		height: 54px;
		padding: 0;
		border-radius: 50%;
		border: 1.5px solid var(--leo-chat-accent);
		justify-content: center;
		gap: 0;
		box-shadow: 0 6px 16px rgba(16, 37, 68, 0.28);
	}

	.leo-ai-chat__launcher-icon,
	.leo-ai-chat__launcher-label {
		display: none;
	}

	.leo-ai-chat__launcher-svg {
		display: block;
	}
}