/**
 * Frank Chat -widgetin tyylit.
 *
 * Kaikki luokat on prefiksoitu frank-chat- ja kaikki selektorit on rajattu
 * widgetin juureen .frank-chat-root, jotta tyylit eivät vuoda sivustolle.
 * Värit tulevat ajonaikaisesti CSS-muuttujina, ei kovakoodattua brändiä.
 *
 * Deklaraatiot on merkitty !important-avainsanalla, koska widget upotetaan
 * ennalta tuntemattomiin teemoihin, jotka usein pakottavat omia tyylejään
 * elementeille button, input ja img !important-merkinnällä. Ilman tätä
 * sivuston tyylit vuotaisivat widgetin sisään.
 *
 * CSS-muuttujat on tarkoituksella jätetty ilman !important-merkintää, jotta
 * JS voi asettaa asiakaskohtaisen teeman inline-tyyleinä juurielementtiin.
 */

.frank-chat-root {
	--frank-chat-primary: #2b2b2b;
	--frank-chat-bubble: #f0f1f2;
	--frank-chat-text: #1a1a1a;
	--frank-chat-surface: #ffffff;
	--frank-chat-footer: #f6f7f8;
	--frank-chat-border: #e4e6e8;
	--frank-chat-radius: 16px;

	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 2147483000 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 12px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--frank-chat-text) !important;
	text-align: left !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	filter: none !important;
	float: none !important;
	visibility: visible !important;
}

.frank-chat-root *,
.frank-chat-root *::before,
.frank-chat-root *::after {
	box-sizing: border-box !important;
}

/*
 * Nollataan periytyvät typografia- ja tehostetyylit, joita sivuston teema voi
 * pakottaa elementeille div, span, p, img tai label. Yksittäiset widgetin omat
 * säännöt ovat spesifisempiä ja voittavat tämän.
 */
.frank-chat-root * {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: 400 !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	text-decoration: none !important;
	filter: none !important;
	float: none !important;
	visibility: visible !important;
}

.frank-chat-root button {
	margin: 0 !important;
	font: inherit !important;
	color: inherit !important;
	background: none !important;
	border: 0 !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.frank-chat-root input {
	margin: 0 !important;
	font: inherit !important;
	color: inherit !important;
	box-shadow: none !important;
}

.frank-chat-root button:focus-visible,
.frank-chat-root input:focus-visible {
	outline: 2px solid var(--frank-chat-primary) !important;
	outline-offset: 2px !important;
}

.frank-chat-root .frank-chat-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------- launcher */

.frank-chat-root .frank-chat-launcher {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;
	height: 60px !important;
	padding: 0 !important;
	color: #ffffff !important;
	background-color: var(--frank-chat-primary) !important;
	border-radius: 50% !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.frank-chat-root .frank-chat-launcher:hover {
	transform: scale(1.05) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

.frank-chat-root .frank-chat-launcher svg {
	width: 28px !important;
	height: 28px !important;
	display: block !important;
}

/* ---------------------------------------------------------------- panel */

.frank-chat-root .frank-chat-panel {
	display: flex !important;
	flex-direction: column !important;
	width: 400px !important;
	/*
	 * Korkeus kasvaa sisällön mukaan, ei ole kiinteä.
	 *
	 * Kiinteällä 600 pikselillä pikavalinnat eivät mahtuneet: Termexin viisi
	 * valintaa vaativat 629 pikseliä, joten alin painike jäi puoliksi piiloon.
	 * Footer vieritti, mutta kävijälle se näytti rikkinäiseltä eikä
	 * vierityspalkkia huomannut kukaan.
	 *
	 * min-height on min(), koska pelkkä 600px voittaisi max-heightin matalalla
	 * ikkunalla ja paneeli valuisi ruudun ulkopuolelle.
	 */
	height: auto !important;
	min-height: min(600px, calc(100vh - 110px)) !important;
	max-height: calc(100vh - 110px) !important;
	overflow: hidden !important;
	background-color: var(--frank-chat-surface) !important;
	border-radius: var(--frank-chat-radius) !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24) !important;
}

.frank-chat-root .frank-chat-panel[hidden] {
	display: none !important;
}

.frank-chat-root .frank-chat-panel--expanded {
	width: 460px !important;
	height: 78vh !important;
	/* Kiinteä korkeus riittää: min-height nollataan, ettei se voita rajaa. */
	min-height: 0 !important;
	max-height: calc(100vh - 100px) !important;
}

/* --------------------------------------------------------------- header */

.frank-chat-root .frank-chat-header {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 14px 14px 16px !important;
	color: #ffffff !important;
	background-color: var(--frank-chat-primary) !important;
}

.frank-chat-root .frank-chat-identity {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.frank-chat-root .frank-chat-avatar {
	flex: 0 0 auto !important;
	width: 48px !important;
	height: 48px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
	border: 3px solid #ffffff !important;
	max-width: none !important;
	display: block !important;
	/*
	 * Pystykeskitetty headeriin. Aiemmin avatar roikkui headerin alareunan
	 * yli negatiivisella marginaalilla, mikä on tavallista kelluvissa
	 * chateissa mutta näytti Termexin headerissa siltä että pallo on
	 * valunut alas.
	 */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* Näytetään kun kuvaa ei ole: tyhjä kolo näyttäisi rikkinäiseltä. */
.frank-chat-root .frank-chat-avatar-fallback {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--frank-chat-primary) !important;
	background-color: #ffffff !important;
	border-radius: 50% !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

.frank-chat-root .frank-chat-avatar--hidden {
	display: none !important;
}

.frank-chat-root .frank-chat-bot-name {
	overflow: hidden !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.frank-chat-root .frank-chat-actions {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 2px !important;
}

.frank-chat-root .frank-chat-action {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	opacity: 0.85 !important;
	transition: opacity 0.15s ease, background-color 0.15s ease !important;
}

.frank-chat-root .frank-chat-action:hover {
	opacity: 1 !important;
	background-color: rgba(255, 255, 255, 0.18) !important;
}

.frank-chat-root .frank-chat-action svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
}

/* ------------------------------------------------------------- messages */

.frank-chat-root .frank-chat-messages {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 16px 14px !important;
	overflow-y: auto !important;
	/* Viestialue ei saa kutistua pikavalintojen alta olemattomiin. */
	min-height: 140px !important;
	background-color: var(--frank-chat-surface) !important;
	overscroll-behavior: contain !important;
}

.frank-chat-root .frank-chat-row {
	display: flex !important;
	max-width: 100% !important;
}

.frank-chat-root .frank-chat-row--bot {
	justify-content: flex-start !important;
}

.frank-chat-root .frank-chat-row--user {
	justify-content: flex-end !important;
}

.frank-chat-root .frank-chat-bubble {
	max-width: 82% !important;
	padding: 10px 14px !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
	border-radius: 18px !important;
}

.frank-chat-root .frank-chat-bubble--bot {
	color: var(--frank-chat-text) !important;
	background-color: var(--frank-chat-bubble) !important;
	border-bottom-left-radius: 6px !important;
}

.frank-chat-root .frank-chat-bubble--user {
	color: #ffffff !important;
	background-color: var(--frank-chat-primary) !important;
	border-bottom-right-radius: 6px !important;
}

/*
 * Linkki botin vastauksessa. Alleviivaus on tarpeen, koska brändiväri yksin
 * ei erotu riittävästi harmaasta kuplasta eikä kerro että kohtaa voi klikata.
 */
.frank-chat-root .frank-chat-bubble a {
	color: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.frank-chat-root .frank-chat-bubble--bot a {
	color: var(--frank-chat-primary) !important;
	font-weight: 600 !important;
}

/* ---------------------------------------------------------- typing dots */

.frank-chat-root .frank-chat-typing {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 14px !important;
}

.frank-chat-root .frank-chat-dot {
	width: 7px !important;
	height: 7px !important;
	background-color: currentColor !important;
	border-radius: 50% !important;
	opacity: 0.45 !important;
	animation: frank-chat-bounce 1.2s infinite ease-in-out !important;
}

.frank-chat-root .frank-chat-dot:nth-child(2) {
	animation-delay: 0.15s !important;
}

.frank-chat-root .frank-chat-dot:nth-child(3) {
	animation-delay: 0.3s !important;
}

@keyframes frank-chat-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.35;
	}
	30% {
		transform: translateY(-5px);
		opacity: 0.85;
	}
}

@media (prefers-reduced-motion: reduce) {
	.frank-chat-root .frank-chat-dot {
		animation: none !important;
	}

	.frank-chat-root .frank-chat-launcher {
		transition: none !important;
	}
}

/* -------------------------------------------------------- quick replies */

/*
 * Pikavalinnat saavat kutistua ja vierittyä.
 *
 * Aiemmin footer oli flex: 0 0 auto, eli se vei aina koko tarvitsemansa tilan.
 * Termexillä pikavalintoja on viisi ja yksi niistä kaksirivinen, jolloin
 * footer vei 298 pikseliä ja viestialueelle jäi 104. Botin tervehdys mahtui
 * siihen juuri ja juuri, ja vieritettynä sen ylin rivi jäi headerin alle.
 * Kävijälle se näyttää rikkinäiseltä.
 *
 * Nyt viestialueella on taattu vähimmäiskorkeus ja footer vierittyy jos
 * valintoja on paljon.
 */
.frank-chat-root .frank-chat-footer {
	/*
	 * Ei kiinteää ylärajaa: paneeli kasvaa sisällön mukaan, ja kun se osuu
	 * ikkunan rajaan, flex kutistaa juuri tätä lohkoa. Viestialueella on
	 * min-height, tällä ei, joten kutistus osuu tähän ensin ja footer
	 * vierittyy vasta kun tilaa ei oikeasti ole.
	 *
	 * Aiempi max-height: 45% oli arvattu luku ja se leikkasi alimman
	 * painikkeen silloinkin kun tilaa olisi ollut.
	 */
	flex: 0 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	background-color: var(--frank-chat-footer) !important;
}

.frank-chat-root .frank-chat-quick {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 12px 14px !important;
	border-top: 1px solid var(--frank-chat-border) !important;
}

.frank-chat-root .frank-chat-quick--hidden {
	display: none !important;
}

.frank-chat-root .frank-chat-quick-button {
	width: 100% !important;
	padding: 11px 16px !important;
	color: #ffffff !important;
	text-align: center !important;
	background-color: var(--frank-chat-primary) !important;
	border-radius: 999px !important;
	transition: opacity 0.15s ease !important;
}

.frank-chat-root .frank-chat-quick-button:hover {
	opacity: 0.9 !important;
}

.frank-chat-root .frank-chat-quick-button:disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

/* ------------------------------------------------------------ lead form */

.frank-chat-root .frank-chat-lead {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 14px !important;
	margin-top: 4px !important;
	background-color: var(--frank-chat-footer) !important;
	border: 1px solid var(--frank-chat-border) !important;
	border-radius: 14px !important;
}

.frank-chat-root .frank-chat-lead-title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--frank-chat-text) !important;
}

.frank-chat-root .frank-chat-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.frank-chat-root .frank-chat-field-label {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--frank-chat-text) !important;
	opacity: 0.8 !important;
}

.frank-chat-root .frank-chat-field-input {
	width: 100% !important;
	padding: 9px 12px !important;
	background-color: #ffffff !important;
	border: 1px solid var(--frank-chat-border) !important;
	border-radius: 8px !important;
	/*
	 * Sama sääntö koskee myös select-elementtiä. Ilman näitä asiakkaan teema
	 * muotoilee pudotusvalikon omalla tavallaan ja se erottuu muista kentistä.
	 */
	font: inherit !important;
	font-size: 15px !important;
	color: var(--frank-chat-text) !important;
	appearance: auto !important;
	min-height: 40px !important;
}

.frank-chat-root .frank-chat-lead-error {
	margin: 0 !important;
	font-size: 13px !important;
	color: #b3261e !important;
}

.frank-chat-root .frank-chat-lead-error[hidden] {
	display: none !important;
}

.frank-chat-root .frank-chat-lead-submit {
	padding: 11px 16px !important;
	color: #ffffff !important;
	text-align: center !important;
	background-color: var(--frank-chat-primary) !important;
	border-radius: 999px !important;
}

.frank-chat-root .frank-chat-lead-submit:disabled {
	opacity: 0.6 !important;
	cursor: default !important;
}

/* ------------------------------------------------------------ input row */

.frank-chat-root .frank-chat-input-row {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 12px !important;
	background-color: var(--frank-chat-surface) !important;
	border-top: 1px solid var(--frank-chat-border) !important;
}

.frank-chat-root .frank-chat-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 10px 14px !important;
	background-color: var(--frank-chat-surface) !important;
	border: 1px solid var(--frank-chat-border) !important;
	border-radius: 999px !important;
}

.frank-chat-root .frank-chat-input:disabled {
	opacity: 0.6 !important;
}

.frank-chat-root .frank-chat-send {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	color: #ffffff !important;
	background-color: var(--frank-chat-primary) !important;
	border-radius: 50% !important;
}

.frank-chat-root .frank-chat-send:disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

.frank-chat-root .frank-chat-send svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 640px) {
	.frank-chat-root {
		right: 16px !important;
		bottom: 16px !important;
	}

	.frank-chat-root .frank-chat-panel {
		position: fixed !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 75vh !important;
		height: 75dvh !important;
		/*
		 * min-height nollataan, koska työpöytäsääntö asettaa sen kasvamaan
		 * sisällön mukaan. CSS:ssä min-height voittaa max-heightin, joten
		 * matalalla puhelimella paneeli olisi valunut ruudun ulkopuolelle.
		 */
		min-height: 0 !important;
		max-height: 75vh !important;
		max-height: 75dvh !important;
		border-radius: var(--frank-chat-radius) var(--frank-chat-radius) 0 0 !important;
	}

	.frank-chat-root .frank-chat-panel--expanded {
		width: 100% !important;
		height: 92vh !important;
		height: 92dvh !important;
		min-height: 0 !important;
		max-height: 92vh !important;
		max-height: 92dvh !important;
	}

	.frank-chat-root--open .frank-chat-launcher {
		display: none !important;
	}

	.frank-chat-root .frank-chat-action--expand {
		display: none !important;
	}

	.frank-chat-root .frank-chat-bubble {
		max-width: 86% !important;
	}
}

/* ------------------------------------------------------- tiedotteet */

/*
 * Tekoälytiedote paneelin alalaidassa. Näkyvä mutta hillitty: sen pitää
 * olla luettavissa ilman että se vie huomiota keskustelulta.
 */
.frank-chat-root .frank-chat-disclosure {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 7px 14px 9px !important;
	font-size: 11px !important;
	line-height: 1.45 !important;
	color: #6B7280 !important;
	text-align: center !important;
	background-color: var(--frank-chat-surface) !important;
	border-top: 1px solid var(--frank-chat-border) !important;
}

.frank-chat-root .frank-chat-disclosure-link {
	color: inherit !important;
	text-decoration: underline !important;
}

.frank-chat-root .frank-chat-lead-privacy {
	margin: -4px 0 12px !important;
	font-size: 11.5px !important;
	line-height: 1.5 !important;
	color: #6B7280 !important;
}

/* Nimi ja rooli allekkain headerissa. Rooli kertoo että vastassa on tekoäly. */
.frank-chat-root .frank-chat-identity-text {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	line-height: 1.25 !important;
}

.frank-chat-root .frank-chat-bot-subtitle {
	overflow: hidden !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.88) !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}