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





/* CHAT HEADER */

.chat-header {

    flex-shrink:0;

}



.chat-title {

    display:flex;

    align-items:center;

    gap:10px;

}


.chat-title img {

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}


.chat-title h2 {

    margin:0;

    font-size:1rem;

}


.chat-title span {

    font-size:.8rem;

    color:#A07A5A;

}



/* CHAT AREA */

.chat-screen {
    flex:1;

    width:100%;
    min-width:0;
    min-height:0;

    overflow-y:auto;

    padding:18px;
    padding-bottom:20px;

    display:flex;
    flex-direction:column;
    gap:12px;

    background:#FFF8E6;

    box-sizing:border-box;
}



/* BUBBLES */

.chat-bubble {

    max-width:75%;

    padding:12px 16px;

    border-radius:18px;

    color:#5D3516;

    line-height:1.5;

    font-size:.9rem;

}


.chat-bubble.left {

    align-self:flex-start;

    background:#E8D8C0;

    border-bottom-left-radius:4px;

}


.chat-bubble.right {

    align-self:flex-end;

    background:#D8A47F;

    border-bottom-right-radius:4px;

}



.chat-name {

    display:block;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:4px;

    color:#5D3516;

}