.nut-quickenter {
  width: 100%;
  /* 限制弹层最大高度，包含安全区 */
  max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0));
  background: $quickenter-bg-color;
  border-radius: 0 0 scale-px(12px) scale-px(12px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: $quickenter-box-shadow;
  // backdrop-filter: $quickenter-backdrop-filter;

  &.safe-area-top {
    /* 使用 env fallback，确保旧浏览器返回 0 */
    padding-top: calc(
      env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1)
    );
  }

  &-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: scale-px(30px) scale-px(16px) 0;
    box-sizing: border-box;
  }

  &-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: $quickenter-title-color;
    font-size: $quickenter-title-font-size;
  }

  &-close-btn {
    color: $quickenter-close-icon-color;
    display: flex;
    align-items: center;
    justify-content: center;

    svg,
    .nut-icon {
      width: $quickenter-close-icon-size;
      height: $quickenter-close-icon-size;
    }
  }

  &-content {
    flex: 1;
    padding: scale-px(10px) scale-px(28px);
    overflow-y: hidden; // 始终可滚动，防止内容被遮挡
    box-sizing: border-box;

    &-scrollable {
      overflow-y: auto; // Only scroll when > 8 items
      -webkit-overflow-scrolling: touch;
    }
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: scale-px(56px);
    padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px
    box-sizing: border-box;
    cursor: pointer;

    // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
    margin-right: calc((100% - scale-px(224px)) / 3);

    &:nth-child(4n) {
      margin-right: 0;
    }

    &-icon {
      width: scale-px(56px);
      height: scale-px(56px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: $quickenter-item-icon-bg-color;
      color: $quickenter-item-icon-color;
      margin-bottom: scale-px(8px);
      flex-shrink: 0;

      svg,
      .nut-icon {
        width: $icon-size-22;
        height: $icon-size-22;
      }
    }

    &-title {
      font-size: $quickenter-item-title-font-size;
      color: $quickenter-item-title-color;
      text-align: center;
      line-height: $line-height-md;
      // Allow multi-line if text is long, preventing truncation
      white-space: normal;
      word-wrap: break-word;
      width: scale-px(72px); // Allow text to be slightly wider than icon
      margin-left: scale-px(-8px); // Center 72px title over 56px icon
      margin-right: scale-px(-8px);
    }
  }
}