.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Container ─────────────────────────────── */
.dc-chatbot {
    position: fixed;
    right: 12px;
    bottom: 12px;
    /* Was 1400 — below the onboarding tour overlay (9000) and effectively
       any sticky header/promo banner/announcement ticker a future page
       might add. The launcher must never be occluded from taps by any of
       those, so it now sits at the same "always on top" tier as the image
       lightbox (999999, see style.css) rather than a comparatively low
       fixed value that only happened to clear what existed when it was
       first written. */
    z-index: 999999 !important;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

/* ── FAB Button ─────────────────────────────── */
.dc-chatbot-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,0.22), transparent 34%),
        linear-gradient(145deg, #1E2476 0%, #C41230 100%);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(30, 36, 118, 0.35),
        0 2px 8px rgba(196, 18, 48, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.26s ease, box-shadow 0.26s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-chatbot-fab:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 16px 36px rgba(30, 36, 118, 0.40),
        0 4px 12px rgba(196, 18, 48, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Pulse ring */
.dc-chatbot-fab-ring {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 18, 48, 0.22);
    animation: chatbotPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* Text inside FAB */
.dc-chatbot-fab-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    transition: opacity 0.2s ease;
}

/* Tooltip shown on hover */
.dc-chatbot-fab-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(30, 36, 118, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    transform: translateY(-50%) translateX(6px);
}

/* Arrow pointing right */
.dc-chatbot-fab-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right: none;
    border-left-color: #C41230;
}

.dc-chatbot-fab:hover .dc-chatbot-fab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Panel ─────────────────────────────────── */
.dc-chatbot-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(300px, calc(100vw - 16px));
    /* Capped at 520px so a long conversation (many answered steps) never
       stretches the panel up near the sticky announcement bar/navbar at
       the top of a page like Product Details — it scrolls its own
       messages list instead of growing the whole panel. Still shrinks on
       short viewports via the vh-based half of the min(). */
    max-height: min(520px, calc(100vh - 96px));
    transform: translateY(18px) scale(0.97);
    transform-origin: bottom right;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.dc-chatbot-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ── Shell ─────────────────────────────────── */
.dc-chatbot-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(520px, calc(100vh - 96px));
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(30, 36, 118, 0.14);
    box-shadow:
        0 20px 44px rgba(30, 36, 118, 0.14),
        0 4px 12px rgba(0,0,0,0.06);
    backdrop-filter: blur(14px);
}

/* ── Glow accent ──────────────────────────── */
.dc-chatbot-glow {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 90px;
    background:
        radial-gradient(circle at top left, rgba(30, 36, 118, 0.10), transparent 50%),
        radial-gradient(circle at top right, rgba(196, 18, 48, 0.07), transparent 40%);
    pointer-events: none;
}

/* ── Header ────────────────────────────────── */
.dc-chatbot-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 7px;
    padding: 12px 12px 10px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
}

.dc-chatbot-header-identity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-chatbot-avatar {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E2476, #C41230);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.dc-chatbot-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid rgba(15, 23, 42, 0.9);
    animation: dc-chatbot-online-pulse 2s ease-in-out infinite;
}

html[dir="rtl"] .dc-chatbot-online-dot {
    right: auto;
    left: -1px;
}

@keyframes dc-chatbot-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0); }
}

.dc-chatbot-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    margin-bottom: 5px;
}

.dc-chatbot-title-group h3 {
    font-size: 0.9rem;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 800;
}

.dc-chatbot-title-group p {
    opacity: 0.88;
    line-height: 1.3;
    max-width: 154px;
    font-size: 0.68rem;
}

.dc-chatbot-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.dc-chatbot-reset,
.dc-chatbot-close {
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease, transform 0.2s ease;
}

.dc-chatbot-reset {
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
}

.dc-chatbot-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.92rem;
    line-height: 1;
}
.dc-chatbot-close:active { transform: scale(0.92); }

.dc-chatbot-reset:hover,
.dc-chatbot-close:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* ── Messages ──────────────────────────────── */
.dc-chatbot-messages {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 10px 10px 5px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.dc-chatbot-message {
    max-width: 86%;
    padding: 9px 11px;
    border-radius: 14px;
    line-height: 1.36;
    font-size: 0.76rem;
    box-shadow: 0 4px 12px rgba(30, 36, 118, 0.06);
    animation: chatbotLift 0.24s ease;
}

/* Bot bubble */
.dc-chatbot-message.bot {
    align-self: flex-start;
    background: linear-gradient(180deg, #f0f2ff, #ffffff);
    color: #1E2476;
    border: 1px solid rgba(30, 36, 118, 0.10);
    border-bottom-left-radius: 6px;
}

/* User bubble */
.dc-chatbot-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 10px 24px rgba(196, 18, 48, 0.20);
}

.dc-chatbot-message.helper {
    background: rgba(240, 242, 255, 0.92);
    color: #1E2476;
    font-size: 0.7rem;
    border: 1px solid rgba(30, 36, 118, 0.10);
}

/* ── Quick replies & chips ─────────────────── */
.dc-chatbot-quick-replies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 10px 8px;
    max-height: 132px;
    overflow-y: auto;
    scrollbar-width: thin;
    align-items: stretch;
}

/* Size pills are short numbers/letters — a denser grid fits more per row
   than the default 2-column layout the longer subtype/price labels need. */
.dc-chatbot-quick-replies:has(.dc-chatbot-chip-size) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dc-chatbot-chip-size {
    min-height: 38px;
    padding: 8px 6px;
    font-size: 0.82rem;
}

.dc-chatbot-controls {
    display: flex;
    justify-content: flex-start;
    padding: 0 10px 8px;
}

.dc-chatbot-secondary-action {
    border: 1px solid rgba(30, 36, 118, 0.22);
    background: rgba(255, 255, 255, 0.96);
    color: #C41230;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dc-chatbot-secondary-action:hover {
    background: linear-gradient(135deg, rgba(30,36,118,0.06), rgba(196,18,48,0.06));
}

.dc-chatbot-chip {
    border: 1px solid #e2e8f0;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    width: 100%;
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1.25;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.dc-chatbot-chip:hover:not(:disabled) {
    border-color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

.dc-chatbot-chip:active:not(:disabled) { transform: scale(0.97); }

.dc-chatbot-chip.is-selected,
.dc-chatbot-chip:disabled.is-selected {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.dc-chatbot-chip:disabled:not(.is-selected) {
    opacity: 0.5;
    cursor: default;
}

.dc-chatbot-select {
    grid-column: 1 / -1;
    border: 1px solid rgba(30, 36, 118, 0.18);
    background: rgba(255, 255, 255, 0.96);
    color: #1E2476;
    width: 100%;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.8rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231E2476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.2s ease;
}

.dc-chatbot-select:hover,
.dc-chatbot-select:focus {
    border-color: rgba(196, 18, 48, 0.40);
    outline: none;
}

html[dir="rtl"] .dc-chatbot-select {
    background-position: left 14px center;
}

/* ── Input form ────────────────────────────── */
.dc-chatbot-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(30, 36, 118, 0.10);
    background: linear-gradient(180deg, #ffffff, rgba(240, 242, 255, 0.40));
}

.dc-chatbot-input {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(30, 36, 118, 0.18);
    background: #fff;
    padding: 0 12px;
    outline: none;
    color: #1E2476;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dc-chatbot-input:focus {
    border-color: #C41230;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

.dc-chatbot-send {
    min-width: 62px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    font-weight: 900;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(196, 18, 48, 0.22);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.dc-chatbot-send:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.dc-chatbot-send:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── Product cards ─────────────────────────── */
.dc-chatbot-product-grid {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.dc-chatbot-product-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 7px;
    padding: 7px;
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #f8f9fc);
    border: 1px solid rgba(30, 36, 118, 0.10);
}

.dc-chatbot-product-card img {
    width: 44px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
    background: #f0f2ff;
}

.dc-chatbot-product-copy {
    display: grid;
    gap: 3px;
}

.dc-chatbot-product-copy strong {
    color: #1E2476;
    line-height: 1.24;
    font-size: 0.74rem;
}

.dc-chatbot-product-copy span {
    color: #6b7399;
    font-size: 0.64rem;
}

.dc-chatbot-product-copy b {
    color: #C41230;
    font-size: 0.74rem;
    font-weight: 900;
}

.dc-chatbot-product-link {
    width: fit-content;
    margin-top: 2px;
    padding: 5px 8px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(30,36,118,0.08), rgba(196,18,48,0.06));
    color: #C41230;
    font-weight: 800;
    font-size: 0.66rem;
    border: 1px solid rgba(196, 18, 48, 0.18);
}

/* ── FAB pulse animation ───────────────────── */
@keyframes dc-chatbot-fab-pulse {
    0%   { box-shadow: 0 4px 18px rgba(196,18,48,0.35), 0 0 0 0 rgba(196,18,48,0.45); }
    65%  { box-shadow: 0 4px 18px rgba(196,18,48,0.35), 0 0 0 14px rgba(196,18,48,0); }
    100% { box-shadow: 0 4px 18px rgba(196,18,48,0.35), 0 0 0 0 rgba(196,18,48,0); }
}
.dc-chatbot-fab--pulse {
    animation: dc-chatbot-fab-pulse 1.8s ease-in-out infinite;
}

/* ── Progress indicator ────────────────────── */
.dc-chatbot-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 9px;
}
.dc-chatbot-progress-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: #94a3b8;
}
.dc-chatbot-progress-track {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}
.dc-chatbot-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1E2476, #C41230);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dc-chatbot-question-text {
    margin: 0;
    line-height: 1.5;
}
html[data-theme="dark"] .dc-chatbot-progress-track {
    background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .dc-chatbot-progress-label {
    color: #9fa8c7;
}

/* ── Summary chips ─────────────────────────── */
.dc-chatbot-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px !important;
    background: rgba(30, 36, 118, 0.04) !important;
    border: 1px solid rgba(30, 36, 118, 0.1) !important;
    border-radius: 16px !important;
}
.dc-chatbot-summary-chip {
    background: linear-gradient(135deg, rgba(30,36,118,0.09), rgba(196,18,48,0.07));
    color: #1E2476;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid rgba(30, 36, 118, 0.14);
    white-space: nowrap;
}
html[data-theme="dark"] .dc-chatbot-summary {
    background: rgba(30, 36, 118, 0.15) !important;
    border-color: rgba(100, 110, 200, 0.2) !important;
}
html[data-theme="dark"] .dc-chatbot-summary-chip {
    background: linear-gradient(135deg, rgba(30,36,118,0.22), rgba(196,18,48,0.14));
    color: #b0b8e8;
    border-color: rgba(100, 110, 200, 0.25);
}

/* ── View Results button ───────────────────── */
.dc-chatbot-view-results-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 11px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.2s, transform 0.2s;
}
.dc-chatbot-view-results-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
}
html[data-theme="dark"] .dc-chatbot-view-results-btn {
    background: linear-gradient(135deg, #3a43c4, #e03050);
}

/* ── Protocol cards ────────────────────────── */
.dc-chatbot-protocol {
    display: grid;
    gap: 10px;
}

.dc-chatbot-protocol > strong {
    color: #1E2476;
    font-size: 0.9rem;
    line-height: 1.35;
}

.dc-chatbot-protocol p {
    margin: 0;
    color: #4a5280;
    line-height: 1.55;
}

.dc-chatbot-protocol-section {
    display: grid;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(240, 242, 255, 0.70);
    border: 1px solid rgba(30, 36, 118, 0.10);
}

.dc-chatbot-protocol-section b {
    color: #C41230;
    font-size: 0.78rem;
}

.dc-chatbot-protocol-section ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
}

.dc-chatbot[dir="rtl"] .dc-chatbot-protocol-section ul {
    padding-left: 0;
    padding-right: 18px;
}

.dc-chatbot-protocol-section li {
    color: #1E2476;
    font-size: 0.74rem;
    line-height: 1.45;
}

.dc-chatbot-protocol-section.notes {
    background: rgba(196, 18, 48, 0.05);
    border-color: rgba(196, 18, 48, 0.12);
}

/* ── Scrollbar ─────────────────────────────── */
.dc-chatbot-messages::-webkit-scrollbar,
.dc-chatbot-quick-replies::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.dc-chatbot-messages::-webkit-scrollbar-thumb,
.dc-chatbot-quick-replies::-webkit-scrollbar-thumb {
    background: rgba(196, 18, 48, 0.30);
    border-radius: 999px;
}

/* ── RTL ────────────────────────────────────── */
.dc-chatbot[dir="rtl"] .dc-chatbot-panel {
    transform-origin: bottom left;
}

.dc-chatbot[dir="rtl"] .dc-chatbot-message.bot {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 6px;
}

.dc-chatbot[dir="rtl"] .dc-chatbot-message.user {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 6px;
}

/* ── Animations ─────────────────────────────── */
@keyframes chatbotPulse {
    0%, 100% { transform: scale(1); opacity: 0.50; }
    50% { transform: scale(1.10); opacity: 0.14; }
}

@keyframes chatbotLift {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 700px) {
    .dc-chatbot {
        right: 8px;
        bottom: 8px;
    }

    .dc-chatbot-fab {
        width: 46px;
        height: 46px;
        border-radius: 50%;
    }

    .dc-chatbot-fab svg,
    .dc-chatbot-fab-text {
        transform: scale(0.85);
    }

    /* Root cause of the "modal drifts above the top of the screen on a
       long conversation" bug: this panel used to be a floating
       bottom-anchored box sized off `100vh`, which on mobile browsers
       doesn't track the actual visible viewport (address bar show/hide,
       on-screen keyboard) — the panel would grow/reposition based on the
       LARGEST possible viewport while the real visible area was smaller,
       pushing its top edge above y=0 and hiding the header/close button.
       Fixed by making it a true fullscreen fixed modal on mobile instead
       of a corner popover, sized with `100dvh` (dynamic viewport height,
       which DOES track the real visible viewport) rather than `100vh`. */
    .dc-chatbot-panel {
        position: fixed !important;
        inset: 0 !important;
        right: 0;
        bottom: 0;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 999999 !important;
    }

    .dc-chatbot-shell {
        max-height: 100dvh;
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dc-chatbot-header {
        position: sticky;
        top: 0;
        flex-shrink: 0;
        z-index: 10;
    }

    .dc-chatbot-messages {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dc-chatbot-close,
    .dc-chatbot-reset {
        flex-shrink: 0;
    }

    .dc-chatbot-header,
    .dc-chatbot-form {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dc-chatbot-messages,
    .dc-chatbot-quick-replies,
    .dc-chatbot-controls {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dc-chatbot-messages {
        min-height: 120px;
    }

    .dc-chatbot-form {
        grid-template-columns: 1fr auto;
    }
}

/* ══════════════════════════════════════════
   Dark Mode
══════════════════════════════════════════ */
html[data-theme="dark"] .dc-chatbot-fab {
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,0.15), transparent 34%),
        linear-gradient(145deg, #1a1f6a 0%, #9a0e25 100%);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(196, 18, 48, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .dc-chatbot-fab-ring {
    border-color: rgba(196, 18, 48, 0.30);
}

html[data-theme="dark"] .dc-chatbot-fab-tooltip {
    background: linear-gradient(135deg, #0d0f1e, #1E2476);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .dc-chatbot-fab-tooltip::after {
    border-left-color: #1E2476;
}

html[data-theme="dark"] .dc-chatbot-shell {
    background: rgba(13, 15, 30, 0.98);
    border-color: rgba(50, 60, 120, 0.45);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .dc-chatbot-glow {
    background:
        radial-gradient(circle at top left, rgba(30, 36, 118, 0.20), transparent 50%),
        radial-gradient(circle at top right, rgba(196, 18, 48, 0.12), transparent 40%);
}

/* Header stays gradient — looks great in dark mode */

/* Bot message bubble */
html[data-theme="dark"] .dc-chatbot-message.bot {
    background: linear-gradient(180deg, rgba(22, 27, 55, 0.97), rgba(18, 22, 45, 0.97));
    color: #c8cde8;
    border-color: rgba(50, 60, 120, 0.35);
}

/* User message bubble */
html[data-theme="dark"] .dc-chatbot-message.user {
    background: linear-gradient(135deg, #1a1f6a, #9a0e25);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.40);
}

/* Helper bubble */
html[data-theme="dark"] .dc-chatbot-message.helper {
    background: rgba(18, 22, 45, 0.90);
    color: #9fa8c7;
    border-color: rgba(50, 60, 120, 0.30);
}

/* Quick reply chips */
html[data-theme="dark"] .dc-chatbot-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cfd3ec;
}

html[data-theme="dark"] .dc-chatbot-chip:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .dc-chatbot-chip.is-selected {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}

html[data-theme="dark"] .dc-chatbot-select {
    background-color: rgba(18, 22, 45, 0.94);
    border-color: rgba(50, 60, 120, 0.40);
    color: #c8cde8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%239fa8c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

html[data-theme="dark"] .dc-chatbot-select:hover,
html[data-theme="dark"] .dc-chatbot-select:focus {
    border-color: rgba(196, 18, 48, 0.45);
}

/* Secondary action */
html[data-theme="dark"] .dc-chatbot-secondary-action {
    background: rgba(18, 22, 45, 0.92);
    border-color: rgba(50, 60, 120, 0.40);
    color: #ff6b80;
}

html[data-theme="dark"] .dc-chatbot-secondary-action:hover {
    background: rgba(30, 36, 118, 0.20);
}

/* Input form */
html[data-theme="dark"] .dc-chatbot-form {
    background: linear-gradient(180deg, rgba(13, 15, 30, 0.98), rgba(18, 22, 45, 0.98));
    border-top-color: rgba(50, 60, 120, 0.30);
}

html[data-theme="dark"] .dc-chatbot-input {
    background: rgba(15, 18, 38, 0.97);
    border-color: rgba(50, 60, 120, 0.50);
    color: #e8eaf6;
}

html[data-theme="dark"] .dc-chatbot-input::placeholder {
    color: rgba(159, 168, 199, 0.6);
}

html[data-theme="dark"] .dc-chatbot-input:focus {
    border-color: #C41230;
    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.18);
}

/* Send button stays gradient */

/* Product cards */
html[data-theme="dark"] .dc-chatbot-product-card {
    background: linear-gradient(180deg, rgba(22, 27, 55, 0.96), rgba(18, 22, 45, 0.96));
    border-color: rgba(50, 60, 120, 0.35);
}

html[data-theme="dark"] .dc-chatbot-product-card img {
    background: rgba(18, 22, 45, 0.80);
}

html[data-theme="dark"] .dc-chatbot-product-copy strong {
    color: #c8cde8;
}

html[data-theme="dark"] .dc-chatbot-product-copy span {
    color: #7a85b0;
}

html[data-theme="dark"] .dc-chatbot-product-copy b {
    color: #ff6b80;
}

html[data-theme="dark"] .dc-chatbot-product-link {
    background: linear-gradient(135deg, rgba(30, 36, 118, 0.20), rgba(196, 18, 48, 0.12));
    color: #ff6b80;
    border-color: rgba(196, 18, 48, 0.25);
}

/* Protocol sections */
html[data-theme="dark"] .dc-chatbot-protocol > strong {
    color: #c8cde8;
}

html[data-theme="dark"] .dc-chatbot-protocol p {
    color: #7a85b0;
}

html[data-theme="dark"] .dc-chatbot-protocol-section {
    background: rgba(18, 22, 45, 0.90);
    border-color: rgba(50, 60, 120, 0.35);
}

html[data-theme="dark"] .dc-chatbot-protocol-section b {
    color: #ff6b80;
}

html[data-theme="dark"] .dc-chatbot-protocol-section li {
    color: #9fa8c7;
}

html[data-theme="dark"] .dc-chatbot-protocol-section.notes {
    background: rgba(196, 18, 48, 0.08);
    border-color: rgba(196, 18, 48, 0.18);
}

/* Scrollbar in dark */
html[data-theme="dark"] .dc-chatbot-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .dc-chatbot-quick-replies::-webkit-scrollbar-thumb {
    background: rgba(196, 18, 48, 0.35);
}