/* =============================================================================
   Qudurat Messenger — Full-Page 2-Column Chat UI
   RTL-first, WhatsApp-inspired, production-grade

   Layout: Sidebar (right in RTL) + Chat Area (left in RTL)
   Breakpoints:
     Mobile  (<768px)  : Single-column, sidebar/chat toggle via .qc-messenger--chat-active
     Desktop (>=768px) : Fixed 2-column grid
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
    /* Brand */
    --qc-primary       : #1699CA;
    --qc-primary-dark  : #1180AB;
    --qc-primary-light : #E8F6FB;
    --qc-primary-glow  : rgba(22, 153, 202, 0.12);

    /* Surfaces */
    --qc-bg-app        : #F0F2F5;
    --qc-bg-sidebar    : #FFFFFF;
    --qc-bg-chat       : #E5DDD5;
    --qc-bg-chat-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8c8c8' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --qc-bg-compose    : #F0F2F5;
    --qc-bg-bubble-out : #D9FDD3;
    --qc-bg-bubble-in  : #FFFFFF;
    --qc-bg-hover      : #F5F6F6;
    --qc-bg-active     : #E8F6FB;

    /* Text */
    --qc-text-primary  : #111B21;
    --qc-text-secondary: #667781;
    --qc-text-light    : #8696A0;
    --qc-text-bubble   : #111B21;
    --qc-text-time     : #667781;
    --qc-text-white    : #FFFFFF;

    /* Borders */
    --qc-border        : #E9EDEF;
    --qc-border-light  : #F0F2F5;

    /* Shadows */
    --qc-shadow-sm     : 0 1px 2px rgba(0,0,0,.08);
    --qc-shadow-md     : 0 2px 8px rgba(0,0,0,.1);
    --qc-shadow-bubble : 0 1px 1px rgba(0,0,0,.06);

    /* Layout */
    --qc-sidebar-width : 380px;
    --qc-header-h      : 60px;
    --qc-compose-h     : 62px;
    --qc-avatar-sm     : 40px;
    --qc-avatar-md     : 49px;
    --qc-radius-lg     : 10px;
    --qc-radius-bubble : 8px;

    /* Typography */
    --qc-font          : 'Segoe UI', Tahoma, 'Noto Sans Arabic', -apple-system, sans-serif;
    --qc-fs-xs         : 11px;
    --qc-fs-sm         : 12.5px;
    --qc-fs-base       : 14px;
    --qc-fs-md         : 15px;
    --qc-fs-lg         : 17px;

    /* Animation */
    --qc-ease          : cubic-bezier(.4, 0, .2, 1);
    --qc-dur           : 200ms;
}


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

@keyframes qc-pulse-dots {
    0%, 80%, 100% { transform: scale(.5); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1;  }
}

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

@keyframes qc-slide-in-chat {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0);     }
}


/* =============================================================================
   3. ROOT CONTAINER
   ============================================================================= */

.qc-messenger {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    max-height: 850px;
    background: var(--qc-bg-app);
    border-radius: var(--qc-radius-lg);
    overflow: hidden;
    box-shadow: var(--qc-shadow-md);
    font-family: var(--qc-font);
    font-size: var(--qc-fs-base);
    color: var(--qc-text-primary);
    direction: rtl;
    position: relative;
    box-sizing: border-box;
}

.qc-messenger *, .qc-messenger *::before, .qc-messenger *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* Desktop: 2-column */
@media (min-width: 768px) {
    .qc-messenger {
        grid-template-columns: var(--qc-sidebar-width) 1fr;
    }
}


/* =============================================================================
   4. SIDEBAR
   ============================================================================= */

.qc-sidebar {
    display: flex;
    flex-direction: column;
    background: var(--qc-bg-sidebar);
    border-inline-start: 1px solid var(--qc-border);
    overflow: hidden;
    z-index: 2;
}

/* Mobile: when chat is active, hide sidebar */
@media (max-width: 767px) {
    .qc-messenger--chat-active .qc-sidebar { display: none; }
}

/* --- Sidebar Header --- */
.qc-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--qc-header-h);
    padding-inline: 20px;
    background: var(--qc-bg-sidebar);
    border-block-end: 1px solid var(--qc-border-light);
    flex-shrink: 0;
}

.qc-sidebar__title {
    font-size: var(--qc-fs-lg);
    font-weight: 700;
    color: var(--qc-text-primary);
    letter-spacing: -0.2px;
}

/* --- Search --- */
.qc-sidebar__search {
    padding: 8px 12px;
    flex-shrink: 0;
}

.qc-sidebar__search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--qc-bg-app);
    border-radius: 8px;
    padding: 0 12px;
    height: 36px;
    transition: box-shadow var(--qc-dur) var(--qc-ease);
}

.qc-sidebar__search-wrap:focus-within {
    box-shadow: 0 0 0 2px var(--qc-primary-glow);
}

.qc-sidebar__search-icon {
    color: var(--qc-text-light);
    flex-shrink: 0;
}

.qc-sidebar__search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--qc-font);
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-primary);
    width: 100%;
    height: 100%;
}

.qc-sidebar__search-input::placeholder {
    color: var(--qc-text-light);
}

/* --- Contact List (scrollable) --- */
.qc-sidebar__list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}

.qc-sidebar__list::-webkit-scrollbar { width: 4px; }
.qc-sidebar__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }

/* --- Contact Item --- */
.qc-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background var(--qc-dur) var(--qc-ease);
    border-inline-start: 3px solid transparent;
    position: relative;
}

.qc-contact::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 72px;
    inset-inline-end: 16px;
    height: 1px;
    background: var(--qc-border-light);
}

.qc-contact:last-child::after { display: none; }

.qc-contact:hover {
    background: var(--qc-bg-hover);
}

.qc-contact--active {
    background: var(--qc-bg-active);
    border-inline-start-color: var(--qc-primary);
}

.qc-contact__avatar {
    width: var(--qc-avatar-md);
    height: var(--qc-avatar-md);
    border-radius: 50%;
    background: var(--qc-primary);
    color: var(--qc-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--qc-fs-md);
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

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

.qc-contact__info {
    flex: 1;
    min-width: 0;
}

.qc-contact__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.qc-contact__name {
    font-size: var(--qc-fs-base);
    font-weight: 600;
    color: var(--qc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-contact__time {
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-light);
    flex-shrink: 0;
    white-space: nowrap;
}

.qc-contact__preview {
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-start: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.qc-contact__badge {
    background: var(--qc-primary);
    color: #fff;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Unread contact name color */
.qc-contact--unread .qc-contact__name { color: var(--qc-text-primary); }
.qc-contact--unread .qc-contact__time { color: var(--qc-primary); }

/* --- Loading --- */
.qc-sidebar__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 12px;
    color: var(--qc-text-light);
    font-size: var(--qc-fs-sm);
}

.qc-sidebar__loading-dots {
    display: flex;
    gap: 4px;
}

.qc-sidebar__loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qc-primary);
    animation: qc-pulse-dots 1.4s infinite ease-in-out;
}
.qc-sidebar__loading-dots span:nth-child(1) { animation-delay: 0s;   }
.qc-sidebar__loading-dots span:nth-child(2) { animation-delay: .2s;  }
.qc-sidebar__loading-dots span:nth-child(3) { animation-delay: .4s;  }

/* --- Empty State --- */
.qc-sidebar__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--qc-text-light);
    gap: 8px;
}

.qc-sidebar__empty p {
    font-size: var(--qc-fs-base);
    font-weight: 600;
    color: var(--qc-text-secondary);
}

.qc-sidebar__empty span {
    font-size: var(--qc-fs-sm);
}

/* --- Pinned Support --- */
.qc-sidebar__pinned {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-block-start: 1px solid var(--qc-border-light);
    cursor: pointer;
    transition: background var(--qc-dur);
    flex-shrink: 0;
}

.qc-sidebar__pinned:hover { background: var(--qc-bg-hover); }

.qc-sidebar__pinned-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qc-sidebar__pinned-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.qc-sidebar__pinned-name {
    font-size: var(--qc-fs-base);
    font-weight: 600;
    color: var(--qc-text-primary);
}

.qc-sidebar__pinned-desc {
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-light);
}

/* --- Profile Footer --- */
.qc-sidebar__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--qc-bg-app);
    border-block-start: 1px solid var(--qc-border);
    flex-shrink: 0;
}

.qc-sidebar__profile-avatar {
    width: var(--qc-avatar-sm);
    height: var(--qc-avatar-sm);
    border-radius: 50%;
    overflow: hidden;
    background: var(--qc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qc-sidebar__profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-sidebar__profile-initials {
    color: #fff;
    font-weight: 700;
    font-size: var(--qc-fs-sm);
}

.qc-sidebar__profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.qc-sidebar__profile-name {
    font-size: var(--qc-fs-sm);
    font-weight: 600;
    color: var(--qc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-sidebar__profile-status {
    font-size: var(--qc-fs-xs);
    color: #25D366;
}

.qc-sidebar__profile-settings {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--qc-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--qc-dur), color var(--qc-dur);
    flex-shrink: 0;
}

.qc-sidebar__profile-settings:hover {
    background: var(--qc-border-light);
    color: var(--qc-text-primary);
}


/* =============================================================================
   5. CHAT AREA
   ============================================================================= */

.qc-chatarea {
    display: flex;
    flex-direction: column;
    background: var(--qc-bg-chat);
    background-image: var(--qc-bg-chat-pattern);
    position: relative;
    overflow: hidden;
}

/* Mobile: hidden until a chat is opened */
@media (max-width: 767px) {
    .qc-chatarea { display: none; }
    .qc-messenger--chat-active .qc-chatarea {
        display: flex;
        animation: qc-slide-in-chat 250ms var(--qc-ease);
    }
}

/* --- Welcome Screen (no chat selected) --- */
.qc-chatarea__welcome {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qc-bg-app);
}

.qc-chatarea__welcome-inner {
    text-align: center;
    color: var(--qc-text-light);
}

.qc-chatarea__welcome-inner h3 {
    font-size: var(--qc-fs-lg);
    font-weight: 600;
    color: var(--qc-text-secondary);
    margin-block-start: 16px;
}

.qc-chatarea__welcome-inner p {
    font-size: var(--qc-fs-sm);
    margin-block-start: 6px;
}

/* --- Chat Header --- */
.qc-chatarea__header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--qc-header-h);
    padding-inline: 16px;
    background: var(--qc-bg-sidebar);
    border-block-end: 1px solid var(--qc-border-light);
    flex-shrink: 0;
    z-index: 1;
}

/* Back button — only on mobile */
.qc-chatarea__back {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--qc-text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--qc-dur);
    flex-shrink: 0;
}

.qc-chatarea__back:hover { background: var(--qc-bg-hover); }

@media (max-width: 767px) {
    .qc-chatarea__back { display: flex; }
}

.qc-chatarea__header-avatar {
    width: var(--qc-avatar-sm);
    height: var(--qc-avatar-sm);
    border-radius: 50%;
    background: var(--qc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--qc-fs-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.qc-chatarea__header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-chatarea__header-info {
    flex: 1;
    min-width: 0;
}

.qc-chatarea__header-name {
    display: block;
    font-size: var(--qc-fs-base);
    font-weight: 600;
    color: var(--qc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-chatarea__header-status {
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-light);
}


/* --- Messages Container --- */
.qc-chatarea__messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 56px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.12) transparent;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.qc-chatarea__messages::-webkit-scrollbar { width: 4px; }
.qc-chatarea__messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }

@media (max-width: 767px) {
    .qc-chatarea__messages { padding: 12px 12px; }
}

/* Load More */
.qc-chatarea__loadmore {
    text-align: center;
    padding-block-end: 12px;
}

.qc-chatarea__loadmore button {
    border: 1px solid var(--qc-primary);
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    color: var(--qc-primary);
    font-family: var(--qc-font);
    font-size: var(--qc-fs-sm);
    padding: 6px 20px;
    cursor: pointer;
    transition: all var(--qc-dur);
}

.qc-chatarea__loadmore button:hover {
    background: var(--qc-primary);
    color: #fff;
}

/* Message loading */
.qc-chatarea__msg-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* Message empty */
.qc-chatarea__msg-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qc-text-light);
    font-size: var(--qc-fs-sm);
}

/* --- Message List --- */
.qc-chatarea__msg-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Message Bubbles --- */
.qc-msg {
    display: flex;
    animation: qc-msg-in 200ms var(--qc-ease) both;
    max-width: 65%;
    padding: 2px 0;
}

.qc-msg--sent {
    align-self: flex-start; /* RTL: flex-start = right */
}

.qc-msg--received {
    align-self: flex-end;   /* RTL: flex-end = left */
}

.qc-msg__bubble {
    padding: 7px 10px 6px;
    border-radius: var(--qc-radius-bubble);
    box-shadow: var(--qc-shadow-bubble);
    word-break: break-word;
    overflow-wrap: break-word;
    position: relative;
    min-width: 80px;
}

.qc-msg--sent .qc-msg__bubble {
    background: var(--qc-bg-bubble-out);
    border-start-start-radius: 0;
}

.qc-msg--received .qc-msg__bubble {
    background: var(--qc-bg-bubble-in);
    border-start-end-radius: 0;
}

.qc-msg__text {
    font-size: var(--qc-fs-base);
    line-height: 1.45;
    color: var(--qc-text-bubble);
    white-space: pre-wrap;
}

.qc-msg__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-block-start: 2px;
    float: left; /* RTL: keeps meta on trailing edge */
    padding-inline-start: 10px;
}

.qc-msg__time {
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-time);
}

.qc-msg__read {
    font-size: 13px;
    color: var(--qc-text-light);
    letter-spacing: -1px;
}

.qc-msg--read .qc-msg__read {
    color: #53BDEB;
}

.qc-msg--optimistic .qc-msg__bubble {
    opacity: .7;
}

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


/* --- Compose Bar --- */
.qc-chatarea__compose {
    background: var(--qc-bg-compose);
    border-block-start: 1px solid var(--qc-border-light);
    padding: 8px 16px;
    padding-block-end: max(8px, env(safe-area-inset-bottom, 8px));
    flex-shrink: 0;
}

.qc-chatarea__status {
    font-size: var(--qc-fs-sm);
    padding: 6px 12px;
    border-radius: 6px;
    margin-block-end: 6px;
    text-align: center;
}

.qc-chatarea__status--error   { background: #FFF5F5; color: #C53030; border: 1px solid #FEB2B2; }
.qc-chatarea__status--warning { background: #FFFBEB; color: #B7791F; border: 1px solid #F6E05E; }
.qc-chatarea__status--success { background: #F0FFF4; color: #276749; border: 1px solid #9AE6B4; }

.qc-chatarea__input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.qc-chatarea__textarea {
    flex: 1;
    border: none;
    outline: none;
    background: var(--qc-bg-sidebar);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--qc-font);
    font-size: var(--qc-fs-base);
    color: var(--qc-text-primary);
    resize: none;
    max-height: 120px;
    min-height: 42px;
    line-height: 1.45;
    direction: auto;
    box-shadow: var(--qc-shadow-sm);
    scrollbar-width: thin;
}

.qc-chatarea__textarea::placeholder {
    color: var(--qc-text-light);
}

.qc-chatarea__textarea:focus {
    box-shadow: 0 0 0 2px var(--qc-primary-glow);
}

.qc-chatarea__send-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--qc-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--qc-dur), transform 100ms;
    box-shadow: var(--qc-shadow-sm);
}

.qc-chatarea__send-btn:hover:not(:disabled) {
    background: var(--qc-primary-dark);
    transform: scale(1.05);
}

.qc-chatarea__send-btn:active:not(:disabled) {
    transform: scale(.93);
}

.qc-chatarea__send-btn:disabled {
    background: #B0D9ED;
    cursor: default;
    transform: none;
}

.qc-chatarea__send-btn svg {
    /* Mirror the send arrow for RTL */
    transform: scaleX(-1);
}

.qc-chatarea__send-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qc-spin .7s linear infinite;
}

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


/* =============================================================================
   6. RESPONSIVE TWEAKS
   ============================================================================= */

/* Tablet: slightly tighter sidebar */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --qc-sidebar-width: 320px;
    }
    .qc-chatarea__messages { padding: 12px 24px; }
}

/* Large screens */
@media (min-width: 1200px) {
    :root {
        --qc-sidebar-width: 400px;
    }
}

/* Mobile: full-screen experience */
@media (max-width: 767px) {
    .qc-messenger {
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .qc-sidebar {
        border-inline-start: none;
    }
}
/* =============================================================================
   PATCH: qudurat-chat.css additions for v3.1.0
   Append these rules to your existing qudurat-chat.css file.
   ============================================================================= */

/* =============================================================================
   FIX 2: Modal header text overflow
   Problem: Long names/emails (e.g. "mohmaadaziz2@gmail.com") overflow the
   header and push the close/minimize buttons out of bounds.

   Root cause: Although .qudurat-chat-header__title already has white-space:nowrap
   and text-overflow:ellipsis, the parent flex container (.qudurat-chat-header)
   uses gap + flex layout without a hard max-width guard on the meta column.
   When the title is very long, the meta column grows and squeezes the actions.

   Fix: Reinforce min-width:0 on __meta, guarantee __actions never shrinks,
   and add a max-width cap so the title always truncates.
   ============================================================================= */

/* Prevent meta column from pushing buttons outside the header */
.qudurat-chat-header__meta {
    flex         : 1 1 0;      /* Can grow AND shrink — important */
    min-width    : 0;          /* Allow text-overflow truncation */
    overflow     : hidden;     /* Belt + suspenders with the child */
    max-width    : calc(100% - 100px); /* Reserve space for avatar + 2 buttons */
}

/* Guarantee the title truncates, never wraps */
.qudurat-chat-header__title {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    max-width     : 100%;
    display       : block;     /* Ensure block-level for overflow to work */
}

/* Actions column must NEVER shrink — buttons always stay visible */
.qudurat-chat-header__actions {
    flex-shrink : 0;
    flex-grow   : 0;
}

/* FIX 1: Back button style — matches existing header btn appearance.
   Injected by JS into the modal header in _injectModalBackButton(). */
.qudurat-chat-header__btn--back {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : var(--qc-btn-size, 32px);
    height           : var(--qc-btn-size, 32px);
    border           : none;
    border-radius    : var(--qc-border-radius-btn, 6px);
    background-color : rgba(255, 255, 255, 0.15);
    color            : #fff;
    cursor           : pointer;
    transition       : background-color 150ms ease;
    flex-shrink      : 0;
    /* RTL-aware: the SVG arrow points left (→ which is back in LTR).
       In RTL layouts we flip it so it points right, which is "back". */
    transform        : scaleX(-1);
    margin-inline-end: 2px;
}

[dir="rtl"] .qudurat-chat-header__btn--back,
.qudurat-chat-wrapper[dir="rtl"] .qudurat-chat-header__btn--back {
    transform : scaleX(1); /* In RTL, the right-pointing arrow IS the back direction */
}

.qudurat-chat-header__btn--back:hover,
.qudurat-chat-header__btn--back:focus-visible {
    background-color : rgba(255, 255, 255, 0.28);
    outline          : 2px solid rgba(255, 255, 255, 0.5);
    outline-offset   : 2px;
}
/* =============================================================================
   PATCH: qudurat-chat.css bubble improvements v3.2
   ISSUE 2: Message bubbles lack clear visual distinction, padding, and depth.

   Append these rules to your qudurat-chat.css (or to CSS-ADDITIONS file).
   They override specific properties of the base bubble styles to give the
   WhatsApp / Telegram appearance.
   ============================================================================= */

/* =============================================================================
   BUBBLE COLORS — WhatsApp palette
   Sent    : green  (#D9FDD3) with dark text
   Received: white  (#FFFFFF) with dark text, light shadow
   ============================================================================= */

/* Override CSS variables inside the modal wrapper specifically */
.qudurat-chat-wrapper {
    --qc-color-bg-bubble-sent      : #D9FDD3;
    --qc-color-text-bubble-sent    : #111B21;
    --qc-color-bg-bubble-recv      : #FFFFFF;
    --qc-color-text-bubble-recv    : #111B21;
    --qc-shadow-bubble-sent        : 0 1px 2px rgba(0, 0, 0, 0.12);
    --qc-shadow-bubble-recv        : 0 1px 2px rgba(0, 0, 0, 0.10);
    --qc-border-radius-bubble      : 10px;
}

/* Also apply to the messenger layout */
.qc-messenger {
    --qc-bg-bubble-out : #D9FDD3;
    --qc-bg-bubble-in  : #FFFFFF;
}

/* =============================================================================
   BUBBLE SHELL — richer padding and sharper corner for "tail" effect
   ============================================================================= */

.qudurat-msg__bubble,
.qc-msg__bubble {
    padding         : 8px 12px 6px 12px;  /* top right bottom left */
    word-break      : break-word;
    overflow-wrap   : break-word;
    position        : relative;
    min-width       : 80px;   /* Prevent extremely narrow bubbles */
    max-width       : 72%;
}

/* Sent bubble: flat corner bottom-left (the "tail" side in RTL) */
.qudurat-msg--sent .qudurat-msg__bubble,
.qc-msg--sent .qc-msg__bubble {
    background-color : #D9FDD3;
    color            : #111B21;
    border-radius    : 10px 10px 10px 3px;  /* flat on bottom-start in RTL = bottom-left */
    box-shadow       : 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Received bubble: flat corner bottom-right (leading edge in RTL) */
.qudurat-msg--received .qudurat-msg__bubble,
.qc-msg--received .qc-msg__bubble {
    background-color : #FFFFFF;
    color            : #111B21;
    border-radius    : 10px 10px 3px 10px;
    box-shadow       : 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* =============================================================================
   META ROW — time + read receipt tuck
   Float the meta to the bottom-right of the bubble text (WhatsApp style)
   ============================================================================= */

.qudurat-msg__meta,
.qc-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;
    /* Negative inline margin pulls meta right to align with bubble edge */
    margin-inline-end: -2px;
}

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

/* =============================================================================
   READ RECEIPTS — single tick (sent) vs double blue (read)
   ============================================================================= */

.qudurat-msg__read-indicator,
.qc-msg__read {
    font-size      : 12px;
    color          : #667781;      /* grey  = sent/delivered */
    letter-spacing : -1px;
    line-height    : 1;
}

/* Turn blue when is_read=1 (qc-msg--read class added by JS) */
.qudurat-msg--read .qudurat-msg__read-indicator,
.qc-msg--read .qc-msg__read {
    color : #53BDEB;   /* WhatsApp blue tick */
}

/* =============================================================================
   BACKGROUND PATTERN — subtle warm paper tone matching WhatsApp
   ============================================================================= */

.qudurat-chat-body,
.qc-chatarea__messages {
    background-color  : #EBE2D8;
    background-image  : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8b89a' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* =============================================================================
   MODAL-SPECIFIC: tighten spacing so messages fit the narrow floating window
   ============================================================================= */

/* Narrow modal: reduce max bubble width */
.qudurat-chat-window .qudurat-msg__bubble {
    max-width   : 82%;
}

/* Reduce gap between consecutive same-sender messages in modal */
.qudurat-chat-window .qudurat-msg + .qudurat-msg {
    margin-block-start: 2px;
}

.qudurat-chat-window .qudurat-msg--sent + .qudurat-msg--received,
.qudurat-chat-window .qudurat-msg--received + .qudurat-msg--sent {
    margin-block-start: 8px;
}

/* Make the message list fill available height */
.qudurat-chat-body {
    display        : flex;
    flex-direction : column;
}

.qudurat-chat-body__messages {
    flex    : 1;
    padding : 12px 16px;
}
/* =============================================================================
   PATCH: qudurat-chat.css background fix v3.3
   Issue 2: Remove the distracting repeating SVG cross/plus pattern.
   Replace with a clean, warm solid colour.
   Append these rules to your CSS — they override PATCH-bubbles-v3.2.css.
   ============================================================================= */

/* =============================================================================
   REMOVE the SVG cross pattern entirely
   The previous patch set background-image with data:image/svg+xml crosses.
   This override clears the image and sets a clean solid background.
   ============================================================================= */

/* Modal chat body — clean warm tone */
.qudurat-chat-body {
    background-color  : #EFEAE2 !important;
    background-image  : none    !important;
}

/* Full messenger chat area — same clean warm tone */
.qc-chatarea__messages {
    background-color  : #EFEAE2 !important;
    background-image  : none    !important;
}

/* Also clear it from the qc-messenger variable override if set */
.qc-messenger {
    --qc-bg-chat         : #EFEAE2;
    --qc-bg-chat-pattern : none;
}

.qudurat-chat-wrapper {
    --qc-color-body-bg : #EFEAE2;
}


/* =============================================================================
   KEEP all bubble styles clean from previous patch (no changes needed there)
   ============================================================================= */

/* Ensure the received bubble has a very subtle border so it doesn't
   disappear into the warm background */
.qudurat-msg--received .qudurat-msg__bubble,
.qc-msg--received .qc-msg__bubble {
    background-color : #FFFFFF;
    border           : 1px solid rgba(0, 0, 0, 0.04);
}

/* Sent bubble — WhatsApp green, no border needed */
.qudurat-msg--sent .qudurat-msg__bubble,
.qc-msg--sent .qc-msg__bubble {
    background-color : #D9FDD3;
    border           : none;
}


/* =============================================================================
   Issue 3: Profile footer — support identity avatar styling
   When JS replaces the avatar with the headset SVG, it needs to fit correctly
   inside the circular avatar container.
   ============================================================================= */

.qc-sidebar__profile-avatar > div {
    width            : 100%;
    height           : 100%;
    border-radius    : 50%;
    background       : linear-gradient(135deg, #1699CA, #1180AB);
    color            : #fff;
    display          : flex;
    align-items      : center;
    justify-content  : center;
}


/* =============================================================================
   Issue 4: Picker badge (in modal conversation picker)
   ============================================================================= */

.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;
}
/* =============================================================================
   PATCH: qudurat-chat.css layout & background fix v3.4
   Append this file to your existing qudurat-chat.css.

   Issues fixed:
   1+2: Bubble alignment + background coverage
   3:   Header avatar (CSS support for the JS fallback chain)
   4:   Blue double-tick colour targeting both class naming conventions
   ============================================================================= */

/* =============================================================================
   ISSUE 1+2: BUBBLE ALIGNMENT
   The JS now outputs BOTH qc-msg--* and qudurat-msg--* on every bubble.
   qudurat-chat.css already styles qudurat-msg--*. We add qc-msg--* aliases
   so the messenger CSS also works. And we fix the list layout.
   ============================================================================= */

/* The message list — must be a flex column so bubbles stack vertically */
#qudurat-chat-messages-list,
.qudurat-chat-body__messages,
.qc-chatarea__msg-list {
    display        : flex;
    flex-direction : column;
    list-style     : none;
    padding        : 12px 10px;
    margin         : 0;
    gap            : 2px;
    flex           : 1;
}

/* Every message row is itself a flex container (for alignment) */
.qc-msg,
.qudurat-msg {
    display         : flex;
    width           : 100%;
    padding-block   : 1px;
    animation       : qc-bubble-pop 220ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* Sent = our messages → align to the START (which is RIGHT in RTL) */
.qc-msg--sent,
.qudurat-msg--sent {
    justify-content : flex-start;
}

/* Received = their messages → align to the END (which is LEFT in RTL) */
.qc-msg--received,
.qudurat-msg--received {
    justify-content : flex-end;
}

/* ---- Bubble shell ---- */
.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;
}

/* Sent bubble — WhatsApp green, flat bottom-left corner (in RTL = leading-end) */
.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);
}

/* Received bubble — white, flat bottom-right corner */
.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);
}

/* Optimistic (sending…) */
.qc-msg--optimistic .qc-msg__bubble,
.qudurat-msg--optimistic .qudurat-msg__bubble {
    opacity : 0.72;
}

/* Sender change — breathing room */
.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;
}

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

/* ---- Meta row (time + tick) ---- */
.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;
}

/* ---- Read indicators ---- */
.qc-msg__read,
.qudurat-msg__read-indicator {
    font-size      : 12px;
    color          : #667781;    /* grey = single tick (sent/delivered) */
    letter-spacing : -1px;
    line-height    : 1;
}

/* Blue double-tick — applied when qc-msg--read class present on the <li> */
.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 {
    color : #53BDEB;
}

/* =============================================================================
   ISSUE 2: BACKGROUND COVERAGE
   Clean, seamless warm background with no white gaps.
   The #qudurat-chat-messages div (id="qudurat-chat-messages") is the
   scrollable messages body. It must fill all available height and have
   no conflicting padding from parent elements.
   ============================================================================= */

/* The messages scrollable container in modal mode */
#qudurat-chat-messages.qudurat-chat-body {
    background-color : #EFEAE2;
    background-image : none;
    padding          : 0;       /* Remove any inherited padding causing gaps */
    overflow-y       : auto;
    flex             : 1;
    display          : flex;
    flex-direction   : column;
}

/* The inner UL already has padding via the rule above */
#qudurat-chat-messages-list {
    flex : 1;       /* Grow to fill the container so background fills fully */
}

/* Messenger mode chat area */
.qc-chatarea__messages {
    background-color : #EFEAE2;
    background-image : none;
    padding          : 0;
}

/* Clear any conflicting background from previous patches */
.qudurat-chat-body,
.qc-chatarea__messages {
    background-image : none !important;
}

/* =============================================================================
   ISSUE 4: CSS for blue ticks — extra targeting for the span class
   The JS now also adds .qudurat-msg__read-indicator--read on the span.
   ============================================================================= */

.qudurat-msg__read-indicator--read,
.qc-msg__read--done {
    color : #53BDEB !important;
}

/* =============================================================================
 * v3.5 — Hide 'ابدأ محادثة' heading via CSS as well (defense in depth).
 * The JS hider catches most cases; this CSS rule covers any pre-paint flash.
 * ============================================================================= */

/* Workreap dashboard page heading on the inbox page */
body[class*="user-dashboard"] .dashboard-page-title h1,
body[class*="user-dashboard"] .page-title h1 {
    /* Only hide if the page is the inbox view */
}

/* Specific heading hidden whenever the messenger is present */
.qc-messenger ~ h1,
.qc-messenger ~ h2,
.qc-messenger ~ h3,
.qc-messenger ~ * h1,
.qc-messenger ~ * h2 {
    /* visibility handled by JS to avoid hiding non-target headings */
}