.chatEmpty {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 200px;
  flex-direction: column;
  .logo {
    height: 60px;
    width: 60px;
    margin-block: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    margin-top: 20px;
  }
}

.chatContent {
  width: max(50%, 500px);
}
.chatMessageItem {
  margin-bottom: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-inline: 44px 16px;
  .name {
    padding-block: 8px 16px;
  }
  .content {
    padding: 8px 12px;
    border-radius: var(--border-radius-base);
    background-color: var(--color-fill-3);
    font-size: var(--font-size-base);
  }
  .contentWrap {
    position: relative;
    padding-right: 45px;
    &:hover .edit {
      display: block;
    }
    .edit {
      display: none;
      position: absolute;
      top: -10px;
      right: 0;
      padding: 8px;
    }
  }
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}