/* ==================== 知识笔记模块样式 ==================== */
/* 从 admin.css 拆分，包含：笔记布局、文件夹树、编辑器、CKEditor 5 适配、回收站 */
/* 依赖：admin.css 中的设计令牌（CSS 变量） */

/* ==================== 知识笔记模块样式 ==================== */

/* 整体布局：左右分栏 */
.notes-layout {
    display: flex;
    height: calc(100vh - var(--topbar-height) - 40px);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(22, 29, 55, 0.08);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===== 左侧面板：文件夹 + 笔记列表 ===== */
.notes-sidebar {
    width: 300px;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-light);
    background: #f8faff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 搜索栏 — 透明背景，与侧边栏融合 */
.notes-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.notes-search-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 12px;
    font-size: 14px;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
}
.notes-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.08);
    background: #ffffff;
}

/* ===== 文件夹+笔记 树形区域 ===== */
.notes-tree-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.notes-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.notes-folder-title {
    user-select: none;
}
/* 文件夹标题栏右侧按钮组 */
.notes-folder-header-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}
.notes-folder-add-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(106, 92, 255, 0.08);
    color: var(--primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.notes-folder-add-btn:hover {
    background: rgba(106, 92, 255, 0.16);
}

/* 文件夹+笔记 树形列表（整个侧边栏可滚动） */
.notes-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 2px;
    position: relative;
}
.notes-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 15px;
    color: var(--text-secondary);
    transition: background 0.15s;
    position: relative;
    margin: 0;
    line-height: 1.4;
    user-select: none;
}
.notes-folder-item[draggable="true"] {
    cursor: pointer !important;
}
.notes-folder-item + .notes-folder-children {
    margin-top: 3px;
}
.notes-folder-item:hover {
    background: rgba(106, 92, 255, 0.06);
}
.notes-folder-item.active {
    background: rgba(106, 92, 255, 0.10);
    color: var(--primary);
    font-weight: 500;
}
.notes-folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 文件夹操作按钮（hover 时显示） */
.notes-folder-actions {
    display: none;
    gap: 4px;
    flex-shrink: 0;
}
.notes-folder-item:hover .notes-folder-actions {
    display: flex;
}
.notes-folder-action-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}
.notes-folder-action-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}
/* 新建笔记按钮特殊样式 */
.notes-folder-add-note-btn {
    opacity: 0.6;
}

/* 文件夹内联输入框（新建/重命名时原地编辑） */
.notes-folder-inline-input {
    flex: 1;
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 14px;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.12);
    min-width: 0;
    user-select: text;
    -webkit-user-select: text;
}
.notes-folder-creating {
    animation: notesFadeIn 0.15s ease;
}
@keyframes notesFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 文件夹展开/折叠箭头 */
.notes-folder-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 8px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    border-radius: 3px;
}
.notes-folder-arrow:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}
.notes-folder-arrow.expanded {
    transform: rotate(90deg);
}
/* 无子内容时箭头半透明（保持占位对齐） */
.notes-folder-arrow.no-children {
    opacity: 0.25;
    pointer-events: none;
}

/* 文件夹图标可点击样式 */
.notes-folder-icon {
    font-size: 16px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: background 0.15s;
}
.notes-folder-icon:hover {
    background: rgba(106, 92, 255, 0.10);
}

/* 拖拽相关样式 */
.notes-dragging {
    opacity: 0.4;
}
.notes-drag-over {
    background: rgba(75, 85, 99, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(55, 65, 81, 0.45);
    border-radius: var(--radius-sm);
}
.notes-tree.notes-drop-root {
    background: transparent;
    box-shadow: none;
}

/* ===== 笔记项（嵌入树中的单行显示） ===== */
.notes-note-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: background 0.15s;
    position: relative;
    margin: 0;
    line-height: 1.4;
    user-select: none;
}
.notes-note-item:hover {
    background: rgba(106, 92, 255, 0.05);
}
.notes-note-item.active {
    background: rgba(106, 92, 255, 0.10);
    color: var(--primary);
}
/* 笔记图标（可点击更换） */
.notes-note-icon {
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 3px;
    padding: 0;
    transition: background 0.15s;
}
.notes-note-icon:hover {
    background: rgba(106, 92, 255, 0.10);
}
/* 笔记标题（单行省略） */
.notes-note-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.notes-note-title[draggable="true"] {
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
}
.notes-note-title[draggable="true"]:active {
    cursor: pointer !important;
}
.notes-note-item.active .notes-note-title {
    color: var(--primary);
}
/* 旧的行内占位类保留空实现（避免历史状态抖动） */
.notes-note-item.notes-drop-before,
.notes-note-item.notes-drop-after {
    margin: 0;
    box-shadow: none;
}
/* 笔记时间（右侧灰色小字） */
.notes-note-time {
    font-size: 12px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    white-space: nowrap;
}
/* 笔记删除按钮（hover 时显示） */
.notes-note-delete-btn {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 1px 3px;
    border-radius: 4px;
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.15s, background 0.15s;
}
.notes-note-delete-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}
.notes-note-item:hover .notes-note-delete-btn {
    display: inline-flex;
}
.notes-drop-line {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: #4b5563;
    left: 12px;
    width: calc(100% - 24px);
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}
.notes-drop-line.show {
    opacity: 1;
}
/* 树形空状态 */
.notes-tree-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 32px 16px;
}

/* ===== 回收站入口（侧边栏底部） ===== */
.notes-trash-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-tertiary);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.notes-trash-entry:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-secondary);
}
.notes-trash-icon {
    font-size: 15px;
}
.notes-trash-label {
    flex: 1;
}
/* 回收站数量角标 */
.notes-trash-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* ===== 回收站面板（覆盖编辑器区域） ===== */
.notes-trash-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notes-trash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.notes-trash-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notes-trash-header-icon {
    font-size: 20px;
}
.notes-trash-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.notes-trash-header-tip {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-left: 4px;
}
.notes-trash-header-actions {
    display: flex;
    gap: 6px;
}

/* 回收站列表 */
.notes-trash-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}
.notes-trash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.notes-trash-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.notes-trash-item-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.notes-trash-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notes-trash-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-trash-item-time {
    font-size: 13px;
    color: var(--text-tertiary);
}
.notes-trash-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.notes-trash-item:hover .notes-trash-item-actions {
    opacity: 1;
}

/* 回收站空状态 */
.notes-trash-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-tertiary);
}
.notes-trash-empty-icon {
    font-size: 40px;
}
.notes-trash-empty-text {
    font-size: 14px;
}

/* 编辑器标题行（图标按钮 + 标题输入框） */
.notes-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
/* 笔记图标按钮 */
.notes-icon-btn {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.notes-icon-btn:hover {
    background: rgba(106, 92, 255, 0.08);
}

/* Emoji 图标选择器弹窗 — 纯白不透明背景，去掉所有模糊效果 */
#notesIconPickerOverlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.5);
}
#notesIconPickerOverlay .confirm-box {
    background: #f8f9fb !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e5ed;
}
/* emoji 网格区域用更深的底色增强对比 */
#notesIconPickerOverlay .notes-emoji-grid {
    background: #f0f1f5;
    border-radius: 10px;
    padding: 8px;
}
/* emoji 项确保不受父级 color/opacity 影响 */
#notesIconPickerOverlay .notes-emoji-item {
    opacity: 1;
    filter: none;
    color: #000000;
}
/* 弹窗内文字用不透明色 */
#notesIconPickerOverlay .confirm-body {
    color: #1a1a1a;
}
#notesIconPickerOverlay .confirm-title {
    color: #1a1a1a;
}

/* Emoji 图标选择器网格 — 自适应列数，竖向滚动 */
.notes-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}
.notes-emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s, transform 0.12s;
}
.notes-emoji-item:hover {
    background: rgba(106, 92, 255, 0.10);
    transform: scale(1.15);
}

.notes-pin-badge {
    font-size: 11px;
    margin-right: 4px;
}

/* 搜索匹配数量徽标 */
.notes-match-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color, #6C5CE7);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
    flex-shrink: 0;
    line-height: 1;
}

/* 搜索关键词高亮 */
mark.notes-search-highlight {
    background: #FBBF24;
    color: #1a1a2e;
    padding: 1px 2px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4);
}

/* ===== 右侧编辑器区域 ===== */
.notes-editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 空状态 → 仪表盘容器 */
.notes-editor-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.notes-dashboard {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
}
.notes-dash-loading {
    text-align: center;
    color: var(--text-tertiary);
    padding: 60px 0;
    font-size: 14px;
}

/* 问候语 */
.notes-dash-header {
    margin-bottom: 24px;
}
.notes-dash-greeting {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 统计卡片 */
.notes-dash-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.notes-dash-stat-card {
    flex: 1;
    min-width: 110px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.notes-dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.notes-dash-stat-num {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
    line-height: 1.2;
}
.notes-dash-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 快捷操作 */
.notes-dash-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.notes-dash-action-btn {
    padding: 8px 18px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    background: #fff;
    color: #3b82f6;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.notes-dash-action-btn:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

/* 区块标题 */
.notes-dash-section {
    margin-bottom: 24px;
}
.notes-dash-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

/* 最近编辑时间线 */
.notes-dash-timeline {
    position: relative;
    padding-left: 20px;
}
.notes-dash-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, #3b82f6, #e2e8f0);
    border-radius: 1px;
}
.notes-dash-timeline-item {
    position: relative;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.notes-dash-timeline-item:hover {
    background: rgba(59, 130, 246, 0.06);
}
.notes-dash-timeline-dot {
    position: absolute;
    left: -17px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.notes-dash-timeline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.notes-dash-timeline-icon {
    font-size: 14px;
}
.notes-dash-timeline-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-dash-timeline-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.notes-dash-timeline-excerpt {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标签云 */
.notes-dash-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}
.notes-dash-tag {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}
.notes-dash-tag:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.notes-dash-tag sup {
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.7;
}

/* 主页按钮 */
.notes-home-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    opacity: 0.6;
}
.notes-home-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    opacity: 1;
}

/* 底部存储信息栏 */
.notes-dash-storage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.notes-dash-storage-icon {
    font-size: 18px;
}
.notes-dash-storage-text b {
    color: var(--text-primary);
    font-weight: 600;
}

/* 编辑器头部 — 纯白不透明背景，确保按钮图标清晰 */
.notes-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.notes-title-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    padding: 4px 0;
    letter-spacing: -0.01em;
}
.notes-title-input::placeholder {
    color: var(--text-tertiary);
}
.notes-editor-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.notes-save-status {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-right: 8px;
    white-space: nowrap;
}

/* 编辑器容器 */
.notes-editorjs-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== CKEditor 5 编辑器样式覆盖 ===== */

/* 编辑器容器 — 中文字体优化 */
#notesEditorjs {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans SC", "Source Han Sans CN",
                 "WenQuanYi Micro Hei", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* 禁用编辑区域的浏览器拼写检查红色波浪线 */
#notesEditorjs [contenteditable] {
    -webkit-text-decoration-skip: none;
    text-decoration-skip-ink: none;
}
#notesEditorjs * {
    -webkit-spelling-error: none;
}
/* Firefox 拼写检查红线覆盖 */
#notesEditorjs ::-moz-spelling-error {
    text-decoration: none !important;
}

/* ===== 响应式：平板 ===== */
@media (max-width: 1024px) {
    .notes-sidebar {
        width: 260px;
        min-width: 220px;
    }
}

/* ===== 响应式：移动端 ===== */
@media (max-width: 640px) {
    .notes-layout {
        flex-direction: column;
        height: auto;
    }
    .notes-sidebar {
        width: 100%;
        max-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .notes-tree {
        max-height: 30vh;
    }
    .notes-editor-area {
        min-height: 50vh;
    }
}

/* ===== CKEditor 5 样式适配 ===== */

/* CKEditor 容器 — 填满编辑器区域 */
#notesCKEditorContainer {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* CKEditor 根元素 — flex 布局 */
#notesEditorjs .ck.ck-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* CKEditor 主体区域 */
#notesEditorjs .ck.ck-editor__main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* CKEditor 编辑区域 — 独立滚动 */
#notesEditorjs .ck.ck-editor__editable {
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    padding: 16px 24px 120px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* CKEditor 编辑区域聚焦时去掉默认边框 */
#notesEditorjs .ck.ck-editor__editable.ck-focused {
    border: none !important;
    box-shadow: none !important;
}

/* CKEditor 工具栏 — 固定在顶部 */
#notesEditorjs .ck.ck-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: rgb(255, 255, 255) !important;
    border-radius: 0 !important;
}

/* CKEditor 编辑器外框去掉圆角和边框 */
#notesEditorjs .ck.ck-editor {
    border: none !important;
}

/* CKEditor 标题样式 */
#notesEditorjs .ck-editor__editable h1,
#notesEditorjs .ck-editor__editable h2,
#notesEditorjs .ck-editor__editable h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
#notesEditorjs .ck-editor__editable h1 { font-size: 28px; line-height: 1.4; margin: 0.8em 0 0.4em; }
#notesEditorjs .ck-editor__editable h2 { font-size: 24px; line-height: 1.4; margin: 0.7em 0 0.3em; }
#notesEditorjs .ck-editor__editable h3 { font-size: 20px; line-height: 1.5; margin: 0.6em 0 0.3em; }

/* CKEditor 段落 */
#notesEditorjs .ck-editor__editable p {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 0.4em;
}

/* CKEditor 代码块 — 深色主题 */
#notesEditorjs .ck-editor__editable pre {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0.8em 0;
    overflow-x: auto;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.7;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* highlight.js 背景覆盖 — 使用我们自己的深色背景 */
#notesEditorjs .ck-editor__editable pre code.hljs {
    background: transparent !important;
    padding: 0 !important;
}

/* 拖拽期间禁选中文本，避免出现“全选框” */
body.notes-is-dragging,
body.notes-is-dragging *:not(input):not(textarea) {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* CKEditor 行内代码 — 仅匹配不在 pre 内的 code */
#notesEditorjs .ck-editor__editable code {
    background: #f0f0f5 !important;
    border-radius: 5px !important;
    padding: 2px 7px !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: 15px !important;
    color: #4a4a4a !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
/* CKEditor 代码块内的 code 标签重置（去掉行内代码的背景和颜色） */
#notesEditorjs .ck-editor__editable pre code {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
    border-radius: 0 !important;
}

/* CKEditor 引用 */
#notesEditorjs .ck-editor__editable blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
    margin: 0.6em 0;
    color: var(--text-secondary);
    font-style: normal;
}

/* CKEditor 超链接 */
#notesEditorjs .ck-editor__editable a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* CKEditor 图片 */
#notesEditorjs .ck-editor__editable img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* CKEditor 列表 */
#notesEditorjs .ck-editor__editable ul,
#notesEditorjs .ck-editor__editable ol {
    padding-left: 24px;
    margin: 0.4em 0;
}
#notesEditorjs .ck-editor__editable li {
    line-height: 1.8;
    padding: 2px 0;
}

/* CKEditor 占位符样式 */
#notesEditorjs .ck.ck-editor__editable > .ck-placeholder::before {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* CKEditor 表格样式 */
#notesEditorjs .ck-editor__editable .table {
    margin: 0.6em 0;
}
#notesEditorjs .ck-editor__editable table {
    border-collapse: collapse;
    width: 100%;
}
#notesEditorjs .ck-editor__editable td,
#notesEditorjs .ck-editor__editable th {
    border: 1px solid var(--border, #ddd);
    padding: 8px 12px;
}
#notesEditorjs .ck-editor__editable th {
    background: var(--bg-secondary, #f5f5f5);
    font-weight: 600;
}

/* ==================== 最近编辑区域 ==================== */
.notes-recent-section {
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    background: transparent;
}
.notes-recent-list {
    padding: 8px 6px 8px;
    max-height: 180px;
    overflow-y: auto;
}
.notes-recent-list .notes-note-item {
    font-size: 14px;
    padding: 3px 8px;
}
.notes-recent-list .notes-note-time {
    font-size: 10px;
}
.notes-recent-section.collapsed .notes-recent-list {
    display: none;
}

/* ==================== 标签筛选面板 ==================== */
.notes-tag-panel {
    padding: 6px 12px 8px;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}
.notes-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.notes-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    background: rgba(106, 92, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 0.15s;
    user-select: none;
}
.notes-tag-item:hover {
    background: rgba(106, 92, 255, 0.12);
    color: var(--primary);
}
.notes-tag-item.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.notes-tag-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 4px 0;
}

/* ==================== 目录大纲 — 点击弹出层 ==================== */

/* 触发器容器 — 紧贴内容区右上角 */
.notes-toc-trigger {
    position: absolute;
    top: 80px;
    right: 16px;
    z-index: 30;
}

/* 编辑模式下（CKEditor 工具栏可见），大纲按钮下移避让 */
.notes-editorjs-wrap:not(.hidden) ~ .notes-toc-trigger {
    top: 124px;
}

/* 触发按钮 — Notion 风格圆角小按钮 */
.notes-toc-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: background 0.15s, color 0.15s;
}
.notes-toc-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

/* 弹出层面板 — 从按钮下方展开 */
.notes-toc-popover {
    position: absolute;
    top: 38px;
    right: 0;
    width: 260px;
    max-height: 55vh;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tocPopIn 0.12s ease-out;
}
.notes-toc-popover.hidden {
    display: none;
}
@keyframes tocPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 弹出层标题 */
.notes-toc-popover-header {
    padding: 10px 14px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

/* 目录列表 */
.notes-toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.notes-toc-item {
    display: block;
    padding: 4px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.1s;
    line-height: 1.6;
}
.notes-toc-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* H1 — 一级标题：纯黑加粗，大字 */
.notes-toc-item.toc-h1 {
    padding-left: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 4px;
}
/* H2 — 二级标题：深灰不加粗，缩进 */
.notes-toc-item.toc-h2 {
    padding-left: 28px;
    font-size: 13.5px;
    font-weight: 400;
    color: #444;
}
/* H3 — 三级标题：浅灰小字，更深缩进 */
.notes-toc-item.toc-h3 {
    padding-left: 42px;
    font-size: 12.5px;
    font-weight: 400;
    color: #888;
}
.notes-toc-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ==================== 字数统计 & 状态栏 ==================== */
.notes-word-count {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-right: 4px;
}
.notes-status-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 20px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-tertiary);
    background: #f8faff;
    flex-shrink: 0;
}
.notes-status-bar.hidden {
    display: none;
}

/* ==================== 版本历史面板 ==================== */
.notes-version-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: notesFadeIn 0.15s ease;
}
.notes-version-modal {
    background: #fff;
    border-radius: 12px;
    width: 560px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.notes-version-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.notes-version-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.notes-version-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
}
.notes-version-close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.notes-version-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.notes-version-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.12s;
}
.notes-version-item:hover {
    background: rgba(106, 92, 255, 0.05);
}
.notes-version-time {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}
.notes-version-info {
    flex: 1;
    font-size: 12px;
    color: var(--text-tertiary);
}
.notes-version-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}
.notes-version-item:hover .notes-version-actions {
    opacity: 1;
}
.notes-version-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 14px;
}
/* 版本预览区域 */
.notes-version-preview {
    border-top: 1px solid var(--border-light);
    max-height: 300px;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ==================== 分享弹窗 ==================== */
.notes-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: notesFadeIn 0.15s ease;
}
.notes-share-modal {
    background: #fff;
    border-radius: 12px;
    width: 440px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 24px;
}
.notes-share-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notes-share-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
}
.notes-share-close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.notes-share-field {
    margin-bottom: 14px;
}
.notes-share-field label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.notes-share-field input,
.notes-share-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.notes-share-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.08);
}
.notes-share-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.notes-share-link-row input {
    flex: 1;
}
.notes-share-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* ==================== 标签编辑器 ==================== */
.notes-tag-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: notesFadeIn 0.15s ease;
}
.notes-tag-editor-modal {
    background: #fff;
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 24px;
}
.notes-tag-editor-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notes-tag-editor-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
}
.notes-tag-editor-close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.notes-tag-editor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 32px;
}
.notes-tag-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    background: rgba(106, 92, 255, 0.08);
    color: var(--primary);
}
.notes-tag-editor-chip .tag-remove {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.12s;
}
.notes-tag-editor-chip .tag-remove:hover {
    opacity: 1;
}
.notes-tag-editor-input-row {
    display: flex;
    gap: 8px;
}
.notes-tag-editor-input-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    outline: none;
}
.notes-tag-editor-input-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.08);
}
.notes-tag-editor-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}
.notes-tag-editor-suggestions .notes-tag-item {
    font-size: 11px;
    padding: 2px 8px;
}


/* ==================== 编辑器操作按钮（图标+文字） ==================== */
.notes-editor-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.notes-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    color: var(--text-secondary);
    min-width: 42px;
}
.notes-action-btn:hover {
    background: rgba(106, 92, 255, 0.08);
    color: var(--primary);
}
.notes-action-icon {
    font-size: 20px;
    line-height: 1.2;
    filter: none !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.notes-action-label {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-secondary);
}
.notes-action-btn:hover .notes-action-label {
    color: var(--primary);
}
/* 删除按钮特殊颜色 */
.notes-action-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
}


/* ==================== 浏览模式样式 ==================== */

/* 浏览模式容器 — 填满编辑器区域，可滚动 */
.notes-viewer-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}
.notes-viewer-wrap.hidden {
    display: none;
}

/* 浏览模式内容区域 — 与编辑器排版一致 */
.notes-viewer-content {
    padding: 16px 24px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 浏览模式标题 */
.notes-viewer-content h1,
.notes-viewer-content h2,
.notes-viewer-content h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.notes-viewer-content h1 { font-size: 28px; line-height: 1.4; margin: 0.8em 0 0.4em; }
.notes-viewer-content h2 { font-size: 24px; line-height: 1.4; margin: 0.7em 0 0.3em; }
.notes-viewer-content h3 { font-size: 20px; line-height: 1.5; margin: 0.6em 0 0.3em; }

/* 浏览模式段落 */
.notes-viewer-content p {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 0.4em;
}

/* 浏览模式代码块 — 复刻目标站 code-toolbar + one-dark */
.notes-viewer-content .notes-code-toolbar-wrap,
.notes-version-preview .notes-code-toolbar-wrap {
    position: relative;
    margin: 20px 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.18);
}
.notes-viewer-content pre.notes-code-enhanced,
.notes-version-preview pre.notes-code-enhanced {
    position: relative;
    margin: 20px 0;
    padding: 30px 0 0;
    user-select: auto;
    font-size: 16px;
    line-height: 1.5;
    overflow: hidden;
    white-space: pre;
    text-shadow: none;
    border-radius: 8px;
    border: 0;
    background: #282c34;
    color: #abb2bf;
    font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
.notes-viewer-content .notes-code-toolbar-wrap > pre.notes-code-enhanced,
.notes-version-preview .notes-code-toolbar-wrap > pre.notes-code-enhanced {
    margin: 0;
    box-shadow: none;
}
.notes-viewer-content pre.notes-code-enhanced code.hljs,
.notes-version-preview pre.notes-code-enhanced code.hljs,
.notes-viewer-content pre.notes-code-enhanced code,
.notes-version-preview pre.notes-code-enhanced code {
    display: block;
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    user-select: auto;
    padding: 12px 12px 14px 18px !important;
    border-radius: 0 0 8px 8px;
    text-shadow: none;
    white-space: pre;
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}
.notes-viewer-content pre.notes-code-enhanced code .hljs-string,
.notes-version-preview pre.notes-code-enhanced code .hljs-string,
.notes-viewer-content pre.notes-code-enhanced code .hljs-operator,
.notes-version-preview pre.notes-code-enhanced code .hljs-operator {
    background: transparent !important;
}
.notes-viewer-content pre.notes-code-enhanced.c_hr::after,
.notes-version-preview pre.notes-code-enhanced.c_hr::after {
    position: absolute;
    top: 30px;
    z-index: 1;
    content: "";
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    mix-blend-mode: overlay;
}
.notes-viewer-content pre.notes-code-enhanced.c_macdot::before,
.notes-version-preview pre.notes-code-enhanced.c_macdot::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 12px;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fc625d;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
}
.notes-viewer-content .notes-code-toolbar,
.notes-version-preview .notes-code-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.notes-viewer-content .notes-code-lang,
.notes-version-preview .notes-code-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    font-size: 14px;
    color: #999;
    letter-spacing: 0.2px;
    font-family: inherit;
    user-select: none;
}
.notes-viewer-content .notes-code-copy-btn,
.notes-version-preview .notes-code-copy-btn {
    position: absolute;
    right: 10px;
    top: 3px;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #999;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter 0.25s, color 0.25s, opacity 0.25s;
    pointer-events: auto;
}
.notes-viewer-content .notes-code-copy-btn:hover,
.notes-version-preview .notes-code-copy-btn:hover {
    filter: brightness(1.2);
}
.notes-viewer-content .notes-code-copy-btn.copied,
.notes-version-preview .notes-code-copy-btn.copied {
    color: #67c23a;
}
.notes-viewer-content .notes-code-copy-btn svg,
.notes-version-preview .notes-code-copy-btn svg {
    width: 16px;
    height: 16px;
}
.notes-viewer-content .notes-code-copy-btn svg rect,
.notes-version-preview .notes-code-copy-btn svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

/* 浏览模式行内代码 */
.notes-viewer-content code {
    background: #f0f0f5 !important;
    border-radius: 5px !important;
    padding: 2px 7px !important;
    font-family: "JetBrains Mono", Consolas, monospace !important;
    font-size: 15px !important;
    color: #4a4a4a !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 浏览模式引用 */
.notes-viewer-content blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
    margin: 0.6em 0;
    color: var(--text-secondary);
    font-style: normal;
}

/* 浏览模式链接 */
.notes-viewer-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 浏览模式图片 */
.notes-viewer-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin: 0.6em 0;
}
.notes-viewer-content img.notes-viewer-img-clickable {
    cursor: zoom-in;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.notes-viewer-content img.notes-viewer-img-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

/* 预览图灯箱 */
body.notes-img-viewer-open {
    overflow: hidden;
}
.notes-img-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    user-select: none;
}
.notes-img-viewer-image {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    cursor: zoom-out;
    transform-origin: center center;
    transition: transform 0.15s ease;
}
.notes-img-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.notes-img-viewer-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}
.notes-img-viewer-prev { left: 16px; }
.notes-img-viewer-next { right: 16px; }
.notes-img-viewer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.notes-img-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
}
.notes-img-viewer-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    pointer-events: none;
}

/* 浏览模式列表 */
.notes-viewer-content ul,
.notes-viewer-content ol {
    padding-left: 24px;
    margin: 0.4em 0;
}
.notes-viewer-content li {
    line-height: 1.8;
    padding: 2px 0;
}

/* 浏览模式表格 */
.notes-viewer-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6em 0;
}
.notes-viewer-content td,
.notes-viewer-content th {
    border: 1px solid var(--border, #ddd);
    padding: 8px 12px;
}
.notes-viewer-content th {
    background: var(--bg-secondary, #f5f5f5);
    font-weight: 600;
}

/* 浏览模式加粗、斜体、删除线 */
.notes-viewer-content strong { font-weight: 600; }
.notes-viewer-content em { font-style: italic; }
.notes-viewer-content s { text-decoration: line-through; color: var(--text-tertiary); }

/* 浏览模式分割线 */
.notes-viewer-content hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 1.2em 0;
}

/* 浏览模式代码块语言伪元素关闭（改为真实工具条） */
.notes-viewer-content pre[data-language]::before {
    content: none;
}

/* 编辑/完成按钮高亮样式 */
.notes-action-btn-edit {
    color: var(--primary) !important;
}
.notes-action-btn-done {
    color: #10b981 !important;
}
.notes-action-btn-done:hover {
    background: rgba(16, 185, 129, 0.08) !important;
}

/* ==================== CKEditor 代码块语言标签 ==================== */
/* CKEditor 自带语言选择器小部件，不需要 CSS 伪元素标签 */
/* 代码块需要 relative 定位 */
#notesEditorjs .ck-editor__editable pre {
    position: relative;
}

/* ==================== 代码块浅色主题（可选） ==================== */
/* 通过 .notes-code-light 类切换 */
.notes-code-light #notesEditorjs .ck-editor__editable pre {
    background: #fafbfc;
    color: #24292e;
    border: 1px solid #e1e4e8;
    box-shadow: none;
}
.notes-code-light #notesEditorjs .ck-editor__editable pre[data-language]::before,
.notes-code-light #notesEditorjs .ck-editor__editable pre[class*="language-"]::before {
    color: rgba(36, 41, 46, 0.35);
}


/* ==================== AI 翻译对照译文样式 ==================== */
/* 使用 class 而非 inline style，避免 CKEditor 回车时继承蓝色斜体 */
.ai-translated-line {
    margin: 2px 0 8px;
    color: #3b82f6;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
}

/* ==================== AI 辅助写作菜单 ==================== */

/* AI 按钮容器 — 相对定位，用于弹出菜单 */
.notes-ai-wrap {
    position: relative;
    display: inline-flex;
}

/* AI 按钮高亮样式 */
.notes-action-btn-ai {
    background: linear-gradient(135deg, rgba(106, 92, 255, 0.08), rgba(59, 130, 246, 0.08));
    border-radius: 8px;
}
.notes-action-btn-ai:hover {
    background: linear-gradient(135deg, rgba(106, 92, 255, 0.15), rgba(59, 130, 246, 0.15));
}

/* AI 弹出菜单 */
.notes-ai-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    width: 250px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
    animation: aiMenuIn 0.12s ease-out;
}
.notes-ai-menu.hidden {
    display: none;
}
@keyframes aiMenuIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 菜单标题 */
.notes-ai-menu-header {
    padding: 10px 14px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 菜单项 */
.notes-ai-menu-item {
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}
.notes-ai-menu-item:hover {
    background: rgba(106, 92, 255, 0.06);
}

/* 分割线 */
.notes-ai-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 0;
}

/* 自定义指令输入区 */
.notes-ai-menu-custom {
    display: flex;
    gap: 6px;
    padding: 8px 10px 10px;
}
.notes-ai-custom-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    outline: none;
    background: var(--bg-secondary, #f8f8f8);
}
.notes-ai-custom-input:focus {
    border-color: var(--primary);
}
.notes-ai-custom-btn {
    border: none;
    background: var(--primary, #6a5cff);
    color: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.notes-ai-custom-btn:hover {
    opacity: 0.85;
}

/* ==================== AI 结果弹窗（SSE 流式） ==================== */

/* 遮罩层 — 点击关闭 */
.notes-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: notesFadeIn 0.15s ease;
}

/* 弹窗主体 */
.notes-ai-dialog {
    background: #fff;
    border-radius: 14px;
    width: 620px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* 弹窗头部 */
.notes-ai-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.notes-ai-dialog-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s;
}
.notes-ai-dialog-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* 思考过程区域 */
.notes-ai-dialog-thinking {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #f8f9fb;
}
.notes-ai-dialog-thinking.hidden {
    display: none;
}
.notes-ai-thinking-label {
    padding: 10px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
}
.notes-ai-thinking-content {
    padding: 0 20px 12px;
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    max-height: 160px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

/* 正文内容区域 */
.notes-ai-dialog-body {
    flex: 1;
    min-height: 120px;
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 加载提示 */
.notes-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* 底部操作栏 */
.notes-ai-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafbfc;
}