/* ============================================================================
 * fsa-page.css — 页面外壳基础样式（排版 / 颜色 / 层级 / 打印），single owner。
 *
 * 颜色契约（fsa-annotate.js / fsa-edit.js / fsa-md-viewer 等只消费不定义）：
 *   所有颜色一律走 --fsa-* CSS 变量，只给 light 值。
 *   （2026-08-21 起强制亮色，不再有 prefers-color-scheme: dark 分支）
 *   变量定义只在本文件，命名稳定，改名字 = 破坏跨模块契约。
 *
 * 全外壳 z-index 层谱（scripts/fsa-page/ 目录内全部值）：
 *   8880  #fsa-sum                             右缘总结栏（.ai-note 块搬入，
 *                                              fsa-sidebar.js，2026-09-18 起；
 *                                              刻意低于大纲/标注面板——叠加
 *                                              共存契约：后两者打开时直接盖压）
 *   8900  #fsa-side / #fsa-side-toc            左右侧边栏面板（fsa-sidebar.js）
 *   8901  #fsa-side-handle                     左栏把手（左上角，fsa-sidebar.js）
 *   8902  .fsa-resizer                         侧栏拖拽分隔条（fsa-sidebar.js）
 *   8999  #fsa-fab-dock                        右下角统一悬浮操作簇：标注 🖍 /
 *                                              手绘笔 🖌 / 编辑 ✏️ / 重抓 🔄 /
 *                                              大纲把手 #fsa-side-toc-handle
 *                                              （多文件各贡献一个 .fsa-fab 按钮，
 *                                              见本文件「统一悬浮操作簇」段落；
 *                                              2026-08-27 前 #fsa-side-toc-handle
 *                                              独占右侧栏中央、其余四个各自
 *                                              硬编码 bottom 像素值——现改为
 *                                              共享 dock，任一按钮缺席时其余
 *                                              自动贴拢，不留空档）
 *   9100  #fsa-search                          全局搜索弹层（fsa-search.js）
 *   9200  #fsa-hist-dd                         浏览历史下拉（fsa-sidebar.js，
 *                                              2026-09-09 起）
 *   9210  #fsa-sort-dd                         排序视图下拉（fsa-sidebar.js，
 *                                              2026-09-10 起）
 *   9300  #fsa-fsmenu                          文件右键菜单（fsa-sidebar.js）
 *   9301  #fsa-fsdlg                           文件操作对话框（fsa-sidebar.js）
 *   9600  #lightbox                            图片灯箱（本文件）—— 必须全场最高：
 *                                              pin 住侧栏开图时侧栏不得浮在遮罩上
 * ========================================================================== */
:root {
  color-scheme: light;
  /* ---- 颜色变量（light 值）---- */
  --fsa-bg: #f5f6f7;                 /* 页面外底 / 弱 hover 底 */
  --fsa-panel: #ffffff;              /* 面板底：正文页 / 侧栏 / 弹层 */
  --fsa-panel-soft: #fafbfc;         /* 次级面板底（addon 卡片） */
  --fsa-fg: #1f2329;                 /* 主文字 */
  --fsa-fg-soft: #646a73;            /* 次级文字 */
  --fsa-muted: #8f959e;              /* 弱化文字 */
  --fsa-faint: #a6adb3;              /* 最弱提示文字 */
  --fsa-border: #dee0e3;             /* 主边框 */
  --fsa-border-soft: #eff0f1;        /* 弱边框 / 分隔线 */
  --fsa-border-strong: #bbbfc4;      /* 强调边框（引用条 / 虚线卡） */
  --fsa-link: #245bdb;               /* 链接 */
  --fsa-accent: #1456f0;             /* 强调：选中 / 激活态 */
  --fsa-accent-soft: #f0f4ff;        /* 强调弱底（hover / 标签底） */
  --fsa-accent-sel: #e1eaff;         /* 强调选中底 */
  --fsa-accent-border: #b3c8f5;      /* 强调边框 */
  --fsa-code-bg: #f5f6f7;            /* 代码块 / 行内代码底 */
  --fsa-mark: #fff3bf;               /* 搜索命中高亮 */
  --fsa-overlay: rgba(0,0,0,.85);    /* 灯箱遮罩 */
  --fsa-overlay-fg: rgba(255,255,255,.6); /* 遮罩上提示文字 */
  --fsa-scrim: rgba(31,35,41,.32);   /* 搜索弹层半透明遮罩 */
  --fsa-shadow: rgba(0,0,0,.12);     /* 投影 */
  --fsa-star: #f7b500;               /* ★ 星标 */
  --fsa-toread: #b37feb;             /* ◐ 待读 */
  --fsa-pdf: #d0453e;                /* PDF 文件图标 */
  --fsa-warn: #de7802;               /* 警示（媒体缺失 / 不支持） */
  --fsa-warn-bg: #fff5eb;            /* 警示底 */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fsa-bg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
  "Microsoft YaHei", sans-serif; color: var(--fsa-fg); line-height: 1.75; font-size: 15px; }
.page { margin: 0 auto; padding: 40px 56px 120px;
  background: var(--fsa-panel); min-height: 100vh; }
.doc-title { font-size: 30px; font-weight: 600; margin: 8px 0 4px; line-height: 1.4; }
.doc-meta { color: var(--fsa-muted); font-size: 13px; margin-bottom: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--fsa-border-soft); }
.doc-meta a { color: var(--fsa-link); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.4; margin: 22px 0 8px; }
h1{font-size:26px} h2{font-size:22px} h3{font-size:19px}
h4{font-size:17px} h5{font-size:16px} h6{font-size:15px}
p { margin: 6px 0; min-height: 1em; }
ul, ol { margin: 4px 0; padding-left: 24px; }
li { margin: 3px 0; }
li > ul, li > ol { margin: 2px 0; }
a { color: var(--fsa-link); }
code.inline { background: var(--fsa-code-bg); border: 1px solid var(--fsa-border);
  border-radius: 4px; padding: 0 4px; font-size: 13px;
  font-family: "SF Mono", Menlo, Consolas, monospace; }
.code-block { background: var(--fsa-code-bg); border: 1px solid var(--fsa-border);
  border-radius: 8px; margin: 10px 0; overflow: hidden; }
.code-lang { padding: 6px 14px 0; color: var(--fsa-muted); font-size: 12px; }
.code-block pre { margin: 0; padding: 8px 14px 14px; overflow-x: auto; }
.code-block code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
blockquote { margin: 10px 0; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--fsa-border-strong); color: var(--fsa-fg-soft); }
hr { border: none; border-top: 1px solid var(--fsa-border); margin: 20px 0; }
.todo { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; }
.todo.done > span { color: var(--fsa-muted); text-decoration: line-through; }
.callout { display: flex; gap: 10px; padding: 12px 16px; border-radius: 8px;
  margin: 10px 0; }
.callout-emoji { font-size: 18px; line-height: 1.5; }
.callout > div { flex: 1; min-width: 0; }
.grid { display: flex; gap: 16px; margin: 8px 0; align-items: flex-start; }
.grid-col { min-width: 0; }
@media (max-width: 720px) { .grid { flex-wrap: wrap; }
  .grid-col { flex: 1 1 100% !important; } }
figure.img { margin: 8px 0; text-align: left; }
figure.img img { border-radius: 6px; border: 1px solid var(--fsa-border-soft);
  display: block; cursor: zoom-in;
  /* 约束到列宽:超宽截图按自然宽度渲染会怼穿正文列、伸进右缘总结/大纲栏
     (2026-09-18 OPD 篇实锤);灯箱里仍可看原尺寸 */
  max-width: 100%; height: auto; }
#lightbox { position: fixed; inset: 0; background: var(--fsa-overlay); z-index: 9600;
  display: none; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox.on { display: flex; }
#lightbox img { max-width: 92vw; max-height: 92vh; cursor: grab;
  transition: transform .08s ease-out; user-select: none; }
#lightbox img.dragging { cursor: grabbing; transition: none; }
#lightbox video { max-width: 92vw; max-height: 88vh; background: #000; }
#lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; border: none; border-radius: 50%;
  background: rgba(127, 127, 127, .28); color: var(--fsa-overlay-fg);
  cursor: pointer; }
#lightbox .lb-nav:hover { background: rgba(127, 127, 127, .5); }
#lightbox .lb-nav.prev { left: 16px; }
#lightbox .lb-nav.next { right: 16px; }
#lightbox .lb-nav svg { width: 22px; height: 22px; }
#lightbox .lb-tip { position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%); color: var(--fsa-overlay-fg); font-size: 12px; }
.video-card { margin: 8px 0; }
.video-card video { width: 100%; max-height: 480px; border-radius: 8px;
  background: #000; display: block; }
.video-name { color: var(--fsa-fg-soft); font-size: 12px; margin-top: 4px; }
.file-card { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--fsa-border); border-radius: 8px; padding: 10px 14px;
  margin: 6px 0; text-decoration: none; color: var(--fsa-fg); }
.file-card:hover { background: var(--fsa-bg); }
.file-size { color: var(--fsa-muted); font-size: 12px; }
.mention-doc { text-decoration: none; border-bottom: 1px solid var(--fsa-border);
  padding-bottom: 1px; }
/* 已标注文档的引用链接（fsa-annmark.js 运行时打标；data-ann-count 为 >1 的计数）。
   角标需压过 RELINK_CSS 的 a.fsa-local::after（⌂ 图标——relink 样式注入在
   FSA-CSS 块之后，同优先级后写获胜），用双类选择器提权；🖍 本身即隐含"本地
   副本"（只有本地文档可标注），故直接替换 ⌂，与页底引用区样式统一 */
a.fsa-annotated { border-bottom: 2px solid var(--fsa-star); font-weight: 600; }
a.fsa-annotated::after,
a.fsa-local.fsa-annotated::after { content: "🖍" attr(data-ann-count);
  font-size: 10px; font-weight: 400; vertical-align: super; margin-left: 1px;
  opacity: .85; }
.mdoc-icon { margin-right: 2px; font-size: 13px; }
.mention-user { color: var(--fsa-link); background: var(--fsa-accent-soft);
  border-radius: 4px; padding: 0 4px; font-size: 14px; }
.table-wrap { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; table-layout: fixed; }
th, td { border: 1px solid var(--fsa-border); padding: 8px 12px; vertical-align: top;
  word-wrap: break-word; }
th { background: var(--fsa-bg); font-weight: 600; }
td > *:first-child, th > *:first-child { margin-top: 0; }
td > *:last-child, th > *:last-child { margin-bottom: 0; }
td img, th img { max-width: 100%; }
td video { max-height: 320px; }
.iframe-wrap iframe { width: 100%; height: 480px; border: 1px solid var(--fsa-border);
  border-radius: 8px; }
.task-block { border-left: 3px solid var(--fsa-link); padding: 2px 0 2px 10px;
  margin: 6px 0; }
.task-chip { display: inline-block; font-size: 12px; color: var(--fsa-link);
  background: var(--fsa-accent-soft); border-radius: 4px; padding: 1px 6px;
  margin-bottom: 4px; text-decoration: none; }
.task-chip:hover { background: var(--fsa-accent-sel); }
.addon-card { border: 1px dashed var(--fsa-border-strong); border-radius: 8px;
  padding: 8px 12px; margin: 8px 0; font-size: 13px; color: var(--fsa-fg-soft);
  background: var(--fsa-panel-soft); }
.addon-hint { color: var(--fsa-faint); font-size: 12px; }
a.addon-card.child-ref { display: block; text-decoration: none; color: var(--fsa-accent);
  border-color: var(--fsa-accent-border); background: var(--fsa-accent-soft); }
a.addon-card.child-ref:hover { background: var(--fsa-accent-sel); }
figure.img.board img { border: 1px solid var(--fsa-border-soft); border-radius: 8px; }
.media-missing, .unsupported { background: var(--fsa-warn-bg);
  border: 1px dashed var(--fsa-warn); border-radius: 6px; padding: 8px 12px;
  color: var(--fsa-warn); font-size: 13px; margin: 6px 0; }

/* ---- 打印：隐藏全部 UI 层（.fsa-ui = 侧栏 / 把手 / 分隔条 / 搜索层 / 浮动按钮），
   正文去最大宽度 / 阴影 / 边距，钉住的侧栏不再占位 ---- */
@media print {
  .fsa-ui, #lightbox { display: none !important; }
  body { background: #fff; }
  .page { max-width: none; margin: 0 !important; padding: 0;
    box-shadow: none; min-height: 0; }
}

/* ---- 浏览历史下拉 / 排序视图下拉 / 行尾时间徽标 ----
   2026-09-13 起迁入 fsa-sidebar.js 自带的 <style>（single owner）：这三组
   选择器只服务该脚本自己渲染的组件，从不触及被抓页面/Feishu 文档自身的
   DOM，PaperHub html_snapshot.py 的 _FSA_SHELL_CSS 是手工维护的精选子集，
   曾经忘记同步收录导致快照页正常渲染 `class="rc-tt"` 徽标却没有任何
   float:right 样式，视觉上直接和文件名粘在一起（2026-09-13 用户实锤）。
   迁入自带 <style> 后三种交付形态都直接读取 fsa-sidebar.js 源码，不会再
   漂移；详见该文件顶部 CSS 变量注释。 */

/* ---- 文件管理（fsa-sidebar.js）：树右键菜单 + 对话框 + breadcrumb + 定位闪烁 ---- */
#fsa-fsmenu { position: fixed; z-index: 9300; min-width: 172px;
  background: var(--fsa-panel); border: 1px solid var(--fsa-border);
  border-radius: 8px; padding: 4px; box-shadow: 0 6px 24px var(--fsa-shadow);
  font-size: 13px; }
#fsa-fsmenu .mi { padding: 6px 10px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; }
#fsa-fsmenu .mi:hover { background: var(--fsa-accent-soft); }
#fsa-fsmenu .mi.danger { color: var(--fsa-pdf); }
#fsa-fsmenu .mi.danger:hover { background: #fdeeee; }
#fsa-fsmenu .sep { border-top: 1px solid var(--fsa-border-soft); margin: 4px 6px; }
#fsa-fsdlg { position: fixed; inset: 0; z-index: 9301;
  background: var(--fsa-scrim); display: flex; align-items: center;
  justify-content: center; }
#fsa-fsdlg .card { background: var(--fsa-panel); border-radius: 12px;
  width: min(460px, 90vw); padding: 18px 20px 16px;
  box-shadow: 0 12px 40px var(--fsa-shadow); font-size: 14px; }
#fsa-fsdlg h3 { margin: 0 0 8px; font-size: 15px; }
#fsa-fsdlg .path { font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--fsa-muted); background: var(--fsa-code-bg);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 10px;
  word-break: break-all; }
#fsa-fsdlg input { width: 100%; border: 1px solid var(--fsa-border);
  border-radius: 8px; padding: 8px 10px; font-size: 14px; margin-bottom: 12px;
  outline: none; }
#fsa-fsdlg input:focus { border-color: var(--fsa-accent-border); }
#fsa-fsdlg .btns { display: flex; justify-content: flex-end; gap: 8px; }
#fsa-fsdlg button { border: 1px solid var(--fsa-border); background: var(--fsa-panel);
  border-radius: 8px; padding: 7px 16px; font-size: 13px; cursor: pointer; }
#fsa-fsdlg button:hover { background: var(--fsa-bg); }
#fsa-fsdlg button.primary { background: var(--fsa-accent); border-color: var(--fsa-accent);
  color: #fff; }
#fsa-fsdlg button.primary:hover { background: #0a48c8; }
#fsa-fsdlg button.danger { background: var(--fsa-pdf); border-color: var(--fsa-pdf);
  color: #fff; }
#fsa-fsdlg button.danger:hover { background: #b83832; }
.doc-crumb { font-size: 12px; color: var(--fsa-muted); margin: 0 0 2px;
  padding-top: 6px; word-break: break-all; line-height: 1.9; }
.doc-crumb a { color: var(--fsa-fg-soft); text-decoration: none; cursor: pointer; }
.doc-crumb a:hover { color: var(--fsa-accent); }
.doc-crumb .sep { margin: 0 5px; color: var(--fsa-faint); }
.doc-crumb .cur { color: var(--fsa-muted); }
#fsa-side .dir.flash { background: var(--fsa-accent-sel) !important;
  outline: 1px solid var(--fsa-accent-border); transition: background .3s; }

/* ---- 统一悬浮操作簇（2026-08-27 起，参照飞书文档右下角图标簇观感）----
   右下角 #fsa-fab-dock：标注 🖍（fsa-annotate.js）/ 手绘笔 🖌（fsa-annotate.js）/
   编辑（fsa-edit-boot.js）/ 重抓（fsa-refetch.js，仅原生 HTML）/
   大纲把手 #fsa-side-toc-handle（fsa-sidebar.js）共用同一竖排容器——
   谁先加载谁创建（各文件都有一份幂等 fabDock() 兜底，见各自文件头注释），
   用 flex-direction: column-reverse + order 内联样式自动从下往上堆叠：
   任一按钮缺席（如 md.html 没有重抓）时其余按钮自动贴拢补位，**不能**
   像 2026-08-27 前那样各文件各自硬编码 bottom 像素值（那样缺席一个按钮，
   其余按钮之间会永久留一截无法收拢的空档）。
   2026-09-09 起成员：annotate=1 / 手绘笔=2 / edit-boot=3 / 重抓=4 /
   大纲把手=5 / 浏览历史 #fsa-hist-fab=6（fsa-sidebar.js，飞书页+md.html，
   reader 与快照页有 HIST_OFF 守卫排除）。
   single owner：本文件定义容器 / 按钮 / 悬浮提示条样式；各消费文件只贡献
   class="fsa-fab" 的按钮 DOM + order 内联样式，不得重复定义这套 CSS。
   左上角 #fsa-side-handle（文档树把手）复用同一套 .fsa-fab 观感，
   只是不参与 dock 堆叠（独占左上角，暂时只有它一个按钮）。 */
#fsa-fab-dock { position: fixed; right: 18px; bottom: 18px; z-index: 8999;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.fsa-fab { position: relative; box-sizing: border-box; width: 40px; height: 40px;
  border-radius: 50%; padding: 0; display: flex; align-items: center;
  justify-content: center; background: var(--fsa-panel); color: var(--fsa-fg-soft);
  border: 1px solid var(--fsa-border-soft); font-size: 17px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 14px var(--fsa-shadow);
  transition: transform .15s ease, color .15s ease, border-color .15s ease,
    background .15s ease, width .15s ease, border-radius .15s ease; }
.fsa-fab:hover { transform: scale(1.08); color: var(--fsa-accent);
  border-color: var(--fsa-accent); }
.fsa-fab.on, .fsa-fab.working { background: var(--fsa-accent); color: #fff;
  border-color: var(--fsa-accent); }
.fsa-fab svg { width: 17px; height: 17px; display: block; }
.fsa-fab .fh { position: absolute; right: calc(100% + 10px); left: auto;
  top: 50%; transform: translateY(-50%); background: var(--fsa-fg); color: #fff;
  padding: 5px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  box-shadow: 0 4px 14px var(--fsa-shadow); z-index: 1; }
.fsa-fab .fh kbd { margin-left: 8px; opacity: .55; font-size: 11px;
  font-family: inherit; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 1px 5px; }
.fsa-fab:hover .fh, .fsa-fab:focus-visible .fh { opacity: 1; }
.fsa-fab .bd { position: absolute; top: -3px; right: -3px; min-width: 15px;
  height: 15px; padding: 0 3px; border-radius: 8px; background: var(--fsa-warn);
  color: #fff; font-size: 10px; font-weight: 600; line-height: 15px;
  text-align: center; box-shadow: 0 0 0 2px var(--fsa-panel); }
/* 手绘笔展开态（选色 / 粗细 / 橡皮 / 撤销 / 清空一整排）：圆形撑成圆角矩形。
   2026-09-06：表面从 accent 蓝底改白底工具条（与 #fsa-bar 同观感）——蓝底上
   emoji 控件无法重着色、muted 灰文字对比度也不够（用户反馈「看不清楚」）；
   激活信号由蓝底转移到 accent 描边。id+class 特异度压过上方 .fsa-fab.on。 */
.fsa-fab#fsa-pen-bar.on { width: auto; height: auto; border-radius: 20px;
  padding: 6px 10px; justify-content: flex-start; cursor: default;
  background: var(--fsa-panel); color: var(--fsa-fg-soft);
  border-color: var(--fsa-accent); }
.fsa-fab#fsa-pen-bar.on:hover { transform: none; color: var(--fsa-fg-soft);
  border-color: var(--fsa-accent); }
@media (hover: none) { .fsa-fab .fh { display: none; } }  /* 触屏无 hover，避免残留悬浮提示 */

#fsa-side-handle { position: fixed; left: 12px; top: 12px; z-index: 8901; }
body.fsa-side-pin #fsa-side-handle { display: none; }
#fsa-side-handle .fh { right: auto; left: calc(100% + 10px); }

/* ---- 标注层 (annotation) 样式已迁出：唯一来源是同目录 fsa-annotate.js，
   构建时内联进尾部 <script> 并由其自注入 <style>；此处不保留副本 ---- */