.pisell-floor-map-layout-edit-panel {
  width: 280px;
  padding: 12px;
  /**
   * 桌面编辑面板可纵向滚动：底部多留一截，避免 Apply 等被右下 ViewControls Dock 挡住。
   * 手机抽屉用 `--phone-drawer` 单独处理 safe-area，不叠加此项。
   */
  padding-bottom: calc(
    12px + var(--fmap-viewport-dock-bottom-clearance, 78px)
  );
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /** 未放入 edit-panel-wrap 时的兜底；wrap 内由父级 flex 限制为 100% 高度 */
  max-height: 80vh;
  overflow-y: auto;
  touch-action: pan-y;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }

  /** 与下方分组标题（如「数据绑定」「数据源记录」）统一的标题样式 */

  &-header-title {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    line-height: 1.4;
  }

  &-close {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.45);

    &:hover {
      color: rgba(0, 0, 0, 0.88);
    }
  }

  &-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }

  &-record-custom {
    margin-top: 8px;
  }

  &-layout-lock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  &-layout-lock-title {
    font-size: 12px;
    font-weight: 600;
    color: #434343;
  }

  &-layout-lock-btn {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.55);
  }

  /* X、Y、层级 同一行 */

  &-xy-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;

    .ant-form-item {
      flex: 1;
      min-width: 0;
    }
  }

  &-size-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;

    .ant-form-item {
      flex: 1;
      min-width: 0;
    }
  }

  &-record-bind {
    margin-bottom: 12px;
  }

  &-record-bind-label {
    font-size: 12px;
    font-weight: 600;
    color: #434343;
    margin-bottom: 6px;
  }

  &-record-bind-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.5;
  }

  &-hints {
    margin-bottom: 10px;
  }

  &-hint {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.45;

    &:last-child {
      margin-bottom: 0;
    }

    &.warn {
      color: #ad6800;
      padding: 6px 8px;
      background: #fffbe6;
      border-radius: 6px;
      border: 1px solid #ffe58f;
    }

    &.muted {
      margin-top: 4px;
      color: #595959;
    }
  }

  &-record-draft-note {
    margin: 0 0 10px;
    font-size: 11px;
    color: #8c8c8c;
    line-height: 1.45;
  }
}

/* 父 wrap 根据画布限制高度时，面板填满 wrap 并内部滚动 */
/** 手机右侧抽屉：铺满滑轨高度，内部纵向滚动 */
.pisell-floor-map-layout-edit-panel--phone-drawer {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(
    12px + env(safe-area-inset-bottom, 0px) +
      var(--fmap-viewport-dock-bottom-clearance, 78px)
  );
}

.pisell-floor-map-layout-edit-panel-wrap-constrained .pisell-floor-map-layout-edit-panel {
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;

  &-record {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }

  &-record-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
  }
}
