/*
 * Created By : Ahmad Windi Wijayanto
 * Email : ahmadwindiwijayanto@gmail.com
 * Github : https://github.com/whendy
 * LinkedIn : https://www.linkedin.com/in/ahmad-windi-wijayanto/
 *
 */

.direct-chat-kasus {
    z-index: 9999;
    position: fixed;
    right: 25px;
    margin-bottom: 10px;
    bottom: 0;
    width: 45%;
}

.start-chat {
    cursor: pointer;
    border-bottom: 1px solid rgba(108, 117, 125, 0.66);
    margin-bottom: 0;
}
.start-chat:hover {
    background: rgba(80, 177, 253, 0.58);
}
.start-chat.active {
    background: rgba(80, 177, 253, 0.77);
}


/* Chat box */
/* Container Utama */
.chat-wrapper {
    height: 50vh;
    display: flex;
    flex-direction: column;
    max-width: 600px; /* Ukuran maksimal mobile-friendly */
    margin: 0 auto;
    border: 1px solid #ddd;
}

/* Background Area Chat */
.chat-body {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #e5ddd5;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    display: flex;
    flex-direction: column;
}

/* Wrapper Pesan */
.message-wrapper {
    margin-bottom: 8px;
    display: flex;
    width: 100%;
}

.message-wrapper.sender { justify-content: flex-end; }
.message-wrapper.receiver { justify-content: flex-start; }

/* Styling Bubble */
.bubble {
    padding: 6px 12px;
    max-width: 75%;
    font-size: 0.9rem;
    position: relative;
    border-radius: 8px;
}

/* Warna Bubble */
.sender .bubble {
    background-color: #dcf8c6; /* Hijau muda WA */
    border-top-right-radius: 0;
}

.receiver .bubble {
    background-color: #ffffff; /* Putih WA */
    border-top-left-radius: 0;
}

/* Meta Data (Jam & Status) */
.time {
    font-size: 0.65rem;
    color: #888;
    text-align: right;
    margin-top: 2px;
}

/* Membuat Input Membulat ala WA modern */
.chat-footer .form-control:focus {
    box-shadow: none;
}

.img-size-50 {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* History Chats */
.tabs-room-chat .nav-link {
    border: 1px solid rgba(0, 0, 0, 0.06);
}