/* =============================================================================
   Qudurat Real-Time Chat — Main Stylesheet
   BEM-structured, RTL-aware, mobile-first responsive chat widget.

   Table of Contents:
     1.  CSS Custom Properties (Design Tokens)
     2.  Keyframe Animations
     3.  Root Wrapper & Overlay
     4.  Chat Window
     5.  Header
     6.  Body / Message Log
     7.  Message Bubbles
     8.  Load More
     9.  Loading Spinner
    10.  Empty State
    11.  Footer / Compose Area
    12.  Status Bar
    13.  Character Counter
    14.  Typing Indicator
    15.  Minimized State
    16.  Scrollbar Overrides
    17.  Screen-Reader Utilities
    18.  Responsive — Tablet  (768px – 1024px)
    19.  Responsive — Desktop (1025px +)
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {

    /* Brand */
    --qc-color-primary          : #1699ca;
    --qc-color-primary-dark     : #1180ab;
    --qc-color-primary-light    : #e8f6fb;
    --qc-color-primary-text     : #ffffff;

    /* Surfaces */
    --qc-color-bg-window        : #ffffff;
    --qc-color-bg-body          : #f0f4f8;
    --qc-color-bg-footer        : #ffffff;
    --qc-color-bg-bubble-sent   : #1699ca;
    --qc-color-bg-bubble-recv   : #f1f5f9;
    --qc-color-bg-overlay       : rgba(0, 0, 0, 0.45);

    /* Text */
    --qc-color-text-base        : #1a202c;
    --qc-color-text-muted       : #718096;
    --qc-color-text-bubble-sent : #ffffff;
    --qc-color-text-bubble-recv : #2d3748;
    --qc-color-text-meta        : rgba(255, 255, 255, 0.75);
    --qc-color-text-meta-recv   : #a0aec0;

    /* Borders */
    --qc-color-border           : #e2e8f0;
    --qc-color-border-input     : #cbd5e0;
    --qc-color-border-focus     : #1699ca;
    --qc-border-radius-window   : 16px;
    --qc-border-radius-bubble   : 18px;
    --qc-border-radius-btn      : 50%;
    --qc-border-radius-input    : 12px;

    /* Shadows */
    --qc-shadow-window          : 0 20px 60px rgba(0, 0, 0, 0.18),
                                  0 8px 24px  rgba(0, 0, 0, 0.10);
    --qc-shadow-btn             : 0 2px 8px   rgba(22, 153, 202, 0.45);
    --qc-shadow-bubble-sent     : 0 2px 6px   rgba(22, 153, 202, 0.25);
    --qc-shadow-bubble-recv     : 0 1px 4px   rgba(0, 0, 0, 0.06);

    /* Spacing */
    --qc-space-xs               : 4px;
    --qc-space-sm               : 8px;
    --qc-space-md               : 12px;
    --qc-space-lg               : 16px;
    --qc-space-xl               : 20px;
    --qc-space-2xl              : 24px;

    /* Typography */
    --qc-font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI",
                                  Roboto, "Helvetica Neue", Arial,
                                  "Noto Sans Arabic", sans-serif;
    --qc-font-size-base         : 14px;
    --qc-font-size-sm           : 12px;
    --qc-font-size-xs           : 11px;
    --qc-font-size-lg           : 15px;
    --qc-font-size-title        : 16px;
    --qc-line-height-base       : 1.55;

    /* Layout */
    --qc-window-width           : 360px;
    --qc-window-max-height      : 580px;
    --qc-header-height          : 60px;
    --qc-footer-min-height      : 64px;
    --qc-avatar-size            : 38px;
    --qc-btn-size               : 36px;
    --qc-inset-bottom           : 20px;
    --qc-inset-inline-end       : 24px;

    /* Z-index stack */
    --qc-z-overlay              : 99998;
    --qc-z-window               : 99999;

    /* Transitions */
    --qc-transition-base        : 200ms ease;
    --qc-transition-slow        : 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =============================================================================
   2. KEYFRAME ANIMATIONS
   ============================================================================= */

/* Window entrance — slides up from below and fades in. */
@keyframes qc-slide-up {
    from {
        opacity   : 0;
        transform : translateY(28px) scale(0.97);
    }
    to {
        opacity   : 1;
        transform : translateY(0) scale(1);
    }
}

/* New message bubble pop-in. */
@keyframes qc-bubble-pop {
    0%   { opacity: 0; transform: scale(0.85) translateY(6px); }
    60%  { transform: scale(1.03) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Spinner rotation. */
@keyframes qc-spin {
    to { transform: rotate(360deg); }
}

/* Subtle dot pulse for the loading indicator. */
@keyframes qc-dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* Overlay fade. */
@keyframes qc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* =============================================================================
   3. ROOT WRAPPER & OVERLAY
   ============================================================================= */

/**
 * .qudurat-chat-wrapper
 * Root element for the entire widget. Rendered in wp_footer.
 * Coordinates must be set per breakpoint (see sections 18–19).
 */
.qudurat-chat-wrapper {
    /* Scoped reset — only targets children of this component. */
    box-sizing  : border-box;
    font-family : var(--qc-font-family);
    font-size   : var(--qc-font-size-base);
    line-height : var(--qc-line-height-base);
    color       : var(--qc-color-text-base);
    direction   : rtl; /* Arabic-first. Logical properties handle mirroring. */
    position    : fixed;
    z-index     : var(--qc-z-window);

    /* Mobile default — full-screen. Overridden on larger breakpoints. */
    inset              : 0;
    width              : 100vw;
    /* 100vh on mobile browsers INCLUDES the area behind the dynamic address/
       toolbar, so the bottom of the window (e.g. the guest "تواصل مع الدعم"
       CTA) is pushed below the visible viewport and becomes unreachable.
       100dvh (dynamic viewport height) tracks the actually-visible area, so the
       flex column fits and the body scrolls to reveal the CTA. vh stays first
       as a fallback for any browser without dvh support. */
    height             : 100vh;
    height             : 100dvh;
    max-height         : 100vh;
    max-height         : 100dvh;
    border-radius      : 0;
}

.qudurat-chat-wrapper *,
.qudurat-chat-wrapper *::before,
.qudurat-chat-wrapper *::after {
    box-sizing  : inherit;
    margin      : 0;
    padding     : 0;
}

/**
 * .qudurat-chat-overlay
 * Semi-transparent backdrop rendered below the window.
 * Clicking it closes the modal (JS handles the event).
 */
.qudurat-chat-overlay {
    position         : fixed;
    inset            : 0;
    background-color : var(--qc-color-bg-overlay);
    z-index          : var(--qc-z-overlay);
    animation        : qc-fade-in var(--qc-transition-base) both;

    /* Hidden on desktop — window floats without dimming the page. */
}


/* =============================================================================
   4. CHAT WINDOW
   ============================================================================= */

/**
 * .qudurat-chat-window
 * The visible floating panel. Flex column so header, body, and footer
 * each occupy their natural heights with the body expanding to fill the rest.
 */
.qudurat-chat-window {
    position        : relative;
    z-index         : var(--qc-z-window);
    display         : flex;
    flex-direction  : column;
    width           : 100%;
    height          : 100%;
    background-color: var(--qc-color-bg-window);
    border-radius   : 0; /* Mobile: full-screen, no rounding. */
    box-shadow      : none;
    overflow        : hidden;
    animation       : qc-slide-up var(--qc-transition-slow) both;
}


/* =============================================================================
   5. HEADER
   ============================================================================= */

.qudurat-chat-header {
    display          : flex;
    align-items      : center;
    gap              : var(--qc-space-sm);
    min-height       : var(--qc-header-height);
    padding-inline   : var(--qc-space-lg);
    padding-block    : var(--qc-space-sm);
    background-color : var(--qc-color-primary);
    color            : var(--qc-color-primary-text);
    flex-shrink      : 0;
    user-select      : none;
}

/* Avatar container */
.qudurat-chat-header__avatar {
    position      : relative;
    width         : var(--qc-avatar-size);
    height        : var(--qc-avatar-size);
    border-radius : 50%;
    overflow      : hidden;
    flex-shrink   : 0;
    background-color : var(--qc-color-primary-dark);
    display       : flex;
    align-items   : center;
    justify-content: center;
    border        : 2px solid rgba(255, 255, 255, 0.3);
}

.qudurat-chat-header__avatar-initials {
    font-size   : var(--qc-font-size-sm);
    font-weight : 700;
    color       : #fff;
    letter-spacing: 0.5px;
}

.qudurat-chat-header__avatar-img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* Name + status column */
.qudurat-chat-header__meta {
    flex         : 1;
    min-width    : 0; /* Allow text truncation inside flex child. */
    overflow     : hidden;
}

.qudurat-chat-header__title {
    font-size      : var(--qc-font-size-title);
    font-weight    : 600;
    color          : #fff;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
    line-height    : 1.2;
    /* Prevent h2 default margin from leaking in. */
    margin         : 0;
}

.qudurat-chat-header__status {
    display     : block;
    font-size   : var(--qc-font-size-xs);
    color       : rgba(255, 255, 255, 0.8);
    margin-block-start: 2px;
    min-height  : 14px;
}

/* Action buttons (minimize + close) */
.qudurat-chat-header__actions {
    display     : flex;
    align-items : center;
    gap         : var(--qc-space-xs);
    flex-shrink : 0;
    margin-inline-start: auto;
}

.qudurat-chat-header__btn {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : var(--qc-btn-size);
    height           : var(--qc-btn-size);
    border           : none;
    border-radius    : var(--qc-border-radius-btn);
    background-color : rgba(255, 255, 255, 0.15);
    color            : #fff;
    font-size        : 18px;
    line-height      : 1;
    cursor           : pointer;
    transition       : background-color var(--qc-transition-base);
    flex-shrink      : 0;
}

.qudurat-chat-header__btn:hover,
.qudurat-chat-header__btn:focus-visible {
    background-color : rgba(255, 255, 255, 0.28);
    outline          : 2px solid rgba(255, 255, 255, 0.5);
    outline-offset   : 2px;
}

.qudurat-chat-header__btn:active {
    background-color : rgba(255, 255, 255, 0.1);
}


/* =============================================================================
   6. BODY / MESSAGE LOG
   ============================================================================= */

.qudurat-chat-body {
    flex              : 1 1 auto;
    overflow-y        : auto;
    overflow-x        : hidden;
    background-color  : var(--qc-color-bg-body);
    padding-block     : var(--qc-space-lg);
    padding-inline    : var(--qc-space-md);
    display           : flex;
    flex-direction    : column;
    gap               : 0;
    /* Smooth momentum scrolling on iOS. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y     : contain;
    scroll-behavior           : smooth;
}

/* The <ul> that holds message <li> items. */
.qudurat-chat-body__messages {
    list-style     : none;
    display        : flex;
    flex-direction : column;
    gap            : var(--qc-space-xs);
    flex           : 1;
}


/* =============================================================================
   7. MESSAGE BUBBLES
   ============================================================================= */

/**
 * .qudurat-msg
 * Each message is a flex row. Logical properties (start/end) handle RTL
 * automatically — no separate [dir="rtl"] overrides needed.
 */
.qudurat-msg {
    display        : flex;
    align-items    : flex-end;
    gap            : var(--qc-space-sm);
    width          : 100%;
    animation      : qc-bubble-pop 280ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
    padding-block  : 2px;
}

/* --- Sent messages (current user) ----------------------------------------- */
.qudurat-msg--sent {
    justify-content : flex-start; /* In RTL, flex-start = right side visually. */
}

.qudurat-msg--sent .qudurat-msg__bubble {
    background-color  : var(--qc-color-bg-bubble-sent);
    color             : var(--qc-color-text-bubble-sent);
    box-shadow        : var(--qc-shadow-bubble-sent);
    border-radius     : var(--qc-border-radius-bubble)
                        var(--qc-border-radius-bubble)
                        4px
                        var(--qc-border-radius-bubble);
    /* ↑ Flat corner in the direction of the conversation flow (trailing edge). */
    margin-inline-end : var(--qc-space-xs);
}

.qudurat-msg--sent .qudurat-msg__meta {
    color : var(--qc-color-text-meta);
}

/* --- Received messages (other participant) --------------------------------- */
.qudurat-msg--received {
    justify-content : flex-end; /* In RTL, flex-end = left side visually. */
}

.qudurat-msg--received .qudurat-msg__bubble {
    background-color   : var(--qc-color-bg-bubble-recv);
    color              : var(--qc-color-text-bubble-recv);
    box-shadow         : var(--qc-shadow-bubble-recv);
    border-radius      : var(--qc-border-radius-bubble)
                         var(--qc-border-radius-bubble)
                         var(--qc-border-radius-bubble)
                         4px;
    /* ↑ Flat corner on the leading edge (where avatar would sit). */
    margin-inline-start: var(--qc-space-xs);
}

.qudurat-msg--received .qudurat-msg__meta {
    color : var(--qc-color-text-meta-recv);
}

/* --- Bubble shell ---------------------------------------------------------- */
.qudurat-msg__bubble {
    max-width       : 76%;
    padding-block   : var(--qc-space-sm);
    padding-inline  : var(--qc-space-md);
    word-break      : break-word;
    overflow-wrap   : break-word;
    hyphens         : auto;
    transition      : box-shadow var(--qc-transition-base);
}

/* --- Text content ---------------------------------------------------------- */
.qudurat-msg__text {
    font-size   : var(--qc-font-size-base);
    line-height : var(--qc-line-height-base);
    white-space : pre-wrap; /* Preserve intentional line breaks. */
}

/* --- Image attachment ------------------------------------------------------- */
.qudurat-msg__image {
    display          : block;
    max-width        : 100%;
    max-height       : 220px;
    object-fit       : cover;
    border-radius    : calc(var(--qc-border-radius-bubble) - 4px);
}

/* --- Meta row (time + read indicator) ------------------------------------- */
.qudurat-msg__meta {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;
    gap             : var(--qc-space-xs);
    margin-block-start: 4px;
    font-size       : var(--qc-font-size-xs);
    line-height     : 1;
    user-select     : none;
}

.qudurat-msg__time {
    letter-spacing: 0.2px;
}

.qudurat-msg__read-indicator {
    font-size : 10px;
    letter-spacing: -0.5px;
}

/* --- Optimistic bubble (pending send) ------------------------------------- */
.qudurat-msg--optimistic .qudurat-msg__bubble {
    opacity : 0.72;
}

/* --- Consecutive message grouping (tighten spacing for same-sender runs) -- */
.qudurat-msg + .qudurat-msg {
    margin-block-start: 2px;
}

/* Slightly more breathing room when sender changes. */
.qudurat-msg--sent  + .qudurat-msg--received,
.qudurat-msg--received + .qudurat-msg--sent {
    margin-block-start: var(--qc-space-md);
}


/* =============================================================================
   8. LOAD MORE
   ============================================================================= */

.qudurat-chat-body__load-more {
    display          : flex;
    justify-content  : center;
    padding-block-end: var(--qc-space-md);
}

.qudurat-chat-body__load-more-btn {
    display          : inline-flex;
    align-items      : center;
    gap              : var(--qc-space-xs);
    padding-block    : var(--qc-space-xs);
    padding-inline   : var(--qc-space-lg);
    border           : 1px solid var(--qc-color-primary);
    border-radius    : 20px;
    background-color : transparent;
    color            : var(--qc-color-primary);
    font-size        : var(--qc-font-size-sm);
    font-weight      : 500;
    cursor           : pointer;
    transition       : background-color var(--qc-transition-base),
                       color            var(--qc-transition-base);
}

.qudurat-chat-body__load-more-btn:hover,
.qudurat-chat-body__load-more-btn:focus-visible {
    background-color : var(--qc-color-primary);
    color            : #fff;
    outline          : 2px solid var(--qc-color-primary);
    outline-offset   : 2px;
}


/* =============================================================================
   9. LOADING SPINNER
   ============================================================================= */

.qudurat-chat-body__loading {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : var(--qc-space-md);
    padding-block   : var(--qc-space-2xl);
    color           : var(--qc-color-text-muted);
    font-size       : var(--qc-font-size-sm);
}

.qudurat-chat-body__spinner {
    display : flex;
    gap     : 5px;
}

.qudurat-chat-body__spinner-dot {
    display          : block;
    width            : 8px;
    height           : 8px;
    border-radius    : 50%;
    background-color : var(--qc-color-primary);
    animation        : qc-dot-pulse 1.2s infinite ease-in-out;
}

.qudurat-chat-body__spinner-dot:nth-child(1) { animation-delay: 0s;    }
.qudurat-chat-body__spinner-dot:nth-child(2) { animation-delay: 0.2s;  }
.qudurat-chat-body__spinner-dot:nth-child(3) { animation-delay: 0.4s;  }

.qudurat-chat-body__loading-text {
    font-size : var(--qc-font-size-sm);
    color     : var(--qc-color-text-muted);
}


/* =============================================================================
   10. EMPTY STATE
   ============================================================================= */

.qudurat-chat-body__empty {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : var(--qc-space-sm);
    padding-block   : var(--qc-space-2xl);
    text-align      : center;
    color           : var(--qc-color-text-muted);
    flex            : 1;
}

.qudurat-chat-body__empty-icon {
    font-size   : 40px;
    line-height : 1;
    opacity     : 0.6;
}

.qudurat-chat-body__empty-text {
    font-size : var(--qc-font-size-sm);
    max-width : 200px;
}


/* =============================================================================
   11. FOOTER / COMPOSE AREA
   ============================================================================= */

.qudurat-chat-footer {
    background-color : var(--qc-color-bg-footer);
    border-block-start: 1px solid var(--qc-color-border);
    padding-block    : var(--qc-space-sm);
    padding-inline   : var(--qc-space-md);
    flex-shrink      : 0;
    /* iOS safe-area so the input clears the home indicator bar. */
    padding-block-end: max(
        var(--qc-space-sm),
        env(safe-area-inset-bottom, var(--qc-space-sm))
    );
}

/* --- Compose row ----------------------------------------------------------- */
.qudurat-chat-footer__compose {
    display     : flex;
    align-items : flex-end;
    gap         : var(--qc-space-sm);
    background-color : #f8fafc;
    border       : 1px solid var(--qc-color-border-input);
    border-radius: var(--qc-border-radius-input);
    padding-block : var(--qc-space-xs);
    padding-inline: var(--qc-space-sm);
    transition   : border-color var(--qc-transition-base),
                   box-shadow   var(--qc-transition-base);
}

.qudurat-chat-footer__compose:focus-within {
    border-color : var(--qc-color-border-focus);
    box-shadow   : 0 0 0 3px rgba(22, 153, 202, 0.15);
    background-color: #fff;
}

/* --- Textarea -------------------------------------------------------------- */
.qudurat-chat-footer__input {
    flex             : 1;
    border           : none;
    outline          : none;
    background-color : transparent;
    color            : var(--qc-color-text-base);
    font-family      : var(--qc-font-family);
    font-size        : var(--qc-font-size-base);
    line-height      : var(--qc-line-height-base);
    resize           : none;
    overflow-y       : auto;
    max-height       : 120px;
    min-height       : 36px;
    padding-block    : var(--qc-space-xs);
    padding-inline   : var(--qc-space-xs);
    direction        : auto; /* Respect mixed LTR/RTL content. */
    -webkit-overflow-scrolling: touch;
}

.qudurat-chat-footer__input::placeholder {
    color   : var(--qc-color-text-muted);
    opacity : 1;
}

.qudurat-chat-footer__input:focus {
    outline : none;
}

/* --- Send button ----------------------------------------------------------- */
.qudurat-chat-footer__send-btn {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    flex-shrink      : 0;
    width            : 40px;
    height           : 40px;
    border           : none;
    border-radius    : var(--qc-border-radius-btn);
    background-color : var(--qc-color-primary);
    color            : #fff;
    font-size        : 16px;
    cursor           : pointer;
    box-shadow       : var(--qc-shadow-btn);
    transition       : background-color var(--qc-transition-base),
                       transform        var(--qc-transition-base),
                       box-shadow       var(--qc-transition-base);
    /* Align button to the bottom of the compose row for multi-line input. */
    align-self       : flex-end;
    margin-block-end : 2px;
}

.qudurat-chat-footer__send-btn:hover:not(:disabled),
.qudurat-chat-footer__send-btn:focus-visible:not(:disabled) {
    background-color : var(--qc-color-primary-dark);
    box-shadow       : 0 4px 14px rgba(22, 153, 202, 0.5);
    transform        : scale(1.06);
    outline          : 2px solid var(--qc-color-primary);
    outline-offset   : 2px;
}

.qudurat-chat-footer__send-btn:active:not(:disabled) {
    transform        : scale(0.94);
    box-shadow       : var(--qc-shadow-btn);
}

.qudurat-chat-footer__send-btn:disabled {
    background-color : #b0d9ed;
    box-shadow       : none;
    cursor           : not-allowed;
    transform        : none;
}

/* Send icon */
.qudurat-chat-footer__send-icon {
    line-height : 1;
    font-size   : 14px;
}

/* Send spinner (inline rotation while request is in flight) */
.qudurat-chat-footer__send-spinner {
    display          : block;
    width            : 16px;
    height           : 16px;
    border           : 2px solid rgba(255, 255, 255, 0.35);
    border-top-color : #fff;
    border-radius    : 50%;
    animation        : qc-spin 0.7s linear infinite;
}


/* =============================================================================
   12. STATUS BAR
   ============================================================================= */

.qudurat-chat-footer__status {
    font-size        : var(--qc-font-size-sm);
    line-height      : 1.4;
    border-radius    : 8px;
    padding-block    : var(--qc-space-xs);
    padding-inline   : var(--qc-space-sm);
    margin-block-end : var(--qc-space-xs);
    text-align       : center;
}

.qudurat-chat-footer__status--error {
    background-color : #fff5f5;
    color            : #c53030;
    border           : 1px solid #feb2b2;
}

.qudurat-chat-footer__status--warning {
    background-color : #fffbeb;
    color            : #b7791f;
    border           : 1px solid #f6e05e;
}

.qudurat-chat-footer__status--success {
    background-color : #f0fff4;
    color            : #276749;
    border           : 1px solid #9ae6b4;
}


/* =============================================================================
   13. CHARACTER COUNTER
   ============================================================================= */

.qudurat-chat-footer__counter {
    display          : flex;
    justify-content  : flex-end;
    gap              : 2px;
    font-size        : var(--qc-font-size-xs);
    color            : var(--qc-color-text-muted);
    padding-inline-end: var(--qc-space-xs);
    padding-block-start: 2px;
    user-select      : none;
}

.qudurat-chat-footer__counter--warning {
    color : #e53e3e;
    font-weight: 600;
}


/* =============================================================================
   14. TYPING INDICATOR
   ============================================================================= */

.qudurat-chat-footer__typing {
    display          : flex;
    align-items      : center;
    gap              : var(--qc-space-xs);
    padding-inline   : var(--qc-space-xs);
    padding-block-end: var(--qc-space-xs);
    min-height       : 18px;
}

.qudurat-chat-footer__typing-text {
    font-size   : var(--qc-font-size-xs);
    color       : var(--qc-color-text-muted);
    font-style  : italic;
}


/* =============================================================================
   15. MINIMIZED STATE
   ============================================================================= */

/**
 * .qudurat-chat-wrapper--minimized
 * Only the header strip is visible; body and footer are hidden.
 * Pinned to the bottom corner on larger screens (overridden there too).
 */
.qudurat-chat-wrapper--minimized .qudurat-chat-window {
    height : var(--qc-header-height);
}

.qudurat-chat-wrapper--minimized .qudurat-chat-body,
.qudurat-chat-wrapper--minimized .qudurat-chat-footer {
    display : none;
}

.qudurat-chat-wrapper--minimized .qudurat-chat-overlay {
    display : none;
}

/* Header gets rounded bottom corners when minimized on desktop/tablet. */
.qudurat-chat-wrapper--minimized .qudurat-chat-header {
    border-radius : 0 0 var(--qc-border-radius-window) var(--qc-border-radius-window);
    cursor        : pointer;
}


/* =============================================================================
   16. SCROLLBAR OVERRIDES
   Custom, minimal scrollbar for the message body on WebKit browsers.
   Firefox uses the standardised `scrollbar-width` property.
   ============================================================================= */

.qudurat-chat-body {
    scrollbar-width : thin;
    scrollbar-color : rgba(22, 153, 202, 0.3) transparent;
}

.qudurat-chat-body::-webkit-scrollbar {
    width : 4px;
}

.qudurat-chat-body::-webkit-scrollbar-track {
    background    : transparent;
    border-radius : 2px;
}

.qudurat-chat-body::-webkit-scrollbar-thumb {
    background-color : rgba(22, 153, 202, 0.35);
    border-radius    : 2px;
}

.qudurat-chat-body::-webkit-scrollbar-thumb:hover {
    background-color : rgba(22, 153, 202, 0.6);
}

/* Textarea scrollbar. */
.qudurat-chat-footer__input {
    scrollbar-width : thin;
    scrollbar-color : rgba(0, 0, 0, 0.15) transparent;
}

.qudurat-chat-footer__input::-webkit-scrollbar {
    width : 3px;
}

.qudurat-chat-footer__input::-webkit-scrollbar-thumb {
    background-color : rgba(0, 0, 0, 0.15);
    border-radius    : 2px;
}


/* =============================================================================
   17. SCREEN-READER UTILITIES
   Mirrors WordPress core's .screen-reader-text helper, scoped to avoid
   conflicts if WP's version is already present.
   ============================================================================= */

.qudurat-chat-wrapper .screen-reader-text {
    clip      : rect(1px, 1px, 1px, 1px);
    clip-path : inset(50%);
    height    : 1px;
    margin    : -1px;
    overflow  : hidden;
    padding   : 0;
    position  : absolute;
    width     : 1px;
    word-wrap : normal !important;
}


/* =============================================================================
   18. RESPONSIVE — TABLET (768px – 1024px)
   The widget remains a floating panel but is slightly wider to provide
   comfortable touch targets. The overlay is shown.
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    :root {
        --qc-window-width     : 420px;
        --qc-window-max-height: 620px;
    }

    /* Position the widget in the bottom inline-end corner. */
    .qudurat-chat-wrapper {
        inset                : auto;           /* Clear the full-screen mobile values. */
        inset-block-end      : var(--qc-inset-bottom);
        inset-inline-end     : var(--qc-inset-inline-end);
        width                : var(--qc-window-width);
        height               : var(--qc-window-max-height);
        max-height           : var(--qc-window-max-height);
        border-radius        : var(--qc-border-radius-window);
    }

    .qudurat-chat-window {
        border-radius : var(--qc-border-radius-window);
        box-shadow    : var(--qc-shadow-window);
    }

    /* Overlay dims the page on tablet. */
    .qudurat-chat-overlay {
        display : block;
    }

    /* Restore bubble max-width for wider panel. */
    .qudurat-msg__bubble {
        max-width : 72%;
    }

    /* Minimized: shrink wrapper to header height only. */
    .qudurat-chat-wrapper--minimized {
        height        : var(--qc-header-height);
        border-radius : var(--qc-border-radius-window);
    }
}


/* =============================================================================
   19. RESPONSIVE — DESKTOP (1025px +)
   Classic floating chat bubble anchored to the bottom-inline-end corner.
   No overlay — the widget coexists with the page content.
   ============================================================================= */

@media (min-width: 1025px) {

    :root {
        --qc-window-width     : 380px;
        --qc-window-max-height: 600px;
    }

    /* Floating position — does NOT cover the page (no overlay needed). */
    .qudurat-chat-wrapper {
        inset                : auto;
        inset-block-end      : var(--qc-inset-bottom);
        inset-inline-end     : var(--qc-inset-inline-end);
        width                : var(--qc-window-width);
        height               : var(--qc-window-max-height);
        max-height           : var(--qc-window-max-height);
        border-radius        : var(--qc-border-radius-window);
    }

    .qudurat-chat-window {
        border-radius : var(--qc-border-radius-window);
        box-shadow    : var(--qc-shadow-window);
    }

    /* Desktop: overlay is hidden — widget floats without dimming the page. */
    .qudurat-chat-overlay {
        display : none;
    }

    /* Slightly tighter bubble width on the narrower desktop panel. */
    .qudurat-msg__bubble {
        max-width : 74%;
    }

    /* Minimized: shrink to header-strip only, keep corner anchoring. */
    .qudurat-chat-wrapper--minimized {
        height        : var(--qc-header-height);
        border-radius : var(--qc-border-radius-window);
    }

    .qudurat-chat-wrapper--minimized .qudurat-chat-window {
        border-radius : var(--qc-border-radius-window);
        box-shadow    : var(--qc-shadow-window);
    }
}
/* =============================================================================
   ADDITIONS FOR v3.1.0 — Append to qudurat-messenger.css
   ============================================================================= */

/* =============================================================================
   A. SETTINGS POPUP (Fix 1)
   ============================================================================= */

.qc-sidebar__profile {
    position: relative; /* anchor for popup positioning */
}

.qc-settings-popup {
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-end: 12px;
    width: 260px;
    background: var(--qc-bg-sidebar);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 100;
    animation: qc-popup-in 180ms var(--qc-ease) both;
    border: 1px solid var(--qc-border-light);
}

@keyframes qc-popup-in {
    from { opacity: 0; transform: translateY(8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Arrow pointer at bottom */
.qc-settings-popup::after {
    content: '';
    position: absolute;
    inset-block-end: -7px;
    inset-inline-end: 20px;
    width: 14px;
    height: 14px;
    background: var(--qc-bg-sidebar);
    border-inline-end: 1px solid var(--qc-border-light);
    border-block-end: 1px solid var(--qc-border-light);
    transform: rotate(45deg);
}

.qc-settings-popup__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--qc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--qc-primary-light);
}

.qc-settings-popup__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-settings-popup__avatar span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.qc-settings-popup__info {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qc-settings-popup__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--qc-text-primary);
}

.qc-settings-popup__email {
    font-size: 12.5px;
    color: var(--qc-text-secondary);
    direction: ltr; /* emails are always LTR */
    unicode-bidi: plaintext;
    word-break: break-all;
}


/* =============================================================================
   B. FLOATING CHAT BUBBLE (Fix 5)
   Rendered on non-dashboard pages via chat-modal.php
   ============================================================================= */

.qc-floating-bubble {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--qc-primary, #1699CA);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(22, 153, 202, 0.4), 0 2px 6px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99990;
    transition: transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms;
}

.qc-floating-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(22, 153, 202, 0.5), 0 3px 10px rgba(0,0,0,.15);
}

.qc-floating-bubble:active {
    transform: scale(.94);
}

.qc-floating-bubble svg {
    width: 26px;
    height: 26px;
}

/* Unread badge on the bubble */
.qc-floating-bubble__badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #E53E3E;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    line-height: 1;
}

/* Hide bubble when the full messenger is open on the same page */
.qc-messenger ~ .qc-floating-bubble { display: none; }

/* Hide bubble when modal is open */
body.qudurat-chat-open .qc-floating-bubble { display: none; }

/* =============================================================================
 * v3.5 PATCH — Definitive layout, background, and chatbot styles.
 * Applied after all base rules so it acts as the final override layer.
 * ============================================================================= */

/* ---------- Bug 1: Modal background — flush, solid, clean ---------- */

#qudurat-chat-messages.qudurat-chat-body,
.qudurat-chat-body {
    background-color : #EFEAE2 !important;
    background-image : none !important;
    padding          : 0 !important;
    overflow-y       : auto;
    display          : flex;
    flex-direction   : column;
    flex             : 1;
}

#qudurat-chat-messages-list,
.qudurat-chat-body__messages {
    display         : flex;
    flex-direction  : column;
    list-style      : none;
    margin          : 0;
    padding         : 12px 10px;
    gap             : 2px;
    flex            : 1;
    background-color: transparent;
}

/* Bubble row alignment — JS now applies BOTH qc-msg and qudurat-msg classes */
.qc-msg, .qudurat-msg {
    display       : flex;
    width         : 100%;
    padding-block : 1px;
}

.qc-msg--sent, .qudurat-msg--sent {
    justify-content : flex-start; /* In RTL: visually right side */
}
.qc-msg--received, .qudurat-msg--received {
    justify-content : flex-end;   /* In RTL: visually left side */
}

.qc-msg__bubble, .qudurat-msg__bubble {
    max-width      : 75%;
    padding        : 7px 11px 5px;
    word-break     : break-word;
    overflow-wrap  : break-word;
    border-radius  : 10px;
    position       : relative;
}

.qc-msg--sent .qc-msg__bubble,
.qudurat-msg--sent .qudurat-msg__bubble,
.qc-msg--sent .qudurat-msg__bubble,
.qudurat-msg--sent .qc-msg__bubble {
    background-color : #D9FDD3;
    color            : #111B21;
    border-radius    : 10px 10px 10px 3px;
    box-shadow       : 0 1px 1px rgba(0,0,0,0.10);
}

.qc-msg--received .qc-msg__bubble,
.qudurat-msg--received .qudurat-msg__bubble,
.qc-msg--received .qudurat-msg__bubble,
.qudurat-msg--received .qc-msg__bubble {
    background-color : #FFFFFF;
    color            : #111B21;
    border-radius    : 10px 10px 3px 10px;
    box-shadow       : 0 1px 1px rgba(0,0,0,0.07);
}

.qc-msg--optimistic .qc-msg__bubble,
.qudurat-msg--optimistic .qudurat-msg__bubble {
    opacity : 0.72;
}

/* Sender change spacing */
.qc-msg--sent + .qc-msg--received,
.qc-msg--received + .qc-msg--sent,
.qudurat-msg--sent + .qudurat-msg--received,
.qudurat-msg--received + .qudurat-msg--sent {
    margin-block-start : 8px;
}

.qc-msg__text, .qudurat-msg__text {
    font-size   : 14px;
    line-height : 1.45;
    white-space : pre-wrap;
}

.qc-msg__meta, .qudurat-msg__meta {
    display            : flex;
    align-items        : center;
    justify-content    : flex-end;
    gap                : 3px;
    margin-block-start : 3px;
    font-size          : 11px;
    color              : #667781;
    user-select        : none;
}

.qc-msg__time, .qudurat-msg__time {
    font-size : 11px;
    color     : #667781;
}

.qc-msg__read, .qudurat-msg__read-indicator {
    font-size      : 12px;
    color          : #667781;
    letter-spacing : -1px;
    line-height    : 1;
}

.qc-msg--read .qc-msg__read,
.qudurat-msg--read .qudurat-msg__read-indicator,
.qc-msg--read .qudurat-msg__read-indicator,
.qudurat-msg--read .qc-msg__read,
.qudurat-msg__read-indicator--read,
.qc-msg__read--done {
    color : #53BDEB !important; /* WhatsApp blue tick */
}

/* =============================================================================
 * v3.5 — GUEST CHATBOT VIEW STYLES
 * ============================================================================= */

#qc-chatbot-view {
    background-color : #EFEAE2;
    padding          : 16px 14px;
    overflow-y       : auto;
    flex             : 1;
    direction        : rtl;
    text-align       : right;
}

.qc-chatbot__loading {
    text-align : center;
    color      : #888;
    padding    : 30px 16px;
}

.qc-chatbot__spinner {
    width         : 28px;
    height        : 28px;
    margin        : 0 auto;
    border-radius : 50%;
    border        : 3px solid rgba(22, 153, 202, 0.25);
    border-top    : 3px solid #1699CA;
    animation     : qc-bot-spin 800ms linear infinite;
}

@keyframes qc-bot-spin {
    to { transform: rotate(360deg); }
}

/* Welcome bubble — bot side */
.qc-chatbot__welcome {
    display     : flex;
    align-items : flex-start;
    gap         : 8px;
    margin-bottom : 16px;
    animation   : qc-bot-fade 320ms ease-out both;
}

@keyframes qc-bot-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qc-chatbot__avatar-mini {
    flex-shrink     : 0;
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : linear-gradient(135deg, #1699CA, #1180AB);
    color           : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.qc-chatbot__welcome-bubble {
    background    : #FFFFFF;
    color         : #111B21;
    padding       : 10px 13px;
    border-radius : 10px 10px 3px 10px;
    box-shadow    : 0 1px 2px rgba(0,0,0,0.08);
    font-size     : 14px;
    line-height   : 1.55;
    max-width     : 85%;
}

/* FAQ list section */
.qc-chatbot__faqs {
    margin-top : 4px;
    animation  : qc-bot-fade 380ms ease-out both;
    animation-delay : 80ms;
}

.qc-chatbot__faqs-title {
    font-size     : 12px;
    color         : #667781;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding       : 0 4px;
    margin-bottom : 8px;
}

.qc-chatbot__faq-list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : flex;
    flex-direction : column;
    gap        : 6px;
}

.qc-chatbot__faq-item {
    background    : #FFFFFF;
    border        : 1px solid rgba(0,0,0,0.06);
    border-radius : 10px;
    overflow      : hidden;
    transition    : box-shadow 200ms;
}

.qc-chatbot__faq-item:hover {
    box-shadow : 0 2px 6px rgba(0,0,0,0.08);
}

.qc-chatbot__faq-item--open {
    box-shadow : 0 2px 8px rgba(22, 153, 202, 0.15);
    border-color: rgba(22, 153, 202, 0.30);
}

.qc-chatbot__faq-q {
    width            : 100%;
    background       : transparent;
    border           : 0;
    padding          : 12px 14px;
    text-align       : right;
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    gap              : 10px;
    font-size        : 14px;
    font-weight      : 500;
    color            : #111B21;
    line-height      : 1.4;
    transition       : background 150ms;
}

.qc-chatbot__faq-q:hover {
    background : #F7F8FA;
}

.qc-chatbot__faq-q-icon {
    flex-shrink : 0;
    font-size   : 14px;
}

.qc-chatbot__faq-q-text {
    flex      : 1;
    text-align: right;
}

.qc-chatbot__faq-q-arrow {
    flex-shrink : 0;
    color       : #667781;
    font-size   : 12px;
    transition  : transform 200ms;
}

.qc-chatbot__faq-item--open .qc-chatbot__faq-q-arrow {
    transform : rotate(180deg);
    color     : #1699CA;
}

.qc-chatbot__faq-a {
    padding       : 0 14px 12px 14px;
    border-top    : 1px solid rgba(0,0,0,0.05);
    margin-top    : 0;
    padding-top   : 12px;
    color         : #3A3A3A;
    font-size     : 13.5px;
    line-height   : 1.6;
    background    : #FAFBFC;
    animation     : qc-bot-fade 220ms ease-out;
}

.qc-chatbot__faq-a[hidden] {
    display : none;
}

/* CTA — Talk to Human */
.qc-chatbot__cta {
    margin-top    : 24px;
    padding-top   : 18px;
    border-top    : 1px dashed rgba(0,0,0,0.12);
    text-align    : center;
    animation     : qc-bot-fade 460ms ease-out both;
    animation-delay : 160ms;
}

.qc-chatbot__cta-text {
    color       : #667781;
    font-size   : 13px;
    margin-bottom: 10px;
}

.qc-chatbot__cta-btn {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    background       : linear-gradient(135deg, #1699CA, #1180AB);
    color            : #FFFFFF !important;
    padding          : 11px 22px;
    border-radius    : 24px;
    font-size        : 14px;
    font-weight      : 600;
    text-decoration  : none;
    box-shadow       : 0 3px 10px rgba(22, 153, 202, 0.30);
    transition       : transform 160ms, box-shadow 200ms;
}

.qc-chatbot__cta-btn:hover,
.qc-chatbot__cta-btn:focus {
    transform : translateY(-2px);
    box-shadow: 0 5px 14px rgba(22, 153, 202, 0.40);
    color     : #FFFFFF !important;
    text-decoration: none;
}

.qc-chatbot__cta-btn:active {
    transform : translateY(0);
    box-shadow: 0 2px 6px rgba(22, 153, 202, 0.30);
}

/* Picker badge styling (carry-over from v3.4) */
.qc-picker-badge {
    background        : #E53E3E;
    color             : #fff;
    font-size         : 11px;
    min-width         : 18px;
    height            : 18px;
    border-radius     : 9px;
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    padding           : 0 5px;
    font-weight       : 700;
    margin-inline-start: 6px;
    flex-shrink       : 0;
}


/* =============================================================================
 * v3.6 REAL-TIME PATCH — Typing indicator + chatbot fill fix
 * ============================================================================= */

/* Fix 1: Chatbot fills the entire modal body — no white gap */
#qc-chatbot-view {
    display          : flex !important;
    flex-direction   : column !important;
    flex             : 1 !important;
    min-height       : 0 !important;
    overflow-y       : auto !important;
    background-color : #EFEAE2 !important;
    padding          : 16px 14px !important;
}

/* Ensure the modal body itself uses flex so children stretch */
.qudurat-chat-body,
#qudurat-chat-messages {
    display        : flex !important;
    flex-direction : column !important;
    flex           : 1 !important;
    min-height     : 0 !important;
}

/* Push the CTA button to the bottom */
.qc-chatbot__cta {
    margin-top : auto !important;
    padding-top: 18px;
}

/* v3.6: Typing indicator animation */
.qc-typing-active {
    color      : #1699CA !important;
    font-style : italic;
    animation  : qc-typing-pulse 1.2s ease-in-out infinite;
}

@keyframes qc-typing-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* v3.6: Smooth scroll for message list */
#qudurat-chat-messages-list,
.qc-chatarea__msg-list {
    scroll-behavior : smooth;
}

/* v3.6: Enhanced bubble shadows for depth */
.qc-msg--sent .qc-msg__bubble,
.qudurat-msg--sent .qudurat-msg__bubble {
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);
}

.qc-msg--received .qc-msg__bubble,
.qudurat-msg--received .qudurat-msg__bubble {
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03);
}

/* =============================================================================
 * v4.0 WORLD-CLASS ENHANCEMENTS
 * ============================================================================= */

/* --- Connection Status Banner --- */
.qc-connection-banner{position:absolute;bottom:0;left:0;right:0;padding:4px 12px;font-size:12px;font-weight:600;text-align:center;z-index:10;transition:opacity .4s,transform .3s;transform:translateY(0)}
.qc-conn--ok{background:#D4EDDA;color:#155724}
.qc-conn--warning{background:#FFF3CD;color:#856404;animation:qc-pulse-banner 1.2s infinite}
.qc-conn--error{background:#F8D7DA;color:#721C24}
.qc-conn--fade{opacity:0;transform:translateY(4px)}
@keyframes qc-pulse-banner{0%,100%{opacity:1}50%{opacity:.6}}

/* --- New Messages Pill --- */
.qc-new-msgs-pill{position:sticky;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;background:rgba(22,153,202,.92);color:#fff;border:none;border-radius:20px;padding:6px 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 3px 12px rgba(22,153,202,.35);backdrop-filter:blur(4px);transition:transform .2s,box-shadow .2s;animation:qc-pill-pop .3s cubic-bezier(.34,1.4,.64,1) both;display:block;margin:0 auto;width:fit-content}
.qc-new-msgs-pill:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 5px 16px rgba(22,153,202,.45)}
@keyframes qc-pill-pop{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* --- Send Failure / Retry --- */
.qc-msg--failed .qc-msg__bubble{border:1.5px solid #E53E3E!important;background:#FFF5F5!important}
.qc-msg--failed .qc-msg__meta{color:#E53E3E}
.qc-msg__retry{display:block;width:100%;margin-top:6px;padding:5px 10px;border:none;border-radius:6px;background:#E53E3E;color:#fff;font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:background .15s}
.qc-msg__retry:hover{background:#C53030}


/* =============================================================================
 * v4.0 الميزات الجديدة — Reactions, Reply, Pin, Search, Mute, Date Separators
 * ============================================================================= */

/* --- ⏰ فاصل الوقت الذكي --- */
.qc-date-separator{display:flex;align-items:center;justify-content:center;margin:16px 0 12px;list-style:none;pointer-events:none}
.qc-date-separator span{background:rgba(255,255,255,.92);color:#52606D;font-size:11px;font-weight:600;padding:4px 12px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06);letter-spacing:.3px}

/* --- ⭐ أزرار التفاعل السريعة على الفقاعة --- */
.qc-msg__actions{position:absolute;top:-14px;display:none;gap:2px;background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:2px;z-index:5;animation:qc-actions-pop .15s ease-out}
.qc-msg--sent .qc-msg__actions{left:-4px}
.qc-msg--received .qc-msg__actions{right:-4px}
.qc-msg:hover .qc-msg__actions{display:flex}
.qc-msg__action{background:transparent;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .12s}
.qc-msg__action:hover{background:#F0F2F5}
@keyframes qc-actions-pop{from{opacity:0;transform:translateY(4px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.qc-msg__bubble{position:relative}

/* --- ⭐ قائمة اختيار الإيموجي (Reaction Picker) --- */
.qc-reaction-picker{position:absolute;background:#fff;border-radius:24px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,.18);display:flex;gap:2px;z-index:100;animation:qc-picker-in .2s cubic-bezier(.34,1.4,.64,1)}
.qc-reaction-picker__btn{background:transparent;border:none;width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;transition:transform .15s,background .12s;display:flex;align-items:center;justify-content:center}
.qc-reaction-picker__btn:hover{transform:scale(1.3);background:#F0F2F5}
@keyframes qc-picker-in{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}

/* --- ⭐ التفاعلات المعروضة على الرسالة --- */
.qc-reactions{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;margin-bottom:-3px}
.qc-reaction{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:1px 7px;font-size:12px;display:inline-flex;align-items:center;gap:2px;cursor:pointer;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.qc-reaction:hover{transform:scale(1.08)}
.qc-reaction--mine{background:#DCF4FF;border-color:#1699CA}
.qc-reaction__count{font-size:11px;color:#52606D;font-weight:600}
.qc-reaction--mine .qc-reaction__count{color:#1699CA}

/* --- 💬 معاينة الرد فوق صندوق الكتابة --- */
.qc-reply-preview{display:flex;align-items:stretch;background:#F7F8FA;border-top:1px solid rgba(0,0,0,.06);padding:8px 12px;gap:10px;animation:qc-reply-slide .2s ease-out}
.qc-reply-preview__bar{width:3px;background:#1699CA;border-radius:2px;flex-shrink:0}
.qc-reply-preview__content{flex:1;min-width:0;overflow:hidden}
.qc-reply-preview__sender{font-size:12px;font-weight:600;color:#1699CA;margin-bottom:2px}
.qc-reply-preview__text{font-size:13px;color:#52606D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-reply-preview__cancel{background:transparent;border:none;font-size:20px;color:#7A8694;cursor:pointer;padding:0 4px;line-height:1;transition:color .12s}
.qc-reply-preview__cancel:hover{color:#E53E3E}
@keyframes qc-reply-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* --- 💬 اقتباس الرد داخل الفقاعة --- */
.qc-msg__reply-quote{background:rgba(0,0,0,.04);border-right:3px solid #1699CA;padding:5px 8px;margin-bottom:4px;border-radius:4px;cursor:pointer;transition:background .12s;max-width:100%;overflow:hidden}
.qc-msg__reply-quote:hover{background:rgba(0,0,0,.07)}
.qc-msg--sent .qc-msg__reply-quote{background:rgba(0,0,0,.05);border-right-color:#0F7A99}
.qc-msg__reply-sender{font-size:11px;font-weight:600;color:#1699CA;margin-bottom:1px}
.qc-msg__reply-text{font-size:12px;color:#52606D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- 📌 شريط الرسالة المثبتة --- */
.qc-pin-banner{position:absolute;top:100%;left:0;right:0;background:#FFF9E6;border-bottom:1px solid #F5D547;padding:8px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;z-index:8;animation:qc-pin-slide .25s ease-out;box-shadow:0 2px 4px rgba(0,0,0,.04)}
.qc-pin-banner:hover{background:#FFF3C4}
.qc-pin-banner__icon{font-size:16px;flex-shrink:0}
.qc-pin-banner__content{flex:1;min-width:0;overflow:hidden}
.qc-pin-banner__label{font-size:11px;font-weight:700;color:#B7791F;text-transform:uppercase;letter-spacing:.5px}
.qc-pin-banner__text{font-size:13px;color:#52606D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.qc-pin-banner__close{background:transparent;border:none;font-size:18px;color:#B7791F;cursor:pointer;padding:0 6px;line-height:1;transition:color .12s}
.qc-pin-banner__close:hover{color:#E53E3E}
@keyframes qc-pin-slide{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

/* --- التظليل عند الانتقال إلى رسالة (من تثبيت أو رد) --- */
.qc-msg--highlight .qc-msg__bubble{animation:qc-highlight 2s ease-out;box-shadow:0 0 0 3px rgba(22,153,202,.4)}
@keyframes qc-highlight{0%,100%{box-shadow:0 0 0 0 rgba(22,153,202,0)}30%{box-shadow:0 0 0 4px rgba(22,153,202,.5)}}

/* --- 🔍 شريط البحث --- */
.qc-search-bar{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);padding:8px 12px;display:flex;align-items:center;gap:8px;z-index:9;animation:qc-search-slide .2s ease-out;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.qc-search-bar__input{flex:1;border:1px solid #E0E4E8;border-radius:18px;padding:7px 14px;font-size:14px;outline:none;transition:border-color .15s;font-family:inherit}
.qc-search-bar__input:focus{border-color:#1699CA;box-shadow:0 0 0 3px rgba(22,153,202,.15)}
.qc-search-bar__count{font-size:12px;color:#7A8694;min-width:55px;text-align:center}
.qc-search-bar__close{background:transparent;border:none;font-size:22px;color:#7A8694;cursor:pointer;padding:0 6px;line-height:1;transition:color .12s}
.qc-search-bar__close:hover{color:#E53E3E}
@keyframes qc-search-slide{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

/* --- تظليل نتائج البحث في النص --- */
.qc-msg__text mark{background:#FFF59D;color:inherit;padding:1px 2px;border-radius:2px;font-weight:600}
.qc-msg--search-hit .qc-msg__bubble{box-shadow:0 0 0 2px #FFC107}

/* --- إخفاء أزرار الإجراءات على الموبايل (نعتمد على الضغط المطوّل) --- */
@media (max-width: 768px){
    .qc-msg__actions{display:none !important}
    .qc-msg__action{width:32px;height:32px}
}


/* =============================================================================
 * v5.0 إعادة تصميم UX — أزرار ظاهرة، قوائم منسدلة، شريط أدوات
 * ============================================================================= */

/* --- إخفاء الأزرار القديمة (تم استبدالها) --- */
.qc-msg__actions { display: none !important; }

/* ============================================================
 * زر القائمة (⋮) على كل رسالة — كبير، ظاهر، يمكن لمسه
 * ============================================================ */
.qc-msg__menu-btn {
    position: absolute;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.05);
    color: #52606D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .15s ease;
    z-index: 5;
    padding: 0;
}
.qc-msg--sent .qc-msg__menu-btn { left: -34px; }
.qc-msg--received .qc-msg__menu-btn { right: -34px; }

/* يظهر دائماً على الموبايل + عند hover على الديسكتوب */
.qc-msg:hover .qc-msg__menu-btn,
.qc-msg__menu-btn:focus-visible {
    opacity: 1;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.qc-msg__menu-btn:hover {
    background: #FFFFFF;
    color: #1699CA;
    transform: scale(1.1);
}

/* على الموبايل: الزر ظاهر دائماً */
@media (max-width: 768px) {
    .qc-msg__menu-btn {
        opacity: 0.7;
        width: 32px;
        height: 32px;
    }
    .qc-msg--sent .qc-msg__menu-btn { left: -38px; }
    .qc-msg--received .qc-msg__menu-btn { right: -38px; }
}

/* ============================================================
 * قائمة خيارات الرسالة المنسدلة
 * ============================================================ */
.qc-msg-menu {
    position: fixed;
    z-index: 10000;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 6px;
    opacity: 0;
    transform: scale(0.92) translateY(-4px);
    transition: opacity .18s, transform .18s cubic-bezier(.34,1.4,.64,1);
    direction: rtl;
    text-align: right;
}
.qc-msg-menu--ready {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* صف التفاعلات السريع */
.qc-msg-menu__reactions {
    display: flex;
    gap: 2px;
    padding: 4px;
    justify-content: space-around;
}
.qc-msg-menu__react {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: transform .15s cubic-bezier(.34,1.4,.64,1), background .12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qc-msg-menu__react:hover,
.qc-msg-menu__react:focus-visible {
    transform: scale(1.35);
    background: #F0F2F5;
}
.qc-msg-menu__react:active {
    transform: scale(1.1);
}

/* الفاصل */
.qc-msg-menu__sep {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 4px 6px;
}

/* عناصر القائمة */
.qc-msg-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #1A202C;
    text-align: right;
    transition: background .12s;
    font-family: inherit;
}
.qc-msg-menu__item:hover,
.qc-msg-menu__item:focus-visible {
    background: #F7F8FA;
}
.qc-msg-menu__item:active {
    background: #EBEDF0;
}
.qc-msg-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #52606D;
    flex-shrink: 0;
}

/* ============================================================
 * شريط أدوات رأس المحادثة (🔍 🔇)
 * ============================================================ */
.qc-header-toolbar {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-inline-start: auto;
    padding: 0 8px;
}

.qc-header-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #52606D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0;
}
.qc-header-btn:hover {
    background: rgba(22,153,202,0.10);
    color: #1699CA;
}
.qc-header-btn:active {
    transform: scale(0.92);
}
.qc-header-btn--active {
    background: rgba(229,62,62,0.12);
    color: #E53E3E;
}
.qc-header-btn--active:hover {
    background: rgba(229,62,62,0.18);
}

/* تأكد من أن شريط الأدوات يندمج بشكل صحيح */
#qc-chatarea-header,
#qudurat-chat-header {
    display: flex;
    align-items: center;
}

/* ============================================================
 * نصيحة الميزات (Onboarding Hint)
 * ============================================================ */
.qc-feature-hint {
    position: fixed;
    bottom: 90px;
    right: 20px;
    left: 20px;
    max-width: 380px;
    margin-inline: auto;
    background: linear-gradient(135deg, #FFFFFF, #F7F9FC);
    border: 1px solid rgba(22,153,202,0.2);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(22,153,202,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 9999;
    direction: rtl;
    text-align: right;
    animation: qc-hint-in .35s cubic-bezier(.34,1.4,.64,1);
}
.qc-feature-hint--out {
    animation: qc-hint-out .3s ease-in forwards;
}
.qc-feature-hint__icon {
    font-size: 28px;
    flex-shrink: 0;
    animation: qc-hint-icon-bounce 1.4s ease-in-out infinite;
}
.qc-feature-hint__content {
    flex: 1;
    min-width: 0;
}
.qc-feature-hint__title {
    font-size: 14px;
    font-weight: 700;
    color: #1699CA;
    margin-bottom: 4px;
}
.qc-feature-hint__text {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.5;
}
.qc-feature-hint__text strong {
    color: #1699CA;
    font-weight: 700;
    background: rgba(22,153,202,0.10);
    padding: 1px 6px;
    border-radius: 4px;
}
.qc-feature-hint__close {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #A0AEC0;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color .12s;
}
.qc-feature-hint__close:hover {
    color: #E53E3E;
}

@keyframes qc-hint-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qc-hint-out {
    to { opacity: 0; transform: translateY(20px) scale(.95); }
}
@keyframes qc-hint-icon-bounce {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

/* ============================================================
 * تحسينات للموبايل
 * ============================================================ */
@media (max-width: 768px) {
    .qc-msg-menu { min-width: 240px; }
    .qc-msg-menu__react { width: 42px; height: 42px; font-size: 26px; }
    .qc-msg-menu__item { padding: 12px 16px; font-size: 15px; }
    .qc-feature-hint { right: 12px; left: 12px; }
    .qc-header-btn { width: 42px; height: 42px; }
}


/* =============================================================================
 * 🔧 v6.0 — إصلاحات وتحسينات نهائية
 * 1. تحسين شكل زر "تحميل رسائل أقدم"
 * 2. إخفاء عناصر التثبيت (الميزة أُلغيت)
 * 3. توافق شامل مع الموبايل/التابلت
 * 4. تحسين قائمة الرسالة لتلائم النافذة الصغيرة
 * ============================================================================= */

/* --- 1️⃣ زر "تحميل رسائل أقدم" بشكل أنيق ومتناسق --- */
.qudurat-chat-body__load-more,
.qc-load-more {
    /* لا تستخدم !important على display: فالـ JS يخفي/يُظهر هذا الزر عبر
       style="display:none" المضمَّن (_showLoadMore). مع !important كان الزر
       يبقى ظاهراً دائماً في الفقاعة مهما حاول الـ JS إخفاءه (لا توجد رسائل
       أقدم). بدون !important: المضمَّن display:none يفوز عند الإخفاء، وعند
       الإظهار (display:'') تعود قاعدة flex هذه فيظهر طبيعياً. */
    display: flex;
    justify-content: center !important;
    padding: 12px 16px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.qudurat-chat-body__load-more-btn,
.qc-load-more-btn,
#qc-loadmore-btn,
#qudurat-chat-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 18px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1699CA !important;
    border: 1px solid rgba(22, 153, 202, 0.25) !important;
    border-radius: 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(4px) !important;
    outline: none !important;
    font-family: inherit !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

.qudurat-chat-body__load-more-btn::before,
.qc-load-more-btn::before,
#qc-loadmore-btn::before,
#qudurat-chat-load-more-btn::before {
    content: '↑';
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.85;
}

.qudurat-chat-body__load-more-btn:hover,
.qc-load-more-btn:hover,
#qc-loadmore-btn:hover,
#qudurat-chat-load-more-btn:hover {
    background: #1699CA !important;
    color: #FFFFFF !important;
    border-color: #1699CA !important;
    box-shadow: 0 3px 8px rgba(22, 153, 202, 0.25) !important;
    transform: translateY(-1px) !important;
}

.qudurat-chat-body__load-more-btn:active,
.qc-load-more-btn:active,
#qc-loadmore-btn:active,
#qudurat-chat-load-more-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(22, 153, 202, 0.2) !important;
}

.qudurat-chat-body__load-more-btn:focus-visible,
.qc-load-more-btn:focus-visible,
#qc-loadmore-btn:focus-visible,
#qudurat-chat-load-more-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(22, 153, 202, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* --- 2️⃣ إخفاء كل ما يخص التثبيت (الميزة أُلغيت) --- */
.qc-pin-banner,
.qc-msg-menu__item[data-action="pin"] {
    display: none !important;
}

/* --- 3️⃣ تحسين قائمة الرسالة المنسدلة لتلائم النوافذ الضيقة --- */
.qc-msg-menu {
    max-width: calc(100vw - 24px) !important;
    min-width: 180px !important;
}

/* تقليل العرض داخل النافذة المنبثقة الصغيرة */
@media (max-width: 480px) {
    .qc-msg-menu {
        min-width: 160px !important;
    }
    .qc-msg-menu__react {
        width: 38px !important;
        height: 38px !important;
        font-size: 22px !important;
    }
}

/* لما تكون القائمة داخل modal صغير، نضيق الـ reactions row */
#qudurat-chat-modal ~ .qc-msg-menu .qc-msg-menu__reactions,
.qc-msg-menu .qc-msg-menu__reactions {
    flex-wrap: wrap;
    max-width: 280px;
    justify-content: center;
}

/* --- 4️⃣ توافق شامل مع الموبايل والتابلت --- */

/* قائمة الرسالة: تكبير عناصر اللمس على الموبايل */
@media (max-width: 768px) {
    .qc-msg-menu {
        min-width: 220px !important;
        border-radius: 16px !important;
    }
    .qc-msg-menu__item {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    .qc-msg-menu__react {
        width: 44px !important;
        height: 44px !important;
        font-size: 26px !important;
    }

    /* زر القائمة على الفقاعة: مساحة لمس أكبر */
    .qc-msg__menu-btn {
        width: 34px !important;
        height: 34px !important;
        opacity: 0.75 !important;
    }
    .qc-msg--sent .qc-msg__menu-btn { left: -40px !important; }
    .qc-msg--received .qc-msg__menu-btn { right: -40px !important; }

    /* أزرار شريط أدوات الرأس */
    .qc-header-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* تظليل نتائج البحث: واضح أكثر على الموبايل */
    .qc-msg--search-hit .qc-msg__bubble {
        box-shadow: 0 0 0 2px #FFC107 !important;
    }
}

/* أجهزة صغيرة جداً (موبايل ضيق) */
@media (max-width: 380px) {
    .qc-msg__menu-btn {
        width: 30px !important;
        height: 30px !important;
    }
    .qc-msg--sent .qc-msg__menu-btn { left: -34px !important; }
    .qc-msg--received .qc-msg__menu-btn { right: -34px !important; }

    /* داخل النافذة المنبثقة الصغيرة جداً، نضع زر القائمة فوق الفقاعة */
    .qc-msg__menu-btn {
        top: 4px !important;
    }

    .qc-feature-hint {
        right: 8px !important;
        left: 8px !important;
        padding: 12px !important;
    }
    .qc-feature-hint__title { font-size: 13px !important; }
    .qc-feature-hint__text { font-size: 12px !important; }
}

/* --- 5️⃣ تحسين معاينة الرد وعرض الاقتباس في الفقاعة --- */
.qc-msg__reply-quote {
    max-width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05) !important;
    border-right: 3px solid #1699CA !important;
    padding: 5px 10px !important;
    margin: 0 0 6px 0 !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: background 0.15s;
}

.qc-msg--sent .qc-msg__reply-quote {
    background: rgba(22, 153, 202, 0.10) !important;
    border-right-color: #0D7AA0 !important;
}

.qc-msg__reply-quote:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

.qc-msg__reply-sender {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1699CA !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

.qc-msg--sent .qc-msg__reply-sender {
    color: #0D7AA0 !important;
}

.qc-msg__reply-text {
    font-size: 12px !important;
    color: #4A5568 !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- 6️⃣ النافذة المنبثقة (Modal) — تحسين الاحتواء --- */
#qudurat-chat-modal {
    overflow: hidden !important;
}

#qudurat-chat-modal .qudurat-chat-body,
#qudurat-chat-modal #qudurat-chat-messages {
    overflow-x: hidden !important;
}

/* منع أي عنصر من الخروج من النافذة المنبثقة أفقياً */
#qudurat-chat-modal .qc-msg,
#qudurat-chat-modal .qudurat-msg {
    overflow: visible;
    position: relative;
}

/* قائمة الرسالة داخل النافذة المنبثقة: عرض أصغر */
@media (max-width: 480px) {
    .qc-msg-menu {
        font-size: 14px !important;
    }
    .qc-msg-menu__reactions {
        padding: 6px !important;
        gap: 0 !important;
    }
}


/* =============================================================================
 * 🎯 v7.0 — الإصلاحات النهائية الحرجة
 * 1. قائمة الرسالة تظهر فوق كل شيء (إصلاح stacking context)
 * 2. حذف نهائي لأي عناصر تثبيت
 * 3. إخفاء loadMore في الـ picker (CSS كنسخة احتياطية)
 * ============================================================================= */

/* ============================================================
 * 🔴 الإصلاح الأهم: stacking context للقائمة
 *
 * المشكلة: position:fixed لا يحترم z-index إذا كان أحد الأسلاف
 * يستخدم transform/filter/will-change. الـ chat modal له
 * z-index عالٍ، والقائمة تختفي خلفه.
 *
 * الحل: نضمن أن القائمة في document.body المباشرة
 * بـ z-index أعلى من أي شيء في الصفحة + isolation
 * ============================================================ */
.qc-msg-menu {
    position: fixed !important;
    z-index: 2147483647 !important; /* أعلى قيمة ممكنة */
    isolation: isolate !important;
    background: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22),
                0 4px 12px rgba(0,0,0,0.12),
                0 0 0 1px rgba(0,0,0,0.04) !important;
    min-width: 200px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 6px !important;
    direction: rtl !important;
    text-align: right !important;
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
    transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.4,.64,1);
}

.qc-msg-menu--ready {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

/* تفاعلات الإيموجي داخل القائمة */
.qc-msg-menu__reactions {
    display: flex !important;
    gap: 2px !important;
    padding: 4px !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
}

.qc-msg-menu__react {
    background: transparent !important;
    border: none !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    cursor: pointer !important;
    transition: transform .15s cubic-bezier(.34,1.4,.64,1), background .12s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.qc-msg-menu__react:hover,
.qc-msg-menu__react:focus-visible {
    transform: scale(1.30) !important;
    background: #F0F2F5 !important;
}

.qc-msg-menu__sep {
    height: 1px !important;
    background: rgba(0,0,0,0.06) !important;
    margin: 4px 6px !important;
}

.qc-msg-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1A202C !important;
    text-align: right !important;
    transition: background .12s !important;
    font-family: inherit !important;
}

.qc-msg-menu__item:hover,
.qc-msg-menu__item:focus-visible {
    background: #F7F8FA !important;
}

.qc-msg-menu__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #52606D !important;
    flex-shrink: 0 !important;
}

/* ============================================================
 * 🔴 إخفاء أي بقايا لعناصر التثبيت
 * ============================================================ */
.qc-msg-menu__item[data-action="pin"],
.qc-pin-banner,
.qc-msg__action[data-action="pin"],
button[title="تثبيت"],
button[title="إلغاء التثبيت"],
button[aria-label="تثبيت"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ============================================================
 * 🔴 إخفاء loadMore في الـ conversation picker
 *
 * عندما يظهر #qc-modal-picker أو .qc-modal-picker، نخفي
 * زر تحميل رسائل أقدم لأنه لا معنى له بدون محادثة مفتوحة
 * ============================================================ */
#qudurat-chat-modal:has(#qc-modal-picker) #qudurat-chat-load-more,
#qudurat-chat-modal:has(#qc-modal-picker) #qc-load-more,
#qudurat-chat-modal:has(.qc-modal-picker) #qudurat-chat-load-more,
#qudurat-chat-modal:has(.qc-modal-picker) #qc-load-more {
    display: none !important;
}

/* fallback للمتصفحات التي لا تدعم :has() */
.qc-modal-picker-open #qudurat-chat-load-more,
.qc-modal-picker-open #qc-load-more,
.qc-modal-picker-open .qudurat-chat-body__load-more {
    display: none !important;
}

/* ============================================================
 * 📱 تحسينات الموبايل للقائمة
 * ============================================================ */
@media (max-width: 768px) {
    .qc-msg-menu {
        min-width: 220px !important;
        border-radius: 16px !important;
    }
    .qc-msg-menu__item {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    .qc-msg-menu__react {
        width: 44px !important;
        height: 44px !important;
        font-size: 26px !important;
    }
}

@media (max-width: 480px) {
    .qc-msg-menu {
        min-width: 180px !important;
    }
    .qc-msg-menu__react {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
    }
}

/* ============================================================
 * ضمان عدم إنشاء stacking context يحبس القائمة
 *
 * نُزيل أي transform/filter من العناصر التي قد تكون
 * بين <body> والقائمة عند فتحها
 * ============================================================ */
body:has(.qc-msg-menu) {
    /* لا نعدّل body — نسمح للقائمة بالطفو */
}
/* ═══════════════════════════════════════════════════════════════
 * v3.6 — Chatbot Mode: إخفاء زر "تحميل رسائل أقدم"
 * ═══════════════════════════════════════════════════════════════
 * عندما يكون المستخدم ضيفاً وفي وضع الـ chatbot، لا معنى لزر تحميل
 * الرسائل الأقدم — فلا توجد محادثة حقيقية بعد. JS يُضيف الكلاس
 * qudurat-chat--chatbot على الـ modal الجذر عند تفعيل وضع البوت.
 * ─────────────────────────────────────────────────────────────── */

.qudurat-chat--chatbot #qudurat-chat-load-more,
.qudurat-chat--chatbot #qc-loadmore,
.qudurat-chat--chatbot .qudurat-chat-body__load-more,
.qudurat-chat--chatbot .qc-chatarea__loadmore {
    display: none !important;
    visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
 * v3.7 — تحصين أزرار الـ chat من تدخّل ستايلات الثيم
 * ═══════════════════════════════════════════════════════════════
 * المشكلة: ثيم Workreap يطبّق "button:hover { background: #0A2540 }"
 * على كل أزرار الموقع بـ !important — مما يجعل أزرار قائمة الرسالة
 * (رد، نسخ، تفاعلات) تتحول لخلفية كحلية والنص يختفي.
 *
 * الحل: ربط القواعد بـ specificity عالية بحيث تتغلب على ستايل الثيم،
 * وتضمن إظهار النص دائماً بلون مقروء.
 * ─────────────────────────────────────────────────────────────── */

/* تحصين قائمة الرسالة المنبثقة (قائمة سياق) */
.qc-msg-menu button.qc-msg-menu__item,
.qc-msg-menu button.qc-msg-menu__item:hover,
.qc-msg-menu button.qc-msg-menu__item:focus,
.qc-msg-menu button.qc-msg-menu__item:focus-visible,
.qc-msg-menu button.qc-msg-menu__item:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #1A202C !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.qc-msg-menu button.qc-msg-menu__item:hover,
.qc-msg-menu button.qc-msg-menu__item:focus-visible {
    background: #F7F8FA !important;
    background-color: #F7F8FA !important;
    color: #1A202C !important;
}

/* تحصين كل النصوص داخل العنصر */
.qc-msg-menu button.qc-msg-menu__item span,
.qc-msg-menu button.qc-msg-menu__item:hover span,
.qc-msg-menu button.qc-msg-menu__item:focus span,
.qc-msg-menu button.qc-msg-menu__item:focus-visible span {
    color: #1A202C !important;
    background: transparent !important;
}

.qc-msg-menu button.qc-msg-menu__item:hover .qc-msg-menu__icon,
.qc-msg-menu button.qc-msg-menu__item:hover .qc-msg-menu__icon svg,
.qc-msg-menu button.qc-msg-menu__item:hover .qc-msg-menu__icon svg * {
    color: #52606D !important;
    stroke: #52606D !important;
}

/* تحصين أزرار التفاعلات (Emoji reactions) */
.qc-msg-menu button.qc-msg-menu__react,
.qc-msg-menu button.qc-msg-menu__react:hover,
.qc-msg-menu button.qc-msg-menu__react:focus,
.qc-msg-menu button.qc-msg-menu__react:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    color: inherit !important;
}

.qc-msg-menu button.qc-msg-menu__react:hover {
    background: #F0F2F5 !important;
    background-color: #F0F2F5 !important;
    transform: scale( 1.15 );
}

/* تحصين كل أزرار plugin الـ chat بشكل عام */
.qudurat-chat-wrapper button:not(.qc-btn-primary):not(.qudurat-chat-footer__send),
.qudurat-chat-wrapper button:not(.qc-btn-primary):not(.qudurat-chat-footer__send):hover,
.qc-chat-app button:not(.qc-btn-primary),
.qc-chat-app button:not(.qc-btn-primary):hover {
    /* لا نرث ستايلات الثيم — كل زر بـ chat له ستايل خاص فيه */
    background-image: none !important;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * v3.7 — إخفاء زر "إرسال رسالة" في صفحات الملف الشخصي للمستقل/صاحب العمل
 * ═══════════════════════════════════════════════════════════════════════
 *
 * المنطق: المراسلة على المنصة تتم فقط بعد قبول/قبيل قبول المشروع للاتفاق.
 * لا نسمح بإرسال رسالة مباشرة من صفحة الملف الشخصي.
 *
 * المُحدّدات (selectors): متعددة لتغطية كل احتمالات الأسماء التي قد
 * يستخدمها قالب Workreap أو إضافة Workreap الأم. كلها تُستهدف فقط
 * داخل صفحات single-freelancer / single-employer لتجنب أي تأثير جانبي
 * على الصفحات الأخرى.
 *
 * المعايير:
 *   - body.single-freelancers: صفحة الملف الشخصي للمستقل
 *   - body.single-employers:   صفحة الملف الشخصي لصاحب العمل
 *   - body.single-freelancer:  بديل (دون s)
 *   - body.page-template-templates-freelancer-profile: قالب الصفحة
 * ─────────────────────────────────────────────────────────────────────── */

body.single-freelancers .wr-btnviewpro,
body.single-employers   .wr-btnviewpro,
body.single-freelancer  .wr-btnviewpro,
body[class*="single-freelancer"]  .wr-bestservicedetail__user .wt-btn,
body[class*="single-employer"]    .wr-bestservicedetail__user .wt-btn,
body[class*="single-freelancer"]  a[data-original-title*="إرسال"],
body[class*="single-employer"]    a[data-original-title*="إرسال"],
body[class*="single-freelancer"]  a[title*="إرسال رسالة"],
body[class*="single-employer"]    a[title*="إرسال رسالة"],
body[class*="single-freelancer"]  button[title*="إرسال رسالة"],
body[class*="single-employer"]    button[title*="إرسال رسالة"],

/* مُحدّدات widget في الـ aside للمستقل/صاحب العمل */
body[class*="single-freelancer"]  .wr-asideprostatus a.wt-btn,
body[class*="single-employer"]    .wr-asideprostatus a.wt-btn,
body[class*="single-freelancer"]  .wr-bestservicedetail .wr-projectbtns a:first-child,
body[class*="single-employer"]    .wr-bestservicedetail .wr-projectbtns a:first-child,

/* مُحدّدات Workreap الشائعة لأزرار "إرسال رسالة" */
body[class*="single-freelancer"]  .wt-userlisting-btns .wt-btn,
body[class*="single-employer"]    .wt-userlisting-btns .wt-btn,
body[class*="single-freelancer"]  .wt-rightarea > a.wt-btn[href*="message"],
body[class*="single-employer"]    .wt-rightarea > a.wt-btn[href*="message"],
body[class*="single-freelancer"]  .wt-rightarea > a.wt-btn[href*="chat"],
body[class*="single-employer"]    .wt-rightarea > a.wt-btn[href*="chat"],

/* الـ button class اللي نُحقّنه نحن — للتأكد لو فلتر PHP فعلاً يعمل */
body[class*="single-freelancer"]  button.qudurat-open-chat:not(.qc-keep),
body[class*="single-employer"]    button.qudurat-open-chat:not(.qc-keep) {
    display: none !important;
    visibility: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════════════
 * استهداف أدق بالنص العربي "إرسال رسالة" داخل الأزرار
 * ───────────────────────────────────────────────────────────────────────
 * بعض الإصدارات من Workreap تستخدم class بأسماء عامة جداً (مثل wt-btn)
 * فلا نستطيع استهدافها مباشرة بدون لمس أزرار أخرى. الحل الأكيد هو
 * استخدام :has() الحديث لاستهداف الزر بمحتواه فقط.
 * ─────────────────────────────────────────────────────────────────────── */

@supports selector( :has( * ) ) {
    body[class*="single-freelancer"]  a:has( > span:only-child ),
    body[class*="single-employer"]    a:has( > span:only-child ) {
        /* لا يفعل شيء افتراضياً — نحتاج تخصيص لكن :has(span) عام جداً */
    }

    /* استهداف دقيق: زر داخل سكشن المستقل/الباحث يحتوي على أيقونة envelope */
    body[class*="single-freelancer"]  .wr-bestservicedetail__user .wt-btn:has( i.fa-envelope ),
    body[class*="single-employer"]    .wr-bestservicedetail__user .wt-btn:has( i.fa-envelope ),
    body[class*="single-freelancer"]  .wr-bestservicedetail__user .wt-btn:has( i.lnr-envelope ),
    body[class*="single-employer"]    .wr-bestservicedetail__user .wt-btn:has( i.lnr-envelope ),
    body[class*="single-freelancer"]  a.wt-btn:has( i[class*="message"] ),
    body[class*="single-employer"]    a.wt-btn:has( i[class*="message"] ) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * منع وميض الحالة السابقة عند فتح النافذة المنبثقة
 * ═══════════════════════════════════════════════════════════════════════
 * المشكلة قبل الإصلاح:
 *   1. النافذة تفتح ومعها بقايا المحادثة السابقة (DOM لم يُمسح بعد)
 *   2. ثم يظهر spinner التحميل
 *   3. ثم زر "تحميل رسائل أقدم"
 *   4. ثم المحتوى الفعلي
 *   = 4 تغييرات بصرية = تجربة مرتبكة
 *
 * الحل:
 *   - JS يضيف class .qudurat-chat--opening فور فتح النافذة
 *   - CSS يُخفي body الرسائل بالكامل (visibility:hidden)
 *   - الـ header يبقى ظاهراً للسياق (المستخدم يعرف أن النافذة تُحضّر)
 *   - بعد جاهزية المحتوى، JS يُزيل الـ class → كل شيء يظهر دفعة واحدة
 *
 * نستخدم visibility (لا display:none) لأن visibility يحفظ الأبعاد
 * فلا تحدث قفزة layout عند الإظهار النهائي.
 * ─────────────────────────────────────────────────────────────────────── */

.qudurat-chat--opening #qudurat-chat-messages,
.qudurat-chat--opening #qudurat-chat-messages-list,
.qudurat-chat--opening #qudurat-chat-loading,
.qudurat-chat--opening #qudurat-chat-empty,
.qudurat-chat--opening #qudurat-chat-load-more,
.qudurat-chat--opening #qudurat-chat-footer,
.qudurat-chat--opening #qc-loadmore,
.qudurat-chat--opening #qc-modal-picker,
.qudurat-chat--opening #qc-chatbot-view {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important;
}

/* الـ header يبقى مرئياً للسياق البصري */
.qudurat-chat--opening #qudurat-chat-header,
.qudurat-chat--opening .qudurat-chat-header {
    visibility: visible !important;
    opacity: 1 !important;
}

/* عند إزالة الـ class (المحتوى جاهز) يظهر كل شيء فوراً بدون transition */
.qudurat-chat-wrapper #qudurat-chat-messages,
.qudurat-chat-wrapper #qudurat-chat-messages-list {
    transition: none !important;
}