pptList/src/views/Editor/EditorHeader/AiCoursewareDialog.vue

<template>
  <Modal
    :visible="visible"
    :width="1120"
    :content-style="{ maxWidth: 'calc(100vw - 32px)', boxSizing: 'border-box' }"
    :close-button="!working"
    :close-on-click-mask="!working"
    :close-on-esc="!working"
    @update:visible="value => emit('update:visible', value)"
  >
    <div :class="['ai-dialog', workflowStep === 1 ? 'setup-mode' : 'review-mode']">
      <div class="header">
        <div>
          <div class="title">{{ pageTitle }}</div>
          <div class="sub">{{ pageMeta }}</div>
        </div>
      </div>

      <div class="workflow-steps">
        <div
          v-for="step in workflowSteps"
          :key="step.value"
          :class="['workflow-step', { active: workflowStep === step.value, done: workflowStep > step.value }]"
        >
          <span class="step-no">{{ workflowStep > step.value ? "✓" : step.value }}</span>
          <span>{{ step.label }}</span>
        </div>
      </div>

      <div v-if="outlineLoading" class="loading-strip">
        <span class="loading-dot"></span>
        <span>正在生成大纲，请稍候</span>
      </div>

      <div v-else-if="taskInfo" class="progress-strip">
        <div class="current-step">{{ currentProgressLabel }}</div>
        <div class="progress-line">
          <div class="progress-bar" :style="{ width: `${progressValue}%` }"></div>
        </div>
        <div class="progress-value">{{ progressValue }}%</div>
      </div>

      <div v-if="workflowStep === 1" class="setup-stage simplified-setup">
        <div class="stage-intro">
          <div>
            <div class="stage-title">设置这节课的基本需求</div>
            <div class="stage-desc">只需确认课时和篇幅，样式、素材与质量检查由系统完成。</div>
          </div>
          <span v-if="outline" class="saved-state">已有大纲，可继续确认</span>
        </div>

        <div class="setup-primary-grid">
          <label>
            <span>课时长度</span>
            <select v-model.number="preferences.lessonMinutes" :disabled="working">
              <option :value="20">20分钟</option>
              <option :value="30">30分钟</option>
              <option :value="40">40分钟</option>
              <option :value="45">45分钟</option>
            </select>
          </label>
          <label>
            <span>课件页数</span>
            <select v-model="pageRange" :disabled="working">
              <option value="9-12">精简版（9～12页）</option>
              <option value="12-15">完整课堂（12～15页）</option>
              <option value="9-15">由系统决定</option>
            </select>
          </label>
        </div>

        <div class="extra">
          <div class="label">还有什么特别要求？<span>选填</span></div>
          <TextArea v-model:value="extraPrompt" :rows="3" placeholder="例如：多安排节奏游戏，语言适合一年级学生" :disabled="working" />
        </div>

        <button type="button" class="advanced-toggle" @click="advancedSettingsExpanded = !advancedSettingsExpanded">
          {{ advancedSettingsExpanded ? "收起高级设置" : "高级设置" }}
        </button>
        <div v-if="advancedSettingsExpanded" class="generation-preferences advanced-settings">
          <div class="preference-grid">
            <label
              ><span>素材</span
              ><select v-model="preferences.assetStyle" :disabled="working">
                <option value="illustration">统一插画</option>
                <option value="photo">真实照片</option>
                <option value="mixed">插画与照片混合</option>
              </select></label
            >
            <label
              ><span>教材原图</span
              ><select v-model="preferences.sourceImagePolicy" :disabled="working">
                <option value="strict">优先保留</option>
                <option value="balanced">适度使用</option>
                <option value="creative">自由创作</option>
              </select></label
            >
          </div>
          <div class="media-options">
            <label><input v-model="preferences.requireAudio" type="checkbox" :disabled="working" />需要音频</label>
            <label><input v-model="preferences.requireVideo" type="checkbox" :disabled="working" />需要视频</label>
            <label><input v-model="preferences.enableAnimations" type="checkbox" :disabled="working" />启用克制动画</label>
          </div>
        </div>
      </div>

      <div v-if="workflowStep === 3 && draftConverted" class="result-preview">
        <div :class="['draft-status', draftPreparationState]">
          <span class="draft-status-icon">{{ draftPreparationState === "ready" ? "✓" : draftPreparationState === "failed" ? "!" : "" }}</span>
          <div>
            <strong>{{ draftStatusTitle }}</strong>
            <span>{{ draftStatusDescription }}</span>
          </div>
        </div>

        <div class="draft-workspace">
          <div class="draft-page-list" aria-label="课件页面">
            <button
              v-for="(slide, index) in draftConverted.slides"
              :key="slide.id"
              type="button"
              :class="['draft-page-item', { active: selectedDraftPageIndex === index }]"
              @click="selectedDraftPageIndex = index"
            >
              <ThumbnailSlide :slide="slide" :size="148" />
              <span>{{ formatPageNo(index + 1) }} · {{ draftOutline?.pages[index]?.title || "未命名页面" }}</span>
            </button>
          </div>

          <div v-if="selectedDraftSlide" class="draft-preview-pane">
            <div class="draft-preview-toolbar">
              <div>
                <span>第{{ selectedDraftPageIndex + 1 }} / {{ draftConverted.slides.length }}页</span>
                <strong>{{ selectedDraftPage?.title || "课件页面" }}</strong>
              </div>
              <button type="button" :disabled="working" @click="regenerateDraftPage(selectedDraftPageIndex)">重新生成本页</button>
            </div>
            <div class="draft-canvas-shell">
              <ThumbnailSlide :slide="selectedDraftSlide" :size="680" />
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="workflowStep === 2 && outline" class="outline">
        <div class="sample-stage-head">
          <div class="sample-template-current">
            <span>当前样式</span>
            <strong>{{ selectedTemplate.name }}</strong>
            <small v-if="selectedTemplate.id === recommendedTemplate.id">系统推荐</small>
          </div>
          <button type="button" :disabled="working" @click="templatePickerExpanded = !templatePickerExpanded">
            {{ templatePickerExpanded ? "收起模板" : "更换模板" }}
          </button>
        </div>

        <div class="sample-carousel-shell">
          <button
            type="button"
            class="sample-carousel-arrow previous"
            aria-label="查看前面的页面"
            :disabled="!canScrollSamplePrevious"
            @click="scrollSampleCarousel(-1)"
          >
            ‹
          </button>
          <div ref="sampleCarouselRef" class="sample-thumbnail-track" @scroll="updateSampleCarouselNavigation">
            <button
              v-for="(slide, index) in previewSlides"
              :key="slide.id"
              type="button"
              :class="['sample-thumbnail-item', { active: selectedPageNo === outline.pages[index]?.pageNo }]"
              :disabled="working"
              :title="outline.pages[index]?.title || `第${index + 1}页`"
              @click="selectSamplePage(outline.pages[index]?.pageNo || index + 1, index)"
            >
              <ThumbnailSlide :slide="slide" :size="116" />
              <span>{{ outline.pages[index]?.title || `第${index + 1}页` }}</span>
            </button>
          </div>
          <button
            type="button"
            class="sample-carousel-arrow next"
            aria-label="查看后面的页面"
            :disabled="!canScrollSampleNext"
            @click="scrollSampleCarousel(1)"
          >
            ›
          </button>
        </div>

        <div v-if="templatePickerExpanded" class="compact-template-panel">
          <div class="sample-template-picker">
            <button
              v-for="template in visibleTemplates"
              :key="template.id"
              type="button"
              :class="['sample-template-option', { active: selectedTemplateId === template.id }]"
              :disabled="working"
              @click="selectTemplate(template.id, true)"
            >
              <span class="template-real-cover option" :style="templateCoverStyle(template.id)"></span>
              <span
                ><strong>{{ template.name }}</strong
                ><small>{{ template.id === recommendedTemplate.id ? "系统推荐 · " : "" }}{{ template.scene }}</small></span
              >
            </button>
          </div>
          <button v-if="!showAllTemplates" type="button" class="show-all-templates" @click="showAllTemplates = true">查看全部模板</button>
          <div v-if="selectedTemplateFit.level === 'low'" class="template-fit-warning">
            <span>当前模板不太适合这节课：{{ selectedTemplateFit.reason }}</span>
            <button type="button" :disabled="working" @click="useRecommendedTemplate">切换为系统推荐</button>
          </div>
        </div>

        <div v-if="sampleSlide && selectedPage" class="sample-detail-section">
          <div class="sample-detail-heading">
            <div>
              <span>第{{ samplePageNo }}页</span>
              <strong>{{ samplePageTitle }}</strong>
            </div>
            <small>{{ samplePageReason }}</small>
          </div>

          <div class="sample-detail-layout">
            <section class="sample-outline-panel" aria-label="页面内容编辑">
              <div class="page-editor simplified-page-editor">
                <div class="editor-head">
                  <div class="title-editor">
                    <label class="outline-field-label">页面主题</label>
                    <input v-model="selectedPage.title" class="page-title" :disabled="working" />
                  </div>
                </div>

                <div class="field-card">
                  <div class="field-title">学生看到的内容</div>
                  <input
                    :value="studentHeadline"
                    :disabled="working"
                    class="headline-input"
                    placeholder="这一页给学生看的核心标题"
                    @input="event => updateStudentHeadline(selectedPage!, event)"
                  />
                  <textarea
                    :value="studentPoints.join('\n')"
                    :disabled="working"
                    class="page-bullets"
                    placeholder="每行一条学生可见要点，避免写老师操作步骤"
                    @input="event => updateStudentPoints(selectedPage!, event)"
                  ></textarea>
                  <div v-if="studentContentReadabilityHint" class="content-readability-hint">
                    {{ studentContentReadabilityHint }}
                  </div>
                </div>
              </div>
            </section>

            <section class="sample-preview-column" aria-label="页面预览及调整">
              <div class="sample-canvas">
                <ThumbnailSlide
                  :slide="sampleSlide"
                  :size="600"
                  :show-background-error="true"
                  @background-load-state="handleSampleBackgroundLoadState"
                />
              </div>
              <div v-if="sampleBackgroundState.status === 'error'" class="template-load-error">模板背景加载失败，请更换模板或稍后重试</div>
              <div class="sample-feedback">
                <div class="feedback-label">调整当前页面</div>
                <div class="feedback-chips">
                  <button
                    v-for="item in sampleFeedbackOptions"
                    :key="item"
                    type="button"
                    :class="{ active: sampleFeedbackTags.includes(item) }"
                    :disabled="working"
                    @click="toggleSampleFeedback(item)"
                  >
                    {{ item }}
                  </button>
                </div>
                <div class="sample-feedback-action">
                  <textarea
                    v-model="sampleFeedbackText"
                    :disabled="working"
                    placeholder="也可以直接说明你希望怎么调整"
                    @input="invalidateVisualApproval"
                  ></textarea>
                  <Button @click="regenerateSamplePage" :disabled="working">调整当前页面</Button>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>

      <div class="footer">
        <Button @click="emit('update:visible', false)" :disabled="working">取消</Button>
        <template v-if="isSetupStep">
          <Button v-if="outline" @click="workflowStep = 2" :disabled="working">继续选择样式</Button>
          <Button type="primary" @click="handleOutline" :disabled="working">{{ outline ? "按当前设置重新生成" : "开始生成课件" }}</Button>
        </template>
        <template v-else-if="isStyleStep">
          <Button @click="workflowStep = 1" :disabled="working">返回修改需求</Button>
          <Button type="primary" @click="confirmSamplesAndGenerate" :disabled="working || sampleBackgroundState.status === 'error'"
            >使用此样式并生成课件</Button
          >
        </template>
        <template v-else>
          <Button v-if="draftPreparationState !== 'optimizing'" @click="backToOutline">返回调整</Button>
          <span v-if="draftPreparationState === 'optimizing'" class="footer-progress">正在准备可用课件…</span>
          <Button v-else-if="draftPreparationState === 'failed'" type="primary" @click="retryAutomaticOptimization">重新自动优化</Button>
          <Button v-else-if="draftPreparationState === 'ready'" type="primary" @click="applyDraft">应用到当前课件</Button>
        </template>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick } from "vue"
import { ElMessage } from "element-plus"
import Modal from "@/components/Modal.vue"
import Button from "@/components/Button.vue"
import TextArea from "@/components/TextArea.vue"
import ThumbnailSlide from "@/views/components/ThumbnailSlide/index.vue"
import queryParams from "@/queryParams"
import usePptWork from "@/store/pptWork"
import { useSlidesStore } from "@/store"
import useHistorySnapshot from "@/hooks/useHistorySnapshot"
import { httpAjaxErrMsg } from "@/plugins/httpAjax"
import {
  aiCoursewareGenerateApi,
  aiCoursewareOutlineApi,
  aiCoursewareResultApi,
  aiCoursewareTaskApi,
  type AiCoursewareOutline,
  type AiCoursewarePage,
  type AiCoursewarePreferences,
  type AiCoursewareTaskInfo,
  type AiCoursewareGenerateResult
} from "@/api/aiCourseware"
import { aiCoursewareToSlides } from "@/utils/aiCoursewareToSlides"
import { inspectAiPptQuality, type AiPptQualityReport } from "@/utils/aiPptQuality"
import {
  AI_COURSEWARE_TEMPLATES,
  getAiCoursewareTemplate,
  recommendAiCoursewareTemplate,
  scoreAiCoursewareTemplate,
  type AiCoursewareTemplateId
} from "@/config/aiCoursewareTemplates"
import { getAiCoursewareTemplateMaster } from "@/config/aiCoursewareTemplateMasters"
import { resolveTemplateAssetUrl } from "@/utils/templateAssetUrl"
import type { Slide, SlideTheme } from "@/types/slides"

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits<{
  (event: "update:visible", payload: boolean): void
}>()

const pptWork = usePptWork()
const slidesStore = useSlidesStore()
const { addHistorySnapshot } = useHistorySnapshot()

const extraPrompt = ref("")
const outline = ref<AiCoursewareOutline>()
const taskInfo = ref<AiCoursewareTaskInfo>()
const workflowStep = ref<1 | 2 | 3>(1)
const isSetupStep = computed(() => workflowStep.value === 1)
const isStyleStep = computed(() => workflowStep.value === 2)
const workflowSteps = [
  { value: 1, label: "设置需求" },
  { value: 2, label: "选择样式" },
  { value: 3, label: "预览并应用" }
] as const
const taskMode = ref<"full" | "sample">("full")
const coursewareTemplates = AI_COURSEWARE_TEMPLATES
const defaultTemplateId = AI_COURSEWARE_TEMPLATES[0].id
const selectedTemplateId = ref<AiCoursewareTemplateId>(defaultTemplateId)
const templateSelectionMode = ref<"auto" | "manual">("auto")
const templatePickerExpanded = ref(false)
const advancedSettingsExpanded = ref(false)
const showAllTemplates = ref(false)
const paletteVariant = ref(0)
const pageRange = ref("9-12")
const preferences = reactive<AiCoursewarePreferences>({
  lessonMinutes: 40,
  minPages: 9,
  maxPages: 12,
  assetStyle: "illustration",
  sourceImagePolicy: "balanced",
  requireAudio: false,
  requireVideo: false,
  enableAnimations: true
})
const approvedSamplePages = ref<number[]>([])
const sampleBackgroundState = ref<{ status: "none" | "loading" | "loaded" | "error"; url: string }>({ status: "none", url: "" })
const sampleFeedbackOptions = ["画风不合适", "页面太空", "图片不合适", "文字太多"]
const sampleFeedbackTags = ref<string[]>([])
const sampleFeedbackText = ref("")
const draftOutline = ref<AiCoursewareOutline>()
const draftConverted = ref<{ title: string; theme: Partial<SlideTheme>; slides: Slide[] }>()
const draftQuality = ref<AiPptQualityReport>()
const draftPreparationState = ref<"idle" | "optimizing" | "ready" | "failed">("idle")
const automaticRepairAttempts = ref(0)
const MAX_AUTOMATIC_REPAIR_ATTEMPTS = 1
const TEACHER_VISIBLE_PATTERN = /(?:教师|老师)(?:讲述|提问|引导|指导|组织|巡视|示范)|(?:引导|指导|组织)学生/
const PLACEHOLDER_PATTERN = /(?:待补充|待完善|请输入|可参考教材|placeholder|lorem ipsum|\{\{.+?\}\}|\[.+?占位.+?\])/i
const pollTimer = ref<number>()
const selectedPageNo = ref(1)
const sampleCarouselRef = ref<HTMLElement>()
const canScrollSamplePrevious = ref(false)
const canScrollSampleNext = ref(false)
const selectedDraftPageIndex = ref(0)
const outlineLoading = ref(false)
const working = computed(
  () =>
    outlineLoading.value ||
    draftPreparationState.value === "optimizing" ||
    taskInfo.value?.status === "PENDING" ||
    taskInfo.value?.status === "RUNNING"
)
const selectedTemplate = computed(() => getAiCoursewareTemplate(selectedTemplateId.value))
const selectedStyle = computed(() => selectedTemplate.value.baseStyle)
const templateRecommendation = computed(() =>
  outline.value ? recommendAiCoursewareTemplate(outline.value) : { id: defaultTemplateId, reason: "生成大纲后将根据课程内容自动推荐" }
)
const recommendedTemplate = computed(() => getAiCoursewareTemplate(templateRecommendation.value.id))
const visibleTemplates = computed(() => {
  if (showAllTemplates.value) return coursewareTemplates
  const recommendedId = recommendedTemplate.value.id
  return [...coursewareTemplates]
    .sort((left, right) => {
      if (left.id === recommendedId) return -1
      if (right.id === recommendedId) return 1
      return outline.value ? templateFit(right.id).score - templateFit(left.id).score : 0
    })
    .slice(0, 4)
})
const selectedTemplateFit = computed(() =>
  outline.value
    ? scoreAiCoursewareTemplate(outline.value, selectedTemplateId.value)
    : { templateId: selectedTemplateId.value, score: 80, level: "usable" as const, label: "可以使用" as const, reason: "生成大纲后评估" }
)
const progressValue = computed(() => taskInfo.value?.progress || 0)
const progressSteps = [
  { threshold: 0, label: "准备中" },
  { threshold: 25, label: "生成内容" },
  { threshold: 50, label: "优化设计" },
  { threshold: 65, label: "匹配图片" },
  { threshold: 100, label: "生成完成" }
]
const currentProgressLabel = computed(() => {
  const matched = [...progressSteps].reverse().find(step => progressValue.value >= step.threshold)
  return shortProgressLabel(taskInfo.value?.message) || matched?.label || "处理中"
})
const pageTitle = computed(() => outline.value?.chapterName || outline.value?.title || "AI生成课件")
const pageMeta = computed(() => {
  if (!outline.value) return `根据当前教材生成${preferences.minPages}至${preferences.maxPages}页音乐课件`
  return [...[outline.value.gradeName, outline.value.unitName].filter(Boolean), `共${outline.value.pages.length}页`].join(" · ")
})
const selectedPage = computed(() => {
  const pages = outline.value?.pages || []
  return pages.find(page => page.pageNo === selectedPageNo.value) || pages[0]
})
const studentHeadline = computed(() => selectedPage.value?.studentContent?.headline || selectedPage.value?.subtitle || "")
const studentPoints = computed(() => {
  if (!selectedPage.value) return []
  return selectedPage.value.studentContent?.points?.length ? selectedPage.value.studentContent.points : selectedPage.value.bullets || []
})
const studentContentReadabilityHint = computed(() => {
  const contentCount = studentPoints.value.length + (studentHeadline.value ? 1 : 0)
  return contentCount > 6 ? `当前有${contentCount}条学生内容，预览会完整显示，但投屏字号可能变小，建议适当精简。` : ""
})
const samplePageIndex = computed(() => {
  const pages = outline.value?.pages || []
  const selectedIndex = pages.findIndex(page => page.pageNo === selectedPageNo.value)
  return selectedIndex >= 0 ? selectedIndex : 0
})
const samplePageNo = computed(() => outline.value?.pages[samplePageIndex.value]?.pageNo || samplePageIndex.value + 1)
const samplePageTitle = computed(() => outline.value?.pages[samplePageIndex.value]?.title || "代表页面")
const representativeSamples = computed(() => {
  const pages = outline.value?.pages || []
  if (!pages.length) return []
  const selected: Array<{ pageNo: number; label: string }> = []
  const add = (page: AiCoursewarePage | undefined, label: string) => {
    if (page && !selected.some(item => item.pageNo === page.pageNo)) selected.push({ pageNo: page.pageNo, label })
  }
  add(pages[0], "封面主视觉")
  add(
    pages.find(
      page =>
        [
          "hero_focus",
          "media_focus",
          "split_content",
          "diagram_focus",
          "story_stage",
          "full_image_question",
          "split_image",
          "observe_question"
        ].includes(page.visualPlan?.layout || "") && page.pageNo !== pages[0].pageNo
    ),
    "内容主视觉"
  )
  add(
    pages.find(page =>
      ["activity", "summary", "action_demo", "group_mission", "performance_stage", "activity_steps", "practice_check"].includes(
        page.visualPlan?.layout || ""
      )
    ),
    "课堂活动"
  )
  pages.forEach(page => {
    if (selected.length < 3) add(page, selected.length === 1 ? "内容主视觉" : "课堂活动")
  })
  return selected.slice(0, 3).map((item, index) => ({ ...item, order: index + 1 }))
})
const selectedDraftPage = computed(() => draftOutline.value?.pages[selectedDraftPageIndex.value])
const selectedDraftSlide = computed(() => draftConverted.value?.slides[selectedDraftPageIndex.value])
const draftStatusTitle = computed(() => {
  if (draftPreparationState.value === "ready") return "课件已准备完成"
  if (draftPreparationState.value === "failed") return "部分页面还未处理完成"
  return "正在自动检查和优化课件"
})
const draftStatusDescription = computed(() => {
  if (draftPreparationState.value === "ready") return "系统已完成内容、排版和教学可用性检查，可以直接预览并应用。"
  if (draftPreparationState.value === "failed") return "无需逐项修改，点击重新自动优化即可继续。"
  return "正在清理重复内容、调整版式并修复问题页面，请稍候。"
})
const requiredSamplePages = computed(() => representativeSamples.value.map(item => item.pageNo))
const allSamplesApproved = computed(
  () => requiredSamplePages.value.length === 3 && requiredSamplePages.value.every(pageNo => approvedSamplePages.value.includes(pageNo))
)
const samplePageReason = computed(() => {
  const layout = outline.value?.pages[samplePageIndex.value]?.visualPlan?.layout || ""
  if (["activity_steps", "action_demo", "group_mission", "performance_stage"].includes(layout)) return "这是课堂活动页，适合判断互动方式和信息层级"
  if (["cover_scene", "story_stage", "full_image_question", "observe_question"].includes(layout))
    return "这是主视觉页面，适合判断画风、配色和场景表现"
  if (["summary_checklist", "visual_summary", "practice_check"].includes(layout)) return "这是总结检测页，适合判断文字密度和阅读效率"
  return "这是你当前选中的页面，可用来判断版式和学生阅读体验"
})
const previewSlides = computed(() => {
  if (!outline.value?.pages.length) return undefined
  const previewOutline = { ...outline.value, style: selectedStyle.value }
  return aiCoursewareToSlides(previewOutline, {
    enableAnimations: preferences.enableAnimations,
    paletteVariant: paletteVariant.value,
    templateId: selectedTemplateId.value
  }).slides
})
const sampleSlide = computed(() => previewSlides.value?.[samplePageIndex.value])

function updateSampleCarouselNavigation() {
  const carousel = sampleCarouselRef.value
  if (!carousel) {
    canScrollSamplePrevious.value = false
    canScrollSampleNext.value = false
    return
  }
  canScrollSamplePrevious.value = carousel.scrollLeft > 2
  canScrollSampleNext.value = carousel.scrollLeft + carousel.clientWidth < carousel.scrollWidth - 2
}

function scrollSampleCarousel(direction: -1 | 1) {
  const carousel = sampleCarouselRef.value
  if (!carousel) return
  carousel.scrollBy({ left: direction * Math.max(320, carousel.clientWidth * 0.72), behavior: "smooth" })
}

function selectSamplePage(pageNo: number, index: number) {
  if (selectedPageNo.value !== pageNo) {
    sampleFeedbackTags.value = []
    sampleFeedbackText.value = ""
  }
  selectedPageNo.value = pageNo
  const item = sampleCarouselRef.value?.children.item(index) as HTMLElement | null
  item?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
}

watch(selectedTemplateId, () => {
  paletteVariant.value = 0
  if (outline.value) outline.value.style = selectedStyle.value
  invalidateVisualApproval()
})

watch(pageRange, value => {
  const [minPages, maxPages] = value.split("-").map(Number)
  preferences.minPages = minPages
  preferences.maxPages = maxPages
})

watch(preferences, () => invalidateVisualApproval(), { deep: true })

watch(
  outline,
  () => {
    if (!outline.value) return
    if (templateSelectionMode.value === "auto") selectedTemplateId.value = templateRecommendation.value.id
    invalidateVisualApproval()
  },
  { deep: true }
)

watch(
  () => props.visible,
  visible => {
    if (!visible) clearTask()
  }
)

watch(
  [workflowStep, selectedTemplateId, () => outline.value?.pages.length],
  async () => {
    await nextTick()
    updateSampleCarouselNavigation()
  },
  { immediate: true }
)

async function handleOutline() {
  if (!pptWork.id) {
    ElMessage.error("当前课件ID为空")
    return
  }
  outlineLoading.value = true
  const res = await httpAjaxErrMsg(aiCoursewareOutlineApi, {
    id: pptWork.id,
    fromType: queryParams.pptResourcesType || queryParams.fromType,
    extraPrompt: buildExtraPrompt(),
    preferences: { ...preferences }
  }).finally(() => {
    outlineLoading.value = false
  })
  if (res.code === 200) {
    outline.value = res.data as AiCoursewareOutline
    if (templateSelectionMode.value === "auto") selectedTemplateId.value = recommendAiCoursewareTemplate(outline.value).id
    outline.value.style = selectedStyle.value
    outline.value.templateId = selectedTemplateId.value
    selectedPageNo.value = outline.value.pages[0]?.pageNo || 1
    sampleFeedbackTags.value = []
    sampleFeedbackText.value = ""
    workflowStep.value = 2
  }
}

async function handleGenerate() {
  const sourceOutline = draftOutline.value || outline.value
  if (!sourceOutline || !pptWork.id) return
  if (!allSamplesApproved.value) {
    ElMessage.error("请先确认三张代表样稿")
    return
  }

  draftConverted.value = undefined
  draftQuality.value = undefined
  draftPreparationState.value = "idle"
  automaticRepairAttempts.value = 0
  sourceOutline.style = selectedStyle.value
  sourceOutline.templateId = selectedTemplateId.value
  taskMode.value = "full"
  const res = await httpAjaxErrMsg(aiCoursewareGenerateApi, {
    id: pptWork.id,
    fromType: queryParams.pptResourcesType || queryParams.fromType,
    outline: sourceOutline,
    templateId: selectedTemplateId.value,
    visualPrompt: buildVisualPrompt(),
    preferences: { ...preferences }
  })
  if (res.code !== 200) return

  taskInfo.value = res.data as AiCoursewareTaskInfo
  await pollTask(taskInfo.value.taskId)
}

async function regenerateSamplePage() {
  if (!outline.value || !pptWork.id) return
  approvedSamplePages.value = approvedSamplePages.value.filter(pageNo => pageNo !== samplePageNo.value)
  taskMode.value = "sample"
  if (sampleFeedbackTags.value.includes("画风不合适")) paletteVariant.value = (paletteVariant.value + 1) % 3
  const feedback = [...sampleFeedbackTags.value, sampleFeedbackText.value.trim()].filter(Boolean).join("；")
  const res = await httpAjaxErrMsg(aiCoursewareGenerateApi, {
    id: pptWork.id,
    fromType: queryParams.pptResourcesType || queryParams.fromType,
    outline: outline.value,
    templateId: selectedTemplateId.value,
    visualPrompt: `${buildVisualPrompt()}当前只调整第${samplePageNo.value}页样张。${feedback ? `用户反馈：${feedback}。` : "请更换视觉组织方式，保持教学目标不变。"}`,
    preferences: { ...preferences },
    regeneratePageNo: samplePageNo.value
  })
  if (res.code !== 200) return
  taskInfo.value = res.data as AiCoursewareTaskInfo
  await pollTask(taskInfo.value.taskId)
}

async function pollTask(taskId: string) {
  if (pollTimer.value) window.clearInterval(pollTimer.value)
  await fetchTask(taskId)
  if (taskInfo.value?.status === "PENDING" || taskInfo.value?.status === "RUNNING") {
    pollTimer.value = window.setInterval(() => fetchTask(taskId), 2000)
  }
}

async function fetchTask(taskId: string) {
  const res = await httpAjaxErrMsg(aiCoursewareTaskApi, taskId)
  if (res.code !== 200) {
    clearTask()
    return
  }
  taskInfo.value = res.data as AiCoursewareTaskInfo
  if (taskInfo.value.status === "DONE") {
    clearPollTimer()
    if (taskMode.value === "sample") await loadSampleResult(taskId)
    else await loadDraft(taskId)
  } else if (taskInfo.value.status === "FAILED") {
    clearPollTimer()
    const message = taskInfo.value.message || "AI课件生成失败"
    clearTask()
    if (workflowStep.value === 3) {
      draftPreparationState.value = "failed"
      console.error("AI课件自动优化失败", message)
      ElMessage.error("自动优化未完成，请重新尝试")
    } else {
      ElMessage.error(message)
    }
  }
}

function clearTask() {
  clearPollTimer()
  taskInfo.value = undefined
}

function clearPollTimer() {
  if (pollTimer.value) {
    window.clearInterval(pollTimer.value)
    pollTimer.value = undefined
  }
}

async function loadDraft(taskId: string) {
  const res = await httpAjaxErrMsg(aiCoursewareResultApi, taskId)
  if (res.code !== 200) {
    clearTask()
    return
  }

  const result = res.data as AiCoursewareGenerateResult
  draftOutline.value = result.outline
  draftOutline.value.templateId = selectedTemplateId.value
  selectedDraftPageIndex.value = 0
  workflowStep.value = 3
  clearTask()
  await prepareDraftForUse()
}

async function loadSampleResult(taskId: string) {
  const res = await httpAjaxErrMsg(aiCoursewareResultApi, taskId)
  if (res.code !== 200) {
    clearTask()
    return
  }
  const result = res.data as AiCoursewareGenerateResult
  outline.value = result.outline
  outline.value.style = selectedStyle.value
  outline.value.templateId = selectedTemplateId.value
  sampleFeedbackTags.value = []
  sampleFeedbackText.value = ""
  workflowStep.value = 2
  clearTask()
  ElMessage.success(`第${samplePageNo.value}页样张已重新生成，请再次确认视觉方向`)
}

function rebuildDraftPreview() {
  if (!draftOutline.value) {
    draftConverted.value = undefined
    draftQuality.value = undefined
    return
  }
  draftOutline.value.style = selectedStyle.value
  draftOutline.value.templateId = selectedTemplateId.value
  draftConverted.value = aiCoursewareToSlides(draftOutline.value, {
    enableAnimations: preferences.enableAnimations,
    paletteVariant: paletteVariant.value,
    templateId: selectedTemplateId.value
  })
  draftQuality.value = inspectAiPptQuality(draftOutline.value, draftConverted.value.slides, preferences)
}

async function regenerateDraftPage(index: number) {
  if (!draftOutline.value || !pptWork.id) return
  draftPreparationState.value = "optimizing"
  automaticRepairAttempts.value = 0
  taskMode.value = "full"
  const res = await httpAjaxErrMsg(aiCoursewareGenerateApi, {
    id: pptWork.id,
    fromType: queryParams.pptResourcesType || queryParams.fromType,
    outline: draftOutline.value,
    templateId: selectedTemplateId.value,
    visualPrompt: `${buildVisualPrompt()}请重新生成本页并主动修正学生可见内容、文字密度和版式问题。`,
    preferences: { ...preferences },
    regeneratePageNo: index + 1
  })
  if (res.code !== 200) {
    draftPreparationState.value = "failed"
    return
  }
  taskInfo.value = res.data as AiCoursewareTaskInfo
  await pollTask(taskInfo.value.taskId)
}

function applyDraft() {
  if (!draftConverted.value || !draftQuality.value?.passed) return
  slidesStore.setTitle(draftConverted.value.title)
  slidesStore.setTheme(draftConverted.value.theme)
  slidesStore.setSlides(draftConverted.value.slides)
  slidesStore.updateSlideIndex(0)
  addHistorySnapshot()
  ElMessage.success("PPT已应用，请检查后手动保存")
  emit("update:visible", false)
}

function backToOutline() {
  clearTask()
  if (draftOutline.value) outline.value = draftOutline.value
  draftOutline.value = undefined
  draftConverted.value = undefined
  draftQuality.value = undefined
  draftPreparationState.value = "idle"
  automaticRepairAttempts.value = 0
  workflowStep.value = 2
}

function invalidateVisualApproval() {
  approvedSamplePages.value = []
}

async function confirmSamplesAndGenerate() {
  const slides = previewSlides.value || []
  if (!outline.value || slides.length !== outline.value.pages.length) {
    ElMessage.error("页面预览尚未准备完成，请稍后重试")
    return
  }

  const backgroundUrls = Array.from(
    new Set(slides.map(slide => (slide.background?.type === "image" ? resolveTemplateAssetUrl(slide.background.image) : "")).filter(Boolean))
  )

  try {
    await Promise.all(backgroundUrls.map(preloadImage))
  } catch {
    ElMessage.error("模板背景加载失败，请更换模板或稍后重试")
    return
  }

  approvedSamplePages.value = [...requiredSamplePages.value]
  await handleGenerate()
}

function handleSampleBackgroundLoadState(payload: { status: "none" | "loading" | "loaded" | "error"; url: string }) {
  sampleBackgroundState.value = payload
  if (payload.status === "error") {
    approvedSamplePages.value = approvedSamplePages.value.filter(pageNo => pageNo !== samplePageNo.value)
    console.error("AI课件模板背景加载失败", {
      templateId: selectedTemplateId.value,
      pageNo: samplePageNo.value,
      layout: outline.value?.pages[samplePageIndex.value]?.visualPlan?.layout,
      url: payload.url
    })
  }
}

function toggleSampleFeedback(item: string) {
  approvedSamplePages.value = approvedSamplePages.value.filter(pageNo => pageNo !== samplePageNo.value)
  sampleFeedbackTags.value = sampleFeedbackTags.value.includes(item)
    ? sampleFeedbackTags.value.filter(value => value !== item)
    : [...sampleFeedbackTags.value, item]
}

function selectTemplate(templateId: AiCoursewareTemplateId, fromSample = false) {
  templateSelectionMode.value = "manual"
  selectedTemplateId.value = templateId
  if (fromSample) {
    templatePickerExpanded.value = false
    showAllTemplates.value = false
    ElMessage.success(`已切换为${getAiCoursewareTemplate(templateId).name}，已同步重排样张结构`)
  }
}

function useRecommendedTemplate() {
  templateSelectionMode.value = "auto"
  selectedTemplateId.value = templateRecommendation.value.id
  ElMessage.success(`已使用系统推荐的${recommendedTemplate.value.name}`)
}

function templateCoverStyle(templateId: AiCoursewareTemplateId): Record<string, string> {
  const master = getAiCoursewareTemplateMaster(templateId)
  const cover = master.pages.find(page => page.layout === "cover") || master.pages[0]
  const backgroundImage = resolveTemplateAssetUrl(cover?.backgroundImage)
  if (backgroundImage) return { backgroundImage: `url("${backgroundImage}")` }
  return { background: cover?.background || selectedTemplate.value.palettes[0].background }
}

function preloadImage(url: string) {
  if (!url || typeof Image === "undefined") return Promise.resolve()
  return new Promise<void>((resolve, reject) => {
    const image = new Image()
    image.onload = () => resolve()
    image.onerror = () => reject(new Error(`failed to load ${url}`))
    image.src = url
  })
}

function templateFit(templateId: AiCoursewareTemplateId) {
  return outline.value
    ? scoreAiCoursewareTemplate(outline.value, templateId)
    : { templateId, score: 80, level: "usable" as const, label: "可以使用" as const, reason: "生成大纲后评估" }
}

async function prepareDraftForUse() {
  if (!draftOutline.value) return
  draftPreparationState.value = "optimizing"
  normalizeDraftLocally()
  rebuildDraftPreview()

  if (draftQuality.value?.passed) {
    draftPreparationState.value = "ready"
    ElMessage.success("课件已完成自动检查，可以直接应用")
    return
  }

  console.warn("AI课件自动检查发现待修复项", draftQuality.value?.errors)
  if (automaticRepairAttempts.value >= MAX_AUTOMATIC_REPAIR_ATTEMPTS) {
    draftPreparationState.value = "failed"
    return
  }

  automaticRepairAttempts.value += 1
  await requestAutomaticRepair()
}

async function requestAutomaticRepair() {
  if (!draftOutline.value || !pptWork.id || !draftQuality.value) {
    draftPreparationState.value = "failed"
    return
  }
  const repairSummary = draftQuality.value.errors
    .slice(0, 12)
    .map(issue => `${issue.pageNo ? `第${issue.pageNo}页` : "整套课件"}：${issue.message}`)
    .join("；")
  taskMode.value = "full"
  const res = await httpAjaxErrMsg(aiCoursewareGenerateApi, {
    id: pptWork.id,
    fromType: queryParams.pptResourcesType || queryParams.fromType,
    outline: draftOutline.value,
    templateId: selectedTemplateId.value,
    visualPrompt: `${buildVisualPrompt()}系统检查发现以下问题，请在保持教学目标和页数不变的前提下全部修正：${repairSummary}。`,
    preferences: { ...preferences }
  })
  if (res.code !== 200) {
    draftPreparationState.value = "failed"
    return
  }
  taskInfo.value = res.data as AiCoursewareTaskInfo
  await pollTask(taskInfo.value.taskId)
}

async function retryAutomaticOptimization() {
  automaticRepairAttempts.value = 0
  await prepareDraftForUse()
}

function normalizeDraftLocally() {
  if (!draftOutline.value) return
  const imageUseCounts = new Map<string, number>()
  draftOutline.value.pages.forEach((page, index) => {
    if (!page.visualPlan) page.visualPlan = {}
    if (!page.studentContent) page.studentContent = { headline: "", points: [] }

    const movedTeacherNotes: string[] = []
    const headline = cleanDraftText(page.studentContent.headline, 24)
    if (isTeacherOnlyText(headline)) movedTeacherNotes.push(headline)
    page.studentContent.headline = isTeacherOnlyText(headline) ? "" : headline

    const excluded = new Set([page.title, page.studentContent.headline].map(normalizeDraftText).filter(Boolean))
    const pointKeys = new Set<string>()
    const points = (page.studentContent.points?.length ? page.studentContent.points : page.bullets || [])
      .map(item => cleanDraftText(item, 22))
      .filter(item => {
        if (!item) return false
        if (isTeacherOnlyText(item)) {
          movedTeacherNotes.push(item)
          return false
        }
        const key = normalizeDraftText(item)
        if (!key || excluded.has(key) || pointKeys.has(key)) return false
        pointKeys.add(key)
        return true
      })
      .slice(0, 4)
    page.studentContent.points = points
    page.bullets = [...points]
    page.visualPlan.visualDensity = points.length <= 2 ? "low" : points.length >= 4 ? "high" : "medium"

    if (movedTeacherNotes.length) {
      if (!page.activity) page.activity = { task: "", steps: [] }
      page.activity.steps = uniqueDraftTexts([...(page.activity.steps || []), ...movedTeacherNotes])
    }

    if (!page.classroomAction) {
      page.classroomAction = { teacherInstruction: "", studentTask: page.studentContent.headline || page.title, interactionType: "" }
    }
    const studentTask = cleanDraftText(page.classroomAction.studentTask, 24)
    page.classroomAction.studentTask = !studentTask || isTeacherOnlyText(studentTask) ? page.studentContent.headline || page.title : studentTask

    const layout = page.visualPlan.layout || ""
    if (["hero_focus", "media_focus", "split_content", "diagram_focus"].includes(layout)) {
      page.visualPlan.focalContent ||= page.title
      page.visualPlan.mainVisual ||= page.imageKeywords?.[0] || `${page.title}的课堂主视觉`
    }

    if (page.image?.url) {
      const useCount = (imageUseCounts.get(page.image.url) || 0) + 1
      imageUseCounts.set(page.image.url, useCount)
      if (useCount > 2) {
        page.image = undefined
        page.resourceBindings = (page.resourceBindings || []).filter(binding => binding.resourceType !== "IMG")
      }
    }

    if (index > 0) {
      const fallbackInstruction = `引导学生完成“${page.classroomAction.studentTask || page.title}”，根据学生的语言、动作或声音表现及时反馈。`
      const instruction = cleanDraftText(page.classroomAction.teacherInstruction || page.teacherTips || page.speakerNotes) || fallbackInstruction
      page.classroomAction.teacherInstruction = instruction
      page.teacherTips ||= instruction
      page.speakerNotes ||= instruction
    }
  })
}

function cleanDraftText(value?: string, limit?: number) {
  const cleaned = String(value || "")
    .replace(/\s+/g, " ")
    .trim()
  return limit ? cleaned.slice(0, limit) : cleaned
}

function normalizeDraftText(value?: string) {
  return cleanDraftText(value)
    .replace(/[，。！？、；：,.!?;:\s]+/g, "")
    .toLowerCase()
}

function uniqueDraftTexts(values: string[]) {
  const keys = new Set<string>()
  return values.filter(value => {
    const key = normalizeDraftText(value)
    if (!key || keys.has(key)) return false
    keys.add(key)
    return true
  })
}

function isTeacherOnlyText(value?: string) {
  const text = cleanDraftText(value)
  return Boolean(text && (TEACHER_VISIBLE_PATTERN.test(text) || PLACEHOLDER_PATTERN.test(text)))
}

function updateStudentHeadline(page: AiCoursewarePage, event: Event) {
  if (!page.studentContent) page.studentContent = { headline: "", points: [] }
  page.studentContent.headline = (event.target as HTMLInputElement).value.trim()
}

function updateStudentPoints(page: AiCoursewarePage, event: Event) {
  if (!page.studentContent) page.studentContent = { headline: "", points: [] }
  const points = (event.target as HTMLTextAreaElement).value
    .split("\n")
    .map(item => item.trim())
    .filter(Boolean)
  page.studentContent.points = points
  page.bullets = points
}

function buildExtraPrompt() {
  return extraPrompt.value.trim()
}

function buildVisualPrompt() {
  const base = selectedTemplate.value.visualPrompt
  const system = `模板布局族：${selectedTemplate.value.layoutFamily}。字体体系：${selectedTemplate.value.typography}。背景体系：${selectedTemplate.value.backgroundStyle}。素材画风：${selectedTemplate.value.illustrationStyle}。`
  const layouts = [...new Set(selectedTemplate.value.layoutCapabilities || Object.values(selectedTemplate.value.pageLayouts))].join("、")
  const asset =
    preferences.assetStyle === "illustration"
      ? "主视觉使用统一画风插画。"
      : preferences.assetStyle === "photo"
        ? "主视觉优先真实照片。"
        : "插画和真实照片按教学内容合理混用。"
  const source =
    preferences.sourceImagePolicy === "strict"
      ? "优先保留教材原图，不随意替换。"
      : preferences.sourceImagePolicy === "creative"
        ? "允许根据教学目标重新创作主视觉。"
        : "教材原图与新视觉保持平衡。"
  const palette =
    paletteVariant.value === 1
      ? "配色使用清新蓝绿体系。"
      : paletteVariant.value === 2
        ? "配色使用柔和紫色与珊瑚色体系。"
        : "配色保持明快且有清晰对比。"
  return `${base}${system}可用视觉版式：${layouts}。版式只按每页真实内容需求选择，不得反向增加歌词、谱例、聆听或活动页面。模板场景：${selectedTemplate.value.scene}。${asset}${source}${palette}整套课件必须共享角色外观、环境、光线和重复道具；一页只保留一个视觉焦点。`
}

function formatPageNo(pageNo?: number) {
  return String(pageNo || 0).padStart(2, "0")
}

function shortProgressLabel(message?: string) {
  if (!message) return ""
  if (message.includes("重新生成第")) return "重做样张"
  if (message.includes("读取") || message.includes("等待")) return "准备中"
  if (message.includes("页面") || message.includes("内容")) return "生成内容"
  if (message.includes("优化") || message.includes("教学设计")) return "优化设计"
  if (message.includes("图片") || message.includes("检索")) return "匹配图片"
  if (message.includes("完成")) return "生成完成"
  if (message.includes("失败")) return "生成失败"
  return message.length > 4 ? message.slice(0, 4) : message
}
</script>

<style lang="scss" scoped>
.ai-dialog {
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  color: #1f2933;
}
.ai-dialog.review-mode {
  height: 82vh;
}
.ai-dialog.review-mode .header {
  .title {
    font-size: 22px;
    line-height: 1.25;
  }
  .sub {
    margin-top: 3px;
    font-size: 13px;
  }
}
.header,
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header,
.workflow-steps,
.footer {
  flex-shrink: 0;
}
.title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2933;
}
.sub {
  margin-top: 6px;
  color: #7b8794;
  font-size: 14px;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  padding: 4px;
  border-radius: 8px;
  background: #f4f7fa;
}
.workflow-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  color: #7b8794;
  font-size: 13px;
  font-weight: 600;
  &.active {
    border-radius: 6px;
    background: #fff;
    color: $themeColor;
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.08);
  }
  &.done {
    color: #168f86;
  }
}
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e7edf5;
  font-size: 12px;
}
.workflow-step.active .step-no {
  background: $themeColor;
  color: #fff;
}
.workflow-step.done .step-no {
  background: #dff3ed;
  color: #168f86;
}
.setup-stage {
  min-height: 0;
  flex: 0 1 auto;
  overflow: auto;
  padding-right: 4px;
}
.stage-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f7faff;
}
.stage-title {
  color: #1f2933;
  font-size: 16px;
  font-weight: 700;
}
.stage-desc {
  margin-top: 4px;
  color: #7b8794;
  font-size: 12px;
}
.saved-state {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf7f4;
  color: #168f86;
  font-size: 12px;
  font-weight: 600;
}
.progress-strip,
.loading-strip {
  margin-top: 12px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.loading-strip {
  color: #52616b;
  font-size: 13px;
}
.loading-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #d7e7ff;
  border-top-color: $themeColor;
  border-radius: 50%;
  animation: loading-rotate 0.8s linear infinite;
}
.current-step {
  width: 64px;
  flex-shrink: 0;
  color: $themeColor;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.progress-value {
  width: 42px;
  text-align: right;
  font-size: 13px;
  color: $themeColor;
  font-weight: 700;
}
.progress-line {
  height: 6px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}
.progress-bar {
  height: 100%;
  border-radius: inherit;
  background: $themeColor;
  transition: width 0.25s ease;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
.extra {
  margin-top: 12px;
}
.setup-primary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  label > span {
    display: block;
    margin-bottom: 6px;
    color: #52616b;
    font-size: 13px;
  }
  select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe5ec;
    border-radius: 7px;
    background: #fff;
    color: #33404d;
  }
}
.template-real-cover {
  display: block;
  width: 116px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(31, 41, 51, 0.08);
  &.option {
    width: 100%;
    margin-bottom: 8px;
  }
}
.compact-template-selector {
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
}
.show-all-templates,
.advanced-toggle,
.outline-toggle {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: $themeColor;
  font-size: 12px;
  cursor: pointer;
}
.advanced-toggle {
  color: #657381;
}
.advanced-settings {
  margin-top: 8px;
}
.generation-preferences {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  background: #fafcff;
}
.preference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  label,
  span {
    display: block;
  }
  span {
    margin-bottom: 5px;
    color: #52616b;
    font-size: 12px;
  }
  input,
  select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    background: #fff;
  }
}
.media-options {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  color: #52616b;
  font-size: 13px;
  input {
    margin-right: 6px;
  }
}
.style-selector {
  margin-top: 12px;
}
.template-selector-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.template-help {
  margin-top: -3px;
  color: #7b8794;
  font-size: 12px;
}
.auto-template-button {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid #cfe0f6;
  border-radius: 6px;
  background: #f5f9ff;
  color: $themeColor;
  font-size: 12px;
  cursor: pointer;
}
.template-recommendation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #eef6ff;
  color: #52616b;
  font-size: 12px;
  span:first-child {
    padding: 2px 6px;
    border-radius: 999px;
    background: $themeColor;
    color: #fff;
  }
  strong {
    color: #1f2933;
  }
}
.style-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 9px;
}
.style-option {
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.style-option strong,
.style-option span,
.style-option small {
  display: block;
}
.style-option > span:not(.template-mini):not(.template-card-title) {
  margin-top: 4px;
  color: #7b8794;
  font-size: 12px;
}
.style-option small {
  margin-top: 6px;
  color: #52616b;
  font-size: 11px;
  font-weight: 600;
}
.style-option.active {
  border-color: $themeColor;
  box-shadow: 0 0 0 2px rgba($themeColor, 0.12);
}
.template-mini {
  position: relative;
  height: 66px;
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--template-background);
  box-shadow: inset 0 0 0 1px rgba(31, 41, 51, 0.06);
  i {
    position: absolute;
    display: block;
  }
  .mini-band {
    left: 0;
    top: 0;
    width: 32%;
    height: 100%;
    background: var(--template-primary);
  }
  .mini-title {
    left: 38%;
    top: 13px;
    width: 42%;
    height: 7px;
    border-radius: 4px;
    background: var(--template-primary);
  }
  .mini-content {
    left: 38%;
    width: 52%;
    height: 14px;
    border-radius: 3px;
    background: var(--template-surface);
    box-shadow: 0 2px 5px rgba(31, 41, 51, 0.08);
  }
  .mini-content.first {
    top: 29px;
  }
  .mini-content.second {
    top: 47px;
    width: 37%;
  }
  .mini-accent {
    right: 7%;
    bottom: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--template-accent);
  }
}
.template-card-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  em {
    padding: 2px 5px;
    border-radius: 999px;
    background: #eaf7f4;
    color: #168f86;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
  }
}
.label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #52616b;
}
.outline {
  margin-top: 10px;
  min-height: 0;
  flex: 1;
  display: block;
  overflow: auto;
  padding-right: 4px;
}
.sample-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    background: #fff;
    color: $themeColor;
    font-size: 12px;
    cursor: pointer;
  }
}
.sample-template-current {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: #657381;
  font-size: 12px;
  strong {
    overflow: hidden;
    color: #1f2933;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  small {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eaf7f4;
    color: #168f86;
    font-size: 10px;
    font-weight: 600;
  }
}
.sample-carousel-shell {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.sample-carousel-arrow {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d8e1eb;
  border-radius: 50%;
  background: #fff;
  color: #52616b;
  font-size: 21px;
  line-height: 26px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 41, 51, 0.08);
  &:hover:not(:disabled) {
    border-color: $themeColor;
    color: $themeColor;
  }
  &:disabled {
    opacity: 0.28;
    cursor: default;
  }
}
.sample-thumbnail-track {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
.sample-thumbnail-item {
  width: 120px;
  flex: 0 0 120px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #52616b;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 2px 7px rgba(31, 41, 51, 0.07);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
  &.active {
    border-color: $themeColor;
    box-shadow: 0 0 0 2px rgba($themeColor, 0.1);
  }
  > span {
    display: block;
    padding: 5px 6px 6px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.compact-template-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  background: #fafcff;
  .sample-template-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .template-real-cover.option {
    width: 86px;
    flex-shrink: 0;
    margin: 0;
  }
}
.sample-detail-section {
  margin-top: 10px;
}
.sample-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  gap: 16px;
  margin-bottom: 6px;
  > div {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 8px;
  }
  span {
    flex-shrink: 0;
    color: $themeColor;
    font-size: 12px;
    font-weight: 700;
  }
  strong {
    overflow: hidden;
    color: #1f2933;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  small {
    overflow: hidden;
    max-width: 48%;
    color: #8a96a3;
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.sample-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.48fr);
  align-items: stretch;
  gap: 12px;
}
.sample-outline-panel,
.sample-preview-column {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  background: #fff;
}
.sample-outline-panel {
  display: flex;
}
.sample-preview-column {
  display: flex;
  flex-direction: column;
}
.simplified-page-editor {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  .title-editor {
    max-width: none;
  }
}
.simplified-page-editor .field-card {
  margin-top: 11px;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid #edf1f5;
  border-radius: 0;
  background: transparent;
}
.simplified-page-editor .page-bullets {
  min-height: 124px;
  height: 124px;
}
.content-readability-hint {
  margin-top: 6px;
  color: #b76e00;
  font-size: 11px;
  line-height: 1.45;
}
.representative-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  button {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    background: #fff;
    color: #52616b;
    text-align: left;
    cursor: pointer;
  }
  button.active {
    border-color: $themeColor;
    background: #f5f9ff;
  }
  button.approved span {
    background: #1f9d69;
  }
  span {
    grid-row: 1 / 3;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: $themeColor;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }
  strong,
  small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  strong {
    font-size: 11px;
  }
  small {
    color: #8a96a3;
    font-size: 9px;
  }
  &.story {
    .mini-band {
      width: 100%;
      height: 100%;
      opacity: 0.22;
    }
    .mini-title {
      left: 10%;
      top: 12px;
      width: 46%;
    }
    .mini-content {
      left: 10%;
      background: rgba(255, 255, 255, 0.9);
    }
    .mini-accent {
      right: 12%;
      bottom: 13px;
      width: 30px;
      height: 30px;
      opacity: 0.85;
    }
  }
  &.activity {
    .mini-band {
      left: 7%;
      top: 12px;
      width: 18%;
      height: 42px;
      border-radius: 50%;
    }
    .mini-title {
      left: 32%;
      width: 48%;
    }
    .mini-content.first {
      left: 32%;
      top: 29px;
      width: 58%;
    }
    .mini-content.second {
      left: 32%;
      top: 47px;
      width: 45%;
    }
  }
  &.technology {
    background: var(--template-dark, #102744);
    .mini-band {
      width: 100%;
      height: 3px;
      opacity: 0.8;
    }
    .mini-title {
      left: 10%;
      background: var(--template-secondary);
    }
    .mini-content {
      left: 10%;
      width: 76%;
      background: rgba(255, 255, 255, 0.15);
    }
    .mini-accent {
      border-radius: 3px;
    }
  }
  &.culture {
    .mini-band {
      left: 78%;
      width: 14%;
      height: 100%;
      opacity: 0.18;
    }
    .mini-title {
      left: 10%;
      width: 44%;
    }
    .mini-content {
      left: 10%;
      width: 58%;
      background: var(--template-soft);
      box-shadow: none;
    }
  }
  &.academic {
    .mini-band {
      width: 4%;
    }
    .mini-title {
      left: 12%;
      width: 54%;
    }
    .mini-content {
      left: 12%;
      width: 76%;
      border-radius: 0;
      box-shadow: none;
    }
    .mini-accent {
      border-radius: 1px;
    }
  }
  em.fit-usable {
    background: #fff7e6;
    color: #b76e00;
  }
  em.fit-low {
    background: #fff1f0;
    color: #cf1322;
  }
}
.template-fit-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid #ffd591;
  border-radius: 7px;
  background: #fffbe6;
  color: #874d00;
  font-size: 12px;
  button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: $themeColor;
    font-weight: 700;
    cursor: pointer;
  }
}
.template-fit-warning.compact {
  margin: 0 0 10px;
}
.template-load-error {
  margin-bottom: 10px;
  color: #b42318;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.sample-template-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: -2px 0 10px;
}
.sample-template-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  &.active {
    border-color: $themeColor;
    background: #f5f9ff;
  }
  > span:last-child {
    min-width: 0;
  }
  strong,
  small {
    display: block;
  }
  strong {
    overflow: hidden;
    color: #33404d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  small {
    margin-top: 2px;
    color: #8a96a3;
    font-size: 9px;
  }
}
.template-swatches {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  width: 34px;
  height: 28px;
  border-radius: 4px;
  i {
    flex: 1;
  }
}
.sample-page-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  button,
  select {
    height: 32px;
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    background: #fff;
    color: #52616b;
    font-family: inherit;
    font-size: 12px;
  }
  button {
    padding: 0 10px;
    cursor: pointer;
  }
  button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  select {
    min-width: 0;
    padding: 0 8px;
  }
}
.sample-feedback {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e5eaf0;
}
.feedback-label {
  color: #52616b;
  font-size: 12px;
  font-weight: 600;
}
.feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  button {
    height: 26px;
    padding: 0 9px;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    background: #fff;
    color: #52616b;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
  }
  button.active {
    border-color: $themeColor;
    background: rgba($themeColor, 0.08);
    color: $themeColor;
  }
}
.sample-feedback textarea {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  box-sizing: border-box;
  resize: none;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
}
.sample-feedback-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 6px;
  :deep(.button) {
    height: 34px;
    line-height: 34px;
    white-space: nowrap;
  }
}
.sample-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: #f1f4f8;
  :deep(.thumbnail-slide) {
    flex-shrink: 0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(31, 41, 51, 0.14);
  }
}
.result-preview {
  min-height: 0;
  flex: 1;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.draft-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dce8f7;
  border-radius: 10px;
  background: #f6f9fe;
  color: #35516f;
  &.ready {
    border-color: #cce8df;
    background: #f0faf7;
    color: #16776f;
  }
  &.failed {
    border-color: #f3d7b2;
    background: #fff8ee;
    color: #9a5b08;
  }
  > div {
    min-width: 0;
    flex: 1;
  }
  strong,
  span {
    display: block;
  }
  strong {
    color: #1f2933;
    font-size: 14px;
  }
  > div > span {
    margin-top: 3px;
    font-size: 12px;
  }
}
.draft-status-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 15px !important;
  font-weight: 800;
  .optimizing & {
    border-color: #c6d7ee;
    border-top-color: $themeColor;
    animation: loading-rotate 0.8s linear infinite;
  }
}
.draft-workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.draft-page-list {
  min-height: 0;
  overflow-y: auto;
  padding: 3px 7px 3px 3px;
}
.draft-page-item {
  width: 100%;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #52616b;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
  + .draft-page-item {
    margin-top: 7px;
  }
  &:hover {
    background: #f5f8fc;
  }
  &.active {
    border-color: $themeColor;
    background: rgba($themeColor, 0.06);
    box-shadow: 0 0 0 2px rgba($themeColor, 0.08);
  }
  :deep(.thumbnail-slide) {
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(31, 41, 51, 0.1);
  }
  > span {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.draft-preview-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.draft-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  span,
  strong {
    display: block;
  }
  span {
    color: #7b8794;
    font-size: 11px;
  }
  strong {
    margin-top: 2px;
    color: #1f2933;
    font-size: 14px;
  }
  button {
    padding: 7px 11px;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    background: #fff;
    color: #52616b;
    cursor: pointer;
  }
}
.draft-canvas-shell {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #eef2f7;
  :deep(.thumbnail-slide) {
    flex-shrink: 0;
    border-radius: 7px;
    box-shadow: 0 14px 34px rgba(31, 41, 51, 0.16);
  }
}
.page-actions {
  display: grid;
  gap: 7px;
  padding: 8px;
  select,
  input {
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    border: 1px solid #dfe5ec;
    border-radius: 5px;
    font-size: 12px;
  }
  > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  button {
    padding: 4px 7px;
    border: 1px solid #dfe5ec;
    border-radius: 5px;
    background: #fff;
    color: #52616b;
    font-size: 11px;
    cursor: pointer;
  }
  button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}
.page-nav {
  overflow: auto;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #fafcff;
  padding: 8px;
}
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #52616b;
  text-align: left;
  cursor: pointer;
  &.active {
    background: #eaf4ff;
    color: #1f2933;
    .nav-no {
      color: #fff;
      background: $themeColor;
    }
  }
}
.nav-no {
  width: 34px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 5px;
  color: #7b8794;
  background: #edf1f5;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}
.nav-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.page-editor {
  min-width: 0;
  overflow: auto;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}
.editor-head {
  display: block;
}
.title-editor {
  max-width: 460px;
}
.outline-field-label {
  display: block;
  margin-bottom: 8px;
  color: #52616b;
  font-size: 13px;
  font-weight: 600;
}
.purpose-card {
  margin-top: 12px;
}
.field-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.field-card {
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #fbfcfe;
  &.visual {
    background: #fffaf3;
  }
}
.field-title {
  margin-bottom: 8px;
  color: #52616b;
  font-size: 13px;
  font-weight: 600;
}
.page-title,
.purpose-input,
.headline-input,
.page-bullets,
.page-design,
.keyword-input,
.remark-input {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
}
.page-title {
  height: 36px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.purpose-input {
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
}
.headline-input {
  height: 36px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 14px;
}
.page-bullets,
.page-design {
  height: 150px;
  padding: 10px;
  resize: vertical;
  line-height: 1.5;
}
.full-field {
  margin-top: 12px;
}
.page-design {
  height: 90px;
}
.resource-card {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #dcefe9;
  border-radius: 6px;
  background: #f6fbf9;
}
.resource-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.resource-hint {
  color: #7b8794;
  font-size: 12px;
}
.resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resource-item {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cfe6de;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
}
.resource-type {
  margin-right: 8px;
  color: #168f86;
  font-weight: 600;
}
.resource-name {
  max-width: 240px;
  overflow: hidden;
  color: #374151;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.keyword-card {
  margin-top: 12px;
}
.keyword-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.keyword-label {
  color: #52616b;
  font-size: 13px;
  font-weight: 600;
}
.keyword-hint {
  color: #9aa5b1;
  font-size: 12px;
}
.keyword-input {
  height: 34px;
  padding: 0 10px;
}
.remark-card {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f7f9fc;
}
.remark-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.remark-title {
  color: #52616b;
  font-size: 13px;
  font-weight: 600;
}
.remark-hint {
  color: #9aa5b1;
  font-size: 12px;
}
.remark-input {
  height: 72px;
  padding: 10px;
  resize: vertical;
  line-height: 1.5;
  background: #fff;
}
.task {
  min-height: 20px;
}
.footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1f5;
  background: #fff;
  justify-content: flex-end;
  gap: 10px;
  :deep(.button.primary) {
    min-width: 154px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
  }
}
.footer-progress {
  min-width: 154px;
  color: $themeColor;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.ai-dialog.review-mode .footer {
  margin-top: 10px;
  padding-top: 10px;
  :deep(.button.primary) {
    height: 36px;
    line-height: 36px;
  }
}

@media (max-width: 900px) {
  .ai-dialog.review-mode {
    height: calc(100vh - 64px);
  }
  .setup-primary-grid,
  .sample-detail-layout {
    grid-template-columns: 1fr;
  }
  .sample-canvas {
    justify-self: center;
    max-width: 100%;
  }
  .sample-preview-column {
    order: -1;
  }
  .compact-template-panel .sample-template-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .draft-workspace {
    grid-template-columns: 1fr;
  }
  .draft-page-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 3px 8px;
  }
  .draft-page-item {
    width: 160px;
    flex-shrink: 0;
    + .draft-page-item {
      margin-top: 0;
    }
  }
}

@media (max-width: 640px) {
  .workflow-step {
    gap: 4px;
    font-size: 12px;
  }
  .step-no {
    width: 20px;
    height: 20px;
  }
  .sample-carousel-shell {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 5px;
  }
  .sample-carousel-arrow {
    width: 30px;
    height: 30px;
  }
  .sample-feedback-action {
    grid-template-columns: 1fr;
  }
  .sample-detail-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    small {
      max-width: none;
      text-align: left;
      white-space: normal;
    }
  }
  .compact-template-panel .sample-template-picker {
    grid-template-columns: 1fr;
  }
  .draft-status,
  .draft-preview-toolbar,
  .sample-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .footer {
    flex-wrap: wrap;
  }
}
</style>