/*
 * Chat dell'assistente.
 * I colori seguono le variabili del tema quando ci sono, così su ogni sito si
 * veste da solo invece di sembrare un pezzo attaccato da fuori.
 */

.gaw-as {
	--gaw-as-accento: var(--wp--preset--color--primary, #12303a);
	--gaw-as-testo: #1c1c1c;
	--gaw-as-sfondo: #ffffff;
	--gaw-as-bordo: #e3e3e3;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998; /* sotto i banner legali, che devono restare sopra a tutto */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .6rem;
	font-size: 15px;
	line-height: 1.5;
}

.gaw-as__bolla {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.05rem;
	border: 0;
	border-radius: 999px;
	background: var(--gaw-as-accento);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

.gaw-as__bolla:hover { filter: brightness(1.08); }
.gaw-as__bolla:focus-visible { outline: 3px solid #ffcb36; outline-offset: 2px; }

.gaw-as__pannello {
	width: min(380px, calc(100vw - 40px));
	max-height: min(560px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: var(--gaw-as-sfondo);
	color: var(--gaw-as-testo);
	border: 1px solid var(--gaw-as-bordo);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.gaw-as__testata {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1rem;
	background: var(--gaw-as-accento);
	color: #fff;
}

.gaw-as__testata strong { display: block; font-size: 1rem; }
.gaw-as__testata span { display: block; font-size: .8rem; opacity: .85; }

.gaw-as__chiudi {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .2rem;
}

.gaw-as__chiudi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.gaw-as__scambi {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	background: #fafafa;
}

.gaw-as__messaggio { max-width: 88%; }
.gaw-as__messaggio--utente { align-self: flex-end; }

.gaw-as__bolla-testo {
	padding: .6rem .8rem;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--gaw-as-bordo);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.gaw-as__messaggio--utente .gaw-as__bolla-testo {
	background: var(--gaw-as-accento);
	border-color: transparent;
	color: #fff;
}

.gaw-as__messaggio--attesa .gaw-as__bolla-testo { opacity: .6; font-style: italic; }

.gaw-as__fonti {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin-top: .35rem;
	font-size: .8rem;
}

.gaw-as__fonti a { color: var(--gaw-as-accento); }

.gaw-as__form {
	display: flex;
	gap: .5rem;
	padding: .7rem;
	border-top: 1px solid var(--gaw-as-bordo);
	background: #fff;
}

.gaw-as__testo {
	flex: 1;
	min-width: 0;
	padding: .6rem .7rem;
	border: 1px solid var(--gaw-as-bordo);
	border-radius: 10px;
	font: inherit;
}

.gaw-as__testo:focus-visible { outline: 2px solid var(--gaw-as-accento); outline-offset: 1px; }

.gaw-as__invia {
	padding: .6rem 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--gaw-as-accento);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.gaw-as__nota {
	margin: 0;
	padding: .5rem .8rem .7rem;
	background: #fff;
	font-size: .72rem;
	color: #666;
}

/* Sul telefono il pannello prende quasi tutto lo schermo: una chat stretta in
   un angolo non si usa. */
@media (max-width: 600px) {
	.gaw-as { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
	.gaw-as__bolla { align-self: flex-end; }
	.gaw-as__pannello { width: 100%; max-height: calc(100vh - 100px); }
	.gaw-as--aperto .gaw-as__bolla { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.gaw-as__pannello { animation: gaw-as-entra .18s ease-out; }
	@keyframes gaw-as-entra {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}