$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_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;

  }

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

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