aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/components/reportEdit.vue

@@ -0,0 +1,2283 @@
+<template>
+  <div
+    ref="pageRef"
+    class="report-edit-page"
+    :class="{
+      'is-generating': pageContentOpen && flowShowGenerating,
+      'is-prompt': pageContentOpen && flowShowPromptWorkspace,
+      'is-select': pageContentOpen && flowStep === 'select',
+      'is-detail': pageContentOpen && flowStep === 'detail',
+      'is-sidebar-collapsed': sidebarCollapsed && !isStackedLayout,
+      'is-prompt-collapsed': promptCollapsed && !isStackedLayout,
+      'is-stacked': isStackedLayout,
+      'is-content-closed': !pageContentOpen,
+    }"
+  >
+    <!-- pageContentOpen / remountKey：流程點擊後強制整樹重掛，與路由對齊 -->
+    <div v-if="pageContentOpen" :key="remountKey" class="report-edit-page__surface">
+      <ReportGeneratingPanel
+        v-if="flowShowGenerating"
+        class="report-edit-page__generating"
+        @enter-editing="handleEnterEditing"
+      />
+
+      <!-- 側欄常駐：生成步驟僅隱藏，避免反覆掛載重拉組件資訊 -->
+      <div
+        v-show="!flowShowGenerating"
+        ref="sidebarSlotRef"
+        class="report-edit-page__sidebar-slot"
+        :class="{
+          'is-collapsed': sidebarCollapsed && !isStackedLayout,
+          'is-col-overflow': sidebarOverflow,
+        }"
+        @mouseenter="onSidebarSlotEnter"
+        @mouseleave="onSidebarSlotLeave"
+      >
+        <el-scrollbar
+          v-show="!sidebarCollapsed || isStackedLayout"
+          class="report-edit-page__col-scroll"
+          :min-size="50"
+        >
+          <ReportWorkflowSidebar
+            class="report-edit-page__sidebar"
+            :collapsed="sidebarCollapsed && !isStackedLayout"
+          />
+        </el-scrollbar>
+        <div
+          class="report-edit-page__side-thumb-track"
+          :class="{ 'is-visible': sidebarThumbShow }"
+          aria-hidden="true"
+        >
+          <div
+            class="report-edit-page__side-thumb"
+            :style="{
+              height: `${sidebarThumbH}px`,
+              transform: `translateY(${sidebarThumbY}px)`,
+            }"
+            @mousedown.prevent="onSideThumbDown('sidebar', $event)"
+          />
+        </div>
+      </div>
+
+      <template v-if="!flowShowGenerating">
+        <main
+          ref="mainRef"
+          class="report-edit-page__main report-edit-page__main--anchored"
+          :class="{
+            'is-typewriting': mainColScrollbarAlways,
+            'is-main-scrollbar-visible': mainCustomThumbShow,
+          }"
+          @mouseenter="onMainColEnter"
+          @mouseleave="onMainColLeave"
+        >
+          <!-- 左／右開關：窄屏堆疊時隱藏 -->
+          <button
+            v-show="!isStackedLayout"
+            type="button"
+            class="report-edit-page__col-divider report-edit-page__col-divider--left"
+            :aria-expanded="!sidebarCollapsed"
+            :aria-label="sidebarCollapsed ? '展開左側欄' : '收起左側欄'"
+            @click="sidebarCollapsed = !sidebarCollapsed"
+          >
+            <el-icon :size="14">
+              <DArrowLeft v-if="!sidebarCollapsed" />
+              <DArrowRight v-else />
+            </el-icon>
+          </button>
+
+          <button
+            v-if="flowShowPromptWorkspace"
+            v-show="!isStackedLayout"
+            type="button"
+            class="report-edit-page__col-divider report-edit-page__col-divider--right"
+            :aria-expanded="!promptCollapsed"
+            :aria-label="promptCollapsed ? '展開右側欄' : '收起右側欄'"
+            @click="promptCollapsed = !promptCollapsed"
+          >
+            <el-icon :size="14">
+              <DArrowRight v-if="!promptCollapsed" />
+              <DArrowLeft v-else />
+            </el-icon>
+          </button>
+
+          <el-scrollbar class="report-edit-page__col-scroll">
+            <KeepAlive>
+              <ReportTemplatePicker v-if="flowShowSelect" @select="handleSelectTemplate" />
+            </KeepAlive>
+
+            <ReportTemplateDetail
+              v-if="flowShowDetail"
+              :template="selectedTemplate!"
+              @back="goBackToSelect"
+              @generate="enterChapterEdit"
+            />
+
+            <!-- prompt：先畫與實頁一致的工具列靜態內容，再掛載重型工作區 -->
+            <template v-if="flowShowPromptWorkspace">
+              <Suspense v-if="promptHeavyReady">
+                <ReportChapterWorkspace
+                  @back-to-chapter-edit="backToChapterEdit"
+                  @generate-report="handleGenerateReportNavigate"
+                />
+                <template #fallback>
+                  <section
+                    class="report-edit-prompt-shell report-edit-prompt-shell--main"
+                    aria-hidden="true"
+                  >
+                    <header class="report-edit-prompt-shell__toolbar">
+                      <div class="report-edit-prompt-shell__select" tabindex="-1">
+                        <span class="report-edit-prompt-shell__select-text">{{
+                          promptShellChapterLabel
+                        }}</span>
+                        <span class="report-edit-prompt-shell__select-caret" aria-hidden="true" />
+                      </div>
+                      <div class="report-edit-prompt-shell__actions">
+                        <button
+                          type="button"
+                          class="report-edit-prompt-shell__action-btn"
+                          disabled
+                          tabindex="-1"
+                        >
+                          編輯/儲存
+                        </button>
+                        <button
+                          type="button"
+                          class="report-edit-prompt-shell__action-btn"
+                          disabled
+                          tabindex="-1"
+                        >
+                          生成報告
+                        </button>
+                      </div>
+                    </header>
+                    <div class="report-edit-prompt-shell__editor">
+                      <div class="report-edit-prompt-shell__title" />
+                      <div class="report-edit-prompt-shell__line" />
+                      <div
+                        class="report-edit-prompt-shell__line report-edit-prompt-shell__line--short"
+                      />
+                      <div class="report-edit-prompt-shell__line" />
+                      <div
+                        class="report-edit-prompt-shell__line report-edit-prompt-shell__line--mid"
+                      />
+                    </div>
+                  </section>
+                </template>
+              </Suspense>
+              <section
+                v-else
+                class="report-edit-prompt-shell report-edit-prompt-shell--main"
+                aria-hidden="true"
+              >
+                <header class="report-edit-prompt-shell__toolbar">
+                  <div class="report-edit-prompt-shell__select" tabindex="-1">
+                    <span class="report-edit-prompt-shell__select-text">{{
+                      promptShellChapterLabel
+                    }}</span>
+                    <span class="report-edit-prompt-shell__select-caret" aria-hidden="true" />
+                  </div>
+                  <div class="report-edit-prompt-shell__actions">
+                    <button
+                      type="button"
+                      class="report-edit-prompt-shell__action-btn"
+                      disabled
+                      tabindex="-1"
+                    >
+                      編輯/儲存
+                    </button>
+                    <button
+                      type="button"
+                      class="report-edit-prompt-shell__action-btn"
+                      disabled
+                      tabindex="-1"
+                    >
+                      生成報告
+                    </button>
+                  </div>
+                </header>
+                <div class="report-edit-prompt-shell__editor">
+                  <div class="report-edit-prompt-shell__title" />
+                  <div class="report-edit-prompt-shell__line" />
+                  <div
+                    class="report-edit-prompt-shell__line report-edit-prompt-shell__line--short"
+                  />
+                  <div class="report-edit-prompt-shell__line" />
+                  <div class="report-edit-prompt-shell__line report-edit-prompt-shell__line--mid" />
+                </div>
+              </section>
+            </template>
+          </el-scrollbar>
+          <div
+            ref="mainThumbTrackRef"
+            class="report-edit-page__main-thumb-track"
+            :class="{ 'is-visible': mainCustomThumbShow }"
+            aria-hidden="true"
+          >
+            <div
+              class="report-edit-page__main-thumb"
+              :style="{
+                height: `${mainThumbH}px`,
+                transform: `translateY(${mainThumbY}px)`,
+              }"
+              @mousedown.prevent="onMainCustomThumbDown"
+            />
+          </div>
+        </main>
+
+        <div
+          v-if="flowShowPromptWorkspace"
+          ref="promptSlotRef"
+          class="report-edit-page__prompt-slot"
+          :class="{
+            'is-collapsed': promptCollapsed && !isStackedLayout,
+            'is-col-overflow': promptOverflow,
+          }"
+          @mouseenter="onPromptSlotEnter"
+          @mouseleave="onPromptSlotLeave"
+        >
+          <el-scrollbar
+            v-show="!promptCollapsed || isStackedLayout"
+            class="report-edit-page__col-scroll"
+            :min-size="50"
+          >
+            <Suspense v-if="promptHeavyReady">
+              <ReportPromptPanel
+                v-if="flowShowPromptPanel"
+                :key="`right-prompt-${remountKey}`"
+                class="report-edit-page__prompt"
+              />
+              <ReportGenerateSettingsPanel
+                v-else-if="flowShowSettingsPanel"
+                :key="`right-settings-${remountKey}`"
+                class="report-edit-page__prompt"
+                @generated="handleSettingsGenerated"
+              />
+              <template #fallback>
+                <aside
+                  class="report-edit-page__prompt report-edit-prompt-shell report-edit-prompt-shell--right"
+                  aria-hidden="true"
+                >
+                  <template v-if="flowShowSettingsPanel">
+                    <ReportCollapsibleSection :open="true" title="生成報告設置" card-hover>
+                      <div
+                        class="report-edit-prompt-shell__pulse report-edit-prompt-shell__pulse--tall"
+                      />
+                    </ReportCollapsibleSection>
+                    <ReportCollapsibleSection :open="true" title="報告歷史" card-hover>
+                      <div class="report-edit-prompt-shell__pulse" />
+                    </ReportCollapsibleSection>
+                  </template>
+                  <template v-else>
+                    <ReportCollapsibleSection :open="true" title="Prompt" card-hover>
+                      <div
+                        class="report-edit-prompt-shell__pulse report-edit-prompt-shell__pulse--tall"
+                      />
+                    </ReportCollapsibleSection>
+                    <ReportCollapsibleSection :open="true" title="章節歷史" card-hover>
+                      <div class="report-edit-prompt-shell__pulse" />
+                    </ReportCollapsibleSection>
+                  </template>
+                </aside>
+              </template>
+            </Suspense>
+            <aside
+              v-else
+              class="report-edit-page__prompt report-edit-prompt-shell report-edit-prompt-shell--right"
+              aria-hidden="true"
+            >
+              <template v-if="flowShowSettingsPanel">
+                <ReportCollapsibleSection :open="true" title="生成報告設置" card-hover>
+                  <div
+                    class="report-edit-prompt-shell__pulse report-edit-prompt-shell__pulse--tall"
+                  />
+                </ReportCollapsibleSection>
+                <ReportCollapsibleSection :open="true" title="報告歷史" card-hover>
+                  <div class="report-edit-prompt-shell__pulse" />
+                </ReportCollapsibleSection>
+              </template>
+              <template v-else>
+                <ReportCollapsibleSection :open="true" title="Prompt" card-hover>
+                  <div
+                    class="report-edit-prompt-shell__pulse report-edit-prompt-shell__pulse--tall"
+                  />
+                </ReportCollapsibleSection>
+                <ReportCollapsibleSection :open="true" title="章節歷史" card-hover>
+                  <div class="report-edit-prompt-shell__pulse" />
+                </ReportCollapsibleSection>
+              </template>
+            </aside>
+          </el-scrollbar>
+          <div
+            class="report-edit-page__side-thumb-track"
+            :class="{ 'is-visible': promptThumbShow }"
+            aria-hidden="true"
+          >
+            <div
+              class="report-edit-page__side-thumb"
+              :style="{
+                height: `${promptThumbH}px`,
+                transform: `translateY(${promptThumbY}px)`,
+              }"
+              @mousedown.prevent="onSideThumbDown('prompt', $event)"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage, ElScrollbar } from 'element-plus'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,       
+  ref,
+  watch,
+} from 'vue'
+import { hiddenLayoutScroll } from '@/utils/gen-ai-scroll'
+import { useRoute, useRouter } from 'vue-router'
+import { ReportCollapsibleSection } from '../../common'
+import {
+  createReportEditRouteSyncActions,
+  lockDocumentScroll,
+  matchReportModelStep,
+  navigateToReportEdit,
+  parsePromptRightPanel,
+  parseReportEditStep,
+  syncWorkflowFromReportEditRoute,
+} from '../report-domain'
+import type { ReportTemplateCard } from '../report-template-data'
+import { resolveReportTemplateById } from '../report-template-data'
+import type { ReportModelStep } from '../useReportWorkflow'
+import { useReportWorkflow } from '../useReportWorkflow'
+import ReportGeneratingPanel from './ReportGeneratingPanel.vue'
+import ReportTemplateDetail from './ReportTemplateDetail.vue'
+import ReportTemplatePicker from './ReportTemplatePicker.vue'
+import ReportWorkflowSidebar from './ReportWorkflowSidebar.vue'
+
+const router = useRouter()
+const route = useRoute()
+const workflow = useReportWorkflow()
+const routeSyncActions = createReportEditRouteSyncActions(workflow)
+
+const {
+  loadDraftFromSession,
+  loadTemplateFromSession,
+  restoreReportEditSession,
+  setSelectedTemplate,
+  selectedTemplate,
+  sourceFiles,
+  settingsTypewriterPrinting,
+  chapterTypewriterActive,
+  modelStep,
+  stopChapterContentTypewriter,
+} = workflow
+
+// 子組件 mount 前先恢復 session，避免刷新後首屏空白
+restoreReportEditSession()
+
+/**
+ * 從路由關鍵字解析步驟（支援 path 段與 query `step=`）。
+ * modelStep 必須與此一致，v-if 才會切到正確頁面。
+ */
+const currentStep = computed<ReportModelStep>(() => {
+  const fromRoute = parseReportEditStep(route)
+  if (fromRoute) return fromRoute
+  const path = route.fullPath.toLowerCase()
+  if (path.includes('/generating') || path.includes('step=generating')) return 'generating'
+  if (
+    path.includes('/prompt') ||
+    path.includes('step=prompt') ||
+    path.includes('generate-settings')
+  ) {
+    return 'prompt'
+  }
+  if (path.includes('/detail') || path.includes('step=detail')) return 'detail'
+  return matchReportModelStep(path)
+})
+
+/** 頁面內容開關 + 重掛計數：每次流程點擊強制關→寫路由→開→重掛 */
+const pageContentOpen = ref(true)
+const remountKey = ref(0)
+
+/**
+ * 流程視圖開關（模組級，父級 remount 不丟）
+ * - flowStep：select | detail | generating | prompt
+ * - flowRightPanel：prompt（Prompt+章節歷史）| settings（生成報告設置+報告歷史）
+ */
+const flowStep = workflow.flowStep
+const flowRightPanel = workflow.flowRightPanel
+const flowShowGenerating = computed(() => flowStep.value === 'generating')
+const flowShowSelect = computed(() => flowStep.value === 'select')
+const flowShowDetail = computed(() => flowStep.value === 'detail' && !!selectedTemplate.value)
+const flowShowPromptWorkspace = computed(() => flowStep.value === 'prompt')
+const flowShowPromptPanel = computed(
+  () => flowShowPromptWorkspace.value && flowRightPanel.value === 'prompt'
+)
+const flowShowSettingsPanel = computed(
+  () => flowShowPromptWorkspace.value && flowRightPanel.value === 'settings'
+)
+
+/** 將流程目標寫入模組級開關 + workflow store（頁面與路由對齊的唯一寫入口） */
+function applyFlowView(step: ReportModelStep, rightPanel: 'prompt' | 'settings' = 'prompt') {
+  flowStep.value = step
+  flowRightPanel.value = step === 'prompt' ? rightPanel : 'prompt'
+  routeSyncActions.openReportEdit(step)
+  if (step === 'prompt' && rightPanel === 'settings') {
+    routeSyncActions.showPromptSettingsPanel()
+  } else if (step === 'prompt') {
+    routeSyncActions.showPromptEditorPanel()
+  }
+}
+
+/**
+ * 一鍵生成 / 進入編輯 / 返回章節編輯 / 生成報告：
+ * 關內容 → 鎖目標 → 寫路由 → 寫開關 → 僅重掛內層 surface（不銷毀本組件，避免點兩次）→ 解鎖再對齊。
+ */
+async function forceNavigateAndRefresh(
+  step: ReportModelStep,
+  rightPanel: 'prompt' | 'settings' | undefined = undefined,
+  templateId?: string
+) {
+  const panel: 'prompt' | 'settings' | undefined =
+    step === 'prompt' ? (rightPanel ?? 'prompt') : undefined
+  const tid = templateId ?? selectedTemplate.value?.id
+
+  pageContentOpen.value = false
+  await nextTick()
+
+  workflow.beginReportEditNavigation(step, panel)
+  try {
+    applyFlowView(step, panel ?? 'prompt')
+
+    const instanceId =
+      step === 'generating' && typeof route.query.instanceId === 'string'
+        ? route.query.instanceId
+        : undefined
+
+    await navigateToReportEdit(router, step, tid, true, panel, instanceId)
+    applyFlowView(step, panel ?? 'prompt')
+
+    // 只重掛內層內容樹；勿 remountReportEditPage（會銷毀本實例，finally 寫入失效，需點兩次）
+    remountKey.value += 1
+    pageContentOpen.value = true
+    await nextTick()
+  } finally {
+    workflow.endReportEditNavigation()
+    applyFlowView(step, panel ?? 'prompt')
+  }
+}
+
+/**
+ * 監聽路由：僅在非鎖定期把 URL 同步進 flow* + store，避免主動跳轉被中間態打回。
+ */
+watch(
+  () => [currentStep.value, parsePromptRightPanel(route)] as const,
+  ([step, rightPanel]) => {
+    if (workflow.isReportEditNavLocked()) return
+    applyFlowView(step, step === 'prompt' ? rightPanel : 'prompt')
+  },
+  { immediate: true }
+)
+
+/** 右側欄展示以本地 flow 開關為準 */
+const currentRightPanel = computed(() => flowRightPanel.value)
+/** 左 / 右欄 Divider 收起狀態（收起後不佔佈局） */
+const sidebarCollapsed = ref(false)
+const promptCollapsed = ref(false)
+/** ≤1024：左中右自上而下堆疊，強制展開並隱藏收起箭頭 */
+const STACKED_MAX_WIDTH = 1024
+const isStackedLayout = ref(
+  typeof window !== 'undefined' ? window.innerWidth <= STACKED_MAX_WIDTH : false
+)
+
+function syncStackedLayout() {
+  const stacked = window.innerWidth <= STACKED_MAX_WIDTH
+  isStackedLayout.value = stacked
+  if (stacked) {
+    // 窄屏一律展開三欄，避免收起態絕對定位造成重疊亂版
+    sidebarCollapsed.value = false
+    promptCollapsed.value = false
+  }
+}
+
+const pageRef = ref<HTMLElement | null>(null)
+const mainRef = ref<HTMLElement | null>(null)
+const sidebarSlotRef = ref<HTMLElement | null>(null)
+const promptSlotRef = ref<HTMLElement | null>(null)
+
+/**
+ * 事件流：
+ * TypewriterDocEditor @printing-change(printing)
+ * 章節「生成章節內容」→ chapterTypewriterActive
+ * 設置頁（不打字、全文）→ flowShowSettingsPanel
+ *   → mainColScrollbarAlways → main.is-typewriting（僅禁 overflow-anchor）
+ * 三欄滾動條：默認隱藏；移入 card 且內容溢出再顯示，可拖動
+ */
+const mainColScrollbarAlways = computed(
+  () =>
+    settingsTypewriterPrinting.value || chapterTypewriterActive.value || flowShowSettingsPanel.value
+)
+
+/** 側欄 / 右欄：自繪短膠囊（固定 50px），hover 且溢出顯示 */
+const SIDE_THUMB_H = 50
+const sidebarOverflow = ref(false)
+const promptOverflow = ref(false)
+const sidebarHovered = ref(false)
+const promptHovered = ref(false)
+const sidebarThumbDragging = ref(false)
+const promptThumbDragging = ref(false)
+const sidebarThumbH = ref(SIDE_THUMB_H)
+const promptThumbH = ref(SIDE_THUMB_H)
+const sidebarThumbY = ref(0)
+const promptThumbY = ref(0)
+const sidebarThumbShow = computed(
+  () => sidebarOverflow.value && (sidebarHovered.value || sidebarThumbDragging.value)
+)
+const promptThumbShow = computed(
+  () => promptOverflow.value && (promptHovered.value || promptThumbDragging.value)
+)
+let sideColOverflowRo: ResizeObserver | null = null
+const sideColScrollUnbinds: Array<() => void> = []
+let sideThumbDragCleanup: (() => void) | undefined
+
+function getSideWrap(slot: HTMLElement | null) {
+  return slot?.querySelector('.el-scrollbar__wrap') as HTMLElement | null
+}
+
+function updateSideCustomThumb(which: 'sidebar' | 'prompt') {
+  const slot = which === 'sidebar' ? sidebarSlotRef.value : promptSlotRef.value
+  const wrap = getSideWrap(slot)
+  const hovered = which === 'sidebar' ? sidebarHovered.value : promptHovered.value
+  const dragging = which === 'sidebar' ? sidebarThumbDragging.value : promptThumbDragging.value
+  const overflowFlag = which === 'sidebar' ? sidebarOverflow : promptOverflow
+  const thumbHRef = which === 'sidebar' ? sidebarThumbH : promptThumbH
+  const thumbYRef = which === 'sidebar' ? sidebarThumbY : promptThumbY
+
+  if (!slot || !wrap) {
+    overflowFlag.value = false
+    return
+  }
+
+  const trackH = Math.max(0, Math.round(wrap.clientHeight))
+  const { scrollTop, scrollHeight, clientHeight } = wrap
+  const needsScroll = scrollHeight > clientHeight + 1 && trackH > 0
+  overflowFlag.value = needsScroll
+
+  // 0914：與中欄一致；hover 移出只隱藏，保留 thumbY 讓淡出留在當前滾動位置
+  if (!needsScroll) {
+    thumbHRef.value = SIDE_THUMB_H
+    thumbYRef.value = 0
+    return
+  }
+  if (!(hovered || dragging)) {
+    return
+  }
+  // 0914
+
+  const thumbH = Math.min(SIDE_THUMB_H, trackH)
+  const maxScroll = scrollHeight - clientHeight
+  const maxOffset = Math.max(0, trackH - thumbH)
+  const y =
+    maxScroll > 0
+      ? Math.min(maxOffset, Math.max(0, Math.round((scrollTop / maxScroll) * maxOffset)))
+      : 0
+  thumbHRef.value = thumbH
+  thumbYRef.value = y
+}
+
+function onSidebarSlotEnter() {
+  sidebarHovered.value = true
+  updateSideCustomThumb('sidebar')
+}
+
+function onSidebarSlotLeave() {
+  if (sidebarThumbDragging.value) return
+  sidebarHovered.value = false
+  updateSideCustomThumb('sidebar')
+}
+
+function onPromptSlotEnter() {
+  promptHovered.value = true
+  updateSideCustomThumb('prompt')
+}
+
+function onPromptSlotLeave() {
+  if (promptThumbDragging.value) return
+  promptHovered.value = false
+  updateSideCustomThumb('prompt')
+}
+
+function onSideThumbDown(which: 'sidebar' | 'prompt', event: MouseEvent) {
+  const slot = which === 'sidebar' ? sidebarSlotRef.value : promptSlotRef.value
+  const wrap = getSideWrap(slot)
+  if (!wrap) return
+  event.preventDefault()
+  if (which === 'sidebar') sidebarThumbDragging.value = true
+  else promptThumbDragging.value = true
+  updateSideCustomThumb(which)
+
+  const startY = event.clientY
+  const startScrollTop = wrap.scrollTop
+  const trackH = wrap.clientHeight
+  const thumbH = which === 'sidebar' ? sidebarThumbH.value : promptThumbH.value
+  const maxScroll = wrap.scrollHeight - wrap.clientHeight
+  const maxOffset = Math.max(0, trackH - thumbH)
+
+  const onMove = (ev: MouseEvent) => {
+    if (maxOffset <= 0 || maxScroll <= 0) return
+    wrap.scrollTop = startScrollTop + ((ev.clientY - startY) / maxOffset) * maxScroll
+  }
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+    sideThumbDragCleanup = undefined
+    if (which === 'sidebar') {
+      sidebarThumbDragging.value = false
+      if (!sidebarHovered.value) updateSideCustomThumb('sidebar')
+    } else {
+      promptThumbDragging.value = false
+      if (!promptHovered.value) updateSideCustomThumb('prompt')
+    }
+  }
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+  sideThumbDragCleanup = onUp
+}
+
+function bindSideColOverflowWatch() {
+  sideColOverflowRo?.disconnect()
+  sideColOverflowRo = null
+  while (sideColScrollUnbinds.length) sideColScrollUnbinds.pop()?.()
+
+  updateSideCustomThumb('sidebar')
+  updateSideCustomThumb('prompt')
+
+  if (typeof ResizeObserver === 'undefined') return
+  sideColOverflowRo = new ResizeObserver(() => {
+    updateSideCustomThumb('sidebar')
+    updateSideCustomThumb('prompt')
+  })
+  const observeSlot = (which: 'sidebar' | 'prompt') => {
+    const slot = which === 'sidebar' ? sidebarSlotRef.value : promptSlotRef.value
+    if (!slot) return
+    const wrap = getSideWrap(slot)
+    const view = slot.querySelector('.el-scrollbar__view') as HTMLElement | null
+    sideColOverflowRo?.observe(slot)
+    if (wrap) {
+      sideColOverflowRo?.observe(wrap)
+      const onScroll = () => updateSideCustomThumb(which)
+      wrap.addEventListener('scroll', onScroll, { passive: true })
+      sideColScrollUnbinds.push(() => wrap.removeEventListener('scroll', onScroll))
+    }
+    if (view) sideColOverflowRo?.observe(view)
+  }
+  observeSlot('sidebar')
+  observeSlot('prompt')
+}
+
+function unbindSideColOverflowWatch() {
+  sideColOverflowRo?.disconnect()
+  sideColOverflowRo = null
+  while (sideColScrollUnbinds.length) sideColScrollUnbinds.pop()?.()
+  sideThumbDragCleanup?.()
+  sideThumbDragCleanup = undefined
+  sidebarOverflow.value = false
+  promptOverflow.value = false
+  sidebarHovered.value = false
+  promptHovered.value = false
+  sidebarThumbDragging.value = false
+  promptThumbDragging.value = false
+}
+
+let mainScrollWrapEl: HTMLElement | null = null
+
+function onMainScrollWrapScroll() {
+  updateMainCustomThumb()
+}
+
+function bindMainScrollbarAutoHide() {
+  unbindMainScrollbarAutoHide()
+  const wrap = mainRef.value?.querySelector(
+    '.report-edit-page__col-scroll .el-scrollbar__wrap'
+  ) as HTMLElement | null
+  if (!wrap) return
+  mainScrollWrapEl = wrap
+  wrap.addEventListener('scroll', onMainScrollWrapScroll, { passive: true })
+  mainThumbRo = new ResizeObserver(() => updateMainCustomThumb())
+  mainThumbRo.observe(wrap)
+  if (mainRef.value) mainThumbRo.observe(mainRef.value)
+  void nextTick(() => {
+    if (mainThumbTrackRef.value) mainThumbRo?.observe(mainThumbTrackRef.value)
+    const toolbar = mainRef.value?.querySelector(
+      '.report-chapter-workspace__toolbar, .report-edit-prompt-shell__toolbar'
+    ) as HTMLElement | null
+    if (toolbar) mainThumbRo?.observe(toolbar)
+    updateMainCustomThumb()
+  })
+}
+
+function unbindMainScrollbarAutoHide() {
+  mainThumbRo?.disconnect()
+  mainThumbRo = null
+  if (mainScrollWrapEl) {
+    mainScrollWrapEl.removeEventListener('scroll', onMainScrollWrapScroll)
+    mainScrollWrapEl = null
+  }
+  mainCustomThumbShow.value = false
+}
+
+/** 中欄自繪滑塊：固定 50px；僅 hover / 拖動且溢出時顯示；軌道避開 toolbar */
+const MAIN_THUMB_H = 50
+const mainThumbTrackRef = ref<HTMLElement | null>(null)
+const mainThumbH = ref(MAIN_THUMB_H)
+const mainThumbY = ref(0)
+const mainCustomThumbShow = ref(false)
+const mainColHovered = ref(false)
+const mainThumbDragging = ref(false)
+let mainThumbRo: ResizeObserver | null = null
+let mainThumbDragCleanup: (() => void) | undefined
+
+function onMainColEnter() {
+  mainColHovered.value = true
+  updateMainCustomThumb()
+}
+
+function onMainColLeave() {
+  if (mainThumbDragging.value) return
+  mainColHovered.value = false
+  updateMainCustomThumb()
+}
+
+function updateMainCustomThumb() {
+  const wrap = mainScrollWrapEl
+  const track = mainThumbTrackRef.value
+  const main = mainRef.value
+  if (!wrap || !track || !main) {
+    mainCustomThumbShow.value = false
+    return
+  }
+
+  // 軌道幾何對齊實際滾動視口（相對 main），避免超出 card
+  const mainRect = main.getBoundingClientRect()
+  const wrapRect = wrap.getBoundingClientRect()
+  let top = Math.max(0, Math.round(wrapRect.top - mainRect.top))
+  let height = Math.max(0, Math.round(wrapRect.height))
+
+  // 軌道從工具列下沿起，不蓋住 report-chapter-workspace__toolbar
+  const toolbar = main.querySelector(
+    '.report-chapter-workspace__toolbar, .report-edit-prompt-shell__toolbar'
+  ) as HTMLElement | null
+  if (toolbar) {
+    const toolbarH = Math.max(0, Math.round(toolbar.getBoundingClientRect().height))
+    top += toolbarH
+    height = Math.max(0, height - toolbarH)
+  }
+
+  track.style.top = `${top}px`
+  track.style.bottom = 'auto'
+  track.style.height = `${height}px`
+  if (flowStep.value === 'select') {
+    track.style.right = '2px'
+  } else {
+    track.style.removeProperty('right')
+  }
+
+  const trackH = height
+  const { scrollTop, scrollHeight, clientHeight } = wrap
+  const needsScroll = scrollHeight > clientHeight + 1 && trackH > 0
+  // 默認隱藏；移入 card 或拖動中且溢出才顯示
+  const allowShow = mainColHovered.value || mainThumbDragging.value
+
+  if (!needsScroll || !allowShow) {
+    mainCustomThumbShow.value = false
+    return
+  }
+
+  const thumbH = Math.min(MAIN_THUMB_H, trackH)
+  const maxScroll = scrollHeight - clientHeight
+  const maxOffset = Math.max(0, trackH - thumbH)
+  const y =
+    maxScroll > 0
+      ? Math.min(maxOffset, Math.max(0, Math.round((scrollTop / maxScroll) * maxOffset)))
+      : 0
+
+  mainThumbH.value = thumbH
+  mainThumbY.value = y
+  mainCustomThumbShow.value = true
+}
+
+function onMainCustomThumbDown(event: MouseEvent) {
+  const wrap = mainScrollWrapEl
+  if (!wrap) return
+  event.preventDefault()
+  mainThumbDragging.value = true
+  updateMainCustomThumb()
+  const startY = event.clientY
+  const startScrollTop = wrap.scrollTop
+  const trackH = mainThumbTrackRef.value?.clientHeight ?? 0
+  const thumbH = mainThumbH.value
+  const maxScroll = wrap.scrollHeight - wrap.clientHeight
+  const maxOffset = Math.max(0, trackH - thumbH)
+
+  const onMove = (ev: MouseEvent) => {
+    if (maxOffset <= 0 || maxScroll <= 0) return
+    wrap.scrollTop = startScrollTop + ((ev.clientY - startY) / maxOffset) * maxScroll
+  }
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+    mainThumbDragCleanup = undefined
+    mainThumbDragging.value = false
+    if (!mainColHovered.value) updateMainCustomThumb()
+  }
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+  mainThumbDragCleanup = onUp
+}
+
+watch(mainColScrollbarAlways, () => {
+  updateMainCustomThumb()
+})
+
+/** 首屏工具列章節標題（與實頁下拉一致，優先模板首章） */
+const promptShellChapterLabel = computed(() => {
+  const first = selectedTemplate.value?.chapters?.[0]
+  if (typeof first === 'string' && first.trim()) return first.trim()
+  return '1. 摘要與本年總'
+})
+
+const ReportChapterWorkspace = defineAsyncComponent(() => import('./ReportChapterWorkspace.vue'))
+const ReportPromptPanel = defineAsyncComponent(() => import('./ReportPromptPanel.vue'))
+const ReportGenerateSettingsPanel = defineAsyncComponent(
+  () => import('./ReportGenerateSettingsPanel.vue')
+)
+
+/** 首屏先出卡片骨架，雙 rAF 後再掛載重型 async 面板 */
+const promptHeavyReady = ref(false)
+let promptMountToken = 0
+
+function schedulePromptHeavyMount() {
+  // 已掛載過則勿先置 false，避免路由重複同步時整欄閃白像「一直刷新」
+  if (promptHeavyReady.value) return
+  const token = ++promptMountToken
+  void nextTick(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (token !== promptMountToken) return
+        promptHeavyReady.value = true
+      })
+    })
+  })
+}
+
+watch(
+  flowStep,
+  (step) => {
+    if (step === 'prompt') {
+      schedulePromptHeavyMount()
+      return
+    }
+    promptMountToken += 1
+    promptHeavyReady.value = false
+  },
+  { immediate: true }
+)
+
+watch(
+  [flowStep, currentRightPanel, promptHeavyReady, sidebarCollapsed, promptCollapsed],
+  async () => {
+    await nextTick()
+    bindMainScrollbarAutoHide()
+    bindSideColOverflowWatch()
+  },
+  { immediate: true }
+)
+
+function syncFromRoute(target = route) {
+  syncWorkflowFromReportEditRoute(target, routeSyncActions)
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (workflow.isReportEditNavLocked()) return
+    syncFromRoute()
+    const step = currentStep.value
+    const panel = parsePromptRightPanel(route)
+    applyFlowView(step, step === 'prompt' ? panel : 'prompt')
+  },
+  { immediate: true, flush: 'sync' }
+)
+
+function handleSelectTemplate(template: ReportTemplateCard) {
+  setSelectedTemplate(template)
+  void forceNavigateAndRefresh('detail', undefined, template.id)
+}
+
+function goBackToSelect() {
+  void forceNavigateAndRefresh('select')
+}
+
+/** 一鍵生成 → generating */
+function enterChapterEdit() {
+  // if (!sourceFiles.value.length) {
+  //   ElMessage.warning('請至少添加一個資訊源檔案')
+  //   return
+  // }
+  void forceNavigateAndRefresh('generating')
+}
+
+/** 返回章節編輯 → prompt + Prompt/章節歷史 */
+function backToChapterEdit() {
+  void forceNavigateAndRefresh('prompt', 'prompt')
+}
+
+/** 生成報告 → prompt + 生成報告設置/報告歷史 */
+function handleGenerateReportNavigate() {
+  stopChapterContentTypewriter()
+  void forceNavigateAndRefresh('prompt', 'settings')
+}
+
+function handleSettingsGenerated() {
+  if (!workflow.isReportEditNavLocked()) syncFromRoute()
+}
+
+/** 進入編輯 → prompt + Prompt/章節歷史 */
+function handleEnterEditing() {
+  stopChapterContentTypewriter()
+  loadTemplateFromSession()
+  if (!selectedTemplate.value) {
+    ElMessage.warning('缺少報告模板，無法進入編輯')
+    return
+  }
+  void forceNavigateAndRefresh('prompt', 'prompt', selectedTemplate.value?.id)
+}
+
+function ensurePromptTemplate() {
+  if (workflow.isReportEditNavLocked()) return
+  if (flowStep.value !== 'prompt' && modelStep.value !== 'prompt') return
+
+  if (!selectedTemplate.value) {
+    loadTemplateFromSession()
+  }
+  if (!selectedTemplate.value) {
+    const tid = typeof route.query.templateId === 'string' ? route.query.templateId : ''
+    if (tid) {
+      const found = resolveReportTemplateById(tid)
+      if (found) setSelectedTemplate(found)
+    }
+  }
+  // 無模板時不回落本地首張卡片
+}
+
+/**
+ * 將中間 main card 的 left/top/width/height 寫入 CSS 變量，
+ * 供本頁 append-to-body 的 dialog / popover 對齊且不超出卡片。
+ */
+function syncMainDialogAnchor() {
+  const main = mainRef.value
+  const root = document.documentElement
+  if (!main || flowStep.value === 'generating') {
+    clearMainDialogAnchor()
+    return
+  }
+
+  const rect = main.getBoundingClientRect()
+  root.classList.add('report-edit-dialog-anchored')
+  root.style.setProperty('--report-edit-main-left', `${Math.round(rect.left)}px`)
+  root.style.setProperty('--report-edit-main-top', `${Math.round(rect.top)}px`)
+  root.style.setProperty('--report-edit-main-width', `${Math.round(rect.width)}px`)
+  root.style.setProperty('--report-edit-main-height', `${Math.round(rect.height)}px`)
+  root.style.setProperty('--report-edit-main-right', `${Math.round(rect.right)}px`)
+  root.style.setProperty('--report-edit-main-bottom', `${Math.round(rect.bottom)}px`)
+}
+
+function clearMainDialogAnchor() {
+  const root = document.documentElement
+  root.classList.remove('report-edit-dialog-anchored')
+  root.style.removeProperty('--report-edit-main-left')
+  root.style.removeProperty('--report-edit-main-top')
+  root.style.removeProperty('--report-edit-main-width')
+  root.style.removeProperty('--report-edit-main-height')
+  root.style.removeProperty('--report-edit-main-right')
+  root.style.removeProperty('--report-edit-main-bottom')
+}
+
+const mainResizeObserver =
+  typeof ResizeObserver !== 'undefined'
+    ? new ResizeObserver(() => {
+        syncMainDialogAnchor()
+      })
+    : null
+
+let cleanupDocumentScroll: (() => void) | undefined
+
+let cleanupHiddenLayoutScroll: (() => void) | undefined
+watch(
+  flowShowPromptWorkspace,
+  (on) => {
+    if (on) {
+      if (!cleanupHiddenLayoutScroll) cleanupHiddenLayoutScroll = hiddenLayoutScroll()
+      return
+    }
+    cleanupHiddenLayoutScroll?.()
+    cleanupHiddenLayoutScroll = undefined
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  loadDraftFromSession()
+  loadTemplateFromSession()
+  syncFromRoute()
+  ensurePromptTemplate()
+  /* 獨立全屏頁：鎖 document 滾動，僅三欄內部滾動 */
+  cleanupDocumentScroll = lockDocumentScroll()
+
+  syncStackedLayout()
+  window.addEventListener('resize', syncStackedLayout)
+
+  if (flowStep.value === 'detail' && !selectedTemplate.value) {
+    void forceNavigateAndRefresh('select')
+  }
+
+  void nextTick(() => {
+    syncMainDialogAnchor()
+    if (mainRef.value) mainResizeObserver?.observe(mainRef.value)
+  })
+
+  window.addEventListener('resize', syncMainDialogAnchor)
+  pageRef.value?.addEventListener('scroll', syncMainDialogAnchor, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', syncMainDialogAnchor)
+  window.removeEventListener('resize', syncStackedLayout)
+  pageRef.value?.removeEventListener('scroll', syncMainDialogAnchor)
+  mainResizeObserver?.disconnect()
+  clearMainDialogAnchor()
+  cleanupDocumentScroll?.()
+  cleanupDocumentScroll = undefined
+  cleanupHiddenLayoutScroll?.()
+  cleanupHiddenLayoutScroll = undefined
+  mainThumbDragCleanup?.()
+  unbindMainScrollbarAutoHide()
+  unbindSideColOverflowWatch()
+})
+
+watch(flowStep, () => {
+  if (flowStep.value !== 'prompt') {
+    promptCollapsed.value = false
+  }
+  ensurePromptTemplate()
+  void nextTick(() => syncMainDialogAnchor())
+})
+
+watch(mainRef, (el, prev) => {
+  if (prev && mainResizeObserver) mainResizeObserver.unobserve(prev)
+  if (el && mainResizeObserver) mainResizeObserver.observe(el)
+  syncMainDialogAnchor()
+})
+</script>
+
+<style scoped>
+.report-edit-page {
+  --report-edit-col-scroll-thumb: #999;
+  /* select / detail：左 2fr + 間距 20px + 右 8fr（右欄對齊 prompt 中+右總寬） */
+  --report-edit-split-gap: 20px;
+  --report-edit-main-border-width: 0px;
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
+  grid-template-rows: minmax(0, 1fr);
+  row-gap: 15px;
+  column-gap: var(--report-edit-split-gap);
+  box-sizing: border-box;
+  align-items: stretch;
+  /* 獨立全屏：視口高度固定 100dvh；padding 含在內，三欄同高，超出僅欄內滾動 */
+  width: 100%;
+  height: 100dvh;
+  max-height: 100dvh;
+  min-height: 0;
+  padding: 27px 15px 15px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  transition: grid-template-columns 0.25s ease;
+}
+
+/* select / detail：左欄與主內容間距固定 20px */
+.report-edit-page:not(.is-prompt):not(.is-generating) {
+  --report-edit-split-gap: 20px;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
+  column-gap: var(--report-edit-split-gap);
+}
+
+/* 內容層不佔 grid 欄，子節點仍作為 .report-edit-page 的 grid item */
+.report-edit-page__surface {
+  display: contents;
+}
+
+.report-edit-page.is-content-closed {
+  /* 關閉內容時保留殼高度，避免閃縮 */
+  background: #fff;
+}
+
+/* 側欄從右向左收起：不佔 grid 欄寬，主內容擴展 */
+.report-edit-page.is-sidebar-collapsed:not(.is-prompt) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.report-edit-page.is-sidebar-collapsed:not(.is-prompt) .report-edit-page__sidebar-slot {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.report-edit-page.is-sidebar-collapsed:not(.is-prompt) .report-edit-page__main {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.report-edit-page.is-generating {
+  display: block;
+  grid-template-columns: none;
+  gap: 0;
+  padding: 0;
+  height: 100dvh;
+  max-height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.report-edit-page.is-generating .report-edit-page__generating {
+  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.report-edit-page.is-prompt {
+  --report-edit-border: #d8dce3;
+  --report-edit-main-border-width: 1px;
+  --report-edit-split-gap: 20px;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 2fr);
+  grid-template-rows: minmax(0, 1fr);
+  align-items: stretch;
+  row-gap: 15px;
+  column-gap: var(--report-edit-split-gap);
+  /* 左右 padding ≥12px，露出欄外側 right:-12px 短膠囊 */
+  padding: 15px;
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed) {
+  grid-template-columns: minmax(0, 6fr) minmax(0, 2fr);
+}
+
+.report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed) {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed)
+  > .report-edit-page__sidebar-slot {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed)
+  > .report-edit-page__main {
+  grid-column: 1;
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed)
+  > .report-edit-page__prompt-slot {
+  grid-column: 2;
+}
+
+.report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed)
+  > .report-edit-page__sidebar-slot {
+  grid-column: 1;
+}
+
+.report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed)
+  > .report-edit-page__main {
+  grid-column: 2;
+}
+
+.report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed)
+  > .report-edit-page__prompt-slot {
+  grid-column: 2;
+  grid-row: 1;
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed
+  > .report-edit-page__sidebar-slot,
+.report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed
+  > .report-edit-page__prompt-slot {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed > .report-edit-page__main {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.report-edit-page.is-prompt .report-edit-page__main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  padding: 16px 20px;
+  border: 1px solid var(--report-edit-border);
+  border-radius: 8px;
+  background: #fff;
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.05),
+    0 3px 10px rgba(15, 23, 42, 0.07);
+  /* visible：兩側收起按鈕落在 card 外側間隙，不可裁切 */
+  overflow: visible;
+  transition:
+    box-shadow var(--el-transition-duration, 0.3s),
+    border-color 0.22s ease;
+}
+
+.report-edit-page.is-prompt .report-edit-page__main:hover {
+  border-color: #c5cad3;
+  box-shadow:
+    inset 0 0 0 1px rgba(15, 23, 42, 0.05),
+    0 2px 6px rgba(15, 23, 42, 0.07),
+    0 10px 22px rgba(15, 23, 42, 0.11);
+}
+
+.report-edit-page.is-prompt .report-edit-page__main > .report-edit-page__col-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 允許滾動條伸入 card 右側 padding（距內邊 4px） */
+  overflow: visible;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar) {
+  overflow: visible;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap) {
+  border-radius: 4px;
+  overflow-x: hidden !important;
+  overflow-y: scroll !important;
+  scrollbar-gutter: stable !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar),
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb),
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-track) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  background: transparent !important;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__view) {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  .report-edit-page__col-scroll
+  :deep(.report-chapter-workspace) {
+  flex: 1 0 auto;
+  min-height: 0;
+  height: auto;
+}
+
+.report-edit-page.is-prompt .report-edit-page__prompt {
+  min-height: 0;
+  height: auto;
+  overflow: visible;
+}
+
+.report-edit-page.is-prompt .report-edit-page__prompt:has(.report-prompt-panel.is-compact),
+.report-edit-page.is-prompt
+  .report-edit-page__prompt:has(.chatbot-report-panel--settings.is-compact) {
+  min-height: 0;
+  height: auto;
+  align-self: flex-start;
+}
+
+.report-edit-page.is-prompt .report-edit-page__sidebar-slot,
+.report-edit-page.is-prompt .report-edit-page__prompt-slot {
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+}
+
+.report-edit-page__sidebar-slot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  /* 允許滾動條落在欄外側 8px（欄間隙），不裁切 */
+  overflow: visible;
+}
+
+.report-edit-page__prompt-slot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: visible;
+}
+
+.report-edit-page__sidebar-slot.is-collapsed {
+  position: absolute;
+  width: 0;
+  height: 0;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.report-edit-page__prompt-slot.is-collapsed {
+  width: 0;
+  min-width: 0;
+  height: 0;
+  max-height: none;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.report-edit-page__generating {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.report-edit-page__sidebar {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+.report-edit-page__main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-edit-page__main--anchored {
+  position: relative;
+}
+
+.report-edit-page__main > .report-edit-page__col-scroll :deep(.el-scrollbar__bar.is-vertical),
+.report-edit-page.is-prompt
+  .report-edit-page__main.is-typewriting
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical),
+.report-edit-page.is-prompt
+  .report-edit-page__main.is-main-scrollbar-visible
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical),
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+.report-edit-page__main-thumb-track {
+  position: absolute !important;
+  right: 4px !important;
+  width: 8px !important;
+  height: 0;
+  z-index: 20 !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+  box-sizing: border-box !important;
+  opacity: 0 !important;
+  transition: opacity 0.18s ease;
+}
+
+.report-edit-page__main-thumb-track.is-visible {
+  opacity: 1 !important;
+}
+
+/*
+ * 與 detail 同思路：內容右側留 gutter，滑塊貼主欄右緣。
+ * 勿用 right:-N（會被 .report-edit-page / PageCard 的 overflow:hidden 裁掉）。
+ */
+.report-edit-page.is-select {
+  padding-right: 5px;
+}
+
+.report-edit-page.is-select .report-edit-page__main {
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-edit-page.is-select .report-edit-page__main > .report-edit-page__col-scroll {
+  overflow: hidden;
+}
+
+.report-edit-page.is-select .report-edit-page__main-thumb-track {
+  right: 2px !important;
+}
+
+.report-edit-page.is-detail .report-edit-page__main-thumb-track {
+  right: 6px !important;
+}
+
+.report-edit-page__main-thumb {
+  width: 8px !important;
+  min-height: 50px !important;
+  max-height: 100% !important;
+  border-radius: 9999px !important;
+  background-color: #999 !important;
+  pointer-events: none;
+  cursor: pointer;
+  will-change: transform;
+  box-sizing: border-box !important;
+}
+
+.report-edit-page__main-thumb-track.is-visible .report-edit-page__main-thumb {
+  pointer-events: auto !important;
+}
+
+.report-edit-page__main-thumb:hover {
+  background-color: #777 !important;
+}
+
+/* 與章節下拉同款：el-scrollbar；中欄豎滑塊已自繪，側欄/右欄亦自繪 */
+.report-edit-page__col-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  overflow: visible;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar) {
+  height: 100%;
+  max-height: 100%;
+  overflow: visible;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  box-sizing: border-box !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__view) {
+  box-sizing: border-box;
+}
+
+/* 側欄 / 右欄：恢復原內容寬（不加陰影預留 padding）；靠 overflow 露出 iOS card 陰影 */
+.report-edit-page__sidebar-slot > .report-edit-page__col-scroll,
+.report-edit-page__prompt-slot > .report-edit-page__col-scroll {
+  overflow: visible;
+}
+
+.report-edit-page__sidebar-slot > .report-edit-page__col-scroll :deep(.el-scrollbar),
+.report-edit-page__prompt-slot > .report-edit-page__col-scroll :deep(.el-scrollbar) {
+  overflow: visible;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none !important;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.report-edit-page__col-scroll :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: none !important;
+}
+
+.report-edit-page__side-thumb-track {
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 8px !important;
+  z-index: 20 !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+  box-sizing: border-box !important;
+  opacity: 0 !important;
+  transition: opacity 0.18s ease;
+}
+
+.report-edit-page__sidebar-slot > .report-edit-page__side-thumb-track {
+  right: calc(-1 * (var(--report-edit-split-gap, 20px) + 8px) / 2) !important;
+  left: auto !important;
+}
+
+.report-edit-page__prompt-slot > .report-edit-page__side-thumb-track {
+  right: -12px !important;
+  left: auto !important;
+}
+
+.report-edit-page__side-thumb-track.is-visible {
+  opacity: 1 !important;
+}
+
+.report-edit-page__side-thumb {
+  width: 8px !important;
+  min-height: 50px !important;
+  max-height: 100% !important;
+  border-radius: 9999px !important;
+  background-color: #999 !important;
+  pointer-events: none;
+  cursor: pointer;
+  will-change: transform;
+  box-sizing: border-box !important;
+}
+
+.report-edit-page__side-thumb-track.is-visible .report-edit-page__side-thumb {
+  pointer-events: auto !important;
+}
+
+.report-edit-page__side-thumb:hover {
+  background-color: #777 !important;
+}
+
+/*
+ * detail：右側主欄
+ * - 內邊距避免圓角 overflow 裁切「返回」等按鈕邊框
+ * - 膠囊滑塊 8px 寬、最短 50px（EP min-size 按比例，滾到底滑塊也到底）
+ * - 頁面右內邊距 5px，滾動條貼齊主欄右緣 → 距螢幕最右側 5px（僅 detail）
+ */
+.report-edit-page.is-detail {
+  padding-right: 5px;
+}
+
+.report-edit-page.is-detail .report-edit-page__main {
+  padding: 0px 20px 16px 0;
+  box-sizing: border-box;
+}
+
+.report-edit-page.is-detail .report-edit-page__main > .report-edit-page__col-scroll {
+  overflow: visible;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar) {
+  overflow: visible;
+  height: 100%;
+  max-height: 100%;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar),
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb),
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-track) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  background: transparent !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb:hover) {
+  background-color: transparent !important;
+}
+
+/* 豎條在欄外側（right:-12px），勿再加內 padding */
+.report-edit-page.is-detail .report-edit-page__sidebar-slot {
+  padding-right: 0;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.report-edit-page.is-detail .report-edit-page__sidebar-slot > .report-edit-page__col-scroll {
+  overflow: visible;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar) {
+  overflow: visible;
+  height: 100%;
+  max-height: 100%;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  max-height: 100% !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar),
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb),
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap::-webkit-scrollbar-track) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  background: transparent !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.report-edit-page.is-detail
+  .report-edit-page__sidebar-slot
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
+  display: none !important;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+/* 列印中禁用 overflow-anchor，避免瀏覽器錨點把視口拽到中間造成跳動 */
+.report-edit-page.is-prompt
+  .report-edit-page__main.is-typewriting
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap),
+.report-edit-page.is-prompt
+  .report-edit-page__main
+  > .report-edit-page__col-scroll
+  :deep(.el-scrollbar__wrap.is-typewriter-follow) {
+  overflow-anchor: none;
+}
+
+.report-edit-page.is-prompt
+  .report-edit-page__main.is-typewriting
+  .report-edit-page__main-thumb-track,
+.report-edit-page.is-prompt
+  .report-edit-page__main.is-main-scrollbar-visible
+  .report-edit-page__main-thumb-track {
+  /* 實際顯示仍以 script is-visible 為準；此處僅提高優先級佔位 */
+  z-index: 30 !important;
+}
+
+/* 欄間折疊開關：熱區在欄間隙內、不壓中欄 border；默認僅圖標，hover 淺紅底（無品牌色邊框） */
+.report-edit-page__col-divider {
+  z-index: 30;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 14px;
+  height: 90px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  line-height: 0;
+  pointer-events: auto;
+  flex-shrink: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  color: #606266;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.report-edit-page__col-divider :deep(.el-icon) {
+  color: inherit;
+}
+
+.report-edit-page__col-divider:hover {
+  background: #fdf0f2;
+  color: #c53355;
+}
+
+/* 收起態：常顯完整 button（淺紅底 + 系統紅圖標），展開／收起同一位置 */
+.report-edit-page.is-sidebar-collapsed .report-edit-page__col-divider--left,
+.report-edit-page.is-prompt-collapsed .report-edit-page__col-divider--right {
+  background: #fdf0f2;
+  color: #c53355;
+}
+
+.report-edit-page__col-divider:focus-visible {
+  outline: 2px solid rgba(197, 51, 85, 0.35);
+  outline-offset: 1px;
+}
+
+/* 相對中欄：落在欄間隙正中（計入中欄 border，左右等距） */
+.report-edit-page__col-divider--left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  margin: 0;
+  margin-left: calc(
+    -1 * (var(--report-edit-main-border-width, 0px) + var(--report-edit-split-gap, 20px) / 2)
+  );
+  transform: translate(-50%, -50%);
+}
+
+.report-edit-page__col-divider--right {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  right: auto;
+  bottom: auto;
+  margin: 0;
+  margin-left: calc(
+    var(--report-edit-main-border-width, 0px) + var(--report-edit-split-gap, 20px) / 2
+  );
+  transform: translate(-50%, -50%);
+}
+
+.report-edit-page__toolbar {
+  margin-bottom: 12px;
+}
+
+.report-edit-page__prompt {
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* prompt 首屏靜態殼：先佔位，避免 async chunk / 重型面板掛載前中右欄空白 */
+.report-edit-prompt-shell--main {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+  height: auto;
+}
+
+.report-edit-prompt-shell__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.report-edit-prompt-shell__select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 220px;
+  min-width: 180px;
+  min-height: 39px;
+  padding: 0 12px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  background: #fff;
+  cursor: default;
+}
+
+.report-edit-prompt-shell__select-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  line-height: 1.4;
+}
+
+.report-edit-prompt-shell__select-caret {
+  flex-shrink: 0;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid #dcdfe6;
+}
+
+.report-edit-prompt-shell__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.report-edit-prompt-shell__action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 32px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 100px;
+  padding: 0 8px;
+  border: 1px solid #c53355;
+  border-radius: 4px;
+  background: #c53355;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+  opacity: 1;
+}
+
+.report-edit-prompt-shell__action-btn:disabled {
+  opacity: 1;
+  cursor: default;
+}
+
+.report-edit-prompt-shell__editor {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 320px;
+  padding-top: 8px;
+}
+
+.report-edit-prompt-shell__title {
+  width: min(420px, 70%);
+  height: 28px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f2f3f5 25%, #e9ebef 37%, #f2f3f5 63%);
+  background-size: 400% 100%;
+  animation: report-edit-shell-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-edit-prompt-shell__line {
+  width: 100%;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f5f6f8 25%, #eceef2 37%, #f5f6f8 63%);
+  background-size: 400% 100%;
+  animation: report-edit-shell-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-edit-prompt-shell__line--short {
+  width: 55%;
+}
+
+.report-edit-prompt-shell__line--mid {
+  width: 78%;
+}
+
+.report-edit-prompt-shell--right {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.report-edit-prompt-shell__pulse {
+  min-height: 96px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #f5f6f8 25%, #eceef2 37%, #f5f6f8 63%);
+  background-size: 400% 100%;
+  animation: report-edit-shell-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-edit-prompt-shell__pulse--tall {
+  min-height: 180px;
+}
+
+@keyframes report-edit-shell-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
+
+.report-edit-page.is-prompt .report-edit-page__main > .report-edit-prompt-shell--main {
+  flex: 1 0 auto;
+  min-height: 0;
+  height: auto;
+}
+
+@media (max-width: 1024px) {
+  /*
+   * ≤1024：左 → 中 → 右 自上而下 flex 堆疊（比 grid 更不易被寬屏定位規則打斷）
+   */
+  .report-edit-page,
+  .report-edit-page.is-prompt,
+  .report-edit-page.is-stacked,
+  .report-edit-page.is-prompt.is-stacked,
+  .report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed),
+  .report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed),
+  .report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed,
+  .report-edit-page.is-sidebar-collapsed:not(.is-prompt) {
+    display: flex !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    justify-content: flex-start !important;
+    gap: 12px !important;
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+    min-height: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable;
+  }
+
+  .report-edit-page.is-prompt,
+  .report-edit-page.is-prompt.is-stacked,
+  .report-edit-page.is-prompt.is-sidebar-collapsed:not(.is-prompt-collapsed),
+  .report-edit-page.is-prompt.is-prompt-collapsed:not(.is-sidebar-collapsed),
+  .report-edit-page.is-prompt.is-sidebar-collapsed.is-prompt-collapsed {
+    height: 100dvh !important;
+    max-height: 100dvh !important;
+  }
+
+  /* 左 → 中 → 右 */
+  .report-edit-page > .report-edit-page__sidebar-slot,
+  .report-edit-page.is-prompt > .report-edit-page__sidebar-slot {
+    order: 1 !important;
+    flex: 0 0 auto !important;
+  }
+
+  .report-edit-page > .report-edit-page__main,
+  .report-edit-page.is-prompt > .report-edit-page__main {
+    order: 2 !important;
+    flex: 0 0 auto !important;
+  }
+
+  .report-edit-page.is-prompt > .report-edit-page__prompt-slot {
+    order: 3 !important;
+    flex: 0 0 auto !important;
+  }
+
+  .report-edit-page__sidebar-slot,
+  .report-edit-page__main,
+  .report-edit-page__prompt-slot,
+  .report-edit-page.is-prompt .report-edit-page__sidebar-slot,
+  .report-edit-page.is-prompt .report-edit-page__main,
+  .report-edit-page.is-prompt .report-edit-page__prompt-slot,
+  .report-edit-page__sidebar-slot.is-collapsed,
+  .report-edit-page__prompt-slot.is-collapsed {
+    position: relative !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    grid-column: auto !important;
+    grid-row: auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    pointer-events: auto !important;
+  }
+
+  .report-edit-page.is-prompt .report-edit-page__main {
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 280px;
+    overflow: visible !important;
+  }
+
+  /* 強制顯示欄內容（覆蓋收起態 v-show: display:none） */
+  .report-edit-page__sidebar-slot .report-edit-page__col-scroll,
+  .report-edit-page__prompt-slot .report-edit-page__col-scroll {
+    display: block !important;
+  }
+
+  /* 隱藏左右收起箭頭 */
+  .report-edit-page__col-divider,
+  .report-edit-page__col-divider--left,
+  .report-edit-page__col-divider--right {
+    display: none !important;
+  }
+
+  /* 欄內隨內容撐開，整頁滾動 */
+  .report-edit-page__col-scroll {
+    height: auto !important;
+    max-height: none !important;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .report-edit-page__col-scroll :deep(.el-scrollbar) {
+    height: auto !important;
+    max-height: none !important;
+    display: block !important;
+  }
+
+  .report-edit-page__col-scroll :deep(.el-scrollbar__wrap) {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .report-edit-page__col-scroll :deep(.el-scrollbar__view) {
+    height: auto !important;
+    display: block !important;
+  }
+
+  .report-edit-page__col-scroll :deep(.el-scrollbar__bar.is-vertical) {
+    display: none !important;
+  }
+
+  .report-edit-page__sidebar,
+  .report-edit-page__prompt {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    min-height: 0;
+  }
+
+  .report-edit-page,
+  .report-edit-page.is-prompt {
+    scrollbar-width: thin;
+    scrollbar-color: #999 transparent;
+  }
+
+  .report-edit-page::-webkit-scrollbar,
+  .report-edit-page.is-prompt::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .report-edit-page::-webkit-scrollbar-thumb,
+  .report-edit-page.is-prompt::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #999;
+  }
+
+  .report-edit-page::-webkit-scrollbar-track,
+  .report-edit-page.is-prompt::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+</style>
+
+<!--
+  本頁 dialog / popover（append-to-body）對齊中間 report-edit-page__main--anchored：
+  寬度 / 頂部對齊卡片；高度不超出卡片（max = 卡片高度）
+-->
+<style>
+html.report-edit-dialog-anchored .report-workflow-dialog.el-dialog,
+html.report-edit-dialog-anchored .report-chapter-dialog.report-workflow-dialog.el-dialog,
+html.report-edit-dialog-anchored .ai-prompt-generate-dialog.el-dialog,
+html.report-edit-dialog-anchored .report-chapter-source-picker.el-dialog,
+html.report-edit-dialog-anchored .template-center-chapter-dialog.el-dialog {
+  width: var(--report-edit-main-width) !important;
+  min-width: var(--report-edit-main-width) !important;
+  max-width: var(--report-edit-main-width) !important;
+  min-height: min(60vh, var(--report-edit-main-height)) !important;
+  height: auto !important;
+  max-height: var(--report-edit-main-height) !important;
+  margin-top: var(--report-edit-main-top) !important;
+  margin-left: var(--report-edit-main-left) !important;
+  margin-right: auto !important;
+  margin-bottom: 0 !important;
+  box-sizing: border-box;
+  overflow: hidden !important;
+}
+
+/* 申請創建模板：必須給確定高度，否則 body 內 el-scrollbar 無法計算滾動 */
+html.report-edit-dialog-anchored .apply-template-dialog.el-dialog {
+  width: var(--report-edit-main-width) !important;
+  min-width: var(--report-edit-main-width) !important;
+  max-width: var(--report-edit-main-width) !important;
+  height: var(--report-edit-main-height) !important;
+  min-height: var(--report-edit-main-height) !important;
+  max-height: var(--report-edit-main-height) !important;
+  margin-top: var(--report-edit-main-top) !important;
+  margin-left: var(--report-edit-main-left) !important;
+  margin-right: auto !important;
+  margin-bottom: 0 !important;
+  box-sizing: border-box;
+  overflow: hidden !important;
+}
+
+/* // new prompt sections — 章節下拉錨定 main 卡片（>1024 寬度見 ReportChapterWorkspace 底部同標記） */
+html.report-edit-dialog-anchored .report-chapter-workspace__chapter-select-popper.el-popper {
+  max-width: min(450px, calc(var(--report-edit-main-width) - 16px)) !important;
+  width: min(450px, calc(var(--report-edit-main-width) - 16px)) !important;
+  min-width: 0 !important;
+  max-height: calc(var(--report-edit-main-height) - 16px) !important;
+}
+
+html.report-edit-dialog-anchored
+  .report-chapter-workspace__chapter-select-popper
+  .el-select-dropdown {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+}
+/* // new prompt sections end */
+
+html.report-edit-dialog-anchored .report-tiptap-table-picker-popper.el-popper,
+html.report-edit-dialog-anchored .report-tiptap-link-popper.el-popper,
+html.report-edit-dialog-anchored .report-tiptap-image-popper.el-popper,
+html.report-edit-dialog-anchored .report-tiptap-style-popper.el-popper {
+  max-width: calc(var(--report-edit-main-width) - 16px) !important;
+  max-height: calc(var(--report-edit-main-height) - 16px) !important;
+}
+</style>