/* ==============================================
   Floating Character Widget - Frontend Styles
   ============================================== */

.fcw-widget {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
    /* display: none is set inline, toggled by JS */
}

/* Show close button on widget hover */
.fcw-widget.fcw-is-hovered .fcw-close {
    opacity: 1;
    pointer-events: auto;
}

/* Link wrapper */
.fcw-widget a {
    pointer-events: auto;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

/* Container for character + balloon */
.fcw-container {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    vertical-align: bottom;
}

/* Character Image */
.fcw-character {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    max-width: none;
    width: auto;
    height: auto;
}

/* Balloon Wrapper - positioned relative to container */
.fcw-balloon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* Balloon Image */
.fcw-balloon {
    display: block;
    opacity: 0;
    transform: scale(0);
    transform-origin: bottom left;
    max-width: none;
    width: auto;
    height: auto;
}

/* Close Button */
.fcw-close {
    position: absolute;
    top: -10px;
    right: 10px; /* Moved 20px to the left */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: none;
}

.fcw-close:hover {
    background-color: rgba(220, 38, 38, 0.9);
}

/* ========== Animations ========== */

/* Character slide-up with bounce */
.fcw-animate-character {
    animation: fcwSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Balloon pop-in with overshoot */
.fcw-animate-balloon {
    animation: fcwPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Fade out for close */
.fcw-fade-out {
    animation: fcwFadeOut 0.4s ease forwards;
}

@keyframes fcwSlideUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    60% {
        opacity: 1;
        transform: translateY(-5%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fcwPopIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fcwFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ========== Mobile Responsiveness ========== */
@media screen and (max-width: 768px) {
    .fcw-widget {
        left: 5vw !important;
        max-width: none !important;
        width: auto !important;
    }
    
    .fcw-character {
        max-width: none !important;
        max-height: none !important;
    }
    
    .fcw-balloon {
        max-width: none !important;
        max-height: none !important;
    }
    
    .fcw-balloon-wrapper {
        max-width: none !important;
    }
    
    .fcw-close {
        /* Always visible on mobile */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex !important;
        z-index: 999999 !important;
        
        /* Size */
        width: 32px !important;
        height: 32px !important;
        font-size: 20px !important;
        
        /* Standard styling */
        background-color: rgba(0, 0, 0, 0.6) !important;
        border: 2px solid white !important;
        
        /* Standard positioning */
        right: -10px !important;
        top: -10px !important;
        left: auto !important;
    }

    /* Make balloon 30% larger relative to character on mobile */
    .fcw-animate-balloon {
        animation: fcwPopInMobile 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }
}

@keyframes fcwPopInMobile {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    70% {
        opacity: 1;
        transform: scale(1.6);
    }
    100% {
        opacity: 1;
        transform: scale(1.4);
    }
}