.row > .message-body {
    max-width: 80%;
    min-width: 0;
}

textarea,
textarea:focus {
    outline: none;
}

textarea {
    border: none;
    background: transparent;
    line-height: 20px;
    height: auto;
    resize: none;
    overflow-y: auto;
    max-height: 140px;
    field-sizing: content;
}

.msg-bubble.grouped.mine {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.msg-bubble.grouped.theirs {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.msg-time {
    float: right;
    line-height: 20px;
    margin-left: 8px;
    margin-right: -8px;
    font-size: 11px;
    color: var(--gray400);
    opacity: .5;
}

.msg-bubble .text4::after {
    content: '';
    display: block;
    clear: both;
}

.msg-likes {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 100px;
    background-color: var(--gray200);
    font-size: 11px;
    line-height: 14px;
    color: var(--gray400);
}

.msg-bubble.theirs .msg-likes {
    right: 0;
    translate: 50% 50%;
}

.msg-bubble.mine .msg-likes {
    left: 0;
    translate: -50% 50%;
}