/* One size and one inset for the whole widget. The launcher, the badge on it
   and the offset the conversation window opens at are all derived from these,
   so a change of size stays in one place instead of being re-added by hand in
   four rules that can fall out of step. */
:root {
    --ai-chatbot-size: 52px;
    --ai-chatbot-inset: 24px;
}

.ai-chatbot-toggle {
    position: fixed;
    /* Classic pins a navigation bar to the bottom of the viewport below xl, and
       the launcher used to sit on top of it. The bar publishes its own measured
       height as --app-bar-height (see the classic _app-bar partial); it is not a
       fixed number, because the bar shrinks twice on the way down to 480px. Any
       theme without such a bar never sets the variable, so the fallback of 0px
       leaves those layouts exactly where they were. */
    bottom: calc(var(--ai-chatbot-inset) + var(--app-bar-height, 0px));
    left: var(--ai-chatbot-inset);
    width: var(--ai-chatbot-size);
    height: var(--ai-chatbot-size);
    border-radius: 50%;
    background: var(--primary-clr, #1455AC);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--ai-chatbot-size) * 0.42);
    z-index: 9998;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ai-chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.ai-chatbot-toggle .badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: calc(var(--ai-chatbot-size) * 0.23);
    height: calc(var(--ai-chatbot-size) * 0.23);
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
}

.ai-chatbot-window {
    position: fixed;
    /* Clears the launcher, which is itself clearing the bar. */
    bottom: calc(var(--ai-chatbot-inset) + var(--ai-chatbot-size) + 12px + var(--app-bar-height, 0px));
    left: var(--ai-chatbot-inset);
    width: 380px;
    max-height: 520px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,.15);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* Adopt the active theme's body font; the system stack is only the
       fallback for a theme that does not declare the token. */
    font-family: var(--bs-body-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.ai-chatbot-window.open {
    display: flex;
}

.ai-chatbot-header {
    background: var(--primary-clr, #1455AC);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-chatbot-header-title {
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-chatbot-header-title .dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}
.ai-chatbot-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s;
}
.ai-chatbot-close:hover { opacity: 1; }

.ai-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    min-height: 200px;
}

.ai-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .85rem;
    line-height: 1.45;
    word-wrap: break-word;
}
.ai-chat-msg.bot {
    align-self: flex-start;
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}
.ai-chat-msg.user {
    align-self: flex-end;
    background: var(--primary-clr, #1455AC);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-chat-products {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}
.ai-chat-product-card {
    flex: 0 0 130px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: border-color .15s;
}
.ai-chat-product-card:hover {
    border-color: var(--primary-clr, #1455AC);
    color: #1e293b;
}
.ai-chat-product-card img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.ai-chat-product-card .name {
    font-size: .75rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-chat-product-card .price {
    font-size: .72rem;
    color: var(--primary-clr, #1455AC);
    font-weight: 700;
    margin-top: 4px;
}

.ai-chat-typing {
    align-self: flex-start;
    background: #f1f5f9;
    padding: 10px 18px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    display: flex;
    gap: 4px;
}
.ai-chat-typing span {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typingBounce .6s infinite alternate;
}
.ai-chat-typing span:nth-child(2) { animation-delay: .2s; }
.ai-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

.ai-chatbot-input {
    display: flex;
    border-top: 1px solid #e2e8f0;
    padding: 10px 14px;
    gap: 8px;
}
.ai-chatbot-input input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s;
}
.ai-chatbot-input input:focus {
    border-color: var(--primary-clr, #1455AC);
}
.ai-chatbot-input button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-clr, #1455AC);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: opacity .15s;
}
.ai-chatbot-input button:hover { opacity: .85; }
.ai-chatbot-input button:disabled { opacity: .5; cursor: not-allowed; }

/* A phone has less room to give away, and the launcher sits over real content
   there rather than over margin. Shrinking the token pulls the badge, the icon
   and the window's opening offset down with it. 44px is the floor, not a round
   number: below that the button stops being a comfortable touch target. */
@media (max-width: 991px) {
    :root {
        --ai-chatbot-size: 44px;
        --ai-chatbot-inset: 16px;
    }
}

@media (max-width: 480px) {
    .ai-chatbot-window {
        width: calc(100vw - 16px);
        left: 8px;
        max-height: 60vh;
    }
}

/* The launcher must not float over an open modal.

   This widget is shared by all three themes, but they stack modals differently:
   classic and semi-classic put theirs at 99999, well above the 9998/9999 used here,
   while modern runs on Bootstrap's scale — its modals sit around 1060 and its
   backdrop at 1050, so the launcher painted straight over an open dialog, fully
   bright and still clickable.

   Rather than pick a number that suits one theme and not the others, the widget
   stands down while any modal is open. Bootstrap puts .modal-open on <body> for
   exactly this, and display:none keeps the conversation in the DOM, so it comes back
   as it was when the dialog closes. */
body.modal-open .ai-chatbot-toggle,
body.modal-open .ai-chatbot-window.open {
    display: none;
}

/* An offcanvas needs the same treatment and gets no body class of its own -
   Bootstrap only adds .modal-open for modals. The launcher sits at 9998 and the
   offcanvas at 1045, so the shop's filter drawer had a chat bubble painted over
   its lower half.

   The responsive variants are listed individually on purpose: .offcanvas-lg and
   friends do NOT also carry the base .offcanvas class, so matching only that one
   misses every drawer that is a sidebar above its breakpoint - which is exactly
   the shop filter panel. */
body:has(.offcanvas.show) .ai-chatbot-toggle,
body:has(.offcanvas.show) .ai-chatbot-window.open,
body:has(.offcanvas-sm.show) .ai-chatbot-toggle,
body:has(.offcanvas-sm.show) .ai-chatbot-window.open,
body:has(.offcanvas-md.show) .ai-chatbot-toggle,
body:has(.offcanvas-md.show) .ai-chatbot-window.open,
body:has(.offcanvas-lg.show) .ai-chatbot-toggle,
body:has(.offcanvas-lg.show) .ai-chatbot-window.open,
body:has(.offcanvas-xl.show) .ai-chatbot-toggle,
body:has(.offcanvas-xl.show) .ai-chatbot-window.open,
body:has(.offcanvas-xxl.show) .ai-chatbot-toggle,
body:has(.offcanvas-xxl.show) .ai-chatbot-window.open {
    display: none;
}