/*
 * La grafica della chat.
 *
 * TUTTE le classi cominciano per "assai-" e TUTTE le variabili per
 * "--assai-": questo file finisce dentro il sito di qualcun altro,
 * accanto a Woodmart o Astra, e un nome generico si scontrerebbe con
 * qualcosa. A scontrarsi sarebbe la grafica del cliente.
 *
 * Le variabili si scrivono sui NOSTRI elementi, mai su :root: cosi' non
 * restano in giro per il resto del sito.
 *
 * color-scheme: light e' voluto. Diversi temi hanno una modalita' scura
 * che rovescia i colori di tutto quello che trovano: senza questa riga,
 * su quei siti, il pannello della chat esce con il testo bianco su
 * bianco.
 *
 * LE MISURE VENGONO DAL RIFERIMENTO (kippun-haru.com, studio del 14
 * settembre 2026, riferimento-kippun/SPEC.md): le sigle fra parentesi
 * (P1, D3, C8...) sono i punti di quello studio. Due curve per tutto:
 *   «morbida»  cubic-bezier(0.25, 0, 0.1, 1)   150 ms, colori e opacita'
 *   «molla»    supera l'arrivo dell'1,7% e rientra, 320 ms, misure e scala
 * DOVE ABBIAMO SCELTO DIVERSO E' SCRITTO: i testi grigi del riferimento
 * stanno sotto 4,5:1 (l'avviso AI a 2,5:1), qui no.
 */

/*
 * L'OSPITE DELL'OMBRA.
 *
 * Dentro una radice d'ombra i selettori del tema non entrano, ma le
 * proprieta' EREDITATE si': font, colore, interlinea, e soprattutto
 * text-transform, che su WoodMart rendeva MAIUSCOLE tutte le scritte
 * dei pulsanti. «all: initial» taglia l'eredita' alla radice.
 *
 * E' scritto anche nell'attributo style dell'ospite, che nessuna regola
 * del tema puo' battere senza !important: qui e' la cintura, li' sono
 * le bretelle.
 */
:host {
	all: initial;
	display: block;
}

.assai-bolla,
.assai-velo,
.assai-pannello {
	--assai-colore: #1f6feb;
	--assai-testo-colore: #ffffff;
	/* il vetro e i testi: i valori del riferimento */
	--assai-fondo: #fbf7f6;
	--assai-fondo-70: rgba(251, 247, 246, .7);
	--assai-fondo-80: rgba(251, 247, 246, .8);
	--assai-fondo-90: rgba(251, 247, 246, .9);
	--assai-testo: #333334;
	/* I GRIGI PIENI, NON TRASPARENTI. Nel riferimento saluto e nota sono
	   al 56% (3,3:1), l'avviso al 45% (2,5:1). #5c5b5c sul vetro fa
	   6,35:1, e resta sopra 4,5:1 anche con una pagina grigia dietro. */
	--assai-tenue: #5c5b5c;
	--assai-icone: #616061;
	--assai-icona: rgba(51, 51, 52, .7);
	--assai-bordo: rgba(0, 0, 0, .1);
	--assai-morbida: cubic-bezier(0.25, 0, 0.1, 1);
	--assai-molla: cubic-bezier(0.34, 1.3, 0.64, 1);
	--assai-ombra-strati: 0 2px 2px -1px rgba(0, 0, 0, .05), 0 3px 4px -1.5px rgba(0, 0, 0, .05), 0 4px 8px -2px rgba(0, 0, 0, .05), 0 5px 16px -2.5px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .08);
	color-scheme: light;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	color: var(--assai-testo);
	-webkit-tap-highlight-color: transparent;
}

/* La molla vera, dove il browser la sa leggere (Chrome 113, Safari 17.2,
   Firefox 112). Prima c'e' una curva simile che supera un po' l'arrivo. */
@supports (transition-timing-function: linear(0, 1)) {
	.assai-bolla,
	.assai-velo,
	.assai-pannello {
		--assai-molla: linear(0 0%, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.991 45.7%, 1.015 55%, 1.017 63.9%, 1.001 100%);
	}
}

.assai-bolla *,
.assai-pannello * {
	box-sizing: border-box;
}

.assai-pannello [hidden] { display: none !important; }

/* ------------------------------------------------------------ bolla */

.assai-bolla {
	position: fixed;
	/* Le distanze arrivano dalle impostazioni: su molti temi in basso a
	   destra c'e' gia' qualcosa (il pulsante "torna su", il banner dei
	   cookie, il carrello di Woodmart) e senza poter spostare la bolla
	   l'unica scelta e' spegnerla. */
	inset-inline-end: var(--assai-lato, 20px);
	bottom: var(--assai-basso, 20px);
	min-width: 46px;
	height: 46px;                                  /* P2 */
	padding: 0 15px;
	border: none;
	border-radius: 16px;                           /* P3: la forma del riferimento */
	background-color: var(--assai-fondo-70);       /* P4 */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--assai-ombra-strati);         /* P5 */
	color: var(--assai-testo);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	z-index: 999998;
	font: inherit;
	font-size: 13px;
	outline: 2px solid transparent;                /* P9: c'e' anche a riposo, cosi' non salta */
	outline-offset: 2px;
	/* Nasce invisibile: compare solo dopo che il server ha detto di si'.
	   E' l'unico modo per non lasciare sul sito di un cliente una bolla
	   che non risponde e che nessuno sa perche' non risponde. */
	visibility: hidden;
	opacity: 0;
	scale: .6;                                     /* P10 */
	transition:
		opacity .15s var(--assai-morbida),
		scale .32s var(--assai-molla),
		background-color .15s var(--assai-morbida),
		outline-color .15s var(--assai-morbida),
		display .15s var(--assai-morbida) allow-discrete;
}

.assai-bolla.assai-pronta {
	visibility: visible;
	opacity: 1;
	scale: 1;
}

@starting-style {
	.assai-bolla.assai-pronta { opacity: 0; scale: .6; }
}

/* Aperta la chat, il pulsante sparisce: il pannello prende il suo posto. */
.assai-bolla.assai-pronta.assai-nascosta {
	display: none;
	opacity: 0;
	scale: .6;
}

.assai-bolla:hover { background-color: var(--assai-fondo-90); }          /* P7 */
.assai-bolla:active { scale: .96; }                                        /* P8 */
.assai-bolla:focus-visible { outline-color: var(--assai-testo); }         /* P9 */
.assai-bolla svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; color: var(--assai-icona); }

/* --- le quattro posizioni --- */
.assai-bolla.assai-sinistra,
.assai-pannello.assai-sinistra {
	inset-inline-end: auto;
	inset-inline-start: var(--assai-lato, 20px);
}
/* A meta' altezza. Niente translate: il saltello lo usa, e la bolla e'
   alta 46px sempre, anche con la scritta accanto. */
.assai-bolla.assai-medio {
	bottom: auto;
	top: calc(50% - 23px);
}

/* --- le tre forme: senza scelta vale quella del riferimento --- */
.assai-bolla.assai-tonda { border-radius: 50%; }
.assai-bolla.assai-pillola { border-radius: 999px; }

/* L'etichetta accanto alla bolla: "Assistenza", "Chiedi a noi". Costa
   niente e alza le aperture, perche' un quadrato con dentro un fumetto
   non dice a tutti cos'e'. Con la scritta la bolla diventa una pillola. */
.assai-bolla-etichetta {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	max-width: 40vw;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-inline-start: 8px;
	color: var(--assai-testo);
}
.assai-bolla:has(.assai-bolla-etichetta) { border-radius: 999px; padding: 0 16px 0 15px; }

/* P11: il pallino «risposte non lette», dentro il pulsante accanto
   all'icona. Entra da 0x0 in 150 ms. */
.assai-puntino {
	display: block;
	width: 0;
	height: 0;
	margin-inline-start: 0;
	border-radius: 6px;
	background: var(--assai-testo);
	opacity: 0;
	flex: 0 0 auto;
	transition: width .15s var(--assai-morbida), height .15s var(--assai-morbida),
		margin .15s var(--assai-morbida), opacity .15s var(--assai-morbida);
}
.assai-bolla.assai-non-letti .assai-puntino {
	width: 6px;
	height: 6px;
	margin-inline-start: 8px;
	opacity: 1;
}

/* 1.4: il doppio saltello ogni 10 secondi. */
.assai-bolla.assai-saltello { animation: assai-saltello 10s ease-in-out infinite; }

@keyframes assai-saltello {
	0%, 95% { translate: 0 0; }
	96.5% { translate: 0 -5px; }
	97.8% { translate: 0 0; }
	98.8% { translate: 0 -2px; }
	99.6%, 100% { translate: 0 0; }
}

/* ------------------------------------------------------ velo (telefono) */

.assai-velo {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999998;
	background-image: linear-gradient(rgba(0, 0, 0, .4) calc(100% - 80px), rgba(0, 0, 0, 0));   /* F4 */
	opacity: 0;
	transition: opacity .15s var(--assai-morbida), display .15s var(--assai-morbida) allow-discrete;
}

/* --------------------------------------------------------- pannello */

.assai-pannello {
	position: fixed;
	inset-inline-end: var(--assai-lato, 20px);
	bottom: var(--assai-basso, 20px);              /* D1: al posto del pulsante */
	width: 500px;
	max-width: calc(100vw - 2 * var(--assai-lato, 20px));
	height: 370px;                                 /* D2 */
	min-height: 200px;
	max-height: calc(100vh - 20px);                /* D5 */
	max-height: calc(100dvh - 20px);
	border-radius: 24px;                           /* D6 */
	background-color: var(--assai-fondo-80);       /* D7 */
	background-image:
		radial-gradient(90% 80% at 50% 0%, var(--assai-fondo), rgba(251, 247, 246, 0)),
		radial-gradient(90% 80% at 50% 100%, var(--assai-fondo), rgba(251, 247, 246, 0));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: -24px 0 48px rgba(0, 0, 0, .2), inset 0 0 24px var(--assai-fondo);   /* D8 */
	overflow: hidden;
	z-index: 999999;
	display: none;
	opacity: 0;
	scale: .2;
	transform-origin: 100% 100%;                   /* D9 */
	outline: 2px solid transparent;
	font-size: 14px;
	transition:
		display .15s var(--assai-morbida) allow-discrete,
		opacity .15s var(--assai-morbida),
		scale .32s var(--assai-molla),
		width .32s var(--assai-molla),
		height .32s var(--assai-molla);
}

.assai-pannello.assai-aperto {
	display: block;
	opacity: 1;
	scale: 1;
}

@starting-style {
	.assai-pannello.assai-aperto { opacity: 0; scale: .2; }
}

.assai-pannello.assai-sinistra { transform-origin: 0 100%; box-shadow: 24px 0 48px rgba(0, 0, 0, .2), inset 0 0 24px var(--assai-fondo); }
.assai-pannello.assai-medio { bottom: auto; top: 50%; translate: 0 -50%; transform-origin: 100% 50%; }
.assai-pannello.assai-medio.assai-sinistra { transform-origin: 0 50%; }

/* D3: alla prima risposta si allunga, e ci resta. */
.assai-pannello.assai-alta { height: 500px; }
/* D4: allargato. */
.assai-pannello.assai-espanso { width: clamp(320px, 900px, 90vw); height: 650px; }
.assai-pannello.assai-espanso.assai-alta { height: min(900px, calc(90vh - 20px)); }

/* Ricaricando con la chat aperta: si ripresenta al suo posto, senza
   rifare l'animazione (nel riferimento e' uguale). */
.assai-senza-transizioni,
.assai-senza-transizioni * { transition: none !important; animation: none !important; }

/* ------------------------------------------------ lo shortcode */

.assai-pannello.assai-incorporato {
	position: relative;
	inset: auto;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 320px;
	max-height: none;
	opacity: 1;
	scale: 1;
	translate: none;
	box-shadow: var(--assai-ombra-strati);
	transition: none;
}

/* ------------------------------------------------- l'area che scorre */

.assai-scorre {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding-top: 64px;
	padding-bottom: var(--assai-fondo-alto, 76px);
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: rgba(51, 51, 52, .5) transparent;
	z-index: 0;
}

/* ------------------------------------------------ lo stato vuoto (1.7) */

.assai-vuoto {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	padding: 0 20px;
}

.assai-benvenuto {
	display: flex;
	align-items: center;
	min-height: 150px;                             /* V1 */
}

.assai-benvenuto-testi {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-inline-start: 13px;
	max-width: 100%;
}

/* V10: saluto e frase entrano insieme sul computer, a scalare sul telefono. */
.assai-saluto,
.assai-saluto-sotto { animation: assai-entra .32s var(--assai-morbida) both; }

.assai-saluto {
	font-size: 18px;                               /* V2 */
	font-weight: 600;
	line-height: 23.4px;
	letter-spacing: -.2px;
	color: var(--assai-tenue);
}

.assai-saluto-sotto {
	margin: 0;
	font-size: 12px;                               /* V3 */
	font-weight: 500;
	line-height: 15.96px;
	color: var(--assai-testo);
	white-space: pre-line;
	max-width: 254px;
}

@keyframes assai-entra {
	from { opacity: 0; translate: 0 10px; }
	to { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------------ la sfocatura (1.10) */

.assai-sfuma {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
}

.assai-sfuma i {
	position: absolute;
	inset: 0;
}

.assai-sfuma-alta { top: 0; height: 64px; }
.assai-sfuma-bassa { bottom: 0; top: 0; z-index: 0; }

.assai-sfuma i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.assai-sfuma i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.assai-sfuma i:nth-child(3) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.assai-sfuma-alta i:nth-child(1) { -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); }
.assai-sfuma-alta i:nth-child(2) { -webkit-mask-image: linear-gradient(to bottom, #000 24%, transparent 78%); mask-image: linear-gradient(to bottom, #000 24%, transparent 78%); }
.assai-sfuma-alta i:nth-child(3) { -webkit-mask-image: linear-gradient(to bottom, #000 12%, transparent 44%); mask-image: linear-gradient(to bottom, #000 12%, transparent 44%); }
.assai-sfuma-bassa i:nth-child(1) { -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%); mask-image: linear-gradient(to top, #000 35%, transparent 100%); }
.assai-sfuma-bassa i:nth-child(2) { -webkit-mask-image: linear-gradient(to top, #000 24%, transparent 78%); mask-image: linear-gradient(to top, #000 24%, transparent 78%); }
.assai-sfuma-bassa i:nth-child(3) { -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 44%); mask-image: linear-gradient(to top, #000 12%, transparent 44%); }

/* ---------------------------------------------------------- testata (1.6) */

.assai-testata {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;                                  /* T1 */
	padding: 12px 12px 20px;                       /* T2 */
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	z-index: 2;
	pointer-events: none;
}

.assai-testata > * { pointer-events: auto; }

.assai-testata-sinistra,
.assai-testata-destra {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.assai-testata-destra { flex: 0 0 auto; }

/* Nome e sottotitolo stanno in una pillola chiara, dove il riferimento ha
   il pulsante del suo accesso: la conversazione ci scorre sotto, e senza
   un fondo le due scritte si sovrapporrebbero. */
.assai-identita {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 32px;
	padding: 0 12px;
	border-radius: 9999px;
	background: var(--assai-fondo);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.assai-identita:has(.assai-logo) { padding-inline-start: 2px; }

img.assai-logo {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: rgba(51, 51, 52, .08);
}

.assai-identita-testi { min-width: 0; }

.assai-titolo,
.assai-sottotitolo {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}

.assai-titolo {
	font-size: 12px;
	font-weight: 600;
	line-height: 14px;
	color: var(--assai-testo);
}

.assai-sottotitolo {
	font-size: 10px;
	line-height: 13px;
	color: var(--assai-tenue);
}

/* T5: i bottoni tondi della testata. */
.assai-tondo {
	position: relative;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--assai-fondo);
	color: var(--assai-icone);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(0, 0, 0, .06);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: color .15s var(--assai-morbida), background-color .15s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-tondo:hover { background: #ece8e7; color: var(--assai-testo); }
.assai-tondo:focus-visible { outline-color: var(--assai-testo); }
.assai-tondo svg { width: 16px; height: 16px; display: block; }

/* ------------------------------------------------------ messaggi (1.9) */

.assai-messaggi {
	display: flex;
	flex-direction: column;
	gap: 12px;                                     /* M1 */
	padding: 0 20px;
}

.assai-messaggi:empty { display: none; }

.assai-riga { display: flex; flex-direction: column; min-width: 0; }

.assai-riga.assai-io { align-self: flex-end; max-width: 86%; align-items: flex-end; }

.assai-riga.assai-io .assai-testo {
	padding: 8px 12px;                             /* M2 */
	border-radius: 16px 16px 8px 16px;
	background: var(--assai-colore);
	color: var(--assai-testo-colore);
	font-size: 14px;
	line-height: 19.6px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.assai-riga.assai-loro { align-self: stretch; align-items: flex-start; }

.assai-riga.assai-loro .assai-testo {
	max-width: 86%;                                /* M3 */
	font-size: 14px;
	line-height: 19.6px;
	color: var(--assai-testo);
	overflow-wrap: anywhere;
	display: flex;
	flex-direction: column;
	gap: 8px;                                      /* M4 */
}

.assai-testo p { margin: 0; white-space: pre-line; }
.assai-testo strong { font-weight: 700; }
.assai-testo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.assai-testo ul,
.assai-testo ol { margin: 0; padding-inline-start: 16px; display: flex; flex-direction: column; gap: 2px; }
.assai-testo li { line-height: 18.2px; }
.assai-titoletto { font-weight: 600; }
.assai-in-attesa { display: none !important; }

/* M9 / M16: la nota sotto la risposta. Col mouse si vede passando sopra
   la risposta; sul telefono sempre. */
.assai-nota {
	margin-top: 8px;
	display: flex;
	gap: 8px;
	font-size: 12px;
	line-height: 15.6px;
	color: var(--assai-tenue);
	animation: assai-sale .15s var(--assai-morbida) both;    /* M10 */
}

@media (hover: hover) and (pointer: fine) {
	.assai-nota { opacity: 0; transition: opacity .15s var(--assai-morbida); animation: none; }
	.assai-riga.assai-loro:hover .assai-nota,
	.assai-riga.assai-loro:focus-within .assai-nota { opacity: 1; }
}

@keyframes assai-sale {
	from { opacity: 0; translate: 0 -4px; }
	to { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------ «sta pensando» (M5) */

.assai-pensa {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}

.assai-rotella {
	display: inline-block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1.5px solid rgba(51, 51, 52, .15);
	border-top-color: rgba(51, 51, 52, .5);
	animation: assai-gira 1s linear infinite;
}

.assai-rotella-grande { width: 20px; height: 20px; border-width: 2px; animation-duration: .9s; }

@keyframes assai-gira { to { rotate: 360deg; } }

.assai-pensa-testo {
	font-size: 11px;
	line-height: 12px;
	/* Il luccichio va dal grigio pieno (6,35:1) al testo pieno e torna:
	   nel riferimento il fondo della sfumatura era al 55%, sotto 4,5:1. */
	color: var(--assai-tenue);
	background-image: linear-gradient(110deg, var(--assai-tenue) 35%, var(--assai-testo) 50%, var(--assai-tenue) 65%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: assai-luccica 1.6s linear infinite;
}

@keyframes assai-luccica {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

.assai-caricamento {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 0 auto;
	font-size: 12px;
	color: var(--assai-tenue);
}

/* ---------------------------------------- schede prodotto (M11, M12) */
/* Le monta il server dai dati veri del catalogo, non il modello: e' la
   differenza fra un consiglio e un link inventato che porta al 404. */

.assai-prodotti {
	position: relative;
	align-self: stretch;
	margin: 8px -20px 0;
}

.assai-prodotti-nastro {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 20px;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.assai-prodotti-nastro::-webkit-scrollbar { display: none; }

.assai-prodotto {
	flex: 0 0 90px;
	width: 90px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--assai-testo);
	border-radius: 8px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: scale .1s ease-out, outline-color .15s var(--assai-morbida);
}

.assai-prodotto:active { scale: .97; }
.assai-prodotto:focus-visible { outline-color: var(--assai-testo); }

.assai-prodotto-foto {
	width: 90px;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(51, 51, 52, .08);
	border: 1px solid rgba(0, 0, 0, .06);
}

.assai-prodotto-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.assai-prodotto-nome {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 15.6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.assai-prodotto-prezzo {
	margin-top: 4px;
	font-size: 12px;
	line-height: 15.6px;
	color: var(--assai-icone);
}

.assai-prodotto-prezzo del { opacity: .8; }

.assai-prodotto-stato {
	font-size: 11px;
	line-height: 14px;
	color: var(--assai-tenue);
}

.assai-prodotto-stato.assai-esaurito { color: #a1271a; }

.assai-freccia {
	position: absolute;
	top: 40px;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	border: .5px solid rgba(0, 0, 0, .1);
	background: var(--assai-fondo);
	color: var(--assai-testo);
	box-shadow: var(--assai-ombra-strati);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s var(--assai-morbida), opacity .15s var(--assai-morbida);
}

.assai-freccia svg { width: 14px; height: 14px; }
.assai-freccia:hover { background: #efebea; }
.assai-freccia[disabled] { opacity: .35; cursor: default; }
.assai-freccia-indietro { left: 8px; }
.assai-freccia-avanti { right: 8px; }

@media (hover: none), (pointer: coarse) {
	.assai-freccia { display: none; }
}

/* -------------------------------------------- richiesta di assistenza */
/* Il numero della richiesta si fa vedere, non si nasconde dentro una
   frase: e' la cosa che il cliente deve poter ritrovare domani. */

.assai-ticket {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 16px;
	background: #e4f6eb;
	color: #004839;
	font-size: 13px;
	line-height: 18px;
}

.assai-ticket svg { width: 16px; height: 16px; flex: 0 0 auto; }
.assai-ticket strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --------------------------------------------------- i file (C11) */

.assai-allegato {
	position: relative;
	min-height: 80px;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(51, 51, 52, .08);
}

.assai-allegato img {
	display: block;
	max-width: 100%;
	max-height: 240px;
	border-radius: 16px;
}

.assai-allegato .assai-rotella {
	position: absolute;
	right: 8px;
	bottom: 8px;
	border-color: rgba(255, 255, 255, .5);
	border-top-color: #fff;
}

.assai-allegato-documento {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

.assai-allegato-documento svg { width: 16px; height: 16px; flex: 0 0 auto; }
.assai-allegato-documento .assai-rotella { border-color: rgba(255, 255, 255, .35); border-top-color: currentColor; }
.assai-riga-allegato:not(.assai-in-carico) .assai-rotella { display: none; }

/* ------------------------------------------------------------ fondo */

.assai-fondo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}

.assai-fondo > * { pointer-events: auto; }

.assai-sopra {
	display: none;
	flex-direction: column;
	gap: 12px;                                     /* V8 */
	padding: 0 20px;
	margin-bottom: -7px;
}

.assai-sopra.assai-sopra-visibile { display: flex; }

/* Con la conversazione gia' in corso (il consenso chiesto di nuovo) il
   riquadro sta sopra i messaggi: gli serve un fondo suo. */
.assai-pannello.assai-con-messaggi .assai-sopra {
	margin: 0 12px -7px;
	padding: 10px 12px;
	border-radius: 16px;
	background: var(--assai-fondo-90);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* V7: l'avviso. Stessa riga, stesso posto; il colore regge 4,5:1. */
.assai-avviso {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-inline-start: 13px;
	font-size: 10px;
	line-height: 15px;
	color: var(--assai-tenue);
	text-wrap: balance;
}

.assai-avviso p { margin: 0; }
.assai-avviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.assai-privacy {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	cursor: pointer;
	color: var(--assai-testo);
}

.assai-privacy input {
	margin: 1px 0 0;
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	cursor: pointer;
	accent-color: var(--assai-testo);
}

.assai-avviso.assai-richiamo .assai-privacy { animation: assai-richiamo .9s var(--assai-morbida) 1; }

@keyframes assai-richiamo {
	0%, 100% { translate: 0 0; }
	20%, 60% { translate: -3px 0; }
	40%, 80% { translate: 3px 0; }
}

/* M14: le domande suggerite, una riga che scorre e sfuma ai bordi. */
.assai-pillole { margin: 0 -20px; }

.assai-pillole-fila {
	display: flex;
	gap: 4px;
	padding: 4px 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

.assai-pillole-fila::-webkit-scrollbar { display: none; }

.assai-suggerimento {
	position: relative;
	flex: 0 0 auto;
	height: 24px;
	padding: 0 12px;
	border-radius: 9999px;
	border: .5px solid rgba(51, 51, 52, .15);
	background: var(--assai-fondo);
	color: var(--assai-testo);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
	animation: assai-pillola .15s var(--assai-morbida) both;
	transition: background-color .15s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-suggerimento:hover { background-color: #ece8e7; }
.assai-suggerimento:focus-visible { outline-color: var(--assai-testo); }

@keyframes assai-pillola {
	from { opacity: 0; translate: 0 8px; }
	to { opacity: 1; translate: 0 0; }
}

/* M15: le proposte sotto la risposta, e «Ricomincia». */
.assai-seguiti {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

/* --------------------------------------------- la casella (1.8) */

.assai-composer {
	position: relative;
	padding: 20px 12px 12px;                       /* C1 */
}

.assai-guscio {
	position: relative;
	z-index: 1;
	min-height: 44px;
	max-height: 88px;
	border-radius: 22px;                           /* C2 */
	background-color: var(--assai-fondo-80);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--assai-ombra-strati);
	outline: 1.5px solid transparent;
	transition: outline-color .15s var(--assai-morbida), background-color .15s var(--assai-morbida);
}

.assai-guscio:hover:not(:focus-within) { background-color: rgba(246, 242, 241, .8); }        /* C4 */
.assai-guscio:focus-within { outline-color: rgba(51, 51, 52, .85); }                        /* C3 */

.assai-input {
	display: block;
	width: 100%;
	height: 44px;
	min-height: 44px;
	max-height: 88px;
	margin: 0;
	padding: 12.9px 38px 12.9px 12px;          /* una riga centrata nei 44px */
	border: 0;
	border-radius: 22px;
	background: transparent;
	color: var(--assai-testo);
	font: inherit;
	font-size: 13px;                               /* C5 */
	line-height: 18.2px;
	resize: none;
	outline: none;
	overflow-y: hidden;
	scrollbar-width: thin;
	box-shadow: none;
}

.assai-input::placeholder { color: var(--assai-testo); opacity: .8; }   /* C6 */

.assai-guscio.assai-con-allega .assai-input { padding-inline-start: 38px; }

/* C8: l'invio sta dentro la casella e non si vede finche' e' vuota. */
.assai-invia,
.assai-ferma,
.assai-allega {
	position: absolute;
	bottom: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.assai-invia {
	right: 6px;
	background: var(--assai-colore);
	color: var(--assai-testo-colore);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s var(--assai-morbida), scale .15s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-invia svg { width: 16px; height: 16px; transition: translate .15s var(--assai-morbida); }
.assai-guscio.assai-ha-testo .assai-invia { opacity: 1; pointer-events: auto; }
.assai-guscio.assai-ha-testo .assai-invia:hover { opacity: .8; }
.assai-guscio.assai-ha-testo.assai-senza-consenso .assai-invia { opacity: .4; }
.assai-invia:focus-visible,
.assai-ferma:focus-visible,
.assai-allega:focus-visible { outline-color: var(--assai-testo); }

/* C9: durante la risposta l'invio diventa Stop. */
.assai-guscio.assai-in-corso .assai-invia { scale: 0; opacity: 0; pointer-events: none; }
.assai-guscio.assai-in-corso .assai-invia svg { translate: 0 -32px; }

.assai-ferma {
	right: 6px;
	background: rgba(0, 0, 0, .1);
	color: rgba(0, 0, 0, .45);
	scale: 0;
	opacity: 0;
	pointer-events: none;
	transition: scale .15s var(--assai-morbida), opacity .15s var(--assai-morbida), background-color .15s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-ferma-quadro {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: currentColor;
	translate: 0 32px;
	transition: translate .15s var(--assai-morbida);
}

.assai-guscio.assai-in-corso .assai-ferma { scale: 1; opacity: 1; pointer-events: auto; }
.assai-guscio.assai-in-corso .assai-ferma-quadro { translate: 0 0; }
.assai-ferma:hover { background: rgba(0, 0, 0, .18); color: rgba(0, 0, 0, .65); }

/* C11: la graffetta, a sinistra dentro la casella. */
.assai-allega {
	left: 6px;
	background: transparent;
	color: var(--assai-icone);
	transition: background-color .15s var(--assai-morbida), color .15s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-allega:hover { background: rgba(0, 0, 0, .06); color: var(--assai-testo); }
.assai-allega[disabled],
.assai-allega.assai-senza-consenso { opacity: .45; }
.assai-allega[disabled] { cursor: default; }
.assai-allega svg { width: 16px; height: 16px; }
.assai-scelta-file { display: none !important; }

/* 1.10 punto 5: «Vai ai più recenti». */
.assai-recenti {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 100%;
	translate: -50% 0;
	height: 32px;
	padding: 0 12px 0 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 9999px;
	border: .5px solid rgba(51, 51, 52, .1);
	background: var(--assai-fondo);
	color: var(--assai-testo);
	box-shadow: 0 8px 40px rgba(0, 0, 0, .24);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 15.96px;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity .32s var(--assai-morbida), visibility .32s var(--assai-morbida), outline-color .15s var(--assai-morbida);
}

.assai-recenti svg { width: 16px; height: 16px; color: var(--assai-tenue); }
.assai-recenti.assai-visibile { opacity: 1; visibility: visible; }
.assai-recenti:focus-visible { outline-color: var(--assai-testo); }

/* -------------------------------------------------------- telefono (1.11) */

@media (max-width: 767.98px) {
	/* A schermo piccolo la bolla a meta' altezza torna in basso: sul
	   telefono copre il contenuto e si preme per sbaglio scrollando. */
	.assai-bolla.assai-medio {
		top: auto;
		bottom: var(--assai-basso, 20px);
	}

	/* F1: un foglio che sale dal basso, con 4px di margine. */
	.assai-pannello:not(.assai-incorporato),
	.assai-pannello.assai-sinistra:not(.assai-incorporato),
	.assai-pannello.assai-medio:not(.assai-incorporato) {
		inset-inline: 4px;
		top: auto;
		bottom: calc(4px + var(--assai-tastiera, 0px));
		translate: none;
		width: auto;
		max-width: none;
		height: 80vh;                              /* F2 */
		height: 80dvh;
		max-height: calc(100vh - 8px - var(--assai-tastiera, 0px));
		max-height: calc(100dvh - 8px - var(--assai-tastiera, 0px));
		border-radius: 20px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 24px var(--assai-fondo);   /* F3 */
		transform-origin: 50% 100%;                /* F5 */
	}

	.assai-pannello.assai-alta:not(.assai-incorporato) { height: 94vh; height: 94dvh; }
	.assai-pannello.assai-espanso:not(.assai-incorporato) { width: auto; }

	.assai-velo.assai-aperto { display: block; opacity: 1; }

	@starting-style {
		.assai-velo.assai-aperto { opacity: 0; }
	}

	/* F6: bottoni da 40px, niente «Espandi». */
	.assai-pannello:not(.assai-incorporato) .assai-testata { height: 72px; }
	.assai-pannello:not(.assai-incorporato) .assai-scorre { padding-top: 72px; }
	.assai-pannello:not(.assai-incorporato) .assai-sfuma-alta { height: 72px; }
	.assai-tondo { width: 40px; height: 40px; }
	.assai-identita { height: 40px; }
	.assai-espandi { display: none !important; }

	/* V1 sul telefono: il saluto in alto, non centrato. */
	.assai-benvenuto { align-items: flex-start; min-height: 0; margin-top: 16px; }
	.assai-saluto-sotto { max-width: none; animation-delay: .32s; }

	/* C5 / F7: 16px, cosi' l'iPhone non ingrandisce la pagina. */
	.assai-input { font-size: 16px; line-height: 22.4px; padding-top: 10.8px; padding-bottom: 10.8px; }
}

/* BERSAGLI DA DITO. Nel riferimento i bottoni sono da 40 e 32px, le
   pillole alte 24: il disegno resta quello, ma la zona che si puo'
   toccare arriva a 44px con un bordo invisibile intorno. */
@media (pointer: coarse) {
	.assai-tondo::after,
	.assai-invia::after,
	.assai-ferma::after,
	.assai-allega::after,
	.assai-suggerimento::after,
	.assai-freccia::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		translate: -50% -50%;
	}
	.assai-invia,
	.assai-ferma,
	.assai-allega { overflow: visible; }
	.assai-pillole-fila { padding-block: 10px; margin-block: -6px; }
	.assai-privacy { min-height: 44px; align-items: center; }
}

/* ------------------------------------------------------ riduci movimento */

@media (prefers-reduced-motion: reduce) {
	.assai-bolla,
	.assai-velo,
	.assai-pannello,
	.assai-pannello *,
	.assai-bolla * {
		transition: none !important;
		animation: none !important;
	}
	.assai-pensa-testo {
		-webkit-text-fill-color: currentColor;
		background-image: none;
	}
	.assai-rotella { border-top-color: rgba(51, 51, 52, .5); }
}