/**
 * SmartDoc Editor 主题覆盖入口
 *
 * ⚠️ 修改编辑器样式前必读：
 *
 * 1. 优先查询 SDK 是否提供对应的 token（查阅 SDK tokens/colors.less、tokens/spacing.less、tokens/typography.less）
 *    → 如果有：在 ./tokens/ 目录对应文件中覆盖 token 值即可
 * 2. 如果 SDK 无对应 token，才在 ./overrides.less 中通过 !important 直接覆盖
 *
 * 文件结构：
 *   tokens/colors.less      — 颜色/阴影类 token（对齐 SDK tokens/colors.less）
 *   tokens/spacing.less     — 圆角/间距类 token（对齐 SDK tokens/spacing.less）
 *   tokens/typography.less  — 字体/排版类 token（对齐 SDK tokens/typography.less）
 *   tokens/dark-theme.less  — 深色主题 token
 *   overrides.less          — 所有 SDK 未提供 token 的直接样式覆盖（最后手段）
 *
 * 相关文档：https://iwiki.woa.com/p/4021530967
 */
/**
 * Token 覆盖汇总 — 对齐 @tencent/smart-doc-editor/dist/view/theme/tokens/ 目录结构
 *
 * ⚠️ 修改编辑器样式时优先在此目录覆盖 token 值：
 *   - colors.less        → SDK 颜色/阴影 token + --editor-brand 定义
 *   - spacing.less       → SDK 间距/圆角 token（--sc-ui-radius-*, --sc-block-gap-*, --sc-editor-padding 等）
 *   - menu.less          → 浮动菜单 token（--sc-menu-*）+ ardot 浮动菜单原始色值（--editor-*）
 *   - typography.less    → SDK 字体/排版 token（--sc-ui-font-*, --sc-content-font-* 等）
 *   - dark-theme.less    → 深色主题下的 token 覆盖
 *
 * 只有确认 SDK 无对应 token 时，才去 ../overrides.less 添加直接覆盖。
 */
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 颜色类 Token 覆盖 — 对齐 SDK tokens/colors.less
 *
 * 将 SDK 的 --sc-ui-* 颜色变量桥接到 MindX 设计系统 Token。
 * 开发者在 SDK 升级时可直接对比本文件与 SDK tokens/colors.less 的差异。
 *
 * ══════ 「对象选择」相关 ══════
 *   --sc-primary / --sc-primary-hover / --sc-link-color
 *     → var(--editor-brand)            选中主色：drop-indicator、+按钮、链接、mermaid 聚焦
 *   --sc-color-selection
 *     → rgba(0, 136, 255, 0.15)        文本 / block 选区背景
 *   --sc-resizer-handle-color
 *     → var(--editor-brand)            图片 / 视频 / 嵌入块拖拽锚点
 *   --sc-table-selector-selected-bg / -selected-hover-bg
 *     → rgba(0, 136, 255, 0.15)        表格整行 / 整列选中态
 */
/* 编辑器品牌蓝 — 全局定义，供 .smart-doc-editor-pc 内 --sc-* 消费 */
:root {
  --editor-brand: #0088ff;
  /* 分隔线 / 浮层表面：block-menu、slash menu、dropdown、popover 由 Radix Portal
   * 挂到 body 下，不在 .smart-doc-editor-pc 的后代链上，必须在 :root 层桥接。
   * 联邦宿主的根节点不保证提供 --wb-*，子容器的变量也不会向上继承。
   * 缺少宿主值时使用 menu.less 的编辑器色板；dark 档见 dark-theme.less。 */
  --sc-ui-separator: var(--wb-color-border-secondary, var(--editor-border-primary, #e5e5e5));
  --sc-ui-surface: var(--wb-color-bg-tertiary-default, var(--editor-bg-tertiary-default, #ffffff));
  /* Portal 文字/交互色同样不能依赖子容器；兜底沿用 smart-doc-ui 2.137.3。 */
  --sc-ui-text: var(--text-primary, var(--wb-color-text-primary, #1f1f1f));
  --sc-ui-text-muted: var(--text-quaternary, var(--wb-color-text-disable, rgba(0, 0, 0, 0.45)));
  --sc-ui-hover: var(--fill-secondary, var(--wb-color-bg-primary-hover, rgba(0, 0, 0, 0.04)));
  --sc-ui-active: var(--bg-primary-active, var(--wb-color-bg-primary-active, rgba(0, 0, 0, 0.08)));
}
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* ══════ 核心强调色：编辑器品牌蓝（--editor-brand = #0088FF）══════
   * --sc-primary 控制把手、选中线、+按钮 hover、链接等编辑器强调色
   */
  --sc-primary: var(--editor-brand);
  --sc-primary-hover: var(--editor-brand);
  --sc-link-color: var(--editor-brand);
  /* 颜色 */
  --sc-ui-primary: var(--editor-brand);
  --sc-ui-primary-hover: var(--brand-hover);
  --sc-ui-accent: var(--brand-light);
  --sc-ui-accent-hover: var(--brand-hover);
  --sc-ui-danger: var(--error);
  /* 表面/背景 — --sc-ui-surface 已在 :root 桥接，供 Portal 浮层继承 */
  --sc-ui-surface-hover: var(--fill-secondary);
  --sc-ui-hover: var(--fill-secondary);
  --sc-ui-active: var(--fill-secondary);
  --sc-ui-selected: var(--fill-secondary);
  --sc-ui-bg: var(--bg-default);
  /* 文本 */
  --sc-ui-text: var(--text-primary);
  --sc-ui-text-primary: var(--text-primary);
  --sc-ui-text-secondary: var(--text-secondary);
  --sc-ui-text-tertiary: var(--text-tertiary);
  --sc-ui-text-muted: var(--text-quaternary);
  --sc-ui-text-on-primary: var(--text-allwhite);
  /* 行内代码（SDK format-codec.mjs 消费，主 theme 未定义，此处补上） */
  --sc-text-code: var(--text-primary);
  --sc-inline-code-bg: var(--bg-primary-active);
  /* 边框/分割 */
  --sc-ui-border: var(--border-default);
  --sc-ui-border-hover: var(--border-strong);
  --sc-ui-border-strong: var(--border-strong);
  --sc-ui-border-weak: var(--border-default);
  --sc-ui-surface-border: var(--border-default);
  /* SDK 内部边框/文本 token（表格选择条、+按钮等用） */
  --sc-color-border: var(--border-default);
  --sc-color-text-tertiary: var(--text-tertiary);
  --sc-color-text-quaternary: var(--text-quaternary);
  --sc-color-selection: rgba(0, 136, 255, 0.15);
  --sc-color-warning: #f5a623;
  /* SDK 在 :where([data-sc-theme]) 子元素上定义 --sc-color-selection，
   * 子元素 CSS 变量覆盖父级继承值（无论特异性），必须在同一/更深层元素上重设。 */
  /* 编辑器背景 */
  --sc-editor-bg: var(--bg-secondary-default);
  /* 待办块：hover 背景设为 transparent（SDK 默认 fallback 到 --sc-ui-hover） */
  --sc-todo-hover-bg: transparent;
  /* 目录（TOC）插件 token — 对齐 ardot 设计稿（资料库 PC 端交互稿 35:31 目录面板）
   * 设计稿 key（斜杠分隔）→ MindX token（中划线分隔）映射：
   *   text/secondary（60:7）  → --text-secondary   普通目录项文字 rgba(0,0,0,0.7)
   *   fill/primary（755:121） → --fill-primary     hover 背景（白底 #EBEBEB = 8% 黑）
   *   text/primary（60:6）    → --text-primary     激活项文字（加深 + Semibold）
   * --sc-toc-panel-shadow（SDK 内置双层轻阴影，dark 自动加深，与设计稿一致）。 */
  --sc-toc-text-color: var(--text-secondary);
  --sc-toc-hover-bg: var(--fill-primary);
  --sc-toc-active-color: var(--text-primary);
  --sc-toc-flash-color: var(--sc-color-selection);
  /* 浮动目录（float TOC）收起态触发按钮图标色（SDK 默认 fallback --sc-ui-text-muted） */
  --sc-toc-float-trigger-color: var(--button-primary-bg-disabled);
  /* 表格选中背景（多个单元格框选） */
  --sc-table-selection-bg: rgba(2, 10, 29, 0.06);
  /* 表格选择条（行/列 selector）颜色
   * ⚠️ SDK 默认 selected/selected-hover fallback 到 --sc-primary（选区蓝），
   * 未选中的 selector 需要保持中性灰；选中态才用半透明蓝。 */
  --sc-table-selector-bg: var(--bg-medium);
  --sc-table-selector-active-bg: var(--bg-strong);
  --sc-table-selector-selected-bg: rgba(0, 136, 255, 0.15);
  --sc-table-selector-selected-hover-bg: rgba(0, 136, 255, 0.15);
  /* 表头单元格底色（SDK 默认 rgb(235,235,235)，对齐设计稿 bg-medium）*/
  --sc-bg-grey_background: var(--bg-medium);
  /* 蓝色背景色板 */
  --sc-bg-blue_background: rgba(176, 205, 255, 0.3);
  /* 阴影 */
  --sc-ui-shadow-sm: var(--shadow-1);
  --sc-ui-shadow-md: var(--shadow-2);
  /* ══════ 色板颜色覆盖：字体色 & 背景色（设计稿 10 色方案）══════
   * 设计稿色盘（来自 Figma 219:5）：
   *   黑 rgba(0,0,0,0.9) / 灰 #808080 / 蓝 #2479DC / 天蓝 #2990CC / 绿 #349967
   *   黄 #D9A20B / 橙 #D9832B / 红 #E3584B / 玫红 #E04C9A / 紫 #A85ED1
   */
  --sc-text-grey: #808080;
  --sc-text-blue: #2479dc;
  --sc-text-sky_blue: #2990cc;
  --sc-text-green: #349967;
  --sc-text-yellow: #d9a20b;
  --sc-text-orange: #d9832b;
  --sc-text-red: #e3584b;
  --sc-text-rose_red: #e04c9a;
  --sc-text-purple: #a85ed1;
  --sc-bg-light_grey: rgba(128, 128, 128, 0.12);
  --sc-bg-light_blue: rgba(36, 121, 220, 0.12);
  --sc-bg-light_sky_blue: rgba(41, 144, 204, 0.12);
  --sc-bg-light_green: rgba(52, 153, 103, 0.12);
  --sc-bg-light_yellow: rgba(217, 162, 11, 0.12);
  --sc-bg-light_orange: rgba(217, 131, 43, 0.12);
  --sc-bg-light_red: rgba(227, 88, 75, 0.12);
  --sc-bg-light_rose_red: rgba(224, 76, 154, 0.12);
  --sc-bg-light_purple: rgba(168, 94, 209, 0.12);
  /* mermaid 卡片聚焦态：复用编辑器品牌蓝 */
  --sc-mermaid-card-focused-border: var(--editor-brand);
  /* ══════ 拖拽落点/方向 hint 外框：局部覆盖 --sc-ui-primary ══════
   * 这两处 SDK 目前仍硬编码 var(--sc-ui-primary)，尚未拆出独立 token；
   * 在 selector 自身作用域内把 --sc-ui-primary 重设为编辑器品牌蓝，保持纯 token 覆盖，
   * 不影响其他消费该变量的 UI 场景（floating toolbar、block-menu、link popover 等）。
   *   - .sc-drop-indicator--onto      → outline + box-shadow（拖拽落点框）
   *   - .sc-drop-indicator--hint-onto → outline（拖拽方向 hint 虚线） */
}
.smart-doc-editor-pc [data-sc-editor-id],
.smart-doc-editor-mobile [data-sc-editor-id] {
  --sc-color-selection: rgba(0, 136, 255, 0.15);
}
.smart-doc-editor-pc .sc-drop-indicator--onto,
.smart-doc-editor-mobile .sc-drop-indicator--onto,
.smart-doc-editor-pc .sc-drop-indicator--hint-onto,
.smart-doc-editor-mobile .sc-drop-indicator--hint-onto {
  --sc-ui-primary: var(--editor-brand);
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  /* 行内代码（穿透 [data-sc-theme] 确保覆盖 SDK preset 默认值） */
  --sc-text-code: var(--text-primary);
  --sc-inline-code-bg: var(--bg-primary-active);
  --sc-text-grey: #808080;
  --sc-text-blue: #2479dc;
  --sc-text-sky_blue: #2990cc;
  --sc-text-green: #349967;
  --sc-text-yellow: #d9a20b;
  --sc-text-orange: #d9832b;
  --sc-text-red: #e3584b;
  --sc-text-rose_red: #e04c9a;
  --sc-text-purple: #a85ed1;
  --sc-bg-light_grey: rgba(128, 128, 128, 0.12);
  --sc-bg-light_blue: rgba(36, 121, 220, 0.12);
  --sc-bg-light_sky_blue: rgba(41, 144, 204, 0.12);
  --sc-bg-light_green: rgba(52, 153, 103, 0.12);
  --sc-bg-light_yellow: rgba(217, 162, 11, 0.12);
  --sc-bg-light_orange: rgba(217, 131, 43, 0.12);
  --sc-bg-light_red: rgba(227, 88, 75, 0.12);
  --sc-bg-light_rose_red: rgba(224, 76, 154, 0.12);
  --sc-bg-light_purple: rgba(168, 94, 209, 0.12);
  --sc-mermaid-card-focused-border: var(--editor-brand);
  /* 「对象选择」核心：选区主色 & drop-indicator & 链接
     * SDK 在此层定义 --sc-link-color: var(--sc-ui-primary)，
     * --sc-ui-primary 已桥接到 --editor-brand（#0088FF），同层重申确保穿透一致。 */
  --sc-primary: var(--editor-brand);
  --sc-primary-hover: var(--editor-brand);
  --sc-link-color: var(--editor-brand);
  --sc-link-color-hover: var(--editor-brand);
  --sc-color-border: var(--border-default);
  --sc-color-text-tertiary: var(--text-tertiary);
  --sc-color-text-quaternary: var(--text-quaternary);
  --sc-color-selection: rgba(0, 136, 255, 0.15);
  --sc-editor-bg: var(--bg-secondary-default);
  --sc-table-selection-bg: rgba(2, 10, 29, 0.06);
  --sc-table-selector-bg: var(--bg-medium);
  --sc-table-selector-active-bg: var(--bg-strong);
  --sc-table-selector-selected-bg: rgba(0, 136, 255, 0.15);
  --sc-table-selector-selected-hover-bg: rgba(0, 136, 255, 0.15);
  --sc-bg-grey_background: var(--bg-medium);
  --sc-bg-blue_background: rgba(176, 205, 255, 0.3);
  /* 图片/视频/嵌入块的拖拽 resize handle */
  --sc-resizer-handle-color: var(--editor-brand);
}
/* stylelint-disable design-system/spacing-4px-multiple, design-system/no-hardcoded-box-shadow */
/**
 * 间距/圆角类 Token 覆盖
 *
 * 排版节奏类间距（block-gap / indent / padding / editor-padding 等）由 SDK
 * `--sc-font-scale` 承担，差异值通过 theme-config.ts 注入。
 * 此处只保留圆角、引用块、颜色，以及 TS 不可配的 quote-padding。
 */
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* ══════ 圆角 ══════
   * SDK 仅消费端带 fallback，不在 :where([data-sc-theme]) 中定义，直接覆盖即可
   */
  --sc-ui-radius: var(--radius-md);
  --sc-ui-radius-sm: var(--radius-sm);
  --sc-ui-radius-md: var(--radius-md);
  --sc-ui-radius-lg: var(--radius-lg);
  /* ══════ Block 圆角 ══════ */
  --sc-block-radius: 8px;
  /* ══════ 图片圆角 ══════
   * SDK 默认 10px，覆盖为 0，让编辑器内图片保持直角。
   */
  --sc-image-radius: 0;
  /* ══════ 引用块 ══════ */
  --sc-quote-border-width: 3px;
  --sc-quote-border-color: var(--border-strong);
  --sc-quote-text-color: var(--text-tertiary);
  --sc-quote-bg: transparent;
  --sc-quote-border-radius: 0px;
  /* TS 不可配：保留 2px/12px，自行包 calc 跟随宿主档位 */
  --sc-quote-padding: calc(2px * var(--font-scale)) calc(12px * var(--font-scale));
  /* ══════ 代码块 ══════
   * 浅色背景（对齐正常编辑器 --sc-code-block-bg: var(--bg-weak)）
   */
  --sc-bg-grey: var(--bg-weak);
  --sc-code-block-bg: var(--bg-weak);
  --sc-code-block-border: 1px solid var(--border-default);
  --sc-code-block-radius: var(--sc-block-radius);
  /* ══════ Callout ══════ */
  --sc-callout-radius: var(--sc-block-radius);
  /* ══════ 分栏 ══════ */
  --sc-column-hover-bg: var(--wb-color-bg-secondary-hover-active, var(--fill-secondary));
  /* ══════ 表格单元格线 ══════ */
  --sc-border-grey: var(--bg-strong);
  /* ══════ 页面标题顶部间距 ══════
   * mindx 特有：覆盖 SDK 默认 60px，让 H1 与 doc-titlebar 之间有足够呼吸空间
   */
  --sc-page-top-spacing: 108px;
  /* ══════ 以下 Token 在 SDK 中定义于 :where([data-sc-theme])，双写穿透确保覆盖 ══════ */
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  --sc-block-radius: 8px;
  --sc-image-radius: 0;
  --sc-quote-border-width: 3px;
  --sc-quote-border-color: var(--border-strong);
  --sc-quote-text-color: var(--text-tertiary);
  --sc-quote-bg: transparent;
  --sc-quote-border-radius: 0px;
  --sc-quote-padding: calc(2px * var(--font-scale)) calc(12px * var(--font-scale));
  --sc-bg-grey: var(--bg-weak);
  --sc-code-block-bg: var(--bg-weak);
  --sc-code-block-border: 1px solid var(--border-default);
  --sc-code-block-radius: var(--sc-block-radius);
  --sc-callout-radius: var(--sc-block-radius);
  --sc-column-hover-bg: var(--wb-color-bg-secondary-hover-active, var(--fill-secondary));
  --sc-border-grey: var(--bg-strong);
}
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 浮动菜单 Token 桥接 — 对齐 ardot「资料库 / 资料库桌面端编辑器样式 / toolbar-editor」
 *
 * 面向「划词菜单 / 代码块菜单 / 图片菜单 / 表格操作菜单 / Block 把手 / 评论按钮」等浮层，
 * 把 SDK 在 :root 暴露的 --sc-menu-* 显式桥接到 ardot 真实色值。
 *
 * 设计要点：
 * 1. 背景通过 --sc-ui-surface 桥接宿主色并以 --editor-* 色板兜底；文字与交互色
 *    优先使用 MindX Token，根节点缺少变量时回退到 SDK 对应的明暗主题 Token。
 * 2. 尺寸类（icon-size / font-size / padding / gap / radius）使用设计稿最终值。
 * 3. 暗色模式下需要重设背景与边框深色值（--editor-* 在本文件 :root 定义，
 *    由 dark-theme.less 在 data-sc-color-scheme=dark / html.dark / MindX 主题选择器下覆盖，
 *    不能只认 [data-theme=workbuddy].dark：WorkBuddy 宿主可能把 html data-theme 写成 dark）。
 * 4. **补全 SDK 漏掉的样式**：sc-floating-toolbar-text-btn（评论按钮）的横向 flex 布局，
 *    SDK 在 toolbar-item-renderer.mjs 用了这个 class 但 floating-toolbar.less 没有对应规则。
 *    （SDK 内置 icon-button 的 24×24 容器与 active 态背景由 button.less + floating-toolbar.less
 *    自带，无需在此补全。）
 */
:root {
  /* ── ardot 浮动菜单原始色值（dark-theme.less 按 data-sc-color-scheme / html.dark 覆盖暗色档） ── */
  --editor-border-primary: #e5e5e5;
  --editor-bg-secondary-default: #ffffff;
  --editor-bg-tertiary-default: #ffffff;
  /* ── 颜色（直接桥接到 ardot 真实色） ── */
  /* body 下的 SDK Portal 无法继承联邦子容器里的 MindX Token。
   * 根节点缺少业务 Token 时，沿用 SDK 自带的明暗主题值。 */
  --sc-menu-icon-color: var(--text-primary, var(--sc-ui-text));
  --sc-menu-icon-color-active: var(--text-primary, var(--sc-ui-text));
  --sc-menu-text-color: var(--text-primary, var(--sc-ui-text));
  --sc-menu-text-color-muted: var(--text-quaternary, var(--sc-ui-text-muted));
  /* ── 排版（设计稿最终尺寸） ── */
  --sc-menu-icon-size: 16px;
  --sc-menu-font-size: 14px;
  --sc-menu-font-size-sm: 12px;
  /* ── 容器视觉 ── */
  /* 回退 --sc-ui-surface（:root 桥接），改 colors.less 即可带动菜单容器 */
  --sc-menu-surface: var(--sc-ui-surface);
  --sc-menu-border-color: var(--editor-border-primary);
  --sc-menu-border-width: 0.5px;
  --sc-menu-radius: 8px;
  --sc-menu-padding-x: 4px;
  --sc-menu-padding-y: 4px;
  --sc-menu-gap: 4px;
  /* ── 交互反馈 ── */
  --sc-menu-hover-bg: var(--fill-secondary, var(--sc-ui-hover));
  --sc-menu-active-bg: var(--bg-primary-active, var(--sc-ui-active));
  --sc-menu-check-color: var(--brand-primary, var(--sc-ui-primary));
  /* ── 分隔线 ── */
  --sc-menu-separator-color: var(--editor-border-primary);
  --sc-menu-separator-height: 16px;
  /* ── 阴影：双层柔和投影（opacity 4%） ── */
  --sc-menu-shadow: 0px 6px 24px -4px rgba(0, 0, 0, 0.04), 0px 4px 6px -2px rgba(0, 0, 0, 0.06);
  /* ── 内 button 容器（24×24 / radius 4） ── */
  --sc-menu-btn-size: 24px;
  --sc-menu-btn-radius: 4px;
}
/* ══════ 划词菜单容器（type=text）：用 bg/secondary/default，Dark 略亮 ══════ */
.sc-floating-toolbar[data-toolbar-type="text"] {
  --sc-menu-surface: var(--editor-bg-secondary-default);
}
/* ══════ 颜色样式触发按钮（sc-color-style-trigger） ══════ */
/*
 * 与 SDK 内置 icon-button 保持一致的视觉规范：
 * - 24px 高度容器（--sc-menu-btn-size）
 * - 4px 圆角（--sc-menu-btn-radius）
 * - hover 时 fill-tertiary 背景
 * - active/open 时 fill-secondary 背景
 * - 150ms ease 过渡动画
 */
.sc-color-style-trigger {
  /* 继承 token 规范，内联 style 已处理核心样式 */
}
/* Dark 模式下颜色按钮文字色修正 */
:root[data-theme="night"] .sc-color-style-trigger,
:root[data-theme="gilded"] .sc-color-style-trigger,
:root[data-theme="workbuddy"].dark .sc-color-style-trigger {
  /* dark 模式下 A 字颜色由组件内部 isDark 逻辑处理 */
}
/**
 * 字体/排版类 Token 覆盖
 *
 * 内容区字号缩放由 SDK `--sc-font-scale` 承担（固定走 md 档，与 mindx 默认对齐）。
 * MindX 的字号档位是宿主 `fontSizeLevel`（1–7 → :root `--font-scale`），再桥到
 * `--sc-font-scale`。不要启用 SDK `pageFontSize`（sm/lg），避免两套档位叠加。
 * 此处只保留：宿主 `--font-scale` 桥接、UI 层字号（SDK fontScale 明确豁免）、
 * 字体栈与行高。
 */
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* 把宿主全局档位桥给 SDK。未设置时 SDK 回退 1，行为不变。 */
  --sc-font-scale: var(--font-scale);
  /* 以下 Token 在 SDK 中定义于 :where([data-sc-theme])，必须穿透覆盖 */
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  /* UI 字体（fontScale 范围外，继续跟宿主 --font-scale） */
  --sc-ui-font-family: var(--font-family-body);
  --sc-ui-font-size: calc(13px * var(--font-scale));
  --sc-ui-line-height: 1.4;
  /* 编辑器内容区字体栈（字号交给 SDK），保留移动端现有字体 */
  --sc-content-font-family: "PingFang SC", system-ui, -apple-system, "SF Pro", "Helvetica Neue", sans-serif;
  --sc-content-line-height: 1.7;
  --sc-font-family-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  /* 行高（无单位比值，天然跟随 font-size） */
  --sc-heading-line-height: 1.45;
  --sc-mermaid-font-family-code: var(--sc-font-family-mono);
  --sc-mermaid-line-height-code: 1.6;
}
/* PC 正文与标题通过内容 Token 使用原系统字体，避免直接覆盖代码块的等宽字体。 */
.smart-doc-editor-pc [data-sc-theme] {
  --sc-content-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 深色主题桥接 — 对齐 SDK tokens/colors.less dark 段
 *
 * --editor-* / --sc-* 必须写在 :root，Radix Portal（block 菜单 / 划词菜单）挂到 body，
 * 只能继承 html 上的变量。选择器同时覆盖：
 * - MindX 独立站：night / gilded / [data-theme=workbuddy].dark
 * - SDK：EditorRoot 在 theme=dark 时写入的 data-sc-color-scheme=dark
 * - WorkBuddy PC / Federation 宿主：html.dark（宿主 data-theme 可能是 "dark"，
 *   不能只认 workbuddy，否则浮层 --sc-menu-surface 会停在浅色白底）
 */
:root[data-theme="night"],
:root[data-theme="gilded"],
:root[data-theme="workbuddy"].dark,
:root[data-sc-color-scheme="dark"],
:root.dark {
  /* 浮动菜单 — ardot mode 756:763 真实色值 */
  --editor-border-primary: #383838;
  /* 0.22 灰（menu 容器边框 / 分隔线） */
  --editor-bg-secondary-default: #2e2e2e;
  /* 0.18 灰（划词菜单容器） */
  --editor-bg-tertiary-default: #242424;
  /* 0.14 灰（其他菜单容器） */
  /* 编辑器文本色 */
  --sc-text-default: var(--text-primary);
  --sc-text-code: var(--text-primary);
  /* 编辑器背景色 */
  --sc-bg-default: transparent;
  --sc-bg-grey: var(--bg-strong);
  --sc-bg-light_grey: var(--bg-medium);
  --sc-bg-dark: var(--bg-strong);
  /* 编辑器分隔线 */
  --sc-divider-default: var(--divider);
  --sc-divider-light-grey: var(--border-default);
  /* smart-doc-ui 在 :root[data-sc-color-scheme='dark'] 也声明了它，特异性相同，靠导入顺序取胜 */
  --sc-ui-separator: var(--wb-color-border-secondary, var(--editor-border-primary));
  /* 编辑器 UI 层（EmptyPageGuide、工具栏等） */
  /* 兜底值与 smart-doc-ui 2.137.3 暗色文字/交互 Token 对齐；
   * secondary / tertiary 沿用 MindX 暗色文字层级。 */
  --sc-ui-text: var(--text-primary, var(--wb-color-text-primary, rgba(255, 255, 255, 0.85)));
  --sc-ui-text-secondary: var(--text-secondary, var(--wb-color-text-secondary, rgba(255, 255, 255, 0.65)));
  --sc-ui-text-tertiary: var(--text-tertiary, var(--wb-color-text-tertiary, rgba(255, 255, 255, 0.5)));
  --sc-ui-text-muted: var(--text-quaternary, var(--wb-color-text-disable, rgba(255, 255, 255, 0.45)));
  --sc-ui-surface: var(--wb-color-bg-tertiary-default, var(--editor-bg-tertiary-default));
  --sc-ui-surface-hover: var(--fill-secondary, var(--wb-color-bg-primary-hover, rgba(255, 255, 255, 0.06)));
  --sc-ui-hover: var(--bg-primary-hover, var(--wb-color-bg-primary-hover, rgba(255, 255, 255, 0.06)));
  --sc-ui-active: var(--fill-secondary, var(--wb-color-bg-primary-active, rgba(255, 255, 255, 0.12)));
  /* 待办块：未勾选 checkbox 边框色（SDK 默认 fallback 到 --sc-divider-default） */
  --sc-todo-checkbox-border-color: var(--text-quaternary);
  /* .smart-doc-editor-pc [data-sc-theme] 优先级高于 :root，在此同层覆盖表格选中色 */
  /* 覆盖 [data-sc-editor-id] 子元素层的选区色（子元素变量优先于父级继承） */
}
:root[data-theme="night"] .smart-doc-editor-pc [data-sc-theme],
:root[data-theme="gilded"] .smart-doc-editor-pc [data-sc-theme],
:root[data-theme="workbuddy"].dark .smart-doc-editor-pc [data-sc-theme],
:root[data-sc-color-scheme="dark"] .smart-doc-editor-pc [data-sc-theme],
:root.dark .smart-doc-editor-pc [data-sc-theme] {
  --sc-table-selection-bg: #2e2e2e;
  --sc-inline-code-bg: #2e2e2e;
  --sc-bg-blue_background: rgba(62, 95, 153, 0.3);
  --sc-color-selection: rgba(0, 145, 255, 0.15);
}
:root[data-theme="night"] .smart-doc-editor-pc [data-sc-editor-id],
:root[data-theme="gilded"] .smart-doc-editor-pc [data-sc-editor-id],
:root[data-theme="workbuddy"].dark .smart-doc-editor-pc [data-sc-editor-id],
:root[data-sc-color-scheme="dark"] .smart-doc-editor-pc [data-sc-editor-id],
:root.dark .smart-doc-editor-pc [data-sc-editor-id] {
  --sc-color-selection: rgba(0, 145, 255, 0.15);
}
/**
 * [NON-TOKEN] 直接样式覆盖
 * SDK 无对应 token 的属性，通过直接 CSS 覆盖。
 * Token 类覆盖已迁移至 tokens/*.less。
 */
.smart-doc-editor-pc {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-default);
  border-radius: var(--radius-md-val);
  overflow: visible;
}
.smart-doc-editor-pc .sc-block-image {
  --sc-block-radius: 4px;
}
/* ── TOC 悬浮目录 × 评论面板：宽屏共存、窄屏浮层模式隐藏 ─────────
 * Missing SDK Token: --sc-toc-float-display.
 * Reason: SDK 的 --sc-toc-float-inset-right 仅表达右侧让位（位置偏移），
 * 无「隐藏」语义 token。
 *
 * 宽屏（侧栏模式）不做任何覆盖，直接复用 SDK toc.less 内置的让位规则
 * `.sc-editor[data-sc-comment-aside-open] { --sc-toc-float-inset-right:
 * calc(var(--sc-comment-aside-width, 320px) + 12px) }`——目录入口贴住侧栏左缘。
 * 目录与评论气泡之间的缝隙由 use-doc-page-layout 注入的 72px 让位承担，
 * 两者不交叉，不需要在这里隐藏任何东西。
 *
 * 窄屏（浮层模式，doc-comment-inline-cards.less 的 [data-doc-narrow] 段把
 * .sc-comment-aside 改成 absolute 全宽覆盖 + pointer-events: none）下，
 * 上述 320 + 12 的让位失去参照，目录入口会落到正文中间，故仍整体隐藏。
 * 与 SDK 共用根布局属性；侧栏实际非空时存在，关闭或卸载时移除。
 *
 * 读取 [data-doc-narrow] 在这里不构成 ResizeObserver 反馈环：它只给编辑器
 * 内部后代加 display，不改变观测容器 .doc-page-content-pc 自身的宽度。 */
.doc-page-content-pc[data-doc-narrow] .smart-doc-editor-pc .sc-editor[data-sc-comment-aside-open] .sc-toc-float {
  display: none;
}

/* stylelint-disable design-system/spacing-4px-multiple */
/**
 * MindxBlockMenuHandle 自定义块操作手柄热区样式
 *
 * 配套组件：./block-menu-handle.tsx
 * 这是 mindx 在 SDK BlockMenuHandle 外包的一层扩展热区 + 显隐交互，
 * 非 SDK 主题覆盖，故独立于 theme/overrides.less 单独维护。
 */
.mindx-block-menu-handle-zone {
  position: relative;
  display: flex;
  align-items: center;
}
/*
 * 透明热区：覆盖手柄左侧空白 + 整行文字区域
 * - left: -40px  覆盖文字左侧到手柄之间的间距
 * - right: -100vw 向右延伸覆盖整行（pointer-events 拦截鼠标，不影响文字选择）
 * - top/bottom: -8px 上下扩展，行间移动更流畅
 */
.mindx-block-menu-handle-hitarea {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -40px;
  right: -100vw;
  pointer-events: auto;
}
.mindx-block-menu-handle-content {
  transition: opacity 80ms ease;
}
/*
 * is-visible 时：让 SDK 的 type indicator（T/H1 等）也显示 hover 背景
 * .sc-block-menu-type-indicator 是 type indicator 的容器
 */
.mindx-block-menu-handle-zone.is-visible ~ .sc-block-menu-type-indicator,
.mindx-block-menu-handle-zone.is-visible .sc-block-menu-type-indicator {
  background: var(--fill-secondary) !important;
  border-radius: var(--radius-md) !important;
}

.ai-edit-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  /* stylelint-disable-next-line font-token -- 设计稿 icon 容器 4px 内 padding，需保持 px 精度 */
  padding: 0 4px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  cursor: pointer;
  color: var(--icon-primary);
  font-size: calc(14px * var(--font-scale));
  line-height: 1;
  white-space: nowrap;
}
.ai-edit-toolbar-btn:hover {
  background: var(--fill-secondary);
}
.sc-floating-toolbar .ai-edit-toolbar-btn.ai-edit-toolbar-btn svg {
  color: var(--icon-primary) !important;
}
.sc-deco-selection-highlight,
.sc-deco-selection-highlight-active {
  background-color: var(--sc-color-selection, var(--brand-tint));
  padding-top: calc((var(--sc-content-line-height) - 1) / 2 * 1em);
  padding-bottom: calc((var(--sc-content-line-height) - 1) / 2 * 1em);
  margin-top: calc((var(--sc-content-line-height) - 1) / 2 * -1em);
  margin-bottom: calc((var(--sc-content-line-height) - 1) / 2 * -1em);
}
.sc-deco-selection-highlight-active {
  /* DESIGN_FALLBACK: 编辑器选区激活高亮色，设计系统暂无匹配的半透明金黄 token */
  /* stylelint-disable-next-line design-system/no-hardcoded-colors */
  background-color: rgba(255, 191, 0, 0.12);
}

.ai-edit-popover__container {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 8px 8px 12px;
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-12px-val);
  box-shadow: var(--shadow-level-3);
}
.ai-edit-popover__input {
  flex: 1;
  min-width: 0;
  min-height: 22px;
  max-height: 110px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow-y: auto;
  word-break: break-word;
  font-family: inherit;
  font-size: calc(14px * var(--font-scale));
  font-weight: 400;
  line-height: calc(22px * var(--font-scale));
  color: var(--text-primary);
}
.ai-edit-popover__input::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.ai-edit-popover__input::placeholder {
  color: var(--text-quaternary);
}
.ai-edit-popover__input::-webkit-scrollbar {
  width: 4px;
}
.ai-edit-popover__input::-webkit-scrollbar-track {
  background: transparent;
}
.ai-edit-popover__input::-webkit-scrollbar-thumb {
  background: var(--fill-primary);
  border-radius: var(--radius-sm-val);
}
.ai-edit-popover__input::-webkit-scrollbar-thumb:hover {
  background: var(--fill-secondary);
}
.ai-edit-popover__submit-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: 8px;
}
.ai-edit-popover__submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--text-allwhite);
  cursor: not-allowed;
  opacity: 0.3;
}
.ai-edit-popover__submit-btn--active {
  opacity: 1;
  cursor: pointer;
}
.ai-edit-popover__submit-btn--active:hover {
  opacity: 0.85;
}
.ai-edit-popover--multiline .ai-edit-popover__container {
  flex-direction: column;
  align-items: stretch;
}
.ai-edit-popover--multiline .ai-edit-popover__input {
  flex: none;
  width: 100%;
}
.ai-edit-popover--multiline .ai-edit-popover__submit-wrap {
  align-self: flex-end;
  margin-top: 8px;
  margin-left: 0;
}
.ai-edit-popover__tooltip {
  position: absolute;
  right: -8px;
  bottom: calc(100% + 14px);
  z-index: 100;
  padding: 4px 8px;
  white-space: nowrap;
  pointer-events: none;
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  box-shadow: var(--shadow-level-2);
  opacity: 0;
  visibility: hidden;
}
.ai-edit-popover__tooltip--visible {
  opacity: 1;
  visibility: visible;
}
.ai-edit-popover__tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 20px;
}
.ai-edit-popover__tooltip-label {
  font-size: calc(12px * var(--font-scale));
  line-height: calc(20px * var(--font-scale));
  color: var(--text-primary);
}
.ai-edit-popover__tooltip-kbd-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-edit-popover__tooltip-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg-val);
  background: var(--bg-weak);
  font-style: normal;
}
.ai-edit-popover__tooltip-kbd svg {
  width: 10px;
  height: 10px;
}
.ai-edit-popover__tooltip-kbd--text {
  width: auto;
  min-width: 16px;
  padding: 0 calc(4px * var(--font-scale));
  font-size: calc(10px * var(--font-scale));
  line-height: 1;
  color: var(--text-primary);
}

/**
 * Block 菜单底部「最近更新人 / 更新时间」信息区（Issue #1910）
 *
 * 宿主只负责自身两行的样式，菜单项的容器（padding / 圆角 / 弱化透明度）
 * 沿用 SDK 的 .sc-dropdown-item[data-disabled]，不额外覆盖，保证与菜单同源。
 */
.mindx-block-menu-last-edited {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
  /* 撑满 label 容器并禁止反向撑开菜单，保证长名单行省略而非溢出 */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 18px;
  color: var(--text-tertiary);
}
/* 整个菜单宽度锚定到顶部类型网格 .sc-block-menu-type-grid（Issue #1910）：
   网格 = 5 列 × 24px + 4 间隙 × 8px = 152px（自身无左右 padding），
   菜单内容区 padding 左右各 8px，故菜单固定宽度 = 152 + 2×8 = 168px。
   SDK 默认 min-width:176px 且 width:fit-content，长名字会撑宽菜单；
   这里用 min/max-width 双向钉死 168px，超出由信息区 ellipsis 处理。 */
.sc-block-menu-content:has(.mindx-block-menu-last-edited) {
  min-width: 168px;
  max-width: 168px;
}
/* SDK 的 .sc-dropdown-item-label 是 flex:1，但 flex 项默认 min-width:auto，
   不会收缩到比内容更窄——长名字会撑宽 label 进而撑宽整个菜单。
   用 :has 给它 min-width:0，让内部 overflow:hidden + ellipsis 生效。 */
.sc-dropdown-item-label:has(.mindx-block-menu-last-edited) {
  min-width: 0;
}
/* 姓名行：过长单行省略，完整姓名靠 Tooltip 悬停查看 */
.mindx-block-menu-last-edited__name {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mindx-block-menu-last-edited__time {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* SDK 对 disabled 菜单项统一降透明度（语义是"禁用操作"），但本项是纯文本信息，
   降透明度会看不清；支持 :has 的浏览器恢复正常透明度，由文字色承担弱化。
   不支持 :has 时降级为 SDK 默认表现，不影响功能。 */
.sc-block-menu-content .sc-dropdown-item[data-disabled]:has(.mindx-block-menu-last-edited) {
  opacity: 1;
  /* DESIGN_FALLBACK: SDK 菜单项默认 cursor: not-allowed（disabled 语义），
    信息区是纯展示，指针保持默认箭头更贴近"只读文本"的心智 */
  cursor: default;
}

/**
 * SmartDoc Editor 移动端主题覆盖入口
 *
 * 复用 PC 端 tokens，通过 .smart-doc-editor-mobile 前缀做差异化覆盖。
 */
/**
 * Token 覆盖汇总 — 对齐 @tencent/smart-doc-editor/dist/view/theme/tokens/ 目录结构
 *
 * ⚠️ 修改编辑器样式时优先在此目录覆盖 token 值：
 *   - colors.less        → SDK 颜色/阴影 token + --editor-brand 定义
 *   - spacing.less       → SDK 间距/圆角 token（--sc-ui-radius-*, --sc-block-gap-*, --sc-editor-padding 等）
 *   - menu.less          → 浮动菜单 token（--sc-menu-*）+ ardot 浮动菜单原始色值（--editor-*）
 *   - typography.less    → SDK 字体/排版 token（--sc-ui-font-*, --sc-content-font-* 等）
 *   - dark-theme.less    → 深色主题下的 token 覆盖
 *
 * 只有确认 SDK 无对应 token 时，才去 ../overrides.less 添加直接覆盖。
 */
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 颜色类 Token 覆盖 — 对齐 SDK tokens/colors.less
 *
 * 将 SDK 的 --sc-ui-* 颜色变量桥接到 MindX 设计系统 Token。
 * 开发者在 SDK 升级时可直接对比本文件与 SDK tokens/colors.less 的差异。
 *
 * ══════ 「对象选择」相关 ══════
 *   --sc-primary / --sc-primary-hover / --sc-link-color
 *     → var(--editor-brand)            选中主色：drop-indicator、+按钮、链接、mermaid 聚焦
 *   --sc-color-selection
 *     → rgba(0, 136, 255, 0.15)        文本 / block 选区背景
 *   --sc-resizer-handle-color
 *     → var(--editor-brand)            图片 / 视频 / 嵌入块拖拽锚点
 *   --sc-table-selector-selected-bg / -selected-hover-bg
 *     → rgba(0, 136, 255, 0.15)        表格整行 / 整列选中态
 */
/* 编辑器品牌蓝 — 全局定义，供 .smart-doc-editor-pc 内 --sc-* 消费 */
:root {
  --editor-brand: #0088ff;
  /* 分隔线 / 浮层表面：block-menu、slash menu、dropdown、popover 由 Radix Portal
   * 挂到 body 下，不在 .smart-doc-editor-pc 的后代链上，必须在 :root 层桥接。
   * 联邦宿主的根节点不保证提供 --wb-*，子容器的变量也不会向上继承。
   * 缺少宿主值时使用 menu.less 的编辑器色板；dark 档见 dark-theme.less。 */
  --sc-ui-separator: var(--wb-color-border-secondary, var(--editor-border-primary, #e5e5e5));
  --sc-ui-surface: var(--wb-color-bg-tertiary-default, var(--editor-bg-tertiary-default, #ffffff));
  /* Portal 文字/交互色同样不能依赖子容器；兜底沿用 smart-doc-ui 2.137.3。 */
  --sc-ui-text: var(--text-primary, var(--wb-color-text-primary, #1f1f1f));
  --sc-ui-text-muted: var(--text-quaternary, var(--wb-color-text-disable, rgba(0, 0, 0, 0.45)));
  --sc-ui-hover: var(--fill-secondary, var(--wb-color-bg-primary-hover, rgba(0, 0, 0, 0.04)));
  --sc-ui-active: var(--bg-primary-active, var(--wb-color-bg-primary-active, rgba(0, 0, 0, 0.08)));
}
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* ══════ 核心强调色：编辑器品牌蓝（--editor-brand = #0088FF）══════
   * --sc-primary 控制把手、选中线、+按钮 hover、链接等编辑器强调色
   */
  --sc-primary: var(--editor-brand);
  --sc-primary-hover: var(--editor-brand);
  --sc-link-color: var(--editor-brand);
  /* 颜色 */
  --sc-ui-primary: var(--editor-brand);
  --sc-ui-primary-hover: var(--brand-hover);
  --sc-ui-accent: var(--brand-light);
  --sc-ui-accent-hover: var(--brand-hover);
  --sc-ui-danger: var(--error);
  /* 表面/背景 — --sc-ui-surface 已在 :root 桥接，供 Portal 浮层继承 */
  --sc-ui-surface-hover: var(--fill-secondary);
  --sc-ui-hover: var(--fill-secondary);
  --sc-ui-active: var(--fill-secondary);
  --sc-ui-selected: var(--fill-secondary);
  --sc-ui-bg: var(--bg-default);
  /* 文本 */
  --sc-ui-text: var(--text-primary);
  --sc-ui-text-primary: var(--text-primary);
  --sc-ui-text-secondary: var(--text-secondary);
  --sc-ui-text-tertiary: var(--text-tertiary);
  --sc-ui-text-muted: var(--text-quaternary);
  --sc-ui-text-on-primary: var(--text-allwhite);
  /* 行内代码（SDK format-codec.mjs 消费，主 theme 未定义，此处补上） */
  --sc-text-code: var(--text-primary);
  --sc-inline-code-bg: var(--bg-primary-active);
  /* 边框/分割 */
  --sc-ui-border: var(--border-default);
  --sc-ui-border-hover: var(--border-strong);
  --sc-ui-border-strong: var(--border-strong);
  --sc-ui-border-weak: var(--border-default);
  --sc-ui-surface-border: var(--border-default);
  /* SDK 内部边框/文本 token（表格选择条、+按钮等用） */
  --sc-color-border: var(--border-default);
  --sc-color-text-tertiary: var(--text-tertiary);
  --sc-color-text-quaternary: var(--text-quaternary);
  --sc-color-selection: rgba(0, 136, 255, 0.15);
  --sc-color-warning: #f5a623;
  /* SDK 在 :where([data-sc-theme]) 子元素上定义 --sc-color-selection，
   * 子元素 CSS 变量覆盖父级继承值（无论特异性），必须在同一/更深层元素上重设。 */
  /* 编辑器背景 */
  --sc-editor-bg: var(--bg-secondary-default);
  /* 待办块：hover 背景设为 transparent（SDK 默认 fallback 到 --sc-ui-hover） */
  --sc-todo-hover-bg: transparent;
  /* 目录（TOC）插件 token — 对齐 ardot 设计稿（资料库 PC 端交互稿 35:31 目录面板）
   * 设计稿 key（斜杠分隔）→ MindX token（中划线分隔）映射：
   *   text/secondary（60:7）  → --text-secondary   普通目录项文字 rgba(0,0,0,0.7)
   *   fill/primary（755:121） → --fill-primary     hover 背景（白底 #EBEBEB = 8% 黑）
   *   text/primary（60:6）    → --text-primary     激活项文字（加深 + Semibold）
   * --sc-toc-panel-shadow（SDK 内置双层轻阴影，dark 自动加深，与设计稿一致）。 */
  --sc-toc-text-color: var(--text-secondary);
  --sc-toc-hover-bg: var(--fill-primary);
  --sc-toc-active-color: var(--text-primary);
  --sc-toc-flash-color: var(--sc-color-selection);
  /* 浮动目录（float TOC）收起态触发按钮图标色（SDK 默认 fallback --sc-ui-text-muted） */
  --sc-toc-float-trigger-color: var(--button-primary-bg-disabled);
  /* 表格选中背景（多个单元格框选） */
  --sc-table-selection-bg: rgba(2, 10, 29, 0.06);
  /* 表格选择条（行/列 selector）颜色
   * ⚠️ SDK 默认 selected/selected-hover fallback 到 --sc-primary（选区蓝），
   * 未选中的 selector 需要保持中性灰；选中态才用半透明蓝。 */
  --sc-table-selector-bg: var(--bg-medium);
  --sc-table-selector-active-bg: var(--bg-strong);
  --sc-table-selector-selected-bg: rgba(0, 136, 255, 0.15);
  --sc-table-selector-selected-hover-bg: rgba(0, 136, 255, 0.15);
  /* 表头单元格底色（SDK 默认 rgb(235,235,235)，对齐设计稿 bg-medium）*/
  --sc-bg-grey_background: var(--bg-medium);
  /* 蓝色背景色板 */
  --sc-bg-blue_background: rgba(176, 205, 255, 0.3);
  /* 阴影 */
  --sc-ui-shadow-sm: var(--shadow-1);
  --sc-ui-shadow-md: var(--shadow-2);
  /* ══════ 色板颜色覆盖：字体色 & 背景色（设计稿 10 色方案）══════
   * 设计稿色盘（来自 Figma 219:5）：
   *   黑 rgba(0,0,0,0.9) / 灰 #808080 / 蓝 #2479DC / 天蓝 #2990CC / 绿 #349967
   *   黄 #D9A20B / 橙 #D9832B / 红 #E3584B / 玫红 #E04C9A / 紫 #A85ED1
   */
  --sc-text-grey: #808080;
  --sc-text-blue: #2479dc;
  --sc-text-sky_blue: #2990cc;
  --sc-text-green: #349967;
  --sc-text-yellow: #d9a20b;
  --sc-text-orange: #d9832b;
  --sc-text-red: #e3584b;
  --sc-text-rose_red: #e04c9a;
  --sc-text-purple: #a85ed1;
  --sc-bg-light_grey: rgba(128, 128, 128, 0.12);
  --sc-bg-light_blue: rgba(36, 121, 220, 0.12);
  --sc-bg-light_sky_blue: rgba(41, 144, 204, 0.12);
  --sc-bg-light_green: rgba(52, 153, 103, 0.12);
  --sc-bg-light_yellow: rgba(217, 162, 11, 0.12);
  --sc-bg-light_orange: rgba(217, 131, 43, 0.12);
  --sc-bg-light_red: rgba(227, 88, 75, 0.12);
  --sc-bg-light_rose_red: rgba(224, 76, 154, 0.12);
  --sc-bg-light_purple: rgba(168, 94, 209, 0.12);
  /* mermaid 卡片聚焦态：复用编辑器品牌蓝 */
  --sc-mermaid-card-focused-border: var(--editor-brand);
  /* ══════ 拖拽落点/方向 hint 外框：局部覆盖 --sc-ui-primary ══════
   * 这两处 SDK 目前仍硬编码 var(--sc-ui-primary)，尚未拆出独立 token；
   * 在 selector 自身作用域内把 --sc-ui-primary 重设为编辑器品牌蓝，保持纯 token 覆盖，
   * 不影响其他消费该变量的 UI 场景（floating toolbar、block-menu、link popover 等）。
   *   - .sc-drop-indicator--onto      → outline + box-shadow（拖拽落点框）
   *   - .sc-drop-indicator--hint-onto → outline（拖拽方向 hint 虚线） */
}
.smart-doc-editor-pc [data-sc-editor-id],
.smart-doc-editor-mobile [data-sc-editor-id] {
  --sc-color-selection: rgba(0, 136, 255, 0.15);
}
.smart-doc-editor-pc .sc-drop-indicator--onto,
.smart-doc-editor-mobile .sc-drop-indicator--onto,
.smart-doc-editor-pc .sc-drop-indicator--hint-onto,
.smart-doc-editor-mobile .sc-drop-indicator--hint-onto {
  --sc-ui-primary: var(--editor-brand);
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  /* 行内代码（穿透 [data-sc-theme] 确保覆盖 SDK preset 默认值） */
  --sc-text-code: var(--text-primary);
  --sc-inline-code-bg: var(--bg-primary-active);
  --sc-text-grey: #808080;
  --sc-text-blue: #2479dc;
  --sc-text-sky_blue: #2990cc;
  --sc-text-green: #349967;
  --sc-text-yellow: #d9a20b;
  --sc-text-orange: #d9832b;
  --sc-text-red: #e3584b;
  --sc-text-rose_red: #e04c9a;
  --sc-text-purple: #a85ed1;
  --sc-bg-light_grey: rgba(128, 128, 128, 0.12);
  --sc-bg-light_blue: rgba(36, 121, 220, 0.12);
  --sc-bg-light_sky_blue: rgba(41, 144, 204, 0.12);
  --sc-bg-light_green: rgba(52, 153, 103, 0.12);
  --sc-bg-light_yellow: rgba(217, 162, 11, 0.12);
  --sc-bg-light_orange: rgba(217, 131, 43, 0.12);
  --sc-bg-light_red: rgba(227, 88, 75, 0.12);
  --sc-bg-light_rose_red: rgba(224, 76, 154, 0.12);
  --sc-bg-light_purple: rgba(168, 94, 209, 0.12);
  --sc-mermaid-card-focused-border: var(--editor-brand);
  /* 「对象选择」核心：选区主色 & drop-indicator & 链接
     * SDK 在此层定义 --sc-link-color: var(--sc-ui-primary)，
     * --sc-ui-primary 已桥接到 --editor-brand（#0088FF），同层重申确保穿透一致。 */
  --sc-primary: var(--editor-brand);
  --sc-primary-hover: var(--editor-brand);
  --sc-link-color: var(--editor-brand);
  --sc-link-color-hover: var(--editor-brand);
  --sc-color-border: var(--border-default);
  --sc-color-text-tertiary: var(--text-tertiary);
  --sc-color-text-quaternary: var(--text-quaternary);
  --sc-color-selection: rgba(0, 136, 255, 0.15);
  --sc-editor-bg: var(--bg-secondary-default);
  --sc-table-selection-bg: rgba(2, 10, 29, 0.06);
  --sc-table-selector-bg: var(--bg-medium);
  --sc-table-selector-active-bg: var(--bg-strong);
  --sc-table-selector-selected-bg: rgba(0, 136, 255, 0.15);
  --sc-table-selector-selected-hover-bg: rgba(0, 136, 255, 0.15);
  --sc-bg-grey_background: var(--bg-medium);
  --sc-bg-blue_background: rgba(176, 205, 255, 0.3);
  /* 图片/视频/嵌入块的拖拽 resize handle */
  --sc-resizer-handle-color: var(--editor-brand);
}
/* stylelint-disable design-system/spacing-4px-multiple, design-system/no-hardcoded-box-shadow */
/**
 * 间距/圆角类 Token 覆盖
 *
 * 排版节奏类间距（block-gap / indent / padding / editor-padding 等）由 SDK
 * `--sc-font-scale` 承担，差异值通过 theme-config.ts 注入。
 * 此处只保留圆角、引用块、颜色，以及 TS 不可配的 quote-padding。
 */
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* ══════ 圆角 ══════
   * SDK 仅消费端带 fallback，不在 :where([data-sc-theme]) 中定义，直接覆盖即可
   */
  --sc-ui-radius: var(--radius-md);
  --sc-ui-radius-sm: var(--radius-sm);
  --sc-ui-radius-md: var(--radius-md);
  --sc-ui-radius-lg: var(--radius-lg);
  /* ══════ Block 圆角 ══════ */
  --sc-block-radius: 8px;
  /* ══════ 图片圆角 ══════
   * SDK 默认 10px，覆盖为 0，让编辑器内图片保持直角。
   */
  --sc-image-radius: 0;
  /* ══════ 引用块 ══════ */
  --sc-quote-border-width: 3px;
  --sc-quote-border-color: var(--border-strong);
  --sc-quote-text-color: var(--text-tertiary);
  --sc-quote-bg: transparent;
  --sc-quote-border-radius: 0px;
  /* TS 不可配：保留 2px/12px，自行包 calc 跟随宿主档位 */
  --sc-quote-padding: calc(2px * var(--font-scale)) calc(12px * var(--font-scale));
  /* ══════ 代码块 ══════
   * 浅色背景（对齐正常编辑器 --sc-code-block-bg: var(--bg-weak)）
   */
  --sc-bg-grey: var(--bg-weak);
  --sc-code-block-bg: var(--bg-weak);
  --sc-code-block-border: 1px solid var(--border-default);
  --sc-code-block-radius: var(--sc-block-radius);
  /* ══════ Callout ══════ */
  --sc-callout-radius: var(--sc-block-radius);
  /* ══════ 分栏 ══════ */
  --sc-column-hover-bg: var(--wb-color-bg-secondary-hover-active, var(--fill-secondary));
  /* ══════ 表格单元格线 ══════ */
  --sc-border-grey: var(--bg-strong);
  /* ══════ 页面标题顶部间距 ══════
   * mindx 特有：覆盖 SDK 默认 60px，让 H1 与 doc-titlebar 之间有足够呼吸空间
   */
  --sc-page-top-spacing: 108px;
  /* ══════ 以下 Token 在 SDK 中定义于 :where([data-sc-theme])，双写穿透确保覆盖 ══════ */
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  --sc-block-radius: 8px;
  --sc-image-radius: 0;
  --sc-quote-border-width: 3px;
  --sc-quote-border-color: var(--border-strong);
  --sc-quote-text-color: var(--text-tertiary);
  --sc-quote-bg: transparent;
  --sc-quote-border-radius: 0px;
  --sc-quote-padding: calc(2px * var(--font-scale)) calc(12px * var(--font-scale));
  --sc-bg-grey: var(--bg-weak);
  --sc-code-block-bg: var(--bg-weak);
  --sc-code-block-border: 1px solid var(--border-default);
  --sc-code-block-radius: var(--sc-block-radius);
  --sc-callout-radius: var(--sc-block-radius);
  --sc-column-hover-bg: var(--wb-color-bg-secondary-hover-active, var(--fill-secondary));
  --sc-border-grey: var(--bg-strong);
}
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 浮动菜单 Token 桥接 — 对齐 ardot「资料库 / 资料库桌面端编辑器样式 / toolbar-editor」
 *
 * 面向「划词菜单 / 代码块菜单 / 图片菜单 / 表格操作菜单 / Block 把手 / 评论按钮」等浮层，
 * 把 SDK 在 :root 暴露的 --sc-menu-* 显式桥接到 ardot 真实色值。
 *
 * 设计要点：
 * 1. 背景通过 --sc-ui-surface 桥接宿主色并以 --editor-* 色板兜底；文字与交互色
 *    优先使用 MindX Token，根节点缺少变量时回退到 SDK 对应的明暗主题 Token。
 * 2. 尺寸类（icon-size / font-size / padding / gap / radius）使用设计稿最终值。
 * 3. 暗色模式下需要重设背景与边框深色值（--editor-* 在本文件 :root 定义，
 *    由 dark-theme.less 在 data-sc-color-scheme=dark / html.dark / MindX 主题选择器下覆盖，
 *    不能只认 [data-theme=workbuddy].dark：WorkBuddy 宿主可能把 html data-theme 写成 dark）。
 * 4. **补全 SDK 漏掉的样式**：sc-floating-toolbar-text-btn（评论按钮）的横向 flex 布局，
 *    SDK 在 toolbar-item-renderer.mjs 用了这个 class 但 floating-toolbar.less 没有对应规则。
 *    （SDK 内置 icon-button 的 24×24 容器与 active 态背景由 button.less + floating-toolbar.less
 *    自带，无需在此补全。）
 */
:root {
  /* ── ardot 浮动菜单原始色值（dark-theme.less 按 data-sc-color-scheme / html.dark 覆盖暗色档） ── */
  --editor-border-primary: #e5e5e5;
  --editor-bg-secondary-default: #ffffff;
  --editor-bg-tertiary-default: #ffffff;
  /* ── 颜色（直接桥接到 ardot 真实色） ── */
  /* body 下的 SDK Portal 无法继承联邦子容器里的 MindX Token。
   * 根节点缺少业务 Token 时，沿用 SDK 自带的明暗主题值。 */
  --sc-menu-icon-color: var(--text-primary, var(--sc-ui-text));
  --sc-menu-icon-color-active: var(--text-primary, var(--sc-ui-text));
  --sc-menu-text-color: var(--text-primary, var(--sc-ui-text));
  --sc-menu-text-color-muted: var(--text-quaternary, var(--sc-ui-text-muted));
  /* ── 排版（设计稿最终尺寸） ── */
  --sc-menu-icon-size: 16px;
  --sc-menu-font-size: 14px;
  --sc-menu-font-size-sm: 12px;
  /* ── 容器视觉 ── */
  /* 回退 --sc-ui-surface（:root 桥接），改 colors.less 即可带动菜单容器 */
  --sc-menu-surface: var(--sc-ui-surface);
  --sc-menu-border-color: var(--editor-border-primary);
  --sc-menu-border-width: 0.5px;
  --sc-menu-radius: 8px;
  --sc-menu-padding-x: 4px;
  --sc-menu-padding-y: 4px;
  --sc-menu-gap: 4px;
  /* ── 交互反馈 ── */
  --sc-menu-hover-bg: var(--fill-secondary, var(--sc-ui-hover));
  --sc-menu-active-bg: var(--bg-primary-active, var(--sc-ui-active));
  --sc-menu-check-color: var(--brand-primary, var(--sc-ui-primary));
  /* ── 分隔线 ── */
  --sc-menu-separator-color: var(--editor-border-primary);
  --sc-menu-separator-height: 16px;
  /* ── 阴影：双层柔和投影（opacity 4%） ── */
  --sc-menu-shadow: 0px 6px 24px -4px rgba(0, 0, 0, 0.04), 0px 4px 6px -2px rgba(0, 0, 0, 0.06);
  /* ── 内 button 容器（24×24 / radius 4） ── */
  --sc-menu-btn-size: 24px;
  --sc-menu-btn-radius: 4px;
}
/* ══════ 划词菜单容器（type=text）：用 bg/secondary/default，Dark 略亮 ══════ */
.sc-floating-toolbar[data-toolbar-type="text"] {
  --sc-menu-surface: var(--editor-bg-secondary-default);
}
/* ══════ 颜色样式触发按钮（sc-color-style-trigger） ══════ */
/*
 * 与 SDK 内置 icon-button 保持一致的视觉规范：
 * - 24px 高度容器（--sc-menu-btn-size）
 * - 4px 圆角（--sc-menu-btn-radius）
 * - hover 时 fill-tertiary 背景
 * - active/open 时 fill-secondary 背景
 * - 150ms ease 过渡动画
 */
.sc-color-style-trigger {
  /* 继承 token 规范，内联 style 已处理核心样式 */
}
/* Dark 模式下颜色按钮文字色修正 */
:root[data-theme="night"] .sc-color-style-trigger,
:root[data-theme="gilded"] .sc-color-style-trigger,
:root[data-theme="workbuddy"].dark .sc-color-style-trigger {
  /* dark 模式下 A 字颜色由组件内部 isDark 逻辑处理 */
}
/**
 * 字体/排版类 Token 覆盖
 *
 * 内容区字号缩放由 SDK `--sc-font-scale` 承担（固定走 md 档，与 mindx 默认对齐）。
 * MindX 的字号档位是宿主 `fontSizeLevel`（1–7 → :root `--font-scale`），再桥到
 * `--sc-font-scale`。不要启用 SDK `pageFontSize`（sm/lg），避免两套档位叠加。
 * 此处只保留：宿主 `--font-scale` 桥接、UI 层字号（SDK fontScale 明确豁免）、
 * 字体栈与行高。
 */
.smart-doc-editor-pc,
.smart-doc-editor-mobile {
  /* 把宿主全局档位桥给 SDK。未设置时 SDK 回退 1，行为不变。 */
  --sc-font-scale: var(--font-scale);
  /* 以下 Token 在 SDK 中定义于 :where([data-sc-theme])，必须穿透覆盖 */
}
.smart-doc-editor-pc [data-sc-theme],
.smart-doc-editor-mobile [data-sc-theme] {
  /* UI 字体（fontScale 范围外，继续跟宿主 --font-scale） */
  --sc-ui-font-family: var(--font-family-body);
  --sc-ui-font-size: calc(13px * var(--font-scale));
  --sc-ui-line-height: 1.4;
  /* 编辑器内容区字体栈（字号交给 SDK），保留移动端现有字体 */
  --sc-content-font-family: "PingFang SC", system-ui, -apple-system, "SF Pro", "Helvetica Neue", sans-serif;
  --sc-content-line-height: 1.7;
  --sc-font-family-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  /* 行高（无单位比值，天然跟随 font-size） */
  --sc-heading-line-height: 1.45;
  --sc-mermaid-font-family-code: var(--sc-font-family-mono);
  --sc-mermaid-line-height-code: 1.6;
}
/* PC 正文与标题通过内容 Token 使用原系统字体，避免直接覆盖代码块的等宽字体。 */
.smart-doc-editor-pc [data-sc-theme] {
  --sc-content-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* stylelint-disable design-system/no-hardcoded-colors */
/**
 * 深色主题桥接 — 对齐 SDK tokens/colors.less dark 段
 *
 * --editor-* / --sc-* 必须写在 :root，Radix Portal（block 菜单 / 划词菜单）挂到 body，
 * 只能继承 html 上的变量。选择器同时覆盖：
 * - MindX 独立站：night / gilded / [data-theme=workbuddy].dark
 * - SDK：EditorRoot 在 theme=dark 时写入的 data-sc-color-scheme=dark
 * - WorkBuddy PC / Federation 宿主：html.dark（宿主 data-theme 可能是 "dark"，
 *   不能只认 workbuddy，否则浮层 --sc-menu-surface 会停在浅色白底）
 */
:root[data-theme="night"],
:root[data-theme="gilded"],
:root[data-theme="workbuddy"].dark,
:root[data-sc-color-scheme="dark"],
:root.dark {
  /* 浮动菜单 — ardot mode 756:763 真实色值 */
  --editor-border-primary: #383838;
  /* 0.22 灰（menu 容器边框 / 分隔线） */
  --editor-bg-secondary-default: #2e2e2e;
  /* 0.18 灰（划词菜单容器） */
  --editor-bg-tertiary-default: #242424;
  /* 0.14 灰（其他菜单容器） */
  /* 编辑器文本色 */
  --sc-text-default: var(--text-primary);
  --sc-text-code: var(--text-primary);
  /* 编辑器背景色 */
  --sc-bg-default: transparent;
  --sc-bg-grey: var(--bg-strong);
  --sc-bg-light_grey: var(--bg-medium);
  --sc-bg-dark: var(--bg-strong);
  /* 编辑器分隔线 */
  --sc-divider-default: var(--divider);
  --sc-divider-light-grey: var(--border-default);
  /* smart-doc-ui 在 :root[data-sc-color-scheme='dark'] 也声明了它，特异性相同，靠导入顺序取胜 */
  --sc-ui-separator: var(--wb-color-border-secondary, var(--editor-border-primary));
  /* 编辑器 UI 层（EmptyPageGuide、工具栏等） */
  /* 兜底值与 smart-doc-ui 2.137.3 暗色文字/交互 Token 对齐；
   * secondary / tertiary 沿用 MindX 暗色文字层级。 */
  --sc-ui-text: var(--text-primary, var(--wb-color-text-primary, rgba(255, 255, 255, 0.85)));
  --sc-ui-text-secondary: var(--text-secondary, var(--wb-color-text-secondary, rgba(255, 255, 255, 0.65)));
  --sc-ui-text-tertiary: var(--text-tertiary, var(--wb-color-text-tertiary, rgba(255, 255, 255, 0.5)));
  --sc-ui-text-muted: var(--text-quaternary, var(--wb-color-text-disable, rgba(255, 255, 255, 0.45)));
  --sc-ui-surface: var(--wb-color-bg-tertiary-default, var(--editor-bg-tertiary-default));
  --sc-ui-surface-hover: var(--fill-secondary, var(--wb-color-bg-primary-hover, rgba(255, 255, 255, 0.06)));
  --sc-ui-hover: var(--bg-primary-hover, var(--wb-color-bg-primary-hover, rgba(255, 255, 255, 0.06)));
  --sc-ui-active: var(--fill-secondary, var(--wb-color-bg-primary-active, rgba(255, 255, 255, 0.12)));
  /* 待办块：未勾选 checkbox 边框色（SDK 默认 fallback 到 --sc-divider-default） */
  --sc-todo-checkbox-border-color: var(--text-quaternary);
  /* .smart-doc-editor-pc [data-sc-theme] 优先级高于 :root，在此同层覆盖表格选中色 */
  /* 覆盖 [data-sc-editor-id] 子元素层的选区色（子元素变量优先于父级继承） */
}
:root[data-theme="night"] .smart-doc-editor-pc [data-sc-theme],
:root[data-theme="gilded"] .smart-doc-editor-pc [data-sc-theme],
:root[data-theme="workbuddy"].dark .smart-doc-editor-pc [data-sc-theme],
:root[data-sc-color-scheme="dark"] .smart-doc-editor-pc [data-sc-theme],
:root.dark .smart-doc-editor-pc [data-sc-theme] {
  --sc-table-selection-bg: #2e2e2e;
  --sc-inline-code-bg: #2e2e2e;
  --sc-bg-blue_background: rgba(62, 95, 153, 0.3);
  --sc-color-selection: rgba(0, 145, 255, 0.15);
}
:root[data-theme="night"] .smart-doc-editor-pc [data-sc-editor-id],
:root[data-theme="gilded"] .smart-doc-editor-pc [data-sc-editor-id],
:root[data-theme="workbuddy"].dark .smart-doc-editor-pc [data-sc-editor-id],
:root[data-sc-color-scheme="dark"] .smart-doc-editor-pc [data-sc-editor-id],
:root.dark .smart-doc-editor-pc [data-sc-editor-id] {
  --sc-color-selection: rgba(0, 145, 255, 0.15);
}
/* ========== SmartDocEditorMobile 覆盖 ========== */
:root .smart-doc-editor-mobile [data-sc-platform-group="mobile"] {
  --sc-page-top-spacing: 32px;
}
html .smart-doc-editor-mobile .sc-editor .sc-editor-content {
  padding: var(--sc-editor-padding-top) 12px var(--sc-editor-padding-bottom) !important;
  /* 移动端隐藏滚动条：评论角标紧挨滚动条时，用户容易误点到滚动条导致正文位移。
     隐藏后仍可通过 touch 滑动滚动，不影响交互。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html .smart-doc-editor-mobile .sc-editor .sc-editor-content::-webkit-scrollbar {
  display: none;
}
/* 全屏视口容器 */
.mobile-viewport-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-default);
  color: var(--text-primary);
}
.mobile-viewport-container *,
.mobile-viewport-container *::before,
.mobile-viewport-container *::after {
  box-sizing: border-box;
}
/* 移动端编辑器内容区：全宽、收窄两侧 padding */
.smart-doc-editor-mobile {
  padding: 0;
}
.smart-doc-editor-mobile .sc-page-title {
  margin-top: 0px;
  margin-bottom: 24px;
}
/* 编辑区域：占满剩余空间、可滚动（对齐 yb-mobile-editor-body）
 * 高度由 FullViewportContainer 内联 height 决定，因此容器自身不再声明 flex:1，
 * 否则 flex-basis:0 会覆盖内联 height，导致键盘弹起时容器无法收缩到 visualViewport。 */
.smart-doc-editor-body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 隐藏元素（file input 等） */
.mobile-hidden {
  display: none;
}
/* ════════════════ 底部工具栏 ════════════════ */
.mobile-toolbar {
  /* 不依赖 sticky：父容器是 flex 列布局，工具栏已是最后一个 flex 项（flex-shrink:0），
     天然固定在底部。sticky bottom:0 会相对 scrollport 的 padding box 定位，
     把工具栏压到安全区域最底边，覆盖父容器 padding-bottom: env(safe-area-inset-bottom) 的避让。 */
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  -webkit-user-select: none;
          user-select: none;
  height: 40px;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  background-color: var(--bg-default);
  /* 设计稿：底部工具栏无顶部分割线，改用向上投影与内容区分层 */
  box-shadow: var(--shadow-toolbar-up);
}
.mobile-toolbar__dismiss {
  margin-left: auto;
}
/* ── 按钮组（带弹层）── */
.mobile-bar-group {
  /* 默认不作为弹层的定位上下文：横向弹层统一相对 .mobile-toolbar 定位，
     保证不同按钮展开的弹层左边缘都对齐到工具栏左内边距（而非各自贴按钮展开） */
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
          user-select: none;
  /* 图片组例外：菜单要相对自身触发按钮左对齐，故该组恢复为定位上下文 */
}
.mobile-bar-group:has(> .mobile-bar-group__popup.is-menu) {
  position: relative;
}
.mobile-bar-group__popup {
  position: absolute;
  bottom: 100%;
  /* 统一锚定到工具栏左内边距：无论点击哪个按钮，横向弹层左边缘都对齐到此处 */
  left: var(--space-3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background-color: var(--bg-default);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-12px-val);
  box-shadow: var(--shadow-1);
  /* 纵向下拉菜单变体（图片组：拍照 / 图片，带文字标签）：
       相对自身触发按钮左对齐（left:0 = 按钮左边缘） */
}
.mobile-bar-group__popup.is-menu {
  left: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-2);
  min-width: 160px;
}
.mobile-bar-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-xl-val);
  color: var(--icon-primary);
  transition: color 150ms ease, background-color 150ms ease;
  cursor: pointer;
}
.mobile-bar-group__btn:active {
  color: var(--text-primary);
}
.mobile-bar-group__btn.is-active {
  background-color: var(--bg-primary-active);
  color: var(--text-primary);
}
.mobile-bar-group__btn.is-disabled {
  color: var(--icon-quaternary);
  opacity: 0.3;
  cursor: not-allowed;
}
.mobile-bar-group__btn.is-disabled:active {
  background-color: transparent;
  color: var(--icon-quaternary);
}
.mobile-bar-group__icon svg {
  width: 24px;
  height: 24px;
}
/* ── 图标按钮（弹层内）── */
.mobile-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-xl-val);
  color: var(--icon-primary);
  transition: color 150ms ease, background-color 150ms ease;
  cursor: pointer;
  /* 纵向菜单项模式（图片组：图标 + 文字标签，横向左对齐） */
}
.mobile-icon-btn:active {
  background-color: var(--fill-secondary);
  color: var(--text-primary);
}
.mobile-icon-btn.is-active {
  background-color: var(--bg-primary-active);
  color: var(--brand);
}
.mobile-icon-btn.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mobile-icon-btn.is-disabled:active {
  background-color: transparent;
  color: var(--icon-secondary);
}
.mobile-icon-btn__icon svg {
  width: 24px;
  height: 24px;
}
.mobile-icon-btn.is-menu-item {
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-xl-val);
}
.mobile-icon-btn.is-menu-item .mobile-icon-btn__icon svg {
  width: 20px;
  height: 20px;
}
.mobile-icon-btn__label {
  font-size: var(--fs-body);
  color: var(--text-primary);
  white-space: nowrap;
}
/* ════════════════ 移动端固定定位浮层上移（避让底栏） ════════════════ */
@media (max-width: 768px) {
  :root .theme-style-switcher-wrapper-pc {
    bottom: 80px;
    right: 12px;
  }
  :root .doc-page-share-state-toggle-pc {
    bottom: 44px;
    right: 12px;
  }
}

/* agent-reviewing-decorations — Agent 审阅扫光动效（mix-blend-mode 方案）
 * 通过 useBlockDecoration 把 className 注入到 block 根 div，
 * 用一道移动的渐变光带（::after overlay）+ mix-blend-mode 与 block 内容混合，
 * 实现"光带扫过这一块"的审阅动效。
 *
 * 相比 background-clip: text 旧方案的优势：
 * 1. 不再枚举 p / h1..h6 / li / blockquote 等文字承载标签做后代选择器穿透；
 * 2. 不再设 text-fill-color: transparent，代码块 / 行内代码的多色语法高亮
 *    天然不会"消失"，无需 :not(.sc-block-code) 与 code 豁免；
 * 3. 一道光带整块扫过，更贴合"Agent 正在审阅这一块"的语义。
 *
 * 混合模式说明（关键）：
 * 文档为浅色背景 + 深色文字，默认用 screen（滤色）：
 *   - 深色文字被光带提亮成 --dmn-color 色调（被"扫亮"）；
 *   - 浅色背景 screen 后基本不变（保持原样）。
 * 若想要"背景出现一道彩色光带、文字基本不变"的反相观感，
 * 把下方 mix-blend-mode 切成 multiply（正片叠底）即可，其余不用动。 */
@keyframes agent-reviewing-sweep {
  0% {
    background-position: 160% center;
  }
  100% {
    background-position: -160% center;
  }
}
.agent-reviewing-text-shimmer {
  position: relative;
  /* 创建独立层叠上下文，把混合范围限定在本 block 内，
   * 避免 screen / multiply 影响到 block 之外的内容 */
  isolation: isolate;
}
.agent-reviewing-text-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 一道斜向光带：两侧透明、中间为主色高亮 */
  background: linear-gradient(105deg, transparent 30%, var(--bg-default) 50%, transparent 70%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  /* screen + 白色光带：浅色主题扫亮深色文字、深色主题提亮深色背景，
     * 两种主题都能看到一道光带扫过。想要反相（染背景）改成 multiply 即可 */
  mix-blend-mode: screen;
  animation: agent-reviewing-sweep 4s linear infinite;
}
/* 深色主题：用半透明黑光带 + multiply，
 * 深色背景 multiply 黑色 ≈ 不变，浅色文字被光带压暗产生扫过感 */
:root[data-theme="night"] .agent-reviewing-text-shimmer::after,
:root[data-theme="gilded"] .agent-reviewing-text-shimmer::after {
  mix-blend-mode: multiply;
}

/* stylelint-disable design-system/no-hardcoded-colors, design-system/no-hardcoded-border-radius, design-system/no-hardcoded-box-shadow */
.doc-page-content-pc {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--text-primary);
  position: relative;
}
.doc-page-editor-stale-pc {
  opacity: 0;
  pointer-events: none;
}
.doc-page-content-loading-mask-pc {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  background: var(--bg-default);
  pointer-events: auto;
}
/* ============================================================
 * Agent 审阅 pending 样式
 * -----------------------------------------------------------
 * 通过 useBlockClassNames 注入到有 props.review 的 block 上，
 * 展示"修改前"视图（pending 状态）。
 * ============================================================ */
.sc-review-pending.sc-review-locked {
  position: relative;
  border: 1px dashed #9ca3af;
  border-radius: 12px;
  padding-left: var(--space-1);
  background-color: rgba(156, 163, 175, 0.08);
}
.sc-review-pending.sc-review-locked .sc-review-pending {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  background-color: transparent;
}
.sc-review-pending.sc-review-locked [data-fmt-ar="delete"] {
  display: inline;
  color: inherit;
  text-decoration: none;
}
.sc-review-pending.sc-review-locked [data-fmt-ar="insert"] {
  display: none;
}
.sc-review-pending.sc-review-locked [data-fmt-ar="format"] {
  text-decoration: none;
}
.sc-review-pending.sc-review-locked .sc-review-pending-badge {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgba(0, 0, 0, 0.7);
  background: #cbcbcb;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sc-review-pending.sc-review-locked:hover {
  background-color: rgba(156, 163, 175, 0.08);
}
.sc-review-pending.sc-review-locked:hover .sc-review-pending-badge {
  opacity: 1;
}
.sc-review-pending-hidden {
  display: none;
}
.sc-review-pending-readonly.sc-review-locked:not(.sc-block-callout) {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  background-color: transparent;
}
.sc-review-pending-readonly.sc-review-locked [data-fmt-ar="delete"] {
  display: inline;
  color: inherit;
  text-decoration: none;
}
.sc-review-pending-readonly.sc-review-locked [data-fmt-ar="insert"] {
  display: none;
}
.sc-review-pending-readonly.sc-review-locked [data-fmt-ar="format"] {
  text-decoration: none;
}
.sc-review-pending-readonly.sc-review-locked .sc-review-pending-badge {
  display: none;
}
/* ============================================================
 * 评论锚点点击背景高亮
 * -----------------------------------------------------------
 * 由 DocCommentLayerPC 的 useBlockClassNames 注入到点击命中的正文
 * block 上，与卡片激活态同寿：点新锚点覆盖，关闭面板清除。
 * - comment：块级 / 划词评论锚点 → 黄色（warning 半透明）
 * - review：Agent 审阅锚点 → 绿色（success 半透明，可能多 block）
 *
 * 文本 block 高亮 .sc-discussion-text-deco（评论锚点文本装饰元素）；
 * 图片 / callout 等无文本装饰的 block 逐一处理 显示边框。
 * ============================================================ */
/* 图片
 *
 * 注：「有评论 + 选中时把蓝色选中框改成金色」由 SDK review.less 负责，且带
 * `:is(.is-discussion-active, .sc-comment-anchor-active-comment)` 门禁 ——
 * 评论解决后规则整体不命中，选中框回落成默认蓝色。本仓不要再复制那条规则：
 * 少了门禁就会让已解决评论的图片在选中时仍显金边，把蓝色选中反馈吃掉。 */
.sc-comment-anchor-active-comment.sc-block-image .sc-image-media {
  outline: 2px solid var(--sc-discussion-container-border);
}
/* callout */
.sc-comment-anchor-active-comment.sc-block-callout {
  box-shadow: 0 0 0 1px var(--sc-discussion-container-border);
}
/* 代码块 */
.sc-comment-anchor-active-comment .sc-block-content.sc-code-block-content {
  box-shadow: 0 0 0 1px var(--sc-discussion-container-border);
}
/* 视频：与图片同属「贴附元素无自带 border」，同样用 outline 描边
 * （选中态的蓝色描边走 .sc-media-body::before，与 outline 不争同一圈线）。 */
.sc-comment-anchor-active-comment.sc-block-media .sc-media-body {
  outline: 2px solid var(--sc-discussion-container-border);
}
/* mermaid / 附件：与 callout、代码块同属「贴附元素自带 1px border」，
 * border-color 已由 SDK 的 @discussion-visible 门禁改成金色，这里只补一圈
 * 外描边把强度对齐。副作用是激活态下卡片自身的 hover 阴影
 *（--sc-mermaid-card-hover-shadow / --sc-ui-surface-shadow-2）被盖掉，
 * 与 SDK 加粗外圈的行为一致，可接受。 */
.sc-comment-anchor-active-comment.sc-block-mermaid .sc-mermaid-editor,
.sc-comment-anchor-active-comment.sc-block-file .sc-file-card {
  box-shadow: 0 0 0 1px var(--sc-discussion-container-border);
}
/* 文本内容（已提交评论，有 .sc-discussion-text-deco 载体）*/
.sc-comment-anchor-active-comment .sc-discussion-text-deco {
  background-color: var(--sc-discussion-bg) !important;
}
.sc-comment-anchor-active-comment .sc-discussion-text-deco:hover {
  background-color: var(--sc-discussion-bg) !important;
}
/* 划词评论锚点激活态背景色。
 *
 * 命中规则由 doc-comment-layer.tsx 按 discussionId 动态注入
 * （`.discussion-id-<id>.discussion-id-<id>`），此处只提供颜色 token。
 *
 * ⛔ 不要改回「block 内所有 [data-fmt-m] 统一上色 + :not() 把非目标打成
 * transparent」的写法：SDK 的块级高亮载体 .sc-discussion-text-deco 与划词
 * 的 [data-fmt-m] 是同一个元素（decoration 与 format 合并渲染到同一个
 * span），transparent !important 会把整块高亮在这段文字上挖空 —— 表现为
 * hover 块级评论气泡时，整体高亮绕开同 block 内的其它划词。
 *
 * ⛔ 划词的常态下划线与 hover 背景一律不要在本仓复写：SDK 的
 * commentFormatRenderer 已把它们写成行内样式，并靠
 * --sc-inline-discussion-underline{,-width,-gap} 这几个变量在评论解决后
 * 整体关掉、靠 mouseover 注入实现跨段落 hover。本仓一旦用
 * `.sc-block [data-fmt-m]:hover` 之类的静态规则复写，已解决的评论也会照常
 * 响应 hover，写死的 border 宽度还会在上背景时多染出一条边。 */
:root {
  --mindx-inline-discussion-active-bg: var(--sc-discussion-bg);
}
/* 暗色模式下浅黄底色对比度不足，划词评论文字看不清；改用暖灰 #3c3836 */
:root[data-theme="night"],
:root[data-theme="gilded"],
:root[data-theme="workbuddy"].dark {
  --mindx-inline-discussion-active-bg: #3c3836;
}
.sc-block.sc-review-locked.sc-comment-anchor-active-review,
.sc-block.sc-review-locked.sc-comment-anchor-active-review:hover {
  border-color: var(--sc-review-diff-collapsed-border-hover);
}
/* 背景单独排除 callout：callout 自带 data-bg-color，铺色会盖掉它自身视觉。
 * 其激活反馈由 SDK 的 outline + gap 染色承担（见 plugin review.less 的
 * .sc-block-callout.sc-review-diff-collapsed）。与下方「审阅 diff 折叠块」
 * 章节对 callout 的处理保持一致。 */
.sc-block.sc-review-locked.sc-comment-anchor-active-review:not(
    .sc-block-callout
  ),
.sc-block.sc-review-locked.sc-comment-anchor-active-review:not(
    .sc-block-callout
  ):hover {
  background-color: var(--sc-review-diff-collapsed-bg-hover);
}
/* 「等待确认」badge 文案不再本地声明（x-team/mindx#1685）：
 * SDK review.less 已有同款规则（content: var(--label, '等待确认')），文案值由
 * CommentPlugin 的 reviewLabels props（i18n）注入 CSS 变量，mindx 无需自带。 */
/* 审阅修订正文 block 激活态时，第一个 block 的右上角 badge（::before）长亮 */
.sc-block.sc-review-diff-collapsed.sc-comment-anchor-active-review-first::before {
  opacity: 1;
}
/* 激活态下，非首位审阅 block hover 时隐藏 badge，仅保留首位的长亮 */
.sc-block.sc-review-diff-collapsed.sc-comment-anchor-active-review:not(
    .sc-comment-anchor-active-review-first
  ):hover::before {
  opacity: 0;
}
/* 展开查看改动后，重建右上角等待确认 badge（SDK 展开时移除了 .sc-review-diff-collapsed，::before 随之消失）。
 * 文案消费 reviewLabels 注入的 CSS 变量（$t 未命中回落中文 key，变量总有值），
 * 不再硬编码转义文案（旧写法 "\7B49\5F85\786E\8BA4" 是为规避构建管线的中文字面量解析问题）。 */
.sc-block.sc-review-locked.sc-comment-anchor-active-review-first:not(
    .sc-review-diff-collapsed
  )::before {
  content: var(--sc-review-diff-collapsed-label);
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-small);
  line-height: 22px;
  color: rgba(0, 0, 0, 0.7);
  background: #cbcbcb;
  border-radius: 8px;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
/* ============================================================
 * Agent 审阅三态 token 覆盖（从 overrides.less 迁移）
 * -----------------------------------------------------------
 * plugin 默认在 :where(.sc-editor) 上定义这三个 token（绿/红/黄），
 * :where() 优先级 0，但作为 .sc-editor 元素自身声明仍会覆盖父级继承值。
 * 因此本仓库必须在 .sc-editor 元素自身上重新声明，才能覆盖 plugin 默认。
 * 边框走 --color-warning（饱和黄），背景走 --color-warning-bg（浅黄底）。
 * ============================================================ */
.smart-doc-editor-pc .sc-editor {
  --sc-review-insert-border: var(--color-warning);
  --sc-review-insert-bg: var(--warning-bg);
  --sc-review-delete-border: var(--color-warning);
  --sc-review-delete-bg: var(--warning-bg);
  --sc-review-update-border: var(--color-warning);
  --sc-review-update-bg: var(--warning-bg);
  --sc-inline-discussion-bg-active: var(--sc-discussion-bg);
}
/* 新增段落 block 添加绿色下划线样式参考块级评论波浪线方式覆盖 */
.smart-doc-editor-pc .sc-review-insert.sc-review-locked .sc-block-text-content {
  color: var(--sc-review-inline-insert-text-color);
  text-decoration: underline;
  text-decoration-color: var(--sc-review-inline-insert-underline-color);
  text-underline-offset: 4px;
}
/* ============================================================
 * 审阅 diff 折叠块 hover 背景 + 三态 block 边框（从 overrides.less 迁移）
 * ============================================================ */
.sc-block.sc-review-insert,
.sc-block.sc-review-delete,
.sc-block.sc-review-update {
  position: relative;
  border: 1px dashed var(--sc-review-diff-collapsed-border);
  border-radius: 12px;
  padding-left: var(--space-1);
}
/* 结构样式（边框/圆角/内边距）对所有 block 通用；
 * background-color 单独下沉到 :not(.sc-block-callout) 变体，
 * 避免盖掉 callout 自身的高亮背景。 */
.sc-block.sc-review-insert:not(.sc-block-callout),
.sc-block.sc-review-delete:not(.sc-block-callout),
.sc-block.sc-review-update:not(.sc-block-callout) {
  background-color: var(--sc-review-diff-collapsed-bg);
}
/* 嵌套抑制：祖先已画出审阅装饰时，子孙块不再重复画一层虚线框与背景。
 *
 * SDK review.less 自带一组 `.sc-review-insert .sc-review-insert { ... }`
 * （特异性 0,2,0），但上面两组规则最高到 0,3,0，会把它压过去 —— Agent 一次
 * 改写整棵子树（column_list / callout 内的子块被批量标记）时就会叠出双层框
 * 和两层半透明底色。这里补一份自己的抑制，`.sc-block.sc-block` 重复一次类名
 * 把特异性抬到 0,4,0，稳定高于上面两组，不依赖样式表加载顺序。 */
:is(.sc-review-insert, .sc-review-delete, .sc-review-update) .sc-block.sc-block:is(
    .sc-review-insert,
    .sc-review-delete,
    .sc-review-update
  ) {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  background-color: transparent;
}
/* ============================================================
 * 表格 Block 审阅态背景色穿透（Issue #1039）
 * -----------------------------------------------------------
 * 审阅态 class（sc-review-diff-collapsed 收起态 / sc-review-insert、
 * sc-review-delete、sc-review-update 展开态三色 diff——上方"审阅 diff
 * 折叠块"章节已将三者统一复用 --sc-review-diff-collapsed-bg/-border，
 * 视觉上与收起态一致）打在表格 block 的根 div 上，但 SDK 表格自身样式
 * 对 <table> 显式设置了不透明底色（--sc-table-background，SDK
 * table.less 注释：避免非审阅 block 高亮穿透造成"空心"视觉），表头
 * 单元格（.is-table-header）另有更高特异性的灰底
 *（--sc-bg-grey_background）。两者特异性均高于 SDK review.less 中用
 * :where() 包裹的审阅背景色规则（特异性 0），导致根 div 上的浅绿背景
 * 被表格内部挡住，只剩最外层虚线框可见。
 *
 * 修复（采用"穿透"语义，而非在 table 层重声明审阅色）：
 * - 表格主体：将 <table> 的 background-color 置为 transparent，让根 div
 *   上已有的审阅背景色（:where(.sc-review-diff-collapsed) 等规则设置）
 *   自然透下来，实现真正的穿透；比在 table 层重复声明同一变量更 DRY。
 * - 表头单元格：不能简单 transparent（会丢灰底、失表头识别性），改用
 *   box-shadow: inset 0 0 0 9999px 在原灰底之上叠加半透明审阅色（与 SDK
 *   .is-in-selection 多单元格选中态同款叠色技巧），做到叠加/融合。
 * - 单元格网格线（border-color: var(--sc-border-grey)）不受影响。
 * ============================================================ */
.sc-block.sc-block-simple_table.sc-review-diff-collapsed table,
.sc-block.sc-block-simple_table.sc-review-insert table,
.sc-block.sc-block-simple_table.sc-review-delete table,
.sc-block.sc-block-simple_table.sc-review-update table {
  background-color: transparent;
}
.sc-block.sc-block-simple_table.sc-review-diff-collapsed .sc-block-simple_table_cell.is-table-header,
.sc-block.sc-block-simple_table.sc-review-insert .sc-block-simple_table_cell.is-table-header,
.sc-block.sc-block-simple_table.sc-review-delete .sc-block-simple_table_cell.is-table-header,
.sc-block.sc-block-simple_table.sc-review-update .sc-block-simple_table_cell.is-table-header {
  box-shadow: inset 0 0 0 9999px var(--sc-review-diff-collapsed-bg);
}
.sc-block-simple_table .sc-block-simple_table_cell.sc-review-diff-collapsed,
.sc-block-simple_table .sc-block-simple_table_cell:has(.sc-review-diff-collapsed),
.sc-block-simple_table.sc-review-diff-collapsed .sc-block-simple_table_cell {
  overflow: visible;
}
/* ============================================================
 * 内容缩放：标题与页面顶部的距离不跟随缩放（Issue #2082）
 * -----------------------------------------------------------
 * 「内容缩放」预设档位用 CSS zoom 缩放 .sc-page，会把 .sc-page-header 的
 * margin-top（标题到页面顶部的间距）一起放大，标题被越推越低。
 *
 * 这里反向缩放：margin-top = SDK 原始间距 / 当前缩放比。二者都用 SDK 自身的
 * CSS 变量，无需 JS、无硬编码，SDK 重渲染也自动生效：
 *   - --sc-page-top-spacing / --sc-page-top-spacing-with-cover：SDK 定义的
 *     标题顶距（实测无封面 108px、有封面 16px），fallback 用 SDK 默认值。
 *   - --sc-view-zoom：.sc-page 上的当前缩放比（我们的 setElementZoom 与 SDK
 *     都会写它），未缩放时为 1，calc 结果 = 原值，零影响。
 * 特异性：`[data-content-zoom-root] .sc-page-header.without-page-cover`
 *（0,3,0）高于 SDK 的 `.sc-page-header.without-page-cover`（0,2,0）。
 * 有图标 / 额外操作在前时 SDK 顶距为 0，最后一组规则原样保持 0（无需反缩放）。
 * ============================================================ */
[data-content-zoom-root] .sc-page-header.without-page-cover {
  margin-top: calc(var(--sc-page-top-spacing, 60px) / var(--sc-view-zoom, 1));
}
[data-content-zoom-root] .sc-page-header.with-page-cover {
  margin-top: calc(var(--sc-page-top-spacing-with-cover, 16px) / var(--sc-view-zoom, 1));
}
[data-content-zoom-root] .sc-page-icon + .sc-page-header,
[data-content-zoom-root] .sc-page-extra-actions + .sc-page-header,
[data-content-zoom-root] .sc-page-icon + .sc-page-extra-actions + .sc-page-header {
  margin-top: 0;
}