html {
    --agent-trigger-bottom-offset: 0px;
}

.ga-agent-widget {
    pointer-events: none;
}

.ga-agent-trigger {
    --ga-trigger-size: 52px;
    --ga-trigger-bottom: 20px;
    --ga-trigger-right: 16px;
    position: fixed;
    right: var(--ga-trigger-right, 16px);
    bottom: calc(var(--ga-trigger-bottom, 20px) + var(--agent-trigger-bottom-offset, 0px));
    width: var(--ga-trigger-size);
    height: var(--ga-trigger-size);
    border: 0;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    background: #5B2D8E;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 9990;
    box-shadow: 0 4px 20px rgba(91, 45, 142, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* Fallback: keep trigger above listing sticky CTA even if JS offset sync fails. */
body.single-at_biz_dir .ga-agent-trigger {
    bottom: calc(var(--ga-trigger-bottom, 20px) + max(var(--agent-trigger-bottom-offset, 0px), 88px));
}

.ga-agent-trigger:focus-visible {
    outline: 2px solid #F47B20;
    outline-offset: 3px;
}

.ga-agent-trigger__icon {
    position: absolute;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.ga-agent-trigger__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.ga-agent-trigger__icon--close {
    opacity: 0;
    visibility: hidden;
}

.ga-agent-trigger.is-open {
    background: #F47B20;
}

.ga-agent-trigger.is-open .ga-agent-trigger__icon--chat {
    opacity: 0;
    visibility: hidden;
}

.ga-agent-trigger.is-open .ga-agent-trigger__icon--close {
    opacity: 1;
    visibility: visible;
}

/* Ensure listing sticky CTA always stacks above trigger as required. */
.grantdetail-sticky-cta.is-visible {
    z-index: 10000;
}

/* Hide Skip's default floating trigger and tooltip so only Grantaura trigger shows. */
.skip-agent-button,
.skip-agent-tooltip {
    display: none !important;
}

@media (min-width: 768px) {
    .ga-agent-trigger {
        --ga-trigger-size: 56px;
        --ga-trigger-bottom: 28px;
        --ga-trigger-right: 24px;
    }

    .ga-agent-trigger::before {
        content: attr(data-tooltip-label);
        position: absolute;
        right: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: #5B2D8E;
        color: #FFFFFF;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        border-radius: 6px;
        padding: 9px 10px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .ga-agent-trigger:hover::before,
    .ga-agent-trigger:focus-visible::before {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ga-agent-trigger,
    .ga-agent-trigger::before,
    .ga-agent-trigger__icon {
        transition: transform 200ms ease, box-shadow 200ms ease, opacity 150ms ease, visibility 150ms ease, background-color 200ms ease;
    }

    .ga-agent-trigger__icon--chat,
    .ga-agent-trigger__icon--close {
        transition: opacity 150ms ease, visibility 150ms ease, transform 200ms ease;
    }

    .ga-agent-trigger.is-open .ga-agent-trigger__icon--chat {
        transform: scale(0.85);
    }

    .ga-agent-trigger.is-open .ga-agent-trigger__icon--close {
        transform: scale(1);
    }

    .ga-agent-trigger:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 28px rgba(91, 45, 142, 0.45), 0 0 0 2px #F47B20;
    }

    .ga-agent-trigger:active {
        transform: scale(0.95);
        box-shadow: 0 3px 14px rgba(91, 45, 142, 0.3);
    }

    .ga-agent-trigger.is-loading .ga-agent-trigger__icon {
        animation: ga-agent-icon-pulse 1.2s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ga-agent-trigger,
    .ga-agent-trigger::before,
    .ga-agent-trigger__icon {
        transition: none !important;
        animation: none !important;
    }
}

@keyframes ga-agent-icon-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.86);
        opacity: 0.7;
    }

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