/* 左下角：缩放 + 工具同一横条，圆角矩形（非胶囊） */
.pisell-floor-map-layout-view-controls {
  @vc-btn-size: 32px;
  @vc-bar-padding-y: 1px;
  @vc-bar-padding-x: 4px;
  @vc-bar-height: (@vc-btn-size + 2 * @vc-bar-padding-y + 2px); /* + 上下 border */

  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 20;

  &--align-end {
    left: auto;
    right: 12px;
  }
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;

  &-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    height: @vc-bar-height;
    min-height: @vc-bar-height !important;
    max-height: @vc-bar-height !important;
    padding: @vc-bar-padding-y @vc-bar-padding-x;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #98a2b3;
    border-radius: 6px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    width: max-content;
    max-width: 100%;
  }

  &-bar-divider {
    flex-shrink: 0;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: #e4e7ec;
    align-self: center;
  }

  &-zoom-value {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 40px;
    height: @vc-btn-size;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    line-height: @vc-btn-size;
    color: #101828;
  }

  @vc-icon-px: 14px;

  &-bar > &-tool-btn {
    flex-shrink: 0;
    box-sizing: border-box;
    width: @vc-btn-size;
    height: @vc-btn-size;
    min-width: @vc-btn-size;
    min-height: @vc-btn-size !important;
    max-width: @vc-btn-size;
    max-height: @vc-btn-size !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #101828;
    font-size: @vc-icon-px;
    line-height: 1;
    appearance: none;
    vertical-align: middle;

    .anticon,
    .pisell-lowcode-icon,
    span[role='img'] {
      font-size: @vc-icon-px;
      line-height: 0;
      vertical-align: middle;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .anticon svg,
    .pisell-lowcode-icon svg,
    span[role='img'] svg {
      width: @vc-icon-px;
      height: @vc-icon-px;
      display: block;
    }

    &:hover {
      background: #f2f4f7;
      color: #101828;
    }

    /**
     * 视口锁定时：zoom +/- / reset / fit-bounds 等改变视角的按钮 disabled。
     * 给出灰态 + 禁用 hover 反馈，避免点击但实际拒绝带来的迷惑感。
     */
    &:disabled,
    &[aria-disabled='true'] {
      cursor: not-allowed;
      color: #d0d5dd;
      background: transparent;
    }

    &:disabled:hover,
    &[aria-disabled='true']:hover {
      background: transparent;
      color: #d0d5dd;
    }
  }

  /**
   * 工具按钮激活态（展开条内与外侧折叠 pill 共用同一套色值）。
   * 主色链：`--color-primary`（与主色展开键、业务 HUD 一致）→ `--fmap-primary`（PisellFloorMapLayout 注入）
   * → 兜底 #1677ff。淡底用 color-mix 25%/32% hover。
   */
  .vc-tool-btn-active-colors() {
    @vc-p: var(--color-primary, var(--fmap-primary, #1677ff));

    background: color-mix(in srgb, @vc-p 25%, #fff);
    color: @vc-p;

    &:hover {
      background: color-mix(in srgb, @vc-p 32%, #fff);
      color: @vc-p;
    }

    &:disabled,
    &[aria-disabled='true'] {
      background: transparent;
      color: #d0d5dd;
    }
  }

  &-bar > &-tool-btn--active,
  &-dock-collapsed-extras > &-tool-btn--active {
    .vc-tool-btn-active-colors();
  }

  /* —— 平面图 Dock：折叠入口与展开横条共用同一外框高度，避免切换时跳动 —— */
  @dock-btn-size: 42px;
  @dock-icon-px: 18px;
  /** 折叠按钮正方形边长 = 展开条高度（含 1px 边框的 border-box） */
  @dock-chrome-outer: 56px;
  /** Dock 展开/收起：与 slide、expand、extras 共用，linear 避免 ease 带来的「回弹」观感 */
  @dock-slide-ms: 0.18s;

  &--dock {
    left: 14px;
    bottom: 14px;
    /**
     * 屏缘各 14px：整条 Dock（extras + 展开条）不得超出视口，否则展开态会向左溢出。
     */
    max-width: calc(100vw - 28px);

    &.pisell-floor-map-layout-view-controls--align-end {
      left: auto;
      right: 14px;

      .pisell-floor-map-layout-view-controls-dock-row {
        flex-direction: row-reverse;
      }
    }

    /** 折叠键与可伸缩展开区同一行 */

    .pisell-floor-map-layout-view-controls-dock-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
      min-height: 0;
      max-width: 100%;
    }

    /**
     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content。
     * 使用 linear + 统一时长（@dock-slide-ms），避免 ease 曲线与 max-width「大数值」组合带来的回弹感。
     */
    .pisell-floor-map-layout-view-controls-dock-slide {
      box-sizing: border-box;
      /**
       * 折叠态必须露出 slide 内首位的合并 toggle（42px）+ bar 左 padding（12px）≈ 54px。
       * 历史上曾用 max-width:0 + 外层覆写，但与 `&--align-end &-dock-slide` 同优先级时
       * 打包顺序可能导致 0 压过 54px → slide 宽度为 0、toggle 整块被裁掉。
       */
      max-width: 54px;
      overflow: hidden;
      min-width: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      transition: max-width @dock-slide-ms linear;
    }

    /**
     * 展开宽度上限：设计 720px；整条 Dock 外层另有 `max-width: calc(100vw - 28px)`，不再预留固定像素。
     * 窄屏时中间区见 `.dock-scroll` 横向滚动，收起键始终在 toggle 位固定。
     */
    .pisell-floor-map-layout-view-controls-dock-slide--open {
      max-width: min(720px, calc(100vw - 28px));
      flex-shrink: 1;
    }

    /**
     * toggle 与 `.dock-scroll` 之间不加 gap，否则折叠态 max-width 54px（12+42）不够；
     * 工具区间距只在 `.dock-scroll` 内用 gap；首项用 margin-left 顶替原 bar 上 toggle 与首个按钮的间隔。
     */
    .pisell-floor-map-layout-view-controls-dock-slide .pisell-floor-map-layout-view-controls-bar--dock {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
      flex: 1;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /**
     * 收起键与可滚动区分栏并列：仅中间区域 overflow-x，toggle 不参与滚动。
     */
    .pisell-floor-map-layout-view-controls-dock-scroll {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      gap: 5px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .pisell-floor-map-layout-view-controls-dock-scroll > :first-child {
      margin-left: 5px;
    }

    .pisell-floor-map-layout-view-controls-bar--dock {
      border-radius: 14px;
      border-color: #e8eaed;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      gap: 5px;
      box-sizing: border-box;
      height: @dock-chrome-outer;
      min-height: @dock-chrome-outer !important;
      max-height: @dock-chrome-outer !important;
      padding: 0 12px;
      align-items: center;
    }

    .pisell-floor-map-layout-view-controls-bar--dock .pisell-floor-map-layout-view-controls-dock-scroll .pisell-floor-map-layout-view-controls-tool-btn,
    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn,
    .pisell-floor-map-layout-view-controls-dock-trailing > .pisell-floor-map-layout-view-controls-tool-btn {
      flex-shrink: 0;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      color: #101828;
      appearance: none;
      vertical-align: middle;
      width: @dock-btn-size;
      min-width: @dock-btn-size;
      max-width: @dock-btn-size;
      height: @dock-btn-size;
      min-height: @dock-btn-size !important;
      max-height: @dock-btn-size !important;
      border-radius: 8px;
      font-size: @dock-icon-px;
      line-height: 0;

      &:hover {
        background: #f2f4f7;
        color: #101828;
      }

      &:disabled,
      &[aria-disabled='true'] {
        background: transparent;
        color: #d0d5dd;
        cursor: not-allowed;
      }

      .anticon,
      .pisell-lowcode-icon,
      span[role='img'] {
        font-size: @dock-icon-px !important;
        line-height: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .anticon svg,
      .pisell-lowcode-icon svg,
      span[role='img'] svg {
        width: @dock-icon-px !important;
        height: @dock-icon-px !important;
        display: block;
      }
    }

    /**
     * 展开条内激活态：与外侧折叠 pill（锁定 / 全览）同一套色，选择器挂在 bar--dock 上提高优先级，
     * 避免与其它 hover / 尺寸规则叠在一起时展开条观感发灰、与 pill 不一致。
     */
    .pisell-floor-map-layout-view-controls-bar--dock
      .pisell-floor-map-layout-view-controls-dock-scroll
      .pisell-floor-map-layout-view-controls-tool-btn--active,
    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn--active,
    .pisell-floor-map-layout-view-controls-dock-trailing > .pisell-floor-map-layout-view-controls-tool-btn--active {
      .vc-tool-btn-active-colors();
    }

    .pisell-floor-map-layout-view-controls-bar--dock
      .pisell-floor-map-layout-view-controls-dock-scroll
      .pisell-floor-map-layout-view-controls-zoom-value {
      min-width: 50px;
      height: @dock-btn-size;
      line-height: @dock-btn-size;
      font-size: 15px;
      padding: 0 6px;
    }

    .pisell-floor-map-layout-view-controls-bar--dock
      .pisell-floor-map-layout-view-controls-dock-scroll
      .pisell-floor-map-layout-view-controls-bar-divider {
      height: 28px;
      margin: 0 6px;
    }
  }

  /**
   * dockChrome 屏右缘常驻 pill：「锁 / 全览」。
   * 整组与 slide 共用同一外壳（dock-row 提供 border / radius / shadow），
   * 左侧留 padding，与左侧展开条 / toggle 拉开，避免贴太紧；右侧保留与屏缘的呼吸。
   */
  &-dock-collapsed-extras {
    box-sizing: border-box;
    height: @dock-chrome-outer;
    min-height: @dock-chrome-outer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px 0 10px;
    background: #fff;
    flex-shrink: 0;
    max-width: 240px;
  }

  /**
   * 右下 dock：row-reverse 后 DOM [extras][slide] 呈 [slide][extras]，
   * extras 贴右缘。本场景下整组按钮做成「连体 pill」：
   *
   *   - 折叠态视觉：[slide 内紫色 toggle][锁定/全览 extras]
   *   - 展开态视觉：[slide-bar 工具条][锁定/全览 extras]
   *   - 展开方向：slide max-width 由 54 → 720px，由于父级锚定 `right:14px`，
   *     整组横向"从右往左"伸长，视觉上工具条从 extras 左侧扩出来。
   *
   * 实现方式：把 box-shadow / border / border-radius 统一挂到外层 `dock-row` 容器上，
   * 内层 slide-bar / extras 全部去掉自己的边框圆角与投影，
   * 由 `overflow: hidden` 的外壳负责整体裁剪。这样：
   *   - 整组只有一道阴影，无相邻拼接处的接缝阴影；
   *   - 子元素切换宽度（max-width / width）时阴影边界跟随容器自然增长，无需 clip-path 修补；
   *   - 紫色 toggle / 白色 extras / 白色 slide-bar 在同一个外壳里平铺，自动呈现连体观感。
   */
  &--align-end .pisell-floor-map-layout-view-controls-dock-row {
    border: 1px solid #e8eaed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /** 容器高度对齐 chrome 高度，避免子元素 1px 边框被外壳 border 双层叠加 */
    height: @dock-chrome-outer;
    min-height: @dock-chrome-outer;
    max-height: @dock-chrome-outer;
  }

  /** 内层 slide-bar：去掉自身边框圆角阴影，背景仍为白以承接 zoom / 工具按钮 */
  &--align-end
    .pisell-floor-map-layout-view-controls-dock-slide
    .pisell-floor-map-layout-view-controls-bar--dock {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /** 高度由外壳决定，自身按外壳内填满 */
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    /**
     * 贴邻 extras 那一侧（DOM 内的右侧）padding 清零，避免与 extras 左 padding 叠加成接缝空隙；
     * 外壳左侧（slide-bar 视觉左缘）保留 12px，与外壳圆角留出呼吸空间。
     */
    padding-right: 0;
  }

  /**
   * 合并入口：紫底白 icon，主题色与原 `dock-expand-btn` 一致。
   * 尺寸对齐 dock 内其他工具按钮（@dock-btn-size），由外壳负责连体圆角与阴影。
   */
  &-dock-toggle-btn {
    box-sizing: border-box;
    width: @dock-btn-size;
    min-width: @dock-btn-size;
    max-width: @dock-btn-size;
    height: @dock-btn-size;
    min-height: @dock-btn-size !important;
    max-height: @dock-btn-size !important;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
    color: #fff;
    font-size: @dock-icon-px;
    line-height: 0;
    cursor: pointer;
    appearance: none;
    transition: filter @dock-slide-ms linear;

    &:hover {
      /** 与原 expand-btn 一致：主题色上用 brightness 让 hover 暗一档 */
      filter: brightness(0.92);
      background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
      color: #fff;
    }

    .anticon,
    .pisell-lowcode-icon,
    span[role='img'] {
      font-size: @dock-icon-px !important;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .anticon svg,
    .pisell-lowcode-icon svg,
    span[role='img'] svg {
      width: @dock-icon-px !important;
      height: @dock-icon-px !important;
      display: block;
    }
  }

  &-dock-collapsed-extras-btn {
    width: @dock-btn-size;
    min-width: @dock-btn-size;
    max-width: @dock-btn-size;
    height: @dock-btn-size;
    min-height: @dock-btn-size !important;
    max-height: @dock-btn-size !important;
    border-radius: 8px;
    font-size: @dock-icon-px;
    line-height: 0;

    .anticon,
    .pisell-lowcode-icon,
    span[role='img'] {
      font-size: @dock-icon-px !important;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .anticon svg,
    .pisell-lowcode-icon svg,
    span[role='img'] svg {
      width: @dock-icon-px !important;
      height: @dock-icon-px !important;
      display: block;
    }
  }

  &-dock-trailing {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
    max-width: min(300px, 58vw);

    .pisell-lowcode-btn,
    .ant-btn {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: @dock-btn-size;
      height: @dock-btn-size;
      padding: 0 16px;
      font-size: 14px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-slide,
  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-toggle-btn {
    transition-duration: 0.01ms;
  }
}
