  <section
    class="workbench-ai-mode"
    :class="{ 'has-conversation': conversationStarted }"
    aria-label="小财管家 AI 模式"
  >
    <input
      ref="fileInputRef"
      class="workbench-ai-file-input"
      type="file"
      multiple
      accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx"
      :disabled="isAiModeInputLocked"
      @change="handleAiModeFilesChange"
    />

    <Transition name="workbench-ai-panel-swap" mode="out-in" appear>
      <div v-if="!conversationStarted" key="welcome" class="workbench-ai-shell workbench-ai-home">
        <div class="workbench-ai-orb" aria-hidden="true">
          <img
            :src="orbIcon"
            class="workbench-ai-orb__image"
            alt=""
          />
        </div>

        <div class="workbench-ai-copy">
          <h2>嗨，{{ displayUserName }}，我是您的小财管家</h2>
          <p>您可以直接向我提问，或选择下方推荐主题，快速完成费用相关事务</p>
        </div>

        <WorkbenchAiComposer
          :runtime="workbenchAiRuntime"
          placeholder="今天我能帮您做点什么？"
        />
        <WorkbenchAiFileStrip :runtime="workbenchAiRuntime" />

        <div class="workbench-ai-quick-start-section">
          <h3 class="workbench-ai-quick-start-title">快速开始</h3>
          <div class="workbench-ai-action-row" aria-label="推荐主题">
            <button
              v-for="item in aiModeActionItems"
              :key="item.label"
              type="button"
              class="workbench-ai-action"
              :disabled="isAiModeInputLocked"
              @click="runAiModeAction(item)"
            >
              <div class="action-icon-wrapper">
                <i :class="item.icon"></i>
              </div>
              <div class="action-text">
                <strong>{{ item.label }}</strong>
                <p>{{ item.prompt }}</p>
              </div>
            </button>
          </div>
        </div>
      </div>

      <div v-else key="conversation" class="workbench-ai-conversation">
        <div class="workbench-ai-conversation-actions" aria-label="对话操作">
          <button type="button" title="回到对话顶部" aria-label="回到对话顶部" @click="scrollInlineConversationToTop">
            <i class="mdi mdi-arrow-up"></i>
          </button>
          <button
            type="button"
            class="danger"
            title="删除当前对话"
            aria-label="删除当前对话"
            :disabled="!conversationMessages.length"
            @click="requestDeleteCurrentConversation"
          >
            <i class="mdi mdi-trash-can-outline"></i>
          </button>
        </div>

        <div
          ref="conversationScrollRef"
          class="workbench-ai-thread"
          aria-live="polite"
          @scroll.passive="handleInlineConversationScroll"
        >
          <div v-if="conversationMessages.length === 0" class="workbench-ai-empty-thread">
            <strong>{{ activeConversationTitle || '新对话' }}</strong>
            <p>直接输入问题，小财管家会在当前页面内持续回复。</p>
          </div>

          <article
            v-for="message in conversationMessages"
            :key="message.id"
            class="workbench-ai-message"
            :class="`is-${message.role}`"
          >
            <div v-if="message.role === 'user'" class="workbench-ai-user-bubble">
              {{ message.content }}
            </div>
            <div v-if="message.role === 'user'" class="workbench-ai-message-actions">
              <button type="button" title="引用" aria-label="引用" @click="quoteInlineMessage(message)">
                <i class="mdi mdi-format-quote-open"></i>
              </button>
              <button type="button" title="复制" aria-label="复制" @click="copyInlineMessage(message)">
                <i class="mdi mdi-content-copy"></i>
              </button>
              <time class="workbench-ai-message-time">{{ formatMessageTime(message.createdAt) }}</time>
            </div>

            <template v-else>
              <div
                class="workbench-ai-answer-card"
                :class="{ pending: message.pending, 'has-thinking': hasInlineThinking(message) }"
              >
                <div
                  v-if="hasInlineThinking(message)"
                  class="workbench-ai-thinking-panel"
                  :class="{
                    'is-expanded': isInlineThinkingExpanded(message),
                    'is-collapsed': !isInlineThinkingExpanded(message),
                    'is-running': message.pending
                  }"
                >
                  <button
                    v-if="!isInlineThinkingExpanded(message)"
                    type="button"
                    class="workbench-ai-thinking-toggle"
                    aria-expanded="false"
                    @click="toggleInlineThinking(message)"
                  >
                    <span class="workbench-ai-thinking-toggle-left">
                      <span class="workbench-ai-thinking-dot" aria-hidden="true"></span>
                      <strong>小财业务思考</strong>
                      <small>{{ resolveInlineThinkingEvents(message).length }} 条</small>
                    </span>
                    <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
                  </button>

                  <div v-else class="workbench-ai-thinking-expanded">
                    <button
                      type="button"
                      class="workbench-ai-thinking-collapse-btn"
                      aria-label="折叠小财业务思考"
                      @click="toggleInlineThinking(message)"
                    >
                      <i class="mdi mdi-chevron-up" aria-hidden="true"></i>
                    </button>

                    <Transition name="workbench-ai-thinking-collapse" appear>
                      <div
                        class="workbench-ai-thinking-list"
                        aria-label="小财业务思考明细"
                      >
                        <div
                          v-for="event in resolveInlineThinkingEvents(message)"
                          :key="event.eventId || `${message.id}-${event.title}`"
                          class="workbench-ai-thinking-item"
                          :class="`is-${event.status || 'completed'}`"
                        >
                          <span class="workbench-ai-thinking-dot" aria-hidden="true"></span>
                          <div>
                            <strong>{{ event.title || '正在分析' }}</strong>
                            <p v-if="event.content">{{ event.content }}</p>
                          </div>
                        </div>
                      </div>
                    </Transition>
                  </div>
                </div>

                <div
                  v-if="hasInlineAttachmentOcrDetails(message)"
                  class="workbench-ai-ocr-detail-panel"
                  :class="{ 'is-expanded': isInlineAttachmentOcrExpanded(message) }"
                >
                  <button
                    type="button"
                    class="workbench-ai-ocr-detail-toggle"
                    :aria-expanded="isInlineAttachmentOcrExpanded(message)"
                    @click="toggleInlineAttachmentOcrDetails(message)"
                  >
                    <span class="workbench-ai-ocr-detail-toggle-left">
                      <span class="workbench-ai-ocr-detail-dot" aria-hidden="true"></span>
                      <strong>附件识别明细</strong>
                      <small>{{ resolveInlineAttachmentOcrFileCount(message) }} 份</small>
                    </span>
                    <i
                      class="mdi"
                      :class="isInlineAttachmentOcrExpanded(message) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                      aria-hidden="true"
                    ></i>
                  </button>

                  <Transition name="workbench-ai-thinking-collapse" appear>
                    <div
                      v-if="isInlineAttachmentOcrExpanded(message)"
                      class="workbench-ai-ocr-detail-body"
                      aria-label="附件 OCR 识别明细"
                    >
                      <article
                        v-for="(document, documentIndex) in resolveInlineAttachmentOcrDocuments(message)"
                        :key="`${message.id}-ocr-${document.filename}-${documentIndex}`"
                        class="workbench-ai-ocr-document"
                      >
                        <header class="workbench-ai-ocr-document__head">
                          <strong>{{ document.filename }}</strong>
                          <span>{{ document.fields.length }} 项</span>
                        </header>
                        <p v-if="document.summary" class="workbench-ai-ocr-document__summary">
                          {{ document.summary }}
                        </p>
                        <div v-if="document.fields.length" class="workbench-ai-ocr-document__fields">
                          <div
                            v-for="field in document.fields"
                            :key="`${message.id}-${document.filename}-${field.label}-${field.value}`"
                            class="workbench-ai-ocr-document__field"
                          >
                            <span>{{ field.label }}</span>
                            <strong>{{ field.value }}</strong>
                          </div>
                        </div>
                      </article>
                    </div>
                  </Transition>
                </div>

                <div
                  v-if="message.content"
                  class="workbench-ai-answer-markdown"
                  @click.capture="handleAiAnswerMarkdownClick($event)"
                  v-html="renderInlineConversationHtml(message.content)"
                ></div>

                <Transition name="structured-card-reveal" appear>
                  <div
                    v-if="message.applicationPreview"
                    class="workbench-ai-application-preview application-preview-shell"
                    aria-label="申请信息核对结果"
                  >
                    <div
                      class="application-preview-table"
                      role="table"
                      aria-label="申请信息核对表"
                    >
                      <div class="application-preview-row head" role="row">
                        <span role="columnheader">字段</span>
                        <span role="columnheader">内容</span>
                      </div>
                      <div
                        v-for="row in resolveInlineApplicationPreviewRows(message)"
                        :key="`${message.id}-${row.key}`"
                        class="application-preview-row"
                        :class="{
                          missing: row.missing,
                          editable: row.editable,
                          highlight: row.highlight,
                          'is-disabled': isApplicationPreviewEstimatePending(message)
                        }"
                        role="row"
                        :tabindex="row.editable && !isApplicationPreviewEstimatePending(message) ? 0 : -1"
                        :aria-label="row.editable ? `编辑${row.label}` : row.label"
                        @click.stop="row.editable && !isApplicationPreviewEstimatePending(message) && !isApplicationPreviewEditing(message, row.key) && openApplicationPreviewEditor(message, row.key, row.value)"
                        @keydown.enter.prevent="row.editable && !isApplicationPreviewEstimatePending(message) && !isApplicationPreviewEditing(message, row.key) && openApplicationPreviewEditor(message, row.key, row.value)"
                        @keydown.space.prevent="row.editable && !isApplicationPreviewEstimatePending(message) && !isApplicationPreviewEditing(message, row.key) && openApplicationPreviewEditor(message, row.key, row.value)"
                      >
                        <span class="application-preview-label" role="cell">{{ row.label }}</span>
                        <span class="application-preview-value" role="cell">
                          <input
                            v-if="isApplicationPreviewEditing(message, row.key) && resolveInlineApplicationPreviewEditorControl(row.key) === 'date'"
                            v-model="applicationPreviewEditor.draftValue"
                            :class="['application-preview-input', 'application-preview-date-input', `application-preview-input--${row.key}`]"
                            type="date"
                            :min="resolveInlineApplicationPreviewEditorDateMin(message, row.key)"
                            :max="resolveInlineApplicationPreviewEditorDateMax(message, row.key)"
                            autofocus
                            :disabled="isApplicationPreviewEstimatePending(message)"
                            @click.stop
                            @change="commitInlineApplicationPreviewEditor(message)"
                            @keydown.stop="handleInlineApplicationPreviewEditorKeydown($event, message)"
                            @blur="commitInlineApplicationPreviewEditor(message)"
                          />
                          <input
                            v-else-if="isApplicationPreviewEditing(message, row.key) && resolveInlineApplicationPreviewEditorControl(row.key) === 'text'"
                            v-model="applicationPreviewEditor.draftValue"
                            :class="['application-preview-input', `application-preview-input--${row.key}`]"
                            type="text"
                            autofocus
                            :disabled="isApplicationPreviewEstimatePending(message)"
                            @click.stop
                            @keydown.stop="handleInlineApplicationPreviewEditorKeydown($event, message)"
                            @blur="commitInlineApplicationPreviewEditor(message)"
                          />
                          <select
                            v-else-if="isApplicationPreviewEditing(message, row.key) && resolveInlineApplicationPreviewEditorControl(row.key) === 'select'"
                            v-model="applicationPreviewEditor.draftValue"
                            :class="['application-preview-input', 'application-preview-select', `application-preview-input--${row.key}`]"
                            autofocus
                            :disabled="isApplicationPreviewEstimatePending(message)"
                            @click.stop
                            @change="commitInlineApplicationPreviewEditor(message)"
                            @keydown.stop="handleInlineApplicationPreviewEditorKeydown($event, message)"
                            @blur="commitInlineApplicationPreviewEditor(message)"
                          >
                            <option value="">请选择</option>
                            <option
                              v-for="option in resolveApplicationPreviewEditorOptions(row.key)"
                              :key="`${message.id}-${row.key}-${option}`"
                              :value="option"
                            >
                              {{ option }}
                            </option>
                          </select>
                          <template v-else>
                            <span class="application-preview-text">{{ row.value }}</span>
                            <button
                              v-if="row.editable"
                              type="button"
                              class="application-preview-edit-btn"
                              title="修改内容"
                              aria-label="修改内容"
                              :disabled="isApplicationPreviewEstimatePending(message)"
                              @click.stop="openApplicationPreviewEditor(message, row.key, row.value)"
                            >
                              <i class="mdi mdi-pencil-outline"></i>
                            </button>
                          </template>
                        </span>
                      </div>
                    </div>

                    <div
                      v-if="resolveInlineApplicationPreviewMissingFields(message).length"
                      class="application-preview-footer application-preview-footer-missing"
                      aria-live="polite"
                    >
                      <span class="application-preview-missing-prefix">当前还需要补充：</span>
                      <span class="application-preview-missing-list">
                        <template
                          v-for="(field, index) in resolveInlineApplicationPreviewMissingFields(message)"
                          :key="`${message.id}-missing-${field}`"
                        >
                          <span class="application-preview-missing-chip">{{ field }}</span>
                          <span
                            v-if="index < resolveInlineApplicationPreviewMissingFields(message).length - 1"
                            class="application-preview-missing-separator"
                          >、</span>
                        </template>
                      </span>
                      <span class="application-preview-missing-suffix">。点击表格字段补齐后，费用测算会自动刷新。</span>
                    </div>
                    <div
                      v-else-if="buildInlineApplicationPreviewFooterText(message)"
                      class="application-preview-footer workbench-ai-answer-markdown"
                      v-html="renderInlineConversationHtml(buildInlineApplicationPreviewFooterText(message))"
                    ></div>
                  </div>
                </Transition>

                <div
                  v-if="!message.content && !message.applicationPreview && message.pending && !hasInlineThinking(message)"
                  class="workbench-ai-pending-line"
                >
                  小财管家正在识别任务、拆解流程并准备下一步建议...
                </div>

                <div v-if="canShowInlineSuggestedActions(message)" class="workbench-ai-suggested-actions">
                  <button
                    v-for="action in message.suggestedActions"
                    :key="`${message.id}-${action.label}`"
                    type="button"
                    :disabled="isInlineSuggestedActionDisabled(action, message)"
                    @click="handleInlineSuggestedAction(action, message)"
                  >
                    <i :class="action.icon || 'mdi mdi-arrow-right-circle-outline'"></i>
                    <span>{{ action.label }}</span>
                  </button>
                </div>
              </div>
              <div v-if="!message.pending" class="workbench-ai-message-actions" aria-label="消息操作">
                <button type="button" title="复制" aria-label="复制" @click="copyInlineMessage(message)">
                  <i class="mdi mdi-content-copy"></i>
                </button>
                <button type="button" title="有帮助" aria-label="有帮助" @click="markInlineMessageFeedback(message, 'up')">
                  <i class="mdi mdi-thumb-up-outline"></i>
                </button>
                <button type="button" title="无帮助" aria-label="无帮助" @click="markInlineMessageFeedback(message, 'down')">
                  <i class="mdi mdi-thumb-down-outline"></i>
                </button>
                <button type="button" title="重新生成" aria-label="重新生成" @click="regenerateLastReply">
                  <i class="mdi mdi-refresh"></i>
                </button>
                <time class="workbench-ai-message-time">{{ formatMessageTime(message.createdAt) }}</time>
              </div>
            </template>
          </article>
        </div>

        <div class="workbench-ai-conversation-bottom">
          <WorkbenchAiFileStrip inline :runtime="workbenchAiRuntime" />
          <WorkbenchAiComposer
            inline
            :runtime="workbenchAiRuntime"
            placeholder="继续和小财管家对话..."
          />

          <p class="workbench-ai-disclaimer">小财管家可能会出错，重要费用事项请核对单据、制度与审批结果。</p>
        </div>
      </div>
    </Transition>

    <WorkbenchAiFilePreviewDialog :runtime="workbenchAiRuntime" />

    <Transition name="workbench-ai-confirm-fade">
      <div v-if="deleteDialogOpen" class="workbench-ai-confirm-mask" role="presentation" @click.self="cancelDeleteConversation">
        <div
          class="workbench-ai-confirm-dialog"
          role="dialog"
          aria-modal="true"
          aria-labelledby="workbench-ai-delete-title"
        >
          <h3 id="workbench-ai-delete-title">删除当前对话？</h3>
          <p>删除后，左侧最近对话中的这条记录也会被移除。这个操作无法恢复。</p>
          <div class="workbench-ai-confirm-actions">
            <button type="button" class="ghost" @click="cancelDeleteConversation">取消</button>
            <button type="button" class="danger" @click="confirmDeleteConversation">删除对话</button>
          </div>
        </div>
      </div>
    </Transition>

    <Transition name="workbench-ai-confirm-fade">
      <div
        v-if="applicationSubmitConfirmOpen"
        class="workbench-ai-confirm-mask"
        role="presentation"
        @click.self="cancelInlineApplicationSubmitConfirm"
      >
        <div
          class="workbench-ai-confirm-dialog"
          role="dialog"
          aria-modal="true"
          aria-labelledby="workbench-ai-submit-confirm-title"
        >
          <h3 id="workbench-ai-submit-confirm-title">确认直接提交申请？</h3>
          <p>确认后系统会先查询你名下相同日期的申请单；若发现重复或重叠日期，会停止提交并列出已有单据供你查看。</p>
          <p>若核查通过，申请单会直接进入审批流程。</p>
          <div class="workbench-ai-confirm-actions">
            <button type="button" class="ghost" @click="cancelInlineApplicationSubmitConfirm">取消</button>
            <button type="button" class="primary" :disabled="sending" @click="confirmInlineApplicationSubmit">确认直接提交</button>
          </div>
        </div>
      </div>
    </Transition>
  </section>
