/* ============================================================================
   CSS del widget Tiledesk e del badge di notifica personalizzato.
   Caricato da tiledesk.js sia nella pagina del sito sia dentro il documento
   dell'iframe del widget (stesso file in entrambi i posti) — ogni regola qui
   sotto è scritta apposta per non avere effetti collaterali sul contesto in
   cui non è pensata per agire (vedi i commenti di ciascuna sezione).
   Solo il CSS che serve al widget: nessun reset generico (body/html/ecc.).
   ============================================================================ */

/* --- Widget: nasconde il fumetto di anteprima nativo di Tiledesk ---
   Compare sopra l'icona del widget quando arriva una risposta a widget
   chiuso. calloutTimer:-1 (in tiledeskSettings, dentro tiledesk.js)
   disattiva solo il popup proattivo "hai bisogno di aiuto?", NON questo
   fumetto — va nascosto qui via CSS. Selettore generico (case-insensitive,
   con wildcard) perché non conosciamo il markup esatto di Tiledesk:
   intercetta "callout"/"preview" ovunque compaiano in una classe o un id.
   Scoperto sotto <chat-root>, l'elemento radice dell'app Angular del
   widget: esiste solo nel documento dell'iframe, mai in quello del sito,
   quindi questa regola non rischia di nascondere per sbaglio qualcos'altro
   sul sito quando il file è caricato lì. */
chat-root [class*="callout" i],
chat-root [id*="callout" i],
chat-root [class*="preview" i],
chat-root [id*="preview" i] {
    display: none !important;
}

/* --- Widget: mai sopra ai giochi a schermo intero ---
   Di default Tiledesk imposta sul contenitore del widget uno z-index enorme (circa 30000000),
   pensato per stare sempre sopra a qualunque altra cosa in pagina. I giochi del sito, a schermo
   intero, usano invece z-index basso (1) sul proprio contenitore (#gdkGame): il widget finiva
   comunque sopra di loro proprio per quell'eccesso di zelo. Qui lo si riporta a un valore basso
   quanto quello dei giochi. Non serve sapere se un gioco è aperto o no (niente da controllare, né
   CSS né JS): sulle pagine normali il widget resta comunque l'unico overlay della pagina, quindi
   non cambia nulla lì; quando invece c'è un gioco fullscreen, a parità di z-index vince l'ordine nel
   DOM, e il gioco (aggiunto alla pagina dopo il widget) resta sopra. */
#tiledesk-container {
    z-index: 15 !important;
}

/* --- Badge di notifica: "fiche da casinò" rossa, ferma ---
   Usato sia sul pulsante di chat del sito sia sull'icona nativa del widget
   dentro il suo iframe (tiledesk.js aggiunge/toglie lo <span
   class="custom-chat-badge"> via JS in base ai messaggi non letti — tutto
   l'aspetto arriva da qui, niente stile inline in JS).
   Centratura via flexbox invece di line-height, per restare precisa
   qualunque sia lo spessore del bordo o il numero di cifre mostrate
   ("99+" incluso). Il rilievo "da fiche" viene dal gradiente radiale (luce
   in alto a sinistra, invece di un colore piatto) più un sottile anello
   bianco interno che imita il bordo chiaro delle fiche vere, e un'ombra
   leggera che la stacca dal pulsante sotto. */
.custom-chat-badge {
    position: absolute;
    top:0px;
    right:-4px;
    box-sizing: border-box;
    min-width: 20px;
    width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#ec2c24;
    color: #ffffff;
    font-size: .8rem;
    font-weight:700;
    pointer-events: none;
}
[class*="slide-menu"] .custom-chat-badge {
    top: 1px;
    left: 18px;
    right: unset;
    min-width: 16px;
    height: 16px;
    width: 16px;
    min-height: 16px;
}
.desktop .fn-navigation-container.navigation-container .custom-chat-badge, .tablet .fn-navigation-container.navigation-container .custom-chat-badge {
    top: 0px;
    left: 10px;
    right: unset;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    width: 14px;
    font-size: 0.7rem;
}
/* --- Pulsanti di chat del sito: cursore a manina ---
   Solo sui pulsanti della pagina ospitante che aprono il widget (vedi
   CHAT_BUTTON_SELECTOR in tiledesk.js). Questi selettori non esistono nel
   markup di Tiledesk, quindi questa regola non ha alcun effetto quando il
   file è caricato dentro l'iframe del widget. */
.fn-open-chat,
#chatButton,
#chatButtonLoggedOut,
.cms-chat-button {
    cursor: pointer;
}

/* ==========================================================================
   Tiledesk — bottone launcher nascosto su mobile/tablet (≤ 1024px)
   Stato del wrapper: #tiledesk-container.closed = visibile solo il launcher
                      #tiledesk-container.open   = pannello conversazione aperto
   La chat resta raggiungibile tramite window.tiledesk.open()
   ========================================================================== */
@media only screen and (max-width: 1024px) {
  #tiledesk-container.closed {
    display: none !important;
  }
}