#yii-debug-toolbar{
    display: none !important;
}
.userlist-item {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-height: 80px;;
    justify-content: space-between;
    overflow: hidden;
}

.user-info-wrapper{
    display: flex;
    align-items: center;
}
.userlist-item:not(.unread) .unreadNotif{
    display: none;
}
.userlist-item.unread .unreadNotif{
    color: red;
    font-size: 1.5rem;
    position: relative;
    top: 0;
    right: 0px;

}

.userlist-item img{
    width: 50px !important;
    height: 50px;
    overflow: hidden;
}

.userlist-item:hover {
    background-color: rgb(255, 224, 161);
}

.userlist-item.active {
    background-color: rgb(255, 224, 161);
    border-left: 5px solid rgb(102, 102, 102);
}


.chat-notif{ 
    position: absolute !important;
    color: red !important;
    font-size: 1.9rem;
    position: relative;
    top: 1px;
    right: 13px;
    z-index: 899999;
}

.chat-button {
    position: fixed;
    bottom: 25px;
    right: 20px;
    background: #FBC048;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    width: 50px;
}

.chat-button i {
    color: #3e4b57;

}
/* Chat Box Container */
.chat-container {
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    /* Default hidden */
    overflow: hidden;
    z-index: 99999;
    height: auto   ;
}

/* Chat Header */
.chat-header {
    background: #FBC048;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 16px;
}
.close-button{
    float: right;
    cursor: pointer;
    background: transparent;
    border: none;
    color: black;
    right: 15px;
    top: 20px;
    position: absolute;
}

    /* styel for userInfo  */
.userInfo {
    display: flex;
    align-items: center;
    padding: 3px;
}

.userInfo .avatar {
    margin-right: 10px;
}

.userInfo .avatar-image {
    width: 305x;
    height: 35px;
    border-radius: 50%;
}
.userInfo .userInfoText p{
    margin: 0; 
    line-height: normal;
    text-align: left;
}
.userInfo .userEmail{
    font-style: italic;
}
.userInfo{
    font-size: 16px;
    color: #525252;
    font-weight: bold;
}
.userEmail{
    font-size: 14px;
    color: #686868;
    font-weight: 100;
}

/* Chat Messages */
#chat-box {
    padding: 10px;
    height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}

.chat-dropdown .btn{
    position: absolute;
    top: 0;
    background-color: transparent;
    border: none;
    /* color: #686868; */
    font-size: 12px;
    padding: 5px 10px;
}
.chat-dropdown .dropdown-toggle::after{
    display: none;
}
.chat-item-kiri-dropdown .btn{
    color: red;
    left: 60%;
}

.chat-item-kanan-dropdown .btn{
    color: blue;
    right: 60%;
}

.chat-message.deleted{
    font-size: 12px;
    color: #8a8a8a;
    font-style: italic;
}



.chat-item{ 
    border-radius: 6px;
    max-width: 60%;
    padding: 5px 10px;
    margin-bottom: 5px;
    font-size: 1rem;
    overflow-wrap: break-word;
}


.chat-item a{ 
    color: #976500;
    text-decoration: underline;
}
.chat-item-kiri{
    background-color: #fdebc8;  
}
.chat-item-kanan{
    background-color: #caf5fd;  
    margin-left:auto;
}
.chat-item-pelanggan{
    display: none;
    font-weight: bold;
    font-size: 9px;
    margin-bottom: 0; 
}

.chat-item-clock{ 
    font-style: italic;
    font-size: 0.8rem;
    color: #6a6a6a;
    margin: 0;
    text-align: right;

}
.chat-item img{
    max-width: 100%;
    cursor: pointer;;
}

.chat-item .link-preview a {
    display: -webkit-box;       /* Mengaktifkan box layout untuk teks */
    -webkit-line-clamp: 2;      /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Sembunyikan teks yang berlebih */
    text-overflow: ellipsis;    /* Tambahkan "..." jika teks terlalu panjang */
    word-break: break-word;  
    max-height: 3em;   
    margin : 10px 0 5px;
    font-size: 11px;     /* Sesuaikan dengan ukuran font */
}

.chat-item .link-preview p {
    display: -webkit-box;       /* Mengaktifkan box layout untuk teks */
    -webkit-line-clamp: 2;      /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Sembunyikan teks yang berlebih */
    text-overflow: ellipsis;    /* Tambahkan "..." jika teks terlalu panjang */
    word-break: break-word;  
    max-height: 3em;  
    color: #6a6a6a;    ;
    font-size: 11px;     
    margin-bottom: 0;    /* Sesuaikan dengan ukuran font */
}

/* Chat Input */
.chat-input {
    display: flex;
    padding: 10px;
}

.chat-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    margin-right: 5px;
}

.chat-input button {
    background: #FBC048;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}

.chat-emoji-container.client{
    position: fixed;
    bottom: 71px;
    right: 57px;
    width: 354px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.8rem; 
    background-color: #ffffff;
    border: 1px solid #cecece;
    border-radius: 10px;
    padding: 10px;
}
.chat-emoji-container .emoji{
    padding: 5px 10px;
    height: 40px;
    cursor: pointer;
}

.chat-img{
    width: 100%;
    height: auto;
}
.chat-video{
    width: 100%;
    height: auto;
}

.balas-message-selected{
    display: flex;
    min-width: 200px;
    max-width: 30%;
    align-items: center;
    /* max row text = 1 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    ;
}
.balas-message-selected img{
    height: 48px;
    width: auto;
    margin-right: 5px;
    
}

.balas-message-selected video{
    height: 48px;
    width: auto;
    margin-right: 5px;
    
}

.chat-item-reply{    
    display: flex;
    align-items: center;
    background-color: #efefef;
    width: 60%;
    padding: 10px 10px 10px;
    margin-bottom: -7px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #a0a0a0;
    font-style: italic;
    cursor: pointer;
 
    -webkit-line-clamp: 2; /* Batasi hanya 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Tambahkan "..." jika teks terpotong */
    max-height: 5em; /* Sesuaikan dengan tinggi font */
    line-height: 1em; /* Atur tinggi baris agar sesuai */

}

.chat-item-reply img{
    align-items: center;
    width: 40px !important;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 0;

    width: auto;
    
}

.chat-item-reply video{
    align-items: center;
    width: 40px !important;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 0;

    width: auto;
    
}