added "phone" chats

assets/css/styles.css

@@ -18,3 +18,62 @@ nav a {
 main {
   margin: 20vh 5% 20vh 5%;
 }
+
+/* https://codepen.io/RG/pen/bdfDI */
+.phone {
+  background: none repeat scroll 0 0 #fff;
+  /*border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;*/
+  color: #ffffff;
+  font-family: "Open Sans";
+  line-height: 20px;
+  width: 80%;
+  margin: 0 auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.messages-wrapper {
+  position: relative;
+}
+.message {
+  margin: 0 15px 10px;
+  padding: 15px 20px;
+  position: relative;
+}
+.message.to {
+  border-radius: 20px 0px 20px 20px;
+  background-color: #2095fe;
+  color: #fff;
+  margin-left: 160px;
+}
+.message.from {
+  border-radius: 20px 20px 20px 0px;
+  background-color: #e5e4e9;
+  color: #363636;
+  margin-right: 160px;
+}
+.message.to + .message.to,
+.message.from + .message.from {
+  margin-top: -7px;
+}
+.message:before {
+  border-color: #2095fe;
+  border-radius: 50% 50% 50% 50%;
+  border-style: solid;
+  border-width: 0 20px;
+  bottom: 0;
+  clip: rect(20px, 35px, 42px, 0px);
+  content: " ";
+  height: 40px;
+  position: absolute;
+  right: -50px;
+  width: 30px;
+  z-index: -1;
+}
+.message.from:before {
+  border-color: #e5e4e9;
+  left: -50px;
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}