.conversation-stream {
  display: block;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  height: 10em;
  overflow: auto;
  width: $messagingBoxWidth;
  padding-bottom: 4em;


  .message {
    background: #6b7f9b;
    clear: both;
    margin-bottom: 2rem;
    &.ours {
      text-align: right;
      background: #6b7f9b;
      float: right;

      .arrow-down {
        border-top-color: #6b7f9b;
        left: 75%;
      }
    }

    &.theirs {
      text-align: left;
      background: $ui-highlight-color;
      float: left;

      .arrow-down {
        border-top-color: $ui-highlight-color;
        right: 1em;
      }
    }
  }

  .messages >
  .message {
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    padding: 0.5em 1em;
    display: block;
  }



  .arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid $ui-highlight-color;
    position: relative;
    bottom: -1em;

  }
}