/* TOC Plugin */
/* --sc-ui-* token 由 @tencent/smart-doc-ui 注入 :root，无需 @import 即可直接使用 */
.sc-toc {
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sc-ui-text);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
/* ── 标题栏（toggle 按钮） ── */
.sc-toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sc-ui-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  border-radius: var(--sc-ui-radius-sm);
  transition: color 0.15s;
  -webkit-user-select: none;
          user-select: none;
}
.sc-toc__header:hover {
  color: var(--sc-ui-text);
}
/* 折叠箭头 */
.sc-toc__chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.15s;
  transform: rotate(0deg);
}
/* 收起时箭头指向右 */
.sc-toc--collapsed .sc-toc__chevron {
  transform: rotate(-90deg);
}
/* ── 列表容器（动画展开/收起） ── */
.sc-toc__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sc-toc--collapsed .sc-toc__body {
  flex: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
/* ── 单条目录项 ── */
.sc-toc__item {
  display: block;
  width: 100%;
  padding: 3px 12px;
  box-sizing: border-box;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  /* 正常态文字色可通过 --sc-toc-text-color 覆盖，hover 背景可通过
   * --sc-toc-hover-bg 覆盖（SDK 默认均跟随 --sc-ui-* 主题 token） */
  color: var(--sc-toc-text-color, var(--sc-ui-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--sc-ui-radius-sm);
  transition: background 0.1s, color 0.1s;
  font-size: 13px;
  /* 激活项（当前可见标题）。颜色可通过 --sc-toc-active-color 覆盖，
   * SDK 默认指向 --sc-ui-primary（跟随主题/暗色模式） */
}
.sc-toc__item:hover {
  background: var(--sc-toc-hover-bg, var(--sc-ui-hover));
}
.sc-toc__item:active {
  background: var(--sc-ui-active);
}
.sc-toc__item.sc-toc__item--active {
  color: var(--sc-toc-active-color, var(--sc-ui-primary));
}
/* 层级缩进，h1 = 0，每级 +12px */
.sc-toc__item[data-level='1'] {
  padding-left: 12px;
}
.sc-toc__item[data-level='2'] {
  padding-left: 24px;
}
.sc-toc__item[data-level='3'] {
  padding-left: 36px;
}
.sc-toc__item[data-level='4'] {
  padding-left: 48px;
}
.sc-toc__item[data-level='5'] {
  padding-left: 60px;
}
.sc-toc__item[data-level='6'] {
  padding-left: 72px;
}
/* 空状态提示 */
.sc-toc__empty {
  display: block;
  padding: 4px 12px 8px;
  color: var(--sc-ui-text-muted);
  font-size: 12px;
}
/* ── 点击目录项后，正文标题块的一次性闪烁高亮 ──
 * 注意：该 class 附着在编辑器渲染的 block DOM 上（非 toc 内部节点），
 * 因此使用独立命名 sc-toc-flash，不走 sc-toc__* 子节点 BEM。
 * 颜色可通过 --sc-toc-flash-color 覆盖，SDK 默认与文本选区同色
 * （--sc-color-selection，随亮暗主题切换）。 */
@keyframes sc-toc-flash {
  from {
    background-color: var(--sc-toc-flash-color, var(--sc-color-selection, rgba(35, 131, 226, 0.28)));
  }
  to {
    background-color: transparent;
  }
}
.sc-toc-flash {
  border-radius: var(--sc-ui-radius-sm);
  animation: sc-toc-flash 2s ease-out 1;
}
/* 空标题占位文案 */
.sc-toc__item-empty {
  color: var(--sc-ui-text-muted);
}
/* ────────────────────────────────────────────────────────────
 * 悬浮目录（TocFloatPlugin）
 * 命名空间 .sc-toc-float，与内联目录 .sc-toc 隔离；
 * 目录列表复用上方 .sc-toc__body / .sc-toc__item 等既有样式。
 * ──────────────────────────────────────────────────────────── */
/* 面板阴影收敛到菜单系统一 token --sc-menu-shadow（设计稿 wb/shadow/Popup-Medium，
 * dark 由 menu.less 的 dark 覆盖自动跟随）；fallback 仅在独立构建无 editor token 时兜底 */
:root {
  --sc-toc-panel-shadow: var(--sc-menu-shadow, 0 6px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.06));
}
.sc-toc-float {
  position: absolute;
  z-index: 100;
  /* 与 popover/dropdown-menu 同层，低于 dialog(9000) */
  top: 0;
  right: var(--sc-toc-float-inset-right, 12px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sc-ui-text);
}
/* 右侧让位量走 --sc-toc-float-inset-right（默认 12px）：
 * - 官方评论面板（.sc-comment-aside）打开时由插件维护的根布局属性自动加大
 * - 宿主自实现右侧面板（如 mindx）时在自己的容器上按开合状态设置该变量：
 *   .host.is-review-mode { --sc-toc-float-inset-right: calc(面板宽 + 12px); } */
/* 标尺入口：超出可视高度时裁切，内部 SVG 随正文滚动平移 */
.sc-toc-float__trigger:not(:has(.sc-toc-float__trigger-text)) {
  align-items: flex-start;
  overflow: hidden;
}
/* 官方评论面板（.sc-comment-aside，挂 .sc-editor-content 右沿）打开时：
 * 右侧让位量 = 面板宽 + 基础间距（默认不含按钮位 gap，贴紧面板左缘），
 * 不落进评论面板内部。变量与 comment 插件 aside.less 保持一致；
 * 未启用评论插件时选择器不命中，零影响。 */
.sc-editor[data-sc-comment-aside-open] {
  --sc-toc-float-inset-right: calc(var(--sc-comment-aside-width, 320px) + 12px);
}
/* ── 悬浮入口按钮（默认形态还原自 ardot 设计稿 18:522：
 * 纯目录树线条 icon，无背景 / 描边 / 阴影；可用 renderTrigger 完全替换） ── */
.sc-toc-float__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 2px;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--sc-ui-text-muted);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  /* 展开期间淡出、收起时淡入，与面板弹出/收回交叉过渡；
   * visibility 离散过渡实现「延迟隐藏（渐隐全程仍占位可布局）、立即显示
   * （收起瞬间即可聚焦，焦点归还不受过渡影响）」 */
  transition: opacity 0.12s ease, visibility 0.12s;
}
.sc-toc-float__trigger:focus-visible {
  outline: 2px solid var(--sc-ui-primary);
  outline-offset: 2px;
}
/* 面板展开时隐藏入口按钮（click / hover 触发模式一致）：
 * - opacity + visibility 双过渡（见 .sc-toc-float__trigger 上的 transition）：
 *   渐隐 120ms 期间 visibility 仍 visible（离散过渡延迟切换），结束后才真正
 *   hidden——与面板弹出交叉溶解，避免入口瞬移消失
 * - visibility 而非 display（保留布局占位，面板锚点定位不塌陷）；
 *   visibility: hidden 的元素不参与 hit-test，但 wrapper 自身 border-box
 *   仍可命中——hover 模式据此保持停留稳定（见下方覆盖规则）
 * - wrapper 关闭 pointer-events（仅 click 模式实际生效，见下方覆盖），
 *   点击按钮原位置直接穿透到正文，走「外部点击关闭」路径（点击原按钮位置 = 关闭面板）
 * - wrapper 直接子元素（面板 + renderTrigger 自定义入口）恢复
 *   pointer-events：面板条目可点击，自定义入口保持可交互（展开时点击即关闭） */
.sc-toc-float[data-open='true'] {
  pointer-events: none;
}
.sc-toc-float[data-open='true'] .sc-toc-float__trigger {
  opacity: 0;
  visibility: hidden;
}
.sc-toc-float[data-open='true'] > *:not(.sc-toc-float__trigger) {
  pointer-events: auto;
}
/* hover 触发模式（data-trigger-on='hover'）：入口同样隐藏（沿用上方基础
 * 规则，此处不再覆盖回 visible），但 wrapper 恢复 pointer-events——
 * 入口隐藏后鼠标所在处的 hit-test 落在 wrapper 自身 border-box 上
 * （wrapper 包裹入口、占位不塌陷），mouseleave 不触发，面板稳定停留；
 * 若 wrapper 也关闭 pointer-events（click 模式做法），hit-test 会穿透到
 * 正文立即触发 mouseleave，面板刚展开就被收回。此模式下「点击原入口
 * 位置」落在 wrapper 上（无开合 handler，面板保持展开），关闭由移出
 * 整体 / ESC / 点击外部承担（多一个属性选择器，特异性高于上方规则）。 */
.sc-toc-float[data-trigger-on='hover'][data-open='true'] {
  pointer-events: auto;
}
/* hover 模式 + 内置入口：面板右缘与入口右缘对齐（right: 0）——入口
 * 展开期间隐藏（上方基础规则），面板覆盖其原位无视觉冲突，视觉上面板
 * 在入口位置「原地」展开；覆盖后鼠标从原入口位置移向面板全程命中
 * wrapper 子树（面板本体），连默认 8px 间隙都不用跨，hover 停留更稳。
 * 不带 data-open 条件：关闭动画期间不跳回默认间隙位，避免退出瞬移。
 * renderTrigger 自定义入口保持可见，不命中 :has，面板沿用默认间隙
 * 定位，避免将自定义入口盖住。 */
.sc-toc-float[data-trigger-on='hover']:has(> .sc-toc-float__trigger) .sc-toc-float__panel {
  right: 0;
}
/* 有文本时呈「icon + 文本」胶囊形态（纯 icon 无背景在正文上不可读，胶囊态恢复实体外观） */
.sc-toc-float__trigger:has(.sc-toc-float__trigger-text) {
  width: auto;
  padding: 8px 14px;
  background: var(--sc-ui-surface);
  border: 0.5px solid var(--sc-ui-surface-border);
  box-shadow: var(--sc-toc-panel-shadow);
}
/* 入口横线颜色独立成变量：SVG fill="currentColor" 在此解析到 icon 自身的
 * color（不再跟随按钮 color，与 triggerText 文字色解耦），默认与原按钮
 * 文字色一致（视觉不变）；与 --sc-toc-float-trigger-active-color 命名对称 */
.sc-toc-float__icon {
  flex-shrink: 0;
  display: block;
  color: var(--sc-toc-float-trigger-color, var(--sc-ui-text-muted));
}
.sc-toc-float__icon rect {
  transition: fill 0.15s;
}
/* 当前章节横线：与面板激活项同色；hover 时不跟 currentColor 一起变 */
.sc-toc-float__tick--active {
  fill: var(--sc-toc-float-trigger-active-color, var(--sc-toc-active-color, var(--sc-ui-primary)));
}
.sc-toc-float__trigger-text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
/* ── 悬浮目录面板（Popover）── 样式还原自 ardot 设计稿（目录面板 200 宽）：
 * 圆角 12px、0.5px 描边、双层轻阴影、padding 12、标题与列表间距 8 */
.sc-toc-float__panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 裁切条目 hover 背景，保住圆角 */
  background: var(--sc-menu-surface, var(--sc-ui-surface));
  border: 0.5px solid var(--sc-ui-surface-border);
  border-radius: 12px;
  padding: 12px 8px;
  box-shadow: var(--sc-toc-panel-shadow);
  transform-origin: top right;
}
/* 打开时播进入动画（含再次打开：DOM 保活后靠选择器变化重启动画）。
 * easeOutQuint 类曲线：快速起步、长尾减速收停，弹出有「呼吸」感；
 * 位移 8px + scale 0.98 从右上角（transform-origin）微微长出 */
.sc-toc-float[data-open='true'] .sc-toc-float__panel:not(.sc-toc-float__panel--closing) {
  animation: sc-toc-float-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 关闭动画结束后隐藏但保留 DOM，避免再打开时列表从顶部重滚 */
.sc-toc-float[data-open='false'] .sc-toc-float__panel:not(.sc-toc-float__panel--closing) {
  visibility: hidden;
  pointer-events: none;
}
/* 退出动画：加速离场（时长 120ms 与 tsx 中 PANEL_CLOSE_DURATION 常量联动） */
.sc-toc-float__panel--closing {
  animation: sc-toc-float-out 0.12s cubic-bezier(0.4, 0, 1, 1) forwards;
}
/* 面板标题栏：14px Semibold / 行高 22（设计稿），与列表间距 8px；
 * 水平 4px 缩进与条目文本（面板 8 + item 4）对齐 */
.sc-toc-float__panel-title {
  flex-shrink: 0;
  margin-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--sc-ui-text);
}
/* 面板内目录列表：复用 .sc-toc__body（flex: 1 + overflow-y: auto），
 * 高度由面板 max-height 约束，超出内部滚动 */
/* 面板内条目覆盖（仅悬浮面板作用域，不影响 inline 目录）：
 * 字号 12 / 行高 20 / 高 28（4+20+4）/ 水平 padding 4 / hover 圆角 8 / active 加粗（设计稿） */
.sc-toc-float__panel .sc-toc__item {
  font-size: 12px;
  line-height: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 8px;
}
.sc-toc-float__panel .sc-toc__item.sc-toc__item--active {
  font-weight: 600;
}
/* 层级缩进覆盖：在 4px 基础 padding 上叠加 level×12（level1 = 0 额外缩进） */
.sc-toc-float__panel .sc-toc__item[data-level='1'] {
  padding-left: 4px;
}
.sc-toc-float__panel .sc-toc__item[data-level='2'] {
  padding-left: 16px;
}
.sc-toc-float__panel .sc-toc__item[data-level='3'] {
  padding-left: 28px;
}
.sc-toc-float__panel .sc-toc__item[data-level='4'] {
  padding-left: 40px;
}
.sc-toc-float__panel .sc-toc__item[data-level='5'] {
  padding-left: 52px;
}
.sc-toc-float__panel .sc-toc__item[data-level='6'] {
  padding-left: 64px;
}
/* ── 弹出 / 收起动效 ── */
@keyframes sc-toc-float-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes sc-toc-float-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
/* 动效降级：用户偏好减弱动效时，面板退化为纯 opacity、入口过渡关闭
 *（visibility 离散切换不受影响，隐藏/显示时序语义不变） */
@media (prefers-reduced-motion: reduce) {
  .sc-toc-float__trigger {
    transition: none;
  }
  .sc-toc-float[data-open='true'] .sc-toc-float__panel:not(.sc-toc-float__panel--closing) {
    animation: sc-toc-float-in-fade 0.12s ease-out;
  }
  .sc-toc-float__panel--closing {
    animation: sc-toc-float-out-fade 0.12s ease-in forwards;
  }
}
@keyframes sc-toc-float-in-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sc-toc-float-out-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}