/* =========================================================
   OAB Consultation Orb
   Always-loaded shell / microinteraction
   ========================================================= */
/* =========================================================
   INITIAL ORB ENTRANCE
   ========================================================= */

#aiOrb.oab-orb-shell {
    animation:
        oabOrbEnter
        720ms
        cubic-bezier(.16, 1, .3, 1)
        120ms
        both;
}

@keyframes oabOrbEnter {
    0% {
        opacity: 0;
        transform:
            translateY(12px)
            scale(.92);
    }

    62% {
        opacity: 1;
        transform:
            translateY(-2px)
            scale(1.025);
    }

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

/* =========================================================
   TOOLTIP IDLE MOTION
   Subtle repeating "alive" motion while visible
   ========================================================= */

/* =========================================================
   TOOLTIP IDLE MOTION
   Slow, continuous, subtle "alive" motion
   ========================================================= */
/* =========================================================
   TOOLTIP ALIVE MOTION
   Whole bubble + arrow move together
   ========================================================= */

.oab-orb-tooltip-text {
    display: inline-block;
    transform-origin: center;
}


/*
 * The whole bubble gently lifts, settles,
 * does one tiny secondary lift, then rests.
 *
 * Because we're animating `bottom`, the arrow
 * naturally moves with the tooltip too.
 */
.oab-orb-tooltip.is-visible {
    animation:
        oabTooltipAlive
        2.4s
        cubic-bezier(.22, 1, .36, 1)
        350ms
        infinite;
}

@keyframes oabTooltipAlive {
    0%,
    20%,
    78%,
    100% {
        translate: 0 0;
    }

    /* Main lift */
    34% {
        translate: 0 -4px;
    }

    /* Slight overshoot downward */
    46% {
        translate: 0 0.8px;
    }

    /* Smaller second lift */
    57% {
        translate: 0 -2px;
    }

    /* Settle */
    68% {
        translate: 0 0;
    }
}

/*
 * Text follows the physical motion,
 * but by a much smaller amount.
 */
.oab-orb-tooltip.is-visible .oab-orb-tooltip-text {
    animation:
        oabTooltipTextAlive
        2.4s
        cubic-bezier(.22, 1, .36, 1)
        350ms
        infinite;
}

@keyframes oabTooltipTextAlive {
    0%,
    20%,
    78%,
    100% {
        transform: translateY(0) scale(1);
    }

    34% {
        transform:
            translateY(-1px)
            scale(1.018);
    }

    46% {
        transform:
            translateY(.3px)
            scale(.997);
    }

    57% {
        transform:
            translateY(-.5px)
            scale(1.008);
    }

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

/*
 * Text has a slightly different rhythm.
 * This makes the bubble feel alive without looking bouncy.
 */
.oab-orb-tooltip.is-visible .oab-orb-tooltip-text {
    animation:
        oabTooltipTextBreath
        5.8s
        cubic-bezier(.4, 0, .2, 1)
        700ms
        infinite;
}

@keyframes oabTooltipBreath {
    0%,
    16%,
    58%,
    100% {
        translate: 0 0;
    }

    25% {
        translate: 0 -2.5px;
    }

    34% {
        translate: 0 -1px;
    }

    42% {
        translate: 0 -1.8px;
    }

    50% {
        translate: 0 0;
    }
}

@keyframes oabTooltipTextBreath {
    0%,
    16%,
    58%,
    100% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform:
            translateY(-1px)
            scale(1.018);
    }

    34% {
        transform:
            translateY(.25px)
            scale(.998);
    }

    42% {
        transform:
            translateY(-.5px)
            scale(1.008);
    }

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






#aiOrb.oab-orb-shell {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 99999;

    box-sizing: border-box;

    width: 122px;
    height: 52px;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    direction: rtl;

    overflow: hidden;
    cursor: pointer;

    /*
     * ORIGINAL OAB GLASS APPEARANCE
     */
    --orb-glass: #ff3d3d;
    --orb-light: #fff;
    --orb-dark: #8b0000;
    --orb-glass-reflex-dark: 1;
    --orb-glass-reflex-light: 1;
    --orb-saturation: 150%;

    background-color:
        color-mix(
            in srgb,
            var(--orb-glass) 12%,
            transparent
        ) !important;

    backdrop-filter:
        blur(8px)
        saturate(var(--orb-saturation));

    -webkit-backdrop-filter:
        blur(8px)
        saturate(var(--orb-saturation));

    box-shadow:
        inset 0 0 0 1px
            color-mix(
                in srgb,
                var(--orb-light)
                calc(var(--orb-glass-reflex-light) * 10%),
                transparent
            ),

        inset 1.8px 3px 0 -2px
            color-mix(
                in srgb,
                var(--orb-light)
                calc(var(--orb-glass-reflex-light) * 90%),
                transparent
            ),

        inset -2px -2px 0 -2px
            color-mix(
                in srgb,
                var(--orb-light)
                calc(var(--orb-glass-reflex-light) * 80%),
                transparent
            ),

        inset -3px -8px 1px -6px
            color-mix(
                in srgb,
                var(--orb-light)
                calc(var(--orb-glass-reflex-light) * 60%),
                transparent
            ),

        inset -.3px -1px 4px 0
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 12%),
                transparent
            ),

        inset -1.5px 2.5px 0 -2px
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 20%),
                transparent
            ),

        inset 0 3px 4px -2px
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 20%),
                transparent
            ),

        inset 2px -6.5px 1px -4px
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 10%),
                transparent
            ),

        0 1px 5px 0
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 10%),
                transparent
            ),

        0 6px 16px 0
            color-mix(
                in srgb,
                var(--orb-dark)
                calc(var(--orb-glass-reflex-dark) * 8%),
                transparent
            ) !important;

    /*
     * Pill initially.
     * Becomes 50% when collapsed.
     */
    border-radius: 26px;

    color: var(--color-text-body, #3b352f);

    will-change: width, border-radius;

    transition:
        width 680ms cubic-bezier(.22, 1, .36, 1),
        border-radius 620ms cubic-bezier(.34, 1.35, .64, 1),
        gap 500ms cubic-bezier(.16, 1, .3, 1),
        padding 620ms cubic-bezier(.34, 1.35, .64, 1),
        opacity 300ms ease,
        background-color 300ms ease,
        transform 300ms cubic-bezier(.16, 1, .3, 1);
}

#aiOrb.oab-orb-shell:hover {
    transform: translateY(-5px) !important;

    background-color:
        color-mix(
            in srgb,
            var(--color-primary, #d73f3f) 15%,
            transparent
        ) !important;

    backdrop-filter:
        blur(12px)
        saturate(180%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(180%) !important;
}
/* Headset icon */
#aiOrb.oab-orb-shell svg {
    display: block;

    width: 24px;
    height: 24px;

    min-width: 24px;
    flex: 0 0 24px;

    stroke: #d73f3f;

    transform-origin: center;
}

#aiOrb.oab-orb-shell .oab-orb-label {
    direction: rtl;

    display: block;

    max-width: 70px;

    white-space: nowrap;
    overflow: hidden;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    opacity: 1;

    transform: translateX(0) scale(1);

    /*
     * Collapse toward the RIGHT,
     * where the headset lives.
     */
    transform-origin: right center;

    transition:
        opacity 170ms ease,
        max-width 500ms cubic-bezier(.16, 1, .3, 1),
        transform 500ms cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
   COLLAPSED STATE
   Left edge stays where it is.
   Right edge springs toward the left.
   ========================================================= */

#aiOrb.oab-orb-shell.is-collapsed {
    width: 52px;

    padding-left: 13px;
    padding-right: 13px;

    gap: 0;
    border-radius: 50%;
}

#aiOrb.oab-orb-shell.is-collapsed .oab-orb-label {
    max-width: 0;

    opacity: 0;

    /*
     * Text is on LEFT of icon.
     * Move it RIGHT, toward the icon,
     * while it disappears.
     */
    transform:
        translateX(9px)
        scale(.96);
}

/*
 * Tiny secondary settle on the icon.
 * Gives the collapse a more physical feeling.
 */
#aiOrb.oab-orb-shell.is-collapsed svg {
    animation:
        oabOrbIconSettle
        720ms
        cubic-bezier(.34, 1.56, .64, 1)
        both;
}


@keyframes oabOrbIconSettle {
    0% {
        transform: scale(1);
    }

    42% {
        transform: scale(.88);
    }

    72% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}



/* =========================================================
   TOOLTIP
   IMPORTANT:
   It is LEFT aligned with the orb,
   NOT centered above it.
   It therefore grows toward the right.
   ========================================================= */

.oab-orb-tooltip {
    position: fixed;

    left: 24px;
    --oab-tooltip-bottom: 87px;
    bottom: var(--oab-tooltip-bottom);

    z-index: 99998;

    box-sizing: border-box;

    width: max-content;
    max-width: calc(100vw - 48px);

    padding: 9px 12px;

    direction: rtl;
    text-align: right;

    white-space: nowrap;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 550;

   color: #342d2a;

    background:
        linear-gradient(
            135deg,
            rgba(255, 252, 248, 0.88),
            rgba(246, 241, 236, 0.84)
        );

    border: 1px solid rgba(92, 74, 66, 0.13);

    backdrop-filter:
        blur(18px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(130%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 5px 14px rgba(62, 48, 42, 0.09),
        0 14px 30px rgba(62, 48, 42, 0.08);

    border-radius: 14px;



    /*
     * Starts slightly below and smaller.
     * transform-origin being bottom-left is important
     * because that's where the orb is.
     */
    transform-origin: bottom left;

    opacity: 0;

    transform:
        translateY(6px)
        scale(.975);
    
    filter: blur(1.5px);

    pointer-events: none;

    will-change: opacity, transform, filter;

    transition:
        opacity 380ms ease,
        transform 560ms cubic-bezier(.16, 1, .3, 1),
        filter 420ms ease;
}


/* Little speech-bubble arrow */
.oab-orb-tooltip::after {
    content: "";

    position: absolute;

    /*
     * Places arrow roughly above the center
     * of the collapsed 52px orb.
     */
    left: 22px;
    bottom: -4px;

    width: 8px;
    height: 8px;
    background: rgba(248, 243, 238, 0.90);

    box-shadow:
        1px 1px 0 rgba(92, 74, 66, 0.06);
    transform: rotate(45deg);

    border-radius: 1px;
}


/* Visible state */
.oab-orb-tooltip.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   MOBILE
   Existing widget uses 20px from the left.
   Match it exactly.
   ========================================================= */

@media (max-width: 768px) {

    #aiOrb.oab-orb-shell {
        left: 20px;
        bottom: 20px;
    }

      .oab-orb-tooltip {
       --oab-tooltip-bottom: 83px;

        left: 20px;
        bottom: var(--oab-tooltip-bottom);
        max-width: calc(100vw - 40px);
    }

   
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .oab-orb-tooltip.is-visible,
    .oab-orb-tooltip.is-visible .oab-orb-tooltip-text {
        animation: none !important;
    }
    #aiOrb.oab-orb-shell,
    #aiOrb.oab-orb-shell .oab-orb-label,
    .oab-orb-tooltip {
        transition-duration: 1ms !important;
    }

    #aiOrb.oab-orb-shell.is-collapsed svg {
        animation: none !important;
    }
}

/* =========================================================
   LANDING-SPECIFIC FAQ CARD
   ========================================================= */

#aiPanel
.support-card.support-card--landing-faq {
    background:
        linear-gradient(
            135deg,
            rgba(255, 245, 242, 0.86),
            rgba(255, 255, 255, 0.68)
        );

    border:
        1px solid
        rgba(215, 63, 63, 0.14);

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.82),
        0 5px 16px
            rgba(108, 65, 58, 0.06);

    position: relative;
}


/*
 * Tiny accent instead of making
 * the entire card aggressively red.
 */
#aiPanel
.support-card.support-card--landing-faq::before {
    content: "";

    position: absolute;

    right: 0;
    top: 13px;
    bottom: 13px;

    width: 3px;

    border-radius:
        999px 0 0 999px;

    background:
        rgba(215, 63, 63, 0.72);
}


#aiPanel
.support-card.support-card--landing-faq
.sc-title {
    color:
        var(
            --color-primary,
            #d73f3f
        );
}


#aiPanel
.support-card.support-card--landing-faq:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255, 239, 235, 0.95),
            rgba(255, 255, 255, 0.82)
        );

    border-color:
        rgba(215, 63, 63, 0.22);
}