.chatbot {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    font-family: system-ui, sans-serif;
    z-index: 9999;
}

/* ---- Mascot ---- */
.chatbot__mascot {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}

    .chatbot__mascot .pose {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transform: scale(.96);
        transition: opacity .4s ease, transform .4s ease;
        pointer-events: none;
    }

        .chatbot__mascot .pose.active {
            opacity: 1;
            transform: scale(1);
        }

/* idle animations per state */
.anim-bob {
    animation: bob 2.8s ease-in-out infinite;
}

.anim-wiggle {
    animation: wiggle 2.2s ease-in-out infinite;
}

.anim-jump {
    animation: jump 1.6s ease-in-out infinite;
}

.anim-think {
    animation: think 3.5s ease-in-out infinite;
}

.anim-lookout {
    animation: lookout 4s ease-in-out infinite;
}

.pop {
    animation: pop .45s ease;
}

@keyframes bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes wiggle {
    0%,100% {
        transform: rotate(-2deg)
    }

    50% {
        transform: rotate(2deg)
    }
}

@keyframes jump {
    0%,100% {
        transform: translateY(0) scale(1)
    }

    30% {
        transform: translateY(-24px) scale(1.03,.97)
    }

    50% {
        transform: translateY(0) scale(.98,1.02)
    }
}

@keyframes think {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

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

@keyframes lookout {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(8px)
    }
}

@keyframes pop {
    0% {
        transform: scale(.85)
    }

    60% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

/* ============================================================
   MASCOT  –  fixed bottom-left, does NOT affect page layout
============================================================ */
.mascot-scene {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 999;
    width: 180px;
    height: 220px;
    cursor: pointer;
}

.mascot-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: mc-bob 2.4s ease-in-out infinite;
    transform-origin: bottom center;
}

.mascot-shadow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 14px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
    animation: mc-shadow-pulse 2.4s ease-in-out infinite;
}

@keyframes mc-bob {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-12px); }
}

@keyframes mc-shadow-pulse {
    0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.6; }
    50%       { transform: translateX(-50%) scaleX(0.55); opacity: 0.2; }
}

.mascot-scene:hover .mascot-body {
    animation: mc-wiggle 0.6s ease-in-out 2;
}

@keyframes mc-wiggle {
    0%   { transform: rotate(0deg)  translateY(0);    }
    20%  { transform: rotate(-7deg) translateY(-4px); }
    40%  { transform: rotate(7deg)  translateY(-9px); }
    60%  { transform: rotate(-4deg) translateY(-5px); }
    80%  { transform: rotate(3deg)  translateY(-2px); }
    100% { transform: rotate(0deg)  translateY(0);    }
}

/* JS-toggled jump class – restarts the animation on each click */
.mascot-body.mc-jumping {
    animation: mc-jump 1.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes mc-jump {
    0%   { transform: translateY(0)      scaleX(1)    scaleY(1);    }
    7%   { transform: translateY(8px)    scaleX(1.22) scaleY(0.68); }
    18%  { transform: translateY(-55px)  scaleX(0.82) scaleY(1.22); }
    38%  { transform: translateY(-130px) scaleX(0.86) scaleY(1.18); }
    55%  { transform: translateY(-130px) scaleX(0.88) scaleY(1.14); }
    72%  { transform: translateY(-30px)  scaleX(0.9)  scaleY(1.08); }
    82%  { transform: translateY(10px)   scaleX(1.28) scaleY(0.62); }
    90%  { transform: translateY(-18px)  scaleX(0.93) scaleY(1.07); }
    96%  { transform: translateY(4px)    scaleX(1.06) scaleY(0.94); }
    100% { transform: translateY(0)      scaleX(1)    scaleY(1);    }
}

/* ============================================================
   POSE IMAGES  –  only the .active image is visible
============================================================ */
.mascot-body .pose {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

.mascot-body .pose.active {
    display: block;
}

/* ============================================================
   CHAT PANEL
============================================================ */
.mc-chat-panel {
    position: fixed;
    bottom: 260px;
    left: 24px;
    width: 340px;
    max-height: 480px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    z-index: 1100;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.mc-chat-panel.mc-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mc-chat-header {
    background: #F5A623;
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.92rem;
}

.mc-chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 50%;
    transition: background 0.15s;
}
.mc-chat-close:hover { background: rgba(0,0,0,0.15); }

.mc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    max-height: 260px;
}

.mc-msg {
    max-width: 86%;
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.45;
    word-break: break-word;
}
.mc-msg.bot {
    background: #f2f2f2;
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}
.mc-msg.user {
    background: #F5A623;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}
.mc-msg.typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #aaa;
    border-radius: 50%;
    margin: 0 2px;
    animation: mc-bounce 1s infinite;
}
.mc-msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.mc-msg.typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes mc-bounce {
    0%, 80%, 100% { transform: translateY(0);    }
    40%            { transform: translateY(-6px); }
}

.mc-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 14px 8px;
}

.mc-chip {
    background: #fff3e0;
    border: 1px solid #F5A623;
    color: #d4870a;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.mc-chip:hover { background: #ffe0b2; }

.mc-chat-input-row {
    display: flex;
    gap: 6px;
    padding: 10px 14px 12px;
    border-top: 1px solid #eee;
}

.mc-chat-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}
.mc-chat-input:focus { border-color: #F5A623; }

.mc-chat-send {
    background: #F5A623;
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.mc-chat-send:hover { background: #d4870a; }

/* ============================================================
   CONTACT FORM  –  replaces the input row, stays inside panel
============================================================ */
.mc-contact-form {
    display: none;       /* shown by JS only after a fallback response */
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px 12px;
    border-top: 1px solid #ffe0b2;
    background: #fffaf4;
    border-radius: 0 0 14px 14px;
}

.mc-contact-intro {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.mc-contact-input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.85rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.mc-contact-input:focus { border-color: #F5A623; }

.mc-contact-buttons {
    display: flex;
    gap: 8px;
}

.mc-contact-send-btn {
    flex: 1;
    background: #F5A623;
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 7px 0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.mc-contact-send-btn:hover    { background: #d4870a; }
.mc-contact-send-btn:disabled { background: #f5c97a; cursor: default; }

.mc-contact-cancel {
    background: none;
    border: 1px solid #ddd;
    color: #888;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.mc-contact-cancel:hover { border-color: #aaa; color: #555; }

.mc-contact-status {
    font-size: 0.78rem;
    min-height: 1rem;
    margin: 0;
}
.mc-contact-ok    { color: #2e7d32; }
.mc-contact-error { color: #c62828; }

@media (prefers-reduced-motion: reduce) {
    .pose, .chatbot__mascot, .pop {
        animation: none !important;
        transition: none;
    }

    .mascot-body, .mascot-shadow, .mascot-body.mc-jumping { animation: none !important; }
    .mc-chat-panel { transition: none; }
}