/* =========================================================================
   Merrell AI Assistant
   Brand overrides loaded after ai-chat-engine.css
   ========================================================================= */

/* =========================================================================
   Brand tokens
   ========================================================================= */

.hyper-speed-chat-main[data-brand="merrell_us"],
.hyper-speed-chat-main[data-brand="merrell"] {
    --ai-color-primary: #191919;
    --ai-color-secondary: #ffffff;
    --ai-color-accent: #ff9038;
    --ai-color-tertiary: #191919;
    --ai-color-count: rgba(0, 0, 0, 0.8);

    --ai-brand-accent: var(--ai-color-accent);
    --ai-brand-chip-hover: #f2f2f2;
    --ai-brand-chip-hover-color: var(--ai-color-primary);
    --ai-brand-border-chip: 1.245px 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:
        url("../images/ai-merrell-background.jpg")
        no-repeat center center;

    --ai-chat-bg:
        linear-gradient(
            180deg,
            var(--ai-color-accent) 0%,
            var(--ai-color-accent) 45%,
            var(--ai-color-secondary) 85%
        );

    --ai-chat-bubble-bg: #ffffff40;
    --ai-elite-card-bg: #f2f2f2;
    --ai-card-input-border: #f2f2f2;
    --ai-card-input-hover: #e2e2e2;

    --ai-text-base: var(--ai-color-primary);
    --ai-border-radius: 12px;
    --ai-scroll-bottom-btn-size: 40px;

    --ai-font-stack:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --ai-font-stack-secondary:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --ai-font-stack-spacing: 10%;
    --ai-font-stack-secondary-spacing: 20%;
    --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 4px 12px rgba(0, 0, 0, 0.08);

    --ai-user-msg-bg: var(--ai-color-tertiary);
    --ai-user-text-color: var(--ai-color-secondary);

    --ai-header-bg: var(--ai-color-accent);
    --ai-header-text: var(--ai-color-tertiary);
    --ai-header-title-color: var(--ai-color-primary);

    --ai-card-border: var(--ai-color-primary);
    --ai-card-bg: var(--ai-color-secondary);
    --ai-tile-card-bg: rgba(255, 255, 255, 0.4);

    --ai-muted-text: #555555;
    --ai-img-bg: #f7f8f9;

    --ai-nav-bg: var(--ai-color-accent);
    --ai-nav-button-border-color: var(--ai-color-primary);
    --ai-nav-color: var(--ai-color-secondary);
    --ai-nav-color-mobile: var(--ai-color-primary);

    --ai-header-badge-icon-color: var(--ai-color-accent);
    --ai-header-badge-icon-filter: none;

    --ai-footer-color: rgba(0, 0, 0, 0.5);
    --ai-disclaimer-color: rgba(0, 0, 0, 0.5);

    --ai-elite-color-count: rgba(0, 0, 0, 0.8);
    --ai-elite-color-count-hover: rgba(0, 0, 0, 0.8);

    --ai-input-bg: var(--ai-header-bg);
    --ai-footer-bg: var(--ai-header-bg);
    --ai-input-field-bg: var(--ai-color-secondary);
    --ai-input-border: var(--ai-color-primary);

    --ai-backdrop-color: rgba(120, 120, 120, 0.3);

    --ai-carousel-hover-line: var(--ai-color-accent);
    --ai-carousel-hover-shadow: 0 8px 24px rgba(196, 255, 14, 0.25);
    --ai-tile-card-shadow-hover: var(--ai-carousel-hover-shadow);

    --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:
        linear-gradient(
            270deg,
            #111111,
            #fbff12,
            #c4ff0e,
            #111111
        );

    --ai-glow-gradient-desktop:
        linear-gradient(
            270deg,
            #ffffff,
            #fbff12,
            #c4ff0e,
            #ffffff
        );

    --ai-glow-size: 400% 400%;
    --ai-glow-speed: 1.8s;
    --ai-glow-timing: linear;
    --ai-glow-inset: -2px;
    --ai-glow-radius: 4px;

    --ai-loader-image: url("../images/merrell-logo-loader.svg");
    --ai-loader-shimmer: var(--ai-color-accent);
    --ai-loader-base-opacity: 1;

    --ai-sparkle-start-color: var(--ai-color-accent);
    --ai-sparkle-peak-color: var(--ai-color-accent);
    --ai-sparkle-filter-base: brightness(0);

    --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-nav-border-mobile:
        linear-gradient(
            90deg,
            var(--ai-color-primary) 0%,
            var(--ai-color-accent) 100%
        );

    --ai-sparkle-fill-start-desktop: #ffffff;
    --ai-sparkle-peak-desktop: var(--ai-color-accent);
    --ai-sparkle-fill-start-mobile: #111111;
    --ai-sparkle-peak-mobile: var(--ai-color-accent);

    --ai-ask-border-gradient-default: var(--ai-brand-border-chip-hover);

    --ai-ask-border-gradient-hover-brand:
        linear-gradient(
            90deg,
            var(--ai-color-accent) 0%,
            var(--ai-color-primary) 100%
        );

    --ai-ask-border-gradient-hover:
        var(--ai-ask-border-gradient-hover-brand);

    --ai-ask-shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.16);
    --ai-suggestion-chip-accent: #ff803b;

    --ai-submit-arrow-color-default: var(--ai-color-secondary);
    --ai-submit-arrow-color-focus: var(--ai-color-secondary);

    --ai-scroll-bottom-arrow-color: var(--ai-color-secondary);

    --Fonts-Fine-Print: 10px;
    --ai-header-overlap: 89px;
}

/* =========================================================================
   Dark mode tokens
   ========================================================================= */

.hyper-speed-chat-main[data-theme="dark"][data-brand="merrell_us"],
.hyper-speed-chat-main[data-theme="dark"][data-brand="merrell"] {
    --ai-dark-bg-surface: var(--ai-color-primary);
    --ai-dark-text-main: var(--ai-color-secondary);
    --ai-dark-text-soft: rgba(255, 255, 255, 0.7);
    --ai-dark-border: rgba(255, 255, 255, 0.18);

    --ai-bg-surface: var(--ai-dark-bg-surface);
    --ai-viewport-bg: none;
    --ai-chat-bg: var(--ai-dark-bg-surface);

    --ai-text-base: var(--ai-dark-text-main);
    --ai-text-muted: var(--ai-dark-text-soft);
    --ai-border-color: var(--ai-dark-border);

    --ai-input-field-bg: var(--ai-color-secondary);
    --ai-input-border: var(--ai-dark-border);

    --ai-disclaimer-color: var(--ai-dark-text-soft);

    --ai-header-bg: var(--ai-dark-bg-surface);
    --ai-header-text: var(--ai-dark-text-main);
    --ai-header-title-color: var(--ai-dark-text-main);
    --ai-close-icon-color: var(--ai-dark-text-main);

    --ai-scroll-bottom-btn-bg: var(--ai-dark-bg-surface);
    --ai-scroll-bottom-arrow-color: var(--ai-color-accent);
    --ai-scroll-bottom-btn-border: 1px solid var(--ai-dark-border);

    --ai-card-border: rgba(255, 255, 255, 0.14);
}

/* =========================================================================
   Main layout
   ========================================================================= */

.global-ai-widget-container {
    margin: 0 !important;
}

#desktop-header .menu-utility {
    width: 100% !important;
}

@media screen and (min-width: 768px) {
    .hyper-speed-chat-main .chat-header-navigation-link {
        background-color: rgba(25,25,25,0.4) !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        margin-block: 0 !important;
        padding-block: 0 !important;        
    }
}

.hyper-speed-chat-main .chat-viewport.chat-main-viewport.is-active {
    padding: 0 !important;
    background-image: none !important;
    border-radius: 10px 10px 0 0 !important;
}

.hyper-speed-chat-main .chat-header-bar {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    padding: 24px !important;
    z-index: 2 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

.hyper-speed-chat-main .chat-logs-area {
    margin-top: calc(-1 * var(--ai-header-overlap)) !important;
    padding-top: var(--ai-header-overlap) !important;
    box-sizing: border-box !important;
}

.hyper-speed-chat-main .chat-logs-area,
.hyper-speed-chat-main .chat-logs-container {
    background-color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main .chat-bottom-dock {
    padding: 24px !important;
    background-color: var(--ai-color-secondary) !important;
}

/* =========================================================================
   Header
   ========================================================================= */

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

.hyper-speed-chat-main .chat-header-bar .ai-badge::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--ai-header-badge-icon-color);
    -webkit-mask: url("../images/ai-icon.svg") center / contain no-repeat;
    mask: url("../images/ai-icon.svg") center / contain no-repeat;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge .ai-label {
    line-height: 1 !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge svg {
    width: 11px !important;
    height: 11px !important;
}

.hyper-speed-chat-main .brand-title-text {
    font-weight: 500 !important;
}

.hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
    color: #8c8c8c !important;
    letter-spacing: 1px !important;
}

.hyper-speed-chat-main .beta-text,
.hyper-speed-chat-main .chat-disclaimer-footer {
    font-family:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif !important;
}

/* =========================================================================
   Ask AI pill
   ========================================================================= */

.hyper-speed-chat-main .ai-pill-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 1px solid var(--ai-color-secondary) !important;
}

@media (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .ai-pill-button:hover {
        background:
            radial-gradient(
                77.08% 77.08% at 50% 100%,
                rgba(255, 128, 59, 0.6) 0%,
                rgba(255, 128, 59, 0) 100%
            ),
            var(--ai-color-primary) !important;

        border-color: var(--ai-color-accent) !important;
        color: var(--ai-color-secondary) !important;
        opacity: 1 !important;
    }

    .hyper-speed-chat-main
        .ai-pill-button:hover
        .nav-label-text {
        color: var(--ai-color-secondary) !important;
    }
}

/* =========================================================================
   Conversation
   ========================================================================= */

.hyper-speed-chat-main .agent-greeting-header {
    max-width: 88% !important;
    padding: 0 24px !important;
}

.hyper-speed-chat-main .chat-bubble {
    line-height: 24px !important;
}

.hyper-speed-chat-main .chat-bubble.user-message {
    background-color: #f2f2f2 !important;
    color: var(--ai-color-primary) !important;
    max-width: 312px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    margin: 40px 24px 0 40px !important;
    border-radius: 16px !important;
}

.hyper-speed-chat-main .chat-bubble.system-message {
    padding: 40px 40px 0 24px !important;
    max-width: 312px !important;
}

.hyper-speed-chat-main strong {
    font-family:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif !important;
    font-weight: 900 !important;
}

.hyper-speed-chat-main .chat-bubble a {
    color: var(--ai-color-primary) !important;
    text-decoration: underline !important;
    font-size: 16px !important;
}

@media (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .chat-bubble a:hover {
        color: var(--ai-color-primary) !important;
        text-decoration: none !important;
    }
}

/* =========================================================================
   Suggestion chips
   ========================================================================= */

.hyper-speed-chat-main .ai-suggestion-chips-container {
    width: unset !important;
    gap: 16px !important;
}

.hyper-speed-chat-main .suggestion-chip {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 16px 20px !important;
    column-gap: 24px !important;

    border: 2px solid var(--ai-color-accent) !important;
    border-image: none !important;
    border-radius: 16px !important;

    background:
        radial-gradient(
            77.08% 77.08% at 50% 100%,
            rgba(255, 128, 59, 0.4) 0%,
            rgba(255, 128, 59, 0) 0%
        ),
        #191919 !important;
    background-color: var(--ai-color-primary) !important;

    color: var(--ai-color-secondary) !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Lock text wrapper bounds completely so it cannot reflow or shift line heights */
.hyper-speed-chat-main .suggestion-chip span,
.hyper-speed-chat-main .suggestion-chip p,
.hyper-speed-chat-main .suggestion-chip div,
.hyper-speed-chat-main .suggestion-chip > *:not(.chip-arrow) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
    line-height: 24px !important;
}

.hyper-speed-chat-main .suggestion-chip::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    padding: 2px;
    border-radius: inherit;

    pointer-events: none !important;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.6) 55%,
            var(--ai-suggestion-chip-accent) 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.hyper-speed-chat-main .suggestion-chip > * {
    position: relative;
    z-index: 1;
}

.hyper-speed-chat-main .suggestion-chip .chip-arrow {
    display: inline-flex !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;

    background-color: var(--ai-color-secondary) !important;

    -webkit-mask:
        url("../images/ai-card-arrow.svg")
        center / contain
        no-repeat;

    mask:
        url("../images/ai-card-arrow.svg")
        center / contain
        no-repeat;
}

.hyper-speed-chat-main .suggestion-chip .chip-arrow img {
    visibility: hidden !important;
}

/* Keyboard focus */
.hyper-speed-chat-main .suggestion-chip:focus-visible {
    border: 3px solid var(--ai-suggestion-chip-accent) !important;

    background:
        radial-gradient(
            77.08% 77.08% at 50% 100%,
            rgba(255, 128, 59, 0.4) 0%,
            rgba(255, 128, 59, 0) 100%
        ),
        var(--ai-color-primary) !important;

    color: var(--ai-color-secondary) !important;
    outline: none !important;
}

/* Disable the normal gradient border while focused */
.hyper-speed-chat-main .suggestion-chip:focus-visible::before {
  display: none !important
}

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

.hyper-speed-chat-main .suggestion-chip:focus-visible .chip-arrow {
    background-color: var(--ai-suggestion-chip-accent) !important;
}

/* Desktop mouse hover */
@media (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .suggestion-chip:hover {
        border: 2px solid transparent !important;
        background:
            radial-gradient(
                77.08% 77.08% at 50% 100%,
                rgba(255, 128, 59, 0.4) 0%,
                rgba(255, 128, 59, 0) 100%
            ),
            var(--ai-color-primary) !important;

        color: var(--ai-color-secondary) !important;
    }

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

    .hyper-speed-chat-main .suggestion-chip:hover::before {
        background:
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.6) 0%,
                rgba(255, 255, 255, 0.6) 25%,
                var(--ai-suggestion-chip-accent) 100%
            ) !important;
    }

    .hyper-speed-chat-main .suggestion-chip:hover .chip-arrow {
        background-color: var(--ai-color-accent) !important;
        transform: none !important;
    }
}

/* Mobile/touch */
@media screen and (max-width: 767px) {
    .hyper-speed-chat-main .suggestion-chip {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;

        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
        color: var(--ai-color-secondary) !important;
    }

    /*
     * Keep all chip text white on mobile, including after
     * Safari/Chrome leaves hover or focus behind after a tap.
     */
    .hyper-speed-chat-main .suggestion-chip,
    .hyper-speed-chat-main .suggestion-chip:hover,
    .hyper-speed-chat-main .suggestion-chip:focus,
    .hyper-speed-chat-main .suggestion-chip:focus-visible {
        color: var(--ai-color-secondary) !important;
    }

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

    /*
     * Retained hover/focus must look like the normal resting state.
     */
    .hyper-speed-chat-main .suggestion-chip:hover,
    .hyper-speed-chat-main .suggestion-chip:focus,
    .hyper-speed-chat-main .suggestion-chip:focus-visible {
        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .hyper-speed-chat-main .suggestion-chip:hover .chip-arrow,
    .hyper-speed-chat-main .suggestion-chip:focus .chip-arrow,
    .hyper-speed-chat-main .suggestion-chip:focus-visible .chip-arrow {
        background-color: var(--ai-color-secondary) !important;
        transform: none !important;
    }

    /*
     * Actual finger-down appearance.
     * Same visual treatment as desktop hover.
     */
    .hyper-speed-chat-main .suggestion-chip:active {
        background:
            radial-gradient(
                77.08% 77.08% at 50% 100%,
                rgba(255, 128, 59, 0.4) 0%,
                rgba(255, 128, 59, 0) 100%
            ),
            var(--ai-color-primary) !important;

        color: var(--ai-color-secondary) !important;
        border-color: transparent !important;
    }

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

    .hyper-speed-chat-main .suggestion-chip:active::before {
        background:
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.6) 0%,
                rgba(255, 255, 255, 0.6) 25%,
                var(--ai-color-accent) 100%
            ) !important;
    }

    .hyper-speed-chat-main .suggestion-chip:active .chip-arrow {
        background-color: var(--ai-color-accent) !important;
        transform: translateX(6px) !important;
    }
}

/* =========================================================================
   Input field
   ========================================================================= */

.hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-bottom-dock .chat-user-raw-input {
    border: 1px solid var(--ai-color-primary) !important;
}

.hyper-speed-chat-main .chat-input-row .chat-user-raw-input:focus-visible {
    background-image: none !important;
    outline: none !important;
}

.hyper-speed-chat-main .chat-input-field-wrapper {
    position: relative !important;

    border: 1px solid var(--ai-color-primary) !important;
    border-radius: 100px !important;

    background: var(--ai-color-secondary) !important;
    background-image: none !important;

    box-shadow: none !important;
}

.hyper-speed-chat-main .chat-input-field-wrapper:focus-within {
    border: 1px solid var(--ai-color-primary) !important;

    background: var(--ai-color-secondary) !important;
    background-image: none !important;

    box-shadow: none !important;
}

.hyper-speed-chat-main .chat-input-row input {
    height: 48px !important;
    color: var(--ai-color-primary) !important;
}

/* =========================================================================
   Submit button
   Desktop keeps established focus behavior.
   Mobile does NOT depend on focus for clickability.
   ========================================================================= */

/* Normal appearance */
.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
    background: var(--ai-color-primary) !important;
    background-color: var(--ai-color-primary) !important;
    border-color: var(--ai-color-primary) !important;
}

/* Merrell 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 {
    background-color: var(--ai-color-secondary) !important;

    -webkit-mask-image:
        url("../images/ai-card-up-arrow-solid.svg") !important;

    mask-image:
        url("../images/ai-card-up-arrow-solid.svg") !important;
}

/* Desktop visibility behavior */
.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: var(--ai-color-accent) !important;
    background-color: var(--ai-color-accent) !important;
    border-color: var(--ai-color-accent) !important;
}

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


@media screen and (min-width: 768px) {
    .hyper-speed-chat-main .chat-input-row  button#chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease !important;
    }

    .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 {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
    }
}

/* Desktop hover only */
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:hover,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:hover {
        background: var(--ai-color-accent) !important;
        background-color: var(--ai-color-accent) !important;
        border-color: var(--ai-color-accent) !important;
    }

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

/*
 * Mobile submit button
 */
@media screen and (max-width: 767px) {

    /*
     * Hidden initially.
     */
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
        border-color: var(--ai-color-primary) !important;

        -webkit-tap-highlight-color: transparent !important;
    }

    /*
     * Show immediately when the input is focused.
     *
     * Also keep it available while text exists so a focus
     * change during the tap does not disable submission.
     */
    .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,
    .hyper-speed-chat-main .chat-input-field-wrapper:has(.chat-user-raw-input:not(:placeholder-shown)) button#chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-field-wrapper:has(.chat-user-raw-input:not(:placeholder-shown)) .chat-submit-action-btn {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /*
     * Mobile resting state.
     *
     * Override retained :hover/:focus from the global rule above.
     * Button must return to black with a white arrow.
     */
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:hover,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:focus,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:focus-visible,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:hover,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:focus,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:focus-visible {
        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
        border-color: var(--ai-color-primary) !important;
    }

    /*
     * White arrow in normal/hover/focus mobile states.
     */
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn::before,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:hover::before,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:focus::before,
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:focus-visible::before,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn::before,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:hover::before,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:focus::before,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:focus-visible::before {
        background-color: var(--ai-color-secondary) !important;
    }

    /*
     * Actual mobile press:
     * orange button + black arrow.
     */
    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:active,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:active {
        background: var(--ai-color-accent) !important;
        background-color: var(--ai-color-accent) !important;
        border-color: var(--ai-color-accent) !important;
    }

    .hyper-speed-chat-main .chat-input-field-wrapper button#chat-submit-action-btn:active::before,
    .hyper-speed-chat-main .chat-input-field-wrapper .chat-submit-action-btn:active::before {
        background-color: var(--ai-color-primary) !important;
    }
    /*
    * Mobile reset after press:
    * once the input has focus again, restore
    * black button + white arrow.
    */
    .hyper-speed-chat-main .chat-input-field-wrapper:focus-within button#chat-submit-action-btn:not(:active),
    .hyper-speed-chat-main .chat-input-field-wrapper:focus-within .chat-submit-action-btn:not(:active) {
        background: var(--ai-color-primary) !important;
        background-color: var(--ai-color-primary) !important;
        border-color: var(--ai-color-primary) !important;
    }

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


/* =========================================================================
   Loader
   Hide logo only. Do not collapse loader text/container.
   ========================================================================= */

.hyper-speed-chat-main .brand-animated-loader .loader-img-container {
    display: 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 {
    font-size: 16px !important;
    margin-left: 24px !important;
}

@keyframes merrellLoadingTextShimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: -100% 50%;
    }
}

/* Loading text alignment, spacing and animation */
@property --merrell-loading-tint {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(216,111,44,0);
}
@keyframes merrellLoadingTextShimmmerV2 {
  0% { animation-timing-function: cubic-bezier(.45,0,.55,1); color: rgba(216,111,44,0); --merrell-loading-tint: rgba(216,111,44,0); }
  25% { animation-timing-function: cubic-bezier(.45,0,.55,1); color: rgba(255,217,110,.14); --merrell-loading-tint: rgba(255,217,110,.14); }
  50% { animation-timing-function: cubic-bezier(.45,0,.55,1); color: rgba(169,78,37,.67); --merrell-loading-tint: rgba(169,78,37,.67); }
  75% { animation-timing-function: cubic-bezier(.45,0,.55,1); color: rgba(255,155,53,.48); --merrell-loading-tint: rgba(255,155,53,.48); }
  100% { color: rgba(216,111,44,0); --merrell-loading-tint: rgba(216,111,44,0); }
}

.hyper-speed-chat-main .typing-text {
    display: inline-block !important;

    font-family:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;

    background-image:
        linear-gradient(
            90deg,
            #4e9098 0%,
            #4a8582 12%,
            #294326 23%,
            #203b24 40%,
            #9b4b27 50%,
            #d86f2c 60%,
            #ffc45b 70%,
            #d99135 80%,
            #5b4b29 90%,
            #344127 100%
        ) !important;

    background-size: 200% 100% !important;
    background-position: 100% 50%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    animation: merrellLoadingTextShimmer 2s linear infinite;
}

/* =========================================================================
   Product cards
   ========================================================================= */

.hyper-speed-chat-main .ai-product-carousel-wrapper {
    padding: 0 24px !important;
}

.hyper-speed-chat-main .ai-carousel-group-header {
    font-size: 28px !important;
    font-weight: 500 !important;
}

.hyper-speed-chat-main .ai-carousel-card-item {
    display: flex !important;
    align-self: stretch !important;
}

.hyper-speed-chat-main .ai-elite-card {
    border: none !important;
    background-color: var(--ai-elite-card-bg) !important;
}

.hyper-speed-chat-main .ai-elite-card:hover,
.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 {
    border: none !important;
    box-shadow: none !important;
}

.hyper-speed-chat-main .ai-elite-img-wrap {
    background: var(--ai-elite-card-bg) !important;
    background-blend-mode: multiply;
}

.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 {
    height: auto !important;
    object-fit: unset !important;
}

.hyper-speed-chat-main .ai-elite-content {
    gap: 0 !important;
}

.hyper-speed-chat-main .ai-elite-title {
    min-height: 3em !important;
}

.hyper-speed-chat-main .ai-elite-color-count {
    color: #5e5e5e !important;
}

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

.hyper-speed-chat-main .ai-elite-price {
    font-weight: 500 !important;
    line-height: 20px !important;
}

.hyper-speed-chat-main .ai-elite-pricing {
    visibility: hidden !important;
    flex-direction: row-reverse;
}

.hyper-speed-chat-main .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-standard-price {
    text-decoration: line-through;
    display: none !important;
}

.hyper-speed-chat-main .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price {
    color: var(--ai-color-primary) !important;

    font-family:
        "Denim Ink WD",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;

    letter-spacing: -0.32px !important;
    text-transform: capitalize !important;

    padding: 0 2px !important;
    text-decoration: none !important;
    display: none !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 {
    opacity: 1 !important;
    display: block !important;
}

.hyper-speed-chat-main .ai-elite-cta {
    opacity: 0 !important;
    transform: translateX(-18px) !important;

    transition:
        opacity 0.2s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !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 {
    opacity: 1 !important;
    transform: translateX(var(--ai-tile-arrow-shift, 6px)) !important;
}

.hyper-speed-chat-main .ai-elite-cta::before {
    width: 26px !important;
    height: 12px !important;

    -webkit-mask-image:
        url("../images/ai-card-arrow-long.svg") !important;

    mask-image:
        url("../images/ai-card-arrow-long.svg") !important;

    background-color: var(--ai-color-accent) !important;
    color: var(--ai-color-accent) !important;
}

/* =========================================================================
   Carousel navigation
   ========================================================================= */

.hyper-speed-chat-main .ai-carousel-arrow-btn {
    border: none !important;
    background: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
    transition: background-color 0.1s ease-out !important;
}

/* Carousel interactive state:
 * orange background + black arrow
 */
.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):hover,
.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):focus,
.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):focus-visible {
    background: var(--ai-color-accent) !important;
    background-color: var(--ai-color-accent) !important;
    color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):hover::before,
.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):focus::before,
.hyper-speed-chat-main .ai-carousel-arrow-btn:not(:disabled):focus-visible::before {
    background-color: var(--ai-color-primary) !important;
    filter: none !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:disabled {
    opacity: 1 !important;
    background: #f2f2f2 !important;
    background-color: #f2f2f2 !important;
    color: #bbbbbb !important;
    cursor: default !important;
    pointer-events: none !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:disabled::before{
    background-color: #bbbbbb !important;
    filter: none !important;
}

/* =========================================================================
   Scroll to bottom
   ========================================================================= */

.hyper-speed-chat-main .chat-scroll-to-bottom-btn {
    top:
        calc(
            0.1 *
            var(--ai-scroll-bottom-btn-size, 48px) -
            6px
        ) !important;

    background: var(--ai-color-primary) !important;
    background-color: var(--ai-color-primary) !important;
    border-color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn span::before {
    width: 14px !important;
    height: 8px !important;

    flex-shrink: 0;

    background:
        url("../images/merrell-down-arrow.svg")
        center / contain
        no-repeat !important;

    background-color: transparent !important;

    -webkit-mask: none !important;
    mask: none !important;

    transform: none !important;
    filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main .chat-scroll-to-bottom-btn:hover {
        background: var(--ai-color-accent) !important;
        background-color: var(--ai-color-accent) !important;
        border-color: var(--ai-color-accent) !important;
    }

    .hyper-speed-chat-main .chat-scroll-to-bottom-btn:hover span::before {
        filter: brightness(0) !important;
    }
}

/* =========================================================================
   Dark mode surfaces
   ========================================================================= */

.hyper-speed-chat-main[data-theme="dark"] .chat-viewport {
    background: var(--ai-bg-surface) !important;
    background-image: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .chat-header-bar,
.hyper-speed-chat-main[data-theme="dark"] .chat-bottom-dock,
.hyper-speed-chat-main[data-theme="dark"] .chat-logs-area,
.hyper-speed-chat-main[data-theme="dark"] .chat-logs-container {
    background-color: #000000 !important;
}

.hyper-speed-chat-main[data-theme="dark"] .chat-header-bar {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode suggestion chip - default */
.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip {
    border: 1.5px solid transparent !important;

    background:
        radial-gradient(
            77.08% 77.08% at 50% 100%,
            rgba(255, 128, 59, 0.4) 0%,
            rgba(255, 128, 59, 0) 0%
        ),
        rgba(255, 255, 255, 0.04) !important;

    color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip::before {
    inset: -1.5px;
    padding: 1.5px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 242, 235, 0.4) 0%,
            var(--ai-suggestion-chip-accent) 100%
        ) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip .chip-arrow {
    background-color: var(--ai-color-secondary) !important;
}
/* Dark mode suggestion chip - desktop hover */
@media (hover: hover) and (pointer: fine) {
    .hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:hover {
        border: 1.5px solid transparent !important;

        background:
            radial-gradient(
                77.08% 77.08% at 50% 100%,
                rgba(255, 128, 59, 0.3) 0%,
                rgba(255, 128, 59, 0) 100%
            ),
            rgba(255, 255, 255, 0.04) !important;

        color: var(--ai-color-secondary) !important;
    }

    .hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:hover * {
        color: var(--ai-color-secondary) !important;
    }

    .hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:hover::before {
        inset: -1.5px;
        padding: 1.5px;

        background:
            linear-gradient(
                to bottom,
                rgba(255, 242, 235, 0.4) 0%,
                var(--ai-suggestion-chip-accent) 100%
            ) !important;
    }

    .hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:hover .chip-arrow {
        background-color: var(--ai-suggestion-chip-accent) !important;
        transform: none !important;
    }
}

/* Dark mode suggestion chip - keyboard focus */
.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:focus-visible {
    border: 1.5px solid var(--ai-suggestion-chip-accent) !important;
    box-shadow: inset 0 0 0 1px var(--ai-suggestion-chip-accent) !important;
    background:
        radial-gradient(
            77.08% 77.08% at 50% 100%,
            rgba(255, 128, 59, 0.3) 0%,
            rgba(255, 128, 59, 0) 100%
        ),
        rgba(255, 255, 255, 0.04) !important;

    color: var(--ai-color-secondary) !important;
    outline: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:focus-visible::before {
    display: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:focus-visible * {
    color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .suggestion-chip:focus-visible .chip-arrow {
    background-color: var(--ai-suggestion-chip-accent) !important;
    transform: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-elite-card,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-content,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-footer,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-pricing,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-title,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-color-count,
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-price {
    background: var(--ai-elite-card-bg) !important;
    background-color: var(--ai-elite-card-bg) !important;
    color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-elite-card-link {
    height: 100% !important;
    color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-elite-img-wrap {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--ai-elite-card-bg) !important;
    background-color: var(--ai-elite-card-bg) !important;
    background-blend-mode: normal !important;

    border: 0 !important;
    color-scheme: only light !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-elite-img-wrap img {
    background: var(--ai-elite-card-bg) !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

/*
 * Product pricing stays light-card/black-text in dark mode.
 * No filter: invert(), because that also inverts backgrounds.
 */
.hyper-speed-chat-main[data-theme="dark"] .ai-elite-standard-price {
    color: var(--ai-color-primary) !important;
    background: transparent !important;
    filter: none !important;
    text-decoration-color: var(--ai-color-primary) !important;
    display: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .chat-header-bar .ai-badge .ai-label,
.hyper-speed-chat-main[data-theme="dark"] .agent-greeting-header,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-group-header {
    color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .close-viewport-btn svg {
    filter: invert(1) !important;
}

/* Dark carousel */
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-prev,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-next {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    background: #262626 !important;
    background-color: #262626 !important;
    border: 1px solid #262626 !important;
    color: #e5e5e5 !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn::before {
    background-color: #e5e5e5 !important;
    filter: none !important;
}

/* Dark carousel interactive state:
 * same orange background + black arrow as light mode
 */
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):hover,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):focus,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):focus-visible {
    background: var(--ai-color-accent) !important;
    background-color: var(--ai-color-accent) !important;
    border-color: var(--ai-color-accent) !important;
    color: var(--ai-color-primary) !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):hover::before,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):focus::before,
.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:not(:disabled):focus-visible::before {
    background-color: var(--ai-color-primary) !important;
    filter: none !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:disabled {
    opacity: 1 !important;
    background: #262626 !important;
    background-color: #262626 !important;
    border-color: #262626 !important;
    color: #e5e5e5 !important;
}

.hyper-speed-chat-main[data-theme="dark"] .ai-carousel-arrow-btn:disabled::before {
    background-color: #bbbbbb !important;
    filter: none !important;
}

/* =========================================================================
   Mobile only
   ========================================================================= */

@media screen and (max-width: 767px) {
    #header .header-top-box .alt-menu-promotion .alt-icon-promotion {
        display: none !important;
    }

    .global-ai-widget-container,
    .mobile-target-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
    }

    .hyper-speed-chat-main .chat-header-navigation-link {
        height: 25px !important;
        background: transparent !important;
        background-color: transparent !important;
        color: var(--ai-color-primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;                
    }

    .hyper-speed-chat-main .chat-header-navigation-link .nav-label-text {
        color: var(--ai-color-primary) !important;
        font-size: 11px !important;
    }

    .hyper-speed-chat-main[data-theme="dark"] .chat-header-navigation-link {
        background: transparent !important;
        background-color: transparent !important;
    }

    /*
     * Ask AI remains white/orange/black before and
     * after the viewport is opened.
     */
    .hyper-speed-chat-main .ai-pill-button,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button {
        padding: 3px 5px !important;
        margin: 0 !important; 
        flex-shrink: 0 !important;         

        background: var(--ai-color-accent) !important;
        background-color: var(--ai-color-accent) !important;
        background-image: none !important;

        border-color: var(--ai-color-accent) !important;
        color: var(--ai-color-primary) !important;
        opacity: 1 !important;
    }

    .hyper-speed-chat-main .ai-pill-button .nav-label-text,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button .nav-label-text {
        color: var(--ai-color-primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile Ask AI resting state override */
    .hyper-speed-chat-main .ai-pill-button,
    .hyper-speed-chat-main .ai-pill-button:hover,
    .hyper-speed-chat-main .ai-pill-button:focus,
    .hyper-speed-chat-main .ai-pill-button:focus-visible,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button:hover,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button:focus,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button:focus-visible {
        background: var(--ai-color-secondary) !important;
        background-color: var(--ai-color-secondary) !important;
        background-image: none !important;

        border: 1px solid var(--ai-color-accent) !important;
        color: var(--ai-color-primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hyper-speed-chat-main .ai-pill-button .nav-label-text,
    .hyper-speed-chat-main .ai-pill-button:hover .nav-label-text,
    .hyper-speed-chat-main .ai-pill-button:focus .nav-label-text,
    .hyper-speed-chat-main .ai-pill-button:focus-visible .nav-label-text,
    .hyper-speed-chat-main:has(.chat-viewport.is-active)
        .ai-pill-button
        .nav-label-text {
        color: var(--ai-color-primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile Ask AI press only */
    .hyper-speed-chat-main .ai-pill-button:active,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button:active {
        background:
            radial-gradient(
                77.08% 77.08% at 50% 100%,
                rgba(255, 128, 59, 0.6) 0%,
                rgba(255, 128, 59, 0) 100%
            ),
            var(--ai-color-primary) !important;

        border-color: var(--ai-color-accent) !important;
        color: var(--ai-color-secondary) !important;
        -webkit-text-fill-color: var(--ai-color-secondary) !important;
    }

    .hyper-speed-chat-main .ai-pill-button:active .nav-label-text,
    .hyper-speed-chat-main:has(.chat-viewport.is-active) .ai-pill-button:active .nav-label-text {
        color: var(--ai-color-secondary) !important;
        -webkit-text-fill-color: var(--ai-color-secondary) !important;
    }

    .hyper-speed-chat-main .ai-pill-button:active .nav-label-text {
        color: var(--ai-color-secondary) !important;
        -webkit-text-fill-color: var(--ai-color-secondary) !important;
    }    
    @media screen and (max-width: 767px) {
        /*
        * Mobile suggestion chip:
        * never allow tap/hover/focus to make the text disappear.
        */
        .hyper-speed-chat-main .suggestion-chip,
        .hyper-speed-chat-main .suggestion-chip:hover,
        .hyper-speed-chat-main .suggestion-chip:focus,
        .hyper-speed-chat-main .suggestion-chip:focus-visible,
        .hyper-speed-chat-main .suggestion-chip:active,
        .hyper-speed-chat-main .suggestion-chip *,
        .hyper-speed-chat-main .suggestion-chip:hover *,
        .hyper-speed-chat-main .suggestion-chip:focus *,
        .hyper-speed-chat-main .suggestion-chip:focus-visible *,
        .hyper-speed-chat-main .suggestion-chip:active * {
            color: var(--ai-color-secondary) !important;
            -webkit-text-fill-color: var(--ai-color-secondary) !important;
        }
    }

    .hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
        position: absolute;
        top: 24px;
    }

    .hyper-speed-chat-main button.chat-header-navigation-link {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: flex-end;
        padding: 0 !important;
    }

    .hyper-speed-chat-main .chat-header-bar {
        padding: 24px 24px 24px !important;
    }

    .hyper-speed-chat-main .chat-logs-area {
        padding-left: 24px !important;
        padding-right: 6px !important;
    }

    .hyper-speed-chat-main .agent-greeting-header {
        padding: 0 !important;
    }

    .hyper-speed-chat-main .ai-suggestion-chips-container {
        margin: 24px 0 0 !important;
    }

    .hyper-speed-chat-main .ai-product-carousel-wrapper {
        padding: 60px 0 0 !important;
    }

    .hyper-speed-chat-main .ai-carousel-track {
        margin-bottom: 0 !important;
    }

    .hyper-speed-chat-main .chat-input-row {
        padding: 18px 0 16px !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-disclaimer-footer {
        padding: 8px 0 40px !important;
    }

    .hyper-speed-chat-main .chat-bubble.user-message {
        margin: 40px 0 0 40px !important;
        max-width: min(312px, calc(100% - 40px)) !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport .system-message {
        padding: 24px 0 0 !important;
    }

    .hyper-speed-chat-main[data-theme="dark"] .chat-input-row input {
        color: var(--ai-color-primary) !important;
    }
}

/* =========================================================================
   Desktop only
   Keep established Merrell desktop layout/hover behavior.
   ========================================================================= */

@media screen and (min-width: 768px) {
    .hyper-speed-chat-main .chat-viewport.chat-main-viewport {
        height: 100% !important;
        bottom: 40px !important;
        right: 24px !important;
    }

    .hyper-speed-chat-main .chat-viewport.chat-main-viewport.is-active {
        border-radius: 10px !important;
    }

    .hyper-speed-chat-main .chat-header-bar .ai-badge::after {
        width: 10px;
        height: 10px;
    }

    .hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
        letter-spacing: 1.4px !important;
    }

    .hyper-speed-chat-main .ai-elite-card {
        min-height: 274px !important;
        height: 100% !important;
    }

    .hyper-speed-chat-main .ai-suggestion-chips-container {
        padding: 40px 24px 0 !important;
        margin-bottom: 0 !important;
    }

    .hyper-speed-chat-main .ai-carousel-header-row {
        margin-bottom: 0 !important;
        padding: 40px 0 36px !important;
    }

    .hyper-speed-chat-main .chat-input-row {
        padding: 16px 0 !important;
    }

    .hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn,
    .hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
        padding: 10px !important;
        gap: 10px !important;
    }

    .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 {
        width: 14px !important;
        height: 12px !important;
    }

    .hyper-speed-chat-main .chat-input-row input {
        line-height: 150% !important;
    }

    .hyper-speed-chat-main .chat-bubble.system-message {
        box-sizing: border-box !important;
        width: calc(100% - 48px) !important;
        max-width: none !important;
        margin: 0 24px !important;
        padding: 40px 40px 0 0 !important;
    }

    .hyper-speed-chat-main .chat-disclaimer-footer a {
        font-size: var(--Fonts-Fine-Print) !important;
    }

    .hyper-speed-chat-main .chat-scroll-to-bottom-btn {
        top:
            calc(
                -1 *
                var(--ai-scroll-bottom-btn-size, 48px) -
                6px
            ) !important;
    }
}

.hyper-speed-chat-main #chat-loading-indicator.is-active {
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;
  width: calc(100% - 48px) !important;
  max-width: none !important;
  margin: 0 24px !important;
  padding: 24px 0 0 !important;
  text-align: left !important;
  line-height: 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
.hyper-speed-chat-main #chat-loading-indicator.is-active > .brand-animated-loader {
  display: none !important; 
}
.hyper-speed-chat-main #chat-loading-indicator.is-active > .typing-text {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: left !important;
  background: linear-gradient(90deg,
    #4e9098 0%, #4a8582 12%, #294326 23%, #203b24 40%,
    #9b4b27 50%, #d86f2c 60%, #ffc45b 70%, #d99135 80%,
    #5b4b29 90%, #344127 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: var(--merrell-loading-tint) !important;
  opacity: 1 !important;
  animation: merrellLoadingTextShimmmerV2 4s linear infinite !important;
  animation-delay: 0s !important;
}

@media (min-width: 768px) {
  .hyper-speed-chat-main #chat-loading-indicator.is-active {
    padding: 40px 40px 0 0 !important;
  }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .hyper-speed-chat-main .typing-text {
        animation: none !important;
        --merrell-loading-tint: transparent;
    }

    .hyper-speed-chat-main .ai-elite-cta {
        transition: none !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 {
        transform: none !important;
    }
}