/*
 * ChatBotix — aspetto del widget.
 *
 * I VERDI NON SONO SCELTI A OCCHIO: sono campionati dai pixel di logo_360.png
 * e ricavati per calcolo da quello.
 *   #019247  il verde del "3" del logo — la bolla
 *   #018943  lo stesso verde scurito del 6%, l'unica variante su cui il testo
 *            bianco arriva a 4.51:1 di contrasto (soglia AA: 4.5). Sul verde
 *            del logo il bianco si ferma a 4.04:1, che per il testo non basta:
 *            per questo l'intestazione non usa il verde del marchio.
 *   #01803E  -12%, passaggio del mouse
 *   #017237  -22%, premuto
 *   #67BE91  +40% di bianco — il pallino acceso
 *   #E1F2E9  +88% — le bolle del cliente
 *   #C7E7D7  +78% — i bordi tenui
 *   #170039  il viola scuro di "ITALY MARKET" — il testo
 */

.chatbotix {
    --cbx-verde: #019247;
    --cbx-verde-testo: #018943;
    --cbx-verde-sopra: #01803E;
    --cbx-verde-premuto: #017237;
    --cbx-acceso: #67BE91;
    --cbx-chiaro: #E1F2E9;
    --cbx-bordo: #C7E7D7;
    --cbx-scuro: #170039;
    --cbx-grigio: #989898;

    position: fixed;
    bottom: 20px;
    z-index: 9999;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cbx-scuro);
}

/*
 * Da che parte sta.
 *
 * A destra ci sono già i badge di consenso privacy (su questo negozio,
 * iubenda) e i pulsanti "torna su" di quasi tutti i temi: la bolla ci finisce
 * sotto o sopra. Il lato si sceglie dal pannello, e il valore predefinito è
 * sinistra proprio per quello.
 */
.chatbotix--sinistra { left: 20px; right: auto; }
.chatbotix--destra { right: 20px; left: auto; }
.chatbotix--sinistra .chatbotix-pannello { left: 0; right: auto; }
.chatbotix--destra .chatbotix-pannello { right: 0; left: auto; }

/* --- la bolla ---------------------------------------------------------- */
.chatbotix-bolla {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cbx-verde);
    box-shadow: 0 4px 14px rgba(23, 0, 57, 0.28);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.chatbotix-bolla:hover { background: var(--cbx-verde-sopra); }
.chatbotix-bolla:active { background: var(--cbx-verde-premuto); transform: scale(.96); }

/*
 * Safari disegna il suo anello azzurro su :focus, anche quando il pulsante è
 * stato premuto col mouse. Si toglie, e si rimette solo per :focus-visible,
 * cioè per chi naviga da tastiera e l'anello gli serve davvero.
 */
.chatbotix-bolla:focus { outline: none; }
.chatbotix-bolla:focus-visible { outline: 3px solid var(--cbx-scuro); outline-offset: 3px; }

/*
 * La nuvoletta bianca dentro la bolla.
 *
 * Bianca perché il logo ha lo sfondo trasparente e il "3" è verde: appoggiato
 * direttamente sul verde sparirebbe. E a nuvoletta e non tonda perché un
 * cerchio dentro un cerchio non dice niente, mentre la coda dice "qui si
 * parla" prima ancora che uno legga.
 */
.chatbotix-nuvoletta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    border-radius: 9px;
    background: #fff;
    /* Alzata di 2px: con la coda in basso, il peso ottico va compensato. */
    transform: translateY(-2px);
}

/* La coda, in basso a sinistra. */
.chatbotix-nuvoletta::after {
    content: '';
    position: absolute;
    left: 8px;
    bottom: -6px;
    width: 0;
    height: 0;
    border-top: 8px solid #fff;
    border-right: 8px solid transparent;
}

.chatbotix-nuvoletta img {
    display: block;
    width: 31px;
    height: 21px;
    object-fit: contain;
}

.chatbotix-pallino {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--cbx-grigio);
    transition: background-color .2s ease;
}

.chatbotix-pallino[data-acceso="1"] { background: var(--cbx-acceso); }

/* --- il pannello ------------------------------------------------------- */
.chatbotix-pannello {
    position: absolute;
    right: 0;
    bottom: 76px;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cbx-bordo);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(23, 0, 57, 0.24);
}

.chatbotix-pannello[hidden] { display: none; }

.chatbotix-testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cbx-verde-testo);
    color: #fff;
}

.chatbotix-testa-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    border-radius: 9px;
    background: #fff;
    flex: 0 0 auto;
}

.chatbotix-testa-logo img { display: block; width: 32px; height: 20px; object-fit: contain; }
.chatbotix-testa-titolo { flex: 1 1 auto; font-weight: 700; font-size: 16px; }

.chatbotix-chiudi {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.chatbotix-chiudi:hover { background: rgba(255, 255, 255, .18); }

/* --- i messaggi -------------------------------------------------------- */
.chatbotix-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: #fff;
}

.chatbotix-messaggio {
    max-width: 84%;
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chatbotix-messaggio--bot {
    margin-right: auto;
    background: #F3F3F5;
    border-bottom-left-radius: 4px;
}

.chatbotix-messaggio--cliente {
    margin-left: auto;
    background: var(--cbx-chiaro);
    border-bottom-right-radius: 4px;
}

.chatbotix-messaggio--guasto { background: #FCE9EA; }

/* Tre puntini mentre il modello pensa. */
.chatbotix-attesa { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chatbotix-attesa span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cbx-grigio);
    animation: chatbotix-salta 1.1s infinite ease-in-out;
}
.chatbotix-attesa span:nth-child(2) { animation-delay: .16s; }
.chatbotix-attesa span:nth-child(3) { animation-delay: .32s; }

@keyframes chatbotix-salta {
    0%, 70%, 100% { transform: translateY(0); opacity: .45; }
    35% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chatbotix-attesa span { animation: none; }
    .chatbotix-bolla { transition: none; }
}

/* --- le schede prodotto ------------------------------------------------ */
/*
 * Tutta la scheda è il collegamento: il cliente clicca il prodotto, non un
 * link scritto sopra. Il modello non scrive mai indirizzi — questi arrivano
 * dal database attraverso lo strumento di ricerca.
 */
.chatbotix-schede {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 12px;
}

.chatbotix-scheda {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--cbx-bordo);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chatbotix-scheda:hover,
.chatbotix-scheda:focus-visible {
    border-color: var(--cbx-verde);
    box-shadow: 0 2px 10px rgba(1, 146, 71, .18);
    text-decoration: none;
    color: inherit;
}

.chatbotix-scheda img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: #F3F3F5;
}

/* Le schede senza foto: pagine informative e categorie. */
.chatbotix-scheda--pagina,
.chatbotix-scheda--categoria { padding: 10px 12px; }

/*
 * La categoria chiude la fila dei prodotti, quindi si stacca: tratteggiata e
 * senza sfondo pieno, perché è un invito a sfogliare e non un altro prodotto.
 */
.chatbotix-scheda--categoria {
    border-style: dashed;
    background: transparent;
}

.chatbotix-scheda--categoria:hover,
.chatbotix-scheda--categoria:focus-visible { border-style: solid; }

.chatbotix-scheda-sopratitolo {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cbx-grigio);
}

.chatbotix-scheda-segno {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cbx-chiaro);
    font-size: 17px;
    line-height: 1;
}

.chatbotix-scheda-testo { min-width: 0; }
.chatbotix-scheda-nome {
    display: block;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.chatbotix-scheda-produttore { display: block; font-size: 12px; color: var(--cbx-grigio); }
.chatbotix-scheda-prezzo { display: block; font-weight: 700; color: var(--cbx-verde-testo); }

/* --- pollice su / giù -------------------------------------------------- */
.chatbotix-voto { display: flex; gap: 6px; margin: -4px 0 12px; }
.chatbotix-voto button {
    padding: 2px 8px;
    border: 1px solid var(--cbx-bordo);
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
}
.chatbotix-voto button:hover { border-color: var(--cbx-verde); }
.chatbotix-voto button[aria-pressed="true"] {
    background: var(--cbx-chiaro);
    border-color: var(--cbx-verde);
}

/* --- il piede ---------------------------------------------------------- */
.chatbotix-piede {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-top: 1px solid var(--cbx-bordo);
    background: #fff;
}

.chatbotix-etichetta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.chatbotix-testo {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--cbx-bordo);
    border-radius: 20px;
    font-size: 15px;
    color: var(--cbx-scuro);
    background: #fff;
}

.chatbotix-testo:focus { outline: 2px solid var(--cbx-verde); outline-offset: 1px; }

.chatbotix-invia {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cbx-verde-testo);
    color: #fff;
    cursor: pointer;
}

.chatbotix-invia:hover { background: var(--cbx-verde-sopra); }
.chatbotix-invia:disabled { background: var(--cbx-grigio); cursor: default; }

/* --- telefono ---------------------------------------------------------- */
/*
 * Telefono.
 *
 * Prima il pannello era alto 82vh e a filo dei bordi: lasciava scoperto il 18%
 * della pagina e leggeva come una schermata nuova, non come un riquadro sopra
 * il sito. Ora 68vh con un margine tutto attorno — resta visibile il 32%, e i
 * bordi arrotondati su tutti e quattro i lati dicono che sotto c'è ancora il
 * negozio.
 *
 * La bolla sparisce mentre il pannello è aperto: a schermo stretto finirebbe
 * sotto il pannello, e per chiudere c'è già la X in alto.
 */
@media (max-width: 480px) {
    .chatbotix { bottom: 14px; }
    .chatbotix--sinistra { left: 14px; }
    .chatbotix--destra { right: 14px; }

    .chatbotix--sinistra .chatbotix-pannello,
    .chatbotix--destra .chatbotix-pannello {
        right: 8px;
        left: 8px;
    }

    /*
     * Staccato dal fondo, non appoggiato.
     *
     * Appoggiato a 8px il pulsante d'invio finiva sotto il badge del consenso
     * privacy — su questo negozio iubenda, che sul telefono sta in basso a
     * destra — e i messaggi non partivano. Un pulsante che non si può premere
     * è peggio di un pulsante che non c'è: il cliente non capisce perché.
     *
     * env(safe-area-inset-bottom) aggiunge lo spazio della barra gesti sugli
     * iPhone senza tasto: dove non esiste vale zero e non cambia niente.
     */
    .chatbotix-pannello {
        position: fixed;
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        height: 62vh;
        max-height: 62vh;
        /*
         * dvh tiene conto della barra indirizzi che si ritira e si riapre,
         * cosa che vh non fa. I browser che non lo conoscono ignorano queste
         * due righe e restano su vh. La tastiera invece nemmeno dvh la vede:
         * quella la gestisce il javascript con visualViewport.
         */
        height: 62dvh;
        max-height: 62dvh;
        border-radius: 14px;
    }

    .chatbotix--aperto .chatbotix-bolla { display: none; }
}