/* 在你的 CSS 文件中添加以下样式 */
.card-thinking-container {
  overflow: hidden;
  width: calc(100vw - 30px);

  .card-thinking-desc {
    cursor: pointer;
  }

  .card-thinking-content {
    overflow: hidden;
    height: fit-content;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;

    &.card-thinking-content-show {
      max-height: 1000px; /* 确保这个值足够大，以便内容可以完全显示 */
    }

    &.card-thinking-content-hide {
      max-height: 0;
    }
  }
}

/* 基础样式 */
.icon-star {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('../../../assets/imgs/icon-star2.png');
  background-size: cover;
  background-position: center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  margin-right: 6px;
  margin-left: 2px;
}

.icon-star-rotating {
  animation: swing 1s ease-in-out infinite;
}

@keyframes swing {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* 动画核心：旋转的圆圈 */
.card-thinking-container {
  .card-thinking-desc {
    display: flex;
    align-items: center;
    padding: 8px;
    position: relative;
  }

  .card-thinking-content {
    padding: 0 10px;
  }

  .thinking-step {
    margin-bottom: 10px;
  }

  .step-header {
    display: flex;
    align-items: center;
    margin: 0px 0px;
  }

  .step-title {
    font-size:var(--font-size-xs);
    color: rgba(0, 24, 73, 0.8);
    margin-left: 6px;
  }

  .step-content {
    color: rgba(0, 24, 73, 0.55);
    font-size:var(--font-size-xxs);
    margin-left:22px;
  }

  .icon-complete,
  .icon-thinking-rotating {
    width: 16px;
    height: 16px;
  }

  .icon-thinking-rotating {
    animation: rotate 1.5s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

// 样式部分
.thinking-step {
  position: relative;
  // padding-left: 32px; // 为连接线留出空间

  // 连接线容器
  .step-connector {
    position: absolute;
    left: 8px; // 图标中心对齐（假设图标宽24px）
    top: 20px;  // 从图标底部开始（假设图标高24px + 上下边距）
    bottom: -14px;
    width: 1px;
    // background: rgba(0, 24, 73, 0.12);
    border-left: 1px solid rgba(0, 24, 73, 0.12);
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: -10px; // 向上延伸覆盖间隙
      height: 10px;
      width: 2px;
      background: inherit;
    }
  }

  .step-header {
    display: flex;
    align-items: center;
    margin-right: 8px;
    position: relative;
    z-index: 2; // 确保图标在连接线上层
  }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

//展开收起
.card-thinking-desc {
  display: flex;
  align-items: center;
  padding: 8px;
  position: relative;
  cursor: pointer;
}

.arrow-icon {
  width: 8px;
  height: 8px;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.arrow-up {
  transform: rotate(0deg); /* 向上箭头 */
}

.arrow-down {
  transform: rotate(180deg); /* 向下箭头 */
  margin-bottom: 2px;
}