/* Burbuja Chatbot — widget frontend */

.bdcb-root {
    --bdcb-accent: #2563EB;
    --bdcb-bubble: #2563EB;
    --bdcb-header: #2563EB;
    --bdcb-text: #1f2933;
    --bdcb-bg: #ffffff;
    --bdcb-user: #2563EB;
    position: fixed;
    bottom: 20px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    box-sizing: border-box;
}
.bdcb-root.bdcb-right { right: 20px; }
.bdcb-root.bdcb-left  { left: 20px; }
.bdcb-root *, .bdcb-root *::before, .bdcb-root *::after { box-sizing: border-box; }

/* Pallino lanciatore */
.bdcb-launcher {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bdcb-bubble);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 0;
    overflow: hidden;
}
.bdcb-launcher:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0,0,0,.32); }
.bdcb-launcher img { width: 100%; height: 100%; object-fit: cover; }
.bdcb-launcher svg { width: 30px; height: 30px; fill: #fff; }

/* --- Blindatura contro i temi WordPress -------------------------------------
   Il pallino è un <button>: molti temi aggiungono ai button un BORDO o un
   CONTORNO blu al passaggio del mouse (button:hover{border:...}), e dopo il click
   resta il contorno di focus del browser. Su un cerchio si vede malissimo.
   Qui azzeriamo bordo/contorno/ombra-blu in tutti gli stati, con !important perché
   le regole del tema sono più specifiche del nostro "border: none".
   L'accessibilità NON si perde: più sotto, chi naviga da TASTIERA continua a vedere
   un contorno ben visibile, ma nei colori del widget invece che blu. */
.bdcb-root .bdcb-launcher,
.bdcb-root .bdcb-launcher:focus,
.bdcb-root .bdcb-launcher:active {
    border: none !important;
    outline: none !important;
    background: var(--bdcb-bubble) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}
.bdcb-root .bdcb-launcher:hover {
    border: none !important;
    outline: none !important;
    background: var(--bdcb-bubble) !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.32) !important;
}
/* Stessa blindatura sugli altri pulsanti del widget (X, icone header, chip, invia). */
.bdcb-root .bdcb-hbtn:focus,
.bdcb-root .bdcb-hbtn:active,
.bdcb-root .bdcb-nudge-x:focus,
.bdcb-root .bdcb-nudge-x:active,
.bdcb-root .bdcb-quick button:focus,
.bdcb-root .bdcb-quick button:active,
.bdcb-root .bdcb-sendbtn:focus,
.bdcb-root .bdcb-sendbtn:active,
.bdcb-root .bdcb-form button:focus,
.bdcb-root .bdcb-form button:active {
    outline: none !important;
}
/* Navigazione da tastiera: contorno BEN visibile, nei colori del widget (non blu).
   Va DOPO le regole qui sopra: a parità di specificità vince l'ultima. */
.bdcb-root .bdcb-launcher:focus-visible,
.bdcb-root .bdcb-hbtn:focus-visible,
.bdcb-root .bdcb-nudge-x:focus-visible,
.bdcb-root .bdcb-quick button:focus-visible,
.bdcb-root .bdcb-sendbtn:focus-visible,
.bdcb-root .bdcb-form button:focus-visible {
    outline: 3px solid var(--bdcb-accent) !important;
    outline-offset: 2px;
}

/* Nudge (fumetto proattivo) — card moderna con avatar + testo su max 2 righe */
.bdcb-nudge {
    position: absolute;
    bottom: 74px;
    right: 2px;
    width: 250px;
    max-width: calc(100vw - 40px);
    background: #fff;
    color: var(--bdcb-text);
    padding: 12px 34px 12px 14px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
    cursor: pointer;
    animation: bdcb-nudge-in .38s cubic-bezier(.2,.9,.25,1.15);
    transition: transform .18s ease, box-shadow .18s ease;
}
.bdcb-nudge:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.06); }
.bdcb-left .bdcb-nudge { right: auto; left: 2px; }
.bdcb-nudge-txt {
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bdcb-nudge-x {
    position: absolute;
    top: 6px; right: 8px;
    width: 20px; height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: #9aa5b1;
    border-radius: 50%;
}
.bdcb-nudge-x:hover { color: #4b5563; background: rgba(0,0,0,.05); }
/* Codina del fumetto verso il pallino */
.bdcb-nudge::after {
    content: '';
    position: absolute;
    bottom: -5px; right: 26px;
    width: 12px; height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 3px 3px 6px rgba(0,0,0,.05);
}
.bdcb-left .bdcb-nudge::after { right: auto; left: 26px; }
@keyframes bdcb-nudge-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Pannello chat */
.bdcb-panel {
    position: absolute;
    bottom: 74px;
    right: 0;
    width: 370px;
    max-width: calc(100vw - 40px);
    height: 560px;
    max-height: calc(100vh - 110px);
    background: var(--bdcb-bg);
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bdcb-pop .2s ease;
}
.bdcb-left .bdcb-panel { right: auto; left: 0; }
.bdcb-root[hidden] { display: none; }
/* Serve la classe: il "display: flex" del lanciatore batterebbe la regola [hidden]
   del browser e il pallino resterebbe visibile sopra la chat aperta. */
.bdcb-panel[hidden], .bdcb-nudge[hidden], .bdcb-launcher[hidden] { display: none; }

@keyframes bdcb-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Header */
.bdcb-header {
    background: var(--bdcb-header);
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bdcb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex: 0 0 auto; font-size: 18px;
}
.bdcb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bdcb-title { font-weight: 600; font-size: 15px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Icone header piatte (niente riquadro), un po' più grandi; leggero feedback al passaggio. */
.bdcb-hbtn {
    background: transparent;
    color: #fff; border: none; cursor: pointer;
    border-radius: 8px; padding: 4px 6px; font-size: 20px; line-height: 1;
    display: flex; align-items: center; gap: 4px; opacity: .9;
}
.bdcb-hbtn:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* Messaggi */
.bdcb-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bdcb-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bdcb-msg.bot  { background: #fff; color: var(--bdcb-text); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bdcb-msg.user { background: var(--bdcb-user); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bdcb-msg a { color: inherit; text-decoration: underline; }
.bdcb-msg.bot a { color: var(--bdcb-accent); }

/* Link-CTA e bottoni rapidi */
.bdcb-cta {
    display: inline-block; margin-top: 8px;
    background: var(--bdcb-accent); color: #fff !important;
    text-decoration: none !important; padding: 9px 15px; border-radius: 50px;
    font-weight: 600; font-size: 14px;
}
/* Pulsante del prodotto DENTRO la bolla del messaggio: a tutta larghezza sotto il testo. */
.bdcb-card-cta {
    display: block; text-align: center; margin-top: 10px;
    background: var(--bdcb-accent); color: #fff !important;
    text-decoration: none !important; padding: 10px 14px; border-radius: 50px;
    font-weight: 600; font-size: 14px;
}
.bdcb-card-cta:hover { opacity: .92; }

.bdcb-quick { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; max-width: 90%; }
.bdcb-quick button {
    background: #fff; color: var(--bdcb-accent);
    border: 1px solid var(--bdcb-accent);
    border-radius: 50px; padding: 9px 14px; cursor: pointer;
    font-size: 14px; text-align: left;
}
.bdcb-quick button:hover { background: var(--bdcb-accent); color: #fff; }

/* Indicatore "sta scrivendo" */
.bdcb-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; align-self: flex-start; }
.bdcb-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b0b7c3; animation: bdcb-blink 1.2s infinite; }
.bdcb-typing span:nth-child(2) { animation-delay: .2s; }
.bdcb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bdcb-blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* Input */
.bdcb-inputbar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eceff3; background: #fff; }
.bdcb-inputbar textarea {
    flex: 1 1 auto; resize: none; border: 1px solid #d8dee6; border-radius: 12px;
    padding: 10px 12px; font-family: inherit; font-size: 14px; max-height: 90px; line-height: 1.4;
}
.bdcb-inputbar textarea:focus { outline: none; border-color: var(--bdcb-accent); }
.bdcb-sendbtn {
    background: var(--bdcb-accent); color: #fff; border: none; border-radius: 12px;
    width: 44px; cursor: pointer; font-size: 18px; flex: 0 0 auto;
}
.bdcb-sendbtn:disabled { opacity: .5; cursor: default; }

/* Form supporto/lead nella chat */
.bdcb-form { background: #fff; border-radius: 14px; padding: 12px; align-self: stretch; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bdcb-form h4 { margin: 0 0 4px; font-size: 15px; color: var(--bdcb-text); }
.bdcb-form .bdcb-f-intro { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.bdcb-form input[type=text], .bdcb-form input[type=email], .bdcb-form textarea {
    width: 100%; border: 1px solid #d8dee6; border-radius: 10px; padding: 9px 11px;
    font-family: inherit; font-size: 14px; margin-bottom: 8px;
}
/* Niente maniglia di ridimensionamento (le lineette in basso a destra) sulla casella messaggio */
.bdcb-form textarea { resize: none; }
.bdcb-form label.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #556; margin-bottom: 8px; }
/* !important + prefisso .bdcb-root: i temi WordPress spesso hanno un "button:hover"
   che diventa blu; qui lo blocchiamo. Al passaggio del mouse resta rosso, solo più scuro. */
.bdcb-root .bdcb-form button,
.bdcb-root .bdcb-sendbtn {
    background: var(--bdcb-accent) !important; color: #fff !important;
    transition: filter .15s ease;
}
.bdcb-form button { width: 100%; border: none; border-radius: 50px; padding: 11px; font-weight: 600; cursor: pointer; }
.bdcb-root .bdcb-form button:hover, .bdcb-root .bdcb-form button:focus, .bdcb-root .bdcb-form button:active,
.bdcb-root .bdcb-sendbtn:hover, .bdcb-root .bdcb-sendbtn:focus, .bdcb-root .bdcb-sendbtn:active {
    background: var(--bdcb-accent) !important; color: #fff !important;
    filter: brightness(0.9);
}

/* WhatsApp sotto il form */
.bdcb-wa { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eceff3; }
.bdcb-wa-or { font-size: 12px; color: #6b7280; margin-bottom: 8px; text-align: center; }
.bdcb-wa-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #25D366; color: #fff !important; text-decoration: none !important;
    border-radius: 50px; padding: 11px; font-weight: 600; font-size: 14px;
}
.bdcb-wa-btn:hover { background: #1ebe5a; }
.bdcb-wa-btn svg { flex: 0 0 auto; }


/* ===== Cellulare: la chat diventa un foglio a TUTTO SCHERMO =====
   Prima il pannello era ancorato in basso con height:100vh; su iOS "100vh" è
   più alto dell'area visibile (esclude la barra indirizzi), così l'header con
   la X finiva SOPRA il bordo e non si poteva chiudere. Qui lo fissiamo in ALTO
   a tutta larghezza: header e X sempre visibili, input sempre in basso, con
   rispetto di notch/Dynamic Island (safe-area) e barra indirizzi (100dvh).
   Il JS (VisualViewport) rifinisce l'altezza quando si apre la tastiera.
   La condizione (max-height:500px) prende anche i telefoni in ORIZZONTALE
   (larghezza > 480 ma schermo basso): senza, l'header tornerebbe tagliato.
   (pointer:coarse) prende TUTTI i dispositivi touch (tablet e foldable aperti):
   così anche lì il pannello è a tutto schermo e la tastiera non copre l'input. */
@media (max-width: 480px), (max-height: 500px), (pointer: coarse) {
    .bdcb-panel {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;      /* fallback browser vecchi */
        height: 100dvh;     /* altezza dinamica: tiene conto della barra indirizzi */
        max-height: none;
        border-radius: 0;
        animation: none;    /* niente slide: l'apertura segue il viewport reale */
    }
    /* L'header libera notch/Dynamic Island e i bordi arrotondati */
    .bdcb-header {
        padding-top: calc(10px + env(safe-area-inset-top));
        padding-left: calc(12px + env(safe-area-inset-left));
        padding-right: calc(12px + env(safe-area-inset-right));
    }
    /* La barra input libera l'home-indicator in basso */
    .bdcb-inputbar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        padding-left: calc(10px + env(safe-area-inset-left));
        padding-right: calc(10px + env(safe-area-inset-right));
    }
    /* iOS INGRANDISCE (zoom) da solo quando tocchi un campo con font < 16px, e così
       tutto si sposta e il pulsante Invia finisce fuori schermo. A 16px lo zoom NON
       scatta più: il pannello resta fermo e il pulsante Invia sempre visibile.
       !important perché è un fix critico e nessun tema deve poterlo riabbassare. */
    .bdcb-inputbar textarea,
    .bdcb-form input[type=text],
    .bdcb-form input[type=email],
    .bdcb-form textarea {
        font-size: 16px !important;
    }
    /* Il pallino chiuso non deve finire sotto l'home-indicator o i bordi curvi */
    .bdcb-root { bottom: calc(20px + env(safe-area-inset-bottom)); }
    .bdcb-root.bdcb-right { right: calc(12px + env(safe-area-inset-right)); }
    .bdcb-root.bdcb-left  { left: calc(12px + env(safe-area-inset-left)); }
}

/* Errore dentro i moduli: il form resta compilato, non si perde quello che hai scritto */
.bdcb-form .bdcb-f-error {
    margin-top: 8px; font-size: 13px; color: #b32d2e;
    background: #fdf0f0; border: 1px solid #f0c8c8; border-radius: 8px; padding: 8px 10px;
}