/*
 * Container esterno launcher + tooltip
 */
#custom-vf-launcher-container {
    position: fixed;
    right: 1.8rem;
    bottom: 1.8rem;
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

    #custom-vf-launcher-container.custom-vf-launcher-ready {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.18s ease;
    }

/*
 * Launcher custom
 */
#custom-vf-launcher {
    width: 7rem;
    height: 7rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: linear-gradient(135deg, #6300ff 0%, #8b06a2 55%, #a20647 100%);
    box-shadow: rgba(0, 0, 0, 0.36) 0.13rem 0.19rem 0.4rem;
    transition: width 0.22s ease, height 0.22s ease, transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease;
}

    #custom-vf-launcher:hover,
    #custom-vf-launcher:focus,
    #custom-vf-launcher:active {
        border-radius: 50%;
        transform: scale(1.04);
        outline: none;
    }

    /*
 * Desktop: launcher compatto quando la chat è aperta
 */
    #custom-vf-launcher.custom-vf-launcher-compact {
        width: 4rem;
        height: 4rem;
        box-shadow: rgba(0, 0, 0, 0.28) 0.1rem 0.14rem 0.3rem;
    }

    /*
 * Mobile: launcher nascosto quando la chat è aperta
 */
    #custom-vf-launcher.custom-vf-launcher-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #custom-vf-launcher .custom-vf-launcher-icon {
        display: block;
        width: 7rem;
        height: 7rem;
        background: url('/assets/images/icona-chatbot.svg') no-repeat center center;
        background-size: cover;
        pointer-events: none;
        transition: width 0.22s ease, height 0.22s ease;
    }

    #custom-vf-launcher.custom-vf-launcher-compact .custom-vf-launcher-icon {
        width: 4rem;
        height: 4rem;
    }

/*
 * Tooltip separato dal launcher
 *
 * Importante:
 * display:none evita il flicker iniziale.
 * Il tooltip appare solo quando il JS aggiunge custom-vf-tooltip-ready
 * e solo se non è presente custom-vf-tooltip-closed.
 */
#custom-vf-launcher-container .custom-vf-launcher-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(7rem + 0.8rem);
    background: linear-gradient(90deg, #6300ff 0%, #8b06a2 100%);
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 1021;
    pointer-events: auto;
    animation: customVfTooltipIn 0.25s ease-out;
}

#custom-vf-launcher-container.custom-vf-launcher-ready.custom-vf-tooltip-ready:not(.custom-vf-tooltip-closed) .custom-vf-launcher-tooltip {
    display: flex;
}

/*
 * Freccia centrata sul launcher da 7rem:
 * 7rem / 2 = 3.5rem
 */
#custom-vf-launcher-container .custom-vf-launcher-tooltip::after {
    content: "";
    position: absolute;
    right: calc(3.5rem - 6px);
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #8b06a2;
    transform: rotate(45deg);
    pointer-events: none;
}

#custom-vf-launcher-container .custom-vf-launcher-tooltip span {
    position: relative;
    z-index: 1;
}

#custom-vf-launcher-container .custom-vf-launcher-tooltip-close {
    position: relative;
    z-index: 3;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
}

    #custom-vf-launcher-container .custom-vf-launcher-tooltip-close:hover {
        opacity: 1;
    }

/*
 * Quando l'utente chiude il tooltip, non lo mostriamo più.
 */
#custom-vf-launcher-container.custom-vf-tooltip-closed .custom-vf-launcher-tooltip {
    display: none !important;
}

@keyframes customVfTooltipIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }

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

/*
 * Anti-flicker Voiceflow
 */
voiceflow-chat,
#voiceflow-chat {
    opacity: 0 !important;
    visibility: hidden !important;
}

    voiceflow-chat.vf-ready,
    #voiceflow-chat.vf-ready {
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.18s ease !important;
    }

/*
 * Mobile
 */
@media (max-width: 480px) {
    #custom-vf-launcher-container {
        right: 1.4rem;
        bottom: 1.4rem;
    }

    #custom-vf-launcher {
        width: 6rem;
        height: 6rem;
    }

        /*
     * Su mobile la compact non riduce il launcher.
     * Quando la chat è aperta, il JS usa custom-vf-launcher-hidden.
     */
        #custom-vf-launcher.custom-vf-launcher-compact {
            width: 6rem;
            height: 6rem;
        }

            #custom-vf-launcher .custom-vf-launcher-icon,
            #custom-vf-launcher.custom-vf-launcher-compact .custom-vf-launcher-icon {
                width: 6rem;
                height: 6rem;
            }

    #custom-vf-launcher-container .custom-vf-launcher-tooltip {
        bottom: calc(6rem + 0.7rem);
        right: 0;
        font-size: 13px;
        padding: 9px 11px;
    }

        /*
     * Freccia centrata sul launcher mobile da 6rem:
     * 6rem / 2 = 3rem
     */
        #custom-vf-launcher-container .custom-vf-launcher-tooltip::after {
            right: calc(3rem - 6px);
        }
}