/*rzm:s22*/
:root {
    --rwh-primary: #9d4edd;
    --rwh-primary-dark: #7b2cbf;
    --rwh-primary-light: #c77dff;
    --rwh-gradient-2: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
    --rwh-success: #10b981;
    --rwh-danger: #ef4444;
    --rwh-bg: #ffffff;
    --rwh-bg-secondary: #f8fafc;
    --rwh-text: #1e293b;
    --rwh-text-secondary: #64748b;
    --rwh-border: #e2e8f0;
    --rwh-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --rwh-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --rwh-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --rwh-radius: 24px;
    --rwh-radius-sm: 12px;
    --rwh-radius-md: 16px;
    --rwh-transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --rwh-transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --rwh-font: var(--font-family, IRANYekan, sans-serif);
    /* RZK 2026-08-01 (task 6): fluid hub metrics. Upper bounds equal the old
       fixed values, so desktop is unchanged; the 768px breakpoint copy that
       used to hard-code 52px/46px has been deleted in favour of these. */
    --rwh-btn:      clamp(42px, 13vw, 56px);
    --rwh-item:     clamp(36px, 11.5vw, 50px);
    --rwh-edge:     clamp(10px, 4vw, 20px);
    --rwh-icon:     clamp(18px, 5.6vw, 26px);

    /* RZK 2026-10-25: launcher + inner widgets are ONE family. Same surface
       (gradient + a hairline inner ring + one soft tinted shadow), only the hue
       says what each one does. The ring is an inset box-shadow, not a border:
       a translucent border over a gradient is painted ON the background, so its
       anti-aliased edge read as a square sitting in a circle on dense screens. */
    --rwh-fab-ring:        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    --rwh-fab-lift:        0 2px 6px rgba(20, 12, 48, 0.16);
    --rwh-fab-main:        linear-gradient(145deg, #7b6cf6 0%, #6b4fe0 48%, #8a3fd8 100%);
    --rwh-fab-main-glow:   rgba(107, 79, 224, 0.42);
    --rwh-fab-support:     linear-gradient(145deg, #a25ef0 0%, #8b3fd9 50%, #7a2dc5 100%);
    --rwh-fab-support-glow: rgba(139, 63, 217, 0.4);
    /* dark-mode widget: night sky while the moon shows (tap -> dark),
       day sky while the sun shows (tap -> light) */
    --rwh-fab-night:       linear-gradient(150deg, #1e1b4b 0%, #2e2a78 55%, #4338ca 100%);
    --rwh-fab-day:         linear-gradient(160deg, #9bd9ff 0%, #4fadf7 48%, #2f7ee6 100%);
    /* hand-drawn sky details (static SVG, rasterised once - no runtime cost):
       a starfield for the night (near twinkles, mid stars and many faint far ones,
       scattered unevenly - not a ring around the moon), soft clouds for the day */
    --rwh-sky-stars:       url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 50%22%3E%3Cdefs%3E%3CradialGradient id=%22h%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M12.6 9.80L13.38 12.02L15.60 12.8L13.38 13.58L12.6 15.80L11.82 13.58L9.60 12.8L11.82 12.02z%22 fill=%22%23fff%22 opacity=%220.95%22/%3E%3Cpath d=%22M40.6 32.50L41.04 33.76L42.30 34.2L41.04 34.64L40.6 35.90L40.16 34.64L38.90 34.2L40.16 33.76z%22 fill=%22%23fff%22 opacity=%220.8%22/%3E%3Ccircle cx=%2236.4%22 cy=%2211.2%22 r=%222.6%22 fill=%22url%28%23h%29%22/%3E%3Ccircle cx=%2236.4%22 cy=%2211.2%22 r=%220.90%22 fill=%22%23fff%22 opacity=%220.95%22/%3E%3Ccircle cx=%2243.7%22 cy=%2223.5%22 r=%220.63%22 fill=%22%23fff%22 opacity=%220.75%22/%3E%3Ccircle cx=%2211.1%22 cy=%2225.5%22 r=%220.66%22 fill=%22%23fff%22 opacity=%220.80%22/%3E%3Ccircle cx=%227.1%22 cy=%2216.3%22 r=%220.52%22 fill=%22%23fff%22 opacity=%220.80%22/%3E%3Ccircle cx=%2233.5%22 cy=%224.8%22 r=%220.75%22 fill=%22%23fff%22 opacity=%220.84%22/%3E%3Ccircle cx=%2226.2%22 cy=%225.6%22 r=%220.55%22 fill=%22%23fff%22 opacity=%220.66%22/%3E%3Ccircle cx=%224.3%22 cy=%2223.4%22 r=%220.61%22 fill=%22%23fff%22 opacity=%220.81%22/%3E%3Ccircle cx=%2216.5%22 cy=%2212.6%22 r=%220.25%22 fill=%22%23fff%22 opacity=%220.27%22/%3E%3Ccircle cx=%2220.4%22 cy=%2240.9%22 r=%220.26%22 fill=%22%23fff%22 opacity=%220.54%22/%3E%3Ccircle cx=%224.4%22 cy=%2219.3%22 r=%220.31%22 fill=%22%23fff%22 opacity=%220.38%22/%3E%3Ccircle cx=%2237.8%22 cy=%2214.4%22 r=%220.21%22 fill=%22%23e0e7ff%22 opacity=%220.35%22/%3E%3Ccircle cx=%2236.9%22 cy=%227.4%22 r=%220.24%22 fill=%22%23fff%22 opacity=%220.28%22/%3E%3Ccircle cx=%2225.4%22 cy=%2247.3%22 r=%220.32%22 fill=%22%23e0e7ff%22 opacity=%220.38%22/%3E%3Ccircle cx=%227.4%22 cy=%2221.4%22 r=%220.23%22 fill=%22%23c7d2fe%22 opacity=%220.33%22/%3E%3Ccircle cx=%2222.3%22 cy=%222.4%22 r=%220.30%22 fill=%22%23e0e7ff%22 opacity=%220.50%22/%3E%3Ccircle cx=%2228.8%22 cy=%2213.2%22 r=%220.30%22 fill=%22%23e0e7ff%22 opacity=%220.36%22/%3E%3Ccircle cx=%227.9%22 cy=%2229.0%22 r=%220.33%22 fill=%22%23e0e7ff%22 opacity=%220.29%22/%3E%3Ccircle cx=%2210.4%22 cy=%229.1%22 r=%220.35%22 fill=%22%23fff%22 opacity=%220.50%22/%3E%3Ccircle cx=%2236.0%22 cy=%2220.0%22 r=%220.27%22 fill=%22%23e0e7ff%22 opacity=%220.52%22/%3E%3Ccircle cx=%2241.2%22 cy=%2230.3%22 r=%220.24%22 fill=%22%23fff%22 opacity=%220.53%22/%3E%3Ccircle cx=%2220.9%22 cy=%2213.5%22 r=%220.21%22 fill=%22%23fff%22 opacity=%220.33%22/%3E%3Ccircle cx=%2245.6%22 cy=%2229.1%22 r=%220.35%22 fill=%22%23c7d2fe%22 opacity=%220.39%22/%3E%3Ccircle cx=%223.0%22 cy=%2231.3%22 r=%220.28%22 fill=%22%23c7d2fe%22 opacity=%220.47%22/%3E%3Ccircle cx=%2246.3%22 cy=%2217.7%22 r=%220.21%22 fill=%22%23fff%22 opacity=%220.39%22/%3E%3Ccircle cx=%2238.4%22 cy=%2241.7%22 r=%220.29%22 fill=%22%23e0e7ff%22 opacity=%220.44%22/%3E%3Ccircle cx=%2245.0%22 cy=%2233.9%22 r=%220.27%22 fill=%22%23fff%22 opacity=%220.39%22/%3E%3Ccircle cx=%2216.3%22 cy=%226.0%22 r=%220.20%22 fill=%22%23fff%22 opacity=%220.54%22/%3E%3Ccircle cx=%2244.3%22 cy=%2213.8%22 r=%220.20%22 fill=%22%23fff%22 opacity=%220.34%22/%3E%3Ccircle cx=%2225.8%22 cy=%2236.7%22 r=%220.25%22 fill=%22%23e0e7ff%22 opacity=%220.53%22/%3E%3Ccircle cx=%2243.0%22 cy=%2217.0%22 r=%220.31%22 fill=%22%23e0e7ff%22 opacity=%220.31%22/%3E%3Ccircle cx=%2218.1%22 cy=%2243.2%22 r=%220.21%22 fill=%22%23c7d2fe%22 opacity=%220.27%22/%3E%3C/svg%3E");
    --rwh-sky-clouds:      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 50%22%3E%3Cpath d=%22M4 46h15.5a4 4 0 0 0 .3-8 5.6 5.6 0 0 0-10.6-1.4A4.7 4.7 0 0 0 4 46z%22 fill=%22%23fff%22 opacity=%22.92%22/%3E%3Cpath d=%22M30.5 43h12.6a3.3 3.3 0 0 0 .2-6.6 4.6 4.6 0 0 0-8.7-1.1A3.9 3.9 0 0 0 30.5 43z%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3Cpath d=%22M33.5 13h7.5a2 2 0 0 0 .1-4 2.8 2.8 0 0 0-5.3-.7A2.4 2.4 0 0 0 33.5 13z%22 fill=%22%23fff%22 opacity=%22.55%22/%3E%3C/svg%3E");
    --rwh-sky-sunglow:     radial-gradient(circle at 50% 46%, rgba(255, 240, 170, 0.6) 0, rgba(255, 240, 170, 0) 46%);
    --rwh-fab-sky-glow:    rgba(55, 70, 170, 0.42);
    --rwh-moon:            #e4e9ff;
    --rwh-ring-page:       #ffffff; /* ring around badges / presence dot = the page colour */
    --rwh-sun:             #fde047;
}

.rwh-widget-hub {
    position: fixed;
    bottom: var(--rwh-edge);
    left: var(--rwh-edge);
    z-index: 999998;
    font-family: var(--rwh-font) !important;
    font-feature-settings: "ss01" !important;
    direction: rtl;
}

.rwh-main-button,
.rwh-widgets-container {
}

.rwh-main-button.rwh-btn-hidden,
.rwh-widgets-container.rwh-btn-hidden {
    transform: translateY(120px) scale(0.8);
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   OVERLAY SUPPRESSION  (RZK 2026-08-02, tasks 3 + 4)

   ONE state for "something is covering the page, get out of the way".

   This replaces three separate mechanisms that used to do the same job
   differently and could contradict each other:
     * `.rwh-btn-hidden` toggled from widget-hub.js  (mega menu / own panel)
     * `.rwh-btn-hidden` toggled from the pro-optimizer's ux-enhancer.js
       (shop filter + sort modals) -- duplicated twice in that one file
     * `body.wcpr-modal-open #rwh-widget-hub{opacity:0}` inline in the photo
       reviews masonry template

   `.rwh-btn-hidden` is kept exactly as it was, because the hub's own support
   panel still uses it (it must hide the launcher while leaving the panel up).
   `.rwh-suppressed` is the new state for EXTERNAL overlays, where the whole hub
   should go away, panel included.
   --------------------------------------------------------------------------- */
.rwh-widget-hub {
    /* RZK 2026-08-27: `will-change: opacity, transform` used to sit here. A
       will-change that names transform makes this element a containing block for
       position:fixed descendants, so the mobile support panel below -- which is
       fixed with inset 0 and width/height 100% -- resolved 100% against this
       51px launcher instead of the viewport, and opened as a 51px circle on
       every phone. It is only a compositing hint, so the transition on this very
       rule still animates without it. Desktop never used the fixed branch. */
}

.rwh-widget-hub.rwh-suppressed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* slide down by its own height + the edge gap, so it tucks fully off-screen
       instead of just fading in place. */
    transform: translateY(calc(var(--rwh-btn) + var(--rwh-edge) + 24px)) scale(0.88);
}

/* Never animate a suppression away under reduced-motion; just cut it. */
@media (prefers-reduced-motion: reduce) {
    .rwh-widget-hub {
        /* `will-change: auto` was here to undo the hint above; with the hint
           gone this is the default, so it would be a rule that does nothing. */
    }
    .rwh-widget-hub.rwh-suppressed {
        transform: none;
    }
}

.rwh-widget-hub * {
    font-family: var(--rwh-font) !important;
    font-feature-settings: "ss01" !important;
}

.rwh-main-button {
    --rwh-host: var(--rwh-btn); /* the badge on it is sized / placed from this */
    width: var(--rwh-btn);
    height: var(--rwh-btn);
    border-radius: 50%;
    background: var(--rwh-fab-main);
    box-shadow: var(--rwh-fab-ring), 0 10px 24px -8px var(--rwh-fab-main-glow), var(--rwh-fab-lift);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0;
    z-index: 10;
}

.rwh-main-button:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: var(--rwh-fab-ring), 0 14px 30px -8px var(--rwh-fab-main-glow), var(--rwh-fab-lift);
}

.rwh-main-button:active {
    transform: scale(0.95);
}

.rwh-main-btn-inner {
    position: relative;
    width: 24px;
    height: 24px;
}

.rwh-main-button .rwh-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    color: white;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rwh-main-button .rwh-icon-menu { opacity: 1; transform: rotate(0deg) scale(1); }
.rwh-main-button .rwh-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.rwh-main-button.active .rwh-icon-menu { opacity: 0; transform: rotate(90deg) scale(0.5); }
.rwh-main-button.active .rwh-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

.rwh-pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--rwh-primary);
    opacity: 0;
    /* RZK 2026-10-12 (INP, round 3) -- `animation: rwh-pulse` REMOVED.
       -------------------------------------------------------------------
       Measured cost: 8 ms on every click, reproduced in three independent
       interleaved batches on the live category page (24 ms -> 16 ms median,
       32 ms -> 24 ms p75, input delay 20.0 ms -> 13.5 ms). It was masked in
       earlier rounds by two larger animations (logoShimmer, then orbFloat);
       once those were removed it became measurable on its own.

       Why an infinite animation on a 66x66 ring costs anything at all: it
       never lets the frame pipeline go quiet. The ring is on the launcher,
       which is position:fixed and therefore on screen on every page, so the
       compositor was committing a frame every ~16 ms for the whole life of
       every page view. A pipeline that is never idle is exactly what delays
       the frame after a tap, which is why this shows up as INPUT DELAY
       rather than as presentation delay.

       VISIBILITY: imperceptible. Stepping the animation across its own
       keyframes and diffing the rendered page, rwh-pulse changes 0.39% of
       viewport pixels with a MEAN change of 0.06/255 and a maximum of
       30/255 -- a faint 2 px ring briefly expanding behind an opaque
       button. The base style above is `opacity: 0`, so with the animation
       gone the ring is simply never painted and the launcher itself is
       completely unchanged.

       It is also already what happens after 20 seconds on every page: the
       animation governor in rozhika-inp-optimizer.php lists 'rwh-pulse' as
       AMBIENT and cancels it once its 20 s budget expires. This change only
       makes the first 20 seconds behave like the rest of the page's life --
       which is the window where most interactions actually happen.

       REVERT: re-add `animation: rwh-pulse 2s ease-out infinite;` here.
       The @keyframes block below is intentionally retained.              */
}

@keyframes rwh-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Count badges (RZK 2026-10-25): one design for the launcher and the support
   widget. Sized from the button it sits on (--rwh-host) and centred ON the
   circle at 45 deg top-right (cos 45 = .7071 -> 14.64% from the top/right of
   the box), so it sits in the same place on every screen size instead of
   floating off the box corner. A longer number grows to the left. The ring is
   a box-shadow in the page colour (crisp, no border box). */
.rwh-main-badge,
.rwh-notification-badge {
    --rwh-badge: clamp(16px, calc(var(--rwh-host) * 0.38), 20px);
    position: absolute;
    top: calc(var(--rwh-host) * 0.1464 - var(--rwh-badge) / 2);
    right: calc(var(--rwh-host) * 0.1464 - var(--rwh-badge) / 2);
    min-width: var(--rwh-badge);
    height: var(--rwh-badge);
    padding: 0 calc(var(--rwh-badge) * 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    color: #ffffff;
    font-size: calc(var(--rwh-badge) * 0.6);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--rwh-ring-page), 0 3px 8px -2px rgba(225, 29, 72, 0.55);
    z-index: 20;
}

@keyframes rwh-badge-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.rwh-main-badge.pulse,
.rwh-main-badge.rwh-badge-pulse,
.rwh-notification-badge.rwh-badge-pulse {
}

@keyframes rwh-badge-pulse {
    0% { transform: scale(1); box-shadow: 0 3px 10px rgba(239, 68, 68, 0.5); }
    25% { transform: scale(1.3); box-shadow: 0 3px 25px rgba(239, 68, 68, 0.9); }
    50% { transform: scale(1.1); box-shadow: 0 3px 15px rgba(239, 68, 68, 0.7); }
    75% { transform: scale(1.25); box-shadow: 0 3px 22px rgba(239, 68, 68, 0.85); }
    100% { transform: scale(1); box-shadow: 0 3px 10px rgba(239, 68, 68, 0.5); }
}

.rwh-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


@keyframes rwh-sparkle-rotate {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
}

.rwh-widgets-container {
    position: absolute;
    bottom: 66px;
    left: 3px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.rwh-widgets-container.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rwh-widget-item {
    --rwh-host: var(--rwh-item);
    width: var(--rwh-item);
    height: var(--rwh-item);
    border-radius: 50%;
    background: var(--rwh-fab-main);
    box-shadow: var(--rwh-fab-ring), 0 8px 18px -7px var(--rwh-fab-main-glow), var(--rwh-fab-lift);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    border: 0;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
}

.rwh-widgets-container.show .rwh-widget-item {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.rwh-widgets-container.show .rwh-widget-item:nth-child(1) {  }
.rwh-widgets-container.show .rwh-widget-item:nth-child(2) {  }

.rwh-widget-item:hover {
    transform: scale(1.08) translateX(4px);
}

.rwh-widget-inner {
    position: relative;
    width: 20px;
    height: 20px;
    color: white;
}

.rwh-widget-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.rwh-dark-mode .rwh-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.rwh-dark-mode .rwh-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.rwh-dark-mode.dark-active .rwh-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.rwh-dark-mode.dark-active .rwh-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* Dark-mode widget (RZK 2026-10-25). The moon (shown in light mode) sits on a
   night sky full of stars; the sun (shown in dark mode) on a day sky with a warm
   glow and soft clouds. Night sky and stars are ONE background; the day sky is a ::before layer whose
   OPACITY cross-fades (composited), instead of swapping background-image, which
   cannot animate and repaints the circle. The shadow is the same in both
   states, so the tap repaints nothing outside that one layer.
   Icon colours: moonlight / sunlight. */
.rwh-dark-mode {
    background: var(--rwh-sky-stars) center / 100% 100% no-repeat, var(--rwh-fab-night);
    box-shadow: var(--rwh-fab-ring), 0 8px 18px -7px var(--rwh-fab-sky-glow), var(--rwh-fab-lift);
}
.rwh-dark-mode::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--rwh-sky-clouds) center / 100% 100% no-repeat, var(--rwh-sky-sunglow), var(--rwh-fab-day);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.rwh-dark-mode.dark-active::before { opacity: 1; }
.rwh-dark-mode .rwh-icon-moon {
    stroke: var(--rwh-moon);
    fill: var(--rwh-moon);
    fill-opacity: 0.92;
}
.rwh-dark-mode .rwh-icon-sun { stroke: var(--rwh-sun); } /* rays; the disc and its highlight carry their own fill */

.rwh-support {
    background: var(--rwh-fab-support);
    box-shadow: var(--rwh-fab-ring), 0 8px 18px -7px var(--rwh-fab-support-glow), var(--rwh-fab-lift);
}

.rwh-notification-badge.pulse {
}

.rwh-support-panel {
    position: absolute;
    bottom: 0;
    left: 70px;
    width: 400px;
    height: 600px;
    max-height: calc(100vh - 100px);
    background: var(--rwh-bg);
    border-radius: var(--rwh-radius);
    box-shadow: var(--rwh-shadow), 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateX(-20px);
    transform-origin: bottom left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rwh-support-panel.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
}

.rwh-panel-header {
    background: var(--rwh-gradient-2);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.rwh-panel-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

@keyframes rwh-header-glow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, 20px); }
}

.rwh-panel-title {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.rwh-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
    position: relative;
}

.rwh-header-avatar svg {
    width: 26px;
    height: 26px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.rwh-header-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--rwh-presence-dot, var(--rwh-success));
    border-radius: 50%;
    border: 3px solid #9d4edd;
    box-shadow: 0 0 8px var(--rwh-presence-glow, rgba(16, 185, 129, 0.6));
}

/* RZK 2026-08-26 fluid type. The support panel header was a flat 17px at
   every viewport. Ramped to the house scale (13.6px at 320px, 17px from
   768px up). Declared identically here and in the #rwh-widget-hub block
   below -- both are updated so the two agree rather than one silently
   winning on ID specificity. */
.rwh-header-text h3 {
    color: white;
    font-size: clamp(13.6px, 11.17px + 0.7589vw, 17px);
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rwh-header-text h3 span {
    background: linear-gradient(135deg, #ffffff 0%, #f8e1ff 30%, #e0aaff 60%, #c77dff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.rwh-header-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

@keyframes rwh-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
}

.rwh-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(8px);
}

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

.rwh-panel-close svg {
    width: 18px;
    height: 18px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rwh-tabs {
    display: flex;
    background: var(--rwh-bg-secondary);
    padding: 8px;
    gap: 6px;
    border-bottom: 1px solid var(--rwh-border);
}

.rwh-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: var(--rwh-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--rwh-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--rwh-text-secondary);
    position: relative;
    overflow: hidden;
}

.rwh-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rwh-gradient-2);
    opacity: 0;
    border-radius: inherit;
}

.rwh-tab span { position: relative; z-index: 1; }
.rwh-tab svg { width: 16px; height: 16px; position: relative; z-index: 1; stroke: currentColor; stroke-width: 2; fill: none; }

.rwh-tab:hover { color: var(--rwh-text); background: rgba(157, 78, 221, 0.08); }
.rwh-tab.active { color: white; box-shadow: var(--rwh-shadow-sm); }
.rwh-tab.active::before { opacity: 1; }

.rwh-tab-content {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.rwh-tab-content.active { display: flex; }

.rwh-chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rwh-chat-container::-webkit-scrollbar { display: none; }

.rwh-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.06) 0%, rgba(124, 58, 237, 0.03) 100%);
    border-radius: var(--rwh-radius-md);
    border: 1px solid rgba(157, 78, 221, 0.1);
    margin-bottom: 16px;
    flex-shrink: 0;
    transform-origin: top center;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
}

.rwh-chat-welcome.rwh-welcome-hidden {
    max-height: 0;
    opacity: 0;
    padding: 0 20px;
    margin-bottom: 0;
    border-color: transparent;
    transform: scale(0.95);
    pointer-events: none;
}

.rwh-welcome-avatar {
    position: relative;
    width: 80px;
    height: 80px;
}

.rwh-welcome-avatar svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
}

.rwh-status-dot-welcome {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--rwh-presence-dot, var(--rwh-success));
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 8px var(--rwh-presence-glow, rgba(16, 185, 129, 0.4));
}

.rwh-status-dot-welcome::after {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--rwh-presence-dot, var(--rwh-success));
    z-index: -1;
}

@keyframes rwh-online-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.rwh-chat-welcome h3 {
    margin: 0;
    /* RZK 2026-08-27: was a flat 18px. Same band as the ID copy below. */
    font-size: clamp(14.4px, 11.83px + 0.8036vw, 18px);
    font-weight: 700;
    color: var(--rwh-text);
}

.rwh-chat-welcome p {
    margin: 0;
    /* RZK 2026-08-27: was a flat 14px; 32 characters of prose, so floored at 12px. */
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    color: var(--rwh-text-secondary);
    line-height: 1.6;
}

.rwh-online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rwh-presence-text, var(--rwh-success));
    font-weight: 600;
    background: var(--rwh-presence-bg, rgba(16, 185, 129, 0.1));
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--rwh-presence-border, rgba(16, 185, 129, 0.2));
}

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

@keyframes rwh-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.rwh-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.rwh-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

@keyframes rwh-message-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.rwh-message.user { align-self: flex-end; }
.rwh-message.support { align-self: flex-start; }

.rwh-message-bubble {
    padding: 14px 18px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}

.rwh-message.user .rwh-message-bubble {
    background: var(--rwh-gradient-2);
    color: white;
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 12px rgba(157, 78, 221, 0.3);
}

.rwh-message.support .rwh-message-bubble {
    background: white;
    color: var(--rwh-text);
    border-bottom-right-radius: 6px;
    box-shadow: var(--rwh-shadow-sm);
    border: 1px solid var(--rwh-border);
}

.rwh-message-time {
    font-size: 12px;;
    color: var(--rwh-text-secondary);
    margin-top: 6px;
    padding: 0 4px;
}

.rwh-message.user .rwh-message-time { text-align: left; }
.rwh-message.support .rwh-message-time { text-align: right; }

.rwh-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.rwh-msg-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
    max-width: 180px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rwh-message.support .rwh-msg-attachment {
    background: rgba(157, 78, 221, 0.08);
    border-color: rgba(157, 78, 221, 0.15);
    color: var(--rwh-text);
}

.rwh-msg-attachment:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.rwh-msg-attachment-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.rwh-msg-attachment-icon.is-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
}

.rwh-msg-attachment-icon.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rwh-msg-attachment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rwh-msg-attachment-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.rwh-msg-attachment-size {
    font-size: 12px;;
    opacity: 0.7;
}

.rwh-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(10px);
}

.rwh-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.rwh-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.rwh-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.rwh-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.rwh-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.rwh-lightbox-close svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
}

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

.rwh-input-container {
    padding: 12px 16px 16px;
    background: var(--rwh-bg-secondary);
    border-top: 1px solid var(--rwh-border);
    flex-shrink: 0;
}

.rwh-attachment-preview {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    background: white;
    border-radius: 12px;
    border: 2px dashed var(--rwh-border);
}

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

.rwh-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
    border-radius: 10px;
    font-size: 12px;
    color: var(--rwh-text);
    position: relative;
    max-width: 150px;
    border: 1px solid rgba(157, 78, 221, 0.15);
}

.rwh-attachment-item .rwh-file-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.rwh-attachment-item .rwh-file-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--rwh-primary);
    fill: none;
    stroke-width: 2;
}

.rwh-attachment-item .rwh-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    font-weight: 500;
}

.rwh-attachment-item .rwh-remove-file {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    background: var(--rwh-danger);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rwh-attachment-item .rwh-remove-file:hover {
    transform: scale(1.15);
}

.rwh-attachment-item .rwh-remove-file svg {
    width: 10px;
    height: 10px;
    stroke: white;
    stroke-width: 3;
}

.rwh-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: white;
    border-radius: var(--rwh-radius);
    padding: 8px 8px 8px 12px;
    box-shadow: var(--rwh-shadow-sm);
    border: 2px solid transparent;
}

.rwh-input-wrapper:focus-within {
    border-color: var(--rwh-primary-light);
    box-shadow: var(--rwh-shadow-md), 0 0 0 4px rgba(157, 78, 221, 0.1);
}

.rwh-attach-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--rwh-primary);
}

.rwh-attach-btn:hover {
    background: var(--rwh-gradient-2);
    color: white;
    transform: scale(1.05);
}

.rwh-attach-btn svg {
    width: 18px;
    height: 18px;
}

.rwh-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--rwh-font);
    font-size: 14px;
    color: var(--rwh-text);
    resize: none;
    min-height: 24px;
    max-height: 200px;
    line-height: 1.6;
    direction: rtl;
    outline: none;
    overflow-y: hidden;
    padding: 8px 0;
}

.rwh-input.rwh-input-scrollable {
    overflow-y: auto;
}

.rwh-input::placeholder { color: var(--rwh-text-secondary); }

.rwh-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rwh-gradient-2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rwh-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(157, 78, 221, 0.4);
}

.rwh-send-btn:active { transform: scale(0.95); }

.rwh-send-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    transform: rotate(180deg);
}

.rwh-coming-soon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    gap: 16px;
}

.rwh-ai-avatar {
    position: relative;
    width: 100px;
    height: 100px;
}

.rwh-ai-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.5;
}

@keyframes rwh-ai-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.rwh-ai-avatar svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px rgba(79, 172, 254, 0.4));
}

.rwh-coming-soon h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rwh-ai-subtitle {
    margin: -8px 0 0 0;
    font-size: 14px;
    color: var(--rwh-text-secondary);
    font-weight: 500;
}

.rwh-coming-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    color: #0ea5e9;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid rgba(79, 172, 254, 0.3);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.2);
}

@keyframes rwh-badge-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(79, 172, 254, 0.2); }
    50% { box-shadow: 0 0 30px rgba(79, 172, 254, 0.4); }
}

.rwh-sparkle:last-child {  }

@keyframes rwh-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 0.8; }
}

.rwh-coming-desc {
    margin: 0;
    font-size: 13px;
    color: var(--rwh-text-secondary);
    line-height: 1.7;
    max-width: 280px;
}

.rwh-history-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rwh-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rwh-border);
}

.rwh-history-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rwh-text);
}


.rwh-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rwh-history-list::-webkit-scrollbar { display: none; }

.rwh-empty-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--rwh-text-secondary);
}

.rwh-empty-history svg { opacity: 0.4; }
.rwh-empty-history p { margin: 0; font-size: 15px; font-weight: 600; color: var(--rwh-text); }
.rwh-empty-history span { font-size: 13px; }

.rwh-chat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: var(--rwh-radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
}

.rwh-chat-item:hover {
    transform: translateX(-4px);
    box-shadow: var(--rwh-shadow-md);
    border-color: rgba(157, 78, 221, 0.2);
}

.rwh-chat-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rwh-chat-item-icon.human { background: var(--rwh-gradient-2); }
.rwh-chat-item-icon.ai { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.rwh-chat-item-icon svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.rwh-chat-item-content {
    flex: 1;
    min-width: 0;
}

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

.rwh-chat-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rwh-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rwh-chat-type-badge {
    font-size: 12px;;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 50px;
}

.rwh-chat-type-badge.human { background: rgba(157, 78, 221, 0.1); color: var(--rwh-primary); }
.rwh-chat-type-badge.ai { background: rgba(79, 172, 254, 0.1); color: #0ea5e9; }

.rwh-chat-item-time { font-size: 12px;; color: var(--rwh-text-secondary); }

.rwh-chat-item-preview {
    font-size: 12px;
    color: var(--rwh-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rwh-chat-item-delete {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 2;
}

.rwh-chat-item:hover .rwh-chat-item-delete { opacity: 1; }

.rwh-chat-item-delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: scale(1.1);
}

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

.rwh-chat-item-delete:hover svg { stroke: white; }

.rwh-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 20px;
    border: 1px solid var(--rwh-border);
    width: fit-content;
    box-shadow: var(--rwh-shadow-sm);
}

.rwh-typing-dot {
    width: 8px;
    height: 8px;
    background: var(--rwh-primary);
    border-radius: 50%;
}

.rwh-typing-dot:nth-child(2) {  }
.rwh-typing-dot:nth-child(3) {  }

@keyframes rwh-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@media (max-width: 768px) {
    /* RZK 2026-08-01 (task 6): deleted - these three were a 768px copy of
       the base rules at slightly smaller px values. The base rules are now
       fluid (--rwh-edge / --rwh-btn / --rwh-item) and cover every width. */
    
    .rwh-support-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
    }
    
    .rwh-support-panel.show { 
        transform: translateY(0); 
    }
    
    .rwh-support-panel .rwh-panel-header {
        flex-shrink: 0;
    }
    
    .rwh-support-panel .rwh-tabs {
        flex-shrink: 0;
    }
    
    .rwh-support-panel .rwh-tab-content {
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        display: none !important;
    }
    
    .rwh-support-panel .rwh-tab-content.active {
        display: flex !important;
    }
    
    .rwh-support-panel .rwh-chat-container {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y pinch-zoom;
    }
    
    .rwh-support-panel .rwh-history-container {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .rwh-support-panel .rwh-history-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y pinch-zoom;
    }
    
    .rwh-support-panel .rwh-input-container {
        flex-shrink: 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    .rwh-support-panel .rwh-coming-soon {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.rwh-panel-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: auto !important;
        -webkit-overflow-scrolling: none !important;
    }
    
    body.rwh-panel-open > *:not(.rwh-widget-hub):not(.rwh-lightbox-overlay) {
        pointer-events: none !important;
    }
}

@media (max-width: 480px) {
    .rwh-tabs {
        padding: 6px;
        gap: 3px;
    }
    
    .rwh-tab {
        padding: 10px 4px;
        gap: 4px;
        min-width: 0;
        flex: 1 1 0;
    }
    
    .rwh-tab span {
        display: block;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .rwh-tab svg { 
        width: 17px; 
        height: 17px;
        flex-shrink: 0;
    }
}

@media (max-width: 380px) {
    .rwh-tabs {
        padding: 5px;
        gap: 2px;
    }
    
    .rwh-tab {
        padding: 9px 3px;
        gap: 3px;
    }
    
    .rwh-tab span {
        font-size: 12px;
    }
    
    .rwh-tab svg { 
        width: 15px; 
        height: 15px;
    }
}

@media (max-width: 340px) {
    .rwh-tab span {
        font-size: 12px;;
    }
    
    .rwh-tab svg { 
        width: 14px; 
        height: 14px;
    }
}

.rwh-widget-hub * { box-sizing: border-box; }

/* ==========================================
   FLATSOME THEME OVERRIDES - CRITICAL
   ========================================== */

#rwh-widget-hub,
#rwh-widget-hub *,
#rwh-widget-hub *::before,
#rwh-widget-hub *::after {
    box-sizing: border-box !important;
    font-family: var(--rwh-font) !important;
    line-height: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#rwh-widget-hub .rwh-panel-close,
#rwh-widget-hub .rwh-tab,
#rwh-widget-hub .rwh-send-btn,
#rwh-widget-hub .rwh-chat-item-delete,
#rwh-widget-hub button {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 50% !important;
    min-height: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* RZK 2026-10-25: the `#rwh-widget-hub .rwh-main-button / .rwh-widget-item`
   !important copies that used to sit here are gone. They existed only to undo
   the reset block above, which no longer lists these two <div>s; the look of
   the launcher and the widgets is defined once, in the base rules. */

#rwh-widget-hub .rwh-tab {
    flex: 1 !important;
    padding: 12px 16px !important;
    border-radius: var(--rwh-radius-md) !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--rwh-text-secondary) !important;
}

#rwh-widget-hub .rwh-tab.active {
    color: white !important;
    box-shadow: var(--rwh-shadow-sm) !important;
}

#rwh-widget-hub .rwh-tab:hover:not(.active) {
    color: var(--rwh-text) !important;
    background: rgba(157, 78, 221, 0.08) !important;
}

#rwh-widget-hub .rwh-send-btn {
    width: 32px !important;
    height: 32px !important;
    background: var(--rwh-gradient-2) !important;
    border: none !important;
}

#rwh-widget-hub .rwh-send-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(157, 78, 221, 0.4) !important;
}

#rwh-widget-hub .rwh-attach-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--rwh-primary) !important;
}

#rwh-widget-hub .rwh-attach-btn:hover {
    background: var(--rwh-gradient-2) !important;
    color: white !important;
    transform: scale(1.05) !important;
}

#rwh-widget-hub .rwh-attach-btn svg {
    width: 18px !important;
    height: 18px !important;
}

#rwh-widget-hub .rwh-panel-close {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
}

#rwh-widget-hub .rwh-panel-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: rotate(90deg) !important;
}

#rwh-widget-hub .rwh-chat-item-delete {
    width: 28px !important;
    height: 28px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: none !important;
}

#rwh-widget-hub .rwh-chat-item-delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: scale(1.1) !important;
}

#rwh-widget-hub .rwh-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 32px;
    min-height: 32px !important;
    font-size: 14px !important;
    color: var(--rwh-text) !important;
    resize: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#rwh-widget-hub .rwh-input:placeholder-shown {
    line-height: 32px !important;
}

#rwh-widget-hub .rwh-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

#rwh-widget-hub .rwh-input::placeholder {
    color: var(--rwh-text-secondary) !important;
    opacity: 1 !important;
}

#rwh-widget-hub .rwh-input-wrapper {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    background: white !important;
    border-radius: var(--rwh-radius) !important;
    padding: 8px 8px 8px 16px !important;
    box-shadow: var(--rwh-shadow-sm) !important;
    border: 2px solid transparent !important;
}

#rwh-widget-hub .rwh-input-wrapper:focus-within {
    border-color: var(--rwh-primary-light) !important;
    box-shadow: var(--rwh-shadow-md), 0 0 0 4px rgba(157, 78, 221, 0.1) !important;
}

#rwh-widget-hub .rwh-support-panel {
    background: var(--rwh-bg) !important;
    border-radius: var(--rwh-radius) !important;
    box-shadow: var(--rwh-shadow), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

#rwh-widget-hub .rwh-panel-header {
    background: var(--rwh-gradient-2) !important;
    padding: 20px 24px !important;
}

/* RZK 2026-08-26 -- this ID-specificity rule is the one that actually wins
   on the page, so it carries the same ramp as the class rule above. */
#rwh-widget-hub .rwh-header-text h3 {
    color: white !important;
    font-size: clamp(13.6px, 11.17px + 0.7589vw, 17px) !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-transform: none !important;
}

#rwh-widget-hub .rwh-header-text h3 span {
    background: linear-gradient(135deg, #ffffff 0%, #f8e1ff 30%, #e0aaff 60%, #c77dff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

#rwh-widget-hub .rwh-header-text p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#rwh-widget-hub h3,
#rwh-widget-hub h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#rwh-widget-hub p {
    margin: 0 !important;
    padding: 0 !important;
}

#rwh-widget-hub .rwh-tabs {
    display: flex !important;
    background: var(--rwh-bg-secondary) !important;
    padding: 8px !important;
    gap: 6px !important;
    border-bottom: 1px solid var(--rwh-border) !important;
}

#rwh-widget-hub .rwh-chat-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    background: white !important;
    border-radius: var(--rwh-radius-md) !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
}

#rwh-widget-hub .rwh-chat-item:hover {
    transform: translateX(-4px) !important;
    box-shadow: var(--rwh-shadow-md) !important;
    border-color: rgba(157, 78, 221, 0.2) !important;
}

#rwh-widget-hub .rwh-message-bubble {
    padding: 14px 18px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

#rwh-widget-hub .rwh-message.user .rwh-message-bubble {
    background: var(--rwh-gradient-2) !important;
    color: white !important;
    border-bottom-left-radius: 6px !important;
    box-shadow: 0 2px 12px rgba(157, 78, 221, 0.3) !important;
}

#rwh-widget-hub .rwh-message.support .rwh-message-bubble {
    background: white !important;
    color: var(--rwh-text) !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: var(--rwh-shadow-sm) !important;
    border: 1px solid var(--rwh-border) !important;
}

#rwh-widget-hub svg {
    overflow: visible !important;
}

#rwh-widget-hub .rwh-panel-close svg,
#rwh-widget-hub .rwh-tab svg,
#rwh-widget-hub .rwh-send-btn svg,
#rwh-widget-hub .rwh-chat-item-delete svg,
#rwh-widget-hub .rwh-chat-item-icon svg {
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#rwh-widget-hub .rwh-panel-close svg {
    stroke: white !important;
}

#rwh-widget-hub .rwh-tab svg {
    width: 16px !important;
    height: 16px !important;
}

#rwh-widget-hub .rwh-send-btn svg {
    stroke: white !important;
    transform: rotate(180deg) !important;
}

#rwh-widget-hub .rwh-chat-item-icon svg {
    stroke: white !important;
}

#rwh-widget-hub .rwh-chat-item-delete svg {
    stroke: #dc2626 !important;
}

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

#rwh-widget-hub .rwh-chat-welcome {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 16px !important;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.06) 0%, rgba(124, 58, 237, 0.03) 100%) !important;
    border-radius: var(--rwh-radius-md) !important;
    border: 1px solid rgba(157, 78, 221, 0.1) !important;
    margin-bottom: 16px !important;
    max-height: 500px !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

#rwh-widget-hub .rwh-chat-welcome.rwh-welcome-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 20px !important;
    margin-bottom: 0 !important;
    border-color: transparent !important;
    transform: scale(0.95) !important;
    pointer-events: none !important;
}

#rwh-widget-hub .rwh-chat-welcome h3 {
    /* RZK 2026-08-27: this ID copy is the declaration that wins on the page. */
    font-size: clamp(14.4px, 11.83px + 0.8036vw, 18px) !important;
    font-weight: 700 !important;
    color: var(--rwh-text) !important;
}

#rwh-widget-hub .rwh-chat-welcome p {
    /* RZK 2026-08-27: this ID copy is the declaration that wins on the page. */
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px) !important;
    color: var(--rwh-text-secondary) !important;
    line-height: 1.6 !important;
}

#rwh-widget-hub .rwh-coming-soon h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

#rwh-widget-hub .rwh-history-header h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--rwh-text) !important;
}

#rwh-widget-hub a {
    text-decoration: none !important;
    color: inherit !important;
}

#rwh-widget-hub ul,
#rwh-widget-hub li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rwh-toast-notification {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999999;
    padding: 18px 28px;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    max-width: 380px;
    min-width: 250px;
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--rwh-font) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes rwh-toast-slide-in {
    from {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.rwh-toast-notification.rwh-toast-error {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.rwh-toast-notification.rwh-toast-success {
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
}

.rwh-toast-notification.rwh-toast-warning {
    background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
}

.rwh-toast-notification.rwh-toast-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.rwh-toast-notification .rwh-toast-icon {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    flex-shrink: 0;
}

.rwh-toast-notification .rwh-toast-message {
    flex: 1;
    line-height: 1.5;
}

.rwh-toast-notification.rwh-toast-fade-out {
}

@keyframes rwh-toast-fade-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(120%) scale(0.9);
    }
}

@media (max-width: 768px) {
    .rwh-toast-notification {
        min-width: 200px;
        max-width: 90vw;
        right: 5%;
        padding: 14px 20px;
        font-size: 14px;
    }
}

.rwh-error-message {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes rwh-error-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.rwh-chat-status {
    font-size: 12px;;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}

.rwh-chat-status.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.rwh-chat-status.replied {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.rwh-chat-status.closed {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.rwh-chat-count {
    font-size: 12px;;
    color: var(--rwh-text-secondary);
}

.rwh-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: var(--rwh-danger);
    color: white;
    font-size: 12px;;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.rwh-chat-item.active {
    background: rgba(157, 78, 221, 0.08) !important;
    border-color: var(--rwh-primary) !important;
}

#rwh-widget-hub .rwh-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.rwh-toast-confirm .rwh-toast-confirm-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.rwh-toast-confirm-buttons {
    display: flex;
    gap: 10px;
    direction: rtl;
}

.rwh-toast-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: var(--rwh-font) !important;
}

.rwh-toast-btn-confirm {
    background: white;
    color: #ff8c00;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rwh-toast-btn-confirm:hover {
    background: #fff8f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

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

.rwh-toast-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    #rwh-widget-hub .rwh-input {
        font-size: 16px !important;
    }
}


/* ============================================ */
/* PERFORMANCE GATE (added for TBT / main-thread)                       */
/* The support panel and the secondary widgets fly-out are hidden with  */
/* visibility:hidden until opened. visibility:hidden does NOT stop CSS   */
/* animations, so their glow / pulse / sparkle / blink animations were   */
/* running on every page load (and forever) while invisible, forcing a   */
/* compositor commit every frame. Pause every animation inside them      */
/* while they are closed; they resume the instant the widget JS adds     */
/* .show. The always-visible launcher (.rwh-main-button .rwh-pulse-ring) */
/* is intentionally NOT gated. Transitions are unaffected by play-state. */
/* ============================================ */
.rwh-support-panel:not(.show),
.rwh-support-panel:not(.show) *,
.rwh-support-panel:not(.show) *::before,
.rwh-support-panel:not(.show) *::after,
.rwh-widgets-container:not(.show),
.rwh-widgets-container:not(.show) *,
.rwh-widgets-container:not(.show) *::before,
.rwh-widgets-container:not(.show) *::after {
}

/* ------------------------------------------------------------------------ */
/* CORRECTION (2026-09-23): the launcher is NOT always visible.              */
/*                                                                          */
/* The gate above states that ".rwh-main-button .rwh-pulse-ring" is          */
/* "intentionally NOT gated" because the launcher is always on screen.       */
/* Measured on a live product page, mobile 390x844, after the delay-JS burst:*/
/*                                                                          */
/*   div.rwh-pulse-ring                visibility:hidden  opacity:0.14       */
/*   #rwh-main-btn .rwh-btn-hidden     visibility:hidden  opacity:0          */
/*   #rwh-widget-hub .rwh-suppressed   visibility:hidden  opacity:0          */
/*   bounding rect top = 972px on an 844px viewport -> off screen entirely   */
/*                                                                          */
/* ...while "animation: rwh-pulse 2s ease-out infinite" kept running. Because*/
/* visibility:hidden does not stop animations - the very reason the gate      */
/* above exists - this one exempted animation was ticking forever on an       */
/* element nobody can see. Cost, measured over an 8 SECOND TRUE-IDLE window   */
/* (no input, page fully settled, 4x CPU throttle, median of 3 runs):         */
/*                                                                          */
/*   style recalculations   482  ->    3                                     */
/*   recalc time          204ms  ->  4.5ms                                   */
/*   main-thread task    2,586ms ->  170ms   (33% of idle -> 2%)             */
/*                                                                          */
/* That matters here specifically because this site's INP is presentation-   */
/* delay bound (~0ms scripting, ~270ms presentation): a frame pipeline that  */
/* is never allowed to go quiet is exactly what delays the paint after a tap.*/
/*                                                                          */
/* will-change / layer promotion was tested and did NOT help - Blink will    */
/* not composite an animation on a visibility:hidden element, so it stays on */
/* the main thread regardless.                                              */
/*                                                                          */
/* Scoped to the hidden states only, so the pulse returns the instant the    */
/* launcher is genuinely shown (widget-hub.js removes these classes). Zero    */
/* visual change: the element is invisible in every state matched here.      */
/* ------------------------------------------------------------------------ */
/* RZK 2026-10-12 (round 3): this gate is now a no-op -- .rwh-pulse-ring no
   longer declares an animation to disable (see the note at .rwh-pulse-ring
   above, which removed it for ALL states, not just the hidden ones this rule
   covered). Leaving the rule would be dead CSS, so it is removed. The
   measurement and reasoning that produced it are preserved in the comment
   block above, because they are still the reason the animation is gone.    */

@media (prefers-reduced-motion: reduce) {
    #rwh-widget-hub *,
    #rwh-widget-hub *::before,
    #rwh-widget-hub *::after {
    }
}

/* ── Support presence states (v2.7.0) ──────────────────────────────────
   Status colours are driven entirely by CSS variables that the widget sets
   inline on #rwh-widget-hub (see applyPresence() in widget-hub.js), so they
   survive WP Rocket "Remove Unused CSS" — which previously stripped the old
   .rwh-status-away / .rwh-status-offline override rules (those classes only
   appear after JS runs), leaving the dots stuck green. The variables are also
   re-asserted by a runtime-injected stylesheet for full RUCSS immunity.

   These rules below only handle the non-colour tweaks (offline = no pulsing)
   keyed off the data attribute, with the colours already handled by the
   variables on the base rules above. */
[data-rwh-presence="offline"] .rwh-status-dot,
[data-rwh-presence="offline"] .rwh-online-status .rwh-dot,
[data-rwh-presence="offline"] .rwh-support-status-dot {
}

[data-rwh-presence="offline"] .rwh-status-dot-welcome::after {
    display: none !important;
}

/* Legacy class-based fallbacks (kept for any non-cached page where the class
   is present in the DOM before the variables apply). Harmless duplicates. */
.rwh-status-dot.rwh-status-away,
.rwh-header-status.rwh-status-away,
.rwh-status-dot-welcome.rwh-status-away,
.rwh-online-status.rwh-status-away .rwh-dot {
    background: #f59e0b;
}

.rwh-status-dot.rwh-status-offline,
.rwh-header-status.rwh-status-offline,
.rwh-status-dot-welcome.rwh-status-offline,
.rwh-online-status.rwh-status-offline .rwh-dot {
    background: #94a3b8;
    box-shadow: none;
}

/* =========================================================================
   FAQ shortcut card in the support welcome state (v2.7.1)
   Pure HTML/CSS link so it works regardless of WP Rocket Delay JS; styling
   uses the existing rwh design tokens so it inlines cleanly under RUCSS.
   ========================================================================= */
.rwh-faq-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--rwh-bg, #ffffff);
    border: 1px solid rgba(157, 78, 221, 0.18);
    border-radius: var(--rwh-radius-md, 16px);
    box-shadow: 0 4px 14px rgba(157, 78, 221, 0.08);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.rwh-faq-card:hover {
    transform: translateY(-2px);
    border-color: rgba(157, 78, 221, 0.35);
    box-shadow: 0 10px 24px rgba(157, 78, 221, 0.18);
}
.rwh-faq-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--rwh-gradient-2, linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
}
.rwh-faq-icon svg { width: 22px; height: 22px; }
.rwh-faq-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    min-width: 0;
}
.rwh-faq-title { font-size: clamp(12px, 10.57px + 0.4464vw, 14px); font-weight: 700; color: var(--rwh-text, #1e293b); }
.rwh-faq-desc { font-size: 12px; font-weight: 500; color: var(--rwh-text-secondary, #64748b); line-height: 1.5; }
.rwh-faq-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rwh-primary, #9d4edd);
    opacity: 0.7;
}
.rwh-faq-card:hover .rwh-faq-arrow { opacity: 1; transform: translateX(-4px); }
.rwh-faq-arrow svg { width: 18px; height: 18px; }
.rwh-chat-welcome.rwh-welcome-hidden .rwh-faq-card { display: none; }

/* ============================================================================
   Tasks 5 & 7 — history-tab total badge + closed-chat composer lock.
   Both elements ship in the served template markup, so RUCSS keeps their CSS.
   ============================================================================ */
.rwh-tab-badge {
    position: relative;
    z-index: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rwh-font);
    font-size: 12px;;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: var(--rwh-danger);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}
.rwh-tab.active .rwh-tab-badge {
    background: #fff;
    color: var(--rwh-danger);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#rwh-widget-hub .rwh-closed-composer {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 16px 16px;
    padding: 13px 16px;
    background: var(--rwh-bg-secondary);
    border: 1px dashed var(--rwh-border);
    border-radius: var(--rwh-radius-md);
    color: var(--rwh-text-secondary);
    font-family: var(--rwh-font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
#rwh-widget-hub .rwh-closed-composer-icon {
    flex-shrink: 0;
    color: var(--rwh-text-secondary);
    opacity: 0.85;
}
#rwh-widget-hub .rwh-closed-composer-text { flex: 0 1 auto; }