/* ═══════════════════════════════════════════════════════════════════════════
   BaskyBee Chatbot — Parent Page Styles (V30 iframe edition)
   Styles ONLY: trigger button, overlay, tooltip, iframe wrapper.
   The chat window lives in baskybee-iframe.css inside the iframe document.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,300..700&display=swap');

/* ── CSS Variables ── */
:root {
    --bb-primary:     #215759;
    --bb-primary-dk:  #163a3b;
    --bb-primary-lt:  #e8f4f4;
    --bb-accent:      #2FF877;
    --bb-accent-dk:   #1fd862;
    --bb-font:        'Google Sans Flex', 'Google Sans', 'Segoe UI', sans-serif;
    --bb-trigger-size: 60px;
    --bb-z:           99999;
}

/* Reset for normal DOM elements inside baskybee-root */
.baskybee-root *,
.baskybee-root *::before,
.baskybee-root *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--bb-font) !important;
}

.baskybee-root {
    position: fixed !important;
    z-index: 99999 !important;
    bottom: 28px !important;
    left: 28px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 16px !important;
    line-height: normal !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.baskybee-root.baskybee-pos-bottom-right {
    left: auto !important;
    right: 28px !important;
}

.baskybee-root > * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Google Sans Flex', 'Google Sans', 'Segoe UI', system-ui, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════
   ANIMATED ORB TRIGGER BUTTON
   ════════════════════════════════════════════════════════════════ */

@keyframes bb-orb-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes bb-orb-glow {
    0%, 100% {
        box-shadow:
            0 0 12px 3px  rgba(47,248,119,0.15),
            0 0 24px 6px  rgba(29,77,79,0.18),
            0 6px 20px    rgba(0,0,0,0.38),
            inset 0 3px 8px   rgba(255,255,255,0.18),
            inset 0 -5px 10px rgba(0,0,0,0.45),
            inset 3px 0 8px   rgba(0,0,0,0.18),
            inset -3px 0 8px  rgba(0,0,0,0.18);
    }
    50% {
        box-shadow:
            0 0 18px 6px  rgba(47,248,119,0.25),
            0 0 34px 10px rgba(29,77,79,0.25),
            0 8px 24px    rgba(0,0,0,0.42),
            inset 0 3px 8px   rgba(255,255,255,0.22),
            inset 0 -5px 10px rgba(0,0,0,0.50),
            inset 3px 0 8px   rgba(0,0,0,0.20),
            inset -3px 0 8px  rgba(0,0,0,0.20);
    }
}

@keyframes bb-specular-drift {
    0%, 100% { opacity: 0.75; transform: translate(0px,  0px); }
    40%       { opacity: 0.95; transform: translate(2px, -2px); }
    70%       { opacity: 0.60; transform: translate(-2px, 1px); }
}

@keyframes bb-inner-swirl {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}

.baskybee-trigger {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.10) 0%, transparent 52%),
        radial-gradient(ellipse at 62% 72%, rgba(0,0,0,0.48) 0%, transparent 58%),
        linear-gradient(135deg, #0a2e2f 0%, #1D4D4F 22%, #2FF877 44%, #00b85c 58%, #1D4D4F 78%, #0f3a3c 100%) !important;
    background-size: 100% 100%, 100% 100%, 300% 300% !important;
    animation: bb-orb-shift 8s ease-in-out infinite, bb-orb-glow 4s ease-in-out infinite !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(47,248,119,0.40) !important;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease !important;
    position: relative !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overflow: hidden !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform !important;
    touch-action: manipulation !important;
}

.baskybee-trigger::before {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg, rgba(47,248,119,0.20) 55deg, transparent 110deg,
        rgba(29,77,79,0.28) 185deg, rgba(0,180,80,0.16) 238deg,
        transparent 295deg, rgba(47,248,119,0.14) 340deg, transparent 360deg
    ) !important;
    animation: bb-inner-swirl 14s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.baskybee-trigger::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 180deg at 45% 55%,
        transparent 0deg, rgba(0,200,100,0.16) 65deg, transparent 125deg,
        rgba(47,248,119,0.18) 205deg, transparent 265deg,
        rgba(29,77,79,0.22) 325deg, transparent 360deg
    ) !important;
    animation: bb-inner-swirl 20s linear infinite reverse !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bb-orb-specular {
    position: absolute !important;
    width: 20px !important;
    height: 16px !important;
    top: 7px !important;
    left: 9px !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse at 40% 35%,
        rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.12) 52%, transparent 80%
    ) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: bb-specular-drift 6s ease-in-out infinite !important;
}

.bb-orb-core-glow {
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    bottom: 5px !important;
    right: 5px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
        rgba(47,248,119,0.28) 0%, rgba(0,160,70,0.10) 55%, transparent 80%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    animation: bb-inner-swirl 20s linear infinite reverse !important;
}

.baskybee-trigger-icon {
    position: relative !important;
    z-index: 4 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.50)) !important;
}

@keyframes bb-hover {
    0%, 100% { transform: translateY(0)    rotate(0deg);  }
    25%       { transform: translateY(-2px) rotate(-2deg); }
    75%       { transform: translateY(1px)  rotate(1.5deg); }
}

.baskybee-trigger .baskybee-bee-svg {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: block !important;
    position: relative !important;
    z-index: 4 !important;
    animation: bb-hover 3s ease-in-out infinite !important;
    overflow: visible !important;
    will-change: transform !important;
}

.baskybee-trigger .baskybee-icon-img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    display: block !important;
    position: relative !important;
    z-index: 4 !important;
}

.baskybee-trigger .baskybee-icon-emoji {
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 4 !important;
}

.baskybee-trigger:hover {
    transform: scale(1.08) translateY(-2px) !important;
    border-color: rgba(47,248,119,0.70) !important;
}

.baskybee-trigger:active {
    transform: scale(0.95) !important;
}

.baskybee-pulse-ring {
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(47,248,119,0.75) !important;
    animation: bb-pulse 2.5s ease-out infinite !important;
    opacity: 0 !important;
    pointer-events: none !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform, opacity !important;
}

.baskybee-pulse-ring--delayed {
    animation-delay: 1.2s !important;
}

@keyframes bb-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   TOOLTIP BUBBLE
   ════════════════════════════════════════════════════════════════ */
.baskybee-tooltip {
    position: absolute !important;
    bottom: 72px !important;
    left: 0 !important;
    background: #215759 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: 0 4px 16px rgba(33,87,89,0.3) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(6px) scale(0.95) !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
    max-width: 220px !important;
    white-space: normal !important;
    min-width: 140px !important;
    z-index: 100000 !important;
}

.baskybee-pos-bottom-right .baskybee-tooltip {
    left: auto !important;
    right: 0 !important;
    border-radius: 16px 16px 4px 16px !important;
}

.baskybee-tooltip.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.baskybee-tooltip-arrow {
    position: absolute !important;
    bottom: -6px !important;
    left: 16px !important;
    width: 12px !important;
    height: 8px !important;
    background: #215759 !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

.baskybee-pos-bottom-right .baskybee-tooltip-arrow {
    left: auto !important;
    right: 16px !important;
}

/* ════════════════════════════════════════════════════════════════
   OVERLAY (mobile backdrop — sits behind iframe, above page)
   ════════════════════════════════════════════════════════════════ */
.baskybee-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

.baskybee-overlay.is-open {
    display: block !important;
    opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   IFRAME WRAPPER + IFRAME
   The iframe is positioned fixed in the page, exactly mirroring
   the dimensions and position of the old .baskybee-window.
   It animates with the same open/close transform.
   ════════════════════════════════════════════════════════════════ */
#baskybee-iframe-wrap {
    position: fixed !important;
    bottom: 100px !important;
    left: 28px !important;
    width: 400px !important;
    height: 620px !important;
    max-height: calc(100vh - 120px) !important;
    z-index: 100001 !important;
    pointer-events: none !important;
    transform: scale(0.85) translateY(20px) !important;
    transform-origin: bottom left !important;
    opacity: 0 !important;
    transition:
        transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
        opacity   0.25s ease !important;
    will-change: transform, opacity !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: 0 20px 60px rgba(33,87,89,0.18), 0 4px 16px rgba(33,87,89,0.1) !important;
}

.baskybee-pos-bottom-right #baskybee-iframe-wrap {
    left: auto !important;
    right: 28px !important;
    transform-origin: bottom right !important;
}

#baskybee-iframe-wrap.bb-iframe-open {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Fullscreen state — desktop */
#baskybee-iframe-wrap.bb-iframe-fullscreen {
    width: 90vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    top: 5vh !important;
    left: 5vw !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 20px !important;
    transform: scale(1) translateY(0) !important;
    transition:
        width   0.38s cubic-bezier(0.4, 0, 0.2, 1),
        height  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        top     0.38s cubic-bezier(0.4, 0, 0.2, 1),
        left    0.38s cubic-bezier(0.4, 0, 0.2, 1),
        bottom  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        right   0.38s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.38s ease !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.12) !important;
}

.baskybee-pos-bottom-right #baskybee-iframe-wrap.bb-iframe-fullscreen {
    left: 5vw !important;
    right: auto !important;
}

#baskybee-chat-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
    background: transparent !important;
}

/* ── Accessibility ── */
.baskybee-trigger:focus-visible {
    outline: 2px solid #2FF877 !important;
    outline-offset: 2px !important;
}

/* ── Icon variants ── */
.baskybee-icon-img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

.baskybee-icon-emoji {
    font-size: 26px !important;
    line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — full-screen iframe
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .baskybee-root {
        bottom: 20px !important;
        left: 20px !important;
    }

    .baskybee-root.baskybee-pos-bottom-right {
        right: 20px !important;
        left: auto !important;
    }

    #baskybee-iframe-wrap {
        /* Become full-screen on mobile, slide up from bottom */
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        transform: translateY(100%) !important;
        transform-origin: center bottom !important;
        /* opacity:0 while closed — prevents the translated layer from
           peeking through at the bottom of the screen during scroll/
           visualViewport shifts when the tooltip fires on mobile. */
        opacity: 0 !important;
        transition:
            transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
            opacity 0s 0.35s !important; /* hide opacity instantly AFTER slide-out finishes */
    }

    @supports (-webkit-touch-callout: none) {
        #baskybee-iframe-wrap {
            height: -webkit-fill-available !important;
            max-height: -webkit-fill-available !important;
        }
    }

    #baskybee-iframe-wrap.bb-iframe-open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition:
            transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
            opacity 0s !important; /* make visible instantly on open, before slide-in */
    }

    #baskybee-iframe-wrap.bb-iframe-fullscreen {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
    }
}