.esaathi-mascot-wrap {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 999997;
    width: 70px;
    height: 70px;
}

.esaathi-mascot {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 8px) scale(0.7);
    opacity: 0;
    width: 52px;
    height: 57px;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    animation: esaathiPeek 6s ease-in-out infinite;
}

@keyframes esaathiPeek {
    0% {
        opacity: 0;
        transform: translate(-50%, 10px) scale(0.7);
    }

    4% {
        opacity: 1;
        transform: translate(-50%, -36px) scale(1) rotate(-4deg);
    }

    8% {
        transform: translate(-50%, -36px) scale(1) rotate(3deg);
    }

    12% {
        transform: translate(-50%, -36px) scale(1) rotate(-2deg);
    }

    16% {
        opacity: 1;
        transform: translate(-50%, -36px) scale(1) rotate(0deg);
    }

    20% {
        opacity: 0;
        transform: translate(-50%, 10px) scale(0.7);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 10px) scale(0.7);
    }
}

/* Head — halka bob jab peek ho raha ho */
.esaathi-head {
    transform-origin: 50px 88px;
    animation: esaathiBob 1.4s ease-in-out infinite;
}

@keyframes esaathiBob {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(1.5deg) translateY(-1px);
    }
}

/* Eyes — blink every ~3s */
.esaathi-eye-open {
    animation: esaathiBlinkOpen 3s infinite;
}

.esaathi-eye-closed {
    animation: esaathiBlinkClosed 3s infinite;
    opacity: 0;
}

@keyframes esaathiBlinkOpen {
    0%, 92%, 100% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
}

@keyframes esaathiBlinkClosed {
    0%, 92%, 100% {
        opacity: 0;
    }

    95% {
        opacity: 1;
    }
}

/* Waving hand — appears beside head and waves during peek */
.esaathi-hand {
    transform-origin: 0 0;
    transform: translate(76px, 46px) rotate(0deg);
    animation: esaathiWave 1s ease-in-out infinite;
    opacity: 0;
}

.esaathi-mascot .esaathi-hand {
    animation: esaathiWave 0.9s ease-in-out infinite, esaathiHandShow 6s ease-in-out infinite;
}

@keyframes esaathiWave {
    0%, 100% {
        transform: translate(76px, 46px) rotate(0deg);
    }

    25% {
        transform: translate(76px, 46px) rotate(-22deg);
    }

    50% {
        transform: translate(76px, 46px) rotate(0deg);
    }

    75% {
        transform: translate(76px, 46px) rotate(-22deg);
    }
}

@keyframes esaathiHandShow {
    0%, 3% {
        opacity: 0;
    }

    5%, 18% {
        opacity: 1;
    }

    20%, 100% {
        opacity: 0;
    }
}

.esaathi-toggle-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #052963 0%, #0a1f4d 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(5, 41, 99, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 2px solid #cbac6f;
}

    .esaathi-toggle-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 28px rgba(5, 41, 99, 0.55);
    }

    .esaathi-toggle-btn i {
        font-size: 22px;
        line-height: 1;
        margin-bottom: 2px;
    }

.esaathi-toggle-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}