mastodon/app/javascript/styles/bliss/messaging.scss

$messagingBoxWidth: 15em;
$messagingBoxHeight: 20em;

.fixed-box {
  border: solid 1px white;
  padding: 1em;
  position: fixed;
  bottom: 0;
}

.messaging-box {
  @extend .fixed-box;

  right: 1em;
  width: $messagingBoxWidth;
  background: $ui-base-color;
}

.conversations_list {
  @extend .fixed-box;
  width: $messagingBoxWidth;
  right: $messagingBoxWidth + 5em;
  background: $ui-secondary-color;
}

.conversation-item {
  &.has-new-message {
    background: $ui-highlight-color;
    color: $classic-primary-color;
  }
}

.conversation_created-at {
  margin-right: 1em;
}

.conversation_stream {
  padding-top: 1em;
  height: $messagingBoxHeight;
  overflow: auto;
  background: $ui-secondary-color;

  .message {
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    width: 80%;
  }

  .mine {
    text-align: right;
    background: $classic-primary-color;
    float: right;

    .arrow-down {
      border-top-color: $classic-primary-color;
      left: 1em;
    }
  }

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

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

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

  }
}