#chat-container {
    margin-top: -2rem;
}

.chat-bubble {
    /* max-width: 255px; */
    /* word-wrap: break-word; */
    /* margin-bottom: 12px; */
    /* line-height: 24px; */
    position: relative;
    /* padding: 10px 20px; */
    /* border-radius: 25px; */

    &:before,
    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 25px;
    }
}

.from-me {
    color: white;
    background: #348cd4;
    align-self: flex-end;

    &:before {
        right: -7px;
        width: 20px;
        background-color: #348cd4;
        border-bottom-left-radius: 16px 14px;
    }

    &:after {
        right: -26px;
        width: 26px;
        background-color: white;
        border-bottom-left-radius: 10px;
    }
}

.from-them {
    background: #eaeaea;
    color: black;
    align-self: flex-start;

    &:before {
        left: -7px;
        width: 20px;
        background-color: #eaeaea;
        border-bottom-right-radius: 16px;
    }

    &:after {
        left: -26px;
        width: 26px;
        background-color: white;
        border-bottom-right-radius: 10px;
    }
}