diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index e45caed9b..b83997d4a 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -410,10 +410,6 @@ li.entry:hover .hover-icon-container {
   display: none;
 }
 
-.message-list .outgoing .bubble .quote, .private .message-list .incoming .bubble .quote {
-  margin-top: $android-bubble-quote-padding - $android-bubble-padding-vertical;
-}
-
 .sender {
   font-size: smaller;
   opacity: 0.8;
@@ -470,8 +466,6 @@ span.status {
     }
   }
 
-
-
   .bubble {
     position: relative;
     left: -2px;
@@ -487,140 +481,6 @@ span.status {
       max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
     }
 
-    .quote {
-      @include message-replies-colors;
-      @include twenty-percent-colors;
-
-      &.no-click {
-        cursor: auto;
-      }
-
-      cursor: pointer;
-      display: flex;
-      flex-direction: row;
-      align-items: stretch;
-      overflow: hidden;
-
-      border-radius: 2px;
-      background-color: #eee;
-      position: relative;
-
-      margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
-      margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
-      margin-bottom: 0.5em;
-
-      // Accent color border:
-      border-left-width: 3px;
-      border-left-style: solid;
-
-      .primary {
-        flex-grow: 1;
-        padding-left: 10px;
-        padding-right: 10px;
-        padding-top: 6px;
-        padding-bottom: 6px;
-
-        // Will turn on in the iOS theme. This extra element is necessary because the iOS
-        //   theme requires text that isn't used at all in the Android Theme
-        .ios-label {
-          display: none;
-        }
-
-        .author {
-          font-weight: bold;
-          margin-bottom: 0.3em;
-          @include text-colors;
-
-          .profile-name {
-            font-size: smaller;
-          }
-        }
-
-        .text {
-          white-space: pre-wrap;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-
-          // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use
-          //   ... as the truncation indicator. That's not a solution that works well for
-          //   all languages. More resources:
-          //     - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
-          //     - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5
-        }
-
-        .type-label {
-          font-style: italic;
-          font-size: 12px;
-        }
-
-        .filename-label {
-          font-size: 12px;
-        }
-      }
-
-      .icon-container {
-        flex: initial;
-        min-width: 48px;
-        width: 48px;
-        height: 48px;
-        position: relative;
-
-        .circle-background {
-          position: absolute;
-          left: 6px;
-          right: 6px;
-          top: 6px;
-          bottom: 6px;
-
-          border-radius: 50%;
-          @include avatar-colors;
-          &.white {
-            background-color: white;
-          }
-        }
-
-        .icon {
-          position: absolute;
-          left: 12px;
-          right: 12px;
-          top: 12px;
-          bottom: 12px;
-
-          &.file {
-            @include color-svg('../images/file.svg', white);
-          }
-          &.image {
-            @include color-svg('../images/image.svg', white);
-          }
-          &.microphone {
-            @include color-svg('../images/microphone.svg', white);
-          }
-          &.play {
-            @include color-svg('../images/play.svg', white);
-          }
-
-          @include avatar-colors;
-        }
-
-        .inner {
-          position: relative;
-
-          height: 48px;
-          text-align: center;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          img {
-            max-width: 100%;
-            max-height: 100%;
-          }
-        }
-      }
-    }
-
     .body {
       white-space: pre-wrap;
 
@@ -687,13 +547,6 @@ span.status {
     .avatar, .bubble {
       float: left;
     }
-
-    .bubble {
-      .quote {
-        background-color: rgba(white, 0.6);
-        border-left-color: white;
-      }
-    }
   }
 
   .outgoing {
@@ -840,6 +693,152 @@ span.status {
   }
 }
 
+.quoted-message {
+  @include message-replies-colors;
+  @include twenty-percent-colors;
+
+  &.no-click {
+    cursor: auto;
+  }
+
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+
+  border-radius: 2px;
+  background-color: #eee;
+  position: relative;
+
+  margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
+  margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
+  margin-bottom: 0.5em;
+
+  // Accent color border:
+  border-left-width: 3px;
+  border-left-style: solid;
+
+  .primary {
+    flex-grow: 1;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    // Will turn on in the iOS theme. This extra element is necessary because the iOS
+    //   theme requires text that isn't used at all in the Android Theme
+    .ios-label {
+      display: none;
+    }
+
+    .author {
+      font-weight: bold;
+      margin-bottom: 0.3em;
+      @include text-colors;
+
+      .profile-name {
+        font-size: smaller;
+      }
+    }
+
+    .text {
+      white-space: pre-wrap;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+
+      // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use
+      //   ... as the truncation indicator. That's not a solution that works well for
+      //   all languages. More resources:
+      //     - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
+      //     - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5
+    }
+
+    .type-label {
+      font-style: italic;
+      font-size: 12px;
+    }
+
+    .filename-label {
+      font-size: 12px;
+    }
+  }
+
+  .icon-container {
+    flex: initial;
+    min-width: 48px;
+    width: 48px;
+    height: 48px;
+    position: relative;
+
+    .circle-background {
+      position: absolute;
+      left: 6px;
+      right: 6px;
+      top: 6px;
+      bottom: 6px;
+
+      border-radius: 50%;
+      @include avatar-colors;
+      &.white {
+        background-color: white;
+      }
+    }
+
+    .icon {
+      position: absolute;
+      left: 12px;
+      right: 12px;
+      top: 12px;
+      bottom: 12px;
+
+      &.file {
+        @include color-svg('../images/file.svg', white);
+      }
+      &.image {
+        @include color-svg('../images/image.svg', white);
+      }
+      &.microphone {
+        @include color-svg('../images/microphone.svg', white);
+      }
+      &.play {
+        @include color-svg('../images/play.svg', white);
+      }
+
+      @include avatar-colors;
+    }
+
+    .inner {
+      position: relative;
+
+      height: 48px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+}
+
+// We only add margin if there's no 'sender' element beforehand, which is only possible
+//   on incoming messages, and only in groups (when we're not in a .private conversation).
+.outgoing .quoted-message, .private .incoming .quoted-message {
+  margin-top: $android-bubble-quote-padding - $android-bubble-padding-vertical;
+}
+
+.incoming .quoted-message {
+  background-color: rgba(white, 0.6);
+  border-left-color: white;
+}
+
+
 .message-list,
 .message-container {
   .avatar {
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index 8bfacfc3e..26bf2800b 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -111,124 +111,111 @@ $ios-border-color: rgba(0,0,0,0.1);
     .bubble .content {
       margin-top: 0px;
     }
+  }
 
-    .quote {
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-
-      // Not ideal, but necessary to override the specificity of the android theme color
-      //   classes used in conversations.scss
-      background-color: white !important;
-      border: 1px solid $grey_l1_5 !important;
-      border-bottom: none !important;
+  .quoted-message {
+    // Not ideal, but necessary to override the specificity of the android theme color
+    //   classes used in conversations.scss
+    background-color: white !important;
+    border: 1px solid $grey_l1_5 !important;
+    border-bottom: none !important;
 
-      margin-top: 0px !important;
-      margin-bottom: 0px;
-      margin-left: 0px;
-      margin-right: 0px;
+    margin-top: 0px !important;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
 
-      .primary {
-        padding: 10px;
-
-        .text,
-        .filename-label,
-        .type-label {
-          border-left: 2px solid $grey_l1;
-          padding: 5px;
-          padding-left: 7px;
-          // Without this smaller bottom padding, text beyond four lines still shows up!
-          padding-bottom: 2px;
-          color: black;
-        }
+    .primary {
+      padding: 10px;
 
-        .author {
-          display: none;
-        }
+      .text,
+      .filename-label,
+      .type-label {
+        border-left: 2px solid $grey_l1;
+        padding: 5px;
+        padding-left: 7px;
+        // Without this smaller bottom padding, text beyond four lines still shows up!
+        padding-bottom: 2px;
+        color: black;
+      }
 
-        .ios-label {
-          display: block;
-          color: $grey_l1;
-          font-size: smaller;
-          margin-bottom: 3px;
-        }
+      .author {
+        display: none;
       }
 
-      .icon-container {
-        height: 61px;
-        width: 61px;
-        min-width: 61px;
+      .ios-label {
+        display: block;
+        color: $grey_l1;
+        font-size: smaller;
+        margin-bottom: 3px;
+      }
+    }
 
-        .circle-background {
-          left: 12px;
-          right: 12px;
-          top: 12px;
-          bottom: 12px;
+    .icon-container {
+      height: 61px;
+      width: 61px;
+      min-width: 61px;
 
-          background-color: $blue !important;
-        }
+      .circle-background {
+        left: 12px;
+        right: 12px;
+        top: 12px;
+        bottom: 12px;
 
-        .icon {
-          left: 18px;
-          right: 18px;
-          top: 18px;
-          bottom: 18px;
+        background-color: $blue !important;
+      }
 
-          background-color: white !important;
-        }
+      .icon {
+        left: 18px;
+        right: 18px;
+        top: 18px;
+        bottom: 18px;
 
-        .inner {
-          padding: 12px;
-          height: 61px;
-          text-align: center;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
+        background-color: white !important;
       }
 
-      .from-me {
-        .primary {
-          .text,
-          .filename-label,
-          .type-label {
-            border-left: 2px solid $blue;
-          }
-        }
+      .inner {
+        padding: 12px;
+        height: 61px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
 
-    .incoming {
-      .bubble {
-        .quote {
-          border-left: none;
-          border: none !important;
-          border-bottom: 1px solid lightgray !important;
+    .from-me {
+      .primary {
+        .text,
+        .filename-label,
+        .type-label {
+          border-left: 2px solid $blue;
         }
       }
     }
+  }
 
-    .bubble {
-      .quote.from-me {
-        .primary {
-          .text,
-          .filename-label,
-          .type-label {
-            border-left: 2px solid $blue;
-          }
-        }
-      }
-    }
+  .incoming .quoted-message {
+    border-left: none;
+    border: none !important;
+    border-bottom: 1px solid lightgray !important;
+  }
 
-    .outgoing .bubble .quote,
-    .private .message-list .incoming .bubble .quote {
-      margin-top: 0px;
+  .quoted-message.from-me .primary {
+    .text,
+    .filename-label,
+    .type-label {
+      border-left: 2px solid $blue;
     }
+  }
 
-    .outgoing .bubble .quote .icon-container .circle-background {
-      background-color: lightgray !important;
-    }
+  .outgoing .quoted-message,
+  .private .incoming .quoted-message {
+    margin-top: 0px;
+  }
+
+  .outgoing .quoted-message .icon-container .circle-background {
+    background-color: lightgray !important;
   }
 
   .attachments .bubbled {
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index cd3be912a..dcca3a183 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -171,7 +171,7 @@ export class Quote extends React.Component<Props, {}> {
       : null;
     const classes = classnames(
       authorColor,
-      'quote',
+      'quoted-message',
       isFromMe ? 'from-me' : null,
       !onClick ? 'no-click' : null,
     );