/* ── Brand Theme ──
   The widget sets these variables inline on its containers (launcher, chat window);
   !important here beats the inline values, so every themed element turns brand red. */
[style*="--cim-widget-primary-color"] {
    --cim-widget-primary-color: #D6001C !important;
    --cim-widget-secondary-color: #1A202C !important;
    --cim-widget-font-color: #1A202C !important;
}

/* ── Brand Color Overrides ── */
.cim-widget-message-group.embedded {
    background-color: #F3F3F3 !important;
}
.cim-widget-user-message.embedded {
    background-color: #EBEBEB !important;
}
.cim-widget-message-group-child p {
    color: #1A202C !important;
}
.cim-widget-jump-to-latest-button {
    color: #D6001C !important;
}

/* ── Launcher: Shiseido-red sparkle icon instead of the stock chat icon ── */
.cim-widget-minimized-button {
    width: 3rem !important;
    height: 3rem !important;
    padding: 0 !important;
    border: none !important;
    background: url("https://es.shiseido.com/on/demandware.static/Sites-shiseido_us-Site/-/en_US/images/cimulate/shiseido-launcher.svg") center / cover no-repeat !important;
    box-shadow: 0 0 14px rgba(214, 0, 28, 0.45), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
.cim-widget-minimized-button:hover {
    box-shadow: 0 0 20px rgba(214, 0, 28, 0.65), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
.cim-widget-minimized-button .cim-widget-minimized-icon {
    visibility: hidden !important;
}
/* Sit above the site's fixed concierge bar (Offers / Get Help / Services: bottom .9375rem, ~2.6rem tall) */
.cim-widget-minimized-container {
    bottom: 4.75rem !important;
}

/* Hover label: "Ask Beauty Assistant" slides out to the left of the launcher */
.cim-widget-minimized-button {
    position: relative !important;
    overflow: visible !important;
}
.cim-widget-minimized-button::after {
    content: "Ask Beauty Assistant";
    position: absolute;
    top: 50%;
    right: calc(100% + 0.75rem);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    background: #FFFFFF;
    color: #1A202C;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transform: translate(0.75rem, -50%);
    transition: opacity 0.2s ease, transform 0.25s ease;
}
.cim-widget-minimized-button:hover::after,
.cim-widget-minimized-button:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}
@media (prefers-reduced-motion: reduce) {
    .cim-widget-minimized-button::after { transition: opacity 0.2s ease; transform: translate(0, -50%); }
}

/* ── Header: Shiseido-red sparkle before the "Personal Beauty Assistant" title ──
   The header is inline-flex with an 8px gap; the pseudo-element sits ahead of the title. */
.cim-widget-dialog-header::before,
.cim-widget-modal-header::before {
    content: "";
    -ms-flex: 0 0 1.5rem;
        flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url("https://es.shiseido.com/on/demandware.static/Sites-shiseido_us-Site/-/en_US/images/cimulate/shiseido-sparkle.svg") center / contain no-repeat;
}
/* ── Site header: sparkle that opens the chat ──
   Injected by chatbotdetails.isml as the first header icon, so it sits left of the
   location icon on desktop and left of the bag on mobile (where location/account are
   hidden). Sized to the glyph height of the icon next to it: pin 19px, bag 22px. */
.header-redesign .header-utilityicons-container .shi-chat-sparkle-item {
    max-height: none;
}
.shi-chat-sparkle-link {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.shi-chat-sparkle-link .icon {
    width: 1.1875rem;
    height: 1.1875rem;
    background: url("https://es.shiseido.com/on/demandware.static/Sites-shiseido_us-Site/-/en_US/images/cimulate/shiseido-header-sparkle.svg") center / contain no-repeat;
}
@media only screen and (max-width: 639px) {
    .header-redesign .header-utilityicons-container {
        width: auto;
    }
    .shi-chat-sparkle-link .icon {
        width: 1.375rem;
        height: 1.375rem;
    }
}

/* ── Overflow menu: hide "Download transcript" (cc_enableDownloadTranscript isn't wired in this cartridge) ── */
.download-transcript-button {
    display: none !important;
}