.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: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pisell-client-card__tags {
        flex: 0 100 auto;
        min-width: 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;
    }
  }
}