/**
 * Style X Gadget — AI Chatbot CSS (v3.67.0)
 * Modern floating chat widget. Mobile-first, dark + gold theme.
 * ~3.5 KB. Loaded on all pages.
 */

/* ============================================================
   Container
   ============================================================ */
.xoro-chatbot {
    position: fixed;
    bottom: 1.25rem;
    right: 1rem;
    z-index: 40; /* Below sticky bar (45), cart drawer (55), checkout (60), size guide (110), recovery (115) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: bottom 300ms ease, opacity 300ms ease, visibility 300ms ease;
}

/* v3.114.0 — Smart hide: when an overlay opens, fade the FAB out.
   Uses opacity + visibility only (no transform) to avoid conflict with
   the sticky-bar translateY positioning. */
.xoro-chatbot.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
}
/* When chat panel is open, raise z-index so panel sits above ALL page content
   including the announcement bar (z-50) and sticky bar (z-45).
   v3.151.22 — raised from 44 to 10000 so the chatbot panel is always on top.
   v3.151.23 — added !important + hide announcement bar when chatbot open. */
.xoro-chatbot.is-open {
    z-index: 10000 !important;
}
/* v3.151.23 — Hide announcement bar when chatbot panel is open (prevents z-index fight) */
body:has(.xoro-chatbot.is-open) #announcementBar {
    z-index: 1 !important;
    pointer-events: none;
}

/* ============================================================
   Floating Action Button (FAB)
   ============================================================ */
.xoro-chatbot__fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(132, 204, 22, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: bottom 300ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.xoro-chatbot__fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(132, 204, 22, 0.55), 0 2px 12px rgba(0, 0, 0, 0.4);
}
.xoro-chatbot__fab:active {
    transform: scale(0.95);
}
/* Pulse ring to draw attention */
.xoro-chatbot__fab::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(132, 204, 22, 0.5);
    animation: xoroChatPulse 2s ease-out infinite;
}
@keyframes xoroChatPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}
.xoro-chatbot.is-open .xoro-chatbot__fab::before { animation: none; opacity: 0; }

.xoro-chatbot__fab-close { display: none; }
.xoro-chatbot.is-open .xoro-chatbot__fab-icon { display: none; }
.xoro-chatbot.is-open .xoro-chatbot__fab-close { display: block; }
.xoro-chatbot.is-open .xoro-chatbot__fab::before { display: none; }

/* Notification badge */
.xoro-chatbot__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e11d48;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0a0a0a;
    padding: 0 4px;
}
.xoro-chatbot__badge.is-hidden { display: none; }

/* ============================================================
   Chat Panel
   ============================================================ */
.xoro-chatbot__panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 2rem);
    height: 520px;
    max-height: calc(100vh - 7rem);
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(132, 204, 22, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.xoro-chatbot.is-open .xoro-chatbot__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ============================================================
   Mobile: Full-screen-style panel, no header-under-browser issue.
   Uses 100dvh (dynamic viewport height) to respect mobile browser chrome.
   ============================================================ */
@media (max-width: 600px) {
    .xoro-chatbot {
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
    }
    /* v3.151.9 — Removed !important from bottom so the JS syncStickyPosition()
       can dynamically move the FAB up (80px) when the sticky CTA bar is visible,
       and back down (20px) when it's hidden. !important was overriding the
       inline style.bottom set by JS, trapping the FAB behind the sticky bar. */
    .xoro-chatbot__fab {
        position: fixed !important;
        bottom: 1rem;              /* default — JS overrides this dynamically */
        right: 1rem !important;
        left: auto !important;
        top: auto !important;
        width: 54px;
        height: 54px;
        transform: none !important;
        margin: 0 !important;
        transition: bottom 200ms ease;
    }
    /* Hide FAB completely when chat is open on mobile — close button in header handles it */
    .xoro-chatbot.is-open .xoro-chatbot__fab {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.5);
        transition: opacity 200ms ease, transform 200ms ease;
    }
    .xoro-chatbot__panel {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        /* Use safe-area-inset for iPhone notch / browser bar */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .xoro-chatbot.is-open .xoro-chatbot__panel {
        border-radius: 0;
    }
    /* Messages area gets flexible height */
    .xoro-chatbot__messages {
        flex: 1;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Header
   ============================================================ */
.xoro-chatbot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}
.xoro-chatbot__header-info { display: flex; align-items: center; gap: 0.65rem; }
/* Header avatar — transparent background (site icon shows as-is, no gold circle). */
.xoro-chatbot__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    color: #84cc16; /* gold for the SVG fallback icon (when no site icon is set) */
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.xoro-chatbot__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xoro-chatbot__title { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.xoro-chatbot__status { color: #22c55e; font-size: 0.7rem; display: flex; align-items: center; gap: 0.3rem; margin-top: 2px; }
.xoro-chatbot__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: xoroChatBlink 1.5s ease-in-out infinite;
}
@keyframes xoroChatBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.xoro-chatbot__close {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 200ms, background 200ms;
}
.xoro-chatbot__close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   Messages
   ============================================================ */
.xoro-chatbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: #0a0a0a;
    scroll-behavior: smooth;
}
.xoro-chatbot__messages::-webkit-scrollbar { width: 5px; }
.xoro-chatbot__messages::-webkit-scrollbar-track { background: transparent; }
.xoro-chatbot__messages::-webkit-scrollbar-thumb { background: #333; border-radius: 9999px; }

.xoro-chatbot__msg { display: flex; flex-shrink: 0; animation: xoroChatFadeIn 300ms ease; align-items: flex-end; gap: 0.4rem; }
@keyframes xoroChatFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.xoro-chatbot__msg--bot { justify-content: flex-start; }
.xoro-chatbot__msg--user { justify-content: flex-end; }

/* Per-message bot avatar — HIDDEN (removed by request). The header logo is enough. */
.xoro-chatbot__msg-avatar { display: none !important; }
.xoro-chatbot__msg-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.xoro-chatbot__msg-bubble {
    max-width: 85%;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    word-wrap: break-word;
}
.xoro-chatbot__msg--bot .xoro-chatbot__msg-bubble {
    background: #1c1c1c;
    color: #e5e5e5;
    border: 1px solid #2a2a2a;
    border-bottom-left-radius: 4px;
}
.xoro-chatbot__msg--user .xoro-chatbot__msg-bubble {
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a;
    font-weight: 600;
    border-bottom-right-radius: 4px;
    font-size: 0.88rem;
}
/* User message: flex layout for text + WhatsApp-style delivery ticks */
.xoro-chatbot__msg-bubble--user {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.xoro-chatbot__msg-text { flex: 1; min-width: 0; }
/* WhatsApp-style delivery ticks on user messages (v3.128.0 — WhatsApp colors) */
.xoro-chatbot__ticks {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -1.5px;
    transition: color 400ms ease, opacity 400ms ease;
    margin-left: auto;
    align-self: flex-end;
    margin-bottom: 1px;
}
/* 1 tick = "sending" — gray, faded */
.xoro-chatbot__ticks--1 {
    color: rgba(255, 255, 255, 0.35);
    opacity: 0.7;
}
/* 2 ticks = "delivered" — light gray */
.xoro-chatbot__ticks--2 {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
    animation: xoroTickPop 300ms ease;
}
/* 2 ticks "read" = blue (WhatsApp style) — applied when AI responds */
.xoro-chatbot__ticks--read {
    color: #53bdeb;
    opacity: 1;
}
@keyframes xoroTickPop {
    0% { transform: scale(0.6); opacity: 0.3; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
/* AI message formatting (bold, italic, bullets, paragraphs) */
.xoro-chatbot__msg-bubble p { margin: 0 0 0.4rem 0; }
.xoro-chatbot__msg-bubble p:last-child { margin-bottom: 0; }
.xoro-chatbot__msg-bubble strong { color: #84cc16; font-weight: 800; }
.xoro-chatbot__msg-bubble em { color: #9ca3af; font-style: italic; }
.xoro-chatbot__msg-bubble ul { margin: 0.3rem 0; padding-left: 1rem; list-style: none; }
.xoro-chatbot__msg-bubble li { margin-bottom: 0.2rem; padding-left: 0.8rem; position: relative; }
.xoro-chatbot__msg-bubble li::before { content: '•'; position: absolute; left: 0; color: #84cc16; font-weight: 700; }
.xoro-chatbot__msg-bubble br + br { display: block; margin-top: 0.3rem; }

/* Mobile: larger text for readability */
@media (max-width: 600px) {
    .xoro-chatbot__msg-bubble { font-size: 0.95rem; line-height: 1.6; padding: 0.75rem 1.1rem; }
    .xoro-chatbot__msg--user .xoro-chatbot__msg-bubble { font-size: 0.92rem; }
    .xoro-chatbot__input { font-size: 16px; } /* prevents iOS zoom */
    .xoro-chatbot__title { font-size: 1rem; }
    .xoro-chatbot__status { font-size: 0.72rem; }
    .xoro-chatbot__chip { font-size: 0.78rem; padding: 0.45rem 0.85rem; }
    .xoro-chatbot__followup-chip { font-size: 0.74rem; padding: 0.4rem 0.8rem; }
    .xoro-chatbot__prebuilt-text { font-size: 0.84rem; }
    .xoro-chatbot__prebuilt-sub { font-size: 0.64rem; }
    .xoro-chatbot__inv-head { font-size: 0.9rem; }
    .xoro-chatbot__inv-row { font-size: 0.76rem; }
    .xoro-chatbot__inv-name { font-size: 0.8rem; }
    .xoro-chatbot__inv-total-amount { font-size: 1rem; }
    .xoro-chatbot__prod-name { font-size: 0.82rem; }
    .xoro-chatbot__prod-price { font-size: 0.88rem; }
    .xoro-chatbot__prod-desc { font-size: 0.7rem; }
    .xoro-chatbot__prod-add { font-size: 0.72rem; padding: 0.5rem 0.3rem; }
    .xoro-chatbot__prod-buy { font-size: 0.72rem; padding: 0.5rem 0.3rem; }
    .xoro-chatbot__cart-head { font-size: 0.9rem; }
    .xoro-chatbot__cart-checkout-now { font-size: 0.86rem; padding: 0.7rem; min-height: 46px; }
    .xoro-chatbot__cart-order { font-size: 0.76rem; }
    .xoro-chatbot__checkout-cta-title { font-size: 0.94rem; }
    .xoro-chatbot__checkout-cta-sub { font-size: 0.78rem; }
    .xoro-chatbot__verify-desc { font-size: 0.72rem; }
    .xoro-chatbot__verify-field input { font-size: 16px; }
}

/* ============================================================
   TYPING INDICATOR (v3.128.0) — Modern bouncing dots, no progress bar
   ============================================================ */
.xoro-chatbot__typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}
.xoro-chatbot__typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #84cc16;
    animation: xoroBounce 1.2s infinite ease-in-out;
}
.xoro-chatbot__typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.xoro-chatbot__typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes xoroBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .xoro-chatbot__typing-dots span { animation: none; }
}

/* ============================================================
   Quick Reply Chips
   ============================================================ */
.xoro-chatbot__quick {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    background: #0d0d0d;
    border-top: 1px solid #1a1a1a;
    flex-shrink: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.xoro-chatbot__quick::-webkit-scrollbar { display: none; }
.xoro-chatbot__chip {
    flex-shrink: 0;
    background: #1c1c1c;
    border: 1px solid #333;
    color: #84cc16;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms, color 200ms, border-color 200ms;
    -webkit-tap-highlight-color: transparent;
}
.xoro-chatbot__chip:hover {
    background: #84cc16;
    color: #0a0a0a;
    border-color: #84cc16;
}

/* ============================================================
   Input — sticks to keyboard on mobile (v3.142.5)
   ============================================================ */
.xoro-chatbot__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: #0d0d0d;
    border-top: 1px solid #1a1a1a;
    flex-shrink: 0;
    /* v3.142.5 — Stick to bottom (above keyboard) on mobile */
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
}
.xoro-chatbot__input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 9999px;
    padding: 0.6rem 0.9rem;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 200ms;
    font-family: inherit;
}
.xoro-chatbot__input:focus { border-color: #84cc16; }
.xoro-chatbot__input::placeholder { color: #6b7280; }

.xoro-chatbot__send {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 150ms, opacity 200ms;
    -webkit-tap-highlight-color: transparent;
}
.xoro-chatbot__send:active { transform: scale(0.9); }
.xoro-chatbot__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Accessibility
   ============================================================ */
.xoro-chatbot__fab:focus-visible,
.xoro-chatbot__close:focus-visible,
.xoro-chatbot__send:focus-visible,
.xoro-chatbot__chip:focus-visible,
.xoro-chatbot__input:focus-visible {
    outline: 2px solid #84cc16;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .xoro-chatbot__fab::before,
    .xoro-chatbot__dot,
    .xoro-chatbot__msg,
    .xoro-chatbot__panel { animation: none !important; transition: none !important; }
}

/* ============================================================
   RICH UI — Product Cards, Order Invoice, Cart Summary
   ============================================================ */
.xoro-chatbot__rich { max-width: 100%; }

/* Product Cards (catalogue grid — 2 columns, scrollable like a mini shop) */
.xoro-chatbot__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem;
    scroll-behavior: smooth;
}
.xoro-chatbot__products::-webkit-scrollbar { width: 5px; }
.xoro-chatbot__products::-webkit-scrollbar-track { background: transparent; }
.xoro-chatbot__products::-webkit-scrollbar-thumb { background: #333; border-radius: 9999px; }

.xoro-chatbot__prod-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    transition: border-color 200ms, transform 150ms;
}
.xoro-chatbot__prod-card:hover { border-color: rgba(132,204,22,0.4); }
.xoro-chatbot__prod-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #0d0d0d;
    margin-bottom: 0.2rem;
}
.xoro-chatbot__prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xoro-chatbot__prod-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.xoro-chatbot__prod-name { color: #fff; font-weight: 700; font-size: 0.8rem; line-height: 1.2; }
.xoro-chatbot__prod-price { color: #84cc16; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.xoro-chatbot__prod-sale { font-size: 0.6rem; color: #22c55e; background: rgba(34,197,94,0.1); padding: 0.1rem 0.3rem; border-radius: 4px; }
.xoro-chatbot__prod-attrs { font-size: 0.65rem; color: #9ca3af; }
.xoro-chatbot__prod-desc { font-size: 0.65rem; color: #6b7280; line-height: 1.3; }
.xoro-chatbot__prod-oos { font-size: 0.6rem; color: #ef4444; font-weight: 700; }
/* Two-button row: Add to Cart (outline) + Buy Now (gold gradient, pulsing) */
.xoro-chatbot__prod-btns {
    margin-top: auto;
    display: flex;
    gap: 0.3rem;
}
.xoro-chatbot__prod-add {
    flex: 1;
    background: transparent;
    color: #84cc16;
    border: 1px solid #84cc16;
    border-radius: 6px;
    padding: 0.45rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms, background 200ms, color 200ms;
}
.xoro-chatbot__prod-add:hover { background: rgba(132,204,22,0.12); }
.xoro-chatbot__prod-add:active { transform: scale(0.95); }
.xoro-chatbot__prod-buy {
    flex: 1.2;
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 150ms, box-shadow 200ms;
    box-shadow: 0 2px 8px rgba(132,204,22,0.3);
}
.xoro-chatbot__prod-buy:hover { box-shadow: 0 3px 12px rgba(132,204,22,0.5); }
.xoro-chatbot__prod-buy:active { transform: scale(0.95); }
.xoro-chatbot__prod-buy:disabled { opacity: 0.6; cursor: wait; }
/* On wider chat panels (desktop), show 3 columns for a richer catalogue view. */
@media (min-width: 480px) {
    .xoro-chatbot__products { grid-template-columns: repeat(3, 1fr); }
}

/* Order Invoice — Modern Structured Design */
.xoro-chatbot__invoice {
    background: linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
    border: 1px solid rgba(132, 204, 22, 0.3);
    border-radius: 14px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    overflow: hidden;
}
.xoro-chatbot__inv-header {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.12), rgba(132, 204, 22, 0.03));
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(132, 204, 22, 0.2);
}
.xoro-chatbot__inv-head { color: #84cc16; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.02em; }
.xoro-chatbot__inv-status {
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem; border-radius: 6px;
}
.xoro-chatbot__inv-status--processing { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.xoro-chatbot__inv-status--completed { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.xoro-chatbot__inv-status--cancelled { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.xoro-chatbot__inv-status--hold { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.xoro-chatbot__inv-status--pending { background: rgba(156, 163, 175, 0.15); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.3); }
.xoro-chatbot__inv-section { padding: 0.5rem 0.75rem; }
.xoro-chatbot__inv-row { display: flex; justify-content: space-between; align-items: center; color: #d1d5db; padding: 0.15rem 0; }
.xoro-chatbot__inv-row span:first-child { color: #9ca3af; font-size: 0.7rem; }
.xoro-chatbot__inv-row--discount span:last-child { color: #4ade80; }
.xoro-chatbot__inv-sep { height: 1px; background: linear-gradient(90deg, transparent, #2a2a2a, transparent); margin: 0; }
.xoro-chatbot__inv-label { color: #6b7280; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; padding: 0.4rem 0.75rem 0.2rem; }
.xoro-chatbot__inv-items { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.75rem 0.4rem; }
.xoro-chatbot__inv-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem; background: rgba(255, 255, 255, 0.02); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.04); }
.xoro-chatbot__inv-item-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.xoro-chatbot__inv-item-img--ph { display: flex; align-items: center; justify-content: center; background: #1a1a1a; font-size: 1.1rem; }
.xoro-chatbot__inv-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.xoro-chatbot__inv-name { font-weight: 600; color: #fff; font-size: 0.75rem; line-height: 1.2; }
.xoro-chatbot__inv-item-meta { color: #6b7280; font-size: 0.6rem; margin-top: 1px; }
.xoro-chatbot__inv-price { color: #84cc16; font-weight: 700; font-size: 0.75rem; white-space: nowrap; }
.xoro-chatbot__inv-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.4rem 0.75rem; margin-top: 0.2rem;
    background: rgba(132, 204, 22, 0.06);
    border-top: 1px solid rgba(132, 204, 22, 0.15);
}
.xoro-chatbot__inv-total-label { color: #84cc16; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.08em; }
.xoro-chatbot__inv-total-amount { color: #84cc16; font-weight: 900; font-size: 0.95rem; }
.xoro-chatbot__inv-addr { padding: 0 0.75rem 0.3rem; }
.xoro-chatbot__inv-addr-line { color: #d1d5db; font-size: 0.7rem; line-height: 1.6; }
.xoro-chatbot__inv-eta { color: #4ade80; font-weight: 700; margin: 0.3rem 0.75rem 0; font-size: 0.7rem; padding: 0.3rem 0.5rem; background: rgba(74, 222, 128, 0.08); border-radius: 6px; display: inline-block; }
.xoro-chatbot__inv-note { color: #9ca3af; font-size: 0.65rem; margin: 0.3rem 0.75rem 0.5rem; padding: 0.3rem; background: rgba(255, 255, 255, 0.03); border-radius: 6px; }
.xoro-chatbot__inv-badge { font-size: 0.55rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 4px; }
.xoro-chatbot__inv-badge--ok { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25); }
.xoro-chatbot__inv-badge--locked { background: rgba(156, 163, 175, 0.12); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.25); }
.xoro-chatbot__inv-courier { padding: 0 0.75rem 0.4rem; }
.xoro-chatbot__inv-track-btn { display: block; text-align: center; margin-top: 0.4rem; padding: 0.35rem; background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 6px; font-size: 0.65rem; font-weight: 700; text-decoration: none; transition: background 200ms; }
.xoro-chatbot__inv-track-btn:hover { background: rgba(59, 130, 246, 0.2); }

/* Cart Summary */
.xoro-chatbot__cart-summary {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.7rem;
    font-size: 0.75rem;
}
.xoro-chatbot__cart-head { color: #84cc16; font-weight: 800; font-size: 0.85rem; margin-bottom: 0.4rem; }
.xoro-chatbot__cart-item { display: flex; justify-content: space-between; align-items: center; color: #d1d5db; padding: 0.18rem 0; font-size: 0.78rem; gap: 0.4rem; }
.xoro-chatbot__cart-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xoro-chatbot__cart-item-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.xoro-chatbot__cart-item-total { color: #84cc16; font-weight: 700; }
.xoro-chatbot__cart-remove {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(239,68,68,0.12); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
    font-size: 0.7rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0; transition: background 150ms, transform 150ms;
}
.xoro-chatbot__cart-remove:hover { background: #ef4444; color: #fff; }
.xoro-chatbot__cart-remove:active { transform: scale(0.9); }
.xoro-chatbot__cart-remove:disabled { opacity: 0.6; cursor: wait; }

/* ---- Addons / cross-sell section (shown after add_to_cart) ---- */
.xoro-chatbot__addons {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(132,204,22,0.25);
}
.xoro-chatbot__addons-head { color: #84cc16; font-weight: 800; font-size: 0.82rem; margin-bottom: 0.1rem; }
.xoro-chatbot__addons-sub { color: #9ca3af; font-size: 0.66rem; font-weight: 500; }
.xoro-chatbot__addons-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
    margin: 0.5rem 0;
}
.xoro-chatbot__addon-card {
    background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px;
    padding: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; align-items: center;
    text-align: center; transition: border-color 200ms;
}
.xoro-chatbot__addon-card:hover { border-color: rgba(132,204,22,0.4); }
.xoro-chatbot__addon-img { width: 100%; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: #0d0d0d; }
.xoro-chatbot__addon-img img { width: 100%; height: 100%; object-fit: cover; }
.xoro-chatbot__addon-img--ph { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.xoro-chatbot__addon-name { color: #fff; font-weight: 700; font-size: 0.68rem; line-height: 1.2; min-height: 1.6em; }
.xoro-chatbot__addon-price { color: #84cc16; font-weight: 800; font-size: 0.72rem; }
.xoro-chatbot__addon-yes {
    width: 100%; background: linear-gradient(135deg, #84cc16, #b8941f); color: #0a0a0a;
    border: none; border-radius: 6px; padding: 0.35rem; font-size: 0.64rem; font-weight: 700;
    cursor: pointer; transition: transform 150ms; margin-top: auto;
}
.xoro-chatbot__addon-yes:active { transform: scale(0.95); }
.xoro-chatbot__addon-yes:disabled { opacity: 0.7; cursor: wait; }
.xoro-chatbot__addons-no {
    width: 100%; background: transparent; color: #9ca3af;
    border: 1px solid #2a2a2a; border-radius: 8px; padding: 0.55rem;
    font-size: 0.74rem; font-weight: 700; cursor: pointer; margin-top: 0.3rem;
    transition: background 200ms, color 200ms, border-color 200ms;
}
.xoro-chatbot__addons-no:hover { background: rgba(132,204,22,0.08); color: #84cc16; border-color: #84cc16; }
@media (max-width: 380px) {
    .xoro-chatbot__addons-grid { grid-template-columns: repeat(2, 1fr); }
}
.xoro-chatbot__cart-order {
    flex: 1;
    margin-top: 0;
    background: transparent;
    color: #84cc16;
    border: 1px solid #84cc16;
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms, background 200ms, color 200ms;
}
.xoro-chatbot__cart-order:active { transform: scale(0.97); }
.xoro-chatbot__cart-order:hover { background: rgba(132,204,22,0.12); }
.xoro-chatbot__cart-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
/* Prominent "Checkout Now" button — opens the theme checkout popup. */
.xoro-chatbot__cart-checkout-now {
    flex: 1.6;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a;
    border: none;
    border-radius: 8px;
    padding: 0.65rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 150ms, box-shadow 200ms, opacity 200ms;
    box-shadow: 0 4px 14px rgba(132,204,22,0.35);
    min-height: 42px;
    animation: xoroChatPulse 1.8s ease-in-out infinite;
}
.xoro-chatbot__cart-checkout-now:active { transform: scale(0.97); }
.xoro-chatbot__cart-checkout-now:hover { box-shadow: 0 6px 20px rgba(132,204,22,0.55); }
.xoro-chatbot__cart-checkout-now:disabled { opacity: 0.6; cursor: wait; animation: none; }
@keyframes xoroChatPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(132,204,22,0.35); }
    50% { box-shadow: 0 4px 22px rgba(132,204,22,0.65); }
}
/* Keep legacy outline link button class for any leftover references. */
.xoro-chatbot__cart-checkout {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: transparent; color: #84cc16; border: 1px solid #84cc16;
    border-radius: 8px; padding: 0.5rem; font-size: 0.75rem; font-weight: 700;
    text-decoration: none; transition: background 200ms, color 200ms; min-height: 40px;
}
.xoro-chatbot__cart-checkout:hover { background: #84cc16; color: #0a0a0a; }

/* Standalone checkout CTA card (rendered when AI calls open_checkout tool). */
.xoro-chatbot__checkout-cta {
    background: linear-gradient(135deg, rgba(132,204,22,0.18), rgba(132,204,22,0.05));
    border: 1px solid #84cc16;
    border-radius: 12px;
    padding: 0.85rem;
    text-align: center;
}
.xoro-chatbot__checkout-cta-title { color: #84cc16; font-weight: 800; font-size: 0.9rem; margin-bottom: 0.2rem; }
.xoro-chatbot__checkout-cta-sub { color: #d1d5db; font-size: 0.74rem; margin-bottom: 0.6rem; }
.xoro-chatbot__checkout-cta-btn { width: 100%; flex: none; }

/* Order Success Banner */
.xoro-chatbot__order-success {
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
    border: 1px solid #22c55e;
    border-radius: 10px;
    padding: 0.7rem;
    color: #22c55e;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.5;
}

/* ============================================================
   FOLLOW-UP SUGGESTION CHIPS (v3.118.0 — modern 2026 card pills)
   These appear INSIDE the chat after AI responses.
   ============================================================ */
.xoro-chatbot__followup {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 92%;
    padding: 6px 0 2px;
}
.xoro-chatbot__followup-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #141414, #0f0f0f);
    border: 1px solid #2a2a2a;
    color: #d1d5db;
    padding: 7px 13px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.xoro-chatbot__followup-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.12), transparent);
    opacity: 0;
    transition: opacity 200ms ease;
}
.xoro-chatbot__followup-chip:hover {
    border-color: #84cc16;
    color: #84cc16;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(132, 204, 22, 0.25);
}
.xoro-chatbot__followup-chip:hover::before {
    opacity: 1;
}
.xoro-chatbot__followup-chip:active {
    transform: scale(0.95);
}

/* ============================================================
   PREBUILT QUESTION CARDS (v3.119.0 — modern 2026 redesign)
   Glassmorphism + gradient icons + smooth micro-interactions
   ============================================================ */
.xoro-chatbot__prebuilt {
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xoro-chatbot__prebuilt-head {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #9ca3af;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding: 0 2px;
}
.xoro-chatbot__prebuilt-head-icon {
    font-size: 0.75rem;
    line-height: 1;
}
.xoro-chatbot__prebuilt-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(15, 15, 15, 0.95));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}
/* Subtle gold sheen on hover */
.xoro-chatbot__prebuilt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}
.xoro-chatbot__prebuilt-card:hover {
    border-color: rgba(132, 204, 22, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(132, 204, 22, 0.1);
}
.xoro-chatbot__prebuilt-card:hover::before {
    opacity: 1;
}
.xoro-chatbot__prebuilt-card:active {
    transform: scale(0.98);
    transition: transform 100ms ease;
}
.xoro-chatbot__prebuilt-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.15), rgba(132, 204, 22, 0.05));
    border: 1px solid rgba(132, 204, 22, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: all 250ms ease;
}
.xoro-chatbot__prebuilt-card:hover .xoro-chatbot__prebuilt-icon {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.25), rgba(132, 204, 22, 0.1));
    border-color: rgba(132, 204, 22, 0.5);
    transform: scale(1.05);
}
.xoro-chatbot__prebuilt-info {
    flex: 1;
    min-width: 0;
}
.xoro-chatbot__prebuilt-text {
    color: #f3f4f6;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.xoro-chatbot__prebuilt-sub {
    color: #6b7280;
    font-size: 0.6rem;
    margin-top: 2px;
    line-height: 1.2;
}
.xoro-chatbot__prebuilt-arrow {
    color: #4b5563;
    flex-shrink: 0;
    transition: all 250ms ease;
    display: flex;
    align-items: center;
}
.xoro-chatbot__prebuilt-card:hover .xoro-chatbot__prebuilt-arrow {
    color: #84cc16;
    transform: translateX(3px);
}
/* Mobile optimizations */
@media (max-width: 600px) {
    .xoro-chatbot__prebuilt-card {
        padding: 9px 10px;
        gap: 9px;
    }
    .xoro-chatbot__prebuilt-icon {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
        border-radius: 10px;
    }
    .xoro-chatbot__prebuilt-text { font-size: 0.75rem; }
    .xoro-chatbot__prebuilt-sub { font-size: 0.58rem; }
}

/* ============================================================
   TRACK YOUR ORDER POPUP (Order ID + Phone Last 4) — redesigned bigger + beautiful
   ============================================================ */
.xoro-chatbot__verify-overlay {
    position: absolute; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: xoroChatFadeIn 200ms ease;
}
.xoro-chatbot__verify-popup {
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(132,204,22,0.35);
    border-radius: 20px; padding: 0; width: 100%; max-width: 360px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(132,204,22,0.1);
    animation: xoroChatPopIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes xoroChatPopIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Close button — floats top-right */
.xoro-chatbot__verify-close-btn {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
    color: #d1d5db; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 200ms, color 200ms, transform 150ms;
}
.xoro-chatbot__verify-close-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.xoro-chatbot__verify-close-btn:active { transform: scale(0.9); }

/* Hero header — gold gradient with big icon */
.xoro-chatbot__verify-hero {
    display: flex; align-items: center; gap: 0.85rem;
    background: linear-gradient(135deg, rgba(132,204,22,0.18) 0%, rgba(132,204,22,0.04) 60%, transparent 100%);
    padding: 1.3rem 1rem 1.1rem;
    border-bottom: 1px solid rgba(132,204,22,0.18);
}
.xoro-chatbot__verify-hero-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #84cc16, #8a6d1f);
    color: #0a0a0a;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(132,204,22,0.4);
}
.xoro-chatbot__verify-hero-text { flex: 1; min-width: 0; padding-right: 1.5rem; }
.xoro-chatbot__verify-title {
    color: #84cc16; font-weight: 800; font-size: 1.05rem; line-height: 1.2;
    margin-bottom: 0.15rem;
}
.xoro-chatbot__verify-subtitle {
    color: #9ca3af; font-size: 0.7rem; line-height: 1.4;
}

/* Body */
.xoro-chatbot__verify-body { padding: 1.1rem 1.2rem 1.2rem; }
.xoro-chatbot__verify-field { margin-bottom: 0.85rem; }
.xoro-chatbot__verify-field label {
    display: flex; align-items: center; gap: 0.35rem;
    color: #e5e5e5; font-size: 0.72rem; font-weight: 700;
    margin-bottom: 0.35rem; letter-spacing: 0.02em;
}
.xoro-chatbot__verify-field-icon { font-size: 0.85rem; }
.xoro-chatbot__verify-field input {
    width: 100%; background: #0a0a0a;
    border: 1.5px solid #2a2a2a; border-radius: 12px;
    padding: 0.85rem 1rem; color: #fff;
    font-size: 1rem; font-weight: 600;
    outline: none; transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
}
.xoro-chatbot__verify-field input:focus {
    border-color: #84cc16;
    box-shadow: 0 0 0 3px rgba(132,204,22,0.15);
}
.xoro-chatbot__verify-field input::placeholder { color: #4b5563; font-weight: 400; }

/* Submit button — big, gold, pulsing */
.xoro-chatbot__verify-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; margin-top: 0.85rem;
    background: linear-gradient(135deg, #84cc16, #b8941f);
    color: #0a0a0a; border: none; border-radius: 12px;
    padding: 0.95rem; font-size: 0.95rem; font-weight: 800;
    cursor: pointer; min-height: 52px;
    transition: transform 150ms, box-shadow 200ms;
    box-shadow: 0 4px 14px rgba(132,204,22,0.35);
    animation: xoroChatPulse 2.2s ease-in-out infinite;
}
.xoro-chatbot__verify-submit-btn:active { transform: scale(0.97); }
.xoro-chatbot__verify-submit-btn:hover { box-shadow: 0 6px 20px rgba(132,204,22,0.55); }

/* Trust badges row */
.xoro-chatbot__verify-trust {
    display: flex; justify-content: center; gap: 0.6rem;
    margin-top: 0.95rem; flex-wrap: wrap;
}
.xoro-chatbot__verify-trust-item {
    color: #6b7280; font-size: 0.62rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.2rem;
}

/* Mobile — keep it roomy but fit small screens */
@media (max-width: 600px) {
    .xoro-chatbot__verify-popup { max-width: 340px; }
    .xoro-chatbot__verify-hero { padding: 1.1rem 0.9rem 1rem; }
    .xoro-chatbot__verify-hero-icon { width: 50px; height: 50px; }
    .xoro-chatbot__verify-title { font-size: 1rem; }
    .xoro-chatbot__verify-subtitle { font-size: 0.68rem; }
    .xoro-chatbot__verify-body { padding: 1rem; }
    .xoro-chatbot__verify-field input { font-size: 16px; padding: 0.8rem 0.9rem; }
    .xoro-chatbot__verify-submit-btn { font-size: 0.9rem; padding: 0.85rem; min-height: 50px; }
}

/* ============================================================
   COURIER TRACKING CARD
   ============================================================ */
.xoro-chatbot__tracking .xoro-chatbot__trk-body { padding: 0; }
.xoro-chatbot__trk-route {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(132,204,22,0.04));
}
.xoro-chatbot__trk-city { display: flex; flex-direction: column; align-items: center; flex: 1; }
.xoro-chatbot__trk-city-label { color: #6b7280; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.xoro-chatbot__trk-city-name { color: #fff; font-size: 0.9rem; font-weight: 800; margin-top: 2px; }
.xoro-chatbot__trk-line { flex: 0.8; height: 2px; background: linear-gradient(90deg, #84cc16, #3b82f6); position: relative; margin: 0 0.5rem; }
.xoro-chatbot__trk-van { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.1rem; background: #0f0f0f; padding: 0 0.3rem; }
.xoro-chatbot__trk-details { padding: 0 0.75rem 0.3rem; }
.xoro-chatbot__trk-detail { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; font-size: 0.68rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
.xoro-chatbot__trk-detail span:first-child { color: #6b7280; font-weight: 600; }
.xoro-chatbot__trk-detail span:last-child { color: #d1d5db; font-weight: 600; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xoro-chatbot__trk-timeline { padding: 0.3rem 0.75rem 0.5rem; }
.xoro-chatbot__trk-event { display: flex; gap: 0.5rem; padding: 0.25rem 0; position: relative; }
.xoro-chatbot__trk-event:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: -4px; width: 2px; background: #2a2a2a; }
.xoro-chatbot__trk-dot { width: 10px; height: 10px; border-radius: 50%; background: #374151; border: 2px solid #1a1a1a; flex-shrink: 0; margin-top: 2px; z-index: 1; }
.xoro-chatbot__trk-dot--active { background: #84cc16; box-shadow: 0 0 6px rgba(132,204,22,0.5); }
.xoro-chatbot__trk-event-body { flex: 1; min-width: 0; }
.xoro-chatbot__trk-event-status { color: #d1d5db; font-size: 0.68rem; font-weight: 600; line-height: 1.3; }
.xoro-chatbot__trk-event--latest .xoro-chatbot__trk-event-status { color: #84cc16; font-weight: 700; }
.xoro-chatbot__trk-event-date { color: #6b7280; font-size: 0.58rem; margin-top: 1px; }
.xoro-chatbot__trk-no-history { color: #6b7280; font-size: 0.65rem; padding: 0.5rem 0.75rem; text-align: center; font-style: italic; }

/* ============================================================
   Quick Actions (v3.118.0) — Single-line horizontal scroll
   Mobile-first: swipe to reveal more actions. No label (saves space).
   ============================================================ */
.xoro-chatbot__quick {
    padding: 8px 0 8px 12px;
    border-top: 1px solid #1a1a1a;
    background: #0a0a0a;
    overflow: hidden;
}
.xoro-chatbot__quick-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-right: 12px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.xoro-chatbot__quick-scroll::-webkit-scrollbar { display: none; }

.xoro-chatbot__qa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #141414, #0f0f0f);
    border: 1px solid #1f1f1f;
    border-radius: 9999px;
    color: #d1d5db;
    cursor: pointer;
    transition: all 200ms ease;
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.xoro-chatbot__qa:hover {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.15), rgba(132, 204, 22, 0.05));
    border-color: rgba(132, 204, 22, 0.5);
    color: #84cc16;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(132, 204, 22, 0.2);
}
.xoro-chatbot__qa:active {
    transform: scale(0.95);
}
.xoro-chatbot__qa-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.xoro-chatbot__qa-text {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}

/* ============================================================
   Tool Cards (v3.117.0) — Delivery, Returns, Discount
   ============================================================ */
.xoro-chatbot__card {
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0;
}
.xoro-chatbot__card-header {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.15), rgba(132, 204, 22, 0.05));
    color: #84cc16;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 10px 14px;
    border-bottom: 1px solid #1f1f1f;
}
.xoro-chatbot__card-body {
    padding: 12px 14px;
}
.xoro-chatbot__card-note {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 8px;
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px solid #1a1a1a;
}

/* Delivery card */
.xoro-chatbot__dl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.xoro-chatbot__dl-badge {
    background: #141414;
    border: 1px solid #2a2a2a;
    color: #9ca3af;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}
.xoro-chatbot__dl-badge--cod {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}
.xoro-chatbot__dl-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.xoro-chatbot__dl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.xoro-chatbot__dl-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: 0.7rem;
}
.xoro-chatbot__dl-city { color: #d1d5db; }
.xoro-chatbot__dl-days { color: #84cc16; font-weight: 600; }

/* Return policy card */
.xoro-chatbot__ret-window {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #84cc16;
    margin-bottom: 10px;
}
.xoro-chatbot__ret-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    margin: 10px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.xoro-chatbot__ret-cond {
    font-size: 0.7rem;
    color: #d1d5db;
    padding: 3px 0;
}
.xoro-chatbot__ret-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xoro-chatbot__ret-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.xoro-chatbot__ret-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #84cc16;
    color: #0a0a0a;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xoro-chatbot__ret-step-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}
.xoro-chatbot__ret-step-desc {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 1px;
}

/* Discount card */
.xoro-chatbot__disc-coupon {
    background: #141414;
    border: 1px dashed rgba(132, 204, 22, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    text-align: center;
}
.xoro-chatbot__disc-coupon--featured {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.12), rgba(132, 204, 22, 0.04));
    border: 1px solid rgba(132, 204, 22, 0.5);
}
.xoro-chatbot__disc-coupon-code {
    display: inline-block;
    background: #84cc16;
    color: #0a0a0a;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.xoro-chatbot__disc-coupon-val {
    font-size: 1.1rem;
    font-weight: 900;
    color: #84cc16;
}
.xoro-chatbot__disc-coupon-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}
.xoro-chatbot__disc-coupon-desc {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: 2px;
}
.xoro-chatbot__disc-timer-wrap {
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
}
.xoro-chatbot__disc-timer-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.xoro-chatbot__disc-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.xoro-chatbot__disc-time {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
}
.xoro-chatbot__disc-colon {
    font-size: 1.3rem;
    font-weight: 300;
    color: #ef4444;
}

/* ============================================================
   FAQ Suggestions (v3.117.0) — shows while typing
   ============================================================ */
.xoro-chatbot__faq-suggest {
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    margin: 0 12px 4px;
    max-height: 200px;
    overflow-y: auto;
}
.xoro-chatbot__faq-item {
    padding: 8px 12px;
    font-size: 0.75rem;
    color: #d1d5db;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
    transition: background 150ms ease;
}
.xoro-chatbot__faq-item:last-child { border-bottom: none; }
.xoro-chatbot__faq-item:hover {
    background: rgba(132, 204, 22, 0.1);
    color: #84cc16;
}

/* ============================================================
   v3.145.0 — Mobile in-app browser safe-area / dvh / prefix fixes
   (Instagram / TikTok / FB in-app browsers with bottom toolbars)
   All rules below are ADDITIVE. env(safe-area-inset-*) returns 0 on
   desktop and standard mobile → no visual change. No existing rules
   were modified. Owner: M-3-c (mobile-css-builder).
   ============================================================ */

/* --------------------------------------------------------------------
   FIX 5.1 — FAB safe-area: lift above in-app bottom toolbar (HIGH)
   Original rules (preserved, NOT modified):
     - .xoro-chatbot { bottom: 1.25rem; }        (line 12, desktop container)
     - .xoro-chatbot__fab { bottom: 1rem; }      (line 142, mobile FAB inside @media max-width:600px)
   We OVERRIDE `bottom` with `max(<original>, env(safe-area-inset-bottom))`
   using same-specificity selectors appended later in source order. env()=0 on
   desktop/standard mobile → max() returns the original value → no visual change.

   IMPORTANT: chatbot.js (syncStickyPosition, xoro-chatbot.js:156,159) AND
   footer.php (updateFloatingPositions, footer.php:192) set inline
   `style.bottom = '20px' | '80px'` on both .xoro-chatbot and .xoro-chatbot__fab.
   Inline style overrides our CSS `bottom` (without !important). To ensure the
   FAB lifts above the in-app toolbar REGARDLESS of JS-set bottom, we ALSO add
   `margin-bottom: env(safe-area-inset-bottom)` — margin on a fixed-position
   element shifts it without conflicting with the inline `bottom` value.
   -------------------------------------------------------------------- */
.xoro-chatbot {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
.xoro-chatbot,
.xoro-chatbot__fab {
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 600px) {
    .xoro-chatbot__fab {
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------
   FIX 5.2 — Chat panel: 100vh fallback BEFORE 100dvh (HIGH)
   Original rule (line 162-163, inside @media max-width:600px) declared:
     .xoro-chatbot__panel { ... height: 100dvh; max-height: 100dvh; ... }
   with NO 100vh fallback. iOS 14 WKWebView (still common in TikTok's older
   in-app browser) does not recognize `dvh` units → both declarations invalid
   → height falls back to `auto` → panel collapses. We OVERRIDE with the
   proper fallback chain: 100vh first (iOS 14 uses this), 100dvh second
   (modern browsers override with dvh).
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
    .xoro-chatbot__panel {
        height: 100vh;       /* fallback iOS 14 WKWebView */
        height: 100dvh;      /* modern — dynamic viewport height */
        max-height: 100vh;   /* fallback iOS 14 WKWebView */
        max-height: 100dvh;  /* modern */
    }
}

/* --------------------------------------------------------------------
   FIX 4 (chatbot.css instance) — dvh fallback for desktop panel max-height
   Original rule (line 110) declared `max-height: calc(100vh - 7rem)` on the
   desktop panel without dvh fallback. On iPad/tablet in-app browsers, 100vh
   includes the toolbar area → panel extends behind it. Add calc(100dvh - 7rem)
   fallback. Scoped to @media(min-width:601px) to NOT affect mobile (mobile
   panel is full-screen via the @media(max-width:600px) rule, fixed in FIX 5.2).
   -------------------------------------------------------------------- */
@media (min-width: 601px) {
    .xoro-chatbot__panel {
        max-height: calc(100vh - 7rem);   /* fallback iOS 14 WKWebView */
        max-height: calc(100dvh - 7rem);  /* modern — excludes in-app toolbar area */
    }
}

/* --------------------------------------------------------------------
   FIX 7 (chatbot.css instance) — backdrop-filter -webkit- prefix (MEDIUM)
   Original rule (line 858) declared `backdrop-filter: blur(8px)` on
   .xoro-chatbot__prebuilt-card WITHOUT the -webkit- prefix. iOS WKWebView ≤14
   (used by Insta/TikTok/FB on iOS ≤14) only honors the prefixed form.
   We append a paired-prefix rule with the same selector — appended later in
   source order so it wins the cascade. Both declarations included so modern
   browsers continue to use the unprefixed form.
   -------------------------------------------------------------------- */
.xoro-chatbot__prebuilt-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}