
.message-item {
  position: relative;
  max-width: 50%;

  & + .message-item {
    margin-top: 24px;
  }

  &.right {
    margin-left: 50%;
  }

  .gutter {
    margin: 0 8px;
  }

  .flex-row {
    display: flex;
    margin: 8px 0;

    &.right {
      flex-direction: row-reverse;
    }

    & > div:first-child {
      flex: none;
    }
  }

  .header {
    min-width: 48px;
    width: 48px;
  }

  .avatar {
    min-width: 48px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, .1);
  }

  .title {
    display: inline-block;
    font-size: 0.85em;
    color: #666;

    & + .title {
      margin-left: 8px;
    }
  }

  .poptip {
    border: 1px solid #ff7063;
    border-radius: 4px;
    text-align: left;
    padding: 8px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: -16px;
      right: auto;
      top: 12px;
      border-right: 8px solid #fff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
      z-index: 12;
    }

    &::after {
      content: '';
      position: absolute;
      left: -18px;
      right: auto;
      top: 11px;
      border-right: 9px solid #ff7063;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 9px solid transparent;
      z-index: 10;
    }

    &.right {
      &::before {
        content: '';
        position: absolute;
        left: auto;
        right: -16px;
        top: 12px;
        border-left: 8px solid #fff;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid transparent;
        z-index: 12;
      }

      &::after {
        content: '';
        position: absolute;
        left: auto;
        right: -18px;
        top: 11px;
        border-left: 9px solid #ff7063;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-right: 9px solid transparent;
        z-index: 10;
      }
    }
  }
}
