/*
 * Assistenza Liberty. I colori vengono dal negozio (ricambi.liberty-italia.it: marrone dei
 * pulsanti, ambra dell'accento) e il carattere dei titoli dal sito istituzionale (Varela Round),
 * servito da qui e non da Google: su una pagina pubblica non si mandano gli IP dei clienti ad
 * altri.
 */

@font-face {
	font-family: "Varela Round";
	src: url("../fonts/varela-round.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--marrone: #332d23;
	--marrone-2: #463d30;
	--ambra: #f5a400;
	--ambra-scuro: #b87800;
	--oro: #f1c232;
	--testo: #2b2620;
	--grigio: #6b645a;
	--fondo: #f6f4f0;
	--carta: #ffffff;
	--bordo: #e6e0d6;
	--errore: #b3261e;
	--raggio: 8px;
	--titoli: "Varela Round", system-ui, sans-serif;
	--testo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	background: var(--fondo);
	color: var(--testo);
	font: 16px/1.55 var(--testo-font);
	-webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.nascosto {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

a { color: var(--ambra-scuro); }

:focus-visible { outline: 3px solid var(--ambra); outline-offset: 2px; }

/* ---------- Testata: bianca come quella del negozio, con la striscia marrone sopra ---------- */

.testata {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: var(--carta);
	border-top: 6px solid var(--marrone);
	border-bottom: 1px solid var(--bordo);
	position: sticky;
	top: 0;
	z-index: 20;
}

.testata__logo img { display: block; height: 40px; width: auto; }

.testata__titolo {
	font-family: var(--titoli);
	font-size: 20px;
	color: var(--marrone);
	padding-left: 12px;
	border-left: 2px solid var(--ambra);
}

.testata__esci {
	margin-left: auto;
	background: none;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 6px 12px;
	color: var(--grigio);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.testata__esci:hover { border-color: var(--marrone); color: var(--marrone); }

.testata__menu {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px; height: 40px;
	padding: 0 9px;
	border: 0; border-radius: var(--raggio);
	background: var(--fondo);
	cursor: pointer;
}

.testata__menu span { display: block; height: 2px; background: var(--marrone); border-radius: 1px; }

/* ---------- Avvisi ---------- */

.avviso {
	padding: 10px 16px;
	background: #fff4d6;
	border-bottom: 1px solid #f0d48a;
	color: #5c4400;
	font-size: 15px;
	text-align: center;
}

/* ---------- Corpo: elenco a sinistra, chat a destra ---------- */

.corpo {
	flex: 1;
	display: flex;
	min-height: 0;
	position: relative;
}

.elenco {
	width: 290px;
	flex: none;
	padding: 16px;
	background: var(--carta);
	border-right: 1px solid var(--bordo);
	overflow-y: auto;
}

.elenco__nuova { width: 100%; }

.elenco__titolo {
	margin: 20px 0 8px;
	font: 600 13px/1 var(--testo-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--grigio);
}

.elenco__voci { list-style: none; margin: 0; padding: 0; }

.elenco__voce { display: flex; align-items: stretch; border-radius: var(--raggio); }

.elenco__voce:hover, .elenco__voce--attiva { background: var(--fondo); }

.elenco__voce--attiva { box-shadow: inset 3px 0 0 var(--ambra); }

.elenco__apri {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	color: var(--testo);
	cursor: pointer;
}

.elenco__apri strong {
	display: block;
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.elenco__apri small { color: var(--grigio); font-size: 12px; }

.elenco__butta {
	flex: none;
	width: 36px;
	border: 0;
	background: none;
	color: var(--grigio);
	cursor: pointer;
	opacity: 0;
	border-radius: var(--raggio);
}

.elenco__voce:hover .elenco__butta, .elenco__butta:focus-visible { opacity: 1; }
.elenco__butta:hover { color: var(--errore); background: #fbeaea; }

.elenco__vuoto { color: var(--grigio); font-size: 14px; margin: 8px 10px; }

/* ---------- Chat ---------- */

.chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.chat__messaggi {
	flex: 1;
	overflow-y: auto;
	padding: 24px 16px 8px;
	scroll-behavior: smooth;
}

.chat__messaggi > * { max-width: 860px; margin-left: auto; margin-right: auto; }

.benvenuto { text-align: center; padding: 32px 16px; color: var(--grigio); }
.benvenuto img { display: block; margin: 0 auto 12px; }
.benvenuto__titolo { font: 26px/1.3 var(--titoli); color: var(--marrone); margin: 0 0 8px; }
.benvenuto p { max-width: 520px; margin: 0 auto; }

.messaggio { display: flex; gap: 10px; margin-bottom: 18px; }

.messaggio--utente { justify-content: flex-end; }

.messaggio--utente .messaggio__testo {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	background: var(--marrone);
	color: #fff;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.messaggio__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; }

.messaggio--chicco .messaggio__corpo {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border-radius: 4px 16px 16px 16px;
	background: var(--carta);
	border: 1px solid var(--bordo);
	box-shadow: 0 1px 2px rgba(51, 45, 35, .06);
}

.messaggio__testo { overflow-wrap: anywhere; }
.messaggio__testo > :first-child { margin-top: 0; }
.messaggio__testo > :last-child { margin-bottom: 0; }
.messaggio__testo p, .messaggio__testo ul, .messaggio__testo ol { margin: 0 0 .7em; }
.messaggio__testo ul, .messaggio__testo ol { padding-left: 1.3em; }
.messaggio__testo h1, .messaggio__testo h2, .messaggio__testo h3 { font: 600 1.05em/1.3 var(--testo-font); margin: 1em 0 .4em; }
.messaggio__testo code { background: var(--fondo); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.messaggio__testo pre { background: var(--fondo); padding: 10px; border-radius: 6px; overflow-x: auto; }
.messaggio__testo table { border-collapse: collapse; margin: .5em 0; display: block; overflow-x: auto; }
.messaggio__testo th, .messaggio__testo td { border: 1px solid var(--bordo); padding: 4px 8px; text-align: left; }

.messaggio__errore { color: var(--errore); margin: 0; }

/* Chicco sta leggendo: tre puntini */
.puntini { display: inline-flex; gap: 5px; padding: 6px 0; }
.puntini span { width: 8px; height: 8px; border-radius: 50%; background: var(--ambra); animation: puntino 1.2s infinite ease-in-out; }
.puntini span:nth-child(2) { animation-delay: .15s; }
.puntini span:nth-child(3) { animation-delay: .3s; }
.puntini__testo { margin-left: 8px; color: var(--grigio); font-size: 14px; }
@keyframes puntino { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* Le pagine citate */
.allegati {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--bordo);
}

.allegato { margin: 0; }

.allegato__apri {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--bordo);
	border-radius: 6px;
	background: var(--fondo);
	cursor: zoom-in;
	overflow: hidden;
}

.allegato__apri img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: top; }

.allegato video { width: 100%; border-radius: 6px; background: #000; }

.allegato figcaption { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--grigio); overflow-wrap: anywhere; }

.allegati--video { grid-template-columns: 1fr; }

.ricordo {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--grigio);
}

.ricordo button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ambra-scuro);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Scrivere ---------- */

.scrivi {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
	max-width: 892px;
	margin: 0 auto;
	padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
}

.scrivi textarea {
	flex: 1;
	resize: none;
	max-height: 200px;
	padding: 12px 14px;
	border: 1px solid var(--bordo);
	border-radius: 14px;
	background: var(--carta);
	font: inherit;
	color: var(--testo);
	box-shadow: 0 1px 3px rgba(51, 45, 35, .08);
}

.scrivi textarea:focus { outline: none; border-color: var(--ambra); box-shadow: 0 0 0 3px rgba(245, 164, 0, .25); }

.scrivi__invia {
	flex: none;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--ambra);
	color: var(--marrone);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.scrivi__invia:hover { background: var(--oro); }
.scrivi__invia:disabled { background: var(--bordo); color: var(--grigio); cursor: not-allowed; }

.scrivi__contatore { position: absolute; right: 80px; bottom: -4px; margin: 0; font-size: 12px; color: var(--grigio); }
.scrivi__contatore--troppo { color: var(--errore); }

/* ---------- Pulsanti come quelli del negozio ---------- */

.pulsante {
	display: inline-block;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--raggio);
	font: 500 15px/1.2 var(--testo-font);
	text-decoration: none;
	cursor: pointer;
}

.pulsante--pieno { background: var(--marrone); color: #fff; }
.pulsante--pieno:hover { background: var(--marrone-2); }

/* ---------- Fuori: senza cartellino ---------- */

.fuori {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 16px;
}

.fuori__titolo { font: 26px/1.3 var(--titoli); color: var(--marrone); margin: 12px 0 8px; }
.fuori__motivo { max-width: 460px; color: var(--grigio); margin: 0 0 20px; }

/* ---------- Piede ---------- */

.piede {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	padding: 8px 16px;
	font-size: 12px;
	color: var(--grigio);
	text-align: center;
	border-top: 1px solid var(--bordo);
	background: var(--carta);
}

/* ---------- Pagina ingrandita ---------- */

.ingrandita {
	max-width: min(96vw, 1000px);
	max-height: 94vh;
	padding: 12px;
	border: 0;
	border-radius: 10px;
}

.ingrandita::backdrop { background: rgba(20, 16, 10, .75); }
.ingrandita img { display: block; max-width: 100%; max-height: calc(94vh - 80px); margin: 0 auto; }
.ingrandita__didascalia { margin: 8px 0 0; font-size: 14px; color: var(--grigio); text-align: center; }

.ingrandita__chiudi {
	position: sticky;
	float: right;
	top: 0;
	width: 36px; height: 36px;
	border: 0; border-radius: 50%;
	background: var(--fondo);
	font-size: 16px;
	cursor: pointer;
}

/* ---------- Telefono: l'elenco diventa un cassetto ---------- */

@media (max-width: 860px) {
	.testata__menu { display: flex; }
	.testata__titolo { font-size: 17px; }
	.testata__logo img { height: 32px; }

	.elenco {
		position: absolute;
		top: 0; bottom: 0; left: 0;
		z-index: 15;
		width: min(86vw, 320px);
		transform: translateX(-100%);
		transition: transform .25s ease, visibility .25s;
		visibility: hidden;
	}

	/* Chiuso, il cassetto sta fuori schermo: senza visibility la sua ombra e i suoi pulsanti
	   resterebbero raggiungibili. */
	.elenco--aperto { transform: none; visibility: visible; box-shadow: 4px 0 16px rgba(0, 0, 0, .15); }

	.velo { position: absolute; inset: 0; z-index: 14; background: rgba(20, 16, 10, .35); }

	.elenco__butta { opacity: 1; }
	.messaggio--utente .messaggio__testo { max-width: 88%; }
	.messaggio__avatar { width: 32px; height: 32px; }
	.chat__messaggi { padding: 16px 12px 8px; }
	.scrivi { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- I filtri della foresta: tendine a cascata, come per il tecnico ---------- */

.filtri {
	width: 100%;
	max-width: 892px;
	margin: 0 auto;
	padding: 12px 16px 4px;
}

.filtri__titolo { margin: 0 0 2px; font: 17px/1.3 var(--titoli); color: var(--marrone); }
.filtri__nota { margin: 0 0 10px; font-size: 13.5px; color: var(--grigio); }

.filtri__alberi { display: flex; flex-wrap: wrap; gap: 10px 24px; }

.albero { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; min-width: 0; }

.livello { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }

.livello__nome { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); }

.livello select {
	padding: 7px 10px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--carta);
	font: inherit;
	font-size: 14px;
	color: var(--testo);
	max-width: 260px;
}

.livello select:focus { outline: none; border-color: var(--ambra); box-shadow: 0 0 0 3px rgba(245, 164, 0, .25); }

.livello__caselle { display: flex; flex-wrap: wrap; gap: 6px; }

.casella {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--bordo);
	border-radius: 16px;
	background: var(--carta);
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.casella input { margin: 0; accent-color: var(--ambra-scuro); }
.casella:has(input:checked) { border-color: var(--ambra); background: #fff6e0; }

/* I filtri della conversazione aperta: etichette in cima, non si toccano più. */
.filtri-attivi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--carta);
	border-bottom: 1px solid var(--bordo);
	font-size: 13px;
	color: var(--grigio);
}

.etichetta {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	background: #fff6e0;
	border: 1px solid #f0d48a;
	color: #5c4400;
	font-size: 13px;
}

.elenco__apri em { display: block; font-style: normal; font-size: 12px; color: var(--ambra-scuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.messaggio__avviso { color: var(--ambra-scuro); font-size: 14px; text-align: center; margin: 0 0 12px; }

@media (max-width: 600px) {
	.filtri { padding: 10px 12px 0; }
	.livello { min-width: 100%; }
	.livello select { max-width: none; }
}

.filtri__errore { margin: 8px 0 0; font-size: 14px; color: var(--errore); }

/* «Ho trovato anche altre N pagine pertinenti»: le immagini nascono solo al clic. */
.allegati__altre {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	border: 1px dashed var(--ambra);
	border-radius: var(--raggio);
	background: #fffaf0;
	color: var(--ambra-scuro);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.allegati__altre:hover { background: #fff1d0; }

/* «Risposta verificata da un tecnico» e i pulsanti del negozio dei ricambi. */
.verificata {
	margin: 12px 0 0;
	padding: 6px 10px;
	border-left: 3px solid #2e7d32;
	background: #eef7ee;
	color: #1b4d1f;
	font-size: 14px;
	border-radius: 0 6px 6px 0;
}

.eshop { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eshop__pezzo { font-size: 14px; padding: 8px 14px; background: var(--ambra); color: var(--marrone); font-weight: 600; }
.eshop__pezzo:hover { background: var(--oro); }