/**
 * Rag Sitemap Chatbot - Frontend Styles v1.7.13
 * Based on Mark Chatbot style.css
 *
 * Theme System:
 * All visual properties read from --rsc-theme-* variables with fallbacks.
 * Set data-rsc-theme="<name>" on .rsc-chatbot-container to activate a theme.
 * Admin inline overrides (!important) still take highest priority.
 */

/* ── Root Variables ── */

:root {
    /* Primitive Color Tokens */
    --rsc-color-white: rgba(255, 255, 255, 1);
    --rsc-color-black: rgba(0, 0, 0, 1);
    --rsc-color-cream-50: rgba(252, 252, 249, 1);
    --rsc-color-cream-100: rgba(255, 255, 253, 1);
    --rsc-color-gray-200: rgba(245, 245, 245, 1);
    --rsc-color-gray-300: rgba(167, 169, 169, 1);
    --rsc-color-gray-400: rgba(119, 124, 124, 1);
    --rsc-color-slate-500: rgba(98, 108, 113, 1);
    --rsc-color-charcoal-700: rgba(31, 33, 33, 1);
    --rsc-color-charcoal-800: rgba(38, 40, 40, 1);
    --rsc-color-slate-900: rgba(19, 52, 59, 1);
    --rsc-color-teal-300: rgba(50, 184, 198, 1);
    --rsc-color-teal-400: rgba(45, 166, 178, 1);
    --rsc-color-teal-500: rgba(33, 128, 141, 1);
    --rsc-color-teal-600: rgba(29, 116, 128, 1);
    --rsc-color-teal-700: rgba(26, 104, 115, 1);
    --rsc-color-red-500: rgba(192, 21, 47, 1);

    /* RGB versions for opacity control */
    --rsc-color-teal-500-rgb: 33, 128, 141;
    --rsc-color-slate-900-rgb: 19, 52, 59;
    --rsc-color-brown-600-rgb: 94, 82, 64;

    /* Background color tokens */
    --rsc-color-bg-2: rgba(245, 158, 11, 0.08);
    --rsc-color-bg-3: rgba(34, 197, 94, 0.08);
    --rsc-color-bg-8: rgba(6, 182, 212, 0.08);

    /* Semantic Color Tokens (Light Mode) */
    --rsc-color-background: var(--rsc-color-cream-50);
    --rsc-color-surface: var(--rsc-color-cream-100);
    --rsc-color-text: var(--rsc-color-slate-900);
    --rsc-color-text-secondary: var(--rsc-color-slate-500);
    --rsc-color-primary: var(--rsc-color-teal-500);
    --rsc-color-primary-hover: var(--rsc-color-teal-600);
    --rsc-color-btn-primary-text: var(--rsc-color-cream-50);
    --rsc-color-border: rgba(var(--rsc-color-brown-600-rgb), 0.2);
    --rsc-color-card-border: rgba(var(--rsc-color-brown-600-rgb), 0.12);
    --rsc-color-error: var(--rsc-color-red-500);
    --rsc-color-focus-ring: rgba(var(--rsc-color-teal-500-rgb), 0.4);

    /* Typography */
    --rsc-font-family-base: inherit;
    --rsc-font-size-xs: 11px;
    --rsc-font-size-sm: 12px;
    --rsc-font-size-base: 14px;
    --rsc-font-size-md: 14px;
    --rsc-font-size-lg: 16px;
    --rsc-line-height-normal: 1.5;

    /* Spacing */
    --rsc-space-4: 4px;
    --rsc-space-8: 8px;
    --rsc-space-12: 12px;
    --rsc-space-16: 16px;

    /* Border Radius */
    --rsc-radius-sm: 6px;
    --rsc-radius-lg: 12px;
    --rsc-radius-full: 9999px;

    /* Shadows */
    --rsc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --rsc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Animation */
    --rsc-duration-fast: 150ms;
    --rsc-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark Mode ── */

@media (prefers-color-scheme: dark) {
    :root {
        --rsc-color-gray-400-rgb: 119, 124, 124;
        --rsc-color-teal-300-rgb: 50, 184, 198;

        --rsc-color-background: var(--rsc-color-charcoal-700);
        --rsc-color-surface: var(--rsc-color-charcoal-800);
        --rsc-color-text: var(--rsc-color-gray-200);
        --rsc-color-text-secondary: rgba(167, 169, 169, 0.7);
        --rsc-color-primary: var(--rsc-color-teal-300);
        --rsc-color-primary-hover: var(--rsc-color-teal-400);
        --rsc-color-btn-primary-text: var(--rsc-color-slate-900);
        --rsc-color-card-border: rgba(var(--rsc-color-gray-400-rgb), 0.2);
        --rsc-color-focus-ring: rgba(var(--rsc-color-teal-300-rgb), 0.4);
    }
}

/* ── Reset ── */

.rsc-chatbot-popup,
.rsc-chatbot-popup *,
.rsc-chatbot-popup *::before,
.rsc-chatbot-popup *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Text Selection Highlight ── */

.rsc-chatbot-popup ::selection {
    background: var(--rsc-theme-selection-bg, rgba(33, 128, 141, 0.3));
    color: var(--rsc-theme-selection-color, inherit);
}

/* ── Utility ── */

.rsc-hidden {
    display: none !important;
}

/* ── Popup Container ── */

.rsc-chatbot-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rsc-theme-font-family, inherit);
    font-size: var(--rsc-theme-font-size-base, var(--rsc-font-size-base));
    line-height: var(--rsc-theme-line-height, var(--rsc-line-height-normal));
    color: var(--rsc-theme-chat-font-color, var(--rsc-color-text));
    -webkit-font-smoothing: antialiased;
}

/* ── Overlay ── */

.rsc-chatbot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rsc-theme-overlay-bg, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(var(--rsc-theme-overlay-blur, 2px));
}

/* ── Chatbot Container (Window Frame) ── */

.rsc-chatbot-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    height: 80vh;
    max-height: 700px;
    background: var(--rsc-theme-window-bg, var(--rsc-color-surface));
    border-style: var(--rsc-theme-window-border-style, none);
    border-width: var(--rsc-theme-window-border-width, 0);
    border-color: var(--rsc-theme-window-border-color, transparent);
    border-radius: var(--rsc-theme-window-radius, var(--rsc-radius-lg));
    box-shadow: var(--rsc-theme-window-shadow, var(--rsc-shadow-lg));
    outline-style: var(--rsc-theme-window-outline-style, none);
    outline-width: var(--rsc-theme-window-outline-width, 0);
    outline-color: var(--rsc-theme-window-outline-color, transparent);
    outline-offset: var(--rsc-theme-window-outline-offset, 0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: var(--rsc-theme-animation-enter, rscSlideUp 0.3s ease-out);
    overscroll-behavior: contain;
}

/* Container Overlay (scanlines, CRT effects, etc.) */
.rsc-chatbot-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: var(--rsc-theme-container-overlay, none);
    border-radius: inherit;
}

/* ── Header (Title Bar) ── */

.rsc-chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--rsc-theme-titlebar-padding, var(--rsc-space-12) var(--rsc-space-16));
    background: var(--rsc-theme-titlebar-bg, var(--rsc-color-primary));
    background-image: var(--rsc-theme-titlebar-bg-image, none);
    background-size: var(--rsc-theme-titlebar-bg-image-size, cover);
    background-repeat: var(--rsc-theme-titlebar-bg-image-repeat, no-repeat);
    background-position: var(--rsc-theme-titlebar-bg-image-position, center);
    color: var(--rsc-theme-titlebar-text-color, var(--rsc-color-btn-primary-text));
    min-height: var(--rsc-theme-titlebar-height, auto);
    border-bottom: var(--rsc-theme-titlebar-border-bottom, none);
}

/* Header Gradient/Pattern Overlay */
.rsc-chatbot-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--rsc-theme-titlebar-bg-gradient, none);
    background-size: var(--rsc-theme-titlebar-bg-size, auto);
}

.rsc-chatbot-header > * {
    position: relative;
    z-index: 1;
}

.rsc-chatbot-title {
    display: flex;
    align-items: center;
    gap: var(--rsc-space-8);
    font-family: var(--rsc-theme-titlebar-font-family, var(--rsc-theme-font-family, inherit));
    font-size: var(--rsc-theme-titlebar-font-size, inherit);
    font-weight: var(--rsc-theme-titlebar-font-weight, 600);
    text-shadow: var(--rsc-theme-titlebar-text-shadow, none);
}

/* Title Bar Close Button */
.rsc-chatbot-close {
    background: var(--rsc-theme-titlebar-btn-bg, none);
    border-style: var(--rsc-theme-titlebar-btn-border-style, none);
    border-width: var(--rsc-theme-titlebar-btn-border-width, 0);
    border-color: var(--rsc-theme-titlebar-btn-border-color, transparent);
    border-radius: var(--rsc-theme-titlebar-btn-radius, var(--rsc-radius-sm));
    box-shadow: var(--rsc-theme-titlebar-btn-shadow, none);
    color: var(--rsc-theme-titlebar-btn-icon-color, var(--rsc-close-btn-color, #ffffff));
    width: var(--rsc-theme-titlebar-btn-width, 28px);
    height: var(--rsc-theme-titlebar-btn-height, 28px);
    cursor: pointer;
    padding: var(--rsc-theme-titlebar-btn-padding, var(--rsc-space-4));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--rsc-theme-animation-duration, var(--rsc-duration-fast));
}

.rsc-chatbot-close svg {
    width: 100%;
    height: 100%;
}

.rsc-chatbot-popup .rsc-chatbot-close:hover {
    background: var(--rsc-theme-titlebar-btn-bg-hover, transparent);
    color: var(--rsc-close-btn-color-hover, #dc3545);
    transform: scale(var(--rsc-theme-titlebar-btn-hover-scale, 1));
}

.rsc-chatbot-popup .rsc-chatbot-close:active {
    background: var(--rsc-theme-titlebar-btn-bg-active, transparent);
    border-style: var(--rsc-theme-titlebar-btn-border-style-active, var(--rsc-theme-titlebar-btn-border-style, none));
    box-shadow: var(--rsc-theme-titlebar-btn-active-shadow, var(--rsc-theme-btn-active-shadow));
    transform: scale(var(--rsc-theme-titlebar-btn-active-scale, var(--rsc-theme-btn-active-scale, 1))) translate(var(--rsc-theme-titlebar-btn-active-offset, var(--rsc-theme-btn-active-offset, 0)), var(--rsc-theme-titlebar-btn-active-offset, var(--rsc-theme-btn-active-offset, 0)));
}

/* ── Header Hidden Mode ── */
/* Collapse header visually but keep close button floating over chat area */

.rsc-chatbot-container.rsc-header-hidden .rsc-chatbot-header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 10;
}

.rsc-chatbot-container.rsc-header-hidden .rsc-chatbot-header::before {
    display: none !important;
}

.rsc-chatbot-container.rsc-header-hidden .rsc-chatbot-title {
    display: none !important;
}

/* Close button: auto-offset, scrollbar width only added when scrollbar is actually visible (.rsc-has-scrollbar) */
.rsc-chatbot-container.rsc-header-hidden .rsc-chatbot-close {
    position: absolute;
    top: calc(var(--rsc-theme-body-padding, 0px) + var(--rsc-theme-scroll-btn-right, 8px));
    right: calc(var(--rsc-theme-body-padding, 0px) + var(--rsc-theme-scroll-btn-right, 8px));
    z-index: 20;
    transition: right 0.2s ease;
}

.rsc-chatbot-container.rsc-header-hidden.rsc-has-scrollbar .rsc-chatbot-close {
    right: calc(var(--rsc-theme-body-padding, 0px) + var(--rsc-theme-scrollbar-width, 8px) + var(--rsc-theme-scroll-btn-right, 8px));
}

/* ── Chat Area ── */

.rsc-chat-area-wrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
    margin: var(--rsc-theme-body-padding, 0);
    margin-bottom: 0;
}

.rsc-chat-messages {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: var(--rsc-space-16);
    background-color: var(--rsc-theme-chat-bg, var(--rsc-color-background));
    background-image: var(--rsc-theme-chat-bg-image, none);
    background-size: var(--rsc-theme-chat-bg-image-size, cover);
    background-repeat: var(--rsc-theme-chat-bg-image-repeat, no-repeat);
    background-position: var(--rsc-theme-chat-bg-image-position, center);
    border: var(--rsc-theme-chat-area-border, none);
    border-radius: var(--rsc-theme-chat-area-radius, 0);
    box-shadow: var(--rsc-theme-chat-area-shadow, none);
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Chat Gradient/Pattern Overlay */
.rsc-chat-messages::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--rsc-theme-chat-bg-gradient, none);
    background-size: var(--rsc-theme-chat-bg-size, auto);
}

.rsc-chat-messages > * {
    position: relative;
    z-index: 1;
}

/* ── Scrollbar ── */

.rsc-chat-messages::-webkit-scrollbar {
    width: var(--rsc-theme-scrollbar-width, 8px);
}

.rsc-chat-messages::-webkit-scrollbar-track {
    background: var(--rsc-theme-scrollbar-track-bg, var(--rsc-color-surface));
    border: var(--rsc-theme-scrollbar-track-border, none);
    border-radius: var(--rsc-theme-scrollbar-track-radius, var(--rsc-radius-full));
}

.rsc-chat-messages::-webkit-scrollbar-thumb {
    background: var(--rsc-theme-scrollbar-thumb-bg, var(--rsc-color-text-secondary));
    border: var(--rsc-theme-scrollbar-thumb-border, 2px solid var(--rsc-color-background));
    border-radius: var(--rsc-theme-scrollbar-thumb-radius, var(--rsc-radius-full));
}

.rsc-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--rsc-theme-scrollbar-thumb-bg-hover, var(--rsc-color-primary));
}

/* ── Messages ── */

.rsc-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--rsc-theme-bubble-spacing, var(--rsc-space-16));
    animation: rscMessageSlideIn 0.3s ease-out;
}

.rsc-user-message {
    justify-content: flex-end;
    padding-left: 40px;
}

.rsc-ai-message {
    justify-content: flex-start;
    padding-right: 40px;
}

.rsc-message-avatar {
    font-size: var(--rsc-font-size-lg);
    width: var(--rsc-theme-avatar-size, 32px);
    height: var(--rsc-theme-avatar-size, 32px);
    border-radius: var(--rsc-theme-avatar-radius, 50%);
    border-style: var(--rsc-theme-avatar-border-style, none);
    border-width: var(--rsc-theme-avatar-border-width, 0);
    border-color: var(--rsc-theme-avatar-border-color, transparent);
    box-shadow: var(--rsc-theme-avatar-shadow, none);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsc-user-message .rsc-message-avatar {
    background: var(--rsc-theme-avatar-user-bg, var(--rsc-color-primary));
    color: var(--rsc-theme-avatar-user-color, var(--rsc-theme-btn-primary-color, var(--rsc-send-btn-color, #13343b)));
    margin-left: var(--rsc-space-8);
    order: 2;
}

.rsc-ai-message .rsc-message-avatar {
    background: var(--rsc-theme-avatar-bot-bg, var(--rsc-color-bg-3));
    color: var(--rsc-theme-avatar-bot-color, var(--rsc-theme-btn-primary-color, var(--rsc-send-btn-color, #13343b)));
    margin-right: var(--rsc-space-8);
}

.rsc-message-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rsc-user-message .rsc-message-content {
    align-items: flex-end;
    order: 1;
}

/* ── Message Bubble ── */

.rsc-message-bubble {
    padding: var(--rsc-theme-bubble-padding, var(--rsc-space-12) var(--rsc-space-16));
    border-radius: var(--rsc-radius-lg);
    font-size: var(--rsc-font-size-md);
    line-height: 1.4;
}

.rsc-message-bubble h1,
.rsc-message-bubble h2,
.rsc-message-bubble h3,
.rsc-message-bubble h4,
.rsc-message-bubble h5,
.rsc-message-bubble h6 {
    line-height: 1.4;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rsc-message-bubble h1 {
    color: var(--rsc-theme-h1-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h1-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h1-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble h2 {
    color: var(--rsc-theme-h2-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h2-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h2-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble h3 {
    color: var(--rsc-theme-h3-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h3-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h3-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble h4 {
    color: var(--rsc-theme-h4-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h4-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h4-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble h5 {
    color: var(--rsc-theme-h5-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h5-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h5-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble h6 {
    color: var(--rsc-theme-h6-font-color, var(--rsc-theme-heading-font-color, inherit));
    font-size: var(--rsc-theme-h6-font-size, var(--rsc-theme-heading-font-size, 1em));
    font-weight: var(--rsc-theme-h6-font-weight, var(--rsc-theme-heading-font-weight, bold));
}

.rsc-message-bubble p:not(:last-child) {
    margin-bottom: var(--rsc-space-8);
}

/* Prevent <p> inside <li> from breaking bullet marker alignment */
.rsc-message-bubble li > p {
    display: inline;
    margin: 0;
}

.rsc-message-bubble li > p:first-child {
    display: inline;
}

.rsc-message-bubble ul,
.rsc-message-bubble ol {
    margin: 0.5em 0.5em 0.9em 1.88em;
}

.rsc-message-bubble li {
    margin-bottom: var(--rsc-space-4);
}

.rsc-message-bubble > ul > li,
.rsc-message-bubble > ol > li {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

.rsc-user-message .rsc-message-bubble {
    background: var(--rsc-theme-bubble-user-bg, var(--rsc-color-primary));
    color: var(--rsc-theme-bubble-user-color, var(--rsc-color-btn-primary-text));
    border-style: var(--rsc-theme-bubble-user-border-style, none);
    border-width: var(--rsc-theme-bubble-user-border-width, 0);
    border-color: var(--rsc-theme-bubble-user-border-color, transparent);
    border-radius: var(--rsc-theme-bubble-user-radius, var(--rsc-radius-lg));
    border-bottom-right-radius: var(--rsc-radius-sm);
    box-shadow: var(--rsc-theme-bubble-user-shadow, none);
}

.rsc-ai-message .rsc-message-bubble {
    background: var(--rsc-theme-bubble-bot-bg, var(--rsc-color-surface));
    color: var(--rsc-theme-bubble-bot-color, var(--rsc-color-text));
    border-style: var(--rsc-theme-bubble-bot-border-style, solid);
    border-width: var(--rsc-theme-bubble-bot-border-width, 1px);
    border-color: var(--rsc-theme-bubble-bot-border-color, var(--rsc-color-card-border));
    border-radius: var(--rsc-theme-bubble-bot-radius, var(--rsc-radius-lg));
    border-bottom-left-radius: var(--rsc-radius-sm);
    box-shadow: var(--rsc-theme-bubble-bot-shadow, var(--rsc-shadow-sm));
}

.rsc-ai-message .rsc-message-bubble img {
    max-width: 100%;
    border-radius: var(--rsc-radius-sm);
    margin-top: var(--rsc-space-8);
}

/* User uploaded image preview (above bubble) */
.rsc-message-images {
    display: flex;
    gap: var(--rsc-space-4);
    justify-content: flex-end;
    margin-bottom: var(--rsc-space-4);
}

.rsc-message-image-thumb {
    max-width: 160px;
    max-height: 120px;
    border: var(--rsc-theme-image-thumb-border, none);
    border-radius: var(--rsc-theme-image-thumb-radius, var(--rsc-radius-sm));
    object-fit: cover;
    box-shadow: var(--rsc-shadow-sm);
}

/* ── Status Bubble & Retry Button ── */

.rsc-bubble-retry-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    margin-left: var(--rsc-space-4);
    color: var(--rsc-theme-retry-color, inherit);
    opacity: var(--rsc-theme-retry-opacity, 0.6);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    vertical-align: middle;
}

.rsc-bubble-retry-btn:hover {
    opacity: var(--rsc-theme-retry-hover-opacity, 1);
    transform: scale(var(--rsc-theme-retry-hover-scale, 1.1));
    color: var(--rsc-theme-retry-hover-color, var(--rsc-theme-retry-color, inherit));
}

.rsc-bubble-retry-btn:active {
    opacity: 1;
    transform: scale(0.85);
    transition: transform 0.1s ease;
}

.rsc-bubble-retry-btn svg {
    width: var(--rsc-theme-retry-icon-size, 15px);
    height: var(--rsc-theme-retry-icon-size, 15px);
}

.rsc-bubble-retry-btn.rsc-pulse {
    opacity: 1;
    color: var(--rsc-theme-retry-color, inherit);
    animation: rscPulse var(--rsc-theme-retry-pulse-duration, 1.5s) ease-in-out infinite;
}

.rsc-bubble-retry-btn.rsc-pulse:hover {
    color: var(--rsc-theme-retry-hover-color, var(--rsc-theme-retry-color, inherit));
}

.rsc-bubble-retry-btn.rsc-pulse:active {
    transform: scale(0.92);
    animation: none;
}

/* ── Thinking ── */

/* Inline thinking indicator (no bubble, just text with avatar) */
.rsc-inline-thinking .rsc-message-content {
    padding-top: var(--rsc-space-4);
    padding-bottom: var(--rsc-space-4);
}

/* Thinking text (font-size and color overridden by PHP dynamic styles) */
.rsc-thinking-text {
    margin-bottom: var(--rsc-space-8);
    opacity: 0.8;
    transition: opacity 0.3s ease;
    overflow: hidden;
    height: 6lh;
    max-height: 6lh;
    overflow-y: auto;
    scrollbar-width: none;
    line-height: 1.5;
}
.rsc-thinking-text::-webkit-scrollbar {
    display: none;
}

.rsc-thinking-text.rsc-thinking-overflow {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.2lh);
    mask-image: linear-gradient(to bottom, transparent 0, #000 0.2lh);
}
.rsc-thinking-text span {
    will-change: opacity, margin-left;
}
@keyframes rscThinkFadeIn {
    from { opacity: 0; margin-left: -1px; }
    to   { opacity: 1; margin-left: 0; }
}

.rsc-thinking-line {
    font-size: var(--rsc-theme-thinking-font-size, var(--rsc-font-size-sm));
    color: var(--rsc-theme-thinking-color, var(--rsc-color-text-secondary));
    line-height: 1.5;
    margin: 5px 0 4px 2px;
    padding-left: var(--rsc-space-8);
    border-left: 1px solid color-mix(in srgb, currentColor 36%, transparent);
    animation: rscSlideIn 0.25s ease-out both;
}

/* Staggered entrance: each line appears 108ms after the previous */
.rsc-thinking-line:nth-child(1) { animation-delay: 0s; }
.rsc-thinking-line:nth-child(2) { animation-delay: 0.108s; }
.rsc-thinking-line:nth-child(3) { animation-delay: 0.216s; }
.rsc-thinking-line:nth-child(4) { animation-delay: 0.324s; }
.rsc-thinking-line:nth-child(n+5) { animation-delay: 0.432s; }

/* Reverse collapse: last line disappears first */
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line {
    animation: rscSlideOut 0.2s ease-in both;
}
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line:nth-last-child(1) { animation-delay: 0s; }
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line:nth-last-child(2) { animation-delay: 0.108s; }
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line:nth-last-child(3) { animation-delay: 0.216s; }
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line:nth-last-child(4) { animation-delay: 0.324s; }
.rsc-thinking-content-simple.rsc-collapsing .rsc-thinking-line:nth-last-child(n+5) { animation-delay: 0.432s; }

/* Thinking history (collapsible, inside message-content) */
.rsc-thinking-history-simple {
    margin-bottom: var(--rsc-space-4);
}

.rsc-thinking-toggle-simple {
    display: flex;
    align-items: center;
    padding-top: calc(var(--rsc-theme-avatar-size, 32px) / 2 - 3px);
    margin-bottom: 6px;
    font-size: var(--rsc-theme-thinking-font-size, var(--rsc-font-size-sm));
    color: var(--rsc-theme-thinking-color, var(--rsc-color-text-secondary));
    user-select: none;
    cursor: pointer;
}

.rsc-thinking-toggle-simple:hover {
    color: var(--rsc-theme-chat-link-font-color, var(--rsc-color-primary));
}

.rsc-thinking-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    opacity: 0.88;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

.rsc-thinking-icon.rsc-chevron-right {
    transform: rotate(-45deg);
}

.rsc-thinking-icon.rsc-chevron-down {
    transform: rotate(45deg);
}

.rsc-thinking-content-simple {
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.rsc-thinking-content-simple.rsc-hidden {
    display: none;
}

.rsc-thinking-content-simple.rsc-collapsing {
    max-height: 0 !important;
}

/* Live thinking list (streaming, no collapse button) */
.rsc-live-thinking-list {
    margin-top: var(--rsc-space-8);
    animation: rscFadeIn 0.2s ease-out;
}

/* .rsc-live-thinking-list .rsc-thinking-line inherits staggered animation from base */

/* ── Input Container ── */

.rsc-chat-input-container {
    padding: var(--rsc-theme-input-container-padding, var(--rsc-space-16) 0 0);
    background: var(--rsc-theme-input-container-bg, var(--rsc-color-surface));
    border-top: var(--rsc-theme-input-container-border-top, 1px solid var(--rsc-color-card-border));
    margin: 0 var(--rsc-theme-body-padding, 0) var(--rsc-theme-body-padding, 0);
    z-index: 2;
}

/* ── Suggested Questions ── */

.rsc-suggested-questions {
    /* overflow-x:auto forces overflow-y:auto (CSS spec), clipping box-shadows on all sides.
       Fix: extra padding keeps shadows inside the padding-box (not clipped),
       negative margins compensate so visual spacing stays unchanged.
       --_shadow-space is the reserved room; themes with larger shadows can override it. */
    --_shadow-space: var(--rsc-space-12);
    display: flex;
    gap: var(--rsc-space-8);
    overflow-x: auto;
    padding: var(--_shadow-space);
    margin: calc(var(--_shadow-space) * -1 + 1px) calc(var(--_shadow-space) * -1) max(0px, calc(var(--rsc-theme-suggested-questions-margin, var(--rsc-space-12)) - var(--_shadow-space)));
    position: relative;
    z-index: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

.rsc-suggested-questions::-webkit-scrollbar {
    display: none;
}

.rsc-suggested-questions:active {
    cursor: grabbing;
}

.rsc-suggestion-btn {
    background: var(--rsc-theme-btn-suggestion-bg, var(--rsc-color-bg-2));
    border-style: var(--rsc-theme-btn-suggestion-border-style, solid);
    border-width: var(--rsc-theme-btn-suggestion-border-width, 1px);
    border-color: var(--rsc-theme-btn-suggestion-border-color, var(--rsc-color-border));
    color: var(--rsc-theme-btn-suggestion-color, var(--rsc-color-text));
    padding: var(--rsc-theme-btn-suggestion-padding, var(--rsc-space-8) var(--rsc-space-12));
    border-radius: var(--rsc-theme-btn-suggestion-radius, var(--rsc-radius-full));
    box-shadow: var(--rsc-theme-btn-suggestion-shadow, none);
    font-size: var(--rsc-theme-btn-suggestion-font-size, var(--rsc-font-size-sm));
    font-weight: var(--rsc-theme-btn-suggestion-font-weight, normal);
    font-family: var(--rsc-theme-btn-suggestion-font-family, var(--rsc-theme-font-family, inherit));
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard);
}

.rsc-chatbot-popup .rsc-suggestion-btn:hover {
    background: var(--rsc-theme-btn-suggestion-bg-hover, var(--rsc-color-primary));
    color: var(--rsc-theme-btn-suggestion-color-hover, var(--rsc-color-btn-primary-text));
    border-color: var(--rsc-theme-btn-suggestion-border-color-hover, var(--rsc-theme-btn-suggestion-bg-hover, var(--rsc-color-primary)));
    transform: scale(var(--rsc-theme-btn-suggestion-hover-scale, 1));
}

.rsc-chatbot-popup .rsc-suggestion-btn:active {
    border-style: var(--rsc-theme-btn-suggestion-border-style-active, var(--rsc-theme-btn-suggestion-border-style, solid));
    box-shadow: var(--rsc-theme-btn-suggestion-active-shadow, var(--rsc-theme-btn-active-shadow));
    transform: scale(var(--rsc-theme-btn-suggestion-active-scale, var(--rsc-theme-btn-active-scale, 1))) translate(var(--rsc-theme-btn-suggestion-active-offset, var(--rsc-theme-btn-active-offset, 0)), var(--rsc-theme-btn-suggestion-active-offset, var(--rsc-theme-btn-active-offset, 0)));
}

/* ── Quick Replies ── */

.rsc-quick-replies {
    list-style: disc;
    margin: -0.5em 0 36px 0;
    padding-left: calc(var(--rsc-theme-avatar-size, 32px) + var(--rsc-space-8) + var(--rsc-space-16));
    animation: rscMessageSlideIn 0.3s ease-out;
}

.rsc-quick-replies li {
    margin-bottom: var(--rsc-space-4, 4px);
}

.rsc-quick-reply-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--rsc-theme-chat-link-font-color, inherit);
    text-decoration: var(--rsc-theme-link-decoration, none);
    font-size: var(--rsc-font-size-md);
    font-family: var(--rsc-theme-font-family, inherit);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.rsc-quick-reply-button:hover {
    color: var(--rsc-theme-chat-link-hover-font-color, var(--rsc-theme-chat-link-font-color, inherit));
    text-decoration: underline;
}

/* ── Input Wrapper ── */

.rsc-input-wrapper {
    display: flex;
    gap: var(--rsc-space-8);
    align-items: center;
    /* Stacking: input elements (z:2) render above suggestion shadows (z:1),
       preventing suggestion shadows from covering the actual input/buttons. */
    position: relative;
    z-index: 2;
}

.rsc-input-with-icon-container {
    position: relative;
    flex: 1;
    display: flex;
}

/* ── Message Input (high specificity to override WP themes) ── */

.rsc-chatbot-popup .rsc-input-wrapper input#rscMessageInput,
.rsc-chatbot-popup .rsc-input-wrapper input#rscMessageInput[type="text"] {
    /* Reset properties commonly overridden by WP themes */
    position: relative !important;
    display: inline-block !important;
    width: 0 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    cursor: text !important;
    box-sizing: border-box !important;

    /* Plugin-specific styles */
    flex: 1;
    height: var(--rsc-theme-btn-primary-height, 40px) !important;
    padding: 0 var(--rsc-space-8) !important;
    border-style: var(--rsc-theme-input-border-style, solid) !important;
    border-width: var(--rsc-theme-input-border-width, 1px) !important;
    border-color: var(--rsc-theme-input-border-color, var(--rsc-color-border)) !important;
    border-radius: var(--rsc-theme-input-radius, var(--rsc-radius-full)) !important;
    font-family: var(--rsc-theme-input-font-family, var(--rsc-theme-font-family, inherit)) !important;
    font-size: var(--rsc-theme-input-font-size, var(--rsc-font-size-md)) !important;
    font-weight: var(--rsc-theme-input-font-weight, normal) !important;
    line-height: var(--rsc-theme-line-height, var(--rsc-line-height-normal)) !important;
    background-color: var(--rsc-theme-input-bg, var(--rsc-color-background)) !important;
    color: var(--rsc-theme-input-color, var(--rsc-color-text)) !important;
    caret-color: var(--rsc-theme-input-caret-color, currentColor) !important;
    box-shadow: var(--rsc-theme-input-shadow, none) !important;
    outline: none !important;
    transition: border-color var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard), box-shadow var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard), transform var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard) !important;
}

.rsc-chatbot-popup .rsc-input-wrapper input#rscMessageInput:focus,
.rsc-chatbot-popup .rsc-input-wrapper input#rscMessageInput[type="text"]:focus {
    border-color: var(--rsc-theme-input-border-color-focus, var(--rsc-color-primary)) !important;
    box-shadow: var(--rsc-theme-input-shadow-focus, 0 0 0 3px var(--rsc-color-focus-ring)) !important;
    transform: translate(var(--rsc-theme-input-focus-offset, 0), var(--rsc-theme-input-focus-offset, 0)) !important;
}

.rsc-chatbot-popup .rsc-input-wrapper input#rscMessageInput::placeholder {
    color: var(--rsc-theme-input-placeholder-color, #a7a9a9);
}

/* ── Send Button (Primary) ── */

.rsc-chatbot-popup .rsc-send-btn {
    background: var(--rsc-theme-btn-primary-bg, var(--rsc-send-btn-bg, #32b8c6));
    color: var(--rsc-theme-btn-primary-color, var(--rsc-send-btn-color, #13343b));
    border-style: var(--rsc-theme-btn-primary-border-style, none);
    border-width: var(--rsc-theme-btn-primary-border-width, 0);
    border-color: var(--rsc-theme-btn-primary-border-color, transparent);
    border-radius: var(--rsc-theme-btn-primary-radius, 50%);
    box-shadow: var(--rsc-theme-btn-primary-shadow, none);
    padding: 0;
    width: var(--rsc-theme-btn-primary-width, 40px);
    height: var(--rsc-theme-btn-primary-height, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard);
}

.rsc-chatbot-popup .rsc-send-btn:hover {
    background: var(--rsc-theme-btn-primary-bg-hover, var(--rsc-send-btn-bg-hover, var(--rsc-color-primary-hover)));
    color: var(--rsc-send-btn-color-hover, #13343b);
    transform: scale(var(--rsc-theme-btn-primary-hover-scale, var(--rsc-theme-btn-hover-scale, 1)));
}

.rsc-chatbot-popup .rsc-send-btn:active {
    border-style: var(--rsc-theme-btn-primary-border-style-active, var(--rsc-theme-btn-primary-border-style, none));
    box-shadow: var(--rsc-theme-btn-primary-active-shadow, var(--rsc-theme-btn-active-shadow));
    transform: var(--rsc-theme-btn-primary-transform-active, scale(var(--rsc-theme-btn-primary-active-scale, var(--rsc-theme-btn-active-scale, 1)))) translate(var(--rsc-theme-btn-primary-active-offset, var(--rsc-theme-btn-active-offset, 0)), var(--rsc-theme-btn-primary-active-offset, var(--rsc-theme-btn-active-offset, 0)));
}

.rsc-chatbot-popup .rsc-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Reset Button (Independent) ── */

.rsc-chatbot-popup .rsc-reset-btn {
    background: var(--rsc-theme-btn-reset-bg, transparent);
    color: var(--rsc-theme-btn-reset-color, var(--rsc-color-slate-500));
    border-style: var(--rsc-theme-btn-reset-border-style, none);
    border-width: var(--rsc-theme-btn-reset-border-width, 0);
    border-color: var(--rsc-theme-btn-reset-border-color, transparent);
    border-radius: var(--rsc-theme-btn-reset-radius, 50%);
    box-shadow: var(--rsc-theme-btn-reset-shadow, none);
}

.rsc-chatbot-popup .rsc-reset-btn:hover {
    background: var(--rsc-theme-btn-reset-bg-hover, var(--rsc-color-error));
    color: var(--rsc-theme-btn-reset-color-hover, var(--rsc-color-white));
    transform: scale(var(--rsc-theme-btn-reset-hover-scale, var(--rsc-theme-btn-hover-scale, 1)));
}

.rsc-chatbot-popup .rsc-reset-btn:active {
    border-style: var(--rsc-theme-btn-reset-border-style-active, var(--rsc-theme-btn-reset-border-style, none));
    box-shadow: var(--rsc-theme-btn-reset-active-shadow, var(--rsc-theme-btn-active-shadow));
    transform: scale(var(--rsc-theme-btn-reset-active-scale, var(--rsc-theme-btn-active-scale, 1))) translate(var(--rsc-theme-btn-reset-active-offset, var(--rsc-theme-btn-active-offset, 0)), var(--rsc-theme-btn-reset-active-offset, var(--rsc-theme-btn-active-offset, 0)));
}

/* ── Scroll to Bottom Button ── */

.rsc-scroll-to-bottom-btn {
    position: absolute;
    bottom: var(--rsc-theme-scroll-btn-bottom, var(--rsc-space-16));
    /* auto-offset: gap from the scrollbar edge */
    right: calc(var(--rsc-theme-scrollbar-width, 8px) + var(--rsc-theme-scroll-btn-right, 8px));
    z-index: 10;
    background: var(--rsc-theme-btn-scroll-bg, var(--rsc-color-surface));
    color: var(--rsc-theme-btn-scroll-color, var(--rsc-color-text-secondary));
    border-style: var(--rsc-theme-btn-scroll-border-style, solid);
    border-width: var(--rsc-theme-btn-scroll-border-width, 1px);
    border-color: var(--rsc-theme-btn-scroll-border-color, var(--rsc-color-border));
    box-shadow: var(--rsc-theme-btn-scroll-shadow, var(--rsc-shadow-sm));
    border-radius: var(--rsc-theme-btn-scroll-radius, 50%);
    width: var(--rsc-theme-scroll-btn-width, 36px);
    height: var(--rsc-theme-scroll-btn-height, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--rsc-theme-animation-duration, var(--rsc-duration-fast)) var(--rsc-ease-standard);
    opacity: 1;
}

.rsc-chatbot-popup .rsc-scroll-to-bottom-btn:hover {
    background: var(--rsc-theme-btn-scroll-bg-hover, var(--rsc-color-primary));
    color: var(--rsc-theme-btn-scroll-color-hover, var(--rsc-color-btn-primary-text));
    transform: scale(var(--rsc-theme-btn-scroll-hover-scale, 1));
}

.rsc-chatbot-popup .rsc-scroll-to-bottom-btn:active {
    border-style: var(--rsc-theme-btn-scroll-border-style-active, var(--rsc-theme-btn-scroll-border-style, none));
    box-shadow: var(--rsc-theme-btn-scroll-active-shadow, var(--rsc-theme-btn-active-shadow));
    transform: scale(var(--rsc-theme-btn-scroll-active-scale, var(--rsc-theme-btn-active-scale, 1))) translate(var(--rsc-theme-btn-scroll-active-offset, var(--rsc-theme-btn-active-offset, 0)), var(--rsc-theme-btn-scroll-active-offset, var(--rsc-theme-btn-active-offset, 0)));
}

.rsc-scroll-to-bottom-btn.rsc-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* ── Avatar Images ── */

.rsc-avatar-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: var(--rsc-theme-avatar-radius, 50%);
    padding: var(--rsc-theme-avatar-img-padding, 2px);
}

.rsc-chatbot-avatar .rsc-avatar-img,
#rscHeaderAvatar .rsc-avatar-img {
    max-width: 28px;
    max-height: 28px;
    width: 28px;
    height: 28px;
    border-radius: var(--rsc-theme-avatar-radius, 50%);
}

.rsc-message-avatar .rsc-avatar-img {
    width: var(--rsc-theme-avatar-size, 32px);
    height: var(--rsc-theme-avatar-size, 32px);
    border-radius: var(--rsc-theme-avatar-radius, 50%);
}

/* Default SVG avatar icon */
.rsc-message-avatar > svg {
    width: 60%;
    height: 60%;
}

.rsc-chatbot-avatar > svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* ── Link Styling ── */

.rsc-chatbot-popup .rsc-message-content .rsc-message-bubble a {
    color: var(--rsc-theme-chat-link-font-color, inherit);
    text-decoration: var(--rsc-theme-link-decoration, none);
}

.rsc-chatbot-popup .rsc-message-content .rsc-message-bubble a:hover {
    color: var(--rsc-theme-chat-link-hover-font-color, var(--rsc-theme-chat-link-font-color, inherit));
}

/* ── Animations ── */

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

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

@keyframes rscPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(var(--rsc-theme-retry-pulse-scale, 1.15)); }
}

@keyframes rscFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rscSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rscSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}