/* =========================================================
   FIXBOT — ADVANCED LAYERED ANIMATION
   =========================================================

   DESKTOP CALIBRATION PRESERVED

   body       → body.png
   head       → head.png
   eyesOpen   → eyesOpen.png
   eyesClose  → eyesClose.png
   hand       → hand.png
   LeftHand   → LeftHand.png
   base       → base_final.png
   master     → chatbot.png

   IMPORTANT:
   HEAD + EYES ARE NOW ONE GROUP.

   ========================================================= */


/* =========================================================
   1. CHAT TOGGLE
   ========================================================= */

.chat-toggle {

    width: 90px !important;
    height: 90px !important;

    padding: 0 !important;
    margin: 0;

    border: none;
    outline: none;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 99999;

}


/* =========================================================
   2. CHARACTER WRAPPER
   ========================================================= */

.chat-toggle .fixbot-character-wrap {

    position: relative;

    width: 90px;
    height: 90px;

    display: block;

    overflow: visible;

    transform-origin: 50% 82%;

    will-change: transform;

    animation:
        fixbotWholeRobot 6.8s cubic-bezier(.45, .05, .55, .95) infinite;

}


/* =========================================================
   3. COMMON LAYER
   ========================================================= */

.chat-toggle .fixbot-layer {

    position: absolute;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain;

    display: block;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

}


/* =========================================================
   4. MASTER REFERENCE
   IMAGE → chatbot.png
   ========================================================= */

.chat-toggle .fixbot-master {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100px !important;
    height: 100px !important;

    z-index: 1;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

}


/* =========================================================
   5. BODY
   IMAGE → body.png

   DESKTOP POSITION — PRESERVED
   left: 52%
   top: 72%
   width: 38px
   height: 50px
   ========================================================= */

.chat-toggle .fixbot-body {

    left: 52%;
    top: 72%;

    width: 38px !important;
    height: 50px !important;

    z-index: 3;

    transform:
        translate(-50%, -50%);

    transform-origin: 50% 50%;

    will-change: transform;

}


/* =========================================================
   BODY BREATHING
   ========================================================= */

@keyframes fixbotBodyBreathing {

    0%,
    100% {

        transform:
            translate(-50%, -50%) scale(1);

    }

    50% {

        transform:
            translate(-50%, -50%) scale(1.018);

    }

}


.chat-toggle .fixbot-body {

    animation:
        fixbotBodyBreathing 3.8s ease-in-out infinite;

}


/* =========================================================
   6. HEAD + EYES GROUP
   ---------------------------------------------------------
   THIS IS THE IMPORTANT FIX.
   ========================================================= */

.chat-toggle .fixbot-head-group {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 5;

    pointer-events: none;

    transform-origin: 52% 35%;

    will-change: transform;

    animation:
        fixbotHeadGroupMotion 6.8s ease-in-out infinite;

}


/* =========================================================
   7. HEAD
   IMAGE → head.png

   Position is preserved INSIDE group.
   ========================================================= */

.chat-toggle .fixbot-head {

    left: 52%;
    top: 35%;

    width: 52px !important;
    height: 52px !important;

    z-index: 5;

    transform:
        translate(-50%, -50%);

}


/* =========================================================
   8. HEAD GROUP MOVEMENT
   ---------------------------------------------------------
   Eyes automatically follow because they are children
   of the same group.
   ========================================================= */

@keyframes fixbotHeadGroupMotion {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0) rotate(0deg);

    }

    18% {

        transform:
            translate3d(-0.5px, -0.2px, 0) rotate(-0.35deg);

    }

    38% {

        transform:
            translate3d(0.4px, -0.8px, 0) rotate(0.45deg);

    }

    55% {

        transform:
            translate3d(0.7px, -0.2px, 0) rotate(0.25deg);

    }

    73% {

        transform:
            translate3d(-0.5px, 0.1px, 0) rotate(-0.4deg);

    }

    88% {

        transform:
            translate3d(0, 0, 0) rotate(0.15deg);

    }

}


/* =========================================================
   9. EYES
   IMAGE → eyesOpen.png
   IMAGE → eyesClose.png

   DESKTOP POSITION — PRESERVED
   left: 52%
   top: 39%
   width: 27px
   height: 20px
   ========================================================= */

.chat-toggle .fixbot-eyes {

    left: 52%;
    top: 39%;

    width: 27px !important;
    height: 20px !important;

    z-index: 6;

    transform:
        translate(-50%, -50%);

    object-fit: contain;

}


/* =========================================================
   OPEN EYES
   IMAGE → eyesOpen.png
   ========================================================= */

.chat-toggle .eyes-open {

    opacity: 1;

}


/* =========================================================
   CLOSED EYES
   IMAGE → eyesClose.png
   ========================================================= */

.chat-toggle .eyes-close {

    opacity: 0;

}


/* =========================================================
   10. BLINK
   ---------------------------------------------------------
   JS will add .fixbot-blinking.
   No JS inline opacity.
   ========================================================= */

.chat-toggle .eyes-open,
.chat-toggle .eyes-close {

    transition:
        opacity .07s ease;

}


.chat-toggle.fixbot-blinking .eyes-open {

    opacity: 0;

}


.chat-toggle.fixbot-blinking .eyes-close {

    opacity: 1;

}


/* =========================================================
   11. WAVE HAND
   IMAGE → LeftState.png

   DESKTOP POSITION — PRESERVED
   left: 21%
   top: 54%
   width: 27px
   height: 60px
   ========================================================= */

.chat-toggle .fixbot-hand {

    left: 21%;
    top: 54%;

    width: 27px !important;
    height: 60px !important;

    z-index: 7;

    transform:
        translate(-50%, -50%);

    transform-origin: 78% 70%;

    will-change: transform;

}


/* =========================================================
   12. HAND WAVE
   ========================================================= */

@keyframes fixbotWaveHand {

    0% {

        transform:
            translate(-50%, -50%) rotate(0deg);

    }

    20% {

        transform:
            translate(-50%, -50%) rotate(-8deg);

    }

    40% {

        transform:
            translate(-50%, -50%) rotate(9deg);

    }

    60% {

        transform:
            translate(-50%, -50%) rotate(-7deg);

    }

    80% {

        transform:
            translate(-50%, -50%) rotate(5deg);

    }

    100% {

        transform:
            translate(-50%, -50%) rotate(0deg);

    }

}


.chat-toggle.fixbot-hand-waving .fixbot-hand {

    animation:
        fixbotWaveHand 1.5s ease-in-out both;

}


/* =========================================================
   13. LEFT HAND
   IMAGE → RightState.png

   DESKTOP POSITION — PRESERVED
   left: 73%
   top: 76%
   width: 17px
   height: 60px
   ========================================================= */

.chat-toggle .fixbot-hand-two {

    left: 73%;
    top: 76%;

    width: 17px !important;
    height: 60px !important;

    z-index: 8;

    transform:
        translate(-50%, -50%);

    transform-origin: 50% 20%;

}


/* =========================================================
   LEFT HAND FOLLOW
   ========================================================= */

@keyframes fixbotLeftHandFollow {

    0%,
    100% {

        transform:
            translate(-50%, -50%) rotate(0deg);

    }

    50% {

        transform:
            translate(calc(-50% + .5px),
                calc(-50% - .6px)) rotate(.8deg);

    }

}


.chat-toggle .fixbot-hand-two {

    animation:
        fixbotLeftHandFollow 3.8s ease-in-out infinite;

}


/* =========================================================
   14. BASE
   IMAGE → base_final.png

   DESKTOP POSITION — PRESERVED
   left: 52%
   top: 104%
   width: 46px
   height: 100px
   ========================================================= */

.chat-toggle .fixbot-base {

    left: 52%;
    top: 100%;

    width: 46px !important;
    height: 100px !important;

    z-index: 2;

    transform:
        translate(-50%, -50%);

    transform-origin: 50% 20%;

    will-change: transform, filter;

}


/* =========================================================
   15. BASE PULSE
   ========================================================= */

@keyframes fixbotBasePulse {

    0%,
    100% {

        transform:
            translate(-50%, -50%) scale(1);

        filter:
            drop-shadow(0 0 2px rgba(0, 174, 255, .20));

    }

    50% {

        transform:
            translate(-50%, -50%) scale(1.035);

        filter:
            drop-shadow(0 0 8px rgba(0, 174, 255, .50));

    }

}


.chat-toggle .fixbot-base {

    animation:
        fixbotBasePulse 2.8s ease-in-out infinite;

}


/* =========================================================
   16. WHOLE ROBOT MOVEMENT
   ========================================================= */

@keyframes fixbotWholeRobot {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0) rotate(0deg) scale(1);

    }

    20% {

        transform:
            translate3d(-0.3px, -1px, 0) rotate(-0.15deg) scale(1.004);

    }

    40% {

        transform:
            translate3d(0.2px, -2.5px, 0) rotate(.20deg) scale(1.008);

    }

    60% {

        transform:
            translate3d(0.4px, -1px, 0) rotate(.10deg) scale(1.004);

    }

    80% {

        transform:
            translate3d(-0.4px, -.5px, 0) rotate(-.20deg) scale(1.002);

    }

}

/* =========================================================
   17. GREETING SPEECH CONTAINER
   ========================================================= */

.chat-toggle .fixbot-speech {
    position: absolute;
    right: 26px;
    bottom: 76px;
    width: 70px;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    
    /* Default initial transform: Left side 10 degree angle (-10deg) */
    transform: translateY(10px) rotate(-10deg) scale(0.85);

    /* Robot ke uthe hue haath wali jagah (Bottom-Left) anchor point */
    transform-origin: 20% 90%;
}

/* =========================================================
   GREETING PNG IMAGE
   ========================================================= */

.chat-toggle .fixbot-greeting-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   GREETING SHOW & HIDE
   ========================================================= */

.chat-toggle .fixbot-speech.fixbot-speech-show {
    visibility: visible;
    animation:
        fixbotGreetingPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        fixbotOppositeSway 2.4s ease-in-out 0.4s infinite alternate;
}

.chat-toggle .fixbot-speech.fixbot-speech-hide {
    animation:
        fixbotGreetingImageOut 0.3s ease-in forwards;
}

/* =========================================================
   ANIMATIONS (BASE: -10 DEGREE LEFT-SIDE ANGLE)
   ========================================================= */

/* Entrance: Pop-in hokar seedha Left side -10 degree par rukega */
@keyframes fixbotGreetingPopIn {
    0% {
        opacity: 0;
        transform: translateY(10px) rotate(-6deg) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg) scale(1);
    }
}

/* Exit: -10 degree angle me hi fade out hoga */
@keyframes fixbotGreetingImageOut {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(8px) rotate(-10deg) scale(0.9);
    }
}

/* Continuous Sway: Left side (-10deg) base point se hilega */
@keyframes fixbotOppositeSway {
    0% {
        /* Default Base: -10 degree (Left side tilt) */
        transform: translateY(0) rotate(-10deg);
    }
    35% {
        /* Halka sa aage sway */
        transform: translateY(-2px) rotate(-7.5deg);
    }
    70% {
        /* Halka sa wapas tilt */
        transform: translateY(-1px) rotate(-9deg);
    }
    100% {
        /* Peak sway movement */
        transform: translateY(-3px) rotate(-6deg);
    }
}

/* =========================================================
   18. CHAT OPEN
   ========================================================= */

/* =========================================================
   18. CHAT OPEN
   ========================================================= */

.chat-toggle.fixbot-chat-open {

    pointer-events: none;

}


.chat-toggle.fixbot-chat-open .fixbot-character-wrap {

    animation-play-state: paused;

}


.chat-toggle.fixbot-chat-open .fixbot-greeting,
.chat-toggle.fixbot-chat-open .fixbot-speech {

    opacity: 0 !important;

    animation: none !important;

}


/* =========================================================
   19. DESKTOP
   ---------------------------------------------------------
   DO NOT CHANGE CURRENT DESKTOP POSITION
   ========================================================= */

@media (min-width: 501px) {

    .chat-toggle {

        width: 90px !important;
        height: 90px !important;

    }

    .chat-toggle .fixbot-character-wrap {

        width: 90px;
        height: 90px;

    }

    .chat-toggle .fixbot-body {

        left: 52%;
        top: 72%;

        width: 38px !important;
        height: 50px !important;

    }

    .chat-toggle .fixbot-head {

        left: 52%;
        top: 35%;

        width: 52px !important;
        height: 52px !important;

    }

    .chat-toggle .fixbot-eyes {

        left: 52%;
        top: 39%;

        width: 27px !important;
        height: 20px !important;

    }

    .chat-toggle .fixbot-hand {

        left: 21%;
        top: 54%;

        width: 27px !important;
        height: 60px !important;

    }

    .chat-toggle .fixbot-hand-two {

        left: 79%;
        top: 76%;

        width: 17px !important;
        height: 60px !important;

    }

    .chat-toggle .fixbot-base {

        left: 52%;
        top: 104%;

        width: 46px !important;
        height: 100px !important;

    }

}


/* =========================================================
   20. MOBILE
   ---------------------------------------------------------
   Desktop is NOT affected.
   ========================================================= */

@media (max-width: 500px) {

    .chat-toggle {

        width: 68px !important;
        height: 68px !important;

    }


    .chat-toggle .fixbot-character-wrap {

        width: 68px;
        height: 68px;

    }


    /* BODY → body.png */

    .chat-toggle .fixbot-body {

        left: 52%;
        top: 72%;

        width: 30px !important;
        height: 39px !important;

    }


    /* HEAD → head.png */

    .chat-toggle .fixbot-head {

        left: 52%;
        top: 35%;

        width: 40px !important;
        height: 40px !important;

    }


    /* EYES → eyesOpen / eyesClose */

    .chat-toggle .fixbot-eyes {

        left: 52%;
        top: 39%;

        width: 22px !important;
        height: 16px !important;

    }

    /* =========================================================
   LEFT HAND → LeftState.png
   ADVANCED WAVE
   ========================================================= */

    .chat-toggle .fixbot-hand {
        left: 21%;
        top: 54%;

        width: 27px !important;
        height: 60px !important;

        z-index: 7;

        transform:
            translate(-50%, -50%);

        transform-origin: 78% 70%;

        will-change: transform;
    }


    /* =========================================================
   HAND WAVE ANIMATION
   ========================================================= */

    @keyframes fixbotHandWaveAdvanced {

        0% {
            transform:
                translate(-50%, -50%) rotate(0deg);
        }

        12% {
            transform:
                translate(-50%, -50%) rotate(-10deg);
        }

        24% {
            transform:
                translate(-50%, -50%) rotate(12deg);
        }

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

        48% {
            transform:
                translate(-50%, -50%) rotate(10deg);
        }

        60% {
            transform:
                translate(-50%, -50%) rotate(-7deg);
        }

        72% {
            transform:
                translate(-50%, -50%) rotate(5deg);
        }

        84% {
            transform:
                translate(-50%, -50%) rotate(-2deg);
        }

        100% {
            transform:
                translate(-50%, -50%) rotate(0deg);
        }
    }


    /* JS adds this class when FixBot waves */

    .chat-toggle.fixbot-hand-waving .fixbot-hand {

        animation:
            fixbotHandWaveAdvanced 1.7s cubic-bezier(.4, 0, .2, 1) both;

    }


    /* RIGHT HAND → RightState.png */

    .chat-toggle .fixbot-hand-two {

        left: 73%;
        top: 76%;

        width: 14px !important;
        height: 48px !important;

    }


    /* BASE → base_final.png */

    .chat-toggle .fixbot-base {

        left: 52%;
        top: 104%;

        width: 36px !important;
        height: 76px !important;

    }


    /* GREETING */

    .chat-toggle .fixbot-greeting,
    .chat-toggle .fixbot-speech {

        right: 5px;

        bottom: 45px;

        max-width: 205px;

        font-size: 12px;

        padding:
            9px 12px;

    }

}


/* =========================================================
   21. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .chat-toggle .fixbot-character-wrap,
    .chat-toggle .fixbot-body,
    .chat-toggle .fixbot-head-group,
    .chat-toggle .fixbot-hand,
    .chat-toggle .fixbot-hand-two,
    .chat-toggle .fixbot-base {

        animation: none !important;

    }

}
/* =========================================================
   FIXBOT THINKING CLOUD
   EXACT REFERENCE STYLE
   3 BLUE DOTS INSIDE + 2 WHITE TAIL DOTS OUTSIDE
   ========================================================= */

.chat-toggle .fixbot-thinking {
    position: absolute;

    right: 70px;
    bottom: 80px;

    width: 46px;
    height: 30px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    background: #ffffff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 18px;

    box-shadow:
        0 8px 24px -2px rgba(10, 46, 78, 0.16),
        0 2px 8px rgba(20, 126, 234, 0.12) !important;

    opacity: 0;
    visibility: hidden;

    transform: translateY(6px) scale(0.4);

    transform-origin: bottom right;

    pointer-events: none;

    z-index: 101;
}


/* =========================================================
   CLOUD SHOW
   ========================================================= */

.chat-toggle.fixbot-thinking-active .fixbot-thinking,
.chat-toggle .fixbot-thinking.is-visible {

    visibility: visible !important;
    opacity: 1 !important;

    animation:
        fixbotMainCloudPop
        0.65s
        cubic-bezier(0.22, 1, 0.36, 1)
        0s
        forwards,

        fixbotCloudFloat
        3.2s
        ease-in-out
        0.65s
        infinite alternate;
}


/* =========================================================
   BLUE DOTS CONTAINER
   ALWAYS HORIZONTAL
   ========================================================= */

.chat-toggle .fixbot-thinking .thinking-dots {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative;

    z-index: 5;

    overflow: hidden !important;
}


/* =========================================================
   3 BLUE DOTS
   INSIDE THE BUBBLE ONLY
   ========================================================= */

.chat-toggle .fixbot-thinking .dot,
.chat-toggle .fixbot-thinking .thinking-dots i,
.chat-toggle .fixbot-thinking .thinking-dots span {

    display: block !important;

    flex: 0 0 auto !important;

    width: 5px !important;
    height: 5px !important;

    min-width: 5px !important;
    min-height: 5px !important;

    max-width: 5px !important;
    max-height: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #147eea !important;

    border-radius: 50% !important;

    box-shadow:
        0 0 4px rgba(20, 126, 234, 0.4);

    position: relative;

    transform-origin: center center;

    animation:
    fixbotClassicDotBounce
    1.6s
    cubic-bezier(0.4, 0, 0.2, 1)
    infinite;
}


/* =========================================================
   DOT TIMING
   ========================================================= */

.chat-toggle .fixbot-thinking .dot:nth-child(1),
.chat-toggle .fixbot-thinking .thinking-dots i:nth-child(1),
.chat-toggle .fixbot-thinking .thinking-dots span:nth-child(1) {

    animation-delay: -0.32s !important;
}


.chat-toggle .fixbot-thinking .dot:nth-child(2),
.chat-toggle .fixbot-thinking .thinking-dots i:nth-child(2),
.chat-toggle .fixbot-thinking .thinking-dots span:nth-child(2) {

    animation-delay: -0.16s !important;
}


.chat-toggle .fixbot-thinking .dot:nth-child(3),
.chat-toggle .fixbot-thinking .thinking-dots i:nth-child(3),
.chat-toggle .fixbot-thinking .thinking-dots span:nth-child(3) {

    animation-delay: 0s !important;
}


/* =========================================================
   WHITE TAIL DOT 1
   ========================================================= */

.chat-toggle .fixbot-thinking::before {

    content: "" !important;

    position: absolute;

    right: 6px;
    bottom: -7px;

    width: 8px;
    height: 8px;

    background: #ffffff !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 50%;

    box-shadow:
        0 4px 8px rgba(10, 46, 78, 0.12);

    transform: scale(0);

    opacity: 0;

    z-index: 1;
}


.chat-toggle.fixbot-thinking-active .fixbot-thinking::before,
.chat-toggle .fixbot-thinking.is-visible::before {

    animation:
        fixbotTailDotPop
        0.4s
        cubic-bezier(0.25, 1, 0.5, 1)
        0.18s
        forwards;
}


/* =========================================================
   WHITE TAIL DOT 2
   ========================================================= */

.chat-toggle .fixbot-thinking::after {

    content: "" !important;

    position: absolute;

    right: 1px;
    bottom: -12px;

    width: 5px;
    height: 5px;

    background: #ffffff !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 50%;

    box-shadow:
        0 3px 6px rgba(10, 46, 78, 0.10);

    transform: scale(0);

    opacity: 0;

    z-index: 1;
}


.chat-toggle.fixbot-thinking-active .fixbot-thinking::after,
.chat-toggle .fixbot-thinking.is-visible::after {

    animation:
        fixbotTailDotPop
        0.4s
        cubic-bezier(0.25, 1, 0.5, 1)
        0s
        forwards;
}


/* =========================================================
   BLUE DOT ANIMATION
   ========================================================= */

@keyframes fixbotClassicDotBounce {

    0%,
    70%,
    100% {
        transform: translateY(0) scale(0.72);
        opacity: 0.35;
    }

    35% {
        transform: translateY(-2.5px) scale(1.08);
        opacity: 1;
    }
}


/* =========================================================
   WHITE TAIL POP
   ========================================================= */

@keyframes fixbotTailDotPop {

    0% {

        opacity: 0;

        transform: scale(0);
    }

    100% {

        opacity: 1;

        transform: scale(1);
    }
}


/* =========================================================
   CLOUD POP
   ========================================================= */
@keyframes fixbotMainCloudPop {

    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.72);
    }

    60% {
        opacity: 1;
        transform: translateY(-1px) scale(1.04);
    }

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

/* =========================================================
   CLOUD FLOAT
   ========================================================= */

@keyframes fixbotCloudFloat {

    0% {

        transform: translateY(0);
    }

    100% {

        transform: translateY(-4px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .chat-toggle .fixbot-thinking {

        right: 53px;
        bottom: 58px;

        width: 26px;
        height: 25px;

        border-radius: 15px;
    }


    .chat-toggle .fixbot-thinking .thinking-dots {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }


    .chat-toggle .fixbot-thinking .dot,
    .chat-toggle .fixbot-thinking .thinking-dots i,
    .chat-toggle .fixbot-thinking .thinking-dots span {

        width: 4px !important;
        height: 4px !important;

        min-width: 4px !important;
        min-height: 4px !important;

        max-width: 4px !important;
        max-height: 4px !important;
    }


    .chat-toggle .fixbot-thinking::before {

        right: 5px;
        bottom: -6px;

        width: 6px;
        height: 6px;
    }


    .chat-toggle .fixbot-thinking::after {

        right: 0;
        bottom: -10px;

        width: 4px;
        height: 4px;
    }
}

/* =========================================================
   FIXBOT CHARACTER STATES — NATURAL REACTION PACK
   ========================================================= */

/* HAPPY: light lift + both hands + head reaction */
@keyframes fixbotHappyJump {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    22% { transform: translate3d(0, -3px, 0) rotate(-1deg) scale(1.015); }
    48% { transform: translate3d(0, -7px, 0) rotate(1deg) scale(1.025); }
    70% { transform: translate3d(0, -3px, 0) rotate(-.5deg) scale(1.012); }
}

.chat-toggle.fixbot-happy .fixbot-character-wrap,
.chat-toggle.fixbot-jump .fixbot-character-wrap {
    animation: fixbotHappyJump 1.25s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes fixbotHappyHead {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    25% { transform: translate3d(-1px,-1px,0) rotate(-2deg); }
    50% { transform: translate3d(1px,-1.5px,0) rotate(2deg); }
    75% { transform: translate3d(-.5px,-.5px,0) rotate(-1deg); }
}

.chat-toggle .fixbot-head-group.fixbot-head-happy {
    animation: fixbotHappyHead 1.1s ease-in-out both;
}

/* BOTH HANDS */
@keyframes fixbotBothHands {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    20% { transform: translate(-50%, -50%) rotate(-8deg); }
    40% { transform: translate(-50%, -50%) rotate(9deg); }
    60% { transform: translate(-50%, -50%) rotate(-7deg); }
    80% { transform: translate(-50%, -50%) rotate(5deg); }
}

.chat-toggle.fixbot-both-hands .fixbot-hand,
.chat-toggle.fixbot-both-hands .fixbot-hand-two,
.chat-toggle .fixbot-hand.fixbot-hand-happy,
.chat-toggle .fixbot-hand-two.fixbot-hand-happy {
    animation: fixbotBothHands 1.7s ease-in-out both;
}

/* ANGRY: short controlled shake, not cartoonish */
@keyframes fixbotAngryHead {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    15% { transform: translate3d(-2px,0,0) rotate(-3deg); }
    30% { transform: translate3d(2px,0,0) rotate(3deg); }
    45% { transform: translate3d(-1.5px,0,0) rotate(-2.5deg); }
    60% { transform: translate3d(1.5px,0,0) rotate(2deg); }
    78% { transform: translate3d(-.5px,0,0) rotate(-.8deg); }
}

.chat-toggle .fixbot-head-group.fixbot-head-angry {
    animation: fixbotAngryHead 1.15s cubic-bezier(.4,0,.2,1) both;
}

@keyframes fixbotAngryBody {
    0%, 100% { transform: translate3d(0,0,0); }
    20% { transform: translate3d(-1px,0,0); }
    40% { transform: translate3d(1px,0,0); }
    60% { transform: translate3d(-.8px,0,0); }
    80% { transform: translate3d(.5px,0,0); }
}

.chat-toggle.fixbot-angry .fixbot-character-wrap {
    animation: fixbotAngryBody 1.2s ease-in-out both;
}

/* SLEEPING: eyes closed + tiny breathing movement */
@keyframes fixbotSleep {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(1px) rotate(-.3deg); }
}

.chat-toggle.fixbot-sleeping .fixbot-character-wrap {
    animation: fixbotSleep 2.8s ease-in-out infinite;
}

.chat-toggle.fixbot-sleeping .eyes-open {
    opacity: 0 !important;
}

.chat-toggle.fixbot-sleeping .eyes-close {
    opacity: 1 !important;
}

/* HAPPY BASE GLOW */
@keyframes fixbotHappyBase {
    0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 3px rgba(0,174,255,.20)); }
    50% { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 0 11px rgba(0,174,255,.55)); }
}

.chat-toggle .fixbot-base.fixbot-base-happy {
    animation: fixbotHappyBase .9s ease-in-out 2 both;
}

/* Do not allow ordinary head/base loops to fight a reaction. */
.chat-toggle.fixbot-happy .fixbot-body,
.chat-toggle.fixbot-angry .fixbot-body,
.chat-toggle.fixbot-sleeping .fixbot-body,
.chat-toggle.fixbot-jump .fixbot-body {
    animation: none !important;
}

/* Tablet keeps the same animation logic, only the character scales with its existing CSS. */
@media (min-width: 501px) and (max-width: 1024px) {
    .chat-toggle.fixbot-happy .fixbot-character-wrap,
    .chat-toggle.fixbot-jump .fixbot-character-wrap {
        animation-duration: 1.35s;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chat-toggle.fixbot-happy .fixbot-character-wrap,
    .chat-toggle.fixbot-angry .fixbot-character-wrap,
    .chat-toggle.fixbot-sleeping .fixbot-character-wrap,
    .chat-toggle.fixbot-jump .fixbot-character-wrap,
    .chat-toggle .fixbot-head-group.fixbot-head-happy,
    .chat-toggle .fixbot-head-group.fixbot-head-angry,
    .chat-toggle.fixbot-both-hands .fixbot-hand,
    .chat-toggle.fixbot-both-hands .fixbot-hand-two,
    .chat-toggle .fixbot-hand.fixbot-hand-happy,
    .chat-toggle .fixbot-hand-two.fixbot-hand-happy,
    .chat-toggle .fixbot-base.fixbot-base-happy {
        animation: none !important;
    }
}


/* =========================================================
   FIXBOT 3.0 — STORY CHOREOGRAPHY + NEW HAND ASSETS
   ---------------------------------------------------------
   Uses the newly added:
   LeftState.png / LeftUp.png
   RightDown.png / RightState.png / RightUp.png
   ========================================================= */

/* Idle thinking: slightly different from user-message thinking. */
@keyframes fixbotIdleThinkingHead {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25% { transform: translate3d(-1px, -0.5px, 0) rotate(-1.8deg); }
    50% { transform: translate3d(1px, -1px, 0) rotate(1.5deg); }
    75% { transform: translate3d(-0.5px, 0, 0) rotate(-.8deg); }
}

.chat-toggle .fixbot-head-group.fixbot-head-thinking {
    animation: fixbotIdleThinkingHead 1.7s ease-in-out infinite;
}

/* Sleep bubble: appears above the head and gently floats upward. */
.chat-toggle .fixbot-sleep-bubble {
    position: absolute;
    right: 75px;
    bottom: 83px;
    width: 45px;
    height: 35px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 103;
    transform: translateY(7px) scale(.72);
    transform-origin: bottom right;
}

.chat-toggle .fixbot-sleep-bubble::before {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1.5px solid #bfdbfe;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(10,46,78,.10);
}

.chat-toggle .fixbot-sleep-bubble::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -5px;
    width: 5px;
    height: 5px;
    background: #fff;
    border: 1.5px solid #bfdbfe;
    border-radius: 50%;
}

.chat-toggle .fixbot-sleep-bubble .sleep-z {
    position: absolute;
    font-family: Inter, Arial, sans-serif;
    font-weight: 800;
    line-height: 1;
    color: #147eea;
    text-shadow: 0 2px 8px rgba(20,126,234,.18);
}

.chat-toggle .fixbot-sleep-bubble .sleep-z-1 {
    right: 8px;
    top: 7px;
    font-size: 18px;
}

.chat-toggle .fixbot-sleep-bubble .sleep-z-2 {
    right: 20px;
    top: 1px;
    font-size: 13px;
}

.chat-toggle .fixbot-sleep-bubble .sleep-z-3 {
    right: 30px;
    top: 0;
    font-size: 9px;
}

@keyframes fixbotSleepBubbleFloat {
    0% { opacity: 0; transform: translate(3px, 7px) scale(.72); }
    15% { opacity: 1; transform: translate(0, 0) scale(1); }
    55% { opacity: 1; transform: translate(-2px, -4px) scale(1.02); }
    100% { opacity: 0; transform: translate(-7px, -15px) scale(.86); }
}

.chat-toggle .fixbot-sleep-bubble-show {
    visibility: visible;
    animation: fixbotSleepBubbleFloat 2.2s ease-in-out infinite;
}

/* Angry wake-up mark. */
.chat-toggle.fixbot-angry::after {
    content: "!";
    position: absolute;
    right: 28px;
    top: -5px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #fecaca;
    color: #ef4444;
    font: 900 14px/1 Inter, Arial, sans-serif;
    box-shadow: 0 5px 14px rgba(239,68,68,.18);
    animation: fixbotAngryMark .65s ease-in-out infinite alternate;
    z-index: 104;
}

@keyframes fixbotAngryMark {
    from { transform: translateY(1px) rotate(-7deg) scale(.92); }
    to { transform: translateY(-2px) rotate(7deg) scale(1.05); }
}

/* New hand-image states. JS swaps the source; each pose keeps
   a box close to its natural aspect ratio so the artwork stays
   visible on desktop, tablet and mobile. */
.chat-toggle .fixbot-hand,
.chat-toggle .fixbot-hand-two {
    object-fit: contain !important;
}

/* The new pose images are wider/taller than the retired hand.png
   artwork. These classes are applied by chatbot-animation.js. */
.chat-toggle .fixbot-hand.fixbot-hand-state,
.chat-toggle .fixbot-hand-two.fixbot-hand-state {
    width: 44px !important;
    height: 46px !important;
}

.chat-toggle .fixbot-hand.fixbot-hand-up,
.chat-toggle .fixbot-hand-two.fixbot-hand-up {
    width: 46px !important;
    height: 52px !important;
}

.chat-toggle .fixbot-hand.fixbot-hand-down,
.chat-toggle .fixbot-hand-two.fixbot-hand-down {
    width: 34px !important;
    height: 54px !important;
}

.chat-toggle .fixbot-hand.fixbot-hand-default,
.chat-toggle .fixbot-hand-two.fixbot-hand-default {
    object-fit: contain !important;
}

@media (max-width: 500px) {
    .chat-toggle .fixbot-hand.fixbot-hand-state,
    .chat-toggle .fixbot-hand-two.fixbot-hand-state {
        width: 37px !important;
        height: 39px !important;
    }

    .chat-toggle .fixbot-hand.fixbot-hand-up,
    .chat-toggle .fixbot-hand-two.fixbot-hand-up {
        width: 39px !important;
        height: 44px !important;
    }

    .chat-toggle .fixbot-hand.fixbot-hand-down,
    .chat-toggle .fixbot-hand-two.fixbot-hand-down {
        width: 30px !important;
        height: 46px !important;
    }
}

/* Sleep keeps the hands low and calm. */
.chat-toggle.fixbot-sleeping .fixbot-hand,
.chat-toggle.fixbot-sleeping .fixbot-hand-two {
    animation: fixbotSleepHands 2.8s ease-in-out infinite !important;
}

@keyframes fixbotSleepHands {
    0%, 100% { filter: brightness(.96); transform: translate(-50%, -50%) rotate(0deg); }
    50% { filter: brightness(.91); transform: translate(-50%, calc(-50% + 1px)) rotate(-1deg); }
}

/* Happy wave uses the raised assets with a small alternating wrist motion. */
@keyframes fixbotHappyLeftHand {
    0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
    25% { transform: translate(-50%, -51%) rotate(-8deg); }
    50% { transform: translate(-50%, -50%) rotate(5deg); }
    75% { transform: translate(-50%, -51%) rotate(-6deg); }
}

@keyframes fixbotHappyRightHand {
    0%, 100% { transform: translate(-50%, -50%) rotate(2deg); }
    25% { transform: translate(-50%, -51%) rotate(8deg); }
    50% { transform: translate(-50%, -50%) rotate(-5deg); }
    75% { transform: translate(-50%, -51%) rotate(6deg); }
}

.chat-toggle.fixbot-happy .fixbot-hand {
    animation: fixbotHappyLeftHand .95s ease-in-out infinite alternate !important;
}

.chat-toggle.fixbot-happy .fixbot-hand-two {
    animation: fixbotHappyRightHand .95s ease-in-out .08s infinite alternate !important;
}

/* Calm idle after the story. */
@keyframes fixbotCalm {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(0,-1px,0) rotate(.15deg); }
}

.chat-toggle.fixbot-calm .fixbot-character-wrap {
    animation: fixbotCalm 3.8s ease-in-out infinite;
}

/* User-message thinking should visibly breathe while the dots are active. */
@keyframes fixbotUserThinkingBody {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-1px,0) scale(1.012); }
}

.chat-toggle.fixbot-user-thinking .fixbot-character-wrap {
    animation: fixbotUserThinkingBody 1.8s ease-in-out infinite;
}

@media (max-width: 500px) {
    .chat-toggle .fixbot-sleep-bubble {
        right: 55px;
        bottom: 68px;
        transform: translateY(6px) scale(.72);
    }

    .chat-toggle.fixbot-angry::after {
        right: 20px;
        top: 0;
        width: 17px;
        height: 17px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-toggle .fixbot-sleep-bubble-show,
    .chat-toggle.fixbot-angry::after,
    .chat-toggle.fixbot-sleeping .fixbot-hand,
    .chat-toggle.fixbot-sleeping .fixbot-hand-two,
    .chat-toggle.fixbot-happy .fixbot-hand,
    .chat-toggle.fixbot-happy .fixbot-hand-two,
    .chat-toggle.fixbot-calm .fixbot-character-wrap,
    .chat-toggle.fixbot-user-thinking .fixbot-character-wrap,
    .chat-toggle .fixbot-head-group.fixbot-head-thinking {
        animation: none !important;
    }
}


/* =========================================================
   FIXBOT CALIBRATION MODE 4.0
   ---------------------------------------------------------
   IMPORTANT:
   Every visible robot part is independently positioned.
   Do NOT use a parent transform to move multiple parts.

   Parts:
   - master     = calibration reference only, hidden
   - body       = independent
   - head       = independent
   - eyes       = independent
   - hand       = independent
   - hand-two   = independent
   - base       = independent

   Change ONLY the variables for the part you want to adjust.
   ========================================================= */

/* ---------- MASTER REFERENCE ---------- */
.chat-toggle .fixbot-master {
    display: none !important;
}

/* ---------- CALIBRATION VARIABLES ---------- */
.chat-toggle .fixbot-character-wrap {
    /* container only, NEVER moves the whole character */
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    animation: none !important;

    --body-x: 52%;
    --body-y: 72%;
    --body-w: 38px;
    --body-h: 50px;

    --head-x: 52%;
    --head-y: 35%;
    --head-w: 52px;
    --head-h: 52px;

    --eyes-x: 52%;
    --eyes-y: 39%;
    --eyes-w: 27px;
    --eyes-h: 20px;

    --hand-x: 21%;
    --hand-y: 54%;
    --hand-w: 27px;
    --hand-h: 60px;

    --hand-two-x: 79%;
    --hand-two-y: 76%;
    --hand-two-w: 17px;
    --hand-two-h: 60px;

    --base-x: 52%;
    --base-y: 104%;
    --base-w: 46px;
    --base-h: 100px;
}

/* ---------- BODY: 100% INDEPENDENT ---------- */
.chat-toggle .fixbot-body {
    position: absolute !important;
    left: var(--body-x) !important;
    top: var(--body-y) !important;
    width: var(--body-w) !important;
    height: var(--body-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 50% !important;
    animation: none !important;
}

/* ---------- HEAD: 100% INDEPENDENT ---------- */
/* The head-group is now ONLY a transparent positioning wrapper. */
.chat-toggle .fixbot-head-group {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    animation: none !important;
}

/* Head image itself is independently adjustable. */
.chat-toggle .fixbot-head {
    position: absolute !important;
    left: var(--head-x) !important;
    top: var(--head-y) !important;
    width: var(--head-w) !important;
    height: var(--head-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 50% !important;
}

/* ---------- EYES: 100% INDEPENDENT ---------- */
.chat-toggle .fixbot-eyes {
    position: absolute !important;
    left: var(--eyes-x) !important;
    top: var(--eyes-y) !important;
    width: var(--eyes-w) !important;
    height: var(--eyes-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 50% !important;
}

/* ---------- LEFT HAND: 100% INDEPENDENT ---------- */
.chat-toggle .fixbot-hand {
    position: absolute !important;
    left: var(--hand-x) !important;
    top: var(--hand-y) !important;
    width: var(--hand-w) !important;
    height: var(--hand-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 78% 70% !important;
}

/* ---------- RIGHT HAND: 100% INDEPENDENT ---------- */
.chat-toggle .fixbot-hand-two {
    position: absolute !important;
    left: var(--hand-two-x) !important;
    top: var(--hand-two-y) !important;
    width: var(--hand-two-w) !important;
    height: var(--hand-two-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 20% !important;
}

/* ---------- BASE: 100% INDEPENDENT ---------- */
.chat-toggle .fixbot-base {
    position: absolute !important;
    left: var(--base-x) !important;
    top: var(--base-y) !important;
    width: var(--base-w) !important;
    height: var(--base-h) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: 50% 20% !important;
}

/* =========================================================
   ANIMATION SAFE LAYER
   ---------------------------------------------------------
   Movement is applied to the individual image, never to a
   parent that contains another body part.
   ========================================================= */

/* Head reactions move HEAD + EYES together without grouping
   their calibration positions. Both use the same motion. */
@keyframes fixbotIndependentHeadReaction {
    0%, 100% { transform: translate(-50%, -50%) translate3d(0,0,0) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translate3d(-1px,-1px,0) rotate(-1.5deg); }
    50% { transform: translate(-50%, -50%) translate3d(1px,-1px,0) rotate(1.5deg); }
    75% { transform: translate(-50%, -50%) translate3d(-.5px,0,0) rotate(-.7deg); }
}

.chat-toggle.fixbot-happy .fixbot-head,
.chat-toggle.fixbot-happy .fixbot-eyes,
.chat-toggle.fixbot-jump .fixbot-head,
.chat-toggle.fixbot-jump .fixbot-eyes {
    animation: fixbotIndependentHeadReaction 1.1s ease-in-out both !important;
}

/* Angry head reaction */
@keyframes fixbotIndependentAngryHead {
    0%, 100% { transform: translate(-50%, -50%) translate3d(0,0,0) rotate(0deg); }
    15% { transform: translate(-50%, -50%) translate3d(-2px,0,0) rotate(-3deg); }
    30% { transform: translate(-50%, -50%) translate3d(2px,0,0) rotate(3deg); }
    45% { transform: translate(-50%, -50%) translate3d(-1.5px,0,0) rotate(-2.5deg); }
    60% { transform: translate(-50%, -50%) translate3d(1.5px,0,0) rotate(2deg); }
    78% { transform: translate(-50%, -50%) translate3d(-.5px,0,0) rotate(-.8deg); }
}

.chat-toggle.fixbot-angry .fixbot-head,
.chat-toggle.fixbot-angry .fixbot-eyes {
    animation: fixbotIndependentAngryHead 1.15s cubic-bezier(.4,0,.2,1) both !important;
}

/* Thinking head reaction */
@keyframes fixbotIndependentThinkingHead {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translate3d(-1px,-.5px,0) rotate(-1.8deg); }
    50% { transform: translate(-50%, -50%) translate3d(1px,-1px,0) rotate(1.5deg); }
    75% { transform: translate(-50%, -50%) translate3d(-.5px,0,0) rotate(-.8deg); }
}

.chat-toggle .fixbot-head-group.fixbot-head-thinking .fixbot-head,
.chat-toggle .fixbot-head-group.fixbot-head-thinking .fixbot-eyes {
    animation: fixbotIndependentThinkingHead 1.7s ease-in-out infinite !important;
}

/* Sleep: only head/eyes get the tiny sleep movement. */
@keyframes fixbotIndependentSleepHead {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
    50% { transform: translate(-50%, -50%) translateY(1px) rotate(-.3deg); }
}

.chat-toggle.fixbot-sleeping .fixbot-head {
    animation: fixbotIndependentSleepHead 2.8s ease-in-out infinite !important;
}

.chat-toggle.fixbot-sleeping .fixbot-eyes {
    animation: none !important;
}

/* Hands remain independently movable. */
.chat-toggle.fixbot-sleeping .fixbot-hand,
.chat-toggle.fixbot-sleeping .fixbot-hand-two {
    animation: fixbotSleepHandsIndependent 2.8s ease-in-out infinite !important;
}

@keyframes fixbotSleepHandsIndependent {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, calc(-50% + 1px)) rotate(-1deg);
    }
}

/* Happy left hand */
.chat-toggle.fixbot-happy .fixbot-hand {
    animation: fixbotHappyLeftIndependent .95s ease-in-out infinite alternate !important;
}

@keyframes fixbotHappyLeftIndependent {
    0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
    25% { transform: translate(-50%, -51%) rotate(-8deg); }
    50% { transform: translate(-50%, -50%) rotate(5deg); }
    75% { transform: translate(-50%, -51%) rotate(-6deg); }
}

/* Happy right hand */
.chat-toggle.fixbot-happy .fixbot-hand-two {
    animation: fixbotHappyRightIndependent .95s ease-in-out .08s infinite alternate !important;
}

@keyframes fixbotHappyRightIndependent {
    0%, 100% { transform: translate(-50%, -50%) rotate(2deg); }
    25% { transform: translate(-50%, -51%) rotate(8deg); }
    50% { transform: translate(-50%, -50%) rotate(-5deg); }
    75% { transform: translate(-50%, -51%) rotate(6deg); }
}

/* Base remains independent even while the character reacts. */
.chat-toggle.fixbot-happy .fixbot-base {
    animation: fixbotHappyBaseIndependent .9s ease-in-out 2 both !important;
}

@keyframes fixbotHappyBaseIndependent {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* =========================================================
   MOBILE CALIBRATION VARIABLES
   ---------------------------------------------------------
   Mobile gets its OWN coordinates.
   Adjusting mobile does not change desktop/tablet.
   ========================================================= */

@media (max-width: 500px) {
    .chat-toggle .fixbot-character-wrap {
        --body-x: 52%;
        --body-y: 72%;
        --body-w: 30px;
        --body-h: 39px;

        --head-x: 52%;
        --head-y: 35%;
        --head-w: 40px;
        --head-h: 40px;

        --eyes-x: 52%;
        --eyes-y: 39%;
        --eyes-w: 22px;
        --eyes-h: 16px;

        --hand-x: 21%;
        --hand-y: 54%;
        --hand-w: 27px;
        --hand-h: 60px;

        --hand-two-x: 73%;
        --hand-two-y: 76%;
        --hand-two-w: 14px;
        --hand-two-h: 48px;

        --base-x: 52%;
        --base-y: 104%;
        --base-w: 36px;
        --base-h: 76px;
    }
}

/* =========================================================
   EASY CALIBRATION CHEAT SHEET

   Desktop / tablet:
     --body-x / --body-y
     --head-x / --head-y
     --eyes-x / --eyes-y
     --hand-x / --hand-y
     --hand-two-x / --hand-two-y
     --base-x / --base-y

   Size:
     --body-w / --body-h
     --head-w / --head-h
     --eyes-w / --eyes-h
     --hand-w / --hand-h
     --hand-two-w / --hand-two-h
     --base-w / --base-h

   Example:
     --hand-x: 19%;
     --hand-y: 56%;

   ONLY the left hand moves.
   No body/head/eyes/base moves with it.
   ========================================================= */

/* =========================================================
   FIXBOT PRO HAND ENGINE 5.0
   SIX INDEPENDENT HAND LAYERS
   ========================================================= */
.chat-toggle .fixbot-hand-left-default,
.chat-toggle .fixbot-hand-left-state,
.chat-toggle .fixbot-hand-left-up,
.chat-toggle .fixbot-hand-right-down,
.chat-toggle .fixbot-hand-right-state,
.chat-toggle .fixbot-hand-right-up {
    position: absolute !important;
    z-index: 20 !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    transform-origin: 78% 70% !important;
    will-change: transform, opacity !important;
    transition: none !important;
}

/* FINAL DESKTOP CALIBRATION. DO NOT CHANGE. */
.chat-toggle .fixbot-hand-left-default { left:79% !important; top:76% !important; width:19px !important; height:60px !important; transform:translate(-50%,-50%) !important; }
.chat-toggle .fixbot-hand-left-state    { left:88% !important; top:68% !important; width:41px !important; height:60px !important; transform:translate(-50%,-50%) !important; }
.chat-toggle .fixbot-hand-left-up       { left:86% !important; top:55% !important; width:28px !important; height:58px !important; transform:translate(-50%,-50%) !important; }
.chat-toggle .fixbot-hand-right-down   { left:26% !important; top:77% !important; width:18px !important; height:60px !important; transform:translate(-50%,-50%) !important; }
.chat-toggle .fixbot-hand-right-state  { left:18% !important; top:68% !important; width:41px !important; height:60px !important; transform:translate(-50%,-50%) !important; }
.chat-toggle .fixbot-hand-right-up     { left:21% !important; top:54% !important; width:28px !important; height:58px !important; transform:translate(-50%,-50%) !important; }

/* Only the active pose is visible. */
.chat-toggle .fixbot-hand-left-default,
.chat-toggle .fixbot-hand-right-down { opacity:1 !important; visibility:visible !important; display:block !important; }
.chat-toggle .fixbot-hand-left-state,
.chat-toggle .fixbot-hand-left-up,
.chat-toggle .fixbot-hand-right-state,
.chat-toggle .fixbot-hand-right-up { opacity:0 !important; visibility:hidden !important; display:block !important; }

.chat-toggle.fixbot-pose-sleep .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-sleep .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-sleep .fixbot-hand-right-state,
.chat-toggle.fixbot-pose-sleep .fixbot-hand-right-up,
.chat-toggle.fixbot-pose-angry .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-angry .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-angry .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-angry .fixbot-hand-right-up,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-right-up,
.chat-toggle.fixbot-pose-happy .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-happy .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-happy .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-happy .fixbot-hand-right-state,
.chat-toggle.fixbot-pose-calm .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-calm .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-calm .fixbot-hand-right-state,
.chat-toggle.fixbot-pose-calm .fixbot-hand-right-up,
.chat-toggle.fixbot-pose-both .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-both .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-both .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-both .fixbot-hand-right-up { opacity:0 !important; visibility:hidden !important; }

.chat-toggle.fixbot-pose-sleep .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-sleep .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-angry .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-angry .fixbot-hand-right-state,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-thinking .fixbot-hand-right-state,
.chat-toggle.fixbot-pose-happy .fixbot-hand-left-up,
.chat-toggle.fixbot-pose-happy .fixbot-hand-right-up,
.chat-toggle.fixbot-pose-calm .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-calm .fixbot-hand-right-down,
.chat-toggle.fixbot-pose-both .fixbot-hand-left-state,
.chat-toggle.fixbot-pose-both .fixbot-hand-right-state { opacity:1 !important; visibility:visible !important; }

/* Independent animation per hand layer. */
@keyframes fixbotLeftSleep {0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,calc(-50% + 1px)) rotate(-1deg)}}
@keyframes fixbotRightSleep {0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,calc(-50% + 1px)) rotate(1deg)}}
@keyframes fixbotLeftAngry {0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-50%) rotate(4deg)}75%{transform:translate(-50%,-50%) rotate(-2deg)}}
@keyframes fixbotRightAngry {0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(4deg)}50%{transform:translate(-50%,-50%) rotate(-4deg)}75%{transform:translate(-50%,-50%) rotate(2deg)}}
@keyframes fixbotLeftThink {0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,calc(-50% - 1px)) rotate(-2deg)}}
@keyframes fixbotRightThink {0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,calc(-50% - 1px)) rotate(2deg)}}
@keyframes fixbotLeftWavePro {0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}20%{transform:translate(-50%,-51%) rotate(-10deg)}40%{transform:translate(-50%,-50%) rotate(9deg)}60%{transform:translate(-50%,-51%) rotate(-8deg)}80%{transform:translate(-50%,-50%) rotate(5deg)}}
@keyframes fixbotRightWavePro {0%,100%{transform:translate(-50%,-50%) rotate(2deg)}20%{transform:translate(-50%,-51%) rotate(10deg)}40%{transform:translate(-50%,-50%) rotate(-9deg)}60%{transform:translate(-50%,-51%) rotate(8deg)}80%{transform:translate(-50%,-50%) rotate(-5deg)}}

.chat-toggle.fixbot-pose-sleep .fixbot-hand-left-state {animation:fixbotLeftSleep 2.8s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-sleep .fixbot-hand-right-down {animation:fixbotRightSleep 2.8s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-angry .fixbot-hand-left-state {animation:fixbotLeftAngry .48s ease-in-out 2 !important}
.chat-toggle.fixbot-pose-angry .fixbot-hand-right-state {animation:fixbotRightAngry .48s ease-in-out 2 !important}
.chat-toggle.fixbot-pose-thinking .fixbot-hand-left-state {animation:fixbotLeftThink 1.7s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-thinking .fixbot-hand-right-state {animation:fixbotRightThink 1.7s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-happy .fixbot-hand-left-up {animation:fixbotLeftWavePro .95s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-happy .fixbot-hand-right-up {animation:fixbotRightWavePro .95s ease-in-out .08s infinite !important}
.chat-toggle.fixbot-pose-both .fixbot-hand-left-state {animation:fixbotLeftWavePro 1.1s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-both .fixbot-hand-right-state {animation:fixbotRightWavePro 1.1s ease-in-out .08s infinite !important}

@media (prefers-reduced-motion: reduce) {
  .chat-toggle .fixbot-hand-left-default,
  .chat-toggle .fixbot-hand-left-state,
  .chat-toggle .fixbot-hand-left-up,
  .chat-toggle .fixbot-hand-right-down,
  .chat-toggle .fixbot-hand-right-state,
  .chat-toggle .fixbot-hand-right-up {animation:none !important}
}

/* =========================================================
   FIXBOT PRO FINAL OVERRIDES - 6 INDEPENDENT HAND LAYERS
   ========================================================= */
.chat-toggle .fixbot-hand-left-default,
.chat-toggle .fixbot-hand-left-state,
.chat-toggle .fixbot-hand-left-up,
.chat-toggle .fixbot-hand-right-down,
.chat-toggle .fixbot-hand-right-state,
.chat-toggle .fixbot-hand-right-up {
    animation: none !important;
    transition: none !important;
    transform-origin: 78% 70% !important;
}

/* Exact calibrated desktop positions. */
.chat-toggle .fixbot-hand-left-default { left:79% !important; top:76% !important; width:19px !important; height:60px !important; }
.chat-toggle .fixbot-hand-left-state    { left:88% !important; top:68% !important; width:41px !important; height:60px !important; }
.chat-toggle .fixbot-hand-left-up       { left:86% !important; top:55% !important; width:28px !important; height:58px !important; }
.chat-toggle .fixbot-hand-right-down    { left:26% !important; top:77% !important; width:18px !important; height:60px !important; }
.chat-toggle .fixbot-hand-right-state   { left:18% !important; top:68% !important; width:41px !important; height:60px !important; }
.chat-toggle .fixbot-hand-right-up      { left:21% !important; top:54% !important; width:28px !important; height:58px !important; }

/* JS controls visibility, so no pose rule can accidentally show another hand. */
.chat-toggle .fixbot-hand-left-default,
.chat-toggle .fixbot-hand-left-state,
.chat-toggle .fixbot-hand-left-up,
.chat-toggle .fixbot-hand-right-down,
.chat-toggle .fixbot-hand-right-state,
.chat-toggle .fixbot-hand-right-up {
    opacity:0 !important;
    visibility:hidden !important;
    display:block !important;
}

/* Independent movement keyframes. */
@keyframes fixbotProLeftSleep {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,calc(-50% + 1px)) rotate(-1deg)}}
@keyframes fixbotProRightSleep {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,calc(-50% + 1px)) rotate(1deg)}}
@keyframes fixbotProLeftAngry {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}25%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-50%) rotate(4deg)}75%{transform:translate(-50%,-50%) rotate(-2deg)}}
@keyframes fixbotProRightAngry {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}25%{transform:translate(-50%,-50%) rotate(4deg)}50%{transform:translate(-50%,-50%) rotate(-4deg)}75%{transform:translate(-50%,-50%) rotate(2deg)}}
@keyframes fixbotProLeftThink {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,calc(-50% - 1px)) rotate(-2deg)}}
@keyframes fixbotProRightThink {0%,100%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,calc(-50% - 1px)) rotate(2deg)}}
@keyframes fixbotProLeftWave {0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}20%{transform:translate(-50%,-51%) rotate(-10deg)}40%{transform:translate(-50%,-50%) rotate(9deg)}60%{transform:translate(-50%,-51%) rotate(-8deg)}80%{transform:translate(-50%,-50%) rotate(5deg)}}
@keyframes fixbotProRightWave {0%,100%{transform:translate(-50%,-50%) rotate(2deg)}20%{transform:translate(-50%,-51%) rotate(10deg)}40%{transform:translate(-50%,-50%) rotate(-9deg)}60%{transform:translate(-50%,-51%) rotate(8deg)}80%{transform:translate(-50%,-50%) rotate(-5deg)}}

.chat-toggle.fixbot-pose-sleep .fixbot-hand-left-state {opacity:1 !important;visibility:visible !important;animation:fixbotProLeftSleep 2.8s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-sleep .fixbot-hand-right-down {opacity:1 !important;visibility:visible !important;animation:fixbotProRightSleep 2.8s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-angry .fixbot-hand-left-state {opacity:1 !important;visibility:visible !important;animation:fixbotProLeftAngry .48s ease-in-out 2 !important}
.chat-toggle.fixbot-pose-angry .fixbot-hand-right-state {opacity:1 !important;visibility:visible !important;animation:fixbotProRightAngry .48s ease-in-out 2 !important}
.chat-toggle.fixbot-pose-thinking .fixbot-hand-left-state {opacity:1 !important;visibility:visible !important;animation:fixbotProLeftThink 1.7s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-thinking .fixbot-hand-right-state {opacity:1 !important;visibility:visible !important;animation:fixbotProRightThink 1.7s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-happy .fixbot-hand-left-up {opacity:1 !important;visibility:visible !important;animation:fixbotProLeftWave .95s ease-in-out infinite !important}
.chat-toggle.fixbot-pose-happy .fixbot-hand-right-up {opacity:1 !important;visibility:visible !important;animation:fixbotProRightWave .95s ease-in-out .08s infinite !important}
.chat-toggle.fixbot-pose-calm .fixbot-hand-left-default,
.chat-toggle.fixbot-pose-calm .fixbot-hand-right-down {opacity:1 !important;visibility:visible !important}

/* Natural head reactions. */
@keyframes fixbotProHeadSleep {0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,1px,0) rotate(-.4deg)}}
@keyframes fixbotProHeadAngry {0%,100%{transform:translate3d(0,0,0) rotate(0deg)}20%{transform:translate3d(-2px,0,0) rotate(-3deg)}40%{transform:translate3d(2px,0,0) rotate(3deg)}60%{transform:translate3d(-1px,0,0) rotate(-2deg)}80%{transform:translate3d(1px,0,0) rotate(2deg)}}
@keyframes fixbotProHeadThink {0%,100%{transform:translate3d(0,0,0) rotate(0deg)}30%{transform:translate3d(-1px,-.5px,0) rotate(-2deg)}60%{transform:translate3d(1px,-1px,0) rotate(1.6deg)}80%{transform:translate3d(-.5px,0,0) rotate(-.7deg)}}
@keyframes fixbotProHeadHappy {0%,100%{transform:translate3d(0,0,0) rotate(0deg)}30%{transform:translate3d(-1px,-1px,0) rotate(-2deg)}60%{transform:translate3d(1px,-2px,0) rotate(2deg)}80%{transform:translate3d(0,-1px,0) rotate(0deg)}}
.chat-toggle.fixbot-sleeping .fixbot-head-group {animation:fixbotProHeadSleep 2.8s ease-in-out infinite !important}
.chat-toggle.fixbot-angry .fixbot-head-group {animation:fixbotProHeadAngry 1.15s ease-in-out both !important}
.chat-toggle.fixbot-pose-thinking .fixbot-head-group {animation:fixbotProHeadThink 1.7s ease-in-out infinite !important}
.chat-toggle.fixbot-happy .fixbot-head-group {animation:fixbotProHeadHappy 1.1s ease-in-out infinite !important}

/* Sleep bubble + thinking bubble. */
.chat-toggle .fixbot-sleep-bubble-show {opacity:1 !important;visibility:visible !important;animation:fixbotSleepBubbleFloat 2.2s ease-in-out infinite !important}
@keyframes fixbotSleepBubbleFloat {0%,100%{transform:translateY(7px) scale(.72)}50%{transform:translateY(-2px) scale(.78)}}
.chat-toggle .fixbot-thinking-visible {opacity:1 !important;visibility:visible !important;animation:fixbotThinkingBubble 1.1s ease-in-out infinite !important}
@keyframes fixbotThinkingBubble {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.035)}}

/* Happy body/base reaction. */
@keyframes fixbotProHappyBody {0%,100%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,calc(-50% - 1px)) scale(1.015)}50%{transform:translate(-50%,calc(-50% - 3px)) scale(1.035)}75%{transform:translate(-50%,calc(-50% - 1px)) scale(1.015)}}
.chat-toggle.fixbot-happy .fixbot-body {animation:fixbotProHappyBody 1.1s ease-in-out infinite !important}
.chat-toggle.fixbot-happy .fixbot-base {animation:fixbotHappyBaseIndependent .9s ease-in-out infinite !important}

/* Greeting/message entrance is controlled by existing speech classes. */
.chat-toggle .fixbot-speech.fixbot-speech-show {visibility:visible !important;opacity:1 !important}

/* Responsive: keep calibrated percentages, scale only artwork size on small screens. */
@media (max-width:500px) {
    .chat-toggle .fixbot-hand-left-default {left:79% !important;top:76% !important;width:15px !important;height:48px !important}
    .chat-toggle .fixbot-hand-left-state {left:88% !important;top:68% !important;width:32px !important;height:48px !important}
    .chat-toggle .fixbot-hand-left-up {left:86% !important;top:55% !important;width:22px !important;height:47px !important}
    .chat-toggle .fixbot-hand-right-down {left:26% !important;top:77% !important;width:14px !important;height:48px !important}
    .chat-toggle .fixbot-hand-right-state {left:18% !important;top:68% !important;width:32px !important;height:48px !important}
    .chat-toggle .fixbot-hand-right-up {left:21% !important;top:54% !important;width:22px !important;height:47px !important}
}

@media (prefers-reduced-motion: reduce) {
    .chat-toggle .fixbot-hand-left-default,
    .chat-toggle .fixbot-hand-left-state,
    .chat-toggle .fixbot-hand-left-up,
    .chat-toggle .fixbot-hand-right-down,
    .chat-toggle .fixbot-hand-right-state,
    .chat-toggle .fixbot-hand-right-up,
    .chat-toggle .fixbot-head-group,
    .chat-toggle .fixbot-body,
    .chat-toggle .fixbot-base,
    .chat-toggle .fixbot-sleep-bubble,
    .chat-toggle .fixbot-thinking {animation:none !important}
}

/* =========================================================
   FIXBOT FINAL CALIBRATION + ZOOM-SAFE GROUP
   ========================================================= */

/* One fixed design canvas: all robot layers are children of
   this wrapper, so display/browser scaling scales them together. */
.chat-toggle .fixbot-character-wrap {
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Closed eyes: exactly 1px DOWN from the final eye position. */
.chat-toggle .eyes-close {
    top: calc(39% + 1px) !important;
}

/* Final hand calibration, preserving the user's current positions. */
.chat-toggle .fixbot-hand-left-default {
    left: 79% !important;
    top: 76% !important;
    width: 19px !important;
    height: 60px !important;
}

.chat-toggle .fixbot-hand-left-state {
    left: 88% !important;
    top: 68% !important;
    width: 41px !important;
    height: 60px !important;
}

/* LeftUp.png: 1px UP */
.chat-toggle .fixbot-hand-left-up {
    left: 86% !important;
    top: 54% !important;
    width: 28px !important;
    height: 58px !important;
}

/* RightDown.png: 1px DOWN */
.chat-toggle .fixbot-hand-right-down {
    left: 26% !important;
    top: 78% !important;
    width: 18px !important;
    height: 60px !important;
}

.chat-toggle .fixbot-hand-right-state {
    left: 18% !important;
    top: 68% !important;
    width: 41px !important;
    height: 60px !important;
}

.chat-toggle .fixbot-hand-right-up {
    left: 21% !important;
    top: 54% !important;
    width: 28px !important;
    height: 58px !important;
}

/* Keep the calibrated design canvas on desktop/tablet. */
@media (min-width: 501px) {
    .chat-toggle .fixbot-character-wrap {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        flex: 0 0 90px !important;
    }
}