/* =========================================================================
                   Accessibility Utilities (WCAG 2.2)
   ========================================================================= */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hyper-speed-chat-main *:focus-visible {
    outline: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%) solid 1px !important;
    box-shadow: var(--ai-tile-card-shadow-hover, var(--ai-carousel-hover-shadow, 0 8px 24px rgba(196, 255, 14, 0.25))) !important;
}

html.ai-chat-scroll-locked,
body.ai-chat-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: 100% !important;
}

/* =========================================================================
                Multi-Tenant Brand & Layout Configuration Hooks
   ========================================================================= */
.hyper-speed-chat-main {
    display: inline-flex !important;
    position: relative !important;
    align-items: center;
    height: 100%;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: var(--ai-font-stack);
    z-index: 2147483646 !important;
    isolation: isolate !important;
    width: auto !important;
    max-width: 100% !important;

    /* Tile defaults (can be overridden per brand below) */
    --ai-color-primary: #000000;
    --ai-color-secondary: #ffffff;
    --ai-color-accent: #edfe52;
    --ai-color-tertiary: #111111;
    --ai-tile-card-radius: 10px;
    --ai-tile-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ai-tile-card-shadow-hover: var(--ai-carousel-hover-shadow, 0 8px 24px rgba(196, 255, 14, 0.25));
    --ai-tile-price-pill-radius: 2px;
    --ai-tile-arrow-size-desktop: 20px;
    --ai-tile-arrow-size-mobile: 18px;
    --ai-tile-arrow-shift: 6px;
    --ai-tile-card-width-desktop: 220px;
    --ai-tile-card-width-mobile: 172px;
    --ai-tile-card-border-width: 1.245px;
    --ai-tile-card-border-color: var(--ai-card-border);
    --ai-tile-content-padding: 20px;
    --ai-tile-content-gap: 8px;
    --ai-tile-rating-gap: 3px;
    --ai-tile-pricing-gap: 6px;
    --ai-tile-standard-price-size: 14px;
    --ai-tile-standard-price-line-height: 1.4;
    --ai-tile-standard-price-color: rgba(0, 0, 0, 0.80);
    --ai-scrollbar-thumb: rgba(0, 0, 0, 0.32);
    --ai-scrollbar-track: transparent;
    --ai-scrollbar-size: 6px;
    --ai-scroll-bottom-btn-size: 34px;
    --ai-scroll-bottom-btn-bg: var(--ai-color-primary);
    --ai-scroll-bottom-btn-color: var(--ai-color-secondary);
    --ai-scroll-bottom-arrow-color: var(--ai-color-primary);
    --ai-scroll-bottom-btn-border: 1px solid var(--ai-color-primary);
    --ai-carousel-arrow-hover-bg: var(--ai-color-primary);
    --ai-carousel-arrow-hover-color: var(--ai-color-secondary);
    --ai-carousel-arrow-hover-border: var(--ai-color-primary);

    /* Ask Anything field states */
    --ai-ask-border-focus: var(--ai-color-primary);
    --ai-ask-border-gradient-default: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%);
    --ai-ask-border-gradient-hover: linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%);
    --ai-ask-border-focus-solid: var(--ai-color-primary);
    --ai-ask-bg-default: var(--ai-color-secondary);
    --ai-ask-bg-focus: var(--ai-color-secondary);
    --ai-ask-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ai-brand-accent) 20%, transparent);
    --ai-ask-submit-bg-default: var(--ai-card-input-border);
    --ai-submit-arrow-color-focus: var(--ai-color-secondary);
    --ai-ask-submit-icon-filter-default: none;
    --ai-loader-width: 58px;
    --ai-loader-height: 16px;


    /* Shared semantic color tokens (brand/site override ready) */

    --ai-header-title-color: var(--ai-header-text);
    --ai-header-badge-border-color: var(--ai-header-text);
    --ai-header-badge-text-color: var(--ai-header-text);
    --ai-header-badge-icon-color: var(--ai-header-text);
    --ai-header-badge-icon-filter: none;
    --ai-close-icon-color: var(--ai-header-text);
    --ai-nav-beta-color-desktop: var(--ai-nav-color);
    --ai-nav-beta-color-mobile: var(--ai-nav-color-mobile);
    --ai-nav-pill-fill-mobile: var(--ai-color-secondary);
    --ai-nav-pill-border-color: var(--ai-color-secondary);
    --ai-nav-pill-border-hover-color: var(--ai-color-accent);
    --ai-submit-arrow-color-default: var(--ai-color-primary);
    --ai-icon-arrow-solid-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M5.08826%205.82596L5.26297%202.70175L1.16833%206.46456L0%205.41333L5.93994%200L6.04914%200L12%205.39368L10.8426%206.46456L6.74795%202.70175L6.92266%205.82596L6.92266%2014L5.08826%2014L5.08826%205.82596Z'/%3E%3C/svg%3E");
    --ai-icon-arrow-cta: url('../images/ai-card-arrow.svg');
    --ai-submit-arrow-filter-focus: brightness(0) invert(1);
    --ai-submit-arrow-color: var(--ai-color-secondary);
    --ai-disclaimer-color: rgba(0, 0, 0, 0.50);
    --ai-backdrop-color: rgba(0, 0, 0, 0.4);
    --ai-carousel-track-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --ai-agent-bubble-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    --ai-chip-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    --ai-chip-arrow-img-filter: none;
    --ai-chip-arrow-img-filter-hover: var(--ai-chip-arrow-img-filter);
    --ai-carousel-arrow-img-filter: none;
    --ai-carousel-arrow-img-filter-hover: var(--ai-carousel-arrow-img-filter);
    --ai-elite-badge-bg: rgba(17, 17, 17, 0.85);
    --ai-elite-badge-text: var(--ai-color-secondary);
    --ai-sparkle-filter-base: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45));
    --ai-sparkle-filter-peak: brightness(0) saturate(100%) invert(92%) sepia(88%) saturate(530%) hue-rotate(8deg) brightness(106%) contrast(103%) drop-shadow(0 0 4px rgba(237, 254, 82, 0.6));
    --ai-sparkle-filter-mobile: brightness(0);

    /* --- ADDED FALLBACK DEFAULTS FOR BRAND OVERRIDES --- */
    --ai-brand-accent: var(--ai-color-accent);
    --ai-brand-chip-hover: var(--ai-color-secondary);
    --ai-brand-chip-hover-color: var(--ai-color-primary);
    --ai-brand-border-chip: 1px solid #f2f2f2;
    --ai-brand-border-chip-hover: linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%);
    --ai-brand-secondary: var(--ai-color-secondary);
    --ai-viewport-bg: none;
    --ai-chat-bg: var(--ai-color-secondary);
    --ai-chat-bubble-bg: rgba(255, 255, 255, 0.40);
    --ai-card-input-border: #f2f2f2;
    --ai-card-input-hover: #e2e2e2;
    --ai-text-base: var(--ai-color-tertiary);
    --ai-border-radius: 8px;
    --ai-font-stack: "Helvetica Neue", Arial, sans-serif;
    --ai-font-stack-secondary: "Helvetica Neue", Arial, sans-serif;
    --ai-font-stack-spacing: normal;
    --ai-font-stack-secondary-spacing: normal;
    --ai-greeting-font-stack: var(--ai-font-stack);
    --ai-greeting-text-color: var(--ai-color-primary);
    --ai-accent-text: var(--ai-color-tertiary);
    --ai-btn-bg: var(--ai-color-secondary);
    --ai-btn-color: var(--ai-color-tertiary);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ai-user-msg-bg: var(--ai-color-tertiary);
    --ai-user-text-color: var(--ai-color-secondary);
    --ai-header-bg: var(--ai-color-secondary);
    --ai-header-text: var(--ai-color-tertiary);
    --ai-card-border: var(--ai-color-primary);
    --ai-card-bg: var(--ai-color-secondary);
    --ai-muted-text: #555555;
    --ai-img-bg: #f7f8f9;
    --ai-nav-bg: var(--ai-color-secondary);
    --ai-nav-button-border-color: var(--ai-color-primary);
    --ai-nav-color: var(--ai-color-secondary);
    --ai-footer-color: rgba(0, 0, 0, 0.50);
    --ai-elite-color-count: rgba(0, 0, 0, 0.5);
    --ai-elite-color-count-hover: rgba(0, 0, 0, 0.8);
    --ai-input-bg: var(--ai-color-secondary);
    --ai-footer-bg: var(--ai-color-secondary);
    --ai-input-field-bg: var(--ai-color-secondary);
    --ai-input-border: var(--ai-color-primary);
    --ai-carousel-hover-line: var(--ai-color-accent);
    --ai-carousel-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    --ai-btn-bg-desktop: var(--ai-color-secondary);
    --ai-btn-bg-mobile: var(--ai-color-secondary);
    --ai-btn-color-desktop: var(--ai-color-tertiary);
    --ai-btn-color-mobile: var(--ai-color-tertiary);
    --ai-glow-gradient: none;
    --ai-glow-gradient-desktop: none;
    --ai-glow-size: auto;
    --ai-glow-speed: 1s;
    --ai-glow-timing: ease;
    --ai-glow-inset: 0px;
    --ai-glow-radius: 0px;
    --ai-sparkle-start-color: rgba(255, 255, 255, 0.4);
    --ai-sparkle-peak-color: var(--ai-color-accent);
    --ai-nav-border-mobile: none;
    --ai-nav-color-mobile: var(--ai-color-primary);
    --ai-sparkle-fill-start-mobile: #111111;
    --ai-sparkle-peak-mobile: var(--ai-color-accent);
    --ai-ask-border-gradient-hover-brand: linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%);
    --ai-disclaimer-min-height-mobile: 56px;
    --ai-disclaimer-max-height-mobile: 34vh;
}



/* =========================================================================
              Global Widget Containers & Header Trigger Button
   ========================================================================= */
.global-ai-widget-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.hyper-speed-chat-main .chat-header-navigation-link {
    display: inline-flex !important;
    padding: 4px 7px !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 100px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: linear-gradient(var(--ai-nav-pill-fill-mobile), var(--ai-nav-pill-fill-mobile)), var(--ai-nav-border-mobile, linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%)) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;

    @media screen and (max-width: 767px) {
        height: 25px !important;
    }

    @media screen and (min-width: 768px) {
        box-sizing: border-box !important;
        justify-content: center !important;
        vertical-align: middle !important;
        position: relative !important;
        z-index: 2 !important;
        height: auto !important;
        padding: 2px 6px 2px 7px !important;
        gap: 3px !important;
        margin: 0 28px 0 0 !important;
        background: rgba(0, 0, 0, 0.40) !important;
        border: 1px solid var(--ai-nav-pill-border-color) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: border-color 0.6s ease, opacity 0.6s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        max-width: min(100%, 320px) !important;
    }
}

.hyper-speed-chat-main .chat-header-navigation-link:hover {
    border-color: var(--ai-nav-pill-border-hover-color, var(--ai-nav-pill-border-color)) !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.40) !important;
    transition: all 0.6s ease-in-out !important;
}

.hyper-speed-chat-main .suggestion-chip:focus-visible,
.hyper-speed-chat-main .close-viewport-btn:focus-visible,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn:focus-visible,
.hyper-speed-chat-main .chat-input-row .chat-user-raw-input:focus-visible,
.hyper-speed-chat-main .ai-carousel-arrow-btn:focus-visible,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible {
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: linear-gradient(var(--ai-nav-pill-fill-mobile), var(--ai-nav-pill-fill-mobile)), var(--ai-nav-border-mobile, linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%)) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

/* Isolate resets to prevent overriding flex alignment properties */
.hyper-speed-chat-main .chat-header-navigation-link>*:not(.nav-beta-tag) {
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}
body.is-responsive .hyper-speed-chat-main .chat-header-navigation-link .nav-label-text {

}
.hyper-speed-chat-main .chat-header-navigation-link .nav-label-text {
    color: var(--ai-nav-color-mobile) !important;
    font-family: var(--ai-font-stack-secondary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: var(--ai-font-stack-spacing) !important;
    text-transform: none !important;
    max-width: 12ch !important;

    @media screen and (min-width: 768px) {
        color: var(--ai-nav-color) !important;
        letter-spacing: 1.4px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        max-width: 16ch !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* =========================================================================
           AI Sparkle Icon Color Animation & Brand Integration
   ========================================================================= */
@keyframes aiIconFillPulse {
    0% {
        animation-timing-function: step-end;
        filter: var(--ai-sparkle-filter-base, brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)));
    }

    15% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
        filter: var(--ai-sparkle-filter-base, brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)));
    }

    55% {
        animation-timing-function: step-end;
        filter: var(--ai-sparkle-filter-peak, brightness(0) saturate(100%) invert(92%) sepia(88%) saturate(530%) hue-rotate(8deg) brightness(106%) contrast(103%) drop-shadow(0 0 4px rgba(237, 254, 82, 0.6)));
    }

    70% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
        filter: var(--ai-sparkle-filter-peak, brightness(0) saturate(100%) invert(92%) sepia(88%) saturate(530%) hue-rotate(8deg) brightness(106%) contrast(103%) drop-shadow(0 0 4px rgba(237, 254, 82, 0.6)));
    }

    100% {
        filter: var(--ai-sparkle-filter-base, brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)));
    }
}

@keyframes aiIconScalePulse {
    0% {
        animation-timing-function: ease-in-out;
        transform: scale(1);
    }

    34.292% {
        animation-timing-function: ease-in-out;
        transform: scale(0.7);
    }

    68.584% {
        transform: scale(1);
    }

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

/* Apply color pulse wrapper */
.hyper-speed-chat-main .chat-header-navigation-link .ai-header-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

/* Force Image White & Proportionate */
.hyper-speed-chat-main .chat-header-navigation-link .ai-header-icon-wrap img.ai-sparkle-animated-svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    object-fit: contain !important;
    transform-origin: center center !important;
    will-change: transform, filter !important;
    animation: aiIconFillPulse 2.8s infinite !important;

    @media screen and (max-width: 767px) {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        max-width: 11px !important;
        max-height: 11px !important;
        object-fit: contain !important;
        animation: aiIconFillPulse 2.8s infinite !important;
        filter: var(--ai-sparkle-filter-mobile, brightness(0)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hyper-speed-chat-main .chat-header-navigation-link .ai-header-icon-wrap img.ai-sparkle-animated-svg {
        animation: none !important;
        transform: none !important;
        filter: var(--ai-sparkle-filter-base, brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45))) !important;
    }
}

.hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
    position: absolute !important;
    top: 107% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 2px !important;
    color: var(--ai-nav-beta-color-mobile, var(--ai-nav-color-mobile)) !important;
    font-family: var(--ai-font-stack) !important;
    font-size: 4px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: var(--ai-font-stack-secondary-spacing) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    width: 100%;
    text-align: right;
    padding-right: 5px;

    @media screen and (min-width: 768px) {
        right: -32px !important;
        top: 50% !important;
        left: unset !important;
        margin-top: unset !important;
        transform: translateY(-50%) !important;
        color: var(--ai-nav-beta-color-desktop, var(--ai-nav-color)) !important;
        font-size: 7px !important;
        pointer-events: none !important;
    }
}

/* =========================================================================
                    Mobile Viewport Specific Styles
   ========================================================================= */
@media screen and (max-width: 767px) {

    .global-ai-widget-container,
    .mobile-target-wrap {
        margin: 0 !important;
    }

    .hyper-speed-chat-main .chat-bottom-dock,
    .hyper-speed-chat-main .chat-disclaimer-footer {
        background: transparent !important;
        font-size: 10px !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-bottom-dock .chat-user-raw-input {
        font-size: 13px !important;
    }
}

/* =========================================================================
                    Core Viewport Styles (Desktop & Mobile)
   ========================================================================= */
.hyper-speed-chat-main .chat-viewport {
    position: fixed !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Apply the background image across the entire chat window */
    background: var(--ai-viewport-bg) !important;
    background-size: cover !important;
    isolation: isolate !important;
    color: var(--ai-text-base) !important;
    font-family: var(--ai-font-stack) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease !important;
    font-size: 13px !important;
}

.hyper-speed-chat-main .chat-viewport.is-active {
    visibility: visible !important;
    pointer-events: auto !important;
}

.hyper-speed-chat-main .chat-viewport.chat-main-viewport {
    align-items: stretch !important;
    gap: 0 !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 60px)) !important;
    height: calc(100dvh - var(--header-height, 60px)) !important;
    max-height: none !important;
    margin: 0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    transform: translate3d(0, 100%, 0) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    font-size: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    /* border-radius: 10px !important; */

    @media screen and (min-width: 768px) {
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        top: var(--header-height, 90px) !important;
        left: auto !important;
        right: 24px !important;
        bottom: auto !important;
        width: 400px !important;
        height: 720px !important;
        max-height: calc(100dvh - var(--header-height, 90px) - 24px) !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
        transform: translate3d(100%, 0, 0) !important;
        /* border-radius: 10px !important; */
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

.hyper-speed-chat-main .chat-viewport.chat-main-viewport.is-active {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;

    @media screen and (min-width: 768px) {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* =========================================================================
                      Override to remove background
   ========================================================================= */
.hyper-speed-chat-main .chat-header-bar,
.hyper-speed-chat-main .chat-logs-area,
.hyper-speed-chat-main .chat-logs-container,
.hyper-speed-chat-main .chat-bottom-dock,
.hyper-speed-chat-main .chat-input-row,
.hyper-speed-chat-main .chat-disclaimer-footer {
    background: transparent !important;
}

/* =========================================================================
            Internal UI Elements & Header Bar (Figma Aligned)
   ========================================================================= */
.hyper-speed-chat-main .chat-header-bar {
    position: relative !important;
    z-index: 9999 !important;
    display: flex !important;
    padding: 32px 29px 24px 29px !important;
    justify-content: space-between !important;
    align-items: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;

    @media screen and (min-width: 768px) {
        padding: 24px 24px 36px 24px !important;
    }
}

.hyper-speed-chat-main .brand-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hyper-speed-chat-main .chat-header-bar .chat-title,
.hyper-speed-chat-main .brand-title-text {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--ai-header-title-color, var(--ai-header-text)) !important;
    font-family: var(--ai-font-stack-secondary) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;

    @media screen and (min-width: 768px) {
        font-size: 24px !important;
    }
}

.hyper-speed-chat-main .brand-title-text::after {
    display: none !important;
}

.hyper-speed-chat-main .brand-title-text>span:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge {
    display: inline-flex !important;
    padding: 3px 6px !important;
    align-items: center !important;
    gap: 3px !important;
    border-radius: 100px !important;
    border: 1px solid var(--ai-header-badge-border-color, var(--ai-header-text)) !important;
    background: transparent !important;
    color: var(--ai-header-badge-icon-color, var(--ai-header-text)) !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge .ai-label {
    color: var(--ai-color-primary, var(--ai-header-text)) !important;
    font-family: var(--ai-font-stack-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: var(--ai-font-stack-spacing, normal) !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge img,
.hyper-speed-chat-main .chat-header-bar .ai-badge svg {
    display: block !important;
    width: auto !important;
    height: 8px !important;

    @media screen and (min-width: 768px) {
        height: 10px !important;
    }
}

.hyper-speed-chat-main .chat-header-bar .ai-badge img {
    filter: var(--ai-header-badge-icon-filter, none) !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge svg,
.hyper-speed-chat-main .chat-header-bar .ai-badge svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.hyper-speed-chat-main .chat-header-bar .beta-text {
    color: var(--ai-header-badge-text-color, var(--ai-header-text)) !important;
    font-family: "NaN Metrify A Narrow", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

.hyper-speed-chat-main .close-viewport-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    aspect-ratio: 1 / 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    color: var(--ai-header-text) !important;
}

.hyper-speed-chat-main .close-viewport-btn svg {
    width: 10px !important;
    height: 10px !important;
    fill: var(--ai-close-icon-color, var(--ai-header-text)) !important;
    stroke-width: 0.5px !important;
    stroke: var(--ai-close-icon-color, var(--ai-header-text)) !important;

    @media screen and (min-width: 768px) {
        width: 12px !important;
        height: 12px !important;
    }
}

.hyper-speed-chat-main .chat-logs-area,
.hyper-speed-chat-main .chat-logs-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 29px !important;
    align-items: flex-end !important;
    align-self: stretch !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    scroll-behavior: smooth !important;
    overflow-anchor: auto !important;

    @media screen and (min-width: 768px) {
        scrollbar-width: none !important;
        padding: 0 24px !important;
    }
}

@media screen and (min-width: 768px) {

    .hyper-speed-chat-main .chat-logs-area::-webkit-scrollbar,
    .hyper-speed-chat-main .chat-logs-container::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    .hyper-speed-chat-main .chat-logs-area.has-overflow:hover,
    .hyper-speed-chat-main .chat-logs-area.has-overflow:focus-within,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:hover,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:focus-within {
        scrollbar-width: thin !important;
    }

    .hyper-speed-chat-main .chat-logs-area.has-overflow:hover::-webkit-scrollbar,
    .hyper-speed-chat-main .chat-logs-area.has-overflow:focus-within::-webkit-scrollbar,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:hover::-webkit-scrollbar,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:focus-within::-webkit-scrollbar {
        width: var(--ai-scrollbar-size, 6px) !important;
    }

    .hyper-speed-chat-main .chat-logs-area.has-overflow:hover::-webkit-scrollbar-thumb,
    .hyper-speed-chat-main .chat-logs-area.has-overflow:focus-within::-webkit-scrollbar-thumb,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:hover::-webkit-scrollbar-thumb,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:focus-within::-webkit-scrollbar-thumb {
        background: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.32)) !important;
        border-radius: 999px !important;
    }

    .hyper-speed-chat-main .chat-logs-area.has-overflow:hover::-webkit-scrollbar-track,
    .hyper-speed-chat-main .chat-logs-area.has-overflow:focus-within::-webkit-scrollbar-track,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:hover::-webkit-scrollbar-track,
    .hyper-speed-chat-main .chat-logs-container.has-overflow:focus-within::-webkit-scrollbar-track {
        background: var(--ai-scrollbar-track, transparent) !important;
    }
}

.hyper-speed-chat-main .chat-bubble {
    padding: 12px 16px !important;
    border-radius: var(--ai-border-radius);
    max-width: 88%;
    color: var(--ai-text-base);
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-family: var(--ai-font-stack) !important;
    letter-spacing: 0 !important;
    margin: 10px 0 !important;

    @media screen and (min-width: 768px) {
        font-size: 16px !important;
    }
}

.hyper-speed-chat-main .agent-greeting-header {
    background: transparent !important;
    color: var(--ai-greeting-text-color) !important;
    font-family: var(--ai-greeting-font-stack, "Helvetica Neue", Arial, sans-serif) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: pre-line !important;
    letter-spacing: 0 !important;

    @media screen and (min-width: 768px) {
        font-size: 16px !important;
    }
}

.hyper-speed-chat-main .chat-viewport.chat-main-viewport .system-message {
    background: transparent !important;
    color: var(--ai-text-base) !important;
    align-self: flex-start;
    padding: 12px 0 !important;
}

.hyper-speed-chat-main .agent-message,
.hyper-speed-chat-main .agent-bubble {
    background: var(--ai-chat-bubble-bg) !important;
    border: 1px solid var(--ai-card-border) !important;
    color: var(--ai-text-base) !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: var(--ai-agent-bubble-shadow, 0 2px 6px rgba(0, 0, 0, 0.02)) !important;
}

.hyper-speed-chat-main .user-message {
    background: var(--ai-user-msg-bg) !important;
    color: var(--ai-user-text-color) !important;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    max-width: 200px;

    @media screen and (min-width: 768px) {
        max-width: 254px !important;
        word-wrap: break-word !important;
    }
}


/* =========================================================================
            Suggestion Chips & Unified Bottom Dock (Input & Footer)
   ========================================================================= */
.hyper-speed-chat-main .ai-suggestion-chips-container {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    margin-top: 6px !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

.hyper-speed-chat-main .suggestion-chip {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--ai-chat-bubble-bg) !important;
    border: var(--ai-brand-border-chip, 1px solid #000000) !important;
    color: var(--ai-text-base) !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 10px !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    font-family: var(--ai-font-stack) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px !important;
    box-shadow: var(--ai-chip-shadow, 0 2px 6px rgba(0, 0, 0, 0.02));
    transition: all 0.2s ease;
    word-break: break-word;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 16px 20px !important;

    @media screen and (min-width: 768px) {
        position: relative !important;
        z-index: 1 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding: 16px 20px !important;

    }
}

.hyper-speed-chat-main .suggestion-chip .chip-arrow {
    display: inline-flex !important;
    align-items: center !important;
    color: inherit !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

.hyper-speed-chat-main .suggestion-chip .chip-arrow svg,
.hyper-speed-chat-main .suggestion-chip .chip-arrow svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.hyper-speed-chat-main .suggestion-chip .chip-arrow img {
    filter: var(--ai-chip-arrow-img-filter, none) !important;
    width: 12px !important;
    height: 10px !important;
    max-width: 12px !important;
    max-height: 10px !important;
    min-width: 12px !important;
    min-height: 10px !important;

    @media screen and (min-width: 768px) {
        width: 14px !important;
        height: 12px !important;
        max-width: 14px !important;
        max-height: 12px !important;
        min-width: 14px !important;
        min-height: 12px !important;
    }
}

.hyper-speed-chat-main .suggestion-chip:hover {
    border-image: var(--ai-brand-border-chip) !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-shadow: 0 4px 12px var(--card-shadow, rgba(0, 0, 0, 0.1));
    transition: all 0.6s ease-in-out;

    @media screen and (min-width: 768px) {
        /* Solid white background for the inner button */
        background: var(--ai-brand-chip-hover) !important;
        color: var(--ai-brand-chip-hover-color) !important;
        /* Transparent border to allow the background gradient to show through */
        border: 1px solid transparent !important;
        /* Native CSS background clipping: Layer 1 is solid white (inside), Layer 2 is the gradient (border) */
        background-image: linear-gradient(var(--ai-brand-chip-hover), var(--ai-brand-chip-hover)), var(--ai-brand-border-chip-hover) !important;
        background-clip: padding-box, border-box !important;
        background-origin: padding-box, border-box !important;
        box-shadow: 0 4px 12px var(--card-shadow, rgba(0, 0, 0, 0.1));
    }
}

.hyper-speed-chat-main .suggestion-chip:hover * {
    color: var(--ai-brand-chip-hover-color) !important;
}

.hyper-speed-chat-main .suggestion-chip:hover .chip-arrow {
    transform: translateX(6px) !important;
}

.hyper-speed-chat-main .suggestion-chip:hover .chip-arrow img {
    filter: var(--ai-chip-arrow-img-filter-hover, var(--ai-chip-arrow-img-filter, none)) !important;
}



.hyper-speed-chat-main .chat-bottom-dock {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn {
    position: absolute !important;
    top: -46px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--ai-scroll-bottom-btn-size, 48px) !important;
    height: var(--ai-scroll-bottom-btn-size, 48px) !important;
    border-radius: 999px !important;
    border: var(--ai-scroll-bottom-btn-border, 1px solid #000000) !important;
    background: var(--ai-scroll-bottom-btn-bg) !important;
    color: var(--ai-scroll-bottom-btn-color) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    cursor: pointer !important;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease !important;
    z-index: 7 !important;

    @media screen and (max-width: 767px) {
        --ai-scroll-bottom-btn-size: 40px;
    }

    @media screen and (min-width: 768px) {
        top: calc(-1 * var(--ai-scroll-bottom-btn-size, 48px) - 6px) !important;

    }
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 10px !important;
    position: static !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    font-size: 18px !important;
    line-height: 1 !important;

    @media screen and (min-width: 768px) {
        font-size: 22px !important;
        width: 14px !important;
        height: 12px !important;
    }
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn span::before {
    content: "" !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background-color: var(--ai-scroll-bottom-arrow-color, var(--ai-scroll-bottom-btn-color)) !important;
    -webkit-mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transform: rotate(180deg) !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn:hover {
    transform: translateX(-50%) !important;
    transition: all 0.6s ease-in-out !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn:focus-visible {
    outline: 2px solid var(--ai-brand-accent) !important;
    outline-offset: 2px !important;
    transition: all 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-input-row {
    padding: 10px 29px 6px 29px !important;
    background: transparent !important;
    display: flex;
    gap: 8px !important;
    align-items: center;
    position: relative !important;

    @media screen and (min-width: 768px) {
        padding: 14px 24px 8px 24x !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

.hyper-speed-chat-main .chat-input-field-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-radius: 100px !important;
    background: var(--ai-ask-bg-default, var(--ai-input-field-bg)) !important;
    background-image: linear-gradient(var(--ai-ask-bg-default, var(--ai-input-field-bg)), var(--ai-ask-bg-default, var(--ai-input-field-bg))), linear-gradient(90deg, var(--ai-color-primary) 0%, var(--ai-color-accent) 100%) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    transition: background-image 0.6s ease-in-out, border-color 0.6s ease-in-out, box-shadow 0.6s ease-in-out !important;
}

.hyper-speed-chat-main .chat-input-field-wrapper:hover:not(:focus-within) {
    transition: background-image 0.6s ease-in-out, box-shadow 0.6s ease-in-out !important;
    background-image: linear-gradient(var(--ai-ask-bg-default, var(--ai-input-field-bg)), var(--ai-ask-bg-default, var(--ai-input-field-bg))), var(--ai-ask-border-gradient-hover, var(--ai-ask-border-gradient-default, var(--ai-brand-border-chip-hover, linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%)))) !important;
}

/* focus within input field wrapper */
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within {
    border: 1px solid var(--ai-ask-border-focus-solid) !important;
    background: var(--ai-ask-bg-focus, var(--ai-input-field-bg)) !important;
    background-image: none !important;
    box-shadow: var(--ai-ask-shadow-focus, 0 0 0 2px rgba(0, 0, 0, 0.15)) !important;
    transition: all 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-input-field-wrapper {
    position: relative !important;
    border-radius: 100px !important;
    background: var(--ai-ask-bg-default, var(--ai-input-field-bg)) !important;
    border: 1px solid transparent !important;
    isolation: isolate !important;
}



.hyper-speed-chat-main .chat-input-row input {
    flex: 1 !important;
    padding: 0 52px 0 20px !important;
    border: none !important;
    border-radius: 100px !important;
    background: transparent !important;
    color: var(--ai-text-base) !important;
    font-size: 13.5px !important;
    font-family: var(--ai-font-stack) !important;
    min-height: 44px !important;
    outline: none !important;
    outline-style: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;

    @media screen and (min-width: 768px) {
        font-size: 16px !important;
        padding: 0 52px 0 20px !important;
    }
}

.hyper-speed-chat-main .chat-input-row input.chat-user-raw-input:invalid,
.hyper-speed-chat-main .chat-input-row input.chat-user-raw-input:required,
.hyper-speed-chat-main .chat-input-row input:invalid,
.hyper-speed-chat-main .chat-input-row input:required {
    box-shadow: none !important;
}

.hyper-speed-chat-main .chat-input-row .chat-user-raw-input:focus-visible,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn:focus-visible {
    outline: none !important;
}

/* base button */
.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 500px !important;
    background: var(--ai-ask-submit-bg-default, var(--ai-card-input-border)) !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    opacity: 1 !important;
    transition: all 0.6s ease-in-out;

    @media screen and (min-width: 768px) {}

}


/* base arrow */
.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn::before,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    content: "" !important;
    width: 10px !important;
    height: 14px !important;
    background-color: var(--ai-submit-arrow-color-default) !important;
    -webkit-mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    mask-image: var(--ai-icon-arrow-solid-mask, url('../images/ai-card-up-arrow-solid.svg')) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: none !important;

    @media screen and (min-width: 768px) {
        width: 14px !important;
        height: 12px !important;
    }
}

.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn img,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn img {
    display: none !important;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none !important;
    filter: var(--ai-ask-submit-icon-filter-default, none) !important;
    opacity: 0 !important;
}

.hyper-speed-chat-main .chat-input-field-wrapper:focus-within button#chat-submit-action-btn img,
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within .chat-submit-action-btn img {
    opacity: 0 !important;
}

/* input row button hover effect */
.hyper-speed-chat-main .chat-input-row:hover button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-row:hover .chat-submit-action-btn {
    background: var(--ai-ask-submit-bg-default) !important;
    transition: all 0.6s ease-in-out;
}

/* input row hover arrow color */
.hyper-speed-chat-main .chat-input-row:hover button#chat-submit-action-btn::before,
.hyper-speed-chat-main .chat-input-row:hover .chat-submit-action-btn::before {
    background-color: black !important;
    opacity: 1 !important;
    transition: all 0.6s ease-in-out;
}

/* focus within input field wrapper button color*/
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within .chat-submit-action-btn {
    background-color: var(--ai-color-primary) !important;
}

/* focus within input field wrapper default arrow */
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within button#chat-submit-action-btn::before,
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within .chat-submit-action-btn::before {
    background-color: var(--ai-submit-arrow-color-focus) !important;
    opacity: 1 !important;
}

.hyper-speed-chat-main .chat-input-field-wrapper:focus-within button#chat-submit-action-btn:hover,
.hyper-speed-chat-main .chat-input-field-wrapper:focus-within .chat-submit-action-btn:hover {
    background: linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%) !important;
    transition: all 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-disclaimer-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    justify-content: space-between !important;
    align-items: center !important;
    align-self: stretch !important;
    white-space: normal !important;
    padding: 4px 29px 12px 29px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--ai-disclaimer-color, rgba(0, 0, 0, 0.50)) !important;
    font-family: "NaN Metrify A Narrow", var(--ai-font-stack) !important;
    font-size: var(--Fonts-Fine-Print, 12px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    @media screen and (min-width: 768px) {
        padding: 8px 24px 24px 24px !important;
    }

}

.hyper-speed-chat-main .chat-disclaimer-footer,
.hyper-speed-chat-main .chat-disclaimer-footer * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.hyper-speed-chat-main .chat-disclaimer-footer a {
    display: inline !important;
    color: var(--ai-disclaimer-color, rgba(0, 0, 0, 0.50)) !important;
    font-family: var(--ai-font-stack) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    margin-left: 0.3ch !important;
    transition: opacity 0.6s ease !important;
    overflow-wrap: break-word !important;

    @media screen and (min-width: 768px) {
        font-size: 12px !important;
        margin-left: 0.3ch !important;
    }
}

.hyper-speed-chat-main .chat-disclaimer-footer a:hover {
    opacity: 0.75 !important;
    transition: all 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-disclaimer-footer a:focus-visible {
    outline: 2px solid var(--ai-brand-accent) !important;
    outline-offset: 2px !important;
}

@media screen and (max-width: 767px) {
    .hyper-speed-chat-main .chat-viewport.chat-main-viewport {
        top: max(var(--header-height, 60px), env(safe-area-inset-top, 0px)) !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport.is-mobile-open-locked {
        top: var(--ai-mobile-open-top, 60px) !important;
        bottom: auto !important;
        height: var(--ai-mobile-open-height, auto) !important;
        min-height: 220px !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-bottom-dock {
        position: relative !important;
        bottom: auto !important;
        padding-bottom: 0 !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-disclaimer-footer {
        min-height: var(--ai-disclaimer-min-height-mobile, 56px) !important;
        max-height: min(var(--ai-disclaimer-max-height-mobile, 34vh), 180px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 29px 40px 29px !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-disclaimer-footer small {
        font-size: 8.5px !important;
        line-height: 1.25 !important;
        display: block !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
    }
}

/* =========================================================================
                        Backdrop Mask Cover
   ========================================================================= */
.chat-drawer-backdrop-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--ai-backdrop-color, rgba(0, 0, 0, 0.4)) !important;
    z-index: 2147483645 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.chat-drawer-backdrop-mask.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.chat-drawer-backdrop-mask.hidden {
    display: none !important;
}

/* =========================================================================
                                Carousel Styles
   ========================================================================= */
.hyper-speed-chat-main .ai-product-carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 14px 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    line-height: normal !important;
}

.hyper-speed-chat-main .ai-carousel-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    line-height: normal !important;

    @media screen and (min-width: 768px) {
        margin-bottom: 24px !important;
    }
}

.hyper-speed-chat-main .ai-carousel-group-header {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--ai-color-primary) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--ai-font-stack-secondary) !important;
    line-height: normal !important;

    @media screen and (min-width: 768px) {
        font-size: 18px !important;
    }
}

.hyper-speed-chat-main .ai-carousel-nav-arrows {
    display: flex !important;
    gap: 6px !important;
}

.hyper-speed-chat-main .ai-carousel-nav-arrows.is-hidden {
    display: none !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn {
    background: var(--ai-chat-bubble-bg) !important;
    border: 1px solid var(--ai-card-border) !important;
    color: transparent !important;
    /* arrow color source */
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0px !important;
    transition: 0.6s ease-in-out !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn::before {
    content: "" !important;
    width: 14px !important;
    height: 12px !important;
    background-color: black !important;
    -webkit-mask: url('../images/ai-card-arrow.svg') no-repeat center / contain !important;
    mask: url('../images/ai-card-arrow.svg') no-repeat center / contain !important;
}

.hyper-speed-chat-main .ai-carousel-prev::before {
    transform: rotate(180deg) !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:hover {
    background-color: black !important;
    color: transparent !important;
    /* change hover icon color here */
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:hover::before {
    background-color: white !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.hyper-speed-chat-main .ai-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* scrollbar-width: thin !important; */
    scrollbar-gutter: stable !important;
    overflow-y: hidden !important;
}

/* =========================================================================
                Scrollbar Styles for Carousel Track
   ========================================================================= */

.hyper-speed-chat-main .ai-carousel-track::-webkit-scrollbar {
    height: 6px !important;
    /* display: block !important; */
}

.hyper-speed-chat-main .ai-carousel-track::-webkit-scrollbar-thumb {
    background: var(--ai-carousel-track-scrollbar-thumb, rgba(0, 0, 0, 0.2)) !important;
    border-radius: 4px !important;
}

/* =========================================================================
                Scrollbar Styles for Carousel Track
   ========================================================================= */

.hyper-speed-chat-main .ai-carousel-card-item {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: var(--ai-tile-card-width-mobile, 172px) !important;

    @media screen and (min-width: 768px) {
        width: var(--ai-tile-card-width-desktop, 220px) !important;
        margin-bottom: 8px !important;
    }
}

.hyper-speed-chat-main .ai-elite-card {
    width: 100% !important;
    background: var(--ai-chat-bubble-bg) !important;
    border: var(--ai-brand-border-chip, 1px solid #000000) !important;
    border-radius: var(--ai-tile-card-radius, 10px) !important;
    overflow: hidden !important;
    box-shadow: var(--ai-tile-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.04)) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease !important;
    position: relative !important;
    font-family: var(--ai-font-stack) !important;

    @media screen and (min-width: 768px) {
        margin-top: 2px !important;
        /* min-height: 350px !important; */
    }
}

.hyper-speed-chat-main .ai-elite-card:hover {
    border-color: var(--ai-brand-accent) !important;
    box-shadow: var(--ai-tile-card-shadow-hover, var(--ai-carousel-hover-shadow, 0 8px 24px rgba(196, 255, 14, 0.25))) !important;
    transition: all 0.6s ease-in-out !important;

    @media screen and (max-width: 767px) {
        border: var(--ai-tile-card-border-width, 1.245px) solid var(--ai-tile-card-border-color, var(--ai-card-border)) !important;
        border-radius: var(--ai-tile-card-radius, 10px) !important;
    }
}

.hyper-speed-chat-main .ai-elite-pricing {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: var(--ai-tile-pricing-gap, 6px) !important;
    flex-wrap: wrap !important;
}

.hyper-speed-chat-main .ai-elite-standard-price {
    font-size: var(--ai-tile-standard-price-size, 14px) !important;
    font-weight: 400 !important;
    line-height: var(--ai-tile-standard-price-line-height, 1.4) !important;
    color: var(--ai-tile-standard-price-color, rgba(0, 0, 0, 0.80)) !important;
    text-decoration: line-through !important;
}

.hyper-speed-chat-main .ai-elite-img-wrap {
    position: relative !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: var(--ai-tile-image-aspect-ratio, 4 / 3) !important;

    @media screen and (max-width: 767px) {
        min-height: var(--ai-tile-image-min-height-mobile, 128px) !important;
    }

    @media screen and (min-width: 768px) {
        min-height: var(--ai-tile-image-min-height-desktop, 156px) !important;
    }
}

.hyper-speed-chat-main .ai-elite-img-wrap img,
.hyper-speed-chat-main .ai-elite-img-wrap picture,
.hyper-speed-chat-main .ai-elite-img-wrap picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
}

.hyper-speed-chat-main .ai-elite-badge {
    display: none !important;
}

.hyper-speed-chat-main .ai-elite-content {
    padding: 15px !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;

    @media screen and (min-width: 768px) {
        padding: var(--ai-tile-content-padding, 20px) !important;
        gap: var(--ai-tile-content-gap, 8px) !important;
    }
}

.hyper-speed-chat-main .ai-elite-brand {
    display: none !important;
}

.hyper-speed-chat-main .ai-elite-color-count {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--ai-elite-color-count);
    line-height: 140% !important;

    @media screen and (min-width: 768px) {
        font-size: 12px !important;
    }
}

.hyper-speed-chat-main .ai-elite-card:focus .ai-elite-color-count,
.hyper-speed-chat-main .ai-elite-card:hover .ai-elite-color-count,
.hyper-speed-chat-main .ai-elite-card:hover .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card:focus .ai-elite-price {
    line-height: 140% !important;
    color: var(--ai-elite-color-count-hover) !important;
}

.hyper-speed-chat-main .ai-elite-cta::before {
    background-color: #000000;
}

.hyper-speed-chat-main .ai-elite-rating {
    display: flex !important;
    align-items: center !important;
    min-height: 14px !important;
}

.hyper-speed-chat-main .ai-elite-rating-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--ai-tile-rating-gap, 3px) !important;
    line-height: 1 !important;
    font-size: 11px !important;
}

.hyper-speed-chat-main .ai-elite-rating-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: color-mix(in srgb, var(--ai-text-base) 28%, transparent) !important;
}

.hyper-speed-chat-main .ai-elite-rating-star::before {
    content: "\2605" !important;
}

.hyper-speed-chat-main .ai-elite-rating-star.is-filled {
    color: var(--ai-text-base) !important;
}

.hyper-speed-chat-main .ai-elite-title {
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: var(--ai-text-base) !important;
    margin: 0 !important;
    line-height: normal !important;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Metrify Regular', Arial, Helvetica, sans-serif !important;
    text-transform: none !important;

    @media screen and (min-width: 768px) {
        font-size: 14px !important;
    }
}

.hyper-speed-chat-main .ai-elite-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.hyper-speed-chat-main .ai-elite-footer+.ai-elite-color-count {
    margin-top: 2px !important;

    @media screen and (min-width: 768px) {
        font-size: 14px !important;
    }
}

.hyper-speed-chat-main .ai-elite-price {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--ai-elite-color-count) !important;

    @media screen and (min-width: 768px) {
        font-size: 14px !important;
    }
}

.hyper-speed-chat-main .ai-elite-cta {
    font-size: var(--ai-tile-arrow-size-mobile, 18px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    color: var(--ai-accent-text) !important;
    background: transparent !important;
    line-height: 1 !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    transition: all 0.6s ease-in-out !important;

    @media screen and (min-width: 768px) {
        font-size: var(--ai-tile-arrow-size-desktop, 20px) !important;
    }
}


.hyper-speed-chat-main .ai-elite-cta::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 10px !important;
    background-color: currentColor !important;
    -webkit-mask-image: var(--ai-icon-arrow-cta, url('../images/ai-card-arrow.svg')) !important;
    mask-image: var(--ai-icon-arrow-cta, url('../images/ai-card-arrow.svg')) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;

    @media screen and (min-width: 768px) {
        width: 14px !important;
        height: 12px !important;
    }
}

.hyper-speed-chat-main .ai-elite-card-link {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    color: inherit !important;

}

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .ai-elite-card-link {
        position: relative !important;
        z-index: 1 !important;
    }

    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-card,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-card,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-card {
        background: var(--ai-brand-chip-hover) !important;
        border: 1px solid transparent !important;
        background-image: linear-gradient(var(--ai-brand-chip-hover), var(--ai-brand-chip-hover)), var(--ai-brand-border-chip-hover) !important;
        background-clip: padding-box, border-box !important;
        background-origin: padding-box, border-box !important;
        box-shadow: var(--ai-tile-card-shadow-hover, var(--ai-carousel-hover-shadow, 0 8px 24px rgba(196, 255, 14, 0.25))) !important;
        transition: all 0.6s ease-in-out !important;
    }

    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-title,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-title,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-title,
    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-brand,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-brand,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-brand,
    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-rating-star.is-filled,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-rating-star.is-filled,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-rating-star.is-filled,
    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-cta,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-cta,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-cta {
        color: var(--ai-brand-chip-hover-color) !important;
        transition: all 0.6s ease-in-out !important;
    }

    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-standard-price,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-standard-price,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-standard-price {
        color: var(--ai-brand-chip-hover-color) !important;
        transition: all 0.6s ease-in-out !important;
        opacity: 0.75 !important;
    }

    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-price,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-price,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-price {
        border-radius: var(--ai-tile-price-pill-radius, 2px) !important;
        line-height: 1.2 !important;
        transition: all 0.6s ease-in-out !important;
    }

    .hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-cta,
    .hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-cta,
    .hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-cta {
        transition: all 0.6s ease-in-out !important;
    }
}


/* =========================================================================
           Brand illuminated loader & seamless transparent container
   ========================================================================= */
#chat-loading-indicator,
#chat-loading-indicator.hidden,
#chat-loading-indicator:not(.is-active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

#chat-loading-indicator.chat-typing-indicator.is-active,
#chat-loading-indicator.is-loading.is-active,
#chat-loading-indicator[aria-busy="true"].is-active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--ai-text-base) !important;
    font-family: var(--ai-font-stack) !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    margin: 4px 0 !important;
    align-self: flex-start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================================
                    Brand animated loader styles 
   ========================================================================= */
.hyper-speed-chat-main .brand-animated-loader {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--ai-loader-width, 58px) !important;
    height: var(--ai-loader-height, 16px) !important;
    position: relative !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.hyper-speed-chat-main .brand-animated-loader .loader-img-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    opacity: 1 !important;
    background-image: var(--ai-loader-image) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

.hyper-speed-chat-main .brand-animated-loader .loader-fallback-shape {
    display: none !important;
}

.hyper-speed-chat-main .brand-animated-loader:not(:has(.loader-img-container)) .loader-fallback-shape {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--ai-brand-accent) !important;
    border-radius: 4px !important;
    opacity: 0.6 !important;
}

/* If .ai-ab-test-variant-promo has display: none, hide the promo count */
.ai-ab-test-variant-promo[style*="display: none"]~.mobile-promo-count,
.ai-ab-test-variant-promo[style*="display: none"] .mobile-promo-count {
    display: none !important;
}