/* =========================================================
   CHATBOT - DOTT. GIUSEPPE ISEO
   ========================================================= */

#chatbot-widget {
    position: fixed;
    right: 25px;
    bottom: 35px;
    z-index: 1030;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   LAUNCHER + NUVOLA
   ========================================================= */

#chatbot-launcher {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
}


/* =========================================================
   NUVOLA INVITO
   ========================================================= */

#chatbot-invite {
    position: relative;

    width: 185px;

    padding: 13px 15px;
    margin-bottom: 5px;

    background: #ffffff;
    color: #34495e;

    border-radius: 15px;

    font-size: 13px;
    line-height: 1.45;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.12);

    animation:
        chatbotInviteIn 0.6s ease;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}


/* codina fumetto */

#chatbot-invite::after {
    content: "";

    position: absolute;

    right: -8px;
    bottom: 16px;

    width: 16px;
    height: 16px;

    background: #ffffff;

    transform: rotate(45deg);

    border-radius: 2px;
}


/* nuvola nascosta durante lo scroll */

#chatbot-invite.chatbot-invite-hidden {
    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    pointer-events: none;
}


/* comparsa iniziale */

@keyframes chatbotInviteIn {

    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   PULSANTE APERTURA
   ========================================================= */

#chatbot-toggle {
    width: 100px;
    height: 110px;

    flex: 0 0 100px;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    overflow: visible;

    cursor: pointer;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    box-shadow: none;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


/* personaggio */

#chatbot-toggle img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
}

/* hover */
#chatbot-toggle:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

#chatbot-toggle:hover img {
    filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.22));
}

/* =========================================================
   FINESTRA CHAT
   ========================================================= */

#chatbot-window {
    width: 440px;
    height: 600px;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    display: none;
    flex-direction: column;

    box-shadow:
        0 20px 65px rgba(0, 0, 0, 0.20);
}


/* chat aperta */

.chatbot-open #chatbot-window {
    display: flex;
}


/* quando la chat è aperta
   nascondiamo personaggio + nuvoletta */

.chatbot-open #chatbot-launcher {
    display: none;
}


/* =========================================================
   HEADER
   ========================================================= */

#chatbot-header {
    flex: 0 0 auto;

    min-height: 52px;

    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(135deg,
            #245784,
            #08a7cf);

    color: white;
}


/* informazioni header */

.chatbot-header-info {
    display: flex;
    align-items: center;

    gap: 11px;
}


/* =========================================================
   AVATAR HEADER
   ========================================================= */

.chatbot-avatar {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        2px solid rgba(255, 255, 255, 0.95);

    overflow: hidden;
}


/* immagine avatar */

.chatbot-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   TESTO HEADER
   ========================================================= */

.chatbot-header-text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.chatbot-title {
    font-size: 17px;
    font-weight: 700;

    line-height: 1.2;
}


.chatbot-subtitle {
    display: flex;
    align-items: center;

    gap: 6px;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.92);
}


/* =========================================================
   PALLINO ONLINE
   ========================================================= */

.chatbot-status-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #54e68a;

    box-shadow:
        0 0 0 3px rgba(84, 230, 138, 0.18);
}


/* =========================================================
   PULSANTE CHIUDI
   ========================================================= */

#chatbot-close {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


#chatbot-close:hover {
    background:
        rgba(255, 255, 255, 0.22);

    transform: rotate(90deg);
}


/* =========================================================
   AREA MESSAGGI
   ========================================================= */

#chatbot-messages {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding: 20px 18px;

    background:
        linear-gradient(180deg,
            #f7fbfd 0%,
            #ffffff 100%);
}


/* scrollbar */

#chatbot-messages::-webkit-scrollbar {
    width: 5px;
}


#chatbot-messages::-webkit-scrollbar-thumb {
    background: #d2e3e9;

    border-radius: 10px;
}


/* =========================================================
   MESSAGGIO GENERALE
   ========================================================= */

.chatbot-message {
    display: flex;

    margin-bottom: 18px;

    animation:
        chatbotMessageIn 0.2s ease;
}


@keyframes chatbotMessageIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   MESSAGGIO BOT
   ========================================================= */

.chatbot-message-bot {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    width: 100%;
}


/* avatar + nome */

.chatbot-bot-info {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-left: 2px;
    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 500;

    color: #71808c;
}


/* =========================================================
   AVATAR BOT
   ========================================================= */

.chatbot-bot-avatar {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf8fc;

    border:
        1px solid #c9eaf2;

    overflow: hidden;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05);
}


/* immagine avatar */

.chatbot-bot-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   FUMETTO BOT
   ========================================================= */

.chatbot-message-bot .chatbot-message-content {

    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;

    border-radius: 18px;

    font-size: 15px;
    line-height: 1.55;

    white-space: pre-line;

    color: #34495e;

    background: #ffffff;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   MESSAGGIO UTENTE
   ========================================================= */

.chatbot-message-user {
    display: flex;

    justify-content: flex-end;
}


.chatbot-message-user .chatbot-message-content {

    max-width: 78%;

    box-sizing: border-box;

    padding: 13px 15px;

    border-radius: 18px;
    border-top-right-radius: 6px;

    background: #0798c9;

    color: white;

    font-size: 15px;
    line-height: 1.55;

    white-space: pre-line;

    box-shadow:
        0 4px 12px rgba(7, 152, 201, 0.18);
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

#chatbot-quick-actions {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    padding: 11px 14px;

    background: #ffffff;

    border-top:
        1px solid #edf2f4;
}


/* pulsanti */

.chatbot-quick-button {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid #cce8f0;

    background: #f8fcfd;

    color: #087fa8;

    border-radius: 20px;

    padding: 9px 10px;

    font-size: 13px;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}


.chatbot-quick-button:hover {
    background: #eaf8fc;

    border-color: #9ed8e8;

    transform: translateY(-1px);
}


.chatbot-quick-button:active {
    transform: scale(0.97);
}


/* =========================================================
   FORM
   ========================================================= */

#chatbot-form {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        11px 14px 14px;

    background: white;

    border-top:
        1px solid #edf2f4;
}


/* =========================================================
   INPUT
   ========================================================= */

#chatbot-input {
    flex: 1;

    min-width: 0;

    height: 51px;

    resize: none;

    border:
        1.5px solid #cfe5eb;

    border-radius: 25px;

    padding:
        13px 17px;

    outline: none;

    font-family: inherit;
    font-size: 15px;

    color: #34495e;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#chatbot-input::placeholder {
    color: #8c9aa3;
}


#chatbot-input:focus {
    border-color: #0798c9;

    box-shadow:
        0 0 0 3px rgba(7, 152, 201, 0.10);
}


/* =========================================================
   PULSANTE INVIO
   ========================================================= */

#chatbot-send {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background: #0798c9;

    color: white;

    font-size: 23px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


#chatbot-send:hover {
    background: #245784;

    transform: scale(1.04);
}


#chatbot-send:disabled {
    opacity: 0.5;

    cursor: default;

    transform: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #chatbot-launcher {
        transition:
            opacity 0.35s ease,
            transform 0.35s ease,
            visibility 0.35s ease;
    }

    #chatbot-launcher.chatbot-launcher-hidden-mobile {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(20px);
    }

    #chatbot-launcher {
    gap: 0px;
}

#chatbot-toggle {
    width: 82px;
    height: 92px;
    flex: 0 0 82px;
    margin-left: 0;

    position: relative;
    left: 0px;   /* più a destra */
    top: 10px;    /* più in basso */
}

    /* launcher ancorato a destra */

    #chatbot-launcher {
        width: 100%;

        justify-content: flex-end;
    }


    /* personaggio */

#chatbot-toggle {
    width: 82px;
    height: 92px;
    flex: 0 0 82px;
    margin-left: 0;

    position: relative;
    left: 10px;   /* più a destra */
    top: 10px;    /* più in basso */
}
    /* nuvoletta */

    #chatbot-invite {
        width: 165px;

        font-size: 12px;

        padding: 11px 13px;
    }


    /* finestra */

    #chatbot-window {
        width: 100%;
        margin-left: 13px;

        height:
            min(620px,
                calc(100vh - 20px));

        border-radius: 22px;
    }


    /* messaggi bot */

    .chatbot-message-bot .chatbot-message-content {

        width: 100%;

        max-width: none;
    }


    /* messaggi utente */

    .chatbot-message-user .chatbot-message-content {

        max-width: 82%;
    }


    /* quick actions */

    #chatbot-quick-actions {
        gap: 7px;

        padding: 9px 10px;
    }


    .chatbot-quick-button {
        font-size: 12px;

        padding: 9px 6px;
    }

        .back-to-top {
        bottom: max(
            20px,
            env(safe-area-inset-bottom),
            var(--back-to-top-clearance, 0px)
        );
    }
}


/* =========================================================
   MOBILE MOLTO PICCOLI
   ========================================================= */

@media (max-width: 380px) {

    #chatbot-launcher {
    gap: 0px;
}

    #chatbot-invite {
        width: 145px;

        padding: 10px 11px;

        font-size: 11px;

        line-height: 1.4;
    }

}


/* =========================================================
   ACCESSIBILITÀ - RIDUZIONE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #chatbot-invite,
    .chatbot-message {

        animation: none;
        transition: none;
    }


    #chatbot-toggle,
    #chatbot-close,
    #chatbot-send,
    .chatbot-quick-button {

        transition: none;
    }

}

chatbot-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f1f7f3;
    color: #2f7d4a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.chatbot-maps-link:hover {
    background: #e3f1e8;
    transform: translateY(-1px);
}

.chatbot-maps-link span {
    text-decoration: none;
    text-underline-offset: 2px;
}

a.chatbot-maps-link{
    text-decoration: none !important;
}