/* ==========================================
   HELPDESK BWS MALUKU
   ========================================== */

/* =====================
   CHAT BOX
===================== */

.chat-box{
    max-height:450px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
    background:#f6f8fb;
    border:1px solid #e5e7eb;
    border-radius:12px;
    scroll-behavior:smooth;
}

/* Scrollbar */

.chat-box::-webkit-scrollbar{
    width:8px;
}

.chat-box::-webkit-scrollbar-track{
    background:#eef2f7;
}

.chat-box::-webkit-scrollbar-thumb{
    background:#bfc8d4;
    border-radius:20px;
}

.chat-box::-webkit-scrollbar-thumb:hover{
    background:#9aa6b2;
}


/* =====================
   ROW
===================== */

.chat-row{
    display:flex;
    margin-bottom:18px;
}

.chat-row.admin{
    justify-content:flex-start;
}

.chat-row.pemohon{
    justify-content:flex-end;
}


/* =====================
   BUBBLE
===================== */

.chat-bubble{

    max-width:75%;
    padding:14px 18px;

    border-radius:14px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    word-wrap:break-word;

    transition:.2s;
}

.chat-row.admin .chat-bubble{

    background:#ffffff;

    border-bottom-left-radius:5px;
}

.chat-row.pemohon .chat-bubble{

    background:#dff3ff;

    border-bottom-right-radius:5px;
}


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

.chat-sender{

    font-size:13px;

    font-weight:700;

    margin-bottom:8px;

    color:#2d3748;
}


/* =====================
   ISI CHAT
===================== */

.chat-message{

    font-size:14px;

    line-height:1.7;

    color:#374151;
}


/* =====================
   WAKTU
===================== */

.chat-time{

    margin-top:10px;

    text-align:right;

    font-size:11px;

    color:#9ca3af;
}


/* =====================
   FORM CHAT
===================== */

.chat-form textarea{

    resize:none;

    border-radius:10px;
}

.chat-form button{

    border-radius:10px;

    padding:10px 25px;
}


/* =====================
   CARD STATUS
===================== */

.ticket-card{

    border:none;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

.ticket-status{

    font-size:13px;

    font-weight:600;

    padding:8px 16px;

    border-radius:50px;
}


/* =====================
   RESPONSIVE
===================== */

@media(max-width:768px){

.chat-bubble{

    max-width:92%;

}

.chat-box{

    max-height:350px;

}

}