.chat-online {
    color: #34ce57
}

.chat-offline {
    color: #e4606d
}


.chat-messages {
    display: flex;
    flex-direction: column;
    min-height: 20vh;
    max-height: 40vh;
    overflow-y: scroll
}

.chat-message-left,
.chat-message-right {
    display: flex;
    flex-shrink: 0
}

.chat-message-left {
    margin-right: auto
}

.chat-message-right {
    flex-direction: row-reverse;
    margin-left: auto
}

.py-3 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}

.px-4 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}

.flex-grow-0 {
    flex-grow: 0!important;
}

.chat-text-area {
    border-radius: 7px;
    font-family: 'Helvetica neue lt 45', sans-serif;
    overflow: scroll;
    resize: both;
    line-height: 22px;
    width: 100%;
    max-height: 200px;
    padding: 12px;
    margin-right: 12px;
}

.chat {
    align-items: flex-end;
    max-height: 200px;
    overflow: scroll;
}

.chat-header {
    font: 16px 'Helvetica neue lt 45 bold', sans-serif;
}

.message-header {
    font: 16px 'Helvetica neue lt 45 bold', sans-serif;
    margin-bottom: 8px;
}

.message-content {
    font: 16px 'Helvetica neue lt', sans-serif;
    margin-bottom: 8px;
    max-width: 300px;
}

.message-content a {
    display: inline;
}

/* remove height from the wrapper */
#message-text { min-height: 0; }

/* make the actual contenteditable area take the height */
#message-text .TinyMDE {
    display: block;
    min-height: 150px;         /* or min-height: inherit; and keep 150px on the wrapper */
    width: 100%;
    padding: 8px 12px;         /* optional, to keep the form-control look */
    outline: none;
}

.sidebar-contact {
    font: 16px 'Helvetica neue lt 45 bold', sans-serif;
    margin-bottom: 8px;
    color: var(--argos-primary) !important;
}

#contacts-list {
    overflow: scroll;
    max-height: 65vh;
}

.small {
    color: var(--argos-dark-grey) !important;
}

.list-group-item-chat {
    border-bottom: 1px solid var(--argos-primary-unselected) !important;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* static/css/chat.css */
a.list-group-item-chat.current-chat {
    box-shadow: inset 3px 0 0 var(--argos-planning-secondary);
    background-color: rgba(234, 100, 29, 0.04); /* optional soft highlight */
}

.border-top {
    border-top: 1px solid #dee2e6!important;
}