/* GR Medical — l'assistente.
 *
 * Pannello a sé, non il riquadro della chat generica: qui il compito è uno
 * solo, portare da una frase confusa alla prestazione giusta. Per questo la
 * scheda con "Prenota ora" sta DENTRO la conversazione, non dopo.
 */

.gra {
	--gra-blu: #00679A;
	--gra-scuro: #014D6B;
	--gra-cta: #0087BD;
	--gra-testo: #0F2A3A;
	--gra-grigio: #4F6B7C;
	--gra-muto: #9AAAB6;
	--gra-bordo: #DCE6EE;
	--gra-campo: #F5F8FB;

	position: fixed;
	inset: 0;
	/* Sopra i pulsanti flottanti della pagina, che stanno a 99999. */
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 42, 58, .55);
	color: var(--gra-testo);
	line-height: 1.5;
	animation: graComparsa .2s ease;
}

.gra[hidden] { display: none; }
.gra *, .gra *::before, .gra *::after { box-sizing: border-box; }

@keyframes graComparsa { from { opacity: 0; } to { opacity: 1; } }
@keyframes graSu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes graPunto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
	.gra, .gra * { animation: none !important; }
}

.gra-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 460px;
	height: min(660px, 100%);
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 28px 70px rgba(1, 77, 107, .42);
}

/* ------------------------------------------------------------ intestazione */

.gra-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gra-bordo);
	background: #fff;
}

.gra-logo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #E6F0F7;
	color: var(--gra-blu);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gra-chi { flex: 1; min-width: 0; }
.gra-nome { font-weight: 800; font-size: 15px; color: var(--gra-scuro); line-height: 1.2; }

.gra-stato {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--gra-grigio);
}

.gra-pallino { width: 7px; height: 7px; border-radius: 50%; background: #3FB984; }

.gra-tel, .gra-chiudi {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.gra-tel { background: var(--gra-blu); color: #fff; border: none; }
.gra-chiudi { background: #fff; color: var(--gra-grigio); border: 1px solid var(--gra-bordo); }
.gra-chiudi:hover { background: var(--gra-campo); }

/* ----------------------------------------------------------- conversazione */

.gra-chat {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 16px;
	background: var(--gra-campo);
	scrollbar-width: thin;
}

.gra-chat::-webkit-scrollbar { width: 8px; }
.gra-chat::-webkit-scrollbar-thumb { background: var(--gra-bordo); border-radius: 8px; }

.gra-riga { display: flex; margin-bottom: 10px; }
.gra-riga--io { justify-content: flex-end; }
.gra-riga--lui { justify-content: flex-start; }

.gra-bolla {
	max-width: 84%;
	padding: 11px 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	border: 1px solid transparent;
}

.gra-riga--io .gra-bolla {
	background: var(--gra-blu);
	color: #fff;
	border-color: var(--gra-blu);
	border-radius: 14px 14px 4px 14px;
}

.gra-riga--lui .gra-bolla {
	background: #fff;
	color: var(--gra-testo);
	border-color: #E6EEF4;
	border-radius: 14px 14px 14px 4px;
}

.gra-scrive {
	display: flex;
	gap: 5px;
	padding: 14px 16px;
	border-radius: 14px 14px 14px 4px;
	background: #fff;
	border: 1px solid #E6EEF4;
	width: fit-content;
	margin-bottom: 10px;
}

.gra-scrive span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gra-muto);
	animation: graPunto 1.1s ease-in-out infinite;
}

.gra-scrive span:nth-child(2) { animation-delay: .16s; }
.gra-scrive span:nth-child(3) { animation-delay: .32s; }

/* ------------------------------------------------- la scheda che fa agire */

.gra-scheda {
	background: #fff;
	border: 1.5px solid var(--gra-blu);
	border-radius: 14px;
	padding: 16px;
	margin: 4px 0 10px;
	box-shadow: 0 8px 20px rgba(1, 77, 107, .10);
	animation: graSu .25s ease;
}

.gra-scheda-gruppo {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gra-cta);
	margin-bottom: 6px;
}

.gra-scheda-titolo { font-weight: 800; font-size: 17px; color: var(--gra-scuro); line-height: 1.25; margin-bottom: 4px; }
.gra-scheda-nota { font-size: 13.5px; color: var(--gra-grigio); line-height: 1.5; margin-bottom: 12px; }
.gra-scheda-prezzo { font-size: 19px; font-weight: 800; color: var(--gra-blu); margin-bottom: 12px; }

.gra-prenota {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	border: none;
	border-radius: 11px;
	background: var(--gra-blu);
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	margin-bottom: 9px;
}

.gra-prenota:hover { background: var(--gra-scuro); }

.gra-scopri {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border: 1.5px solid #CFE0EC;
	border-radius: 11px;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
}

/* ------------------------------------------------------------------ piede */

.gra-piede { flex: 0 0 auto; background: #fff; border-top: 1px solid var(--gra-bordo); }

.gra-opzioni { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }

.gra-opzione {
	padding: 8px 13px;
	border-radius: 999px;
	border: 1.5px solid #CFE0EC;
	background: #fff;
	color: var(--gra-blu);
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.gra-opzione:hover { background: #F0F5F9; border-color: var(--gra-cta); }

.gra-invio { display: flex; align-items: flex-end; gap: 9px; padding: 12px 16px 8px; }

.gra-campo {
	flex: 1;
	min-width: 0;
	resize: none;
	max-height: 96px;
	border: 1.5px solid var(--gra-bordo);
	border-radius: 12px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 14px;
	color: var(--gra-testo);
	line-height: 1.4;
	background: var(--gra-campo);
}

.gra-campo:focus {
	outline: none;
	border-color: var(--gra-cta);
	box-shadow: 0 0 0 3px rgba(24, 161, 220, .18);
}

.gra-manda {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 12px;
	background: var(--gra-blu);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gra-manda:disabled { opacity: .5; cursor: default; }

.gra-avvertenza {
	padding: 0 16px 12px;
	text-align: center;
	font-size: 11px;
	color: var(--gra-muto);
	line-height: 1.45;
}

/* Il tema dichiara a:hover con specificità (0,1,1) e batterebbe queste classi:
   ogni <a> del pannello va elencato qui, come in grm-blog e nella barra. */
.gra a.gra-scopri,
.gra a.gra-scopri:link,
.gra a.gra-scopri:visited,
.gra a.gra-scopri:hover,
.gra a.gra-scopri:focus,
.gra a.gra-scopri:active { color: var(--gra-blu); text-decoration: none; }

.gra a.gra-scopri:hover { background: #F0F5F9; border-color: var(--gra-cta); }

.gra a.gra-tel,
.gra a.gra-tel:link,
.gra a.gra-tel:visited,
.gra a.gra-tel:hover,
.gra a.gra-tel:focus,
.gra a.gra-tel:active { color: #fff; text-decoration: none; }

.gra :focus-visible { outline: 2px solid var(--gra-cta); outline-offset: 2px; }

/* Su schermo stretto il pannello prende tutto: una finestrella al centro
   lascerebbe la tastiera del telefono a coprire il campo di scrittura. */
@media (max-width: 560px) {
	.gra { padding: 0; }
	.gra-panel { max-width: none; height: 100%; border-radius: 0; }
}

/* --------------------------------------- la pagina, mentre il pannello e' su
 *
 * L'assistente e' un pannello che copre lo schermo, col fondo scurito. I
 * pulsanti fissi della pagina — Google Maps, WhatsApp e "Prenota" — stanno a
 * `z-index: 99999`, lo stesso valore del pannello: a parita' vince chi viene
 * dopo nel DOM, e sul telefono finivano sopra la conversazione, proprio dove
 * si scrive.
 *
 * Alzare il pannello e basta non sarebbe abbastanza: anche vincendo la gara,
 * tre bottoni che galleggiano sul fondo scurito di una finestra aperta sono
 * sbagliati comunque. Finche' il pannello e' su, si tolgono di mezzo. La
 * classe la mette e la toglie `apri()` / `chiudiPannello()`.
 */
body.gra-aperto .gr-maps-circle,
body.gra-aperto .gr-whatsapp-circle,
body.gra-aperto .lqd-stickybar-wrap,
body.gra-aperto #grm-launcher {
	display: none !important;
}

/* Nota per chi legge: la bolla della chat (`#grm-launcher`) sta a
   `z-index: 2147483600`, cioe' quasi il massimo rappresentabile. Alzare il
   pannello per superarla sarebbe una gara persa in partenza: si toglie di
   mezzo mentre il pannello e' su, come gli altri.

   ⚠️ La stessa collisione ce l'ha la MODALE DI PRENOTAZIONE di grm-blog
   (`.grmb-modal.is-open`, z-index 99999): i due cerchi le galleggiano sopra
   esattamente come facevano qui. Va sistemata li', non da questo file. */

/* ------------------------------------------------------ i modi per sentirsi
 *
 * Compaiono quando la richiesta e' per una persona vera, o per qualcosa che
 * solo la reception puo' fare. Quali siano lo decide il server guardando
 * l'ora: qui si disegnano e basta.
 */
.gra-contatti {
	margin: 4px 0 2px;
	padding: 14px;
	border: 1px solid var(--gra-bordo);
	border-radius: 14px;
	background: var(--gra-campo);
}
.gra-contatti-titolo {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gra-grigio);
	margin-bottom: 10px;
	line-height: 1.35;
}
.gra-contatto {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	margin-top: 8px;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	background: #fff;
	border: 1.5px solid var(--gra-bordo);
	color: var(--gra-scuro);
}
.gra-contatto:first-of-type { margin-top: 0; }
.gra-contatto:hover { border-color: var(--gra-cta); }

/* Il telefono e' l'azione principale quando siamo aperti: si vede che lo e'. */
.gra-contatto--tel {
	background: var(--gra-blu, #00679A);
	border-color: var(--gra-blu, #00679A);
	color: #fff;
}
.gra-contatto--tel:hover { border-color: var(--gra-scuro); background: var(--gra-scuro); }

/* Il verde di WhatsApp e' il suo, riconoscerlo e' meta' del lavoro. */
.gra-contatto--whatsapp { color: #128C7E; }
.gra-contatto--whatsapp:hover { border-color: #128C7E; }