.message-prefix-item {
  display: -webkit-box;
  display: box;
  position: relative;

  &.bubble--alt {
    -webkit-box-direction: reverse;
    box-direction: reverse;

    .bubble {
      margin-left: 55px;
      margin-right: 10px;

      .bubble-content {
        float: right;
        background-color: #DAEDFF;
        color: #333;
        border-top-right-radius: 0;
        border-top-left-radius: 10px;
        position: relative;

        &.no-bg {
          background-color: transparent;
          padding: 0;
          border-radius: 0
        }

        &.white-bg {
          background-color: #fff;
        }

        .img {
          border-radius: 10px 0 10px 10px;
        }
      }

      .bubble-retry {
        color: #FF6F00;
        font-size: 44rpx;
        position: absolute;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        left: -35px;
      }
    }
  }

  .message-prefix-img-wrapper {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;

    .cable-message-img {
      width: 100%;
      height: 100%;
      background-color: #eeeeee;
      border-radius: 50%;
    }
  }

  .bubble {
    -webkit-box-flex: 1;
    box-flex: 1;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 55px;
    word-wrap: break-word;
    word-break: break-all;

    .bubble-content {
      display: inline-block;
      border-radius: 0 10px 10px 10px;
      box-sizing: border-box;
      padding: 10px 15px;
      background-color: #fff;
      line-height: 20px;

      &.no-bg {
        background-color: transparent;
        padding: 0;
        border-radius: 0
      }

      .img {
        border-radius: 0 10px 10px 10px;
      }
    }
  }
}

.msg-time-tip {
  margin: 12px 0 20px;
  font-size: 12px;
  color: #999;
  text-align: center;
}