/*cookiebot*/
#CookiebotWidget {
    right: initial!important;
    left: 20px!important;
    bottom: 50px!important;
    opacity: .15!important
}

#CookiebotWidget:hover {
    opacity: 1!important;
}

@media(max-width:767px) {
    #CookiebotWidget {
        left: 10px!important;
        bottom: 10px!important;
    }
}

/* Bottoni in sovrimpressione in basso a destra (View Component FloatingButtons).
   Pila verticale: sopra lo scroll-to-top, sotto, nell'angolo, il bottone Hubix AI (sulla pagina della chat non c'è).
   Lo scroll-to-top nascosto tiene il suo posto: quando compare o sparisce il bottone AI non si muove.
   La pila sta sotto overlay, navbar fisse e modali del sito (z-index 9, come il vecchio .scroll-top). */

.hub-fab {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Pagina della chat: solo lo scroll-to-top. Il campo di scrittura è fisso in basso (sticky, ~70px con il margine):
   finché il contenitore della chat (960px) arriva fin sotto il bottone, la pila sale sopra il campo. */
@media (max-width: 1099.98px) {
    .hub-fab--chat {
        bottom: 90px;
    }
}

@media(max-width:767px) {
    .hub-fab {
        right: 10px;
    }
}

/* Bottone AI spento (HubixAiChatON o HubixAiChatBtnON a false): lo scroll-to-top è da solo e torna
   com'era nel template, 45px con la freccia a 20px, a 70px dal fondo. Viene dopo .hub-fab .scroll-top
   per vincere a parità di specificità. */
.hub-fab--solo {
    bottom: 70px;
}

/* Scroll-to-top: il template (main.css) lo mette in position: fixed a 45px; qui entra nella pila,
   più piccolo del bottone AI, e parte nascosto. hub-floating.js aggiunge is-visible dopo un po' di scorrimento. */
.hub-fab .scroll-top {
    position: static;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .3s ease-out, transform .3s ease-out, background .3s ease-out, visibility 0s linear .3s;
}

.hub-fab--solo .scroll-top {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
}

.hub-fab .scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
    box-shadow: 0 4px 14px rgba(20, 44, 71, .2), 0 0 0 1px rgba(20, 44, 71, .06);
}

/* Bottone Hubix AI: il badge in testa alla pagina della chat (.cb-hai-badge in cb-hubix-ai.css: cerchio con la
   stella bianca su gradiente blu→viola) a colori invertiti: fondo bianco, stella e anello sottile con lo stesso
   gradiente. In hover si capovolge gradualmente e diventa il badge pieno. Più grande dello scroll-to-top perché è
   l'azione principale.
   Il gradiente qui resta nei blu Hubix (dal blu del sito a un blu profondo, gli stessi toni di
   --hb-light-blue-and-blue-gradient in styleCB.css), senza il viola del badge.
   I gradienti non si animano con transition: il fondo in hover sta su ::before, che passa da opacità 0 a 1;
   la stella tiene sempre il gradiente ritagliato sul testo e in hover ci si sovrappone un riempimento bianco
   (-webkit-text-fill-color, che è un colore e quindi si anima).
   Per la stella in blu pieno invece del gradiente: in .hub-fab-ai .bi togliere background e i due -clip/-fill. */
.hub-fab-ai {
    --hub-fab-ai-gradient: linear-gradient(135deg, #006ef7 0%, #0059c8 55%, #004492 100%);
    --hub-fab-ai-duration: .3s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(2, 77, 155, 0.18);
    background: #fff;
    color: var(--color-tertiary);
    box-shadow: 0 4px 14px rgba(20, 44, 71, .2);
    transition: transform .2s ease-out, box-shadow .2s ease-out, border-color var(--hub-fab-ai-duration) ease-out;
}

.hub-fab-ai::before {
    content: "";
    position: absolute;
    inset: -1px;   /* copre anche il bordo */
    border-radius: 50%;
    background: var(--hub-fab-ai-gradient);
    opacity: 0;
    transition: opacity var(--hub-fab-ai-duration) ease-out;
}

.hub-fab-ai .bi {
    position: relative;   /* sopra ::before */
    font-size: 26px;
    line-height: 1;
    background: var(--hub-fab-ai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: -webkit-text-fill-color var(--hub-fab-ai-duration) ease-out;
}

.hub-fab-ai:hover,
.hub-fab-ai:focus-visible {
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 44, 71, .26);
}

.hub-fab-ai:hover::before,
.hub-fab-ai:focus-visible::before {
    opacity: 1;
}

.hub-fab-ai:hover .bi,
.hub-fab-ai:focus-visible .bi {
    -webkit-text-fill-color: #fff;
}

@media (max-width: 575.98px) {
    .hub-fab-ai {
        width: 50px;
        height: 50px;
    }

    .hub-fab-ai .bi {
        font-size: 23px;
    }
}