/* ============================================================
   知识系统 —— 样式
   2026-09-28 视觉统一重做（用户反馈"知识系统的按钮太丑了"）。

   参考与融合：
     · Linear / Vercel 的工具栏：按钮分「主按钮（实心）/ 次按钮（浅灰描边）」两级，
       高度统一 30px、圆角 8px、过渡 .15s，hover 只做很轻的位移与加深
     · Notion / 飞书的侧栏：条目用圆角矩形 + 半透明悬停，选中用"浅色底 + 深色字 + 左侧色条"，
       不再用大块实心蓝压在文字上
     · Element Plus 的控件：2px 描边表示选中，字号层级 15/14/13/12
     · Ant Design 的语义色：#2f6fe4 主蓝、#eaf1ff 浅蓝底、#d8e2f1 描边、#1f2733 主文字

   功能选择器（#ksNotesTitle、#ksNoteCards、#ksNoteEditor、.ks-nav-*、.ks-note-*、
   #ksImgTools、#ksBtn* 等）全部保持原样，只动外观。
   ============================================================ */

:root {
  --ks-primary: #2f6fe4;
  --ks-primary-hover: #2a63cc;
  --ks-primary-soft: #eaf1ff;
  --ks-primary-soft-2: #dbe8ff;
  --ks-line: #e3e8f0;
  --ks-line-soft: #eef1f6;
  --ks-text: #1f2733;
  --ks-text-2: #5b6673;
  --ks-text-3: #8a94a3;
  --ks-surface: #ffffff;
  --ks-surface-2: #f7f8fa;
  --ks-radius: 8px;
  --ks-radius-lg: 10px;
  --ks-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --ks-shadow-up: 0 1px 3px rgba(16, 24, 40, .10);
}

/* ---------- 按钮：全站统一的两级按钮 ----------
   注意：这里的选择器一律不带 #view-knowledge。带 ID 的话优先级变成 (1,0,1)，
   会盖住左侧栏 .ks-nav-page / .ks-nav-map（(0,1,0)）自己的外观 ——
   实测就是"侧栏按钮被撑成 30px 白底"，靠调整源码顺序都救不回来。 */
#ksPageTools button,
.ks-note-page button,
#ksFormulaMask button {
  font: 500 13px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  height: 30px; padding: 0 13px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-surface);
  color: var(--ks-text);
  cursor: pointer;
  box-shadow: var(--ks-shadow);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
}
#ksPageTools button:hover,
.ks-note-page button:hover,
#ksFormulaMask button:hover {
  background: #f3f6fb; border-color: #ccd8e8; color: var(--ks-text);
}
#ksPageTools button:active,
.ks-note-page button:active,
#ksFormulaMask button:active { background: #eaeff7; box-shadow: none; }
#ksPageTools button:focus-visible,
.ks-note-page button:focus-visible,
#ksFormulaMask button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(47, 111, 228, .20);
  border-color: var(--ks-primary);
}
/* 主按钮：只给"新建 / 保存"这类主动作用。
   注意 index.html / ks.js 里为了沿用老样式，按钮上还带着 class="gray"，
   所以这里要同时用类名写法把它盖回去。 */
#ksPageTools button.primary,
#ksPageTools button.gray.primary,
.ks-note-page button.primary,
.ks-note-page button.gray.primary {
  background: var(--ks-primary); border-color: var(--ks-primary); color: #fff;
  box-shadow: 0 1px 2px rgba(47, 111, 228, .35);
}
#ksPageTools button.primary:hover,
#ksPageTools button.gray.primary:hover,
.ks-note-page button.primary:hover,
.ks-note-page button.gray.primary:hover {
  background: var(--ks-primary-hover); border-color: var(--ks-primary-hover); color: #fff;
}
/* 危险按钮（删除图片等） */
#ksPageTools button.danger,
.ks-note-page button.danger,
#ksFormulaMask button.danger {
  color: #d64545; border-color: #f0cccc; background: #fff; box-shadow: none;
}
#ksPageTools button.danger:hover,
.ks-note-page button.danger:hover,
#ksFormulaMask button.danger:hover { background: #fdf1f1; border-color: #e7b4b4; color: #c53030; }
/* 右下角的「插入」按钮是弹窗里的主按钮 */
#ksFormulaMask button#ksFormulaOk {
  background: var(--ks-primary); border-color: var(--ks-primary); color: #fff;
  box-shadow: 0 1px 2px rgba(47, 111, 228, .35);
}
#ksFormulaMask button#ksFormulaOk:hover { background: var(--ks-primary-hover); border-color: var(--ks-primary-hover); }

/* ---------- 左侧内部导航 ----------
   结构：页面按钮（初中物理 / 高中物理）
        → 当前页的导图条目（◈ / ▸，选中＝浅蓝底 + 左侧色条）
        → 该图下面有笔记的节点（└ 条目，正在看的那篇加深） */
.ks-split { display: flex; gap: 10px; align-items: stretch; }
/* 收起左栏：用户 2026-09-28 说"收起左栏不要"，按钮已全部撤掉；
   这个类留着（给 .ks-split 加 rail-off 就能一键收起左栏），哪天想恢复直接加按钮即可。 */
.ks-split.rail-off .ks-nav { display: none; }
.ks-nav {
  /* 2026-09-28：按用户要求加宽到能放下 20 个字 —— 一行 20 个汉字 × 13px ≈ 260px，
     加上条目内边距和左右留白，322px 正好。以前 148px 只放得下 10 个字，
     「2.匀变速直线运动」这类名字会折成两行。 */
  flex: 0 0 322px; width: 322px; box-sizing: border-box;
  background: var(--ks-surface-2);
  border: 1px solid var(--ks-line-soft); border-radius: var(--ks-radius-lg);
  padding: 8px 8px 10px; overflow-y: auto; overflow-x: hidden;
  /* 高度跟着右边的画布走（以前写死 72vh，比画布矮一截，看着像没对齐） */
  align-self: stretch; max-height: 78vh;
}
.ks-nav::-webkit-scrollbar { width: 8px; }
.ks-nav::-webkit-scrollbar-thumb { background: #d8dee8; border-radius: 4px; }

.ks-nav-page {
  display: flex; box-sizing: border-box; width: 100%; margin: 2px 0;
  height: auto; padding: 8px 10px; box-shadow: none;
  text-align: left; white-space: normal; overflow: hidden; word-break: break-word;
  /* 顶部的全局 `button { background:#1f6feb; color:#fff; padding:8px 16px }` 也会命中
     侧栏里的这些 <button>，所以这里把它按需要覆盖掉。 */
  border: none; border-radius: var(--ks-radius);
  background: transparent; color: var(--ks-text-2); cursor: pointer;
  font: 500 14px/18px "Microsoft YaHei", "PingFang SC", sans-serif;
  transition: background .15s, color .15s, box-shadow .15s;
}
.ks-nav-page:hover { background: #eceff4; color: var(--ks-text); }
.ks-nav-page.active {
  background: var(--ks-surface); color: var(--ks-primary);
  font-weight: 700; box-shadow: var(--ks-shadow-up);
}
.ks-nav-page.active:hover { background: var(--ks-surface); }
.ks-nav-page .ks-nav-pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ks-nav-page.active .ks-nav-caret { border-left-color: var(--ks-primary); }

/* 折叠三角：当前页 ▾ 展开 / ▸ 收起，其它页 ▸
   2026-09-28 起三角改用 CSS 画（border 三角），不再依赖字体里的 ▸/▾ 字形 ——
   实测那个小字形在选中框旁边几乎看不见。 */
.ks-nav-caret {
  display: inline-block; width: 11px; font-size: 10px; opacity: .95; margin-right: 3px;
  flex: 0 0 auto;
}
/* 导图条目上的三角：展开时朝下、收起时朝右 */
.ks-nav-map .ks-nav-caret {
  width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #9aa8bd;
  margin: 7px 5px 0 1px; opacity: 1; transition: border-color .15s;
}
.ks-nav-map:hover .ks-nav-caret { border-left-color: var(--ks-primary); }
.ks-nav-map.open .ks-nav-caret {
  border-width: 6px 4px 0 4px; border-color: var(--ks-primary) transparent transparent transparent;
  margin-top: 9px;
}

.ks-nav-map, .ks-nav-note {
  position: relative; box-sizing: border-box; display: flex; gap: 5px;
  align-items: flex-start; margin: 2px 0; padding: 7px 8px 7px 10px;
  border-radius: var(--ks-radius); cursor: pointer; overflow: hidden;
  font: 14px/20px "Microsoft YaHei", "PingFang SC", sans-serif;
  word-break: break-word;
  transition: background .15s, color .15s;
}
.ks-nav-map { background: transparent; color: #3c4c63; }
.ks-nav-map::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: transparent; border-radius: 0 2px 2px 0;
  transition: background .15s;
}
.ks-nav-map:hover { background: #eceff4; color: var(--ks-text); }
.ks-nav-map:hover::before { background: #c3cfe2; }
/* 选中：浅蓝底 + 深蓝字 + 左侧色条（Notion / 飞书 侧栏的做法，不再压一大块实心蓝） */
.ks-nav-map.sel {
  background: var(--ks-primary-soft); color: #1c4fae; font-weight: 700;
  box-shadow: none;
}
.ks-nav-map.sel::before { background: var(--ks-primary); }

.ks-nav-note {
  background: transparent; color: var(--ks-text-2); font-size: 13px; line-height: 19px;
  margin-left: 16px; padding-left: 9px;
}
.ks-nav-note::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: #d7dee9; border-radius: 0 2px 2px 0; transition: background .15s;
}
.ks-nav-note:hover { background: #eceff4; color: var(--ks-text); }
/* 正在看／正在写的那个节点笔记：加深颜色表示"当前就在这一篇"
   （用户反馈"点击节点笔记时没有颜色加深表示正在节点笔记的位置"） */
.ks-nav-note.sel {
  background: var(--ks-primary-soft-2); color: #1b4aa8; font-weight: 700;
}
.ks-nav-note.sel::before { background: var(--ks-primary); }
.ks-nav-icon { flex: 0 0 auto; color: var(--ks-primary); }
.ks-nav-note .ks-nav-icon { color: #aab6c8; }
.ks-nav-note.sel .ks-nav-icon { color: var(--ks-primary); }
.ks-nav-txt { flex: 1 1 auto; min-width: 0; }
.ks-nav-empty {
  color: var(--ks-text-3); font-size: 12px; line-height: 18px;
  text-align: center; padding: 12px 8px;
}

/* ---------- 画布顶部的状态 / 操作提示行 ----------
   固定一行高，可以整行收起（只留一个很窄的「操作提示与状态 ▾」按钮）。
   写成 nowrap + 省略号，免得窗口一窄就换行、白占一行高度。 */
#ksStageHint {
  height: 30px; line-height: 18px; overflow: hidden; white-space: nowrap;
  background: var(--ks-surface-2); border: 1px solid var(--ks-line-soft);
  border-radius: var(--ks-radius); padding: 2px 6px 2px 10px;
}
#ksStageHint > span { overflow: hidden; text-overflow: ellipsis; }
#ksStatus { color: var(--ks-text-2); }
#ksBtnHideTip, #ksBtnShowTip { flex: 0 0 auto; height: 24px; padding: 0 9px; font-size: 12px; }

/* ---------- 画布 ---------- */
#ksStage {
  position: relative; overflow: hidden; height: 66vh; min-height: 380px;
  border: 1px solid var(--ks-line); border-radius: var(--ks-radius-lg);
  background: #fbfcfe;
  cursor: grab; user-select: none;
}
#ksStage:active { cursor: grabbing; }
#ksWorld { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
#ksLinks { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#ksNodes { position: absolute; left: 0; top: 0; }

/* 节点卡片 */
.ks-node {
  position: absolute; box-sizing: border-box;
  background: #fff; border: 1px solid #ccd5e0; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
  font: 600 16px/24px "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ks-text); white-space: pre; overflow: hidden;
  padding: 6px 12px; display: flex; align-items: center;
  cursor: move;
  transition: box-shadow .15s, border-color .15s;
}
.ks-node:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .14); }
.ks-node.sel {
  border-color: var(--ks-primary); border-width: 2px;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .18), 0 2px 6px rgba(16, 24, 40, .12);
}
.ks-note-badge {
  position: absolute; right: -6px; top: -8px;
  background: var(--ks-primary); color: #fff; border-radius: 9px;
  font: 500 11px/16px "Microsoft YaHei", sans-serif;
  padding: 0 6px; box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  pointer-events: none;
}
.ks-plus {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ks-primary); color: #fff; font: 700 17px/26px Arial, sans-serif;
  text-align: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(47, 111, 228, .40);
  user-select: none;
  transition: background .15s, transform .15s;
}
.ks-plus:hover { background: var(--ks-primary-hover); transform: scale(1.06); }

/* 画布浮动控件（缩放条） */
.ks-float {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--ks-line);
  border-radius: 20px; padding: 6px 5px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .10);
  backdrop-filter: blur(4px);
}
.ks-float-btn {
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: #fff; color: var(--ks-text-2);
  border: 1px solid var(--ks-line);
  font: 500 16px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ks-float-btn:hover { background: var(--ks-primary-soft); color: var(--ks-primary); border-color: #bfd3f7; }
.ks-float-label { font-size: 10px; color: var(--ks-text-3); }

/* 重命名输入框（覆盖在节点上） */
.ks-rename {
  position: absolute; box-sizing: border-box; z-index: 20;
  border: 2px solid var(--ks-primary); border-radius: 10px; background: #fff;
  font: 600 16px/24px "Microsoft YaHei", sans-serif; text-align: center;
  padding: 4px; resize: none; outline: none; overflow: hidden;
  color: var(--ks-text);
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .15);
}

/* 右键菜单 */
.ks-menu {
  position: fixed; z-index: 3000; min-width: 160px;
  background: #fff; border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-lg);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
  padding: 5px; font: 14px/1.4 "Microsoft YaHei", sans-serif;
}
.ks-menu-item {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--ks-text);
  transition: background .12s, color .12s;
}
.ks-menu-item:hover { background: var(--ks-primary-soft); color: #1c4fae; }
.ks-menu-item.danger { color: #d64545; }
.ks-menu-item.danger:hover { background: #fdf1f1; color: #c53030; }
.ks-menu-sep { height: 1px; background: var(--ks-line-soft); margin: 4px 6px; }

/* ---------- 节点笔记页 ----------
   2026-09-25：进入"修改/新建笔记"后编辑器要【铺满整页】（以前挤在卡片列表下面只有 46vh 高）。
   2026-09-28：真的按窗口高度铺满（height: calc(100vh - …)），编辑器自己滚动；
   进入编辑时（#ksCard.ks-card-editing）把「知识系统」标题行和顶部工具栏藏起来，
   让整页不再出现纵向滚动条 —— 整页不能滚，光标就不会被带着往下跑。
   高度取值说明：卡片顶在视口 y≈128 处，下面是卡片下内边距 + 页面底边距，
   所以 144 / 152 这两个数字是按最坏情况留足余量算出来的（宁矮 2px，不留滚动条）。 */
/* 笔记页
   2026-09-28：查看已保存笔记时改成"内容多长就显示多长" —— 不再固定高度、
   也不在卡片内部做滚动条。整页跟着内容变高，由窗口滚动条翻页。
   （编辑笔记时仍由 JS 按窗口算高度，见下面的 .editing 规则） */
/* 看笔记时：让笔记页脱离左右分栏的高度束缚。
   原因：#ksSplit 是 flex 行、高度由右边画布（66vh）决定，笔记页作为 flex 子项被
   stretch 压在那个高度里 —— 于是白底边框只有一屏高，长笔记的内容溢出到框外。
   这里在"分栏里出现了笔记页"时（:has）改成 align-self:flex-start + height:auto，
   笔记页就能按内容自然长高，整页由窗口滚动条翻。
   注意【只能动高度】：flex 保持 1 1 auto（宽度还要靠它自适应），
   写成 0 0 auto 会让它不能收缩、整页多出一条横向滚动条。
   （写笔记时下面 .ks-note-page.editing 会把高度覆盖成按窗口算的一屏，不受影响） */
.ks-split:has(.ks-note-page) .ks-note-page {
  align-self: flex-start; height: auto; max-height: none;
}
.ks-note-page {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  background: var(--ks-surface); border: 1px solid var(--ks-line-soft);
  border-radius: var(--ks-radius-lg);
  padding: 10px 12px; margin-left: 6px;
  min-height: 300px;
  /* 内容多长就多长；白底边框要包得住，所以不能裁剪 */
  overflow: visible;
  display: flex; flex-direction: column;
}
/* 编辑中：上面那行「知识系统 + 新建导图/立即保存」先收起来（笔记页自己带按钮） */
#ksCard.ks-card-editing > .row:first-child { display: none; }
#ksCard.ks-card-editing { padding: 12px 14px; }
/* 看/写节点笔记时，整条顶部工具栏也收起来：画布已经收起来了，那些按钮没有意义 */
#ksCard.ks-card-editing #ksPageTools { display: none; }
/* 兜底：万一 :has() 不可用（正常不会走到），由 renderTools 直接把这几个元素隐藏 */
#ksCard.ks-card-editing #ksStageHint,
#ksCard.ks-card-editing #ksBtnShowTip { display: none !important; }
/* 注意：这里原本是 #ksCard.ks-card-editing .ks-note-page —— 但"看笔记"时
   ks-card-editing 也在（它表示"知识系统切到笔记视图"），于是 height: calc(100vh - 152px)
   会把笔记页锁死在一屏高，长笔记只能溢出到白底边框外面。
   现在只在【真的打开了编辑器】（.ks-note-page.editing）时才按窗口算一屏高度。 */
#ksCard.ks-card-editing .ks-note-page { margin-left: 0; padding: 8px 12px; }
/* 真的在写笔记时：固定成"一屏高"并裁掉多余部分（编辑器自己滚）。
   选择器要带上 :has(...) 那一段，否则优先级不够、被上面的查看态规则盖掉。 */
.ks-split:has(.ks-note-page) .ks-note-page.editing,
.ks-note-page.editing { height: calc(100vh - 152px); max-height: none; overflow: hidden; align-self: stretch; }
.ks-split.rail-off .ks-note-page { margin-left: 0; }
/* 卡片列表：不再自己滚 —— 全部展开，交给窗口滚动条 */
.ks-note-page .ks-note-cards { flex: 0 0 auto; margin-bottom: 4px; }
/* 正在编辑：卡片列表让位，编辑器独占整页 */
.ks-note-page.editing .ks-note-cards { display: none; }
/* 编辑器容器要自己变成竖向 flex，里面的输入区才能"生长"铺满整页 */
.ks-note-page.editing #ksNoteEdit {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.ks-note-page.editing #ksNoteEditor {
  flex: 1 1 auto; min-height: 0; max-height: none; font-size: 15px; line-height: 1.9;
  /* 明确高度，让滚动条真正生效；同时不让它的内容去撑高页面
     （之前靠 contain:paint 压住，但 contain:paint 会让原生滚动不可靠，已去掉）。 */
  height: 100%;
}
#ksBtnBackMap { white-space: nowrap; }

/* 笔记页头部（标题 + 按钮）。按钮直接排开：新建笔记 / 插入图片 / 插入公式 / 返回导图 */
.ks-note-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-note-head b { font-size: 15px; color: var(--ks-text); }
.ks-note-head button, .ks-note-tools button { height: 30px; }
#ksImgTools #ksImgWidth { width: 76px; display: inline-block; margin: 0 2px; padding: 3px 6px; font-size: 12px; }
/* 编辑器自己那一行小工具 */
.ks-note-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--ks-line);
}
.ks-note-tools b { font-size: 13px; color: var(--ks-text-2); margin-right: 2px; }
.ks-note-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; flex: 0 0 auto;
}

/* 节点笔记卡片
   2026-09-28：正文加限高 + 内部滚动。
   用户反馈"写好的节点笔记保存以后有一部分看不到" —— 实测原因（线上真实数据量出来的）：
   · .ks-note-cards 是 flex 纵向容器，卡片作为 flex 子项默认 flex-shrink:1，
     会被压缩到 397px，而卡片是 overflow:hidden；
   · 卡片正文 max-height 是 60vh（约 505px），正文实际 437px 比卡片还高，
     于是被卡片裁掉一截，而正文自己"内容刚好等于自身高度"→ 没有滚动条、也滚不动。
   修法：① 卡片不许被压缩（flex:0 0 auto），卡片高度就由标题行+正文决定；
        ② 正文限高可滚（下面那条规则），内容超出时出现滚动条。 */
.ks-note-cards { display: flex; flex-direction: column; gap: 8px; }
.ks-note-card {
  border: 1px solid var(--ks-line-soft); border-radius: var(--ks-radius-lg);
  background: #fff; overflow: hidden;
  flex: 0 0 auto;                      /* 关键：不要被 flex 压扁 */
  transition: border-color .15s, box-shadow .15s;
}
.ks-note-card:hover { border-color: #d5dfec; box-shadow: var(--ks-shadow); }
.ks-note-card-hd {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border-bottom: 1px solid var(--ks-line-soft);
  background: var(--ks-surface-2);
}
.ks-note-card-hd b { color: var(--ks-text-2); font-size: 13px; }
.ks-note-card-hd button { height: 26px; padding: 0 10px; font-size: 12px; box-shadow: none; }
.ks-note-card-body {
  padding: 10px 12px; font-size: 14px; line-height: 1.75; word-break: break-word; color: #2b3440;
  /* 不限高、不滚动：笔记有多长就显示多长（整页跟着变高） */
  overflow: visible;
  overflow-anchor: none;
}
.ks-note-editor {
  min-height: 260px; max-height: 46vh; overflow: auto;
  /* 底部留 40px 空白：光标最后一行也能停在视口里，不会被压在边线上 */
  border: 1px solid var(--ks-line); border-radius: var(--ks-radius-lg);
  padding: 14px 16px 40px;
  font: 15px/1.9 "Microsoft YaHei", sans-serif; background: #fff; outline: none;
  white-space: pre-wrap; word-break: break-word; color: var(--ks-text);
  overscroll-behavior: contain;           /* 滚到头的继续滚动不要带动整页 */
  transition: border-color .15s, box-shadow .15s;
  /* position:relative 是把编辑框里"绝对定位的跑冒滴漏"关在框内 —— 实测 KaTeX 公式里
     隐藏的那块 MathML（span.katex-mathml，absolute）会把定位基准找到文档根上，
     一跑到文档最底部就把整页高度撑到 2000+px，于是"整页能滚 → 浏览器为露出光标把整页往下推"。
     以前是靠 contain:paint 压住的，但 contain:paint 会让原生滚动变得不可靠
     （用户反馈"光标还是不能滚动上移"多半就是它），所以换成 position:relative。 */
  position: relative;
  overflow-anchor: none;
}
.ks-note-editor:focus {
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
}
.ks-note-editor::-webkit-scrollbar { width: 12px; }
.ks-note-editor::-webkit-scrollbar-thumb { background: #ccd4e0; border-radius: 6px; border: 3px solid #fff; }
.ks-note-editor::-webkit-scrollbar-thumb:hover { background: #b3bfd0; }
.ks-note-img { max-width: 100%; vertical-align: middle; border-radius: 6px; cursor: pointer; margin: 2px 0; }
.ks-math { cursor: pointer; padding: 0 2px; border-radius: 4px; transition: background .15s; }
.ks-math:hover { background: var(--ks-primary-soft); }
.ks-note-card-body .ks-note-img { cursor: default; }

/* 公式预设按钮 */
#ksFormulaPresets button { height: 26px; padding: 0 10px; font-size: 12px; box-shadow: none; }

/* ---------- 节点笔记附件（docx / md / pdf …）----------
   笔记里显示成一条可点击的文件条：点文件名用电脑里的软件打开，
   md/txt 可"预览"，另可"下载"，编辑时还有 × 移除。 */
.ks-note-file {
  display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap;
  margin: 2px 2px; padding: 2px 6px 2px 8px;
  background: #f2f7ff; border: 1px solid #cfe0f7; border-radius: 999px;
  font-size: 13px; line-height: 1.7; vertical-align: middle; max-width: 100%;
}
.ks-note-file-open {
  cursor: pointer; color: #1f5fbf; text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all;
}
.ks-note-file-open:hover { color: #0f47a0; }
.ks-note-file-btn {
  cursor: pointer; color: #5a6b80; font-size: 12px;
  padding: 0 5px; border-radius: 999px; white-space: nowrap;
}
.ks-note-file-btn:hover { background: #dbe8fb; color: #1f5fbf; }
.ks-note-file-btn.del { color: #c0392b; font-weight: 700; }
.ks-note-file-btn.del:hover { background: #fdecea; color: #a5281b; }
.ks-note-card-body .ks-note-file { cursor: default; }

/* 附件预览弹窗（md/txt 直接在网页里读，不用装软件） */
.ks-file-mask {
  position: fixed; inset: 0; z-index: 700; background: rgba(15, 22, 33, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ks-file-dlg {
  background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
  width: min(960px, 96vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.ks-file-dlg-hd {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--ks-line-soft); background: var(--ks-surface-2);
}
.ks-file-dlg-hd b { font-size: 14px; word-break: break-all; }
.ks-file-dlg-body {
  padding: 16px 20px 22px; overflow: auto; font-size: 14px; line-height: 1.8; color: #2b3440;
}
.ks-file-dlg-body h1 { font-size: 19px; margin: 10px 0 6px; }
.ks-file-dlg-body h2 { font-size: 17px; margin: 10px 0 6px; }
.ks-file-dlg-body h3 { font-size: 15px; margin: 8px 0 4px; }
.ks-file-dlg-body ul { margin: 4px 0 8px; padding-left: 22px; }
.ks-file-dlg-body blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid #cfe0f7; color: #55637a; background: #f8fbff; }
.ks-md-pre {
  background: #f6f8fb; border: 1px solid #e6ecf5; border-radius: 8px;
  padding: 10px 12px; font-family: Consolas, "Courier New", monospace; font-size: 13px;
  white-space: pre-wrap; word-break: break-word; margin: 6px 0;
}
.ks-file-dlg-body code { background: #f0f4f9; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* KaTeX 公式不要被行高裁掉 */
.katex { font-size: 1.06em; }
.katex-display { margin: 4px 0; }