Show current quoted message above composition field

Note that substantial changes will be required for the updated Android
mockups, putting the quotation into the text box next to the attachment
preview.

stylesheets/_conversation.scss

@@ -701,6 +701,7 @@ span.status {
     cursor: auto;
   }
 
+  position: relative;
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -718,6 +719,9 @@ span.status {
   // Accent color border:
   border-left-width: 3px;
   border-left-style: solid;
+  border-top: 1px solid lightgray;
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
 
   .primary {
     flex-grow: 1;
@@ -766,6 +770,16 @@ span.status {
     }
   }
 
+  .close-container {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 18px;
+    width: 18px;
+
+    @include color-svg('../images/x.svg', white);
+  }
+
   .icon-container {
     flex: initial;
     min-width: 48px;
@@ -833,6 +847,15 @@ span.status {
   margin-top: $android-bubble-quote-padding - $android-bubble-padding-vertical;
 }
 
+.bottom-bar .quoted-message {
+  margin: 0px;
+}
+
+.bottom-bar .quote-wrapper {
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
 .incoming .quoted-message {
   background-color: rgba(white, 0.6);
   border-left-color: white;

stylesheets/_ios.scss

@@ -114,6 +114,9 @@ $ios-border-color: rgba(0,0,0,0.1);
   }
 
   .quoted-message {
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+
     // Not ideal, but necessary to override the specificity of the android theme color
     //   classes used in conversations.scss
     background-color: white !important;
@@ -184,6 +187,28 @@ $ios-border-color: rgba(0,0,0,0.1);
       }
     }
 
+    .close-container {
+      flex: initial;
+      min-width: 32px;
+      width: 32px;
+      height: 48px;
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      -webkit-mask: none;
+      background: none;
+
+      .close-button {
+        height: 20px;
+        width: 20px;
+
+        @include color-svg('../images/close-circle.svg', $grey_l4);
+      }
+    }
+
     .from-me {
       .primary {
         .text,
@@ -218,6 +243,56 @@ $ios-border-color: rgba(0,0,0,0.1);
     background-color: lightgray !important;
   }
 
+  .bottom-bar {
+    .quote-wrapper {
+      margin-right: 0px;
+      margin-bottom: 15px;
+    }
+
+    .quoted-message {
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+
+      background: none !important;
+      border: none !important;
+
+      .primary {
+        padding: 0px;
+
+        .ios-label {
+          color: $grey_l4;
+        }
+      }
+
+      .icon-container {
+        height: 48px;
+        width: 48px;
+        min-width: 48px;
+
+        .circle-background {
+          left: 6px;
+          right: 6px;
+          top: 6px;
+          bottom: 6px;
+
+          background-color: $blue !important;
+        }
+
+        .icon {
+          left: 12px;
+          right: 12px;
+          top: 12px;
+          bottom: 12px;
+        }
+
+        .inner {
+          padding: 0px;
+          height: 48px;
+        }
+      }
+    }
+  }
+
   .attachments .bubbled {
     border-radius: 15px;