.TUI-conversation {
  &-item {
    &:hover {
      background: rgba(0, 110, 255, 0.1);
    }

    .left {
      .num {
        background: red;
        color: #ffffff;

        &-notify {
          background: red;
          color: #ffffff;
        }
      }

      .num-notify {
        background: red;
        color: #ffffff;
      }
    }

    .content-header {
      label {
        color: #000000;
      }

      .name {
        font-weight: 400;
        letter-spacing: 0;
        color: #000000;
      }
    }

    .middle-box {
      span {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #999999;
      }

      p {
        font-weight: 400;
        color: #999999;
        letter-spacing: 0;
      }

      &-at {
        color: #fb5059 !important;
      }
    }

    .content-footer {
      color: #999999;

      .time {
        color: #bbbbbb;
      }
    }
  }

  .selected {
    background: rgba(0, 110, 255, 0.1);
  }

  .pinned {
    background: #eef0f3;
  }

  .dialog {
    background: #fff;

    &-item {
      box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
      background: #ffffff;
      border: 1Px solid #e0e0e0;
      box-shadow: 0 -4Px 12Px 0 rgba(0, 0, 0, 0.06);
    }

    .conversation-options {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #4f4f4f;
      letter-spacing: 0;
    }
  }
}