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

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

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

.airmail-border {
  border: 0.25em solid transparent;
  border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em,
    #58a 0, #58a 3em, white 0, white 4em);

}

.status-direct,
.item-list .conversation {
  @extend .airmail-border;
}

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

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

  .messager-textarea {
    width: 100%;
  }
}

.conversation {
  &.focusable {
    &:hover {
      background: mix($ui-base-color, $ui-secondary-color);
    }

  }

  .conversation_reply {
    display: inline-block;
    padding: 1em;
    width: 15em;

    &:hover {
      color: $ui-highlight-color;
    }
  }

  .status__action-bar-dropdown {
    display: inline-block;
    padding: 1em;
    width: 10em;

    &:hover {
      color: $ui-highlight-color;
    }
  }
}

.conversations_list {
  right: 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5em;
  background: gray;

}

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

  &.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;

  }
}