/**
 * Leadgen Go — front-end styles.
 *
 * Every colour resolves to a theme.json preset with a hex fallback, so the
 * plugin follows the active theme's palette but still renders correctly on a
 * theme that does not define one. That fallback pattern is the whole contract
 * between this plugin and the theme.
 */

/* Must come first: every component below sets `display`, which would otherwise
   defeat the `hidden` attribute. */
.lgo-quiz [hidden],
.lgo-chat [hidden],
.lgo-popup[hidden],
.lgo-popup [hidden],
.lgo-quiz__form[hidden],
.lgo-sticky-call[hidden] { display: none !important; }

.lgo-quiz,
.lgo-chat,
.lgo-popup,
.lgo-widget,
.lgo-legal,
.lgo-sticky-call,
.lgo-btn {
	--lgo-primary: var( --wp--preset--color--primary, #de1920 );
	--lgo-primary-dark: var( --wp--preset--color--primary-dark, #b4141a );
	--lgo-primary-soft: var( --wp--preset--color--primary-soft, #fdecec );
	--lgo-navy: var( --wp--preset--color--navy, #032140 );
	--lgo-success: var( --wp--preset--color--success, #22c55e );
	--lgo-success-soft: var( --wp--preset--color--success-soft, #e8faef );
	--lgo-panel: var( --wp--preset--color--panel, #f0f6fe );
	--lgo-ink: var( --wp--preset--color--ink, #111827 );
	--lgo-muted: var( --wp--preset--color--ink-muted, #5b6472 );
	--lgo-border: var( --wp--preset--color--border, #e3e8ef );
	--lgo-surface: var( --wp--preset--color--surface, #fff );
	--lgo-radius-pill: var( --wp--custom--radius--pill, 100px );
	--lgo-radius-card: var( --wp--custom--radius--card, 1rem );
	--lgo-radius-input: var( --wp--custom--radius--input, 0.75rem );
	--lgo-shadow-card: var( --wp--preset--shadow--card, 0 4px 24px rgba( 3, 33, 64, 0.08 ) );
	--lgo-shadow-pop: var( --wp--preset--shadow--pop, 0 24px 64px rgba( 3, 33, 64, 0.22 ) );
	--lgo-font-head: var( --wp--preset--font-family--heading, system-ui, sans-serif );
	--lgo-font-body: var( --wp--preset--font-family--body, system-ui, sans-serif );
	--lgo-tap: 48px;

	/* Derived shades, so no brand colour is ever written out twice. With the
	   original red and green these resolve to exactly the values the plugin
	   used to hard-code. */
	--lgo-primary-ring: color-mix( in srgb, var( --lgo-primary ) 12%, transparent );
	--lgo-primary-glow: color-mix( in srgb, var( --lgo-primary ) 32%, transparent );
	--lgo-success-dark: var( --wp--preset--color--success-dark, color-mix( in srgb, var( --lgo-success ) 82%, #000 ) );
	--lgo-success-ink: color-mix( in srgb, var( --lgo-success ) 65%, #000 );

	/* Errors follow a theme's `danger` colour when it has one. A red brand
	   (the original) has no need: its primary already reads as an error. */
	--lgo-danger: var( --wp--preset--color--danger, var( --lgo-primary ) );
}

/* --------------------------------------------------------------------------
   Shared controls
   -------------------------------------------------------------------------- */

.lgo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var( --lgo-tap );
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var( --lgo-radius-input );
	font-family: var( --lgo-font-head );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.lgo-btn--primary { background: var( --lgo-primary ); color: #fff; }
.lgo-btn--primary:hover { background: var( --lgo-primary-dark ); color: #fff; }

.lgo-btn--submit {
	width: 100%;
	background: var( --lgo-success );
	color: #fff;
	border-radius: var( --lgo-radius-pill );
	font-size: 1.0625rem;
}

.lgo-btn--submit:hover { background: var( --lgo-success-dark ); color: #fff; }

.lgo-btn--ghost {
	background: transparent;
	color: var( --lgo-muted );
	padding-inline: 0.75rem;
}

.lgo-btn--ghost:hover { color: var( --lgo-ink ); }

.lgo-btn:disabled,
.lgo-btn.is-loading { opacity: 0.65; cursor: progress; }

.lgo-btn:focus-visible {
	outline: 3px solid var( --lgo-navy );
	outline-offset: 2px;
}

/* Off-canvas rather than display:none — bots skip hidden fields. */
.lgo-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */

.lgo-quiz {
	container-type: inline-size;
	background: var( --lgo-panel );
	border-radius: var( --lgo-radius-card );
	box-shadow: var( --lgo-shadow-card );
	padding: 1.25rem;
	font-family: var( --lgo-font-body );
	color: var( --lgo-ink );
	text-align: left;
}

@media ( min-width: 48em ) {
	.lgo-quiz { padding: 1.75rem; }
}

/* Without JavaScript every step is visible: one long, working form. */
.lgo-quiz__step {
	border: 0;
	margin: 0 0 1.75rem;
	padding: 0;
}

.lgo-quiz.is-enhanced .lgo-quiz__step { margin-bottom: 0; }
.lgo-quiz.is-enhanced .lgo-quiz__step[hidden] { display: none; }

.lgo-quiz__question {
	display: block;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	font-family: var( --lgo-font-head );
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --lgo-navy );
}

.lgo-quiz__question:focus { outline: none; }

@container ( min-width: 30rem ) {
	.lgo-quiz__question { font-size: 1.4rem; }
}

.lgo-quiz__subtitle {
	margin: -0.25rem 0 1.25rem;
	padding: 0.7rem 0.9rem;
	border-radius: var( --lgo-radius-input );
	background: var( --lgo-success-soft );
	color: var( --lgo-success-ink );
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
}

/* Progress */

.lgo-quiz__progress { margin-bottom: 1.25rem; }

.lgo-quiz__progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
	color: var( --lgo-muted );
	font-size: 0.8125rem;
}

.lgo-quiz__progress-track {
	height: 6px;
	border-radius: 999px;
	background: #dbe4f0;
	overflow: hidden;
}

.lgo-quiz__progress-bar {
	height: 100%;
	border-radius: inherit;
	background: var( --lgo-success );
	transition: width 320ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Option pills */

.lgo-quiz__options { display: grid; gap: 0.75rem; }

.lgo-pill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 58px;
	/* Right padding clears the selection mark; left matches it so the icon and
	   label stay optically centred. */
	padding: 0.9rem 2.75rem;
	background: var( --lgo-surface );
	border: 2px solid transparent;
	border-radius: var( --lgo-radius-pill );
	box-shadow: 0 1px 3px rgba( 3, 33, 64, 0.06 );
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lgo-pill:hover { box-shadow: 0 4px 14px rgba( 3, 33, 64, 0.1 ); }
.lgo-pill:active { transform: scale( 0.99 ); }

.lgo-pill.is-selected,
.lgo-pill:has( .lgo-pill__input:checked ) {
	border-color: var( --lgo-primary );
	background: var( --lgo-surface );
}

/* The real radio drives state and keyboard behaviour; it is visually hidden
   but never display:none, or arrow-key navigation stops working. */
.lgo-pill__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.lgo-pill__input:focus-visible + .lgo-pill__icon,
.lgo-pill:has( .lgo-pill__input:focus-visible ) {
	outline: 3px solid var( --lgo-navy );
	outline-offset: 2px;
}

.lgo-pill__icon {
	display: grid;
	place-items: center;
	flex: none;
	color: var( --lgo-primary );
}

.lgo-pill__label {
	font-size: 1rem;
	font-weight: 500;
	color: var( --lgo-ink );
	text-align: center;
}

/* In a narrow card that symmetrical padding leaves too little for the label and
   it wraps mid-word. Below this width the mark tucks in and the padding goes. */
@container ( max-width: 24rem ) {
	.lgo-pill {
		gap: 0.6rem;
		padding-inline: 1rem 2.25rem;
		justify-content: flex-start;
	}

	.lgo-pill__label { text-align: left; }
	.lgo-pill__check { right: 0.85rem; }
}

/* Absolutely positioned so the icon and label stay optically centred whether or
   not anything is selected. */
.lgo-pill__check {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 22px;
	height: 22px;
	transform: translateY( -50% ) scale( 0.6 );
	border-radius: 50%;
	background: var( --lgo-primary );
	box-shadow: inset 0 0 0 4px var( --lgo-surface );
	opacity: 0;
	transition: opacity 160ms ease, transform 160ms ease;
}

.lgo-pill:has( .lgo-pill__input:checked ) .lgo-pill__check {
	opacity: 1;
	transform: translateY( -50% ) scale( 1 );
}

/* Two columns for short answers ("Yes" / "No", money bands). A pill with an
   icon becomes a tile: icon above the label, so the pair reads as two
   equal choices rather than two sentences. */
.lgo-quiz__options--grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

.lgo-quiz__options--grid .lgo-pill {
	padding-inline: 1rem 2.4rem;
	justify-content: flex-start;
}

.lgo-quiz__options--grid .lgo-pill__label { text-align: left; }

.lgo-quiz__options--grid .lgo-pill:has( .lgo-pill__icon ) {
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-height: 104px;
	padding: 1rem 0.75rem;
}

.lgo-quiz__options--grid .lgo-pill:has( .lgo-pill__icon ) .lgo-pill__label { text-align: center; }

.lgo-quiz__options--grid .lgo-pill:has( .lgo-pill__icon ) .lgo-pill__check {
	top: 0.75rem;
	right: 0.75rem;
	transform: scale( 0.6 );
}

.lgo-quiz__options--grid .lgo-pill:has( .lgo-pill__icon ):has( .lgo-pill__input:checked ) .lgo-pill__check {
	transform: scale( 1 );
}

/* Small print for one question, under its answers. */
.lgo-quiz__note {
	margin: 0.85rem 0 0;
	color: var( --lgo-muted );
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Contact fields */

.lgo-quiz__fields { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0.75rem; }
.lgo-quiz__fields > .lgo-field { grid-column: 1 / -1; }
.lgo-quiz__fields > .lgo-field--half { grid-column: auto; }

/* Half-width fields stack again when the card is too narrow for two. */
@container ( max-width: 22rem ) {
	.lgo-quiz__fields > .lgo-field--half { grid-column: 1 / -1; }
}

.lgo-field__label {
	display: block;
	margin: 0 0 0.35rem;
	color: var( --lgo-ink );
	font-size: 0.875rem;
	font-weight: 600;
}

.lgo-field__control {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var( --lgo-surface );
	border: 1px solid var( --lgo-border );
	border-radius: var( --lgo-radius-input );
	padding: 0 0.9rem;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lgo-field__control:focus-within {
	border-color: var( --lgo-primary );
	box-shadow: 0 0 0 3px var( --lgo-primary-ring );
}

.lgo-field.has-error .lgo-field__control,
.lgo-consent.has-error { border-color: var( --lgo-danger ); }

.lgo-field__icon { display: grid; place-items: center; color: var( --lgo-muted ); flex: none; }

.lgo-field__input {
	flex: 1;
	min-height: var( --lgo-tap );
	padding: 0;
	border: 0;
	background: transparent;
	/* 16px minimum, or iOS Safari zooms the page on focus. */
	font-size: 1rem;
	font-family: inherit;
	color: var( --lgo-ink );
}

.lgo-field__input:focus { outline: none; }
.lgo-field__input::placeholder { color: #9aa3b0; }

.lgo-field__error {
	margin: 0.35rem 0 0;
	color: var( --lgo-danger );
	font-size: 0.8125rem;
}

/* Consents */

.lgo-quiz__consents { display: grid; gap: 0.75rem; margin-top: 1rem; }

.lgo-consent__label {
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0.65rem;
	align-items: start;
	cursor: pointer;
}

/* Visually hidden but still focusable. Positioned against the label above, not
   the page: without a positioned ancestor these escape any scrolling container
   and stretch the document to their own offset. */
.lgo-consent__input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.lgo-consent__box {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 2px solid var( --lgo-border );
	border-radius: 6px;
	background: var( --lgo-surface );
	transition: border-color 160ms ease, background 160ms ease;
}

.lgo-consent__label:has( .lgo-consent__input:checked ) .lgo-consent__box {
	border-color: var( --lgo-success );
	background: var( --lgo-success ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E" ) center / 15px no-repeat;
}

.lgo-consent__label:has( .lgo-consent__input:focus-visible ) .lgo-consent__box {
	outline: 3px solid var( --lgo-navy );
	outline-offset: 2px;
}

.lgo-consent__text { font-size: 0.8125rem; line-height: 1.5; color: #4b5563; }

.lgo-quiz__legal {
	margin: 1rem 0 0;
	color: #6b7280;
	font-size: 0.75rem;
	line-height: 1.5;
}

.lgo-quiz__legal a { color: inherit; }

/* Navigation */

.lgo-quiz__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.lgo-quiz__nav [hidden] { display: none; }

/* On the first step every control is hidden (auto-advance handles it), leaving
   an empty flex row plus its top margin — 40px of dead space under the last
   option. Collapse the row entirely until it actually holds a button. */
.lgo-quiz__nav:not(:has( button:not([hidden]) )) {
	display: none;
}
.lgo-quiz__nav:has( [data-lgo-submit]:not( [hidden] ) ) { flex-direction: column; }
.lgo-quiz__nav:has( [data-lgo-submit]:not( [hidden] ) ) [data-lgo-prev] { align-self: flex-start; order: 2; }

/* Result */

.lgo-quiz__result { text-align: center; padding: 1.5rem 0.5rem; }
.lgo-quiz__result:focus { outline: none; }

.lgo-quiz__result-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var( --lgo-success-soft );
	color: var( --lgo-success );
}

.lgo-quiz__result-title {
	margin: 0 0 0.5rem;
	font-family: var( --lgo-font-head );
	font-size: 1.25rem;
	color: var( --lgo-navy );
}

.lgo-quiz__result-text { margin: 0; color: var( --lgo-muted ); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Call popup
   -------------------------------------------------------------------------- */

.lgo-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: end center;
	font-family: var( --lgo-font-body );
}

@media ( min-width: 48em ) {
	.lgo-popup { place-items: center; }
}

.lgo-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 3, 33, 64, 0.55 );
	opacity: 0;
	transition: opacity 200ms ease;
}

.lgo-popup.is-open .lgo-popup__backdrop { opacity: 1; }

.lgo-popup__dialog {
	position: relative;
	width: min( 100%, 30rem );
	max-height: 92dvh;
	overflow-y: auto;
	padding: 2rem 1.5rem 1.5rem;
	background: var( --lgo-surface );
	/* Bottom sheet on phones, centred card on larger screens. */
	border-radius: var( --lgo-radius-card ) var( --lgo-radius-card ) 0 0;
	box-shadow: var( --lgo-shadow-pop );
	text-align: center;
	transform: translateY( 24px );
	opacity: 0;
	transition: transform 220ms cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 220ms ease;
	overscroll-behavior: contain;
}

@media ( min-width: 48em ) {
	.lgo-popup__dialog { border-radius: 1.5rem; padding: 2.5rem 2rem 2rem; }
}

.lgo-popup.is-open .lgo-popup__dialog { transform: translateY( 0 ); opacity: 1; }
.lgo-popup__dialog:focus { outline: none; }

.lgo-popup__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #f1f3f7;
	color: var( --lgo-ink );
	cursor: pointer;
}

.lgo-popup__close:hover { background: #e5e8ee; }

.lgo-popup__badge {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var( --lgo-primary-soft );
	color: var( --lgo-primary );
}

.lgo-popup__title {
	margin: 0 0 0.35rem;
	font-family: var( --lgo-font-head );
	font-size: 1.65rem;
	font-weight: 700;
	color: var( --lgo-primary );
}

.lgo-popup__subtitle { margin: 0 0 1.25rem; color: var( --lgo-muted ); font-size: 0.9375rem; }

.lgo-popup__box {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 0.85rem;
	align-items: start;
	padding: 1rem;
	margin-bottom: 1.25rem;
	background: #f7f9fc;
	border-radius: var( --lgo-radius-input );
	text-align: left;
}

.lgo-popup__box-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --lgo-primary-soft );
	color: var( --lgo-primary );
}

.lgo-popup__box-title {
	margin: 0 0 0.2rem;
	font-family: var( --lgo-font-head );
	font-weight: 700;
	color: var( --lgo-primary );
	font-size: 0.9375rem;
}

.lgo-popup__box-text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var( --lgo-muted ); }

.lgo-popup__bullets {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.lgo-popup__bullets li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 0.6rem;
	align-items: center;
	font-size: 0.9375rem;
	color: var( --lgo-ink );
}

.lgo-popup__tick {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --lgo-success-soft );
	color: var( --lgo-success );
}

.lgo-popup__privacy { margin: 0 0 0.85rem; font-size: 0.75rem; color: #8b93a1; }
.lgo-popup__privacy a { color: inherit; }

.lgo-popup__countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
	padding: 0.7rem;
	border-radius: var( --lgo-radius-input );
	background: var( --lgo-success-soft );
	color: var( --lgo-success-ink );
	font-size: 0.9375rem;
	font-weight: 600;
}

.lgo-popup__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 64px;
	padding: 1rem;
	border-radius: var( --lgo-radius-input );
	background: var( --lgo-primary );
	color: #fff;
	font-family: var( --lgo-font-head );
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 8px 24px var( --lgo-primary-glow );
	transition: background 180ms ease, transform 180ms ease;
}

.lgo-popup__cta:hover { background: var( --lgo-primary-dark ); color: #fff; transform: translateY( -1px ); }

/* Sticky call button */

.lgo-sticky-call {
	position: fixed;
	right: 1rem;
	bottom: calc( 1rem + env( safe-area-inset-bottom, 0px ) );
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var( --lgo-tap );
	padding: 0.85rem 1.35rem;
	border: 0;
	border-radius: var( --lgo-radius-pill );
	background: var( --lgo-primary, #de1920 );
	color: #fff;
	font-family: var( --lgo-font-head, system-ui ), sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba( 3, 33, 64, 0.28 );
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}

.lgo-sticky-call:hover { background: var( --lgo-primary-dark, #b4141a ); transform: translateY( -2px ); }

/* --------------------------------------------------------------------------
   Chatbot
   -------------------------------------------------------------------------- */

.lgo-chat {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	background: linear-gradient( 180deg, #e8f0fb 0%, #fff 60% );
	font-family: var( --lgo-font-body );
	color: var( --lgo-ink );
}

/* dvh, not vh: on iOS Safari a vh-sized column sits under the URL bar and the
   composer is unreachable. --lgo-keyboard is set by the runtime from
   visualViewport, which dvh does not account for. */
.lgo-chat--full {
	height: calc( 100dvh - var( --lgo-keyboard, 0px ) );
	min-height: 32rem;
}

.lgo-chat--compact { height: 36rem; border-radius: var( --lgo-radius-card ); overflow: hidden; }

/* Inside the corner widget the shell fills the panel, which owns the sizing. */
.lgo-chat--panel { height: 100%; min-height: 0; }

.lgo-chat__header {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex: none;
	padding: 0.85rem 1rem;
	background: var( --lgo-surface );
	border-bottom: 1px solid var( --lgo-border );
}

.lgo-chat__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.lgo-chat__avatar--fallback {
	display: grid;
	place-items: center;
	background: var( --lgo-primary-soft );
	color: var( --lgo-primary );
}

.lgo-chat__name {
	margin: 0;
	font-family: var( --lgo-font-head );
	font-size: 1rem;
	font-weight: 700;
	color: var( --lgo-navy );
	line-height: 1.3;
}

.lgo-chat__status {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var( --lgo-muted );
}

.lgo-chat__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --lgo-success );
}

.lgo-chat__log {
	flex: 1;
	/* A flex item defaults to min-height:auto, which refuses to shrink below its
	   content — the log would grow the whole page instead of scrolling inside
	   its own box, pushing the composer off screen. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	scroll-behavior: smooth;
}

/* Container query, not a viewport one: the same shell renders full-page and
   inside a 24rem corner panel, and a viewport-based rule gave the panel 12vw
   of side padding — enough to squeeze every bubble to one word per line. */
@container ( min-width: 48rem ) {
	.lgo-chat__log { padding: 1.5rem clamp( 1.5rem, 10cqi, 10rem ); }
}

.lgo-chat__row { display: flex; }
.lgo-chat__row--bot { justify-content: flex-start; }
.lgo-chat__row--user { justify-content: flex-end; }

.lgo-chat__bubble {
	max-width: min( 92%, 34rem );
	padding: 0.8rem 1rem;
	border-radius: 14px;
	background: var( --lgo-surface );
	box-shadow: 0 1px 3px rgba( 3, 33, 64, 0.08 );
	font-size: 0.9375rem;
	line-height: 1.55;
	animation: lgo-in 220ms ease both;
}

.lgo-chat__row--user .lgo-chat__bubble {
	background: var( --lgo-primary );
	color: #fff;
	font-weight: 500;
}

@keyframes lgo-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to { opacity: 1; transform: none; }
}

.lgo-chat__typing {
	display: inline-flex;
	gap: 5px;
	align-self: flex-start;
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: var( --lgo-surface );
	box-shadow: 0 1px 3px rgba( 3, 33, 64, 0.08 );
}

.lgo-chat__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b9c2d0;
	animation: lgo-blink 1.3s infinite ease-in-out;
}

.lgo-chat__typing span:nth-child( 2 ) { animation-delay: 0.18s; }
.lgo-chat__typing span:nth-child( 3 ) { animation-delay: 0.36s; }

@keyframes lgo-blink {
	0%, 60%, 100% { opacity: 0.3; transform: translateY( 0 ); }
	30% { opacity: 1; transform: translateY( -3px ); }
}

.lgo-chat__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.25rem;
}

.lgo-chat__choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 7.5rem;
	min-height: var( --lgo-tap );
	padding: 1rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 12px;
	background: #dfe4f6;
	color: var( --lgo-navy );
	font-family: var( --lgo-font-head );
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.lgo-chat__choice:hover { background: #d3daf2; border-color: var( --lgo-primary ); }
.lgo-chat__choice:active { transform: scale( 0.98 ); }

.lgo-chat__consents {
	display: grid;
	gap: 0.75rem;
	padding: 1rem;
	margin-top: 0.5rem;
	background: var( --lgo-surface );
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba( 3, 33, 64, 0.08 );
}

.lgo-chat__composer {
	flex: none;
	padding: 0.75rem 1rem calc( 0.75rem + env( safe-area-inset-bottom, 0px ) );
	background: var( --lgo-surface );
	border-top: 1px solid var( --lgo-border );
}

.lgo-chat__form { display: flex; align-items: center; gap: 0.6rem; }

.lgo-chat__input {
	flex: 1;
	min-height: var( --lgo-tap );
	padding: 0 1rem;
	border: 1px solid var( --lgo-border );
	border-radius: var( --lgo-radius-pill );
	/* 16px minimum, or iOS zooms on focus. */
	font-size: 1rem;
	font-family: inherit;
	color: var( --lgo-ink );
}

.lgo-chat__input:focus {
	outline: none;
	border-color: var( --lgo-primary );
	box-shadow: 0 0 0 3px var( --lgo-primary-ring );
}

.lgo-chat__send {
	display: grid;
	place-items: center;
	width: var( --lgo-tap );
	height: var( --lgo-tap );
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var( --lgo-primary );
	color: #fff;
	cursor: pointer;
}

.lgo-chat__send:hover { background: var( --lgo-primary-dark ); }

.lgo-chat__error {
	margin: 0 0 0.5rem;
	color: var( --lgo-danger );
	font-size: 0.8125rem;
	font-weight: 500;
}

/* Inside the message log (the consent step) the error follows its control, so
   the top margin belongs back on it. */
.lgo-chat__log > .lgo-chat__error { margin: 0.5rem 0 0; }

.lgo-chat__noscript { padding: 2rem 1rem; text-align: center; }

/* --------------------------------------------------------------------------
   Chat widget — corner launcher and panel
   -------------------------------------------------------------------------- */

.lgo-widget {
	--lgo-launcher: 60px;
	--lgo-gutter: 1rem;
	position: fixed;
	right: var( --lgo-gutter );
	bottom: calc( var( --lgo-gutter ) + env( safe-area-inset-bottom, 0px ) );
	z-index: 9000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	font-family: var( --lgo-font-body );
}

.lgo-widget[hidden] { display: none !important; }

/* Out of the way while a form is on screen on a small device: see
   tuckForForms() in widget.js. Visibility follows the fade, so the hidden
   launcher cannot be tapped or tabbed to. */
.lgo-widget { transition: opacity 200ms ease, transform 200ms ease, visibility 0s; }

.lgo-widget.is-tucked {
	opacity: 0;
	transform: translateY( 16px );
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}

.lgo-widget__launcher {
	position: relative;
	display: grid;
	place-items: center;
	width: var( --lgo-launcher );
	height: var( --lgo-launcher );
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var( --lgo-primary );
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba( 3, 33, 64, 0.32 );
	transition: transform 180ms ease, background 180ms ease;
}

.lgo-widget__launcher:hover { background: var( --lgo-primary-dark ); transform: translateY( -2px ); }
.lgo-widget__launcher:focus-visible { outline: 3px solid var( --lgo-navy ); outline-offset: 3px; }

/* One button, two glyphs: the icon swaps as the panel opens and closes. */
.lgo-widget__launcher-icon { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 160ms ease, transform 160ms ease; }
.lgo-widget__launcher-icon--close { opacity: 0; transform: rotate( -45deg ); }
.lgo-widget.is-open .lgo-widget__launcher-icon--open { opacity: 0; transform: rotate( 45deg ); }
.lgo-widget.is-open .lgo-widget__launcher-icon--close { opacity: 1; transform: none; }

/* "Someone is available" dot, hidden once the conversation has been opened. */
.lgo-widget__dot {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var( --lgo-success );
}

.lgo-widget.is-open .lgo-widget__dot,
.lgo-widget.is-seen .lgo-widget__dot { display: none; }

.lgo-widget__teaser {
	position: relative;
	max-width: 15rem;
	padding: 0.7rem 2rem 0.7rem 0.9rem;
	background: var( --lgo-surface );
	border-radius: 14px 14px 4px 14px;
	box-shadow: 0 8px 24px rgba( 3, 33, 64, 0.18 );
	font-size: 0.875rem;
	line-height: 1.4;
	color: var( --lgo-ink );
	cursor: pointer;
	animation: lgo-in 260ms ease both;
}

.lgo-widget__teaser p { margin: 0; }
.lgo-widget__teaser[hidden] { display: none !important; }
.lgo-widget.is-open .lgo-widget__teaser { display: none; }

.lgo-widget__teaser-close {
	position: absolute;
	top: 3px;
	right: 3px;
	display: grid;
	place-items: center;
	/* Big enough to hit with a thumb: at 22px it was missed as often as hit,
	   and the bubble opens the chat, so a miss is a chat nobody asked for. */
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --lgo-muted );
	cursor: pointer;
}

.lgo-widget__teaser-close:hover,
.lgo-widget__teaser-close:focus-visible { background: #f1f3f7; color: var( --lgo-ink ); }

.lgo-widget__teaser-close svg { width: 18px; height: 18px; }

/* The bubble's text keeps clear of the close button. */
.lgo-widget__teaser { padding-right: 2.5rem; }

.lgo-widget__panel {
	width: min( 24rem, calc( 100vw - 2rem ) );
	height: min( 36rem, calc( 100dvh - 8rem ) );
	overflow: hidden;
	background: var( --lgo-surface );
	border-radius: var( --lgo-radius-card );
	box-shadow: var( --lgo-shadow-pop );
	transform-origin: bottom right;
	animation: lgo-panel-in 220ms cubic-bezier( 0.4, 0, 0.2, 1 ) both;
}

.lgo-widget__panel[hidden] { display: none !important; }

@keyframes lgo-panel-in {
	from { opacity: 0; transform: translateY( 12px ) scale( 0.97 ); }
	to { opacity: 1; transform: none; }
}

/* On a phone the panel takes the screen: a 24rem card on a 375px viewport is
   a cramped way to hold a conversation. */
@media ( max-width: 30rem ) {
	.lgo-widget.is-open {
		inset: 0;
		right: 0;
		bottom: 0;
		gap: 0;
	}

	.lgo-widget.is-open .lgo-widget__panel {
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
		animation: none;
	}

	/* Floats over the panel header, where a close control is expected. */
	/* Closing the conversation is the one control on this screen a visitor
	   reaches for in a hurry, so it is a full-sized tap target. */
	.lgo-widget.is-open .lgo-widget__launcher {
		position: absolute;
		top: calc( 0.5rem + env( safe-area-inset-top, 0px ) );
		right: 0.5rem;
		width: 48px;
		height: 48px;
		background: rgba( 3, 33, 64, 0.08 );
		color: var( --lgo-navy );
		box-shadow: none;
		z-index: 2;
	}

	.lgo-widget.is-open .lgo-widget__launcher-icon--close svg {
		width: 26px;
		height: 26px;
	}

	.lgo-widget.is-open .lgo-widget__launcher:hover { background: rgba( 3, 33, 64, 0.14 ); }
}

/* The call button stacks above the launcher rather than under it. */
.lgo-widget ~ .lgo-sticky-call,
.lgo-sticky-call.has-widget {
	bottom: calc( 1rem + 60px + 0.75rem + env( safe-area-inset-bottom, 0px ) );
}

@media ( prefers-reduced-motion: reduce ) {
	.lgo-widget__panel,
	.lgo-widget__teaser { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Legal policy overlay
   -------------------------------------------------------------------------- */

.lgo-legal {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: grid;
	place-items: end center;
	font-family: var( --lgo-font-body );
}

.lgo-legal[hidden] { display: none !important; }

@media ( min-width: 48em ) {
	.lgo-legal { place-items: center; }
}

.lgo-legal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 3, 33, 64, 0.55 );
	opacity: 0;
	transition: opacity 200ms ease;
}

.lgo-legal.is-open .lgo-legal__backdrop { opacity: 1; }

.lgo-legal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 46rem, 100% );
	max-height: 92dvh;
	background: var( --lgo-surface );
	border-radius: var( --lgo-radius-card ) var( --lgo-radius-card ) 0 0;
	box-shadow: var( --lgo-shadow-pop );
	transform: translateY( 20px );
	opacity: 0;
	transition: transform 220ms cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 220ms ease;
}

@media ( min-width: 48em ) {
	.lgo-legal__dialog { max-height: 84dvh; border-radius: var( --lgo-radius-card ); }
}

.lgo-legal.is-open .lgo-legal__dialog { transform: none; opacity: 1; }
.lgo-legal__dialog:focus { outline: none; }

.lgo-legal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: none;
	padding: 1.15rem 1.35rem;
	border-bottom: 1px solid var( --lgo-border );
}

.lgo-legal__title {
	margin: 0;
	font-family: var( --lgo-font-head );
	font-size: 1.125rem;
	font-weight: 700;
	color: var( --lgo-navy );
	line-height: 1.3;
}

.lgo-legal__close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: #f1f3f7;
	color: var( --lgo-ink );
	cursor: pointer;
}

.lgo-legal__close:hover { background: #e5e8ee; }

.lgo-legal__body {
	flex: 1;
	/* A flex item will not shrink below its content without this, so a long
	   policy would grow the dialog past the viewport instead of scrolling. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --lgo-ink );
}

.lgo-legal__body:focus-visible { outline: 3px solid var( --lgo-primary ); outline-offset: -3px; }

.lgo-legal__body :where( h1, h2, h3, h4 ) {
	margin: 1.75rem 0 0.6rem;
	font-family: var( --lgo-font-head );
	font-weight: 700;
	color: var( --lgo-navy );
	line-height: 1.3;
}

.lgo-legal__body :where( h1, h2 ) { font-size: 1.125rem; }
.lgo-legal__body :where( h3, h4 ) { font-size: 1rem; }
.lgo-legal__body > :first-child { margin-top: 0; }
.lgo-legal__body p { margin: 0 0 0.9rem; }
.lgo-legal__body :where( ul, ol ) { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.lgo-legal__body li { margin-bottom: 0.35rem; }
.lgo-legal__body a { color: var( --lgo-primary ); }
.lgo-legal__body strong { color: var( --lgo-navy ); }

.lgo-legal__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

.lgo-legal__body :where( th, td ) {
	padding: 0.5rem 0.65rem;
	border: 1px solid var( --lgo-border );
	text-align: left;
	vertical-align: top;
}

.lgo-legal__loading { color: var( --lgo-muted ); }

@media ( prefers-reduced-motion: reduce ) {
	.lgo-legal__dialog,
	.lgo-legal__backdrop { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Editor notice
   -------------------------------------------------------------------------- */

.lgo-notice {
	padding: 1rem;
	border: 1px dashed #c3ccd9;
	border-radius: 0.5rem;
	background: #f7f9fc;
	color: #5b6472;
	text-align: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.lgo-chat__bubble,
	.lgo-chat__typing span,
	.lgo-popup__dialog,
	.lgo-popup__backdrop,
	.lgo-quiz__progress-bar { animation: none !important; transition: none !important; }
}