/* Assistent de dubtes (11/2026): js/assistent.js. Colors de css/tokens.css (web) i PWA/css/app.css (APP, amb tema fosc), amb valors per defecte. */
.assist-boto {
	position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 900;
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px;
	border: 0; border-radius: 999px; cursor: pointer;
	background: var(--color-primario, #cd1719); color: #fff;
	font: 600 15px/1 var(--font-texto, system-ui, sans-serif);
	box-shadow: 0 10px 28px -10px rgba(0,0,0,.55);
	transition: transform .15s ease, box-shadow .15s ease;
	transform: translateY(calc(-1 * var(--sobre-peu, 0px)));	/* com el botó de pujar (js/nova.js): sobre el peu, per no tapar les xarxes */
}
.assist-boto:hover { transform: translateY(calc(-2px - var(--sobre-peu, 0px))); box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.assist-boto:focus-visible { outline: 3px solid var(--color-texto-oscuro, #353535); outline-offset: 3px; }
.assist-boto svg { width: 22px; height: 22px; }
.assist-boto.is-obert span { display: none; }
.assist-boto.is-obert { padding: 12px; }

.assist {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--color-fondo, #fff); color: var(--color-texto, #555f66);
	border: 1px solid var(--color-borde, #90909040); border-radius: 16px;
	font: 400 15px/1.45 var(--font-texto, system-ui, sans-serif);
}
.assist[hidden] { display: none; }
.assist:not(.assist--incrustat) {
	position: fixed; right: 20px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 900;
	transform: translateY(calc(-1 * var(--sobre-peu, 0px)));
	width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
	box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.assist--incrustat { height: min(480px, 70vh); }

.assist__cap {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 14px; background: var(--color-primario, #cd1719); color: #fff;
}
.assist__titol { display: flex; flex-direction: column; }
.assist__titol strong { font-size: 16px; }
.assist__titol span { font-size: 12.5px; opacity: .85; }
.assist__tanca { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; }
.assist__tanca svg { width: 18px; height: 18px; }

.assist__llista { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.assist__msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.assist__msg--jo { align-self: flex-end; background: var(--color-boton-oscuro, #192024); color: #fff; border-bottom-right-radius: 4px; }
.assist__msg--ell { align-self: flex-start; background: var(--color-fondo-suave, #f2f2f2); color: var(--color-texto-oscuro, #353535); border-bottom-left-radius: 4px; }
.assist__msg p { margin: 0; }
.assist__text { white-space: pre-line; }
.assist__avis { font-size: 12.5px; color: var(--color-texto, #555f66); margin-bottom: 6px !important; }
.assist__fonts { margin-top: 8px !important; font-size: 13px; }
.assist__fitxa { padding: 10px 12px; border-radius: 10px; background: var(--color-fondo, #fff); border: 1px solid var(--color-borde, #90909040); }
.assist__fitxa + .assist__fitxa { margin-top: 8px; }
.assist__fitxa strong { display: block; margin-bottom: 4px; color: var(--color-texto-oscuro, #353535); }
.assist__fitxa p { font-size: 14px; }
.assist__fitxa a, .assist__fonts a { color: var(--color-primario, #cd1719); font-weight: 600; }
.assist__fitxa a { display: inline-block; margin-top: 6px; }

.assist__msg--espera { display: flex; gap: 4px; padding: 12px 14px; }
.assist__msg--espera span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gris-medio, #666); animation: assist-punt 1s infinite ease-in-out; }
.assist__msg--espera span:nth-child(2) { animation-delay: .15s; }
.assist__msg--espera span:nth-child(3) { animation-delay: .3s; }
@keyframes assist-punt { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assist__msg--espera span { animation: none; opacity: .6; } .assist-boto { transition: none; } }

.assist__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--color-borde, #90909040); }
.assist__form input {
	flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-borde, #90909040); border-radius: 10px;
	background: var(--color-fondo, #fff); color: var(--color-texto-oscuro, #353535); font: inherit; font-size: 16px; /* 16px: l'iPhone no fa zoom */
}
.assist__form input:focus { outline: 2px solid var(--color-primario, #cd1719); outline-offset: 0; }
.assist__envia { display: grid; place-items: center; width: 44px; border: 0; border-radius: 10px; background: var(--color-primario, #cd1719); color: #fff; cursor: pointer; }
.assist__envia:disabled { opacity: .5; cursor: default; }
.assist__envia svg { width: 20px; height: 20px; }

/* Botó de pujar de la web (css/nova.css, 48 px a la cantonada): a sobre de la bombolla */
.amb-assist .pujar { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 480px) {
	/* Al mòbil el xat ocupa la part visible de la pantalla (amb el teclat obert, només la de sobre el teclat): js/assistent.js */
	.assist:not(.assist--incrustat) {
		right: 8px; left: 8px; width: auto; bottom: auto; transform: none;
		top: calc(var(--vv-top, 0px) + 8px + env(safe-area-inset-top, 0px));
		height: calc(var(--vv-h, 100dvh) - 16px - env(safe-area-inset-top, 0px));
	}
	.assist-obert .assist-boto, .assist-obert .pujar { display: none; }	/* amb el xat obert es tanca amb la creu de la capçalera */
	.assist-boto span { display: none; }
	.assist-boto { padding: 13px; }	/* 48 px, com el botó de pujar */
	.amb-assist .pujar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}