.chat {
    margin: 2em auto;
    padding: 1em 2.5em;
    border: 2px solid #aaa;
    border-radius: 10px;
    display: flow-root;
    max-width: 700px;        
}

.message {
    padding: 5px 10px;
    margin-bottom: 30px;
    border-radius: 10px;
    display: block;
    width: auto;
    max-width: 80%;
    position: relative;
    clear: both;    
}

.message p {
    margin: 0;
}

.message:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 20px;
}

.message:after {
    content: attr(username);
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 6em;
    height: 20px;
    color: var(--md-typeset-color);
    white-space: nowrap;
    background: var(--md-default-bg-color);
}

.message-left {
    background-color: #cdcdcd;
    color: #222;
    margin-right: 20%;
    margin-left: 80px;  
    float: left;
}

.message-left:before {
    left: -10px;
    background: #cdcdcd;
    border-bottom-right-radius: 15px;
}

.message-left:after {
    left: -6em;
    border-bottom-right-radius: 15px;
    text-align: right;
    padding-right: 20px;
}

.message-right {
    background-color: #2b8730;
    color: #fff;
    margin-left: 20%;
    margin-right: 80px;
    float: right;
}

.message-right:before {
    right: -10px;
    background: #2b8730;
    border-bottom-left-radius: 15px;
}

.message-right:after {
    right: -6em;
    border-bottom-left-radius: 15px;
    text-align: left;
    padding-left: 20px;
}