/* =========================================================
   USER GROUP CHAT WIDGET
========================================================= */

.user-group-chat-widget {

    width: 100%;

    height: 100%;

    background: #f6f8fc;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   SCREEN
========================================================= */

.user-group-screen {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    min-height: 0;

}


/* =========================================================
   GROUP HEADER
========================================================= */

.user-group-header {

    min-height: 72px;

    padding: 12px 15px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #1c3475,
            #315ce2
        );

    color: #fff;

    display: flex;

    align-items: center;

}


.user-group-header-info {

    display: flex;

    align-items: center;

    gap: 10px;

}


.user-group-header-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}


.user-group-title {

    font-size: 16px;

    font-weight: 700;

}


.user-group-subtitle {

    margin-top: 3px;

    font-size: 11px;

    opacity: .75;

}


/* =========================================================
   SEARCH
========================================================= */

.user-group-search-wrapper {

    padding: 12px;

    background: #fff;

    border-bottom:
        1px solid #e5e9f0;

}


.user-group-search {

    width: 100%;

    height: 40px;

    box-sizing: border-box;

    padding: 0 13px;

    border:
        1px solid #dfe5ee;

    border-radius: 10px;

    outline: none;

    background: #f8f9fc;

    color: #26334a;

    font-size: 13px;

}


.user-group-search:focus {

    border-color: #3157e8;

    background: #fff;

}


/* =========================================================
   GROUP LIST
========================================================= */

.user-group-list {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 8px;

}


.user-group-list-item {

    width: 100%;

    border: 0;

    background: #fff;

    border-radius: 13px;

    padding: 12px;

    margin-bottom: 7px;

    display: flex;

    align-items: center;

    gap: 11px;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 2px 8px
        rgba(
            20,
            35,
            70,
            .04
        );

    transition:
        background .15s ease,
        transform .15s ease;

}


.user-group-list-item:hover {

    background: #f5f7ff;

    transform:
        translateY(-1px);

}


.user-group-list-avatar {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border-radius: 11px;

    background: #eaf0ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}


.user-group-list-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.user-group-list-name {

    color: #26334a;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.user-group-list-meta {

    margin-top: 4px;

    color: #8b95a7;

    font-size: 10px;

}


/* =========================================================
   STATES
========================================================= */

.user-group-loading,
.user-group-empty,
.user-group-error {

    padding: 30px 15px;

    text-align: center;

    color: #8994a7;

    font-size: 13px;

}


.user-group-empty-icon {

    font-size: 30px;

    margin-bottom: 8px;

}


/* =========================================================
   CHAT HEADER
========================================================= */

.user-chat-header {

    min-height: 72px;

    padding: 10px 12px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #1c3475,
            #315ce2
        );

    color: #fff;

    display: flex;

    align-items: center;

    gap: 9px;

}


.user-chat-back {

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    color: #fff;

    font-size: 25px;

    cursor: pointer;

}


.user-chat-header-icon {

    width: 40px;

    height: 40px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}


.user-chat-header-info {

    min-width: 0;

}


.user-chat-title {

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.user-chat-members {

    margin-top: 3px;

    font-size: 10px;

    opacity: .75;

}


/* =========================================================
   MESSAGES
========================================================= */

.user-group-messages {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 15px;

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.user-message-row {

    width: 100%;

    display: flex;

}


.user-message-row.mine {

    justify-content: flex-end;

}


.user-message-row.other {

    justify-content: flex-start;

}


.user-message-bubble {

    max-width: 78%;

    padding: 9px 12px;

    border-radius: 14px;

    font-size: 13px;

    line-height: 1.45;

    word-break: break-word;

}


.user-message-row.mine
.user-message-bubble {

    background: #3157e8;

    color: #fff;

    border-bottom-right-radius: 4px;

}


.user-message-row.other
.user-message-bubble {

    background: #fff;

    color: #26334a;

    border:
        1px solid #e3e7ee;

    border-bottom-left-radius: 4px;

}


.user-message-sender {

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 700;

    color: #3157e8;

}


.user-message-text {

    white-space: pre-wrap;

}


.user-message-time {

    margin-top: 5px;

    font-size: 9px;

    opacity: .6;

    text-align: right;

}


/* =========================================================
   MESSAGE FOOTER
========================================================= */

.user-group-chat-footer {

    padding: 9px;

    background: #fff;

    border-top:
        1px solid #e4e8ef;

    display: flex;

    gap: 8px;

}


.user-group-message-input {

    flex: 1;

    min-width: 0;

    height: 43px;

    box-sizing: border-box;

    padding: 0 13px;

    border: 0;

    outline: none;

    border-radius: 11px;

    background: #f1f4f9;

    color: #26334a;

    font-size: 13px;

}


.user-group-message-send {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border: 0;

    border-radius: 11px;

    background: #3157e8;

    color: #fff;

    font-size: 17px;

    cursor: pointer;

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .user-message-bubble {

        max-width: 84%;

    }

}

/* =========================================================
   FLOATING LIVE CHAT BUTTON
========================================================= */

.user-live-chat-button {

    position: fixed;

    right: 22px;

    bottom: 20px;

    z-index: 99990;

    height: 56px;

    min-width: 168px;

    padding: 0 20px;

    border: 0;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #3157e8,
            #087fe8
        );

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 30px
        rgba(
            30,
            70,
            180,
            .30
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.user-live-chat-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 35px
        rgba(
            30,
            70,
            180,
            .38
        );

}


.user-live-chat-icon {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .16
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}


.user-live-chat-text {

    letter-spacing:
        .2px;

}


/* =========================================================
   UNREAD BADGE
========================================================= */

.user-live-chat-badge {

    position: absolute;

    top: -5px;

    right: -4px;

    min-width: 20px;

    height: 20px;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 20px;

    background: #ff3b30;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 700;

    border:
        2px solid #fff;

}


/* =========================================================
   POPUP
========================================================= */

.user-live-chat-popup {

    position: fixed;

    right: 22px;

    bottom: 88px;

    z-index: 99991;

    width: 390px;

    height: 560px;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 20px 60px
        rgba(
            15,
            30,
            60,
            .25
        );

    border:
        1px solid #e4e8f0;

}


.user-live-chat-popup
.user-group-chat-widget {

    width: 100%;

    height: 100%;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.user-live-chat-close {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    border: 0;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    color: #fff;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.user-live-chat-close:hover {

    background:
        rgba(
            255,
            255,
            255,
            .22
        );

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .user-live-chat-button {

        right: 15px;

        bottom: 15px;

        min-width: 145px;

        height: 52px;

    }


    .user-live-chat-popup {

        left: 10px;

        right: 10px;

        bottom: 78px;

        width: auto;

        height: calc(
            100vh - 100px
        );

        max-height: 650px;

        border-radius: 18px;

    }

}

/* =========================================================
   GROUP UNREAD BADGE
========================================================= */

.user-group-list-item {

    position: relative;

}


.user-group-unread-badge {

    margin-left: auto;

    min-width: 21px;

    height: 21px;

    padding: 0 6px;

    box-sizing: border-box;

    border-radius: 20px;

    background: #ff3b30;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 700;

    flex: 0 0 auto;

}


/* =========================================================
   UNREAD GROUP
========================================================= */

.user-group-list-item.has-unread {

    background:
        #f5f7ff;

}


.user-group-list-item.has-unread
.user-group-list-name {

    font-weight: 800;

}

/* =========================================================
   TYPING INDICATOR
========================================================= */

.user-group-typing-indicator {

    display: flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 4px 15px;

    box-sizing: border-box;

    color: #7b8494;

    font-size: 11px;

    font-weight: 500;

}


.typing-dots {

    display: flex;

    align-items: center;

    gap: 3px;

}


.typing-dots span {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #8b93a1;

    animation:
        userTypingDot
        1.2s
        infinite
        ease-in-out;

}


.typing-dots span:nth-child(2) {

    animation-delay: .15s;

}


.typing-dots span:nth-child(3) {

    animation-delay: .30s;

}


@keyframes userTypingDot {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity: .45;

    }

    30% {

        transform:
            translateY(-3px);

        opacity: 1;

    }

}

/* =========================================================
   CHAT ATTACHMENT MESSAGE
========================================================= */

.user-message-attachment {
    margin-top: 6px;
    margin-bottom: 4px;
}


/* =========================================================
   IMAGE
========================================================= */

.user-chat-attachment-image {
    display: block;

    max-width: 220px;
    max-height: 220px;

    width: auto;
    height: auto;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.user-chat-attachment-image:hover {
    transform: scale(1.02);
    opacity: .95;
}


/* =========================================================
   FILE
========================================================= */

.user-chat-attachment-file {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 220px;

    min-height: 52px;

    padding: 9px 11px;

    box-sizing: border-box;

    border-radius: 10px;

    background: rgba(255,255,255,.85);

    border: 1px solid rgba(148,163,184,.25);

    color: #334155;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;

}


.user-chat-attachment-file:hover {

    background: #f8fafc;

    transform: translateY(-1px);

}


.user-chat-attachment-file-icon {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #f1f5f9;

    font-size: 18px;

}


.user-chat-attachment-file-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   ATTACHMENT PREVIEW
========================================================= */

.chat-attachment-preview {

    padding: 7px 12px;

    border-top: 1px solid #eef1f5;

    background: #ffffff;

}


.chat-attachment-chip {

    display: flex;

    align-items: center;

    gap: 8px;

    max-width: 100%;

    min-height: 38px;

    padding: 5px 8px;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    background: #f8fafc;

}


.chat-attachment-file-icon {

    width: 27px;

    height: 27px;

    flex: 0 0 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

}


.chat-attachment-file-details {

    flex: 1;

    min-width: 0;

}


.chat-attachment-file-name {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 600;

    color: #334155;

}


.chat-attachment-remove {

    width: 25px;

    height: 25px;

    border: 0;

    border-radius: 7px;

    background: #fee2e2;

    color: #dc2626;

    cursor: pointer;

    font-size: 17px;

    line-height: 1;

}


.chat-attachment-remove:hover {

    background: #fecaca;

}

.user-chat-attachment-download {

    margin-left: auto;

    width: 26px;

    height: 26px;

    flex: 0 0 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #e8f0ff;

    color: #2563eb;

    font-size: 14px;

    font-weight: 700;

}


.user-chat-attachment-file:hover
.user-chat-attachment-download {

    background: #2563eb;

    color: #ffffff;

}