/* Prueba visual reversible: KP abre el chat y asoma por detrás en tablet/escritorio. */
@media (min-width: 768px) and (min-height: 500px) {
    body.krosfy-chat-mascot-preview {
        /* Reserva espacio sobre el chat para que la mascota no quede fuera de pantalla. */
        --chat--window--height: min(500px, calc(100dvh - 220px));
    }

    .krosfy-chat-mascot {
        position: fixed;
        z-index: 9998;
        width: 144px;
        height: 112px;
        overflow: hidden;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 180ms ease, transform 220ms ease, visibility 180ms ease;
        filter: drop-shadow(0 4px 7px rgba(14, 30, 48, 0.25));
    }

    .krosfy-chat-mascot.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .krosfy-chat-mascot__sprite {
        display: block;
        width: 144px;
        height: 156px;
        background-image: url('./assets/krosfy-chat-mascot-atlas.png');
        background-repeat: no-repeat;
        background-size: 1152px 1716px;
        image-rendering: auto;
    }

    .chat-window-wrapper.krosfy-mascot-closed .chat-window-toggle,
    .chat-window-wrapper.krosfy-mascot-opening .chat-window-toggle {
        position: relative;
        width: 120px;
        height: 130px;
        background: transparent !important;
        border-radius: 0;
        overflow: visible;
        filter: drop-shadow(0 4px 7px rgba(14, 30, 48, 0.28));
    }

    .chat-window-wrapper.krosfy-mascot-closed .chat-window-toggle > svg,
    .chat-window-wrapper.krosfy-mascot-opening .chat-window-toggle > svg {
        display: none;
    }

    .chat-window-wrapper.krosfy-mascot-closed .krosfy-chat-launcher-sprite,
    .chat-window-wrapper.krosfy-mascot-opening .krosfy-chat-launcher-sprite {
        display: block;
    }

    .chat-window-wrapper.krosfy-mascot-closed .chat-window-toggle:hover,
    .chat-window-wrapper.krosfy-mascot-closed .chat-window-toggle:focus-visible {
        transform: translateY(-5px);
    }

    .chat-window-wrapper.krosfy-mascot-closed .chat-window-toggle:focus-visible {
        outline: 3px solid var(--chat--color--primary);
        outline-offset: 2px;
        border-radius: 12px;
    }

    .chat-window-wrapper.krosfy-mascot-closed .krosfy-chat-speech {
        display: block;
        position: absolute;
        right: calc(100% - 7px);
        top: 2px;
        width: max-content;
        max-width: 190px;
        padding: 10px 14px;
        border: 2px solid #0c97c8;
        border-radius: 18px;
        background: #fff;
        color: #174157;
        box-shadow: 0 8px 24px rgba(14, 30, 48, .18);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        white-space: normal;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate(6px, 8px) scale(.95);
        transform-origin: bottom right;
        transition: opacity 160ms ease, transform 180ms ease, visibility 160ms ease;
    }

    .chat-window-wrapper.krosfy-mascot-closed .krosfy-chat-speech::after {
        content: '';
        position: absolute;
        right: -9px;
        bottom: 17px;
        width: 15px;
        height: 15px;
        border-top: 2px solid #0c97c8;
        border-right: 2px solid #0c97c8;
        background: #fff;
        transform: rotate(45deg);
    }

    .chat-window-wrapper.krosfy-mascot-closed:not(.krosfy-mascot-opening) .chat-window-toggle:hover .krosfy-chat-speech,
    .chat-window-wrapper.krosfy-mascot-closed:not(.krosfy-mascot-opening) .chat-window-toggle:focus-visible .krosfy-chat-speech {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0) scale(1);
    }

    .chat-window-wrapper.krosfy-mascot-opening .chat-window-toggle {
        animation: krosfy-chat-pull 520ms ease-out both;
    }

    .chat-window-wrapper.krosfy-mascot-enabled .chat-window-transition-enter-active {
        transition: transform 520ms cubic-bezier(.18,.82,.25,1), opacity 360ms ease;
    }

    .chat-window-wrapper.krosfy-mascot-enabled .chat-window-transition-enter-from {
        transform: translateY(100px) scale(.94);
        opacity: 0;
    }

    @keyframes krosfy-chat-pull {
        0% { transform: translateY(0); }
        45% { transform: translateY(-13px) rotate(-4deg); }
        100% { transform: translateY(0); }
    }
}

.krosfy-chat-launcher-sprite {
    display: none;
    width: 120px;
    height: 130px;
    background-image: url('./assets/krosfy-chat-mascot-atlas.png');
    background-repeat: no-repeat;
    background-size: 960px 1430px;
}

.krosfy-chat-speech {
    display: none;
}

@media (max-width: 767px), (max-height: 499px) {
    .krosfy-chat-mascot {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .krosfy-chat-mascot {
        transition: none;
    }

    .chat-window-wrapper.krosfy-mascot-opening .chat-window-toggle {
        animation: none;
    }

    .chat-window-wrapper.krosfy-mascot-enabled .chat-window-transition-enter-active {
        transition: none;
    }

    .chat-window-wrapper.krosfy-mascot-closed .krosfy-chat-speech {
        transition: none;
    }
}