/**
 * Widget dell'assistente.
 *
 * Usa i preset di theme.json: la palette resta una sola per tutto il sito.
 *
 * @package Totaliweb\Ai
 */

.tw-ai {
	position: fixed;
	inset-block-end: 1.25rem;
	/* Scala z-index del progetto: navbar 100, chat 200, cookie 300,
	   lightbox 400. Nel sito precedente erano tutti a z-50 e l'ordine
	   dipendeva da come venivano montati i componenti. */
	z-index: var(--wp--custom--z-index--chat, 200);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.tw-ai--destra { inset-inline-end: 1.25rem; }
.tw-ai--sinistra { inset-inline-start: 1.25rem; }

/* ------------------------------------------------------------------ *
 * Pulsante
 * ------------------------------------------------------------------ */

.tw-ai__fab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Criterio 2.5.8: bersaglio ampiamente sopra i 24 px. */
	min-block-size: 3.25rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-villa, #1B3226);
	color: var(--wp--preset--color--crema, #FAF5EB);
	font: inherit;
	font-size: var(--wp--preset--font-size--piccolo, 0.9rem);
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 6px 24px rgb(18 33 26 / 22%);
	transition: transform 240ms ease, background 240ms ease;
}

.tw-ai__fab:hover,
.tw-ai__fab:focus-visible {
	background: var(--wp--preset--color--verde-salvia, #334D40);
	transform: translateY(-2px);
}

.tw-ai__fab:focus-visible {
	outline: 3px solid var(--wp--preset--color--oro-luminoso, #E8B430);
	outline-offset: 3px;
}

.tw-ai.is-aperto .tw-ai__fab { display: none; }

/* ------------------------------------------------------------------ *
 * Finestra
 * ------------------------------------------------------------------ */

.tw-ai__finestra {
	display: flex;
	flex-direction: column;
	inline-size: min(24rem, calc(100vw - 2.5rem));
	max-block-size: min(34rem, calc(100vh - 4rem));
	border: 1px solid var(--wp--preset--color--bordo, #DED9D3);
	border-radius: 4px;
	background: var(--wp--preset--color--base, #FBFAF9);
	box-shadow: 0 12px 40px rgb(18 33 26 / 20%);
	overflow: hidden;
}

.tw-ai__testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--verde-villa, #1B3226);
	color: var(--wp--preset--color--crema, #FAF5EB);
}

.tw-ai__titolo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.tw-ai__chiudi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.tw-ai__chiudi:hover,
.tw-ai__chiudi:focus-visible { background: rgb(250 245 235 / 15%); }

/* ------------------------------------------------------------------ *
 * Conversazione
 * ------------------------------------------------------------------ */

.tw-ai__log,
.tw-ai__corrente {
	padding: 1rem;
	overflow-y: auto;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.tw-ai__log { flex: 1 1 auto; }
.tw-ai__corrente:empty { display: none; }

.tw-ai__messaggio {
	margin-block-end: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 4px;
	max-inline-size: 92%;
}

.tw-ai__messaggio p { margin: 0; }

.tw-ai__messaggio--assistente {
	background: var(--wp--preset--color--pietra, #F0EDEB);
	color: var(--wp--preset--color--contrast, #12211A);
	border-inline-start: 2px solid var(--wp--preset--color--oro, #AB872B);
}

.tw-ai__messaggio--utente {
	margin-inline-start: auto;
	background: var(--wp--preset--color--verde-salvia, #334D40);
	color: var(--wp--preset--color--crema, #FAF5EB);
}

.tw-ai__messaggio a { color: inherit; }
.tw-ai__messaggio--assistente a { color: var(--wp--preset--color--oro-scuro, #82651F); }

.tw-ai__corrente {
	padding-block-start: 0;
	color: var(--wp--preset--color--contrast, #12211A);
}

.tw-ai__azione { margin: 0 0 0.75rem; }

.tw-ai__link-contatti {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--oro-scuro, #82651F);
	color: var(--wp--preset--color--crema, #FAF5EB);
	font-size: 0.875rem;
	text-decoration: none;
}

/* Indicatore di attesa: tre punti che pulsano, fermi se l'utente ha
   chiesto meno animazioni. */
.tw-ai.is-occupato .tw-ai__corrente::after {
	content: "…";
	display: inline-block;
	margin-inline-start: 0.15em;
	animation: tw-ai-punti 1.4s infinite steps(4);
}

@keyframes tw-ai-punti {
	0% { opacity: 0.25; }
	50% { opacity: 1; }
	100% { opacity: 0.25; }
}

/* ------------------------------------------------------------------ *
 * Suggerimenti e modulo
 * ------------------------------------------------------------------ */

.tw-ai__suggerimenti {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 1rem 0.75rem;
}

.tw-ai__suggerimento {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--bordo-forte, #7D7266);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #12211A);
	font: inherit;
	font-size: 0.8125rem;
	text-align: start;
	cursor: pointer;
}

.tw-ai__suggerimento:hover,
.tw-ai__suggerimento:focus-visible {
	border-color: var(--wp--preset--color--oro-scuro, #82651F);
	background: var(--wp--preset--color--oro-pallido, #F8F2E2);
}

.tw-ai__form {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-block-start: 1px solid var(--wp--preset--color--bordo, #DED9D3);
}

.tw-ai__campo {
	flex: 1 1 auto;
	min-block-size: 2.5rem;
	max-block-size: 7.5rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--bordo-forte, #7D7266);
	border-radius: 3px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #12211A);
	font: inherit;
	/* 1rem pieni: sotto i 16px iOS ingrandisce la pagina al focus. */
	font-size: 1rem;
	line-height: 1.4;
	resize: none;
}

.tw-ai__campo:focus-visible,
.tw-ai__invia:focus-visible,
.tw-ai__suggerimento:focus-visible,
.tw-ai__chiudi:focus-visible {
	outline: 3px solid var(--wp--preset--color--oro-scuro, #82651F);
	outline-offset: 2px;
}

.tw-ai__invia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--oro-scuro, #82651F);
	color: var(--wp--preset--color--crema, #FAF5EB);
	cursor: pointer;
}

.tw-ai__invia[disabled] { opacity: 0.55; cursor: progress; }

.tw-ai__nota {
	margin: 0;
	padding: 0 1rem 0.85rem;
	color: var(--wp--preset--color--testo-tenue, #5C7066);
	font-size: 0.75rem;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ *
 * Schermi piccoli e movimento ridotto
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.tw-ai.is-aperto {
		inset: 0;
		inline-size: 100%;
	}

	.tw-ai.is-aperto .tw-ai__finestra {
		inline-size: 100%;
		max-block-size: 100%;
		block-size: 100%;
		border: 0;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-ai__fab { transition: none; }
	.tw-ai__fab:hover { transform: none; }
	.tw-ai.is-occupato .tw-ai__corrente::after { animation: none; }
}