/* =============================================================================
   Rozhika Widget Hub — support panel (v2.14.0, 2026-10-28)

   The whole panel — header, tabs, conversations, composer, history, toasts —
   is designed here, once. It used to be defined twice in widget-hub.css: a set
   of base rules, then the same rules again under `#rwh-widget-hub … !important`
   («FLATSOME THEME OVERRIDES»), and every later stylesheet that touched the
   panel (rwh-voice.css, roxana.css) had to answer that block with more
   !important. The block was answering rules that do not exist: Flatsome sets
   no !important on buttons, inputs or headings. What it does set is plain
   type-selector styles (button padding/line-height/uppercase, textarea
   min-height, h3 margins), and an ID-scoped rule outranks those without help.

   WHY A SEPARATE SHEET
   Like rwh-voice.css, this file is excluded from WP Rocket's Remove Unused CSS
   and loaded without blocking the first paint (see enqueue_assets()):
     - RUCSS keeps only rules whose selectors appear in the page's HTML, and
       most of the panel (bubbles, history rows, toasts) is built by JS after a
       tap, so on optimised pages those rules were at the mercy of the snapshot;
     - nothing here is needed before the visitor taps the support button, so it
       no longer weighs on every page's critical CSS (smaller inline used-CSS,
       better FCP/LCP). widget-hub.css keeps only the launcher and the panel
       shell (position, size, hidden/shown), so an unstyled panel can never
       flash.

   THE ONE !important
   Flatsome's Customizer option «Button radius» prints
       button:not(.icon), .button:not(.icon) { border-radius: 8px !important }
   site-wide. That is a legitimate theme setting and stays as it is; the
   panel answers it exactly once, in the button reset below, through a custom
   property. Components choose their radius by setting --rwh-r, never with
   their own !important.

   MOTION
   No transition or animation is declared here. The site's Motion Control
   layer (rozhika-inp-optimizer, «Animations» tab) owns every animation of the
   widget hub and prints it per page for the same class names this file
   styles (.rwh-support-panel, .rwh-tab::before, .rwh-message, .rwh-typing-dot,
   …), so motion stays switchable per device and the INP work stays intact.

   COLOURS
   Every colour comes from the hub's tokens (--rwh-bg, --rwh-text, --rwh-border,
   --rwh-primary, --rwh-gradient-2, …). The dark theme re-points those same
   tokens under html[data-rzk-theme=dark], so the panel follows it with no
   dark-specific rules here, apart from the few panel-only tokens at the end.
   ============================================================================= */

#rwh-widget-hub {
    /* panel tokens, derived from the hub's design tokens */
    --rp-surface: var(--rwh-bg, #ffffff);
    --rp-canvas: var(--rwh-bg-secondary, #f8fafc);
    --rp-line: var(--rwh-border, #e2e8f0);
    --rp-ink: var(--rwh-text, #1e293b);
    --rp-muted: var(--rwh-text-secondary, #64748b);
    --rp-accent: var(--rwh-primary, #9d4edd);
    --rp-accent-ink: var(--rwh-primary-dark, #7b2cbf);
    --rp-grad: var(--rwh-gradient-2, linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%));
    --rp-soft: rgba(157, 78, 221, 0.08);
    --rp-soft-2: rgba(157, 78, 221, 0.14);
    --rp-ring: 0 0 0 3px rgba(157, 78, 221, 0.18);
    --rp-bubble-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px -4px rgba(15, 23, 42, 0.08);
    --rp-head-human: linear-gradient(135deg, #8a3fd8 0%, #7b2cbf 55%, #6a23b0 100%);
    --rp-head-ai: linear-gradient(135deg, #6d4ce6 0%, #7f4ae0 50%, #9b46d9 100%);
    --rp-head-history: linear-gradient(135deg, #5b54c9 0%, #6f45c8 55%, #7b2cbf 100%);
    --rp-r-panel: 22px;
    --rp-r-card: 16px;
    --rp-r-bubble: 18px;
}

/* 2.16.1: the panel's type scale. Every text size in the panel (here, in rwh-voice.css and in
   رکسانا's roxana.css) is one of these tokens instead of a fixed pixel value. Each token's MAXIMUM is
   the size the text had before, so desktop and large phones are unchanged; from a 480px-wide screen
   down to 320px it shrinks linearly (to ~92%), so the same words keep fitting the same space on a
   small phone instead of wrapping. clamp() bounds are in rem, so a visitor's own browser text-size
   setting still scales the panel (WCAG 1.4.4). Pure CSS: no script, no layout shift. The panel is
   full-screen up to 768px and a fixed ~400px card on larger screens, so viewport width is the right
   input. The toast is listed because it is rendered outside #rwh-widget-hub. Name = desktop size. */
#rwh-widget-hub,
.rwh-toast-notification {
    --rp-fs-10_5: clamp(0.6094rem, 0.5156rem + 0.4688vw, 0.6562rem);
    --rp-fs-11: clamp(0.6406rem, 0.5469rem + 0.4688vw, 0.6875rem);
    --rp-fs-11_5: clamp(0.6719rem, 0.5781rem + 0.4688vw, 0.7188rem);
    --rp-fs-12: clamp(0.7031rem, 0.6094rem + 0.4688vw, 0.75rem);
    --rp-fs-12_5: clamp(0.7188rem, 0.5938rem + 0.625vw, 0.7812rem);
    --rp-fs-13: clamp(0.75rem, 0.625rem + 0.625vw, 0.8125rem);
    --rp-fs-13_5: clamp(0.7812rem, 0.6562rem + 0.625vw, 0.8438rem);
    --rp-fs-14: clamp(0.8125rem, 0.6875rem + 0.625vw, 0.875rem);
    --rp-fs-14_5: clamp(0.8438rem, 0.7188rem + 0.625vw, 0.9062rem);
    --rp-fs-18: clamp(1.0312rem, 0.8438rem + 0.9375vw, 1.125rem);
    --rp-fs-19: clamp(1.0938rem, 0.9062rem + 0.9375vw, 1.1875rem);
    --rp-fs-22: clamp(1.2188rem, 0.9062rem + 1.5625vw, 1.375rem);
}

/* 2.20.1: the panel's spacing scale. The type scale above follows the screen's width; the frame
   around the conversation (header, tabs, composer, «شروع گفتگوی جدید») now follows the PANEL's own
   size, so a short screen (iPhone SE 320×568, a 360×640 Android, a laptop window that leaves the
   desktop card 480px tall) gives the conversation the room instead of the chrome. The panel is a size
   container (below), so cqh / cqi are 1% of its height / width — on a phone the whole screen, on a
   desktop the card — and each length is one straight line between two sizes, e.g. the phone header
     52px at a 568px-tall panel → 62px at 740px:  clamp(52px, 18.98px + 5.814cqh, 62px)
   (slope 10/172 = 5.814cqh, intercept 52 − 568 × 0.05814). Every MAXIMUM is the size 2.20.0 had,
   so a large phone and the 640px desktop card look exactly as before, and the static values in the
   first two rules are that same 2.20.0 design for a browser without container units (they would
   otherwise make every var() below invalid). Pure CSS, resolved at layout: no script, no reflow.
   --rp-col is the reading column on a tablet's full-screen panel: content, tabs and composer stay
   centred in it instead of stretching across a 768px screen. */
#rwh-widget-hub .rwh-support-panel {
    --rp-head-h: 68px;
    --rp-head-py: 14px;
    --rp-head-px: 18px;
    --rp-head-av: 42px;
    --rp-head-x: 36px;
    --rp-tabs-mt: 10px;
    --rp-tabs-mb: 8px;
    --rp-tabs-mx: 12px;
    --rp-tab-h: 38px;
    --rp-chat-pt: 16px;
    --rp-chat-pb: 18px;
    --rp-chat-px: 14px;
    --rp-comp-pt: 10px;
    --rp-comp-pb: 12px;
    --rp-comp-px: 12px;
    --rp-comp-pad: 6px;
    --rp-comp-send: 38px;
    --rp-comp-btn: 36px;
    --rp-nc-py: 7px;
    --rp-nc-pb: 12px;
    --rp-col: 600px;
}

@media (max-width: 768px) {
    #rwh-widget-hub .rwh-support-panel {
        --rp-head-h: 62px;
        --rp-head-py: 12px;
        --rp-head-px: 14px;
        --rp-tabs-mt: 8px;
        --rp-tabs-mb: 6px;
        --rp-tabs-mx: 10px;
        --rp-tab-h: 40px;
        --rp-chat-pt: 14px;
        --rp-chat-pb: 16px;
        --rp-chat-px: 12px;
        --rp-nc-pb: 10px;
    }
}

@supports (height: 1cqh) {
    #rwh-widget-hub .rwh-support-panel {
        container-type: size;
        /* desktop card: from a 480px-tall card to the full 640px one */
        --rp-head-h: clamp(56px, 20px + 7.5cqh, 68px);
        --rp-head-py: clamp(10px, 2.5cqh - 2px, 14px);
        --rp-head-av: clamp(38px, 26px + 2.5cqh, 42px);
        --rp-tabs-mt: clamp(6px, 2.5cqh - 6px, 10px);
        --rp-tabs-mb: clamp(5px, 1.875cqh - 4px, 8px);
        --rp-tab-h: clamp(34px, 22px + 2.5cqh, 38px);
        --rp-chat-pt: clamp(12px, 2.5cqh, 16px);
        --rp-chat-pb: clamp(12px, 3.75cqh - 6px, 18px);
        --rp-comp-pt: clamp(7px, 1.875cqh - 2px, 10px);
        --rp-comp-pb: clamp(8px, 2.5cqh - 4px, 12px);
        --rp-comp-pad: clamp(4px, 1.25cqh - 2px, 6px);
        --rp-comp-send: clamp(34px, 22px + 2.5cqh, 38px);
        --rp-comp-btn: clamp(32px, 20px + 2.5cqh, 36px);
        --rp-nc-py: clamp(4px, 1.875cqh - 5px, 7px);
        --rp-nc-pb: clamp(7px, 3.125cqh - 8px, 12px);
    }

    @media (max-width: 768px) {
        #rwh-widget-hub .rwh-support-panel {
            /* full-screen phone panel: from 568px (iPhone SE) to 740px tall, 320px to 390px wide */
            --rp-head-h: clamp(52px, 18.98px + 5.814cqh, 62px);
            --rp-head-py: clamp(8px, 2.326cqh - 5.21px, 12px);
            --rp-head-px: clamp(12px, 2.86px + 2.857cqi, 14px);
            --rp-head-av: clamp(36px, 16.19px + 3.488cqh, 42px);
            --rp-head-x: clamp(32px, 18.79px + 2.326cqh, 36px);
            --rp-tabs-mt: clamp(5px, 1.744cqh - 4.91px, 8px);
            --rp-tabs-mb: clamp(4px, 1.163cqh - 2.6px, 6px);
            --rp-tabs-mx: clamp(8px, 2.857cqi - 1.14px, 10px);
            --rp-tab-h: clamp(34px, 14.19px + 3.488cqh, 40px);
            --rp-chat-pt: clamp(10px, 2.326cqh - 3.21px, 14px);
            --rp-chat-pb: clamp(10px, 3.488cqh - 9.81px, 16px);
            --rp-chat-px: clamp(10px, 0.86px + 2.857cqi, 12px);
            --rp-comp-pt: clamp(6px, 2.326cqh - 7.21px, 10px);
            --rp-comp-pb: clamp(8px, 2.326cqh - 5.21px, 12px);
            --rp-comp-px: clamp(10px, 0.86px + 2.857cqi, 12px);
            --rp-comp-pad: clamp(4px, 1.163cqh - 2.6px, 6px);
            --rp-comp-send: clamp(34px, 20.79px + 2.326cqh, 38px);
            --rp-comp-btn: clamp(32px, 18.79px + 2.326cqh, 36px);
            --rp-nc-py: clamp(4px, 1.744cqh - 5.91px, 7px);
            --rp-nc-pb: clamp(6px, 2.326cqh - 7.21px, 10px);
        }
    }
}

/* -----------------------------------------------------------------------------
   0. Resets — scoped to the panel, zero specificity beyond the hub id, so any
      component rule below wins without !important.
   -------------------------------------------------------------------------- */
#rwh-widget-hub :where(.rwh-support-panel) {
    line-height: 1.6;
    color: var(--rp-ink);
    text-align: right;
}

#rwh-widget-hub :where(.rwh-support-panel) :where(*, *::before, *::after) {
    letter-spacing: normal;
    text-transform: none;
}

#rwh-widget-hub :where(.rwh-support-panel) :where(h3, h4, p, ul, ol, li, figure) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
    line-height: inherit;
}

#rwh-widget-hub :where(.rwh-support-panel) :where(a) {
    color: inherit;
    text-decoration: none;
}

#rwh-widget-hub :where(.rwh-support-panel, .rwh-lightbox-overlay) :where(button) {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    font: inherit;
    font-weight: inherit;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    /* the single answer to Flatsome's «Button radius» (see header) */
    border-radius: var(--rwh-r, 999px) !important;
}

#rwh-widget-hub :where(.rwh-support-panel) :where(button:focus-visible, a:focus-visible, [tabindex]:focus-visible) {
    outline: 2px solid var(--rp-accent);
    outline-offset: 2px;
}

#rwh-widget-hub :where(.rwh-support-panel) svg {
    overflow: visible;
}

/* -----------------------------------------------------------------------------
   1. Panel surface (geometry lives in widget-hub.css: the shell must exist
      before this sheet loads)
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-support-panel {
    background: var(--rp-surface);
    border-radius: var(--rp-r-panel);
    box-shadow: 0 28px 64px -18px rgba(30, 16, 64, 0.42), 0 0 0 1px rgba(15, 23, 42, 0.06);
    /* paint and layout of the panel never leak into the page */
    contain: layout paint;
}

/* -----------------------------------------------------------------------------
   2. Header — one look per tab, chosen by data-tab on the panel (set by
      updatePanelHeader()); no inline styles.
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--rp-head-h);
    padding: var(--rp-head-py) max(var(--rp-head-px), calc((100% - var(--rp-col)) / 2));
    background: var(--rp-head-human);
    color: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}

#rwh-widget-hub .rwh-support-panel[data-tab="ai"] .rwh-panel-header { background: var(--rp-head-ai); }
#rwh-widget-hub .rwh-support-panel[data-tab="history"] .rwh-panel-header { background: var(--rp-head-history); }

/* soft light in the corner — a static gradient, no animation */
#rwh-widget-hub .rwh-panel-header::before {
    content: '';
    position: absolute;
    inset: -60% auto auto -20%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

#rwh-widget-hub .rwh-panel-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#rwh-widget-hub .rwh-header-avatar {
    position: relative;
    flex: 0 0 auto;
    width: var(--rp-head-av);
    height: var(--rp-head-av);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.34);
}

#rwh-widget-hub .rwh-header-avatar svg {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#rwh-widget-hub .rwh-header-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--rwh-presence-dot, var(--rwh-success));
    box-shadow: 0 0 0 2.5px rgba(124, 58, 237, 0.95);
}

#rwh-widget-hub .rwh-header-text {
    min-width: 0;
}

#rwh-widget-hub .rwh-header-text h3 {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 2px;
    color: #ffffff;
    font-size: clamp(14.5px, 13.4px + 0.34vw, 16.5px);
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

/* the second word reads as a soft highlight. Plain coloured text: it used to
   be gradient-clipped text, and the dark theme still paints that gradient as a
   background, so the span says outright that it has none. */
#rwh-widget-hub .rwh-header-text h3 span {
    color: #f3e8ff;
    -webkit-text-fill-color: currentColor;
    background: none;
    font-weight: 700;
}

#rwh-widget-hub .rwh-header-text p {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--rp-fs-12);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rwh-widget-hub .rwh-status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rwh-presence-dot, var(--rwh-success));
}

/* 2.14.2: «به زودی» (رکسانا for visitors) is grey, history shows no dot */
#rwh-widget-hub .rwh-header-status.rwh-status-soon,
#rwh-widget-hub .rwh-status-dot.rwh-status-soon { background: #cbd5e1; }
#rwh-widget-hub .rwh-header-status.rwh-status-none,
#rwh-widget-hub .rwh-status-dot.rwh-status-none { display: none; }

#rwh-widget-hub .rwh-panel-close {
    --rwh-r: 50%;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--rp-head-x);
    height: var(--rp-head-x);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

#rwh-widget-hub .rwh-panel-close:hover { background: rgba(255, 255, 255, 0.26); }

#rwh-widget-hub .rwh-panel-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}

/* -----------------------------------------------------------------------------
   3. Tabs — a segmented control. The active pill is the tab's own ::before
      (its fade is managed by Motion Control).
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-tabs {
    display: flex;
    gap: 4px;
    margin: var(--rp-tabs-mt) max(var(--rp-tabs-mx), calc((100% - var(--rp-col)) / 2)) var(--rp-tabs-mb);
    padding: 4px;
    background: var(--rp-canvas);
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    flex-shrink: 0;
}

#rwh-widget-hub .rwh-tab {
    --rwh-r: 12px;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: var(--rp-tab-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    background: transparent;
    color: var(--rp-muted);
    font-size: var(--rp-fs-13_5);
    font-weight: 700;
    /* 2.15.1: 1.4, not 1. The label below clips (overflow:hidden, for its ellipsis), so its line box
       must hold the glyphs' ink: IRANYekan draws up to 0.81em above the baseline («گ») and 0.35em
       below it (the dots of «پ» and «چ»), while line-height:1 only reaches 0.75em / 0.25em. That cut
       the dots off «پشتیبانی», which read «یشتیبانی». Half-leading is symmetric, so the text sits
       exactly where it did; the tab's own height (--rp-tab-h) does not change. */
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
}

#rwh-widget-hub .rwh-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--rp-grad);
    box-shadow: 0 6px 16px -8px rgba(123, 44, 191, 0.7);
    opacity: 0;
}

#rwh-widget-hub .rwh-tab:hover:not(.active) {
    background: var(--rp-surface);
    color: var(--rp-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#rwh-widget-hub .rwh-tab.active { color: #ffffff; }
#rwh-widget-hub .rwh-tab.active::before { opacity: 1; }

#rwh-widget-hub .rwh-tab > span,
#rwh-widget-hub .rwh-tab > svg {
    position: relative;
    z-index: 1;
}

#rwh-widget-hub .rwh-tab > span:not(.rwh-tab-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
}

#rwh-widget-hub .rwh-tab svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 2.15.0: رکسانا's robot (#rwh-i-roxana in widget-hub-sprite.svg) on her tab. It is a full-colour
   48-unit drawing, so it is a little larger than the 17px line icons to carry the same visual weight.
   On the purple active pill and in dark mode it shows as drawn; on a light, inactive tab its white face
   would vanish into the light segment, so there it gets an outline in the tab's own text colour
   (currentColor: muted at rest, ink on hover), set through custom properties the symbol reads. */
#rwh-widget-hub .rwh-tab > svg.rwh-rx {
    width: 19px;
    height: 19px;
    /* 2.15.1: optical centring. The drawing is centred in its box, but its top ~18% is only the thin
       antenna, while the head and body carry the weight lower down, so a geometrically centred robot
       reads about 1px low next to the label. -2px above and 0 below keeps the 17px margin box (still
       centred by the tab's flexbox) and lifts the drawing by exactly 1px at every size. */
    margin: -2px 0 0;
}

html:not([data-rzk-theme=dark]) #rwh-widget-hub .rwh-tab:not(.active) > svg.rwh-rx {
    --rwh-rx-edge: currentColor;
    --rwh-rx-edge-w: 2.6;
    --rwh-rx-stem: currentColor;
}

/* The same robot in the panel header (رکسانا tab) and on رکسانا chats in تاریخچه: both sit on the
   purple gradient, like the welcome screen. */
#rwh-widget-hub .rwh-header-avatar svg.rwh-rx { width: 27px; height: 27px; }
#rwh-widget-hub .rwh-chat-item-icon svg.rwh-rx { width: 27px; height: 27px; }
/* 2.20.1: the same robot in تاریخچه as an image: rasterised once, reused by every row (INP). */
#rwh-widget-hub .rwh-chat-item-icon .rwh-rx-img { display: block; width: 27px; height: 27px; background: url(../images/rwh-roxana.svg) center / contain no-repeat; }

#rwh-widget-hub .rwh-tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-inline-start: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--rwh-danger, #ef4444);
    color: #ffffff;
    font-size: var(--rp-fs-11);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#rwh-widget-hub .rwh-tab.active .rwh-tab-badge {
    background: #ffffff;
    color: var(--rwh-danger, #ef4444);
}

/* -----------------------------------------------------------------------------
   4. Tab content + conversation area
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--rp-canvas);
}

#rwh-widget-hub .rwh-chat-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--rp-chat-pt) max(var(--rp-chat-px), calc((100% - var(--rp-col)) / 2)) var(--rp-chat-pb);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 44, 191, 0.25) transparent;
}

#rwh-widget-hub .rwh-chat-container::-webkit-scrollbar { width: 6px; }
#rwh-widget-hub .rwh-chat-container::-webkit-scrollbar-thumb { background: rgba(123, 44, 191, 0.22); border-radius: 6px; }

/* Welcome card (پشتیبانی) */
#rwh-widget-hub .rwh-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin: 0 0 14px;
    padding: 22px 18px 18px;
    text-align: center;
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    box-shadow: var(--rp-bubble-shadow);
    max-height: 520px;
    opacity: 1;
    overflow: hidden;
}

#rwh-widget-hub .rwh-chat-welcome.rwh-welcome-hidden {
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
}

#rwh-widget-hub .rwh-welcome-avatar {
    position: relative;
    width: 68px;
    height: 68px;
}

#rwh-widget-hub .rwh-welcome-avatar svg {
    width: 100%;
    height: 100%;
}

#rwh-widget-hub .rwh-status-dot-welcome {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--rwh-presence-dot, var(--rwh-success));
    box-shadow: 0 0 0 3px var(--rp-surface);
}

#rwh-widget-hub .rwh-chat-welcome h3 {
    font-size: clamp(15px, 13.9px + 0.34vw, 17px);
    font-weight: 800;
    color: var(--rp-ink);
}

#rwh-widget-hub .rwh-chat-welcome p {
    font-size: var(--rp-fs-13);
    line-height: 1.85;
    color: var(--rp-muted);
}

#rwh-widget-hub .rwh-online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--rp-fs-12);
    font-weight: 700;
    color: var(--rwh-presence-text, var(--rwh-success));
    background: var(--rwh-presence-bg, rgba(16, 185, 129, 0.1));
    border: 1px solid var(--rwh-presence-border, rgba(16, 185, 129, 0.22));
}

#rwh-widget-hub .rwh-online-status .rwh-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rwh-presence-dot, var(--rwh-success));
}

/* FAQ shortcut inside the welcome card */
#rwh-widget-hub .rwh-faq-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 2px;
    padding: 11px 12px;
    background: var(--rp-canvas);
    border: 1px solid var(--rp-line);
    border-radius: 14px;
    text-align: right;
    cursor: pointer;
}

#rwh-widget-hub .rwh-faq-card:hover { border-color: rgba(157, 78, 221, 0.35); background: var(--rp-soft); }

#rwh-widget-hub .rwh-faq-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--rp-grad);
    color: #ffffff;
}

#rwh-widget-hub .rwh-faq-icon svg { width: 20px; height: 20px; }

#rwh-widget-hub .rwh-faq-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#rwh-widget-hub .rwh-faq-title { font-size: var(--rp-fs-13_5); font-weight: 800; color: var(--rp-ink); }
#rwh-widget-hub .rwh-faq-desc { font-size: var(--rp-fs-12); font-weight: 500; line-height: 1.6; color: var(--rp-muted); }

#rwh-widget-hub .rwh-faq-arrow {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-accent);
}

#rwh-widget-hub .rwh-faq-arrow svg { width: 17px; height: 17px; }
#rwh-widget-hub .rwh-chat-welcome.rwh-welcome-hidden .rwh-faq-card { display: none; }

/* -----------------------------------------------------------------------------
   5. Messages
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

#rwh-widget-hub .rwh-message {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    /* 2.20.1: the gap beside a bubble narrows with the column instead of staying 14% — 24px on a
       296px column (a 320px phone: 92%), the familiar 14% from a 366px column up (86%), a straight
       line between. cqi is the messages column (رکسانا) or the panel (پشتیبانی). Browsers without
       container units keep the 86% above. */
    max-width: calc(100% - clamp(24px, 38.57cqi - 90.2px, 14%));
    min-width: 0;
}

#rwh-widget-hub .rwh-message.user { align-self: flex-end; align-items: flex-end; }
#rwh-widget-hub .rwh-message.support,
#rwh-widget-hub .rwh-message.ai { align-self: flex-start; align-items: flex-start; }

#rwh-widget-hub .rwh-message-bubble {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: var(--rp-r-bubble);
    font-size: var(--rp-fs-14);
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: normal;
}

#rwh-widget-hub .rwh-message.user .rwh-message-bubble {
    background: var(--rp-grad);
    color: #ffffff;
    border-bottom-left-radius: 6px;
    box-shadow: 0 4px 14px -6px rgba(123, 44, 191, 0.55);
}

#rwh-widget-hub .rwh-message.support .rwh-message-bubble,
#rwh-widget-hub .rwh-message.ai .rwh-message-bubble {
    background: var(--rp-surface);
    color: var(--rp-ink);
    border: 1px solid var(--rp-line);
    border-bottom-right-radius: 6px;
    box-shadow: var(--rp-bubble-shadow);
}

/* links typed into a message. A link that IS a card (Link Cards' .rzk-lc, or
   any element marked data-card, e.g. رکسانا's order card and its buttons)
   styles itself, so this rule leaves it alone instead of being overridden. */
#rwh-widget-hub .rwh-message-bubble a:not(.rzk-lc):not([data-card]) {
    color: var(--rp-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    direction: ltr;
    unicode-bidi: isolate;
}

#rwh-widget-hub .rwh-message.user .rwh-message-bubble a:not(.rzk-lc):not([data-card]) { color: #ffffff; }

#rwh-widget-hub .rwh-message-time {
    margin-top: 4px;
    padding: 0 4px;
    font-size: var(--rp-fs-11_5);
    line-height: 1.4;
    color: var(--rp-muted);
}

/* attachments inside a bubble */
#rwh-widget-hub .rwh-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

#rwh-widget-hub .rwh-msg-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: var(--rp-fs-12);
    color: inherit;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

#rwh-widget-hub .rwh-message.support .rwh-msg-attachment,
#rwh-widget-hub .rwh-message.ai .rwh-msg-attachment {
    background: var(--rp-soft);
    border-color: var(--rp-soft-2);
    color: var(--rp-ink);
}

#rwh-widget-hub .rwh-msg-attachment-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rwh-widget-hub .rwh-msg-attachment-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; }
#rwh-widget-hub .rwh-msg-attachment-icon.is-image { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; }
#rwh-widget-hub .rwh-msg-attachment-icon.is-image img { width: 100%; height: 100%; object-fit: cover; }
#rwh-widget-hub .rwh-msg-attachment-info { display: flex; flex-direction: column; min-width: 0; }
#rwh-widget-hub .rwh-msg-attachment-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
#rwh-widget-hub .rwh-msg-attachment-size { font-size: var(--rp-fs-11); opacity: 0.75; }

/* typing indicator (the dots' bounce is managed by Motion Control) */
#rwh-widget-hub .rwh-typing-indicator {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 12px 14px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-bubble);
    border-bottom-right-radius: 6px;
    box-shadow: var(--rp-bubble-shadow);
}

#rwh-widget-hub .rwh-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rp-accent);
    opacity: 0.55;
}

/* in-chat error */
#rwh-widget-hub .rwh-error-message {
    align-self: center;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: var(--rp-fs-12_5);
    font-weight: 600;
    text-align: center;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* -----------------------------------------------------------------------------
   6. Composer
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-input-container {
    flex-shrink: 0;
    padding: var(--rp-comp-pt) max(var(--rp-comp-px), calc((100% - var(--rp-col)) / 2)) var(--rp-comp-pb);
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-line);
}

#rwh-widget-hub .rwh-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: calc(var(--rp-comp-send) + 2 * var(--rp-comp-pad));
    padding: var(--rp-comp-pad) var(--rp-comp-pad) var(--rp-comp-pad) calc(var(--rp-comp-pad) + 2px);
    background: var(--rp-canvas);
    border: 1.5px solid var(--rp-line);
    border-radius: 25px;
}

#rwh-widget-hub .rwh-input-wrapper:focus-within {
    background: var(--rp-surface);
    border-color: var(--rp-accent);
    box-shadow: var(--rp-ring);
}

#rwh-widget-hub .rwh-input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--rp-comp-btn);
    min-height: var(--rp-comp-btn);
    max-height: 132px;
    margin: 0;
    padding: calc((var(--rp-comp-btn) - 22px) / 2) 8px calc((var(--rp-comp-btn) - 22px) / 2) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--rp-fs-14_5);
    line-height: 22px;
    color: var(--rp-ink);
    direction: rtl;
    overflow-y: hidden;
}

#rwh-widget-hub .rwh-input:focus { border: 0; box-shadow: none; outline: none; background: transparent; }
#rwh-widget-hub .rwh-input.rwh-input-scrollable { overflow-y: auto; }
#rwh-widget-hub .rwh-input::placeholder { color: var(--rp-muted); opacity: 1; }

#rwh-widget-hub .rwh-attach-btn {
    --rwh-r: 50%;
    flex: 0 0 auto;
    width: var(--rp-comp-btn);
    height: var(--rp-comp-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-accent);
    background: var(--rp-soft);
}

#rwh-widget-hub .rwh-attach-btn:hover { background: var(--rp-soft-2); }
#rwh-widget-hub .rwh-attach-btn svg { width: 18px; height: 18px; }

#rwh-widget-hub .rwh-send-btn {
    --rwh-r: 50%;
    position: relative;
    flex: 0 0 auto;
    width: var(--rp-comp-send);
    height: var(--rp-comp-send);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-grad);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(123, 44, 191, 0.7);
    overflow: visible;
}

#rwh-widget-hub .rwh-send-btn:hover { filter: brightness(1.06); }
#rwh-widget-hub .rwh-send-btn:active { transform: scale(0.95); }
#rwh-widget-hub .rwh-send-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }

/* the send arrow points left (RTL); mic/stop icons are positioned by rwh-voice.css */
#rwh-widget-hub .rwh-send-btn svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
    transform: rotate(180deg);
}

/* attachment preview strip */
#rwh-widget-hub .rwh-attachment-preview {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--rp-canvas);
    border: 1.5px dashed var(--rp-line);
    border-radius: 14px;
}

#rwh-widget-hub .rwh-attachment-preview.has-files { display: flex; }

#rwh-widget-hub .rwh-attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 160px;
    padding: 7px 10px;
    font-size: var(--rp-fs-12);
    color: var(--rp-ink);
    background: var(--rp-soft);
    border: 1px solid var(--rp-soft-2);
    border-radius: 10px;
}

#rwh-widget-hub .rwh-attachment-item .rwh-file-icon { width: 18px; height: 18px; flex-shrink: 0; }
#rwh-widget-hub .rwh-attachment-item .rwh-file-icon svg { width: 100%; height: 100%; stroke: var(--rp-accent); fill: none; stroke-width: 2; }
#rwh-widget-hub .rwh-attachment-item .rwh-file-name { max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

#rwh-widget-hub .rwh-attachment-item .rwh-remove-file {
    --rwh-r: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rwh-danger, #ef4444);
    box-shadow: 0 0 0 2px var(--rp-surface);
}

#rwh-widget-hub .rwh-attachment-item .rwh-remove-file svg { width: 10px; height: 10px; stroke: #ffffff; stroke-width: 3; }

/* closed conversation: the composer is replaced by this note */
#rwh-widget-hub .rwh-closed-composer {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 max(12px, calc((100% - var(--rp-col)) / 2)) 12px;
    padding: 12px 14px;
    font-size: var(--rp-fs-12_5);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    color: var(--rp-muted);
    background: var(--rp-surface);
    border: 1px dashed var(--rp-line);
    border-radius: var(--rp-r-card);
}

#rwh-widget-hub .rwh-closed-composer-icon { flex-shrink: 0; color: var(--rp-muted); }

/* 2.14.2: thin scrollbars tinted like the panel (the default grey bar was the
   widest element on Windows) */
#rwh-widget-hub .rwh-chat-container,
#rwh-widget-hub .rwh-history-container,
#rwh-widget-hub .rwh-coming-soon {
    scrollbar-width: thin;
    scrollbar-color: var(--rp-soft-2) transparent;
}
#rwh-widget-hub .rwh-chat-container::-webkit-scrollbar,
#rwh-widget-hub .rwh-history-container::-webkit-scrollbar { width: 6px; }
#rwh-widget-hub .rwh-chat-container::-webkit-scrollbar-thumb,
#rwh-widget-hub .rwh-history-container::-webkit-scrollbar-thumb { background: var(--rp-soft-2); border-radius: 6px; }

/* -----------------------------------------------------------------------------
   7. رکسانا placeholder for visitors (shown until رکسانا is public)
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-coming-soon {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    /* 2.20.1: a short panel trims the air above and below first (32px at 640px tall, 16px at 520px). */
    padding-block: clamp(16px, 13.33cqh - 53.33px, 32px);
    text-align: center;
    overflow-y: auto;
}

/* same tile as رکسانا's welcome hero (roxana.css .roxana-hero) */
#rwh-widget-hub .rwh-ai-avatar {
    position: relative;
    width: 84px;
    height: 84px;
    /* 2.20.1: 84px from a 640px-tall panel up, 64px at 520px (the robot and the corner scale with it) */
    width: clamp(64px, 16.67cqh - 22.67px, 84px);
    height: clamp(64px, 16.67cqh - 22.67px, 84px);
    margin-bottom: 4px;
    border-radius: 33.3%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-head-ai);
    box-shadow: 0 16px 34px -14px rgba(109, 76, 230, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
#rwh-widget-hub .rwh-ai-avatar > svg { width: 71.4%; height: 71.4%; }
#rwh-widget-hub .rwh-ai-spark {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    background: var(--rp-surface);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.3);
}
#rwh-widget-hub .rwh-ai-spark svg { width: 17px; height: 17px; }

#rwh-widget-hub .rwh-coming-soon h3 {
    font-size: var(--rp-fs-22);
    font-weight: 800;
    color: var(--rp-accent-ink);
}

#rwh-widget-hub .rwh-ai-subtitle { margin-top: -6px; font-size: var(--rp-fs-13_5); font-weight: 600; color: var(--rp-muted); }

#rwh-widget-hub .rwh-coming-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: var(--rp-fs-14);
    font-weight: 800;
    color: var(--rp-accent-ink);
    background: var(--rp-soft);
    border: 1px solid var(--rp-soft-2);
}

#rwh-widget-hub .rwh-sparkle { display: inline-flex; align-items: center; justify-content: center; }
#rwh-widget-hub .rwh-coming-desc { max-width: 290px; font-size: var(--rp-fs-13); line-height: 1.9; color: var(--rp-muted); }

/* 2.20.0: the sign-in card — رکسانا is for signed-in customers and this visitor is a
   guest. Same tile and tokens as the placeholder above (light and dark alike); a
   plain link, so it costs no script. */
#rwh-widget-hub .rwh-ai-gate { gap: 10px; padding: 24px clamp(16px, 6vw, 28px); padding-block: clamp(14px, 8.333cqh - 29.33px, 24px); }
#rwh-widget-hub .rwh-ai-lock {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-accent-ink);
    background: var(--rp-surface);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.3), 0 0 0 2px var(--rp-surface);
}
#rwh-widget-hub .rwh-ai-lock svg { width: 15px; height: 15px; }
#rwh-widget-hub .rwh-ai-gate .rwh-coming-desc { max-width: 310px; }
#rwh-widget-hub .rwh-gate-perks {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: 310px;
    margin: 2px 0 4px;
    padding: 12px 14px;
    list-style: none;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    text-align: start;
}
#rwh-widget-hub .rwh-gate-perks li { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--rp-fs-12_5); line-height: 1.7; color: var(--rp-ink); }
#rwh-widget-hub .rwh-gate-perks svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--rp-accent); }
#rwh-widget-hub .rwh-gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 310px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: var(--rp-fs-14);
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: var(--rp-head-ai);
    box-shadow: 0 12px 26px -14px rgba(109, 76, 230, 0.9);
    -webkit-tap-highlight-color: transparent;
}
#rwh-widget-hub .rwh-gate-btn svg { width: 18px; height: 18px; }
#rwh-widget-hub .rwh-gate-btn:hover { filter: brightness(1.06); color: #fff; }
#rwh-widget-hub .rwh-gate-btn:active { transform: scale(0.98); }
#rwh-widget-hub .rwh-gate-btn:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 2px; }
#rwh-widget-hub .rwh-gate-note { font-size: var(--rp-fs-11_5); color: var(--rp-muted); }

/* -----------------------------------------------------------------------------
   8. History (تاریخچه)
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-history-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#rwh-widget-hub .rwh-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px max(16px, calc((100% - var(--rp-col)) / 2)) 4px;
}

#rwh-widget-hub .rwh-history-header h4 {
    font-size: var(--rp-fs-14);
    font-weight: 800;
    color: var(--rp-ink);
}

#rwh-widget-hub .rwh-history-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px max(12px, calc((100% - var(--rp-col)) / 2)) 14px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 44, 191, 0.25) transparent;
}

#rwh-widget-hub .rwh-empty-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--rp-muted);
}

#rwh-widget-hub .rwh-empty-history svg { opacity: 0.45; }
#rwh-widget-hub .rwh-empty-history p { font-size: var(--rp-fs-14_5); font-weight: 800; color: var(--rp-ink); }
#rwh-widget-hub .rwh-empty-history span { font-size: var(--rp-fs-12_5); }

#rwh-widget-hub .rwh-chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    padding: 12px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    cursor: pointer;
    /* 2.20.1 (INP): rows below the fold are not laid out or painted until scrolled to */
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
}

#rwh-widget-hub .rwh-chat-item:hover { border-color: rgba(157, 78, 221, 0.32); box-shadow: 0 6px 18px -10px rgba(123, 44, 191, 0.45); }
#rwh-widget-hub .rwh-chat-item.active { border-color: var(--rp-accent); background: var(--rp-soft); }

/* 2.19.0: رکسانا's chats in تاریخچه have their own colour — the indigo of her
   tab and header (--rp-head-ai) instead of support's purple — the way help
   desks tag bot conversations, so the two kinds read apart at a glance. A thin
   edge on the icon side, an indigo hover, and the same «open now» state as a
   support chat in her colour. Static paint only: nothing animates. */
#rwh-widget-hub .rwh-chat-item.is-ai {
    --rx-tint: rgba(109, 76, 230, 0.07);
    --rx-line: rgba(109, 76, 230, 0.34);
    --rx-strong: #6d4ce6;
}
#rwh-widget-hub .rwh-chat-item.is-ai::before {
    content: "";
    position: absolute;
    inset-block: 14px;
    inset-inline-start: -1px;
    width: 3px;
    border-radius: 3px;
    background: var(--rp-head-ai);
    opacity: 0.8;
}
#rwh-widget-hub .rwh-chat-item.is-ai:hover { border-color: var(--rx-line); box-shadow: 0 6px 18px -10px rgba(91, 63, 214, 0.5); }
#rwh-widget-hub .rwh-chat-item.is-ai.active { border-color: var(--rx-strong); background: var(--rx-tint); }
#rwh-widget-hub .rwh-chat-item.is-ai.active::before { opacity: 1; }
html[data-rzk-theme=dark] #rwh-widget-hub .rwh-chat-item.is-ai {
    --rx-tint: rgba(139, 116, 255, 0.13);
    --rx-line: rgba(150, 132, 255, 0.42);
    --rx-strong: #8b74ff;
}

#rwh-widget-hub .rwh-chat-item-icon {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-head-human);
}

#rwh-widget-hub .rwh-chat-item-icon.ai { background: var(--rp-head-ai); }

#rwh-widget-hub .rwh-chat-item-icon svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#rwh-widget-hub .rwh-chat-item-content { flex: 1 1 auto; min-width: 0; }

#rwh-widget-hub .rwh-chat-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

#rwh-widget-hub .rwh-chat-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--rp-fs-13_5);
    font-weight: 800;
    color: var(--rp-ink);
}

#rwh-widget-hub .rwh-chat-type-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--rp-fs-11);
    font-weight: 700;
    color: var(--rp-accent-ink);
    background: var(--rp-soft);
}

#rwh-widget-hub .rwh-chat-type-badge.ai { color: #5b3fd6; background: rgba(109, 76, 230, 0.1); }

#rwh-widget-hub .rwh-chat-item-time {
    flex: 0 0 auto;
    font-size: var(--rp-fs-11_5);
    color: var(--rp-muted);
    white-space: nowrap;
}

#rwh-widget-hub .rwh-chat-item-preview {
    font-size: var(--rp-fs-12_5);
    line-height: 1.7;
    color: var(--rp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rwh-widget-hub .rwh-chat-item-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

#rwh-widget-hub .rwh-chat-status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--rp-fs-11);
    font-weight: 700;
}

#rwh-widget-hub .rwh-chat-status.pending { background: rgba(245, 158, 11, 0.12); color: #b45309; }
#rwh-widget-hub .rwh-chat-status.replied { background: rgba(16, 185, 129, 0.12); color: #047857; }
#rwh-widget-hub .rwh-chat-status.closed { background: rgba(100, 116, 139, 0.12); color: #475569; }
#rwh-widget-hub .rwh-chat-count { font-size: var(--rp-fs-11_5); color: var(--rp-muted); }

#rwh-widget-hub .rwh-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--rwh-danger, #ef4444);
    color: #ffffff;
    font-size: var(--rp-fs-11);
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--rp-surface);
}

#rwh-widget-hub .rwh-chat-item-delete {
    --rwh-r: 50%;
    position: absolute;
    /* bottom-left: the one corner of the card with nothing in it (the time
       sits top-left, status chips bottom-right) */
    bottom: 10px;
    left: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    opacity: 0;
}

#rwh-widget-hub .rwh-chat-item:hover .rwh-chat-item-delete,
#rwh-widget-hub .rwh-chat-item-delete:focus-visible { opacity: 1; }
#rwh-widget-hub .rwh-chat-item-delete:hover { background: #dc2626; }

#rwh-widget-hub .rwh-chat-item-delete svg {
    width: 14px;
    height: 14px;
    stroke: #dc2626;
    stroke-width: 2;
    fill: none;
}

#rwh-widget-hub .rwh-chat-item-delete:hover svg { stroke: #ffffff; }

/* touch screens have no hover: keep delete reachable */
@media (hover: none) {
    #rwh-widget-hub .rwh-chat-item-delete { opacity: 0.85; }
}

/* -----------------------------------------------------------------------------
   9. Presence fallbacks (classes set before the live variables apply)
   -------------------------------------------------------------------------- */
#rwh-widget-hub .rwh-status-dot.rwh-status-away,
#rwh-widget-hub .rwh-header-status.rwh-status-away,
#rwh-widget-hub .rwh-status-dot-welcome.rwh-status-away,
#rwh-widget-hub .rwh-online-status.rwh-status-away .rwh-dot { background: #f59e0b; }

#rwh-widget-hub .rwh-status-dot.rwh-status-offline,
#rwh-widget-hub .rwh-header-status.rwh-status-offline,
#rwh-widget-hub .rwh-status-dot-welcome.rwh-status-offline,
#rwh-widget-hub .rwh-online-status.rwh-status-offline .rwh-dot { background: #94a3b8; }

/* -----------------------------------------------------------------------------
   10. Lightbox (attachment preview) and toasts — appended to <body>
   -------------------------------------------------------------------------- */
.rwh-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 6, 20, 0.88);
    opacity: 0;
    visibility: hidden;
}

.rwh-lightbox-overlay.active { opacity: 1; visibility: visible; }
.rwh-lightbox-content { position: relative; max-width: 92vw; max-height: 90vh; }
.rwh-lightbox-content img { max-width: 100%; max-height: 84vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

.rwh-lightbox-overlay .rwh-lightbox-close {
    --rwh-r: 50%;
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    min-height: 0;
    border-radius: 50% !important; /* Flatsome «Button radius», as in the panel reset */
}

.rwh-lightbox-overlay .rwh-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.rwh-lightbox-close svg { width: 20px; height: 20px; stroke: #ffffff; stroke-width: 2; }

.rwh-lightbox-filename {
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 13.5px;
    white-space: nowrap;
}

.rwh-toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-width: 240px;
    max-width: 380px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 44px -12px rgba(15, 23, 42, 0.45);
    color: #ffffff;
    font-family: var(--rwh-font) !important; /* toasts live outside #rwh-widget-hub; same reason as the hub rule */
    font-size: var(--rp-fs-14);
    font-weight: 600;
    line-height: 1.6;
    direction: rtl;
}

.rwh-toast-notification.rwh-toast-error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.rwh-toast-notification.rwh-toast-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.rwh-toast-notification.rwh-toast-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.rwh-toast-notification.rwh-toast-info { background: linear-gradient(135deg, #8a3fd8 0%, #6a23b0 100%); }
.rwh-toast-notification .rwh-toast-icon { flex-shrink: 0; font-size: var(--rp-fs-18); }
.rwh-toast-notification .rwh-toast-message { flex: 1; }
.rwh-toast-confirm .rwh-toast-confirm-content { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.rwh-toast-confirm-buttons { display: flex; gap: 8px; direction: rtl; }

.rwh-toast-btn {
    padding: 8px 16px;
    border: 0;
    border-radius: 10px !important; /* Flatsome «Button radius», as in the panel reset */
    font-family: var(--rwh-font) !important;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    min-height: 0;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.rwh-toast-btn-confirm { background: #ffffff; color: #b45309; }
.rwh-toast-btn-cancel { background: rgba(255, 255, 255, 0.2); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); }

@media (max-width: 768px) {
    .rwh-toast-notification { right: 4%; left: 4%; min-width: 0; max-width: none; padding: 12px 16px; font-size: var(--rp-fs-13_5); }
}

/* -----------------------------------------------------------------------------
   11. Phones and tablets: full-screen panel (shell in widget-hub.css). 2.20.1: also a short
       touch screen — a phone held sideways — which keeps the desktop spacing at its minimums.
   -------------------------------------------------------------------------- */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
    #rwh-widget-hub .rwh-support-panel {
        border-radius: 0;
        box-shadow: none;
    }

    /* 2.20.1: sizes and spacing come from the panel's spacing scale (section 1); only the notch
       and the home indicator are added here. */
    #rwh-widget-hub .rwh-panel-header { padding-top: max(var(--rp-head-py), env(safe-area-inset-top)); }

    #rwh-widget-hub .rwh-input-container { padding-bottom: max(var(--rp-comp-pb), env(safe-area-inset-bottom)); }

    /* 16px stops iOS Safari from zooming the page when the field is focused */
    #rwh-widget-hub .rwh-input { font-size: 16px; }
}

@media (max-width: 380px) {
    /* Sizes need no step here: the fluid scale (section 1) already brings the tab label to 12.5px
       and the bubble text to 13.5px on a 320px phone, which is what these rules used to set. */
    #rwh-widget-hub .rwh-tab { gap: 4px; padding: 0 4px; }
    #rwh-widget-hub .rwh-tab svg { width: 15px; height: 15px; }
    #rwh-widget-hub .rwh-tab > svg.rwh-rx { width: 17px; height: 17px; }
    #rwh-widget-hub .rwh-message-bubble { padding: 9px 12px; }
}

/* -----------------------------------------------------------------------------
   12. Dark theme — only the tokens that are this panel's own. Everything else
       follows the hub tokens the dark theme already re-points.
   -------------------------------------------------------------------------- */
html[data-rzk-theme=dark] #rwh-widget-hub {
    --rp-soft: rgba(179, 116, 237, 0.13);
    --rp-soft-2: rgba(179, 116, 237, 0.22);
    --rp-ring: 0 0 0 3px rgba(179, 116, 237, 0.24);
    --rp-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --rp-head-human: linear-gradient(135deg, #6e2fb0 0%, #5e2299 60%, #4f1c84 100%);
    --rp-head-ai: linear-gradient(135deg, #4c37b0 0%, #5c36a8 50%, #6c2f9e 100%);
    --rp-head-history: linear-gradient(135deg, #3f3a8f 0%, #50349a 55%, #5e2299 100%);
}

html[data-rzk-theme=dark] #rwh-widget-hub .rwh-chat-status.pending { color: #fbbf24; }
html[data-rzk-theme=dark] #rwh-widget-hub .rwh-chat-status.replied { color: #34d399; }
html[data-rzk-theme=dark] #rwh-widget-hub .rwh-chat-status.closed { color: #cbd5e1; }
html[data-rzk-theme=dark] #rwh-widget-hub .rwh-chat-type-badge.ai { color: #c4b5fd; }
html[data-rzk-theme=dark] #rwh-widget-hub .rwh-error-message { color: #fca5a5; }