.workspace-empty-state-pc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--space-6, 24px);
  text-align: center;
}
.workspace-empty-state-icon-pc {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3, 12px);
}
.workspace-empty-state-text-pc {
  margin: 0;
  color: var(--text-disable);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 24px;
}
/* 移动端空态图标为 96px，沿用图标到文字的 12px 间距。 */
.workspace-page-layout-mobile .workspace-empty-state-icon-pc {
  width: calc(var(--space-12) * 2);
  height: calc(var(--space-12) * 2);
  flex-shrink: 0;
}
.workspace-page-layout-mobile .workspace-empty-state-icon-pc > svg {
  width: 100%;
  height: 100%;
}
.workspace-page-layout-mobile .workspace-empty-state-text-pc {
  font-family: var(--font-family-body);
  font-size: var(--fs-17);
  /* DESIGN_FALLBACK: 字重 scale 无 regular token，使用移动端常规字重。 */
  font-weight: 400;
  line-height: var(--space-6);
  letter-spacing: 0;
}

/**
 * 行内缩放步进器（设计稿 item/10-zoom）：`[−] <当前%> [+]  ↻`。
 * __control 是带边框的三段步进框（减 22×22 / 数值 38×22 / 加 22×22），
 * __reset 是右侧独立的重置按钮。随宿主 UI 字号缩放（--font-scale）。
 */
.content-zoom-stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-1);
}
.content-zoom-stepper__control {
  display: inline-flex;
  align-items: center;
  height: calc(22px * var(--font-scale, 1));
  border: 1px solid var(--border-default);
  border-radius: var(--wb-radius-150);
  overflow: hidden;
  background: var(--bg-default);
}
.content-zoom-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(22px * var(--font-scale, 1));
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.content-zoom-stepper__btn > svg {
  flex-shrink: 0;
}
.content-zoom-stepper__btn:hover:not(:disabled) {
  background: var(--bg-primary-hover);
}
.content-zoom-stepper__btn:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
.content-zoom-stepper__value {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 固定宽度按三位数「100%」预留，避免 2 位→3 位切换时格子被撑宽 */
  width: calc(44px * var(--font-scale, 1));
  height: 100%;
  padding: 0 var(--space-1);
  border-left: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
          user-select: none;
}
.content-zoom-stepper__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(22px * var(--font-scale, 1));
  height: calc(22px * var(--font-scale, 1));
  padding: 0;
  border: none;
  border-radius: var(--wb-radius-150);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.content-zoom-stepper__reset > svg {
  flex-shrink: 0;
}
.content-zoom-stepper__reset:hover:not(:disabled) {
  background: var(--bg-primary-hover);
}
.content-zoom-stepper__reset:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}

/**
 * 缩放提示浮层样式（2026-09-22 设计稿 node 17885:445「缩放悬浮条」，
 * 实例 17859:1079 浅色 / 18087:611 暗色，截图实测 201×40）。
 *
 * 位置：内容区水平居中（不含左侧目录栏），距顶 80px（设计稿 y=80），
 * 从上方滑入、2 秒后淡出。居中区间用 left 吃掉侧栏占位宽度
 * （--main-layout-sidebar-width，由 MainLayoutPage 同步到 :root）+ margin-inline:auto
 * 收缩居中，纯 CSS，不占 transform（留给滑入动画）。
 *
 * 「顶」与「居中区间」的参照物随环境切换（浮层落点由 zoom-indicator.tsx 决定）：
 *   - 独立页面：挂 body 级弹层容器 → fixed，按视口。
 *   - 联邦（genie）：挂 [data-mindx-federation-app] 挂载容器 → absolute，按该容器。
 *     genie 自己还有一层侧栏，若继续用 body 级 fixed，参照的是宿主视口，胶囊会
 *     整体偏右；改挂挂载容器后居中区间天然排除宿主侧栏，且不需要测量它的宽度。
 *
 * 配色直接吃 WB 语义 token（与设计稿取样值逐值一致，不在这里重抄色值）：
 *   底   --bg-tooltip           → --wb-color-bg-tooltip（浅 rgba(0,0,0,.75) / 暗 rgba(255,255,255,.75)）
 *   文字 --text-primary-invert  → --wb-color-text-primary-invert（浅 rgba(255,255,255,.9) / 暗 rgba(0,0,0,.9)）
 *   阴影 --wb-shadow-popup-medium（浅 0.04/0.06 两档，暗色 globals.css 另有覆盖）
 * 分隔线与文字同色，无描边，圆角 8px，backdrop blur 40px。
 *
 */
.content-zoom-indicator {
  position: fixed;
  /* stylelint-disable-next-line font-token */
  top: 80px;
  /* 内容区居中：左边界让开侧栏占位（折叠 / 隐藏 / 窄态浮层时该变量为 0），
     right:0 收尾，再由 margin-inline:auto 在 [侧栏右缘, 视口右缘] 内居中 */
  left: var(--main-layout-sidebar-width, 0px);
  right: 0;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: fit-content;
  /* 低于 more 菜单（more-menu.less z-index:2001），避免菜单打开时胶囊盖在菜单上 */
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border: none;
  border-radius: var(--radius-md-val);
  background: var(--bg-tooltip);
  color: var(--text-primary-invert);
  /* 设计稿 BACKGROUND_BLUR 40：75% 半透明底下的毛玻璃 */
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: var(--wb-shadow-popup-medium);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 180ms ease,
    transform 180ms ease;
}
/* 联邦（genie）宿主自带侧边栏：浮层已挂进资料库挂载容器
   （[data-mindx-federation-app]，position: relative），这里改 absolute ——
   参照挂载容器而不是宿主视口，居中区间天然排除宿主侧栏，无需测量其宽度。 */
[data-mindx-federation-app] .content-zoom-indicator {
  position: absolute;
}
.content-zoom-indicator--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.content-zoom-indicator__control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.content-zoom-indicator__btn,
.content-zoom-indicator__reset {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 120ms ease;
  /* hover 高光：currentColor（继承文字色）低透明度铺底，跟随明暗主题自动适配 */
}
.content-zoom-indicator__btn::before,
.content-zoom-indicator__reset::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity 120ms ease;
}
.content-zoom-indicator__btn > svg,
.content-zoom-indicator__reset > svg {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.content-zoom-indicator__btn:hover:not(:disabled)::before,
.content-zoom-indicator__reset:hover:not(:disabled)::before {
  opacity: 0.16;
}
.content-zoom-indicator__btn:disabled,
.content-zoom-indicator__reset:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* reset 按钮：图标 + 「重置」文字横排（对齐设计稿 node 17859:1015） */
.content-zoom-indicator__reset {
  width: auto;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}
.content-zoom-indicator__reset-label {
  position: relative;
  z-index: 1;
  color: inherit;
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  line-height: 20px;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}
.content-zoom-indicator__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  color: inherit;
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
          user-select: none;
}
.content-zoom-indicator__divider {
  width: 1px;
  height: 16px;
  background: currentColor;
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .content-zoom-indicator {
    transition: none;
  }
}

/* 产物栏高度：Ardot editor-header 16583:777 为 64px。
 * 宽高不是 spacing，按 tokens-usage 写字面 px；评论/关联/版本历史抽屉 top 共用此值。
 * fallback：评论面板等浮层与 titlebar 不在同一个 CSS bundle 时也能取到值。 */
:root {
  --doc-titlebar-height: 64px;
}
.doc-titlebar-wrapper-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  container-type: inline-size;
  height: var(--doc-titlebar-height, 64px);
  /* 设计稿 padding 24 / 16，左右栏 gap 16 */
  gap: var(--wb-spacing-400);
  padding: 0 var(--wb-spacing-400) 0 var(--wb-spacing-600);
  background: var(--wb-color-bg-secondary-default);
  border-bottom: 1px solid var(--wb-color-border-primary);
  position: relative;
  z-index: 110;
  flex-shrink: 0;
}
.doc-titlebar-left-pc {
  display: flex;
  align-items: center;
  gap: var(--wb-spacing-100);
  flex: 1 1 auto;
  /* 左侧保底：极窄时不再被右侧按钮组压缩（设计稿 16583:1865，320px header
   * 规格：左侧 168 = 收折 32 + gap 4 + title 区 132）。
   * 保底后收缩链仍贯通（面包屑 → 最后段 max-width:100% → current-pc →
   * text）：长标题由 head 中间收缩出省略号、tail（末两字 + 文件后缀）
   * 完整保留 —— 极窄下文字可见 ≈ 132 - icon 区 24 = 108px，对应设计稿
   * text 容器 122 - icon 16 ≈ 106px。禁止再给 text 单独设 min-width：
   * 会撑破收缩链（text + icon > 132），current-pc 的 overflow: hidden
   * 会从右端硬裁掉 tail 后缀。min-width 是宽高非 spacing，写字面 px。 */
  min-width: 168px;
  overflow: hidden;
}
.doc-titlebar-left-extra-pc {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* ---- 云端版本标识：纯展示状态图标（不可点击） ----
 * hover 态对齐设计稿：24x24 / 圆角 6 / 浅灰底，icon 保持 14px。
 * 与标题间距 = 父级 gap(4) + 自身 margin-left(4) = 8px（设计稿 16742:858：
 * text 右缘到文档状态 tag 左缘 8px）；对后续元素（关联 pill 等）仍走父级 gap
 */
.doc-titlebar-cloud-badge-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--wb-radius-200);
  color: var(--wb-color-text-tertiary);
  font-family: inherit;
  cursor: default;
  margin-left: var(--wb-spacing-100);
  transition: background-color 150ms ease;
}
.doc-titlebar-cloud-badge-pc svg {
  width: 14px;
  height: 14px;
}
.doc-titlebar-cloud-badge-pc:hover {
  background: var(--wb-color-bg-secondary-hover-active);
}
.doc-titlebar-cloud-badge-pc:focus-visible {
  outline: none;
}
/* ---- 关联入口：对齐设计稿「关联管理」tag ----
 * 24 高、padding 0/4、gap 2、圆角 8、无描边、icon 14、字色 50%
 */
.doc-titlebar-relation-pill-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-spacing-50);
  flex-shrink: 0;
  height: 24px;
  padding: 0 var(--wb-spacing-100);
  border: 0;
  border-radius: var(--wb-radius-200);
  background: transparent;
  color: var(--wb-color-text-tertiary);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-relation-pill-pc svg {
  width: 14px;
  height: 14px;
}
.doc-titlebar-relation-pill-pc:hover {
  background: var(--wb-color-bg-secondary-hover-active);
  color: var(--wb-color-text-primary);
}
.doc-titlebar-relation-pill-count-pc {
  font-weight: 400;
  min-width: 8px;
  text-align: center;
}
.doc-titlebar-sidebar-toggle-pc {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* 同步 pill：位于右侧操作按钮组最前，间距交给 .doc-titlebar-right-pc 的 gap */
.doc-titlebar-sync-pill-pc {
  flex-shrink: 0;
}
/* 返回按钮 — DESIGN.md Ghost Button 规范，< 形 */
.doc-titlebar-back-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-back-btn-pc:hover {
  background: var(--feedback-hover);
  color: var(--icon-primary);
}
.doc-titlebar-back-btn-pc:focus-visible {
  outline: none;
  box-shadow: var(--shadow-1);
}
.doc-titlebar-right-pc {
  display: flex;
  align-items: center;
  gap: var(--wb-spacing-300);
  flex-shrink: 0;
  /* 设计稿操作热区 24×24、圆角 8、图标 16；不改全局 ButtonPC sm */
}
.doc-titlebar-right-pc .btn-icon-only-pc.btn-sm-pc,
.doc-titlebar-right-pc .btn-icon-pc.btn-sm-pc {
  width: 24px;
  height: 24px;
  border-radius: var(--wb-radius-200);
  color: var(--wb-color-text-secondary);
}
/* rightExtra（通知/登录等外部注入内容）：与内部操作按钮的间距
 * 交给父级 .doc-titlebar-right-pc 的 gap，不再叠 margin（曾叠成 24px） */
.doc-titlebar-right-extra-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.doc-titlebar-share-wrapper-pc {
  position: relative;
}
.doc-titlebar-publish-wrapper-pc {
  position: relative;
}
.doc-titlebar-more-wrapper-pc {
  position: relative;
  /* 更多菜单打开时，按钮呈现选中态背景（与 ghost hover 反馈对齐，
     用 fill-primary 比 hover 的 fill-secondary 略重一档，表达"持续激活"） */
}
.doc-titlebar-more-wrapper-pc.is-open .btn-ghost-pc {
  background: var(--fill-primary);
  color: var(--icon-primary);
}
/* Live 按钮 — 与分享/评论/更多保持一致的 secondary 灰色风格 */
.doc-titlebar-live-btn-pc {
  position: relative;
}
/* 编辑/预览切换下拉 trigger：去掉下拉打开时的绿色焦点边框
   （浏览器/Radix DropdownMenu 打开时会触发 :focus-visible，描边色取自
   theme --border-focus，在 WorkBuddy teal 主题下显示为绿色，与 ghost 风格冲突） */
.doc-titlebar-edit-dropdown-trigger-pc:focus-visible {
  outline: none;
}
/* 编辑/预览切换下拉 trigger：加 1px 灰色圆角边框让 ghost 按钮有边界感
   （btn-ghost 默认无边框，hover 才有 fill 反馈，但下拉 trigger 是稳定可见
   状态，需要静态边框和左右其他 icon-only 按钮区分开） */
.doc-titlebar-edit-dropdown-trigger-pc {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  padding: 0 12px;
  gap: var(--space-2);
}
/* trigger 按钮文字字号 14px（btn-sm-pc 默认 12px 偏小） */
.doc-titlebar-edit-dropdown-trigger-label-pc {
  font-size: 14px;
}
/* 下拉展开时箭头旋转 180° 朝上 */
.doc-titlebar-edit-dropdown-arrow-pc {
  transform: rotate(180deg);
}
/* 编辑/预览切换下拉项 — 选中态用主题色高亮文字和图标
   选中项天然 disabled（点击同模式是 no-op），但禁用态会触发
   data-disabled:opacity-50 把品牌色冲淡到 50%，需要覆盖回 1。
   不加背景色蒙层（避免和 hover 态混淆）。 */
.doc-titlebar-edit-dropdown-content-pc [data-selected] {
  color: var(--brand);
  opacity: 1;
}
.doc-titlebar-edit-dropdown-content-pc [data-selected] > svg {
  color: var(--brand);
}
/* 编辑/预览切换下拉项 — 紧凑布局 */
.doc-titlebar-edit-dropdown-content-pc [data-slot="dropdown-menu-item"] {
  padding: 8px 12px;
  gap: var(--space-2);
  /* 覆盖 Radix 默认 [&_svg]:size-4(16px)，与顶部栏 trigger icon 的 md(20px) 一致 */
}
.doc-titlebar-edit-dropdown-content-pc [data-slot="dropdown-menu-item"] > svg {
  width: 20px;
  height: 20px;
}
/* 第一个 item 的下 padding 减半，让两 item 之间的内间距收紧 */
.doc-titlebar-edit-dropdown-content-pc [data-slot="dropdown-menu-item"]:first-child {
  padding-bottom: 4px;
}
/* 后续 item 的上 padding 减半 */
.doc-titlebar-edit-dropdown-content-pc [data-slot="dropdown-menu-item"] + [data-slot="dropdown-menu-item"] {
  padding-top: 4px;
}
/* 编辑/预览切换下拉项 — 文字占满剩余空间，
   把对勾 Icon 自动推到菜单最右侧 */
.doc-titlebar-edit-dropdown-content-pc [data-slot="dropdown-menu-item"] > span {
  flex: 1;
}
/* ai 图标视觉重心偏下，微调 1px 使其与其他图标视觉居中 */
.doc-titlebar-icon-ai-pc {
  transform: translateY(-1px);
}
.doc-titlebar-comment-wrapper-pc {
  position: relative;
}
/* web 节点编辑/评论激活态：图标 + 文字胶囊（ardot 编辑态设计稿 node 16223:16）
 * 规格：padding 水平 8px（--space-2）、gap 4px（--space-1）、胶囊圆角（--radius-full）、
 * 文字 12px / Regular（--fs-small + 400，覆盖 .btn-pc 基类 font-weight 600）。
 * 配色 1:1 对齐设计稿变量：wb/color/bg/callout block → --wb-color-bg-callout-block
 * （浅蓝 tint 背景，本仓库 globals.css 已定义且与设计稿数值精确一致：Light
 * rgba(176,205,255,0.3) / Dark rgba(62,95,153,0.3)），wb/color/text/secondary →
 * --wb-color-text-secondary（文字 + 图标 currentColor 色）。设计稿中 "/" 分隔的
 * token 路径对应本仓库 "-" 连接的 CSS 变量名。
 * 高度沿用同排 icon-only 按钮的 32px，保持行内对齐一致。
 * 选择器前缀 .btn-pc 提升权重：压过单 class 的 .btn-sm-pc（height/padding）与
 * .btn-ghost-pc:hover:not(:disabled)（hover 背景/文字），避免打包顺序漂移。 */
.btn-pc.doc-titlebar-comment-active-pc,
.btn-pc.doc-titlebar-edit-active-pc {
  height: 32px;
  padding: 0 var(--space-2);
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 400;
  border-radius: var(--radius-full);
  background: var(--wb-color-bg-callout-block);
  color: var(--wb-color-text-secondary);
}
.btn-pc.doc-titlebar-comment-active-pc:hover:not(:disabled),
.btn-pc.doc-titlebar-edit-active-pc:hover:not(:disabled) {
  background: var(--wb-color-bg-callout-block);
  color: var(--wb-color-text-secondary);
}
.doc-titlebar-comment-unread-dot-pc {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--error);
  border: 2px solid var(--bg-default);
  pointer-events: none;
}
.doc-titlebar-share-btn-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.doc-titlebar-share-btn-pc:hover {
  background: var(--fill-tertiary);
  color: var(--text-primary);
}
.doc-titlebar-more-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.doc-titlebar-more-btn-pc:hover {
  background: var(--fill-tertiary);
  color: var(--text-primary);
}
/* ========== 面包屑 ========== */
.doc-titlebar-breadcrumb-pc {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 640px);
  overflow: hidden;
}
.doc-titlebar-breadcrumb-segment-pc {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}
.doc-titlebar-breadcrumb-segment-pc:last-child {
  flex: 0 0 auto;
  max-width: 100%;
}
.doc-titlebar-breadcrumb-sep-pc {
  flex-shrink: 0;
  margin: 0 var(--wb-spacing-100);
  color: var(--wb-color-text-secondary);
  font-size: var(--fs-body);
  -webkit-user-select: none;
          user-select: none;
}
.doc-titlebar-breadcrumb-link-pc {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 24px;
  border: none;
  border-radius: var(--wb-radius-200);
  background: transparent;
  color: var(--wb-color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  padding: 0 var(--wb-spacing-100);
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-breadcrumb-link-pc:hover {
  background: var(--wb-color-bg-secondary-hover-active);
  color: var(--wb-color-text-primary);
}
.doc-titlebar-breadcrumb-current-pc {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--wb-color-text-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.doc-titlebar-breadcrumb-segment-pc:last-child .doc-titlebar-breadcrumb-current-pc {
  max-width: 100%;
}
.doc-titlebar-breadcrumb-icon-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: var(--space-1);
  border-radius: var(--radius-sm-val);
  color: var(--icon-secondary);
  font-size: var(--fs-small);
  line-height: 1;
}
.doc-titlebar-breadcrumb-icon-pc > svg {
  width: 16px;
  height: 16px;
}
/* 根节点（个人/空间，不可点击） */
.doc-titlebar-breadcrumb-root-pc {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--wb-color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.doc-titlebar-breadcrumb-text-pc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 标题中间省略（末段 head/tail 拆分）结构与截断贴合样式统一由
 * components/title-ellipsis.less 承担（TitleEllipsisPC 组件）。 */
.doc-titlebar-breadcrumb-rename-input-pc {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0 var(--space-1);
  box-sizing: border-box;
  font-size: var(--fs-body);
  font-family: inherit;
  font-weight: 500;
  line-height: 22px;
  color: var(--text-primary);
  background: var(--bg-default);
  border: var(--border-width-thin) solid var(--border-focus);
  border-radius: var(--radius-md);
  outline: none;
}
/* 面包屑折叠省略号 */
.doc-titlebar-breadcrumb-ellipsis-pc {
  flex-shrink: 0;
  color: var(--text-quaternary);
  font-size: var(--fs-body);
  -webkit-user-select: none;
          user-select: none;
  padding: 0 var(--space-0-5);
}
/* 面包屑后的编辑信息 */
.doc-titlebar-meta-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: var(--space-3);
}
.doc-titlebar-meta-text-pc {
  font-size: var(--fs-small);
  color: var(--text-quaternary);
  white-space: nowrap;
}
/* 移动端简化模式 — 高度覆盖为 48px */
.doc-titlebar-wrapper-mobile-pc {
  height: 48px;
  padding: 0 var(--space-4);
}
.main-layout-wrapper-collapsed-pc .doc-titlebar-wrapper-mobile-pc {
  padding-left: var(--space-4);
}
/* 移动端简化模式 — 评论按钮（图标 + 文字） */
.doc-titlebar-mobile-comment-btn-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-mobile-comment-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
/* 移动端简化模式 — 评论模式「退出」按钮 */
.doc-titlebar-mobile-comment-mode-exit-pc {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) 0;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-mobile-comment-mode-exit-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
/* 移动端简化模式 — 评论模式「查看所有评论(N)」文字 */
.doc-titlebar-mobile-comment-mode-count-pc {
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-secondary);
}
@container (max-width: 720px) {
  .doc-titlebar-meta-pc {
    display: none;
  }
  .doc-titlebar-breadcrumb-sep-pc {
    margin: 0 var(--wb-spacing-100);
  }
  .doc-titlebar-breadcrumb-link-pc,
  .doc-titlebar-breadcrumb-root-pc {
    max-width: none;
  }
  .doc-titlebar-breadcrumb-current-pc {
    max-width: none;
  }
  .btn-pc.doc-titlebar-comment-active-pc,
  .btn-pc.doc-titlebar-edit-active-pc {
    width: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    border-radius: var(--wb-radius-200);
  }
  .doc-titlebar-pill-label-pc {
    display: none;
  }
}

.doc-titlebar-info-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.doc-titlebar-info-icon-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--icon-primary);
  opacity: 0.7;
  transition: opacity 0.2s ease-out;
}
.doc-titlebar-info-icon-pc:hover {
  opacity: 1;
}
.doc-titlebar-info-title-pc {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
/* 标题中间省略（head/tail 拆分）结构与截断贴合样式统一由
 * title-ellipsis.less 承担（TitleEllipsisPC 组件）。 */

/* 标题中间省略（设计稿「收折逻辑」）：head 收缩出省略号、tail（末两字 +
 * 文件后缀）不收缩，省略号落在标题整体中间而非末尾。 */
.doc-titlebar-title-ellipsis-pc {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}
.doc-titlebar-title-ellipsis-head-pc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-titlebar-title-ellipsis-tail-pc {
  flex-shrink: 0;
  white-space: nowrap;
}
/* 截断态：省略号「…」为全角字形、advance 右侧有固有留白，
 * tail 以 transform 左移抵消，让省略号与后续文字零间隙贴合。
 * 必须用 transform 而非负 margin：transform 不参与布局，head 的
 * scrollWidth/clientWidth 不会因贴合而变化，否则「挂载 → 不再溢出 →
 * 卸载 → 又溢出」会在临界宽度形成抖动反馈环。
 * 仅截断时挂载（组件 scrollWidth > clientWidth 检测）。
 * 留白量随字体略有差异，-0.125em 为 PingFang/Noto 常见值，可视觉微调。 */
.doc-titlebar-title-ellipsis-pc.is-truncated-pc .doc-titlebar-title-ellipsis-tail-pc {
  transform: translateX(-0.125em);
}

/**
 * z-index 说明：
 * 菜单通过 portal 挂到 body，跳出 titlebar (z-index:110) 的堆叠上下文，
 * 避免被评论侧栏 doc-comment-panel (z-index:900) 遮挡。
 * 提到 2001，与同目录 comment-quick-menu 对齐。
 *
 * 关闭外部点击不再用全屏遮罩（会盖住 HTML 预览 iframe，导致菜单打开后
 * 无法滚动 / ⌘+滚轮缩放）；改由 more-menu.tsx 内 document mousedown + window blur 处理。
 */
.doc-titlebar-more-menu-pc {
  position: fixed;
  box-sizing: border-box;
  /* 设计稿 editor-header-more 16907:1051：pad 8、圆角 12、描边 0.5 #E6E6E6 */
  min-width: 160px;
  padding: var(--wb-spacing-200);
  background: var(--wb-color-bg-secondary-default);
  border: calc(var(--border-width-thin) / 2) solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-300);
  box-shadow: var(--wb-shadow-popup-medium);
  color: var(--wb-color-text-primary);
  font-size: var(--fs-body);
  -webkit-user-select: none;
          user-select: none;
  z-index: 2001;
}
.doc-titlebar-more-menu-group-pc {
  display: flex;
  flex-direction: column;
  gap: var(--wb-spacing-50);
  /* 稿容器 gap 8：分割线两侧各 8 */
}
.doc-titlebar-more-menu-group-pc + .doc-titlebar-more-menu-group-pc {
  margin-top: var(--wb-spacing-200);
  padding-top: var(--wb-spacing-200);
  border-top: 1px solid var(--wb-color-border-primary);
}
.doc-titlebar-more-menu-item-pc {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--wb-spacing-200);
  width: 100%;
  height: 32px;
  padding: var(--wb-spacing-100) var(--wb-spacing-200);
  border: none;
  border-radius: var(--wb-radius-200);
  background: transparent;
  color: var(--wb-color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease;
  text-align: left;
}
.doc-titlebar-more-menu-item-pc:hover {
  background: var(--wb-color-bg-primary-hover);
}
.doc-titlebar-more-menu-item-pc > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--wb-color-text-primary);
}
.doc-titlebar-more-menu-item-danger-pc {
  color: var(--error);
}
.doc-titlebar-more-menu-item-danger-pc > svg {
  color: var(--error);
}
.doc-titlebar-more-menu-item-danger-pc:hover {
  background: var(--error-bg);
}
.doc-titlebar-more-menu-item-text-pc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 缩放行：图标 + 「缩放」文案 + 右侧行内步进器；整行不可点击，无 hover 高亮 */
.doc-titlebar-more-menu-zoom-row-pc {
  cursor: default;
}
.doc-titlebar-more-menu-zoom-row-pc:hover {
  background: transparent;
}
.doc-titlebar-more-menu-switch-pc {
  cursor: default;
}
.doc-titlebar-more-menu-switch-pc .bg-brand {
  background: var(--switch-active-bg);
}
.doc-titlebar-more-menu-switch-pc .bg-bg-strong {
  background: var(--switch-bg);
}
.doc-titlebar-more-menu-switch-pc:hover {
  background: transparent;
}

/**
 * CollaboratorAvatarsPC — 协作人头像组样式
 *
 * 双组结构：外层 wrapper 横排 Agent 组 + 分隔条 + Human 组。
 * Hover 高亮单元 = 整个外层 wrapper（包括 Agent 头像 + 分隔条 + Human 头像 + +N 按钮）。
 */
/* 外层双组容器（hover 高亮 + 点击切换 Popover 的统一单元） */
.doc-titlebar-collaborator-groups-pc {
  /* 重置 button 默认外观，保留 button 的语义和键盘行为 */
  -webkit-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-2xl-val);
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.doc-titlebar-collaborator-groups-pc:hover,
.doc-titlebar-collaborator-groups-pc[data-state="open"] {
  background-color: var(--fill-secondary);
  box-shadow: var(--shadow-level-1);
}
.doc-titlebar-collaborator-groups-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* 分隔条：竖线 */
.doc-titlebar-collaborator-divider-pc {
  width: 1px;
  height: 24px;
  background: var(--divider);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}
/* 每组头像容器（不再单独承担 hover 高亮，去除 padding/border-radius） */
.doc-titlebar-collaborator-avatars-pc {
  display: flex;
  align-items: center;
}
.doc-titlebar-collaborator-avatar-item-pc {
  /* 头像叠放：负 margin 让相邻头像重叠约 8px（接近 1/3 直径，适配 22px 头像） */
  margin-left: calc(-1 * var(--space-2));
  /* 固定尺寸 = AVATAR_SIZE(22px) + border(2px × 2) */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-default);
  border-radius: 50%;
  overflow: hidden;
  /*
   * 覆盖 UserAvatarPC 默认的 hover opacity 0.85：
   * 协作者头像组整体已由外层容器接管 hover 高亮（圆角阴影框），
   * 不需要单个头像再做 hover 反馈，避免视觉上"浮起 / 闪烁"。
   */
}
.doc-titlebar-collaborator-avatar-item-pc:first-child {
  margin-left: 0;
}
.doc-titlebar-collaborator-avatar-item-pc .user-avatar-pc:hover {
  opacity: 1;
}
.doc-titlebar-collaborator-avatar-item-pc .user-avatar-fallback-pc {
  --brand-tint: var(--info);
  --brand: var(--text-allwhite);
}
/* 第 4 个头像位：展示头像并叠加 +N 蒙层 */
.doc-titlebar-collaborator-avatar-more-pc {
  position: relative;
}
.doc-titlebar-collaborator-avatar-more-mask-pc {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--overlay-default);
  color: var(--text-allwhite);
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  line-height: 1;
}
/*
 * 蒙层内的数字 / 箭头两层叠放：
 * - 默认显示数字（总数）
 * - 外层 hover / 点击打开（data-state="open"）→ 切换为下拉箭头
 * - 用 opacity 做交叉淡入淡出，过渡时长与外层背景一致（150ms ease）
 */
.doc-titlebar-collaborator-avatar-more-count-pc,
.doc-titlebar-collaborator-avatar-more-arrow-pc {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease;
}
.doc-titlebar-collaborator-avatar-more-count-pc {
  opacity: 1;
}
.doc-titlebar-collaborator-avatar-more-arrow-pc {
  opacity: 0;
  /* 箭头视觉上需要比数字稍紧凑，限定一下图标盒子大小 */
}
.doc-titlebar-collaborator-avatar-more-arrow-pc svg {
  width: 14px;
  height: 14px;
}
/* 外层 hover / Popover 打开时，切换数字 → 箭头 */
.doc-titlebar-collaborator-groups-pc:hover .doc-titlebar-collaborator-avatar-more-count-pc,
.doc-titlebar-collaborator-groups-pc[data-state="open"] .doc-titlebar-collaborator-avatar-more-count-pc {
  opacity: 0;
}
.doc-titlebar-collaborator-groups-pc:hover .doc-titlebar-collaborator-avatar-more-arrow-pc,
.doc-titlebar-collaborator-groups-pc[data-state="open"] .doc-titlebar-collaborator-avatar-more-arrow-pc {
  opacity: 1;
}
/* ---- Popover 内容样式 ---- */
.doc-titlebar-collaborator-popover-pc {
  /* shadcn Popover 默认 width: 18rem，给协作者列表留窄一点 */
  width: 240px;
  padding: var(--space-2) 0 !important;
  gap: 0 !important;
  z-index: 130;
  /* 高于 .sc-comment-aside (z-index: 120) */
}
.doc-titlebar-collaborator-popover-title-pc {
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
/* 第二段及以后的标题保留分隔，但顶部加上间距 */
.doc-titlebar-collaborator-popover-list-pc + .doc-titlebar-collaborator-popover-title-pc {
  margin-top: var(--space-1);
}
/* 整个 Popover 内容的统一滚动容器：标题 + 列表共享一条滚动条 */
.doc-titlebar-collaborator-popover-scroll-pc {
  max-height: 360px;
  overflow-y: auto;
}
.doc-titlebar-collaborator-popover-list-pc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc-titlebar-collaborator-popover-item-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  cursor: default;
  transition: background-color 150ms ease;
}
.doc-titlebar-collaborator-popover-item-pc:hover {
  background-color: var(--fill-secondary);
}
.doc-titlebar-collaborator-popover-avatar-pc {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  /* 抑制单头像 hover 反馈，行级反馈交给 .doc-titlebar-collaborator-popover-item-pc:hover 的背景色 */
}
.doc-titlebar-collaborator-popover-avatar-pc .user-avatar-pc:hover {
  opacity: 1;
}
.doc-titlebar-collaborator-popover-avatar-pc .user-avatar-fallback-pc {
  --brand-tint: var(--info);
  --brand: var(--text-allwhite);
}
.doc-titlebar-collaborator-popover-name-pc {
  flex: 1;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/* 本人标签（我） */
.doc-titlebar-collaborator-popover-me-tag-pc {
  font-size: calc(11px * var(--font-scale));
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.doc-titlebar-collaborator-popover-tag-pc {
  font-size: calc(11px * var(--font-scale));
  color: var(--text-tertiary);
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-md-val);
  background: var(--fill-primary);
  flex-shrink: 0;
}

/* ====== 顶栏「仅查看」权限徽标 ====== */
/* 触发 pill：对齐设计稿「仅查看」tag（24px 高 / 6px 圆角 / 1px 边框 / 纯文字；
 * 默认无背景，hover 才出现浅灰底；与左栏间距交给父级 gap */
.doc-titlebar-permission-pill-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-shrink: 0;
  height: var(--space-6);
  padding: 0 var(--space-2);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.doc-titlebar-permission-pill-pc:hover,
.doc-titlebar-permission-pill-pc[data-open] {
  background: var(--wb-color-bg-secondary-hover-active);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.doc-titlebar-permission-pill-text-pc {
  white-space: nowrap;
}
/* 下拉面板：对齐设计稿「popup/仅查看权限」（240 宽 / 12 圆角 / 白底 /
 * 1px 边框 / popup-medium 轻阴影 / 8 内边距） */
.doc-titlebar-permission-panel-pc {
  z-index: 200;
  width: -webkit-max-content;
  width: max-content;
  min-width: 240px;
  gap: 0;
  padding: var(--wb-spacing-200);
  border: var(--border-width-thin) solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-300);
  background: var(--wb-color-bg-secondary-default);
  box-shadow: var(--wb-shadow-popup-medium);
}
/* 分隔线：仅已申请态（等待审批）使用；未申请态按设计稿无分隔线 */
.doc-titlebar-permission-divider-pc {
  height: var(--border-width-thin);
  margin: var(--space-3) 0;
  background: var(--wb-color-border-primary);
}
/* ---- 未申请态：纯两行文本（无图标块），行高 22 ---- */
.doc-titlebar-permission-summary-pc {
  padding: 0 var(--wb-spacing-200);
}
.doc-titlebar-permission-summary-text-pc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.doc-titlebar-permission-summary-title-pc {
  margin: 0;
  color: var(--wb-color-text-primary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 22px;
}
.doc-titlebar-permission-summary-owner-pc {
  margin: 0;
  color: var(--wb-color-text-tertiary);
  font-size: var(--fs-body);
  line-height: 22px;
}
.doc-titlebar-permission-apply-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  height: 32px;
  margin-top: var(--wb-spacing-200);
  padding: 0 var(--wb-spacing-200);
  border: none;
  border-radius: var(--wb-radius-200);
  background: var(--brand);
  color: var(--text-allwhite);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.doc-titlebar-permission-apply-btn-pc:hover {
  background: var(--brand-hover);
}
.doc-titlebar-permission-apply-btn-pc:active {
  background: var(--brand-pressed);
}
.doc-titlebar-permission-apply-btn-pc:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
/* ---- 已申请态 ---- */
.doc-titlebar-permission-pending-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.doc-titlebar-permission-pending-icon-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
  color: var(--icon-secondary);
}
.doc-titlebar-permission-pending-title-pc {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 22px;
}
.doc-titlebar-permission-pending-desc-pc {
  margin: var(--space-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  line-height: 18px;
}
.doc-titlebar-permission-divider-pc + .doc-titlebar-permission-pending-hint-pc {
  margin: var(--wb-spacing-200) 0 0;
}
.doc-titlebar-permission-pending-hint-pc {
  color: var(--text-quaternary);
  font-size: var(--fs-caption);
  line-height: 18px;
  word-break: break-all;
}
/* 已申请态里的分隔线需要撑满面板宽度 */
.doc-titlebar-permission-pending-pc .doc-titlebar-permission-divider-pc {
  align-self: stretch;
}

/**
 * PublishSyncPrompt 样式
 */
.publish-sync-prompt-pc {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  overflow: hidden;
}
/* ===== banner：分享面板内嵌整行（info 左 / 按钮右） ===== */
.publish-sync-prompt-pc.is-banner {
  height: auto;
  border-radius: var(--radius-md-val);
}
.publish-sync-prompt-pc.is-banner .publish-sync-prompt-info-pc {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-3);
}
/* ===== pill：顶部标题栏左侧紧凑药丸 ===== */
.publish-sync-prompt-pc.is-pill .publish-sync-prompt-info-pc {
  padding: 0 var(--space-1) 0 var(--space-3);
}
/* info 与 button 之间的细分隔线（仅紧凑 pill 需要） */
.publish-sync-prompt-pc.is-pill .publish-sync-prompt-btn-pc {
  border-left: 1px solid var(--border-strong);
}
/* ===== 提示文案 ===== */
.publish-sync-prompt-info-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--warning-text);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}
.publish-sync-prompt-text-pc {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ===== 立即同步按钮：透明底、warning 文字，与提示同底色 ===== */
.publish-sync-prompt-btn-pc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--warning-text);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease,
    color 150ms ease;
}
.publish-sync-prompt-btn-pc:hover:not(:disabled) {
  background: var(--warning);
  color: var(--text-allwhite);
}
.publish-sync-prompt-btn-pc:disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
}
/* 同步中：refresh 图标旋转 */
.publish-sync-prompt-spin-pc {
  animation: publish-sync-prompt-spin 800ms linear infinite;
}
@keyframes publish-sync-prompt-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .publish-sync-prompt-spin-pc {
    animation: none;
  }
}

/* ========== 共享版本历史侧边栏（Shell） ========== */
/*
 * --vh-sidebar-width 与「修订卡片侧边栏」对齐：修订卡片由 SDK 的
 * CommentPlugin 渲染，外层 .sc-comment-aside 宽度由 --sc-comment-aside-width
 * 控制，默认 320px（DevTools 实测：div.sc-comment-aside = 320 × N）。
 *
 * 让文档详情页内的右侧侧边栏（文档版本历史 / 修订卡片）同宽，
 * 互斥切换时视觉过渡稳定，正文区让位 padding 也只有一个值需要维护。
 *
 * --vh-sidebar-top-offset：跟产物栏 --doc-titlebar-height 对齐（全文版本历史
 * 渲染在 .workspace-page-layout-pc，包含 titlebar 子树）。
 */
:root {
  --vh-sidebar-width: 320px;
  --vh-sidebar-top-offset: var(--doc-titlebar-height, 64px);
}
.vh-sidebar-pc {
  position: absolute;
  top: var(--vh-sidebar-top-offset);
  bottom: 0;
  right: 0;
  width: var(--vh-sidebar-width);
  z-index: 50;
  background: var(--bg-secondary-default);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vh-sidebar-slide-in 200ms ease;
}
@keyframes vh-sidebar-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* ── 顶部 ── */
.vh-sidebar-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  height: 56px;
}
.vh-sidebar-title-pc {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 20px;
}
.vh-sidebar-close-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.vh-sidebar-close-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
/* ── 主体（可滚动） ── */
.vh-sidebar-body-pc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}
/* ── 分组 ── */
.vh-sidebar-group-pc {
  margin-bottom: var(--space-3);
}
.vh-sidebar-group-label-pc {
  padding: 0 var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 32px;
}
/* ── 列表项 ── */
.vh-sidebar-item-pc {
  display: block;
  width: 100%;
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-12px-val);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.vh-sidebar-item-pc:hover {
  background: var(--bg-primary-hover);
  /* 截断摘要的渐变遮罩底色跟随 hover 底色，避免露出白底 */
  --vh-summary-bg: var(--bg-primary-hover);
}
.vh-sidebar-item-pc:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
/* 选中态：浅灰底圆角块高亮（设计图为中性灰底，非品牌色），
 * 日期字色保持普通文本黑（--text-primary）。 */
.vh-sidebar-item-selected-pc {
  background: var(--bg-primary-hover);
  /* 截断摘要的渐变遮罩底色跟随选中底色 */
  --vh-summary-bg: var(--bg-primary-hover);
}
.vh-sidebar-item-selected-pc:hover {
  background: var(--bg-primary-hover);
}
/* 列表项首行：时间 + 角标 */
.vh-sidebar-item-row-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  line-height: 24px;
}
.vh-sidebar-item-time-pc {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
/* 右上 badge（如"当前版本"/"编辑中"） */
.vh-sidebar-item-badge-pc {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  line-height: 1.4;
  white-space: nowrap;
}
/* 编辑人列表（一行一个：头像 + 姓名） */
.vh-sidebar-item-editors-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.vh-sidebar-item-editor-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-primary);
  line-height: 20px;
}
.vh-sidebar-item-editor-pc .avatar-fallback-pc {
  font-size: var(--fs-9);
  line-height: 16px;
}
/* 编辑人姓名文本 */
.vh-sidebar-item-editor-name-pc {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--fs-small);
}
/* WorkBuddy 编辑人：浅紫 pill 标签高亮姓名 */
.vh-sidebar-item-editor-name-workbuddy-pc {
  font-weight: 500;
}
/* "展开剩余 N 人" 链接按钮 */
.vh-sidebar-item-expand-pc {
  align-self: flex-start;
  padding: 0;
  margin-top: var(--space-1);
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-caption);
  line-height: 1.4;
  cursor: pointer;
}
.vh-sidebar-item-expand-pc:hover {
  text-decoration: underline;
}
/* ─── 决策/破坏性事件锚点 & Agent 修订摘要（补充说明层） ───
 *
 * 两类文本共用同一容器样式（视觉完全一致，只是内容来源不同）：
 *   1. 决策锚点：接受修订「接受 WorkBuddy 的修订：{summary}」/ 回退版本「还原自 …的版本」
 *   2. Agent 修订摘要（revisionSummary）：WorkBuddy 单独修订记录的摘要
 *
 * 字色档次：
 *   - 基础文本：quaternary（最浅一档灰，柔和）
 *   - 加粗前缀：tertiary（比正文深一档拉出"标题 : 说明"层次，但不至于像 secondary 那样跳）
 */
.vh-sidebar-item-summary-pc {
  position: relative;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
}
.vh-sidebar-item-summary-pc strong {
  font-weight: 400;
  color: var(--text-tertiary);
}
/*
 * 展开/收起按钮：行内文字（"展开"/"收起"）+ 小箭头，紧跟在文本末尾。
 * 截断态时紧接在「截断文本…」之后，展开态时接在完整文本之后，
 * 全部走正常 inline 文档流，与设计图"…展开 ⌄"自然接排一致。
 */
.vh-sidebar-item-summary-toggle-pc {
  display: inline-flex;
  align-items: center;
  padding-left: var(--space-1);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 1.6;
  cursor: pointer;
  vertical-align: baseline;
  transition: color 150ms ease;
}
.vh-sidebar-item-summary-toggle-pc:hover {
  color: var(--text-secondary);
}
.vh-sidebar-item-summary-toggle-pc:active {
  color: var(--text-primary);
}
/* 展开/收起箭头：默认向下；收起态（展开后）旋转 180° 指向上 */
.vh-sidebar-item-summary-toggle-icon-pc {
  transition: transform 150ms ease;
}
.vh-sidebar-item-summary-toggle-icon-up-pc {
  transform: rotate(180deg);
}
/* ── 选中态：右上「恢复/还原」图标按钮 ── */
.vh-sidebar-restore-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-secondary);
  border-radius: var(--radius-sm-val);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.vh-sidebar-restore-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--brand);
}
.vh-sidebar-restore-btn-pc:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.vh-sidebar-restore-btn-pc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 恢复中脉冲动画 */
@keyframes vh-sidebar-restore-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.vh-sidebar-restore-spinning-pc {
  animation: vh-sidebar-restore-pulse 1s ease-in-out infinite;
}
/* ── 空状态 ── */
.vh-sidebar-empty-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
/* ── 加载中 ── */
.vh-sidebar-loading-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
/* ── 错误态 ── */
.vh-sidebar-error-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}
.vh-sidebar-error-text-pc {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  text-align: center;
}
.vh-sidebar-retry-btn-pc {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.vh-sidebar-retry-btn-pc:hover {
  background: var(--bg-weak);
}
/* ── 触底加载更多 sentinel（不可见占位） ── */
.vh-sidebar-load-more-sentinel-pc {
  height: 1px;
  width: 100%;
}
/* ── 加载更多中 ── */
.vh-sidebar-loading-more-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
}

/**
 * doc-info-modal.less
 *
 * 卡片化字段 + 分组小标题视觉风格（参考产品截图）
 */
/* ---------- Overlay ---------- */
.doc-info-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
  animation: doc-info-modal-fade-in 150ms ease;
}
@keyframes doc-info-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ---------- Panel ---------- */
.doc-info-modal-panel-pc {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--modal-panel-bg);
  border-radius: var(--radius-xl-val);
  box-shadow: var(--shadow-3);
  animation: doc-info-modal-slide-up 150ms ease;
  overflow: hidden;
}
@keyframes doc-info-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- Header ---------- */
.doc-info-modal-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.doc-info-modal-title-pc {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 24px;
}
/* ---------- Body ---------- */
.doc-info-modal-body-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6) var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* ---------- Section ---------- */
.doc-info-modal-section-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.doc-info-modal-section-title-pc {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 20px;
}
/* ---------- 栅格 ---------- */
.doc-info-modal-grid-2-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
/* 统计区数字卡栅格：根据「是否含评论总数」动态切换 2 列 / 3 列 */
.doc-info-modal-grid-stats-pc {
  display: grid;
  gap: var(--space-2);
}
.doc-info-modal-grid-stats-2-pc {
  grid-template-columns: repeat(2, 1fr);
}
.doc-info-modal-grid-stats-3-pc {
  grid-template-columns: repeat(3, 1fr);
}
/* ---------- Card：通用卡片字段 ---------- */
.doc-info-modal-card-pc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--fill-secondary);
  border-radius: var(--radius-lg-val);
  font-size: var(--fs-caption);
  line-height: 20px;
  min-width: 0;
}
.doc-info-modal-card-span-2-pc {
  grid-column: span 2;
}
.doc-info-modal-card-label-pc {
  flex-shrink: 0;
  min-width: 64px;
  color: var(--text-tertiary);
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-info-modal-card-value-pc {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
}
.doc-info-modal-empty-pc {
  color: var(--text-quaternary);
}
/* ---------- 头像 + 名字 ---------- */
.doc-info-modal-person-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.doc-info-modal-person-avatar-pc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
}
/* ---------- 最近修改人 ---------- */
.doc-info-modal-modifier-pc {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  margin-top: var(--space-0-5);
  line-height: 18px;
}
/* ---------- 关联任务 ---------- */
.doc-info-modal-task-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-info-modal-task-pc .icon-pc {
  color: var(--icon-tertiary);
  flex-shrink: 0;
}
/* 可点击变体：button 重置 + hover 文字加深 + 下划线提示 */
.doc-info-modal-task-clickable-pc {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-primary);
  transition: color 150ms ease;
}
.doc-info-modal-task-clickable-pc:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-info-modal-task-clickable-pc:hover .icon-pc {
  color: var(--brand);
}
/* ---------- 互动统计大数字卡 ---------- */
.doc-info-modal-bigstat-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--bg-weak);
  border-radius: var(--radius-lg-val);
}
.doc-info-modal-bigstat-label-pc {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: 20px;
}
.doc-info-modal-bigstat-value-pc {
  font-size: calc(20px * var(--font-scale));
  font-weight: 600;
  color: var(--text-primary);
  line-height: 28px;
}

/* ========== MentionCandidateList 候选列表样式 ========== */
.mention-candidate-panel {
  width: 100%;
  min-width: 168px;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  /* 对齐 ardot「中小型弹出菜单」规范：12px 圆角 + 0.5px 描边 + 双层柔和浮层阴影 */
  border: 0.5px solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-300);
  box-shadow: var(--wb-shadow-popup-medium);
  overflow: hidden;
  /* stylelint-disable-next-line font-token */
  padding: 8px;
  /* stylelint-disable-next-line font-token */
  padding-top: 4px;
  background-color: var(--bg-default);
}
.mention-candidate-list-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* 行间距统一由这里的 gap 控制，避免下面 item 自身纵向 padding 与相邻行叠加成两倍间距 */
  gap: var(--space-1);
}
.mention-candidate-empty {
  text-align: center;
  color: var(--text-quaternary);
  font-size: var(--fs-small);
  padding: var(--space-2) 0;
}
.mention-candidate-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.mention-candidate-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: mention-spin 0.6s linear infinite;
}
@keyframes mention-spin {
  to {
    transform: rotate(360deg);
  }
}
.mention-candidate-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 固定行高 + 纵向居中，纵向不再用 padding 撑开，避免与相邻行的 padding 叠加 */
  height: 32px;
  padding: 0 var(--space-2);
  cursor: pointer;
  font-size: var(--fs-caption);
  transition: background 0.15s ease;
  border-radius: var(--radius-xl);
}
.mention-candidate-item:last-child {
  margin-bottom: 0;
}
.mention-candidate-item.active {
  background: var(--bg-primary-hover);
}
.mention-candidate-name {
  flex: 1;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-candidate-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
}

/* ========== MentionCandidateList Mobile — 底部抽屉样式 ========== */
/* 遮罩层 */
.mention-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--overlay-light);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.24s ease-out;
}
.mention-mobile-overlay.entered {
  opacity: 1;
}
/* 底部抽屉面板 */
.mention-mobile-sheet {
  position: absolute;
  left: 0;
  right: 0;
  /* 底部安全距离默认走 env；容器自身已避让小白条的 WebView（微信等）由
     use-comment-viewport 覆盖 --mobile-comment-safe-bottom，防双重避让悬空 */
  bottom: var(--mobile-comment-safe-bottom, env(safe-area-inset-bottom, 0px));
  /* 与评论面板保持一致：优先使用 JS 写入的 --mobile-comment-vh，未设置时回退到 1vh */
  height: calc(var(--mobile-comment-vh, 1vh) * 92 - var(--mobile-comment-safe-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 仅顶部圆角 */
  border-radius: 32px 32px 0 0;
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors */
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 面板整体禁触摸默认行为，拖拽不会沿滚动链透传给背景页面；列表区单独恢复 pan-y */
  touch-action: none;
  transform: translateY(100%);
  transition: transform 0.24s ease-out;
}
.mention-mobile-sheet.entered {
  transform: translateY(0);
}
/* 顶部拖拽指示条 */
.mention-mobile-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.mention-mobile-handle::after {
  content: "";
  width: 36px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}
/* 头部导航栏 */
.mention-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.mention-mobile-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: calc(22px * var(--font-scale));
  font-weight: 300;
  cursor: pointer;
  border-radius: var(--radius-md-val);
  transition: background 0.15s ease;
}
.mention-mobile-back:active {
  background: var(--fill-tertiary);
}
.mention-mobile-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-primary);
}
.mention-mobile-confirm {
  padding: var(--space-2) 0;
  border: none;
  background: none;
  color: var(--brand-primary);
  font-size: calc(15px * var(--font-scale));
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.mention-mobile-confirm:active {
  opacity: 0.7;
}
.mention-mobile-confirm:disabled {
  color: var(--text-disable);
  cursor: not-allowed;
}
/* 搜索框 */
.mention-mobile-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-4);
  padding: 0 var(--space-4);
  height: 44px;
  border-radius: var(--radius-12px-val);
  background: var(--bg-medium);
  flex-shrink: 0;
}
.mention-mobile-search-icon {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.mention-mobile-search-input {
  flex: 1;
  height: 100%;
  border: none;
  background: none;
  /* 16px !important 防止 iOS Safari / 微信 X5 自动缩放（避免被外层样式覆盖） */
  font-size: var(--fs-16) !important;
  color: var(--text-primary);
  caret-color: var(--brand-primary);
  outline: none;
}
.mention-mobile-search-input::-webkit-input-placeholder {
  color: var(--text-tertiary);
  font-size: var(--fs-16) !important;
}
.mention-mobile-search-input::placeholder {
  color: var(--text-tertiary);
  font-size: var(--fs-16) !important;
}
/* 列表区域 */
.mention-mobile-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-1) 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 列表只放行纵向滚动 */
  touch-action: pan-y;
}
/* 列表项 */
.mention-mobile-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: calc(15px * var(--font-scale));
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mention-mobile-item:active {
  background: var(--fill-secondary);
}
/* 多选 radio（圆形） */
.mention-mobile-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mention-mobile-checkbox.checked {
  background: var(--brand);
  border-color: var(--brand);
}
.mention-mobile-checkbox.checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: solid var(--text-allwhite);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-1px);
}
.mention-mobile-name {
  color: var(--text-primary);
  line-height: 1.5;
}
/* 空状态 & loading */
.mention-mobile-empty,
.mention-mobile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
.mention-mobile-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: mention-mobile-spin 0.6s linear infinite;
}
@keyframes mention-mobile-spin {
  to {
    transform: rotate(360deg);
  }
}

.database-page-pc {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-12) var(--space-20);
  box-sizing: border-box;
  overflow-y: auto;
  /* 分屏（关联预览态）：左右 padding 收窄 */
}
.workspace-page-layout-content-relation-preview-pc .database-page-pc {
  padding-left: 24px;
  padding-right: 24px;
}
/* 无标题模式（关联预览场景）：去掉 padding 让内容填满预览区域 */
.database-page-pc--notitle {
  padding: 0;
}
.database-page-pc__header {
  margin-bottom: var(--space-6);
}
.database-page-pc__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: calc(32px * var(--font-scale));
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  cursor: text;
  outline: none;
  border: none;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.database-page-pc__title::-webkit-scrollbar {
  display: none;
}
.database-page-pc__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/**
 * Database 移动端壳：占满 WorkspacePageLayoutMobile content，
 * 无标题区；外层不滚，交给表格内部横/纵滑。
 */
.database-page-mobile {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background: var(--bg-default);
}
.database-page-mobile__body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.database-page-mobile__body > * {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.comment-float-bubble {
  position: fixed;
  /* stylelint-disable-next-line font-token -- 避让 64px titlebar + 8px 缝隙，与 use-doc-page-layout 的 72px 让位同源，非字号档位 */
  top: 72px;
  right: 0;
  z-index: 24;
  display: inline-flex;
  align-items: center;
  /* 设计稿 2026-09：icon 与计数间距 4px（原「·」字符留白已移除） */
  gap: var(--space-1);
  height: 28px;
  /* stylelint-disable-next-line font-token, design-system/spacing-4px-multiple -- ardot 把手规格：T6/B6 + L8/R6（1px 描边含在 28px 高内），非间距档位场景 */
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--border-primary);
  border-right: none;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  background: var(--bg-tertiary-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- DESIGN_FALLBACK：light 模式镜像设计稿把手投影，宿主 dark 主题注入 --shadow-lv1 时走宿主值 */
  box-shadow: var(--shadow-lv1, 0 6px 12px rgba(0, 0, 0, 0.04));
  color: var(--text-primary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.comment-float-bubble:hover,
.comment-float-bubble:focus-visible {
  background: var(--fill-secondary);
  /* 设计稿无 hover 投影规格：light fallback 与静止态同值，避免 0.04→0.24
     * 的阴影跳变（hover 反馈由背景变化承担）；dark 沿用宿主注入的
     * --shadow-lv2，与静止态 --shadow-lv1 保持层次。 */
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- DESIGN_FALLBACK：同静止态，light 模式镜像设计稿把手投影 */
  box-shadow: var(--shadow-lv2, 0 6px 12px rgba(0, 0, 0, 0.04));
}
.comment-float-bubble:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .comment-float-bubble {
    transition: none;
  }
}
.comment-float-bubble-count {
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
 * WebPage PC — iframe 自身滚动（非外层统一滚动）
 *
 * 外层不做 overflow-y:auto，iframe 保持自身原生滚动。
 * badge / outline 用 position:fixed + host-viewport 坐标（anchorRects）。
 * 评论区作为 flex 子项与内容区并排。
 * ============================================================ */
/* ── web-page-pc 默认布局 ── */
.web-page-pc {
  display: flex;
  flex-direction: row !important;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.web-page-content-loading-mask-pc {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  background: var(--bg-default);
  pointer-events: auto;
}
/* ── 跨页评论跳转「导航中」：鼠标 loading 态 + 禁用评论卡片再次点击 ──
 * 仅禁用评论卡片/角标的点击，不遮挡 iframe 本身内容交互。 */
.web-page-pc.web-page-navigating-pc {
  cursor: wait;
}
.web-page-pc.web-page-navigating-pc .comment-thread-pc,
.web-page-pc.web-page-navigating-pc .comment-thread-draft-pc,
.web-page-pc.web-page-navigating-pc .floating-comment-sidebar,
.web-page-pc.web-page-navigating-pc [data-comment-badge],
.web-page-pc.web-page-navigating-pc [data-dm-badge],
.web-page-pc.web-page-navigating-pc [data-dm-comment-card] {
  cursor: wait;
  /* 禁止导航期间再次点击评论卡片/角标触发新的跳转 */
  pointer-events: none;
}
/* ── 评论面板固定（打开即挤压页面，不悬浮，#2194） ── */
.web-page-pc.web-page-comment-pinned-pc .ai-page-renderer-pc {
  flex: 1;
  min-width: 0;
}
.web-page-pc.web-page-comment-pinned-pc .ai-page-renderer-container-pc {
  height: 100%;
}
.web-page-pc.web-page-comment-pinned-pc .floating-comment-sidebar.open {
  width: 320px;
  flex-shrink: 0;
}
/* ============================================================
 * 窄屏模式（≤768px 内容区）
 *
 * 由 JS 驱动：data-doc-narrow 由 effectiveDocNarrow 控制。
 * block 聚焦模式（角标点击）：评论区覆盖内容区展示悬浮卡片。
 * titlebar 按钮打开（forceWideMode）时 effectiveDocNarrow=false，此段不生效。
 * ============================================================ */
.web-page-pc[data-doc-narrow] {
  height: 100%;
  overflow: hidden;
}
.web-page-pc[data-doc-narrow] .ai-page-renderer-pc {
  flex: 1;
  overflow: hidden;
}
.web-page-pc[data-doc-narrow] .ai-page-renderer-container-pc {
  overflow: auto;
  height: auto;
  min-height: 100%;
}

/**
 * relation-preview.less
 *
 * 关联项内容预览样式：直接渲染节点内容（不嵌 iframe），
 * 填满抽屉 body 区域。
 */
.relation-drawer-preview-pc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--bg-default);
}
.relation-drawer-preview-loading-pc {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
  padding: var(--space-8) 0;
}
/* 无权限遮罩：垂直居中，对齐 ardot empty/lock 组件 */
.relation-drawer-preview-no-permission-pc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--bg-default);
}
.relation-drawer-preview-no-permission-icon-pc {
  width: var(--space-12);
  height: var(--space-12);
}
.relation-drawer-preview-no-permission-title-pc {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
}
.relation-drawer-preview-no-permission-desc-pc {
  font-size: var(--fs-small);
  color: var(--text-quaternary);
  margin-top: calc(-1 * var(--space-2));
}

/**
 * relation-panel.less
 *
 * 关联管理抽屉样式：右侧滑入，不遮挡顶部栏（top 跟 --doc-titlebar-height）。
 * 卡片化关联项，含图标 + 标题 + 所有者 + 查看按钮。
 * 无 overlay：面板不拦截页面其它区域的点击，只能通过收起按钮关闭。
 */
/* ---------- Panel ---------- */
.relation-drawer-panel-pc {
  position: fixed;
  /* stylelint-disable-next-line font-token -- titlebar 固定高度，不随 font-scale 缩放 */
  top: var(--doc-titlebar-height, 64px);
  right: 0;
  bottom: 0;
  z-index: 1500;
  width: 320px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
  border-left: 1px solid var(--divider);
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors -- 左侧偏移面板阴影，token 无等价值 */
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.04);
  animation: relation-drawer-slide-in 200ms ease;
  /* visible：允许左侧 resizer 热区跨出面板边界，便于分屏拖拽 */
  overflow: visible;
  transition: width 200ms ease;
}
/* 选中关联项后宽度由 JS inline style 注入（默认 600px），基类已设 transition */
/* 拖拽中禁用过渡（避免拖拽 lag），禁用文字选中 */
.relation-drawer-panel-resizing-pc {
  transition: none !important;
  -webkit-user-select: none;
          user-select: none;
}
/* 拖拽条：热区跨面板左缘（左右各 --space-4 = 16px，总宽 32px），视觉分隔线仍贴边 */
.relation-drawer-resizer-pc {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--space-4));
  bottom: 0;
  width: calc(var(--space-4) * 2);
  z-index: 20;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.relation-drawer-resizer-pc::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: 50%;
  width: 1px;
  border-radius: var(--radius-full);
  background: transparent;
  transform: translateX(-50%);
  transition: background-color 150ms ease;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
.relation-drawer-resizer-pc:hover::after,
.relation-drawer-resizer-pc:active::after,
.relation-drawer-resizer-pc:focus-visible::after {
  background: var(--border-strong);
}
@keyframes relation-drawer-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* ---------- Header ----------
 * 规格与 ardot「页面标题 PageHeader/常规56」1:1 对齐：
 * - 56px 高、padding 0/16px、左区内 gap 4px
 * - 标题 14px Semibold / 行高 20px，副标题 12px Regular / 行高 17px，文字间无 gap
 * - 操作按钮 32×32、圆角 8px
 */
.relation-drawer-header-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* stylelint-disable-next-line font-token -- 与 titlebar 固定 56px 对齐 */
  height: 56px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.relation-drawer-header-text-pc {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.relation-drawer-title-pc {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: calc(20px * var(--font-scale));
}
.relation-drawer-subtitle-pc {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  line-height: calc(17px * var(--font-scale));
}
/* 收起按钮：32×32 透明无边框，圆角 8px */
.relation-drawer-collapse-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-secondary);
  border-radius: var(--radius-lg-val);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.relation-drawer-collapse-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
/* 去会话/跳转按钮：与收起按钮同款 32×32 / 圆角 8px */
.relation-drawer-manage-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-secondary);
  border-radius: var(--radius-lg-val);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.relation-drawer-manage-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
/* ---------- Body ---------- */
.relation-drawer-body-pc {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  overflow: auto;
  flex: 1;
  min-height: 0;
}
/* 选中态时 body 不需要纵向 padding，让 preview iframe 填满 */
.relation-drawer-body-pc:has(.relation-drawer-preview-pc) {
  padding: 0 var(--space-6);
  /* 预览 HTML 节点时 padding 全部归零，让 iframe 完全撑满 */
}
.relation-drawer-body-pc:has(.relation-drawer-preview-pc).relation-drawer-body-web-preview-pc {
  padding: 0;
}
/* ---------- Loading ---------- */
.relation-drawer-loading-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
.relation-drawer-loading-spin-pc {
  animation: relation-drawer-spin 0.8s linear infinite;
}
@keyframes relation-drawer-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ---------- Error ---------- */
.relation-drawer-error-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
/* ---------- Empty / deleted ---------- */
.relation-drawer-empty-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  color: var(--text-quaternary);
  font-size: var(--fs-body);
}
.relation-drawer-empty-pc .icon-pc {
  color: var(--icon-quaternary);
}
/* ---------- Onboarding（0 关联空态） ---------- */
.relation-drawer-onboarding-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: var(--space-6) var(--space-2);
}
.relation-drawer-onboarding-content-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(var(--space-16) * 4 - var(--space-2));
  gap: var(--space-3);
  text-align: center;
}
.relation-drawer-onboarding-icon-pc {
  display: block;
  flex-shrink: 0;
  width: var(--space-16);
  height: var(--space-16);
}
.relation-drawer-onboarding-text-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-0-5);
}
.relation-drawer-onboarding-title-pc {
  margin: 0;
  letter-spacing: 0;
  font-family: var(--font-family-body);
  color: var(--text-disable);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: calc(var(--fs-16) * 1.5);
}
.relation-drawer-onboarding-desc-pc {
  width: 100%;
  /* DESIGN_FALLBACK: 设计系统未提供 regular 字重 token，按设计稿使用 400。 */
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
  font-family: var(--font-family-body);
  color: var(--text-disable);
  font-size: var(--fs-small);
  line-height: calc(var(--fs-small) * 5 / 3);
}
.relation-drawer-onboarding-btn-pc {
  width: auto;
  flex-shrink: 0;
  align-self: center;
}
/* ---------- List ---------- */
.relation-drawer-list-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* ---------- Item 卡片 ---------- */
.relation-drawer-item-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.relation-drawer-item-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
}
.relation-drawer-item-icon-wrap-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--icon-secondary);
}
.relation-drawer-item-main-pc {
  display: flex;
  flex-direction: column;
  /* stylelint-disable-next-line font-token -- 子像素微间距，无对应 token */
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.relation-drawer-item-title-pc {
  font-size: calc(15px * var(--font-scale));
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: calc(26px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relation-drawer-item-owner-pc {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: calc(23px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 查看按钮：带圆角边框的小方块（参考截图） */
.relation-drawer-view-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.relation-drawer-view-btn-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
  color: var(--icon-primary);
}

/* 移动端文档标题栏（单行操作行）
 * 结构：分类 pill(左) + 分享按钮(右) + 0.5px 分割线
 */
.doc-titlebar-mobile {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  background: var(--bg-default);
  position: relative;
  z-index: 110;
}
/* ===== 单行容器 ===== */
.doc-titlebar-mobile-row {
  flex: 1 0 0;
  align-self: stretch;
  display: flex;
  padding: var(--space-2) var(--space-4);
  align-items: center;
  gap: var(--space-4);
}
.doc-titlebar-mobile-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.doc-titlebar-mobile-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}
/* ===== 分类 pill：白底 + 1px 边框 + 圆角 ===== */
.doc-titlebar-mobile-category-pill {
  display: flex;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl-val);
  height: 36px;
}
.doc-titlebar-mobile-category-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}
.doc-titlebar-mobile-category-text {
  color: var(--text-primary);
  font-family: "PingFang SC";
  font-size: var(--fs-body);
  font-weight: 600;
  font-style: normal;
  text-decoration-line: none;
  line-height: 22px;
}
/* ===== 图标按钮（评论 / 分享，共用） ===== */
.doc-titlebar-mobile-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-mobile-icon-btn:active {
  background: var(--fill-secondary);
}
/* 未读评论红点 */
.doc-titlebar-mobile-unread-dot {
  position: absolute;
  top: calc(-1 * var(--space-0-5));
  right: calc(-1 * var(--space-0-5));
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--error);
  border: 2px solid var(--bg-default);
  pointer-events: none;
}
/* ===== 编辑态顶栏图标按钮（完成 √ / 撤销 / 重做） =====
 * 高度 36px（--space-9）与预览态分类 pill 等高，保证两种状态 header 高度一致，
 * 切换编辑态时文档内容区不发生纵向位移/滚动。
 */
.doc-titlebar-mobile-edit-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.doc-titlebar-mobile-edit-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-mobile-edit-header-btn.is-confirm {
  color: var(--brand-primary);
}
.doc-titlebar-mobile-edit-header-btn:active {
  background: var(--fill-secondary);
}
.doc-titlebar-mobile-edit-header-btn:disabled {
  color: var(--icon-quaternary);
  cursor: not-allowed;
}
/* ===== 分割线 ===== */
.doc-titlebar-mobile-divider {
  width: 100%;
  height: 0.5px;
  background: var(--divider);
  flex-shrink: 0;
}
/* ===== 评论模式（isCommentMode=true，仅 web 节点） =====
 * 左「退出」按钮（arrow-left icon） + 右「查看所有评论(N)」按钮
 * 与 PC 端 DocTitlebarPC 早期 mobileSimplified 块行为一致。
 */
.doc-titlebar-mobile-comment-mode-row {
  /* 复用 .doc-titlebar-mobile-row 布局，仅作语义标识 */
}
.doc-titlebar-mobile-comment-mode-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-titlebar-mobile-comment-mode-exit:active {
  background: var(--fill-secondary);
}
.doc-titlebar-mobile-comment-mode-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: "PingFang SC";
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.doc-titlebar-mobile-comment-mode-view-all:active {
  background: var(--fill-secondary);
}
.doc-titlebar-mobile-comment-mode-view-all:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}

/* 移动端目录半屏弹窗 + 目录树样式 */
/* ===== 遮罩层 =====
 */
.directory-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-default);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: directory-sheet-fade-in 150ms ease;
}
@keyframes directory-sheet-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ===== 底部面板 ===== */
.directory-sheet-panel {
  width: 100%;
  max-width: 100%;
  height: 70vh;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: directory-sheet-slide-up 200ms ease;
  background: var(--bg-secondary-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 仅顶部圆角，设计稿标定 26px，无对应 token（--radius-4xl-val 在默认主题仅 10px，视觉落差过大）；与 mention-candidate-list-mobile / doc-comment-panel-mobile 走同一豁免模式 */
  border-radius: 26px 26px 0px 0px;
}
@keyframes directory-sheet-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ===== 顶部标题栏 ===== */
.directory-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  flex-shrink: 0;
}
.directory-sheet-title {
  font-family: var(--font-family-body);
  font-size: calc(18px * var(--font-scale));
  font-weight: 600;
  color: var(--text-primary);
  line-height: calc(24px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 留出右侧 actions 容器（chat 28 + share 28 + close 28 + 2*8 gap = 100px）的位置 */
  max-width: calc(100% - 116px);
}
/* ===== 头部操作按钮组 =====
 * 与 ardot 设计稿「右」节点对齐：标题栏右侧 3 个 28x28 圆形 icon 按钮。
 * 顺序：chat（添加到任务）→ share（分享）→ close（关闭）。
 */
.directory-sheet-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.directory-sheet-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background-color 150ms ease, color 150ms ease;
}
.directory-sheet-action-btn:active {
  background: var(--fill-tertiary);
  color: var(--icon-secondary);
}
/* ===== 目录树列表区域 ===== */
.directory-sheet-body {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 末尾留白：最后一个节点的 chevron 不被屏幕底部 / home indicator 遮挡，
   * 保证可点击。安全区域在 iPhone 底部栏 / Android 全面屏手势条生效。 */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
}
/* ===== 目录树节点 ===== */
.directory-tree {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.directory-tree-node-wrapper {
  display: flex;
  flex-direction: column;
}
.directory-tree-node {
  display: flex;
  align-items: center;
  height: 40px;
  gap: var(--space-1);
  padding-right: var(--space-5);
  /* 20px，长标题（URL/路径）不贴 panel 右边缘 */
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color 100ms ease;
}
.directory-tree-node:active {
  background: var(--fill-tertiary);
}
.directory-tree-node-active {
  background: var(--fill-secondary);
}
.directory-tree-node-active:active {
  background: var(--fill-secondary);
}
/* ===== 展开折叠箭头 ===== */
.directory-tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--icon-secondary);
  transition: transform 150ms ease;
  /* 图标源资产是朝下的 chevron（`v`），基态需要朝右（`>`）——旋转 -90deg。
   * 展开时旋转到 0deg 恢复朝下形态，用 CSS 变换承接"折叠 → 展开"的翻转。 */
  transform: rotate(-90deg);
}
.directory-tree-chevron-expanded {
  transform: rotate(0deg);
}
/* chevron 位置上的 spinner（expanding 态）——与 PC 端 TreeNode spinner 对齐 */
.directory-tree-chevron-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--icon-quaternary);
  border-top-color: var(--icon-secondary);
  border-radius: 50%;
  animation: directory-tree-spinner-rotate 600ms linear infinite;
}
@keyframes directory-tree-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
.directory-tree-chevron-placeholder {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* ===== 节点图标 ===== */
.directory-tree-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  color: var(--icon-primary);
}
.directory-tree-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  /* 20px，与 .directory-tree-icon-slot 一致 */
  height: var(--space-5);
  /* 不同 size 下 emoji 与 icon 视觉对齐 */
  font-size: var(--fs-body);
  line-height: 16px;
}
/* ===== 节点标题 ===== */
.directory-tree-title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: var(--space-1);
}
/* ===== 子节点容器 ===== */
.directory-tree-children {
  display: flex;
  flex-direction: column;
}

/**
 * SharePanelMobile 样式表（Bottom Sheet 浮窗形态）。
 *
 * 对齐 Ardot `.popup-dialog`（node 6416:666）：
 * - 面板底 `--bg-page`（#F8F8F8 / 暗色 #18191C）
 * - 权限卡 / 分享图标为抬起面 `--wb-color-bg-tertiary-default`
 * - 颜色优先 `--wb-*`；间距继续用 `--space-*` 跟随字号档
 */
/* ===== Bottom Sheet 容器 =====
 *
 * 组件本身不控制外层 sheet 定位（sheet wrapper 在 workspace-page-layout 里
 * 负责底部对齐 + 圆角 + 动画）。本容器只负责内部布局：
 * - flex 纵向排列，高度在 60vh–92vh 之间跟随内容
 * - 超过 max-height 时由自身滚动承接，避免被 sheet 裁掉
 */
.share-panel-mobile-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  /* 固定高度：一级↔二级视图、发布↔协作 tab 切换时弹窗高度恒定，
     内容超出由 page 整体 overflow-y: auto 滚动承接 */
  min-height: 80vh;
  max-height: 80vh;
  background: var(--bg-page);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--wb-radius-600);
  gap: 0;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 底部留白配合 iOS 手势区，视觉留白让步 */
  padding-bottom: calc(50px * var(--font-scale));
}
/* ===== 顶栏 =====
 *
 * Ardot 6416:667：高 44（上 20 + 标题 17/24 Medium + 关 16×16）
 */
.share-panel-mobile-page-header {
  flex-shrink: 0;
  display: flex;
  padding: var(--space-5) var(--space-5) 0;
  justify-content: space-between;
  align-items: center;
}
/* 二级视图：标题靠左紧跟返回按钮（间隔 4px），× 仍贴右 */
.share-panel-mobile-page-header.is-subview {
  justify-content: flex-start;
  gap: var(--wb-spacing-300);
}
.share-panel-mobile-page-header.is-subview .share-panel-mobile-page-close-btn {
  margin-left: auto;
}
.share-panel-mobile-page-close-btn,
.share-panel-mobile-page-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wb-color-text-primary);
  flex-shrink: 0;
}
.share-panel-mobile-page-title {
  color: var(--wb-color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  font-style: normal;
  text-decoration-line: none;
  line-height: calc(24px * var(--font-scale));
}
/* ===== 内容区（可滚动） ===== */
.share-panel-mobile-page-body {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  padding: var(--space-2) var(--space-5);
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.share-panel-mobile-content {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.share-panel-mobile-action-content {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 文档卡底 12 + 这里顶 8 = 稿面文档区与权限卡间距 20 */
  padding-top: var(--space-2);
  /* 权限卡底到「分享到」：这里 8 + 标题顶 20 = 稿面 28 */
  gap: var(--space-2);
}
/* ===== 通用卡片 header =====
 *
 * 对齐 ardot 选中节点「协作成员」Frame 协作成员(396×164)：
 * - 标题区固定高度 44px（12 上下 padding + 20 行高文字垂直居中）
 * - 标题字号 14px / 行高 20px / 灰色 rgba(0,0,0,0.5)
 */
.share-panel-mobile-card-header {
  height: 44px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
}
.share-panel-mobile-card-title {
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--text-tertiary);
  font-weight: 500;
}
/* ===== DocumentInfoCard =====
 *
 * 对齐 ardot 设计稿「Frame 2147240020」选中节点样式：
 *
 * ardot 实际布局（428×66 外层 + 388×46 内层）：
 * - 外层 padding：8 20 12 20
 * - 内层 HORIZONTAL：icon(32×32) + gap 12px + 文字组
 * - 文字组 VERTICAL：标题 17/24 Regular + gap 2 + 面包屑 14/20 Regular
 */
.share-panel-mobile-doc-info-card {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  padding: var(--space-2) 0 var(--space-3);
  align-items: center;
  gap: var(--space-3);
}
.share-panel-mobile-doc-info-icon-slot {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-panel-mobile-doc-info-kind-icon {
  /* emoji 模式：容器内居中显示 emoji 字符 */
  font-size: calc(20px * var(--font-scale));
  line-height: 1;
}
/* 空间图标容器：复用 PC 端 SpaceIcon 组件，用 CSS 把 16px 放大到 32px */
.share-panel-mobile-doc-info-space-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  /* 覆盖 SpaceIcon PC 端的 16px 固定尺寸，适配移动端 32px 图标槽 */
}
.share-panel-mobile-doc-info-space-icon .space-icon-letter-pc {
  width: 32px;
  height: 32px;
  /* stylelint-disable-next-line font-token */
  font-size: 16px;
  border-radius: var(--radius-xl-val);
}
.share-panel-mobile-doc-info-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.share-panel-mobile-doc-info-title {
  font-size: var(--fs-17);
  font-weight: var(--fw-body);
  color: var(--wb-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: calc(24px * var(--font-scale));
}
.share-panel-mobile-doc-info-breadcrumb {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--wb-color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: calc(20px * var(--font-scale));
}
/* ===== AccessPermissionCard =====
 *
 * 对齐 ardot 选中节点「协作成员」Frame 协作成员(396×164)：
 * - 卡片 padding：0 顶 / 16 左右 / 12 底
 * - 标题区：44px 固定高（由通用 .share-panel-mobile-card-header 控制）
 * - 选项行：48px 高（上下 padding 12 + 24 文字行高），选项间无 gap 无分割线
 * - 选项 padding-left 0（与外层 16px 拼接，对齐 titlebar 左边距）
 */
.share-panel-mobile-access-card {
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  padding: 0 var(--space-4) var(--space-3);
}
.share-panel-mobile-access-list {
  display: flex;
  flex-direction: column;
}
.share-panel-mobile-access-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.share-panel-mobile-access-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.share-panel-mobile-access-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
.share-panel-mobile-access-item-label {
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 500;
  color: var(--text-primary);
}
.share-panel-mobile-access-item-desc {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}
.share-panel-mobile-access-item-check {
  font-size: calc(24px * var(--font-scale));
  line-height: 1;
  color: var(--success);
  flex-shrink: 0;
}
.share-panel-mobile-access-item-selected {
  background: var(--success-bg);
}
/* ===== AccessAndCollaboratorsCard =====
 *
 * 对齐 Ardot 6416:677 白卡片（388×112，圆角 16）：
 * - 抬起面 `--wb-color-bg-tertiary-default`，无外层 padding
 * - 两行各 56 高（padding 16），中间 1px `--wb-color-border-secondary` 分割线（左右 inset 16）
 * - 左标签主色；右摘要 / 箭头 / 人数 `--wb-color-text-secondary`
 * - 头像 24×24，描边跟卡片底，重叠 4px
 */
.share-panel-mobile-access-collab-card {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  padding: var(--space-4);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  background: var(--wb-color-bg-tertiary-default);
  border-radius: var(--wb-radius-400);
  overflow: hidden;
}
.share-panel-mobile-access-collab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 100ms ease;
}
.share-panel-mobile-access-collab-divider {
  display: block;
  width: auto;
  height: 0;
  border: none;
  border-top: var(--border-width-thin) solid var(--wb-color-border-secondary);
}
/* 访问权限行包裹（用于承载 popover 下拉相对定位） */
.share-panel-mobile-access-collab-row-wrap {
  position: relative;
  width: 100%;
}
.share-panel-mobile-access-collab-label {
  font-size: var(--fs-17);
  line-height: calc(24px * var(--font-scale));
  font-weight: var(--fw-body);
  color: var(--wb-color-text-primary);
  flex-shrink: 0;
  margin-right: var(--space-1);
}
.share-panel-mobile-access-collab-summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}
.share-panel-mobile-access-collab-summary-text {
  font-size: var(--fs-17);
  line-height: calc(24px * var(--font-scale));
  font-weight: var(--fw-body);
  color: var(--wb-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-mobile-access-collab-arrow {
  color: var(--wb-color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-17);
  font-weight: var(--fw-body);
  font-style: normal;
  text-decoration-line: none;
  line-height: calc(24px * var(--font-scale));
}
/* 头像堆（行 2 · 协作成员专用） */
.share-panel-mobile-access-collab-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.share-panel-mobile-access-collab-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--wb-radius-full);
  border: var(--border-width-thin) solid var(--wb-color-bg-tertiary-default);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(var(--space-1) * -1);
}
.share-panel-mobile-access-collab-avatar:first-child {
  margin-left: 0;
}
.share-panel-mobile-access-collab-count {
  font-size: var(--fs-17);
  line-height: calc(24px * var(--font-scale));
  font-weight: var(--fw-body);
  color: var(--wb-color-text-secondary);
  flex-shrink: 0;
}
/* ===== CollaboratorsCard =====
 * 独立卡组件（保留向下兼容，SharePanelMobile 已切到 AccessAndCollaboratorsCard）
 */
.share-panel-mobile-collaborators-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-4xl-val);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.share-panel-mobile-collaborators-title {
  font-size: calc(14px * var(--font-scale));
  font-weight: 500;
  color: var(--text-primary);
  flex-shrink: 0;
}
.share-panel-mobile-collaborators-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  justify-content: flex-end;
}
.share-panel-mobile-collaborators-avatars {
  display: flex;
  align-items: center;
}
.share-panel-mobile-collaborators-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-default);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-strong);
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 头像叠放偏移，视觉像素让步 */
  margin-left: calc(var(--space-1-5) * -1);
}
.share-panel-mobile-collaborators-avatar:first-child {
  margin-left: 0;
}
.share-panel-mobile-collaborators-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share-panel-mobile-collaborators-avatar-initial {
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  color: var(--text-allwhite);
}
.share-panel-mobile-collaborators-count {
  font-size: calc(13px * var(--font-scale));
  color: var(--text-secondary);
}
.share-panel-mobile-collaborators-arrow {
  font-size: calc(20px * var(--font-scale));
  color: var(--text-quaternary);
  line-height: 1;
}
/* ===== ShareActionsCard =====
 *
 * 对齐 Ardot 6416:700 / 6565:133：
 * - 不套灰底卡片，直接落在面板 `--bg-page` 上
 * - 标题「分享到」14/20 Regular、`--wb-color-text-secondary`，上 20 下 12
 * - 图标容器 48×48 圆，抬起面 `--wb-color-bg-tertiary-default`（浅色白 / 暗色 #242424）
 * - 图标 24×24，标签 12/16 Regular 主色，项间距 22（Ardot 6565:134）
 */
.share-panel-mobile-actions-card {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background: transparent;
}
.share-panel-mobile-actions-title {
  padding: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-body);
  line-height: calc(20px * var(--font-scale));
  font-weight: var(--fw-body);
  color: var(--wb-color-text-secondary);
  font-family: var(--font-family-body);
}
.share-panel-mobile-actions-row {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding: 0;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- Ardot 6565:134 itemSpacing 22 */
  gap: calc(22px * var(--font-scale));
}
.share-panel-mobile-action-item {
  flex-shrink: 0;
  display: flex;
  width: 60px;
  padding: var(--space-1) 0;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
}
.share-panel-mobile-action-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.share-panel-mobile-action-icon {
  flex-shrink: 0;
  display: flex;
  width: 48px;
  height: 48px;
  padding: var(--space-3);
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: var(--wb-color-bg-tertiary-default);
  border-radius: var(--wb-radius-full);
}
/* 单色图标（复制链接 / 二维码 / 更多）：跟随主色 */
.share-panel-mobile-action-icon-mono {
  color: var(--wb-color-text-primary);
}
.share-panel-mobile-action-label {
  font-size: var(--fs-small);
  line-height: calc(16px * var(--font-scale));
  font-weight: var(--fw-body);
  color: var(--wb-color-text-primary);
  text-align: center;
  white-space: nowrap;
}
/* ===== 生成二维码弹窗 · .popup-dialog =====
 *
 * 对齐设计稿：
 * - overlay：黑色半透明遮罩，flex 底部对齐（移动端习惯从底部弹起）
 * - dialog：白底 + 上圆角，`padding: var(--space-6)`
 * - QR 卡：灰底 `var(--bg-page)` + 圆角 + 内白 QR 底板
 * - 下载按钮：全宽大黑按钮，与设计品牌色 `--brand` 一致
 */
/* .popup-dialog · Ardot node 1217:839
 * 底部升起 · 白底 + 顶部圆角 24 + clipsContent
 * header padding 24 24 0 · qr-card outer padding 12 24 0
 * qr-card 灰底 #F2F2F2 · qr 白板 200×200 · 1px border rgba(0,0,0,0.12)
 * primary-btn 380×56 · brand · Btn Primary Large
 * home-indicator 34 · env(safe-area-inset-bottom)
 */
.popup-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay-default);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.popup-dialog {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: 0;
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 顶部大圆角，无对应 token */
  border-top-left-radius: 24px;
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 顶部大圆角，无对应 token */
  border-top-right-radius: 24px;
  overflow: hidden;
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- sheet 浮层大范围模糊阴影，无对应 shadow token */
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}
@keyframes popup-dialog-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 拖动条 handle（Ardot: 40×6 圆角，默认 visible=false） */
.popup-dialog-handle {
  width: 40px;
  height: 6px;
  margin: var(--space-2) auto 0;
  background: var(--bg-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
/* body: header + qr-card 主体区，垂直 gap 12 */
.popup-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* section: header + qr-card，紧凑 gap 0 */
.popup-dialog-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Header */
.popup-dialog-header {
  padding: var(--space-6) var(--space-6) 0;
}
.popup-dialog-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
}
.popup-dialog-title {
  margin: 0;
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 500;
  color: var(--text-primary);
  font-family: "PingFang SC";
}
.popup-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* QR 卡片 */
.popup-dialog-qr-card-wrapper {
  padding: var(--space-3) var(--space-6) 0;
}
.popup-dialog-qr-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  background: var(--bg-medium);
  border-radius: var(--radius-2xl-val);
  overflow: hidden;
}
.popup-dialog-qr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  width: 100%;
}
.popup-dialog-qr-doc-title {
  font-size: calc(16px * var(--font-scale));
  line-height: calc(22px * var(--font-scale));
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90%;
  padding: 0 var(--space-3);
}
/* QR 白底板：200×200，1px border（Ardot 自定义内容 frame） */
.popup-dialog-qr-image-slot {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-default);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  overflow: hidden;
  box-sizing: border-box;
}
.popup-dialog-qr-image {
  width: 176px;
  height: 176px;
  object-fit: contain;
  display: block;
}
.popup-dialog-qr-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fill-secondary);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: popup-dialog-spin 800ms linear infinite;
}
@keyframes popup-dialog-spin {
  to {
    transform: rotate(360deg);
  }
}
.popup-dialog-qr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  text-align: center;
}
.popup-dialog-qr-error p {
  margin: 0;
  font-size: calc(12px * var(--font-scale));
  line-height: calc(16px * var(--font-scale));
}
.popup-dialog-qr-tip {
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-primary);
  text-align: center;
}
/* 主按钮 · Btn Primary Large */
.popup-dialog-primary-btn-wrapper {
  padding: var(--space-3) var(--space-6) 0;
}
.popup-dialog-primary-btn {
  width: 100%;
  height: 56px;
  padding: var(--space-4) var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--text-allwhite);
  border: none;
  border-radius: var(--radius-full);
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 500;
  font-family: "PingFang SC";
  cursor: pointer;
  transition: background-color 150ms ease;
}
.popup-dialog-primary-btn:hover:not(:disabled) {
  background: var(--brand-hover);
}
.popup-dialog-primary-btn:active:not(:disabled) {
  background: var(--brand-pressed);
}
.popup-dialog-primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* iOS Home Indicator 安全区 */
.popup-dialog-home-indicator {
  height: 34px;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* .collaborators-dialog · Ardot node 2979:3121
 * 底部升起 · 白底 + 顶部圆角 24 · min-height 50vh · max-height 92vh
 * header padding 24 24 0 · subtitle 13/18 · list padding 12 24 0 可滚动
 * row 52 高：avatar 30 + name 17/24 · 右 perm 14/20 + chevron
 * home-indicator 34 · env(safe-area-inset-bottom)
 */
.collaborators-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay-default);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.collaborators-dialog {
  width: 100%;
  max-width: 480px;
  min-height: 60vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 顶部大圆角，无对应 token */
  border-top-left-radius: 24px;
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 顶部大圆角，无对应 token */
  border-top-right-radius: 24px;
  overflow: hidden;
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- sheet 浮层大范围模糊阴影，无对应 shadow token */
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  animation: popup-dialog-in 240ms ease-out;
}
/* Header */
.collaborators-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) 0;
  gap: var(--space-2);
  min-height: 24px;
  flex-shrink: 0;
}
.collaborators-dialog-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}
.collaborators-dialog-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  flex-shrink: 0;
}
.collaborators-dialog-title {
  margin: 0;
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 500;
  color: var(--text-primary);
  font-family: "PingFang SC";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.collaborators-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* Subtitle */
/* 协作成员二级视图容器（内嵌 SharePanelMobile page-body，无独立弹窗外壳） */
.collaborators-list-view {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.collaborators-dialog-subtitle {
  font-size: calc(13px * var(--font-scale));
  line-height: calc(18px * var(--font-scale));
  font-weight: 400;
  color: var(--text-tertiary);
  font-family: "PingFang SC";
  flex-shrink: 0;
}
/* List */
.collaborators-dialog-list {
  flex: 1;
  min-height: 0;
  padding: var(--space-3) 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.collaborators-dialog-empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-quaternary);
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
}
/* Row */
.collaborators-dialog-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple, font-token -- 行 52 高，30 avatar + 10×2 padding，视觉像素让步 */
  padding: var(--space-2) 0;
}
.collaborators-dialog-row-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.collaborators-dialog-row-name-wrap {
  display: flex;
  align-items: center;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- name 与 badge 紧贴，6px 视觉像素让步 */
  gap: var(--space-1-5);
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.collaborators-dialog-row-name {
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 400;
  color: var(--text-primary);
  font-family: "PingFang SC";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.collaborators-dialog-row-badge {
  display: inline-flex;
  align-items: center;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- badge 胶囊两侧 6px padding，视觉像素让步 */
  padding: 0 var(--space-1-5);
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--fill-primary);
  color: var(--text-tertiary);
  font-size: calc(11px * var(--font-scale));
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 无下拉时的静态权限文字（owner / manager 改 manage 等场景） */
.collaborators-dialog-row-perm-static {
  padding: var(--space-0-5) var(--space-1);
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-quaternary);
  font-family: "PingFang SC";
  flex-shrink: 0;
}
/* Row perm 下拉入口 */
.collaborators-dialog-row-perm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-1);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.collaborators-dialog-row-perm:disabled {
  cursor: default;
}
.collaborators-dialog-row-perm-text {
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-tertiary);
  font-family: "PingFang SC";
}
.collaborators-dialog-row-perm-chev {
  color: var(--text-tertiary);
  transition: transform 150ms ease;
}
.collaborators-dialog-row-perm-chev.is-open {
  transform: rotate(180deg);
}
/* Perm dropdown（每行独立浮层）
 * 运行时会被 JS 改为 position: fixed，配合 top/right/bottom inline style
 * 突破 .collaborators-dialog-list (overflow-y: auto) 与 .collaborators-dialog
 * (overflow: hidden) 的裁剪，避免向上翻转时被 header/subtitle 遮挡。
 * z-index > overlay(1000) 保证浮层始终位于对话框之上。
 */
.collaborators-dialog-perm-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1010;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  min-width: 140px;
  background: var(--bg-default);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- 下拉浮层阴影，无对应 shadow token */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* 底部空间不足时向上弹出（JS 通过 rect 判定加 is-drop-up） */
}
.collaborators-dialog-perm-dropdown.is-drop-up {
  top: auto;
  bottom: 100%;
  margin: 0 0 var(--space-1);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- 下拉浮层阴影（向上），无对应 shadow token */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.collaborators-dialog-perm-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-primary);
  text-align: left;
  font-family: "PingFang SC";
  /* danger 选项（无权限）—— 对齐 pc 端 data-danger 红色语义 */
}
.collaborators-dialog-perm-option:hover:not(:disabled) {
  background: var(--fill-secondary);
}
.collaborators-dialog-perm-option.is-selected {
  color: var(--text-primary);
}
.collaborators-dialog-perm-option.is-danger {
  color: var(--error);
}
.collaborators-dialog-perm-option:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
.collaborators-dialog-perm-option:disabled.is-danger {
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- disabled danger 半透明红，无对应 token */
  color: rgba(239, 68, 68, 0.4);
}
/* 超出 MAX_VISIBLE 的提示（对齐 pc 端 share-panel-collaborators-limit-tip） */
.collaborators-dialog-limit-tip {
  padding: var(--space-3) 0 var(--space-1);
  text-align: center;
  font-size: calc(12px * var(--font-scale));
  line-height: calc(16px * var(--font-scale));
  color: var(--text-quaternary);
}
/* iOS Home Indicator 安全区 */
.collaborators-dialog-home-indicator {
  height: 34px;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* SegmentedTabs · Ardot node 2979:2341
 * 容器 46 高 · 4 padding · 10 radius · #F0F0F0
 * tab 38 高 · 8 radius · 16/22
 * 选中：白底 + shadow 0 1 4 rgba(0,0,0,0.06) · Medium 0.9
 * 未选中：透明 · Regular 0.4
 */
.share-panel-mobile-segmented {
  display: flex;
  width: 100%;
  padding: var(--space-1);
  gap: 0;
  background: var(--bg-medium);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- 分段控件外层大圆角，无对应 token */
  border-radius: 16px;
  box-sizing: border-box;
  margin-bottom: var(--space-2);
}
.share-panel-mobile-segmented-item {
  flex: 1;
  min-width: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- 分段控件 tab 圆角，无对应 token */
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.share-panel-mobile-segmented-item.is-active {
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- 分段控件选中态精确投影，无对应 shadow token */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.share-panel-mobile-segmented-item.is-active .share-panel-mobile-segmented-item-label {
  color: var(--text-primary);
  font-weight: 500;
}
.share-panel-mobile-segmented-item-label {
  font-size: calc(16px * var(--font-scale));
  line-height: calc(22px * var(--font-scale));
  font-weight: 400;
  color: var(--text-quaternary);
  font-family: "PingFang SC";
  white-space: nowrap;
  pointer-events: none;
}
/* PublicationCard · 发布为网站
 * 白底卡 · padding 16 · gap 12 · 4xl radius
 * header: 标题 15/22 Medium + desc 13/18 opacity 0.6 · 右侧 iOS switch
 * link 行：灰底胶囊 44 高 · ellipsis · 复制 icon
 * sync 行：info + text · 右侧同步按钮
 */
.share-panel-mobile-publication-card {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
  background: var(--bg-default);
  border-radius: var(--radius-4xl-val);
  box-sizing: border-box;
}
.share-panel-mobile-publication-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.share-panel-mobile-publication-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.share-panel-mobile-publication-title {
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 400;
  color: var(--text-primary);
  font-family: "PingFang SC";
}
.share-panel-mobile-publication-desc {
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  font-weight: 400;
  color: var(--text-tertiary);
  font-family: "PingFang SC";
}
/* iOS 风格 switch —— 52×32，绿色系（对齐设计） */
.share-panel-mobile-publication-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.share-panel-mobile-publication-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.share-panel-mobile-publication-switch input:disabled {
  cursor: not-allowed;
}
.share-panel-mobile-publication-switch.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.share-panel-mobile-publication-switch-track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  border-radius: var(--radius-full);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- iOS switch 关闭态灰色，无对应 token */
  background: rgba(0, 0, 0, 0.15);
  transition: background-color 200ms ease;
}
.share-panel-mobile-publication-switch.is-on .share-panel-mobile-publication-switch-track {
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- iOS 系统绿开关色（#34c759），无对应 token */
  background: #34c759;
}
.share-panel-mobile-publication-switch-thumb {
  position: absolute;
  top: var(--space-0-5);
  left: var(--space-0-5);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors, design-system/no-hardcoded-box-shadow -- iOS switch thumb 阴影，无对应 shadow token */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 200ms ease;
}
.share-panel-mobile-publication-switch.is-on .share-panel-mobile-publication-switch-thumb {
  transform: translateX(20px);
}
/* 链接展示行（点击复制） */
.share-panel-mobile-publication-link {
  flex-shrink: 0;
  display: flex;
  padding: var(--space-2) var(--space-3);
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  background: var(--bg-page);
  border: none;
  border-radius: var(--radius-2xl-val);
  box-sizing: border-box;
  transition: background-color 150ms ease;
}
.share-panel-mobile-publication-link:hover,
.share-panel-mobile-publication-link:active {
  background: var(--fill-primary);
}
.share-panel-mobile-publication-link-text {
  flex: 1;
  min-width: 0;
  font-size: calc(14px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-secondary);
  font-family: "PingFang SC";
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.share-panel-mobile-publication-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* modified 态：同步行 */
.share-panel-mobile-publication-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
}
.share-panel-mobile-publication-sync-info {
  display: inline-flex;
  align-items: center;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- info icon 与文字紧贴，6px 视觉像素让步 */
  gap: var(--space-1-5);
  color: var(--text-tertiary);
  font-size: calc(13px * var(--font-scale));
  line-height: calc(18px * var(--font-scale));
  font-family: "PingFang SC";
}
.share-panel-mobile-publication-sync-btn {
  height: 32px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: calc(13px * var(--font-scale));
  line-height: 1;
  font-family: "PingFang SC";
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}
.share-panel-mobile-publication-sync-btn:hover:not(:disabled) {
  background: var(--fill-secondary);
}
.share-panel-mobile-publication-sync-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ===== AccessPermissionSheet · 访问权限二级弹窗 =====
 *
 * 对齐设计稿规格（Ardot .popup-dialog，428 宽移动端弹窗）：
 * - 遮罩层 + 底部弹窗容器
 * - 顶部拖拽条（40×4 圆条居中）
 * - 标题行「访问权限」（左标题、右关闭图标，行高 44，左右 padding 20）
 * - 内容区（左右 padding 20）
 * - switchable 形态：section 标题 + 选项卡分组
 * - 非 switchable 形态：单选项卡
 * - 底部 Home Indicator 安全区
 * 样式复用/对齐 collaborators-dialog-* 约定。
 */
/* 二级视图内容容器（由 SharePanelMobile 嵌入面板 body 渲染，
   无独立弹窗骨架；header（返回按钮 + 标题）由面板 page-header 承担） */
.access-permission-sheet-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--wb-spacing-500);
}
/* section 分组（switchable 形态） */
.access-permission-sheet-section {
  display: flex;
  flex-direction: column;
  gap: var(--wb-spacing-300);
}
.access-permission-sheet-section-title {
  font-size: calc(14px * var(--font-scale));
  line-height: calc(18px * var(--font-scale));
  font-weight: 400;
  color: var(--wb-color-text-tertiary);
  font-family: var(--font-family-body);
}
/* 选项卡组（白底圆角卡片，浮于浅灰 sheet 底色之上） */
.access-permission-sheet-option-group {
  display: flex;
  flex-direction: column;
  background: var(--wb-color-bg-secondary-default);
  border-radius: var(--wb-radius-400);
  overflow: hidden;
}
/* 选项行 */
.access-permission-sheet-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-spacing-200);
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿 56px 行高，视觉像素让步 */
  min-height: 56px;
  /* 设计稿：行内左右 16px */
  padding: var(--wb-spacing-300) var(--wb-spacing-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 100ms ease;
  text-align: left;
  font-family: var(--font-family-body);
}
.access-permission-sheet-option:hover:not(:disabled),
.access-permission-sheet-option:active:not(:disabled) {
  background: var(--wb-color-bg-secondary-hover-active);
}
.access-permission-sheet-option:disabled {
  cursor: not-allowed;
}
.access-permission-sheet-option:disabled .access-permission-sheet-option-label {
  color: var(--wb-color-text-disable);
}
/* 行间分割线：DOM divider 元素，左侧与文字对齐（缩进 16px），不通栏 */
.access-permission-sheet-divider {
  height: 1px;
  flex-shrink: 0;
  margin-left: var(--wb-spacing-400);
  margin-right: var(--wb-spacing-400);
  background: var(--wb-color-border-primary);
}
.access-permission-sheet-option-label {
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 400;
  color: var(--wb-color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 选中态勾选图标：设计稿为成功绿 */
.access-permission-sheet-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wb-color-text-success-default);
}
/* iOS Home Indicator 安全区 */

/**
 * MoreActionsSheet 样式（ardot 18412:6 一级「更多操作」）。
 *
 * 抽屉壳按内容自适应高度，使用 24px 顶角与 --bg-page；
 * 本文件负责内部：顶栏、无底文件信息、独立「添加到任务」卡、分组卡。
 */
.doc-more-actions-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  max-height: 92vh;
  box-sizing: border-box;
  background: var(--bg-page);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-24px-val) var(--radius-24px-val) 0 0;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿 iOS 手势区 34px */
  padding-bottom: calc(34px * var(--font-scale));
}
/* ===== 顶部（标题 + 关闭，设计稿 padding 20 20 0） ===== */
.doc-more-actions-sheet-header {
  flex-shrink: 0;
  display: flex;
  padding: var(--space-5) var(--space-5) 0 var(--space-5);
  justify-content: space-between;
  align-items: center;
}
.doc-more-actions-sheet-title {
  color: var(--text-primary);
  font-family: "PingFang SC";
  font-size: calc(17px * var(--font-scale));
  font-weight: var(--fw-medium);
  line-height: 24px;
}
.doc-more-actions-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--icon-primary);
  flex-shrink: 0;
}
/* ===== 文件信息（无白底；32 图标槽；路径 0.4 无 token） ===== */
.doc-more-actions-sheet-doc-card {
  height: calc(66px * var(--font-scale));
  box-sizing: border-box;
  margin-top: var(--space-2);
  padding: 0 var(--space-5);
}
.doc-more-actions-sheet-doc-card .share-panel-mobile-doc-info-card {
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-2) 0 var(--space-3);
}
.doc-more-actions-sheet-doc-card .share-panel-mobile-doc-info-icon-slot {
  width: 32px;
  height: 32px;
}
.doc-more-actions-sheet-doc-card .share-panel-mobile-doc-info-icon-slot svg {
  width: 32px;
  height: 32px;
}
.doc-more-actions-sheet-doc-card .share-panel-mobile-doc-info-breadcrumb {
  /* DESIGN_FALLBACK: 设计稿路径 rgba(0,0,0,0.4)，workbuddy 无 0.4 token；--text-tertiary 为 0.5 */
  color: var(--text-tertiary);
}
/* ===== 操作卡：同卡列表，圆角 12、左右 20、项间内缩分割线 ===== */
.doc-more-actions-sheet-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 var(--space-5);
}
.doc-more-actions-sheet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--wb-color-bg-tertiary-default);
  border-radius: var(--radius-12px-val);
  overflow: hidden;
}
.doc-more-actions-sheet-item-divider {
  display: block;
  height: 1px;
  margin: 0 var(--space-4);
  background: var(--wb-color-border-secondary);
  pointer-events: none;
}
.doc-more-actions-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(46px * var(--font-scale));
  padding: var(--space-4);
  box-sizing: border-box;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.doc-more-actions-sheet-item:active {
  background: var(--fill-tertiary);
}
.doc-more-actions-sheet-item-icon {
  flex-shrink: 0;
  color: var(--icon-primary);
}
.doc-more-actions-sheet-item-arrow {
  flex-shrink: 0;
  color: var(--wb-color-text-secondary);
}
/* 关联管理：RelationIconPC 自定义 SVG，缩放到与 Icon size="md"（20px）同规格 */
.doc-more-actions-sheet-item-svg-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--icon-primary);
}
.doc-more-actions-sheet-item-svg-icon > svg {
  width: 20px;
  height: 20px;
}
.doc-more-actions-sheet-item-label {
  flex: 1;
  min-width: 0;
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  font-family: "PingFang SC";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * DocInfoSheet 样式（ardot 18412:110 底部 drawer）。
 *
 * 遮罩 / 顶角 24 / 底色由 workspace-page-layout 的 sub-sheet 骨架承担；
 * 本文件只负责内部：二级标题栏 + 白卡三行（创建者 / 创建时间 / 最近修改）。
 * 设计稿第二张「关联管理」卡片不在本面板实现，入口仍在一级「更多操作」。
 */
.doc-info-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  max-height: 92vh;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿 iOS 手势区 34px */
  padding-bottom: calc(34px * var(--font-scale));
}
.doc-info-sheet-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-5) 0;
}
.doc-info-sheet-title {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: calc(17px * var(--font-scale));
  font-weight: 500;
  line-height: calc(24px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-info-sheet-back,
.doc-info-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.doc-info-sheet-back:active,
.doc-info-sheet-close:active {
  opacity: 0.6;
}
/* 返回箭头与标题保持同色，避免主题下 icon/text 主色存在差异。 */
.doc-info-sheet-back {
  color: var(--text-primary);
}
.doc-info-sheet-close {
  color: var(--icon-primary);
}
/* 设计稿内容区：左右 20、顶 16；白卡 radius 16 */
.doc-info-sheet-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) var(--space-5) 0;
  display: flex;
  flex-direction: column;
  background: var(--wb-color-bg-tertiary-default);
  border-radius: var(--radius-4xl-val);
  overflow: hidden;
}
.doc-info-sheet-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(56px * var(--font-scale));
  box-sizing: border-box;
  padding: var(--space-4);
}
.doc-info-sheet-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 0;
  height: 1px;
  background: var(--wb-color-border-secondary);
}
.doc-info-sheet-item-label {
  color: var(--text-primary);
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: var(--fw-regular);
  font-family: var(--font-family-body);
  flex-shrink: 0;
}
.doc-info-sheet-item-value {
  flex: 1;
  min-width: 0;
  /* DESIGN_FALLBACK: 设计稿右侧文案 rgba(0,0,0,0.6)；workbuddy --text-secondary 为 0.7 */
  color: var(--text-secondary);
  font-size: calc(17px * var(--font-scale));
  line-height: calc(24px * var(--font-scale));
  font-weight: 400;
  font-family: var(--font-family-body);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * RelationPageMobile 样式（ardot 18385:630 popup/关联管理 底部 drawer）。
 *
 * 组件不控制遮罩 / sheet 定位（wrapper 在 workspace-page-layout/mobile.less，
 * 复用 share-overlay + share-sheet 从底滑入），本文件只负责抽屉内部布局。
 * 设计稿关键值：抽屉 556 高、顶角 24、vertical gap 16、底安全区 34；顶栏 padding 20/20/0
 * gap 8；内容区左右 20 + 内部 gap 8；白卡 padding 16/16/12/12、icon↔文字 16、radius 16、
 * 图标 32、标题 17/24 Medium；空态左右合计 40 + figure gap 12；底部主按钮高 56 / 水平 24、
 * radius 16。
 */
.relation-page-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 全局无 border-box reset；底 padding 必须算进 556，否则 sheet overflow:hidden 会裁掉 CTA */
  box-sizing: border-box;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿抽屉 556px */
  height: min(calc(556px * var(--font-scale)), 80dvh);
  max-height: 92vh;
  /* 设计稿抽屉：vertical gap 16 */
  gap: var(--space-4);
  /* 稿面 Home Indicator 34；Android 三键/手势条走宿主 --safe-area-bottom
   * （overlay 为 absolute inset 0，会盖住 layout 的 padding-bottom，必须在抽屉内再避让）。
   * iOS 全面屏优先 env(safe-area-inset-bottom)。取三者最大，避免叠加双倍留白。 */
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿底安全区 34px */
  padding-bottom: max(calc(34px * var(--font-scale)), var(--safe-area-bottom, 0px), env(safe-area-inset-bottom, 0px));
  /* 设计稿抽屉底 #F8F8F8 */
  background: var(--bg-page);
  overflow: hidden;
}
/* ===== 顶栏（返回 + 左对齐标题 + 关闭，ardot 18385:630） ===== */
.relation-page-mobile-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) 0;
  background: var(--bg-page);
}
/* 顶栏返回箭头（ardot 18385:630）：20×20，点击返回上一级菜单 */
.relation-page-mobile-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--icon-primary);
  flex-shrink: 0;
}
.relation-page-mobile-back:active {
  opacity: 0.6;
}
/* 设计稿关闭 20×20，填充 60% 黑 */
.relation-page-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.relation-page-mobile-close:active {
  opacity: 0.6;
}
.relation-page-mobile-close > svg {
  width: 20px;
  height: 20px;
}
.relation-page-mobile-title {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  line-height: calc(24px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== 内容区（滚动容器，设计稿左右 20、与顶栏/底栏 gap 16） ===== */
.relation-page-mobile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  /* 设计稿内容区：左右 20、内部 gap 8（副标题↔卡片 / 卡片↔卡片） */
  gap: var(--space-2);
  padding: 0 var(--space-5);
}
/* ===== 副标题（「已关联 N 个文档」，ardot 15476:460）
   固定行：移出滚动区，与顶栏/底栏一样常驻，列表滚动时不动 ===== */
.relation-page-mobile-subtitle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* 移出 body 后需自补设计稿内容区左右 20px */
  padding: 0 var(--space-5);
  /* 抵消外层 16px gap，把副标题↔列表还原为设计稿 8px */
  margin-bottom: calc(var(--space-2) - var(--space-4));
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿副标题行 32px */
  height: calc(32px * var(--font-scale));
}
.relation-page-mobile-subtitle-text {
  /* DESIGN_FALLBACK: 设计稿次级文字灰阶为 rgba(0,0,0,0.7)，workbuddy 主题
     --text-secondary=0.6（web 体系遗留）不匹配，--icon-secondary=0.7 值精确一致 */
  color: var(--icon-secondary);
  font-family: "PingFang SC";
  font-size: calc(13px * var(--font-scale));
  font-weight: 400;
  line-height: calc(18px * var(--font-scale));
}
/* ===== 独立白卡列表（卡片间距 8，radius 16） ===== */
.relation-page-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.relation-page-mobile-item {
  display: flex;
  align-items: center;
  /* 设计稿 18412:173 卡片：icon↔文字 gap 16 */
  gap: var(--space-4);
  width: 100%;
  min-height: 68px;
  box-sizing: border-box;
  /* 设计稿卡片 padding 12px 16px */
  padding: var(--space-3) var(--space-4);
  background: var(--wb-color-bg-tertiary-default);
  border: none;
  /* workbuddy --radius-4xl-val = 16，对齐设计稿白卡 cornerRadius 16 */
  border-radius: var(--radius-4xl-val);
  text-align: left;
  cursor: pointer;
  font-family: "PingFang SC";
  transition: background-color 100ms ease;
}
.relation-page-mobile-item:active {
  background: var(--fill-tertiary);
}
.relation-page-mobile-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-primary);
}
.relation-page-mobile-item-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  /* 设计稿标题↔副文案 gap 2 */
  gap: var(--space-0-5);
}
.relation-page-mobile-item-title {
  /* 设计稿卡片标题与顶栏「关联管理」同文字样式：17/24 Medium、0.9 */
  color: var(--text-primary);
  font-family: "PingFang SC";
  font-size: calc(17px * var(--font-scale));
  font-weight: var(--fw-regular);
  line-height: calc(24px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relation-page-mobile-item-meta {
  color: var(--text-tertiary);
  font-family: "PingFang SC";
  font-size: calc(12px * var(--font-scale));
  font-weight: 400;
  line-height: calc(16px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===== 加载 / 错误态 ===== */
.relation-page-mobile-loading,
.relation-page-mobile-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-family: "PingFang SC";
  font-size: var(--fs-body);
}
.relation-page-mobile-loading-spin {
  animation: relation-page-mobile-spin 0.8s linear infinite;
}
@keyframes relation-page-mobile-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.relation-page-mobile-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-md-val);
  color: var(--text-link);
  font-family: "PingFang SC";
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
}
.relation-page-mobile-retry:active {
  background: var(--fill-tertiary);
}
/* ===== 空态（64px empty-relation 插画，ardot 18385:630） ===== */
.relation-page-mobile-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 设计稿空态内容水平边距 40px；body 已有 20px，补 20px */
  padding: 0 var(--space-5);
}
.relation-page-mobile-empty-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.relation-page-mobile-empty-figure-icon {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.relation-page-mobile-empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 标题↔描述间距 4px（设计稿 Frame 2119905415 gap:4） */
  gap: var(--space-1);
  text-align: center;
}
.relation-page-mobile-empty-title {
  margin: 0;
  /* DESIGN_FALLBACK: 设计稿 rgba(0,0,0,0.7)，workbuddy 主题 --text-secondary=0.6
     不匹配，--icon-secondary=0.7 值精确一致（同副标题） */
  color: var(--icon-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  line-height: calc(28px * var(--font-scale));
}
.relation-page-mobile-empty-desc {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: calc(22px * var(--font-scale));
}
/* ===== 底部主按钮（列表态 / 空态共用，ardot 18385:630） ===== */
.relation-page-mobile-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  /* 双 class 压过 ButtonPC .btn-lg-pc 的 40 高 / radius-2xl(10) / 14px 字号 */
}
.relation-page-mobile-footer .relation-page-mobile-footer-cta {
  height: calc(56px * var(--font-scale));
  padding: 0 var(--space-6);
  font-size: var(--fs-17);
  font-weight: var(--fw-body);
  line-height: calc(24px * var(--font-scale));
  border-radius: var(--radius-4xl-val);
}

.workspace-page-layout-pc {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-default);
  /* 让全文版本历史侧边栏的 absolute 以本容器为定位参照。否则会冒泡到
   * 更外层 positioned 祖先，让位 padding 也无法稳定作用在正文区。 */
  position: relative;
}
.workspace-page-layout-content-pc {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  /* 让位过渡：全文版本历史侧栏宽度变化时，正文区平滑过渡，避免抖动。
   * 与 vh-sidebar-slide-in 200ms 对齐。 */
  transition: padding-right 200ms ease;
}
/* 预览态：关联面板展开查看内容时，内容区右侧让出面板宽度
   宽度由 CSS 变量 --relation-panel-width 控制（拖拽时直接写 DOM，不走 React） */
.workspace-page-layout-content-relation-preview-pc {
  padding-right: var(--relation-panel-width, 600px);
  /* 拖拽时 CSS 变量直接写 DOM，不需要 transition 追赶 */
  transition: none;
}
/* 全文版本历史侧栏打开时，正文区右侧让位（挤压而非覆盖）。
 * 用与共享 shell 同名的 --vh-sidebar-width，保证「侧栏宽度」与「让位
 * padding」始终一致；侧栏宽度变更时只需改 sidebar 一处。
 *
 * 这里只允许版本历史一个来源，且必须是单选择器：
 *  - 评论面板的让位走 SDK 编辑器内 padding（见 use-doc-page-layout.ts 的布局
 *    不变量）。把评论让位挪到本壳层，会让 padding 反过来改写窄屏判定观测到的
 *    宽度，与 ResizeObserver 构成反馈死循环。
 *  - 逗号选择器列表里一旦出现 :has()，内核不支持时整条规则（含版本历史让位）
 *    会被一起丢弃，版本历史让位静默失效。 */
.workspace-page-layout-history-open-pc .workspace-page-layout-content-pc {
  padding-right: var(--vh-sidebar-width, 320px);
}

.mobile-mini-program-float-button-wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--space-4) calc(env(safe-area-inset-bottom, 0px) + 40px);
  pointer-events: none;
}
.mobile-mini-program-float-button-inner {
  position: relative;
  pointer-events: auto;
}
.mobile-mini-program-float-button {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: var(--space-2) var(--space-5);
  background: var(--button-floating-bg);
  color: var(--bg-default);
  border: none;
  border-radius: 14px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.mobile-mini-program-float-button:active {
  opacity: 0.9;
}
.mobile-mini-program-float-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.mobile-mini-program-float-button__logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.mobile-mini-program-float-button__label {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 22px;
  color: var(--text-primary-invert);
  white-space: nowrap;
}
.mobile-mini-program-float-button__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}
.mobile-mini-program-float-button__close {
  position: absolute;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple */
  top: calc(-6px * var(--font-scale));
  /* stylelint-disable-next-line design-system/spacing-4px-multiple */
  right: calc(-6px * var(--font-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  /* DESIGN_FALLBACK: 关闭按钮固定色，无对应语义 Token */
  background: #a3a3a3;
  color: var(--bg-default);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.mobile-mini-program-float-button__close:active {
  opacity: 0.85;
}
.mobile-mini-program-float-button__close-icon {
  width: 12px;
  height: 12px;
}

/*
 * WorkspacePageLayoutMobile 样式
 *
 * 移动端布局与 pc.less 保持外壳结构一致（垂直 flex），但移除 PC 端特有能力：
 * - 无全文版本历史侧栏 → 不需要 `.workspace-page-layout-history-open-*` 让位
 * - 无关联面板 → 不需要 `.workspace-page-layout-content-relation-preview-*`
 * - 无宽度过渡动画 → 不需要 transition:padding-right
 *
 * 移动端专属考虑：
 * - 移动端主容器高度用 100dvh 而非 100%，避免 iOS Safari 地址栏折叠时视口高度
 *   跳变导致内容抖动（100% 依赖父容器高度传递，dvh 直接读实时视口）。
 */
.workspace-page-layout-mobile {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-default);
  position: relative;
  /* 底部安全区：整体页面抬高，滚动过程中内容底部也不被系统手势条 / 操作栏覆盖。
   * 容器为 height:100% 且全局无 border-box reset，需补 box-sizing 让 padding
   * 压缩内容区而非撑破高度。 */
  box-sizing: border-box;
  padding-bottom: var(--safe-area-bottom, 0px);
}
/* 编辑态：底部工具栏（MobileBottomToolbar）需贴底定位，键盘弹起时若再叠加
 * 底部安全区 padding，部分安卓机会把工具栏顶偏（定位偏上），故编辑态取消安全区避让。 */
.workspace-page-layout-mobile-editing {
  padding-bottom: 0;
}
.workspace-page-layout-content-mobile {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  overflow: hidden;
  color: var(--text-primary);
}
/* ===== 移动端分享面板：覆盖式浮窗 =====
 * z-index 说明：
 * - DocTitlebarMobile z-index=110（防止正文滚动时被遮盖）
 * - DirectorySheet z-index=10000（移动端底部抽屉）
 * - 分享浮窗需要盖过 titlebar，用 9999（略低于 DirectorySheet，因为二者互斥）
 */
.workspace-page-layout-mobile-share-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: var(--overlay-default);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: workspace-mobile-share-overlay-fade-in 200ms ease;
}
.workspace-page-layout-mobile-share-sheet {
  background: var(--bg-weak);
  border-radius: var(--radius-3xl-val) var(--radius-3xl-val) 0 0;
  max-height: 75vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-3);
  animation: workspace-mobile-share-sheet-slide-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes workspace-mobile-share-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes workspace-mobile-share-sheet-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* 操作抽屉统一使用 --bg-page 与 24px 顶角。 */
.workspace-page-layout-mobile-relation-sheet,
.workspace-page-layout-mobile-doc-info-sheet,
.workspace-page-layout-mobile-more-actions-sheet {
  background: var(--bg-page);
  border-radius: var(--radius-24px-val) var(--radius-24px-val) 0 0;
}
.workspace-page-layout-mobile-more-actions-sheet {
  max-height: 92vh;
}

/* ====== 无权限异常页的内联申请卡片 ======
 *
 * 视觉真相源：workspace-exception 无权限态设计稿
 *   - 白色卡片居中，宽 400，圆角 16，阴影 level-2
 *   - 内部 vertical auto-layout，gap 20
 *   - 文件区（图标 40 + 文件名 h1 + 所有者 caption）
 *   - 「申请 [xxx 权限] ⌄」（inline flex，gap 4）
 *   - 灰底 textarea（radius 12，padding 12，min-height 120）
 *   - 常用语 caption row（灰字 + 填入链接）
 *   - 两个全宽按钮（h44）：主按钮胶囊黑底 + 次按钮描边
 *
 * checking / pending 复用同一卡片壳，仅内部内容切换（避免闪现空白）。
 */
.permission-request-card-pc {
  width: 100%;
  max-width: 400px;
  /* PC 端锁定最小高度 518：
   *
   * form 态（申请）与 pending 态（已申请）在同一卡片壳内切换文案时，
   * 内容自然高度会有差异（form 有 role 行 + textarea + 常用语；pending 只
   * 有状态行 + 只读 textarea，没常用语）。把卡片锁定成 min-height 518，
   * 配合下方 `.permission-request-card-actions-pc { margin-top: auto }` 把
   * 按钮组顶到底部，中间冗余空间自动填在按钮上方，让两态切换时按钮位置
   * 恒定（视觉不跳动），也保证 checking 短暂 loading 时卡片尺寸稳定。
   *
   * 用 min-height 而不是 height：极端超长文件名（word-break: break-all）
   * 触发多行时仍可撑高，不截断。
   *
   * 移动端也保留 min-height:518 与 actions margin-top:auto，保证 form/pending
   * 切换按钮位置一致；移动端视觉差异只做 padding / 阴影 / 背景收敛。
   */
  min-height: 518px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  padding: var(--space-9, 36px);
  /* DESIGN_FALLBACK: 设计稿卡片圆角 16px，token scale 最大 --radius-2xl-val=10px 不匹配 */
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius */
  border-radius: 16px;
  background: var(--bg-default);
  /* 阴影强度对齐设计稿：单独 `--wb-shadow-popup-large`（0.06~0.08 强度、y=24
   * 定向向下）在白底页面里几乎不可见，卡片"浮起感"丢失。
   *
   * 叠加 `--wb-shadow-dialog`（0 8px 48px -4px @0.12）：
   *   - y 偏移更小（8 vs 24）→ 顶部与两侧也能看到阴影带，贴合需求图的
   *     四周弥散观感
   *   - 强度更浓（@0.12 vs @0.08）→ 白底页面上可见度足够
   *   - 语义：popup-large 表征"页面大浮层"，dialog 表征"模态强度"，
   *     当前卡片位于全屏无权限异常页居中，两档语义均命中
   *
   * lint 规则 `design-system/no-hardcoded-box-shadow` 只校验起始 token 前缀，
   * 允许多个 `var(--wb-shadow-*)` 逗号叠加，无需 disable。 */
  box-shadow: var(--wb-shadow-popup-large), var(--wb-shadow-dialog);
  text-align: left;
}
/* ============ 文件区（图标 + 文件名 + 所有者） ============ */
.permission-request-card-file-pc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}
.permission-request-card-file-icon-pc {
  color: var(--icon-primary);
  flex-shrink: 0;
}
.permission-request-card-title-pc {
  margin: 0;
  color: var(--text-primary);
  font-size: calc(20px * var(--font-scale, 1));
  font-weight: var(--fw-medium, 500);
  line-height: 28px;
  word-break: break-all;
}
.permission-request-card-owner-pc {
  margin: calc(-1 * var(--space-1, -4px)) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  line-height: 20px;
}
/* ============ 「申请 [权限种类] ⌄」 ============ */
.permission-request-card-role-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--fs-body);
  line-height: 22px;
  color: var(--text-primary);
}
.permission-request-card-role-label-pc {
  color: var(--text-primary);
}
.permission-request-card-role-trigger-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5, 2px);
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold, 600);
  line-height: 22px;
  cursor: pointer;
  transition: color 150ms ease;
}
.permission-request-card-role-trigger-pc:hover {
  color: var(--brand-hover);
}
.permission-request-card-role-trigger-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.permission-request-card-role-value-pc {
  white-space: nowrap;
}
.permission-request-card-role-arrow-pc {
  flex-shrink: 0;
  color: var(--icon-secondary);
}
.permission-request-card-role-menu-pc {
  z-index: 11001;
  width: auto;
  min-width: 112px;
  padding: var(--space-1);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  box-shadow: var(--wb-shadow-dialog);
}
.permission-request-card-role-menu-pc [data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md-val);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 20px;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.permission-request-card-role-menu-pc [data-slot="dropdown-menu-item"]:hover,
.permission-request-card-role-menu-pc [data-slot="dropdown-menu-item"]:focus {
  background: var(--fill-secondary);
  outline: none;
}
.permission-request-card-role-menu-pc [data-slot="dropdown-menu-item"][data-selected] {
  font-weight: 500;
}
/* ============ 申请理由 textarea ============ */
.permission-request-card-textarea-pc {
  width: 100%;
  min-height: 94px;
  margin-top: calc(-1 * var(--space-3, -12px));
  padding: var(--space-2) var(--space-2);
  /* PC 端设计稿：白底 + 1px 灰色描边（focus 变主色描边）。
   * 移动端在 media query 里覆盖为灰底无描边 + 更大圆角。 */
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 20px;
  resize: none;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.permission-request-card-textarea-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.permission-request-card-textarea-pc::placeholder {
  color: var(--text-quaternary);
}
.permission-request-card-textarea-pc:focus {
  background: var(--bg-default);
  border-color: var(--border-focus);
}
.permission-request-card-textarea-pc:disabled {
  cursor: not-allowed;
}
/* ============ 常用语 ============ */
.permission-request-card-quick-pc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--fs-small);
  line-height: 20px;
  margin-top: calc(-1 * var(--space-3, -12px));
}
.permission-request-card-quick-label-pc {
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.permission-request-card-quick-action-pc {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 20px;
  /* 长文案换行时保持左对齐，且「填入」跟在正文之后而不是另起一行 */
  text-align: left;
  cursor: pointer;
}
.permission-request-card-quick-action-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.permission-request-card-quick-action-pc:hover:not(:disabled) .permission-request-card-quick-phrase-pc {
  color: var(--brand);
  text-decoration: underline;
}
.permission-request-card-quick-action-pc:hover:not(:disabled) .permission-request-card-quick-fill-pc {
  color: var(--brand-hover);
}
.permission-request-card-quick-phrase-pc {
  color: var(--text-tertiary);
  line-height: 20px;
  transition: color 150ms ease;
}
.permission-request-card-quick-fill-pc {
  margin-left: var(--space-1);
  color: var(--text-primary);
  font-weight: var(--fw-semibold, 600);
  line-height: 20px;
  white-space: nowrap;
  transition: color 150ms ease;
}
/* ============ pending 分支占位（对齐 form 常用语行高度） ============ *
 *
 * form 分支的「常用语」行 line-height:20（caption）；pending 分支不渲染这一行时
 * 少了 20px 高度 + 1 个 flex gap(20)。这里给出一个 height:20 的隐形占位子项，
 * 由父级 flex 的 gap 自动补上前后 20，总差异 = 20 + 20 = 40，与 form 完全对齐。
 *
 * 用 height 而非 min-height：占位纯粹是"补 form 缺失的一行"，本身不需要撑高。
 * pointer-events:none 防止意外抢焦点；aria-hidden 在 tsx 里已设。
 */
.permission-request-card-spacer-pc {
  height: 20px;
  pointer-events: none;
  visibility: hidden;
  margin-top: calc(-1 * var(--space-3, -12px));
}
/* ============ 按钮区（全宽） ============ */
.permission-request-card-actions-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  /* 与卡片 min-height:518 协同：把按钮组顶到卡片底部，中间富余空间
   * 自动落在按钮上方，实现「form ↔ pending 切换按钮位置不跳动」。
   * PC 与移动端都生效（移动端 media query 不 override）。 */
  margin-top: auto;
}
.permission-request-card-btn-primary-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-xl-val);
  background: var(--button-primary-bg);
  color: var(--text-primary-invert);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold, 600);
  line-height: 22px;
  cursor: pointer;
  transition: background-color 150ms ease;
  /* 只对真实鼠标设备启用 hover 反馈，避免触屏 tap 后残留 hover 色
   * （移动 Safari / Chrome 的 sticky :hover 问题：tap 后 :hover 直到点击别处
   * 才清除，导致「申请权限」/「再次申请」按钮点完颜色不复原）。
   * 同仓库 drive-page 已采用 `hover: hover and pointer: fine` 组合作为约定。 */
}
@media (hover: hover) and (pointer: fine) {
  .permission-request-card-btn-primary-pc:hover {
    background: var(--button-primary-bg-hover);
  }
}
.permission-request-card-btn-primary-pc:active {
  background: var(--button-primary-bg-hover);
}
.permission-request-card-btn-primary-pc:disabled {
  background: var(--button-primary-bg-disabled);
  cursor: not-allowed;
}
.permission-request-card-btn-secondary-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width-thin) solid var(--border-primary, var(--border-default));
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold, 600);
  line-height: 22px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
  /* 同 primary 按钮：只对真实鼠标设备启用 hover 反馈，规避移动端 sticky :hover。 */
}
@media (hover: hover) and (pointer: fine) {
  .permission-request-card-btn-secondary-pc:hover {
    background: var(--fill-secondary);
    border-color: var(--border-strong);
  }
}
.permission-request-card-btn-secondary-pc:active {
  background: var(--fill-tertiary);
}
.permission-request-card-btn-secondary-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* ============ pending 状态行「⏰ 已发送申请，等待审批」 ============ *
 *
 * 与 form 分支的「申请 [xxx 权限] ⌄」占同一位置（第二栏），保证 pending ↔ form
 * 切换时下方 textarea / 按钮不跳动；文本用 tertiary 色，图标同色。
 */
.permission-request-card-status-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--text-tertiary);
  font-size: var(--fs-body);
  line-height: 22px;
}
.permission-request-card-status-icon-pc {
  flex-shrink: 0;
  color: var(--icon-secondary);
}
/* ============ 移动端响应式 ============ *
 * 移动端把卡片撑到接近视口宽度，同时收紧内边距与按钮高度；
 * 视觉参考「mobile 需求图」：白底、边距 16、按钮 44、按钮全宽。
 *
 * 注意：移动端**继承** PC 端的 `min-height:518` 与
 * `.permission-request-card-actions-pc { margin-top:auto }`，让 form / pending
 * 切换按钮位置也恒定不跳动（等价于 PC 效果）。之所以不 override 回 auto，是因为
 * pending 态没有常用语一行，若不锁高按钮会上移一行，造成小屏体验割裂。
 */
@media (max-width: 640px) {
  .permission-request-card-pc {
    max-width: 356px;
    min-height: 470px;
    padding: 0;
    box-shadow: none;
    background: transparent;
  }
  /* 移动端所有者行字号放大到 16px */
  .permission-request-card-owner-pc {
    font-size: var(--fs-16);
  }
  /* 移动端 textarea：灰底无描边、更大圆角（视觉参考 mobile 需求图）。
   * focus 也保持灰底 + 无描边，避免焦点时闪成白底描边（PC 才需要）。 */
  .permission-request-card-textarea-pc {
    border-color: transparent;
    background: var(--fill-secondary);
    /* DESIGN_FALLBACK: 移动端 textarea 设计圆角 12px，token scale 无 12px */
    /* stylelint-disable-next-line design-system/no-hardcoded-border-radius */
    border-radius: 12px;
    margin-top: calc(-1 * var(--space-2, -8px));
    font-size: var(--fs-16);
    padding: var(--space-3) var(--space-4);
  }
  .permission-request-card-textarea-pc:focus {
    background: var(--fill-secondary);
    border-color: transparent;
  }
  .permission-request-card-quick-pc {
    margin-top: calc(-1 * var(--space-2, -8px));
    font-size: var(--fs-body);
  }
  .permission-request-card-spacer-pc {
    margin-top: calc(-1 * var(--space-2, -8px));
  }
  .permission-request-card-actions-pc {
    margin-top: var(--space-5, 20px);
  }
  /* 移动端按钮：更大圆角（视觉参考 mobile 需求图）。 */
  .permission-request-card-btn-primary-pc,
  .permission-request-card-btn-secondary-pc {
    height: 56px;
    /* DESIGN_FALLBACK: 移动端按钮设计圆角 16px，token scale 最大 --radius-2xl-val=10px 不匹配 */
    /* stylelint-disable-next-line design-system/no-hardcoded-border-radius */
    border-radius: 16px;
  }
}

/* ====== 空间 / 文档访问异常全屏页 ======
 *
 * 无权限异常态用卡片式内联申请表单（PermissionRequestCardPC），
 * 视觉真相源见组件自身 .less；本文件只维护:
 *   - 页面外壳 / 顶栏 / body 居中容器
 *   - 其他异常态（delete / security / unsupported）的 empty 状态排版
 *   - 底部「返回 WorkBuddy 资料库」返回入口
 *   - 组织权限异常态的说明与主按钮
 *
 * 垂直节奏用显式 margin 而非容器 gap：设计稿里「标题 + 说明」是一个 gap 2 的
 * 子 frame，与外层 gap 12 不是同一档，用单一 gap 无法同时表达两档间距。
 */
.workspace-exception-page-pc {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background-color: var(--wb-color-bg-secondary-default);
}
/* 联邦（WorkBuddy 客户端内嵌）下的定位降级
 *
 * 联邦模块与宿主共享同一个 document，fixed 的包含块是宿主视口，异常页会铺满
 * 整个客户端（连左侧任务栏一起盖住）；联邦下它原本经 PortalProvider 落在
 * `.mindx-federation-portal-root`（挂于 body），同样逃出了资料库挂载区域。
 * 此时页面改挂到**本实例**的 `.mindx-federation-app`（见 pc.tsx 里由 anchor
 * closest 解析出的 federationRoot portal），该容器已是 position: relative，
 * absolute 正好只覆盖资料库挂载区域。inset / z-index 沿用上面的默认值。
 */
.workspace-exception-page-pc[data-embedded="federation"] {
  position: absolute;
}
/* 垂直居中用「子项 auto margin」而不是 `align-items: center`：
 *
 * 本容器是 `overflow: auto` 的滚动容器。若用 `align-items: center`，当内容
 * （permission-request-card-pc 的 min-height:518 + padding）高于容器时，溢出会
 * **同时发生在上下两侧**，而 flex 居中造成的「上溢出」不计入 scrollable overflow
 * region —— 滚动条滚到最顶部，卡片顶部（文件图标 / 文件名）依然被裁掉且无法触达。
 *
 * `margin-block: auto` 在空间富余时等效垂直居中；空间不足时 auto margin 自动
 * 解析为 0，退化成 flex-start 对齐，顶部内容完整可滚。配合 `align-items: flex-start`
 * 避免子项被默认 stretch 拉伸。
 */
.workspace-exception-body-pc {
  flex: 1;
  /* 关键：min-height:0 让 flex item 可以真正被压缩到低于内容高度，
   * 否则 flex 默认 min-height:auto 会把本容器撑到内容高度，
   * overflow 落到外层 fixed 容器上，滚动条位置与裁切表现都不对。 */
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: var(--space-6, 24px);
}
.workspace-exception-body-pc > * {
  margin-block: auto;
  /* 内容比容器高时禁止再被压缩，交给容器滚动 */
  flex-shrink: 0;
}
.workspace-exception-content-pc {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.workspace-exception-icon-pc {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* icon → 标题：设计稿 12 */
  margin-bottom: var(--space-3, 12px);
  color: var(--icon-tertiary);
}
/* 无权限（org 侧）用 48px 空态插图（empty-lock 自带 50% group 透明度），
 * 父级传 --text-disable 后有效浓度与设计稿 text/disable × 0.5 一致。
 * 其余异常态仍是 24 网格描边图标，保持 --icon-tertiary 不变。
 * 注：permission-denied 场景已改走 PermissionRequestCardPC 卡片，
 * 此处只影响 org-permission-denied。
 */
.workspace-exception-page-pc[data-exception-kind="org-permission-denied"] .workspace-exception-icon-pc {
  color: var(--text-disable);
}
.workspace-exception-title-pc {
  /* 标题 → 说明：设计稿 2 */
  margin: 0 0 var(--space-0-5);
  color: var(--text-disable);
  font-family: var(--font-family-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: calc(var(--fs-16) * 1.5);
  letter-spacing: 0;
}
.workspace-exception-desc-pc {
  /* 说明 → 按钮：设计稿 12 */
  margin: 0 0 var(--space-3, 12px);
  color: var(--text-disable);
  font-family: var(--font-family-body);
  font-size: var(--fs-small);
  /* DESIGN_FALLBACK: 字重 scale 无 regular token，使用设计稿常规字重。 */
  font-weight: 400;
  line-height: calc(var(--fs-small) * 5 / 3);
  letter-spacing: 0;
}
/* 组织权限异常态的说明：两行文案（企业名 + 当前账号），
 * 关键词（文档所属企业名、当前登录账号）用 <strong> 加粗到 text/secondary，
 * 与设计稿的深浅对比保持一致。 */
.workspace-exception-org-desc-pc strong {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}
/* 普通兜底的返回 / 切换账号按钮统一复用 ButtonPC tertiary md。 */
.workspace-exception-action-pc {
  font-family: var(--font-family-body);
  line-height: 22px;
  letter-spacing: 0;
}
/* 移动端普通兜底：96px 图标与独立的标题、说明、操作节奏。 */
.workspace-exception-page-pc.is-mobile .workspace-exception-content-pc .workspace-exception-icon-pc {
  width: calc(var(--space-12) * 2);
  height: calc(var(--space-12) * 2);
  flex-shrink: 0;
}
.workspace-exception-page-pc.is-mobile .workspace-exception-content-pc .workspace-exception-icon-pc > svg {
  width: 100%;
  height: 100%;
}
.workspace-exception-page-pc.is-mobile .workspace-exception-content-pc .workspace-exception-title-pc {
  margin-bottom: var(--space-2);
  font-size: var(--fs-17);
  /* DESIGN_FALLBACK: 字重 scale 无 regular token，使用移动端常规字重。 */
  font-weight: 400;
  line-height: var(--space-6);
}
.workspace-exception-page-pc.is-mobile .workspace-exception-content-pc .workspace-exception-desc-pc {
  margin-bottom: var(--space-8);
  font-size: var(--fs-body);
  line-height: var(--space-5);
}
.workspace-exception-page-pc.is-mobile .workspace-exception-content-pc .workspace-exception-action-pc {
  height: var(--space-11);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--space-5);
}
/* ============ 底部「返回 WorkBuddy 资料库」返回入口 ============ *
 * 仅无权限异常态渲染（顶栏已隐藏返回首页按钮，需要底部兜底）。
 * 视觉为安静的次要链接：小字、tertiary，hover 露出品牌色。
 */
.workspace-exception-footer-pc {
  display: flex;
  justify-content: center;
  /* 矮屏时高度压缩只由中间滚动区（body）承担，返回入口不被挤压变形 */
  flex-shrink: 0;
  padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-8, 32px);
}
.workspace-exception-back-link-pc {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-caption);
  line-height: 20px;
  cursor: pointer;
  transition: color 150ms ease;
}
.workspace-exception-back-link-pc:hover {
  color: var(--text-primary);
}
/* UserAccountMenuPC 面板 z-index 抬升（**仅**非联邦 / 独立页面形态）
 *
 * 作用域限定：这条抬升只对「异常页走 body portal」的独立页面 / 旧 iframe 形态有意义。
 * 此时 `.workspace-exception-page-pc` 通过 `createPortal` 挂到 body 且 z-index:10000
 * （见文件顶部 fixed 全屏覆盖），与 UserAccountMenuPC 面板（同样 portal 到 body，默认
 * z-index:2300）互为 body 直系兄弟。默认值下面板会被异常页整块盖住，导致点击命中的
 * 事件 target 落在异常页而非面板 —— usePopoverDismiss 判定"外部点击"直接关闭，
 * 二级菜单（外观切换、退出登录）不可用。
 *
 * 联邦（WorkBuddy 客户端内嵌）下本规则不参与堆叠：异常页挂在本实例的
 * `.mindx-federation-app`（absolute），面板经 PortalProvider 落在
 * `.mindx-federation-portal-root`，两者分属不同容器、不是兄弟节点，比较 z-index 无意义。
 * 而且联邦即 WorkBuddy 客户端内，`pc.tsx` 的 `!isInWorkbuddyDesktop()` 已使该面板
 * 根本不渲染，这里保留声明只是为了独立页面形态。
 *
 * 只在异常页场景把面板 z-index 抬到 10001，正好压过 10000；不动组件默认值，
 * 避免影响其它页面（如 workspace-page-layout / wb-home-page）与 apply-dialog 等
 * 11000+ 层级弹窗的既有堆叠关系。
 */
.workspace-exception-account-menu-panel-pc {
  z-index: 10001;
}
/* UserAccountMenuMobile 半屏遮罩 z-index 抬升（同上：异常页 body portal 为 10000）。
 * 遮罩默认 2300，会被异常页整块盖住 → 点不到面板、只能命中异常页。 */
.workspace-exception-account-menu-overlay-mobile {
  z-index: 10001;
}

.workspace-page-loading-pc {
  padding: var(--space-12);
  color: var(--text-tertiary);
}
/**
 * 路由切换中间态全屏遮罩（与 WorkspaceExceptionPagePC 视觉对齐）。
 *
 * 用途：访问 `/d/:nodeId` 类深链时，session 还没反查到 spaceId、open 也还没回来，
 * 状态机派发为 `idle`（!spaceId）。此时若占位仅渲染在 `<Outlet />` 内部，
 * 用户会看到「侧边栏 + 加载占位」，等 open 返回 12607 切到 `visit-exception`
 * 全屏权限申请页时，视觉上会产生「侧栏先出 → 全屏覆盖」的跳变。
 *
 * 解决：让 idle 分支也用 fixed 全屏遮罩盖住侧栏，从「全屏 loading → 全屏
 * 异常访问页 / 全屏空间页」的过渡视觉连续。z-index 与 workspace-exception
 * 页一致（1000），保证盖住 main-layout 侧栏（默认 z-index 较低）。
 */
.workspace-page-fullscreen-loading-pc {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-md, 14px);
}
/**
 * 联邦（WorkBuddy 客户端内嵌）下的定位降级。
 *
 * 该遮罩是 `/d/:nodeId` 深链进入 `visit-exception` 异常页的**前置态**。联邦模块与
 * 宿主共享同一个 document，fixed 的包含块是宿主视口 —— 遮罩会铺满整个客户端、盖住
 * 宿主左侧任务栏，并且在切到已收缩为 absolute 的异常页时产生一次尺寸跳变。
 *
 * 与异常页不同，本节点是**在树内**渲染（不走 portal，见 pages/workspace-page/pc.tsx
 * 的 idle / space-loading 分支），祖先链上天然就有 `.mindx-federation-app`，因此用后代
 * 选择器即可；联邦下的包含块就是 `.mindx-federation-app`（其 `position: relative` 已在
 * `src/federation/index.less` 设置），absolute 正好只覆盖资料库挂载区域。
 *
 * 非联邦环境（独立页面 / 旧 iframe / 移动端）不匹配本规则，沿用上面的 fixed 默认值。
 * inset / z-index 同样沿用默认值，不做改动。
 */
.mindx-federation-app .workspace-page-fullscreen-loading-pc {
  position: absolute;
}