/* Referência: https://codepen.io/swaibu/pen/QxJjwN */
/* Conversation */

.conversation {
    height: calc(100% - 12px);
    position: relative;
    background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
    z-index: 0;
    display: inline-block;
    padding: 15px;
}

.conversation ::-webkit-scrollbar {
    transition: all .5s;
    width: 5px;
    height: 1px;
    z-index: 10;
}

.conversation ::-webkit-scrollbar-track {
    background: transparent;
}

.conversation ::-webkit-scrollbar-thumb {
    background: #b3ada7;
}

.message {
    color: #000;
    clear: both;
    line-height: 18px;
    font-size: 15px;
    padding: 8px;
    position: relative;
    margin: 8px 0;
    max-width: 85%;
    word-wrap: break-word;
    z-index: -1;
}

.message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
}

.message.received {
    background: #fff;
    border-radius: 0px 5px 5px 5px;
    float: left;
}

.message.received .metadata {
    padding: 0 0 0 16px;
}

.message.received:after {
    border-width: 0px 10px 10px 0;
    border-color: transparent #fff transparent transparent;
    top: 0;
    left: -10px;
}

.message.sent {
    background: #e1ffc7;
    border-radius: 5px 0px 5px 5px;
    float: right;
}

.message.sent:after {
    border-width: 0px 0 10px 10px;
    border-color: transparent transparent transparent #e1ffc7;
    top: 0;
    right: -10px;
}