/* AI Lead Assistant — front-end widget */

.ailw-root {
	/* The shortcode sets --ailw-accent-base rather than --ailw-accent, so a
	   theme can substitute the accent in CSS without having to out-specify an
	   inline style. An explicit accent lands in the base and always wins. */
	--ailw-accent: var(--ailw-accent-base, #111111);
	--ailw-accent-fg: #ffffff;
	--ailw-radius: 26px;
	--ailw-border: #e3e3e3;
	--ailw-muted: #8b8b8b;
	--ailw-bg: #ffffff;
	--ailw-user: #f1f1f1;
	--ailw-text: #111111;
	--ailw-chip-bg: #ffffff;
	--ailw-chip-border: var(--ailw-border);
	--ailw-chip-fg: #333333;
	--ailw-chip-hover-bg: #f6f6f6;
	--ailw-chip-hover-border: #d0d0d0;
	--ailw-placeholder: var(--ailw-muted);
	--ailw-focus-border: #c9c9c9;
	--ailw-dots: #c4c4c4;
	--ailw-error-bg: #fff4f4;
	--ailw-error-fg: #a4262c;
	--ailw-panel-bg: #ffffff;
	--ailw-panel-blur: none;
	--ailw-rule: #f0f0f0;
	--ailw-send-bg: #ececec;
	--ailw-send-fg: #6b6b6b;
	--ailw-send-hover-bg: #e0e0e0;
	font-family: inherit;
	color: var(--ailw-text);
	box-sizing: border-box;
}

.ailw-root *,
.ailw-root *::before,
.ailw-root *::after {
	box-sizing: border-box;
}

/* ---------- inline (hero) mode ---------- */

.ailw-mode-inline .ailw-panel {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 16px 0;
	text-align: center;
}

.ailw-heading {
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	text-align: center;
}

.ailw-root.is-active .ailw-heading {
	display: none;
}

/* ---------- composer ---------- */

.ailw-composer {
	position: relative;
	display: block;
	background: var(--ailw-bg);
	border: 1px solid var(--ailw-border);
	border-radius: var(--ailw-radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.045), 0 12px 40px -18px rgba(0, 0, 0, 0.18);
	padding: 16px 58px 16px 20px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	text-align: left;
}

.ailw-composer:focus-within {
	border-color: var(--ailw-focus-border);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 16px 46px -18px rgba(0, 0, 0, 0.22);
}

/* Hardened for a different reason than the send button. A theme reaching this
   element does not merely make it look wrong: autoGrow() sets height to auto,
   reads scrollHeight and writes the result back, so a theme's line-height,
   padding or min-height changes the number being measured — the composer opens
   at the wrong size and grows in the wrong steps. That presents as "the widget
   is janky" and sends whoever debugs it into the JavaScript, which is the wrong
   place to look.
   `height` is deliberately absent: it is what autoGrow() writes, and pinning it
   would break the growing far more thoroughly than any theme could. Only the
   inputs to the measurement are stated. */
.ailw-root .ailw-input {
	box-sizing: border-box;
	width: 100%;
	border: 0;
	outline: 0;
	resize: none;
	background: transparent;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	min-height: 0;
	max-height: 180px;
	overflow-y: auto;
	padding: 0;
	margin: 0;
	display: block;
}

.ailw-input::placeholder {
	color: var(--ailw-placeholder);
}

.ailw-mode-inline .ailw-composer {
	min-height: 96px;
}

/* once the conversation starts the composer shrinks to a normal input */
.ailw-mode-inline.is-active .ailw-composer {
	min-height: 0;
	padding: 13px 52px 13px 18px;
	border-radius: 22px;
}

.ailw-mode-inline.is-active .ailw-send {
	bottom: 9px;
	right: 9px;
}

/* Hardened against the host theme rather than against one known rule. A single
   class (0,1,0) loses to the `.entry-content button` shape (0,1,1) that themes
   write constantly, and the send button is the one element here with a fixed
   square geometry — so a theme's padding, min-height or line-height renders it
   as an ellipse. Raised to two classes and pinned on every axis a theme can
   reach: the size is stated four ways, the icon is stated twice, and
   aspect-ratio is the backstop if something still gets through. */
.ailw-root .ailw-send {
	position: absolute;
	right: 12px;
	bottom: 12px;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	min-width: 34px;
	max-width: 34px;
	min-height: 34px;
	max-height: 34px;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--ailw-send-bg);
	color: var(--ailw-send-fg);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* `svg { width: 100% }` is common enough in themes to be worth pinning. */
.ailw-root .ailw-send svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ailw-send:hover {
	background: var(--ailw-send-hover-bg);
}

.ailw-root.has-text .ailw-send {
	background: var(--ailw-accent);
	color: var(--ailw-accent-fg);
}

.ailw-send[disabled] {
	opacity: 0.45;
	cursor: default;
}

.ailw-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ---------- chips ---------- */

.ailw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 16px 0 0;
}

.ailw-root.is-active .ailw-chips {
	display: none;
}

.ailw-chip {
	border: 1px solid var(--ailw-chip-border);
	background: var(--ailw-chip-bg);
	border-radius: 999px;
	padding: 8px 15px;
	font: inherit;
	font-size: 14px;
	color: var(--ailw-chip-fg);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ailw-chip:hover {
	background: var(--ailw-chip-hover-bg);
	border-color: var(--ailw-chip-hover-border);
}

.ailw-consent {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ailw-muted);
	margin: 14px 0 0;
	text-align: center;
}

/* ---------- thread ---------- */

/* The height is a clamp, not a measurement of the visitor's screen. It used to
   be 46vh, which is 414px on a laptop and 662px on a large monitor — a widget
   embedded in someone else's page growing because the reader has a big screen.
   The setting governs the desktop case; the vh term is only there so a 300px
   thread cannot eat a phone whole. */
/* The frame and the scroller are two elements on purpose. A mask applies to the
   border box, so drawing both on one element fades the border and the corners
   along with the text — which was shipped for two releases and judged acceptable
   at 1x, until the fade was asked to be stronger and a stronger mask makes the
   softened border more visible rather than less. Frame outside, mask inside: the
   corners stay continuous and the fade touches only the messages. */
.ailw-thread-frame {
	border: 1px solid var(--ailw-border);
	border-radius: 16px;
	background: var(--ailw-bg);
	overflow: hidden;
	margin: 0 0 14px;
}

.ailw-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	max-height: min(var(--ailw-thread-max, 300px), 60vh);
	overflow-y: auto;
	padding: 12px 14px;
	scroll-behavior: smooth;
}

/* `hidden` has to be stated, and has to be stated on whichever element carries
   the frame. An author `display: flex` beats the UA stylesheet's `[hidden]`
   regardless of specificity, which is why the empty thread sat in the layout
   for years costing nothing — until it was given a surface. Moving the frame to
   a wrapper without moving this would put the empty box straight back: the same
   bug, reintroduced by the fix for its own side-effect. */
.ailw-root .ailw-thread-frame[hidden] {
	display: none;
}

/* Only once something is actually scrolled out of view, so nothing fades when
   there is nothing above. Masked rather than painted: dark is translucent white
   over the page, and a gradient painted in a colour would read as a band across
   it. The ramp starts at true zero now — the frame is on the wrapper, so there
   is no border here to protect and no need for the held-opaque first pixel the
   single-element version required. */
.ailw-thread.is-scrolled {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
}

.ailw-msg {
	max-width: 88%;
	padding: 11px 15px;
	border-radius: 18px;
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	animation: ailw-in 0.22s ease both;
}

.ailw-msg-user {
	align-self: flex-end;
	background: var(--ailw-user);
	border-bottom-right-radius: 6px;
}

.ailw-msg-bot {
	align-self: flex-start;
	background: transparent;
	padding-left: 2px;
	max-width: 100%;
}

.ailw-msg-error {
	align-self: flex-start;
	background: var(--ailw-error-bg);
	color: var(--ailw-error-fg);
	font-size: 14px;
}

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

.ailw-typing {
	align-self: flex-start;
	display: inline-flex;
	gap: 5px;
	padding: 14px 4px;
}

.ailw-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ailw-dots);
	animation: ailw-bounce 1.15s infinite ease-in-out;
}

.ailw-typing span:nth-child(2) {
	animation-delay: 0.16s;
}

.ailw-typing span:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes ailw-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.55;
	}
	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

/* ---------- floating mode ---------- */

.ailw-mode-floating {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
}

.ailw-launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	border-radius: 999px;
	background: var(--ailw-accent);
	color: var(--ailw-accent-fg);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	padding: 13px 20px;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.ailw-launcher-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
	animation: ailw-pulse 2.4s infinite;
}

@keyframes ailw-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
	}
}

.ailw-mode-floating .ailw-panel {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(400px, calc(100vw - 32px));
	background: var(--ailw-panel-bg);
	backdrop-filter: var(--ailw-panel-blur);
	-webkit-backdrop-filter: var(--ailw-panel-blur);
	border: 1px solid var(--ailw-border);
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
	padding: 0 16px 14px;
	animation: ailw-in 0.2s ease both;
}

.ailw-mode-floating.is-open .ailw-panel {
	display: block;
}

.ailw-mode-floating.is-open .ailw-launcher {
	display: none;
}

.ailw-panel-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0 10px;
	border-bottom: 1px solid var(--ailw-rule);
	margin-bottom: 12px;
}

.ailw-panel-title {
	font-weight: 600;
	font-size: 15px;
}

.ailw-close {
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: var(--ailw-muted);
	cursor: pointer;
	padding: 0 4px;
}

.ailw-mode-floating .ailw-heading {
	font-size: 19px;
	margin-bottom: 14px;
	text-align: left;
}

.ailw-mode-floating .ailw-composer {
	padding: 12px 48px 12px 15px;
	border-radius: 20px;
	box-shadow: none;
}

.ailw-mode-floating .ailw-send {
	right: 8px;
	bottom: 8px;
	width: 30px;
	height: 30px;
}

/* The floating panel overlays the page rather than sitting in it, so it stays
   bounded at 340px however tall the setting is — but a smaller setting still
   applies, so the control never appears to do nothing. */
.ailw-mode-floating .ailw-thread {
	max-height: min(var(--ailw-thread-max, 340px), 340px);
}

.ailw-mode-floating .ailw-chips {
	justify-content: flex-start;
}

.ailw-mode-floating .ailw-chip {
	font-size: 13px;
	padding: 6px 12px;
}

.ailw-mode-floating .ailw-consent {
	text-align: left;
	margin-top: 10px;
}

/* ---------- dark ----------
 *
 * Dark does not paint a dark surface. A theme that renders #1e1e1e onto a
 * #0b1020 page is a grey box on a navy page with a visible seam, and with nine
 * landing pages it would mean tracking the exact hex of each one. Instead the
 * widget lets the page through and draws translucent white over it: the same
 * values hold on flat colour, on a gradient and on a photograph, with nothing
 * configured per page.
 *
 * The one exception is the floating panel, at the bottom of this block. It
 * overlays arbitrary page content rather than sitting in the layout, and
 * translucency there is unreadable — so it gets a near-opaque surface and a
 * blur. Same theme, different constraint.
 *
 * The token block below is duplicated once for `auto`. A preprocessor to avoid
 * 21 repeated lines costs more than it saves; build.sh asserts the two blocks
 * stay identical, which is the part that would otherwise fail silently.
 */

.ailw-root.ailw-theme-dark {
	--ailw-border: rgba(255, 255, 255, 0.14);
	--ailw-bg: rgba(255, 255, 255, 0.055);
	--ailw-user: rgba(255, 255, 255, 0.09);
	--ailw-muted: rgba(255, 255, 255, 0.45);
	--ailw-text: rgba(255, 255, 255, 0.92);
	--ailw-chip-bg: rgba(255, 255, 255, 0.05);
	--ailw-chip-border: rgba(255, 255, 255, 0.16);
	--ailw-chip-fg: rgba(255, 255, 255, 0.86);
	--ailw-chip-hover-bg: rgba(255, 255, 255, 0.1);
	--ailw-chip-hover-border: rgba(255, 255, 255, 0.24);
	--ailw-placeholder: rgba(255, 255, 255, 0.42);
	--ailw-focus-border: rgba(255, 255, 255, 0.3);
	--ailw-dots: rgba(255, 255, 255, 0.35);
	--ailw-error-bg: rgba(255, 90, 90, 0.12);
	--ailw-error-fg: #ffb4b4;
	--ailw-rule: rgba(255, 255, 255, 0.12);
	--ailw-send-bg: rgba(255, 255, 255, 0.1);
	--ailw-send-fg: rgba(255, 255, 255, 0.7);
	--ailw-send-hover-bg: rgba(255, 255, 255, 0.16);
	--ailw-panel-bg: rgba(20, 20, 20, 0.94);
	--ailw-panel-blur: blur(14px);
}

/* No accent was set on this Project or shortcode, so the global one is being
   inherited — and it is tuned for light pages; on this client's it is #111111,
   a black button on a near-black page. An accent set on the Project or the
   shortcode lands in --ailw-accent-base and is untouched. */
.ailw-root.ailw-theme-dark.ailw-accent-inherited {
	--ailw-accent: #e8e8e8;
	--ailw-accent-fg: #111111;
}

@media (prefers-color-scheme: dark) {
	.ailw-root.ailw-theme-auto {
		--ailw-border: rgba(255, 255, 255, 0.14);
		--ailw-bg: rgba(255, 255, 255, 0.055);
		--ailw-user: rgba(255, 255, 255, 0.09);
		--ailw-muted: rgba(255, 255, 255, 0.45);
		--ailw-text: rgba(255, 255, 255, 0.92);
		--ailw-chip-bg: rgba(255, 255, 255, 0.05);
		--ailw-chip-border: rgba(255, 255, 255, 0.16);
		--ailw-chip-fg: rgba(255, 255, 255, 0.86);
		--ailw-chip-hover-bg: rgba(255, 255, 255, 0.1);
		--ailw-chip-hover-border: rgba(255, 255, 255, 0.24);
		--ailw-placeholder: rgba(255, 255, 255, 0.42);
		--ailw-focus-border: rgba(255, 255, 255, 0.3);
		--ailw-dots: rgba(255, 255, 255, 0.35);
		--ailw-error-bg: rgba(255, 90, 90, 0.12);
		--ailw-error-fg: #ffb4b4;
		--ailw-rule: rgba(255, 255, 255, 0.12);
		--ailw-send-bg: rgba(255, 255, 255, 0.1);
		--ailw-send-fg: rgba(255, 255, 255, 0.7);
		--ailw-send-hover-bg: rgba(255, 255, 255, 0.16);
		--ailw-panel-bg: rgba(20, 20, 20, 0.94);
		--ailw-panel-blur: blur(14px);
	}

	.ailw-root.ailw-theme-auto.ailw-accent-inherited {
		--ailw-accent: #e8e8e8;
		--ailw-accent-fg: #111111;
	}
}

/* The hero sits inside the page, so its shadow reads as a light-page effect.
   On dark it only muddies the translucency. */
.ailw-root.ailw-theme-dark .ailw-composer,
.ailw-root.ailw-theme-dark .ailw-composer:focus-within {
	box-shadow: none;
}

@media (prefers-color-scheme: dark) {
	.ailw-root.ailw-theme-auto .ailw-composer,
	.ailw-root.ailw-theme-auto .ailw-composer:focus-within {
		box-shadow: none;
	}
}

@media (max-width: 600px) {
	.ailw-mode-inline .ailw-panel {
		padding-left: 12px;
		padding-right: 12px;
	}

	.ailw-mode-floating {
		right: 14px;
		bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ailw-msg,
	.ailw-typing span,
	.ailw-launcher-dot,
	.ailw-mode-floating .ailw-panel {
		animation: none !important;
	}
}