Add tail to SMS message

Because:
- drawing things in CSS is fun
- when we have inbound messages, having a tail pointing the other way
  will help differentiate which messages are inbound

app/assets/stylesheets/components/sms-message.scss

@@ -1,5 +1,8 @@
+$tail-angle: 20deg;
+
 .sms-message-wrapper {
 
+  position: relative;
   width: 100%;
   max-width: 464px;
   box-sizing: border-box;
@@ -12,6 +15,20 @@
   clear: both;
   word-wrap: break-word;
 
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: -4px;
+    right: -20px;
+    border: 10px solid transparent;
+    border-left-width: 13px;
+    border-right-width: 13px;
+    border-bottom-color: $panel-colour;
+    border-left-color: $panel-colour;
+    transform: rotate($tail-angle);
+  }
+
 }
 
 .sms-message-recipient {