/* Commerce Client - Agentforce Widget Styles */

/* The widget SDK currently ships an unscoped `.user-message` rule. Ann Taylor
   and LOFT use that same class for their desktop and mobile account greetings,
   so reset only those storefront elements without changing widget messages. */
[data-name='account-popover'] .user-message,
.ds-account-menu__greeting.user-message {
    display: inline;
    align-self: auto;
    padding: 0;
}

/* ── Header button ── */
.cc-header-entry {
    vertical-align: top;
    display: inline-block;
    margin: 1.1em 0 0 0.75em;
}

/* Client-side injection appends the trigger to the configured header wrapper.
   Place it before the wrapper's existing icons (account/bag), matching the
   Figma nav order, and neutralize the legacy margin so it aligns with the
   surrounding header controls. */
.cc-header-entry--injected {
    display: flex;
    align-items: center;
    order: -1;
    margin: 0;
}

/* cc_headerInjectPosition: "end" — the trigger is appended (last child) and
   should sit AFTER the container's existing icons. Beat the default order:-1
   above (and any order:0 the storefront assigns its own icons) so it renders
   last regardless of source order. */
.cc-header-entry--injected.cc-header-entry--end {
    order: 999;
}

/* Breakpoint-scoped triggers — only present when cc_headerMobileInjectSelector
   is set, in which case a desktop trigger and a mobile trigger are injected
   into (possibly different) containers. Each is hidden on the breakpoint it is
   not meant for. A single trigger (no breakpoint class) shows on every size. */
@media (max-width: 767.98px) {
    .cc-header-entry--desktop { display: none !important; }
}
@media (min-width: 768px) {
    .cc-header-entry--mobile { display: none !important; }
}

.cc-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--cc-trigger-surface, #000);
    color: var(--cc-trigger-text, #fff);
    border: none;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent);
    border-radius: var(--cc-header-trigger-radius, var(--cc-trigger-radius, 4px));
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 20px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.cc-header-button:hover  { opacity: 0.88; }
.cc-header-button:active { opacity: 0.72; }

.cc-header-button:focus-visible,
.cc-plp-chip:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

.cc-sparkle-icon,
.cim-widget-minimized-button::before {
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5l2 5.5 5.5 2-5.5 2L9 16.5 7 11 1.5 9 7 7zM19 12l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Legacy Ann Taylor/LOFT three-sparkle artwork retained for cached markup
   during rollout. The approved two-sparkle artwork overrides it below. The
   selector is activated by validated cc_triggerIcon configuration.
   This is the single-mask fallback (all three stars in one path) — used as-is
   by the SDK-owned FAB overlay below, since a ::before pseudo-element can't
   host the child spans the header/PLP-chip twinkle needs. The glyph keeps the
   solid icon color (currentColor, from the base rule) — on the overlay box
   that is the light --cc-fab-icon-color (white), matching the Figma overlay
   export. Do NOT paint it with the violet->dark gradient here: on the dark box
   that makes it near-invisible. */
html.cc-trigger-icon-three-sparkle .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cim-widget-minimized-button::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531ZM7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695ZM13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531ZM7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695ZM13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Header button and PLP chip render their own markup (createSparkleIcon() /
   headerButton.isml), so instead of the single combined-mask fallback above
   they paint each of the three stars as its own child span. The parent is a
   bare positioned container with NO mask of its own — a mask on the parent
   would clip the small-star children that sit outside the big star's
   silhouette. The big star is a static violet->dark gradient; the two small
   stars crossfade between a lit and dark state on opposite phases, matching
   the reference video where the big star never changes and the small stars
   alternate which one is lit. */
html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cc-plp-chip .cc-sparkle-icon {
    position: relative;
    background: none;
    -webkit-mask: none;
    mask: none;
}

/* Each star is its own absolutely-positioned masked span. The three masks are
   the exact Figma sub-paths (viewBox 0 0 18 18) so the composite lines up with
   the single-mask glyph above. The big star is static; the two small stars
   twinkle by OPACITY on opposite phases — an opacity pulse (not a colour swap)
   so the blink works identically whatever the fill is (black on the pill,
   gradient on the chip/mobile mark, white on the overlay box). */
.cc-sparkle-icon__star {
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    /* Legacy gradient fallback. Approved header and PLP surfaces are repainted
       near-black below; dark overlay surfaces are repainted white. */
    background-image: linear-gradient(135deg, #998EFF 0%, #1A1919 100%);
}

.cc-sparkle-icon__star--big {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.21055 2.57695C7.11914 2.37656 6.91875 2.25 6.70078 2.25C6.48281 2.25 6.28242 2.37656 6.19102 2.57695L4.33477 6.58477L0.326953 8.4375C0.126563 8.52891 0 8.7293 0 8.95078C0 9.17227 0.126563 9.36914 0.326953 9.46055L4.33828 11.3133L6.1875 15.3211C6.27891 15.5215 6.4793 15.648 6.69727 15.648C6.91523 15.648 7.11563 15.5215 7.20703 15.3211L9.05977 11.3098L13.0711 9.45703C13.2715 9.36563 13.398 9.16523 13.398 8.94727C13.398 8.7293 13.2715 8.52891 13.0711 8.4375L9.06328 6.58828L7.21055 2.57695Z'/%3E%3C/svg%3E");
}

.cc-sparkle-icon__star--top,
.cc-sparkle-icon__star--bottom {
    animation: cc-star-twinkle 3s ease-in-out infinite;
}

.cc-sparkle-icon__star--top {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5137 2.99531C11.3555 3.05508 11.25 3.20625 11.25 3.375C11.25 3.54375 11.3555 3.69492 11.5137 3.75469L13.5 4.5L14.2453 6.48633C14.3051 6.64453 14.4562 6.75 14.625 6.75C14.7938 6.75 14.9449 6.64453 15.0047 6.48633L15.75 4.5L17.7363 3.75469C17.8945 3.69492 18 3.54375 18 3.375C18 3.20625 17.8945 3.05508 17.7363 2.99531L15.75 2.25L15.0047 0.263672C14.9449 0.105469 14.7938 0 14.625 0C14.4562 0 14.3051 0.105469 14.2453 0.263672L13.5 2.25L11.5137 2.99531Z'/%3E%3C/svg%3E");
}

.cc-sparkle-icon__star--bottom {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 13.5L11.5137 14.2453C11.3555 14.3051 11.25 14.4562 11.25 14.625C11.25 14.7938 11.3555 14.9449 11.5137 15.0047L13.5 15.75L14.2453 17.7363C14.3051 17.8945 14.4562 18 14.625 18C14.7938 18 14.9449 17.8945 15.0047 17.7363L15.75 15.75L17.7363 15.0047C17.8945 14.9449 18 14.7938 18 14.625C18 14.4562 17.8945 14.3051 17.7363 14.2453L15.75 13.5L15.0047 11.5137C14.9449 11.3555 14.7938 11.25 14.625 11.25C14.4562 11.25 14.3051 11.3555 14.2453 11.5137L13.5 13.5Z'/%3E%3C/svg%3E");
    /* Opposite phase of --top: half the 3s cycle offset so exactly one small
       star is lit at a time, matching the reference video's alternating swap. */
    animation-delay: 1.5s;
}

/* Legal-approved shared AT/LOFT artwork. The large sparkle remains static and
   only the smaller lower-left sparkle pulses. Separate masks preserve the
   exact approved geometry while allowing each surface to provide its own
   accessible contrast color. The SDK-owned FAB uses the combined static mask
   because its ::before pseudo-element cannot host the animated child span. */
html.cc-trigger-icon-three-sparkle .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cim-widget-minimized-button::before {
    -webkit-mask: url("../images/cimulate/ai-sparkles.svg") center/contain no-repeat;
    mask: url("../images/cimulate/ai-sparkles.svg") center/contain no-repeat;
}

html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon,
html.cc-trigger-icon-three-sparkle .cc-plp-chip .cc-sparkle-icon {
    -webkit-mask: none;
    mask: none;
    transform: scale(1.12) !important;
    transform-origin: center !important;
}

.cc-sparkle-icon__star--large {
    -webkit-mask-image: url("../images/cimulate/ai-sparkle-large.svg");
    mask-image: url("../images/cimulate/ai-sparkle-large.svg");
}

.cc-sparkle-icon__star--small {
    -webkit-mask-image: url("../images/cimulate/ai-sparkle-small.svg");
    mask-image: url("../images/cimulate/ai-sparkle-small.svg");
    animation: cc-star-twinkle 3s ease-in-out infinite;
}

@keyframes cc-star-twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ── Per-surface sparkle fill ──
   The approved shared glyph is solid near-black on both the header trigger and
   the PLP trigger. The PLP button keeps its violet-to-dark border treatment. */
html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon__star {
    background-image: none;
    background-color: #1A1919;
}

html.cc-trigger-icon-three-sparkle .cc-plp-chip .cc-sparkle-icon__star {
    background-image: none;
    background-color: var(--cc-header-icon-color, #1A1919);
}

/* Overlay/PDP box or any child-star surface flagged --on-dark: white glyph on
   the gradient-filled box (matches the Figma overlay export). */
html.cc-trigger-icon-three-sparkle .cc-sparkle-icon--on-dark .cc-sparkle-icon__star {
    background-image: none;
    background-color: var(--cc-fab-icon-color, #fff);
}

html.cc-trigger-icon-three-sparkle .cc-header-button,
html.cc-trigger-icon-three-sparkle .cc-plp-chip {
    background:
        linear-gradient(var(--cc-trigger-surface, #fff), var(--cc-trigger-surface, #fff)) padding-box,
        linear-gradient(135deg, var(--cc-trigger-accent, #998EFF), #1A1919) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
}

.cc-header-button .cc-sparkle-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--cc-header-icon-color, #fff);
}

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

@media (max-width: 767.98px) {
    .cc-header-button-label { display: none; }
    .cc-header-button        { min-width: 36px; padding: 8px; }
    .cc-header-entry:not(.cc-header-entry--injected) { margin: 1.1em 0 0 0.5em; }

    /* The mobile design uses a free-standing animated mark, not the boxed
       desktop trigger. Its 36px button remains a full keyboard/pointer target. */
    html.cc-trigger-icon-three-sparkle .cc-header-button {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 7px;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon {
        width: 22px;
        height: 22px;
    }

    /* Use the same approved near-black artwork on mobile. The former violet
       gradient could read as a blue, brand-inconsistent icon on small screens. */
    html.cc-trigger-icon-three-sparkle .cc-header-button .cc-sparkle-icon__star {
        background-image: none;
        background-color: var(--cc-header-icon-color, #1A1919);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-header-button,
    .cc-plp-chip {
        transition: none;
    }

    .cc-sparkle-icon__star {
        animation: none;
        opacity: 1;
    }
}

/* ── PLP AI-filter chip ── */
/* The configured host sits outside the storefront's ARIA tablist. Keep the
   AI action and the existing refinement tabs on one visual row while leaving
   their accessibility semantics separate. */
.cc-plp-chip-host {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    position: relative;
}

/* The storefront tablist normally owns the PLP divider, so its line starts
   after our sibling AI action. Move that same computed divider to the shared
   host and preserve the storefront's native margin below it. ::before is used
   because Premium storefronts already draw another divider with nav::after. */
.cc-plp-chip-host::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: var(--cc-plp-divider-offset, 16px);
    border-bottom: var(--cc-plp-divider-style, 1px solid #ccc);
    z-index: 2;
    pointer-events: none;
}

.cc-plp-chip-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-bottom: none !important;
}

/* Suppress the storefront's second, nav-level line only for the navigation
   containing the injected PLP action. The host's ::before is the sole divider. */
.cc-plp-chip-nav::after {
    content: none !important;
    display: none !important;
}

/* !important: injected into an arbitrary storefront filter-bar container,
   whose own generic "button" selectors (e.g. width/background/border resets
   for its own filter tabs) can otherwise out-specificity a plain class
   selector — this is the narrowest specificity bump that still wins. */
.cc-plp-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    margin: 0 10px 0 0 !important;
    background: var(--cc-trigger-surface, #000) !important;
    color: var(--cc-trigger-accent, #fff) !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px var(--cc-trigger-accent, transparent) !important;
    border-radius: var(--cc-trigger-radius, 999px) !important;
    padding: 0 !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cc-plp-chip:hover  { opacity: 0.85 !important; }
.cc-plp-chip:active { opacity: 0.7 !important; }

.cc-plp-chip .cc-sparkle-icon {
    display: block;
    width: 15px;
    height: 15px;
}

/* ── Branded message composer ── */
/* Keep the text field and submit CTA at the same design-system height. The
   SDK renders these controls in light DOM, so the cartridge can brand them
   without replacing the SDK's form or submit behavior. */
html.cc-trigger-icon-three-sparkle .cim-widget-search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-input {
    min-width: 0;
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid #6a6a6a !important;
    border-radius: var(--cim-widget-border-radius, 0) !important;
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-input::placeholder {
    color: #6a6a6a;
    opacity: 1;
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon.cim-widget-icon-button {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--cim-widget-primary-color, #1a1919) !important;
    border: 1px solid var(--cim-widget-primary-color, #1a1919) !important;
    border-radius: var(--cim-widget-border-radius, 0) !important;
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon.cim-widget-icon-button:hover:not(:disabled) {
    background-color: #292929 !important;
    border-color: #292929 !important;
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon.cim-widget-icon-button:focus-visible {
    outline: 2px solid var(--cim-widget-primary-color, #1a1919) !important;
    outline-offset: 2px;
}

/* Text inputs are focused automatically when the panel opens. Keep that focus
   indicator inside the fixed-height field so it remains accessible without
   creating the misleading double-border/height mismatch seen in the comp. */
html.cc-trigger-icon-three-sparkle .cim-widget-search-input:focus-visible {
    outline: none !important;
    border-color: var(--cim-widget-primary-color, #1a1919) !important;
    box-shadow: inset 0 0 0 1px var(--cim-widget-primary-color, #1a1919) !important;
}

@media (forced-colors: active) {
    html.cc-trigger-icon-three-sparkle .cim-widget-search-input:focus-visible {
        outline: 2px solid CanvasText !important;
        outline-offset: -2px;
        box-shadow: none !important;
    }
}

html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon .cim-widget-icon-image,
html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon-image {
    width: 100% !important;
    height: 100% !important;
    box-sizing: content-box;
    object-fit: contain;
    padding: 0 !important;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    html.cc-trigger-icon-three-sparkle .cim-widget-search-input {
        height: 40px !important;
        min-height: 40px !important;
    }

    html.cc-trigger-icon-three-sparkle .cim-widget-search-button-icon.cim-widget-icon-button {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

/* ── Full-height side panel ── */
/* z-index: keep the open panel above the site's fixed third-party overlays
   (e.g. an influencer/shoppable-video player, an accessibility toolbar) that
   dock at high z-index and would otherwise land on top of the panel. The panel
   is an opaque surface — full-screen on mobile, a right rail on desktop — and
   these overlays sit within its footprint on both, so winning the stacking
   order makes them paint behind it. They stay in the DOM and return the moment
   the panel closes (nothing hidden → no accessibility-widget concern). Applied
   at both breakpoints; desktop needs it too since the video docks bottom-right,
   inside the rail. We use the max z-index; anything below it is covered
   outright. A widget also pinned at the max value can tie on DOM order and may
   still need a targeted per-widget fallback. */
.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;
    z-index: 2147483647 !important;
}

/* ── Privacy / Terms notice at the start of the scrollable conversation ── */
html.cc-has-header-notice .cim-widget-dialog-header,
html.cc-has-header-notice .cim-widget-modal-header {
    border-bottom: none !important;
}

html.cc-has-header-notice .cim-widget-dialog-content .cim-widget-message-container,
html.cc-has-header-notice .cim-widget-modal-content .cim-widget-message-container {
    padding-top: 8px;
}

.cim-widget-message-container > .cc-widget-header-notice {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 0;
    color: var(--cim-widget-font-color, #1a1919);
    background: var(--cim-widget-background-color, #fff);
    font-family: var(--cim-widget-font-family, inherit);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
}

.cim-widget-message-container > .cc-widget-header-notice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cim-widget-message-container > .cc-widget-header-notice a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Product-card image proportions ── */
/* The widget's square image wrapper letterboxes portrait merchandising images,
   leaving side whitespace on product cards. Let real images establish their
   natural aspect ratio while retaining the widget's square fallback for cards
   that render an image placeholder. The stronger body-prefixed selectors win
   even when the SDK stylesheet is injected after this storefront stylesheet. */
@supports selector(:has(*)) {
    body .cim-widget-msg-product-card__image-wrapper:has(.cim-widget-msg-product-card__image) {
        height: auto !important;
        aspect-ratio: auto !important;
        flex: 0 0 auto !important;
    }

    body .cim-widget-msg-product-card__image-wrapper:has(.cim-widget-msg-product-card__image)
        .cim-widget-msg-product-card__image-button {
        height: auto !important;
    }

    body .cim-widget-msg-product-card__image {
        width: 100% !important;
        height: auto !important;
        object-fit: initial !important;
    }

    body .cim-widget-msg-product-card:has(.cim-widget-msg-product-card__image)
        .cim-widget-msg-product-card__content {
        height: auto !important;
        flex: 1 1 auto !important;
    }
}

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

/* cc_widgetPosition "center-right": pin the floating box to the right edge
   (used on the PDP). The SDK owns the container, so this overrides its inline
   bottom/left placement. The vertical anchor sits BELOW dead-center by
   default (between center-right and bottom-right, per the PDP design); tune it
   per site with --cc-fab-top (0% = top, 50% = centered, higher = lower). */
html.cc-fab-center-right .cim-widget-minimized-container {
    position: fixed !important;
    top: var(--cc-fab-top, 72%) !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

/* Hide every icon the SDK itself may render (img or inline svg) so our own
   ::before icon below is always the only one visible — a single, reliable
   icon regardless of which markup the SDK uses internally. */
.cim-widget-minimized-icon-img,
.cim-widget-minimized-button > svg {
    display: none !important;
}

html.cc-trigger-themed .cim-widget-minimized-button {
    background: linear-gradient(
        135deg,
        var(--cc-fab-gradient-start, var(--cc-trigger-accent, #998EFF)),
        var(--cc-fab-gradient-end, #1A1919)
    ) !important;
    border-radius: var(--cc-trigger-radius, 4px) !important;
    /* Keep the desktop FAB at its approved 50x50 size. The SDK sets its own
       box size, so we win with !important and center our glyph. */
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Drop shadow matching the export's filter (stdDeviation 2, black 25%). */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
}

.cim-widget-minimized-button::before {
    content: '';
    display: block;
    /* Slightly enlarge the artwork for better legibility while preserving the
       approved desktop button footprint. */
    width: 26px;
    height: 26px;
    color: var(--cc-fab-icon-color, #fff);
}

/* Mobile FAB — use a 44x44 touch target and keep the sparkle large enough to
   remain recognizable on compact PDP layouts. */
@media (max-width: 767.98px) {
    html.cc-trigger-themed .cim-widget-minimized-button {
        width: 44px !important;
        height: 44px !important;
    }

    .cim-widget-minimized-button::before {
        width: 22px;
        height: 22px;
    }
}

html.cc-trigger-themed .cim-widget-minimized-button:focus-visible {
    outline: 2px solid var(--cc-trigger-accent, #000);
    outline-offset: 2px;
}

/* ── Inline PDP widget ── */
inline-agent-widget[data-iaw-pdp] {
    display: block;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── 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); }
}