/* (2026-09-11) LA CHAT DEI SITI VETRINA — lo stile del widget, lato visitatore.
   Vedi docs/roadmap/chat-siti-web.md. Fratello di backend/assets/css/gc_rt_chat.css (la chat delle demo):
   stessa struttura e stesse classi di base, ma i colori vengono dalle VARIABILI DEL MARCHIO che
   includes/head.php stampa per ogni dominio (--brand, --brand-strong, --accent), cosi' la chat di
   Gestionale Magazzino non e' blu come quella di Gestionale Patronato.
   ⚠️ Tutto vive sotto .gc-sc: il widget sta dentro pagine gia' scritte e non deve toccare niente d'altro.
   ⚠️ [hidden] va ripetuto con display:none dove l'elemento ha un display suo (flex, inline-flex):
   altrimenti vince il display e l'attributo non nasconde niente. */

.gc-sc{ position:fixed; right:20px; bottom:20px; z-index:1080; font-size:13px; line-height:1.4; font-family:inherit; }
.gc-sc *{ box-sizing:border-box; }

.gc-sc-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; background:var(--brand, #1f3a5f); color:#fff; border:0; border-radius:24px; padding:11px 18px; box-shadow:0 6px 18px rgba(16,24,40,.22); cursor:pointer; font-weight:600; font-size:13px; }
.gc-sc-btn:hover, .gc-sc-btn:focus{ background:var(--brand-strong, #274b7a); outline:none; }
.gc-sc-btn i{ font-size:16px; }
.gc-sc-dot{ width:9px; height:9px; border-radius:50%; background:#12b76a; display:none; }
.gc-sc.gc-sc-is-online .gc-sc-dot{ display:inline-block; animation:gcScPulse 1.8s ease-out infinite; }
.gc-sc-badge{ position:absolute; top:-6px; right:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#f04438; color:#fff; font-size:11px; line-height:20px; text-align:center; font-weight:700; }
.gc-sc-badge[hidden]{ display:none; }

/* L'invito: una nuvoletta che compare da sola dopo qualche secondo sulle pagine che contano. */
.gc-sc-invito{ position:absolute; right:0; bottom:56px; width:250px; background:#fff; color:#1f2733; border:1px solid #e4e7ec; border-radius:12px; padding:11px 30px 11px 13px; box-shadow:0 12px 30px rgba(16,24,40,.18); cursor:pointer; }
.gc-sc-invito[hidden]{ display:none; }
.gc-sc-invito-x{ position:absolute; top:4px; right:6px; background:none; border:0; color:#98a2b3; font-size:15px; line-height:1; cursor:pointer; padding:4px; }

.gc-sc-panel{ position:absolute; right:0; bottom:58px; width:360px; max-width:calc(100vw - 24px); height:500px; max-height:calc(100vh - 110px); background:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(16,24,40,.25); display:flex; flex-direction:column; overflow:hidden; border:1px solid #e4e7ec; }
.gc-sc-panel[hidden]{ display:none; }
/* Finche' si vede il modulo dei dati il pannello si adatta al contenuto: a misura fissa resterebbe un
   vuoto sotto i campi. Quando comincia la conversazione torna alto, per far scorrere i messaggi. */
.gc-sc-panel.gc-sc-solo-dati{ height:auto; }

.gc-sc-head{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 14px 13px; background:var(--brand, #1f3a5f); color:#fff; }
.gc-sc-head::before{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, var(--brand, #1f3a5f) 0%, #13695a 55%, #12a867 100%); opacity:0; transition:opacity .5s ease; }
.gc-sc.gc-sc-is-online .gc-sc-head::before{ opacity:1; }
.gc-sc-head > *{ position:relative; }
.gc-sc-title{ font-weight:700; font-size:14px; }
.gc-sc-status{ display:inline-flex; align-items:center; gap:7px; margin-top:7px; padding:3px 11px 3px 9px; border-radius:12px; font-size:12px; font-weight:600; background:rgba(255,255,255,.14); color:rgba(255,255,255,.88); }
.gc-sc.gc-sc-is-online .gc-sc-status{ background:#fff; color:#0b7a4b; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.gc-sc-status-dot{ width:8px; height:8px; border-radius:50%; background:#12b76a; display:inline-block; animation:gcScPulse 1.8s ease-out infinite; }
.gc-sc-status-dot[hidden], .gc-sc-status i[hidden]{ display:none; }
.gc-sc-close{ background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:14px; padding:4px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
.gc-sc-close:hover{ background:rgba(255,255,255,.28); }

@keyframes gcScPulse{
	0%{ box-shadow:0 0 0 0 rgba(18,183,106,.55); }
	70%{ box-shadow:0 0 0 7px rgba(18,183,106,0); }
	100%{ box-shadow:0 0 0 0 rgba(18,183,106,0); }
}

/* Il modulo dei dati: si vede solo al primo messaggio, poi sparisce e resta la conversazione. */
.gc-sc-dati{ padding:12px; background:#f7f8fa; overflow-y:auto; flex:1; }
.gc-sc-dati[hidden]{ display:none; }
.gc-sc-dati p{ margin:0 0 10px; color:#475467; }
.gc-sc-campo{ display:block; width:100%; margin:0 0 8px; border:1px solid #d0d5dd; border-radius:10px; padding:9px 11px; font:inherit; color:#1f2733; background:#fff; }
.gc-sc-campo:focus{ outline:none; border-color:var(--brand, #1f3a5f); box-shadow:0 0 0 3px rgba(31,58,95,.12); }
textarea.gc-sc-campo{ resize:none; min-height:78px; }
.gc-sc-consenso{ display:flex; gap:8px; align-items:flex-start; margin:2px 0 10px; font-size:12px; color:#475467; }
.gc-sc-consenso input{ margin-top:2px; }
.gc-sc-consenso a{ color:var(--brand, #1f3a5f); }
.gc-sc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }	/* trappola per i robot: chi la compila non e' una persona */

.gc-sc-list{ flex:1; overflow-y:auto; padding:12px; background:#f7f8fa; }
.gc-sc-list[hidden]{ display:none; }
.gc-sc-msg{ max-width:82%; margin:0 0 10px; }
.gc-sc-mine{ margin-left:auto; }
.gc-sc-text{ padding:8px 11px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; line-height:1.45; }
.gc-sc-mine .gc-sc-text{ background:var(--brand, #1f3a5f); color:#fff; border-radius:12px 12px 2px 12px; }
.gc-sc-theirs .gc-sc-text{ background:#fff; color:#1f2733; border:1px solid #e4e7ec; border-radius:12px 12px 12px 2px; }
.gc-sc-name{ font-size:11px; color:#667085; margin:0 0 3px 2px; font-weight:600; }
.gc-sc-time{ font-size:10px; color:#98a2b3; margin-top:3px; text-align:right; }
.gc-sc-system{ max-width:100%; text-align:center; }
.gc-sc-system .gc-sc-text{ display:inline-block; background:#fff7e6; color:#8a5a00; border:1px solid #fde4b0; border-radius:10px; font-size:12px; }
.gc-sc-system .gc-sc-time{ text-align:center; }

.gc-sc-error{ padding:6px 12px; font-size:12px; color:#b42318; background:#fef3f2; }
.gc-sc-error[hidden]{ display:none; }

.gc-sc-form{ display:flex; gap:8px; padding:10px; border-top:1px solid #eef1f5; background:#fff; margin:0; }
.gc-sc-form[hidden]{ display:none; }
.gc-sc-input{ flex:1; resize:none; border:1px solid #d0d5dd; border-radius:10px; padding:8px 10px; font:inherit; min-height:40px; max-height:120px; color:#1f2733; }
.gc-sc-input:focus{ outline:none; border-color:var(--brand, #1f3a5f); box-shadow:0 0 0 3px rgba(31,58,95,.12); }
.gc-sc-send{ align-self:flex-end; background:var(--accent, #10cfbd); color:#fff; border:0; border-radius:10px; padding:9px 14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.gc-sc-send[disabled]{ opacity:.6; cursor:default; }

/* Il ripiego: quando non c'e' nessuno e il marchio ha un numero, si propone WhatsApp. */
.gc-sc-whatsapp{ display:block; padding:8px 12px; background:#e8f8ee; color:#0b7a4b; text-align:center; font-weight:600; text-decoration:none; border-top:1px solid #cdebd8; }
.gc-sc-whatsapp[hidden]{ display:none; }

@media (max-width:480px){
	.gc-sc{ right:12px; bottom:12px; }
	.gc-sc-panel{ width:calc(100vw - 24px); height:calc(100vh - 100px); }
	.gc-sc-invito{ width:calc(100vw - 40px); }
}
@media (prefers-reduced-motion: reduce){
	.gc-sc-dot, .gc-sc-status-dot{ animation:none !important; }
	.gc-sc-head::before{ transition:none; }
}
@media print{ .gc-sc{ display:none !important; } }