/* WGL AI Chat — widget styles, scoped under .wgl-ai-chat-* only so it never
   leans on theme classes and survives theme updates.

   Tokens below are sampled from the live webgeniuslab.net homepage (Manrope
   font, #2C46BB primary blue, #04011C heading ink, 10px button radius, the
   light lavender hero gradient #CBD6FF→#fff and the dark navy #1A2150 used
   elsewhere on the site) so the widget reads as part of the page rather than
   a bolted-on support tool. */

:root {
	--wac-font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wac-primary: #6d4af5;
	--wac-primary-dark: #5a38e0;
	--wac-primary-soft: #efebff;
	--wac-page: #f7f7fd;
	--wac-bubble-user: #f1f1f7;
	--wac-ok-bg: #e8f8ef;
	--wac-ok-text: #15a05a;
	--wac-ink: #04011c;
	--wac-text: #3b3b3b;
	--wac-muted: #6b7280;
	--wac-border: #e5e7eb;
	--wac-surface: #ffffff;
	--wac-surface-tint: #f1f3ff;
	--wac-navy: #1a2150;
	--wac-gradient: linear-gradient(135deg, #8a6bff 0%, #6d4af5 55%, #5a38e0 100%);
	--wac-hero-bg: radial-gradient(130% 160% at 12% -10%, #e8e3ff 0%, #f7f7fd 55%, #ffffff 100%);
	--wac-radius-sm: 8px;
	--wac-radius: 14px;
	--wac-radius-lg: 18px;
	--wac-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Box-sizing safety net for every element the widget renders — a theme that
   sets a non-default global box-sizing (or none at all on some element type
   we use) would otherwise make our padding/width math unpredictable. */
.wgl-ai-chat-root,
.wgl-ai-chat-root *,
.wgl-ai-chat-root *::before,
.wgl-ai-chat-root *::after {
	box-sizing: border-box;
}

/* Hard reset for every input/textarea the widget renders. Themes (labstore
   included) often give bare `textarea`/`input` tags their own global
   min-height/line-height for native form fields (here: min-height:50px,
   line-height ~1.7×font-size) — our own rules below only override specific
   properties, so without this reset those theme defaults leak through and
   inflate the composer well past its intended single-line height. */
.wgl-ai-chat-root input,
.wgl-ai-chat-root textarea {
	min-height: 0;
	line-height: 1.4;
	box-sizing: border-box;
	font-family: var( --wac-font );
}

/* The shift variables are set by the script when something else (a theme's
   back-to-top button, a cookie bar) occupies the same corner — see
   keepLauncherClear(). Default 0, so a site with a clear corner gets the
   plain 20px inset. */
#wgl-ai-chat-bubble {
	position: fixed;
	right: calc( 20px + var( --wac-launcher-shift-x, 0px ) );
	bottom: calc( 20px + var( --wac-launcher-shift-y, 0px ) );
	z-index: 99999;
	font-family: var( --wac-font );
}

/* Launcher: a two-line offer, not a label for a mechanism. "Chat with WGL"
   told the visitor what the control is; what sells the click is what they
   get out of it, so the pill carries a title + subtitle and a mark, and is
   sized like a small card rather than a button. */
.wgl-ai-chat-toggle {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	border: 0;
	border-radius: 999px;
	padding: 10px 20px 10px 12px;
	background: var( --wac-gradient );
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba( 44, 70, 187, 0.34 );
	transition: transform 0.2s var( --wac-ease ), box-shadow 0.2s var( --wac-ease );
}

.wgl-ai-chat-toggle:hover {
	transform: translateY( -2px );
	box-shadow: 0 18px 36px rgba( 44, 70, 187, 0.42 );
}

.wgl-ai-chat-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.wgl-ai-chat-toggle-icon {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.18 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.wgl-ai-chat-toggle-icon svg {
	width: 19px;
	height: 19px;
	fill: #fff;
}

/* Presence dot. Deliberately not a number: a "1 unread" badge on a bot that
   has sent nothing is a lie the visitor finds out about on the first click. */
.wgl-ai-chat-toggle-icon::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3ddc84;
	border: 2px solid var( --wac-primary-dark );
}

.wgl-ai-chat-toggle-copy {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wgl-ai-chat-toggle-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.wgl-ai-chat-toggle-sub {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.2;
	opacity: 0.85;
	white-space: nowrap;
}

/* Attention pulse: a short lift plus one expanding ring, a few times, then it
   stops for good (the script caps it and cancels on any interaction). Scaled
   small on purpose — the launcher should catch the eye in peripheral vision,
   not demand the page's attention. */
.wgl-ai-chat-toggle--pulse {
	animation: wgl-ai-chat-nudge 1.3s var( --wac-ease );
}

.wgl-ai-chat-toggle::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
}

.wgl-ai-chat-toggle--pulse::after {
	animation: wgl-ai-chat-ring 1.3s var( --wac-ease );
}

@keyframes wgl-ai-chat-nudge {
	0%, 100% { transform: translateY( 0 ) scale( 1 ); }
	18% { transform: translateY( -4px ) scale( 1.03 ); }
	38% { transform: translateY( 0 ) scale( 1 ); }
	52% { transform: translateY( -2px ) scale( 1.01 ); }
}

@keyframes wgl-ai-chat-ring {
	0% { opacity: 0.55; box-shadow: 0 0 0 0 rgba( 109, 74, 245, 0.5 ); }
	100% { opacity: 0; box-shadow: 0 0 0 18px rgba( 109, 74, 245, 0 ); }
}

/* Teaser: one short speech bubble above the launcher, once per visit. The
   whole text is a button, so the common case (reading it and wanting in) is
   one click anywhere on it, with the × reserved for "no". */
.wgl-ai-chat-teaser {
	position: absolute;
	right: 0;
	bottom: calc( 100% + 12px );
	width: 268px;
	max-width: calc( 100vw - 48px );
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 12px 10px 12px 14px;
	background: var( --wac-surface );
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 16px 40px rgba( 4, 1, 28, 0.18 );
	opacity: 1;
	transform: translateY( 0 );
	transition: opacity 0.28s var( --wac-ease ), transform 0.28s var( --wac-ease );
}

.wgl-ai-chat-teaser--hidden {
	opacity: 0;
	transform: translateY( 8px );
	pointer-events: none;
}

.wgl-ai-chat-teaser-text {
	flex: 1 1 auto;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	color: var( --wac-ink );
	text-align: left;
	cursor: pointer;
}

.wgl-ai-chat-teaser-close {
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 0 2px;
	font-size: 18px;
	line-height: 1;
	color: var( --wac-muted );
	cursor: pointer;
}

.wgl-ai-chat-teaser-close:hover {
	color: var( --wac-ink );
}

.wgl-ai-chat-panel {
	display: flex;
	flex-direction: column;
	background: var( --wac-surface );
	color: var( --wac-text );
	font-family: var( --wac-font );
	border-radius: var( --wac-radius-lg );
	box-shadow: 0 20px 50px rgba( 4, 1, 28, 0.18 );
	overflow: hidden;
}

/* Floating bubble: open/close is an animated fade + rise instead of an
   instant display:none swap, so it never reads as a page reload/jump.

   The panel is its own `position: fixed` box anchored straight to the
   viewport — NOT `position: absolute` inside #wgl-ai-chat-bubble (which only
   shrink-wraps the toggle button, ~140px wide, far narrower than the panel)
   and NOT sized with `100vw` (which includes the scrollbar gutter on
   desktop browsers with classic scrollbars, pushing a flush-right panel
   partly off the left edge of the screen). `%` on a fixed-position element
   resolves against the visual viewport, scrollbar excluded, which is what
   actually keeps this on-screen at every width. */
#wgl-ai-chat-bubble .wgl-ai-chat-panel {
	position: fixed;
	right: 20px;
	bottom: 80px;
	width: min(360px, calc(100% - 40px));
	height: min(520px, calc(100% - 140px));
	transform-origin: bottom right;
	opacity: 1;
	transform: scale( 1 ) translateY( 0 );
	transition: opacity 0.22s var( --wac-ease ), transform 0.22s var( --wac-ease );
}

#wgl-ai-chat-bubble .wgl-ai-chat-panel--collapsed {
	opacity: 0;
	transform: scale( 0.96 ) translateY( 10px );
	pointer-events: none;
}

/* Phones: the launcher drops its second line (there is no room for it next
   to a 40px tap target) and the panel becomes a near-full-height sheet
   instead of a 360px card floating in the middle of a small screen. */
@media ( max-width: 480px ) {
	#wgl-ai-chat-bubble {
		right: calc( 12px + var( --wac-launcher-shift-x, 0px ) );
		bottom: calc( 12px + var( --wac-launcher-shift-y, 0px ) );
	}

	.wgl-ai-chat-toggle {
		padding: 9px 16px 9px 10px;
	}

	.wgl-ai-chat-toggle-sub {
		display: none;
	}

	.wgl-ai-chat-toggle-title {
		font-size: 13.5px;
	}

	#wgl-ai-chat-bubble .wgl-ai-chat-panel {
		right: 12px;
		bottom: 12px;
		width: calc( 100% - 24px );
		height: min( 560px, calc( 100% - 24px ) );
		border-radius: 18px;
	}

	.wgl-ai-chat-teaser {
		width: 240px;
	}
}

/* Short viewports (landscape phones, small laptops with browser chrome): the
   panel is sized from the viewport already, this just keeps the launcher from
   being pushed under it. */
@media ( max-height: 560px ) {
	#wgl-ai-chat-bubble .wgl-ai-chat-panel {
		height: calc( 100% - 24px );
		bottom: 12px;
	}
}

.wgl-ai-chat-panel--inline {
	width: 100%;
	font-family: var( --wac-font );
}

/* Search-bar hero: this is the homepage-embedded [wgl_ai_chat] state before
   the visitor has typed anything. Framed as its own soft-gradient card
   (rather than bare transparent text on the page background) so it reads as
   a marketing feature section — the "AI theme finder" — instead of a plain
   contact form dropped into the content. The thread below still gets its
   own separate "chat app" box treatment once a conversation is showing. */
.wgl-ai-chat-panel--search {
	position: relative;
	/* Matches labstore's own content container (the theme's standard
	   1170px width, e.g. catalog preview images are sized "1170/…") —
	   760px left it reading as a narrow card floating in the middle of a
	   full-width page section instead of a proportional content block. */
	max-width: 1160px;
	margin: 0 auto;
	background: var( --wac-hero-bg );
	border-radius: 28px;
	padding: 40px 32px;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.7 ) inset, 0 24px 60px rgba( 76, 60, 170, 0.1 );
	overflow: hidden;
}

/* Two small decorative dash clusters, echoing a hand-drawn "sparkle" accent
   next to the search bar in a lot of AI-product marketing pages. Purely
   ornamental — hidden on narrow screens where there's no room to spare and
   they'd just read as visual noise next to the input. */
.wgl-ai-chat-panel--search::before,
.wgl-ai-chat-panel--search::after {
	content: '';
	position: absolute;
	width: 36px;
	height: 36px;
	background-image: repeating-linear-gradient( 135deg, var( --wac-primary ) 0 2px, transparent 2px 9px );
	opacity: 0.3;
	pointer-events: none;
}

.wgl-ai-chat-panel--search::before {
	top: 22px;
	left: 14px;
}

.wgl-ai-chat-panel--search::after {
	bottom: 22px;
	right: 14px;
	transform: rotate( 180deg );
}

@media ( max-width: 600px ) {
	.wgl-ai-chat-panel--search {
		padding: 28px 20px;
		border-radius: 20px;
	}

	.wgl-ai-chat-panel--search::before,
	.wgl-ai-chat-panel--search::after {
		display: none;
	}
}

.wgl-ai-chat-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var( --wac-primary-soft );
	color: var( --wac-primary-dark );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.wgl-ai-chat-hero-badge-icon {
	font-size: 12px;
	line-height: 1;
}

.wgl-ai-chat-hero-title-accent {
	background: var( --wac-gradient );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Heading (title + subtitle) is permanent context for the whole widget, not
   just empty-state copy — it stays visible for the entire conversation. Only
   `.wgl-ai-chat-hero-starter` (the big search input + example chips) folds
   away once the visitor sends a first message, since the composer further
   down takes over input from there. */
.wgl-ai-chat-hero-heading {
	text-align: center;
	padding: 8px 0 18px;
}

.wgl-ai-chat-hero-starter {
	text-align: center;
	padding-bottom: 28px;
	max-height: 260px;
	opacity: 1;
	transform: translateY( 0 );
	overflow: hidden;
	transition: opacity 0.35s var( --wac-ease ), transform 0.35s var( --wac-ease ),
		max-height 0.4s var( --wac-ease ), padding 0.4s var( --wac-ease );
}

.wgl-ai-chat-hero--collapsed {
	opacity: 0;
	transform: translateY( -16px );
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
}

.wgl-ai-chat-hero-title {
	font-family: var( --wac-font );
	font-size: clamp( 22px, 3vw, 32px );
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px;
	color: var( --wac-ink );
}

.wgl-ai-chat-hero-subtitle {
	font-size: 15px;
	color: var( --wac-muted );
	margin: 0 0 22px;
}

.wgl-ai-chat-hero-form {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 820px;
	margin: 0 auto;
	background: var( --wac-surface );
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-lg );
	padding: 6px 6px 6px 18px;
	box-shadow: 0 16px 36px rgba( 4, 1, 28, 0.1 );
	transition: box-shadow 0.2s var( --wac-ease ), border-color 0.2s var( --wac-ease );
}

.wgl-ai-chat-hero-form-icon {
	flex: 0 0 auto;
	color: var( --wac-primary );
	font-size: 15px;
	line-height: 1;
}

.wgl-ai-chat-hero-form:focus-within {
	border-color: var( --wac-primary );
	box-shadow: 0 16px 36px rgba( 44, 70, 187, 0.18 );
}

/* `.wgl-ai-chat-root` ancestor scoping on every rule below is load-bearing,
   not decoration: labstore's main.css carries one blanket rule targeting
   `input[type="text"], input[type="email"], …, textarea` (attribute
   selector, specificity 0,1,1) that sets height:50px, margin:0 0 24px,
   border-width:0 0 1px, line-height:1.7, background:transparent — on EVERY
   text field on the site, focused or not. A bare single class (0,1,0) loses
   that fight. `.wgl-ai-chat-root .wgl-ai-chat-X` is 0,2,0, which wins
   outright, so every property that global rule touches is reasserted here
   explicitly rather than assumed to already be "normal". */
.wgl-ai-chat-root .wgl-ai-chat-hero-input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	border: 0;
	outline: none;
	background-color: transparent;
	font-size: 16px;
	line-height: 1.4;
	font-family: inherit;
	padding: 14px 0;
	color: var( --wac-ink );
	/* A long example placeholder ("Type what you need… e.g. …") plus the
	   wider labelled CTA button next to it can outgrow the available width
	   on mid-size viewports — truncate with an ellipsis instead of letting
	   the text visually run under the button. Typed input itself is never
	   this long in practice, but the rule applies to it too if it were. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same leaked theme :focus rule as .wgl-ai-chat-input (see its comment) would
   otherwise draw a bottom border across this borderless pill input — the
   wrapping .wgl-ai-chat-hero-form already shows the focus state instead. */
.wgl-ai-chat-root .wgl-ai-chat-hero-input:focus {
	outline: none;
	border-width: 0;
	background-color: transparent;
	box-shadow: none;
}

.wgl-ai-chat-hero-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: var( --wac-radius );
	background: var( --wac-gradient );
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba( 109, 74, 245, 0.3 );
	transition: filter 0.2s var( --wac-ease ), transform 0.2s var( --wac-ease ), box-shadow 0.2s var( --wac-ease );
}

.wgl-ai-chat-hero-submit:hover {
	filter: brightness( 1.06 );
	transform: translateY( -1px );
	box-shadow: 0 14px 28px rgba( 109, 74, 245, 0.38 );
}

.wgl-ai-chat-hero-submit-arrow {
	font-size: 15px;
}

/* Below this the full "Find My Perfect Theme" label would crowd the input on
   a phone-width screen — fall back to an icon-only circular button, same as
   the original design, rather than wrapping or truncating the label. */
@media ( max-width: 480px ) {
	.wgl-ai-chat-hero-submit {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
	}

	.wgl-ai-chat-hero-submit-label {
		display: none;
	}
}

.wgl-ai-chat-suggestions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.wgl-ai-chat-suggestions-label {
	font-size: 13px;
	font-weight: 600;
	color: var( --wac-muted );
	margin-right: 2px;
}

.wgl-ai-chat-suggestion-chip {
	border: 1px solid var( --wac-border );
	background: var( --wac-surface-tint );
	border-radius: 999px;
	padding: 7px 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var( --wac-ink );
	cursor: pointer;
	transition: background 0.2s var( --wac-ease ), border-color 0.2s var( --wac-ease ), color 0.2s var( --wac-ease );
}

.wgl-ai-chat-suggestion-chip:hover {
	background: #e3e7fa;
	border-color: #c7d2fe;
	color: var( --wac-primary );
}

/* Thread/composer: hidden state is an animated collapse (max-height+opacity),
   not display:none, so revealing them after the hero submits feels like one
   continuous motion rather than a jump-cut. */
.wgl-ai-chat-thread,
.wgl-ai-chat-composer {
	transition: opacity 0.35s var( --wac-ease ) 0.08s, transform 0.35s var( --wac-ease ) 0.08s,
		max-height 0.4s var( --wac-ease ), margin 0.4s var( --wac-ease ), border-color 0.3s;
}

.wgl-ai-chat-thread.wgl-ai-chat-thread--hidden,
.wgl-ai-chat-composer.wgl-ai-chat-composer--hidden {
	opacity: 0;
	transform: translateY( 10px );
	max-height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-color: transparent;
	pointer-events: none;
	overflow: hidden;
}

.wgl-ai-chat-panel--search .wgl-ai-chat-thread:not(.wgl-ai-chat-thread--hidden) {
	max-height: 440px;
	border: 1px solid var( --wac-border );
	/* Top corners only — the composer directly below rounds the bottom two,
	   and the two boxes share a flush edge (composer's border-top is none).
	   Rounding all four corners here left the composer's square top corners
	   poking out past the thread's rounded bottom corners at the seam. */
	border-radius: var( --wac-radius-lg ) var( --wac-radius-lg ) 0 0;
	background: var( --wac-surface );
	box-shadow: 0 16px 36px rgba( 4, 1, 28, 0.08 );
}

.wgl-ai-chat-panel--search .wgl-ai-chat-composer {
	border: 1px solid var( --wac-border );
	border-top: none;
	border-radius: 0 0 var( --wac-radius-lg ) var( --wac-radius-lg );
	background: var( --wac-surface );
}

.wgl-ai-chat-panel--search .wgl-ai-chat-composer:not(.wgl-ai-chat-composer--hidden) {
	/* Explicit cap (not "none") so the max-height transition from the hidden
	   state has a real numeric target to animate toward instead of snapping.
	   Matches the composer's actual natural height (single-line input + its
	   own padding) — see the input/textarea reset below for why this used to
	   render much taller than this. */
	max-height: 72px;
}

.wgl-ai-chat-header {
	padding: 14px 16px;
	font-weight: 600;
	background: var( --wac-navy );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wgl-ai-chat-close {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	opacity: 0.8;
}

.wgl-ai-chat-panel--inline .wgl-ai-chat-close {
	display: none;
}

.wgl-ai-chat-thread {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wgl-ai-chat-bubble {
	max-width: 85%;
	padding: 10px 12px;
	border-radius: var( --wac-radius );
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
}

.wgl-ai-chat-bubble--user {
	align-self: flex-end;
	background: var( --wac-primary );
	color: #fff;
	border-bottom-right-radius: 4px;
}

.wgl-ai-chat-bubble--assistant {
	align-self: flex-start;
	background: var( --wac-surface-tint );
	color: var( --wac-ink );
	border-bottom-left-radius: 4px;
}

.wgl-ai-chat-composer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var( --wac-border );
}

.wgl-ai-chat-root .wgl-ai-chat-input {
	flex: 1;
	resize: none;
	margin: 0;
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-sm );
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
	background-color: var( --wac-surface );
	/* 44, not 40: border-box height minus padding(20)+border(2) must clear one
	   line at this line-height (1.4×14px ≈ 19.6px) with room to spare — at
	   40px it fell ~1.6px short and the textarea grew a permanent scrollbar
	   track for a single line of text that was never actually scrollable. */
	height: 44px;
	max-height: 90px;
	overflow-y: hidden;
	transition: border-color 0.2s var( --wac-ease );
}

/* .wgl-ai-chat-root-scoped + both classes: specificity (0,3,0), well above
   labstore's global `textarea:focus { border-width: 0 0 1px; ... }` (a
   WooCommerce-block "underline" focus style, (0,1,1)) — that rule only sets
   border-width/background-color/box-shadow, properties our old :focus rule
   never touched, so it was winning the cascade on exactly those properties
   and collapsing this to a bottom-only underline. Set them all explicitly. */
.wgl-ai-chat-root .wgl-ai-chat-input:focus {
	outline: none;
	border-width: 1px;
	border-style: solid;
	border-color: var( --wac-primary );
	background-color: var( --wac-surface );
	box-shadow: none;
}

.wgl-ai-chat-send {
	flex-shrink: 0;
	border: 0;
	border-radius: var( --wac-radius-sm );
	height: 44px;
	padding: 0 16px;
	background: var( --wac-primary );
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s var( --wac-ease );
}

.wgl-ai-chat-send:hover:not(:disabled) {
	background: var( --wac-primary-dark );
}

.wgl-ai-chat-send:disabled {
	opacity: 0.5;
	cursor: default;
}

/* One card per row. `auto-fill` with a 140px minimum used to leave a phantom
   second column whenever fewer cards came back than fit, so a single
   recommendation rendered as a 141px card in a 335px panel with its title
   wrapped over four lines. The bubble is ~340px wide at best, so a row is
   all there is room for anyway. */
.wgl-ai-chat-themes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.wgl-ai-chat-theme-card {
	display: block;
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-sm );
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var( --wac-surface );
	transition: box-shadow 0.2s var( --wac-ease ), transform 0.2s var( --wac-ease );
}

.wgl-ai-chat-theme-card:hover {
	box-shadow: 0 10px 24px rgba( 4, 1, 28, 0.12 );
	transform: translateY( -2px );
}

/* Letter placeholder sits underneath; a successfully loaded preview image
   covers it completely. If the image 404s (catalog preview_image paths
   aren't public URLs yet), its own error handler removes the <img> and the
   placeholder shows through — no broken-image icon. */
.wgl-ai-chat-theme-thumb {
	position: relative;
	width: 100%;
	/* Full-width card (one per row), so the preview gets a real aspect ratio
	   instead of the 80px letterbox the two-column grid needed. */
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --wac-surface-tint ), #e3e7fa );
	color: var( --wac-primary );
	font-family: var( --wac-font );
	font-size: 22px;
	font-weight: 700;
	overflow: hidden;
}

.wgl-ai-chat-theme-thumb img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wgl-ai-chat-theme-title {
	font-size: 13px;
	font-weight: 600;
	color: var( --wac-ink );
	padding: 8px 8px 0;
}

.wgl-ai-chat-theme-price {
	font-size: 12px;
	color: var( --wac-muted );
	padding: 2px 8px;
}

.wgl-ai-chat-theme-cta {
	font-size: 12px;
	font-weight: 600;
	color: var( --wac-primary );
	padding: 0 8px 8px;
}

.wgl-ai-chat-lead {
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-sm );
	padding: 10px;
	background: var( --wac-surface-tint );
}

.wgl-ai-chat-lead-prompt {
	font-size: 13px;
	color: var( --wac-ink );
	margin-bottom: 8px;
}

.wgl-ai-chat-lead-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wgl-ai-chat-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.wgl-ai-chat-root .wgl-ai-chat-lead-email {
	height: auto;
	margin: 0;
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-sm );
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.4;
	font-family: inherit;
	background-color: var( --wac-surface );
}

.wgl-ai-chat-root .wgl-ai-chat-lead-email:focus {
	outline: none;
	border-width: 1px;
	border-style: solid;
	border-color: var( --wac-primary );
	background-color: var( --wac-surface );
	box-shadow: none;
}

.wgl-ai-chat-consent {
	font-size: 12px;
	color: var( --wac-muted );
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.wgl-ai-chat-consent input[type="checkbox"] {
	/* Broadly supported (Chrome/Firefox/Safari 15.4+/Edge) — retints the
	   native checkbox to the brand blue instead of the OS/browser default
	   (often a generic grey or system accent) without a full custom-checkbox
	   rebuild. */
	accent-color: var( --wac-primary );
	margin-top: 2px;
	flex-shrink: 0;
}

.wgl-ai-chat-privacy {
	font-size: 12px;
	color: var( --wac-primary );
}

.wgl-ai-chat-lead-actions {
	display: flex;
	gap: 8px;
}

.wgl-ai-chat-lead-submit {
	border: 0;
	border-radius: var( --wac-radius-sm );
	padding: 8px 14px;
	background: var( --wac-primary );
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s var( --wac-ease );
}

.wgl-ai-chat-lead-submit:hover {
	background: var( --wac-primary-dark );
}

.wgl-ai-chat-lead-skip {
	border: 0;
	border-radius: var( --wac-radius-sm );
	padding: 8px 14px;
	background: transparent;
	color: var( --wac-muted );
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.wgl-ai-chat-lead-result {
	font-size: 13px;
	color: #065f46;
}

/* -------------------------------------------------------------------------
 * Expanded two-pane layout
 *
 * Only the inline embed splits into conversation + matches. The floating
 * bubble panel is 360px wide, so two columns there would leave both unusable;
 * it keeps rendering theme cards inline in the thread.
 * ---------------------------------------------------------------------- */

.wgl-ai-chat-root .wgl-ai-chat-panel--split {
	display: block;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
}

/* The grid lives on the inner wrapper, not the panel: the panel also holds the
   (collapsed) hero above it, and making the panel itself the grid put the hero
   in one cell and both panes in the other — they stacked instead of sitting
   side by side. */
.wgl-ai-chat-root .wgl-ai-chat-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	/* stretch, not start: the two cards must read as one block, so the shorter
	   pane grows to the taller one's height instead of ending mid-air. The
	   panes handle the extra space themselves (see the flex rules below) —
	   with plain stretch alone the leftover height just pools at the bottom. */
	align-items: stretch;
}

.wgl-ai-chat-root .wgl-ai-chat-pane {
	min-width: 0;
	/* Flex column so a stretched pane can decide where its slack goes: the
	   conversation keeps the composer pinned to the bottom edge, the matches
	   list simply ends after the last card. */
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* Caps the whole two-pane block so a long conversation or a long matches
	   list scrolls inside its own pane instead of growing the embed further
	   down the page on every reply. min() keeps the cap from overflowing a
	   short viewport (mobile browser chrome eats a chunk of 100vh). */
	max-height: min( 640px, 72vh );
	background: var(--wac-surface);
	border: 1px solid var(--wac-border);
	border-radius: 22px;
	box-shadow: 0 10px 40px rgba(29, 18, 83, 0.06);
	padding: 22px;
}

/* Both panes keep their own scroll: whichever side is shorter gains empty
   space, never a second scrollbar on the page. */
.wgl-ai-chat-root .wgl-ai-chat-matches-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Below this the two panes stop being readable side by side and stack. */
@media (max-width: 900px) {
	.wgl-ai-chat-root .wgl-ai-chat-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Conversation ------------------------------------------------------ */

.wgl-ai-chat-root .wgl-ai-chat-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
}

.wgl-ai-chat-root .wgl-ai-chat-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	background: var(--wac-primary);
	overflow: hidden;
}

.wgl-ai-chat-root .wgl-ai-chat-avatar--user {
	background: #d7d7e4;
	color: #5b5b70;
}

.wgl-ai-chat-root .wgl-ai-chat-row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.wgl-ai-chat-root .wgl-ai-chat-row .wgl-ai-chat-bubble {
	display: block;
	max-width: none;
	margin: 0;
	padding: 14px 16px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-wrap;
}

.wgl-ai-chat-root .wgl-ai-chat-row--user .wgl-ai-chat-bubble {
	background: var(--wac-bubble-user);
	color: var(--wac-ink);
}

.wgl-ai-chat-root .wgl-ai-chat-row--assistant .wgl-ai-chat-bubble {
	background: var(--wac-primary-soft);
	color: var(--wac-ink);
}

.wgl-ai-chat-root .wgl-ai-chat-time {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--wac-muted);
	padding-top: 14px;
	font-variant-numeric: tabular-nums;
}

/* --- Matches pane ------------------------------------------------------ */

.wgl-ai-chat-root .wgl-ai-chat-matches-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.wgl-ai-chat-root .wgl-ai-chat-matches-title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	color: var(--wac-ink);
	letter-spacing: -0.01em;
}

.wgl-ai-chat-root .wgl-ai-chat-matches-empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wac-muted);
}

.wgl-ai-chat-root .wgl-ai-chat-match {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--wac-border);
}

.wgl-ai-chat-root .wgl-ai-chat-match:first-of-type {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 560px) {
	.wgl-ai-chat-root .wgl-ai-chat-match {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wgl-ai-chat-root .wgl-ai-chat-match-thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wac-primary) 0%, var(--wac-primary-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
}

.wgl-ai-chat-root .wgl-ai-chat-match-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wgl-ai-chat-root .wgl-ai-chat-match-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
}

.wgl-ai-chat-root .wgl-ai-chat-match-name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--wac-ink);
	letter-spacing: -0.01em;
}

.wgl-ai-chat-root .wgl-ai-chat-match-rank {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--wac-ok-bg);
	color: var(--wac-ok-text);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.wgl-ai-chat-root .wgl-ai-chat-match-summary {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wac-text);
}

.wgl-ai-chat-root .wgl-ai-chat-match-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 12px;
}

.wgl-ai-chat-root .wgl-ai-chat-match-tag {
	padding: 4px 10px;
	border: 1px solid var(--wac-border);
	border-radius: 7px;
	font-size: 12px;
	color: var(--wac-text);
	background: var(--wac-surface);
	white-space: nowrap;
}

.wgl-ai-chat-root .wgl-ai-chat-match-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wgl-ai-chat-root .wgl-ai-chat-match-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s var(--wac-ease), color 0.15s var(--wac-ease);
}

.wgl-ai-chat-root .wgl-ai-chat-match-btn--primary {
	background: var(--wac-primary);
	color: #fff;
}

.wgl-ai-chat-root .wgl-ai-chat-match-btn--primary:hover {
	background: var(--wac-primary-dark);
	color: #fff;
}

.wgl-ai-chat-root .wgl-ai-chat-match-btn--ghost {
	background: var(--wac-surface);
	color: var(--wac-ink);
	border-color: var(--wac-border);
}

.wgl-ai-chat-root .wgl-ai-chat-match-btn--ghost:hover {
	background: var(--wac-page);
	color: var(--wac-ink);
}

/* --- Composer + chips in split mode ------------------------------------ */

.wgl-ai-chat-root .wgl-ai-chat-panel--split .wgl-ai-chat-thread {
	border: 0;
	border-radius: 0;
	background: transparent;
	/* Shrinkable but never grown past its cap: when this pane is stretched to
	   match a taller matches pane, the slack goes to the composer's auto
	   margin below, not into a half-empty scroll area. */
	flex: 0 1 auto;
	max-height: 420px;
	/* Right padding clears the scrollbar gutter: without it the timestamp,
	   which sits in the row's last column, is drawn under the scrollbar and
	   loses its final digits once the thread is long enough to scroll.
	   Bottom padding is the gap to the composer, which can no longer carry it
	   as a margin (it needs margin-top:auto to sit on the pane's bottom). */
	padding: 0 10px 16px 0;
}

.wgl-ai-chat-root .wgl-ai-chat-panel--split .wgl-ai-chat-composer {
	border: 1px solid var(--wac-border);
	border-radius: 14px;
	padding: 8px 8px 8px 16px;
	/* auto pushes the composer to the pane's bottom edge when this pane is
	   stretched to match a taller matches pane; the 16px that used to live
	   here as margin-top moved to the thread's padding-bottom, because an
	   auto margin can't also guarantee a minimum gap. */
	margin-top: auto;
	background: var(--wac-surface);
	gap: 10px;
}

.wgl-ai-chat-root .wgl-ai-chat-panel--split .wgl-ai-chat-send {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 11px;
	font-size: 0;
	position: relative;
}

/* The send button is an icon in this layout; the label stays in the DOM for
   screen readers but is visually replaced by an arrow glyph. */
.wgl-ai-chat-root .wgl-ai-chat-panel--split .wgl-ai-chat-send::after {
	content: "➤";
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

.wgl-ai-chat-root .wgl-ai-chat-chips-below {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 14px;
}

.wgl-ai-chat-root .wgl-ai-chat-chips-below .wgl-ai-chat-suggestion-chip {
	border-radius: 9px;
	font-size: 13px;
	padding: 8px 14px;
}

/* The heading stays above both panes for the whole conversation (it is the
   widget's "what is this" context), so it needs its own breathing room once
   the hero's search bar below it has folded away. */
.wgl-ai-chat-root .wgl-ai-chat-panel--split .wgl-ai-chat-hero-heading {
	padding: 4px 0 22px;
}

/* --- Contextual lead capture -------------------------------------------
   Three scenarios share one visual language, built from the tokens already
   defined at the top of this file (no new colours, radii or shadows): a soft
   tinted block with the brand gradient on its single primary action, and a
   quiet text button to dismiss it. Deliberately understated — this appears
   next to recommendations the visitor is still reading, and must not compete
   with them. */

.wgl-ai-chat-root .wgl-ai-chat-offer {
	margin: 14px 0 0;
	padding: 14px 16px;
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius );
	background: var( --wac-surface-tint );
	animation: wgl-ai-chat-offer-in 0.28s var( --wac-ease ) both;
}

@keyframes wgl-ai-chat-offer-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wgl-ai-chat-root .wgl-ai-chat-offer {
		animation: none;
	}

	/* The script already declines to schedule the attention pulse for these
	   visitors; this is the belt-and-braces half, and it also covers the
	   teaser's entry transition. */
	.wgl-ai-chat-toggle,
	.wgl-ai-chat-toggle--pulse,
	.wgl-ai-chat-toggle--pulse::after,
	.wgl-ai-chat-teaser {
		animation: none !important;
		transition: none !important;
	}
}

.wgl-ai-chat-root .wgl-ai-chat-offer-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --wac-ink );
}

.wgl-ai-chat-root .wgl-ai-chat-offer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wgl-ai-chat-root .wgl-ai-chat-offer-cta {
	border: 0;
	border-radius: var( --wac-radius-sm );
	padding: 10px 16px;
	background: var( --wac-gradient );
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.2s var( --wac-ease ), transform 0.2s var( --wac-ease );
}

.wgl-ai-chat-root .wgl-ai-chat-offer-cta:hover {
	filter: brightness( 1.06 );
	transform: translateY( -1px );
}

.wgl-ai-chat-root .wgl-ai-chat-offer-dismiss {
	border: 0;
	background: none;
	padding: 6px 2px;
	font-family: inherit;
	font-size: 13px;
	color: var( --wac-muted );
	cursor: pointer;
	text-decoration: underline;
}

.wgl-ai-chat-root .wgl-ai-chat-offer-dismiss:hover {
	color: var( --wac-ink );
}

.wgl-ai-chat-root .wgl-ai-chat-offer--open {
	background: var( --wac-surface );
}

/* --- Consultation form modal (Contact Form 7 lives inside) --------------- */

.wgl-ai-chat-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	font-family: var( --wac-font );
}

.wgl-ai-chat-modal--open {
	display: block;
}

.wgl-ai-chat-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 4, 1, 28, 0.45 );
}

.wgl-ai-chat-modal-dialog {
	position: relative;
	margin: 6vh auto;
	width: min( 560px, calc( 100% - 32px ) );
	max-height: 88vh;
	overflow-y: auto;
	background: var( --wac-surface );
	border-radius: var( --wac-radius-lg );
	box-shadow: 0 24px 60px rgba( 4, 1, 28, 0.28 );
	animation: wgl-ai-chat-offer-in 0.24s var( --wac-ease ) both;
}

.wgl-ai-chat-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 0;
}

.wgl-ai-chat-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var( --wac-ink );
}

.wgl-ai-chat-modal-close {
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var( --wac-muted );
	cursor: pointer;
	padding: 0 4px;
}

.wgl-ai-chat-modal-close:hover {
	color: var( --wac-ink );
}

.wgl-ai-chat-modal-body {
	padding: 14px 20px 22px;
}

.wgl-ai-chat-modal-intro,
.wgl-ai-chat-modal-loading,
.wgl-ai-chat-modal-error {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var( --wac-muted );
}

/* CF7 renders its own markup; only the bits that would otherwise inherit the
   theme's form styling are normalised here, so the form reads as part of the
   widget without overriding CF7's own validation styling. */
.wgl-ai-chat-root .wgl-ai-chat-modal-form .wpcf7-form-control,
.wgl-ai-chat-modal-form input[type="text"],
.wgl-ai-chat-modal-form input[type="email"],
.wgl-ai-chat-modal-form input[type="url"],
.wgl-ai-chat-modal-form textarea,
.wgl-ai-chat-modal-form select {
	width: 100%;
	margin: 0 0 12px;
	padding: 11px 14px;
	border: 1px solid var( --wac-border );
	border-radius: var( --wac-radius-sm );
	background: var( --wac-surface );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var( --wac-ink );
	box-sizing: border-box;
}

.wgl-ai-chat-modal-form textarea {
	min-height: 96px;
	resize: vertical;
}

.wgl-ai-chat-modal-form input[type="submit"],
.wgl-ai-chat-modal-form .wpcf7-submit {
	width: auto;
	border: 0;
	border-radius: var( --wac-radius-sm );
	padding: 12px 22px;
	background: var( --wac-gradient );
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.wgl-ai-chat-modal-form input[type="submit"]:hover,
.wgl-ai-chat-modal-form .wpcf7-submit:hover {
	filter: brightness( 1.06 );
}

.wgl-ai-chat-modal-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --wac-ink );
	margin-bottom: 4px;
}