/* LeadFlow frontend — token-pohjainen. Kaikki värit/mitat tulevat
   CSS-muuttujista (--lf-*), jotka render tulostaa teemasta.
   Uudelleentyylitys per asiakas = vaihda tokenit, ei tätä tiedostoa. */

/* Inter variable -@font-face tulostetaan PHP:ssä (wp_add_inline_style) ja vain
   silloin kun resolvoitu teema oikeasti käyttää Interiä → woff2 ei lataudu turhaan. */

.leadflow-stage {
	--lf-primary: #0d1b5e;
	--lf-on-primary: #fff;
	--lf-secondary: #c8a06a;
	--lf-on-secondary: #fff;
	--lf-surface: #f4f0ea;
	--lf-heading: #0d1b5e;
	--lf-heading-size: 26px;
	--lf-text: #1e2433;
	--lf-accent: #c8a04a;
	--lf-card-bg: rgba( 255, 255, 255, 0.72 );
	--lf-card-blur: 10px;
	--lf-card-radius: 16px;
	--lf-card-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 ), 0 12px 32px rgba( 0, 0, 0, 0.1 );
	--lf-max-width: 900px;
	--lf-bg-overlay: rgba( 255, 255, 255, 0.25 );
	--lf-btn-radius: 8px;
	--lf-btn-transform: none;
	--lf-chevron-display: none;
	--lf-font: 'Inter', sans-serif;
	--lf-body-size: 16px;
	--lf-line-height: 1.5;
	--lf-heading-weight: 800;
	--lf-card-padding: 44px;
	--lf-field-gap: 16px;

	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32px 16px;
	box-sizing: border-box;
	font-family: var( --lf-font );
	font-size: var( --lf-body-size );
	line-height: var( --lf-line-height );
}

/* === Layout-variantit === */
/* Full-width: kortti levenee koko alueelle, ei max-leveysrajaa. */
.leadflow-stage--full { padding: 0; }
.leadflow-stage--full .leadflow { max-width: none; border-radius: 0; }

/* Split-screen: kuva vasemmalla, flow oikealla (Typeform-tyyli). */
.leadflow-stage--split {
	align-items: stretch;
	padding: 0;
	min-height: 520px;
}
.leadflow-stage--split .leadflow__split-media {
	flex: 1 1 45%;
	background-image: var( --lf-split-image );
	background-size: cover;
	background-position: center;
	min-height: 240px;
}
.leadflow-stage--split .leadflow {
	flex: 1 1 55%;
	max-width: none;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media ( max-width: 768px ) {
	.leadflow-stage--split { flex-direction: column; }
}

/* Taustakuva + overlay */
.leadflow-stage.has-bg {
	background-image: var( --lf-bg-image );
	background-size: cover;
	background-position: center;
	min-height: 460px;
}

.leadflow-stage.has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var( --lf-bg-overlay );
	pointer-events: none;
}

/* Frosted-kortti */
.leadflow {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --lf-max-width );
	background: var( --lf-card-bg );
	backdrop-filter: blur( var( --lf-card-blur ) );
	-webkit-backdrop-filter: blur( var( --lf-card-blur ) );
	border-radius: var( --lf-card-radius );
	box-shadow: var( --lf-card-shadow );
	padding: var( --lf-card-padding );
	box-sizing: border-box;
}

.leadflow__step { animation: leadflow-fade 0.25s ease-out; }
.leadflow__step:focus { outline: none; } /* ohjelmallinen focus step-vaihdossa, ei visuaalista rengasta containerille */

@keyframes leadflow-fade {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* Ohut progress-palkki (wizard): vierailtujen steppien osuus, animoituu leveydellä */
.leadflow__progress {
	height: 4px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --lf-primary ) 12%, transparent );
	margin-bottom: 1.5em;
	overflow: hidden;
}

.leadflow__progress-bar {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: var( --lf-primary );
	transition: width 0.3s ease;
}

/* Otsikot ja teksti */
.leadflow__message,
.leadflow__prompt {
	color: var( --lf-heading );
	font-size: var( --lf-heading-size );
	font-weight: var( --lf-heading-weight );
	text-align: center;
	line-height: 1.25;
	margin: 0 0 1.5em;
}

.leadflow__message {
	color: var( --lf-text );
	font-size: 1.05em;
	font-weight: 500;
	white-space: pre-line;
}

/* Solid-valinnat: keskitetty rivi */
.leadflow__options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.leadflow__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var( --lf-secondary );
	color: var( --lf-on-secondary );
	border: none;
	border-radius: var( --lf-btn-radius );
	padding: 16px 32px;
	font-size: 1em;
	font-weight: 700;
	text-transform: var( --lf-btn-transform );
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.leadflow__option:hover {
	transform: translateY( -1px );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.08 ), 0 8px 20px rgba( 0, 0, 0, 0.1 );
}

.leadflow__option:hover,
.leadflow__option.selected {
	background: var( --lf-primary );
	color: var( --lf-on-primary );
}

/* Valitun tilan selkeä indikointi myös ilman hoveria: ring primary-johdannaisella */
.leadflow__option.selected {
	box-shadow: 0 0 0 2px color-mix( in srgb, var( --lf-primary ) 35%, transparent );
}

/* Custom chevron (näkyy kun --lf-chevron-display: inline-block).
   Väri seuraa napin tekstiä → näkyy sekä navy- että tan-napilla. */
.leadflow__option:not( .leadflow__option--card )::after,
.leadflow__next::after,
.leadflow__submit::after {
	content: '';
	display: var( --lf-chevron-display );
	width: 7px;
	height: 11px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M8.75 7.75C4.46979 7.75 1 4.28021 1 0' stroke='%23000' stroke-width='2' fill='none'/%3E%3Cpath d='M8.75 7.75C4.46979 7.75 1 11.2198 1 15.5' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E" ) no-repeat center / contain;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M8.75 7.75C4.46979 7.75 1 4.28021 1 0' stroke='%23000' stroke-width='2' fill='none'/%3E%3Cpath d='M8.75 7.75C4.46979 7.75 1 11.2198 1 15.5' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E" ) no-repeat center / contain;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Submit/next napit ovat täysleveitä → flex jo center-aligns, mutta varmistetaan ettei viiva jää oudosti. */
.leadflow__next,
.leadflow__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/* Aktiivisella (navy) napilla chevron kullan värisenä, kuten alkuperäisessä. */
.leadflow__option:not( .leadflow__option--card ):hover::after,
.leadflow__option:not( .leadflow__option--card ).selected::after,
.leadflow__next::after,
.leadflow__submit::after {
	background-color: var( --lf-accent );
}

/* Kuvakortti-valinnat: grid (oletus auto-fit). */
.leadflow__options--cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 18px;
	max-width: 760px;
	margin: 0 auto;
}

/* Per-step sarakemäärä (1-4). Pakottaa N saraketta desktopissa,
   tableteissa max 2, mobiilissa aina 1 → automaattinen responsiivisuus. */
.leadflow__options--cols-1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.leadflow__options--cols-2 { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; }
.leadflow__options--cols-3 { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 14px; }
.leadflow__options--cols-4 { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 14px; }

@media ( max-width: 900px ) {
	.leadflow__options--cols-3,
	.leadflow__options--cols-4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.leadflow__options--cols-2,
	.leadflow__options--cols-3,
	.leadflow__options--cols-4 { grid-template-columns: 1fr; }
}

.leadflow__option--card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var( --lf-surface );
	color: var( --lf-heading );
}

.leadflow__option--card:hover,
.leadflow__option--card.selected {
	background: var( --lf-primary );
	color: var( --lf-on-primary );
}

.leadflow__option-imgwrap {
	display: block;
	background: #fff;
	padding: 18px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.leadflow__option-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.25s ease; }
.leadflow__option--card:hover .leadflow__option-img { transform: scale( 1.05 ); }

.leadflow__option--card .leadflow__option-label {
	display: block;
	padding: 16px 12px;
	color: inherit;
	font-weight: 700;
}

.leadflow__option--card .leadflow__option-badge {
	display: block;
	padding: 12px 12px 0;
	color: inherit; /* seuraa kortin värin: default tumma, hover valkoinen → luettavissa molemmilla taustoilla */
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.65;
}

/* Syötteet */
.leadflow__label {
	display: block;
	color: var( --lf-text );
	font-weight: 600;
	margin: 0 0 0.4em;
}

.leadflow__input {
	width: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	font-size: 1em;
	border: 1px solid color-mix( in srgb, var( --lf-primary ) 25%, transparent );
	border-radius: var( --lf-btn-radius );
	background: #fff;
	font-family: inherit;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.leadflow__input:hover {
	border-color: color-mix( in srgb, var( --lf-primary ) 50%, transparent );
}

.leadflow__input:focus {
	outline: none;
	border-color: var( --lf-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lf-primary ) 15%, transparent );
}

.leadflow__field { margin-bottom: 1em; }

/* Lomake: kenttäväli teemamuuttujasta */
.leadflow__form { display: flex; flex-direction: column; gap: var( --lf-field-gap ); }
.leadflow__form .leadflow__field { margin-bottom: 0; }

/* Pakollisuusmerkki + inline-validointivirheet */
.leadflow__req { color: #d63638; }

.leadflow__field-error {
	display: block;
	color: #d63638;
	font-size: 0.85em;
	margin-top: 0.35em;
	line-height: 1.3;
}

.leadflow__input[aria-invalid="true"] {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, 0.12 );
}

/* === Rating (tähdet / NPS) === */
.leadflow__rating {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.leadflow__rating--stars .leadflow__rating-item {
	background: none;
	border: none;
	font-size: 2.2em;
	line-height: 1;
	cursor: pointer;
	color: #d1d5db;
	padding: 6px;
	min-width: 44px;
	min-height: 44px; /* WCAG-touch-target */
	transition: color 0.16s ease, transform 0.16s ease;
}

.leadflow__rating--stars .leadflow__rating-item:hover { transform: scale( 1.12 ); }
.leadflow__rating--stars .leadflow__rating-item.filled { color: var( --lf-secondary ); }

.leadflow__rating--nps .leadflow__rating-item {
	width: 44px;
	height: 44px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: var( --lf-text );
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.leadflow__rating--nps .leadflow__rating-item:hover,
.leadflow__rating--nps .leadflow__rating-item.filled {
	background: var( --lf-primary );
	color: var( --lf-on-primary );
	border-color: var( --lf-primary );
}

/* === Slider (moderni, cross-browser custom track/thumb) === */
.leadflow__slider {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0.75em 0 0.25em;
}

.leadflow__slider-input {
	--lf-fill: 0%;
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient( to right, var( --lf-primary ) 0%, var( --lf-primary ) var( --lf-fill ), #e5e7eb var( --lf-fill ), #e5e7eb 100% );
	cursor: pointer;
	outline: none;
}

/* WebKit track + thumb */
.leadflow__slider-input::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: transparent;
}
.leadflow__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -9px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var( --lf-primary );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.12 ), 0 3px 10px rgba( 0, 0, 0, 0.18 );
	cursor: grab;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.leadflow__slider-input::-webkit-slider-thumb:hover { transform: scale( 1.15 ); }
.leadflow__slider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale( 1.05 ); box-shadow: 0 0 0 6px color-mix( in srgb, var( --lf-primary ) 12%, transparent ); }

/* Firefox track + progress + thumb */
.leadflow__slider-input::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: #e5e7eb;
}
.leadflow__slider-input::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: var( --lf-primary );
}
.leadflow__slider-input::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var( --lf-primary );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	cursor: grab;
}

.leadflow__slider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix( in srgb, var( --lf-primary ) 18%, transparent ); }

.leadflow__slider-val {
	min-width: 72px;
	text-align: right;
	font-weight: 800;
	font-size: 1.15em;
	color: var( --lf-heading );
	font-variant-numeric: tabular-nums;
}

/* === File upload === */
.leadflow__file { display: flex; flex-direction: column; gap: 8px; }

.leadflow__file-input {
	font: inherit;
	padding: 10px;
	border: 1px dashed #c3c8d0;
	border-radius: var( --lf-btn-radius );
	background: #fafafb;
	cursor: pointer;
}

.leadflow__file-status { font-size: 0.85em; color: #16a34a; }

/* === Media-kortti === */
.leadflow__media {
	border-radius: 14px;
	overflow: hidden;
	background: var( --lf-surface );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
}

.leadflow__media-img,
.leadflow__media-video { width: 100%; display: block; }

.leadflow__media-body { padding: 16px 18px; }
.leadflow__media-title { font-weight: 800; color: var( --lf-heading ); font-size: 1.1em; margin-bottom: 4px; }
.leadflow__media-text { color: var( --lf-text ); font-size: 0.95em; line-height: 1.45; }

.leadflow__media-cta {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	background: var( --lf-secondary );
	color: var( --lf-on-secondary );
	border-radius: var( --lf-btn-radius );
	font-weight: 700;
	text-decoration: none;
}

/* === Calculator-tulos === */
.leadflow__calc-result {
	font-size: 1.15em;
	font-weight: 700;
	color: var( --lf-heading );
	text-align: center;
	margin: 0.5em 0 1em;
	white-space: pre-line;
}

.leadflow__choice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.4em 0;
	color: var( --lf-text );
}

/* Natiivit radiot/checkboxit teemavärillä — ei ihmeneliötä. */
.leadflow__choice input[ type='radio' ],
.leadflow__choice input[ type='checkbox' ],
.leadflow__consent input[ type='checkbox' ] {
	appearance: auto;
	-webkit-appearance: auto;
	accent-color: var( --lf-primary );
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
}

.leadflow__consent {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 1em 0;
	font-size: 0.9em;
	color: var( --lf-text );
}

/* Aloita alusta -painike */
.leadflow__reset {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var( --lf-primary );
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s, transform 0.2s;
}

.leadflow__reset:hover { opacity: 1; transform: rotate( -90deg ); }

/* Next / submit -napit: täysleveä navy */
.leadflow__next,
.leadflow__submit {
	display: block;
	width: 100%;
	margin-top: 1.5em;
	padding: 16px;
	background: var( --lf-primary );
	color: var( --lf-on-primary );
	border: none;
	border-radius: var( --lf-btn-radius );
	font-size: 1.05em;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.12s;
}

.leadflow__next:hover,
.leadflow__submit:hover { opacity: 0.92; }
.leadflow__next[disabled],
.leadflow__submit[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Honeypot: täysin piilossa screen readereiltä ja katselijoilta. */
.leadflow__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.leadflow__error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	padding: 0.7em 1em;
	border-radius: var( --lf-btn-radius );
	margin-bottom: 1em;
	text-align: center;
}

@media ( max-width: 600px ) {
	.leadflow { padding: 28px 22px; }
	.leadflow__message,
	.leadflow__prompt { font-size: 1.3em; }
}

/* --- Conversation-presentaatio (chat-näkymä) --- */
.leadflow-stage--conv .leadflow {
	padding: 24px 24px 32px;
}

/* Pakota hidden-attribuutti piilottamaan kaikki LeadFlow-elementit (oma CSS:mme overridaa muuten UA-säännön). */
.leadflow-stage [hidden] { display: none !important; }

.lf-chat__row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.lf-chat__row--bot {
	justify-content: flex-start;
}

.lf-chat__row--user {
	justify-content: flex-end;
}

.lf-chat__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var( --lf-surface );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
}

/* Fallback-ikoni kun avatarUrl on tyhjä → chat-kupla SVG primary-värillä */
.lf-chat__avatar:not( [style*='background-image'] ) {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d1b5e'%3E%3Cpath d='M12 2C6.48 2 2 5.92 2 10.7c0 2.5 1.27 4.75 3.31 6.36L4 22l4.85-2.39c.99.25 2.04.39 3.15.39 5.52 0 10-3.92 10-8.7S17.52 2 12 2z'/%3E%3C/svg%3E" );
	background-size: 60%;
	background-position: center;
}

.lf-chat__bubble {
	max-width: 80%;
	padding: 14px 18px;
	border-radius: 18px;
	line-height: 1.45;
	font-size: 0.95em;
}

.lf-chat__bubble--bot {
	background: #fff;
	color: var( --lf-text );
	border-top-left-radius: 4px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 4px 12px rgba( 0, 0, 0, 0.06 );
}

.lf-chat__bubble--user {
	background: var( --lf-primary );
	color: var( --lf-on-primary );
	border-top-right-radius: 4px;
	font-weight: 500;
}

/* Lukittu botti-kupla: kun käyttäjä on vastannut, vaihtoehtoja ei voi enää klikata. */
.lf-chat__bubble--bot.is-locked {
	pointer-events: none;
}

.lf-chat__bubble--bot.is-locked .leadflow__option:not( .selected ) {
	opacity: 0.45;
	filter: grayscale( 20% );
}

/* Typing-indikaattori (native chat -tyyppinen) */
.lf-chat__typing {
	display: none;
	gap: 5px;
	align-items: center;
	padding: 4px 2px;
}

.lf-chat__bubble--bot.is-typing .lf-chat__typing { display: flex; }
.lf-chat__bubble--bot.is-typing .lf-chat__bubble-body { display: none; }

.lf-chat__typing__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9ca3af;
	animation: lf-typing 1.2s infinite ease-in-out both;
}

.lf-chat__typing__dot:nth-child( 2 ) { animation-delay: 0.15s; }
.lf-chat__typing__dot:nth-child( 3 ) { animation-delay: 0.3s; }

@keyframes lf-typing {
	0%, 60%, 100% { transform: translateY( 0 ); opacity: 0.4; }
	30% { transform: translateY( -5px ); opacity: 1; }
}

/* Bot-kuplan sisällä prompti vasemmalle, ei jättiotsikkona */
.leadflow-stage--conv .leadflow__prompt,
.leadflow-stage--conv .leadflow__message {
	text-align: left;
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 12px;
}

.leadflow-stage--conv .leadflow__message {
	font-weight: 500;
	color: var( --lf-text );
}

.leadflow-stage--conv .leadflow__options {
	margin-top: 12px;
}

.leadflow-stage--conv .leadflow__option {
	padding: 10px 18px;
	font-size: 0.9em;
}

.leadflow-stage--conv .leadflow__input {
	padding: 10px 14px;
	font-size: 0.95em;
}

.leadflow-stage--conv .leadflow__next,
.leadflow-stage--conv .leadflow__submit {
	padding: 12px 18px;
	margin-top: 12px;
	font-size: 0.95em;
}

/* === Kelluva chatbot === */
.leadflow-chatbot {
	position: fixed;
	right: 1.25em;
	bottom: 1.25em;
	z-index: 9999;
	font-family: 'Inter', sans-serif;
}

/* Toggle-nappi (tukee tekstillistä pill-tyyliä JA pelkkää ympyrää) */
.leadflow-chatbot__toggle {
	position: relative;
	height: 56px;
	min-width: 56px;
	border-radius: 28px;
	border: none;
	background: var( --lf-primary, #0d1b5e );
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.25 );
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.2s, box-shadow 0.2s;
}

.leadflow-chatbot__toggle:hover { transform: translateY( -1px ); box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.3 ); }

.leadflow-chatbot__toggle.has-label { padding: 0 8px 0 18px; }

.leadflow-chatbot__toggle-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --lf-secondary, #c8a06a );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.leadflow-chatbot__toggle:not(.has-label) {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	padding: 0;
	justify-content: center;
}

.leadflow-chatbot__toggle:not(.has-label) .leadflow-chatbot__toggle-icon {
	width: 100%;
	height: 100%;
	background: transparent;
}

.leadflow-chatbot__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Avoimessa tilassa toggle piiloon (paitsi persistent-tilassa joka pitää näkymättömänä) */
.leadflow-chatbot.is-open:not( .is-persistent ) .leadflow-chatbot__toggle {
	display: none;
}

/* Persistent: toggle koko ajan piilossa, panel aina näkyvissä */
.leadflow-chatbot.is-persistent .leadflow-chatbot__toggle { display: none; }

/* Iso pyöreä oranssi FAB sulkemiseen (Groweo-tyylinen) */
.leadflow-chatbot__close-fab {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var( --lf-secondary, #c8a06a );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.3 );
	z-index: 2;
	transition: transform 0.2s;
}

.leadflow-chatbot__close-fab:hover { transform: rotate( 90deg ); }

/* Pulse-rengas (houkuttelu) */
.leadflow-chatbot__toggle.has-pulse::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 3px solid var( --lf-primary, #0d1b5e );
	opacity: 0;
	animation: lf-chatbot-pulse 2.4s ease-out infinite;
}

.leadflow-chatbot.is-open .leadflow-chatbot__toggle.has-pulse::before { display: none; }

@keyframes lf-chatbot-pulse {
	0%   { transform: scale( 1 );    opacity: 0.5; }
	70%  { transform: scale( 1.35 ); opacity: 0; }
	100% { transform: scale( 1.35 ); opacity: 0; }
}

/* Teaser-kupla */
.leadflow-chatbot__teaser {
	position: absolute;
	bottom: 72px;
	right: 0;
	max-width: 240px;
	background: #fff;
	color: #1f2937;
	padding: 12px 32px 12px 16px;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	animation: lf-teaser-in 0.35s ease-out;
}

.leadflow-chatbot__teaser::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: 20px;
	width: 16px;
	height: 16px;
	background: #fff;
	transform: rotate( 45deg );
	box-shadow: 4px 4px 8px rgba( 0, 0, 0, 0.06 );
}

.leadflow-chatbot__teaser-close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.leadflow-chatbot__teaser-close:hover { background: #f3f4f6; }

@keyframes lf-teaser-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* Panel */
.leadflow-chatbot__panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: min( 460px, calc( 100vw - 2.5em ) );
	max-height: 76vh;
	overflow-y: auto;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.3 );
	background: #fff;
	transform-origin: bottom right;
	animation: lf-panel-in 0.22s ease-out;
	padding-bottom: 72px; /* tilaa close-FAB:lle */
}

/* Persistent-tilassa panel on aina näkyvissä eikä animoidu sisään */
.leadflow-chatbot.is-persistent .leadflow-chatbot__panel { animation: none; }

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

/* Aikamerkki chat-kuplien alle */
.lf-chat__bubble-wrap { display: flex; flex-direction: column; max-width: 80%; }
.lf-chat__row--user .lf-chat__bubble-wrap { align-items: flex-end; }
.lf-chat__bubble-wrap .lf-chat__bubble { max-width: 100%; }

.lf-chat__time {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
	padding: 0 4px;
}
.leadflow-chatbot__panel .leadflow-stage { padding: 0; min-height: 0; }
.leadflow-chatbot__panel .leadflow { box-shadow: none; padding: 28px 26px; background: #fff; backdrop-filter: none; }

/* Mobile: bottom-sheet */
@media ( max-width: 600px ) {
	.leadflow-chatbot.is-open .leadflow-chatbot__panel {
		position: fixed;
		inset: 0;
		width: 100vw;
		max-height: 100vh;
		border-radius: 0;
		animation: lf-panel-sheet-in 0.25s ease-out;
	}
	.leadflow-chatbot.is-open .leadflow-chatbot__close-fab {
		bottom: 12px;
		right: 12px;
	}
	@keyframes lf-panel-sheet-in {
		from { transform: translateY( 100% ); }
		to   { transform: translateY( 0 ); }
	}
	.leadflow-chatbot__teaser { max-width: 200px; font-size: 13px; }
}

/* === Saavutettavuus: kunnioita reduced motion -asetusta === */
@media ( prefers-reduced-motion: reduce ) {
	.leadflow-stage,
	.leadflow-stage *,
	.leadflow-stage *::before,
	.leadflow-stage *::after,
	.leadflow-chatbot,
	.leadflow-chatbot *,
	.leadflow-chatbot *::before,
	.leadflow-chatbot *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* === Rich-tekstin typografia (message/prompt/media sallittu HTML) === */
.leadflow__message h2,
.leadflow__message h3,
.leadflow__message h4,
.leadflow__prompt h2,
.leadflow__prompt h3,
.leadflow__prompt h4,
.leadflow__media-text h3,
.leadflow__media-text h4 {
	color: var( --lf-heading );
	font-weight: var( --lf-heading-weight, 800 );
	line-height: 1.25;
	margin: 0 0 0.5em;
}
.leadflow__message h2 { font-size: 1.4em; }
.leadflow__message h3,
.leadflow__prompt h3 { font-size: 1.2em; }
.leadflow__message h4,
.leadflow__prompt h4 { font-size: 1.05em; }
.leadflow__message p,
.leadflow__media-text p {
	margin: 0 0 0.75em;
}
.leadflow__message p:last-child,
.leadflow__media-text p:last-child {
	margin-bottom: 0;
}
.leadflow__message ul,
.leadflow__message ol,
.leadflow__media-text ul,
.leadflow__media-text ol {
	margin: 0 0 0.75em;
	padding-left: 1.4em;
	text-align: left;
}
.leadflow__message li,
.leadflow__media-text li {
	margin-bottom: 0.25em;
}
.leadflow__message a,
.leadflow__prompt a,
.leadflow__media-text a {
	color: var( --lf-primary );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Tasaus-utilityt rich-teksteihin: <p class="lf-center">…</p> tai koko viesti <div class="lf-center">…</div> */
.leadflow-stage .lf-center,
.leadflow-chatbot .lf-center {
	text-align: center;
}
.leadflow-stage .lf-left,
.leadflow-chatbot .lf-left {
	text-align: left;
}
.leadflow-stage .lf-right,
.leadflow-chatbot .lf-right {
	text-align: right;
}
.leadflow-stage .lf-center ul,
.leadflow-stage .lf-center ol,
.leadflow-chatbot .lf-center ul,
.leadflow-chatbot .lf-center ol {
	display: inline-block;
	text-align: left;
}