<template>
  <div class="affine-editor-wrapper" :lang="locale">
    <div v-if="loading" class="editor-skeleton">
      <div class="skeleton-header"></div>
      <div class="skeleton-line title"></div>
      <div class="skeleton-line body" v-for="i in 10" :key="i"></div>
    </div>

    <!-- Toast 通知系统 -->
    <div class="affine-toast-container">
      <transition-group name="toast-fade">
        <div 
          v-for="toast in toasts" 
          :key="toast.id" 
          class="affine-toast" 
          :class="toast.type"
        >
          <i :class="getToastIcon(toast.type)"></i>
          <span>{{ toast.message }}</span>
        </div>
      </transition-group>
    </div>

    <!-- 命令面板 (Command Palette) -->
    <transition name="fade">
      <div v-if="showCommandPalette" class="command-palette-overlay" @click.self="showCommandPalette = false">
        <div class="command-palette">
          <div class="command-input-wrapper">
            <i class="fas fa-terminal"></i>
            <input 
              type="text" 
              v-model="commandSearch" 
              placeholder="输入命令或搜索功能..." 
              ref="commandInput"
              @keydown.down.prevent="selectNextCommand"
              @keydown.up.prevent="selectPrevCommand"
              @keydown.enter="executeCommand()"
              @keydown.esc="showCommandPalette = false"
            />
          </div>
          <div class="command-list" v-if="filteredCommands.length">
            <template v-for="(cmd, index) in filteredCommands" :key="cmd.id">
              <!-- 分组标题 -->
              <div 
                v-if="index === 0 || cmd.group !== filteredCommands[index - 1]?.group" 
                class="command-group-title"
              >
                {{ cmd.group }}
              </div>
              
              <div 
                class="command-item"
                :class="{ active: index === selectedCommandIndex }"
                @click="executeCommand(cmd)"
                @mouseenter="selectedCommandIndex = index"
              >
                <div class="command-icon-box">
                  <i :class="cmd.icon"></i>
                </div>
                <div class="command-info">
                  <span class="command-title">{{ cmd.title }}</span>
                  <span class="command-shortcut" v-if="cmd.shortcut">{{ cmd.shortcut }}</span>
                </div>
              </div>
            </template>
          </div>
          <div class="command-empty" v-else>
            没有找到匹配的命令
          </div>
        </div>
      </div>
    </transition>
    
    <!-- 顶部工具栏：优化 -->
    <div class="editor-toolbar" v-if="!loading">
      <div class="toolbar-left">
        <ModeSwitcher 
          v-model="editorMode" 
          @change="handleModeChange"
          style="margin-right: 12px;"
        />
        <div class="toolbar-divider" style="width: 1px; height: 16px; background: var(--el-border-color-lighter); margin-right: 12px;"></div>
        <div class="save-status-group">
          <i :class="hasChanges ? 'fas fa-cloud-upload-alt saving' : 'fas fa-cloud-check saved'"></i>
          <span class="file-status" :class="{ changed: hasChanges }">
            {{ hasChanges ? t('common.saveInProgress') : t('common.savedToCloud') }}
          </span>
        </div>
        <div class="doc-stats" v-if="wordCount > 0">
          <span class="stat-item">{{ stats.chars }} {{ t('common.chars') }}</span>
        </div>
      </div>
      <div class="toolbar-right">
        <button 
          class="toolbar-btn toc-toggle" 
          :class="{ active: showToc }"
          @click="toggleToc"
          :title="t('documentOutline.title')"
        >
          <i class="fas fa-list-ul"></i>
          <span>{{ t('documentOutline.outline') }}</span>
        </button>
        <el-dropdown trigger="click" @command="handleExportCommand">
          <button 
            class="toolbar-btn export-btn" 
            :title="t('common.export')"
          >
            <i class="fas fa-download"></i>
            <span>{{ t('common.export') }}</span>
          </button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="markdown">
                <i class="fab fa-markdown" style="margin-right: 8px; color: #1e6fff;"></i>
                Markdown (.md)
              </el-dropdown-item>
              <el-dropdown-item command="html">
                <i class="fas fa-code" style="margin-right: 8px; color: #ff9d00;"></i>
                HTML (.html)
              </el-dropdown-item>
              <el-dropdown-item command="png">
                <i class="fas fa-image" style="margin-right: 8px; color: #52c41a;"></i>
                {{ t('affine.export.imagePng') }} (.png)
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="main-content-area" :class="{ 'with-references': props.showReferences }">
      <div 
        class="affine-editor-container blocksuite-editor" 
        ref="container" 
        theme="light"
        :style="props.showReferences ? { height: editorHeight } : {}"
        :class="{ 'is-loading': loading, 'loaded': !loading }"
      ></div>

      <!-- 参考文献管理区域 -->
      <div
        v-if="props.showReferences"
        class="reference-section"
        :style="{ height: referenceHeight }"
      >
        <!-- 拖动条 -->
        <div
          class="resize-handle"
          @mousedown="startResizing"
          @touchstart="startResizing"
        ></div>

        <!-- 参考文献工具栏 -->
        <div class="reference-toolbar">
          <div class="toolbar-left">
            <button
              class="toolbar-btn"
              :title="t('reference.addReference') || '添加参考文献'"
              @click="openImportDialog"
            >
              <i class="fas fa-file-alt"></i>
            </button>
          </div>

          <!-- 搜索框 -->
          <div class="ref-search-input-wrapper">
            <i class="fas fa-search search-icon"></i>
            <input
              v-model="searchQuery"
              type="text"
              :placeholder="t('reference.searchPlaceholder') || 'All Fields & Tags'"
              class="search-input"
            />
          </div>
        </div>

        <!-- 参考文献表格 -->
        <div class="reference-table-container">
          <!-- 加载状态 -->
          <div v-if="isLoadingReferences" class="reference-loading">
            <i class="fas fa-spinner fa-spin loading-icon"></i>
            <span class="loading-text">加载文献中...</span>
          </div>

          <!-- 空状态 -->
          <div v-else-if="references.length === 0" class="reference-empty">
            <i class="fas fa-book-open empty-icon"></i>
            <span class="empty-text">暂无参考文献</span>
            <el-button type="primary" size="small" @click="openImportDialog" style="margin-top: 10px;">
              立即导入
            </el-button>
          </div>

          <!-- 有数据时显示表格 -->
          <table v-else class="reference-table">
            <thead>
              <tr>
                <th width="60">{{ t('reference.serialNumber') }}</th>
                <th>{{ t('reference.name') }}</th>
                <th width="120">{{ t('reference.alias') }}</th>
                <th width="150">{{ t('reference.author') }}</th>
                <th width="80">{{ t('reference.year') }}</th>
                <th width="120">{{ t('reference.details') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="reference in filteredReferences"
                :key="reference.workId"
                :class="{ highlighted: selectedReferenceId === reference.workId }"
                :draggable="true"
                tabindex="0"
                @click="selectReference(reference.workId, $event)"
                @dragstart="handleReferenceDragStart($event, reference)"
                class="reference-row"
              >
                <td>{{ reference.serialNumber }}</td>
                <td class="title-cell">
                  <span class="title-text" :title="reference.title">{{ reference.title }}</span>
                </td>
                <td>
                  <!-- 别名编辑 -->
                  <div
                    v-if="editingReferenceId !== reference.workId"
                    class="alias-display"
                  >
                    <span class="alias-text">{{ reference.note || "-" }}</span>
                    <button
                      class="edit-alias-btn"
                      @click.stop="startEditAlias(reference)"
                      title="编辑别名"
                    >
                      <i class="fas fa-edit"></i>
                    </button>
                  </div>
                  <div v-else class="alias-edit" @click.stop>
                    <input
                      v-model="editingAlias"
                      type="text"
                      class="alias-input"
                      @keydown.enter="handleEnterKey(reference)"
                      @blur="handleBlur(reference)"
                    />
                  </div>
                </td>
                <td>{{ reference.authorsText }}</td>
                <td>{{ reference.publicationYear }}</td>
                <td class="details-cell">
                  <div class="detail-icons">
                    <el-popover
                      placement="top-end"
                      :width="400"
                      trigger="click"
                      popper-class="reference-detail-popover"
                    >
                      <template #reference>
                        <i
                          class="fas fa-file-alt icon-info"
                          style="color: #1890ff;"
                          title="查看详情"
                          @click.stop="viewReferenceDetail(reference)"
                        ></i>
                      </template>
                      <div
                        v-if="currentDetailReference?.workId === reference.workId"
                        class="reference-detail-content"
                      >
                        <div v-if="isLoadingDetail" class="detail-loading">
      <i class="fas fa-spinner fa-spin"></i>
                          <span>{{ t('common.loading') }}</span>
    </div>
                        <template v-else-if="currentDetailReference">
                          <div class="detail-item">
                            <div class="detail-label">{{ t('reference.detailLabels.title') }}</div>
                            <div class="detail-value">{{ currentDetailReference.title }}</div>
                          </div>
                          <div class="detail-item" v-if="currentDetailReference.abstractText">
                            <div class="detail-label">{{ t('reference.detailLabels.abstract') }}</div>
                            <div class="detail-value abstract">{{ currentDetailReference.abstractText }}</div>
                          </div>
                          <div class="detail-item" v-if="currentDetailReference.doi">
                            <div class="detail-label">{{ t('reference.detailLabels.doi') }}</div>
                            <div class="detail-value">{{ currentDetailReference.doi }}</div>
                          </div>
                        </template>
                      </div>
                    </el-popover>
                    <i
                      class="fas fa-comment-alt icon-copy"
                      style="color: #52c41a;"
                      :title="t('common.copyCitation')"
                      @click.stop="handleCopyReference(reference)"
                    ></i>
                    <i
                      class="fas fa-trash-alt icon-delete"
                      style="color: #f5222d;"
                      :title="t('common.delete')"
                      @click.stop="handleDeleteReference(reference)"
                    ></i>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- TOC 侧边栏 -->
      <transition name="slide">
        <div v-if="showToc" class="toc-sidebar" ref="tocContainer">
           <div class="toc-header">
             <span>{{ t('documentOutline.title') }}</span>
             <i class="fas fa-times close-toc" @click="showToc = false"></i>
           </div>
           <div class="toc-content" ref="tocContentRoot">
             <!-- 动态挂载 affine-outline-panel -->
           </div>
        </div>
      </transition>
    </div>

    <!-- 导入参考文献对话框 -->
    <el-dialog
      v-model="importDialogVisible"
      :title="t('reference.importReference')"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="import-dialog-content">
        <div class="import-method-section">
          <el-radio-group v-model="importMethod" class="import-method-group">
            <el-radio label="title">{{ t('reference.importByTitle') }}</el-radio>
            <el-radio label="doi">{{ t('reference.importByDoi') }}</el-radio>
          </el-radio-group>
        </div>

        <div class="import-search-section">
          <el-input
            ref="importInputRef"
            v-model="importInput"
            :placeholder="importMethod === 'title' ? t('reference.enterLiteratureTitle') : t('reference.enterDoi')"
            clearable
            @keyup.enter="handleImportSearch"
          >
            <template #append>
              <el-button @click="handleImportSearch" :loading="isSearching">
                {{ t('common.search') }}
              </el-button>
            </template>
          </el-input>
        </div>

        <div v-if="searchResults.length > 0" class="search-results-section">
          <div class="results-list">
            <div
              v-for="result in searchResults"
              :key="result.workId"
              class="result-item"
            >
              <div class="result-content">
                <div class="result-title">{{ result.title }}</div>
                <div class="result-meta">
                  <span>{{ result.authorsText }}</span>
                  <span v-if="result.publicationYear">({{ result.publicationYear }})</span>
                </div>
              </div>
              <el-button 
                type="primary" 
                size="small" 
                @click="handleAddReference(result)"
                :loading="result.importing"
              >
                添加
              </el-button>
            </div>
          </div>
        </div>
        <div v-else-if="hasSearched && !isSearching" class="no-results">
          没有找到匹配的文献
        </div>
      </div>
    </el-dialog>

    <!-- 查找替换面板 -->
    <transition name="fade">
      <div v-if="showSearch" class="search-panel">
        <div class="search-input-wrapper">
          <i class="fas fa-search"></i>
          <input 
            type="text" 
            v-model="searchText" 
            placeholder="在文档中查找..." 
            ref="searchInput"
            @keydown.enter="findNext"
            @keydown.esc="showSearch = false"
          />
          <span class="search-results-count" v-if="searchText">
            {{ searchCurrent }}/{{ searchTotal }}
          </span>
        </div>
        <div class="search-controls">
          <button @click="findPrev" :disabled="!searchTotal"><i class="fas fa-chevron-up"></i></button>
          <button @click="findNext" :disabled="!searchTotal"><i class="fas fa-chevron-down"></i></button>
          <button @click="showSearch = false" class="close-search"><i class="fas fa-times"></i></button>
        </div>
      </div>
    </transition>

    <!-- 回到顶部 -->
    <transition name="fade">
      <button 
        class="back-to-top" 
        v-if="showBackToTop" 
        @click="scrollToTop"
        title="回到顶部"
      >
        <i class="fas fa-chevron-up"></i>
      </button>
    </transition>

    <!-- 快捷键帮助面板 -->
    <transition name="fade">
      <div v-if="showHelp" class="help-overlay" @click.self="showHelp = false">
        <div class="help-modal">
          <div class="help-header">
            <h3>快捷键与功能说明</h3>
            <i class="fas fa-times" @click="showHelp = false"></i>
          </div>
          <div class="help-body">
            <div class="help-section">
              <h4>基础操作</h4>
              <ul>
                <li><kbd>/</kbd> 唤起斜杠菜单</li>
                <li><kbd>Ctrl</kbd> + <kbd>S</kbd> 手动保存</li>
                <li><kbd>Ctrl</kbd> + <kbd>F</kbd> 查找内容</li>
              </ul>
            </div>
            <div class="help-section">
              <h4>区块快捷键</h4>
              <ul>
                <li><kbd>#</kbd> 一级标题</li>
                <li><kbd>##</kbd> 二级标题</li>
                <li><kbd>1.</kbd> 有序列表</li>
                <li><kbd>-</kbd> 无序列表</li>
                <li><kbd>> </kbd> 引用区块</li>
                <li><kbd>```</kbd> 代码块</li>
              </ul>
            </div>
            <div class="help-section">
              <h4>{{ t('documentOutline.outline') }}</h4>
              <p>{{ t('affine.askAi.modes.pageHint') }} / {{ t('affine.askAi.modes.edgelessHint') }}</p>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- New Ask AI Menu Popup (High Fidelity Interaction) -->
    <Teleport to="body">
      <AskAIPanel 
        :visible="showAskAIMenu" 
        :position="askAIMenuPosition"
        :state="aiPanelState"
        :answer="aiResult"
        @close="handleAiClose"
        @action="handleAskAIMenuAction"
        @stop="stopAIGeneration"
        @retry="handleAiRetry"
        @replace="handleAiReplace"
        @insert="handleAiInsert"
      />
    </Teleport>

    <!-- 引用标记切换菜单 (Citation Switcher Menu) -->
    <Teleport to="body">
      <div
        v-if="showCitationMenu"
        class="citation-menu-wrapper"
        :style="{
          top: citationMenuPosition.y + 'px',
          left: citationMenuPosition.x + 'px',
        }"
      >
        <div ref="citationMenuRef" class="citation-menu">
          <div class="citation-menu-header">
            <span class="header-title">{{ t("reference.selectReference") }}</span>
            <div class="header-search">
              <i class="fas fa-search search-icon"></i>
              <input
                v-model="citationMenuSearch"
                type="text"
                :placeholder="t('reference.searchReferences')"
                class="search-input"
                @click.stop
              />
            </div>
          </div>
          <div class="citation-menu-list">
            <div
              v-for="reference in filteredCitationMenuReferences"
              :key="reference.workId"
              class="citation-menu-item"
              @mousedown.stop="replaceCitation(reference)"
            >
              <span class="menu-item-note">{{ reference.note || reference.title }}</span>
              <span class="menu-item-meta">{{ reference.authorsText }} ({{ reference.publicationYear }})</span>
            </div>
            <div
              v-if="filteredCitationMenuReferences.length === 0 && references.length > 0"
              class="citation-menu-empty"
            >
              {{ t("reference.noMatchingReferences") }}
            </div>
            <div v-if="references.length === 0" class="citation-menu-empty">
              {{ t("reference.noReferences") }}
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useI18n } from "vue-i18n";
import { useAppStore } from "@/stores/app";
import { Text as BlockSuiteText } from '@blocksuite/store';
// @ts-ignore
import { TestWorkspace } from '@blocksuite/store/test';
import { BlockStdScope, TextSelection, BlockSelection } from '@blocksuite/affine/std';
// @ts-ignore
import { getInternalViewExtensions } from '@blocksuite/affine/extensions/view';
// @ts-ignore
import { getInternalStoreExtensions } from '@blocksuite/affine/extensions/store';
// @ts-ignore
import { ViewExtensionManager, StoreExtensionManager } from '@blocksuite/affine/ext-loader';
import { MarkdownAdapter, HtmlAdapter } from '@blocksuite/affine/shared/adapters';
// @ts-ignore
import { BlockMarkdownAdapterMatcherIdentifier, HtmlAdapterFactoryIdentifier } from '@blocksuite/affine/shared/adapters';
// @ts-ignore
import { 
  ViewportElementProvider, 
  LinkPreviewServiceIdentifier, 
  ToolbarRegistryIdentifier, 
  ActionPlacement
} from '@blocksuite/affine/shared/services';
// @ts-ignore
import { AiIcon } from '@blocksuite/icons/lit';
// @ts-ignore
import { html } from 'lit';
// @ts-ignore
import { getSelectedModelsCommand } from '@blocksuite/affine/shared/commands';
// @ts-ignore
import '@blocksuite/affine/effects';
// @ts-ignore
import '@blocksuite/affine-components';

import ModeSwitcher from '@/components/common/ModeSwitcher.vue';

// UI Components
import { 
  ElMessageBox, 
  ElDialog, 
  ElRadioGroup, 
  ElRadio, 
  ElInput, 
  ElButton,
  ElPopover,
// @ts-ignore
} from "element-plus";

// API & Utils
import * as filesApi from "@/api/files";
import { apiGetDraftById, apiUpdateDraft } from "@/api/drafts";
import {
  getFileReferences,
  searchReferencesByTitle,
  searchReferencesByDoi,
  addReferenceToFile,
  getReferenceDetail,
  deleteReferenceFromFile,
  updateReferenceNote,
  getFormatCitation,
} from "@/api/references";
import type {
  ReferenceItem,
  ImportSearchResultItem,
  ReferenceDetail,
} from "@/api/references";
import { fileCache } from "@/utils/fileCache";
import { preprocessMathContent } from "@/utils/renderMarkdown";
import { triggerNewbieTask } from "@/utils/newbieTask";

// CSS
import '@blocksuite/affine/shared/styles';

import AskAIPanel from './AskAIPanel.vue';
import { useChatApiStore } from "@/stores/chatApi";

interface Props {
  fileId: string | number;
  fileName: string;
  preloadContent?: string;
  readonly?: boolean;
  isChatAnswer?: boolean;
  folderId?: string | number;
  showReferences?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  preloadContent: "",
  readonly: false,
  isChatAnswer: false,
  showReferences: false,
});

const emit = defineEmits<{
  (e: 'content-change', data: { text: string; html: string; hasChanges: boolean }): void;
  (e: 'file-saved', data: { fileId: string | number; fileName: string; content: string; isAutoSave: boolean }): void;
  (e: 'request-show-references'): void;
}>();

const { t, locale } = useI18n();
import { watch } from 'vue';

// 监听语言变化，同步更新 BlockSuite 内部语言
watch(locale, (newLocale) => {
  if (stdScope) {
    try {
      // @ts-ignore
      const i18n = stdScope.get('affine:i18n') as any;
      if (i18n && typeof i18n.setLocale === 'function') {
        const bsLocale = newLocale === 'zh-CN' ? 'zh' : 'en';
        i18n.setLocale(bsLocale);
        console.log('[Affine] Watcher: Set BlockSuite locale to:', bsLocale);
      }
    } catch (e) {
      if (!(e instanceof Error && e.message.includes('not a service identifier'))) {
        console.warn('[Affine] Watcher: Failed to set internal locale:', e);
      }
    }
  }
}, { immediate: false });

const container = ref<HTMLElement | null>(null);
let store: any = null;
let stdScope: any = null;
let editorHost: any = null;
const tocContentRoot = ref<HTMLElement | null>(null);
const loading = ref(true);
const isSavedToKnowledge = ref(false);
const hasChanges = ref(false);
const isInitialized = ref(false);
const isProgrammaticChange = ref(false); // 新增：标记是否为程序化修改，用于暂停引用渲染
const showToc = ref(false);
const toggleToc = () => {
  showToc.value = !showToc.value;
};
const editorMode = ref<'page' | 'edgeless'>('page');
const wordCount = ref(0);
const isPreviewMode = ref(false);
const isFullScreen = ref(false);
const showHelp = ref(false);
const showAskAIMenu = ref(false); // Popup Menu (new)
const askAIMenuPosition = ref({ top: 0, left: 0 });
const aiPanelState = ref<'input' | 'generating' | 'finished' | 'error'>('input');
const aiResult = ref('');
const currentAiAction = ref('');
let currentAiInterval: any = null;
let lastSelectionRange: Range | null = null; // 记录最后的有效选区
let lastTriggerRect: DOMRect | null = null; // 记录触发按钮的位置
let lastBlockSuiteSelection: any = null; // 记录 BlockSuite 选区状态

// 更新 AI 面板位置的函数 (参考源码的 FloatingUI 逻辑)
const updateAiPanelPosition = () => {
  if (!showAskAIMenu.value) return;

  let rect: DOMRect | null = null;

  // 1. 尝试从 BlockSuite 的 Selection 获取位置 (最准确)
  try {
    if (stdScope && stdScope.host) {
      // @ts-ignore
      let textSelection = stdScope.selection.find(TextSelection);
      // 如果实时选区为空，使用备份
      if ((!textSelection || textSelection.collapsed) && lastBlockSuiteSelection) {
        textSelection = lastBlockSuiteSelection;
      }

      if (textSelection && !textSelection.collapsed) {
        const host = stdScope.host;
        // 获取所有选中的 Block 视图
        const rects: DOMRect[] = [];
        textSelection.selectedModels.forEach((model: any) => {
          const view = host.view.getBlock(model.id);
          if (view) {
            // 获取块内选中的矩形区域
            // @ts-ignore
            const blockRects = view.getSelectionRects?.(textSelection);
            if (blockRects && blockRects.length > 0) {
              rects.push(...blockRects);
            }
          }
        });

        if (rects.length > 0) {
          let minTop = Infinity, maxBottom = -Infinity, minLeft = Infinity, maxRight = -Infinity;
          rects.forEach((r: any) => {
            minTop = Math.min(minTop, r.top);
            maxBottom = Math.max(maxBottom, r.bottom);
            minLeft = Math.min(minLeft, r.left);
            maxRight = Math.max(maxRight, r.right);
          });
          rect = {
            top: minTop,
            bottom: maxBottom,
            left: minLeft,
            right: maxRight,
            width: maxRight - minLeft,
            height: maxBottom - minTop,
            x: minLeft,
            y: minTop,
            toJSON: () => {}
          } as DOMRect;
        }
      }
    }
  } catch (e) {
    console.warn('[Affine] Failed to get BlockSuite selection rect:', e);
  }

  // 2. 兜底使用原生选区 (对 Shadow DOM 兼容性可能较差)
  if (!rect || rect.top === 0) {
    const selection = window.getSelection();
    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      if (!range.collapsed) {
        rect = range.getBoundingClientRect();
      }
    }
  }

  // 3. 再次兜底使用最后的备份
  if (!rect || rect.top === 0) {
    if (lastSelectionRange) {
      rect = lastSelectionRange.getBoundingClientRect();
    }
  }

  // 4. 最后兜底使用触发按钮位置
  if (!rect || (rect.top === 0 && rect.bottom === 0 && rect.left === 0)) {
    rect = lastTriggerRect;
  }

  if (rect && (rect.top !== 0 || rect.bottom !== 0)) {
    const panelWidth = 400;
    // 动态预估高度，输入态较矮，结果态较高
    const panelHeight = aiPanelState.value === 'input' ? 320 : 480; 
    
    // 计算相对于视口的绝对位置 (AskAIPanel 现在 Teleport 到 body)
    let left = rect.left + (rect.width / 2) - (panelWidth / 2);
    let top = rect.bottom + 12;

    // 边界检查
    left = Math.max(16, Math.min(left, window.innerWidth - panelWidth - 16));
    
    // 空间不足向上弹出
    if (top + panelHeight > window.innerHeight - 20 && rect.top > panelHeight + 20) {
      top = rect.top - panelHeight - 12;
    }

    // 视野外处理
    let isHidden = false;
    if (container.value) {
      const containerRect = container.value.getBoundingClientRect();
      // 检查选区是否在编辑器视口之外
      if (rect.bottom < containerRect.top || rect.top > containerRect.bottom) {
        isHidden = true;
      }
    }

    if (isHidden && aiPanelState.value === 'input') {
      // 仅在输入状态下，且不可见时隐藏
      askAIMenuPosition.value = { top: -9999, left: -9999 };
    } else {
      askAIMenuPosition.value = { top: top, left: left };
    }
  }
};

const stopAIGeneration = () => {
  if (currentAiInterval) {
    clearInterval(currentAiInterval);
    currentAiInterval = null;
  }
  // 关键修复：停止生成并立即关闭弹窗
  handleAiClose();
};

const chatStore = useChatApiStore();

const aiLastPromptInfo = ref<{ text: string, prompt: string, action: string } | null>(null);

const handleAskAIMenuAction = async (action: string) => {
  console.log('[Affine] AI Action triggered:', action);
  currentAiAction.value = action;
  
  // 1. 获取选中内容 (优先使用 BlockSuite 原生 Selection)
  let selectedText = '';
  // 如果是重试，且我们有缓存，则使用缓存的文本
  if (action === 'retry' && aiLastPromptInfo.value) {
    selectedText = aiLastPromptInfo.value.text;
    action = aiLastPromptInfo.value.action;
  } else {
    try {
      if (stdScope) {
        // @ts-ignore
        const [_, ctx] = stdScope.command.exec(getSelectedModelsCommand, {
          types: ['block', 'text'],
        });
        if (ctx.selectedModels && ctx.selectedModels.length > 0) {
          selectedText = ctx.selectedModels
            .map((m: any) => m.text?.toString() || '')
            .filter(Boolean)
            .join('\n');
        }
      }
    } catch (e) {
      console.warn('[Affine] Failed to get BlockSuite selection, falling back to window.getSelection', e);
    }
    
    if (!selectedText) {
      const selection = window.getSelection();
      selectedText = selection ? selection.toString().trim() : '';
    }
  }

  // 构建 Prompt
  let prompt = '';
  if (action.startsWith('submit:')) {
    const userInput = action.substring(7);
    prompt = selectedText 
      ? `${t('affine.askAi.prompts.suggestBasedOn')}\n"${selectedText}"\n\n${t('affine.askAi.prompts.executeInstruction')}${userInput}`
      : userInput;
  } else if (action.includes(':')) {
    // 处理带参数的操作 (如 translate:english, change-tone:professional)
    const parts = action.split(':');
    const baseAction = parts[0];
    const param = parts[1];
    
    if (!baseAction || !param) return;

    const basePrompts: Record<string, string> = {
      'translate': t('affine.askAi.items.translate'),
      'change-tone': t('affine.askAi.items.changeTone')
    };
    
    // 获取参数的国际化文本 (如 english -> 英语)
    let localizedParam = param;
    if (baseAction === 'translate') {
      localizedParam = t(`affine.askAi.languages.${param}`);
    } else if (baseAction === 'change-tone') {
      localizedParam = t(`affine.askAi.tones.${param}`);
    }

    const actionName = basePrompts[baseAction] || baseAction;
    prompt = `${actionName} "${localizedParam}"：\n\n"${selectedText}"`;
  } else {
    const prompts: Record<string, string> = {
      'fix-spelling': t('affine.askAi.items.fixSpelling') + '：',
      'fix-grammar': t('affine.askAi.items.fixGrammar') + '：',
      'explain': t('affine.askAi.items.explain') + '：',
      'improve': t('affine.askAi.items.improve') + '：',
      'simplify': t('affine.askAi.items.simplify') + '：',
      'longer': t('affine.askAi.items.longer') + '：',
      'shorter': t('affine.askAi.items.shorter') + '：',
      'continue': t('affine.askAi.items.continue') + '：',
      'summarize': t('affine.askAi.items.summarize') + '：',
      'write-article': t('affine.askAi.items.writeArticle') + '：',
      'brainstorm': t('affine.askAi.items.brainstorm') + '：',
      'translate': t('affine.askAi.items.translate') + '：',
      'find-action-items': t('affine.askAi.items.findActionItems') + '：',
      'write-outline': t('affine.askAi.items.writeOutline') + '：',
      'write-social-media-post': t('affine.askAi.items.writeSocialMediaPost') + '：',
      'write-poem': t('affine.askAi.items.writePoem') + '：',
      'write-essay': t('affine.askAi.items.writeEssay') + '：',
    };
    const basePrompt = prompts[action] || 'AI: ';
    const noSelectionAllowed = [
      'write-article', 'brainstorm', 'write-outline', 
      'write-social-media-post', 'write-poem', 'write-essay'
    ];
    if (!selectedText && !noSelectionAllowed.includes(action)) {
      addToast(t('affine.askAi.toast.pleaseSelectText'), 'warning');
      return;
    }
    prompt = selectedText ? `${basePrompt}\n\n"${selectedText}"` : basePrompt;
  }

  // 缓存当前请求信息用于重试
  aiLastPromptInfo.value = { text: selectedText, prompt, action };

  // 2. 准备状态
  aiPanelState.value = 'generating';
  aiResult.value = '';

  try {
    // 3. 调用豆包模型
    const result = await (chatStore as any).sendMessage({
      sessionId: (chatStore as any).currentSessionId,
      question: prompt,
      provider: 'doubao'
    });

    if (result.success && result.data?.questionId) {
      const qid = result.data.questionId;
      
      if (currentAiInterval) clearInterval(currentAiInterval);
      
      currentAiInterval = setInterval(() => {
        const msg = chatStore.messages.find(m => m.questionId === qid);
        if (msg && msg.answers && msg.answers.length > 0) {
          const answer = msg.answers[0];
          if (answer) {
            aiResult.value = answer.answerContent || '';
            
            if (answer.status === 'completed') {
              clearInterval(currentAiInterval);
              currentAiInterval = null;
              aiPanelState.value = 'finished';
            } else if (answer.status === 'error') {
              clearInterval(currentAiInterval);
              currentAiInterval = null;
              aiPanelState.value = 'error';
              addToast(t('affine.askAi.status.error'), 'error');
            }
          }
        }
      }, 100);
    } else {
      throw new Error(result.error || t('affine.askAi.status.error'));
    }
  } catch (err: any) {
    console.error('[Affine] AI Action failed:', err);
    aiPanelState.value = 'error';
    addToast(`${t('affine.askAi.status.error')}: ${err.message}`, 'error');
  }
};

// 处理来自 AskAIPanel 的具体操作
const handleAiReplace = async (content: string) => {
  await replaceSelectionWithText(content);
  addToast(t('affine.askAi.toast.replaced'), 'success');
  handleAiClose();
  
  // 显式触发保存 (视为手动保存，确保状态更新)
  if (saveTimer) clearTimeout(saveTimer);
  setTimeout(() => {
    saveDocument(false).catch(err => console.error('[Affine] AI Auto-save failed:', err));
  }, 500);
};

const handleAiInsert = async (content: string) => {
  await insertBlockBelow(content);
  addToast(t('affine.askAi.toast.inserted'), 'success');
  handleAiClose();
  
  // 显式触发保存
  if (saveTimer) clearTimeout(saveTimer);
  setTimeout(() => {
    saveDocument(false).catch(err => console.error('[Affine] AI Auto-save failed:', err));
  }, 500);
};

const handleAiClose = () => {
  // 关闭面板时，如果正在生成，必须停止并清理资源
  if (currentAiInterval) {
    clearInterval(currentAiInterval);
    currentAiInterval = null;
  }
  
  showAskAIMenu.value = false;
  lastSelectionRange = null; 
  lastTriggerRect = null;
  lastBlockSuiteSelection = null; 
};

const handleAiRetry = () => {
  handleAskAIMenuAction('retry');
};

// 在当前选中块下方插入新块 (支持 Markdown 解析)
const insertBlockBelow = async (text: string) => {
  console.log('[Affine] insertBlockBelow triggered, text length:', text.length);
  if (!editorHost || !stdScope) {
    console.error('[Affine] insertBlockBelow: editorHost or stdScope not found');
    return;
  }

  isProgrammaticChange.value = true; // 锁定引用渲染

  try {
    let textSelection = stdScope.selection.find(TextSelection);
    // 使用备份的 BlockSuite 选区
    if ((!textSelection || textSelection.collapsed) && lastBlockSuiteSelection) {
      console.log('[Affine] Using cached lastBlockSuiteSelection for insertion');
      textSelection = lastBlockSuiteSelection;
    }

    if (textSelection) {
      // @ts-ignore
      const from = textSelection.from;
      const blockId = from.blockId;
      const currentStore = stdScope.store;
      const parentBlock = currentStore.getBlock(blockId);
      
      if (parentBlock) {
        const parentModel = parentBlock.model;
        const containerModel = parentBlock.model.parent;
        
        if (containerModel) {
          const index = containerModel.children.indexOf(parentModel);
          console.log('[Affine] Importing AI content blocks at index:', index + 1);
          
          // 使用 MarkdownAdapter 解析 AI 返回的内容 (可能包含多行、标题、列表等)
          const transformer = currentStore.getTransformer();
          const adapter = new MarkdownAdapter(transformer, currentStore.provider);
          const snapshot = await adapter.toDocSnapshot({ file: text });
          
          if (snapshot && snapshot.blocks) {
            // 使用辅助函数提取实际内容块
            const blocksToInsert = extractContentBlocks(snapshot);
            
            if (blocksToInsert.length > 0) {
              let currentInsertIndex = index + 1;
              for (const child of blocksToInsert) {
                try {
                  await transformer.snapshotToBlock(child, currentStore, containerModel.id, currentInsertIndex);
                  currentInsertIndex++;
                } catch (err) {
                  console.error('[Affine] Error when transforming snapshot to block:', err);
                }
              }
            } else {
              // 兜底：如果没有解析出块，作为普通段落插入
              currentStore.transact(() => {
                currentStore.addBlock('affine:paragraph', { text: new BlockSuiteText(text) }, containerModel.id, index + 1);
              });
            }
          } else {
            // 兜底：解析失败
            currentStore.transact(() => {
              currentStore.addBlock('affine:paragraph', { text: new BlockSuiteText(text) }, containerModel.id, index + 1);
            });
          }
          
          console.log('[Affine] BlockSuite multi-block insertion completed');
          
          if (editorHost && editorHost.requestUpdate) {
            editorHost.requestUpdate();
          }

          hasChanges.value = true;
          scheduleAutoSave(); 
          
          setTimeout(() => { 
            isProgrammaticChange.value = false; 
            if (editorHost && editorHost.requestUpdate) editorHost.requestUpdate();
          }, 300);
          return;
        }
      }
    }
  } catch (e) {
    console.error('[Affine] BlockSuite multi-block insert failed:', e);
  }

  // 兜底：DOM 操作
  console.log('[Affine] Fallback to DOM insertion');
  insertTextAtCursor('\n' + text + '\n');
  setTimeout(() => { isProgrammaticChange.value = false; }, 300);
};

// 在选区位置替换为新内容 (支持 Markdown 解析)
const replaceSelectionWithText = async (text: string) => {
  console.log('[Affine] replaceSelectionWithText async triggered, text length:', text.length);
  if (!editorHost) {
    console.error('[Affine] editorHost not found');
    return;
  }
  
  let textSelection: any = null;
  isProgrammaticChange.value = true; // 锁定引用渲染

  try {
    if (stdScope) {
      // @ts-ignore
      textSelection = stdScope.selection.find(TextSelection);
    }

    // 使用备份的 BlockSuite 选区
    if ((!textSelection || (textSelection.to === null && (!textSelection.from || !textSelection.from.length))) && lastBlockSuiteSelection) {
      console.log('[Affine] Using cached lastBlockSuiteSelection:', lastBlockSuiteSelection);
      textSelection = lastBlockSuiteSelection;
    }

    if (textSelection) {
      // @ts-ignore
      const from = textSelection.from;
      // @ts-ignore
      const to = textSelection.to;
      const currentStore = stdScope ? stdScope.store : store;
      const isSingleBlock = !to || (to.blockId === from.blockId);

      if (from && isSingleBlock) {
        const blockId = from.blockId;
        const block = currentStore.getBlock(blockId);
        const model = block?.model;
        
        if (model && model.text) {
          try {
            const currentText = model.text.toString();
            const fromIndex = Math.min(from.index, currentText.length);
            let selectionLength = 0;
            if (to) {
               selectionLength = to.index - from.index;
            } else if (typeof from.length === 'number') {
               selectionLength = from.length;
            }
            if (selectionLength < 0) selectionLength = 0;
            const toIndex = Math.min(fromIndex + selectionLength, currentText.length);
            
            // 核心修复逻辑：
            // 使用 MarkdownAdapter 解析 AI 内容，并合并到当前文档中
            const transformer = currentStore.getTransformer();
            const adapter = new MarkdownAdapter(transformer, currentStore.provider);
            
            // 构造完整的 Markdown 字符串进行解析
            const fullMarkdown = currentText.slice(0, fromIndex) + text + currentText.slice(toIndex);
            const snapshot = await adapter.toDocSnapshot({ file: fullMarkdown });
            
            if (snapshot && snapshot.blocks) {
              const blocksToInsert = extractContentBlocks(snapshot);
              
              if (blocksToInsert.length === 1 && blocksToInsert[0].flavour === 'affine:paragraph') {
                // 情况 A: 结果仍然是单段落，直接更新内容
                const newTextProp = blocksToInsert[0].props?.text;
                console.log('[Affine] Single block replacement (paragraph)');
                currentStore.transact(() => {
                  currentStore.updateBlock(model, {
                    text: newTextProp instanceof BlockSuiteText ? newTextProp : new BlockSuiteText(text)
                  });
                });
              } else if (blocksToInsert.length > 0) {
                // 情况 B: 结果变成了多块，执行块拆分
                const containerModel = model.parent;
                if (containerModel) {
                  const currentIndex = containerModel.children.indexOf(model);
                  console.log('[Affine] Multi-block replacement starting at index:', currentIndex);
                  
                  // 注意：snapshotToBlock 内部会创建新块。
                  // 我们先删除旧块，然后在原位置逐个插入新块。
                  currentStore.transact(() => {
                    currentStore.deleteBlock(model);
                  });
                  
                  let insertPos = currentIndex;
                  for (const child of blocksToInsert) {
                    try {
                      console.log('[Affine] Replacing with block:', child.flavour, 'at pos:', insertPos);
                      await transformer.snapshotToBlock(child, currentStore, containerModel.id, insertPos++);
                    } catch (e) {
                      console.error('[Affine] Error when transforming replace snapshot to block:', e);
                    }
                  }
                }
              }
            } else {
              // 兜底：纯文本更新
              currentStore.transact(() => {
                currentStore.updateBlock(model, { text: new BlockSuiteText(fullMarkdown) });
              });
            }

            console.log('[Affine] BlockSuite replacement completed');
            if (editorHost && editorHost.requestUpdate) editorHost.requestUpdate();

            setTimeout(() => {
               try {
                 if (stdScope) {
                   const updatedBlock = currentStore.getBlock(blockId);
                   const finalLen = updatedBlock?.model.text?.length || 0;
                   const newIndex = Math.min(from.index + text.length, finalLen);
                   // @ts-ignore
                   const sel = stdScope.selection.create(TextSelection, {
                     from: { blockId: blockId, index: newIndex, length: 0 },
                     to: null
                   });
                   stdScope.selection.setGroup('note', [sel]);
                   if (editorHost.requestUpdate) editorHost.requestUpdate();
                 }
               } finally {
                 setTimeout(() => { isProgrammaticChange.value = false; }, 300);
               }
            }, 100);

            hasChanges.value = true;
            scheduleAutoSave(); 
            return;
          } catch (err) {
            console.error('[Affine] Transaction failed:', err);
            isProgrammaticChange.value = false;
          }
        }
      }
    }
  } catch (e) {
    console.error('[Affine] BlockSuite replacement failed:', e);
    isProgrammaticChange.value = false;
  }

  // 2. 兜底：使用原生 DOM 操作
  console.log('[Affine] Fallback to DOM replacement');
  
  let selection = window.getSelection();
  let range: Range | null = null;

  // 优先使用当前有效选区，否则使用备份选区
  if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
    console.log('[Affine] Using current window selection');
    range = selection.getRangeAt(0);
  } else if (lastSelectionRange) {
    console.log('[Affine] Using cached lastSelectionRange');
    range = lastSelectionRange;
  }

  if (range) {
    console.log('[Affine] Range found:', range);
    try {
      // 重新建立选区
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }
      
      console.log('[Affine] Executing DOM deleteContents');
      range.deleteContents();
      
      console.log('[Affine] Executing DOM insertNode');
      const textNode = document.createTextNode(text);
      range.insertNode(textNode);
      
      // 关键修复：DOM 操作后尝试同步 Store 模型，如果失败则静默
      // 我们刚刚手动修改了 DOM，这破坏了 Lit 的状态一致性
      // 尝试通过空事务触发 BlockSuite 的重新同步
      try {
        if (textSelection && textSelection.from) {
           const blockId = textSelection.from.blockId;
           store.transact(() => {
             // 执行一个无害的操作来触发更新
             const block = store.getBlock(blockId);
             if (block && block.model.text) {
               // 只是为了触发 update，不做实际修改
               // block.model.text.insert(0, ''); 
             }
           });
        }
      } catch (e) {}
      
      hasChanges.value = true;
      scheduleAutoSave(); 
      nextTick(() => renderCitationsInAffine());
      console.log('[Affine] DOM replacement success');
    } catch (domError) {
      console.error('[Affine] DOM replacement failed:', domError);
      // 最后的救命稻草：追加到 note 结尾
      insertTextAtCursor('\n' + text);
    }
  } else {
     console.warn('[Affine] No DOM range available, appending to cursor');
     // 如果连备份选区都没有，只能追加
     insertTextAtCursor('\n' + text);
  }
};

const appStore = useAppStore();

// 辅助函数：从 DocSnapshot 中提取实际可用的内容块 (过滤掉 page/note/surface 等结构块)
const extractContentBlocks = (snapshot: any) => {
  if (!snapshot || !snapshot.blocks) return [];
  
  console.log('[Affine] Extracting content blocks from snapshot...');
  const contentBlocks: any[] = [];
  
  // 只允许插入到 affine:note 中的业务块 flavour
  const contentFlavours = [
    'affine:paragraph', 'affine:heading', 'affine:list', 'affine:code', 
    'affine:image', 'affine:attachment', 'affine:divider', 'affine:equation',
    'affine:database', 'affine:canvas'
  ];

  const traverse = (node: any) => {
    if (!node) return;
    
    if (contentFlavours.includes(node.flavour)) {
      // 找到了业务块，克隆并清理它，防止携带非法的子节点
      const cleanNode = { ...node };
      // 业务块通常不应该包含 surface 或 note 这种结构块作为子节点
      if (cleanNode.children) {
        cleanNode.children = cleanNode.children.filter((c: any) => contentFlavours.includes(c.flavour));
      }
      contentBlocks.push(cleanNode);
    } else if (node.children) {
      // 结构块（如 page, note, surface），我们跳过它们本身，继续找它们的子节点
      for (const child of node.children) {
        traverse(child);
      }
    }
  };
  
  traverse(snapshot.blocks);
  console.log('[Affine] Extracted content blocks:', contentBlocks.map(b => b.flavour));
  return contentBlocks;
};

// 参考文献相关状态
const editorHeight = ref("70%");
const referenceHeight = ref("30%");
const searchQuery = ref("");
const editingReferenceId = ref<number | null>(null); // 记录正在编辑的参考文献ID
const editingAlias = ref(""); // 编辑中的别名内容
const selectedReferenceId = ref<number | null>(null); // 记录选中的参考文献ID
const isHandlingEnterKey = ref(false); // 标记是否正在处理回车键
const currentDetailReference = ref<ReferenceDetail | null>(null); // 当前查看详情的参考文献
const isLoadingDetail = ref(false); // 是否正在加载详情

// 导入参考文献对话框相关状态
const importDialogVisible = ref(false); // 对话框显示状态
const importMethod = ref<"title" | "doi">("title"); // 导入方式：title 或 doi
const importInput = ref(""); // 输入内容
const importInputRef = ref<InstanceType<typeof ElInput>>(); // 输入框引用
const isSearching = ref(false); // 搜索中状态
const hasSearched = ref(false); // 是否已经搜索过
const searchResults = ref<any[]>([]); // 搜索结果列表

// 导出相关状态
const exportOutputFormat = ref<"html" | "markdown" | "png">("markdown"); // 输出格式
const exportCitationFormat = ref<"apa" | "ieee">("apa"); // 引用格式
const isExporting = ref(false); // 是否正在导出

// 参考文献列表相关状态
const references = ref<any[]>([]); // 参考文献列表
const isLoadingReferences = ref(false); // 是否正在加载参考文献
const referencesTotal = ref(0); // 参考文献总数

// 拖拽调整高度相关状态
const isResizing = ref(false);
const startY = ref(0);
const startEditorHeight = ref(0);
const startReferenceHeight = ref(0);

// 过滤后的参考文献（用于参考文献表格）
const filteredReferences = computed(() => {
  if (!searchQuery.value.trim()) {
    return references.value;
  }

  const query = searchQuery.value.toLowerCase().trim();
  return references.value.filter(
    (ref) =>
      ref.title.toLowerCase().includes(query) ||
      ref.authorsText.toLowerCase().includes(query) ||
      (ref.note && ref.note.toLowerCase().includes(query)) ||
      ref.publicationYear.toString().includes(query) ||
      (ref.doi && ref.doi.toLowerCase().includes(query)),
  );
});

// 计算属性相关部分结束

let citationObserver: MutationObserver | null = null;

// 极致体验：引用标记渲染核心逻辑 (深度还原 Vditor 逻辑与样式)
const renderCitationsInAffine = () => {
  if (!container.value || isProgrammaticChange.value) return;
  
  // 锁定，防止 MutationObserver 递归触发死循环
  isProgrammaticChange.value = true;

  try {
    const walk = (root: Node | ShadowRoot) => {
      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
      let node;
      const targets: Text[] = [];
      
      while (node = walker.nextNode()) {
        const textNode = node as Text;
        
        // 避开已经在标签内的 (兼容多种层级)
        const parent = textNode.parentElement;
        if (parent && (parent.closest('.citation-tag') || parent.closest('.editor-toolbar') || parent.closest('.reference-section'))) {
          continue;
        }
        
        if (/\{\{cite:([^:]+):([^}]*)\}\}/.test(textNode.textContent || '')) {
          targets.push(textNode);
        }
      }
      
      targets.forEach(textNode => {
        const text = textNode.textContent || '';
        const regex = /\{\{cite:([^:]+):([^}]*)\}\}/g;
        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        let match;
        
        while ((match = regex.exec(text)) !== null) {
          if (match.index > lastIndex) {
            fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
          }
          
          const workId = String(match[1]);
          const note = String(match[2] || '');
          const markup = match[0];
          
          // 智能匹配逻辑 (深度还原 Vditor)
          let matchedReference = null;
          if (references.value.length > 0) {
            // 1. 优先尝试通过 note/title/authors 匹配 (增加去空格处理)
            const cleanNote = note.trim().toLowerCase();
            if (cleanNote) {
              matchedReference = references.value.find(ref => 
                (ref.note && ref.note.trim().toLowerCase() === cleanNote) ||
                (ref.title && ref.title.trim().toLowerCase() === cleanNote)
              );
              
              if (!matchedReference) {
                matchedReference = references.value.find(ref => 
                  (ref.title && ref.title.toLowerCase().includes(cleanNote)) ||
                  (ref.authorsText && ref.authorsText.toLowerCase().includes(cleanNote))
                );
              }
            }
            // 2. 如果 note 没匹配到，或者没有 note，则尝试通过 workId 匹配
            if (!matchedReference && workId) {
              matchedReference = references.value.find(ref => String(ref.workId) === String(workId));
            }
          }

          // 只要符合格式，就渲染成标签，即使没找到匹配项（显示原始 note 或 workId）
          const finalWorkId = matchedReference ? String(matchedReference.workId) : workId;
          const finalNote = matchedReference ? (matchedReference.note || matchedReference.title || "") : (note || workId);
          const correctedMarkup = matchedReference ? `{{cite:${finalWorkId}:${finalNote}}}` : markup;
          const displayText = `cite:${finalNote}`;

          const span = document.createElement('span');
          span.className = 'citation-tag';
          if (!matchedReference) span.classList.add('unmatched'); 
          
          span.setAttribute('data-work-id', finalWorkId);
          // 关键：存储原始 markup 以便在 replaceCitation 中能准确找到并替换
          span.setAttribute('data-citation-markup', markup);
          span.setAttribute('data-display-text', displayText);
          span.setAttribute('contenteditable', 'false');
          
          // 设置 textContent 为 markup 但由 CSS 隐藏，::before 显示 label
          span.textContent = correctedMarkup;
          
          // 隐藏容器用于定位和标记识别
          const content = document.createElement('span');
          content.className = 'citation-tag-content';
          content.textContent = correctedMarkup;
          span.appendChild(content);
          
          span.onclick = (e) => {
            openCitationMenu(span, e);
          };
          
          fragment.appendChild(span);
          
          lastIndex = regex.lastIndex;
        }
        
        if (lastIndex < text.length) {
          fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
        }
        
        try {
          // 在替换前检查父节点是否仍然存在于文档中
          if (textNode.parentNode) {
            textNode.parentNode.replaceChild(fragment, textNode);
          }
        } catch (e) {
          console.warn("Citation render replace failed:", e);
        }
      });

      // 递归处理 Shadow DOM
      const children = root instanceof ShadowRoot ? root.children : (root as Element).children;
      if (children) {
        for (const child of Array.from(children)) {
          if (child.shadowRoot) walk(child.shadowRoot);
          else walk(child);
        }
      }
    };

    walk(container.value);
  } finally {
    // 释放锁：改为立即释放或极短延迟，防止错过 Lit 的后续更新
    isProgrammaticChange.value = false;
  }
};

// 监听参考文献数据变化，数据加载后重新渲染
watch(() => references.value, (newRefs) => {
  if (newRefs && newRefs.length > 0) {
    nextTick(() => {
      renderCitationsInAffine();
    });
  }
}, { deep: true });

// 启动 DOM 监听
const initCitationObserver = () => {
  if (!container.value) return;
  
  // 初始渲染
  renderCitationsInAffine();
  
  // 监听内容变化
  citationObserver = new MutationObserver((mutations) => {
    // 即使 isProgrammaticChange 为 true，如果发现了原始标记文本，也应该考虑处理
    // 但为了稳定，我们还是尊重锁，只是把锁的释放变得更即时了
    if (isProgrammaticChange.value) return; 
    
    let shouldRender = false;
    for (const mutation of mutations) {
      if (mutation.type === 'childList' || mutation.type === 'characterData') {
        const target = mutation.target as Node;
        const element = target.nodeType === Node.ELEMENT_NODE ? (target as HTMLElement) : target.parentElement;
        
        // 避开我们自己的标签和工具栏
        if (element && (element.closest('.citation-tag') || element.closest('.editor-toolbar'))) continue;
        
        shouldRender = true;
        break;
      }
    }
    if (shouldRender) {
      renderCitationsInAffine();
    }
  });
  
  citationObserver.observe(container.value, {
    childList: true,
    subtree: true,
    characterData: true
  });
};

const handleEditorCopy = (event: ClipboardEvent) => {
  // 如果正在搜索或执行命令，不干预
  if (showSearch.value && document.activeElement === searchInput.value) return;
  if (showCommandPalette.value && document.activeElement === commandInput.value) return;

  try {
    // 检查是否在编辑器内触发
    const path = event.composedPath();

    const isInsideEditor = path.some((el: any) => {
      const tagName = el.tagName || '';
      const classList = el.classList;
      return tagName === 'EDITOR-HOST' || 
             tagName === 'BLOCKSUITE-EDITOR' ||
             tagName.startsWith('AFFINE-') ||
             (classList && (
               classList.contains('affine-editor-container') || 
               classList.contains('blocksuite-editor') ||
               classList.contains('affine-page-root') ||
               Array.from(classList).some((c: any) => c.startsWith('affine-'))
             ));
    });

    if (!isInsideEditor) return;

    let text = '';
    
    // 1. 尝试从 BlockSuite 获取选中文本
    if (stdScope) {
      // 方法 A: 使用 getSelectedModelsCommand (更全面)
      try {
        // @ts-ignore
        const [_, ctx] = stdScope.command.exec(getSelectedModelsCommand, {
          types: ['block', 'text'],
        });
        if (ctx.selectedModels && ctx.selectedModels.length > 0) {
          text = ctx.selectedModels
            .map((m: any) => m.text?.toString() || '')
            .filter(Boolean)
            .join('\n');
        }
      } catch (e) {
        console.warn('[Affine] getSelectedModelsCommand failed:', e);
      }

      // 方法 B: 兜底使用 TextSelection
      if (!text) {
        const textSelection = stdScope.selection.find(TextSelection);
        if (textSelection && !textSelection.collapsed) {
          const models = textSelection.selectedModels;
          if (models && models.length > 0) {
            text = models
              .map((m: any) => m.text?.toString() || '')
              .filter(Boolean)
              .join('\n');
          }
        }
      }
      
      // 方法 C: 兜底使用 BlockSelection
      if (!text) {
        const blockSelection = stdScope.selection.find(BlockSelection);
        if (blockSelection && blockSelection.blockIds.length > 0) {
          text = blockSelection.blockIds
            .map((id: string) => store.getBlock(id)?.model?.text?.toString() || '')
            .filter(Boolean)
            .join('\n');
        }
      }
    }

    // 3. 兜底：使用标准 DOM 选区
    if (!text) {
      const selection = window.getSelection();
      text = selection ? selection.toString() : '';
    }

    // 4. 将文本写入剪贴板的 text/plain 格式
    if (text) {
      if (event.clipboardData) {
        event.clipboardData.setData('text/plain', text);
      }
      
      const textToCopy = text;
      setTimeout(async () => {
        try {
          await navigator.clipboard.writeText(textToCopy);
        } catch (err) {
          // 忽略可能的权限错误（如果此时已失去焦点）
          console.debug('[Affine] Deferred clipboard sync info:', err);
        }
      }, 50);
    }
  } catch (e) {
    console.warn('[Affine] Copy handler failed:', e);
  }
};

const handleEditorPaste = (event: ClipboardEvent) => {
  // 如果正在搜索，不拦截粘贴
  if (showSearch.value && document.activeElement === searchInput.value) return;
  if (showCommandPalette.value && document.activeElement === commandInput.value) return;

  if (!event.clipboardData) return;

  const text = event.clipboardData.getData("text/plain");

  // 尝试解析 JSON 格式的引用数据
  let parsedData: any = null;
  try {
    parsedData = JSON.parse(text);
    if (!(parsedData && parsedData.work_id !== undefined)) {
      return; // 不是有效的引用数据
    }
  } catch (error) {
    return; // 不是 JSON 格式
  }

  // 如果是引用数据，拦截并处理
  event.preventDefault();
  event.stopPropagation();

  const workId = parsedData.work_id;
  const note = parsedData.note || "";
  const citationMarkup = `{{cite:${workId}:${note}}}`;

  // 在 Affine 中插入内容
  insertTextAtCursor(citationMarkup);
  addToast(`已插入引用: ${note || workId}`, 'success');
  
  // 强制触发一次渲染
  nextTick(() => renderCitationsInAffine());
};

const handleEditorDrop = (event: DragEvent) => {
  if (!event.dataTransfer) return;
  
  const jsonString = event.dataTransfer.getData("text/plain") || event.dataTransfer.getData("application/json");
  if (!jsonString) return;

  try {
    const parsedData = JSON.parse(jsonString);
    if (parsedData && parsedData.work_id !== undefined) {
      event.preventDefault();
      event.stopPropagation();
      
      const workId = parsedData.work_id;
      const note = parsedData.note || "";
      const citationMarkup = `{{cite:${workId}:${note}}}`;
      
      insertTextAtCursor(citationMarkup);
      addToast(`已放置引用: ${note || workId}`, 'success');
      
      // 强制触发一次渲染
      nextTick(() => renderCitationsInAffine());
    }
  } catch (e) {
    // 忽略非 JSON 放置
  }
};

const insertTextAtCursor = (text: string) => {
  if (!editorHost) return;
  
  // 核心优化：尝试使用更加原生的方式插入，兼容 Shadow DOM
  const selection = window.getSelection();
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    range.deleteContents();
    const textNode = document.createTextNode(text);
    range.insertNode(textNode);
    
    // 移动光标
    range.setStartAfter(textNode);
    range.setEndAfter(textNode);
    selection.removeAllRanges();
    selection.addRange(range);
    
    hasChanges.value = true;
    scheduleAutoSave(); // 手动触发保存
  } else {
    // 兜底：如果没焦点，尝试找到 note 并追加
    const note = store.getAllModels().find((m: any) => m.flavour === 'affine:note');
    if (note && note.children.length > 0) {
      const lastChild = store.getBlock(note.children[note.children.length - 1]);
      if (lastChild && lastChild.model.text) {
        lastChild.model.text.insert(lastChild.model.text.length, text);
        hasChanges.value = true;
        scheduleAutoSave(); // 手动触发保存
      }
    }
  }
};

// 参考文献核心方法实现
const loadReferences = async () => {
  if (!props.fileId) {
    console.warn("⚠️ 无法加载参考文献：fileId 为空");
    return;
  }
  
  isLoadingReferences.value = true;
  try {
    const response = await getFileReferences(
      props.fileId,
      undefined,
      undefined,
      props.isChatAnswer
    );
    
    if (response && response.data) {
      const { items, total } = response.data;
      references.value = (items || []).map((item: ReferenceItem, index: number) => ({
        ...item,
        serialNumber: index + 1,
      }));
      referencesTotal.value = total || 0;
      console.log('[Affine] References loaded:', references.value.length);
    } else {
      references.value = [];
    }
  } catch (error) {
    console.error("加载参考文献失败:", error);
    addToast("加载参考文献失败", "error");
  } finally {
    isLoadingReferences.value = false;
  }
};

const openImportDialog = () => {
  importDialogVisible.value = true;
  searchResults.value = [];
  importInput.value = "";
  hasSearched.value = false;
  nextTick(() => {
    importInputRef.value?.focus();
  });
};

const closeImportDialog = () => {
  importDialogVisible.value = false;
};

const handleImportSearch = async () => {
  if (!importInput.value.trim()) {
    addToast(importMethod.value === "title" ? "请输入文献标题" : "请输入 DOI", "warning");
    return;
  }
  isSearching.value = true;
  hasSearched.value = true;
  searchResults.value = [];
  try {
    let res;
    if (importMethod.value === "title") {
      res = await searchReferencesByTitle(importInput.value.trim());
    } else {
      res = await searchReferencesByDoi(importInput.value.trim());
    }
    
    if (res && res.data && res.data.items) {
      searchResults.value = res.data.items.map((item: ImportSearchResultItem) => ({
        ...item,
        importing: false,
      }));
    } else {
      searchResults.value = [];
    }
  } catch (error) {
    console.error("搜索参考文献失败:", error);
    addToast("搜索失败", "error");
  } finally {
    isSearching.value = false;
  }
};

const handleAddReference = async (result: any) => {
  if (!props.fileId) return;

  // 检查是否已经导入过
  if (references.value.some((ref) => ref.workId === result.workId)) {
    addToast("该文献已经导入", "warning");
    // 从结果中移除
    searchResults.value = searchResults.value.filter(
      (r) => r.workId !== result.workId,
    );
    // 如果结果为空，重置已搜索状态，避免显示“没有找到匹配的文献”
    if (searchResults.value.length === 0) {
      hasSearched.value = false;
    }
    return;
  }

  try {
    result.importing = true;
    const response = await addReferenceToFile(Number(props.fileId), result.workId);
    
    const isSuccess = response && ((response as any).code === 200 || (response as any).status === 200);
    if (isSuccess) {
      addToast("成功导入文献", "success");
      // 从结果中移除
      searchResults.value = searchResults.value.filter(r => r.workId !== result.workId);
      loadReferences();
      // 如果搜索结果空了，关闭对话框
      if (searchResults.value.length === 0) {
        closeImportDialog();
      }
    } else {
      throw new Error((response as any)?.message || "导入失败");
    }
  } catch (error) {
    console.error("添加参考文献失败:", error);
    addToast(`导入失败: ${(error as Error).message}`, "error");
  } finally {
    result.importing = false;
  }
};

const handleDeleteReference = async (reference: any) => {
  if (!props.fileId) return;
  try {
    await ElMessageBox.confirm(
      `确定要从该文件中移除参考文献《${reference.title}》吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );
    await deleteReferenceFromFile(props.fileId, reference.workId);
    addToast("移除参考文献成功", "success");
    if (selectedReferenceId.value === reference.workId) {
      selectedReferenceId.value = null;
    }
    loadReferences();
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除参考文献失败:", error);
      addToast("移除失败", "error");
    }
  }
};

const startEditAlias = (reference: any) => {
  editingReferenceId.value = reference.workId;
  editingAlias.value = reference.note || "";

  // 在下一帧自动聚焦到输入框并全选
  nextTick(() => {
    const input = document.querySelector(".alias-input") as HTMLInputElement;
    if (input) {
      input.focus();
      input.select();
    }
  });
};

const handleBlur = (reference: any) => {
  // 如果正在处理回车键，跳过失焦事件，防止重复保存
  if (isHandlingEnterKey.value) {
    isHandlingEnterKey.value = false;
    return;
  }
  if (editingReferenceId.value === reference.workId) {
    saveAlias(reference);
  }
};

const handleEnterKey = (reference: any) => {
  isHandlingEnterKey.value = true;
  saveAlias(reference);
};

// 核心：更新编辑器数据模型中的引用标记
const updateCitationMarksInAffine = (workId: string | number, newNote: string) => {
  if (!store) return;
  const workIdStr = String(workId);
  // 转义 workId 以防特殊字符破坏正则
  const escapedId = workIdStr.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`\\{\\{cite:${escapedId}:([^}]*)\\}\\}`, 'g');
  const replacement = `{{cite:${workIdStr}:${newNote}}}`;

  const models = store.getAllModels();
  let updated = false;

  models.forEach((model: any) => {
    if (model.text) {
      const originalText = model.text.toString();
      let match;
      const matches = [];
      
      // 重置正则状态
      regex.lastIndex = 0;
      while ((match = regex.exec(originalText)) !== null) {
        matches.push({ index: match.index, length: match[0].length });
      }

      if (matches.length > 0) {
        // 从后往前替换，避免偏移量失效
        matches.reverse().forEach(m => {
          model.text.delete(m.index, m.length);
          model.text.insert(replacement, m.index);
        });
        updated = true;
      }
    }
  });

  if (updated) {
    hasChanges.value = true;
    console.log(`[Affine] Updated citation marks for workId: ${workId}`);
  }
};

const saveAlias = async (reference: any) => {
  if (!props.fileId) return;
  const workId = reference.workId;
  const newNote = editingAlias.value.trim();

  if (newNote === reference.note) {
    editingReferenceId.value = null;
    isHandlingEnterKey.value = false;
    return;
  }

  try {
    const response = await updateReferenceNote(props.fileId, workId, newNote);
    
    // 检查响应
    const isSuccess = response && ((response as any).code === 200 || (response as any).status === 200);
    
    if (isSuccess) {
      reference.note = newNote;
      addToast("更新别名成功", "success");
      
      // 核心：更新编辑器 Markdown 模型中的引用标记
      updateCitationMarksInAffine(workId, newNote);
      
      // 同步更新编辑器中的引用标签视觉呈现
      nextTick(() => renderCitationsInAffine());
    } else {
      throw new Error("API 返回错误");
    }
  } catch (error) {
    console.error("更新别名失败:", error);
    addToast("更新失败", "error");
  } finally {
    editingReferenceId.value = null;
    isHandlingEnterKey.value = false;
  }
};

const viewReferenceDetail = async (reference: any) => {
  currentDetailReference.value = { ...reference };
  isLoadingDetail.value = true;
  try {
    const res = await getReferenceDetail(reference.workId);
    if (res && res.data) {
      currentDetailReference.value = res.data;
    }
  } catch (error) {
    console.error("获取参考文献详情失败:", error);
  } finally {
    isLoadingDetail.value = false;
  }
};

// 引用弹窗与菜单相关状态
let citationModalElement: HTMLElement | null = null;
let citationClickOutsideHandler: ((e: MouseEvent) => void) | null = null;
let citationScrollHandler: ((e: Event) => void) | null = null;

const showCitationMenu = ref(false);
const citationMenuPosition = ref({ x: 0, y: 0 });
const citationMenuRef = ref<HTMLElement | null>(null);
const citationMenuSearch = ref("");
const currentCitationSpan = ref<HTMLElement | null>(null);
const currentCitationBlockId = ref<string | null>(null);
const currentCitationMarkup = ref<string | null>(null);

const filteredCitationMenuReferences = computed(() => {
  if (!citationMenuSearch.value.trim()) {
    return references.value;
  }

  const query = citationMenuSearch.value.toLowerCase().trim();
  return references.value.filter(
    (ref) =>
      ref.title.toLowerCase().includes(query) ||
      ref.authorsText.toLowerCase().includes(query) ||
      (ref.note && ref.note.toLowerCase().includes(query)),
  );
});

// HTML 转义函数
const escapeHtml = (text: string): string => {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
};

// 显示引用弹窗 (深度还原 DeerFlowChat 样式)
const showCitationModal = (
  target: HTMLElement,
  referenceDetail: ReferenceDetail,
) => {
  if (citationClickOutsideHandler) {
    document.removeEventListener("click", citationClickOutsideHandler);
    citationClickOutsideHandler = null;
  }
  if (citationScrollHandler) {
    window.removeEventListener("scroll", citationScrollHandler, true);
    citationScrollHandler = null;
  }
  if (citationModalElement) {
    citationModalElement.classList.remove("show");
    citationModalElement.remove();
    citationModalElement = null;
  }

  citationModalElement = document.createElement("div");
  citationModalElement.className = "citation-modal";

  let modalHTML = `
    <div class="citation-modal-header">
      <div class="citation-modal-title">引用文献</div>
      <button class="citation-modal-close" aria-label="关闭">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="citation-modal-body">
      <div class="citation-modal-content-text">
  `;

  if (referenceDetail.authorsText) {
    const authors = referenceDetail.authorsText
      .split(/[;,]/)
      .map((author) => author.trim())
      .filter((author) => author.length > 0);
    const displayAuthors = authors.slice(0, 3);
    let authorsDisplayText = displayAuthors.join(", ");
    if (authors.length > 3) authorsDisplayText += ", et al.";
    modalHTML += `<span class="citation-author">${escapeHtml(authorsDisplayText)}</span> `;
  }

  if (referenceDetail.title) {
    modalHTML += `<span class="title-bold">"${escapeHtml(referenceDetail.title)}"</span> `;
  }

  const journalName = referenceDetail.venueName;
  if (journalName) {
    modalHTML += `<span class="journal-style">${escapeHtml(journalName)}.</span> `;
  }

  const otherParts: string[] = [];
  if (referenceDetail.volume) otherParts.push(`vol. ${referenceDetail.volume}`);
  if (referenceDetail.issue) otherParts.push(`no. ${referenceDetail.issue}`);
  if (referenceDetail.publicationYear) otherParts.push(String(referenceDetail.publicationYear));
  if (referenceDetail.pages) otherParts.push(`pp. ${referenceDetail.pages}`);
  if (referenceDetail.doi) otherParts.push(`DOI: ${referenceDetail.doi}`);

  if (otherParts.length > 0) {
    modalHTML += `<span class="citation-other">${escapeHtml(otherParts.join(", "))}</span>`;
  }

  modalHTML += `</div></div>`;

  const url = referenceDetail.landingUrl || referenceDetail.pdfUrl;
  if (url) {
    modalHTML += `
      <div class="citation-modal-footer">
        <a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" class="citation-modal-link">
          查看原文 <i class="fas fa-external-link-alt"></i>
        </a>
      </div>
    `;
  }

  citationModalElement.innerHTML = modalHTML;
  const closeBtn = citationModalElement.querySelector(".citation-modal-close");
  if (closeBtn) closeBtn.addEventListener("click", hideCitationModal);

  citationModalElement.style.visibility = "hidden";
  document.body.appendChild(citationModalElement);

  const rect = target.getBoundingClientRect();
  const modalRect = citationModalElement.getBoundingClientRect();

  let left = rect.left + rect.width / 2 - modalRect.width / 2;
  let top = rect.top - modalRect.height - 10;

  if (left < 10) left = 10;
  if (left + modalRect.width > window.innerWidth - 10) left = window.innerWidth - modalRect.width - 10;
  if (top < 10) top = rect.bottom + 10;
  if (top + modalRect.height > window.innerHeight - 10) top = window.innerHeight - modalRect.height - 10;

  citationModalElement.style.left = `${left}px`;
  citationModalElement.style.top = `${top}px`;
  citationModalElement.style.visibility = "visible";

  requestAnimationFrame(() => {
    if (citationModalElement) citationModalElement.classList.add("show");
  });

  citationClickOutsideHandler = (event: MouseEvent) => {
    const targetEl = event.target as HTMLElement;
    if (citationModalElement && !citationModalElement.contains(targetEl) && !target.contains(targetEl)) {
      hideCitationModal();
    }
  };
  setTimeout(() => document.addEventListener("click", citationClickOutsideHandler!), 10);

  citationScrollHandler = () => hideCitationModal();
  window.addEventListener("scroll", citationScrollHandler, true);
};

const hideCitationModal = () => {
  if (citationModalElement) {
    citationModalElement.classList.remove("show");
    setTimeout(() => {
      if (citationModalElement && !citationModalElement.classList.contains("show")) {
        citationModalElement.remove();
        citationModalElement = null;
      }
    }, 200);
  }
  if (citationClickOutsideHandler) {
    document.removeEventListener("click", citationClickOutsideHandler);
    citationClickOutsideHandler = null;
  }
  if (citationScrollHandler) {
    window.removeEventListener("scroll", citationScrollHandler, true);
    citationScrollHandler = null;
  }
};

// 打开引用切换菜单 (深度还原 Vditor 交互)
const openCitationMenu = (span: HTMLElement, event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();

  currentCitationSpan.value = span;
  
  // 优化：跨 Shadow DOM 查找 blockId
  let blockId = null;
  let current: Node | null = span;
  while (current) {
    if (current instanceof HTMLElement && (current.hasAttribute('data-block-id') || current.getAttribute('flavour'))) {
      blockId = current.getAttribute('data-block-id') || (current as any).model?.id;
      if (blockId) break;
    }
    // 跨越 Shadow Root 边界
    if (current instanceof ShadowRoot) {
      current = current.host;
    } else {
      current = current.parentNode || (current as any).host; // 兼容更多 Shadow DOM 情况
    }
  }
  
  // 如果还是找不到，尝试从点击事件的路径中找
  if (!blockId && event.composedPath) {
    const path = event.composedPath();
    for (const target of path) {
      if (target instanceof HTMLElement && target.hasAttribute('data-block-id')) {
        blockId = target.getAttribute('data-block-id');
        break;
      }
    }
  }
  
  if (blockId) {
    currentCitationBlockId.value = blockId;
    console.log('[Affine] Found blockId:', blockId);
  } else {
    console.warn('[Affine] Could not find blockId for citation span');
  }
  
  const markupAttr = span.getAttribute('data-citation-markup');
  if (markupAttr) {
    currentCitationMarkup.value = markupAttr;
  } else {
    const contentEl = span.querySelector('.citation-tag-content');
    if (contentEl) currentCitationMarkup.value = contentEl.textContent;
  }
  
  console.log('[Affine] Current citation markup:', currentCitationMarkup.value);

  const rect = span.getBoundingClientRect();
  citationMenuPosition.value = {
    x: rect.left,
    y: rect.bottom + 5,
  };

  showCitationMenu.value = true;

  // 使用 nextTick 等待菜单渲染后精细调整位置，防止溢出屏幕
  nextTick(() => {
    if (!citationMenuRef.value) return;

    const menuRect = citationMenuRef.value.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    const viewportWidth = window.innerWidth;

    let x = rect.left;
    let y = rect.bottom + 5;

    // 检查底部溢出
    if (y + menuRect.height > viewportHeight) {
      // 如果下方空间不足，尝试显示在上方
      const topY = rect.top - menuRect.height - 5;
      if (topY > 0) {
        y = topY;
      } else {
        // 如果上方也不够，尽量靠底部显示，但不超出屏幕
        y = Math.max(5, viewportHeight - menuRect.height - 10);
      }
    }

    // 检查右侧溢出
    if (x + menuRect.width > viewportWidth) {
      x = Math.max(10, viewportWidth - menuRect.width - 10);
    }

    citationMenuPosition.value = { x, y };
  });
  
  setTimeout(() => {
    window.addEventListener('click', handleCitationMenuClickOutside);
    window.addEventListener('scroll', handleCitationMenuScroll, true);
  }, 10);
};

const closeCitationMenu = () => {
  showCitationMenu.value = false;
  currentCitationSpan.value = null;
  currentCitationBlockId.value = null;
  currentCitationMarkup.value = null;
  citationMenuSearch.value = "";
  window.removeEventListener('click', handleCitationMenuClickOutside);
  window.removeEventListener('scroll', handleCitationMenuScroll, true);
};

const handleCitationMenuClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (!target || !target.closest) {
    closeCitationMenu();
    return;
  }
  
  if (!target.closest('.citation-menu-wrapper') && !target.closest('.citation-tag')) {
    closeCitationMenu();
  }
};

const handleCitationMenuScroll = (event: Event) => {
  if (!showCitationMenu.value) return;
  
  const target = event.target as HTMLElement;
  // 如果滚动发生在菜单内部，则不关闭
  if (target && target.closest && target.closest(".citation-menu-wrapper")) {
    return;
  }
  
  closeCitationMenu();
};

// 替换引用标记 (Affine 深度集成)
const replaceCitation = async (reference: any) => {
  console.log('[Affine] replaceCitation triggered. target workId:', reference.workId);
  
  if (!currentCitationBlockId.value || !currentCitationMarkup.value || !store) {
    console.warn('[Affine] Context missing:', {
      blockId: currentCitationBlockId.value,
      markup: currentCitationMarkup.value,
      hasStore: !!store
    });
    return;
  }

  const blockId = currentCitationBlockId.value;
  const oldMarkup = currentCitationMarkup.value;
  const newWorkId = String(reference.workId);
  const newNote = reference.note || reference.title || "";
  const newMarkup = `{{cite:${newWorkId}:${newNote}}}`;

  try {
    // 1. 获取 block model
    const block = store.getBlock(blockId);
    console.log('[Affine] Found block model:', block?.flavour, block?.id);

    if (!block) {
      console.error('[Affine] Block not found in store:', blockId);
      addToast('更新失败：未找到数据块', 'error');
      return;
    }

    // 2. 获取文本内容 (兼容多种 BlockSuite 访问方式)
    const textProp = block.text || (block as any).model?.text;
    if (!textProp) {
      console.error('[Affine] Block has no text property:', block.flavour);
      addToast('该区块不支持引用替换', 'warning');
      return;
    }

    const content = textProp.toString();
    console.log('[Affine] Current block content:', content.substring(0, 50) + '...');

    // 锁定渲染
    isProgrammaticChange.value = true;
    
    // 3. 匹配并替换
    let targetMarkup = oldMarkup;
    if (!content.includes(oldMarkup)) {
      console.log('[Affine] Exact markup not found, searching by ID:', oldMarkup);
      const idMatch = oldMarkup.match(/\{\{cite:([^:]+):/);
      if (idMatch) {
        const id = idMatch[1];
        const regex = new RegExp(`\\{\\{cite:${id}:[^}]*\\}\\}`, 'g');
        const matches = content.match(regex);
        if (matches && matches.length > 0) {
          targetMarkup = matches[0];
          console.log('[Affine] Found match by ID:', targetMarkup);
        }
      }
    }

    if (content.includes(targetMarkup)) {
      const newContent = content.replace(targetMarkup, newMarkup);
      console.log('[Affine] Executing replacement in store. New content length:', newContent.length);
      
      // 4. 视觉层预处理：立即更新当前 Span 的显示（Vditor 风格，提供即时反馈）
      if (currentCitationSpan.value) {
        currentCitationSpan.value.setAttribute('data-display-text', `cite:${newNote}`);
        currentCitationSpan.value.setAttribute('data-work-id', newWorkId);
        currentCitationSpan.value.setAttribute('data-citation-markup', newMarkup);
        const contentEl = currentCitationSpan.value.querySelector('.citation-tag-content');
        if (contentEl) contentEl.textContent = newMarkup;
      }

      // 5. 数据模型更新 (回归最稳健的标准 API，包裹在事务中)
      try {
        store.transact(() => {
          const model = (block as any).model || block;
          console.log('[Affine] Updating block via standard updateBlock API...');
          
          // 必须创建一个全新的 BlockSuiteText 实例，这会强制 BlockSuite 识别到内容变更
          store.updateBlock(model, {
            text: new BlockSuiteText(newContent)
          });
        });
        
        // 验证更新结果
        const finalModel = (block as any).model || block;
        const finalText = finalModel.text?.toString();
        console.log('[Affine] Store update success. Final text length:', finalText?.length);
        
        if (!finalText || finalText.length === 0) {
          console.error('[Affine] CRITICAL: Store content is empty after update!');
        }

        hasChanges.value = true;
        addToast('已更新引用', 'success');
      } catch (transError) {
        console.error('[Affine] Transaction failed:', transError);
        addToast('数据同步失败', 'error');
      }

      // 6. 确保数据持久化
      // 稍微延长延迟，给 BlockSuite 内部同步留出时间
      setTimeout(async () => {
        try {
          console.log('[Affine] Triggering final cloud save...');
          await saveDocument(false);
          console.log('[Affine] Cloud save operation completed');
        } catch (err) {
          console.error("[Affine] Cloud save failed:", err);
        }
      }, 300);
    } else {
      console.warn('[Affine] Target markup still not found in content.');
      addToast('未能定位引用标记', 'warning');
    }
    
    // 关闭菜单
    closeCitationMenu();

    // 释放锁并强制渲染
    nextTick(() => {
      isProgrammaticChange.value = false;
      renderCitationsInAffine();
    });

  } catch (error) {
    console.error("[Affine] replaceCitation error:", error);
    addToast('更新引用失败', 'error');
    isProgrammaticChange.value = false;
    closeCitationMenu();
  }
};

const handleCopyReference = async (reference: any) => {
  const citationData = {
    work_id: String(reference.workId),
    note: reference.note || "",
  };
  const jsonString = JSON.stringify(citationData);
  try {
    await navigator.clipboard.writeText(jsonString);
    addToast("已复制引用数据，可在编辑器中粘贴", "success");
  } catch (error) {
    addToast("复制失败", "error");
  }
};

const handleExportCommand = (command: "markdown" | "html" | "png") => {
  exportOutputFormat.value = command;
  handleExportDocument();
};

const handleExportDocument = async () => {
  if (!store || isExporting.value) return;
  isExporting.value = true;
  addToast(t("affine.export.exporting"), "info"); // 显示加载提示
  try {
    // 1. 获取 Markdown 内容
    const transformer = store.getTransformer();
    const adapter = new MarkdownAdapter(transformer, store.provider);
    const result = await adapter.fromDoc(store);
    
    if (!result || typeof result.file !== 'string') {
      throw new Error("解析文档内容失败");
    }
    
    let content = result.file;

    // 2. 调用后端接口获取格式化的引用列表
    const citationGroups = getAllCitationIds();
    if (citationGroups.length > 0 && exportOutputFormat.value !== 'png') {
      const res = await getFormatCitation(
        props.fileId as string, 
        citationGroups,
        exportCitationFormat.value,
        exportOutputFormat.value as "html" | "markdown"
      );
      
      // 注意：API 返回的是 FormatCitationResponse，包含 entries 数组
      if (res && (res as any).data && (res as any).data.entries && (res as any).data.entries.length > 0) {
        const referenceList = (res as any).data.entries.join("\n");
      content += `\n\n## 参考文献\n\n${referenceList}`;
      }
    }

    // 3. 根据格式导出
    const fileName = props.fileName.replace(/\.md$/, "");
    if (exportOutputFormat.value === "markdown") {
      const blob = new Blob([content], { type: "text/markdown" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `${fileName}.md`;
      a.click();
      URL.revokeObjectURL(url);
    } else if (exportOutputFormat.value === "html") {
      const transformer = store.getTransformer();
      const adapter = new HtmlAdapter(transformer, store.provider);
      const result = await adapter.fromDoc(store);
      
      if (result && typeof result.file === 'string') {
        const blob = new Blob([result.file], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${fileName}.html`;
        a.click();
        URL.revokeObjectURL(url);
      }
    } else if (exportOutputFormat.value === "png") {
      try {
        if (stdScope) {
          // 在 BlockSuite 中，服务通常通过 provider 获取
          // 我们尝试几种可能的标识符
          const possibleIds = ['affine:export-manager', 'ExportManager'];
          let exportManager: any = null;
          
          for (const id of possibleIds) {
            try {
              // @ts-ignore
              exportManager = stdScope.get(id);
              if (exportManager) break;
            } catch (e) {
              // 忽略单个标识符失败
            }
          }

          if (exportManager && typeof exportManager.exportPng === 'function') {
            await exportManager.exportPng();
          } else {
            addToast(t("affine.export.pngNotSupported"), "warning");
          }
        }
      } catch (err) {
        console.error('[Affine] PNG export failed:', err);
        addToast(t("affine.export.pngExportFailed"), "error");
      }
    } else {
      // 其他格式处理（简化版）
      addToast(t("affine.export.formatNotSupported", { format: exportOutputFormat.value }), "info");
      const blob = new Blob([content], { type: "text/markdown" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `${fileName}.md`;
      a.click();
      URL.revokeObjectURL(url);
    }
    addToast(t("affine.export.exportSuccess"), "success");
    // 触发新手任务：下载文档
    triggerNewbieTask("doc_download_save");
  } catch (error) {
    console.error("导出失败:", error);
    addToast(t("affine.export.exportFailed"), "error");
  } finally {
    isExporting.value = false;
  }
};

const handleReferenceDragStart = (event: DragEvent, reference: any) => {
  if (!event.dataTransfer) return;
  const citationData = {
    work_id: String(reference.workId),
    note: reference.note || "",
  };
  const jsonString = JSON.stringify(citationData);
  event.dataTransfer.effectAllowed = "copy";
  event.dataTransfer.setData("text/plain", jsonString);
  event.dataTransfer.setData("application/json", jsonString);
};

// 调整高度逻辑
const startResizing = (event: MouseEvent | TouchEvent) => {
  isResizing.value = true;
  const clientY =
    event instanceof MouseEvent ? event.clientY : event.touches[0]?.clientY ?? 0;
  startY.value = clientY;
  
  // 记录初始像素高度
  const refEl = document.querySelector('.reference-section') as HTMLElement;
  const editorEl = container.value;
  startReferenceHeight.value = refEl?.offsetHeight || 300;
  startEditorHeight.value = editorEl?.offsetHeight || 0;
  
  console.log('[Affine] Start resizing - StartY:', startY.value, 'InitialRefH:', startReferenceHeight.value, 'InitialEditorH:', startEditorHeight.value);
  
  document.addEventListener("mousemove", handleResizing);
  document.addEventListener("mouseup", stopResizing);
  document.addEventListener("touchmove", handleResizing, { passive: false });
  document.addEventListener("touchend", stopResizing);
  document.body.style.cursor = "row-resize";
  document.body.style.userSelect = "none";
};

const handleResizing = (event: MouseEvent | TouchEvent) => {
  if (!isResizing.value) return;
  const clientY =
    event instanceof MouseEvent ? event.clientY : event.touches[0]?.clientY ?? 0;
  const deltaY = clientY - startY.value;
  
  const mainArea = container.value?.closest('.main-content-area') as HTMLElement;
  if (!mainArea) return;
  
  const containerHeight = mainArea.offsetHeight;
  
  let newReferenceHeight = startReferenceHeight.value - deltaY;
  
  // 极致体验：最小高度限制
  const minH = 200; 
  if (newReferenceHeight < minH) newReferenceHeight = minH;
  if (newReferenceHeight > containerHeight - 150) newReferenceHeight = containerHeight - 150;

  referenceHeight.value = `${newReferenceHeight}px`;
  // 编辑器高度同步更新，确保不超出容器
  editorHeight.value = `${containerHeight - newReferenceHeight}px`;
  
  console.log('[Affine] Resizing - NewRefH:', referenceHeight.value, 'NewEditorH:', editorHeight.value);
};

const stopResizing = () => {
  isResizing.value = false;
  document.removeEventListener("mousemove", handleResizing);
  document.removeEventListener("mouseup", stopResizing);
  document.removeEventListener("touchmove", handleResizing);
  document.removeEventListener("touchend", stopResizing);
  document.body.style.cursor = "";
};

const selectReference = (id: number, event?: MouseEvent) => {
  selectedReferenceId.value = id;
  if (event && event.currentTarget) {
    (event.currentTarget as HTMLElement).focus();
  }
};

// 极致体验：自定义 Toast 通知系统
const toasts = ref<{ id: number; message: string; type: 'info' | 'success' | 'warning' | 'error' }[]>([]);
let toastIdCounter = 0;

const addToast = (message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') => {
  const id = ++toastIdCounter;
  toasts.value.push({ id, message, type });
  setTimeout(() => {
    toasts.value = toasts.value.filter(t => t.id !== id);
  }, 3000);
};

const getToastIcon = (type: string) => {
  switch (type) {
    case 'success': return 'fas fa-check-circle';
    case 'warning': return 'fas fa-exclamation-triangle';
    case 'error': return 'fas fa-times-circle';
    default: return 'fas fa-info-circle';
  }
};

// 极致体验：全局命令面板 (Command Palette)
const showCommandPalette = ref(false);
const commandSearch = ref("");
const selectedCommandIndex = ref(0);
const commandInput = ref<HTMLInputElement | null>(null);

const commands = computed(() => [
  { id: 'ask-ai', group: 'AI 助手', title: '询问 AI (Ask AI)', icon: 'fas fa-magic', action: () => {
    const selection = window.getSelection();
    let rect = null;
    if (selection && selection.rangeCount > 0) {
      rect = selection.getRangeAt(0).getBoundingClientRect();
    } else {
      rect = container.value?.getBoundingClientRect();
    }
    window.dispatchEvent(new CustomEvent('affine-ask-ai-trigger', { detail: { rect } }));
  }, shortcut: 'Space' },
  
  { id: 'h1', group: '基础区块', title: '一级标题 (Heading 1)', icon: 'fas fa-heading', action: () => insertMarkdownBlock('# ') },
  { id: 'h2', group: '基础区块', title: '二级标题 (Heading 2)', icon: 'fas fa-heading', action: () => insertMarkdownBlock('## ') },
  { id: 'h3', group: '基础区块', title: '三级标题 (Heading 3)', icon: 'fas fa-heading', action: () => insertMarkdownBlock('### ') },
  { id: 'bullet-list', group: '基础区块', title: '无序列表 (Bullet List)', icon: 'fas fa-list-ul', action: () => insertMarkdownBlock('- ') },
  { id: 'numbered-list', group: '基础区块', title: '有序列表 (Numbered List)', icon: 'fas fa-list-ol', action: () => insertMarkdownBlock('1. ') },
  { id: 'code-block', group: '基础区块', title: '代码块 (Code Block)', icon: 'fas fa-code', action: () => insertMarkdownBlock('```\n\n```') },
  { id: 'quote', group: '基础区块', title: '引用块 (Quote)', icon: 'fas fa-quote-left', action: () => insertMarkdownBlock('> ') },
  
  { id: 'mode-toggle', group: '视图切换', title: editorMode.value === 'page' ? '切换到白板模式 (Edgeless Mode)' : '切换到文档模式 (Page Mode)', icon: 'fas fa-sync', action: () => toggleMode(), shortcut: 'M' },
  { id: 'toggle-toc', group: '视图切换', title: '显示/隐藏大纲 (Toggle Outline)', icon: 'fas fa-list-ul', action: () => toggleToc(), shortcut: 'T' },
  { id: 'preview', group: '视图切换', title: isPreviewMode.value ? '进入编辑模式' : '进入预览模式', icon: 'fas fa-eye', action: () => togglePreview() },
  { id: 'full-screen', group: '视图切换', title: '切换全屏模式', icon: 'fas fa-expand', action: () => toggleFullScreen(), shortcut: 'F11' },
  
  { id: 'export-doc', group: '操作', title: '导出文档 (Export Markdown)', icon: 'fas fa-download', action: () => handleExportCommand('markdown'), shortcut: 'E' },
  { id: 'copy-md', group: '操作', title: '复制为 Markdown', icon: 'fas fa-copy', action: () => copyAsMarkdown(), shortcut: 'C' },
  { id: 'clear', group: '操作', title: '清空文档内容', icon: 'fas fa-trash-alt', action: () => clearDocument(), shortcut: 'Shift+D' },
]);

// 辅助函数：插入 Markdown 格式的块
const insertMarkdownBlock = (prefix: string) => {
  if (stdScope && stdScope.store) {
    insertBlockBelow(prefix);
  }
};

const filteredCommands = computed(() => {
  if (!commandSearch.value) return commands.value;
  const s = commandSearch.value.toLowerCase();
  return commands.value.filter(c => c.title.toLowerCase().includes(s));
});

const selectNextCommand = () => {
  if (filteredCommands.value.length === 0) return;
  selectedCommandIndex.value = (selectedCommandIndex.value + 1) % filteredCommands.value.length;
};
const selectPrevCommand = () => {
  if (filteredCommands.value.length === 0) return;
  selectedCommandIndex.value = (selectedCommandIndex.value - 1 + filteredCommands.value.length) % filteredCommands.value.length;
};
const executeCommand = (cmd?: any) => {
  const target = cmd || filteredCommands.value[selectedCommandIndex.value];
  if (target) {
    target.action();
    showCommandPalette.value = false;
  }
};

watch(showCommandPalette, (val) => {
  if (val) {
    commandSearch.value = "";
    selectedCommandIndex.value = 0;
    nextTick(() => {
      commandInput.value?.focus();
    });
  }
});

// 计算文档统计信息
const stats = computed(() => {
  const chars = wordCount.value;
  const readingTime = Math.ceil(chars / 400); // 假设每分钟读400字
  return {
    chars,
    readingTime
  };
});

// 获取文档中所有的引用 ID (用于导出参考文献列表)
const getAllCitationIds = (): number[][] => {
  if (!store) return [];
  const regex = /\{\{cite:(\d+):([^}]*)\}\}/g;
  const models = store.getAllModels();
  const ids: number[] = [];
  
  models.forEach((model: any) => {
    if (model.text) {
      const text = model.text.toString();
      let match;
      while ((match = regex.exec(text)) !== null) {
        ids.push(parseInt(match[1] || '0'));
      }
    }
  });
  
  // 按照出现的顺序返回唯一的 ID 组
  const uniqueIds = Array.from(new Set(ids));
  return uniqueIds.map(id => [id]);
};

// 辅助函数：解析实际应用的主题（支持系统设置匹配）
const getResolvedTheme = () => {
  const theme = appStore.theme;
  if (theme === 'auto' || theme === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return theme;
};

// 查找替换相关
const showSearch = ref(false);
const searchText = ref("");
const searchTotal = ref(0);
const searchCurrent = ref(0);
const searchInput = ref<HTMLInputElement | null>(null);
const showBackToTop = ref(false);
const currentPageId = ref("");
const currentNoteId = ref("");

// 新增：实现 LinkPreviewProvider
const customLinkPreviewService = {
  query: async (url: string) => {
    console.log('[Affine] Querying link preview for:', url);
    try {
      // 使用 microlink API 作为演示，实际生产环境建议部署自己的后端中转
      const response = await fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`);
      const data = await response.json();
      if (data.status === 'success' && data.data) {
        return {
          title: data.data.title || url,
          description: data.data.description || '',
          icon: data.data.logo?.url || '',
          image: data.data.image?.url || ''
        };
      }
    } catch (e) {
      console.warn('[Affine] Link preview fetch failed, using fallback');
    }
    return { title: url };
  },
  endpoint: '',
  setEndpoint: () => {}
};

let saveTimer: any = null;
let outlinePanel: any = null;

const scheduleAutoSave = () => {
  if (saveTimer) clearTimeout(saveTimer);
  // 从 3s 增加到 10s 以解决编辑器卡顿
  saveTimer = setTimeout(() => saveDocument(true), 10000);
};

// 优化：防止图片重复处理的集合
const processingImages = new Set<string>();

const handleModeChange = (newMode: 'page' | 'edgeless') => {
  if (!store || !isInitialized.value) return;
  
  console.log('[Affine] Switching mode to:', newMode);
  mountEditorView(newMode);
  addToast(t('affine.askAi.toast.switchedMode', { mode: t(`affine.askAi.modes.${newMode}`) }), 'info');
};

const toggleMode = () => {
  if (!store || !isInitialized.value) return;
  
  const newMode = editorMode.value === 'page' ? 'edgeless' : 'page';
  editorMode.value = newMode;
  handleModeChange(newMode);
};

const togglePreview = () => {
  isPreviewMode.value = !isPreviewMode.value;
  if (!store) return;
  
  // 预览模式即为只读模式的增强版
  store.readonly = isPreviewMode.value || props.readonly;
  
  // 强制更新视图
  if (editorHost && editorHost.requestUpdate) {
    editorHost.requestUpdate();
  }
};

const toggleFullScreen = () => {
  if (!container.value) return;
  const wrapper = container.value.closest('.affine-editor-wrapper');
  if (!wrapper) return;

  if (!isFullScreen.value) {
    if (wrapper.requestFullscreen) {
      wrapper.requestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
  isFullScreen.value = !isFullScreen.value;
};

const copyAsMarkdown = async () => {
  if (!store) return;
  try {
    const transformer = store.getTransformer();
    const adapter = new MarkdownAdapter(transformer, store.provider);
    const result = await adapter.fromDoc(store);
    
    if (result && typeof result.file === 'string') {
      await navigator.clipboard.writeText(result.file);
      addToast('已复制为 Markdown', 'success');
    }
  } catch (error) {
    console.error('[Affine] Copy failed:', error);
    addToast('复制失败', 'error');
  }
};

const clearDocument = async () => {
  if (!store || props.readonly) return;
  
  if (!confirm('确定要清空所有内容吗？此操作不可撤销。')) {
    return;
  }

  try {
    const root = store.root;
    if (root) {
      // 找到 note 块，清空其子项
      const note = store.getAllModels().find((m: any) => m.flavour === 'affine:note');
      if (note) {
        store.withoutTransact(() => {
          const children = [...note.children];
          children.forEach(child => store.deleteBlock(child));
          // 添加一个空的段落，防止编辑器完全为空
          store.addBlock('affine:paragraph', { text: new BlockSuiteText() }, note.id);
        });
      }
    }
    updateWordCount();
    hasChanges.value = true;
    console.log('[Affine] Document cleared');
  } catch (error) {
    console.error('[Affine] Clear failed:', error);
  }
};

// 抽取视图挂载逻辑
const mountEditorView = async (mode: 'page' | 'edgeless') => {
  if (!container.value || !store) return;
  
  console.time(`[Affine] Render ${mode}`);
  
  // 1. 清理旧的 EditorHost 和 Std
  if (editorHost) {
    try {
      if (editorHost.parentElement) {
        editorHost.remove();
      }
    } catch (e) {
      console.warn('[Affine] Error removing old editor host:', e);
    }
    editorHost = null;
  }

  if (stdScope && typeof stdScope.dispose === 'function') {
    try {
      stdScope.dispose();
    } catch (e) {
      console.warn('[Affine] Error disposing old std scope:', e);
    }
    stdScope = null;
  }
  
  // 2. 获取对应模式的扩展
  const viewManager = new ViewExtensionManager(getInternalViewExtensions());
  const viewportExtension = {
    setup: (di: any) => {
      di.override(ViewportElementProvider, () => ({
        get viewportElement() {
          return container.value;
        }
      }));
      // 注入自定义链接预览服务
      di.override(LinkPreviewServiceIdentifier, () => customLinkPreviewService);
    }
  };
  
  const extensions = [
    ...viewManager.get(mode),
    viewportExtension
  ];
  console.log(`[Affine] ${mode} view extensions count:`, extensions.length);
  
  // 3. 创建新的 Std 作用域
  const std = new BlockStdScope({ store, extensions });
  stdScope = std;

  // 关键：同步应用语言到 BlockSuite 内部 UI (如果支持)
  try {
    // 尝试获取 i18n 插件，BlockSuite 的插件系统可能在不同版本中有差异
    // @ts-ignore
    const i18n = std.get('affine:i18n') as any;
    if (i18n && typeof i18n.setLocale === 'function') {
      const bsLocale = locale.value === 'zh-CN' ? 'zh' : 'en';
      i18n.setLocale(bsLocale);
      console.log('[Affine] Set BlockSuite locale to:', bsLocale);
    }
  } catch (e) {
    // 忽略找不到服务的错误，这通常意味着该版本的 BlockSuite 不支持或没加载此插件
    if (!(e instanceof Error && e.message.includes('not a service identifier'))) {
      console.warn('[Affine] Failed to set internal locale:', e);
    }
  }

  // 注入自定义 Toolbar 配置 (Ask AI)
  const registry = std.provider.get(ToolbarRegistryIdentifier);
  if (registry) {
    // 定义 Ask AI Action (样式高度还原官方：蓝色图标 + 文字 + 原生按钮交互)
    const askAiAction = {
      id: 'A.ai', // 匹配官方 ID 前缀
      placement: ActionPlacement.Start,
      score: -1, // 确保在最前面
      content: () => html`
        <div 
          class="ask-ai-btn-wrapper"
          aria-label="${t('affine.askAi.title')}"
          style="display: flex; align-items: center; cursor: pointer; padding: 0 8px; height: 28px; border-radius: 4px; transition: background 0.2s; pointer-events: auto;"
          @mouseenter=${(e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = 'var(--affine-hover-color, rgba(0,0,0,0.05))'; }}
          @mouseleave=${(e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
          @click=${(e: MouseEvent) => {
             e.stopPropagation();
             e.preventDefault();
             console.log('[Affine] Ask AI button clicked directly');
             const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
             window.dispatchEvent(new CustomEvent('affine-ask-ai-trigger', { 
               detail: { rect } 
             }));
          }}
          @mousedown=${(e: MouseEvent) => {
             // 额外捕获 mousedown，防止 BlockSuite 内部事件吞噬
             e.stopPropagation();
             e.preventDefault();
             console.log('[Affine] Ask AI button mousedown captured');
             const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
             window.dispatchEvent(new CustomEvent('affine-ask-ai-trigger', { 
               detail: { rect } 
             }));
          }}
        >
          <span style="color: var(--affine-primary-color, #1e96eb); display: flex; align-items: center; justify-content: center; pointer-events: none;">
            ${AiIcon({ width: '20px', height: '20px' })}
          </span>
          <span style="color: var(--affine-primary-color, #1e96eb); margin-left: 4px; font-size: 14px; font-weight: 500; pointer-events: none; white-space: nowrap;">${t('affine.askAi.title')}</span>
        </div>
      `,
      when: () => true,
    };
    
    // @ts-ignore
    const modules = registry.modules;
    if (modules instanceof Map) {
      // 1. 遍历所有模块，彻底移除旧的 Ask AI 标识
      modules.forEach((module: any) => {
        if (module?.config?.actions) {
          const idsToRemove = ['ask-ai', 'ask-ai-separator', 'A.ai', 'A.ai-separator'];
          module.config.actions = module.config.actions.filter((a: any) => !idsToRemove.includes(a.id));
        }
      });

      // 2. 注入新 Action
      const textLikeFlavours = [
        'affine:paragraph', 'affine:list', 'affine:code', 'affine:quote', 'affine:note'
      ];
      
      textLikeFlavours.forEach(flavour => {
        const module = modules.get(flavour);
        if (module?.config?.actions) {
           // 只保留 Ask AI 按钮，移除手动注入的分隔符 Action，
           // 因为 BlockSuite 可能会自动在插件区域后添加分隔符，或者我们可以通过 CSS 控制
           module.config.actions.unshift(askAiAction);
        }
      });
    }
  }
  
  // 4. 渲染新的 EditorHost
  if (typeof customElements !== 'undefined') {
    await customElements.whenDefined('editor-host');
  }
  
  editorHost = std.render();
  // @ts-ignore
  editorHost.doc = store.doc; 
  // @ts-ignore
  editorHost.pageId = currentPageId.value; // 关键修复：必须设置为 affine:page block 的 ID，否则斜杠菜单等 Widget 无法挂载
  editorHost.setAttribute('mode', mode);
  editorHost.setAttribute('theme', getResolvedTheme()); // 关键：注入解析后的主题

  // 获取 stdScope
  stdScope = editorHost.std;

  container.value.innerHTML = ''; 
  container.value.appendChild(editorHost);
  
  // 注入 Shadow DOM 样式覆盖
  const injectToolbarStyles = () => {
    const toolbarWidget = editorHost?.querySelector('affine-toolbar-widget') as any;
    if (toolbarWidget && toolbarWidget.shadowRoot) {
      // 1. 增加点击调试日志
      if (!toolbarWidget._debugInjected) {
        toolbarWidget.shadowRoot.addEventListener('click', (e: MouseEvent) => {
          const target = e.target as HTMLElement;
          const path = e.composedPath();
          // 增加：打印当前选区状态
          const selection = window.getSelection();
          
          // 如果点击了颜色相关的按钮
          const colorBtn = path.find((el: any) => el.getAttribute?.('data-name') === 'color');
          if (colorBtn) {
            setTimeout(() => {
              const menu = document.querySelector('.affine-context-menu');
            }, 100);
          }
        }, true);
        toolbarWidget._debugInjected = true;
      }

      if (!toolbarWidget.shadowRoot.querySelector('#custom-toolbar-style')) {
        const style = document.createElement('style');
        style.id = 'custom-toolbar-style';
        style.textContent = `
          editor-toolbar {
            background: rgba(255, 255, 255, 0.9) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
            border-radius: 10px !important;
            box-shadow: 
              0 1px 2px rgba(0, 0, 0, 0.02),
              0 4px 12px rgba(0, 0, 0, 0.05),
              0 12px 24px rgba(0, 0, 0, 0.03) !important;
            padding: 2px 6px !important;
            gap: 2px !important;
            height: auto !important;
            min-height: 32px !important;
            display: flex !important;
            align-items: center !important;
            overflow: visible !important;
            pointer-events: auto !important;
          }
          editor-toolbar-separator {
            background-color: rgba(0, 0, 0, 0.08) !important;
            width: 1px !important;
            height: 28px !important;
            margin: 0 4px !important;
            display: inline-block !important;
            vertical-align: middle !important;
          }
          /* 针对 Ask AI 后的分隔符清理 */
          /* 如果工具栏中由于插件注入导致连续出现两个分隔符，隐藏第二个 */
          editor-toolbar-separator + editor-toolbar-separator {
             display: none !important;
          }
          /* 确保 Ask AI 后的第一个 separator 显示正常 */
          .ask-ai-btn-wrapper + editor-toolbar-separator {
             display: inline-block !important;
             opacity: 1 !important;
          }
          editor-menu-button, editor-icon-button {
            border: none !important;
            border-radius: 6px !important;
            padding: 0 4px !important;
            height: 28px !important;
            min-width: 28px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: background-color 0.12s ease !important;
          }
          editor-menu-button:hover, editor-icon-button:hover {
            background-color: rgba(0, 0, 0, 0.04) !important;
          }
          /* 适配颜色选择器按钮的特殊外观 */
          editor-menu-button[data-name="color"] {
            padding: 0 2px !important;
          }
          /* 黑暗模式适配 */
          :host([data-theme="dark"]) editor-toolbar {
            background: rgba(30, 30, 30, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
          }
          :host([data-theme="dark"]) editor-toolbar-separator {
            background-color: rgba(255, 255, 255, 0.1) !important;
          }
          :host([data-theme="dark"]) editor-menu-button:hover, 
          :host([data-theme="dark"]) editor-icon-button:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
          }
        `;
        toolbarWidget.shadowRoot.appendChild(style);
        console.log('[Affine] Custom toolbar styles injected');
      }
    }
  };

  // 使用 MutationObserver 监听 Widget 的加载
  const observer = new MutationObserver(() => {
    injectToolbarStyles();
  });
  if (editorHost) {
    observer.observe(editorHost, { childList: true, subtree: true });
    // 立即尝试注入一次
    injectToolbarStyles();
  }
  
  // 5. 挂载并激活
  if (typeof std.mount === 'function') {
    std.mount();
  }
  
  // 触发 rootAdded 以激活渲染
  if (store.root) {
    store.slots.rootAdded.next(store.root.id);
  }
  
  // 6. 后续处理
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
    if (editorHost && editorHost.requestUpdate) editorHost.requestUpdate();
    
    // 如果大纲面板已打开，需要重新绑定新的 editorHost
    if (showToc.value) {
      mountOutlinePanel();
    }
    
    loading.value = false; // 确保加载状态关闭
    console.timeEnd(`[Affine] Render ${mode}`);
    console.log(`[Affine] ${mode} mode view mounted.`);
  }, 100);
};

const mountOutlinePanel = () => {
  if (!tocContentRoot.value || !editorHost) return;
  
  // 清理旧的
  tocContentRoot.value.innerHTML = '';
  
  // 创建官方 OutlinePanel 实例
  const panel = document.createElement('affine-outline-panel');
  // @ts-ignore
  panel.editor = editorHost;
  
  tocContentRoot.value.appendChild(panel);
  outlinePanel = panel;
};

// 监听 TOC 显示状态
watch([showToc, () => editorHost], ([newShow, newHost]) => {
  if (newShow && newHost) {
    nextTick(() => {
      mountOutlinePanel();
    });
  }
}, { immediate: true });

// 监听主题变化
watch(() => appStore.theme, () => {
  if (editorHost) {
    const resolvedTheme = getResolvedTheme();
    editorHost.setAttribute('theme', resolvedTheme);
    if (outlinePanel) {
      outlinePanel.setAttribute('theme', resolvedTheme);
    }
  }
});

// 监听系统主题变化 (当设置为 system/auto 时生效)
const handleSystemThemeChange = (e: MediaQueryListEvent | MediaQueryList) => {
  if ((appStore.theme === 'system' || appStore.theme === 'auto') && editorHost) {
    const newTheme = e.matches ? 'dark' : 'light';
    editorHost.setAttribute('theme', newTheme);
    if (outlinePanel) {
      outlinePanel.setAttribute('theme', newTheme);
    }
  }
};

const systemThemeMedia = window.matchMedia('(prefers-color-scheme: dark)');

const removeReferencesSection = (content: string): string => {
  if (!content) return content;
  const referencePatterns = [
    /\n##\s*参考文献[\s\S]*$/i,
    /\n#\s*参考文献[\s\S]*$/i,
    /\n###\s*参考文献[\s\S]*$/i,
    /\n####\s*参考文献[\s\S]*$/i,
    /\n#####\s*参考文献[\s\S]*$/i,
    /\n######\s*参考文献[\s\S]*$/i,
    /\n##\s*References[\s\S]*$/i,
    /\n#\s*References[\s\S]*$/i,
    /\n###\s*References[\s\S]*$/i,
    /\n####\s*References[\s\S]*$/i,
    /\n#####\s*References[\s\S]*$/i,
    /\n######\s*References[\s\S]*$/i,
    /^##\s*参考文献[\s\S]*$/i,
    /^#\s*参考文献[\s\S]*$/i,
    /^###\s*参考文献[\s\S]*$/i,
    /^##\s*References[\s\S]*$/i,
    /^#\s*References[\s\S]*$/i,
    /^###\s*References[\s\S]*$/i,
    /\n\s*参考文献\s*[\n\r][\s\S]*$/i,
    /\n\s*References\s*[\n\r][\s\S]*$/i,
  ];

  let processedContent = content;
  for (const pattern of referencePatterns) {
    if (pattern.test(processedContent)) {
      processedContent = processedContent.replace(pattern, "");
      break;
    }
  }
  return processedContent.trim();
};

const loadFileContent = async (): Promise<string> => {
  try {
    const fileId = props.fileId;
    try {
      const cached = await fileCache.getFile(fileId);
      if (cached && typeof cached.content === "string") {
        return cached.content;
      }
    } catch (e) {}

    let content = "";
    if (props.isChatAnswer) {
      const response = await apiGetDraftById(fileId);
      if (response && response.data) {
        content = response.data.content || "";
        content = removeReferencesSection(content);
      }
    } else {
      const response = await filesApi.downloadFile(fileId);
      let blob: Blob | null = null;
      if (response instanceof Blob) {
        blob = response;
      } else if (response && (response as any).data instanceof Blob) {
        blob = (response as any).data;
      }
      if (blob) {
        content = await blob.text();
        content = removeReferencesSection(content);
      }
    }

    if (content) {
      content = preprocessMathContent(content);
      await fileCache.setFile({
        fileId,
        content,
        type: "markdown",
        fileName: props.fileName,
      });
    }
    return content;
  } catch (error) {
    console.error("Failed to load file content:", error);
    return "";
  }
};

const saveDocument = async (isAutoSave = true) => {
  if (!store || !hasChanges.value) return;

  try {
    const transformer = store.getTransformer();
    const adapter = new MarkdownAdapter(transformer, store.provider);
    const result = await adapter.fromDoc(store);
    
    if (result && typeof result.file === 'string') {
      const content = result.file;
      console.log('[Affine] Document serialized for saving. Content length:', content.length);
      
      if (props.isChatAnswer) {
        await apiUpdateDraft(props.fileId, {
          content,
          title: props.fileName.replace(/\.md$/, ""),
        });
      } else {
        await filesApi.saveFileContent(props.fileId, {
          content,
          fileName: props.fileName,
        });
      }

      await fileCache.setFile({
        fileId: props.fileId,
        content,
        type: "markdown",
        fileName: props.fileName,
      });

      hasChanges.value = false;
      emit('file-saved', {
        fileId: props.fileId,
        fileName: props.fileName,
        content,
        isAutoSave
      });

      // 触发新手任务：编辑/生成文档
      triggerNewbieTask("doc_generate_edit");

      if (!isAutoSave) {
        addToast('保存成功', 'success');
      }
    }
  } catch (error) {
    console.error("Failed to save document:", error);
    if (!isAutoSave) {
      addToast('保存失败', 'error');
    }
  }
};

const markAsSavedToKnowledge = () => {
  isSavedToKnowledge.value = true;
};

// 优化：计算字数
const updateWordCount = () => {
  if (!store) return;
  let count = 0;
  // 遍历所有 block model，累加 text 长度
  const models = store.getAllModels();
  models.forEach((model: any) => {
    if (model.text) {
      count += model.text.toString().length;
    }
  });
  wordCount.value = count;
};

// 查找替换逻辑
const findNext = () => {
  // 简单模拟，实际上 Affine 有自己的搜索 API，但这里我们先做一个简单的 UI 响应
  if (!searchText.value) return;
  // TODO: 调用 std.get(SearchService) 进行深度集成
  console.log('[Affine] Finding next:', searchText.value);
};

const findPrev = () => {
  console.log('[Affine] Finding prev:', searchText.value);
};

const scrollToTop = () => {
  if (container.value) {
    container.value.scrollTo({ top: 0, behavior: 'smooth' });
  }
};

const handleScroll = (e: Event) => {
  const target = e.target as HTMLElement;
  showBackToTop.value = target.scrollTop > 300;
  
  // 优化：大纲滚动同步高亮逻辑
  if (showToc.value && outlinePanel) {
    syncOutlineHighlight(target);
  }
};

// 新增：同步大纲高亮
const syncOutlineHighlight = (scrollTarget: HTMLElement) => {
  if (!store || !outlinePanel) return;
  
  const models = store.getAllModels();
  const headings = models.filter((m: any) => 
    m.flavour === 'affine:paragraph' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(m.type)
  );
  
  if (headings.length === 0) return;
  
  // 寻找当前最靠近视口顶部的标题
  let activeId = '';
  const viewportOffset = 100; // 偏移量，使得标题接近顶部时就触发
  
  for (const heading of headings) {
    const element = editorHost?.querySelector(`[data-block-id="${heading.id}"]`);
    if (element) {
      const rect = element.getBoundingClientRect();
      const containerRect = scrollTarget.getBoundingClientRect();
      const relativeTop = rect.top - containerRect.top;
      
      if (relativeTop <= viewportOffset) {
        activeId = heading.id;
      } else {
        break;
      }
    }
  }
  
  if (activeId && outlinePanel.activeBlockId !== activeId) {
    // @ts-ignore
    outlinePanel.activeBlockId = activeId;
    
    // 同时也尝试在大纲面板内滚动到对应项
    nextTick(() => {
      const activeItem = outlinePanel.shadowRoot?.querySelector(`[data-block-id="${activeId}"]`);
      if (activeItem) {
        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    });
  }
};

watch(showSearch, (val) => {
  if (val) {
    nextTick(() => {
      searchInput.value?.focus();
    });
  }
});

// 优化点：处理图片上传持久化
const handleImageUpload = async (blockId: string, blobUrl: string) => {
  try {
    console.log('[Affine] Local image detected, starting persistence...', blockId);
    
    // 新增：视觉反馈 - 开始处理
    const imageEl = editorHost?.querySelector(`[data-block-id="${blockId}"]`);
    if (imageEl) {
      imageEl.classList.add('processing');
    }

    const response = await fetch(blobUrl);
    const blob = await response.blob();
    
    // 构造 File 对象
    const extension = blob.type.split('/')[1] || 'png';
    const file = new File([blob], `affine-image-${Date.now()}.${extension}`, { type: blob.type });
    
    // 1. 创建上传会话
    const sessionRes = await filesApi.createUploadSession();
    const uploadId = (sessionRes as any).data.uploadId;
    
    // 2. 上传文件到服务器
    // 我们将图片暂存到用户当前的文件夹下 (props.folderId)
    const uploadRes = await filesApi.uploadFile({
      file,
      uploadId,
      parentId: props.folderId || undefined
    });
    
    if (uploadRes && (uploadRes as any).code === 200) {
      // 3. 获取服务器返回的下载链接
      const fileData = (uploadRes as any).data?.files?.[0];
      if (fileData && fileData.fileId) {
        const permanentUrl = `/api/files/${fileData.fileId}/download`;
        
        store.withoutTransact(() => {
          store.updateBlock(blockId, {
            sourceId: permanentUrl
          });
        });
        console.log('[Affine] Image persisted to server:', permanentUrl);
      }
    }

    // 新增：视觉反馈 - 结束处理
    if (imageEl) {
      imageEl.classList.remove('processing');
    }

  } catch (err) {
    console.error('[Affine] Failed to persist image:', err);
    // 失败也移除状态
    const imageEl = editorHost?.querySelector(`[data-block-id="${blockId}"]`);
    if (imageEl) {
      imageEl.classList.remove('processing');
    }
  } finally {
    // 延迟清理，确保状态已同步
    setTimeout(() => processingImages.delete(blockId), 2000);
  }
};

const initEditor = async () => {
  if (!container.value || isInitialized.value) return;
  isInitialized.value = true;

    console.log('[Affine] Starting source-pattern initialization...');
  
    try {
      // 1. 初始化 Collection (Workspace)
    // @ts-ignore
      const collection = new TestWorkspace({ id: 'linkmed-workspace-' + props.fileId });
    
    // 合并并处理全量 Store 扩展 (包含 Markdown 适配器、数据模型等)
    // getInternalStoreExtensions() 内部会自动处理标准 Block 的 Schema 注册
    // @ts-ignore
    const storeManager = new StoreExtensionManager(getInternalStoreExtensions());
    const baseExtensions = storeManager.get('store');
    
    // 严格过滤掉任何没有 setup 方法的无效扩展，并确保不重复
    const storeExtensions = baseExtensions.filter(
      (ext, index, self) => ext && typeof ext.setup === 'function' && self.indexOf(ext) === index
    );
    
    // 调试：检查扩展列表
    console.log('[Affine] Store extensions loaded:', storeExtensions.length);
    
    collection.meta.initialize();
    collection.start();
    // workspace = collection; // 暂时注释掉，如果后面需要用到再开启，以消除 lint 警告
    
    // 3. 创建 Doc 并获取具备操作能力的 Store
    const doc = collection.createDoc();
    doc.load();
    
    // 官方模式：将扩展传给 getStore，内部会处理 DI
      // @ts-ignore
    const targetStore = doc.getStore({ extensions: storeExtensions });
    targetStore.load();
    store = targetStore;

    // 4. 准备内容
    console.time('[Affine] Load Content');
    let initialContent = props.preloadContent || (props.fileId ? await loadFileContent() : "");
    if (initialContent) initialContent = removeReferencesSection(initialContent);
    if (!initialContent) initialContent = "";
    console.timeEnd('[Affine] Load Content');
    console.log('[Affine] Content length:', initialContent.length);

    // 5. 按照源码构建官方标准骨架
    console.time('[Affine] Build Skeleton');
    targetStore.transact(() => {
      // 检查是否已有 Page，防止重复添加
      if (targetStore.root) return;
      
      currentPageId.value = targetStore.addBlock('affine:page', { 
        title: new BlockSuiteText(props.fileName || 'Untitled') 
      });
      targetStore.addBlock('affine:surface', {}, currentPageId.value);
      currentNoteId.value = targetStore.addBlock('affine:note', {}, currentPageId.value);
    });
    console.timeEnd('[Affine] Build Skeleton');
    
    // 如果已经存在 root，重新获取 ID
    if (!currentPageId.value && targetStore.root) {
      currentPageId.value = targetStore.root.id;
      // 查找 surface 和 note
      const page = targetStore.getBlock(currentPageId.value);
      if (page) {
        // @ts-ignore
        const note = page.model.children.find(c => c.flavour === 'affine:note');
        if (note) currentNoteId.value = note.id;
      }
    }
    console.log('[Affine] Created IDs - Page:', currentPageId.value, 'Note:', currentNoteId.value);
    
    // 调试：验证 root block 类型
    const rootBlock = targetStore.getBlock(currentPageId.value);
    console.log('[Affine] Root block flavour:', rootBlock?.flavour);

    // 8. 全量高级内容导入 (先导入内容，再设置只读，避免 addBlock 失败)
    if (initialContent) {
      console.time('[Affine] Import content');
      try {
        console.log('[Affine] Importing content with framework native pattern...');
        const transformer = targetStore.getTransformer();
        const adapter = new MarkdownAdapter(transformer, targetStore.provider);
        
        // 调试：验证 Matcher 是否已加载
        // @ts-ignore
        const matchers = Array.from(targetStore.provider.getAll(BlockMarkdownAdapterMatcherIdentifier).values());
        console.log('[Affine] Markdown Matchers count:', matchers.length);

        const snapshot = await adapter.toDocSnapshot({ file: initialContent });
        
        // 源码模式：toDocSnapshot 返回的是 DocSnapshot，其 blocks 属性是根 block 的嵌套结构
        if (snapshot && snapshot.blocks) {
          const rootBlock = snapshot.blocks;
          console.log('[Affine] Snapshot root:', JSON.stringify({
            flavour: rootBlock.flavour,
            childrenCount: rootBlock.children?.length,
            childrenFlavours: rootBlock.children?.map((c: any) => c.flavour)
          }));
          
          // 找到 snapshot 中的 note block
          const findNoteSnapshot = (snap: any): any => {
            if (snap.flavour === 'affine:note') return snap;
            if (snap.children) {
              for (const child of snap.children) {
                const found = findNoteSnapshot(child);
                if (found) return found;
              }
            }
            return null;
          };

          const noteSnapshot = findNoteSnapshot(rootBlock);
          // 检查是否有标题被解析到了 note 中
          if (noteSnapshot && noteSnapshot.children) {
            console.log('[Affine] Importing content blocks from snapshot note, count:', noteSnapshot.children.length);
            
            const fileNameTitle = props.fileName.replace(/\.md$/, '').trim();
            const pageTitle = (props.fileName || 'Untitled').trim();
            
            // 尝试获取快照中的页面标题
            let snapshotTitle = '';
            if (rootBlock.flavour === 'affine:page' && rootBlock.props?.title) {
              snapshotTitle = rootBlock.props.title.toString().trim();
            }

            for (const child of noteSnapshot.children) {
              // 关键修复：过滤掉重复的标题
              // 如果块是 H1 且内容与文件名、Page Title 或快照标题一致，则跳过导入
              if (child.flavour === 'affine:paragraph' && child.props?.type === 'h1') {
                let h1Text = '';
                const textProp = child.props?.text;
                
                if (typeof textProp === 'string') {
                  h1Text = textProp.trim();
                } else if (textProp && typeof textProp === 'object') {
                  if (Array.isArray(textProp.delta)) {
                    h1Text = textProp.delta.map((d: any) => d.insert || '').join('').trim();
                  } else if (textProp.toString) {
                    h1Text = textProp.toString().trim();
                  }
                }

                // 检查是否与文件名或页面标题重复 (增加更宽泛的模糊匹配)
                const normalizedH1 = h1Text.toLowerCase().replace(/\s+/g, '');
                const normalizedFileName = fileNameTitle.toLowerCase().replace(/\s+/g, '');
                const normalizedPageTitle = pageTitle.toLowerCase().replace(/\s+/g, '');
                const normalizedSnapshotTitle = snapshotTitle.toLowerCase().replace(/\s+/g, '');

                const isDuplicate = h1Text && (
                  h1Text === fileNameTitle || 
                  h1Text === pageTitle || 
                  h1Text === snapshotTitle ||
                  normalizedH1 === normalizedFileName ||
                  normalizedH1 === normalizedPageTitle ||
                  normalizedH1 === normalizedSnapshotTitle
                );

                if (isDuplicate) {
                  console.log(`[Affine] Filtering redundant H1 title: "${h1Text}"`);
                  continue; 
                }
              }
              
              // 使用 transformer.snapshotToBlock 官方方法导入
              await transformer.snapshotToBlock(child, targetStore, currentNoteId.value);
            }
          } else {
            // 如果没找到 note，尝试直接导入 rootBlock 的子项 (兜底)
            console.log('[Affine] Note snapshot not found, importing root children instead');
            if (rootBlock.children) {
              for (const child of rootBlock.children) {
                // 同样过滤 affine:page 这种根节点
                if (child.flavour !== 'affine:page' && child.flavour !== 'affine:note' && child.flavour !== 'affine:surface') {
                await transformer.snapshotToBlock(child, targetStore, currentNoteId.value);
                }
              }
            }
          }
          
          const importedCount = targetStore.getBlock(currentNoteId.value)?.model.children.length || 0;
          console.log('[Affine] Successfully imported blocks to note:', importedCount);
        }
      } catch (e) {
        console.warn("[Affine] Native import failed, fallback:", e);
        targetStore.transact(() => {
          targetStore.addBlock('affine:paragraph', { text: new BlockSuiteText(initialContent) }, currentNoteId.value);
        });
      }
      console.timeEnd('[Affine] Import content');
    }

    // 确保至少有一个内容块
    const noteBlock = targetStore.getBlock(currentNoteId.value);
    if (noteBlock && noteBlock.model.children.length === 0) {
      targetStore.transact(() => {
        targetStore.addBlock('affine:paragraph', { text: new BlockSuiteText('') }, currentNoteId.value);
      });
    }

    // 设置只读模式 (如果 props.readonly 为 true)
    if (props.readonly) {
      store.readonly = true;
      console.log('[Affine] Editor set to readonly mode after initialization');
    }

  // 9. 使用统一挂载逻辑渲染初始视图
  await mountEditorView(editorMode.value);
  
  // 10. 初始化参考文献特殊格式渲染器
  nextTick(() => {
    initCitationObserver();
  });
  
  // 11. 绑定数据更新回调
    store.slots.blockUpdated.subscribe(async (payload: any) => {
      // 优化：监听图片块的变化，自动上传本地 Blob
      if (payload.type === 'add' || payload.props?.key === 'sourceId') {
        const block = store.getBlock(payload.id);
        if (block?.flavour === 'affine:image') {
          // @ts-ignore
          const sourceId = block.model.sourceId;
          // 增加 processingImages 校验，防止重复上传导致的渲染异常
          if (sourceId && sourceId.startsWith('blob:') && !props.readonly && !processingImages.has(payload.id)) {
            processingImages.add(payload.id);
            handleImageUpload(payload.id, sourceId);
          }
        }
      }

      hasChanges.value = true;
      updateWordCount(); // 更新字数
      emit('content-change', { text: "", html: "", hasChanges: true });
      scheduleAutoSave();
    });

    // 初始计算字数
    updateWordCount();
  } catch (error) {
    console.error('[Affine] Initialization failed:', error);
    loading.value = false;
  }
};

const handleKeyDown = (e: KeyboardEvent) => {
  const target = e.target as HTMLElement;
  // 检查是否在输入框、文本域、富文本编辑器或其它交互组件内
  const isInput = target.tagName === 'INPUT' || 
                 target.tagName === 'TEXTAREA' || 
                 target.isContentEditable ||
                 target.closest('.search-panel') || 
                 target.closest('.el-input') || 
                 target.closest('.el-textarea') ||
                 target.closest('.ask-ai-panel') ||
                 target.closest('.citation-menu-container');
                 
  // 检查是否在编辑器核心区域内
  const isEditor = target.closest('editor-host') || target.closest('.affine-editor-container');

  // 处理 Delete/Backspace 键删除选中的参考文献
  if (e.key === 'Delete' || e.key === 'Backspace') {
    // 检查是否在参考文献区域内
    const isInReferenceArea = target.closest('.reference-section');
    
    // 如果在参考文献区域且不是正在输入别名等输入框，或者显式选中了某行且不在编辑器内
    if ((isInReferenceArea && !isInput) || (!isInput && !isEditor && selectedReferenceId.value !== null)) {
      if (selectedReferenceId.value !== null) {
        const selectedRef = references.value.find(r => r.workId === selectedReferenceId.value);
        if (selectedRef) {
          e.preventDefault();
          handleDeleteReference(selectedRef);
          return;
        }
      }
    }
  }

  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument(false);
    addToast('已手动保存', 'success');
  }
  
  // 增加全选功能快捷键 (Ctrl+A / Cmd+A)
  if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
    if (isEditor && !isInput) {
      console.log('[Affine] Select all shortcut triggered');
      
      try {
        if (stdScope && store) {
          const models = store.getAllModels();
          // 选中所有的内容块 (排除 root block 和容器块)
          const blockIds = models
            .filter((m: any) => m.flavour.startsWith('affine:') && 
                                m.flavour !== 'affine:page' && 
                                m.flavour !== 'affine:surface')
            .map((m: any) => m.id);
            
          if (blockIds.length > 0) {
            e.preventDefault();
            // @ts-ignore
            const blockSelection = stdScope.selection.create(BlockSelection, { blockIds });
            stdScope.selection.setGroup('note', [blockSelection]);
            
            if (editorHost && editorHost.requestUpdate) {
              editorHost.requestUpdate();
            }
            console.log(`[Affine] Selected all ${blockIds.length} blocks`);
            return;
          }
        }
      } catch (err) {
        console.warn('[Affine] BlockSuite native select all failed, falling back to browser default', err);
      }
      
      // 如果上述逻辑失败，则让浏览器尝试处理，或者使用 execCommand
      // 不调用 e.preventDefault() 可能会让浏览器执行默认行为
    }
  }

  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
    e.preventDefault();
    showSearch.value = !showSearch.value;
    if (showSearch.value) {
      nextTick(() => {
        searchInput.value?.focus();
        addToast('查找模式已开启', 'info');
      });
    }
  }
  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
    e.preventDefault();
    showCommandPalette.value = !showCommandPalette.value;
  }
  
  // 增加斜杠菜单触发 (/)
  // 这里的逻辑对应帮助文档中的 "/ 唤起斜杠菜单"
  if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
    if (showSearch.value || showCommandPalette.value || showAskAIMenu.value) return;

    const target = e.target as HTMLElement;
    // 检查是否在编辑器区域内
    const isEditor = target.closest('editor-host') || target.closest('.affine-editor-container');
    // 检查是否在输入框、文本域或搜索面板内
    const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.closest('.search-panel');

    if (isEditor && !isInput) {
      // 获取当前选区状态，确保只在没有选中文本时触发
      const selection = window.getSelection();
      if (selection && selection.isCollapsed) {
        console.log('[Affine] Slash menu triggered via /');
        e.preventDefault();
        showCommandPalette.value = true;
      }
    }
  }
};

watch(() => props.showReferences, (newValue) => {
  console.log('[Affine] showReferences changed:', newValue);
  if (newValue) {
    // 极致体验：大幅增加初始视觉比例，对标专业文献管理软件
    const mainArea = container.value?.closest('.main-content-area') as HTMLElement;
    const totalH = mainArea?.offsetHeight || window.innerHeight - 150;
    
    // 默认占据 45% 高度，且最小不低于 300px
    const targetH = Math.max(300, Math.floor(totalH * 0.45));
    
    referenceHeight.value = `${targetH}px`;
    // 编辑器高度精确计算，防止溢出
    editorHeight.value = `${totalH - targetH}px`;
    
    console.log('[Affine] Initialized heights - Reference:', referenceHeight.value, 'Editor:', editorHeight.value, 'TotalH:', totalH);
    
    loadReferences();
    nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  } else {
    editorHeight.value = "100%";
    referenceHeight.value = "0px";
  }
}, { immediate: true });


// 监听 Ask AI 触发事件 (核心通信桥梁)
const handleAskAiTrigger = (e: any) => {
  console.log('[Affine] Ask AI trigger received:', e.detail);
  
  // 如果面板正在生成，忽略触发（防止中断）
  if (showAskAIMenu.value && aiPanelState.value === 'generating') {
    console.log('[Affine] AI is generating, ignoring trigger');
    return;
  }

  const { rect } = e.detail || {};
  if (rect) lastTriggerRect = rect;
  
  // 备份当前选区 (DOM)
  const selection = window.getSelection();
  if (selection && selection.rangeCount > 0 && !selection.getRangeAt(0).collapsed) {
    lastSelectionRange = selection.getRangeAt(0).cloneRange();
    console.log('[Affine] DOM selection range cached');
  }

  // 备份 BlockSuite 选区
  if (stdScope) {
    // @ts-ignore
    const textSelection = stdScope.selection.find(TextSelection);
    if (textSelection && !textSelection.collapsed) {
      lastBlockSuiteSelection = textSelection;
      console.log('[Affine] BlockSuite selection cached');
    }
  }
  
  aiPanelState.value = 'input'; // 每次打开重置为输入状态
  aiResult.value = '';
  showAskAIMenu.value = true;
  console.log('[Affine] Setting showAskAIMenu to true');

  // 立即更新位置 (在 showAskAIMenu 设为 true 后)
  nextTick(() => {
    updateAiPanelPosition();
  });
};

const handleGlobalScrollOrResize = () => {
  if (showAskAIMenu.value) {
    requestAnimationFrame(updateAiPanelPosition);
  }
};

const handleGlobalMouseDown = (e: MouseEvent) => {
  // 穿透 Shadow DOM 的全路径搜索
  // @ts-ignore
  const path = e.composedPath();
  const askAiBtn = path.find((el: any) => {
    if (!el || !el.getAttribute) return false;
    // 检查是否为 Ask AI 按钮
    const isAiBtn = el.getAttribute('aria-label') === t('affine.askAi.title') || 
           (el.classList && el.classList.contains('ask-ai-btn-wrapper'));
    return isAiBtn;
  });
  
  if (askAiBtn) {
    console.log('[Affine] Ask AI button detected via global capture!');
    // 只有在确定是 AI 按钮时才拦截
    e.stopPropagation();
    e.preventDefault();
    
    const rect = (askAiBtn as HTMLElement).getBoundingClientRect();
    handleAskAiTrigger({ detail: { rect } });
  }
};

onMounted(() => {
  nextTick(() => {
    initEditor();
    if (props.fileId) {
      loadReferences();
    }
  });
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('copy', handleEditorCopy as any, true);
  if (container.value) {
    container.value.addEventListener('scroll', handleScroll);
    container.value.addEventListener('paste', handleEditorPaste as any);
    container.value.addEventListener('drop', handleEditorDrop as any);
    container.value.addEventListener('dragover', (e) => e.preventDefault());
  }
  systemThemeMedia.addEventListener('change', handleSystemThemeChange);

  // 极致体验：图片点击放大 Lightbox 实现
  const handleImageClick = (e: MouseEvent) => {
    const target = e.target as HTMLElement;
    if (target.tagName === 'IMG' && target.closest('.affine-image-block-container')) {
      const src = (target as HTMLImageElement).src;
      const overlay = document.createElement('div');
      overlay.className = 'lightbox-overlay';
      overlay.innerHTML = `
        <div class="lightbox-content">
          <img src="${src}" />
          <div class="lightbox-close"><i class="fas fa-times"></i></div>
        </div>
      `;
      document.body.appendChild(overlay);
      
      // 动画进入
      requestAnimationFrame(() => overlay.classList.add('active'));

      overlay.onclick = () => {
        overlay.classList.remove('active');
        overlay.classList.add('fade-out');
        setTimeout(() => {
          if (document.body.contains(overlay)) {
            document.body.removeChild(overlay);
          }
        }, 300);
      };
    }
  };

  document.addEventListener('click', handleImageClick);
  
  // 注册全局事件监听
  window.addEventListener('affine-ask-ai-trigger', handleAskAiTrigger);
  window.addEventListener('scroll', handleGlobalScrollOrResize, true);
  window.addEventListener('resize', handleGlobalScrollOrResize, true);
  
  window.addEventListener('mousedown', (e) => {
    handleGlobalMouseDown(e);
  }, true);
});

onBeforeUnmount(() => {
  if (saveTimer) clearTimeout(saveTimer);
  if (hasChanges.value) saveDocument(false);
  
  // 增加安全清理逻辑
  try {
    if (editorHost) {
      // 检查 editorHost 是否还在文档中，如果在则移除
      if (editorHost.parentElement) {
        editorHost.remove();
      }
      editorHost = null;
    }
    
    // 如果 stdScope 有 dispose 方法，尝试调用它
    if (stdScope && typeof stdScope.dispose === 'function') {
      stdScope.dispose();
    }
    stdScope = null;
  } catch (e) {
    console.warn('[Affine] Error during unmount cleanup:', e);
  }

  if (citationObserver) citationObserver.disconnect();
  window.removeEventListener('keydown', handleKeyDown);
  window.removeEventListener('copy', handleEditorCopy as any, true);
  if (container.value) {
    container.value.removeEventListener('scroll', handleScroll);
    container.value.removeEventListener('paste', handleEditorPaste as any);
    container.value.removeEventListener('drop', handleEditorDrop as any);
  }
  systemThemeMedia.removeEventListener('change', handleSystemThemeChange);
  
  window.removeEventListener('affine-ask-ai-trigger', handleAskAiTrigger);
  window.removeEventListener('scroll', handleGlobalScrollOrResize, true);
  window.removeEventListener('resize', handleGlobalScrollOrResize, true);
  window.removeEventListener('mousedown', handleGlobalMouseDown, true);
});

defineExpose({ markAsSavedToKnowledge, saveDocument });
</script>

<style scoped>
/* 黑暗模式支持 */
:global([data-theme='dark']) .affine-editor-wrapper {
  background: #1e1e1e !important;
  /* color: #d4d4d4; */
}

:global([data-theme='dark']) :deep(editor-host) {
  /* --affine-background-color: #1e1e1e; */
  /* --affine-foreground-color: #d4d4d4; */
  background: #1e1e1e !important;
  /* color: #d4d4d4; */
}

:global([data-theme='dark']) :deep(.affine-page-root) {
  background-color: #1e1e1e !important;
}

:global([data-theme='dark']) .editor-toolbar {
  background: #252526 !important;
  border-bottom-color: #333 !important;
}

:global([data-theme='dark']) .toolbar-btn {
  color: #ccc !important;
}

:global([data-theme='dark']) .toolbar-btn:hover {
  background: #37373d !important;
  color: white !important;
}

:global([data-theme='dark']) .toc-sidebar {
  background: #252526 !important;
  border-left-color: #333 !important;
}

:global([data-theme='dark']) .toc-header {
  color: #eee !important;
  border-bottom-color: #333 !important;
}

:global([data-theme='dark']) :deep(.affine-code-block-container) {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

:global([data-theme='dark']) :deep(.affine-code-block-container .line-number) {
  background: #333 !important;
  color: #666 !important;
  border-right-color: #444 !important;
}

:global([data-theme='dark']) .search-panel {
  background: #252526 !important;
  border-color: #444 !important;
}

:global([data-theme='dark']) .search-input-wrapper {
  background: #333 !important;
}

:global([data-theme='dark']) .search-input-wrapper input {
  color: white !important;
}

/* 选区工具栏 (Selection Toolbar) 增强 */
:deep(affine-selection-toolbar) {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #eee !important;
  background: white !important;
}

:global([data-theme='dark']) :deep(affine-selection-toolbar) {
  background: #252526 !important;
  border-color: #444 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 拖拽手柄 (Drag Handle) 增强 */
:deep(.affine-drag-handle-widget) {
  color: #999 !important;
  transition: color 0.2s !important;
}

:deep(.affine-drag-handle-widget:hover) {
  color: #666 !important;
  background: #f5f5f5 !important;
}

:global([data-theme='dark']) :deep(.affine-drag-handle-widget:hover) {
  background: #333 !important;
  color: #ccc !important;
}

/* 斜杠菜单 (Slash Menu) 增强 */
:deep(affine-slash-menu) {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

:global([data-theme='dark']) :deep(affine-slash-menu) {
  background: #2d2d2d !important;
  border: 1px solid #444 !important;
}

/* 数据库 (Database) 增强 */
:deep(.affine-database-block-container) {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #eee !important;
}

:global([data-theme='dark']) :deep(.affine-database-block-container) {
  border-color: #333 !important;
}

/* 优化大纲面板的高亮项样式 */
:deep(affine-outline-panel) .outline-item.active {
  background: #f0f7ff !important;
  color: #007bff !important;
  border-radius: 4px !important;
}

:global([data-theme='dark']) :deep(affine-outline-panel) .outline-item.active {
  background: #1e2d3d !important;
  color: #4da3ff !important;
}

.affine-editor-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  overflow: hidden;
}

.editor-toolbar {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #efefef;
  background: #fcfcfc;
  z-index: 100;
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.toolbar-left .file-status {
  font-size: 12px;
  color: #999;
}

.toolbar-left .file-status.changed {
  color: #f56c6c;
}

.word-count {
  font-size: 12px;
  color: #999;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #eee;
}

.toolbar-right {
  display: flex;
  gap: 8px;
}

.toolbar-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 13px;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.toolbar-btn.active {
  background: #e6f7ff;
  color: #1890ff;
}

/* 查找面板样式 */
.search-panel {
  position: absolute;
  top: 48px;
  right: 16px;
  background: white;
  border: 1px solid #efefef;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  padding: 6px 12px;
  z-index: 200;
  gap: 12px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 6px;
  flex: 1;
}

.search-input-wrapper input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  width: 150px;
}

.search-results-count {
  font-size: 12px;
  color: #999;
  min-width: 30px;
}

.search-controls {
  display: flex;
  gap: 4px;
}

.search-controls button {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: #666;
  border-radius: 4px;
}

.search-controls button:hover:not(:disabled) {
  background: #f0f0f0;
  color: #333;
}

.search-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.search-controls .close-search {
  margin-left: 4px;
}

.back-to-top {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  z-index: 150;
  transition: all 0.3s;
}

.back-to-top:hover {
  background: #f0f0f0;
  color: #1890ff;
  transform: translateY(-2px);
}

:global([data-theme='dark']) .back-to-top {
  background: #252526 !important;
  border-color: #444 !important;
  color: #ccc !important;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.main-content-area {
  flex: 1;
  display: flex;
  flex-direction: column; /* 纵向布局 */
  overflow: hidden;
  position: relative;
  height: calc(100vh - 120px);
}

.affine-editor-container {
  width: 100%;
  flex-shrink: 0; /* 禁止自动压缩，高度完全由 style 控制 */
  position: relative;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 关键：编辑器外层容器不滚动，由内部 blocksuite-editor 滚动 */
}

/* 确保内部编辑器有滚动条 */
:deep(.blocksuite-editor) {
  flex: 1;
  overflow: auto;
}

.toc-sidebar {
  position: absolute; /* 大纲绝对定位在右侧，不占位纵向空间 */
  right: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  height: 100%;
  border-left: 1px solid #efefef;
  background: #fff;
  display: flex;
  flex-direction: column;
  z-index: 500; /* 确保在编辑器之上 */
  box-shadow: -2px 0 8px rgba(0,0,0,0.05);
}

.toc-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.close-toc {
  cursor: pointer;
  color: #999;
}

.close-toc:hover {
  color: #666;
}

.toc-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* 优化大纲项悬浮效果 */
:deep(affine-outline-panel) {
  --affine-hover-color: #f0f7ff;
}

:global([data-theme='dark']) :deep(affine-outline-panel) {
  --affine-hover-color: #37373d;
  color: #ccc;
}

/* 适配 affine-outline-panel 的样式 */
:deep(affine-outline-panel) {
  display: block;
  width: 100%;
}

/* TOC 动画 */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

:deep(editor-host) {
  flex: 1;
  width: 100%;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  background: white !important;
  /* color: #333 !important; */
  --affine-font-family: Inter, -apple-system, sans-serif;
  /* --affine-foreground-color: #333; */
  /* --affine-background-color: #fff; */
  --affine-primary-color: #1e90ff;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 彻底解决颜色失效：强制允许所有富文本元素显示自己的 inline style 颜色 */
:deep(v-element span), :deep(v-text span), :deep(.inline-editor span) {
  /* color: inherit; */
}

/* 优化：代码块高级样式增强 */
:deep(.affine-code-block-container) {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  margin: 16px 0 !important;
  background: #fdfdfd !important;
}

:deep(.affine-code-block-container .line-number) {
  color: #bbb !important;
  background: #f7f7f7 !important;
  padding: 0 12px !important;
  border-right: 1px solid #eee !important;
  margin-right: 12px !important;
  text-align: right !important;
  min-width: 32px !important;
  font-family: monospace !important;
}

:deep(.affine-code-block-container .rich-text-content) {
  padding: 12px 0 !important;
}

/* 优化：Toolbar 样式适配 */
:deep(affine-code-toolbar) {
  background: white !important;
  border: 1px solid #eee !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  padding: 4px !important;
}

:deep(language-list-button), :deep(preview-button) {
  border-radius: 4px !important;
  transition: background 0.2s !important;
}

:deep(language-list-button:hover), :deep(preview-button:hover) {
  background: #f0f0f0 !important;
}

/* 优化：拖拽手柄增强 */
:deep(.affine-drag-handle-widget) {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s !important;
}

:deep(.affine-block-children-container:hover .affine-drag-handle-widget) {
  opacity: 1;
}

:deep(.affine-drag-handle-widget:hover) {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* 优化：斜杠菜单样式 */
:deep(affine-slash-menu) {
  background: white !important;
  border: 1px solid #efefef !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 8px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

:deep(.affine-slash-menu-item) {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

:deep(.affine-slash-menu-item.active) {
  background: #f0f7ff !important;
  color: #1890ff !important;
}

/* 官方 Light 模式变量补全 */
:deep(editor-toolbar[data-app-theme='light']) {
  --affine-background-overlay-panel-color: rgba(255, 255, 255, 0.85);
  --affine-border-color: rgba(0, 0, 0, 0.08);
  --affine-icon-color: #434343;
  --affine-text-primary-color: #1a1a1a;
  --affine-hover-color: rgba(0, 0, 0, 0.04);
  --affine-divider-color: rgba(0, 0, 0, 0.06);
}

/* 优化：多选态样式 (Selection) */
:deep(.affine-block-selection) {
  background: rgba(24, 144, 255, 0.1) !important;
  border-radius: 4px !important;
}

/* 优化：提示框 (Callout) 样式增强 */
:deep(.affine-callout-container) {
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  border: 1px solid transparent !important;
  display: flex !important;
  gap: 12px !important;
}

:deep(.affine-callout-emoji-container) {
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(0,0,0,0.03) !important;
  border-radius: 6px !important;
}

/* 优化：分隔线 (Divider) */
:deep(.affine-divider-block-container) {
  padding: 16px 0 !important;
}

:deep(.affine-divider-block-container hr) {
  border: none !important;
  border-top: 1px solid #eee !important;
  margin: 0 !important;
}

/* 优化：数据库/表格 (Database/Table) 样式 */
:deep(.affine-database-block-container), :deep(.affine-table-block-container) {
  border: 1px solid #f0f0f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
}

:deep(.affine-data-view-header) {
  background: #fafafa !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* 优化：数学公式 Latex 样式 */
:deep(.latex-block-container) {
  padding: 16px !important;
  background: #fcfcfc !important;
  border-radius: 4px !important;
  margin: 8px 0 !important;
  transition: background 0.2s !important;
}

:deep(.latex-block-container:hover) {
  background: #f0f7ff !important;
}

:deep(.affine-page-root) {
  padding: 60px 100px;
  background-color: white !important;
  /* color: #333; */ /* 注释掉这个，彻底放开文字颜色控制 */
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100%;
}

/* 新增：彻底禁止列表项内的全局颜色覆盖 */
:deep(affine-list *) {
  /* color: unset !important; */
}

/* 白板模式适配 */
:deep(.affine-edgeless-root) {
  background-color: #f8f9fa !important;
  background-image: radial-gradient(#e0e0e0 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

:deep(editor-host[mode="edgeless"]) {
  background-color: #f8f9fa !important;
}

:deep(.affine-edgeless-viewport) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 确保白板工具栏可见 */
:deep(.affine-edgeless-toolbar-container) {
  z-index: 1001 !important;
}

/* 优化：Markdown 引用样式 */
:deep(.affine-quote-block-container) {
  border-left: 4px solid #1890ff !important;
  background: #f0f7ff !important;
  padding: 8px 16px !important;
  margin: 12px 0 !important;
  border-radius: 0 4px 4px 0 !important;
}

:global([data-theme='dark']) :deep(.affine-quote-block-container) {
  border-left-color: #177ddc !important;
  background: #111a2c !important;
  color: #d4d4d4 !important;
}

/* 优化：选区工具栏 (Selection Toolbar) 深度美化 */
:deep(affine-selection-toolbar) {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  background: white !important;
  border: 1px solid #efefef !important;
  padding: 6px !important;
  gap: 4px !important;
}

:global([data-theme='dark']) :deep(affine-selection-toolbar) {
  background: #2d2d2d !important;
  border-color: #444 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* 优化：数据库单元格样式 */
:deep(.affine-database-cell) {
  transition: background 0.2s ease !important;
}

:deep(.affine-database-cell:hover) {
  background: rgba(0, 0, 0, 0.02) !important;
}

:global([data-theme='dark']) :deep(.affine-database-cell:hover) {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 优化：右键菜单 (Context Menu) */
:deep(.affine-context-menu) {
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #eee !important;
  background: white !important;
}

:global([data-theme='dark']) :deep(.affine-context-menu) {
  background: #252526 !important;
  border-color: #454545 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* --- 极致体验优化：白板模式 (Edgeless) 网格背景与样式 --- */
:deep(.affine-edgeless-root) {
  background-color: #f9f9f9 !important;
  background-image: 
    radial-gradient(#e5e5e5 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

:global([data-theme='dark']) :deep(.affine-edgeless-root) {
  background-color: #1a1a1a !important;
  background-image: 
    radial-gradient(#333 1px, transparent 1px) !important;
}

/* 极致体验优化：选区矩形 (Selection Rect) 美化 */
:deep(.affine-edgeless-selected-rect) {
  border: 2px solid #1890ff !important;
  background: rgba(24, 144, 255, 0.05) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.1) !important;
}

/* 极致体验优化：拖拽手柄 (Grabber) 容器与动画 */
:deep(.affine-drag-handle-widget) {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(-5px);
}

:deep(.affine-block-selection:hover) .affine-drag-handle-widget,
:deep(.affine-drag-handle-widget:hover) {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* 极致体验优化：拖拽手柄 (Grabber) 完美还原 */
:deep(.affine-drag-handle-grabber) {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 14px !important;
  height: 24px !important;
  padding: 4px 2px !important;
  gap: 2px !important;
  border-radius: 4px !important;
  transition: background 0.2s !important;
  cursor: grab !important;
  align-content: center !important;
  justify-content: center !important;
}

:deep(.affine-drag-handle-grabber::before) {
  content: '::::::' !important;
  font-family: monospace !important;
  font-size: 14px !important;
  line-height: 8px !important;
  letter-spacing: 2px !important;
  color: #ccc !important;
  display: block !important;
  width: 10px !important;
  word-break: break-all !important;
  text-align: center !important;
}

:global([data-theme='dark']) :deep(.affine-drag-handle-grabber::before) {
  color: #555 !important;
}

:deep(.affine-drag-handle-grabber:hover) {
  background: rgba(0, 0, 0, 0.05) !important;
}

:global([data-theme='dark']) :deep(.affine-drag-handle-grabber:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 极致体验优化：拖拽落点指示器 (Drop Indicator) */
:deep(.affine-drop-indicator) {
  height: 2px !important;
  background: #1890ff !important;
  border-radius: 1px !important;
  position: absolute !important;
  z-index: 100 !important;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.4) !important;
}

/* 极致体验优化：数据库 (Database) 深度细节 */
:deep(.affine-database-block-container) {
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
  overflow: hidden !important;
  margin: 16px 0 !important;
}

:global([data-theme='dark']) :deep(.affine-database-block-container) {
  border-color: #333 !important;
  background: #1e1e1e !important;
}

:deep(.affine-data-view-header) {
  background: #fafafa !important;
  border-bottom: 1px solid #eee !important;
  padding: 8px 12px !important;
}

:global([data-theme='dark']) :deep(.affine-data-view-header) {
  background: #252526 !important;
  border-bottom-color: #333 !important;
}

/* 极致体验优化：表格/数据库单元格交互 */
:deep(.affine-database-column-header) {
  background: rgba(0, 0, 0, 0.02) !important;
  transition: background 0.2s !important;
}

:deep(.affine-database-column-header:hover) {
  background: rgba(0, 0, 0, 0.05) !important;
}

:deep(.affine-data-view-table-row:hover) {
  background: rgba(24, 144, 255, 0.02) !important;
}

:global([data-theme='dark']) :deep(.affine-data-view-table-row:hover) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 极致体验优化：表格边框平滑处理 */
:deep(.affine-data-view-table) {
  border-spacing: 0 !important;
  border-collapse: separate !important;
}

:deep(.affine-data-view-table-cell) {
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background 0.2s !important;
}

:global([data-theme='dark']) :deep(.affine-data-view-table-cell) {
  border-bottom-color: #333 !important;
}

/* 极致体验优化：编辑器空状态 (Placeholder) */
:deep(.affine-paragraph-placeholder) {
  color: #bfbfbf !important;
  font-style: italic !important;
  opacity: 0.8 !important;
}

/* 极致体验优化：图片上传状态 (Image Uploading) */
:deep(.affine-image-block-container.processing) {
  filter: grayscale(0.5) blur(1px) !important;
  opacity: 0.7 !important;
}

:deep(.affine-image-block-container.processing::after) {
  content: '正在上传并持久化...' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0,0,0,0.6) !important;
  color: white !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  z-index: 10 !important;
}

/* 优化：链接卡片 (Bookmark/Link Preview) 深度美化 */
:deep(.affine-bookmark-block-container) {
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 12px 0 !important;
}

:deep(.affine-bookmark-block-container:hover) {
  border-color: #1890ff !important;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

:global([data-theme='dark']) :deep(.affine-bookmark-block-container) {
  background: #252526 !important;
  border-color: #444 !important;
}

:deep(.affine-bookmark-content) {
  padding: 12px 16px !important;
}

:deep(.affine-bookmark-title) {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  margin-bottom: 4px !important;
}

:global([data-theme='dark']) :deep(.affine-bookmark-title) {
  color: #eee !important;
}

:deep(.affine-bookmark-description) {
  font-size: 12px !important;
  color: #666 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

:global([data-theme='dark']) :deep(.affine-bookmark-description) {
  color: #aaa !important;
}

:deep(.affine-bookmark-banner) {
  background-size: cover !important;
  background-position: center !important;
  border-left: 1px solid #eee !important;
  width: 120px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

:deep(.affine-bookmark-icon) {
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

:deep(.affine-bookmark-url) {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* 极致体验优化：斜杠菜单 (Slash Menu) 中文化与视觉分组 */
:deep(affine-slash-menu) {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #efefef !important;
  max-height: 400px !important;
  width: 280px !important;
  z-index: 9999 !important; /* 确保在最顶层 */
}

:global([data-theme='dark']) :deep(affine-slash-menu) {
  background: #252526 !important;
  border-color: #333 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* 菜单项中文化 - 极致覆盖版 (隐藏原英文，显示中文字) */
:global([lang*="zh"] .affine-slash-menu-item .label) { font-size: 0 !important; }

:global([lang*="zh"] .affine-slash-menu-item[data-name="Text"] .label::before) { content: "正文" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 1"] .label::before) { content: "一级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 2"] .label::before) { content: "二级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 3"] .label::before) { content: "三级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 4"] .label::before) { content: "四级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 5"] .label::before) { content: "五级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Heading 6"] .label::before) { content: "六级标题" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Bullet List"] .label::before),
:global([lang*="zh"] .affine-slash-menu-item[data-name="Bulleted List"] .label::before) { content: "无序列表" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Numbered List"] .label::before) { content: "有序列表" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="To-do List"] .label::before) { content: "待办事项" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Code Block"] .label::before) { content: "代码块" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Quote"] .label::before) { content: "引用" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Callout"] .label::before) { content: "高亮块" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Divider"] .label::before) { content: "分割线" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Image"] .label::before) { content: "图片" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Database"] .label::before) { content: "数据库" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-slash-menu-item[data-name="Table"] .label::before) { content: "表格" !important; font-size: 14px !important; }

/* 极致体验优化：斜杠菜单分组伪类标题 */
:global([lang*="zh"] .affine-slash-menu-item[data-name="Text"]::before) {
  content: "基础内容";
  display: block;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  pointer-events: none;
}

:global([lang*="zh"] .affine-slash-menu-item[data-name="Image"]::before) {
  content: "媒体与附件";
  display: block;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 4px;
  pointer-events: none;
}

:global([lang*="zh"] .affine-slash-menu-item[data-name="Database"]::before) {
  content: "高级组件";
  display: block;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 4px;
  pointer-events: none;
}

:global([data-theme='dark']) :deep(.affine-slash-menu-item::before) {
  border-top-color: rgba(255,255,255,0.05);
  color: #666;
}

/* 极致体验优化：高亮块 (Callout) 深度重塑 */
:deep(.affine-callout-container) {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  padding: 12px 16px !important;
  display: flex !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  background: #f1f3f5 !important;
  border-left: 4px solid #adb5bd !important;
}

:deep(.affine-callout-icon) {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

:global([data-theme='dark']) :deep(.affine-callout-container) {
  background: #2a2a2a !important;
  border-left-color: #495057 !important;
  color: #e9ecef !important;
}

/* 极致体验优化：选区工具栏 (Selection Toolbar) 磨砂玻璃效果 */
:deep(affine-selection-toolbar) {
  backdrop-filter: blur(8px) saturate(180%) !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

:global([data-theme='dark']) :deep(affine-selection-toolbar) {
  background-color: rgba(45, 45, 45, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 极致体验优化：图片点击查看 (Lightbox 模拟样式) */
:deep(.affine-image-block-container img) {
  cursor: zoom-in !important;
  transition: transform 0.2s ease !important;
}

:deep(.affine-image-block-container img:active) {
  transform: scale(0.98) !important;
}

/* 极致体验优化：代码块 (Code Block) 语言标签美化 */
:deep(.affine-code-toolbar) {
  background: rgba(0, 0, 0, 0.03) !important;
  padding: 4px 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

:global([data-theme='dark']) :deep(.affine-code-toolbar) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* 极致体验：Lightbox 蒙层样式 */
:global(.lightbox-overlay) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}

:global(.lightbox-overlay.active) {
  opacity: 1;
}

:global(.lightbox-overlay.fade-out) {
  opacity: 0;
}

:global(.lightbox-content) {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:global(.lightbox-overlay.active .lightbox-content) {
  transform: scale(1);
}

:global(.lightbox-content img) {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

:global(.lightbox-close) {
  position: absolute;
  top: -40px;
  right: -40px;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
}

.affine-editor-container.loaded {
  opacity: 1;
}

.affine-editor-container.is-loading {
  filter: blur(4px);
}

/* 极致体验优化：区块聚焦 (Block Focus) 呼吸边框 */
:deep(.affine-block-element.affine-focused) {
  position: relative !important;
}

:deep(.affine-block-element.affine-focused::before) {
  content: '' !important;
  position: absolute !important;
  left: -12px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: #1890ff !important;
  border-radius: 4px !important;
  animation: breathe 2s infinite ease-in-out !important;
}

@keyframes breathe {
  0% { opacity: 0.3; transform: scaleY(0.95); }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.3; transform: scaleY(0.95); }
}

/* 极致体验优化：多选区块时的视觉阴影 */
:deep(.affine-block-selection) {
  background: rgba(24, 144, 255, 0.08) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.2) !important;
}

:global([data-theme='dark']) :deep(.affine-bookmark-banner) {
  border-left-color: #333 !important;
}

:deep(editor-host[mode="page"]) {
  background-color: white !important;
}

/* 状态栏与统计信息 */
.save-status-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.saving {
  color: #1890ff;
  animation: pulse 1.5s infinite;
}

.saved {
  color: #52c41a;
}

.doc-stats {
  display: flex;
  gap: 12px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #eee;
  color: #888;
  font-size: 11px;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* AI 侧边栏样式 */
.ai-sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  width: 300px;
  background: white;
  border-left: 1px solid #efefef;
  z-index: 250;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 12px rgba(0,0,0,0.05);
}

:global([data-theme='dark']) .ai-sidebar {
  background: #252526 !important;
  border-left-color: #333 !important;
  box-shadow: -4px 0 12px rgba(0,0,0,0.2) !important;
}

.ai-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

:global([data-theme='dark']) .ai-header {
  border-bottom-color: #333 !important;
}

.ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #722ed1;
}

.ai-actions {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ai-action-btn {
  padding: 10px;
  border: 1px solid #e8e8e8;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

:global([data-theme='dark']) .ai-action-btn {
  background: #333 !important;
  border-color: #444 !important;
  color: #ccc !important;
}

.ai-action-btn:hover {
  background: #f0f5ff;
  border-color: #1890ff;
  color: #1890ff;
}

/* 帮助面板样式 */
.help-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.help-modal {
  width: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
  overflow: hidden;
}

:global([data-theme='dark']) .help-modal {
  background: #252526 !important;
  color: #ccc !important;
}

.help-header {
  padding: 16px 20px;
  background: #fcfcfc;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:global([data-theme='dark']) .help-header {
  background: #2d2d2d !important;
  border-bottom-color: #444 !important;
}

.help-body {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.help-section {
  margin-bottom: 20px;
}

.help-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #1890ff;
}

.help-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-section li {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

kbd {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: monospace;
}

:global([data-theme='dark']) kbd {
  background: #444 !important;
  border-color: #555 !important;
  color: #eee !important;
}

:global([data-theme='dark']) .doc-stats {
  border-left-color: #444 !important;
  color: #666 !important;
}

:global([data-theme='dark']) .ai-status-card {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #888 !important;
}

.ai-status-card {
  margin: 16px;
  padding: 12px;
  background: #f0f7ff;
  border: 1px dashed #1890ff;
  border-radius: 8px;
  font-size: 12px;
  color: #666;
}

.ai-history {
  padding: 16px;
  flex: 1;
}

.empty-history {
  padding: 20px 0;
  text-align: center;
  color: #bfbfbf;
  font-size: 12px;
}

.editor-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  z-index: 10;
  gap: 10px;
}
/* 极致体验：Toast 通知样式 */
.affine-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.affine-toast {
  padding: 10px 20px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  pointer-events: auto;
  animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #eee;
}

:global([data-theme='dark']) .affine-toast {
  background: #2d2d2d;
  border-color: #444;
  color: #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.affine-toast.success i { color: #52c41a; }
.affine-toast.info i { color: #1890ff; }
.affine-toast.warning i { color: #faad14; }
.affine-toast.error i { color: #f5222d; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-fade-enter-active, .toast-fade-leave-active {
  transition: all 0.3s ease;
}
.toast-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.toast-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* 极致体验：命令面板 (Command Palette) 样式 */
.command-palette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.command-palette {
  width: 500px;
  max-width: 90%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

:global([data-theme='dark']) .command-palette {
  background: #252526;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.command-input-wrapper {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

:global([data-theme='dark']) .command-input-wrapper {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.command-input-wrapper i {
  color: #1e96eb;
  font-size: 16px;
}

.command-input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  color: #1d1d1f;
  font-weight: 400;
}

:global([data-theme='dark']) .command-input-wrapper input {
  color: #eee;
}

.command-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}

.command-group-title {
  font-size: 11px;
  font-weight: 600;
  color: #a0a0a0;
  padding: 10px 12px 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.command-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.command-item:last-child {
  margin-bottom: 0;
}

.command-item.active {
  background: #f5f5f7;
}

:global([data-theme='dark']) .command-item.active {
  background: rgba(255, 255, 255, 0.08);
}

.command-icon-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(30, 150, 235, 0.08);
  color: #1e96eb;
}

:global([data-theme='dark']) .command-icon-box {
  background: rgba(30, 150, 235, 0.15);
}

.command-icon-box i {
  font-size: 14px;
}

.command-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.command-title {
  font-size: 14px;
  font-weight: 450;
  color: #1d1d1f;
}

:global([data-theme='dark']) .command-title {
  color: #eee;
}

.command-shortcut {
  font-size: 11px;
  color: #86868b;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-width: 20px;
  text-align: center;
}

:global([data-theme='dark']) .command-shortcut {
  background: rgba(255, 255, 255, 0.1);
  color: #a0a0a0;
}

.command-empty {
  padding: 40px 20px;
  text-align: center;
  color: #a0a0a0;
  font-size: 13px;
}
/* 极致体验：骨架屏加载动画 */
.editor-skeleton {
  padding: 80px 15%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: white;
  min-height: 100vh;
}

:global([data-theme='dark']) .editor-skeleton {
  background: #1e1e1e;
}

.skeleton-header {
  height: 40px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 40px;
}

.skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-line.title {
  width: 40%;
  height: 32px;
  margin-bottom: 20px;
}

.skeleton-line.body {
  width: 100%;
}

:global([data-theme='dark']) .skeleton-header,
:global([data-theme='dark']) .skeleton-line {
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 极致体验：系统菜单 (ContextMenu) 美化 */
:deep(.affine-context-menu) {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  padding: 6px !important;
  z-index: 10005 !important;
}

:global([data-theme='dark']) :deep(.affine-context-menu) {
  background: rgba(45, 45, 45, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

:deep(.affine-context-menu-item) {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

:deep(.affine-context-menu-item:hover) {
  background: rgba(24, 144, 255, 0.1) !important;
  color: #1890ff !important;
}

:global([data-theme='dark']) :deep(.affine-context-menu-item:hover) {
  background: rgba(24, 144, 255, 0.2) !important;
}

/* 区块操作菜单 (Block Action Menu) 中文化 - 精准覆盖版 (只隐藏已翻译的项，避免误伤颜色设置等功能) */
:global([lang*="zh"] [data-name="Copy"] .label),
:global([lang*="zh"] [data-name="Copy"] .text),
:global([lang*="zh"] [data-name="Copy link to block"] .label),
:global([lang*="zh"] [data-name="Copy link to block"] .text),
:global([lang*="zh"] [data-name="Duplicate"] .label),
:global([lang*="zh"] [data-name="Duplicate"] .text),
:global([lang*="zh"] [data-name="Delete"] .label),
:global([lang*="zh"] [data-name="Delete"] .text),
:global([lang*="zh"] [data-name="Move to"] .label),
:global([lang*="zh"] [data-name="Move to"] .text),
:global([lang*="zh"] [data-name="Turn into"] .label),
:global([lang*="zh"] [data-name="Turn into"] .text),
:global([lang*="zh"] [data-name="Group"] .label),
:global([lang*="zh"] [data-name="Group"] .text),
:global([lang*="zh"] [data-name="Ungroup"] .label),
:global([lang*="zh"] [data-name="Ungroup"] .text) {
  font-size: 0 !important;
  opacity: 0 !important;
  display: inline-block !important;
  width: 0 !important;
}

/* 尝试汉化颜色相关菜单 (如果存在) */
:global([lang*="zh"] [data-name="Color"] .label),
:global([lang*="zh"] [data-name="Color"] .text) {
  font-size: 0 !important;
  width: 0 !important;
}
:global([lang*="zh"] [data-name="Color"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Color"]::before) { content: "颜色" !important; }

/* 颜色选择器中文化 */
:global([lang*="zh"] .affine-context-menu-item[data-name="Default"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Red"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Orange"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Yellow"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Green"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Teal"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Blue"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Purple"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Grey"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Default Color"] .label),
:global([lang*="zh"] .affine-context-menu-item[data-name="Default Background"] .label) {
  font-size: 0 !important;
}

:global([lang*="zh"] .affine-context-menu-item[data-name="Default"] .label::before) { content: "默认" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Red"] .label::before) { content: "红色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Orange"] .label::before) { content: "橙色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Yellow"] .label::before) { content: "黄色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Green"] .label::before) { content: "绿色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Teal"] .label::before) { content: "青色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Blue"] .label::before) { content: "蓝色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Purple"] .label::before) { content: "紫色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Grey"] .label::before) { content: "灰色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Default Color"] .label::before) { content: "默认颜色" !important; font-size: 14px !important; }
:global([lang*="zh"] .affine-context-menu-item[data-name="Default Background"] .label::before) { content: "默认背景" !important; font-size: 14px !important; }

/* 颜色选择器分组标题中文化 - 适配 BlockSuite 结构 */
:global([lang*="zh"] .affine-context-menu-group-title) {
  font-size: 0 !important;
  padding: 8px 12px 4px !important;
}
:global([lang*="zh"] .affine-context-menu-group-title::before) {
  font-size: 11px !important;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
}
/* 第一个标题通常是 Color，第二个是 Background */
:global([lang*="zh"] .affine-context-menu-group-title:first-of-type::before) { content: "文字颜色" !important; }
:global([lang*="zh"] .affine-context-menu-group-title:nth-of-type(2)::before) { content: "背景颜色" !important; }

:global([lang*="zh"] .affine-context-menu-item::before) {
  font-size: 14px !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  display: inline-block !important;
}

:global([lang*="zh"] [data-name="Copy"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Copy"]::before) { content: "复制" !important; }

:global([lang*="zh"] [data-name="Copy link to block"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Copy link to block"]::before) { content: "复制块链接" !important; }

:global([lang*="zh"] [data-name="Duplicate"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Duplicate"]::before) { content: "复刻" !important; }

:global([lang*="zh"] [data-name="Delete"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Delete"]::before) { content: "删除" !important; }

:global([lang*="zh"] [data-name="Move to"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Move to"]::before) { content: "移动到" !important; }

:global([lang*="zh"] [data-name="Turn into"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Turn into"]::before) { content: "转换为" !important; }

:global([lang*="zh"] [data-name="Group"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Group"]::before) { content: "组合" !important; }

:global([lang*="zh"] [data-name="Ungroup"]::before),
:global([lang*="zh"] .affine-context-menu-item[data-name="Ungroup"]::before) { content: "取消组合" !important; }

/* 强制中文化 Toolbar 中的 Ask AI 文本 */
:global([lang*="zh"] .ask-ai-btn-wrapper span:last-child) { font-size: 0 !important; }
:global([lang*="zh"] .ask-ai-btn-wrapper span:last-child::before) { content: "问问 AI" !important; font-size: 14px !important; }

/* 参考文献管理区域样式 */
.main-content-area.with-references {
  height: calc(100vh - 120px);
}

.reference-section {
  border-top: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  z-index: 100;
  flex-shrink: 0;
  min-height: 200px;
}

:global([data-theme='dark']) .reference-section {
  background-color: #1e1e1e;
  border-top-color: #333;
}

.resize-handle {
  height: 4px;
  width: 100%;
  cursor: row-resize;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: background 0.2s;
}

.resize-handle:hover {
  background: #1890ff;
}

.reference-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  background-color: transparent;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

:global([data-theme='dark']) .reference-toolbar {
  background: #252526;
  border-bottom-color: #333;
}

.reference-toolbar .toolbar-left {
  display: flex;
  gap: 8px;
}

.reference-toolbar .toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: none;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  padding: 6px;
}

:global([data-theme='dark']) .reference-toolbar .toolbar-btn {
  color: #ccc;
}

.reference-toolbar .toolbar-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

:global([data-theme='dark']) .reference-toolbar .toolbar-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.reference-toolbar .toolbar-btn:active {
  transform: scale(0.95);
}

.reference-toolbar .toolbar-btn i {
  font-size: 14px;
}

.reference-toolbar .ref-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px; /* 还原之前的窄宽度设计 */
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 5px 12px;
  transition: border-color 0.2s;
  margin-left: 12px;
  flex: none; /* 关键：防止被 flex: 1 撑开 */
}

:global([data-theme='dark']) .reference-toolbar .ref-search-input-wrapper {
  background-color: #2d2d2d;
  border-color: #444;
}

.reference-toolbar .ref-search-input-wrapper:focus-within {
  border-color: #1890ff;
}

.reference-toolbar .search-icon {
  color: #999;
  margin-right: 8px;
  font-size: 14px;
}

.reference-toolbar .search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  padding: 0;
}

:global([data-theme='dark']) .reference-toolbar .search-input {
  color: #eee;
}

.reference-section * {
  box-sizing: border-box;
}

.reference-table-container {
  flex: 1;
  overflow: auto;
  border-top: none;
  background-color: white;
}

:global([data-theme='dark']) .reference-table-container {
  background-color: #1e1e1e;
}

.reference-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.reference-table thead {
  background-color: #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 1;
}

:global([data-theme='dark']) .reference-table thead {
  background-color: #2d2d2d;
}

.reference-table th {
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:global([data-theme='dark']) .reference-table th {
  color: #aaa;
  border-bottom-color: #333;
}

.reference-table th:first-child { width: 60px; }
.reference-table th:nth-child(2) { width: auto; min-width: 200px; }
.reference-table th:nth-child(3) { width: 140px; }
.reference-table th:nth-child(4) { width: 150px; }
.reference-table th:nth-child(5) { width: 80px; }
.reference-table th:last-child { width: 80px; }

.reference-table tbody tr {
  height: 42px;
  transition: background-color 0.2s;
  cursor: move;
}

.reference-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

:global([data-theme='dark']) .reference-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.reference-table tbody tr.highlighted {
  background-color: rgba(24, 144, 255, 0.1);
  outline: none;
}

.reference-table tbody tr:focus {
  outline: none;
  background-color: rgba(24, 144, 255, 0.15);
}

:global([data-theme='dark']) .reference-table tbody tr:focus {
  background-color: rgba(24, 144, 255, 0.2);
}

:global([data-theme='dark']) .reference-table tbody tr.highlighted {
  background-color: rgba(24, 144, 255, 0.15);
}

.reference-table tbody tr:active {
  opacity: 0.7;
  cursor: grabbing;
}

.reference-table td {
  padding: 8px;
  color: #333;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 极致还原：强制不换行 */
  height: 42px;
  box-sizing: border-box;
}

:global([data-theme='dark']) .reference-table td {
  color: #ccc;
  border-bottom-color: #333;
}

.reference-table .title-text,
.reference-table .alias-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.alias-display {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.edit-alias-btn {
  display: none;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.alias-display:hover .edit-alias-btn {
  display: flex;
}

.edit-alias-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1890ff;
}

.alias-edit {
  padding: 0 8px;
}

.alias-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  outline: none;
  font-size: 12px;
  background: white;
}

.detail-icons {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.detail-icons i {
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.detail-icons i.icon-info { color: #1890ff; }
.detail-icons i.icon-copy { color: #52c41a; }
.detail-icons i.icon-delete { color: #ff4d4f; }

.detail-icons i:hover {
  opacity: 0.7;
}

.detail-icons .icon-delete:hover {
  color: #ff4d4f;
}

.reference-loading, .reference-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #999;
}

.empty-icon, .loading-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

/* 参考文献详情 */
.reference-detail-content {
  padding: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.detail-item {
  margin-bottom: 12px;
}

.detail-label {
  font-weight: 600;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}

.detail-value.abstract {
  font-size: 12px;
  color: #666;
  text-align: justify;
}

/* 导入对话框 */
.import-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.import-method-group {
  margin-bottom: 10px;
}

.search-results-section {
  border: 1px solid #eee;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.result-item {
  padding: 12px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.result-item:last-child {
  border-bottom: none;
}

.result-content {
  flex: 1;
  overflow: hidden;
}

.result-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-meta {
  font-size: 12px;
  color: #999;
}

.no-results {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 导出对话框 */
.export-section {
  margin-bottom: 20px;
}

.export-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}

/* 拖拽预览 */
:global(.reference-drag-preview) {
  pointer-events: none;
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 极致体验优化：参考文献引用标签 (Citation Tag) 视觉还原 (同步 Vditor) */
:deep(.citation-tag) {
  display: inline-block !important;
  padding: 2px 8px !important;
  background-color: #e6f7ff !important;
  border-radius: 4px !important;
  color: #1890ff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  vertical-align: baseline;
  line-height: 1.4;
  margin: 0 2px;
  /* 隐藏原始的 textContent (markdown 格式) */
  font-size: 0 !important;
}

:deep(.citation-tag::before) {
  content: attr(data-display-text);
  font-size: 13px;
  color: #1890ff;
  font-weight: 500;
}

:deep(.citation-tag:hover) {
  background-color: rgba(24, 144, 255, 0.2) !important;
}

/* 隐藏原始标记文本但保留在 DOM 中供编辑器识别 */
:deep(.citation-tag-content) {
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

:global([data-theme='dark']) :deep(.citation-tag) {
  background-color: rgba(24, 144, 255, 0.15) !important;
  border: 1px solid rgba(24, 144, 255, 0.3) !important;
  color: #40a9ff !important;
}

:global([data-theme='dark']) :deep(.citation-tag::before) {
  color: #40a9ff !important;
}

/* 极致体验：图片点击查看 (Lightbox 模拟样式) */
:deep(.affine-image-block-container img) {
  cursor: zoom-in !important;
  transition: transform 0.2s ease !important;
}

:deep(.affine-image-block-container img:active) {
  transform: scale(0.98) !important;
}

:deep(.affine-paragraph-placeholder) {
  color: #bfbfbf !important;
}

:global(.ai-result-message-box) {
  max-width: 600px !important;
  width: 90% !important;
}

:global(.ai-result-message-box .el-message-box__content) {
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--affine-font-family);
  line-height: 1.6;
  background: #f9f9f9;
  padding: 15px !important;
  border-radius: 4px;
  margin: 10px 0;
  border: 1px solid #eee;
}

:global(.ai-confirm-btn) {
  background-color: var(--affine-primary-color) !important;
  border-color: var(--affine-primary-color) !important;
}

:global(.ai-cancel-btn:hover) {
  color: var(--affine-primary-color) !important;
  border-color: var(--affine-primary-color) !important;
  background-color: var(--affine-hover-color, #f0f7ff) !important;
}

/* 引用切换菜单样式 */
:global(.citation-menu-wrapper) {
  position: fixed;
  z-index: 10001;
  animation: citation-menu-fade-in 0.2s ease-out;
}

@keyframes citation-menu-fade-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

:global(.citation-menu) {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  min-width: 280px;
  max-width: 400px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:global(.citation-menu-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #e4e7ed;
}

:global(.citation-menu-header .header-title) {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  white-space: nowrap;
}

:global(.citation-menu-header .header-search) {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 200px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 4px 8px;
  transition: all 0.2s;
}

:global(.citation-menu-header .header-search:focus-within) {
  border-color: #1890ff;
  background-color: #ffffff;
}

:global(.citation-menu-header .header-search .search-icon) {
  color: #909399;
  font-size: 12px;
  margin-right: 6px;
  flex-shrink: 0;
}

:global(.citation-menu-header .header-search .search-input) {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #303133;
  font-size: 12px;
  min-width: 0;
}

:global(.citation-menu-header .header-search .search-input::placeholder) {
  color: #c0c4cc;
}

:global(.citation-menu-list) {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}

:global(.citation-menu-list::-webkit-scrollbar) {
  width: 6px;
}

:global(.citation-menu-list::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 3px;
}

:global(.citation-menu-list::-webkit-scrollbar-thumb:hover) {
  background: #c0c4cc;
}

:global(.citation-menu-item) {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:global(.citation-menu-item:hover) {
  background: #f5f7fa;
}

:global(.citation-menu-item:active) {
  background: #e6f7ff;
}

:global(.citation-menu-item .menu-item-note) {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
  white-space: normal;
}

:global(.citation-menu-item .menu-item-meta) {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  word-break: break-all;
  white-space: normal;
}

:global(.citation-menu-empty) {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

/* 深色模式支持 */
:global([data-theme='dark'] .citation-menu) {
  background: #1e1e1e;
  border-color: #3a3a3a;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}

:global([data-theme='dark'] .citation-menu-header) {
  border-bottom-color: #3a3a3a;
}

:global([data-theme='dark'] .citation-menu-header .header-title) {
  color: #a0a0a0;
}

:global([data-theme='dark'] .citation-menu-header .header-search) {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}

:global([data-theme='dark'] .citation-menu-header .header-search:focus-within) {
  border-color: #1890ff;
  background-color: #1e1e1e;
}

:global([data-theme='dark'] .citation-menu-header .header-search .search-icon) {
  color: #666;
}

:global([data-theme='dark'] .citation-menu-header .header-search .search-input) {
  color: #e0e0e0;
}

:global([data-theme='dark'] .citation-menu-header .header-search .search-input::placeholder) {
  color: #666;
}

:global([data-theme='dark'] .citation-menu-list::-webkit-scrollbar-thumb) {
  background: #4a4a4a;
}

:global([data-theme='dark'] .citation-menu-list::-webkit-scrollbar-thumb:hover) {
  background: #5a5a5a;
}

:global([data-theme='dark'] .citation-menu-item:hover) {
  background: #2a2a2a;
}

:global([data-theme='dark'] .citation-menu-item:active) {
  background: rgba(24, 144, 255, 0.15);
}

:global([data-theme='dark'] .citation-menu-item .menu-item-note) {
  color: #e0e0e0;
}

:global([data-theme='dark'] .citation-menu-item .menu-item-meta) {
  color: #808080;
}

:global([data-theme='dark'] .citation-menu-empty) {
  color: #808080;
}

/* 引用弹窗样式 - 同步自 DeerFlowChat.vue */
:global(.citation-modal) {
  position: fixed;
  z-index: 10000;
  max-width: 500px;
  min-width: 300px;
  width: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
  overflow: hidden;
}

:global(.citation-modal.show) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

:global(.citation-modal-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px 12px 0 0;
  background: #1890ff;
}

:global(.citation-modal-title) {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  line-height: 1.5;
  padding: 2px 6px;
  border-radius: 4px;
}

:global(.citation-modal-close) {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

:global(.citation-modal-close:hover) {
  background: rgba(255, 255, 255, 0.2);
}

:global(.citation-modal-body) {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

:global(.citation-modal-content-text) {
  font-size: 13px;
  color: #333;
  line-height: 1.8;
  text-align: justify;
  font-family: "Times New Roman", "SimSun", "FangSong", serif;
  word-wrap: break-word;
}

:global(.citation-modal-content-text .citation-author) {
  color: #333;
}

:global(.citation-modal-content-text .title-bold) {
  font-weight: 700 !important;
  color: #333 !important;
}

:global(.citation-modal-content-text .journal-style) {
  font-weight: 700 !important;
  color: #0066cc !important;
  font-style: italic !important;
}

:global(.citation-modal-content-text .citation-other) {
  color: #666;
}

:global(.citation-modal-footer) {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

:global(.citation-modal-link) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1890ff;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}

:global(.citation-modal-link:hover) {
  color: #40a9ff;
  background: rgba(24, 144, 255, 0.08);
}

/* 深色模式适配 */
:global([data-theme='dark'] .citation-modal) {
  background: #1f1f1f;
  border: 1px solid #333;
}

:global([data-theme='dark'] .citation-modal-content-text) {
  color: #e0e0e0;
}

:global([data-theme='dark'] .citation-modal-content-text .citation-author),
:global([data-theme='dark'] .citation-modal-content-text .title-bold) {
  color: #e0e0e0 !important;
}

:global([data-theme='dark'] .citation-modal-content-text .journal-style) {
  color: #4a9eff !important;
}

:global([data-theme='dark'] .citation-modal-content-text .citation-other) {
  color: #aaa;
}

:global([data-theme='dark'] .citation-modal-footer) {
  border-top-color: #333;
}
</style>