/* Commerce Client - Agentforce Widget Styles */

/* ── Header button ── */
/* The tall Ask-SharkNinja pill stretches .user-section (Bootstrap d-flex
   defaults align-items to stretch), which top-aligns the 20px icons.
   Center the row so search/account/cart line up with the button. */
.user-section {
    align-items: center;
}

.cc-header-entry {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0;
}

.cc-header-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /*background: #000;*/
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 7px 14px 7px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
}

.cc-header-button:hover  { background: #222; }
.cc-header-button:active { opacity: 0.85; }

/* Image variant is a transparent, rounded pill — the box-fill hover above
   would render as a black rectangle behind it. Keep it transparent. */
.cc-header-button:has(.cc-header-button-image):hover { background: none; }

.cc-header-button svg {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: #fff;
}

.cc-header-button-label { letter-spacing: 0.01em; }

/* SVG button image has no intrinsic width; give it a definite size so it
   doesn't collapse inside the content-sized flex button. Selector must match
   global.css's `.cc-header-button img` specificity so this override wins. */
.cc-header-button img.cc-header-button-image {
    display: block;
    height: auto;
    flex-shrink: 0;
}

/* Desktop: wide pill (default). Mobile icon hidden. */
.cc-header-button img.cc-header-button-image--desktop { width: 160px; }
.cc-header-button img.cc-header-button-image--mobile  { display: none; }

@media (max-width: 767.98px) {
    .cc-header-button-label { display: none; }
    .cc-header-button        { padding: 0; }
    .cc-header-entry         { margin: 0; }

    /* Mobile: swap the big neon pill for the compact "Ask SharkNinja +" pill
       (a real .svg file). Sized to fit the header row alongside the icons. */
    .cc-header-button img.cc-header-button-image--desktop { display: none; }
    .cc-header-button img.cc-header-button-image--mobile  {
        display: block;
        width: 64px;
    }
}

/* ── Full-height side panel ── */
.cim-widget-dialog.full-height.bottom-left,
.cim-widget-dialog.full-height.bottom-right {
    top: var(--cc-panel-top, 0) !important;
    bottom: 0 !important;
    height: var(--cc-panel-height, 100dvh) !important;
    border-radius: 0 !important;
    width: min(var(--cc-panel-width, 480px), 100vw) !important;
    box-shadow:
        -10px 0 12px #00000014,
        10px 0 12px #00000014 !important;
}

/* ── Widget dialog header ── */
/* Clean brand-lockup header (Macy's-style): no divider, roomy padding, larger
   bold title on the left, existing controls tidied on the right. The vendor's
   runtime `.cim-widget-dialog-header` rule (padding .5rem 1rem + border-bottom)
   is single-class, so these match `.embedded` and use !important where needed.
   The controls and their handlers are untouched — only spacing/size/color. */
.cim-widget-dialog-header,
.cim-widget-dialog-header.embedded {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px !important;
    border-bottom: none !important;
    gap: 12px;
}

/* Title → brand lockup "Ask [SharkNinja logo]". The vendor renders the title
   as a text <h2> ("SharkNinja Digital Concierge"); CSS can't rewrite that text,
   so hide it (font-size:0) and compose the lockup from pseudo-elements: "Ask"
   as text + the logo as a background image. url() is left verbatim by css-loader
   (url:false), so it resolves relative to the served CSS (.../default/css/) →
   .../default/images/logo.svg. ::before uses rem so the parent's font-size:0
   doesn't zero it. */
.cim-widget-dialog-title,
.cim-widget-dialog-title.embedded {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    position: relative;
    top: 6px; /* nudge the Ask + logo lockup down to align with the controls */
}

.cim-widget-dialog-title::before {
    content: 'Ask';
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a202c;
}

.cim-widget-dialog-title::after {
    content: '';
    display: inline-block;
    width: 148px;
    height: 26px;
    background:
        url('../images/logo.svg') left center / auto 26px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24' fill='%23959499'%3E%3Cpath d='M12 1.5 9.6 9.6 1.5 12 9.6 14.4 12 22.5 14.4 14.4 22.5 12 14.4 9.6Z'/%3E%3Cpath transform='translate(22 1) scale(.42)' d='M12 1.5 9.6 9.6 1.5 12 9.6 14.4 12 22.5 14.4 14.4 22.5 12 14.4 9.6Z'/%3E%3C/svg%3E") right center / auto 20px no-repeat;
}

/* Controls (overflow / close) keep the vendor's original icons and sizing —
   only nudged down from the top of the header row. The vendor ships
   `.cim-widget-dialog-controls { position:absolute; top:4px; right:4px }` as a
   runtime style at single-class specificity that loads AFTER this file, so a
   plain `top`/`position` here loses the cascade. Keep the vendor's absolute
   positioning (don't switch to relative — that would move the anchor) and just
   override the top offset with !important so it actually applies. */
.cim-widget-dialog-controls {
    top: 16px !important;
}

/* Hide the "expand to full modal" control; the panel is used as a docked
   side panel, so the expand toggle is redundant. Overflow (⋮) and close are
   left untouched. */
.cim-widget-toggle-modal-button {
    display: none !important;
}

@media (max-width: 767.98px) {
    .cim-widget-dialog-header,
    .cim-widget-dialog-header.embedded {
        padding: 16px !important;
    }

    .cim-widget-dialog-title::before {
        font-size: 1.375rem;
    }

    .cim-widget-dialog-title::after {
        width: 132px;
        height: 23px;
        background-size: auto 23px, auto 18px;
    }
}

/* ── Backdrop curtain ── */
/* Fixed translucent curtain hung off the open panel's positioner (::before).
   It exists only while .cim-widget-dialog is mounted (open) and vanishes when
   the widget minimizes/closes, since the vendor removes that element. The
   curtain covers the whole viewport EXCEPT the panel's own strip — its inset
   stops at var(--cc-panel-width) on the side the panel docks — so the panel is
   never under it and there's no z-index fight. pointer-events: none keeps it a
   pure dim; the panel's Close button stays the way out. */
.cim-widget-dialog::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    -webkit-animation: cc-curtain-fade-in 0.2s ease-out;
            animation: cc-curtain-fade-in 0.2s ease-out;
}

.cim-widget-dialog.bottom-right::before {
    left: 0;
    right: min(var(--cc-panel-width, 480px), 100vw);
}

.cim-widget-dialog.bottom-left::before {
    left: min(var(--cc-panel-width, 480px), 100vw);
    right: 0;
}

@-webkit-keyframes cc-curtain-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cc-curtain-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── FAB ── */
body.cc-hide-fab .cim-widget-minimized-container { display: none !important; }

.cim-widget-minimized-icon-img { display: none !important; }
.cim-widget-minimized-button::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='m 13,3.1269531 -2.449219,4.9023438 h 0.002 C 10.46793,8.1989068 10.373552,8.3644148 10.271484,8.5253906 9.7230121,9.3904205 8.9499947,10.093291 8.0273438,10.552734 l -0.1953126,0.09766 v 0.002 L 3.1269531,13 l 4.9003907,2.447266 0.00195,0.002 c 1.0920537,0.548915 1.9791522,1.430637 2.5234372,2.523437 l 0.05469,0.109375 L 13,22.873047 15.447266,17.972656 c 0.548711,-1.093088 1.429825,-1.9807 2.523437,-2.52539 h 0.002 L 22.873047,13 17.972656,10.552734 h -0.002 C 16.878149,10.003866 15.991721,9.1224988 15.447266,8.0292969 Z m 0,3.359375 1.025391,2.0527344 0.08008,0.1582031 c 0.690905,1.3872574 1.814575,2.5031314 3.193359,3.1953124 l 0.002,0.002 L 19.515625,13 17.460937,14.027344 c -0.03373,0.02188 -0.03649,0.01936 -0.373014,0.21873 -1.286979,0.697292 -2.324739,1.746452 -2.980469,3.052734 v 0.002 l -0.002,0.002 L 13,19.515625 11.894531,17.302734 c 0,0 0.1124,0.232446 0,0 -0.690903,-1.387173 -1.81465,-2.503141 -3.1933591,-3.195312 l -0.00195,-0.002 L 6.484375,13 8.6972656,11.894531 c 0,0 -0.010268,-0.0061 0,0 1.1704108,-0.582817 2.1472174,-1.474022 2.8398434,-2.566406 0.127917,-0.2017438 0.246886,-0.4117398 0.355469,-0.6289062 h 0.002 z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Page-push (cc_pagePush = true only) ── */
@media (min-width: 768px) {
    body.cc-panel-left,
    body.cc-panel-right {
        transition: margin-left 0.25s ease-out, margin-right 0.25s ease-out;
    }
    body.cc-panel-open.cc-panel-left  { margin-left:  min(var(--cc-panel-width, 480px), 50vw); }
    body.cc-panel-open.cc-panel-right { margin-right: min(var(--cc-panel-width, 480px), 50vw); }
}

/* ── Widget search bar ── */
.cim-widget-search-bar-wrapper {
    padding-left: 0;
    padding-right: 0;
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
}

.cim-widget-search-bar {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Single input that serves as both the search and chat message box. The
   paperplane submit button is overlaid on the right (see rule below), so
   padding-right reserves space to keep typed text from running under it.
   padding-left is the 10px text inset. */
input.cim-widget-search-input {
    padding: 12px 44px 12px 10px !important;
    width: 100%;
    height: auto;
    flex: 1 1 0%;
    border: 1px solid #a3a3a3 !important;
}

/* Overlay the search submit button inside the input. Scoped to the search
   bar — an unscoped [type=submit] rule would reposition every submit button
   on the storefront (cart, checkout, login, etc.). */
.cim-widget-search-bar [type="submit"]:not(:disabled) {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    appearance: none;
}

.cim-widget-search-bar .cim-widget-icon-image {
    width: 32px;
    height: 32px;
}

/* ── Widget suggestion pills ── */
.cim-widget-suggestion-button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgb(149, 148, 153);
    border-radius: 24px;
    background-color: rgb(248, 248, 248);
    padding: 10px;
}

/* Widget injects its own runtime styles at equal priority, so the embedded
   variant's distinguishing props need !important to win the cascade. */
.cim-widget-suggestion-button.embedded {
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgb(149, 148, 153) !important;
    border-radius: 24px !important;
    background-color: rgb(248, 248, 248) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px !important;
    padding: 10px 16px !important;
    margin: 4px !important;
}

/* Grey sparkle star prepended to every embedded suggestion pill. The button
   is a flex row with gap:8px, so this ::before becomes the first flex item and
   is spaced from the label automatically. */
.cim-widget-suggestion-button.embedded::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23959499'%3E%3Cpath d='M349 272l-69 34a105 105 0 00-47 47l-33 67c-5 10-19 10-24 0l-34-68a105 105 0 00-47-47l-68-34a13 13 0 010-24l68-34a105 105 0 0047-47l34-68a13 13 0 0124 0l34 68a105 105 0 0047 47l68 34c10 5 10 19 0 24zm148 150l-30-14a45 45 0 01-20-20l-14-30a6 6 0 00-10 0l-15 30a45 45 0 01-20 20l-30 15c-3 2-3 8 0 10l30 15a45 45 0 0120 20l15 29c2 4 8 4 10 0l14-30a45 45 0 0120-20l30-14c4-2 4-8 0-10zm0-335l-30-15a45 45 0 01-20-20l-14-29a6 6 0 00-10 0l-15 30a45 45 0 01-20 20l-30 14c-3 2-3 8 0 10l30 15a45 45 0 0120 20l15 29c2 4 8 4 10 0l15-30a45 45 0 0120-20l29-14c4-2 4-8 0-10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Widget user message bubble ── */
.cim-widget-user-message.embedded {
    background-color: rgb(247, 244, 234) !important;
    border-bottom-right-radius: 0px !important;
    font-weight: 400 !important;
    padding: 16px !important;
}

/* ── Widget disclaimer text ── */
/* Widget ships its own 0.75rem rule at higher priority; override it. */
.cim-widget-disclaimer-text,
.cim-widget-disclaimer-text * {
    font-size: 0.6rem !important;
    color: #00000090;
    margin: 0;
    white-space: nowrap !important;
}

.cim-widget-message-icon.embedded {
    font-size: 1rem;
    display: none;
}

/* Mobile: the widget panel is too narrow to fit the disclaimer on one line —
   let it wrap (nowrap would clip it), and trim the search-bar side margins. */
@media (max-width: 767.98px) {
    .cim-widget-disclaimer-text,
    .cim-widget-disclaimer-text * {
        white-space: normal !important;
    }

    .cim-widget-search-bar-wrapper {
        margin-left: 8px;
        margin-right: 8px;
    }
}

/* ── Widget link font size ── */
/* global.css `a, a.link { font-size: 1rem; line-height: 1.375rem }` leaks into
   the widget and enlarges its links. Reset to inherit the widget's own sizing.
   Scoped to .cim-widget-dialog so the storefront's global anchors are untouched. */
.cim-widget-dialog a,
.cim-widget-dialog a.link {
    font-size: inherit;
    line-height: inherit;
}