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

    
    --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;

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

    
    --qc-border        : #E9EDEF;
    --qc-border-light  : #F0F2F5;

    
    --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);

    
    --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;

    
    --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;

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




@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);     }
}




.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;
}


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




.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;
}


@media (max-width: 767px) {
    .qc-messenger--chat-active .qc-sidebar { display: none; }
}


.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;
}


.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);
}


.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; }


.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;
}


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


.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;  }


.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);
}


.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);
}


.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);
}




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


@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);
    }
}


.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;
}


.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;
}


.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);
}



.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; }
}


.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;
}


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


.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);
}


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


.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; 
}

.qc-msg--received {
    align-self: flex-end;   
}

.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; 
    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;
}


.qc-msg--sent + .qc-msg--received,
.qc-msg--received + .qc-msg--sent {
    margin-block-start: 10px;
}



.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 {
    
    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); } }





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


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


@media (max-width: 767px) {
    .qc-messenger {
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

    .qc-sidebar {
        border-inline-start: none;
    }
}





.qudurat-chat-header__meta {
    flex         : 1 1 0;      
    min-width    : 0;          
    overflow     : hidden;     
    max-width    : calc(100% - 100px); 
}


.qudurat-chat-header__title {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    max-width     : 100%;
    display       : block;     
}


.qudurat-chat-header__actions {
    flex-shrink : 0;
    flex-grow   : 0;
}


.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;
    
    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); 
}

.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;
}





.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;
}


.qc-messenger {
    --qc-bg-bubble-out : #D9FDD3;
    --qc-bg-bubble-in  : #FFFFFF;
}



.qudurat-msg__bubble,
.qc-msg__bubble {
    padding         : 8px 12px 6px 12px;  
    word-break      : break-word;
    overflow-wrap   : break-word;
    position        : relative;
    min-width       : 80px;   
    max-width       : 72%;
}


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


.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);
}



.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;
    
    margin-inline-end: -2px;
}

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



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


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



.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");
}




.qudurat-chat-window .qudurat-msg__bubble {
    max-width   : 82%;
}


.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;
}


.qudurat-chat-body {
    display        : flex;
    flex-direction : column;
}

.qudurat-chat-body__messages {
    flex    : 1;
    padding : 12px 16px;
}





.qudurat-chat-body {
    background-color  : #EFEAE2 !important;
    background-image  : none    !important;
}


.qc-chatarea__messages {
    background-color  : #EFEAE2 !important;
    background-image  : none    !important;
}


.qc-messenger {
    --qc-bg-chat         : #EFEAE2;
    --qc-bg-chat-pattern : none;
}

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





.qudurat-msg--received .qudurat-msg__bubble,
.qc-msg--received .qc-msg__bubble {
    background-color : #FFFFFF;
    border           : 1px solid rgba(0, 0, 0, 0.04);
}


.qudurat-msg--sent .qudurat-msg__bubble,
.qc-msg--sent .qc-msg__bubble {
    background-color : #D9FDD3;
    border           : none;
}




.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;
}




.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;
}





#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;
}


.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;
}


.qc-msg--sent,
.qudurat-msg--sent {
    justify-content : flex-start;
}


.qc-msg--received,
.qudurat-msg--received {
    justify-content : flex-end;
}


.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;
}


.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 {
    color : #53BDEB;
}




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


#qudurat-chat-messages-list {
    flex : 1;       
}


.qc-chatarea__messages {
    background-color : #EFEAE2;
    background-image : none;
    padding          : 0;
}


.qudurat-chat-body,
.qc-chatarea__messages {
    background-image : none !important;
}



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




body[class*="user-dashboard"] .dashboard-page-title h1,
body[class*="user-dashboard"] .page-title h1 {
    
}


.qc-messenger ~ h1,
.qc-messenger ~ h2,
.qc-messenger ~ h3,
.qc-messenger ~ * h1,
.qc-messenger ~ * h2 {
    
}