PPT/src/views/Editor/EnglishSpeaking/preview/DialogueChatView.vue

<template>
  <div class="dialogue-chat-view">
    <!-- ── HEADER ── -->
    <div class="chat-header">
      <div class="header-left">
        <div
          class="ai-avatar"
          :class="{ breathing: state === 'idle' || state === 'ai_thinking' }"
        >{{ aiAvatar }}</div>
        <span class="ai-name">{{ aiName }}</span>

        <span v-if="state === 'idle' && showIdleHint" class="idle-hint fade-in">
          在等你的回答...
        </span>
        <span
          v-else-if="state !== 'idle' && state !== 'ai_thinking'"
          class="online-dot"
          title="在线"
        />
      </div>

      <div class="header-right">
        <span class="round-indicator">{{ currentRound }} / {{ totalRounds }} 轮</span>
        <span v-if="engine.countdownSeconds.value != null" class="total-time">
          {{ formatSeconds(engine.countdownSeconds.value) }}
        </span>
        <button class="icon-btn" title="更多操作" @click="showExitConfirm = true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 麦克风权限引导 -->
    <div v-if="recorder.permissionState.value === 'denied'" class="permission-banner">
      <span class="permission-icon">🎤</span>
      <span>麦克风权限已被拒绝，请在浏览器设置中开启后刷新页面</span>
    </div>

    <!-- ── CHAT AREA ── -->
    <div ref="chatContainerRef" class="chat-area">
      <template v-for="message in engine.messages.value" :key="message.id">
        <!-- AI 消息 -->
        <div v-if="message.role === 'ai'" class="msg-row msg-ai fade-in">
          <div class="avatar-sm">{{ aiAvatar }}</div>
          <div class="msg-col">
            <!-- 音频条 -->
            <div v-if="message.content || message.status === 'done'" class="voice-bar voice-ai">
              <button
                class="play-btn play-ai"
                :class="{ 'play-btn-error': player.errorId.value === message.id }"
                @click="togglePlay(message.id)"
              >
                <svg
                  v-if="player.loadingId.value === message.id"
                  class="play-spinner"
                  width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2" stroke-linecap="round"
                >
                  <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                </svg>
                <svg
                  v-else-if="player.playingId.value === message.id"
                  width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
                >
                  <rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" />
                </svg>
                <svg
                  v-else-if="player.errorId.value === message.id"
                  width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                >
                  <path d="M12 9v4" />
                  <path d="M12 17h.01" />
                  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                </svg>
                <svg
                  v-else
                  width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
                >
                  <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
              </button>
              <div class="wave-bar-group">
                <div
                  v-for="i in 14"
                  :key="i"
                  class="wave-bar wave-ai"
                  :style="{ height: `${Math.abs(Math.sin(i * 0.7)) * 8 + 3}px` }"
                />
              </div>
              <span
                v-if="player.errorId.value === message.id"
                class="play-error-hint"
              >点击重试</span>
              <span
                v-else
                class="voice-duration voice-duration-ai"
              >0:04</span>
            </div>

            <!-- 英文文本 -->
            <div v-if="showEnglishText && message.content" class="bubble bubble-ai">
              {{ message.content }}
            </div>

            <!-- 流式加载中 -->
            <div v-if="message.status === 'loading' && !message.content" class="typing-bubble">
              <span class="typing-dot" style="animation-delay: 0ms" />
              <span class="typing-dot" style="animation-delay: 150ms" />
              <span class="typing-dot" style="animation-delay: 300ms" />
            </div>

            <!-- AI 错误 -->
            <div v-if="message.status === 'error'" class="error-card">
              <span class="error-text">{{ message.error || '生成失败' }}</span>
              <button
                v-if="hasRetryButton(message)"
                class="retry-btn"
                :disabled="engine.greetingInflight.value"
                @click="handleRetry(message)"
              >{{ retryButtonLabel(message) }}</button>
            </div>
          </div>
        </div>

        <!-- 学生消息 -->
        <div v-else class="msg-row msg-student fade-in">
          <!-- 音频条（橙色） -->
          <div v-if="message.content || message.status !== 'loading'" class="voice-bar voice-student">
            <span
              v-if="player.errorId.value === message.id"
              class="play-error-hint play-error-hint-student"
            >点击重试</span>
            <span
              v-else
              class="voice-duration voice-duration-student"
            >0:04</span>
            <div class="wave-bar-group">
              <div
                v-for="i in 14"
                :key="i"
                class="wave-bar wave-student"
                :style="{ height: `${Math.abs(Math.sin(i * 0.7)) * 8 + 3}px` }"
              />
            </div>
            <button
              class="play-btn play-student"
              :class="{ 'play-btn-error': player.errorId.value === message.id }"
              @click="togglePlay(message.id)"
            >
              <svg
                v-if="player.loadingId.value === message.id"
                class="play-spinner"
                width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round"
              >
                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
              </svg>
              <svg
                v-else-if="player.playingId.value === message.id"
                width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
              >
                <rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" />
              </svg>
              <svg
                v-else-if="player.errorId.value === message.id"
                width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              >
                <path d="M12 9v4" />
                <path d="M12 17h.01" />
                <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
              </svg>
              <svg
                v-else
                width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
              >
                <polygon points="5 3 19 12 5 21 5 3" />
              </svg>
            </button>
          </div>

          <!-- 英文识别文本（带高亮） -->
          <div v-if="showEnglishText && message.content" class="bubble bubble-student">
            <template v-if="message.evaluation?.wordAnalysis">
              <template v-for="(word, idx) in message.content.split(' ')" :key="idx">
                <span
                  v-if="getWordAnalysis(message, word)?.status === 'improvable'"
                  class="improvable-word"
                  @click="openPhonemeDetail(getWordAnalysis(message, word)!)"
                >{{ word }}</span>
                <span v-else>{{ word }}</span>
                {{ ' ' }}
              </template>
            </template>
            <template v-else>{{ message.content }}</template>
          </div>

          <!-- 学生错误 -->
          <div v-if="message.status === 'error'" class="error-card">
            <span class="error-text">{{ message.error || '发送失败' }}</span>
            <button
              v-if="hasRetryButton(message)"
              class="retry-btn"
              @click="handleRetry(message)"
            >{{ retryButtonLabel(message) }}</button>
            <button
              v-if="hasRerecordButton(message)"
              class="rerecord-btn"
              @click="handleRerecord(message)"
            >重录</button>
          </div>

          <!-- L1 评分卡 -->
          <div v-if="message.evaluation" class="eval-card">
            <div class="eval-l1">
              <div class="dim-row">
                <span class="dim-label">准确</span>
                <DimBadge :level="message.evaluation.dimensions.accuracy" />
                <span class="dim-sep">|</span>
                <span class="dim-label">流畅</span>
                <DimBadge :level="message.evaluation.dimensions.fluency" />
                <span class="dim-sep">|</span>
                <span class="dim-label">完整</span>
                <DimBadge :level="message.evaluation.dimensions.completeness" />
                <span class="dim-sep">|</span>
                <span class="dim-label">节奏</span>
                <DimBadge :level="message.evaluation.dimensions.rhythm" />
              </div>
              <div class="sugg-row">
                <p class="sugg-text">
                  <span class="sugg-icon">💡</span>
                  <span class="truncate">{{ message.evaluation.suggestion }}</span>
                </p>
                <button class="detail-toggle" @click="toggleExpand(message.id)">
                  {{ expandedMessageId === message.id ? '收起' : '详情' }}
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    :class="{ 'chev-up': expandedMessageId === message.id }">
                    <polyline points="6 9 12 15 18 9" />
                  </svg>
                </button>
              </div>
            </div>

            <div v-if="expandedMessageId === message.id" class="eval-l2 fade-in">
              <div v-if="message.evaluation.betterExpression" class="better-exp">
                <p class="detail-label"><span>✨</span> Better expression:</p>
                <p class="detail-content">{{ message.evaluation.betterExpression }}</p>
              </div>
              <div v-if="message.evaluation.suggestedWords?.length" class="suggested-words">
                <p class="detail-label"><span>🎯</span> Try these words:</p>
                <div class="word-tags">
                  <span v-for="(w, i) in message.evaluation.suggestedWords" :key="i" class="word-tag">{{ w }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- AI 思考（STT 或 ai_thinking 且无占位消息时展示） -->
      <div
        v-if="(state === 'stt' || state === 'ai_thinking') && !hasLoadingPlaceholder"
        class="msg-row msg-ai fade-in"
      >
        <div class="avatar-sm">{{ aiAvatar }}</div>
        <div class="typing-bubble">
          <span class="typing-dot" style="animation-delay: 0ms" />
          <span class="typing-dot" style="animation-delay: 150ms" />
          <span class="typing-dot" style="animation-delay: 300ms" />
        </div>
      </div>
    </div>

    <!-- 沉默提示浮层 -->
    <div v-if="state === 'recording' && silenceHintText" class="silence-hint-wrap">
      <div class="silence-hint fade-in">
        <span class="silence-icon">💡</span>
        <p class="silence-text">{{ silenceHintText }}</p>
        <button class="silence-close" @click="silenceHintText = ''">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      </div>
    </div>

    <!-- ── CONTROL ZONE ── -->
    <div class="control-zone">
      <!-- 进度条（仅录音时可见） -->
      <div class="progress-wrap">
        <div
          class="progress-track"
          :style="{ background: state === 'recording' ? '#f3f4f6' : 'transparent' }"
        >
          <div
            class="progress-fill"
            :class="{ 'near-limit': isNearLimit }"
            :style="{
              width: state === 'recording' ? `${progressPct}%` : '0%',
              opacity: state === 'recording' ? 1 : 0,
            }"
          />
        </div>
      </div>

      <!-- 状态叠放区 -->
      <div class="state-stack">
        <!-- idle -->
        <div
          class="state-layer state-idle"
          :style="stateStyle('idle')"
        >
          <button class="hint-btn" @click="openTaskHint">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M9 18h6" /><path d="M10 22h4" />
              <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
            </svg>
            提示
          </button>
          <button
            class="mic-btn"
            :disabled="!engine.canRecord.value"
            @click="handleStartRecording"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
              <line x1="12" y1="19" x2="12" y2="23" />
              <line x1="8" y1="23" x2="16" y2="23" />
            </svg>
            开始录音
          </button>
        </div>

        <!-- starting -->
        <div class="state-layer state-starting" :style="stateStyle('starting')">
          <div class="record-capsule">
            <button class="cancel-btn" @click="handleCancelStarting">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
              </svg>
              取消
            </button>
            <div class="record-meter">
              <svg class="spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round">
                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
              </svg>
              <span class="record-time">准备录音中...</span>
            </div>
            <button class="finish-btn" disabled>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
              完成
            </button>
          </div>
        </div>

        <!-- recording -->
        <div class="state-layer state-recording" :style="stateStyle('recording')">
          <div class="record-capsule">
            <button class="cancel-btn" @click="handleCancelRecording">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
              </svg>
              取消
            </button>
            <div class="record-meter">
              <div class="animated-wave">
                <div
                  v-for="i in 7"
                  :key="i"
                  class="aw-bar"
                  :class="{ 'near-limit': isNearLimit }"
                  :style="{
                    height: `${Math.abs(Math.sin(i * 0.9)) * 9 + 3}px`,
                    animationDelay: `${(i - 1) * 0.1}s`,
                  }"
                />
              </div>
              <span class="record-time" :class="{ 'near-limit': isNearLimit }">
                {{ formatSeconds(recorder.recordingDuration.value) }}
              </span>
              <span class="record-time-max">/ {{ formatSeconds(MAX_RECORDING_SECONDS) }}</span>
            </div>
            <button class="finish-btn" @click="handleFinishRecording">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
              完成
            </button>
          </div>
        </div>

        <!-- stt -->
        <div class="state-layer state-center" :style="stateStyle('stt')">
          <svg class="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round">
            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
          </svg>
          <span class="center-text">正在识别语音...</span>
        </div>

        <!-- ai_thinking -->
        <div class="state-layer state-center" :style="stateStyle('ai_thinking')">
          <div class="mini-avatar">{{ aiAvatar }}</div>
          <span class="center-text">{{ aiName }} 正在回复...</span>
        </div>

        <!-- error -->
        <div class="state-layer state-error" :style="stateStyle('error')">
          <div class="error-info">
            <span class="warn-icon">⚠️</span>
            <span class="warn-text">{{ lastErrorText }}</span>
          </div>
          <button
            v-if="lastErroredMessage && hasRetryButton(lastErroredMessage)"
            class="retry-pill"
            @click="handleRetry(lastErroredMessage)"
          >{{ retryButtonLabel(lastErroredMessage) }}</button>
        </div>

        <!-- finalizing -->
        <div class="state-layer state-center" :style="stateStyle('finalizing')">
          <svg class="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round">
            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
          </svg>
          <span class="center-text">正在生成你的本次对话报告...</span>
        </div>
      </div>
    </div>

    <!-- ─────── OVERLAYS ─────── -->

    <!-- 任务提示弹窗 -->
    <TaskHintModal
      :visible="showHintModal"
      :loading="taskHintLoading"
      :error="taskHintError"
      :hint="taskHint"
      :ai-name="aiName"
      @close="showHintModal = false"
      @retry="loadTaskHint"
    />

    <!-- 音素详情弹窗 -->
    <div v-if="phonemeDetail" class="modal-mask" @click.self="phonemeDetail = null">
      <div class="modal phoneme-modal scale-in">
        <div class="modal-head">
          <div>
            <h3 class="phoneme-word">{{ phonemeDetail.word }}</h3>
            <p class="phoneme-sub">发音详情</p>
          </div>
          <button class="close-btn" @click="phonemeDetail = null">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>
        </div>

        <div class="phoneme-body">
          <div class="pho-card pho-user">
            <div>
              <p class="pho-label">你的发音</p>
              <p class="pho-value">{{ phonemeDetail.userPronunciation }}</p>
            </div>
            <button class="pho-play pho-play-user">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg>
            </button>
          </div>
          <div class="pho-card pho-standard">
            <div>
              <p class="pho-label">标准发音</p>
              <p class="pho-value pho-value-green">{{ phonemeDetail.standardPronunciation }}</p>
            </div>
            <button class="pho-play pho-play-standard">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg>
            </button>
          </div>
          <div v-if="phonemeDetail.tip" class="pho-card pho-tip">
            <p class="pho-label">小提示</p>
            <p class="pho-tip-text">{{ phonemeDetail.tip }}</p>
          </div>

          <button class="pho-practice-btn" @click="practiceThisWord">
            针对这个词重练一次
          </button>
        </div>
      </div>
    </div>

    <!-- 退出/重开确认弹窗 -->
    <div v-if="showExitConfirm" class="modal-mask" @click.self="showExitConfirm = false">
      <div class="modal exit-modal scale-in">
        <div class="modal-head">
          <h3 class="modal-title">选择操作</h3>
          <button class="close-btn" @click="showExitConfirm = false">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>
        </div>
        <p class="exit-hint">请选择你的操作：</p>
        <div class="exit-actions">
          <button class="exit-secondary" @click="showExitConfirm = false">继续练习</button>
          <button class="exit-secondary" @click="handleRestart">重新开始</button>
          <button class="exit-primary" @click="handleExitConfirm">结束并查看报告</button>
        </div>
      </div>
    </div>

    <!-- 徽章弹窗 -->
    <div v-if="showBadge" class="badge-popup scale-in">
      <div class="badge-card">
        <span class="badge-icon">{{ showBadge.icon }}</span>
        <div>
          <p class="badge-name">{{ showBadge.name }}</p>
          <p class="badge-desc">{{ showBadge.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick, h, defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { PreviewChatMessage, BadgeAchievement, DialogueReport, SessionStartInfo, TaskHint } from '@/types/englishSpeaking'
import { useDialogueEngine } from '../composables/useDialogueEngine'
import { useAudioRecorder } from '../composables/useAudioRecorder'
import { useAudioPlayer } from '../composables/useAudioPlayer'
import TaskHintModal from './TaskHintModal.vue'
import { createDialogueApi } from '../services/llmService'

// ─────────────────────────────────────────────
// Props / Emits
// ─────────────────────────────────────────────

interface Props {
  topic?: string
  keywords?: string[]
  aiName?: string
  aiAvatar?: string
  totalRounds?: number
  showEnglishText?: boolean
  showChineseText?: boolean
  sessionInfo?: SessionStartInfo | null
}

const props = withDefaults(defineProps<Props>(), {
  topic: '我最喜欢的动物',
  keywords: () => ['animal', 'zoo', 'cute', 'favorite'],
  aiName: 'Tom',
  aiAvatar: '😊',
  totalRounds: 3,
  showEnglishText: true,
  showChineseText: false,
  sessionInfo: null,
})

const emit = defineEmits<{
  complete: [report: DialogueReport | null]
  restart: []
}>()

// ─────────────────────────────────────────────
// Config
// ─────────────────────────────────────────────

const MAX_RECORDING_SECONDS = 60

const SILENCE_HINTS = [
  'You could say: "I really like pandas because they are so cute!"',
  'Try: "My favorite animal is the elephant. It\'s very smart."',
  'You could say: "I went to the zoo last weekend with my family."',
]

const BADGE_CONFIG: Record<string, BadgeAchievement> = {
  smooth_talker: { id: 'smooth_talker', name: '流畅达人', nameEn: 'Smooth Talker', icon: '💬', description: '连续3句流畅度优秀' },
  pronunciation_pro: { id: 'pronunciation_pro', name: '发音专家', nameEn: 'Pronunciation Pro', icon: '🎯', description: '连续5句发音准确' },
  perfect_round: { id: 'perfect_round', name: '完美一轮', nameEn: 'Perfect Round', icon: '⭐', description: '单轮四维度全优' },
}

// ─────────────────────────────────────────────
// Composables
// ─────────────────────────────────────────────

const engine = useDialogueEngine()
const recorder = useAudioRecorder()
const player = useAudioPlayer()

// ─────────────────────────────────────────────
// Local UI State
// ─────────────────────────────────────────────

const chatContainerRef = ref<HTMLDivElement>()
const expandedMessageId = ref<string | null>(null)
const showHintModal = ref(false)
const taskHint = ref<TaskHint | null>(null)
const taskHintLoading = ref(false)
const taskHintError = ref<string | null>(null)
const taskHintApi = createDialogueApi()
const showExitConfirm = ref(false)
const phonemeDetail = ref<{
  word: string
  userPronunciation?: string
  standardPronunciation?: string
  tip?: string
} | null>(null)

const silenceHintText = ref('')
const showIdleHint = ref(false)
let idleHintTimer: ReturnType<typeof setTimeout> | null = null

const isStarting = ref(false)
const reportFetchInflight = ref(false)
let startAbortController: AbortController | null = null

// 徽章
const showBadge = ref<BadgeAchievement | null>(null)
const consecutiveFluent = ref(0)
const consecutiveAccurate = ref(0)
let badgeTimer: ReturnType<typeof setTimeout> | null = null

// ─────────────────────────────────────────────
// Derived State
// ─────────────────────────────────────────────

const currentRound = computed(() => engine.currentRound.value)

// 状态机：starting → recording → stt → ai_thinking → idle / error / finalizing / done
const state = computed<
  'idle' | 'starting' | 'recording' | 'stt' | 'ai_thinking' | 'finalizing' | 'error' | 'done'
>(() => {
  if (isStarting.value) return 'starting'
  if (recorder.isRecording.value) return 'recording'
  if (engine.isComplete.value) return reportFetchInflight.value ? 'finalizing' : 'done'

  const msgs = engine.messages.value
  const last = msgs[msgs.length - 1]

  if (last?.status === 'error') return 'error'

  // 学生消息 loading 且无 content → 正在 STT
  if (last?.role === 'student' && last.status === 'loading' && !last.content) return 'stt'

  if (engine.isProcessing.value) return 'ai_thinking'

  return 'idle'
})

// stt/ai_thinking 时，若最后一条已是 loading 的 AI 占位消息，列表里已有 typing-bubble，就不再在末尾叠一个
const hasLoadingPlaceholder = computed(() => {
  const msgs = engine.messages.value
  const last = msgs[msgs.length - 1]
  return last?.status === 'loading' && last.role === 'ai' && !last.content
})

const progressPct = computed(() => Math.min((recorder.recordingDuration.value / MAX_RECORDING_SECONDS) * 100, 100))
const isNearLimit = computed(() => recorder.recordingDuration.value >= MAX_RECORDING_SECONDS * 0.8)

const lastErrorText = computed(() => {
  const msgs = engine.messages.value
  const last = msgs[msgs.length - 1]
  return last?.error || '请求异常，请稍后再试'
})

// ─────────────────────────────────────────────
// Sub-Component: DimBadge
// ─────────────────────────────────────────────

const DimBadge = defineComponent({
  props: { level: { type: String as PropType<'excellent' | 'good' | 'improve'>, required: true } },
  setup(p) {
    return () => {
      if (p.level === 'excellent') return h('span', { class: 'dim-badge dim-excellent' }, '✓✓')
      if (p.level === 'good') return h('span', { class: 'dim-badge dim-good' }, '✓')
      return h('span', { class: 'dim-badge dim-improve' }, '△')
    }
  },
})

// ─────────────────────────────────────────────
// Helpers
// ─────────────────────────────────────────────

function formatSeconds(s: number): string {
  const m = Math.floor(s / 60)
  const sec = s % 60
  return `${m}:${sec.toString().padStart(2, '0')}`
}

function getWordAnalysis(message: PreviewChatMessage, word: string) {
  const clean = word.replace(/[.,!?]/g, '')
  return message.evaluation?.wordAnalysis?.find(w => w.word === clean)
}

function stateStyle(target: string) {
  const active = state.value === target
  return {
    opacity: active ? 1 : 0,
    pointerEvents: active ? 'auto' : 'none',
    transition: 'opacity 0.18s ease-out',
  } as const
}

// ─────────────────────────────────────────────
// Actions
// ─────────────────────────────────────────────

// 当前流式会话控制器（开始录音时打开 WebSocket，结束时收尾）
let streamCtl: ReturnType<typeof engine.beginStudentStream> = null

async function handleStartRecording() {
  if (!engine.canRecord.value || recorder.isRecording.value || isStarting.value) return
  player.stop()

  isStarting.value = true
  startAbortController = new AbortController()

  try {
    await recorder.startRecording(startAbortController.signal)
    // Mic acquired — open the WS now (no placeholders pushed yet).
    streamCtl = engine.beginStudentStream({
      sampleRate: recorder.sampleRate.value,
      bits: 16,
      channels: 1,
    })
    if (streamCtl) {
      recorder.onChunk.value = streamCtl.pushChunk
    }
  } catch (err: any) {
    if (err.name === 'AbortError') {
      // User cancelled during getUserMedia. State naturally returns to idle.
    } else {
      console.error('Failed to start recording:', err)
    }
  } finally {
    isStarting.value = false
    startAbortController = null
  }
}

function handleCancelStarting() {
  startAbortController?.abort()
  // recorder.startRecording will reject with AbortError; no further cleanup needed.
}

function handleCancelRecording() {
  // 停止录音 + 中止流式会话（丢弃本次录音）
  recorder.onChunk.value = null
  if (streamCtl) {
    streamCtl.abort()  // close WS; nothing on the message list to clean
    streamCtl = null
  }
  if (recorder.isRecording.value) {
    recorder.stopRecording().catch(() => {})
  }
  recorder.cleanup()
}

async function handleFinishRecording() {
  if (!recorder.isRecording.value) return
  const ctl = streamCtl
  streamCtl = null
  try {
    const blob = await recorder.stopRecording()
    recorder.onChunk.value = null
    if (ctl) {
      ctl.commit(blob)  // pushes placeholders, attaches blob, sends 'stop'
    } else {
      // Fallback: direct HTTP path
      await engine.sendStudentMessage(blob, crypto.randomUUID())
    }
  } catch (err) {
    console.error('Recording/send failed:', err)
  }
}

function hasRetryButton(m: PreviewChatMessage): boolean {
  return m.recovery === 'retry' || m.recovery === 'restart'
}
function hasRerecordButton(m: PreviewChatMessage): boolean {
  return m.role === 'student' && (m.recovery === 'retry' || m.recovery === 'rerecord')
}
function retryButtonLabel(m: PreviewChatMessage): string {
  if (m.recovery === 'restart') return '返回重开'
  return '重试'
}
async function handleRetry(m: PreviewChatMessage) {
  if (m.recovery === 'restart') {
    emit('restart')
    return
  }
  if (m.role === 'student') {
    await engine.retryMessage(m.id)
  } else {
    // greeting case: first AI message with no prior student
    const idx = engine.messages.value.indexOf(m)
    const isGreeting = !engine.messages.value
      .slice(0, idx)
      .some(x => x.role === 'student')
    if (isGreeting) {
      await engine.retryGreeting()
    } else {
      await engine.regenerateAiMessage(m.id)
    }
  }
}
function handleRerecord(m: PreviewChatMessage) {
  engine.discardCurrentTurn(m.id)
}

const lastErroredMessage = computed<PreviewChatMessage | null>(() => {
  const msgs = engine.messages.value
  for (let i = msgs.length - 1; i >= 0; i--) {
    if (msgs[i].status === 'error') return msgs[i]
  }
  return null
})

function toggleExpand(id: string) {
  expandedMessageId.value = expandedMessageId.value === id ? null : id
}

function openTaskHint() {
  showHintModal.value = true
  if (!taskHint.value && !taskHintLoading.value) {
    loadTaskHint()
  }
}

async function loadTaskHint() {
  if (!props.sessionInfo?.sessionId) {
    taskHintError.value = '当前会话未准备好，请稍后重试'
    return
  }

  taskHintLoading.value = true
  taskHintError.value = null

  try {
    taskHint.value = await taskHintApi.generateTaskHint(props.sessionInfo.sessionId)
  } catch {
    taskHintError.value = '生成任务提示失败，请重试'
  } finally {
    taskHintLoading.value = false
  }
}

function togglePlay(id: string) {
  // Same id is currently playing or loading → stop.
  if (player.playingId.value === id || player.loadingId.value === id) {
    player.stop()
    return
  }

  const msg = engine.messages.value.find(m => m.id === id)
  if (!msg) return

  if (msg.role === 'student' && msg.audioBlob) {
    player.play(id, { kind: 'blob', blob: msg.audioBlob })
  }
  else if (msg.role === 'ai' && msg.content) {
    player.play(id, { kind: 'tts', text: msg.content })
  }
}

function openPhonemeDetail(wa: NonNullable<NonNullable<PreviewChatMessage['evaluation']>['wordAnalysis']>[0]) {
  phonemeDetail.value = {
    word: wa.word,
    userPronunciation: wa.userPronunciation,
    standardPronunciation: wa.standardPronunciation,
    tip: wa.tip,
  }
}

function practiceThisWord() {
  phonemeDetail.value = null
  handleStartRecording()
}

async function handleExitConfirm() {
  showExitConfirm.value = false
  emit('complete', await fetchReportSafe())
}

async function fetchReportSafe(): Promise<DialogueReport | null> {
  reportFetchInflight.value = true
  try {
    await engine.completeSession()
    return await engine.getReport()
  } catch (err) {
    console.warn('[speaking] getReport failed:', err)
    return null
  } finally {
    reportFetchInflight.value = false
  }
}

function handleRestart() {
  showExitConfirm.value = false
  engine.abort()
  player.stop()
  emit('restart')
}

// ─────────────────────────────────────────────
// Badge detection
// ─────────────────────────────────────────────

function triggerBadge(id: string) {
  const badge = BADGE_CONFIG[id]
  if (!badge) return
  showBadge.value = badge
  if (badgeTimer) clearTimeout(badgeTimer)
  badgeTimer = setTimeout(() => { showBadge.value = null }, 2800)
}

function checkBadges(ev: NonNullable<PreviewChatMessage['evaluation']>) {
  const d = ev.dimensions
  if (d.fluency === 'excellent') {
    consecutiveFluent.value += 1
    if (consecutiveFluent.value === 3) triggerBadge('smooth_talker')
  } else {
    consecutiveFluent.value = 0
  }
  if (d.accuracy === 'excellent') {
    consecutiveAccurate.value += 1
    if (consecutiveAccurate.value === 5) triggerBadge('pronunciation_pro')
  } else {
    consecutiveAccurate.value = 0
  }
  if (d.accuracy === 'excellent' && d.fluency === 'excellent' && d.completeness === 'excellent' && d.rhythm === 'excellent') {
    setTimeout(() => triggerBadge('perfect_round'), 400)
  }
}

// ─────────────────────────────────────────────
// Watchers
// ─────────────────────────────────────────────

// 自动滚动到底部
watch(
  () => engine.messages.value.map(m => m.content + m.status).join('|'),
  () => {
    nextTick(() => {
      if (chatContainerRef.value) {
        chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
      }
    })
  },
)

// 自动播放：AI 消息流式 done 后,合成并播一次。
// 用 Set 去重防止 watcher 因为不相关重渲染重复触发。
const autoPlayedIds = new Set<string>()
const seededHistoricalMessageIds = new Set<string>()
watch(
  () => engine.messages.value.map(m => `${m.id}:${m.status}`).join('|'),
  () => {
    for (const m of engine.messages.value) {
      if (
        m.role === 'ai' &&
        m.status === 'done' &&
        m.content &&
        !seededHistoricalMessageIds.has(m.id) &&
        !autoPlayedIds.has(m.id)
      ) {
        autoPlayedIds.add(m.id)
        player.play(m.id, { kind: 'tts', text: m.content })
      }
    }
  },
)

// AI 消息 done 后，延迟 600ms 显示 "在等你的回答..."
watch(
  () => {
    const msgs = engine.messages.value
    const last = msgs[msgs.length - 1]
    return last?.role === 'ai' && last.status === 'done' ? last.id : null
  },
  (val) => {
    if (idleHintTimer) clearTimeout(idleHintTimer)
    if (val) {
      showIdleHint.value = false
      idleHintTimer = setTimeout(() => { showIdleHint.value = true }, 600)
    } else {
      showIdleHint.value = false
    }
  },
)

// 学生消息产生 evaluation 时，检查徽章 + 清理沉默提示
watch(
  () => engine.messages.value.filter(m => m.role === 'student' && m.evaluation).length,
  () => {
    const done = engine.messages.value.filter(m => m.role === 'student' && m.evaluation)
    const last = done[done.length - 1]
    if (last?.evaluation) checkBadges(last.evaluation)
  },
)

// 对话完成 → 通知父组件
watch(
  () => engine.isComplete.value,
  async (complete) => {
    if (complete) emit('complete', await fetchReportSafe())
  },
)

// 沉默检测 → 随机提示
watch(
  () => recorder.silenceDetected.value,
  (silent) => {
    if (silent && recorder.isRecording.value) {
      silenceHintText.value = SILENCE_HINTS[Math.floor(Math.random() * SILENCE_HINTS.length)]
    } else {
      silenceHintText.value = ''
    }
  },
)

// 录音时长达到上限，自动完成
watch(
  () => recorder.recordingDuration.value,
  (v) => {
    if (v >= MAX_RECORDING_SECONDS && recorder.isRecording.value) {
      handleFinishRecording()
    }
  },
)

// ─────────────────────────────────────────────
// Lifecycle
// ─────────────────────────────────────────────

onMounted(() => {
  if (props.sessionInfo) {
    const hasHistory = !!props.sessionInfo.messages?.length
    seededHistoricalMessageIds.clear()
    for (const message of props.sessionInfo.messages ?? []) {
      seededHistoricalMessageIds.add(message.id)
    }
    engine.attachSession({
      sessionId: props.sessionInfo.sessionId,
      expiresAt: props.sessionInfo.expiresAt,
      totalRounds: props.totalRounds,
      currentRound: props.sessionInfo.currentRound,
      messages: props.sessionInfo.messages,
    })
    if (!hasHistory) engine.generateGreeting()
  } else {
    console.warn('[DialogueChatView] mounted without sessionInfo; chat is inert. Parent must createSession before mounting.')
  }
  // 无 sessionInfo 时聊天区保持空(父组件应当先创建 session 再挂载本组件)
})

onUnmounted(() => {
  if (idleHintTimer) clearTimeout(idleHintTimer)
  if (badgeTimer) clearTimeout(badgeTimer)
})
</script>

<style lang="scss" scoped>
// ─────────────────────────────────────────────
// Root
// ─────────────────────────────────────────────
.dialogue-chat-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  background: #fff;
  font-size: 12px;
}

// ─────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  flex-shrink: 0;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ai-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  &.breathing { animation: breathing 2.4s ease-in-out infinite; }
}
.ai-name { font-size: 12px; font-weight: 600; color: #1f2937; }
.idle-hint { font-size: 11px; color: #9ca3af; }
.online-dot {
  width: 6px; height: 6px;
  background: #10b981;
  border-radius: 50%;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.round-indicator { font-size: 11px; font-weight: 500; color: #f97316; }
.total-time { font-size: 11px; font-weight: 500; color: #6b7280; font-variant-numeric: tabular-nums; }
.icon-btn {
  padding: 6px;
  border: none; background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  &:hover { background: #f3f4f6; color: #4b5563; }
}

// ─────────────────────────────────────────────
// Permission banner
// ─────────────────────────────────────────────
.permission-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  font-size: 11px;
  color: #92400e;
  flex-shrink: 0;
}
.permission-icon { font-size: 14px; }

// ─────────────────────────────────────────────
// Chat area
// ─────────────────────────────────────────────
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f7f8fa;
  min-height: 0;
}
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.msg-ai { justify-content: flex-start; }
.msg-student {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.msg-col {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-bottom: 2px;
}

// 语音条
.voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: clamp(140px, 44%, 210px);
}
.voice-ai {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.voice-student {
  background: #f97316;
  border-radius: 16px;
  border-top-right-radius: 4px;
}
.play-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.play-ai {
  background: rgba(249,115,22,0.1);
  color: #f97316;
  &:hover { background: rgba(249,115,22,0.2); }
}
.play-student {
  background: rgba(255,255,255,0.2);
  color: #fff;
  &:hover { background: rgba(255,255,255,0.3); }
}
.play-btn-error {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
  &:hover { background: #fee2e2 !important; }
}
.play-spinner {
  animation: spin 1s linear infinite;
}
.play-error-hint {
  font-size: 10px;
  color: #dc2626;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.play-error-hint-student {
  color: #fff;
}
.wave-bar-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1px;
}
.wave-bar {
  width: 2px;
  border-radius: 999px;
  flex-shrink: 0;
}
.wave-ai { background: rgba(249,115,22,0.4); }
.wave-student { background: rgba(255,255,255,0.5); }
.voice-duration { font-size: 10px; flex-shrink: 0; }
.voice-duration-ai { color: #9ca3af; }
.voice-duration-student { color: rgba(255,255,255,0.7); }

// 气泡
.bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
  max-width: 100%;
}
.bubble-ai {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-top-left-radius: 4px;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bubble-student {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-top-right-radius: 4px;
  color: #374151;
  max-width: 78%;
  padding: 6px 12px;
}
.improvable-word {
  color: #d97706;
  text-decoration: underline wavy #fbbf24;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 2px;
  transition: background 0.2s;
  &:hover { background: #fef3c7; }
}

// typing 指示器
.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.typing-dot {
  width: 6px; height: 6px;
  background: rgba(249,115,22,0.7);
  border-radius: 50%;
  animation: typing-bounce 1s ease-in-out infinite;
}
@keyframes typing-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

// 错误卡
.error-card {
  margin-top: 4px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.error-text { font-size: 11px; color: #dc2626; }
.retry-btn {
  padding: 3px 10px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 999px;
  font-size: 11px;
  color: #dc2626;
  cursor: pointer;
  &:hover { background: #fef2f2; border-color: #f87171; }
}
.rerecord-btn {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  margin-left: 4px;
  &:hover { background: #f9fafb; border-color: #9ca3af; color: #374151; }
}

// 评分卡
.eval-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
  width: clamp(260px, 88%, 420px);
  text-align: left;
  margin-top: 2px;
}
.eval-l1 { padding: 8px 12px; }
.dim-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #6b7280;
  flex-wrap: wrap;
}
.dim-label { color: #6b7280; }
.dim-sep { color: #e5e7eb; margin: 0 2px; }
.dim-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
}
.dim-excellent { color: #059669; background: #ecfdf5; }
.dim-good      { color: #10b981; background: #ecfdf5; }
.dim-improve   { color: #f59e0b; background: #fffbeb; }

.sugg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.sugg-text {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.sugg-icon { color: #f59e0b; flex-shrink: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-toggle {
  font-size: 10px;
  color: #f97316;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  &:hover { color: #ea580c; }
  svg { transition: transform 0.2s; }
  .chev-up { transform: rotate(180deg); }
}
.eval-l2 {
  padding: 10px 12px;
  border-top: 1px solid #f9fafb;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-label {
  font-size: 10px;
  color: #9ca3af;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.detail-content {
  font-size: 12px;
  color: #374151;
  background: #fff;
  padding: 6px 10px;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  margin: 0;
  line-height: 1.5;
}
.word-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.word-tag {
  padding: 2px 8px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 10px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
}

// ─────────────────────────────────────────────
// Silence hint
// ─────────────────────────────────────────────
.silence-hint-wrap {
  position: absolute;
  bottom: 76px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  padding: 0 16px;
  pointer-events: none;
}
.silence-hint {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border: 1px solid #fed7aa;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 320px;
  width: 100%;
  pointer-events: auto;
}
.silence-icon { color: #fb923c; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.silence-text { font-size: 12px; color: #4b5563; margin: 0; line-height: 1.5; flex: 1; }
.silence-close {
  background: transparent; border: none;
  color: #d1d5db;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  &:hover { color: #6b7280; }
}

// ─────────────────────────────────────────────
// Control zone
// ─────────────────────────────────────────────
.control-zone {
  flex-shrink: 0;
  border-top: 1px solid #f3f4f6;
  background: #fff;
  padding: 10px 16px 12px;
}
.progress-wrap {
  max-width: 384px;
  margin: 0 auto 8px;
}
.progress-track {
  height: 1px;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #fb923c;
  transition: width 1s linear, background-color 0.4s ease, opacity 0.2s ease;
  &.near-limit { background: #f87171; }
}
.state-stack {
  position: relative;
  height: 36px;
  max-width: 384px;
  margin: 0 auto;
}
.state-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.state-idle {
  justify-content: center;
  gap: 12px;
}
.state-center { justify-content: center; gap: 8px; }
.state-error {
  justify-content: space-between;
  gap: 12px;
}
// idle buttons
.hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  &:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #f97316;
  }
}
.mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 24px;
  border-radius: 999px;
  background: #f97316;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(249,115,22,0.25);
  transition: background 0.2s, transform 0.15s;
  &:hover { background: #ea580c; }
  &:active { transform: scale(0.96); }
  &:disabled { opacity: 0.5; cursor: not-allowed; background: #d1d5db; box-shadow: none; }
}

// recording capsule
.record-capsule {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
}
.cancel-btn, .finish-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cancel-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  &:hover { background: #fef2f2; border-color: #fecaca; color: #ef4444; }
}
.finish-btn {
  background: #f97316;
  border: none;
  color: #fff;
  &:hover { background: #ea580c; }
}
.record-meter {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.animated-wave { display: flex; align-items: center; gap: 1px; }
.aw-bar {
  width: 2px;
  border-radius: 999px;
  background: #f97316;
  animation: aw-pulse 1.2s ease-in-out infinite;
  &.near-limit { background: #ef4444; }
}
@keyframes aw-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.record-time {
  font-size: 12px;
  font-family: monospace;
  font-weight: 600;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  &.near-limit { color: #ef4444; }
}
.record-time-max { font-size: 10px; color: #d1d5db; }

// stt / thinking
.spinner {
  color: #fb923c;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.mini-avatar {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff7ed;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.center-text { font-size: 12px; color: #9ca3af; }

// error
.error-info { display: flex; align-items: center; gap: 6px; }
.warn-icon { color: #f59e0b; font-size: 12px; }
.warn-text { font-size: 12px; color: #4b5563; }
.retry-pill {
  padding: 5px 14px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  &:hover { background: #ea580c; }
}

// ─────────────────────────────────────────────
// Modals
// ─────────────────────────────────────────────
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.phoneme-modal { max-width: 320px; }
.exit-modal { max-width: 320px; padding: 20px; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.close-btn {
  width: 26px; height: 26px;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  &:hover { background: #e5e7eb; }
}

// 音素
.phoneme-word { text-align: left; font-size: 16px; font-weight: 700; color: #111827; margin: 0; }
.phoneme-sub { font-size: 11px; color: #9ca3af; margin: 2px 0 0; }
.phoneme-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-head + .phoneme-body { padding-top: 0; }
.phoneme-modal .modal-head { padding: 20px 20px 12px; margin-bottom: 0; }
.pho-card {
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pho-user { background: #fffbeb; border: 1px solid #fde68a; }
.pho-standard { background: #ecfdf5; border: 1px solid #bbf7d0; }
.pho-tip { background: #eff6ff; border: 1px solid #bfdbfe; display: block; }
.pho-label { font-size: 10px; font-weight: 500; margin: 0 0 2px; }
.pho-user .pho-label { color: #d97706; }
.pho-standard .pho-label { color: #059669; }
.pho-tip .pho-label { color: #2563eb; }
.pho-value { font-size: 14px; font-family: monospace; color: #b45309; margin: 0; }
.pho-value-green { color: #15803d; }
.pho-tip-text { font-size: 12px; color: #1d4ed8; margin: 0; line-height: 1.5; }
.pho-play {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pho-play-user { background: #fef3c7; border-color: #fde68a; color: #d97706; &:hover { background: #fde68a; } }
.pho-play-standard { background: #d1fae5; border-color: #bbf7d0; color: #059669; &:hover { background: #bbf7d0; } }
.pho-practice-btn {
  width: 100%;
  padding: 9px;
  border-radius: 12px;
  background: #f97316;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  &:hover { background: #ea580c; }
}

// 退出弹窗
.exit-hint { font-size: 11px; color: #9ca3af; margin: 0 0 14px; }
.exit-actions { display: flex; flex-direction: column; gap: 10px; }
.exit-secondary {
  padding: 9px 0;
  border-radius: 12px;
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  &:hover { background: #f9fafb; }
}
.exit-primary {
  padding: 9px 0;
  border-radius: 12px;
  background: #f97316;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  &:hover { background: #ea580c; }
}

// 徽章
.badge-popup {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 60;
}
.badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(to right, #f97316, #f59e0b);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(249,115,22,0.3);
}
.badge-icon { font-size: 24px; }
.badge-name { font-size: 12px; font-weight: 600; color: #fff; margin: 0; }
.badge-desc { font-size: 10px; color: rgba(255,255,255,0.8); margin: 2px 0 0; }

// ─────────────────────────────────────────────
// Animations
// ─────────────────────────────────────────────
@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
}
@keyframes fade-in-frames {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in-frames 0.22s ease-out; }
@keyframes scale-in-frames {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scale-in-frames 0.22s ease-out; }
</style>