#waba-chat-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background: #f9f9f9;
    max-width: 600px;
    font-family: sans-serif;
}

#waba-message-list {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    margin-bottom: 15px;
}

.waba-msg {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
    max-width: 80%;
}

.msg-in {
    background: #e1ffc7; /* WhatsApp Greenish */
    align-self: flex-start;
    float: left;
    clear: both;
}

.msg-out {
    background: #dcf8c6; 
    /* Actually usually native is blue/green, let's use a distinct color */
    background: #d9fdd3; 
    align-self: flex-end;
    float: right;
    clear: both;
    text-align: right;
}

/* Clearfix for floats */
#waba-message-list::after {
    content: "";
    clear: both;
    display: table;
}

.msg-meta {
    font-size: 0.8em;
    color: #555;
    margin-bottom: 2px;
}

#waba-chat-controls {
    border-top: 1px solid #eee;
    padding-top: 10px;
}