/* Bolla assistente: stile estratto da Views/Public/_Widget.cshtml (rapporto prestazioni,
   voce #10 html-2/css-3). Era un <style> inline da 8.271 B rispedito identico su OGNI pagina
   del sito, non cachabile perche' l'HTML esce con no-store. Qui e' un file statico con ?v=,
   scaricato una volta sola.
   La view lo dichiara con un <link> emesso come HTML raw: il widget rende a fondo body e
   ogni <link rel="stylesheet"> scritto in una view viene intercettato da NopLinkTagHelper
   (4.90) e dirottato su GenerateCssFiles(), che a quel punto e' gia' stato reso.
   Il contenuto e' identico riga per riga all'originale: l'unica differenza e' la
   chiocciola di at-media, che in Razor andava raddoppiata per l'escape. */
/* Colori dal design system del tema (base/_variables.css), con fallback al valore del
   token: la bolla vive su ogni pagina del sito, dove le variabili ci sono sempre. */
/* Chip e non piu' tondo: un cerchio muto in basso a destra e' un'icona qualunque, e chi
   non l'aveva gia' vista non sapeva che cosa apriva. Con l'etichetta il cliente legge il
   nome dell'assistente prima di premere. La classe resta sa-widget-bubble: e' il selettore
   con cui il container GTM aggancia il chip, rinominarla spegnerebbe la misurazione. */
.sa-widget-bubble {
    position: fixed; right: 20px; bottom: 20px; z-index: 999999;
    display: flex; align-items: center; gap: 8px;
    /* Il volto e' un tondo PIENO fino al bordo, mentre l'icona vecchia aveva aria dentro
       il suo viewBox: senza un filo di padding in piu' a sinistra si incolla al bordo del
       chip. Verticale a 8px perche' il tondo e' 32px: 8+32+8 tiene la stessa altezza di
       prima (11+26+11), cosi' il chip non si muove. */
    padding: 8px 18px 8px 12px; border: 0; border-radius: 999px; cursor: pointer;
    /* Il nome arriva da una setting: su un telefono stretto il chip si ferma al bordo
       invece di uscire dallo schermo (l'etichetta ellissa, vedi qui sotto). */
    max-width: calc(100vw - 40px);
    background: var(--color-brand-primary, #265B87); color: var(--color-text-white, #fff);
    /* font-family: un <button> non eredita il font della pagina se non glielo si dice. */
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
/* translateY e non scale: su un chip largo lo scale muove anche il bordo destro, che qui
   e' incollato al margine dello schermo. */
.sa-widget-bubble:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.34); }
/* Volto di LUC.IA al posto della faccia di robot (27/08). La natura AI NON e' piu'
   affidata all'icona: resta scritta a parole nell'aria-label del chip e nell'header del
   pannello (Art. 50(1) AI Act) — la foto e' identita', la dichiarazione e' il testo.
   object-fit cover: il file e' gia' quadrato, ma se un domani lo si sostituisce con uno
   che quadrato non e' il viso resta centrato invece di schiacciarsi.
   L'anello bianco stacca i capelli scuri dal blu del chip. */
.sa-widget-bubble .sa-widget-faccia {
    /* 32 e non 28: la foto e' a busto, non un primo piano — sotto i 30px il viso non si
       legge piu'. Il chip resta alto uguale grazie al padding ricalcolato qui sopra. */
    width: 32px; height: 32px; flex: 0 0 auto; display: block;
    border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.sa-widget-bubble .sa-widget-etichetta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-widget-bubble.sa-hidden { display: none; }
.sa-widget-panel {
    position: fixed; right: 20px; bottom: 20px; z-index: 1000000;
    width: 400px; height: 620px; max-height: calc(100vh - 40px);
    background: var(--color-bg, #fff); border-radius: 16px; overflow: hidden;
    /* Direzione B: ombra a due strati invece di una sola diffusa — il pannello si stacca
       dalla pagina senza il grigiore che una 40px al 30% posa su tutto quello che copre. */
    box-shadow: 0 18px 50px rgba(36,50,56,.18), 0 2px 8px rgba(36,50,56,.08);
    display: none; flex-direction: column;
}
.sa-widget-panel.sa-open { display: flex; }
.sa-widget-head {
    display: flex; align-items: center; gap: 10px;
    /* Direzione B: l'header prende lo SCURO del sito (#243238) al posto del blu scurito.
       È la mossa che regge tutta la direzione — con l'header scuro l'oro dell'invio e del
       "vedi tutte" diventa l'unico colore acceso, e la merce resta la cosa più luminosa.
       Il contrasto ci guadagna: il bianco su #243238 sta a ~13:1 contro gli 8,9:1 del
       primary-dark, e il titolo qui è testo (WCAG AA 4,5:1). */
    padding: 12px 10px 12px 16px; background: var(--color-brand-secondary, #243238);
    color: var(--color-text-white, #fff); flex: 0 0 auto;
}
.sa-widget-head strong { font-size: 15px; font-weight: 700; }
/* Nell'header il volto e' piu' grande che sul chip: il titolo qui va su due righe (nome +
   natura AI, ~34px in tutto) e ci sta un tondo piu' generoso. Niente anello: il
   primary-dark dell'header stacca gia' da solo. */
.sa-widget-head .sa-widget-faccia {
    width: 40px; height: 40px; flex: 0 0 auto; display: block;
    border-radius: 50%; object-fit: cover;
    /* Sullo scuro il ritratto ha bisogno di un filo di anello, che sul blu non serviva:
       una foto chiara appoggiata al nero sembra ritagliata male. */
    border: 1px solid rgba(255,255,255,.35);
}
/* Titolo su due righe: nome sopra, natura AI sotto (Art. 50(1) AI Act — l'header è
   l'unico punto SEMPRE visibile durante la conversazione nel pannello, dove il titolo
   della pagina /assistente non viene renderizzato). */
.sa-widget-head .sa-widget-title {
    /* flex:1 e non width a contenuto: il sottotitolo va a capo DENTRO il titolo (flex-basis
       100%) e la X resta appesa a destra senza dipendere dalla larghezza intrinseca. */
    /* gap riga/colonna separati: 8px fra nome e badge, ma solo 2px sopra il sottotitolo —
       l'header non deve crescere più del necessario. */
    flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0;
}
.sa-widget-head .sa-widget-ai {
    flex-basis: 100%; font-size: 11px; line-height: 1.3; font-weight: 400;
    /* Bianco appena velato, NON grigio: su primary-dark (#1f4d72) sta a ~6,9:1 — sopra
       il 4,5:1 AA che un testo da 11px pretende. */
    color: rgba(255, 255, 255, .85);
}
.sa-widget-head .sa-widget-close {
    margin-left: auto; background: none; border: 0; border-radius: 8px;
    color: rgba(255,255,255,.85); cursor: pointer; font-size: 22px; line-height: 1;
    /* Bersaglio quadrato da 40px come tutti gli altri comandi della Direzione B: prima
       era alto quanto il glifo, cioè difficile da prendere col pollice proprio dove sta
       il gesto più frequente del pannello (chiudere). */
    width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.sa-widget-head .sa-widget-close:hover {
    background: rgba(255,255,255,.1); color: var(--color-text-white, #fff);
}
.sa-widget-head .sa-widget-close:focus-visible {
    outline: 2px solid var(--color-brand-accent, #f2b705); outline-offset: 2px;
}
.sa-widget-panel iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; }

@media (max-width: 640px) {
    /* dvh e non vh: su telefono la tastiera che si apre non cambia 100vh, quindi il
       composer finirebbe NASCOSTO sotto la tastiera proprio mentre si scrive.
       100% resta come ripiego per i browser che non conoscono dvh. */
    .sa-widget-panel {
        right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh;
        max-height: 100%; max-height: 100dvh; border-radius: 0;
    }
}

/* Il badge Cookiebot (il tondo "CO" in basso a sinistra) vive a z-index massimo e resta
   SOPRA il pannello aperto — a schermo pieno galleggia in mezzo alla chat. Non si fa a
   gara di z-index (il valore è loro, come per Zendesk): a pannello aperto lo si nasconde,
   e torna alla chiusura. La classe la mette/toglie apri()/chiudi() qui sotto. Il dialog
   del consenso (#CybotCookiebotDialog) non si tocca: quello deve poter comparire sempre. */
html.sa-panel-aperto #CookiebotWidget {
    display: none !important;
}