.pisell-reservation-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 480px;
  box-sizing: border-box;
  position: relative;
}

/** 标题 + 视图 Segmented：必须横向单行；勿设 min-width:0，否则在日程带 Grid 里整条收缩链会把左侧压窄导致「标题一行 / Tabs 一行」 */
.pisell-reservation-schedule-start-merge {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  flex-shrink: 0;
}

.pisell-reservation-body-view-segmented.ant-segmented {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px;

  .ant-segmented-item {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
  }

  .ant-segmented-item-selected {
    color: #141824;
  }
}

/** 顶栏右侧日历粒度（日/周/月）：去掉选项 hover/active（antd 用 ::after 铺底色） */
.pisell-reservation-calendar-granularity-segmented.ant-segmented {
  .ant-segmented-item:not(.ant-segmented-item-selected) {
    &:hover,
    &:active {
      color: rgba(255, 255, 255, 0.85);

      &::after {
        background-color: transparent !important;
      }
    }
  }

  .ant-segmented-item-selected:hover {
    color: #141824;
  }
}

/**
 * 低代码前缀：选中项与「编辑平面图」同为 antd primary（colorPrimary / --color-primary）
 * thumb 同步主色，避免与 item 背景错位
 */
.pisell-reservation-body-view-segmented.pisell-lowcode-segmented {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px;

  .pisell-lowcode-segmented-item {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
  }

  .pisell-lowcode-segmented-item-selected {
    background: var(--color-primary,
    var(--ant-color-primary, #5d3f9f)) !important;
    color: var(--ant-color-text-light-solid, #fff) !important;
    font-weight: 600;
  }

  .pisell-lowcode-segmented-thumb {
    background: var(--color-primary,
    var(--ant-color-primary, #5d3f9f)) !important;
  }
}

/** 深色顶栏右侧：编辑/完成编辑（与新建并列） */
.pisell-reservation-topbar-edit-btn {
  min-width: 0;
  height: auto;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  border: none;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.35),
  0 2px 8px rgba(16, 24, 40, 0.2);

  &:hover,
  &:focus {
    box-shadow: 0 10px 24px rgba(22, 119, 255, 0.4),
    0 2px 8px rgba(16, 24, 40, 0.2);
  }
}

.pisell-reservation-floor-map-dock-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pisell-reservation-new-btn {
  padding: 10px 18px;
  font-size: 15px;
}

.pisell-reservation-page-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

.pisell-reservation-schedule-start-merge .pisell-reservation-body-view-segmented {
  flex-shrink: 0;
  /** 覆盖部分主题下 Segmented 根节点 width:100%，否则会独占一行把标题挤到上一行 */
  width: auto;
  max-width: none;
}

/**
 * 手机布局深色顶栏：视图切换为 Select（与 Segmented 同款浅色描边、白字）
 */
/** 宽度随当前选中项文案变化，不保留 200px 最小宽；极窄时仍不撑破顶栏 */
.pisell-reservation-schedule-start-merge .pisell-reservation-body-view-select,
.pisell-reservation-schedule-end-slots .pisell-reservation-body-view-select {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: max-content;
  min-width: 0;
  max-width: 100%;
}

.pisell-reservation-body-view-select.ant-select .ant-select-selector,
.pisell-reservation-body-view-select.pisell-lowcode-select .pisell-lowcode-select-selector {
  width: auto !important;
  min-width: 0;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.pisell-reservation-body-view-select.ant-select:hover .ant-select-selector,
.pisell-reservation-body-view-select.pisell-lowcode-select:hover .pisell-lowcode-select-selector {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.pisell-reservation-body-view-select .ant-select-selection-item,
.pisell-reservation-body-view-select .pisell-lowcode-select-selection-item {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

.pisell-reservation-body-view-select .ant-select-arrow,
.pisell-reservation-body-view-select .pisell-lowcode-select-arrow {
  color: rgba(255, 255, 255, 0.7);
}

.pisell-reservation-new-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #141824;
  background: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;

  &:hover {
    background: #f0f0f0;
  }

  &:active {
    transform: scale(0.98);
  }
}

.pisell-reservation-schedule-end-slots {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/** 日期右侧：状态说明 + 切换动作按钮 */
.pisell-reservation-follow-time-slot {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}

.pisell-reservation-follow-time-hint {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.pisell-reservation-follow-time-hint--off-current {
  color: #ff6b6b;
}

.pisell-reservation-follow-time-hint--at-current {
  color: #3ddc84;
}

/** 与顶栏 #141824 同系：参考「Current」胶囊 — 细边、开启时左侧绿点 + 白字 */
.pisell-reservation-follow-current-btn {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s,
  border-color 0.2s,
  color 0.2s,
  box-shadow 0.2s;

  &:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.32);
  }

  &:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
  }

  &--on {
    color: #fff;
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.28);

    &:hover {
      color: #fff;
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(255, 255, 255, 0.36);
    }
  }

  /** 非当前时间：与 --off-current 提示同色 */

  &--go-current {
    color: #ff6b6b;

    &:hover {
      color: #ff8787;
    }
  }

}

.pisell-reservation-follow-current-btn-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.pisell-reservation-follow-current-btn-label {
  white-space: nowrap;
}

.pisell-reservation-fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  pointer-events: auto;
}

.pisell-reservation-new-modal-placeholder {
  margin: 0px -24px;
}

.pisell-reservation-new-modal-route-list {
  display: flex;
  flex-direction: column;
}

.pisell-reservation-new-modal-route-item {
  width: 100%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: left;

  &:hover {
    background: #fafafa;
  }
}

.pisell-reservation-new-modal-route-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #141824;
}

.pisell-reservation-new-modal-route-arrow {
  flex-shrink: 0;
  margin-left: 16px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.pisell-reservation-new-modal-empty {
  margin: 24px;
  font-size: 28px;
  line-height: 1.5;
  color: #8c8c8c;
}

.pisell-reservation-new-modal-wrap {
  .pisell-lowcode-modal-body {
    border-radius: 0 0 12px 12px;
  }
}

/**
 * 场控画布资源：左下区域。原本是「dock = 标题栏 + 可折叠正文」的整块容器，
 * 现在拆成两个独立悬浮元素：
 *   1) `.pisell-reservation-hud-title`  —— 永远停在左下，宽度随「Today sales + 统计」文案收缩，顶到视口上限
 *   2) `.pisell-reservation-hud-drawer` —— 仅展开态出现的正文面板，浮在标题栏之上
 * 两者之间留出可视缝隙，标题栏不再做抽屉的「头」，只承担「我是哪天的统计 +
 * 一个展开/收起开关」语义；面板宽度仍按原 dock 540px 保持，以容纳表格列宽。
 */
.pisell-reservation-hud-title {
  position: fixed;
  z-index: 1001;
  left: 96px;
  bottom: 0;
  /** 宽度随内容；极长统计时在视口内换行/封顶，避免溢出左侧 dock */
  width: min(max-content, calc(100vw - 96px - 24px));
  box-sizing: border-box;
  /** 边距略收紧；字号在下方子选择器加大一级 */
  padding: 6px 10px 5px;
  /**
   * 主题色背景：与「编辑平面图 / 选中楼层」按钮同步走 antd primary 变量，
   * 主题切换（colorPrimary 改色）时自动跟随，无需手动维护。
   * 兜底色 #5d3f9f 与 PisellReservation.less 顶部低代码前缀块保持一致。
   */
  background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
  color: #fff;
  /** 贴边只圆顶角，与「立在桌沿」的视觉一致 */
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
  /**
   * 整条 chip 是抽屉「展开」入口：cursor + hover 给出可点击暗示，
   * 内部右侧的 chevron 按钮仍然能独立点（事件冒泡上来命中同一个 onClick，幂等）。
   */
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;

  &:hover {
    /** 主题色背景下用 brightness 调暗一档，比写死 hover 色更耐主题切换 */
    filter: brightness(0.94);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.24);
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.6);
  }

  /**
   * 主题色背景下，内部 HUD 标题栏的文字 / 数字 / 分隔点 / chevron 按钮全部强制为白色，
   * 否则原本的深灰 (#101828 / #475467) + 浅灰分隔 (#98a2b3) + 蓝色 chevron (#1677ff)
   * 在紫色背景上对比度极差。仅作用域在收起态 chip 内，避免影响抽屉里的同名子组件。
   */

  /**
   * HUD 根在 ReservationFloorMapHud.less 默认 `color: #101828`，统计区做单行省略时
   * 省略号继承该色会呈深色；将根色改白，未单独设色的节点（含 ellipsis）与条一致。
   */
  .pisell-reservation-floor-map-hud {
    color: #fff;
  }

  .pisell-reservation-floor-map-hud-heading,
  .pisell-reservation-floor-map-hud-label,
  .pisell-reservation-floor-map-hud-value {
    color: #fff;
  }

  .pisell-reservation-floor-map-hud-sep {
    color: rgba(255, 255, 255, 0.55);
  }

  .pisell-reservation-floor-map-hud-chevron-btn {
    color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.16);
    }

    &:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.7);
      outline-offset: 2px;
    }
  }

  /** 收起态 chip：内层 HUD 再收紧一点 padding，标题与数字略放大 */

  .pisell-reservation-floor-map-hud--interactive-title-bar {
    padding: 4px 6px;
  }

  .pisell-reservation-floor-map-hud-heading {
    font-size: 16px;
    line-height: 1.3;
  }

  .pisell-reservation-floor-map-hud-title-bar-stats {
    font-size: 15px;
  }

  .pisell-reservation-floor-map-hud-inline-stats .pisell-reservation-floor-map-hud-label {
    font-size: 14px;
  }

  .pisell-reservation-floor-map-hud-value {
    font-size: 16px;
  }

  /** 覆盖 HUD 全局 `title-bar-stats { flex:1 }`，否则统计区会吃满剩余宽度 */

  .pisell-reservation-floor-map-hud-title-bar-stats {
    flex: 0 1 auto;
  }

  .pisell-reservation-floor-map-hud-title-bar-layout {
    width: max-content;
    max-width: 100%;
  }
}

.pisell-reservation-hud-title-inner {
  width: auto;
  max-width: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/**
 * 抽屉正文面板：底部入口 chip 与抽屉互斥渲染（开抽屉时入口 chip 隐藏），
 * 因此抽屉可以一直贴底，不必给原来的标题栏让出 64px。
 * Today 统计 + 收起按钮通过 ShellFrame 的 belowToolbar 槽插在 toolbar 与表格中间，
 * 由 `.pisell-reservation-hud-drawer-stats-inner` 单独控样式。
 */
/**
 * 抽屉 mask：完全透明，仅承载「点击空白处关闭」的事件命中区域。
 * - 不加任何半透明黑底，避免破坏 floor map 的可视上下文（用户依然能看到下方桌位）；
 * - z-index 比抽屉本体低 1 档，确保抽屉点击不会被 mask 截走；
 * - 不阻塞 ESC：键盘事件由 PisellReservation 内的 useEffect 兜底。
 */
.pisell-reservation-hud-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
  cursor: pointer;
}

.pisell-reservation-hud-drawer {
  position: fixed;
  z-index: 1000;
  left: 96px;
  bottom: 0;
  width: min(52vw, 455px);
  max-width: calc(100vw - 96px - 24px);
  height: 98vh;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  /** 贴底面板：仅圆顶角，与原 dock 收尾呼应 */
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  /**
   * 顶部留 4px：抓手 (drawer-handle) 自带 ~16px 命中区与上下 padding，
   * 这里只留极小一条让圆角更显眼，避免抓手贴边。
   * box-sizing: border-box 保证 95vh 总高仍生效。
   */
  padding-top: 4px;
  box-sizing: border-box;
  animation: pisell-reservation-hud-drawer-enter 0.28s ease-out;
}

/**
 * 顶部抓手（drag handle）：
 * - 居中胶囊 bar，是大家熟悉的「移动端底部抽屉」交互暗示；
 * - 命中区铺满全宽，让点击 / 下拖更容易触发，不必精确瞄准小 bar；
 * - hover / 拖拽态：bar 变深，给出可交互反馈；
 * - touch-action: none：防止抓手下拖时被浏览器解读为页面滚动 / 下拉刷新。
 */
.pisell-reservation-hud-drawer-handle {
  flex: 0 0 auto;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;

  &:hover .pisell-reservation-hud-drawer-handle-bar,
  &:focus-visible .pisell-reservation-hud-drawer-handle-bar {
    background: rgba(15, 23, 42, 0.32);
  }

  &:focus-visible {
    .pisell-reservation-hud-drawer-handle-bar {
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }
  }
}

.pisell-reservation-hud-drawer-handle--dragging {
  cursor: grabbing;

  .pisell-reservation-hud-drawer-handle-bar {
    background: rgba(15, 23, 42, 0.42);
  }
}

.pisell-reservation-hud-drawer-handle-bar {
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

@keyframes pisell-reservation-hud-drawer-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pisell-reservation-hud-drawer-record-board {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pisell-reservation-hud-drawer-split {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.pisell-reservation-hud-drawer-split-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pisell-reservation-hud-drawer-split-main .pisell-record-board-root {
  flex: 1;
  min-height: 0;
}

.pisell-reservation-hud-drawer-split-main .pisell-record-board-scroll-body {
  padding-left: 16px;
  padding-right: 8px;
  box-sizing: border-box;
  /** 取消 iOS 等 WebKit 在表体上的滚动橡皮筋 / 回弹 */
  overscroll-behavior: none;
}

/** 资源快筛竖栏：外层 aside 与内层桶组同宽 58px；文案省略号；title 见 BucketButtonGroup；无底色无边框 */
.pisell-reservation-hud-drawer-resource-rail {
  --pisell-hud-resource-rail-px: 58px;
  flex: 0 0 var(--pisell-hud-resource-rail-px);
  flex-shrink: 0;
  width: var(--pisell-hud-resource-rail-px);
  min-width: var(--pisell-hud-resource-rail-px);
  max-width: var(--pisell-hud-resource-rail-px);
  box-sizing: border-box;
  min-height: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.pisell-reservation-hud-drawer-resource-rail__scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 4px;
  box-sizing: border-box;
}

.pisell-reservation-hud-drawer-resource-rail .reservation-bucket-button-group {
  /** 覆盖 BucketButtonGroup 默认 `inline-flex`，避免按内容宽度（~59px）撑破父级 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 6px;
}

.pisell-reservation-hud-drawer-resource-rail .reservation-bucket-button-group__item {
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 32px;
  padding: 6px 2px;
  box-sizing: border-box;
  overflow: hidden;
}

.pisell-reservation-hud-drawer-resource-rail .reservation-bucket-button-group__label {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  font-size: 11px;
}

/**
 * HUD 快筛：预约状态桶 + 支付状态桶在同一个 flex 容器里"按按钮"粒度横向 wrap。
 * 关键：内部两个 BucketButtonGroup 用 `display: contents` 解掉自己的容器，
 * 把里面的 <button> 直接交给 stack，这样换行才会按"单个按钮"维度，
 * 而不是按"整组"维度（否则只剩两个支付桶会被整体顶到下一行，
 * 即使第一行其实还能再放一两个按钮）。
 */
.pisell-reservation-hud-drawer-record-board .reservation-hud-drawer-quick-filter-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pisell-reservation-hud-drawer-record-board
.reservation-hud-drawer-quick-filter-stack
> .reservation-bucket-button-group {
  display: contents;
}

/** HUD 内嵌表：壳层工具栏与表格再贴紧一点 */
.pisell-reservation-hud-drawer .pisell-shell-frame-toolbar {
  margin-bottom: 4px;
}

/**
 * HUD 内 Find Modal（挂载在抽屉根节点）：与顶栏同宽铺满，避免沿用手机 Table 的 360px 上限后右侧露出工具栏图标。
 */
.pisell-reservation-hud-drawer .pisell-lookup-modal-custom-container {
  .pisell-lowcode-modal,
  .ant-modal {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pisell-lookup-modal-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/**
 * 抽屉内 belowToolbar 插槽：托住「Today 统计」这条文字摘要。
 * 不再做底色块，避免与上方 toolbar 白底 + 下方表格白底之间出现一道色带；
 * 仅保留与 record-board scroll-body 对齐的 16px 横向 padding 与小缝隙。
 */
.pisell-reservation-hud-drawer .pisell-shell-frame-below-toolbar {
  margin: 4px 16px 8px;
  padding: 10px 0;
  background: transparent;
  border-radius: 0;
}

.pisell-reservation-hud-drawer-stats-inner {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/**
 * 抽屉内不需要再放一个「收起 chevron」按钮——抽屉的开合由其它入口控制，
 * 这里再放一个会和 toolbar 上的图标按钮挤在一起。直接从样式上隐藏，
 * 避免改动通用 ReservationFloorMapHudTitleBar 的渲染分支。
 */
.pisell-reservation-hud-drawer-stats-inner
.pisell-reservation-floor-map-hud-chevron-btn {
  display: none;
}

/**
 * 抽屉展开后已经从折叠态 chip 进入，无需再在统计条上重复「Today sales」标题；
 * 隐藏 heading 后 stats（flex:1）会自然撑满 layout，不会出现位移。
 */
.pisell-reservation-hud-drawer-stats-inner
.pisell-reservation-floor-map-hud-heading {
  display: none;
}

/**
 * HUD 抽屉宽度有限（≤ 540px），分页改走 antd 原生 `size="small"`：
 * 业务侧通过 `<PisellRecordBoard paginationRender={...} />` 完全替换 shellFrame
 * 内置的 materials Pagination，无需在样式层去 hack 50px 外壳 / Previous/Next 大按钮。
 * 这里仅留 wrapper class 占位，后续如需微调（间距等）可在此扩展。
 */
.pisell-reservation-hud-drawer-pagination {
  // antd small Pagination 自身已足够紧凑，留空即可
}

/**
 * 手机 Table 列：纵向堆叠 + 每行子元素单行省略（booking_brief / order_info 共用）。
 * 单元格 padding 由 `.pisell-reservation-page--phone` 下 `.pisell-reservation-mobile-table-grid` 统一为 4px。
 * 不对齐 text-align / vertical-align，沿用表格与列配置的默认样式。
 */
.pisell-reservation-mobile-table-stack-cell() {
  white-space: normal !important;
  overflow: visible !important;

  .pisell-lowcode-table-cell-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;
    max-width: 100%;
  }
}

.pisell-reservation-mobile-table-column-stack() {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  color: #475467;
}

.pisell-reservation-mobile-table-row-ellipsis() {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/** 手机 Table：列内允许多行折行（邮箱、长电话等） */
.pisell-reservation-mobile-table-row-wrap() {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.pisell-reservation-mobile-table-tag-ellipsis() {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  height: auto;
  font-size: 11px;
  line-height: 16px;
  padding: 0 6px;
  margin: 0;
}

/**
 * variant="phone"：根类驱动手机布局（不依赖视口宽度，便于桌面嵌窄 iframe）。
 * 含：阶段 A 深色日程带 + 时间轴；阶段 B 浅色 RecordBoard / GridPro 工具栏。
 */
.pisell-reservation-page--phone {
  .pisell-reservation-mobile-table-toolbar {
    padding: 8px 12px 6px;

    .record-board-toolbar-body-view-segmented {
      display: none !important;
    }

    > .pisell-grid-pro-toolbar-row.toolbar-row,
    > .toolbar-row {
      flex-wrap: nowrap !important;
      align-items: center;
      column-gap: 6px !important;
      min-height: 32px;
    }

    .record-board-toolbar-quick-filter-slot {
      flex: 1 1 0 !important;
      flex-basis: auto !important;
      width: auto !important;
      max-width: none !important;
      min-width: 0;
      order: 0;
      display: flex;
      align-items: center;
      min-height: 32px;
    }

    .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form,
    .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
    .record-board-toolbar-quick-filter-slot .ant-form {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      flex-wrap: nowrap !important;
    }

    .record-board-toolbar-quick-filter-slot .ant-space,
    .record-board-toolbar-quick-filter-slot .pisell-lowcode-space {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      width: 100%;
      max-width: 100%;
      gap: 0 !important;

      > .ant-space-item,
      > .pisell-lowcode-space-item {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
      }
    }

    .pisell-reservation-mobile-toolbar-range-filter-item {
      width: 100%;
      margin-bottom: 0 !important;

      &.ant-form-item,
      &.pisell-lowcode-form-item {
        margin-bottom: 0 !important;
      }

      .ant-form-item-row,
      .pisell-lowcode-form-item-row {
        align-items: center;
      }

      .ant-form-item-control,
      .pisell-lowcode-form-item-control {
        flex: 1;
        min-width: 0;
        max-width: 100%;
      }

      .ant-form-item-control-input,
      .pisell-lowcode-form-item-control-input,
      .ant-form-item-control-input-content,
      .pisell-lowcode-form-item-control-input-content {
        min-height: 32px;
      }

      .ant-form-item-control-input-content,
      .pisell-lowcode-form-item-control-input-content {
        display: flex;
        align-items: center;
      }

      .pisell-mobile-date-range-picker {
        display: flex;
        align-items: center;
        min-height: 32px;
      }

      .pisell-mobile-date-range-picker__trigger {
        height: 32px !important;
        min-height: 32px !important;
        line-height: 1.2;
      }
    }

    .pisell-reservation-mobile-toolbar-range-filter-item.pisell-lowcode-range-picker-wrap,
    .pisell-reservation-mobile-toolbar-range-filter-item
    .pisell-lowcode-range-picker-wrap {
      width: 100%;
      margin-bottom: 0;

      .pisell-lowcode-range {
        width: 100% !important;
        max-width: 100%;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 8px !important;
        border-radius: 10px;
        border-color: #d0d5dd;
        background: #fff;
        box-shadow: none;
        font-size: 12px;
        font-weight: 500;
        color: #344054;

        .pisell-lowcode-picker-input {
          height: 30px;

          > input {
            font-size: 12px;
            font-weight: 500;
            line-height: 30px;
            color: #344054;
          }
        }

        .pisell-lowcode-picker-separator,
        .pisell-lowcode-picker-suffix {
          color: #667085;
        }

        &:hover {
          border-color: #98a2b3;
        }

        &.pisell-lowcode-picker-focused {
          border-color: #7f56d9;
          box-shadow: none;
        }
      }
    }

    .pisell-reservation-mobile-toolbar-body-view-select {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      min-width: 92px;
      max-width: min(34vw, 128px);
      height: 32px;
    }

    .pisell-reservation-mobile-toolbar-body-view-select.ant-select-sm .ant-select-selector,
    .pisell-reservation-mobile-toolbar-body-view-select.pisell-lowcode-select-sm
    .pisell-lowcode-select-selector,
    .pisell-reservation-mobile-toolbar-body-view-select.ant-select .ant-select-selector,
    .pisell-reservation-mobile-toolbar-body-view-select.pisell-lowcode-select
    .pisell-lowcode-select-selector {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 10px !important;
      border-radius: 10px;
      border-color: #d0d5dd;
      background: #fff;
      box-shadow: none;
    }

    .pisell-reservation-mobile-toolbar-body-view-select .ant-select-selection-item,
    .pisell-reservation-mobile-toolbar-body-view-select
    .pisell-lowcode-select-selection-item {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2 !important;
      color: #344054;
    }

    .pisell-reservation-mobile-toolbar-body-view-select .ant-select-arrow,
    .pisell-reservation-mobile-toolbar-body-view-select .pisell-lowcode-select-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0;
      top: 50%;
      transform: translateY(-50%);
      color: #667085;
    }

    .record-board-toolbar-extra-top-left {
      flex: 0 0 auto;
      order: 1;
      display: inline-flex;
      align-items: center;
      height: 32px;
    }

    .record-board-toolbar-find-wrap {
      flex: 0 0 auto;
      order: 2;
    }

    .record-board-toolbar-right-actions {
      flex: 0 0 auto;
      order: 2;
      margin-inline-start: 0 !important;
      display: inline-flex;
      align-items: center;
      height: 32px;
      min-height: 32px;
      gap: 4px !important;
    }
  }

  /**
   * HUD 抽屉内嵌表（merge 快筛行）：必须写在本文件 `.pisell-reservation-mobile-table-toolbar` 块**之后**，
   * 并用 `page--phone … hud-drawer …` 提高特异性；否则手机顶栏的 `nowrap` / `gap:0` 会压过仅带 `hud-drawer` 前缀的覆盖，
   * 桶按钮挤作一团且不换行溢出。
   * 注意：勿把 `.reservation-hud-drawer-quick-filter-stack` 设为 `display: contents`，否则会拆掉本块对
   * `flex-wrap`/`gap` 的承载盒，且压过 `.pisell-reservation-hud-drawer-record-board` 下对 stack 的间距规则。
   */
  .pisell-reservation-hud-drawer
    .pisell-reservation-hud-table-toolbar.pisell-reservation-mobile-table-toolbar {
    > .pisell-grid-pro-toolbar-row.toolbar-row,
    > .toolbar-row {
      flex-wrap: wrap !important;
      align-items: flex-start !important;
    }

    .record-board-toolbar-top-left {
      display: flex !important;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      column-gap: 8px;
      row-gap: 8px;
    }

    .record-board-toolbar-hud-unified-quick-filter-row {
      flex-wrap: wrap !important;
      align-items: flex-start;
      column-gap: 8px !important;
      row-gap: 8px !important;
    }

    /**
     * stack 保留为 flex 容器：`BucketButtonGroup` 仍用 `display: contents` 把各 `__item` 提到本层，
     * 由本容器的 gap + wrap 负责「按钮级」横向间距与换行，不依赖外层 Form / Space 的 gap。
     */
    .record-board-toolbar-hud-unified-quick-filter-row .reservation-hud-drawer-quick-filter-stack {
      display: flex !important;
      flex-direction: row;
      flex-wrap: wrap !important;
      align-items: center;
      align-content: flex-start;
      gap: 6px !important;
      row-gap: 6px !important;
      column-gap: 6px !important;
      min-width: 0;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    .record-board-toolbar-hud-unified-quick-filter-row .reservation-bucket-button-group {
      display: contents;
    }

    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .record-board-toolbar-quick-filter-form,
    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .pisell-lowcode-form,
    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .ant-form {
      flex-wrap: wrap !important;
      gap: 6px !important;
      row-gap: 6px !important;
      column-gap: 6px !important;
    }

    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .ant-space,
    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .pisell-lowcode-space {
      flex-wrap: wrap !important;
      gap: 6px !important;
    }

    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .ant-space-item,
    .record-board-toolbar-hud-unified-quick-filter-row
      .record-board-toolbar-quick-filter-slot
      .pisell-lowcode-space-item {
      flex: 0 0 auto !important;
      min-width: 0;
      max-width: 100%;
    }
  }

  /**
   * 手机 Table：在 RecordBoard `layoutVariant=phone`（6px）基础上再收紧为 4px，与 Sales 手机表一致。
   */
  .pisell-reservation-mobile-table-grid {
    .pisell-lowcode-table-thead .pisell-lowcode-table-cell,
    .pisell-lowcode-table-tbody .pisell-lowcode-table-cell,
    .ant-table-thead .ant-table-cell,
    .ant-table-tbody .ant-table-cell,
    td[class*='pisell-reservation-mobile-table-col--'],
    th[class*='pisell-reservation-mobile-table-col--'] {
      padding: 4px 4px !important;
    }

    .pisell-lowcode-table-selection-column,
    .ant-table-selection-column {
      padding: 4px 2px !important;
    }

    .pisell-record-board-infinite-scroll-summary-row > .pisell-lowcode-table-cell,
    .pisell-record-board-infinite-scroll-summary-row > .ant-table-cell {
      padding: 4px 6px !important;
    }

    .pisell-reservation-mobile-table-col--booking-brief {
      .pisell-reservation-mobile-table-stack-cell();

      .pisell-sales-grid-booking-brief {
        .pisell-reservation-mobile-table-column-stack();
      }

      .pisell-sales-grid-booking-brief > .pisell-client-name {
        .pisell-reservation-mobile-table-row-ellipsis();
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
      }

      .pisell-sales-grid-booking-brief > .pisell-datetime-display,
      .pisell-sales-grid-booking-brief > .pisell-datetime-display-inline {
        .pisell-reservation-mobile-table-row-ellipsis();
        display: flex;
        flex-wrap: nowrap;
        font-size: 12px;
        line-height: 1.35;
      }

      .pisell-sales-grid-booking-brief > div:has(.ant-tag),
      .pisell-sales-grid-booking-brief > div:has(.pisell-lowcode-tag) {
        .pisell-reservation-mobile-table-row-ellipsis();
      }

      .pisell-lowcode-tag,
      .ant-tag {
        .pisell-reservation-mobile-table-tag-ellipsis();
      }

      /** BookingNotesPreview：根为容器；每行备注各自单行省略 */

      .pisell-sales-grid-booking-brief
      > div:not(:has(.ant-tag)):not(:has(.pisell-lowcode-tag)) {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;

        > div > div {
          .pisell-reservation-mobile-table-row-ellipsis();
          font-size: 12px !important;
          line-height: 1.35 !important;
        }
      }
    }

    .pisell-reservation-mobile-table-col--service-time {
      .pisell-time-range-display-time,
      .pisell-time-range-display-date,
      .pisell-time-range-display-weekday,
      .pisell-time-range-display-duration,
      .pisell-time-range-display-sep {
        font-size: 13px;
        line-height: 1.45;
      }
    }

    /**
     * Customer / Contact / Holder：stretch 约束列宽；邮箱等在列内换行（覆盖 render 内 nowrap）。
     */
    .pisell-reservation-mobile-table-col--customer,
    .pisell-reservation-mobile-table-col--contact,
    .pisell-reservation-mobile-table-col--holder-data {
      white-space: normal !important;
      overflow: hidden;

      .pisell-lowcode-table-cell-content {
        white-space: normal !important;
        overflow: hidden;
        max-width: 100%;
        min-width: 0;
      }

      .pisell-lowcode-table-cell-content > div {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: center;

        > div,
        .pisell-client-name {
          .pisell-reservation-mobile-table-row-wrap();
        }

        .pisell-client-name {
          font-size: 12px !important;
          line-height: 16px !important;
        }
      }
    }

    .pisell-reservation-mobile-table-col--order-info {
      .pisell-reservation-mobile-table-stack-cell();

      .pisell-sales-grid-order-info {
        .pisell-reservation-mobile-table-column-stack();
      }

      /** 纵向三行布局：每行（订单号 / 金额 / 状态）各自单行省略 */

      .pisell-sales-grid-order-info > div {
        .pisell-reservation-mobile-table-row-ellipsis();
      }

      .pisell-sales-grid-order-info > div:first-child {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
      }

      .pisell-lowcode-tag,
      .ant-tag {
        .pisell-reservation-mobile-table-tag-ellipsis();
      }
    }

    .pisell-lowcode-table-placeholder .pisell-lowcode-empty,
    .pisell-lowcode-table-placeholder .pisell-lowcode-empty-normal {
      margin-top: 24px;
      margin-bottom: 0;
    }
  }

  /**
   * 平面图左上统计：`PisellFloorMapLayout` 默认 overlay 为 left/top 12px；
   * 手机贴画布可视区左上角 0 0（底栏 `bottom-start` 场控 HUD 不改）。
   */

  .pisell-floor-map-layout-viewport-overlay:not(
      .pisell-floor-map-layout-viewport-overlay--bottom-start
    ) {
    left: 0;
    top: 0;
    max-width: none;
  }

  /**
   * 多画布切换（只读顶栏）：相对 materials 48px 略压扁；在「略矮」基础上稍抬高 Tab 条，便于点击。
   */

  .pisell-floor-map-layout-edit-top-bar.pisell-floor-map-layout-read-canvas-tabs-bar {
    min-height: 34px;
    align-items: center;

    .pisell-floor-map-layout-edit-top-bar-tabs {
      align-items: center;
    }

    .pisell-floor-map-layout-edit-top-bar-canvas-tabs.pisell-floor-map-layout-canvas-tabs {
      padding: 2px 5px;
      gap: 4px;
      border-radius: 8px;
    }

    .pisell-floor-map-layout-canvas-tabs-tab {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 1.3;
      min-height: 26px;
      box-sizing: border-box;
    }

    .pisell-floor-map-layout-canvas-tabs-tab-input {
      font-size: 12px;
      padding: 3px 6px;
      min-width: 56px;
    }

    .pisell-floor-map-layout-canvas-tabs-tab-rename {
      min-width: 28px;
      min-height: 26px;
      margin: -2px -4px -2px 0;
      font-size: 12px;
    }

    .pisell-floor-map-layout-canvas-tabs-add {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 1.3;
      min-height: 26px;
      box-sizing: border-box;
    }

    .pisell-floor-map-layout-canvas-tabs-empty,
    .pisell-floor-map-layout-canvas-tabs-empty-hint {
      font-size: 12px;
    }

    .pisell-floor-map-layout-edit-top-bar-actions {
      padding: 0 6px;
    }
  }

  /**
   * 编辑顶栏手机首行：与只读顶栏同一 DOM（read-canvas-tabs-bar），同一套 Tab 密度；
   * CanvasTabs 内层负责横向滚动。
   */

  .pisell-floor-map-layout-edit-top-bar.pisell-floor-map-layout-read-canvas-tabs-bar.pisell-floor-map-layout-edit-top-bar--phone-edit-canvas-row {
    min-height: 34px;
    align-items: center;

    .pisell-floor-map-layout-edit-top-bar-tabs {
      align-items: center;
    }

    .pisell-floor-map-layout-edit-top-bar-canvas-tabs.pisell-floor-map-layout-canvas-tabs {
      padding: 2px 5px;
      gap: 4px;
      border-radius: 8px;
    }

    .pisell-floor-map-layout-canvas-tabs-tab {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 1.3;
      min-height: 26px;
      box-sizing: border-box;
    }

    .pisell-floor-map-layout-canvas-tabs-tab-input {
      font-size: 12px;
      padding: 3px 6px;
      min-width: 56px;
    }

    .pisell-floor-map-layout-canvas-tabs-tab-rename {
      min-width: 28px;
      min-height: 26px;
      margin: -2px -4px -2px 0;
      font-size: 12px;
    }

    .pisell-floor-map-layout-canvas-tabs-add {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 1.3;
      min-height: 26px;
      box-sizing: border-box;
    }

    .pisell-floor-map-layout-canvas-tabs-empty,
    .pisell-floor-map-layout-canvas-tabs-empty-hint {
      font-size: 12px;
    }
  }

  /**
   * 编辑顶栏手机第二行 undo/redo：左右留白略收紧（materials 默认已改，此处与预约壳一致）。
   */

  .pisell-floor-map-layout-edit-top-bar.pisell-floor-map-layout-edit-top-bar--phone-actions-row {
    min-height: 40px;

    .pisell-floor-map-layout-edit-top-bar-actions {
      padding: 0 4px;
    }
  }

  /**
   * 阶段 A — PisellReservationScheduleBand（深色行 + navigator）
   * 手机布局采用 2 行 × 2 列网格：
   *   行 1：左 = 视图 Select（页标题已隐藏）  右 = + New
   *   行 2：日期切换（含 Go-to-current 胶囊），跨两列
   * 比之前的「3 行竖排」省一行高度。
   */

  .pisell-reservation-schedule-band-schedule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    overflow-x: visible;
    padding: 6px 10px;
  }

  .pisell-reservation-schedule-band-slot-start {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    min-width: 0;
  }

  .pisell-reservation-schedule-band-slot-end {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: max-content;
    width: auto;
  }

  .pisell-reservation-schedule-band-schedule {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  /**
   * 无顶栏视图切换时左侧槽为空，不再保留「空行 + 日期行」两行网格，改为日期 / Now / +New 同一行。
   */
  .pisell-reservation-schedule-band-schedule-row--phone-single-line {
    grid-template-rows: auto;

    .pisell-reservation-schedule-band-slot-start {
      display: none;
    }

    .pisell-reservation-schedule-band-schedule {
      grid-column: 1;
      grid-row: 1;
    }

    .pisell-reservation-schedule-band-slot-end {
      grid-column: 2;
      grid-row: 1;
    }
  }

  .pisell-reservation-schedule-band-navigator {
    padding: 0;
    box-sizing: border-box;
  }

  .pisell-reservation-schedule-start-merge {
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
  }

  /**
   * 阶段 A 顶栏日程行：手机不展示「Venue control」等默认页标题（仍保留视图切换 Select）。
   * 仅隐藏直接子级 `.pisell-reservation-page-title`，避免误伤自定义 `scheduleStartSlot` 其它结构。
   */
  .pisell-reservation-schedule-start-merge > .pisell-reservation-page-title {
    display: none;
  }

  .pisell-reservation-page-title {
    max-width: 100%;
    font-size: 15px;
  }

  .pisell-reservation-follow-time-slot {
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 6px;
  }

  .pisell-reservation-new-btn--phone {
    padding: 6px 12px;
    font-size: 13px;
  }

  /** 手机版 Go-to-current 胶囊：把「红字 + 按钮」压成一颗，省一整行 */

  .pisell-reservation-follow-current-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: default;

    &-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #3ddc84;
    }

    &--on {
      color: rgba(255, 255, 255, 0.78);
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.18);
    }

    &--off {
      color: #ff6b6b;
      background: rgba(255, 107, 107, 0.12);
      border-color: rgba(255, 107, 107, 0.45);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;

      &:hover {
        color: #ff8787;
        background: rgba(255, 107, 107, 0.18);
        border-color: rgba(255, 107, 107, 0.6);
      }
    }
  }

  .pisell-reservation-fab {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }

  /**
   * 日历 / 平面图：日程带（tabs 行）已是全宽深色区，外层 GridPro 工具栏不再叠加 Table 顶栏 padding。
   */

  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--calendar,
  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--floor-map {
    padding: 0 !important;
    gap: 0 !important;

    &.pisell-record-board-toolbar--compact-narrow {
      padding-bottom: 0 !important;
    }
  }

  /**
   * 阶段 B — RecordBoard 浅色工具栏：narrow-stack 在 materials 中默认仅对 `--grid` 生效；
   * phone 下对 floor-map / calendar / resource-wall 复刻 narrow 单行布局（与 recordBoardToolbar narrow-stack 一致）。
   */

  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--floor-map,
  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--calendar,
  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--resource-wall {
    > .toolbar-row {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      row-gap: 8px;
      column-gap: 8px;
      min-width: 0;
    }

    > .toolbar-row > .toolbar-row-left,
    > .toolbar-row > .toolbar-row-right {
      display: contents;
    }

    .record-board-toolbar-top-left {
      display: contents;
    }

    .record-board-toolbar-quick-filter-slot {
      order: 0;
      flex: 1 1 auto;
      width: auto;
      max-width: 100%;
      min-width: 0;
    }

    .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
    .record-board-toolbar-quick-filter-slot .ant-form {
      width: auto;
      max-width: 100%;
      min-width: 0;
    }

    .record-board-toolbar-body-view-segmented {
      order: 1;
      flex: 0 0 auto;
    }

    .record-board-toolbar-find-wrap {
      order: 1;
      flex: 1 1 0;
      min-width: 0;
    }

    .record-board-toolbar-extra-top-left {
      order: 1;
      flex: 0 1 auto;
      min-width: 0;
    }

    .record-board-toolbar-right-actions {
      order: 1;
      flex: 0 0 auto;
      margin-inline-start: auto;
    }
  }

  /** 与 materials：grid + narrow-stack + compact 时行对齐顶缘（手机 Table 顶栏除外，见上方专用规则） */

  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact:not(
      .pisell-reservation-mobile-table-toolbar
    ) {
    > .pisell-grid-pro-toolbar-row.toolbar-row,
    > .toolbar-row {
      align-items: flex-start !important;
    }
  }

  /** 表格 / 资源墙：与 shell 左右留白在窄屏下略收紧 */

  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid,
  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--resource-wall {
    padding-left: 12px;
    padding-right: 12px;
  }

  /**
   * 资源墙视口顶栏（ResourceWallViewportToolbar）：手机下日期独占一行，操作按钮换行堆叠。
   * 桌面资源墙大屏仍保持 materials 默认单行。
   */

  .pisell-shell-frame--resource-wall-view .pisell-resource-wall-viewport-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 10px;

    .pisell-resource-wall-viewport-toolbar__clock {
      flex: 1 1 100%;
      width: 100%;
    }

    .pisell-resource-wall-viewport-toolbar__actions {
      flex: 1 1 100%;
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }

  /**
   * Table narrow-stack（非手机 Table 专用类）：快筛独占一行，避免与 Segmented 重叠。
   * 手机预约 Table 使用 `.pisell-reservation-mobile-table-toolbar`，见上方单行规则。
   */

  .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack:not(
      .pisell-reservation-mobile-table-toolbar
    ) {
    > .pisell-grid-pro-toolbar-row.toolbar-row:has(.record-board-toolbar-quick-filter-slot),
    > .toolbar-row:has(.record-board-toolbar-quick-filter-slot) {
      flex-wrap: wrap !important;
      row-gap: 10px;
    }

    .record-board-toolbar-quick-filter-slot {
      flex: 1 1 100%;
      flex-basis: 100%;
      max-width: 100%;
      width: 100%;
      min-width: 0;
    }

    .record-board-toolbar-body-view-segmented {
      display: none !important;
    }

    .record-board-toolbar-find-wrap {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
    }
  }

  /**
   * 平面图 HUD 底栏 chip（收起态）：手机全宽贴底、单行省略号；左右与底部 safe area 内边距。
   * z-index 略低于典型 antd Modal（约 1000），避免盖住弹层；仍高于画布与 HUD mask(999)。
   */

  .pisell-reservation-hud-title {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 990;
    padding-top: 6px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    /** 单行截断交给内层 `.title-bar-stats`；外层仅裁切横向溢出，避免与内层双重省略 */
    overflow-x: hidden;

    .pisell-reservation-floor-map-hud--interactive-title-bar {
      max-width: 100%;
      min-width: 0;
    }

    .pisell-reservation-floor-map-hud-title-bar-layout {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      /** 略收紧 gap，窄屏多给统计区几像素 */
      gap: 6px;
    }

    .pisell-reservation-floor-map-hud-title-bar-stats {
      /** `1 1 0` 以 0 为 basis 时部分环境下统计区可分配偏窄；`auto` 先按内容占位再参与伸缩 */
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      flex-wrap: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
    }
  }

  .pisell-reservation-hud-title-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
  }

  /**
   * 底栏 HUD chip 为 fixed bottom:0 后，与 PisellFloorMapLayout dock（默认 bottom:14px）竖向重叠。
   * 收起态有 `.pisell-reservation-hud-title`；展开抽屉时该节点会卸载，改挂载 `.pisell-reservation-hud-drawer`，
   * 二者择一匹配即可保持 dock 上移，避免 `bottom` 回落造成闪动（:has 与场控目标浏览器一致）。
   * 54px ≈ 单行 chip 可视高度 + 与 dock 的小间隙；safe-area 与 HUD padding-bottom 对齐。
   */
  &:has(.pisell-reservation-hud-title),
  &:has(.pisell-reservation-hud-drawer) {
    .pisell-floor-map-layout-view-controls.pisell-floor-map-layout-view-controls--dock {
      bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    }
  }

  /**
   * 平面图 HUD 展开抽屉：桌面端为 min(52vw,455px) + left:96px；phone 下改为贴齐视口左右全宽，
   * 避免 52vw 在窄机上过窄（用户反馈约 218px 大边距）。
   */
  .pisell-reservation-hud-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}