/* Line & Form Leads: chat widget. Theme it with the custom properties below. */

.lf-bot-host {
	--lf-primary: #1f2937;
	--lf-primary-text: #ffffff;
	--lf-bot-bubble: #f3f4f6;
	--lf-bot-text: #111827;
	--lf-bg: #ffffff;
	--lf-radius: 16px;
	--lf-font: inherit;
	--lf-width: 380px;
	--lf-height: 560px;
	--lf-offset: 24px;
}

.lf-bot {
	font-family: var(--lf-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--lf-bot-text);
	box-sizing: border-box;
}
.lf-bot *, .lf-bot *::before, .lf-bot *::after { box-sizing: inherit; }

.lf-bot__panel {
	display: flex;
	flex-direction: column;
	background: var(--lf-bg);
	border-radius: var(--lf-radius);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
	overflow: hidden;
}
.lf-bot__panel[hidden] { display: none; }

.lf-bot--inline .lf-bot__panel {
	min-height: 360px;
	max-height: var(--lf-height);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .06);
}

.lf-bot__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--lf-primary);
	color: var(--lf-primary-text);
	font-weight: 600;
}
.lf-bot__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.lf-bot__name { flex: 1; }
.lf-bot__close {
	all: unset;
	cursor: pointer;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: inherit;
}
.lf-bot__close:hover, .lf-bot__close:focus-visible { background: rgba(255, 255, 255, .18); }

.lf-bot__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lf-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: calc(var(--lf-radius) * .9);
	word-wrap: break-word;
	white-space: pre-line;
	animation: lf-in .18s ease-out;
}
.lf-msg--bot {
	align-self: flex-start;
	background: var(--lf-bot-bubble);
	color: var(--lf-bot-text);
	border-bottom-left-radius: 4px;
}
.lf-msg--bot a { color: inherit; text-decoration: underline; }
.lf-msg--user {
	align-self: flex-end;
	background: var(--lf-primary);
	color: var(--lf-primary-text);
	border-bottom-right-radius: 4px;
}
.lf-msg--error { background: #fdecec; color: #8a1c1c; }

.lf-typing { display: flex; gap: 4px; padding: 14px; }
.lf-typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: .4;
	animation: lf-dot 1s infinite;
}
.lf-typing span:nth-child(2) { animation-delay: .15s; }
.lf-typing span:nth-child(3) { animation-delay: .3s; }

.lf-bot__input { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.lf-bot__input:empty { padding: 0; }

.lf-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.lf-btn {
	appearance: none;
	font: inherit;
	cursor: pointer;
	border-radius: 999px;
	padding: 9px 16px;
	border: 1.5px solid var(--lf-primary);
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	transition: background .15s, color .15s;
}
.lf-primary { background: var(--lf-primary); color: var(--lf-primary-text); align-self: flex-end; }
.lf-choice { background: transparent; color: var(--lf-primary); }
.lf-choice:hover, .lf-choice:focus-visible, .lf-choice.is-picked { background: var(--lf-primary); color: var(--lf-primary-text); }
.lf-link { background: none; border-color: transparent; color: var(--lf-bot-text); text-decoration: underline; align-self: flex-end; }
.lf-btn:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; }

.lf-text-row { display: flex; gap: 8px; }
.lf-field {
	flex: 1;
	width: 100%;
	font: inherit;
	color: #111827;
	background: #fff;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: calc(var(--lf-radius) * .6);
	min-width: 0;
}
.lf-field:focus { outline: 2px solid var(--lf-primary); outline-offset: 0; border-color: transparent; }
.lf-send { padding: 0 14px; border-radius: calc(var(--lf-radius) * .6); }

.lf-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--lf-bot-bubble);
	color: var(--lf-bot-text); /* Labels and consent text must read on the card colour. */
	padding: 14px;
	border-radius: var(--lf-radius);
}
.lf-label { font-size: 13px; font-weight: 600; }
.lf-form .lf-primary { margin-top: 6px; }
.lf-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.lf-consent input { margin-top: 3px; }

/* Floating launcher */
.lf-bot--floating {
	position: fixed;
	right: var(--lf-offset);
	bottom: var(--lf-offset);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.lf-bot--floating.lf-bot--left { right: auto; left: var(--lf-offset); align-items: flex-start; }
.lf-bot--floating .lf-bot__panel { width: var(--lf-width); height: min(var(--lf-height), calc(100vh - 120px)); }

.lf-bot__launcher {
	all: unset;
	cursor: pointer;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--lf-primary);
	color: var(--lf-primary-text);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	transition: transform .15s;
}
.lf-bot__launcher:hover { transform: scale(1.05); }
.lf-bot__launcher:focus-visible { outline: 3px solid var(--lf-primary); outline-offset: 3px; }

.lf-bot__greeting {
	all: unset;
	cursor: pointer;
	max-width: 260px;
	padding: 12px 16px;
	/* Same colours as a bot message, so it reads with any palette (NEST: white on navy). */
	background: var(--lf-bot-bubble);
	color: var(--lf-bot-text);
	border-radius: var(--lf-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
	font-size: 14px;
	animation: lf-in .25s ease-out;
}
.lf-bot__greeting[hidden] { display: none; }

@media (max-width: 480px) {
	.lf-bot--floating.is-open { inset: 0; gap: 0; }
	.lf-bot--floating.is-open .lf-bot__panel { width: 100%; height: 100%; border-radius: 0; }
	.lf-bot--floating.is-open .lf-bot__launcher { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-msg, .lf-bot__greeting, .lf-typing span { animation: none; }
}

@keyframes lf-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lf-dot { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }

/* Seamless look: inline bots that blend into the page and take the theme's type and colours. */
.lf-bot--seamless {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.lf-bot--seamless .lf-bot__panel {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	min-height: 0;
	max-height: none;
	overflow: visible;
}
.lf-bot--seamless .lf-bot__log { padding: 0; overflow: visible; gap: .75em; }
.lf-bot--seamless .lf-msg { max-width: none; animation-duration: .3s; }
.lf-bot--seamless .lf-msg--bot {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: 1.15em;
	font-weight: 500;
}
.lf-bot--seamless .lf-msg--user {
	align-self: flex-start;
	background: none;
	color: inherit;
	padding: 0 0 0 .8em;
	border-left: 3px solid var(--lf-primary);
	border-radius: 0;
	opacity: .75;
}
.lf-bot--seamless .lf-msg--error { background: none; padding: 0; color: #b32d2e; font-size: .95em; font-weight: 400; }
.lf-bot--seamless .lf-typing { background: none; padding: .4em 0; }
.lf-bot--seamless .lf-bot__input { padding: 1em 0 0; }
.lf-bot--seamless .lf-bot__input:empty { padding: 0; }
.lf-bot--seamless .lf-choices { justify-content: flex-start; }
.lf-bot--seamless .lf-primary { align-self: flex-start; }
.lf-bot--seamless .lf-form { background: none; padding: 0; max-width: 520px; }
.lf-bot--seamless .lf-text-form { max-width: 520px; }

/* Content cards (Recommend content step) */
.lf-cards { display: grid; gap: 8px; align-self: stretch; }
.lf-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: calc(var(--lf-radius) * .75);
	border: 1px solid rgba(0, 0, 0, .1);
	background: var(--lf-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.lf-card:hover, .lf-card:focus-visible { border-color: var(--lf-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.lf-card__img { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--lf-radius) * .5); flex: none; }
.lf-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-card__title { font-weight: 600; color: var(--lf-primary); }
.lf-card__text { font-size: .9em; opacity: .8; }
.lf-bot--seamless .lf-cards { max-width: 620px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lf-bot--seamless .lf-card { background: transparent; }

/* Visual tiles for choice steps */
.lf-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	align-self: stretch;
}
.lf-tile {
	appearance: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 12px;
	text-align: center;
	background: var(--lf-bg);
	border: 1.5px solid rgba(0, 0, 0, .12);
	border-radius: calc(var(--lf-radius) * .75);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lf-tile:hover, .lf-tile:focus-visible { border-color: var(--lf-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); outline: none; }
.lf-tile.is-picked { border-color: var(--lf-primary); box-shadow: inset 0 0 0 1.5px var(--lf-primary); }
.lf-tile__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--lf-radius) * .5); }
.lf-tile__icon { font-size: 2em; line-height: 1.1; }
.lf-tile__label { font-weight: 600; }
.lf-tile__desc { font-size: .85em; opacity: .75; }
.lf-bot--seamless .lf-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lf-bot--seamless .lf-tile { background: transparent; }
@media (prefers-reduced-motion: reduce) { .lf-tile { transition: none; } .lf-tile:hover { transform: none; } }

/* ---- New-tab links ---- */
.lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Only links that open in a new tab get an icon; same-tab links behave like any button. */
.lf-ext { display: inline-flex; margin-left: .4em; vertical-align: -1px; opacity: .85; }
.lf-tile { position: relative; }
.lf-tile .lf-ext { position: absolute; top: 8px; right: 8px; margin: 0; }
.lf-choice.is-visited { opacity: .85; }

/* ---- Bubbles look: chat bubbles in the page, no window ----
 * Bot messages sit left with an avatar on the first of each run; replies and
 * buttons are solid in the primary colour, right-aligned.
 */
.lf-bot--bubbles { --lf-avatar: 42px; --lf-gap: 10px; font-size: inherit; line-height: 1.45; color: inherit; }
.lf-bot--bubbles .lf-bot__panel { background: transparent; box-shadow: none; border-radius: 0; min-height: 0; max-height: none; overflow: visible; }
.lf-bot--bubbles .lf-bot__log { padding: 0 0 0 calc(var(--lf-avatar) + 16px); overflow: visible; gap: var(--lf-gap); }
.lf-bot--bubbles .lf-msg {
	max-width: min(78%, 46em);
	padding: .85em 1.1em;
	border-radius: var(--lf-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
	animation-duration: .25s;
}
.lf-bot--bubbles .lf-msg--bot { position: relative; background: var(--lf-bot-bubble); color: var(--lf-bot-text); }
.lf-bot--bubbles .lf-msg--first { margin-top: calc(var(--lf-gap) * .8); }
.lf-bot--bubbles .lf-msg--first:first-child { margin-top: 0; }
.lf-bot--bubbles .lf-msg__avatar {
	position: absolute; left: calc(-1 * (var(--lf-avatar) + 16px)); top: 0;
	width: var(--lf-avatar); height: var(--lf-avatar); border-radius: 50%; object-fit: cover;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2); background: var(--lf-primary);
}
.lf-bot--bubbles .lf-msg__avatar--initial { display: flex; align-items: center; justify-content: center; color: var(--lf-primary-text); font-weight: 700; }
.lf-bot--bubbles .lf-msg--user { align-self: flex-end; background: var(--lf-primary); color: var(--lf-primary-text); margin: calc(var(--lf-gap) * .8) 0; }
.lf-bot--bubbles .lf-msg--error { box-shadow: none; }
.lf-bot--bubbles .lf-typing { background: var(--lf-bot-bubble); }
.lf-bot--bubbles .lf-typing span { background: var(--lf-bot-text); }
.lf-bot--bubbles .lf-bot__input { padding: calc(var(--lf-gap) * 1.6) 0 0 calc(var(--lf-avatar) + 16px); }
.lf-bot--bubbles .lf-bot__input:empty { padding: 0; }
.lf-bot--bubbles .lf-choices { justify-content: flex-end; gap: var(--lf-gap); }
.lf-bot--bubbles .lf-btn,
.lf-bot--bubbles .lf-choice {
	background: var(--lf-primary); color: var(--lf-primary-text); border-color: var(--lf-primary);
	border-radius: var(--lf-radius); padding: .8em 1.1em; font-weight: 500; line-height: 1.3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .16); transition: filter .15s, transform .15s;
}
.lf-bot--bubbles .lf-choice:hover, .lf-bot--bubbles .lf-choice:focus-visible, .lf-bot--bubbles .lf-btn:hover { filter: brightness(1.08); transform: translateY(-1px); background: var(--lf-primary); color: var(--lf-primary-text); }
.lf-bot--bubbles .lf-link { background: none; box-shadow: none; color: inherit; border-color: transparent; }
.lf-bot--bubbles .lf-tile { border-radius: var(--lf-radius); }
.lf-bot--bubbles .lf-form, .lf-bot--bubbles .lf-text-form { margin-left: auto; max-width: 520px; }
.lf-bot--bubbles .lf-card { border-radius: var(--lf-radius); }
@media (max-width: 600px) {
	.lf-bot--bubbles { --lf-avatar: 34px; }
	.lf-bot--bubbles .lf-bot__log, .lf-bot--bubbles .lf-bot__input { padding-left: calc(var(--lf-avatar) + 10px); }
	.lf-bot--bubbles .lf-msg__avatar { left: calc(-1 * (var(--lf-avatar) + 10px)); }
	.lf-bot--bubbles .lf-msg { max-width: 100%; }
}

/* ---- Tiles: line icons, and the card layout ----
 * Card layout: icon beside a bold title, description underneath, on a white
 * card with a light border. Colours: --lf-accent (icon), --lf-tile-title,
 * --lf-tile-text.
 */
.lf-tile__icon--line { display: inline-flex; width: 2.2em; height: 2.2em; color: var(--lf-accent, var(--lf-primary)); }
.lf-tile__icon--line svg { width: 100%; height: 100%; }

/* Tiles are never solid buttons, whatever the look. */
.lf-bot--bubbles .lf-tile.lf-choice,
.lf-bot--bubbles .lf-tile.lf-choice:hover,
.lf-bot--bubbles .lf-tile.lf-choice:focus-visible {
	background: var(--lf-tile-bg, #fff); color: inherit; border: 1px solid var(--lf-tile-border, #e5e7eb);
	box-shadow: none; filter: none; padding: 14px 12px; font-weight: inherit;
}
.lf-bot--bubbles .lf-tile.lf-choice:hover, .lf-bot--bubbles .lf-tile.lf-choice:focus-visible { border-color: var(--lf-accent, var(--lf-primary)); box-shadow: 0 6px 18px rgba(0, 15, 50, .08); }

.lf-tiles--card { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.lf-bot .lf-tiles--card .lf-tile,
.lf-bot--bubbles .lf-tiles--card .lf-tile.lf-choice {
	/* The title row is always two lines tall, so descriptions line up across a row. */
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(2.4em, auto) auto; column-gap: 14px; row-gap: 14px;
	align-items: center; align-content: start; text-align: left;
	padding: 26px 24px 28px; min-height: 165px;
	background: var(--lf-tile-bg, #fff); color: var(--lf-tile-title, inherit);
	border: 1px solid var(--lf-tile-border, #e5e7eb); border-radius: max(7px, var(--lf-radius));
}
.lf-tiles--card .lf-tile__icon, .lf-tiles--card .lf-tile__img { grid-column: 1; grid-row: 1; }
.lf-tiles--card .lf-tile__icon--line { width: 32px; height: 32px; }
.lf-tiles--card .lf-tile__icon:not(.lf-tile__icon--line) { font-size: 1.7em; }
.lf-tiles--card .lf-tile__img { width: 32px; height: 32px; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.lf-tiles--card .lf-tile__label { grid-column: 2; grid-row: 1; font-weight: 700; line-height: 1.2; color: var(--lf-tile-title, inherit); }
.lf-tiles--card .lf-tile > .lf-tile__label:first-child { grid-column: 1 / -1; }
.lf-tiles--card .lf-tile__desc { grid-column: 1 / -1; grid-row: 2; align-self: start; font-size: .93em; line-height: 1.55; opacity: 1; color: var(--lf-tile-text, #4b5563); }
/* Cards keep the site's own clean style: no corner icon (screen readers still hear "opens in a new tab"). */
.lf-tiles--card .lf-tile .lf-ext { display: none; }
.lf-tiles--card .lf-tile.is-visited { opacity: .8; }
@media (max-width: 600px) {
	.lf-tiles--card { grid-template-columns: 1fr; gap: 12px; }
	.lf-bot .lf-tiles--card .lf-tile, .lf-bot--bubbles .lf-tiles--card .lf-tile.lf-choice { min-height: 0; padding: 18px; }
}

/* ---- Carried-on conversation ---- */
.lf-divider { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: .78em; color: #6b7280; }
.lf-divider::before, .lf-divider::after { content: ""; flex: 1; border-top: 1px solid rgba(0, 0, 0, .1); }

/* Corner chat for a bot set to the Bubbles look: same solid buttons and soft bubbles, inside the window. */
.lf-bot--solid .lf-msg { border-radius: var(--lf-radius); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.lf-bot--solid .lf-btn, .lf-bot--solid .lf-choice {
	background: var(--lf-primary); color: var(--lf-primary-text); border-color: var(--lf-primary);
	border-radius: var(--lf-radius); font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}
.lf-bot--solid .lf-choice:hover, .lf-bot--solid .lf-choice:focus-visible { filter: brightness(1.08); background: var(--lf-primary); color: var(--lf-primary-text); }
.lf-bot--solid .lf-link { background: none; box-shadow: none; color: inherit; border-color: transparent; }
.lf-bot--solid .lf-tile.lf-choice { background: var(--lf-tile-bg, #fff); color: inherit; border: 1px solid var(--lf-tile-border, #e5e7eb); box-shadow: none; }

/* ---- Forms asked one field at a time ---- */
.lf-text-form .lf-skip { display: block; margin: 6px 0 0 auto; padding: 4px 6px; font-size: .9em; }
.lf-consent-form { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lf-consent-form .lf-btn { align-self: flex-end; }
.lf-bot--bubbles .lf-consent-form .lf-consent, .lf-bot--solid .lf-consent-form .lf-consent { font-size: .95em; }

/* Grey example text in empty answer boxes: readable (4.8:1 on white) and clearly not an answer. */
.lf-bot .lf-field::placeholder { color: #6b7280; opacity: 1; font-style: normal; }

/* ---- Sales person card ---- */
.lf-presenter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 0 auto 28px; max-width: 560px; }
.lf-presenter__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--lf-primary); color: var(--lf-primary-text); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); border: 4px solid #fff; margin-bottom: 12px; }
.lf-presenter__photo--initials { display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; }
.lf-presenter__name { font-weight: 700; font-size: 1.1em; }
.lf-presenter__title { font-size: .9em; opacity: .85; }
.lf-presenter__headline { font-size: clamp(1.5em, 4vw, 2.1em); font-weight: 700; line-height: 1.15; margin: 18px 0 6px; }
.lf-presenter__intro { margin: 0; font-size: .92em; line-height: 1.5; opacity: .9; max-width: 34em; }
.lf-presenter__contact { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.lf-presenter__reach { font-weight: 700; font-size: .9em; }
.lf-presenter__icons { display: flex; gap: 10px; }
.lf-presenter__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lf-primary); color: var(--lf-primary-text); box-shadow: 0 2px 6px rgba(0, 0, 0, .16); transition: transform .15s; }
.lf-presenter__icon:hover, .lf-presenter__icon:focus-visible { transform: translateY(-1px); }
.lf-presenter__icon:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 3px; }
.lf-privacy-note { text-align: right; font-size: .78em; opacity: .7; margin: 18px 0 0; }
.lf-privacy-note a { color: inherit; text-decoration: underline; }

/* ---- Pop-up ---- */
.lf-popup { position: fixed; inset: 0; z-index: 999998; display: flex; align-items: flex-start; justify-content: center; padding: 76px 16px 24px; overflow-y: auto; background: rgba(0, 15, 50, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: lf-fade .2s ease-out; }
.lf-popup[hidden] { display: none; }
.lf-popup-open { overflow: hidden; }
.lf-popup__dialog { position: relative; width: 100%; max-width: 820px; background: #fff; color: #1f2937; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); padding: 36px 40px 24px; animation: lf-pop .25s ease-out; }
.lf-popup__dialog--presented { padding-top: 0; }
.lf-popup__dialog--presented .lf-presenter__photo { margin-top: -60px; }
.lf-popup__close { all: unset; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: #4b5563; }
.lf-popup__close:hover, .lf-popup__close:focus-visible { background: #f3f4f6; }
.lf-popup__close:focus-visible { outline: 2px solid #1f2937; }
.lf-popup .lf-bot { color: inherit; }
@keyframes lf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
	.lf-popup { padding: 0; align-items: stretch; }
	.lf-popup__dialog { max-width: none; border-radius: 0; min-height: 100%; padding: 20px 16px 16px; }
	.lf-popup__dialog--presented { padding-top: 20px; }
	.lf-popup__dialog--presented .lf-presenter__photo { margin-top: 0; width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) { .lf-popup, .lf-popup__dialog { animation: none; } }

/* ---- Button fields in forms ---- */
.lf-field-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.lf-field-actions .lf-skip { margin: 0; }
.lf-btn[disabled] { opacity: .5; cursor: not-allowed; }
.lf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.lf-pill { padding: 6px 12px; }
.lf-bot--bubbles .lf-pill, .lf-bot--solid .lf-pill { background: transparent; color: var(--lf-primary); box-shadow: none; }
.lf-bot--bubbles .lf-pill.is-picked, .lf-bot--solid .lf-pill.is-picked, .lf-pill.is-picked { background: var(--lf-primary); color: var(--lf-primary-text); }
/* "Pick several": picked buttons show a tick so the choice is obvious. */
.lf-choice[aria-pressed="true"]::before { content: "✓ "; }
.lf-bot--bubbles .lf-choice[aria-pressed="false"], .lf-bot--solid .lf-choice[aria-pressed="false"] { background: transparent; color: var(--lf-primary); box-shadow: inset 0 0 0 1.5px var(--lf-primary); filter: none; }

/* Bubbles look and corner chats for Bubbles bots: the all-at-once form is a white card. */
.lf-bot--bubbles .lf-form, .lf-bot--solid .lf-form { background: #fff; color: #1f2937; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 15, 50, .06); padding: 18px; gap: 8px; }
.lf-bot--bubbles .lf-form .lf-field, .lf-bot--solid .lf-form .lf-field { border: 1px solid #d1d5db; }
.lf-form .lf-pills { margin-top: 2px; }
.lf-bot--bubbles .lf-form .lf-pill, .lf-bot--solid .lf-form .lf-pill { padding: .45em .9em; font-size: .92em; }