* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --sidebar-width: 300px; --page-col-width: calc(210mm + 40px); }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #1a1a1a;
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
}

.btn {
  padding: 7px 14px; border: 1px solid #3d566e; border-radius: 4px;
  background: #fff; color: #2c3e50; cursor: pointer; font-size: 13px;
}
.btn:hover { background: #e8edf2; }
.btn.primary { background: #e67e22; border-color: #e67e22; color: #fff; }
.btn.primary:hover { background: #d35400; }
.btn.green { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.btn.green:hover { background: #c8e6c9; border-color: #81c784; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.compare-wrap { position: relative; }
.compare-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 260px; max-width: 420px;
  max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #d0d7de; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px;
}
.compare-dropdown[hidden] { display: none; }
.dd-item {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; border-radius: 4px;
  background: none; cursor: pointer; font-size: 13px; color: #2c3e50; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.dd-item:hover { background: #eaf2f8; }
.dd-item.dd-empty { cursor: default; color: #95a5a6; text-align: center; }

.status { display: none; }

/* 右侧浮现提示：不占用主操作空间，2 秒后自动滑出消失 */
.toast {
  position: fixed;
  top: 16px;
  right: 0;
  z-index: 200;
  max-width: 420px;
  padding: 10px 18px;
  font-size: 13px;
  color: #2c3e50;
  background: #eaf2f8;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transform: translateX(110%);
  transition: transform .25s ease-out, opacity .25s ease-out;
  opacity: 0;
  pointer-events: none;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.ok { background: #eafaf1; color: #27ae60; }
.toast.error { background: #fdecea; color: #c0392b; }

.draft-banner {
  padding: 8px 20px; font-size: 13px; background: #fef9e7; color: #7d6608;
  border-bottom: 1px solid #f1c40f; display: flex; align-items: center; gap: 8px; flex: none;
}
.draft-banner[hidden] { display: none; }
.draft-btn {
  padding: 2px 10px; border: 1px solid #d4ac0d; border-radius: 4px;
  background: #fff; color: #7d6608; cursor: pointer; font-size: 12px;
}
.draft-btn:hover { background: #fef5e7; }

.layout {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.sidebar { width: 300px; padding: 14px; background: #fff; border-left: 1px solid #ddd; overflow-y: auto; flex: none; }
/* 拖拽调宽条：紧贴 sidebar 左边缘（侧栏已移到右侧），不影响工具栏（竖列模式时
   toolbar 在编辑区左侧）。拖动时 sidebar 获得 user-width（flex:none + 显式 width），
   覆盖默认 300px 或 review 模式的 flex 规则。 */
.sidebar-resizer {
  width: 5px; flex: none; cursor: col-resize;
  background: #ddd; z-index: 6;
  transition: background .15s;
}
.sidebar-resizer:hover,
.sidebar-resizer.dragging { background: #e67e22; }
.panel { margin-bottom: 14px; }
.panel h3 { font-size: 13px; color: #7f8c8d; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.hf-label { color: #2980b9; font-size: 12px; letter-spacing: 0; text-transform: none; }
.panel label { display: block; font-size: 13px; margin-bottom: 8px; color: #34495e; }
.panel input[type="text"], .panel input[type="number"], .panel select, .panel textarea {
  width: 100%; padding: 5px 8px; margin-top: 3px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
.panel textarea { resize: vertical; font-family: Consolas, monospace; }

/* 侧栏顶部操作按钮：加载/保存/打印（含评审模式的保存并回传/提交/加载对比）。 */
.sidebar-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #eee;
}
.sidebar-actions .btn { display: block; width: 100%; text-align: center; }
.sidebar-actions #file-load-wrap,
.sidebar-actions .compare-wrap { display: block; }
/* 评审会话专用的 保存/提交 按钮默认 hidden；display:block 会盖掉 UA 的
   [hidden]{display:none}，这里必须显式压回去，否则一键启动也会误显示。 */
.sidebar-actions .btn[hidden] { display: none !important; }
/* 评审模式下 #side-props 被隐藏，.sidebar-actions 的下边框正是“批注”上方的横线；
   按需求去掉，使其不再显示在该标题之上。 */
body[data-mode="review"] .sidebar-actions { border-bottom: none; }

/* 侧栏整体手风琴：常驻右边缘的开关竖条（展开时 › 收起、收起时 ‹ 展开），
   宽度由拖拽条调节。 */
.sidebar-toggle-btn {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 60; padding: 16px 5px; border: 1px solid #d0d0d0; border-right: 0;
  border-radius: 6px 0 0 6px; background: #fff; color: #2c3e50; cursor: pointer;
  font-size: 15px; box-shadow: -2px 0 6px rgba(0,0,0,.08);
}
.sidebar-toggle-btn:hover { background: #eaf2f8; }
body.sidebar-collapsed #main-sidebar {
  width: 0 !important; min-width: 0 !important; flex: none !important;
  padding: 0 !important; border-left: 0 !important; overflow: hidden;
}
/* 收起主侧栏时只隐藏“主侧栏拖拽条”，不要误伤对比栏的拖拽条
   （#compare-resizer 也带 .sidebar-resizer 类，必须用 ID 精确命中主拖拽条，
   否则收起主侧栏会把对比栏拖拽条一起 display:none，导致对比栏无法调宽）。 */
body.sidebar-collapsed #sidebar-resizer { display: none !important; }

/* 手风琴（accordion）面板：点击标题折叠/展开正文，状态持久化到 localStorage。 */
.panel.accordion .acc-head {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  background: #f5f7fa; border: 1px solid #e2e6ea; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #2c3e50; cursor: pointer;
  text-align: left;
}
.panel.accordion .acc-head:hover { background: #eaf2f8; }
.panel.accordion .acc-head .acc-arrow { margin-left: auto; transition: transform .15s; }
.panel.accordion.collapsed .acc-head .acc-arrow { transform: rotate(-90deg); }
.panel.accordion.collapsed .acc-body { display: none; }
.panel.accordion .acc-body { padding-bottom: 4px; }

/* 页面设置两列网格：纸张占整行，其余两两一行。 */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.acc-grid .acc-full { grid-column: 1 / -1; }
.acc-grid label { margin-bottom: 0; }

.stage { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
/* The A4 page columns never shrink (flex: 0 0) so line wrapping always matches
   the printed page; when the pane is narrower than a page, stage-cols scrolls
   horizontally instead of compressing the page. */
.stage-cols { flex: 1; min-height: 0; overflow: hidden auto; display: flex; }
.stage-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #f0f2f5; }
.col-scroll { flex: 1; overflow-y: auto; padding: 20px; }
#col-main { border-right: 1px solid #ddd; }
/* 文档显示比例：用 zoom 做整页【等比例】缩放——文字、行高、页高一起按同一比例
   缩放，保持文本显示的【长宽比不变】（100% = 文档真实大小，50% = 真实大小的一半）。
   这比只改宽度更正确：只改宽度会让页面被"挤窄"而非整体缩小，导致文本换行与长宽比变化。
   --doc-zoom 由工具栏输入框设置，值为 百分比/100（如 50% → 0.5）。缩放只影响显示，
   不影响导出(docx/PDF)——导出走文档自身 pageSize 语义。 */
#col-main, #col-compare { zoom: var(--doc-zoom, 1); }
/* The compare pane starts hidden; .stage-col's display:flex would override the
   UA [hidden] rule, so re-assert it explicitly here. */
#col-compare[hidden] { display: none; }
/* Equal side-by-side columns must keep identical content x positions. A vertical
   scrollbar in one pane but not the other shifts that pane's text by the bar
   width, so reserve the gutter in both up front. */
#scroll-main, #scroll-compare { scrollbar-gutter: stable; }
.toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; background: #fff;
  padding: 6px 8px;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid #e2e2e2;
}
/* In vertical toolbar mode the toolbar becomes a left column; make sure it never
   spill over the right sidebar and stays within the left area. */
body.toolbar-side #toolbar {
  max-width: calc(100% - var(--sidebar-width));
}
/* Compare label bar: now a header pinned to the top of the 对比批注 right
   sidebar (see #side-compare in index.html). It shows whenever that sidebar is
   visible (which only happens after a compare doc loads), so no extra display
   toggle is needed. */
.compare-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: #2c3e50;
  background: #f5f7fa; border-bottom: 1px solid #e2e6ea; flex: none;
}
.compare-toolbar .btn-close-compare {
  padding: 2px 8px; border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; color: #c0392b; cursor: pointer; font-size: 12px;
}
.compare-toolbar .btn-close-compare:hover { background: #fdecea; }
/* 缩小侧边栏时标题文字收缩省略，关闭按钮（flex:none + nowrap）永不错行。 */
.compare-toolbar > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 主文档侧边栏顶部条：显示“当前文档（可编辑）”并提供关闭按钮（样式同对比关闭按钮）。
   用负外边距突破 .sidebar 的 14px 内边距，使其通栏贴顶，与 #side-compare 的对比条对齐。 */
.main-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin: -14px -14px 12px -14px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: #2c3e50;
  background: #f5f7fa; border-bottom: 1px solid #e2e6ea; flex: none;
  /* top: -14px 与负 margin-top 配合，让滚动到任意位置时都贴 .sidebar 边框顶
     （默认 top:0 时 sticky 钉在 padding 内边沿，会与视窗顶留 14px 空隙）。 */
  position: sticky; top: -14px; z-index: 6;
}
/* 标题文字收缩省略，关闭按钮（flex:none + nowrap）在窄侧边栏下也保持单行不换行。 */
.main-toolbar > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-toolbar .btn-close-compare {
  padding: 2px 8px; border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; color: #c0392b; cursor: pointer; font-size: 12px;
  margin-left: 0; flex: none; white-space: nowrap;
}
.main-toolbar .btn-close-compare:hover { background: #fdecea; }
/* 无打开的文档时关闭按钮置灰（btn-close-compare 非 .btn 类，需单独定义禁用态） */
.main-toolbar .btn-close-compare:disabled,
.main-toolbar .btn-close-compare[disabled] {
  opacity: 0.5; cursor: not-allowed; background: #f0f0f0; color: #999; border-color: #e0e0e0;
}
.main-toolbar .btn-close-compare:disabled:hover { background: #f0f0f0; color: #999; border-color: #e0e0e0; }
/* 单文档（未打开对比文档）时隐藏主文档侧边栏的 ✕ 关闭按钮：该按钮语义上是
   “在对比场景中关闭当前文档”，单文档场景下无需显示。has-compare 由 loadCompare
   /closeCompare 切换，故随对比文档开关自动显隐（与 #compare-resizer 一致）。 */
body:not(.has-compare) #btn-close-main { display: none; }
.toolbar button {
  min-width: 30px; padding: 5px 8px; border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 13px;
}
.toolbar button:hover { background: #f0f0f0; }
.toolbar button.is-active { background: #e67e22; color: #fff; border-color: #e67e22; }
.toolbar .sep { width: 1px; background: #ddd; margin: 0 4px; }
/* 文档显示比例输入框：直接键入百分比，整页(含文字/行高/页高)按比例等比例缩放。 */
.toolbar .tb-zoom { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #555; white-space: nowrap; }
.toolbar .tb-zoom input {
  width: 46px; padding: 4px 4px; border: 1px solid #d0d0d0; border-radius: 4px;
  font-size: 13px; text-align: right; background: #fff;
}
.toolbar .tb-zoom input:focus { outline: none; border-color: #e67e22; }
body.toolbar-side .tb-zoom { justify-content: flex-end; }

/* 竖列工具栏（body.toolbar-side，由工具栏末尾的切换按钮触发）：DOM 已移到
   .layout 中左侧边栏右侧、编辑区左侧。列满高、纵向一列；按钮超多时列内
   滚动，切换按钮 sticky 在列底随时可见。分隔线由竖线转为横线。 */
body.toolbar-side #toolbar {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  flex: none;
  position: static; z-index: auto;
  padding: 8px 6px;
  overflow-y: auto; overflow-x: hidden;
  border-bottom: 0; border-right: 1px solid #e2e2e2;
}
body.toolbar-side #toolbar button { white-space: nowrap; }
body.toolbar-side #toolbar .sep { width: auto; height: 1px; margin: 4px 2px; }
body.toolbar-side #toolbar #tb-tbswitch {
  position: sticky; bottom: 0; background: #fff; border-color: #b8c4ce;
}

#editor, #editor-compare {
  background: #fff; min-height: 600px; padding: 40px 48px;
  line-height: 1.6;
}
/* 分节文档：纸张（宽/高/页边距/白底/阴影）由每个 <section data-section> 自己提供
   （见共享渲染样式 src/render/docx-render.css），编辑器容器不再画白底/加内边距——
   否则横向节两侧、竖版节与外框之间会留出一大片白，页与页之间也看不出分隔。
   --page-col-width 由 JS 设为「最宽节页宽 + 40px」，横向节才不会被挤扁。 */
#editor.has-page-sections, #editor-compare.has-page-sections {
  background: transparent; padding: 0;
}
/* Floating pictures (VML absolute-positioned, e.g. a cover photo) carry
   page-relative offsets (data-float-x/y) and position:absolute inside the page
   box. position:relative makes #editor their containing block; z-index:0 gives
   it a stacking context so a behind-text photo (z-index:-1) paints above the
   page's white background but below the in-flow text. */
#editor, #editor-compare { position: relative; z-index: 0; }
#editor:focus, #editor-compare:focus { outline: none; }
/* Read-only compare pane: still selectable/copyable, no caret. */
#editor-compare { cursor: default; }
#editor-compare .ProseMirror { cursor: default; }
.ProseMirror { outline: none; }
.ProseMirror:focus { outline: none; }
.ProseMirror-selectednode { outline: none; }
#editor .selectedCell::after, #editor-compare .selectedCell::after { outline: none; }
/* 文档内容样式（标题/表格/禁则/分页/批注/公式/图片）已抽到唯一共享渲染样式
   src/render/docx-render.css —— 由 editor/public/index.html 以 <link> 引入，
   编辑器页面盒 #editor/#editor-compare 带 .docx-render 类。本文件只保留编辑器
   chrome（工具栏/侧栏/缩放/ProseMirror 等）。改渲染样式请改共享文件。 */

/* The editable pane renders tables inside a .tableWrapper div (prosemirror-tables
   TableView); the read-only pane renders them bare. Keep the wrapper but make it
   layout-invisible so the table's margins collapse exactly like the bare-table
   pane — otherwise each table adds a 16px scroll drift between the two panes. */
.tableWrapper { display: contents; }

/* 列宽拖拽手柄。prosemirror-tables 的 columnResizing 把 <div class="column-resize-handle">
   作为 widget 插进单元格末尾（absolute 定位），并把 resize-cursor 类挂到 .ProseMirror 上——
   没有下面这几条，手柄是 0 尺寸的隐形 div，用户既看不到也拖不到（"表格不能调列宽"）。
   单元格要成为定位祖先，手柄才会贴在它右边界上。只给可编辑的主文档加：
   对比栏是只读的（columnResizing 只在 editor.isEditable 时挂载）。
   right/bottom 取 0 而不是负值：docx-render.css 给单元格加了 overflow:hidden（内容不得画到
   单元格边框外），越界的部分会被裁掉，手柄必须落在单元格盒内。 */
#editor .ProseMirror td, #editor .ProseMirror th { position: relative; }
#editor .ProseMirror.resize-cursor { cursor: col-resize; }
#editor .ProseMirror .column-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  background-color: #4a90d9; pointer-events: none; z-index: 20;
}
#editor .ProseMirror .column-resize-dragging { background-color: #eaf4fd; }

/* 工具栏「行高」输入（表格组，作用于光标所在行）：与 .tb-zoom 同款小输入框。 */
.toolbar .tb-rowh { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #555; white-space: nowrap; }
.toolbar .tb-rowh input {
  width: 52px; padding: 4px 4px; border: 1px solid #d0d0d0; border-radius: 4px;
  font-size: 13px; text-align: right; background: #fff;
}
.toolbar .tb-rowh input:focus { outline: none; border-color: #e67e22; }
.toolbar .tb-rowh input:disabled { background: #f6f6f6; color: #aaa; }
body.toolbar-side .tb-rowh { justify-content: flex-end; }
/* Isolate each top-level block's layout: a keystroke then only re-resolves the edited
   block, not the whole 23k-node doc (typing cost ~17ms -> ~13ms). No counters or
   absolutely-positioned content in this editor, so layout/style containment is safe.
   The compare pane gets the same containment so both documents render identically. */
#editor .ProseMirror > *, #editor-compare .ProseMirror > * { contain: layout style; }
/* Comment tooltip for the read-only compare pane: hovering a <mark> highlight
   shows that comment's author/date/content (the marks only carry the range). */
.comment-tooltip {
  position: fixed; z-index: 1000; max-width: 320px;
  background: #fff; border: 1px solid #d0a72c; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px 10px;
  font-size: 12px; color: #34495e; pointer-events: none;
}
.comment-tooltip[hidden] { display: none; }
.comment-tooltip .ct-author { color: #2980b9; font-weight: 600; margin-bottom: 3px; }
.comment-tooltip .ct-text { word-break: break-all; }

/* Comment panel items in the sidebars (review left bar, compare, regular right bar). */
#m-comments .comment-item, #m-compare-comments .comment-item{ border: 1px solid #eee; border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; background: #fdfaf3; }
/* 批注栏中被选中的条目：左侧橙色指示条 + 浅橙底，与文档中的橙红高亮对应 */
#m-comments .comment-item.active, #m-compare-comments .comment-item.active{
  border-color: #e64a19;
  box-shadow: inset 3px 0 0 #e64a19;
  background: #fff3e0;
}
#m-comments .comment-meta, #m-compare-comments .comment-meta{ display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 12px; color: #7f8c8d; margin-bottom: 2px; }
#m-comments .comment-author, #m-compare-comments .comment-author{ color: #2980b9; }
/* 评审模式下 .sidebar-actions 的所有按钮已被 setupReviewToolbar() 搬到顶栏 #toolbar，
   留空的 .sidebar-actions 会让"批注"二字与上面"当前文档（可编辑）"之间多 14px 空隙。 */
body[data-mode="review"] .sidebar-actions { display: none; }
/* 批注正文默认含 word-break: break-all，但回复/合并内容中的换行（\n）会被折叠成空格，
   需 pre-line 让 \n 显式换行（避免对比批注栏里多条回复挤成一行看不清）。 */
#m-comments .comment-text, #m-compare-comments .comment-text{ font-size: 13px; color: #34495e; margin-bottom: 4px; word-break: break-all; white-space: pre-line; }
#m-comments .comment-actions, #m-compare-comments .comment-actions{ display: flex; gap: 6px; }
#m-comments .comment-actions button, #m-compare-comments .comment-actions button{ font-size: 12px; padding: 2px 8px; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff; cursor: pointer; }
#m-comments .comment-actions button:hover, #m-compare-comments .comment-actions button:hover{ background: #f0f0f0; }
#m-comments .empty, #m-compare-comments .empty{ font-size: 13px; color: #95a5a6; }
/* 回复区块：与原批注正文明显区分——左侧蓝色竖条 + 浅蓝底 + 标题“回复（N）”，
   避免原批注与回复混排看不清。 */
.comment-replies {
  margin-top: 8px;
  padding: 8px 8px 8px 10px;
  border-top: 1px dashed #e0e0e0;
  border-left: 3px solid #4a90d9;
  background: #f5f9fd;
  border-radius: 0 4px 4px 0;
}
.comment-replies-label {
  font-size: 11px; font-weight: 600; color: #4a90d9; margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.comment-reply { margin-bottom: 8px; }
.comment-reply:last-child { margin-bottom: 0; }
.comment-reply-meta { font-size: 11px; color: #7f8c8d; margin-bottom: 2px; }
.comment-reply-text { font-size: 12px; color: #34495e; word-break: break-all; white-space: pre-line; }

/* Mode-driven UI. The URL parameter ?mode=review switches between two
   appearances (scenarios 2+3 are merged into one review mode; ?mode=compare is
   an alias that also lands here):
   - legacy (no mode): full document-property sidebar, plus the document's own
     批注 above the properties; no compare UI;
   - review: comment-first sidebar (props hidden), plus 批注 tool, the
     compare-document button, the compare pane and sync-scroll.
   The compare pane itself stays side-by-side but collapsed until a document is
   loaded into it (see #col-compare[hidden]). */
#compare-load-wrap { display: flex; }
body[data-mode="legacy"] #compare-load-wrap,
body[data-mode="legacy"] #side-compare { display: none; }
body[data-mode="review"] #side-props { display: none; }
/* Comment bar: widened from the legacy 0.6x width (180px) to a roomier fixed-ish
   360px, growing a little with the viewport but capped so the A4 page stays the
   focus and centered in the remaining window. Compare mode lifts the cap so both
   bars absorb the leftover (see has-compare rules below). */
body[data-mode="review"] .sidebar {
  width: auto; flex: 1 1 180px; min-width: 180px; max-width: 360px;
}
/* Symmetric right sidebar for the compare document's comments: mirrors the left
   comment bar, but border on the outer edge and hidden until a doc is loaded. */
#side-compare { border-right: 0; border-left: 1px solid #ddd; padding: 0; }
#side-compare > .panel { padding: 14px; margin-bottom: 0; }
#side-compare[hidden] { display: none; }
/* 锁定侧边栏标题：
   - 当前文档侧边栏的“✕ 关闭 / 当前文档（可编辑）”标题行钉在栏顶。
   - 对比文档侧边栏仅“对比文档（只读）”标题条钉在栏顶；“对比批注”
     标题不固定，随批注列表一起滚动。 */
.compare-toolbar { position: sticky; top: 0; z-index: 5; }
/* 批注面板在所有模式都位于主侧边栏内（页面最右一列），不再单独开一列——
   否则会把“当前文档（可编辑）”侧边栏挤离右边缘。
   - 批注列表放在侧边栏所有组件最后，不固定高度、随内容自然撑开。
   - “＋ 新建批注”是 legacy 界面的入口；review 模式工具栏已有【批注】按钮，隐藏。 */
#m-comments { overflow-y: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head h3 { margin-bottom: 0; }
.btn-mini {
  padding: 2px 8px; border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; color: #2c3e50; font-size: 12px; cursor: pointer;
}
.btn-mini:hover { background: #eaf2f8; }
body[data-mode="review"] #btn-add-comment { display: none; }

/* AI 审核面板（评审侧栏）：标题 + 深度/快速 切换 + 执行按钮 精简为单行工具栏。
   仅 ReVal 在线评审/修改会话显示（AI_CTX 时 initAiReviewPanel 去掉 hidden）。 */
#ai-review-panel { margin-bottom: 14px; }
.ai-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ai-title {
  margin: 0; font-size: 13px; color: #7f8c8d; letter-spacing: .5px;
}
/* 深度/快速合并为一个切换按钮：快速为常态(白底)，深度为激活态(橙底)。 */
.ai-mode-btn {
  flex: none; min-width: 42px; padding: 3px 10px; border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; color: #2c3e50; font-size: 12px; cursor: pointer; line-height: 1.4;
}
.ai-mode-btn.active { background: #e67e22; border-color: #e67e22; color: #fff; }
.ai-mode-btn:hover:not(.active) { background: #f0f0f0; }
.ai-kb-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #7f8c8d; cursor: pointer; white-space: nowrap;
}
.ai-kb-toggle input { margin: 0; cursor: pointer; }
.ai-run {
  margin-left: auto; padding: 3px 12px; white-space: nowrap;
}
.ai-review-msg { margin-top: 8px; font-size: 12px; color: #7f8c8d; line-height: 1.4; }
.ai-review-msg.running { color: #2980b9; }
.ai-review-msg.error { color: #c0392b; }

/* Review mode always renders every page at real A4 width (210mm). Without a
   compare document the widened comment bar sits left and the A4 page is centered
   in the remaining window; with one, the has-compare rules hand the leftover
   width to the two comment bars (cap lifted) so the pages flank them. The scroll
   columns add 20px each side of page padding, so a 210mm page needs a
   calc(210mm + 40px) column.
   flex: 0 0 (no shrink): the A4 page must never be compressed below real A4
   width, or line wrapping drifts from the printed page. If the pane is narrower
   than the page, .stage-cols scrolls horizontally instead (see below). */
body[data-mode="review"] #col-main {
  flex: 0 0 var(--page-col-width); width: var(--page-col-width); border-right: 0;
  margin-left: auto; margin-right: auto;
}
/* Legacy (default) mode renders the same A4 page, centered in the space right of
   the fixed 300px properties sidebar (margin:auto absorbs the leftover, so the
   page — not the sidebar — is centered). The document then matches Word's A4
   print layout in every mode, not just ?mode=review. */
body[data-mode="legacy"] #col-main {
  flex: 0 0 var(--page-col-width); width: var(--page-col-width); border-right: 0;
  margin-left: auto; margin-right: auto;
}
/* The two pages sit 48px apart (20px scroll padding + 8px gap on both sides), so
   no separator line is needed — and a border on only one column would make that
   column's content box 1px narrower (box-sizing:border-box), flipping line wraps
   in a mixed-width report and drifting the two panes' heights apart by the bottom. */
body.has-compare .stage { flex: 1 1 auto; min-width: 0; }
body.has-compare .stage-cols { gap: 8px; }
/* With two pages, center the pair as a group: auto margin only on the outer edges
   (first item's left + last item's right), so the 8px gap stays between the pages
   and a too-narrow pane drops both margins to 0 (pages align to the start and
   scroll) instead of clipping. */
body.has-compare #col-main { margin-right: 0; }
body.has-compare #col-compare {
  flex: 0 0 var(--page-col-width); width: var(--page-col-width);
  margin-left: 0; margin-right: auto;
}
body.has-compare[data-mode="review"] .sidebar { max-width: none; }
/* Compare 模式下把主批注侧边栏（默认在右侧）移到文档左侧，形成
   「批注(左) | 文档 | 对比批注(右)」对照布局；单文档（无 has-compare）不受影响。
   拖拽条一并移到左侧，紧贴侧栏右缘。flex 子项用 order 重排。 */
body.has-compare #main-sidebar { order: -2; }
body.has-compare #sidebar-resizer { order: -1; }
/* 双栏（当前文档批注 + 对比批注）同时出现时，让两侧等宽——拖拽条调的是
   #main-sidebar 宽度并同步 --sidebar-width，这里让 #side-compare 复用同一变量，
   形成左右对称、位置均衡的对照布局。 */
body.has-compare #main-sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
}
/* 对比文档侧边栏宽度由独立的 --compare-width 控制（默认 300px），与主侧栏的
   --sidebar-width 解耦，各自可独立拖拽调宽。仅在打开对比文档时出现其拖拽条。 */
body.has-compare #side-compare {
  flex: 0 0 var(--compare-width, 300px);
  width: var(--compare-width, 300px);
}
/* 对比栏独立拖拽条：位于对比栏左缘（与编辑区之间）。默认隐藏，仅 has-compare 时显示。 */
#compare-resizer {
  width: 5px; flex: none; cursor: col-resize; background: #ddd; z-index: 6;
  transition: background .15s;
}
#compare-resizer:hover,
#compare-resizer.dragging { background: #e67e22; }
body:not(.has-compare) #compare-resizer { display: none; }
.btn-close-compare {
  margin-left: auto; padding: 4px 10px;
  border: 1px solid #d0d0d0; border-radius: 4px;
  background: #fff; color: #555; cursor: pointer; font-size: 12px;
  white-space: nowrap; flex: none;
}
.btn-close-compare:hover { background: #fdecea; color: #c0392b; border-color: #c0392b; }

/* Sync-scroll is meaningless until a second document is loaded; keep the button
   out of the toolbar until a compare document is open (has-compare). */
#tb-syncscroll { display: none; }
body.has-compare #tb-syncscroll { display: inline-block; }
/* The 批注 tool is the review-mode headline action; render it as the primary
   (orange) button instead of a plain toolbar chip so it stands out. */
#tb-comment {
  background: #e67e22; border-color: #e67e22; color: #fff;
  font-weight: 600; padding: 6px 16px;
}
#tb-comment:hover { background: #d35400; border-color: #d35400; }

/* Review-mode action buttons moved from the right sidebar into the toolbar.
   In horizontal mode they sit inline; in vertical mode they stack full-width.
   Preserve the original green/primary colors. */
#toolbar .btn.green { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
#toolbar .btn.green:hover { background: #c8e6c9; border-color: #81c784; }
#toolbar .btn.primary { background: #e67e22; border-color: #e67e22; color: #fff; }
#toolbar .btn.primary:hover { background: #d35400; border-color: #d35400; }
#toolbar .btn { display: inline-block; }
#toolbar .tb-action {
  display: inline-block;
  background: #eaf2f8;
  border-color: #d0d0d0;
  color: #2c3e50;
}
#toolbar .tb-action:hover { background: #d4e4f2; }
body.toolbar-side #toolbar .btn,
body.toolbar-side #toolbar .tb-action,
body.toolbar-side #toolbar #compare-load-wrap,
body.toolbar-side #toolbar #compare-load-wrap .btn { display: block; width: 100%; text-align: center; }

/* ===== ReVal 在线评审/在线修改(html[data-online])顶栏统一布局 =====
   在线评审: 功能栏单行,暂存/提交/打印 PDF 靠左、其余靠右;
   在线修改: 功能栏两行,第一行文档操作、第二行批注+编辑键;
   去除侧栏「文档名称」「页面设置」「页眉页脚」面板与文档操作区; 隐藏「手动对比」。 */
body[data-online] .sidebar-actions { display: none; }
body[data-online] #side-props { display: none; }
body[data-online] #tb-manual-compare { display: none !important; }

/* 单行布局(在线评审)的弹性留白:把右侧控件推向最右 */
.toolbar .tb-doc-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* 两行布局(在线修改)的两条子行;每行横向 wrap,按钮多时换行不溢出 */
.toolbar .tb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.toolbar .tb-row button { white-space: nowrap; }
.toolbar .tb-row-actions {
  /* 第一行文档操作: 独占整行,视觉上稍作区隔 */
  flex: none;
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 1px solid #eef0f2;
}
.toolbar .tb-row-edit { flex: 1 1 auto; }
body.toolbar-side .toolbar .tb-row {
  flex-direction: column;
  align-items: stretch;
}
.toolbar .tb-menu {
  display: inline-flex;
  align-items: center;
}
.toolbar .tb-menu-btn {
  white-space: nowrap;
}
.tb-menu-pop {
  position: fixed;
  z-index: 1200;
  box-sizing: border-box;
  max-height: 72vh;
  overflow: auto;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
}
.tb-menu-pop .panel {
  background: transparent;
}
.tb-menu-pop .acc-body label {
  min-width: 0;
}