CSS Tin nhắn riêng giống trên iOS cho wapego

<div class="{{nick_uid==api.user_id ? 'my-msg not-my-msg mright' : 'my-msg mleft'}}" align="left">
<div class="message-text">{{message|raw}}</div>
</div>
<div style="clear:both"></div>

.my-msg{background-image:linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(210,244,254)),color-stop(1, rgb(149,194,253)));border:solid 1px rgba(200, 200, 200, 0.5);border-radius: 5px;box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
box-sizing:border-box;clear:both;float:left;margin-bottom:5px;padding:5px 10px;position:relative;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);width:auto;max-width:100%;word-wrap:break-word;}
.my-msg:before, .my-msg:after {border-radius:5px;content:'';display:block;position:absolute;}
.my-msg:before{border:8px solid transparent;border-bottom-color:rgba(0, 0, 0, 0.5);bottom:0;left:-7px;z-index:-2;}
.my-msg:after{border:8px solid transparent;border-bottom-color:#d2f4fe;bottom:1px;left:-8px;}
/*This is code shared at http://buycode.wap.mu*/
.not-my-msg {background-image:linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(172,228,75)),color-stop(1, rgb(122,205,71)));float:right;}
.not-my-msg:before{border-bottom-color: rgba(0, 0, 0, 0.5);border-radius:5px;left:auto;right:-7px;}
.not-my-msg:after{border-bottom-color:#ace44b;border-radius: 5px;left:auto;right:-8px;}

.my-msg{margin:10px 0;overflow: hidden;}
.message-text{padding: 10px 20px;float:right;clear:both;border-radius: 25px;position:relative;margin-bottom:1px;}
.mleft .message-text{margin-right:70px;margin-left:20px;background-color:#e5e5ea;float: left;}
.mright .message-text{margin-left:70px;margin-right:20px;background-color:#36a9fc;color:#fff;float:right;}
.message-text:last-child:before,.message-text:last-child:after{content:'';position:absolute;bottom:0;width: 35px;height:25px;z-index: -1;}
/*This is code shared at http://buycode.wap.mu*/
.mright .message-text:before,.mright .message-text:after{border-radius:0 0 0 50%;}
.mright .message-text:before{height:20px;right:-23px;background-color:#36a9fc;}
.mright .message-text:after{right:-35px;bottom:-3px;background-color:#fff;}
.mleft .message-text:before,.mleft .message-text:after{border-radius:0 0 50% 0;}
.mleft .message-text:before{height:20px;left:-23px;background-color:#e5e5ea;}
.mleft .message-text:after{left:-35px;bottom:-3px;background-color:#fff;}