/* ==========================
   STAFF CHAT WINDOW
========================== */

.staff-chat-window{

    position:fixed;

    right:20px;

    bottom:80px;

    width:370px;

    height:520px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:
        0 5px 25px
        rgba(0,0,0,0.25);

    display:none;

    flex-direction:column;

    overflow:hidden;

    z-index:99999;

    font-family:Arial, sans-serif;

}


/* HEADER */

.staff-chat-header{

    height:55px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

    background:#198754;

    color:white;

}


.staff-chat-title{

    font-size:16px;

    font-weight:bold;

}


.staff-chat-close{

    border:none;

    background:transparent;

    color:white;

    font-size:28px;

    cursor:pointer;

    line-height:1;

}


/* MESSAGE AREA */

.staff-chat-messages{

    flex:1;

    overflow-y:auto;

    padding:12px;

    background:#f5f5f5;

}


/* MESSAGE */

.staff-chat-message{

    max-width:80%;

    margin-bottom:10px;

    padding:8px 10px;

    border-radius:8px;

    word-break:break-word;

}


/* OTHER USER */

.other-message{

    background:white;

    margin-right:auto;

    border:1px solid #e5e5e5;

}


/* CURRENT USER */

.my-message{

    background:#dcf8c6;

    margin-left:auto;

}


/* NAME */

.staff-chat-name{

    font-size:12px;

    font-weight:bold;

    color:#075e54;

    margin-bottom:3px;

}


/* MESSAGE TEXT */

.staff-chat-text{

    font-size:14px;

    color:#222;

    line-height:1.4;

}


/* TIME */

.staff-chat-time{

    font-size:10px;

    color:#777;

    text-align:right;

    margin-top:4px;

}


/* INPUT */

.staff-chat-input-area{

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px;

    background:#fff;

    border-top:1px solid #ddd;

}


.staff-chat-input-area input{

    flex:1;

    height:40px;

    border:1px solid #ccc;

    border-radius:20px;

    padding:0 14px;

    outline:none;

    font-size:14px;

    box-sizing:border-box;

}


.staff-chat-input-area button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#198754;

    color:white;

    font-size:18px;

    cursor:pointer;

}


/* LOGIN MESSAGE */

.chat-login-required{

    padding:20px;

    text-align:center;

    color:#555;

}

.staff-chat-header{

    cursor:move;

    user-select:none;

}


/* MOBILE */

@media(max-width:600px){

    .staff-chat-window{

        right:0;

        bottom:0;

        width:100%;

        height:100%;

        border-radius:0;

    }

}