/**
 * Pasokhgar AI — Frontend Widget stylesheet (v2.5).
 *
 * Features:
 *   - Vazirmatn font (loaded from Google Fonts CDN) for beautiful Persian text
 *   - Modern, polished design with smooth animations
 *   - RTL-aware, mobile-friendly, accessible (ARIA, keyboard nav)
 *   - Dark mode support via `prefers-color-scheme: dark`
 *   - Safe-area insets for iPhone notch / home indicator
 *   - Adjusts for WordPress admin bar height (32px desktop / 46px mobile)
 *   - Auto-direction per message (using `dir="auto"` set via JS)
 *   - Product card rendering (when WooCommerce tools return product data)
 *   - Mobile breakpoints at 600px and 768px (tablet)
 *
 * Layout:
 *   .uaic-widget               outer container (holds launcher + panel)
 *     .uaic-launcher            floating button (with notification dot)
 *     .uaic-panel               chat panel (hidden until .uaic-panel-open)
 *       .uaic-header             top bar (gradient + avatar + title)
 *         .uaic-title            site name
 *         .uaic-close            × button
 *       .uaic-messages           scrollable message list
 *         .uaic-msg               single message bubble
 *         .uaic-msg-user          user message
 *         .uaic-msg-assistant     AI message
 *         .uaic-msg-error         error bubble (with optional Retry button)
 *         .uaic-product-card      product card (image, name, price, link)
 *         .uaic-product-grid      grid of product cards
 *       .uaic-input-row         textarea + voice + send buttons
 *         .uaic-voice-btn         voice input (Web Speech API)
 *         .uaic-send              send button
 *         .uaic-char-counter      live character counter
 *       .uaic-error             inline error toast (hidden by default)
 */

/* ============================================================
   Vazirmatn font — SELF-HOSTED (v3.1.0)
   The v2.x stylesheet @import-ed Google Fonts. On Iranian networks
   fonts.googleapis.com is slow or unreachable: the render-blocking
   @import stalled the page's first paint (and any theme that also
   imports fonts multiplied the wait). The font is now BUNDLED with
   the plugin (SIL Open Font License) and loaded with font-display:
   swap — zero external requests, zero render blocking, identical look.
   ============================================================ */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
    /* Persian/Arabic subset (also covers U+200C ZWNJ). */
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-0889, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/vazirmatn-latin.woff2') format('woff2');
    /* Latin subset (URLs, emails, English words in answers). */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.uaic-widget {
    /* Light mode defaults (overridden by dark mode media query). */
    --uaic-color: #6366F1;
    --uaic-color-dark: #4F46E5;
    --uaic-color-light: #818CF8;
    --uaic-color-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
    --uaic-bg: #ffffff;
    --uaic-bg-elevated: #ffffff;
    --uaic-bg-muted: #f9fafb;
    --uaic-text: #111827;
    --uaic-text-secondary: #4b5563;
    --uaic-muted: #6b7280;
    --uaic-border: #e5e7eb;
    --uaic-border-light: #f3f4f6;
    --uaic-bubble-user-bg: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    --uaic-bubble-user-fg: #ffffff;
    --uaic-bubble-ai-bg: #f3f4f6;
    --uaic-bubble-ai-fg: #1f2937;
    --uaic-error-bg: #fee2e2;
    --uaic-error-fg: #991b1b;
    --uaic-success: #10B981;
    --uaic-warning: #F59E0B;
    /* v2.16.0 — scheme-aware chrome (operator notices, operator bubbles,
     * copy buttons, chip hover). Previously hardcoded light-only colors,
     * which broke on dark backgrounds. */
    --uaic-notice-bg: #eef2ff;
    --uaic-notice-fg: #3730a3;
    --uaic-notice-border: #c7d2fe;
    --uaic-operator-bg: #d1fae5;
    --uaic-operator-fg: #065f46;
    --uaic-operator-border: #a7f3d0;
    --uaic-copy-bg: rgba(255, 255, 255, 0.92);
    --uaic-copy-fg: #6b7280;
    --uaic-copy-border: rgba(0, 0, 0, 0.08);
    --uaic-copy-ok-bg: #ecfdf5;
    --uaic-copy-ok-fg: #059669;
    --uaic-copy-ok-border: #a7f3d0;
    --uaic-chip-hover-bg: rgba(99, 102, 241, 0.12);
    --uaic-dot-ring: rgba(255, 255, 255, 0.85);
    --uaic-radius: 16px;
    --uaic-radius-sm: 10px;
    --uaic-radius-xs: 6px;
    --uaic-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    --uaic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --uaic-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
    --uaic-panel-w: 400px;
    --uaic-panel-h: 600px;
    --uaic-launcher-size: 62px;
    --uaic-gap: 8px;
    --uaic-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* WP admin bar heights — adjusted via media query. */
    --uaic-admin-bar-h: 0px;

    font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", sans-serif;
    color: var(--uaic-text);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Native form controls, scrollbars, and ::selection inside the widget
     * follow the WIDGET's scheme — never the site's dark-mode overrides. */
    color-scheme: light;
}

/* Account for the WP admin bar on front-end views for logged-in admins. */
body.admin-bar .uaic-widget {
    --uaic-admin-bar-h: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .uaic-widget {
        --uaic-admin-bar-h: 46px;
    }
}

.uaic-widget *,
.uaic-widget *::before,
.uaic-widget *::after {
    box-sizing: border-box;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
    .uaic-widget {
        --uaic-bg: #1a1b26;
        --uaic-bg-elevated: #24253b;
        --uaic-bg-muted: #1e1f2e;
        --uaic-text: #e5e7eb;
        --uaic-text-secondary: #9ca3af;
        --uaic-muted: #9ca3af;
        --uaic-border: #2d2e42;
        --uaic-border-light: #24253b;
        --uaic-bubble-ai-bg: #24253b;
        --uaic-bubble-ai-fg: #e5e7eb;
        --uaic-error-bg: #7f1d1d;
        --uaic-error-fg: #fecaca;
        --uaic-notice-bg: #2d2e52;
        --uaic-notice-fg: #c7d2fe;
        --uaic-notice-border: #43446a;
        --uaic-operator-bg: #14352c;
        --uaic-operator-fg: #a7f3d0;
        --uaic-operator-border: #1f5c49;
        --uaic-copy-bg: rgba(36, 37, 59, 0.92);
        --uaic-copy-fg: #9ca3af;
        --uaic-copy-border: rgba(255, 255, 255, 0.12);
        --uaic-copy-ok-bg: #14352c;
        --uaic-copy-ok-fg: #34d399;
        --uaic-copy-ok-border: #1f5c49;
        --uaic-chip-hover-bg: rgba(129, 140, 248, 0.18);
        --uaic-dot-ring: rgba(26, 27, 38, 0.85);
        --uaic-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        --uaic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --uaic-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
}

/* ============================================================
   v2.16.0 — FORCED color schemes (.uaic-scheme-dark / .uaic-scheme-light)

   The media query above follows the VISITOR'S OS. A dark-themed SITE
   with a light-mode OS visitor still got a light widget (and vice
   versa) — the classic "ظاهر ویجت توی دارک تم سایت به مشکل میخوره".

   Widget::scheme_class() bakes the admin's explicit choice into the
   server-rendered markup, and widget.js applyColorScheme() resolves
   "auto" by measuring the page background. Both add one of these
   classes; at (0,2,0) specificity they override the media query above
   regardless of the OS setting.
   ============================================================ */
.uaic-widget.uaic-scheme-dark {
    --uaic-bg: #1a1b26;
    --uaic-bg-elevated: #24253b;
    --uaic-bg-muted: #1e1f2e;
    --uaic-text: #e5e7eb;
    --uaic-text-secondary: #9ca3af;
    --uaic-muted: #9ca3af;
    --uaic-border: #2d2e42;
    --uaic-border-light: #24253b;
    --uaic-bubble-ai-bg: #24253b;
    --uaic-bubble-ai-fg: #e5e7eb;
    --uaic-error-bg: #7f1d1d;
    --uaic-error-fg: #fecaca;
    --uaic-notice-bg: #2d2e52;
    --uaic-notice-fg: #c7d2fe;
    --uaic-notice-border: #43446a;
    --uaic-operator-bg: #14352c;
    --uaic-operator-fg: #a7f3d0;
    --uaic-operator-border: #1f5c49;
    --uaic-copy-bg: rgba(36, 37, 59, 0.92);
    --uaic-copy-fg: #9ca3af;
    --uaic-copy-border: rgba(255, 255, 255, 0.12);
    --uaic-copy-ok-bg: #14352c;
    --uaic-copy-ok-fg: #34d399;
    --uaic-copy-ok-border: #1f5c49;
    --uaic-chip-hover-bg: rgba(129, 140, 248, 0.18);
    --uaic-dot-ring: rgba(26, 27, 38, 0.85);
    --uaic-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --uaic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --uaic-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

.uaic-widget.uaic-scheme-light {
    --uaic-bg: #ffffff;
    --uaic-bg-elevated: #ffffff;
    --uaic-bg-muted: #f9fafb;
    --uaic-text: #111827;
    --uaic-text-secondary: #4b5563;
    --uaic-muted: #6b7280;
    --uaic-border: #e5e7eb;
    --uaic-border-light: #f3f4f6;
    --uaic-bubble-ai-bg: #f3f4f6;
    --uaic-bubble-ai-fg: #1f2937;
    --uaic-error-bg: #fee2e2;
    --uaic-error-fg: #991b1b;
    --uaic-notice-bg: #eef2ff;
    --uaic-notice-fg: #3730a3;
    --uaic-notice-border: #c7d2fe;
    --uaic-operator-bg: #d1fae5;
    --uaic-operator-fg: #065f46;
    --uaic-operator-border: #a7f3d0;
    --uaic-copy-bg: rgba(255, 255, 255, 0.92);
    --uaic-copy-fg: #6b7280;
    --uaic-copy-border: rgba(0, 0, 0, 0.08);
    --uaic-copy-ok-bg: #ecfdf5;
    --uaic-copy-ok-fg: #059669;
    --uaic-copy-ok-border: #a7f3d0;
    --uaic-chip-hover-bg: rgba(99, 102, 241, 0.12);
    --uaic-dot-ring: rgba(255, 255, 255, 0.85);
    --uaic-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    --uaic-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --uaic-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
    color-scheme: light;
}

/* ============================================================
   Launcher button
   ============================================================ */
.uaic-launcher {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: var(--uaic-launcher-size);
    height: var(--uaic-launcher-size);
    border-radius: 50%;
    background: var(--uaic-color-gradient);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.5);
    transition: transform var(--uaic-transition), box-shadow var(--uaic-transition);
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: uaic-launcher-pulse 3s ease-in-out infinite;
}

.uaic-launcher:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.55), 0 0 0 8px rgba(99, 102, 241, 0.1);
}

.uaic-launcher:active {
    transform: translateY(-1px) scale(1.02);
}

.uaic-launcher:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.5);
    outline-offset: 3px;
}

@keyframes uaic-launcher-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45), 0 0 0 12px rgba(99, 102, 241, 0); }
}

.uaic-pos-bottom_left .uaic-launcher { left: calc(24px + env(safe-area-inset-left, 0px)); }
.uaic-pos-bottom_right .uaic-launcher { right: calc(24px + env(safe-area-inset-right, 0px)); }

/* Launcher icon transition */
.uaic-launcher-icon svg {
    transition: transform var(--uaic-transition);
}
.uaic-panel-open ~ .uaic-launcher .uaic-launcher-icon svg,
.uaic-widget:has(.uaic-panel-open) .uaic-launcher-icon svg {
    transform: rotate(90deg);
}

/* ============================================================
   Chat panel
   ============================================================ */
.uaic-panel {
    position: fixed;
    bottom: calc(100px + var(--uaic-admin-bar-h) + env(safe-area-inset-bottom, 0px));
    width: var(--uaic-panel-w);
    max-width: calc(100vw - 32px);
    height: var(--uaic-panel-h);
    max-height: calc(100vh - 140px - var(--uaic-admin-bar-h));
    background: var(--uaic-bg);
    border-radius: var(--uaic-radius);
    box-shadow: var(--uaic-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2147483001;
    border: 1px solid var(--uaic-border);
    animation: uaic-panel-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.uaic-pos-bottom_left .uaic-panel { left: calc(24px + env(safe-area-inset-left, 0px)); }
.uaic-pos-bottom_right .uaic-panel { right: calc(24px + env(safe-area-inset-right, 0px)); }

.uaic-panel[hidden] {
    display: none;
}

@keyframes uaic-panel-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   Header (with gradient background + avatar)
   ============================================================ */
.uaic-header {
    background: var(--uaic-color-gradient);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
}

.uaic-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.uaic-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}

.uaic-header-avatar svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

/* Optional logo (rendered instead of the default icon when a logo
 * is uploaded in Settings → Widget). The widget works fine without
 * one — this class simply won't exist in the markup. */
.uaic-header-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.uaic-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uaic-header-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    opacity: 0.85;
    font-weight: 500;
}

.uaic-header-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
    animation: uaic-status-blink 2s ease-in-out infinite;
}

@keyframes uaic-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.uaic-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--uaic-transition), transform var(--uaic-transition);
    flex-shrink: 0;
}

.uaic-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.uaic-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* ============================================================
   Messages list
   ============================================================ */
.uaic-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    background: var(--uaic-bg);
}

/* Custom scrollbar */
.uaic-messages::-webkit-scrollbar {
    width: 6px;
}
.uaic-messages::-webkit-scrollbar-track {
    background: transparent;
}
.uaic-messages::-webkit-scrollbar-thumb {
    background: var(--uaic-border);
    border-radius: 3px;
}
.uaic-messages::-webkit-scrollbar-thumb:hover {
    background: var(--uaic-muted);
}

/* ============================================================
   Message bubbles
   ============================================================ */
.uaic-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    word-break: break-word;
    animation: uaic-msg-in 0.3s ease-out;
    white-space: pre-wrap;
}

@keyframes uaic-msg-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uaic-msg-user {
    background: var(--uaic-bubble-user-bg);
    color: var(--uaic-bubble-user-fg);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.uaic-msg-assistant {
    background: var(--uaic-bubble-ai-bg);
    color: var(--uaic-bubble-ai-fg);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--uaic-shadow-sm);
}

.uaic-msg-error {
    background: var(--uaic-error-bg);
    color: var(--uaic-error-fg);
    align-self: center;
    text-align: center;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ============================================================
   Copy button on every message (v2.10.0)
   Each content bubble (visitor / assistant / operator) carries a
   small copy-to-clipboard icon in its top corner. Hidden until
   hover on pointer devices; dimmed-but-visible on touch (where
   hover is unreliable). The corner facing the chat center is
   always used, so the button never collides with the panel edge.
   ============================================================ */
.uaic-msg {
    position: relative;
}

.uaic-copy-btn {
    position: absolute;
    top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--uaic-copy-border, rgba(0, 0, 0, 0.08));
    border-radius: 6px;
    background: var(--uaic-copy-bg, rgba(255, 255, 255, 0.92));
    color: var(--uaic-copy-fg, #6b7280);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    z-index: 3;
    -webkit-appearance: none;
    appearance: none;
}

.uaic-msg:hover .uaic-copy-btn,
.uaic-copy-btn:focus-visible {
    opacity: 1;
    visibility: visible;
}

.uaic-copy-btn:hover {
    color: var(--uaic-color, #6366f1);
    border-color: var(--uaic-color-light, #c7d2fe);
}

.uaic-copy-btn:active {
    transform: scale(0.92);
}

/* Resting icon vs. copied-confirmation icon. */
.uaic-copy-btn .uaic-copy-icon-check {
    display: none;
}

.uaic-copy-btn.uaic-copy-btn-copied {
    opacity: 1;
    visibility: visible;
    color: var(--uaic-copy-ok-fg, #059669);
    border-color: var(--uaic-copy-ok-border, #a7f3d0);
    background: var(--uaic-copy-ok-bg, #ecfdf5);
}

.uaic-copy-btn.uaic-copy-btn-copied .uaic-copy-icon {
    display: none;
}

.uaic-copy-btn.uaic-copy-btn-copied .uaic-copy-icon-check {
    display: inline-block;
}

/* Corner placement — always the corner facing the chat center:
   assistant + operator bubbles hug the start edge, visitor
   bubbles hug the end edge. Mirrored for RTL. */
.uaic-msg-assistant .uaic-copy-btn,
.uaic-msg-operator .uaic-copy-btn {
    right: 4px;
    left: auto;
}

.uaic-msg-user .uaic-copy-btn {
    left: 4px;
    right: auto;
}

[dir="rtl"] .uaic-msg-assistant .uaic-copy-btn,
[dir="rtl"] .uaic-msg-operator .uaic-copy-btn {
    right: auto;
    left: 4px;
}

[dir="rtl"] .uaic-msg-user .uaic-copy-btn {
    left: auto;
    right: 4px;
}

/* Touch devices: no reliable hover — keep the button visible but
   subtle so one tap copies the message. */
@media (hover: none) {
    .uaic-copy-btn {
        opacity: 0.45;
        visibility: visible;
    }
}

/* ============================================================
   Markdown rendering (v2.8.9)
   Assistant answers arrive as markdown — headings, bold, lists,
   tables, links, code. .uaic-md is the root rendered by
   widget.js's renderMarkdown() (DOM-built, never innerHTML).

   NOTE: the bubble (.uaic-msg) uses white-space: pre-wrap; the
   markdown root resets to normal because line breaks are explicit
   <br> elements — otherwise blocks would gain phantom blank lines.
   ============================================================ */
.uaic-md {
    white-space: normal;
}

.uaic-md-p {
    margin: 0;
    text-align: start;
}

.uaic-md-p + .uaic-md-p,
.uaic-md-p + .uaic-md-ul,
.uaic-md-p + .uaic-md-ol,
.uaic-md-p + .uaic-md-h,
.uaic-md-p + .uaic-md-pre,
.uaic-md-p + .uaic-md-quote,
.uaic-md-p + .uaic-md-table,
.uaic-md-ul + .uaic-md-p,
.uaic-md-ol + .uaic-md-p,
.uaic-md-h + .uaic-md-p,
.uaic-md-pre + .uaic-md-p,
.uaic-md-quote + .uaic-md-p,
.uaic-md-table + .uaic-md-p,
.uaic-md-ul + .uaic-md-ul,
.uaic-md-ol + .uaic-md-ol,
.uaic-md-h + .uaic-md-ul,
.uaic-md-h + .uaic-md-ol {
    margin-top: 8px;
}

/* Headings (rendered as divs, scaled for the compact bubble). */
.uaic-md-h {
    font-weight: 700;
    line-height: 1.4;
    margin-top: 10px;
    margin-bottom: 2px;
}
.uaic-md-h:first-child {
    margin-top: 0;
}
.uaic-md-h1 { font-size: 16px; }
.uaic-md-h2 { font-size: 15px; }
.uaic-md-h3 { font-size: 14px; }
.uaic-md-h4 { font-size: 13.5px; }

/* Lists — padding on the logical side keeps RTL correct.
   Left-aligned text (start), never justified (long Persian lines
   would otherwise stretch ugly gaps). */
.uaic-md-ul,
.uaic-md-ol {
    margin: 4px 0;
    padding-inline-start: 20px;
    text-align: start;
}
.uaic-md-ul { list-style: disc; }
.uaic-md-ol { list-style: decimal; }
.uaic-md-ul li,
.uaic-md-ol li {
    margin: 3px 0;
    padding-inline-start: 2px;
    line-height: 1.55;
}

/* Blockquote. */
.uaic-md-quote {
    margin: 6px 0;
    padding: 6px 12px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--uaic-color-light, #818CF8);
    background: rgba(99, 102, 241, 0.07);
    border-radius: var(--uaic-radius-xs, 6px);
    color: var(--uaic-text-secondary);
    font-size: 13px;
}
.uaic-md-quote div {
    margin: 2px 0;
}

/* Inline code + fenced code blocks. */
.uaic-md-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    background: rgba(127, 127, 127, 0.15);
    padding: 1px 5px;
    border-radius: 4px;
    unicode-bidi: isolate;
}
.uaic-md-pre {
    direction: ltr;
    text-align: left;
    background: var(--uaic-bg-muted, #f9fafb);
    border: 1px solid var(--uaic-border, #e5e7eb);
    border-radius: var(--uaic-radius-sm, 10px);
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    white-space: pre;
    max-width: 100%;
}
.uaic-md-pre code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--uaic-text);
}

/* Links — always visible, theme-tinted, safe (scheme-checked in JS). */
.uaic-md .uaic-md-link,
.uaic-md-intro .uaic-md-link {
    color: var(--uaic-color-dark, #4F46E5);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
    font-weight: 500;
}
.uaic-msg-user .uaic-md-link {
    color: inherit;
}

/* Horizontal rule. */
.uaic-md hr.uaic-md-hr,
.uaic-md-hr {
    border: none;
    border-top: 1px solid var(--uaic-border, #e5e7eb);
    margin: 10px 0;
}

/* GFM tables (product comparisons etc.) — compact, scrollable. */
.uaic-md-table {
    display: block;
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12.5px;
    overflow-x: auto;
    white-space: normal;
}
.uaic-md-table th,
.uaic-md-table td {
    border: 1px solid var(--uaic-border, #e5e7eb);
    padding: 5px 8px;
    text-align: start;
    vertical-align: top;
}
.uaic-md-table th {
    background: rgba(99, 102, 241, 0.08);
    font-weight: 700;
}
.uaic-md-table tr:nth-child(even) td {
    background: rgba(127, 127, 127, 0.05);
}

/* Intro text shown above product card stacks. */
.uaic-md-intro {
    margin-bottom: 8px;
}

/* Strong/em/del inherit the bubble's text color (and stay readable
   on the user-bubble gradient). */
.uaic-md-strong { font-weight: 700; }
.uaic-md-em { font-style: italic; }
.uaic-md-del { opacity: 0.6; }

/* ============================================================
   Product cards (shown inside assistant messages)
   v2.8.7: cards stack VERTICALLY (one per row, full width) and
   each card enters with its own staggered animation — set as
   inline `animation-delay` by widget.js (index * 130ms).
   ============================================================ */
.uaic-product-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
}

/* Card entrance: slide-up + fade. `both` keeps the card invisible
   during its delay slot so cards appear ONE BY ONE. */
@keyframes uaic-card-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.uaic-product-card {
    background: var(--uaic-bg-elevated);
    border: 1px solid var(--uaic-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--uaic-transition), box-shadow var(--uaic-transition), border-color var(--uaic-transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    /* v2.8.7: every card is a full-width HORIZONTAL row — image at the
       inline-start edge, body filling the rest. RTL-safe via logical
       properties below. */
    flex-direction: row;
    align-items: stretch;
    animation: uaic-card-in 0.42s cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

/* Respect users who disable animations: cards just appear. */
@media (prefers-reduced-motion: reduce) {
    .uaic-product-card {
        animation: none;
        transition: none;
    }
}

.uaic-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--uaic-color-light);
}

.uaic-product-card:active {
    transform: translateY(0);
}

.uaic-product-card-image,
.uaic-product-card-placeholder {
    width: 92px;
    aspect-ratio: 1;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--uaic-bg-muted);
    /* Logical border: sits between the image and the body in BOTH
       LTR (image left) and RTL (image right) layouts. */
    border-bottom: none;
    border-inline-end: 1px solid var(--uaic-border-light);
}

.uaic-product-card-placeholder {
    background: linear-gradient(135deg, var(--uaic-bg-muted), var(--uaic-border-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--uaic-muted);
}

.uaic-product-card-body {
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Badge row (sale / stock) — sits above the name. */
.uaic-product-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.uaic-product-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--uaic-text);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Short description — clamped to keep cards compact + uniform. */
.uaic-product-card-desc {
    font-size: 11px;
    color: var(--uaic-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.uaic-product-card-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--uaic-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.uaic-product-card-price del {
    color: var(--uaic-muted);
    font-size: 11px;
    font-weight: 400;
    text-decoration: line-through;
}

/* "View product" hint — communicates that the card is clickable. */
.uaic-product-card-cta {
    font-size: 11px;
    font-weight: 600;
    color: var(--uaic-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 2px;
}

.uaic-product-card-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: var(--uaic-success);
}

.uaic-product-card-badge.out-of-stock {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.uaic-product-card-badge.sale {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

/* v2.14.0 — content-type chip on dynamic content cards (JetEngine CPT
   items, e.g. "ملک"): neutral tint so it reads as a category, not a
   status (green = stock, amber = sale, red = out). */
.uaic-product-card-badge.type {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

/* Back-compat alias: v2.8.6 JS added `uaic-product-card-single` for the
   1-product case. Since v2.8.7 every card is full-width + horizontal,
   the class is redundant — kept (as a no-op selector) so a page cached
   with the old JS still renders correctly with this stylesheet. */

/* ============================================================
   Typing indicator
   ============================================================ */
.uaic-typing {
    align-self: flex-start;
    background: var(--uaic-bubble-ai-bg);
    padding: 12px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    display: flex;
    gap: 4px;
    box-shadow: var(--uaic-shadow-sm);
}

.uaic-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--uaic-muted);
    animation: uaic-typing-bounce 1.4s ease-in-out infinite;
}

.uaic-typing span:nth-child(1) { animation-delay: -0.32s; }
.uaic-typing span:nth-child(2) { animation-delay: -0.16s; }

@keyframes uaic-typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================================
   Retry button (in error messages)
   ============================================================ */
.uaic-retry {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: inherit;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 6px;
    transition: background var(--uaic-transition);
    font-family: inherit;
}

.uaic-retry:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   Input row (textarea + voice + send)
   ============================================================ */
.uaic-input-row {
    padding: 12px 16px;
    border-top: 1px solid var(--uaic-border);
    background: var(--uaic-bg-elevated);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

.uaic-input-row > .uaic-input-row-inner {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 1;
    background: var(--uaic-bg-muted);
    border: 1px solid var(--uaic-border);
    border-radius: 20px;
    padding: 4px 4px 4px 14px;
    transition: border-color var(--uaic-transition), box-shadow var(--uaic-transition);
}

.uaic-input-row > .uaic-input-row-inner:focus-within {
    border-color: var(--uaic-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.uaic-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--uaic-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    /* v3.4.2 — explicit ONE-LINE height. Themes commonly ship global
       textarea rules (height / min-height, e.g. `textarea { height:
       120px }` or !important equivalents) that ignored rows="1" and
       inflated the chat box into a tall multi-line box. An explicit
       height declaration here beats low-specificity theme rules; the
       !important firewall below (same value) additionally beats
       high-specificity / !importanted theme rules. The JS auto-grow
       writes inline !important heights that override BOTH while the
       visitor types (capped by max-height). */
    height: 36px;
    max-height: 120px;
    min-height: 36px;
    padding: 6px 0;
}

.uaic-input::placeholder {
    color: var(--uaic-muted);
}

.uaic-send {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--uaic-color-gradient);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--uaic-transition), opacity var(--uaic-transition);
}

.uaic-send:hover:not(:disabled) {
    transform: scale(1.08);
    opacity: 0.9;
}

.uaic-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.uaic-send:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.4);
    outline-offset: 2px;
}

/* ---- Voice input button ---- */
.uaic-voice-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--uaic-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--uaic-transition), color var(--uaic-transition);
    margin-inline-end: 4px;
}

.uaic-voice-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--uaic-color);
}

.uaic-voice-btn.is-listening {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    animation: uaic-pulse 1.2s ease-in-out infinite;
}

.uaic-voice-btn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.4);
    outline-offset: 2px;
}

@keyframes uaic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ---- Character counter ---- */
.uaic-char-counter {
    font-size: 11px;
    color: var(--uaic-muted);
    text-align: end;
    padding: 2px 16px;
    background: var(--uaic-bg-elevated);
    border-top: 1px solid var(--uaic-border-light);
}

.uaic-char-counter-over {
    color: #ef4444;
    font-weight: 600;
}

/* ============================================================
   Error bar
   ============================================================ */
.uaic-error {
    padding: 8px 16px;
    background: var(--uaic-error-bg);
    color: var(--uaic-error-fg);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid rgba(239, 68, 68, 0.2);
}

/* ============================================================
   Inline widget (shortcode)
   ============================================================ */
.uaic-inline .uaic-panel {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    height: 500px;
    max-height: 100%;
    border-radius: var(--uaic-radius);
    box-shadow: var(--uaic-shadow);
    animation: none;
}

.uaic-inline .uaic-launcher {
    display: none;
}

.uaic-inline .uaic-input-row {
    border-radius: 0 0 var(--uaic-radius) var(--uaic-radius);
}

/* Loading state */
.uaic-is-loading .uaic-send {
    opacity: 0.5;
    pointer-events: none;
}

.uaic-is-loading .uaic-input {
    opacity: 0.7;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .uaic-widget {
        --uaic-panel-w: 100vw;
        --uaic-panel-h: 100vh;
        --uaic-radius: 0;
    }

    .uaic-panel {
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        padding-top: var(--uaic-admin-bar-h);
    }

    .uaic-launcher {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* v2.8.7: cards are always a single vertical column (see
       .uaic-product-grid) — only tighten the gap on narrow screens. */
    .uaic-product-grid {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .uaic-widget {
        --uaic-launcher-size: 56px;
    }

    /* Slightly smaller card thumbnails on the narrowest screens —
       the vertical stack itself is unchanged. */
    .uaic-product-card-image,
    .uaic-product-card-placeholder {
        width: 78px;
    }

    .uaic-msg {
        max-width: 92%;
        font-size: 13px;
    }

    .uaic-header {
        padding: 12px 14px;
    }

    .uaic-header h2 {
        font-size: 14px;
    }

    .uaic-input-row {
        padding: 10px 12px;
    }
}

/* ==================================================================
 * Human operator mode — "ارتباط با اپراتور" (v2.8.0)
 * ================================================================== */

/* Segmented mode switch: [ 🤖 هوش مصنوعی | 👤 اپراتور ]
 * (replaces the old single "ارتباط با اپراتور" CTA in v2.8.1) */
.uaic-mode-switch {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 6px 12px 8px;
    padding: 4px;
    background: var(--uaic-bg-muted, #f9fafb);
    border: 1px solid var(--uaic-border, #e5e7eb);
    border-radius: 12px;
    flex-wrap: wrap;
}

.uaic-mode-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--uaic-muted, #6b7280);
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.uaic-mode-emoji {
    font-size: 14px;
    line-height: 1;
}

.uaic-mode-btn:hover {
    color: var(--uaic-color, #6366F1);
}

.uaic-mode-btn:active {
    transform: scale(0.97);
}

.uaic-mode-btn.is-active {
    background: var(--uaic-color, #6366F1);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Live operator mode: green accent on the operator side */
.uaic-mode-switch.uaic-cta-live .uaic-mode-btn.uaic-mode-human.is-active {
    background: var(--uaic-success, #10B981);
}

/* Offline: amber accent on the operator side */
.uaic-mode-switch.uaic-cta-offline .uaic-mode-btn.uaic-mode-human.is-active {
    background: var(--uaic-warning, #F59E0B);
}

/* Presence dot on the operator button (v2.8.4): green = an operator is
 * online right now, amber = busy only, gray = nobody online. Positioned
 * at the top-left corner of the button so it reads as a status light. */
.uaic-mode-btn {
    position: relative;
}
.uaic-mode-dot {
    position: absolute;
    top: 4px;
    inset-inline-start: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    box-shadow: 0 0 0 2px var(--uaic-dot-ring, rgba(255, 255, 255, 0.85));
    transition: background 0.2s ease;
}
[dir="rtl"] .uaic-mode-dot {
    inset-inline-start: auto;
    inset-inline-end: 6px;
}
.uaic-mode-dot-online {
    background: var(--uaic-success, #10B981);
    animation: uaic-dot-pulse 2s ease-in-out infinite;
}
.uaic-mode-dot-busy {
    background: var(--uaic-warning, #F59E0B);
}
.uaic-mode-dot-offline {
    background: #9ca3af;
}
.uaic-mode-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}
@keyframes uaic-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--uaic-dot-ring, rgba(255, 255, 255, 0.85)), 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50% { box-shadow: 0 0 0 2px var(--uaic-dot-ring, rgba(255, 255, 255, 0.85)), 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* Back-to-AI button offered after an offline contact submission */
.uaic-back-ai-btn {
    background: var(--uaic-color, #6366F1) !important;
    color: #fff !important;
    margin-top: 4px;
}

/* ==================================================================
 * FAQ quick-reply boxes (chips) — shown at the start of the chat
 * when "Show FAQs as quick-reply boxes" is enabled (v2.8.1)
 * ================================================================== */

.uaic-faq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 8px;
    width: 100%;
}

/* v2.11.1: hideFaqChips() (widget.js) sets the `hidden` attribute after
 * the first message. The flex rule above has higher specificity than the
 * browser's default `[hidden] { display: none }`, so the attribute alone
 * never hid the chips — they stayed clickable after the chat started.
 * This rule restores the intended "start of chat only" behavior. */
.uaic-faq-chips[hidden] {
    display: none !important;
}

.uaic-faq-chip {
    /* Small square boxes: fixed base size, content clamped to 2 lines. */
    flex: 1 1 calc(33.333% - 8px);
    min-width: 84px;
    min-height: 64px;
    max-width: calc(50% - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 10px;
    background: var(--uaic-bg, #fff);
    border: 1.5px solid var(--uaic-border, #e5e7eb);
    border-radius: 10px;
    color: var(--uaic-text, #1f2937);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.uaic-faq-chip:hover {
    border-color: var(--uaic-color, #6366F1);
    /* v2.16.0: was var(--uaic-color-light) — a SOLID indigo (#818CF8),
     * which dark text could not be read on in light mode. A translucent
     * tint keeps the chip text color intact in both schemes. */
    background: var(--uaic-chip-hover-bg, rgba(99, 102, 241, 0.12));
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.18);
}

.uaic-faq-chip:active {
    transform: scale(0.96);
}

/* Chip label: clamp to 2 lines so boxes stay square-ish. */
.uaic-faq-chip-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* On narrow phones: 2 boxes per row. */
@media (max-width: 480px) {
    .uaic-faq-chip {
        flex: 1 1 calc(50% - 8px);
        min-height: 58px;
    }
}

/* ==================================================================
 * System notice bubble (operator connected / offline message / waiting)
 * ================================================================== */
.uaic-msg-operator-notice {
    align-self: center;
    max-width: 85%;
    background: var(--uaic-notice-bg, #eef2ff);
    color: var(--uaic-notice-fg, #3730a3);
    border: 1px dashed var(--uaic-notice-border, #c7d2fe);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.uaic-msg-operator-action {
    align-self: center;
    padding: 2px;
}

/* "ارسال پیام" button shown when no operator is online */
.uaic-operator-offline-btn {
    border: none;
    background: var(--uaic-warning, #F59E0B);
    color: #fff;
    border-radius: 18px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.uaic-operator-offline-btn:hover {
    filter: brightness(1.08);
}

/* Operator reply bubble */
.uaic-msg-operator {
    align-self: flex-start;
    background: var(--uaic-operator-bg, #d1fae5);
    color: var(--uaic-operator-fg, #065f46);
    border: 1px solid var(--uaic-operator-border, #a7f3d0);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 14px;
    max-width: 82%;
    font-size: 13px;
    line-height: 1.7;
}

/* v2.13.0: in RTL the operator's replies sit on the SAME side as the
   assistant (flex-start = right in RTL) — the visitor's own bubbles are
   on the other side. Previously the operator was mirrored onto the
   visitor's side, so both sides of the conversation looked like the
   visitor's own messages. The copy-button corner rules above already
   treat .uaic-msg-operator like the assistant, which stays correct. */
[dir="rtl"] .uaic-msg-operator {
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
}

.uaic-msg-operator-author {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 4px;
}

.uaic-msg-operator-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Contact form (ثبت اطلاعات تماس) ---- */
.uaic-contact-form {
    margin: 8px 12px;
    padding: 14px;
    background: var(--uaic-bg, #fff);
    border: 1px solid var(--uaic-border, #e5e7eb);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uaic-contact-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--uaic-text, #111827);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--uaic-border-light, #f3f4f6);
}

.uaic-contact-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.uaic-contact-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--uaic-muted, #6b7280);
}

.uaic-contact-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--uaic-border, #e5e7eb);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--uaic-bg-muted, #f9fafb);
    color: var(--uaic-text, #111827);
    outline: none;
    transition: border-color 0.15s ease;
}

.uaic-contact-input:focus {
    border-color: var(--uaic-color, #6366F1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.uaic-contact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.uaic-contact-submit {
    flex: 1;
    border: none;
    background: var(--uaic-color, #6366F1);
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.uaic-contact-submit:hover {
    filter: brightness(1.1);
}

.uaic-contact-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.uaic-contact-cancel {
    border: none;
    background: transparent;
    color: var(--uaic-muted, #6b7280);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
}

.uaic-contact-error {
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
}

/* Contact form on narrow phones */
@media (max-width: 480px) {
    .uaic-mode-switch {
        flex-direction: row;
    }
    .uaic-contact-form {
        margin: 6px;
    }
}

/* ============================================================
   v2.16.0 — THEME FIREWALL (dark/aggressive-theme sites)

   Many dark or heavily-styled WordPress themes apply GLOBAL rules
   to links, form controls, and images — often with !important —
   e.g. `a { color: #fff !important }`, `input, textarea { background:
   #2d2d2d !important; color: #f0f0f0 !important }`, or
   `html { color-scheme: dark }`. Those rules leak INTO the widget
   and break its carefully-palette-matched surfaces (invisible links
   on light bubbles, dark-on-dark text, UA-dark inputs on a light
   widget).

   The rules below pin the widget's CRITICAL surfaces (the ones with
   no state-based background changes of their own) with !important so
   external stylesheets can no longer leak in. Custom properties
   still resolve normally — the admin's theme color (inline
   --uaic-color) and the scheme classes above are unaffected; this
   only fights EXTERNAL overrides.

   Deliberately NOT firewalled: elements whose own :hover/:focus/
   .is-active rules change background (voice button, chips, mode
   buttons) — a blanket background !important would kill those
   states; their resting colors already use vars that resolve inside
   the widget root.
   ============================================================ */
.uaic-widget .uaic-panel {
    background: var(--uaic-bg) !important;
    border-color: var(--uaic-border) !important;
}
.uaic-widget .uaic-header {
    background: var(--uaic-color-gradient) !important;
    color: #fff !important;
}
.uaic-widget .uaic-messages {
    background: var(--uaic-bg) !important;
}
.uaic-widget .uaic-input-row,
.uaic-widget .uaic-input-row > .uaic-input-row-inner {
    background: var(--uaic-bg-elevated) !important;
    border-color: var(--uaic-border) !important;
}
.uaic-widget .uaic-input {
    background: transparent !important;
    color: var(--uaic-text) !important;
    border: none !important;
    /* v3.4.2 — one-line geometry pin (same class of theme conflicts the
       rest of this firewall fights): global/high-specificity textarea
       height rules must not inflate the single-line chat box. The JS
       auto-grow writes INLINE !important heights (element style beats
       stylesheet !important), so multi-line typing still grows the box
       up to the 120px cap. */
    height: 36px !important;
    min-height: 36px !important;
    max-height: 120px !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
}
.uaic-widget .uaic-input::placeholder {
    color: var(--uaic-muted) !important;
}
.uaic-widget .uaic-msg-user {
    background: var(--uaic-bubble-user-bg) !important;
    color: var(--uaic-bubble-user-fg) !important;
}
.uaic-widget .uaic-msg-assistant {
    background: var(--uaic-bubble-ai-bg) !important;
    color: var(--uaic-bubble-ai-fg) !important;
}
.uaic-widget .uaic-msg-operator {
    background: var(--uaic-operator-bg) !important;
    color: var(--uaic-operator-fg) !important;
    border-color: var(--uaic-operator-border) !important;
}
.uaic-widget .uaic-msg-operator-notice {
    background: var(--uaic-notice-bg) !important;
    color: var(--uaic-notice-fg) !important;
    border-color: var(--uaic-notice-border) !important;
}
.uaic-widget .uaic-msg-error {
    background: var(--uaic-error-bg) !important;
    color: var(--uaic-error-fg) !important;
}
/* Links inside messages: dark themes set light link colors site-wide —
 * without this they become invisible on light AI bubbles. */
.uaic-widget .uaic-md-link {
    color: var(--uaic-color-dark, #4F46E5) !important;
}
.uaic-widget .uaic-msg-user .uaic-md-link {
    color: inherit !important;
}
/* Contact form inputs (shown in the operator offline flow). Only the
 * fill + text are pinned — the :focus border/box-shadow state must keep
 * working (no border-color !important here on purpose). */
.uaic-widget .uaic-contact-input {
    background: var(--uaic-bg-muted) !important;
    color: var(--uaic-text) !important;
}
/* v3.4.2 — the multi-row textareas of the contact / pre-chat forms: the
 * rows attribute (3) decides the height, never a theme's fixed textarea
 * height/min-height (same conflict class as the chat input above). */
.uaic-widget textarea.uaic-contact-input {
    height: auto !important;
    min-height: 0 !important;
    max-height: 200px !important;
    resize: vertical !important;
}
/* Markdown code + tables + quotes keep their palette surfaces. */
.uaic-widget .uaic-md-pre {
    background: var(--uaic-bg-muted) !important;
    border-color: var(--uaic-border) !important;
}
.uaic-widget .uaic-md-pre code {
    color: var(--uaic-text) !important;
}
.uaic-widget .uaic-contact-error {
    background: var(--uaic-error-bg) !important;
    color: var(--uaic-error-fg) !important;
}
/* Code blocks keep their scheme text color. */
.uaic-widget .uaic-md-code {
    background: var(--uaic-chip-hover-bg, rgba(99, 102, 241, 0.12)) !important;
}
/* Launcher + send buttons: themes applying `button { background: ... !important }`
 * globally would flatten the brand gradient — pinned here (their hover/active
 * states only change transform/opacity/box-shadow, never background). */
.uaic-widget .uaic-launcher {
    background: var(--uaic-color-gradient) !important;
    color: #fff !important;
}
.uaic-widget .uaic-send {
    background: var(--uaic-color-gradient) !important;
    color: #fff !important;
}
/* Copy button chrome (resting state) — states only toggle opacity/visibility. */
.uaic-widget .uaic-copy-btn {
    background: var(--uaic-copy-bg) !important;
    color: var(--uaic-copy-fg) !important;
    border-color: var(--uaic-copy-border) !important;
}
.uaic-widget .uaic-copy-btn.uaic-copy-btn-copied {
    background: var(--uaic-copy-ok-bg) !important;
    color: var(--uaic-copy-ok-fg) !important;
    border-color: var(--uaic-copy-ok-border) !important;
}

/* ============================================================
 * v2.18.0 — Citations row (RAG sources) under assistant answers.
 * The server has always returned the retrieved sources with RAG
 * answers; the widget now renders them as a compact link row.
 * Uses the palette variables so light/dark schemes both work.
 * ============================================================ */
.uaic-widget .uaic-citations {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--uaic-border, #e5e7eb);
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--uaic-muted, #6b7280);
}

.uaic-widget .uaic-citations-label {
    font-weight: 600;
    letter-spacing: .02em;
}

.uaic-widget a.uaic-citations-link {
    display: inline-block;
    margin-inline-end: 10px;
    color: var(--uaic-muted, #6b7280);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--uaic-border, #e5e7eb);
    word-break: break-word;
    max-width: 100%;
}

.uaic-widget a.uaic-citations-link:hover,
.uaic-widget a.uaic-citations-link:focus-visible {
    color: var(--uaic-color, #6366F1);
    text-decoration-color: var(--uaic-color, #6366F1);
    outline: none;
}

/* ============================================================
   v3.1.0 — THEME-CONFLICT HARDENING (second firewall layer)

   The widget's class namespace is fully prefixed (.uaic-*,
   #uaic-*, @keyframes uaic-*), so this stylesheet never MATCHES
   site elements — it cannot restyle the theme. What could still
   hurt the page was:
     1. the render-blocking Google-Fonts @import (removed above —
        that was the real "widget breaks the site's CSS" vector:
        every page carrying the widget waited on fonts.googleapis
        .com, which is slow/unreachable from Iranian networks);
     2. THEME rules on GENERIC elements (h2, button, textarea,
        svg, form, img) leaking INTO the widget.
   The rules below pin the remaining generic-element surfaces INSIDE
   .uaic-widget so no theme can restyle them. Values mirror the
   widget's own rules / markup attributes exactly — nothing changes
   visually on a clean theme.
   ============================================================ */

/* Header title: themes love restyling bare h2 (font-size: 2em …). */
.uaic-widget .uaic-header h2 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #fff !important;
}

/* Buttons: block the classic theme leaks (uppercase transforms,
   alien font families, letter-spacing) without touching the
   widget's own sizing/hover rules. */
.uaic-widget button {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Textarea: same idea (colors/background are already firewalled
   via .uaic-input above). */
.uaic-widget textarea {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* The chat form must never pick up theme form margins. */
.uaic-widget form {
    margin: 0 !important;
}

/* Images: never overflow their container. */
.uaic-widget img {
    max-width: 100% !important;
}

/* Icons: theme rules like `svg { width: 100% !important }` would
   wreck every widget icon — the widget's own sizes (from its markup
   attributes) win. */
.uaic-widget .uaic-launcher-icon svg {
    width: 28px !important;
    height: 28px !important;
}
.uaic-widget .uaic-header-avatar svg {
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
}
.uaic-widget .uaic-send svg,
.uaic-widget .uaic-close svg {
    width: 20px !important;
    height: 20px !important;
}

/* v3.1.0 — the widget sits above everything (page-builder sticky
   headers, cookie banners, chat overlays): 2147483000+ is the
   classic "always on top" band, panel one notch above the launcher. */
.uaic-widget .uaic-launcher {
    z-index: 2147483000 !important;
}
.uaic-widget .uaic-panel {
    z-index: 2147483001 !important;
}

/* ============================================================
   v3.2.1 — GEOMETRY & POSITION FIREWALL (footer-trap themes)

   Two failure modes kept coming back on heavily-styled themes:

   1. SQUARE LAUNCHER — theme button rules such as
      `button { border-radius: 0 !important }` (or radius resets
      aimed at footer/sidebar widgets, exactly where wp_footer
      output lives) flattened the round launcher into a square, and
      could squash the round close/send/voice buttons the same way.
      The v2.16 firewall pinned COLORS only — geometry (radius,
      size, padding, native appearance) was not pinned. Now it is.

   2. WIDGET GLUED INTO THE FOOTER — themes that wrap the wp_footer
      output inside a container that forms a CONTAINING BLOCK for
      fixed descendants (`transform`, `filter`, `perspective`,
      `backdrop-filter`, `will-change`, `contain`) trap
      position:fixed children: the launcher/panel anchor to the
      FOOTER BOX instead of the viewport, and the footer's own
      `overflow: hidden` clips them. That fix is DOM-level: PHP
      prints a tiny inline script right after the markup that
      re-parents the floating widget to <body>, and widget.js
      repeats the move on init + load as a safety net. The CSS
      below additionally pins position/offsets so a theme rule
      like `button { position: relative !important }` or
      `footer button { position: absolute }` can't re-anchor the
      widget inside whatever container it lands in.

   All pins are scoped with :not(.uaic-inline) — the shortcode
   EMBEDDED widget keeps its normal in-flow layout. Values mirror
   the widget's own rules (incl. the responsive overrides below):
   nothing changes visually on a clean theme.
   ============================================================ */

/* Root container: never becomes a layout/stacking hostage of the
 * theme's footer markup — static, zero-size, invisible chrome. */
.uaic-widget:not(.uaic-inline) {
    position: static !important;
    z-index: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
}

/* Launcher: round, fixed, exactly launcher-sized — forever.
 * Fixes `button { border-radius: 0 !important }`-style theme rules
 * (the reported "دکمه ویجت مربعی شده"). */
.uaic-widget:not(.uaic-inline) .uaic-launcher {
    position: fixed !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--uaic-launcher-size) !important;
    height: var(--uaic-launcher-size) !important;
    min-width: var(--uaic-launcher-size) !important;
    min-height: var(--uaic-launcher-size) !important;
    max-width: var(--uaic-launcher-size) !important;
    max-height: var(--uaic-launcher-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    overflow: visible !important;
    text-indent: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.uaic-widget.uaic-pos-bottom_left:not(.uaic-inline) .uaic-launcher {
    left: calc(24px + env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
}
.uaic-widget.uaic-pos-bottom_right:not(.uaic-inline) .uaic-launcher {
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
}

/* Panel: fixed to the viewport, its own size, its own radius.
 * [hidden] keeps winning (higher specificity + later in source),
 * so open/close toggling via the hidden attribute is untouched. */
.uaic-widget:not(.uaic-inline) .uaic-panel {
    position: fixed !important;
    bottom: calc(100px + var(--uaic-admin-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--uaic-panel-w) !important;
    max-width: calc(100vw - 32px) !important;
    height: var(--uaic-panel-h) !important;
    max-height: calc(100vh - 140px - var(--uaic-admin-bar-h)) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: var(--uaic-radius) !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: var(--uaic-shadow-lg) !important;
}
.uaic-widget:not(.uaic-inline) .uaic-panel[hidden] {
    display: none !important;
}
.uaic-widget.uaic-pos-bottom_left:not(.uaic-inline) .uaic-panel {
    left: calc(24px + env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
}
.uaic-widget.uaic-pos-bottom_right:not(.uaic-inline) .uaic-panel {
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
}

/* Responsive mirror (tablet — full-screen panel): same values the
 * stylesheet already used at 768px, now pinned so footer/sidebar
 * media rules can't fight them. --uaic-panel-w/-h/-radius and
 * --uaic-launcher-size track the 768/480px var overrides above. */
@media (max-width: 768px) {
    .uaic-widget:not(.uaic-inline) .uaic-launcher {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .uaic-widget:not(.uaic-inline) .uaic-panel {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        padding-top: var(--uaic-admin-bar-h) !important;
    }
    /* Position-class pins above carry (0,4,0) specificity — they would
     * keep the 24px corner offset on phones and shift the FULL-SCREEN
     * panel off-canvas (latent since v3.1: the corner rule always beat
     * the plain mobile selector). These equal-specificity mirrors are
     * later in source, so both corners go edge-to-edge at 768px. */
    .uaic-widget.uaic-pos-bottom_left:not(.uaic-inline) .uaic-panel,
    .uaic-widget.uaic-pos-bottom_right:not(.uaic-inline) .uaic-panel {
        left: 0 !important;
        right: 0 !important;
    }
}

/* Round controls INSIDE the widget (close / send / voice / header
 * avatar + logo): radius + size + zero padding + no native button
 * chrome, so `button { border-radius: 0 !important; padding: 10px
 * 20px !important }`-style theme rules can't square or stretch them
 * (works for the inline widget too — same shapes in both modes). */
.uaic-widget .uaic-close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.uaic-widget .uaic-send,
.uaic-widget .uaic-voice-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}
.uaic-widget .uaic-header-avatar,
.uaic-widget .uaic-header-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
}

/* Aggressive CTA themes set `button { min-width: … !important }` — inside
 * the widget every button sizes itself (fixed round controls + flex
 * chips), so a forced min-width stretches them (seen live: close/send
 * ballooned to the theme's 120px CTA min-width). Zeroed here, and the
 * chip controls keep their own padding against theme padding resets. */
.uaic-widget button {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
}
.uaic-widget .uaic-mode-btn {
    padding: 7px 10px !important;
}
.uaic-widget .uaic-retry {
    padding: 4px 12px !important;
}
.uaic-widget .uaic-copy-btn {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
}

/* Small-radius controls keep their own corner shape too. */
.uaic-widget .uaic-copy-btn {
    border-radius: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.uaic-widget .uaic-retry,
.uaic-widget .uaic-mode-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Font + box model: a theme `body * { font-family: … !important }`
 * or a global content-box reset must not leak into the widget.
 * Children with their own font-family (code blocks) are unaffected:
 * a direct declaration always beats an inherited value. */
.uaic-widget {
    font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", sans-serif !important;
}
.uaic-widget,
.uaic-widget *,
.uaic-widget *::before,
.uaic-widget *::after {
    box-sizing: border-box !important;
}