/*
 * AI shopping advisor: the site-wide launcher, its modal, and the chat inside.
 *
 * Hand-written and hand-linked rather than compiled through Mix, matching how
 * css/category.css ships: the deploy is FTP, and a plain file needs no build
 * step. Everything is namespaced under .advisor so it cannot leak into the
 * shared theme.
 *
 * Two theme constraints this file has to live with, both from template.css:
 *   · .header  is position:fixed with z-index 10001
 *   · .toolbar is position:fixed at the bottom, z-index 1000, ~66px tall,
 *     below 992px, and body carries padding-bottom:66px to clear it
 * The modal therefore sits ABOVE 10001, or its top slides under the site
 * header and becomes unclickable, while the launcher sits just above the
 * toolbar and below the header.
 */

.advisor-widget,
.advisor {
    --advisor-accent: #e91e63;
    --advisor-gradient: linear-gradient(135deg, #ff4d8d 0%, #e91e63 55%, #a3155a 100%);
    --advisor-line: rgba(0, 0, 0, .08);
    --advisor-soft: rgba(0, 0, 0, .04);
}

/* The chat fills the modal panel; the thread takes whatever height is left. */
.advisor {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;
    height: 100%;
}

/*
 * Scrollbars.
 *
 * Chrome on Windows draws classic stepper arrows at both ends of the bar;
 * inside a chat panel they read as broken UI, and they show even on a list with
 * nothing to scroll. ::-webkit-scrollbar-button is the part that removes them --
 * setting a width alone does not.
 *
 * The standard scrollbar-width/scrollbar-color properties are deliberately kept
 * OUT of the same rule: when either is set, Chrome ignores every
 * ::-webkit-scrollbar pseudo-element on that element, and the steppers come
 * straight back. Firefox has no ::-webkit-scrollbar support, so it takes the
 * standard properties through the @supports block below and everyone is served.
 */
@supports not selector(::-webkit-scrollbar) {
    .advisor-thread,
    .advisor-conv-list {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .advisor-thread:hover,
    .advisor-conv-list:hover {
        scrollbar-color: rgba(0, 0, 0, .2) transparent;
    }
}

.advisor-thread::-webkit-scrollbar,
.advisor-conv-list::-webkit-scrollbar {
    width: 6px;
}

.advisor-thread::-webkit-scrollbar-button,
.advisor-conv-list::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.advisor-thread::-webkit-scrollbar-track,
.advisor-conv-list::-webkit-scrollbar-track {
    background: transparent;
}

/*
 * Transparent at rest, not hidden: the track keeps its width so revealing the
 * thumb on hover cannot reflow the message column. With only a few messages the
 * thumb fills the whole track, which as a permanent grey line down the edge of
 * the panel looks like a border someone forgot to remove.
 */
.advisor-thread::-webkit-scrollbar-thumb,
.advisor-conv-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background .18s;
}

.advisor-thread:hover::-webkit-scrollbar-thumb,
.advisor-conv-list:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
}

.advisor-thread::-webkit-scrollbar-thumb:hover,
.advisor-conv-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .34);
}

/* Set while the mobile drawer is open, so the page behind it cannot scroll. */
body.advisor-locked {
    overflow: hidden;
}

/* ---------------------------------------------------------------- sidebar */

.advisor-sidebar {
    flex: 0 0 272px;
    max-width: 272px;
}

/* Tinted over an opaque base, so the mobile drawer is never see-through. */
.advisor-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 16px;
    background: linear-gradient(var(--advisor-soft), var(--advisor-soft)), var(--bg-card, #fff);
    border-left: 1px solid var(--advisor-line);
}

.advisor-sidebar-head { display: none; }
.advisor-sidebar-backdrop { display: none; }

.advisor-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    font-family: inherit;
    font-size: 13.5px;
    color: #fff;
    background: var(--advisor-accent);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: filter .15s;
}

.advisor-new:hover { filter: brightness(1.08); }

.advisor-conv-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-height: 0;
    overflow-y: auto;
}

.advisor-conv {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    transition: background .15s;
}

.advisor-conv:hover { background: var(--advisor-soft); }

.advisor-conv.is-active {
    background: rgba(233, 30, 99, .1);
    box-shadow: inset 2px 0 0 var(--advisor-accent);
}

.advisor-conv-open {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    color: inherit;
    text-align: right;
    background: none;
    border: 0;
    cursor: pointer;
}

.advisor-conv-title {
    display: block;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.8;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.advisor-conv-date {
    display: block;
    font-size: 10.5px;
    color: #9e9e9e;
    unicode-bidi: isolate;
}

.advisor-conv-delete {
    padding: 0 11px;
    font-size: 12px;
    color: #bdbdbd;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s;
}

.advisor-conv-delete:hover { color: #e53935; }

.advisor-conv-empty {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    justify-content: center;
    padding: 34px 10px;
    font-size: 12.5px;
    font-weight: 400;
    color: #b0b0b0;
    text-align: center;
}

.advisor-conv-empty i { font-size: 24px; opacity: .55; }

/* ------------------------------------------------------------------- main */

.advisor-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-card, #fff);
}

.advisor-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--advisor-line);
}

.advisor-header-title { flex: 1; min-width: 0; }

.advisor-header-name {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
}

.advisor-header-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #9e9e9e;
}

.advisor-drawer-toggle,
.advisor-drawer-close {
    display: none;
    padding: 7px 10px;
    font-size: 16px;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.advisor-quota-badge {
    flex: 0 0 auto;
    padding: 5px 11px;
    font-size: 11.5px;
    color: #2e7d32;
    background: rgba(76, 175, 80, .12);
    border-radius: 999px;
    white-space: nowrap;
}

.advisor-quota-badge.is-empty { color: #c62828; background: rgba(229, 57, 53, .12); }
.advisor-quota-badge.is-unlimited { color: #1565c0; background: rgba(21, 101, 192, .12); }

.advisor-close {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 17px;
    color: inherit;
    background: var(--advisor-soft);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s, color .18s, transform .25s;
}

.advisor-close:hover {
    color: var(--advisor-accent);
    background: rgba(233, 30, 99, .1);
    transform: rotate(90deg);
}

/* ----------------------------------------------------------------- thread */

/*
 * Note the absence of overscroll-behavior: `contain` stops the wheel from
 * chaining to the page once the thread hits either end, so a cursor resting
 * over the conversation makes the whole page feel frozen.
 */
.advisor-thread {
    flex: 1;
    min-height: 0;
    padding: 22px 20px;
    overflow-y: auto;
}

/* Empty state ------------------------------------------------------------ */

.advisor-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 460px;
    min-height: 100%;
    margin: 0 auto;
    text-align: center;
}

.advisor-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 14px;
    font-size: 26px;
    color: var(--advisor-accent);
    background: rgba(233, 30, 99, .09);
    border-radius: 50%;
}

.advisor-intro-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.1;
    color: #757575;
}

/* Messages --------------------------------------------------------------- */

.advisor-turn { margin-bottom: 20px; }

.advisor-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.advisor-turn.is-user .advisor-row { justify-content: flex-start; flex-direction: row-reverse; }

.advisor-avatar {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--advisor-accent);
    background: rgba(233, 30, 99, .1);
    border-radius: 50%;
}

.advisor-avatar.is-error { color: #c62828; background: rgba(229, 57, 53, .12); }

.advisor-bubble {
    max-width: 78%;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.1;
    border-radius: 15px;
    /* Persian text with Latin/number runs inside; keep the mix from reordering. */
    unicode-bidi: plaintext;
}

/*
 * Plain-text bubbles: preserve the line breaks the shopper typed with
 * Shift+Enter, which HTML would otherwise collapse into a single space.
 * Deliberately NOT applied to assistant bubbles -- those hold rendered markdown,
 * where the newlines between <p>/<li> tags would become visible blank space.
 */
.advisor-turn.is-user .advisor-bubble,
.advisor-turn.is-error .advisor-bubble {
    white-space: pre-wrap;
}

.advisor-turn.is-user .advisor-bubble {
    color: #fff;
    background: var(--advisor-accent);
    border-bottom-right-radius: 5px;
}

.advisor-turn.is-assistant .advisor-bubble {
    background: var(--advisor-soft);
    border-bottom-left-radius: 5px;
}

.advisor-turn.is-error .advisor-bubble {
    color: #c62828;
    background: rgba(229, 57, 53, .08);
    border: 1px solid rgba(229, 57, 53, .25);
}

.advisor-bubble p { margin: 0 0 7px; }
.advisor-bubble p:last-child { margin-bottom: 0; }
.advisor-bubble ul,
.advisor-bubble ol { margin: 7px 0; padding-right: 18px; }
.advisor-bubble li { margin-bottom: 3px; }
.advisor-bubble strong { font-weight: 700; }
.advisor-bubble a { color: inherit; text-decoration: underline; }

.advisor-typing {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.advisor-typing span {
    width: 6px;
    height: 6px;
    background: #9e9e9e;
    border-radius: 50%;
    animation: advisor-blink 1.3s infinite both;
}

.advisor-typing span:nth-child(2) { animation-delay: .18s; }
.advisor-typing span:nth-child(3) { animation-delay: .36s; }

.advisor-typing em {
    margin-right: 5px;
    font-size: 12px;
    font-style: normal;
    color: #9e9e9e;
}

@keyframes advisor-blink {
    0%, 70%, 100% { opacity: .25; }
    35%           { opacity: 1; }
}

/* ------------------------------------------------------------ product cards */

.advisor-cards-wrap { margin: 12px 0 0 39px; }

.advisor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 10px;
}

.advisor-card {
    display: block;
    overflow: hidden;
    color: inherit;
    background: var(--bg-card, #fff);
    border: 1px solid var(--advisor-line);
    border-radius: 12px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.advisor-card:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--advisor-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.advisor-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fafafa;
}

.advisor-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.advisor-card-off {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    font-size: 11px;
    color: #fff;
    background: #e53935;
    border-radius: 999px;
}

.advisor-card-body { padding: 9px 10px 11px; }

.advisor-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
}

.advisor-card-price {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    unicode-bidi: plaintext;
}

.advisor-card-price del {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 400;
    color: #9e9e9e;
}

.advisor-card-price small { font-size: 10.5px; font-weight: 400; }

.advisor-card-out {
    margin-top: 7px;
    font-size: 12px;
    color: #9e9e9e;
}

/* --------------------------------------------------------------- composer */

.advisor-composer {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--advisor-line);
}

.advisor-composer-box {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 5px 5px 5px 12px;
    background: var(--advisor-soft);
    border: 1px solid transparent;
    border-radius: 15px;
    transition: border-color .15s;
}

.advisor-composer-box:focus-within { border-color: rgba(233, 30, 99, .45); }

.advisor-composer-box textarea {
    flex: 1;
    max-height: 132px;
    padding: 9px 4px;
    font-family: inherit;
    /* 16px stops iOS Safari zooming the viewport when the field is focused. */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    color: inherit;
    background: none;
    border: 0;
    outline: none;
    resize: none;
}

.advisor-composer-box textarea:disabled { opacity: .55; }

.advisor-send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 14px;
    color: #fff;
    background: var(--advisor-accent);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: filter .15s;
}

.advisor-send:hover:not(:disabled) { filter: brightness(1.08); }
.advisor-send:disabled { opacity: .45; cursor: not-allowed; }

.advisor-composer-foot {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 4px;
    font-size: 11.5px;
    font-weight: 400;
}

.advisor-hint { color: #9e9e9e; unicode-bidi: isolate; }
.advisor-error { color: #c62828; }

.advisor-counter {
    color: #bdbdbd;
    /* Latin digits inside an RTL line; isolate so "12 / 500" is not reordered. */
    unicode-bidi: isolate;
}

.advisor-counter.is-near { color: #ef6c00; }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 991.99px) {
    .advisor-drawer-toggle,
    .advisor-drawer-close { display: block; }

    /*
     * Above .header's z-index of 10001, or the top of the drawer renders
     * beneath the site's fixed header and cannot be tapped. Kept below the
     * theme's own .panel-menu (999999) so the two never fight.
     */
    .advisor-sidebar {
        position: fixed;
        inset: 0;
        z-index: 10050;
        flex: none;
        max-width: none;
        visibility: hidden;
        pointer-events: none;
    }

    .advisor-sidebar.is-open { visibility: visible; pointer-events: auto; }

    .advisor-sidebar-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .advisor-sidebar.is-open .advisor-sidebar-backdrop { opacity: 1; }

    .advisor-sidebar-inner {
        position: absolute;
        top: 0;
        right: 0;
        width: 82%;
        max-width: 320px;
        /* dvh tracks the collapsing browser chrome; vh is the fallback. */
        height: 100vh;
        height: 100dvh;
        border: 0;
        transform: translateX(100%);
        transition: transform .24s ease;
    }

    .advisor-sidebar.is-open .advisor-sidebar-inner { transform: translateX(0); }

    .advisor-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid var(--advisor-line);
    }

    .advisor-conv-list { max-height: none; flex: 1; }

    .advisor-header { padding: 10px 12px; }
    .advisor-header-sub { display: none; }
    .advisor-header-name { font-size: 13.5px; }

    .advisor-thread { padding: 16px 12px; }

    .advisor-bubble { max-width: 84%; font-size: 13.5px; }

    .advisor-intro { margin-top: 2vh; }

    /*
     * A grid this narrow squeezes cards to unreadable widths, so the row
     * scrolls sideways instead. Negative margins let it bleed to the card edge.
     */
    .advisor-cards-wrap {
        margin: 12px -12px 0;
        padding: 0 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .advisor-cards-wrap::-webkit-scrollbar { display: none; }

    .advisor-cards {
        display: flex;
        gap: 9px;
    }

    .advisor-card { flex: 0 0 138px; }

    /* The modal is full-screen here, so clear the home indicator on iOS. */
    .advisor-composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 575.99px) {
    .advisor-bubble { max-width: 88%; }
    .advisor-composer-foot { font-size: 10.5px; }
}

/* ------------------------------------------------------------ lazy skeleton */

.advisor-sk {
    display: block;
    background: linear-gradient(90deg, rgba(127, 127, 127, .1) 25%, rgba(127, 127, 127, .2) 50%, rgba(127, 127, 127, .1) 75%);
    background-size: 200% 100%;
    border-radius: 12px;
    animation: advisor-shimmer 1.4s ease-in-out infinite;
}

.advisor-sk-button { height: 42px; margin-bottom: 8px; }
.advisor-sk-line { height: 38px; }
.advisor-sk-line.is-short { width: 70%; }

.advisor-sk-bubble { width: 46%; height: 54px; margin-bottom: 18px; border-bottom-left-radius: 5px; }
.advisor-sk-bubble.is-mine { width: 32%; margin-right: auto; border-radius: 12px 12px 5px 12px; }
.advisor-sk-bubble.is-wide { width: 62%; height: 86px; }

.advisor-sk-composer { height: 52px; border-radius: 15px; }

@keyframes advisor-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

/* ----------------------------------------------------------------- launcher */

.advisor-widget [x-cloak] { display: none !important; }

/*
 * Set while the modal is open, so the page behind it cannot scroll.
 * !important because template.css pins `body { overflow-y: auto !important }`,
 * which silently beat a plain `overflow: hidden`. The gutter stays reserved so
 * the vanishing scrollbar does not shift the page (and the fixed header)
 * sideways as the modal opens and closes.
 */
html:has(> body.advisor-modal-open) {
    scrollbar-gutter: stable;
}

body.advisor-modal-open {
    overflow: hidden !important;
}

/*
 * Above .toolbar (1000) and the WhatsApp/Bale .w-chat (1001, bottom-left) and
 * below .header (10001), so the header's own dropdowns still cover it.
 */
.advisor-fab {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 1002;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0;
    font-family: inherit;
    color: #fff;
    background: var(--advisor-gradient);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 14px 30px -8px rgba(233, 30, 99, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, opacity .2s;
}

/* A soft ring breathing outwards, so the button is noticed without shouting. */
.advisor-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: advisor-pulse 2.8s ease-out infinite;
    pointer-events: none;
}

.advisor-fab:hover {
    box-shadow: 0 18px 36px -8px rgba(233, 30, 99, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: translateY(-3px);
}

.advisor-fab:hover::before { animation: none; }

.advisor-fab:focus-visible { outline: 3px solid rgba(233, 30, 99, .35); outline-offset: 3px; }

.advisor-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(.6);
}

.advisor-fab-icon {
    display: inline-flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 25px;
}

.advisor-fab-icon i { animation: advisor-bob 3.2s ease-in-out infinite; }

/* Slides out to the left of the icon on hover; desktop only (see below). */
.advisor-fab-label {
    max-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s, padding .35s;
}

.advisor-fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 10px;
    color: var(--advisor-accent);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}

@keyframes advisor-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(233, 30, 99, .45); }
    70%  { box-shadow: 0 0 0 16px rgba(233, 30, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); }
}

@keyframes advisor-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

@media (min-width: 992px) {
    .advisor-fab:hover .advisor-fab-label {
        max-width: 180px;
        padding-left: 22px;
        opacity: 1;
    }
}

/* -------------------------------------------------------------------- modal */

/*
 * The blur lives on the backdrop, a SIBLING of the chat, and never on an
 * ancestor: transform, filter and backdrop-filter all turn an element into the
 * containing block of its position:fixed descendants, which would trap the
 * chat's mobile drawer inside the panel.
 */
.advisor-modal {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.advisor-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 10, 24, .58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.advisor-modal-panel {
    position: relative;
    display: flex;
    width: min(1200px, 100%);
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    overflow: hidden;
    color: var(--color-text, inherit);
    background: var(--bg-card, #fff);
    border-radius: 22px;
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .5);
}

.advisor-fade { transition: opacity .25s ease; }
.advisor-fade-from { opacity: 0; }
.advisor-fade-to { opacity: 1; }

.advisor-pop { transition: transform .34s cubic-bezier(.2, .9, .25, 1), opacity .22s ease; }
.advisor-pop-from { opacity: 0; transform: translateY(18px) scale(.97); }
.advisor-pop-to { opacity: 1; transform: none; }

/* --------------------------------------------------------------- login card */

.advisor-login {
    position: relative;
    width: min(420px, 100%);
    overflow: hidden;
    color: var(--color-text, inherit);
    text-align: center;
    background: var(--bg-card, #fff);
    border-radius: 26px;
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .5);
}

.advisor-login-dismiss {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s, transform .25s;
}

.advisor-login-dismiss:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

.advisor-login-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 158px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .3), transparent 42%),
        var(--advisor-gradient);
}

.advisor-login-hero::before,
.advisor-login-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.advisor-login-hero::before { width: 180px; height: 180px; bottom: -90px; left: -40px; }
.advisor-login-hero::after { width: 110px; height: 110px; top: -40px; right: 20%; }

.advisor-login-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    font-size: 38px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .09), 0 0 0 22px rgba(255, 255, 255, .05);
}

.advisor-login-orb > i { animation: advisor-bob 3.2s ease-in-out infinite; }

.advisor-login-lock {
    position: absolute;
    bottom: -2px;
    left: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--advisor-accent);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.advisor-login-body { padding: 24px 26px 22px; }

.advisor-login-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.8;
}

/*
 * Spacing in this card is set with margin-top only: template.css forces
 * `margin-bottom: 0 !important` on every ul and p.
 */
.advisor-login-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 2.1;
    opacity: .72;
}

.advisor-login-perks {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    text-align: right;
    list-style: none;
}

.advisor-login-perks li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 13px;
    font-size: 12.5px;
    font-weight: 400;
    background: rgba(233, 30, 99, .06);
    border-radius: 12px;
}

.advisor-login-perks i {
    flex: 0 0 18px;
    font-size: 15px;
    color: var(--advisor-accent);
    text-align: center;
}

.advisor-login-primary {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--advisor-gradient);
    border-radius: 15px;
    box-shadow: 0 12px 26px -10px rgba(233, 30, 99, .65);
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.advisor-login-primary:hover,
.advisor-login-primary:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.05);
    box-shadow: 0 16px 30px -10px rgba(233, 30, 99, .75);
    transform: translateY(-1px);
}

.advisor-login-later {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 13px;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 12px;
    opacity: .6;
    cursor: pointer;
    transition: opacity .18s;
}

.advisor-login-later:hover { opacity: 1; }

/* ------------------------------------------------------ launcher on mobile */

@media (max-width: 991.99px) {
    /* Clear the fixed bottom .toolbar (~66px). */
    .advisor-fab {
        right: 16px;
        bottom: calc(66px + 14px + env(safe-area-inset-bottom));
        height: 54px;
    }

    .advisor-fab-icon { flex-basis: 54px; width: 54px; height: 54px; font-size: 22px; }

    /* Full-screen chat. */
    .advisor-modal { padding: 0; }

    .advisor-modal-panel {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .advisor-pop-from { transform: translateY(32px); }

    /* The sign-in prompt becomes a bottom sheet. */
    .advisor-modal.is-sheet { align-items: flex-end; }

    .advisor-modal.is-sheet .advisor-login {
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 26px 26px 0 0;
    }

    .advisor-modal.is-sheet .advisor-pop-from { opacity: 1; transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .advisor-fab::before,
    .advisor-fab-icon i,
    .advisor-login-orb > i,
    .advisor-sk { animation: none; }

    .advisor-pop,
    .advisor-fade { transition: opacity .15s ease; }
    .advisor-pop-from,
    .advisor-modal.is-sheet .advisor-pop-from { transform: none; }
}