/* ===== mindmap-notes.css：思维导图「画布笔记」全屏笔记页（js/mindmap-notes.js） =====
   全屏形态：#mnPage fixed inset:0 占满整页（相当于第二个详细视图），盖住顶栏与画布，专笔记事。
   z-index 1500 —— 高于 appHeader(1000) 与其页面内元素，低于 globalToast(2000) 与 user-notes.js 的 un-toast(100002)，提示始终可见。
   布局：头部标题栏（标题 + 保存 + ✕）→ 上部编辑区卡片（Quill 富文本，工具栏含图片/语音/撤销重做）→ 下部按节点分组的笔记列表（独立滚动）。
   风格对齐 mindmap.css：CSS 变量（--mp-* 主题可覆盖）、圆角卡片、阴影、紫色主色。 */

#mnPage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1500; display: none; flex-direction: column; background: var(--mp-bg-canvas, #f0f2f6); color: var(--mp-text, #2d3748); padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
#mnPage.open { display: flex; }

/* 顶部标题栏：📝 画布笔记 —— 画布名 ｜ 💾 保存 ✕ */
#mnPage .mn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; background: var(--mp-bg-card, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.08); flex: 0 0 auto; }
#mnPage .mn-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mnPage .mn-head-ops { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#mnPage .mn-save { border: none; border-radius: 8px; padding: 8px 18px; font-size: 14px; cursor: pointer; font-weight: 600; background: var(--mp-primary, #5a67d8); color: #fff; }
#mnPage .mn-save:hover { background: var(--mp-primary-hover, #4c51bf); }
#mnPage .mn-save:disabled { opacity: .6; cursor: not-allowed; }
#mnPage .mn-close { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--mp-text-secondary, #718096); padding: 4px 10px; border-radius: 6px; }
#mnPage .mn-close:hover { background: var(--mp-border, #edf2f7); }

/* body：上部编辑区卡片（固定高度段）+ 下部笔记列表（flex:1 独立滚动） */
#mnPage .mn-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow: hidden; }

/* 编辑区卡片 */
#mnPage .mn-editor { flex: 0 0 auto; display: flex; flex-direction: column; background: var(--mp-bg-card, #fff); border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.08); padding: 10px 16px 12px; }
#mnPage .mn-ctx-row { margin-bottom: 8px; }
#mnPage .mn-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: rgba(90,103,216,.1); color: var(--mp-primary, #5a67d8); font-size: 13px; font-weight: 600; padding: 4px 6px 4px 12px; border-radius: 16px; }
#mnPage .mn-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mnPage .mn-chip-x { border: none; background: transparent; color: var(--mp-text-secondary, #a0aec0); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 50%; }
#mnPage .mn-chip-x:hover { color: #e53e3e; background: rgba(0,0,0,.06); }
#mnPage .mn-edit-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--mp-primary, #5a67d8); font-weight: 600; }
#mnPage .mn-link { border: none; background: transparent; color: var(--mp-text-secondary, #718096); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
#mnPage .mn-link:hover { color: var(--mp-text, #2d3748); }

/* Quill 工具栏（snow 主题加 .ql-toolbar.ql-snow）：收进卡片，去四边框只留底线，按钮可换行 */
#mnPage #mnToolbar.ql-toolbar { flex: 0 0 auto; border: none; border-bottom: 1px solid var(--mp-border, #e8ecf1); padding: 4px 2px 8px; flex-wrap: wrap; }
#mnPage #mnToolbar .ql-formats { margin-right: 10px; }
/* 自定义按钮（图片/语音/撤销/重做）内嵌 app-icons 简笔画：与 Quill 默认图标同尺寸同灰色 */
#mnPage #mnToolbar button .app-icon { width: 18px; height: 18px; vertical-align: -3px; }
/* 语音按钮录音中：红 + 呼吸闪烁（voice-pulse 关键帧在 mindmap.css，同页可用） */
#mnPage #mnToolbar .ql-mnVoice.recording { color: #e53e3e; }
#mnPage #mnToolbar .ql-mnVoice.recording .app-icon { stroke: #e53e3e; animation: voice-pulse 1s infinite; }

/* Quill 编辑区：去 snow 容器边框，高度自适应带上下限，超出滚动（编辑区是主角，给到近半屏） */
#mnPage #mnQuill.ql-container { border: none; font-size: 15px; font-family: inherit; color: var(--mp-text, #2d3748); }
#mnPage #mnQuill .ql-editor { min-height: 200px; max-height: 45vh; overflow-y: auto; line-height: 1.7; padding: 10px 2px; }
#mnPage #mnQuill .ql-editor.ql-blank::before { left: 2px; right: 2px; color: var(--mp-text-secondary, #a0aec0); font-style: normal; }
#mnPage #mnQuill .ql-editor img { max-width: 100%; }

/* 编辑区底行：左字数（纯文本口径），右功能提示 */
#mnPage .mn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
#mnPage .mn-counter { font-size: 12px; color: var(--mp-text-secondary, #a0aec0); }
#mnPage .mn-foot-hint { font-size: 12px; color: var(--mp-text-secondary, #a0aec0); text-align: right; }

/* 笔记列表（按节点分组：🗺 画布笔记组在前，📍 节点组随后），占满剩余高度独立滚动 */
#mnPage .mn-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
#mnPage .mn-empty { text-align: center; color: var(--mp-text-secondary, #a0aec0); font-size: 13px; padding: 24px 12px; }
#mnPage .mn-group { display: flex; flex-direction: column; gap: 10px; }
/* 组头：点击筛选只看该组，再点取消；筛选态高亮并带「✕ 取消筛选」提示 */
#mnPage .mn-group-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--mp-text-secondary, #4a5568); cursor: pointer; user-select: none; }
#mnPage .mn-group-head:hover { background: var(--mp-border, #edf2f7); }
#mnPage .mn-group-head .mn-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mnPage .mn-group-head .mn-group-count { flex: 0 0 auto; font-weight: 400; color: var(--mp-text-secondary, #a0aec0); }
#mnPage .mn-group.active > .mn-group-head { color: var(--mp-primary, #5a67d8); background: rgba(90,103,216,.08); }
#mnPage .mn-filter-hint { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 400; color: var(--mp-text-secondary, #a0aec0); }
#mnPage .mn-item { background: var(--mp-bg-card, #fff); border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.08); padding: 12px 14px; }
/* 内容是 sanitizeRichHtml 过滤后的富文本：排版标签正常渲染，图片限宽；整体超 12 行折叠 */
#mnPage .mn-item-content { font-size: 15px; line-height: 1.8; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
#mnPage .mn-item-content p { margin: 0 0 4px; }
#mnPage .mn-item-content h1, #mnPage .mn-item-content h2, #mnPage .mn-item-content h3 { margin: 6px 0 4px; line-height: 1.5; }
#mnPage .mn-item-content ul, #mnPage .mn-item-content ol { margin: 4px 0; padding-left: 22px; }
#mnPage .mn-item-content blockquote { margin: 4px 0; padding: 4px 10px; border-left: 3px solid var(--mp-border, #cbd5e0); color: var(--mp-text-secondary, #718096); }
#mnPage .mn-item-content img { max-width: 100%; border-radius: 6px; }
#mnPage .mn-item-quote { margin-top: 8px; padding: 6px 10px; background: var(--mp-bg-canvas, #f7fafc); border-left: 3px solid var(--mp-border, #cbd5e0); border-radius: 4px; color: var(--mp-text-secondary, #718096); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#mnPage .mn-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#mnPage .mn-time { font-size: 12px; color: var(--mp-text-secondary, #a0aec0); }
#mnPage .mn-ops { margin-left: auto; display: flex; gap: 2px; }
#mnPage .mn-ops button { border: none; background: transparent; color: var(--mp-text-secondary, #718096); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
#mnPage .mn-ops button:hover { background: var(--mp-border, #edf2f7); color: var(--mp-text, #2d3748); }
#mnPage .mn-ops button[data-act="del"]:hover { color: #e53e3e; background: #fff5f5; }

/* 节点笔记角标（js/mindmap-notes.js mnRefreshBadges 注入 .node-box，只读模式不注入）：
   右上角小圆徽章，靛蓝底白字显示该节点笔记条数；node-box 本身 overflow:visible，负偏移不裁剪 */
.node-box .mn-note-badge { position: absolute; top: -9px; right: -9px; z-index: 6; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 9px; background: var(--mp-primary, #5a67d8); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); user-select: none; }
.node-box .mn-note-badge:hover { background: var(--mp-primary-hover, #4c51bf); }

/* 写作态（mn-composing）：编辑区铺满整页，列表收起；正文输入区不再限高，随页面撑满 */
#mnPage.mn-composing .mn-body { gap: 0; }
#mnPage.mn-composing .mn-list { display: none; }
#mnPage.mn-composing .mn-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#mnPage.mn-composing #mnQuill.ql-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#mnPage.mn-composing #mnQuill .ql-editor { flex: 1; min-height: 0; max-height: none; height: auto; overflow-y: auto; }

/* 选中即记的引用块（编辑器内顶部，可移除） */
#mnPage .mn-quote-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
#mnPage .mn-quote { flex: 1; max-height: 110px; overflow-y: auto; padding: 8px 10px; background: var(--mp-bg-canvas, #f7fafc); border-left: 3px solid var(--mp-primary, #5a67d8); border-radius: 4px; color: var(--mp-text-secondary, #718096); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* 平板端：介于桌面与手机之间，留白适中、编辑区更高 */
@media (min-width: 641px) and (max-width: 1024px) {
    #mnPage .mn-body { padding: 12px 18px; }
    #mnPage #mnQuill .ql-editor { min-height: 220px; max-height: 48vh; font-size: 16px; }
}

/* 手机端：同占满整页，收紧留白与按钮尺寸 */
@media (max-width: 640px) {
    #mnPage .mn-head { padding: 8px 12px; }
    #mnPage .mn-title { font-size: 14px; }
    #mnPage .mn-save { padding: 7px 14px; font-size: 13px; }
    #mnPage .mn-body { padding: 10px; gap: 10px; }
    #mnPage .mn-editor { padding: 8px 12px 10px; }
    #mnPage #mnQuill .ql-editor { min-height: 140px; max-height: 38vh; }
    #mnPage .mn-foot-hint { display: none; }
    #mnPage .mn-ops button { padding: 8px 10px; min-height: 36px; }
}

/* 笔记编辑器字体白名单（Quill class attributor） */
#mnPage .ql-font-song { font-family: SimSun, "宋体", serif; }
#mnPage .ql-font-hei { font-family: "Microsoft YaHei", "黑体", sans-serif; }
#mnPage .ql-font-kai { font-family: KaiTi, "楷体", cursive; }
#mnPage .ql-font-mono { font-family: Consolas, "Courier New", monospace; }
/* 工具栏字体下拉标签中文化 */
#mnPage .ql-picker.ql-font .ql-picker-label::before, #mnPage .ql-picker.ql-font .ql-picker-item::before { content: '默认'; }
#mnPage .ql-picker.ql-font [data-value="song"]::before { content: '宋体'; }
#mnPage .ql-picker.ql-font [data-value="hei"]::before { content: '黑体'; }
#mnPage .ql-picker.ql-font [data-value="kai"]::before { content: '楷体'; }
#mnPage .ql-picker.ql-font [data-value="mono"]::before { content: '等宽'; }
/* 笔记里的表格可读性 */
#mnPage .mn-item-content table { border-collapse: collapse; width: 100%; }
#mnPage .mn-item-content td { border: 1px solid var(--mp-border, #cbd5e0); padding: 4px 8px; }