.mimi-peek {
    position: fixed;
    width: 512px;
    transition: transform 1s ease-in-out, right 1s ease-in-out, left 1s ease-in-out, top 1s ease-in-out;
    z-index: 9999;
}

/* Right Peek (Starts Off-Screen) */
.mimi-peek.right {
    right: -550px;
    transform: rotate(-55deg); /* Correct rotation from the start */
}

.mimi-peek.right.active {
    right: -220px;
}

/* Left Peek (Starts Off-Screen) */
.mimi-peek.left {
    left: -550px;
    transform: rotate(55deg); /* Correct rotation from the start */
}

.mimi-peek.left.active {
    left: -220px;
}
.mimi-peek {
    opacity: 0;  /* Start hidden */
    pointer-events: none;  /* Prevent interaction while hidden */
    transition: opacity 0.5s ease-in-out;
}

.mimi-peek.initialized {
    opacity: 1;
    pointer-events: auto;
}

/* Mimi's Wave Animation */
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(1deg); }
}

.mimi-face img {
    animation: wave 2s infinite ease-in-out;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .mimi-peek {
        width: 180px;
    }

    .mimi-peek.right {
        right: -190px;
    }

    .mimi-peek.right.active {
        right: -80px;
    }

    .mimi-peek.left {
        left: -190px;
    }

    .mimi-peek.left.active {
        left: -80px;
    }
}

/* Add this new media query for very small screens */
@media (max-width: 480px) {
    .mimi-peek {
        width: 140px;
    }

    .mimi-peek.right {
        right: -150px;
    }

    .mimi-peek.right.active {
        right: -60px;
    }

    .mimi-peek.left {
        left: -150px;
    }

    .mimi-peek.left.active {
        left: -60px;
    }
}

/* Add this to handle overflow at the root level */
html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}