/* Brand overrides for Wolverine AI Assistant chat.
   This file is loaded after ai-chat-engine.css. */

.hyper-speed-chat-main[data-brand="wolverine_us"],
.hyper-speed-chat-main[data-brand="wolverine"] {
    --ai-color-primary: #1D1D1D;
    --ai-color-secondary: #EDEDE9;
    --ai-color-accent: #a41e21;
    --ai-color-tertiary: #737D85;
    --ai-brand-accent: #a41e21;
    /* Brand-aligned Wolverine red */
    --ai-brand-chip-hover: rgba(237, 237, 233, 0.40);
    --ai-brand-chip-hover-color: var(--ai-color-primary);
    --ai-brand-border-chip: 1px solid #000000;
    --ai-brand-border-chip-hover: linear-gradient(135deg, var(--ai-color-primary) 0%, var(--ai-color-primary) 100%);
    --ai-brand-primary: #363432;
    --ai-brand-secondary: #ffffff;
    --ai-viewport-bg: var(--ai-color-primary);
    --ai-chat-bg: linear-gradient(315deg, #141416 0%, #2a2b30 50%, #363432 100%);
    --ai-chat-bubble-bg: #363432;
    --ai-text-base: var(--ai-brand-secondary);
    --ai-border-radius: 10px;
    --ai-font-stack: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ai-font-stack-secondary: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ai-font-stack-spacing: 10%;
    --ai-font-stack-secondary-spacing: 20%;
    --ai-greeting-font-stack: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ai-greeting-text-color: #f4f4f6;
    --ai-accent-text: #ffffff;
    --ai-btn-bg: #1f1f24;
    --ai-btn-color: #f4f4f6;
    --ai-user-msg-bg: #737D85;
    --ai-user-text-color: #ffffff;
    --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    --ai-header-bg: #141416;
    --ai-header-text: #ffffff;
    --ai-card-border: #818b93;
    --ai-card-bg: #454951;
    --ai-tile-card-bg: rgba(69, 73, 81, 0.94);
    --ai-tile-standard-price-color: var(--ai-brand-primary);
    --ai-muted-text: #737d85;
    --ai-img-bg: #1a1c20;
    --ai-nav-bg: #141416;
    --ai-nav-color: var(--ai-color-primary);
    --ai-header-badge-border-color: var(--ai-color-accent);
    --ai-header-badge-icon-color: var(--ai-color-accent);
    --ai-header-badge-icon-filter: brightness(0) saturate(100%) invert(16%) sepia(79%) saturate(2406%) hue-rotate(340deg) brightness(88%) contrast(97%);
    --ai-nav-pill-border-color: #737d85;
    --ai-nav-pill-bg: #141416;
    --ai-footer-color: rgba(244, 244, 246, 0.65);
    --ai-elite-color-count: #ffffff80;
    --ai-elite-color-count-hover: #00000080;

    /* Bottom Dock Properties */
    --ai-input-bg: var(--ai-header-bg);
    --ai-footer-bg: var(--ai-header-bg);
    --ai-input-field-bg: #1f1f24;
    --ai-input-border: #737d85;

    --ai-carousel-hover-line: #a41e21;
    --ai-carousel-hover-shadow: 0 10px 26px rgba(164, 30, 33, 0.32);
    --ai-tile-card-shadow-hover: var(--ai-carousel-hover-shadow);

    --ai-btn-bg-desktop: #1f1f24;
    --ai-btn-bg-mobile: #1f1f24;
    --ai-btn-color-desktop: #f4f4f6;
    --ai-btn-color-mobile: #f4f4f6;
    --ai-chip-arrow-img-filter: brightness(0) invert(1);
    --ai-chip-arrow-img-filter-hover: none;
    --ai-carousel-arrow-img-filter: brightness(0) invert(1);
    --ai-carousel-arrow-img-filter-hover: brightness(0) invert(1);

    --ai-glow-gradient: linear-gradient(270deg, var(--ai-color-primary), var(--ai-color-primary), var(--ai-color-primary), var(--ai-color-primary));
    --ai-glow-gradient-desktop: linear-gradient(270deg, var(--ai-color-primary), var(--ai-color-primary), var(--ai-color-primary), var(--ai-color-primary));
    --ai-glow-size: 300% 300%;
    --ai-glow-speed: 2.4s;
    --ai-glow-timing: ease-in-out;
    --ai-glow-inset: -2px;
    --ai-glow-radius: 6px;
    --ai-loader-image: url('../images/wolverine-logo-loader.svg');
    --ai-loader-shimmer: #a41e21;
    --ai-loader-base-opacity: 1;
    --ai-loader-base-color: #000000;
    /* New Sparkle Animation Tokens (Adjust hex values to match Wolverine's theme) */
    --ai-sparkle-start-color: rgba(255, 255, 255, 0.4);
    --ai-sparkle-peak-color: rgba(164, 30, 33, 0.95);
    --ai-sparkle-filter-base: brightness(0) saturate(100%) invert(16%) sepia(79%) saturate(2406%) hue-rotate(340deg) brightness(88%) contrast(97%);
    --ai-sparkle-filter-peak: brightness(0) saturate(100%) invert(16%) sepia(79%) saturate(2406%) hue-rotate(340deg) brightness(88%) contrast(97%);
    /* New/Updated Mobile Navigation Tokens */
    --ai-nav-border-mobile: linear-gradient(135deg, var(--ai-color-primary) 0%, var(--ai-color-primary) 100%);
    --ai-nav-color-mobile: #000000;
    --ai-ask-submit-bg-focus: #a41e21;
    --ai-submit-arrow-color-focus: #ffffff;
    /* New Mobile Sparkle Color Tokens */
    --ai-sparkle-fill-start-mobile: #1f1f24;
    --ai-sparkle-peak-mobile: #a41e21;
    --ai-ask-border-gradient-hover-brand: linear-gradient(135deg, var(--ai-color-primary) 0%, var(--ai-color-primary) 100%);

    --ai-ask-shadow-focus: 0 0 0 2px rgba(164, 30, 33, 0.30);
    --ai-disclaimer-color: rgba(244, 244, 246, 0.70);

    /* Brand override hooks: Scroll behavior */
    --ai-scrollbar-thumb: rgba(255, 255, 255, 0.32);
    --ai-ask-border-gradient-default: var(--ai-brand-border-chip-hover);
    --ai-ask-border-gradient-hover: var(--ai-ask-border-gradient-hover-brand, linear-gradient(90deg, var(--ai-color-accent) 0%, var(--ai-color-primary) 100%));


    --ai-nav-button-icon: url('../images/wol-ai-icon.svg');
    --ai-icon-arrow-cta: url('../images/wol-ai-card-arrow.svg');
    --ai-scroll-bottom-btn-border: 1px solid var(--ai-color-secondary);
    --ai-icon-arrow-solid-mask: url('../images/wol-ai-card-arrow.svg');
    --ai-icon-submit-arrow-cta: url('../images/ai-card-arrow.svg');
}

.hyper-speed-chat-main .chat-header-navigation-link {
    background-image: none !important;
    background-color: transparent !important;
    border: solid 2px var(--ai-color-accent) !important;
    transition: none;
}

.hyper-speed-chat-main .chat-header-navigation-link:hover {
    background-image: none !important;
    background-color: transparent !important;
    border: solid 2px var(--ai-color-primary) !important;
}

.hyper-speed-chat-main .chat-header-bar {
    /* @media screen and (min-width: 768px) { */
    padding: 24px 16px !important;
    /* } */
}

.hyper-speed-chat-main .chat-logs-area,
.hyper-speed-chat-main .chat-logs-container {
    padding: 0px 16px !important;
}

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

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

.hyper-speed-chat-main .chat-input-row {
    @media screen and (min-width: 768px) {
        padding: 0px 16px !important;
    }
}

.hyper-speed-chat-main .chat-disclaimer-footer {
    @media screen and (min-width: 768px) {
        padding: 8px 16px 24px !important;
    }
}

.hyper-speed-chat-main .close-viewport-btn {
    margin-top: -30px !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge {
    padding: 0px 10px !important;
    margin-top: 8px !important;
    border: solid 2px var(--ai-color-accent) !important;
}

.hyper-speed-chat-main .chat-header-navigation-link .nav-beta-tag {
    font-size: 6px !important;
    letter-spacing: 0.6px;

    @media screen and (min-width: 768px) {
        font-size: 8px !important;
        letter-spacing: 0.8px !important;
    }
}

.hyper-speed-chat-main .brand-title-text {
    letter-spacing: 1.04px !important;
}

.hyper-speed-chat-main .chat-header-bar .chat-title,
.hyper-speed-chat-main .brand-title-text {
    text-transform: uppercase !important;
    font-family: var(--ai-font-stack) !important;
    @media screen and (min-width: 768px) {
        font-weight: 800 !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }
}

.hyper-speed-chat-main .brand-title-wrapper {
    display: block !important;
}

.hyper-speed-chat-main .close-viewport-btn svg path {
    fill: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge .ai-label {
    color: var(--ai-color-secondary) !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

.hyper-speed-chat-main .chat-header-bar .ai-badge img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(79%) saturate(2406%) hue-rotate(340deg) brightness(88%) contrast(97%) !important;
}

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

.hyper-speed-chat-main .agent-greeting-header {
    font-weight: 400 !important;
    line-height: 120% !important;
}

.hyper-speed-chat-main .suggestion-chip {
    font-weight: 400 !important;
    line-height: 120% !important;
    border: 1px solid transparent !important;

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

.hyper-speed-chat-main .suggestion-chip .chip-arrow {
    background-image: url('../images/wol-arrow.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    height: 12px;
    width: 12px;
    color: var(--ai-color-secondary) !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;
}

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

.hyper-speed-chat-main .suggestion-chip:hover {
    background-color: var(--ai-user-msg-bg) !important;
    background-image: none !important;
    color: var(--ai-brand-secondary) !important;
    font-weight: 400 !important;
}

.hyper-speed-chat-main .suggestion-chip:hover .chip-arrow {
    transform: none !important;
}

.hyper-speed-chat-main .ai-carousel-group-header {
    color: var(--ai-brand-secondary) !important;
    text-transform: uppercase !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 120% !important;
    letter-spacing: 0.54px;
}

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

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

.hyper-speed-chat-main .ai-carousel-arrow-btn {
    background: var(--ai-color-secondary) !important;
    border: solid 1px var(--ai-color-secondary) !important;
    height: 30px !important;
    width: 30px !important;
}

.hyper-speed-chat-main .ai-carousel-arrow-btn:hover {
    background: var(--ai-color-accent) !important;
    border: solid 1px var(--ai-color-accent) !important;
}

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

.hyper-speed-chat-main .ai-elite-content {
    background-color: var(--ai-color-secondary) !important;
     @media screen and (min-width: 768px) {
        min-height: 98px !important;
    }
}

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

.hyper-speed-chat-main .ai-elite-price,
.hyper-speed-chat-main .ai-elite-title {
    color: var(--ai-brand-primary) !important;
    font-family: var(--ai-font-stack) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
}

.hyper-speed-chat-main .ai-elite-color-count {
    color: var(--ai-color-accent) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.42px !important;
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-color-count {
    color: var(--ai-color-accent) !important;
    font-weight: 400 !important;
}

.hyper-speed-chat-main .user-message {
    background-color: var(--ai-user-msg-bg) !important;
    background: #737D85 !important;
    word-wrap: break-word !important;
}
.hyper-speed-chat-main .chat-bubble {
    border-radius: 16px 16px 0px 16px !important;
    line-height: 120% !important;
}
.hyper-speed-chat-main .chat-bubble a {
    color: var(--ai-brand-secondary) !important;
    text-decoration: underline !important;
    font-size: 16px !important;
}
.hyper-speed-chat-main .chat-bubble a:hover {
    color: var(--ai-brand-secondary) !important;
    text-decoration: none !important;
    font-size: 16px !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-image: none !important;
    background-color: var(--ai-brand-secondary) !important;
}

.hyper-speed-chat-main .ai-elite-card {
    @media screen and (min-width: 768px) {
        min-height: 220px !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-primary) !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 {
    mix-blend-mode: multiply !important;
}

.hyper-speed-chat-main .ai-elite-img-wrap {
    background-color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main .ai-elite-cta {
    border: solid 1px #363432 !important;
    background-color: #363432 !important;
    border-radius: 22px !important;
    width: 22px !important;
    height: 22px !important;

}

.hyper-speed-chat-main .ai-elite-cta::before {
    -webkit-mask-image: var(--ai-icon-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !important;
    mask-image: var(--ai-icon-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !important;
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-price {
    color: var(--ai-brand-primary) !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 {
    background-color: var(--ai-color-secondary) !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn.is-visible {
    background-color: var(--ai-color-secondary) !important;
    border: var(--ai-scroll-bottom-btn-border) !important;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn.is-visible::before {
    background-color: var(--ai-color-primary) !important;
    -webkit-mask-image: var(--ai-icon-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !important;
    mask-image: var(--ai-icon-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !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: none !important;
    background-color: var(--ai-color-accent) !important;
    transition: all 0.6s ease-in-out;
}

.hyper-speed-chat-main .chat-input-row button#chat-submit-action-btn,
.hyper-speed-chat-main .chat-input-row .chat-submit-action-btn {
    background-color: var(--ai-color-tertiary) !important;
}


.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-color-tertiary) !important;
    transition: all 0.6s ease-in-out;
}

/* 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-color-secondary) !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:hover button#chat-submit-action-btn::before,
.hyper-speed-chat-main .chat-input-row:hover .chat-submit-action-btn::before {
    background-color: var(--ai-color-secondary) !important;
    transition: all 0.6s ease-in-out;
}

.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;
}

.hyper-speed-chat-main .chat-scroll-to-bottom-btn span::before {
    -webkit-mask-image: var(--ai-icon-arrow-solid-mask, url('../images/wol-ai-card-arrow.svg')) !important;
    mask-image: var(--ai-icon-arrow-solid-mask, url('../images/wol-ai-card-arrow.svg')) !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: 3px !important;
    transform: rotate(90deg) !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 {
    -webkit-mask-image: var(--ai-icon-submit-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !important;
    mask-image: var(--ai-icon-submit-arrow-cta, url('../images/wol-ai-card-arrow.svg')) !important;
    transform: rotate(270deg) !important;
    top: 32% !important;
    left: 31% !important;
}

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

.hyper-speed-chat-main .chat-viewport.chat-main-viewport .chat-disclaimer-footer {
    padding: 16px 0 0 !important;
    min-height: 100px !important;

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

.hyper-speed-chat-main .chat-bottom-dock {
    /* @media screen and (min-width: 768px) { */
    padding: 8px 16px 24px !important;
    /* } */
}

.hyper-speed-chat-main .chat-input-row input {
    line-height: 120% !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: 9px;

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

.hyper-speed-chat-main .ai-carousel-track {
    gap: 10px !important;
}

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

.hyper-speed-chat-main .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price {
    color: var(--ai-color-accent) !important;
    text-decoration: none;
}

.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;
}

.hyper-speed-chat-main .ai-elite-card-link:hover .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-visible .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price,
.hyper-speed-chat-main .ai-elite-card-link:focus-within .ai-elite-pricing:has(.ai-elite-standard-price) .ai-elite-price {
    color: var(--ai-color-accent) !important;
    text-decoration: none;
}
.hyper-speed-chat-main strong {
    font-weight: 400 !important;
}

@media screen and (max-width: 767px) {
     .chat-header-navigation-link {
        height: 25px !important;
    }
}

.hyper-speed-chat-main strong {
    font-family: var(--ai-font-stack) !important;
    font-weight: 600 !important;
}