@import '../../../../style/ui-variables.less';

.ac-control {
  flex-shrink: 0;

  // 温度调节面板（底部弹窗）：座椅通风加热 + 空调温度滑动 + 空调开关
  .ac-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;

    &.show {
      pointer-events: auto;
    }

    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 102;
    }

    // 弹窗主体：顶部座椅区满宽，底部空调白卡
    .popup-content {
      position: relative;
      z-index: 103;
      width: 100%;
      height: 1232px;
      border-radius: 60px 60px 0 0;
      overflow: hidden;
      background: #FFFFFF;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
    }

    // 座椅区容器（满宽，无侧边距）
    .popup-seat {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      .popup-close {
        position: absolute;
        top: 32px;
        right: 32px;
        z-index: 2;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        padding: 8px;
        box-sizing: border-box;
      }
    }

    // 空调区：底部白色圆角卡片，覆盖在座椅区之上
    .popup-ac {
      position: relative;
      z-index: 1;
      margin: 772px 32px calc(48px + env(safe-area-inset-bottom));
      padding: 40px 20px;
      background: #F3F7FC;
      border-radius: 40px;
      box-sizing: border-box;

      .popup-ac-title {
        display: block;
        text-align: center;
        font-size: 32px;
        font-weight: 500;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.9);
      }
    }

    // 温度横向滑动选择器
    .popup-temp-scroll {
      margin-top: 24px;
      width: 100%;
      height: 120px;
      white-space: nowrap;

      &.disabled {
        opacity: 0.4;
      }
    }

    .popup-temp-track {
      display: inline-flex;
      align-items: center;
      // 左右留白 = (视口宽 - 单项宽)/2，使任意项都能滚动到正中；单项 130px → 半宽 65px
      padding-left: calc(50% - 65px);
      padding-right: calc(50% - 65px);
      box-sizing: border-box;
    }

    .popup-temp-item {
      flex-shrink: 0;
      // 所有项等宽（保证滚动居中正确、边缘项可见）
      width: 130px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;

      .popup-temp-item-value {
        font-family: @font-xpsans-bold;
        font-size: 40px;
        line-height: 44px;
        // 未选中温度：#141E27 透明度 0.2（对齐设计标注）
        color: #141E27;
        opacity: 0.2;
        transition: all 0.15s ease;
      }

      // 居中选中项：放大加粗（空调开启时高亮）
      &.active {
        width: 180px;
        .popup-temp-item-value {
          font-size: 64px;
          line-height: 72px;
          font-weight: 600;
          color: @black-text-main;
          opacity: 1;
        }

        .popup-temp-item-unit {
          margin-left: 4px;
          font-family: @font-xpsans-bold;
          font-size: 28px;
          line-height: 40px;
          font-weight: 500;
          color: @black-text-main;
        }
      }

      // 空调关闭时的选中项：仍放大，但置灰（不高亮）
      &.active-off {
        .popup-temp-item-value,
        .popup-temp-item-unit {
          opacity: 0.2;
        }
      }
    }

    // 居中高亮引导（中间选中区）
    .popup-temp-wrap {
      position: relative;
    }

    // 空调开关行（居中，使用统一 AcSwitch 图片开关）
    .popup-ac-switch-row {
      margin-top: 32px;
      display: flex;
      align-items: center;
      justify-content: center;

      .ac-switch {
        margin-right: 12px;
      }

      .popup-ac-switch-text {
        font-size: 28px;
        line-height: 40px;
        color: @black-text-main;
      }
    }
  }
}