/* conversation */

.chat {
    border: 1px solid black;
    border-radius: 5px;
    /*until we have more chats*/
    width:  300px;
    display: flex;
    flex-direction: column;
    /* magic */
    max-height: 100%;
    min-height: 100%;

    /*width: 300px;*/
    width: 350px;
    /*margin:  2px;*/

    background: white;
}

.chat_messages {
    display: flex;
    flex-direction: column;
    padding:  5px;
    height: 100% ;
    overflow-y: scroll;
}

.chat_container {
    display: flex;
    flex-direction: : column;
    align-items: top;
}

.chat_message {
    padding:  5px;
    margin: 2px;
    /*width: fit-content;*/
    min-width: 200px;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap:  5px;
}

.chat_message_inbound {
    border-radius: 0px 10px 10px 10px ;
    text-align: left;
    background: LightBlue;
    margin-left: 0; 
    margin-right: auto;
}

.chat_message_inbound.unread {
    background: DeepSkyBlue ;
}

.chat_message_outbond {
    border-radius: 10px 10px 0px 10px ;
    text-align: left;
    background: PaleGreen ;
    margin-left: auto; 
    margin-right: 0;
}

.chat_message_outbond.unread {
    background: LimeGreen;
} 

.chat_message_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color:  grey;
    min-width: 100px;
}

.chat_assign_button {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    line-height: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    background: 0;
}

.chat_assign_button_outbound {
    border: 2px solid lightslategray;
    color:  lightslategray; 
}

.chat_assign_button_inbound {
    border: 2px solid lightslategray;
    color:  lightslategray;
}

.chat_assign_button:hover {
    border: 2px solid black;
    color:  black;
}

.chat_user_info_container {
    padding: 10px;
    margin: 5px;
    border:  1px solid black;
    border-radius: 5px;
}

.chat_send_container {
    padding: 5px;
    margin: 5px;
    border:  1px solid black;
    border-radius: 5px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.chat_send_input {
    border:  0;
    border-radius: 5px;
    flex-grow:  1;
    padding: 5px;
    border:  0;
}

.timestamp {
    font-size: 10px 0;
    color:  grey;
}