/* ==========================================================================
   Gradeflow 3D Glowing Orb AI Chatbot Widget Stylesheet
   ========================================================================== */

/* Custom Scrollbar for Chat Window */
.chat-scroll::-webkit-scrollbar {
    width: 6px;
}

.chat-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.chat-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

/* AI 3D Glowing Gradient Orb Mascot Avatar (Standard 38px) */
.ai-orb-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    box-shadow: 0 3px 10px rgba(165, 148, 249, 0.4), inset 0 1.5px 3px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 1.2s ease-in-out;
}

.ai-orb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    box-shadow: 0 4px 14px rgba(165, 148, 249, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 1.2s ease-in-out;
}

.ai-orb-avatar-md {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    box-shadow: 0 6px 18px rgba(165, 148, 249, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 1.2s ease-in-out;
}

.ai-orb-avatar-lg {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    box-shadow: 0 10px 28px rgba(165, 148, 249, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: orb-float 4s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 1.2s ease-in-out;
}

/* Fluid Purple Theme Color Transition Layer */
.ai-orb-avatar::after,
.ai-orb-avatar-sm::after,
.ai-orb-avatar-md::after,
.ai-orb-avatar-lg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    filter: sepia(1) hue-rotate(230deg) saturate(3.2) brightness(0.85);
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

/* Fluid Red Theme Color Transition Layer (Angry State) */
.ai-orb-avatar::before,
.ai-orb-avatar-sm::before,
.ai-orb-avatar-md::before,
.ai-orb-avatar-lg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff70a6 0%, #ff9770 25%, #ffd670 45%, #70d6ff 70%, #a594f9 100%);
    filter: sepia(1) hue-rotate(325deg) saturate(6.5) brightness(0.95);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

/* Cute Glowing White Eyes Overlay */
.ai-orb-eyes {
    display: flex;
    gap: 4px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.ai-orb-eye {
    width: 4px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
    animation: orb-blink 4s infinite ease-in-out;
    transition: all 0.2s ease-in-out;
}

.ai-orb-eyes-sm {
    display: flex;
    gap: 3px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.ai-orb-eye-sm {
    width: 3px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
    animation: orb-blink 4s infinite ease-in-out;
    transition: all 0.2s ease-in-out;
}

.ai-orb-eyes-lg {
    display: flex;
    gap: 7px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.ai-orb-eye-lg {
    width: 7px;
    height: 14px;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 1);
    animation: orb-blink 4s infinite ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Orb Floating Animation */
@keyframes orb-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Original Simple Eye Blinking Animation */
@keyframes orb-blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mascot Dynamic Reaction State Classes (Pure Eye Animations)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. SMILING / HAPPY REACTION (.reaction-smile) - Static Smile */
.reaction-smile .ai-orb-eye,
.reaction-smile .ai-orb-eye-lg,
.reaction-smile .ai-orb-eye-sm {
    height: 4px !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
    border-top: 2.5px solid #ffffff !important;
    box-shadow: none !important;
    transform: scaleY(1.2) !important;
    animation: none !important;
}
.reaction-smile .ai-orb-eye-lg {
    height: 8px !important;
    border-top: 3.5px solid #ffffff !important;
}
.reaction-smile .ai-orb-eye-sm {
    height: 3px !important;
    border-top: 2px solid #ffffff !important;
}

/* 2. WINKING REACTION (.reaction-wink) - Left Eye Winks Flat, Right Eye Stays Normal */
.reaction-wink .ai-orb-eye-left {
    transform: scaleY(0.1) scaleX(1.4) !important;
    animation: none !important;
}
.reaction-wink .ai-orb-eye-lg.ai-orb-eye-left {
    transform: scaleY(0.1) scaleX(1.4) !important;
    animation: none !important;
}
.reaction-wink .ai-orb-eye-sm.ai-orb-eye-left {
    transform: scaleY(0.1) scaleX(1.4) !important;
    animation: none !important;
}

/* 3. SHRIKI / SQUINTING / FOCUS REACTION (.reaction-squint / .reaction-shriki) - Static Squint */
.reaction-squint .ai-orb-eyes,
.reaction-squint .ai-orb-eyes-lg,
.reaction-squint .ai-orb-eyes-sm,
.reaction-shriki .ai-orb-eyes,
.reaction-shriki .ai-orb-eyes-lg,
.reaction-shriki .ai-orb-eyes-sm {
    animation: none !important;
}
.reaction-squint .ai-orb-eye,
.reaction-squint .ai-orb-eye-lg,
.reaction-squint .ai-orb-eye-sm,
.reaction-shriki .ai-orb-eye,
.reaction-shriki .ai-orb-eye-lg,
.reaction-shriki .ai-orb-eye-sm {
    height: 3px !important;
    width: 7px !important;
    border-radius: 999px !important;
    transform: scaleY(1) !important;
    animation: none !important;
    box-shadow: 0 0 6px #ffffff !important;
}
.reaction-squint .ai-orb-eye-lg,
.reaction-shriki .ai-orb-eye-lg {
    height: 5px !important;
    width: 12px !important;
}
.reaction-squint .ai-orb-eye-sm,
.reaction-shriki .ai-orb-eye-sm {
    height: 2px !important;
    width: 5px !important;
}

/* 4. THINKING / SCANNING REACTION (.reaction-thinking) - Static Closed / Shrunk Eyes */
.reaction-thinking .ai-orb-eyes,
.reaction-thinking .ai-orb-eyes-lg,
.reaction-thinking .ai-orb-eyes-sm {
    animation: none !important;
}
.reaction-thinking .ai-orb-eye,
.reaction-thinking .ai-orb-eye-lg,
.reaction-thinking .ai-orb-eye-sm {
    height: 2px !important;
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(139, 92, 246, 0.6) !important;
    animation: none !important;
    transform: scaleY(0.1) scaleX(1.3) !important;
}
.reaction-thinking .ai-orb-eye {
    width: 6px !important;
}
.reaction-thinking .ai-orb-eye-lg {
    width: 10px !important;
}
.reaction-thinking .ai-orb-eye-sm {
    width: 4px !important;
}

/* Disable mascot floating animation during active states */
.ai-orb-avatar-lg.reaction-thinking,
.ai-orb-avatar-lg.reaction-smile,
.ai-orb-avatar-lg.reaction-shriki,
.ai-orb-avatar-lg.reaction-squint {
    animation: none !important;
}

/* 5. SURPRISED / EXCITED REACTION (.reaction-surprised) */
.reaction-surprised .ai-orb-eye,
.reaction-surprised .ai-orb-eye-lg,
.reaction-surprised .ai-orb-eye-sm {
    width: 6px !important;
    height: 9px !important;
    border-radius: 50% !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 10px #ffffff, 0 0 16px rgba(255, 255, 255, 0.9) !important;
    animation: none !important;
}
.reaction-surprised .ai-orb-eye-lg {
    width: 10px !important;
    height: 15px !important;
}
.reaction-surprised .ai-orb-eye-sm {
    width: 4px !important;
    height: 6px !important;
}

/* Keyframe Animations */
@keyframes happy-bounce {
    0% { transform: translateY(0) scaleY(1.2); }
    100% { transform: translateY(-2px) scaleY(1.35); }
}

@keyframes shriki-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.2) rotate(3deg); }
}

@keyframes closed-pulse {
    0% {
        transform: scaleY(0.1) scaleX(0.85);
        opacity: 0.65;
    }
    100% {
        transform: scaleY(0.1) scaleX(1.3);
        opacity: 1;
    }
}

/* Click / Bounce Animations */
@keyframes clicked-bounce-pulse {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(0.82, 1.25);
    }
    30% {
        transform: scale(1.18, 0.82);
    }
    45% {
        transform: scale(0.92, 1.08);
    }
    60% {
        transform: scale(1.05, 0.95);
    }
    75% {
        transform: scale(0.98, 1.02);
    }
    100% {
        transform: scale(1);
    }
}

.bot-squish {
    animation: clicked-bounce-pulse 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Purple Theme Transition on Chat Open & Chat containers */
.purple-theme {
    box-shadow: 0 10px 28px rgba(140, 112, 255, 0.45), inset 0 3px 6px rgba(255, 255, 255, 0.85) !important;
}

.purple-theme::after,
#floating-chat-modal .ai-orb-avatar::after,
#floating-chat-modal .ai-orb-avatar-sm::after,
#floating-chat-modal .ai-orb-avatar-md::after,
#floating-chat-modal .ai-orb-avatar-lg::after {
    opacity: 1 !important;
}

#floating-chat-modal .ai-orb-avatar {
    box-shadow: 0 4px 14px rgba(140, 112, 255, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}
#floating-chat-modal .ai-orb-avatar-sm {
    box-shadow: 0 3px 10px rgba(140, 112, 255, 0.4), inset 0 1.5px 3px rgba(255, 255, 255, 0.7) !important;
}
#floating-chat-modal .ai-orb-avatar-md {
    box-shadow: 0 6px 18px rgba(140, 112, 255, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.75) !important;
}
#floating-chat-modal .ai-orb-avatar-lg {
    box-shadow: 0 10px 28px rgba(140, 112, 255, 0.5), inset 0 3px 6px rgba(255, 255, 255, 0.85) !important;
}

/* Easter Egg: Angry Red Theme Transition on rapid clicks */
.angry-theme {
    box-shadow: 0 12px 32px rgba(255, 0, 0, 0.65), inset 0 3px 6px rgba(255, 255, 255, 0.9) !important;
}

.angry-theme::before {
    opacity: 1 !important;
}

/* Expressive slanting angry eyes */
.angry-theme .ai-orb-eye-left {
    transform: rotate(30deg) translateY(0.5px) !important;
    height: 6px !important;
    border-radius: 4px 2px 2px 4px !important;
}
.angry-theme .ai-orb-eye-right {
    transform: rotate(-30deg) translateY(0.5px) !important;
    height: 6px !important;
    border-radius: 2px 4px 4px 2px !important;
}

/* ═══ Coolers (Sunglasses) & Sparkles Celebration System ═══ */
/* ═══ Coolers (Sunglasses) & Sparkles Celebration System ═══ */
.ai-orb-coolers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -120%) scale(0) rotate(-15deg);
    width: 82%;
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.ai-orb-coolers.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.ai-orb-lens {
    width: 44%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 2px 2px 8px 8px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
    position: relative;
}

.ai-orb-bridge {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 22%;
    height: 12%;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
}

/* Eye and status dot suppression while celebrating */
.has-coolers .ai-orb-eyes,
.has-coolers .ai-orb-eyes-sm,
.has-coolers .ai-orb-eyes-lg {
    opacity: 0 !important;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.has-coolers > span.absolute {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 4-point thin silver star sparkle */
.ai-orb-sparkle {
    position: absolute;
    top: 10%;
    right: -2%;
    width: 20%;
    height: 20%;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transform: scale(0) rotate(-45deg);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.ai-orb-sparkle.active {
    opacity: 1;
    transform: scale(1) rotate(135deg);
}

.sparkle-star {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #ffffff 20%, #e2e8f0 50%, transparent 80%);
    position: relative;
    animation: sparkle-blink 2s infinite ease-in-out;
}

.sparkle-star::before,
.sparkle-star::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    border-radius: 9999px;
    box-shadow: 0 0 6px #ffffff;
}

.sparkle-star::before {
    top: 0;
    left: 46%;
    width: 8%;
    height: 100%;
}

.sparkle-star::after {
    top: 46%;
    left: 0;
    width: 100%;
    height: 8%;
}

@keyframes sparkle-blink {
    0%, 43.75%, 56.25%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    }
    50% {
        transform: scale(0.1) rotate(45deg);
        opacity: 0;
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
}

/* ═══ Mobile & Large Screen Responsive Refinements ═══ */

/* ── Mobile: full-screen chatbot takeover ── */
@media (max-width: 640px) {

    /* Widget wrapper fills entire viewport */
    #floating-chat-widget.chat-widget-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        z-index: 99990 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Modal fills the entire screen, uses flex column */
    #floating-chat-widget.chat-widget-open #floating-chat-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        height: -webkit-fill-available !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        z-index: 99999 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* Account for notch / safe area */
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Header: fixed height, never shrinks */
    #floating-chat-widget.chat-widget-open #floating-chat-modal > div:first-child {
        flex-shrink: 0 !important;
    }

    /* Messages area: grows, scrolls, never overflows */
    #floating-chat-widget.chat-widget-open #modal-chat-messages {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Input area & lead form: fixed at bottom, never shrinks */
    #floating-chat-widget.chat-widget-open #modal-input-area,
    #floating-chat-widget.chat-widget-open #modal-lead-form-area {
        flex-shrink: 0 !important;
        padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    }

    /* Hide trigger button & scroll prompt when modal is open */
    #floating-chat-widget.chat-widget-open #chat-trigger-btn,
    #floating-chat-widget.chat-widget-open #scroll-prompt-container {
        display: none !important;
    }

    /* Purple overlay active on avatars inside open modal */
    #floating-chat-widget.chat-widget-open #floating-chat-modal .ai-orb-avatar::after,
    #floating-chat-widget.chat-widget-open #floating-chat-modal .ai-orb-avatar-sm::after,
    #floating-chat-widget.chat-widget-open #floating-chat-modal .ai-orb-avatar-md::after,
    #floating-chat-widget.chat-widget-open #floating-chat-modal .ai-orb-avatar-lg::after {
        opacity: 1 !important;
    }
    #floating-chat-widget.chat-widget-open #floating-chat-modal .ai-orb-avatar {
        box-shadow: 0 4px 14px rgba(140, 112, 255, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
    }

    /* Slightly larger tap targets for inputs on mobile */
    #floating-chat-modal input[type="text"],
    #floating-chat-modal input[type="email"],
    #floating-chat-modal input[type="tel"] {
        font-size: 16px !important; /* prevents iOS zoom */
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #floating-chat-modal #modal-chat-input {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
}

/* ═══ Bot Bubble & Themed Content Formatting ═══ */

/* Bot message bubble wrapper */
.bot-bubble {
    background: rgba(245, 243, 255, 0.85);
    padding: 12px 14px;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08);
    font-size: 12px;
    color: #1e293b;
    border: 1px solid rgba(196, 181, 253, 0.5);
    line-height: 1.65;
    font-weight: 500;
    font-family: "Inter", "Segoe UI", ui-sans-serif, sans-serif;
}

/* Paragraph inside bot bubble */
.bot-para {
    margin: 0 0 9px 0;
    color: #334155;
    line-height: 1.7;
    font-weight: 500;
}
.bot-para:last-child { margin-bottom: 0; }

/* Bold text inside bot messages */
.bot-bold {
    font-weight: 700;
    color: #1e293b;
}

/* Themed bullet list */
.bot-list {
    margin: 8px 0 6px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bot-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
}

/* Lucide check-circle-2 icon for bullet points */
.bot-bullet-icon,
svg.bot-bullet-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #7c3aed;
    stroke: #7c3aed;
    stroke-width: 1.75;
    display: block;
}

.bot-list-text {
    color: #334155;
    font-weight: 500;
    flex: 1;
}

/* ═══ Lead Echo Card (user-side "Details Shared" confirmation) ═══ */

.lead-echo-card {
    align-self: flex-end;
    max-width: 78%;
    margin-left: auto;
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 60%, #6d28d9 100%);
    border-radius: 14px 14px 4px 14px;
    padding: 11px 14px 12px;
    box-shadow: 0 4px 16px rgba(109, 40, 217, 0.3);
    font-family: "Inter", "Segoe UI", ui-sans-serif, sans-serif;
}

.lead-echo-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
    margin-bottom: 9px;
}

.lead-echo-check-icon {
    width: 11px;
    height: 11px;
    stroke: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.lead-echo-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-echo-field {
    display: flex;
    align-items: center;
    gap: 9px;
}

.lead-echo-field-icon {
    width: 12px;
    height: 12px;
    stroke: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.lead-echo-field-value {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    word-break: break-all;
    line-height: 1.4;
}


/* ═══ Typography Baseline for Chat (no emoji fonts) ═══ */
.bot-bubble,
#chat-messages,
#modal-chat-messages {
    font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}