/*
 * Pulsante del chatbot: link fisso in basso a destra.
 *
 * position: fixed e non sticky: sul sito body ha overflow: hidden (Customizer)
 * e sticky non funziona su nessun elemento. Vedi il README dell'etichetta
 * laterale.
 *
 * Impilamento, 95, guardando cosa c'e' sul sito (tabella completa nel foglio
 * dell'etichetta laterale):
 *
 *   999999  preloader video
 *    99999  banner cookie (Complianz); 9999 il suo velo
 *     9999  popup Elementor
 *      100  menu a tutta pagina
 *       99  header
 *       95  QUESTO PULSANTE
 *       90  etichetta laterale
 *
 * Sopra al contenuto e all'etichetta, sotto a header, menu, popup e banner,
 * che quando si aprono lo coprono.
 */

.kb-pulsante-chatbot {
	--kb-pulsante-chatbot-margine: 24px;
	--kb-pulsante-chatbot-z: 95;

	position: fixed;
	right: calc(var(--kb-pulsante-chatbot-margine) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--kb-pulsante-chatbot-margine) + env(safe-area-inset-bottom, 0px));
	z-index: var(--kb-pulsante-chatbot-z);

	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
	border-radius: 24px; /* meta' dell'altezza: l'ombra segue la forma */
	background: transparent;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Niente colori o sfondi del tema (il rosa di Hello Elementor) negli stati. */
.kb-pulsante-chatbot:hover,
.kb-pulsante-chatbot:focus,
.kb-pulsante-chatbot:active {
	background: transparent;
	color: inherit;
	text-decoration: none;
	outline: none;
}

.kb-pulsante-chatbot:focus-visible {
	outline: 2px solid #F86036;
	outline-offset: 2px;
}

/*
 * Alti 48px, larghezza dalla proporzione del viewBox (che resta quello dei
 * file): la pillola 177x62 diventa circa 137x48, il cerchio 62x62 48x48.
 * width: auto scavalca gli attributi width/height dell'SVG, quindi niente
 * deformazioni.
 */
.kb-pulsante-chatbot__icona {
	display: block;
	width: auto;
	height: 48px;
	max-width: none;
	flex: none;
}

.kb-pulsante-chatbot__icona--cerchio {
	display: none;
}

/* Fino a 1024px: il cerchio, a 16px dai bordi. */
@media (max-width: 1024.98px) {
	.kb-pulsante-chatbot {
		--kb-pulsante-chatbot-margine: 16px;
	}

	.kb-pulsante-chatbot__icona--pillola {
		display: none;
	}

	.kb-pulsante-chatbot__icona--cerchio {
		display: block;
	}
}

/* Hover su desktop: leggero, e senza movimento per chi lo ha disattivato. */
@media (min-width: 1025px) and (hover: hover) {
	.kb-pulsante-chatbot:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	}
}

@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.kb-pulsante-chatbot {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
}