// loading 图标旋转动画
@keyframes seat-hv-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 座椅通风加热区（内嵌于「温度调节」面板）
.seat-hv-area {
  position: relative;
  width: 100%;
  overflow: hidden;

  // 座舱俯视图背景（widthFix，高度按图片比例自适应，撑起区域高度）
  .seat-hv-bg {
    width: 100%;
    display: block;
  }

  // 座椅节点叠放层
  .seat-hv-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  // 每个座椅控制节点，以中心点百分比定位（对照 seat_bg 座椅位置）
  .seat-hv-node {
    position: absolute;
    transform: translate(-50%, -50%);
  }

  // 二排（目前唯一可控排）：按钮位于座舱图中部横排，左右座椅中心分别约 28% / 72%
  .seat-hv-node-SECOND_ROW_LEFT {
    top: 45%;
    left: 28.5%;
  }

  .seat-hv-node-SECOND_ROW_RIGHT {
    top: 45%;
    left: 71.5%;
  }

  // 三排：纵向约 60%，左右座椅中心分别约 28% / 72%
  .seat-hv-node-THIRD_ROW_LEFT {
    top: 54%;
    left: 28.5%;
  }

  .seat-hv-node-THIRD_ROW_RIGHT {
    top: 54%;
    left: 71.5%;
  }

  // 控制器：胶囊（通风+加热双图标）/ 单圆按钮
  .seat-hv-ctrl {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    &.is-pill {
      height: 88px;
      padding: 0 28px;
      border-radius: 44px;
    }

    &.is-single {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      justify-content: center;
    }
  }

  // 胶囊内通风/加热分隔线
  .seat-hv-divider {
    width: 2px;
    height: 40px;
    margin: 0 24px;
    background: rgba(0, 0, 0, 0.1);
  }

  .seat-hv-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &-icon {
      width: 48px;
      height: 48px;
    }

    // 下发中 loading 图标旋转（点击后至指令返回）
    &-loading {
      opacity: 1;
      animation: seat-hv-spin 1s linear infinite;
    }

    &-level {
      margin-left: 4px;
      font-size: 24px;
      line-height: 24px;
      color: #45A5FF;
      font-weight: 500;
    }

    // 开启态高亮
    &.active {
      .seat-hv-btn-icon {
        opacity: 1;
      }
    }

    // 未开启态图标弱化
    &:not(.active) .seat-hv-btn-icon {
      opacity: 0.55;
    }

    // 下发中置灰防重复
    &.disabled {
      opacity: 0.5;
    }
  }
}

// 无座椅占位
.seat-hv-empty {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E9EBF0;
  font-size: 28px;
  color: rgba(0, 0, 0, 0.4);
}