.pisell-floor-map-layout-canvas-tabs {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  box-sizing: border-box;
  border-bottom: none;

  &-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    font-size: 14px;
    line-height: 1.25;
    color: rgba(0, 0, 0, 0.55);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s,
    background 0.2s,
    box-shadow 0.2s;

    &:hover {
      color: rgba(0, 0, 0, 0.85);
      background: rgba(255, 255, 255, 0.55);
    }

    &-active {
      color: var(--fmap-primary, #1677ff);
      font-weight: 600;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
      0 0 0 1px rgba(0, 0, 0, 0.04);

      &:hover {
        color: var(--fmap-primary, #1677ff);
        background: #fff;
      }
    }

    &-label {
      flex: 0 0 auto;
    }

    &-badge {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.45);

      .pisell-floor-map-layout-canvas-tabs-tab-active & {
        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);
      }
    }

    &-input {
      flex: 0 1 auto;
      min-width: 72px;
      max-width: 180px;
      padding: 4px 8px;
      font-size: 14px;
      line-height: 1.4;
      color: #262626;
      background: #fff;
      border: 1px solid var(--fmap-primary, #1677ff);
      border-radius: 6px;
      outline: none;
      box-sizing: border-box;

      &:focus {
        border-color: var(--fmap-primary, #1677ff);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--fmap-primary, #1677ff) 20%, transparent);
      }
    }

    /** 触屏友好：单击打开重命名（避免依赖双击） */

    &-rename {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      min-height: 32px;
      margin: -4px -6px -4px 0;
      padding: 0 6px;
      font-size: 14px;
      line-height: 1;
      color: rgba(0, 0, 0, 0.45);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        color: var(--fmap-primary, #1677ff);
        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 8%, transparent);
      }

      &:active {
        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 14%, transparent);
      }

      .pisell-floor-map-layout-canvas-tabs-tab-active & {
        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);

        &:hover {
          color: var(--fmap-primary, #1677ff);
        }
      }
    }

    &-remove {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      padding: 0;
      font-size: 12px;
      line-height: 1;
      color: #8c8c8c;
      background: transparent;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      position: relative;

      &::before,
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 1px;
        background: currentColor;
      }

      &::before {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      &:hover {
        color: #ff4d4f;
        background: #fff2f0;
      }
    }
  }

  &-add {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fmap-primary, #1677ff);
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed color-mix(in srgb, var(--fmap-primary, #1677ff) 35%, transparent);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s,
    border-color 0.2s,
    background 0.2s;

    &:hover {
      color: #4096ff;
      border-color: #4096ff;
      background: #fff;
    }
  }

  &-empty {
    color: #999;
    font-size: 14px;
  }

  &-empty-hint {
    font-size: 13px;
    color: #8c8c8c;
  }
}

/**
 * 画布重命名弹窗：Modal 使用 wrapClassName 便于覆盖 portaled 节点；
 * 与 `Modal.styles` 互补（宿主若映射 ant 类名可在此追加 pisell-lowcode-*）。
 */
.pisell-floor-map-layout-canvas-tabs-rename-modal-wrap {
  /** 仅收紧项间距与 label 与控件间距，不改 Input 尺寸（不使用 Form size="small"） */
  .pisell-floor-map-layout-canvas-tabs-rename-form {
    .ant-form-item {
      margin-bottom: 8px;
    }

    .ant-form-item:last-child {
      margin-bottom: 0;
    }

    .ant-form-item-label {
      padding-bottom: 0;
    }
  }
}