.chat { display: block; padding: 10px 10px 100px 10px; }
.chat .message { display: inline-block; width: 100%; font-size: 16px; }
.chat .message .typing { display: block; width: 40px; height: 40px; background-image: url("../../i/tenant/chatbot_typing.gif"); background-size: 40px 40px;float: right;}
.chat .message .option { height: 30px; margin: 0 10px; border: 1px burlywood solid; border-radius: 4px;float: left; padding: 10px;cursor: pointer; }
.chat .message .icon {display: block; width: 40px; height: 40px; background-size: 40px 40px;border-radius: 30px;}
.chat .bubble { background-color: #F2F2F2; border-radius: 5px; box-shadow: 0 0 6px #B2B2B2; display: inline-block; padding: 10px 18px; position: relative; vertical-align: top;}
.chat .bubble::before { background-color: #F2F2F2; content: ""; display: block; height: 16px; position: absolute; top: 11px; width: 20px; -moz-transform: rotate( 29deg ) skew( -35deg ); -ms-transform: rotate( 29deg ) skew( -35deg ); -o-transform: rotate( 29deg ) skew( -35deg ); -webkit-transform: rotate( 29deg ) skew( -35deg ); transform: rotate( 29deg ) skew( -35deg ); }

.chat .you span { float: right; }
.chat .you .icon { background-image: url("../../../i/user_main_icon.png"); }
.chat .you .bubble { float: right; margin: 5px 25px 5px 45px;}
.chat .you .bubble::before { box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, .4); right: -9px; }

.chat .me span { float: left; }
.chat .me .icon { background-image: url("/api/BaseApi/GetCurrentUserPhoto?width=40&height=40"); }
.chat .me .bubble { float: left; margin: 5px 45px 5px 20px; }
.chat .me .bubble::before { box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); left: -9px; }