.pisell-plus-contact-info {
  padding: 8px;
  background: var(--Base-white, #fff);
  position: relative;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  border-color: #d5d7da;
  cursor: pointer;

  &__horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;

    &-left {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: row;
      gap: 8px;

      &-content {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
    }

    &-right {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      &-icon {
        font-size: 24px;
        color: #475467;
        cursor: pointer;
      }
    }
  }

  &__vertical {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
  }

  &__name-horizontal-container {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
  }

  &__name-horizontal {
    color: var(--Gray-900, #101828);
    font-size: 14px;
    font-weight: 600;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__phone-horizontal {
    padding-left: 4px;
    color: var(--Gray-500, #667085);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__name {
    // display: flex;
    color: var(--Gray-900, #101828);
    font-size: 14px;
    font-weight: 600;
  }

  &__text {
    color: var(--Gray-500, #667085);
    font-size: 14px;
    font-weight: 400;
    // 一行展示，超出部分使用...展示，不要换行
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__empty-description {
    height: 100%;
    display: flex;
    align-items: center;
    color: #101828;
    font-size: 14px;
    font-weight: 600;
  }
}
// .pisell-client-card {
//   background: var(--Base-white, #fff);
//   transition: all 0.3s ease;
//   position: relative;
//   padding: 8px;
//   border-radius: 8px;

//   &:hover {
//     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
//   }

//   // 内容容器
//   &__content {
//     display: flex;
//     align-items: center;
//     width: 100%;
//     gap: 8px;
//   }

//   // 基础信息区域
//   &__info {
//     display: flex;
//     gap: 8px;
//     flex: 1;
//     align-items: center;
//     overflow: hidden;
//   }

//   // 详细信息容器
//   &__details {
//     flex: 1;
//     min-width: 0;
//     display: flex;
//     flex-direction: column;
//     gap: 4px;
//     overflow: hidden;
//   }

//   // 姓名和标签行
//   &__name-tags {
//     display: flex;
//     align-items: center;
//     gap: 8px;
//     flex-wrap: wrap;

//     // 当标签为 inline 模式时的特殊处理
//     &--inline {
//       flex-wrap: nowrap;
//       overflow: hidden;

//       .pisell-client-card__name {
//         flex-grow: 1;
//         min-width: 0;
//       }

//       .pisell-client-card__tags {
//         flex: 1 0 42px;
//         overflow: hidden;

//         &--nowrap {
//           &::after {
//             background: linear-gradient(
//               to right,
//               rgba(255, 255, 255, 0),
//               rgba(255, 255, 255, 1)
//             );
//           }
//         }
//       }
//     }
//   }

//   // 字段容器
//   &__fields {
//     display: flex;
//     flex-direction: column;
//     gap: 4px;
//   }

//   // 插槽容器
//   &__slot-left {
//     display: flex;
//     align-items: center;
//     flex-shrink: 0;
//   }

//   &__slot-right {
//     display: flex;
//     align-items: center;
//     flex-shrink: 0;
//   }

//   &__actions {
//     display: flex;
//     align-items: center;
//     flex-shrink: 0;
//   }

//   &__menu-button {
//     border: none;
//     box-shadow: none;
//     padding: 4px;
//     display: flex;
//     align-items: center;
//     justify-content: center;

//     &:hover {
//       background-color: rgba(0, 0, 0, 0.04);
//     }

//     &:focus {
//       background-color: rgba(0, 0, 0, 0.04);
//     }
//   }

//   &__menu-button-icon {
//     font-size: 28px;
//   }

//   // 头像样式
//   &__avatar-wrapper {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     position: relative;
//   }

//   &__avatar {
//     border: 1px solid #e5e7eb;

//     .ant-avatar-string {
//       font-weight: 600;
//     }
//   }

//   // 状态指示器样式
//   &__status-indicator {
//     position: absolute;
//     width: 12px;
//     height: 12px;
//     border-radius: 50%;
//     border: 2px solid #fff;
//     box-sizing: border-box;
//     z-index: 1;

//     // 默认位置（适用于圆形头像）
//     bottom: 0;
//     right: 0;
//   }

//   // 针对不同头像形状和尺寸的状态指示器位置调整
//   &__avatar-wrapper {
//     // 方形头像的状态指示器位置
//     .ant-avatar-square ~ .pisell-client-card__status-indicator {
//       bottom: -2px;
//       right: -2px;
//     }

//     // 大尺寸头像的状态指示器位置
//     .ant-avatar-lg ~ .pisell-client-card__status-indicator,
//     .ant-avatar-xl ~ .pisell-client-card__status-indicator,
//     .ant-avatar-xxl ~ .pisell-client-card__status-indicator {
//       bottom: 2px;
//       right: 2px;
//     }

//     // 小尺寸头像的状态指示器位置
//     .ant-avatar-sm ~ .pisell-client-card__status-indicator,
//     .ant-avatar-xs ~ .pisell-client-card__status-indicator {
//       bottom: -1px;
//       right: -1px;
//     }

//     // 方形小尺寸头像的特殊处理
//     .ant-avatar-square.ant-avatar-sm ~ .pisell-client-card__status-indicator,
//     .ant-avatar-square.ant-avatar-xs ~ .pisell-client-card__status-indicator {
//       bottom: -3px;
//       right: -3px;
//     }

//     // 方形大尺寸头像的特殊处理
//     .ant-avatar-square.ant-avatar-lg ~ .pisell-client-card__status-indicator,
//     .ant-avatar-square.ant-avatar-xl ~ .pisell-client-card__status-indicator,
//     .ant-avatar-square.ant-avatar-xxl ~ .pisell-client-card__status-indicator {
//       bottom: 0;
//       right: 0;
//     }
//   }

//   &__avatar-default {
//     width: 100%;
//     height: 100%;
//     background: #f3f4f6;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     color: #9ca3af;
//   }

//   &__avatar-img {
//     width: 100%;
//     height: 100%;
//     object-fit: cover;
//   }

//   &__avatar-text {
//     background: #e5e7eb;
//     color: #374151;
//     font-weight: 600;
//     font-size: 14px;
//     width: 100%;
//     height: 100%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }

//   &__contact {
//     font-size: 14px;
//     color: #6b7280;
//     white-space: nowrap;
//     overflow: hidden;
//     text-overflow: ellipsis;

//     // 地址字段允许显示两行
//     &--address {
//       white-space: normal;
//       display: -webkit-box;
//       -webkit-line-clamp: 2;
//       -webkit-box-orient: vertical;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       line-height: 1.4;
//     }
//   }

//   // 标签样式
//   &__tags {
//     display: flex;
//     gap: 8px;
//     flex-wrap: wrap;

//     > span {
//       border-radius: 16px;
//       margin: 0;
//     }

//     &:last-child {
//       margin-bottom: 0;
//     }

//     &--nowrap {
//       flex-wrap: nowrap;
//       overflow: hidden;
//       max-width: 100%;

//       // 不换行时，超出的标签隐藏
//       .pisell-client-card__tag {
//         flex-shrink: 0;

//         &:last-child {
//           flex-shrink: 1;
//           min-width: 0;
//           overflow: hidden;
//         }
//       }
//     }

//     &--separate {
//       margin-top: 4px;
//     }
//   }

//   // 单个标签样式
//   &__tag {
//     &--nowrap {
//       // 不换行模式下的标签样式
//       white-space: nowrap;
//       overflow: hidden;
//       text-overflow: ellipsis;
//     }

//     &--wrap {
//       // 换行模式下的标签样式
//       word-break: break-all;
//       white-space: nowrap;
//       overflow: hidden;
//       text-overflow: ellipsis;
//     }
//   }

//   &__add-icon {
//     width: 32px;
//     height: 32px;
//     border-radius: 50%;
//     border: 2px solid currentColor;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     transition: all 0.2s ease;
//   }

//   // 操作菜单样式
//   &__menu-button {
//     &.ant-btn {
//       border-color: #e5e7eb;
//       color: #6b7280;
//     }
//   }

//   &__menu {
//     width: 32px;
//     height: 32px;
//     border-radius: 6px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     color: #6b7280;
//     opacity: 0;
//     transition: all 0.2s ease;
//     position: relative;
//     cursor: pointer;
//   }

//   &__dropdown {
//     position: absolute;
//     top: 100%;
//     right: 0;
//     margin-top: 4px;
//     background: #ffffff;
//     border: 1px solid #e5e7eb;
//     border-radius: 8px;
//     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
//       0 4px 6px -2px rgba(0, 0, 0, 0.05);
//     z-index: 10;
//     min-width: 160px;
//   }

//   &__dropdown-item {
//     display: block;
//     width: 100%;
//     padding: 8px 12px;
//     font-size: 14px;
//     color: #374151;
//     background: none;
//     border: none;
//     text-align: left;
//     cursor: pointer;
//     transition: background-color 0.2s ease;

//     &:first-child {
//       border-radius: 8px 8px 0 0;
//     }

//     &:last-child {
//       border-radius: 0 0 8px 8px;
//     }

//     &--danger {
//       color: #dc2626;

//       &:hover {
//         background: #fef2f2;
//       }
//     }
//   }

//   // 垂直布局
//   &--vertical {
//     .pisell-client-card__content {
//       flex-direction: column;
//       align-items: center;
//       text-align: center;
//     }

//     .pisell-client-card__info {
//       flex-direction: column;
//       align-items: center;
//       gap: 8px;
//       width: 100%;
//     }

//     .pisell-client-card__details {
//       width: 100%;
//       align-items: center;
//       text-align: center;
//     }

//     .pisell-client-card__fields {
//       align-items: center;
//     }

//     .pisell-client-card__extra-fields {
//       align-items: center;
//     }

//     .pisell-client-card__actions {
//       display: none;
//     }
//   }

//   // 水平布局
//   &--horizontal {
//     .pisell-client-card__info {
//       flex-direction: row;
//       align-items: center;
//     }

//     .pisell-client-card__avatar-wrapper {
//       align-self: flex-start;
//     }
//   }

//   // 空状态样式
//   &--empty {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: center;
//     transition: all 0.3s;

//     &:hover {
//       background-color: #f6f6f6;
//     }

//     .pisell-client-card__empty-title {
//       font-size: 16px;
//       font-weight: 500;
//       color: #262626;
//       margin-bottom: 4px;
//     }

//     .pisell-client-card__empty-subtitle {
//       font-size: 14px;
//       color: #8c8c8c;
//     }

//     .pisell-client-card__empty-description {
//       font-size: 12px;
//       color: #8c8c8c;
//       margin-top: 2px;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       white-space: nowrap;
//     }

//     .pisell-client-card__plugin-icon {
//       font-size: 16px;
//       color: #1890ff;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//     }
//   }

//   // 联系信息样式
//   &__contact {
//     &-item {
//       font-size: 12px;
//       color: #8c8c8c;
//       display: flex;
//       align-items: center;
//       gap: 4px;
//     }
//   }

//   // 额外字段样式
//   &__extra-fields {
//     display: flex;
//     flex-direction: column;
//     gap: 2px;
//   }

//   &__extra-field {
//     font-size: 12px;
//     color: #595959;
//     display: flex;
//     align-items: center;
//     gap: 4px;

//     &-label {
//       white-space: nowrap;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       flex-shrink: 0;
//     }

//     &-value {
//       white-space: nowrap;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       flex: 1;
//       min-width: 0;

//       // 地址类型的额外字段允许显示两行
//       &--address {
//         white-space: normal;
//         display: -webkit-box;
//         -webkit-line-clamp: 2;
//         -webkit-box-orient: vertical;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         line-height: 1.4;
//       }
//     }

//     &-icon {
//       flex-shrink: 0;
//     }
//   }
// }