<!DOCTYPE html>
<html lang="en" class="h-full">

<!-- ==================== 功能块：页面头部资源区 Start ==================== -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ html_title }} - Audio Transcription & Summarization</title>
    <script>
        //------------------- 深色模式初始化 start------------------
        // 检查是否已经设置过偏好,如果没有则默认使用深色模式
        (function () {
            const savedMode = localStorage.getItem('darkMode');
            if (savedMode === null) {
                // 首次访问，默认深色模式
                localStorage.setItem('darkMode', 'true');
                document.documentElement.classList.add('dark');
            } else if (savedMode === 'true') {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        })();
        //--------------------深色模式初始化 end------------------
    </script>
    {% include 'includes/loading_overlay.html' %}
    <!-- ==================== 功能块：基础依赖资源 Start ==================== -->
    <!-- All dependencies bundled locally for offline support -->
    <script src="/tool/speakr/static/vendor/js/tailwind.min.js"></script>
    <script src="/tool/speakr/static/vendor/js/marked.min.js"></script>
    <link rel="stylesheet" href="/tool/speakr/static/vendor/css/easymde.min.css">
    <script src="/tool/speakr/static/vendor/js/easymde.min.js"></script>
    <script src="/tool/speakr/static/js/recorder-core.js" charset="UTF-8"></script>
    <script src="/tool/speakr/static/js/wav.js" charset="UTF-8"></script>
    <script src="/tool/speakr/static/js/pcm.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="/tool/speakr/static/vendor/css/fontawesome.min.css">
    <link rel="stylesheet" href="/tool/speakr/static/css/styles.css">
    <link rel="icon" href="/tool/speakr/static/img/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/tool/speakr/static/img/icon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/tool/speakr/static/img/icon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/tool/speakr/static/img/icon-180x180.png">
    <link rel="manifest" href="/tool/speakr/static/manifest.json">
    <meta name="theme-color" content="#2563eb">
    <!-- ==================== 功能块：基础依赖资源 End ==================== -->
    <script>
        //------------------- Tailwind 页面主题扩展 start------------------
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    maxHeight: {
                        '85vh': '85vh',
                        '90vh': '90vh'
                    },
                    colors: {
                        primary: 'var(--bg-primary)',
                        secondary: 'var(--bg-secondary)',
                        accent: 'var(--bg-accent)'
                    }
                }
            }
        }
        //--------------------Tailwind 页面主题扩展 end------------------
    </script>
</head>
<!-- ==================== 功能块：页面头部资源区 End ==================== -->

<!-- ==================== 功能块：页面主体 Start ==================== -->
<body class="h-full bg-[var(--bg-primary)] text-[var(--text-primary)] transition-colors duration-300">
    <!-- ==================== 功能块：全局加载遮罩 Start ==================== -->
    <div id="loader" class="fixed inset-0 bg-gray-800 flex items-center justify-center z-50">
        <div class="text-white text-lg">Loading...</div>
    </div>
    <!-- ==================== 功能块：全局加载遮罩 End ==================== -->

    <!-- ==================== 功能块：Vue 应用根容器 Start ==================== -->
    <div id="app" v-cloak data-use-asr-endpoint="{{ use_asr_endpoint }}"
        data-current-user-name="{{ current_user.name if current_user.is_authenticated else '' }}"
        data-user-language="{{ user_language }}" class="h-full flex flex-col opacity-0 transition-opacity duration-500">

        <!-- ==================== 功能块：顶部导航区 Start ==================== -->
        <!-- Header -->
        <header
            class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] px-3 sm:px-4 py-3 flex items-center justify-between flex-shrink-0 z-50">
            <!-- Left side: Menu toggle and logo -->
            <div class="flex items-center gap-2 sm:gap-4 min-w-0 flex-shrink">
                <!-- Menu Toggle Button -->
                <button @click="toggleSidebar"
                    class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200 flex-shrink-0 flex items-center justify-center">
                    <i class="fas fa-bars text-lg"></i>
                </button>

                <!-- Logo and Title -->
                <div class="flex items-center gap-2 sm:gap-3 min-w-0">
                    <img src="/tool/speakr/static/img/icon-32x32.png" alt="{{ html_title }}"
                        class="w-7 h-7 sm:w-8 sm:h-8 flex-shrink-0">
                    <h1 class="text-lg sm:text-xl font-bold text-[var(--text-primary)] truncate">{{ html_title }}</h1>
                </div>
            </div>

            <!-- Right side: User menu and controls -->
            <div class="flex items-center gap-3">
                <!-- Inquire Mode Button -->
                {% if inquire_mode_enabled %}
                <a href="/tool/speakr/inquire"
                    class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-search"></i>
                    <span class="hidden sm:inline" v-text="t('inquire.title')"></span>
                </a>
                {% endif %}

                <!-- Scene Selector (CG/YL) -->
                <div class="flex items-center gap-1.5">
                    <button type="button" @click="setSelectedScene('cg')" :class="selectedScene === 'cg' ? 'bg-[var(--bg-button)] text-[var(--text-button)] border-[var(--bg-button)]' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'" class="px-3 py-1.5 text-sm rounded-md border transition-colors duration-200">CG</button>
                    <button type="button" @click="setSelectedScene('yl')" :class="selectedScene === 'yl' ? 'bg-[var(--bg-button)] text-[var(--text-button)] border-[var(--bg-button)]' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'" class="px-3 py-1.5 text-sm rounded-md border transition-colors duration-200">YL</button>
                </div>

                <!-- New Recording Button -->
                <button @click="switchToUploadView"
                    class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-plus mr-1"></i><span v-text="t('nav.newRecording')"></span>
                </button>

                <!-- User menu -->
                {% if current_user.is_authenticated %}
                <div class="relative">
                    <button @click="isUserMenuOpen = !isUserMenuOpen"
                        class="flex items-center gap-1 sm:gap-2 p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200"
                        :title="t('admin.userMenu')">
                        <i class="fas fa-user-circle text-lg"></i>
                        <span class="hidden lg:inline text-sm">{{ current_user.name if current_user.is_authenticated
                            else 'User' }}</span>
                        <i class="fas fa-chevron-down text-xs hidden sm:inline"></i>
                    </button>

                    <!-- User dropdown -->
                    <div v-if="isUserMenuOpen"
                        class="absolute right-0 mt-2 w-56 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-50">
                        <a href="/tool/speakr/account"
                            class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-cog mr-2 w-4 text-center"></i><span v-text="t('nav.settings')"></span>
                        </a>
                        <a href="/tool/speakr/account#tags"
                            class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-tags mr-2 w-4 text-center"></i><span
                                v-text="t('help.tagManagement')"></span>
                        </a>
                        <button @click="openSharesList"
                            class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-share-alt mr-2 w-4 text-center"></i><span
                                v-text="t('modal.sharedTranscripts')"></span>
                        </button>
                        {% if current_user.is_admin %}
                        <a href="/tool/speakr/admin"
                            class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-user-shield mr-2 w-4 text-center"></i><span
                                v-text="t('admin.title')"></span>
                        </a>
                        {% endif %}
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <button @click="toggleDarkMode"
                            class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'" class="mr-2 w-4 text-center"></i>
                            <span v-text="isDarkMode ? t('nav.lightMode') : t('nav.darkMode')"></span>
                        </button>
                        <button @click="openColorSchemeModal"
                            class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-palette mr-2 w-4 text-center"></i>
                            <span v-text="t('modal.colorScheme')"></span>
                        </button>
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <a href="/tool/speakr/logout"
                            class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-sign-out-alt mr-2 w-4 text-center"></i><span
                                v-text="t('nav.signOut')"></span>
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </header>
        <!-- ==================== 功能块：顶部导航区 End ==================== -->

        <!-- ==================== 功能块：应用主工作区 Start ==================== -->
        <div class="flex-1 flex overflow-hidden relative">
            <!-- Mobile Sidebar Backdrop -->
            <div v-if="!isSidebarCollapsed && isMobileScreen" @click="toggleSidebar"
                class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden">
            </div>

            <!-- ==================== 功能块z：录音列表侧边栏 Start ==================== -->
            <!-- Sidebar -->
            <aside :class="['sidebar', isSidebarCollapsed ? 'collapsed' : '']">
                <div class="sidebar-content-wrapper">
                    <!-- Sidebar Header -->
                    <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold" v-text="t('nav.recording')"></h2>
                            <div class="flex gap-2">
                                {% if inquire_mode_enabled %}
                                <a href="/tool/speakr/inquire"
                                    class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm">
                                    <i class="fas fa-search"></i>
                                </a>
                                {% endif %}
                                <button @click="switchToUploadView"
                                    class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm">
                                    <i class="fas fa-plus mr-1"></i><span v-text="t('common.new')"></span>
                                </button>
                            </div>
                        </div>

                        <!-- 头部排序搜索框 -->
                        <div class="space-y-3">
                            <!-- Filter Toggle Button -->
                            <div class="flex items-center space-x-2">
                                <button @click="showAdvancedFilters = !showAdvancedFilters"
                                    class="flex-1 flex items-center justify-between px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] transition-colors">
                                    <span class="flex items-center">
                                        <i class="fas fa-filter mr-2 text-[var(--text-muted)]"></i>
                                        <span
                                            v-if="!searchQuery && filterTags.length === 0 && !filterDatePreset && !filterDateRange.start && !filterDateRange.end && !filterTextQuery"
                                            v-text="t('sidebar.searchRecordings')">
                                        </span>
                                        <span v-else class="text-[var(--text-accent)]">
                                            活动过滤器 (${ (filterTags.length > 0 ? 1 : 0) + (filterDatePreset ||
                                            filterDateRange.start || filterDateRange.end ? 1 : 0) + (filterTextQuery ? 1
                                            : 0) })
                                        </span>
                                    </span>
                                    <i
                                        :class="['fas fa-chevron-down transition-transform text-[var(--text-muted)]', showAdvancedFilters ? 'rotate-180' : '']"></i>
                                </button>
                                <button
                                    v-if="searchQuery || filterTags.length > 0 || filterDatePreset || filterDateRange.start || filterDateRange.end || filterTextQuery"
                                    @click="clearAllFilters"
                                    class="px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)] transition-colors"
                                    :title="t('buttons.clearAllFilters')">
                                    <i class="fas fa-times text-[var(--text-muted)]"></i>
                                </button>
                            </div>

                            <!-- Advanced Filters Panel -->
                            <div v-show="showAdvancedFilters"
                                class="p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg space-y-3">
                                <!-- Text Search -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1"
                                        v-text="t('sidebar.filters')"></label>
                                    <div class="relative">
                                        <input v-model="filterTextQuery" type="text"
                                            :placeholder="t('sidebar.searchRecordings')"
                                            class="w-full px-3 py-1.5 pl-8 pr-8 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        <i
                                            class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] text-xs"></i>
                                        <button v-if="filterTextQuery" @click="filterTextQuery = ''"
                                            class="absolute right-2.5 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-xs"
                                            :title="t('buttons.clearSearchText')">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- Tag Filter -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1"
                                        v-text="t('tags.filterByTag')"></label>
                                    <div class="flex flex-wrap gap-1.5">
                                        <button v-for="tag in availableTags" :key="tag.id"
                                            @click="filterTags.includes(tag.id) ? filterTags = filterTags.filter(id => id !== tag.id) : filterTags.push(tag.id)"
                                            :class="[
                                                    'px-2 py-1 rounded-full text-xs font-medium transition-all',
                                                    filterTags.includes(tag.id) 
                                                        ? 'bg-[var(--bg-accent)] text-[var(--text-accent)] ring-1 ring-[var(--border-accent)]' 
                                                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-input)]'
                                                ]">
                                            <span class="inline-block w-2 h-2 rounded-full mr-1"
                                                :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                            ${ tag.name }
                                        </button>
                                    </div>
                                    <p v-if="availableTags.length === 0" class="text-xs text-[var(--text-muted)] italic"
                                        v-text="t('tags.noTags')"></p>
                                </div>

                                <!-- Date Filter -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1"
                                        v-text="t('sidebar.dateRange')"></label>
                                    <div class="grid grid-cols-3 gap-1.5 mb-2">
                                        <button v-for="preset in datePresetOptions" :key="preset.value"
                                            @click="filterDatePreset = filterDatePreset === preset.value ? '' : preset.value; filterDateRange = { start: '', end: '' }"
                                            :class="[
                                                    'px-2 py-1 rounded-md text-xs transition-all',
                                                    filterDatePreset === preset.value 
                                                        ? 'bg-[var(--bg-accent)] text-[var(--text-accent)]' 
                                                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-input)]'
                                                ]" :title="preset.label">
                                            ${ preset.label }
                                        </button>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <input v-model="filterDateRange.start" @change="filterDatePreset = ''"
                                                type="date"
                                                class="w-full px-2 py-1 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-xs focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]"
                                                :placeholder="t('form.dateFrom')">
                                        </div>
                                        <div>
                                            <input v-model="filterDateRange.end" @change="filterDatePreset = ''"
                                                type="date"
                                                class="w-full px-2 py-1 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-xs focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]"
                                                :placeholder="t('form.dateTo')">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 排序方式 -->
                            <button @click="sortBy = sortBy === 'created_at' ? 'meeting_date' : 'created_at'"
                                class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] transition-colors">
                                <span class="flex items-center">
                                    <i
                                        :class="['fas mr-2 text-[var(--text-muted)]', sortBy === 'meeting_date' ? 'fa-calendar' : 'fa-upload']"></i>
                                    <span v-text="t('sidebar.sortBy')"></span>: <span
                                        v-text="sortBy === 'meeting_date' ? t('sidebar.sortByMeetingDate') : t('sidebar.sortByDate')"></span>
                                </span>
                                <i class="fas fa-exchange-alt text-[var(--text-muted)]"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Recordings List -->
                    
                    <!-- Draft Recordings (草稿箱) -->
                    <div v-if="draftRecordings.length > 0" class="px-4 pt-4">
                        <div @click="draftsExpanded = !draftsExpanded" 
                            class="flex items-center justify-between cursor-pointer p-2 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-accent-hover)] transition-colors">
                            <span class="font-medium text-sm text-[var(--text-primary)]">
                                <i class="fas fa-edit mr-2 text-yellow-500"></i>未完成的录音 (${draftRecordings.length})
                            </span>
                            <i :class="draftsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas text-[var(--text-muted)] text-xs"></i>
                        </div>
                        
                        <div v-show="draftsExpanded" class="mt-2 space-y-2">
                            <div v-for="draft in draftRecordings" :key="draft.id"
                                class="p-3 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)] hover:border-[var(--border-accent)] transition-colors">
                                <div class="flex justify-between items-center mb-2">
                                    <div class="flex-1 mr-2 min-w-0">
                                        <input v-if="editingDraftId === draft.id" 
                                            v-model="editingDraftName"
                                            @blur="saveDraftRename(draft)"
                                            @keyup.enter="saveDraftRename(draft)"
                                            @click.stop
                                            ref="draftNameInput"
                                            class="w-full bg-[var(--bg-input)] text-[var(--text-primary)] border border-[var(--border-accent)] rounded px-1 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        <span v-else 
                                            @dblclick="startDraftRename(draft)"
                                            class="text-sm font-medium text-[var(--text-primary)] truncate block cursor-text hover:text-[var(--text-accent)] transition-colors"
                                            title="双击重命名">${draft.name}</span>
                                    </div>
                                    <span class="text-xs text-[var(--text-muted)] ml-2">${formatTime(Math.round(draft.total_duration || 0))}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-[var(--text-muted)]">
                                        <i class="fas fa-layer-group mr-1"></i>${draft.segment_count || 0} 个片段
                                    </span>
                                    <div class="flex gap-2">
                                        <button @click="continueDraftRecording(draft.id)" 
                                            class="text-xs px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
                                            title="继续录音">
                                            <i class="fas fa-play mr-1"></i>继续
                                        </button>
                                        <button @click="deleteDraft(draft.id)" 
                                            class="text-xs px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
                                            title="删除草稿">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex-1 overflow-y-auto p-4" @scroll="(e) => {
                            const element = e.target;
                            const threshold = 100; // Load more when 100px from bottom
                            if (element.scrollHeight - element.scrollTop - element.clientHeight < threshold) {
                                loadMoreRecordings();
                            }
                         }">
                        <div v-if="isLoadingRecordings && recordings.length === 0" class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                            <p class="mt-2 text-[var(--text-muted)]" v-text="t('help.loadingRecordings')"></p>
                        </div>

                        <div v-else-if="recordings.length === 0 && !isLoadingRecordings" class="text-center py-8">
                            <i class="fas fa-microphone-slash text-3xl text-[var(--text-muted)] mb-3"></i>
                            <p class="text-[var(--text-muted)]" v-text="t('sidebar.noRecordings')"></p>
                            <p v-if="searchQuery.trim()" class="text-sm text-[var(--text-muted)] mt-1">
                                <span v-text="t('help.tryAdjustingSearch')"></span> <button @click="clearAllFilters()"
                                    class="text-[var(--text-accent)] hover:underline"
                                    v-text="t('help.clearFilters')"></button>
                            </p>
                        </div>

                        <div v-if="recordings.length > 0" class="space-y-2">
                            <div v-for="group in groupedRecordings" :key="group.title" class="mb-6">
                                <h3 class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2">
                                    ${group.title}
                                </h3>
                                <div class="space-y-1">
                                    <div v-for="recording in group.items" :key="recording.id"
                                        @click="selectRecording(recording)" :class="[
                                             'p-3 rounded-lg cursor-pointer transition-all duration-200 border',
                                             selectedRecording?.id === recording.id 
                                                 ? 'bg-[var(--bg-accent)] border-[var(--border-accent)]' 
                                                 : 'bg-[var(--bg-tertiary)] border-transparent hover:bg-[var(--bg-accent-hover)]'
                                         ]">
                                        <!-- Title and Status Row -->
                                        <div class="flex items-center justify-between mb-1">
                                            <h4 class="font-medium text-sm truncate flex-1 mr-2"
                                                :class="selectedRecording?.id === recording.id ? 'text-[var(--text-accent)]' : 'text-[var(--text-primary)]'">
                                                ${ recording.title || t('common.untitled') }
                                            </h4>
                                            <div class="flex items-center gap-1 flex-shrink-0">
                                                <!-- Show Failed status for failed recordings -->
                                                <span v-if="recording.status === 'FAILED'"
                                                    class="status-badge status-failed">
                                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                                    ${ t('common.failed') }
                                                </span>

                                                <!-- Show Processing status for non-completed recordings -->
                                                <span v-else-if="recording.status !== 'COMPLETED'"
                                                    :class="getStatusClass(recording.status)" class="status-badge">
                                                    ${formatStatus(recording.status)}
                                                </span>

                                                <!-- For completed recordings, show highlight and inbox badges -->
                                                <template v-else>
                                                    <span v-if="recording.is_highlighted"
                                                        @click.stop="toggleHighlight(recording)"
                                                        class="status-badge status-highlighted clickable-badge"
                                                        :title="t('sidebar.removeFromHighlighted')">
                                                        <i class="fas fa-star"></i>
                                                    </span>
                                                    <span v-if="recording.is_inbox" @click.stop="toggleInbox(recording)"
                                                        class="status-badge status-inbox clickable-badge"
                                                        :title="t('sidebar.markAsRead')">
                                                        <i class="fas fa-inbox"></i>
                                                    </span>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Date -->
                                        <p class="text-xs text-[var(--text-muted)] mt-1 flex items-center">
                                            <i class="fas fa-calendar-alt mr-1.5 text-[var(--text-muted)]"
                                                style="font-size: 10px;"></i>
                                            ${formatDisplayDate(sortBy === 'meeting_date' ? recording.meeting_date :
                                            recording.created_at)}
                                        </p>

                                        <!-- Participants -->
                                        <div v-if="recording.participants"
                                            class="text-xs text-[var(--text-muted)] mt-1 flex items-start">
                                            <i class="fas fa-users mr-1.5 text-[var(--text-muted)] flex-shrink-0"
                                                style="font-size: 10px; margin-top: 2px;"></i>
                                            <span class="truncate">
                                                ${recording.participants}
                                            </span>
                                        </div>

                                        <!-- Tags -->
                                        <div v-if="getRecordingTags(recording).length > 0"
                                            class="flex flex-wrap gap-1 mt-1">
                                            <button v-for="tag in getRecordingTags(recording).slice(0, 2)" :key="tag.id"
                                                @click.stop="filterByTag(tag)"
                                                class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                :style="{ backgroundColor: tag.color }"
                                                :title="'Filter by ' + tag.name">
                                                <span v-text="tag.name"></span>
                                            </button>
                                            <span v-if="getRecordingTags(recording).length > 2"
                                                class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs text-[var(--text-muted)]"
                                                :title="getRecordingTags(recording).slice(2).map(t => t.name).join(', ')">
                                                +${getRecordingTags(recording).length - 2} more
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Load More Indicator -->
                            <div v-if="isLoadingMore" class="text-center py-4">
                                <i class="fas fa-spinner fa-spin text-lg text-[var(--text-muted)]"></i>
                                <p class="text-sm text-[var(--text-muted)] mt-1" v-text="t('help.loadingMore')"></p>
                            </div>

                            <!-- End of Results Indicator -->
                            <div v-else-if="!hasNextPage && totalRecordings > 0"
                                class="text-center py-4 text-xs text-[var(--text-muted)]">
                                <i class="fas fa-check-circle mr-1"></i>
                                <span v-text="t('help.allRecordingsLoaded')"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <!-- ==================== 功能块：录音列表侧边栏 End ==================== -->

            <!-- ==================== 功能块：主内容视图区 Start ==================== -->
            <!-- Main Content -->
            <main class="main-content" :class="{ 'sidebar-open': !isSidebarCollapsed }">

                <div class="flex-1 flex flex-col overflow-hidden">
                    <!-- ==================== 功能块：上传与新建录音视图 Start ==================== -->
                    <!-- Upload View -->
                    <div v-if="currentView === 'upload'"
                        class="flex-1 flex items-center justify-center p-4 md:p-8 overflow-y-auto">
                        <div class="max-w-lg w-full my-auto">
                            <div class="text-center mb-8">
                                <i class="fas fa-microphone text-5xl md:text-6xl text-[var(--text-accent)] mb-4"></i>
                                <h2 class="text-2xl md:text-3xl font-bold mb-2" v-text="t('upload.title')"></h2>
                                <p class="text-[var(--text-muted)]" v-text="t('upload.dropzone')"></p>
                            </div>

                            <div class="bg-[var(--bg-secondary)] p-6 rounded-xl border border-[var(--border-primary)]">
                                <!-- File Upload Area -->
                                <div @drop="handleDrop" @dragover="handleDragOver" @dragleave="handleDragLeave"
                                    @click="$refs.fileInput.click()"
                                    :class="['border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-300', dragover ? 'border-[var(--border-accent)] bg-[var(--bg-accent)]' : 'border-[var(--border-secondary)] hover:border-[var(--border-accent)]']">
                                    <i class="fas fa-cloud-upload-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                    <p class="text-[var(--text-secondary)] mb-2" v-text="t('upload.dropzone')"></p>
                                    <p class="text-xs text-[var(--text-muted)]" v-text="t('upload.supportedFormats')">
                                    </p>
                                </div>
                                <input ref="fileInput" type="file" @change="handleFileSelect"
                                    accept="audio/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,.mp4,.mov,.avi,.mkv,.webm"
                                    multiple class="hidden">

                                <!-- Divider -->
                                <div class="my-6 flex items-center">
                                    <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                                    <span class="flex-shrink mx-4 text-xs text-[var(--text-muted)] uppercase"
                                        v-text="t('common.or')"></span>
                                    <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                                </div>

                                <!-- ！！音频录制 开始选择框 ！！ -->
                                <div class="space-y-3">
                                    <h3 class="text-sm font-medium text-[var(--text-secondary)] text-center"
                                        v-text="t('recording.title')"></h3>

                                    <!-- 麦克风 -->
                                    <button @click="startRecording('microphone')"
                                        class="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-microphone"></i>
                                        <span v-text="t('recording.microphone')"></span>
                                    </button>

                                    <!-- 系统 -->
                                    <button @click="startRecording('system')" v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-desktop"></i>
                                        <span v-text="t('recording.systemAudio')"></span>
                                    </button>

                                    <!-- 麦克风 + 系统 -->
                                    <button @click="startRecording('both')" v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-microphone"></i>
                                        <i class="fas fa-desktop ml-1"></i>
                                        <span v-text="t('recording.microphoneAndSystem')"></span>
                                    </button>

                                    <!-- Help Text -->
                                    <div class="text-xs text-[var(--text-muted)] space-y-1 mt-3">
                                        <div class="flex items-center justify-between">
                                            <span><strong v-text="t('recording.microphone') + ':'"></strong> <span
                                                    v-text="t('help.microphoneDesc')"></span></span>
                                            <i class="fas fa-microphone text-red-500 flex-shrink-0"></i>
                                        </div>
                                        <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                            <span><strong v-text="t('recording.systemAudio') + ':'"></strong> <span
                                                    v-text="t('help.systemAudioDesc')"></span></span>
                                            <i class="fas fa-desktop text-blue-500 flex-shrink-0"></i>
                                        </div>
                                        <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                            <span><strong v-text="t('recording.microphoneAndSystem') + ':'"></strong>
                                                <span v-text="t('help.bothAudioDesc')"></span></span>
                                            <div class="flex items-center gap-1 flex-shrink-0">
                                                <i class="fas fa-microphone text-purple-500"></i>
                                                <i class="fas fa-desktop text-purple-500"></i>
                                            </div>
                                        </div>
                                        <div v-if="!canRecordSystemAudio" class="text-amber-600 dark:text-amber-400">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                            ${ t('recording.systemAudioNotSupported') }
                                            <button @click="showSystemAudioHelp = true"
                                                class="ml-2 text-blue-500 hover:text-blue-600 underline text-sm">
                                                <span v-text="t('buttons.help')"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tag Selection -->
                                <div class="mt-4">
                                    <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                                        <i class="fas fa-tags mr-1 text-[var(--text-muted)]"></i>
                                        ${ t('tags.title') }
                                    </label>

                                    <!-- Selected Tags Display - Compact -->
                                    <div v-if="selectedTags.length > 0" class="mb-2">
                                        <div
                                            class="p-1.5 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] max-h-16 overflow-y-auto">
                                            <div class="flex flex-wrap gap-1">
                                                <span v-for="(tag, index) in selectedTags" :key="tag.id"
                                                    class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white"
                                                    :style="{ backgroundColor: tag.color }">
                                                    <span class="opacity-75 mr-0.5 text-[9px]">${index + 1}.</span>
                                                    <span>${tag.name}</span>
                                                    <button @click="removeTagFromSelection(tag.id)"
                                                        class="ml-1 hover:opacity-100 opacity-70">
                                                        <i class="fas fa-times" style="font-size: 9px;"></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                        <p class="text-[10px] text-[var(--text-muted)] mt-0.5">
                                            <i class="fas fa-info-circle mr-0.5" style="font-size: 9px;"></i>
                                            Tags ordered by priority
                                        </p>
                                    </div>

                                    <!-- Tag Selection Container - Compact -->
                                    <div v-if="availableTags.filter(tag => !selectedTagIds.includes(tag.id)).length > 0"
                                        class="border border-[var(--border-secondary)] rounded-md bg-[var(--bg-tertiary)] p-2">
                                        <!-- Search Filter (always visible if tags available) -->
                                        <div class="mb-1.5">
                                            <div class="relative">
                                                <input v-model="uploadTagSearchFilter" type="text"
                                                    :placeholder="t('tagsModal.searchTags')"
                                                    class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                                <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]"
                                                    style="font-size: 9px;"></i>
                                                <button v-if="uploadTagSearchFilter" @click="uploadTagSearchFilter = ''"
                                                    class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                    <i class="fas fa-times" style="font-size: 9px;"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Available Tags Grid - Fixed Height -->
                                        <div v-if="filteredAvailableTagsForUpload.length > 0" class="overflow-y-auto"
                                            style="max-height: 100px;">
                                            <div class="grid grid-cols-2 gap-1">
                                                <button v-for="tag in filteredAvailableTagsForUpload" :key="tag.id"
                                                    @click="addTagToSelection(tag.id)"
                                                    class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)] transition-all">
                                                    <div class="flex items-center gap-1 min-w-0">
                                                        <span class="w-2 h-2 rounded-full flex-shrink-0"
                                                            :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                                        <span class="text-[11px] text-[var(--text-primary)] truncate"
                                                            v-text="tag.name"></span>
                                                        <span class="text-[11px] text-[var(--text-primary)] truncate"
                                                            v-text="tag.visibility=='global'?'(全局)':'(个人)'"></span>
                                                    </div>
                                                    <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors"
                                                        style="font-size: 9px;"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div v-else class="py-2 text-center">
                                            <p class="text-[11px] text-[var(--text-muted)]">
                                                <i class="fas fa-search mr-1" style="font-size: 9px;"></i>
                                                No matching tags
                                            </p>
                                        </div>
                                    </div>
                                    <!-- Empty States -->
                                    <div v-else-if="availableTags.length === 0"
                                        class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                        <p class="text-xs text-[var(--text-muted)] text-center">
                                            <i class="fas fa-info-circle mr-1" style="font-size: 10px;"></i>
                                            <span v-text="t('help.noTagsCreated')"></span> <a
                                                href="/tool/speakr/account#tags"
                                                class="text-[var(--text-accent)] hover:underline"
                                                v-text="t('help.createTags')"></a>
                                        </p>
                                    </div>
                                    <div v-else
                                        class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                        <p class="text-xs text-[var(--text-muted)] text-center">
                                            <i class="fas fa-check-circle mr-1" style="font-size: 10px;"></i>
                                            All tags selected
                                        </p>
                                    </div>

                                    <p v-if="selectedTags.some(tag => tag.custom_prompt)"
                                        class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                        Selected tags include custom summary prompts
                                    </p>
                                    <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)"
                                        class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                        First tag's ASR settings will be applied: ${selectedTags[0].name}
                                    </p>
                                </div>

                                <!-- Advanced Options for ASR (collapsible) -->
                                <div v-if="useAsrEndpoint" class="mt-4">
                                    <button @click="showAdvancedOptions = !showAdvancedOptions"
                                        class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                        <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                            <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                            <span v-text="t('help.advancedAsrOptions')"></span>
                                        </span>
                                        <i
                                            :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                    </button>

                                    <div v-show="showAdvancedOptions"
                                        class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md space-y-3 border border-[var(--border-secondary)]">
                                        <!-- Language Selection -->
                                        <div>
                                            <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                转录语言
                                            </label>
                                            <select v-model="uploadLanguage"
                                                class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                                <option v-for="lang in languageOptions" :key="lang.value"
                                                    :value="lang.value" v-text="lang.label"></option>
                                            </select>
                                        </div>

                                        <!-- Speaker Settings -->
                                        <div class="grid grid-cols-2 gap-3">
                                            <div>
                                                <label
                                                    class="block text-xs font-medium text-[var(--text-secondary)] mb-1"
                                                    v-text="t('form.minSpeakers')">
                                                </label>
                                                <input v-model.number="uploadMinSpeakers" type="number" min="1" max="20"
                                                    class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                            </div>
                                            <div>
                                                <label
                                                    class="block text-xs font-medium text-[var(--text-secondary)] mb-1"
                                                    v-text="t('form.maxSpeakers')">
                                                </label>
                                                <input v-model.number="uploadMaxSpeakers" type="number" min="1" max="20"
                                                    class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                            </div>
                                        </div>

                                        <p class="text-xs text-[var(--text-muted)] pt-1">
                                            <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                            设置适用于此会话中的所有文件
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ==================== 功能块：上传与新建录音视图 End ==================== -->

                    <!-- ==================== 功能块：实时录音视图 Start ==================== -->
                    <!-- Recording View -->
                    <div v-else-if="currentView === 'recording'" class="index_m_cot">
                        <div class="websockt_box border border-[var(--border-primary)] min-h-0">
                            <!-- Top: Visualizer and Status -->
                            <div
                                class="flex-shrink-0 p-4 md:p-6 text-center bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)]">
                                <div v-if="isRecording || isPaused" class="w-full mx-auto mb-4">
                                    <!-- Dual visualizer for 'both' mode -->
                                    <div v-if="recordingMode === 'both'" class="max-w-4xl mx-auto flex gap-4">
                                        <div
                                            class="w-1/2 min-h-[12rem] h-48 md:h-40 flex flex-col bg-[var(--bg-primary)] rounded-lg p-2">
                                            <div class="flex-1 w-full overflow-hidden rounded-md"
                                                style="min-height: 10rem;">
                                                <canvas ref="micVisualizer" class="w-full h-full"></canvas>
                                            </div>
                                            <p class="text-xs text-[var(--text-muted)] pt-1"
                                                v-text="t('recording.microphone')"></p>
                                        </div>
                                        <div
                                            class="w-1/2 min-h-[12rem] h-48 md:h-40 flex flex-col bg-[var(--bg-primary)] rounded-lg p-2">
                                            <div class="flex-1 w-full overflow-hidden rounded-md"
                                                style="min-height: 10rem;">
                                                <canvas ref="systemVisualizer" class="w-full h-full"></canvas>
                                            </div>
                                            <p class="text-xs text-[var(--text-muted)] pt-1"
                                                v-text="t('recording.systemAudio')"></p>
                                        </div>
                                    </div>
                                    <!-- Single visualizer for other modes -->
                                    <div v-else
                                        class="min-h-[12rem] h-48 md:h-40 max-w-2xl mx-auto bg-[var(--bg-primary)] rounded-lg p-2 flex flex-col">
                                        <div class="flex-1 w-full overflow-hidden rounded-md"
                                            style="min-height: 10rem;">
                                            <canvas ref="visualizer" class="w-full h-full"></canvas>
                                        </div>
                                        <p class="text-xs text-[var(--text-muted)] pt-1 capitalize">${recordingMode}</p>
                                    </div>
                                </div>
                                <div v-if="!isRecording && !isPaused && audioBlobURL" class="w-full mb-4">
                                    <div class="audio-player-container">
                                        <audio :src="audioBlobURL" controls class="w-full">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                </div>
                                <div>
                                    <div class="text-2xl font-mono text-[var(--text-accent)]">
                                        ${formatTime(recordingTime)}</div>
                                    <p class="text-sm text-[var(--text-muted)]">
                                        ${ isRecording ? '正在录制...' : (isPaused ? '录音已暂停' : (audioBlobURL ? '录制完成' : '准备录制')) }
                                    </p>
                                    <!-- Real-time file size display -->
                                    <div v-if="(isRecording || isPaused) && estimatedFileSize > 0" class="mt-2">
                                        <p class="text-xs text-[var(--text-muted)]">
                                            预估大小: <span class="font-mono">${formatFileSize(estimatedFileSize)}</span>
                                            <span v-if="actualBitrate > 0" class="ml-2">
                                                (${Math.round(actualBitrate / 1000)}kbps)
                                            </span>
                                        </p>
                                        <!-- Size warning indicator -->
                                        <div v-if="estimatedFileSize > (maxRecordingMB * 1024 * 1024 * 0.8)"
                                            class="mt-1">
                                            <div class="flex items-center text-xs text-amber-600 dark:text-amber-400">
                                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                                <span
                                                    v-text="t('help.approachingLimit', { limit: maxRecordingMB })"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Middle: Notepad -->
                            <div class="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
                                <label for="recordingNotes"
                                    class="block text-sm font-medium text-[var(--text-secondary)] mb-2 flex-shrink-0">
                                    <i class="fas fa-pencil-alt mr-1"></i>
                                    编写笔记
                                </label>
                                <div class="flex-1 min-h-0">
                                    <!-- <textarea ref="recordingNotesEditor" v-model="recordingNotes"
                                           class="w-full h-80 p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                          :placeholder="t('form.notesPlaceholder')"  
                                          rows="10"></textarea> -->
                                    <div>
                                        <textarea style="height: 322px;"
                                            class="w-full h-180 p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                            v-model="recordingNotes"></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Bottom: Action Buttons -->
                            <div class="flex-shrink-0 p-4 md:p-6 bg-[var(--bg-tertiary)]  border-[var(--border-primary)]"
                                style="background: none;">
                                <div v-if="showRecordingControls" class="text-center flex justify-center gap-3">
                                    <!-- 暂停按钮 (录音中显示) -->
                                    <button v-if="isRecording && !isPausingRecording" @click="pauseRecording"
                                        class="px-6 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
                                        <i class="fas fa-pause mr-2"></i>暂停录音
                                    </button>
                                    <!-- 暂停中 loading 状态 -->
                                    <button v-if="isPausingRecording" disabled
                                        class="px-6 py-3 bg-yellow-500 text-white rounded-lg opacity-75 cursor-not-allowed flex items-center">
                                        <i class="fas fa-spinner fa-spin mr-2"></i>暂停中...
                                    </button>
                                    <!-- 恢复按钮 (暂停时显示) -->
                                    <button v-if="isPaused" @click="resumeRecording"
                                        class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                                        <i class="fas fa-play mr-2"></i>继续录音
                                    </button>
                                    <!-- 停止按钮 -->
                                    <button @click="stopRecording"
                                        class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                                        :class="{
                                            'animate-pulse': isRecording,
                                            'opacity-75 cursor-not-allowed': isStoppingRecording || isPausingRecording
                                        }"
                                        :disabled="isStoppingRecording || isPausingRecording">
                                        <i class="fas fa-stop mr-2"></i>停止录音
                                    </button>
                                </div>

                                <div v-if="!isRecording && !isPaused && (audioBlobURL || currentDraftId)" class="flex flex-col gap-4">
                                    <!-- Tag Selection -->
                                    <div>
                                        <label for="recordingTagSelect"
                                            class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                                            <i class="fas fa-tags mr-1"></i>
                                            选择标签（可选，按优先级顺序）
                                        </label>

                                        <!-- Selected Tags Display - Compact -->
                                        <div v-if="selectedTags.length > 0" class="mb-2">
                                            <div
                                                class="p-1.5 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] max-h-16 overflow-y-auto">
                                                <div class="flex flex-wrap gap-1">
                                                    <span v-for="(tag, index) in selectedTags" :key="tag.id"
                                                        class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white"
                                                        :style="{ backgroundColor: tag.color }">
                                                        <span class="opacity-75 mr-0.5 text-[9px]">${index + 1}.</span>
                                                        <span>${tag.name}</span>
                                                        <button @click="removeTagFromSelection(tag.id)"
                                                            class="ml-1 hover:opacity-100 opacity-70">
                                                            <i class="fas fa-times" style="font-size: 9px;"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Tag Selection Container - Compact -->
                                        <div v-if="availableTags.filter(tag => !selectedTagIds.includes(tag.id)).length > 0"
                                            class="border border-[var(--border-secondary)] rounded-md bg-[var(--bg-tertiary)] p-2">
                                            <!-- Search Filter -->
                                            <div class="mb-1.5">
                                                <div class="relative">
                                                    <input v-model="uploadTagSearchFilter" type="text"
                                                        :placeholder="t('tagsModal.searchTags')"
                                                        class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                                    <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]"
                                                        style="font-size: 9px;"></i>
                                                    <button v-if="uploadTagSearchFilter"
                                                        @click="uploadTagSearchFilter = ''"
                                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                        <i class="fas fa-times" style="font-size: 9px;"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- Available Tags Grid -->
                                            <div v-if="filteredAvailableTagsForUpload.length > 0"
                                                class="overflow-y-auto" style="max-height: 100px;">
                                                <div class="grid grid-cols-2 gap-1">
                                                    <button v-for="tag in filteredAvailableTagsForUpload" :key="tag.id"
                                                        @click="addTagToSelection(tag.id)"
                                                        class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)] transition-all">
                                                        <div class="flex items-center gap-1 min-w-0">
                                                            <span class="w-2 h-2 rounded-full flex-shrink-0"
                                                                :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                                            <span
                                                                class="text-[11px] text-[var(--text-primary)] truncate"
                                                                v-text="tag.name"></span>
                                                        </div>
                                                        <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors"
                                                            style="font-size: 9px;"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div v-else class="py-2 text-center">
                                                <p class="text-[11px] text-[var(--text-muted)]">
                                                    <i class="fas fa-search mr-1" style="font-size: 9px;"></i>
                                                    No matching tags
                                                </p>
                                            </div>
                                        </div>
                                        <!-- Empty States -->
                                        <div v-else-if="availableTags.length === 0"
                                            class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                            <p class="text-xs text-[var(--text-muted)] text-center">
                                                <i class="fas fa-info-circle mr-1" style="font-size: 10px;"></i>
                                                <span v-text="t('help.noTagsCreated')"></span> <a
                                                    href="/tool/speakr/account#tags"
                                                    class="text-[var(--text-accent)] hover:underline"
                                                    v-text="t('help.createTags')"></a>
                                            </p>
                                        </div>
                                        <div v-else
                                            class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                            <p class="text-xs text-[var(--text-muted)] text-center">
                                                <i class="fas fa-check-circle mr-1" style="font-size: 10px;"></i>
                                                All tags selected
                                            </p>
                                        </div>

                                        <p v-if="selectedTags.some(tag => tag.custom_prompt)"
                                            class="text-xs text-[var(--text-muted)] mt-1">
                                            <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                            Selected tags include custom summary prompts
                                        </p>
                                        <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)"
                                            class="text-xs text-[var(--text-muted)] mt-1">
                                            <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                            First tag's ASR settings will be applied: ${selectedTags[0].name}
                                        </p>
                                    </div>

                                    <!-- Advanced Options for ASR (collapsible) -->
                                    <div v-if="useAsrEndpoint">
                                        <button @click="showAdvancedOptions = !showAdvancedOptions"
                                            class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                            <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                                <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                                <span v-text="t('help.advancedAsrOptions')"></span>
                                            </span>
                                            <i
                                                :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                        </button>

                                        <div v-if="showAdvancedOptions"
                                            class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] space-y-3">
                                            <div>
                                                <label for="recordingAsrLanguage"
                                                    class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                    语言
                                                </label>
                                                <select id="recordingAsrLanguage" v-model="asrLanguage"
                                                    class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                                    <option v-for="lang in languageOptions" :key="lang.value"
                                                        :value="lang.value" v-text="lang.label"></option>
                                                </select>
                                            </div>

                                            <div class="grid grid-cols-2 gap-3">
                                                <div>
                                                    <label for="recordingAsrMinSpeakers"
                                                        class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                        {% raw %}最少发言人数{% endraw %}
                                                    </label>
                                                    <input type="number" id="recordingAsrMinSpeakers"
                                                        v-model="asrMinSpeakers" min="1" max="20"
                                                        :placeholder="t('form.auto')"
                                                        class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                                </div>

                                                <div>
                                                    <label for="recordingAsrMaxSpeakers"
                                                        class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                        {% raw %}最多发言人{% endraw %}
                                                    </label>
                                                    <input type="number" id="recordingAsrMaxSpeakers"
                                                        v-model="asrMaxSpeakers" min="1" max="20"
                                                        :placeholder="t('form.auto')"
                                                        class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Upload/Discard Buttons -->
                                    <div class="flex flex-col sm:flex-row gap-3 justify-center">
                                        <button @click="uploadRecordedAudio"
                                            class="flex-1 px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors flex items-center justify-center gap-2">
                                            <i class="fas fa-upload"></i>
                                            <span v-text="t('help.uploadRecordingNotes')"></span>
                                        </button>
                                        <button @click="downloadRecordedAudio" v-if="audioBlobURL"
        class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
        title="Download Recording">
        <i class="fas fa-download"></i>
        <span>下载录音</span>
    </button>
                                        <button @click="discardRecording"
                                            class="px-6 py-3 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors flex items-center justify-center gap-2">
                                            <i class="fas fa-trash"></i>
                                            <span v-text="t('help.discard')"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="websockt_box border border-[var(--border-primary)] min-h-0 bg-[var(--bg-tertiary)] p-4 space-y-6 rounded-lg">
                            <!-- 第一个区域：语音转文字结果 -->
                            <div>
                                <h2 class="text-lg font-semibold mb-2">
                                    语音实时转录 
                                    <button style="margin-left: 20px;" @click="isyjDialogVisible = true" class="text-gray-300 hover:text-white">
                                        <i class="fas fa-expand"></i>
                                    </button>
                                    <button v-if="!isEditingTranscription" @click="enterEditMode()"
                                        class="ml-4 px-3 py-1 text-sm text-blue-400 hover:text-blue-300 border border-blue-400/30 rounded hover:border-blue-300/50 transition-colors">
                                        <i class="fas fa-pen mr-1"></i>编辑
                                    </button>
                                    <button v-else @click="exitEditMode()"
                                        class="ml-4 px-3 py-1 text-sm text-green-400 hover:text-green-300 border border-green-400/30 rounded hover:border-green-300/50 transition-colors">
                                        <i class="fas fa-check mr-1"></i>完成编辑
                                    </button>
                                    <label class="inline-flex items-center ml-4 cursor-pointer">
                                        <span class="text-gray-300 mr-2">是否显示说话人</span>
                                        <input type="checkbox" v-model="showSpeaker" class="hidden">
                                        <span
                                            class="w-10 h-5 flex items-center bg-gray-500 rounded-full p-1 duration-300 ease-in-out"
                                            :class="{'bg-green-500': showSpeaker}">
                                            <span
                                                class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out"
                                                :class="{'translate-x-5': showSpeaker}">
                                            </span>
                                        </span>
                                    </label>
                                </h2>

                                <div v-if="isDualRealtimeTranscription" ref="dualTranscriptContainer"
                                    class="dual-transcript-stack" style="height: 650px;">
                                    <textarea v-if="isEditingTranscription"
                                        class="w-full p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        :style="{ height: dualTranscriptTopPercent + '%' }"
                                        v-model="editableText"></textarea>
                                    <textarea v-else ref="asrResultTextareaOnline"
                                        class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        :style="{ height: dualTranscriptTopPercent + '%' }"
                                        :value="fullRealtimeTranscription" readonly></textarea>
                                    <div class="dual-transcript-divider" @mousedown="startDualTranscriptResize"></div>
                                    <textarea v-if="isEditingTranscription"
                                        class="w-full p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        :style="{ height: (100 - dualTranscriptTopPercent) + '%' }"
                                        v-model="systemEditableText"></textarea>
                                    <textarea v-else ref="systemAsrResultTextareaOnline"
                                        class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        :style="{ height: (100 - dualTranscriptTopPercent) + '%' }"
                                        :value="fullSystemRealtimeTranscription" readonly></textarea>
                                </div>
                                <textarea v-else-if="isEditingTranscription" style="height: 650px;"
                                    class="w-full p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                    v-model="editableText"></textarea>
                                <textarea v-else ref="asrResultTextareaOnline" style="height: 650px;"
                                    class="w-full  p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                    :value="fullRealtimeTranscription" readonly></textarea>

                                <!-- <textarea
                                ref="asrTextarea"
                                style="height: 320px;"
                                    class="w-full  p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                    v-model="asrResult+asrResultOnline" readonly></textarea> -->
                            </div>

                            <!-- 第二个区域：分析结果 -->
                            <!-- <div>
                                <h2 class="text-lg font-semibold mb-2">总结结果</h2>
                                <textarea
                                    class="w-full h-60 p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                    v-model="analysisResult" readonly></textarea>
                            </div> -->
                            <div class="flex-shrink-0  bg-[var(--bg-tertiary)] border-[var(--border-primary)]">
                                <div class="text-center" :style="{ position:'relative',top:'23px' }">
                                    <button @click="openPromptModal('zj')"
                                        class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700  ">
                                        <i class="fas fa-sync mr-2"></i>${baseInfo.name}
                                    </button>
                                    <!-- <button @click="openmodel" -->
                                    <button @click="openPromptModal('tp')"
                                        class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700  "
                                        style="margin-left: 10px;">
                                        <i class="fas"></i>推送至指挥员
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- 提示词弹框 -->
                        <div v-if="promptVisible"
                        style="z-index: 999;"
                            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center">
                            <div class="bg-[#1f2937] text-white w-1/2 p-6 rounded-lg shadow-xl border border-gray-600 space-y-4">
<h3 class="text-xl font-semibold">选择提示词</h3>


<!-- 推荐提示词标题 -->
<div class="flex items-center justify-between">
<p class="text-base font-medium">推荐提示词</p>
<span class="text-xs text-gray-400">根据你的内容智能推荐</span>
</div>


<!-- 推荐提示词卡片 -->
<div class="bg-[#111827] rounded-lg p-4 shadow-inner hover:shadow-md transition cursor-pointer border border-gray-700 hover:border-blue-500"
@click="selectedPromptId = recommendPromptId">
<div class="flex items-start gap-4">
<input type="radio" :value="recommendPromptId" v-model="selectedPromptId"
class="mt-1 h-4 w-4 accent-blue-500" />


<div class="flex-1 space-y-1">
<div class="font-semibold text-lg leading-6 text-blue-400">
${recommendPromptName}
</div>
<div class="text-sm text-gray-300 leading-5 bg-[#1f2937] p-2 rounded border border-gray-700">
${recommendPromptReason}
</div>
</div>
</div>
</div>


<!-- 提示词列表区域 -->
<div class="bg-[#111827] p-3 rounded max-h-72 overflow-y-auto text-white space-y-2">
<div class="grid grid-cols-[50px_350px] px-2 py-2 border-b border-gray-600 text-sm font-semibold">
<div class="text-center">选择</div>
<div>提示词</div>
</div>


<div id="promptList" class="space-y-2 mt-2">
<div v-for="item in promptList" :key="item.id"
class="grid grid-cols-[50px_350px] px-2 py-2 items-start gap-2 bg-[#1f2937] rounded cursor-pointer border border-transparent hover:border-blue-500 hover:bg-[#1e2531] transition"
@click="selectedPromptId = item.id">
<div class="flex justify-center items-start pt-1">
<input type="radio" :value="item.id" v-model="selectedPromptId" class="h-4 w-4 accent-blue-500" />
</div>


<div class="whitespace-normal break-words leading-5">
${item.name}
</div>
</div>
</div>
</div>


<!-- 按钮区域 -->
<div class="flex justify-end mt-4 gap-3">
<button type="button" class="px-4 py-2 bg-gray-500 rounded hover:bg-gray-600"
@click="closePromptModal">取消</button>


<button type="button" class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-700"
@click="confirmPromptSelection">确定</button>
</div>
</div>
                        </div>
                        <!-- 投屏弹框 -->
                        <div v-if="isModalOpen" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
                            <!-- 弹框容器添加相对定位，用于图标绝对定位 -->
                            <div class="bg-white p-8 rounded-lg w-96 text-center relative">
                                <!-- 右上角关闭图标 -->
                                <button @click="closeModal"
                                    class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors"
                                    aria-label="关闭">
                                    <i class="fas fa-times text-xl"></i>
                                </button>
                                <!--         
        <h3 class="text-xl font-bold mb-4">投屏链接</h3> -->
                                <a :href="urlinfo" target="_blank" rel="noopener noreferrer"
                                    class="text-blue-600 hover:text-blue-800 underline text-lg">
                                    ${urlmsg}
                                    <!-- 点击打开投屏页面 -->
                                </a>
                            </div>
                        </div>
                        <!-- 弹框组件 -->
                        <div v-if="isDialogVisible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
                            <!-- 遮罩层 -->
                            <div @click="isDialogVisible = false" class="absolute inset-0 bg-black/50 backdrop-blur-sm">
                            </div>

                            <!-- 弹框内容（修改这里的class） -->
                            <div
                                class="relative w-full bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-xl overflow-hidden">
                                <!-- 弹框头部 -->
                                <div
                                    class="p-4 border-b border-[var(--border-primary)] flex items-center justify-between">
                                    <h2 class="text-lg font-semibold">${baseInfo.name}</h2>
                                    <button @click="isDialogVisible = false" class="text-gray-500 hover:text-gray-700">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>

                                <!-- 弹框主体 -->
                                <div class="p-4">
                                    <!-- <textarea ref="sumupResultTextarea"
                                        :style="{ fontSize: baseInfo.fontSize + 'px',height:'700px',backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                        class="w-full h-60 p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        v-model="analysisResult" readonly></textarea> -->
                                        <textarea
    v-if="!isMarkdown"
    ref="sumupResultTextarea"
    :style="{ fontSize: baseInfo.fontSize + 'px', height:'700px', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
    class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
    v-model="analysisResult"
    readonly
  ></textarea>

  <div
    v-else
    ref="sumupResultTextarea"
    :style="{ fontSize: baseInfo.fontSize + 'px', height:'700px', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
    class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] overflow-y-auto markdown-body"
    v-html="renderedMarkdown"
  ></div>
                                </div>

                                <!-- 弹框底部 -->
                                <div class="p-4 border-t border-[var(--border-primary)] flex justify-center">
                                    <button @click="openPromptModal('zj')"
                                        class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                        <i class="fas fa-sync mr-2"></i>重新总结
                                    </button>
                                    <button @click="openzjmodel" :disabled="zjloding"
                                        class="px-8 py-3 rounded-lg text-white transition-colors ml-2 flex items-center justify-center gap-2"
                                        :class="zjloding ? 'bg-blue-400' : 'bg-blue-600 hover:bg-blue-700'">
                                        <i class="fas"></i>

                                        <!-- 默认内容 -->
                                        <span v-if="!zjloding">投屏</span>

                                        <!-- loading 内容 -->
                                        <span v-else class="flex items-center gap-2">
                                            <svg class="animate-spin h-5 w-5 text-white"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                                    stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor"
                                                    d="M4 12a8 8 0 018-8v4l3.5-3.5L12 0v4a8 8 0 100 16v4l3.5-3.5L12 20v4a8 8 0 01-8-8z">
                                                </path>
                                            </svg>
                                            加载中...
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- 演讲内容弹框组件 -->
                        <div v-if="isyjDialogVisible" class="fixed inset-0 z-50 flex items-center justify-center ">
                            <!-- 遮罩层 -->
                            <div @click="isyjDialogVisible = false"
                                class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

                            <!-- 弹框内容（修改这里的class） -->
                            <div
                                class="relative w-full bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-xl overflow-hidden">
                                <!-- 弹框头部 -->
                                <div
                                    class="p-4 border-b border-[var(--border-primary)] flex items-center justify-between gap-4">
                                    <div class="flex items-center gap-3">
                                        <h2 class="text-lg font-semibold">语音实时转录</h2>
                                        <button v-if="!isEditingTranscription" @click="enterEditMode()"
                                            class="px-3 py-1 text-sm text-blue-400 hover:text-blue-300 border border-blue-400/30 rounded hover:border-blue-300/50 transition-colors">
                                            <i class="fas fa-pen mr-1"></i>编辑
                                        </button>
                                        <button v-else @click="exitEditMode()"
                                            class="px-3 py-1 text-sm text-green-400 hover:text-green-300 border border-green-400/30 rounded hover:border-green-300/50 transition-colors">
                                            <i class="fas fa-check mr-1"></i>完成编辑
                                        </button>
                                    </div>
                                    <button @click="isyjDialogVisible = false"
                                        class="text-gray-500 hover:text-gray-700">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>

                                <!-- 弹框主体 -->
                                <div class="p-4">
                                    <div v-if="isDualRealtimeTranscription" class="dual-transcript-stack" style="height: 90vh;">
                                        <textarea v-if="isEditingTranscription"
                                            :style="{ fontSize: baseInfo.fontSize + 'px', height: dualTranscriptTopPercent + '%', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                            class="w-full p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                            v-model="editableText"></textarea>
                                        <textarea v-else ref="asrResultTextarea"
                                            :style="{ fontSize: baseInfo.fontSize + 'px', height: dualTranscriptTopPercent + '%', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                            class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                            :value="fullRealtimeTranscription" readonly></textarea>
                                        <div class="dual-transcript-divider" @mousedown="startDualTranscriptResize"></div>
                                        <textarea v-if="isEditingTranscription"
                                            :style="{ fontSize: baseInfo.fontSize + 'px', height: (100 - dualTranscriptTopPercent) + '%', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                            class="w-full p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                            v-model="systemEditableText"></textarea>
                                        <textarea v-else ref="systemAsrResultTextarea"
                                            :style="{ fontSize: baseInfo.fontSize + 'px', height: (100 - dualTranscriptTopPercent) + '%', backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                            class="w-full p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                            :value="fullSystemRealtimeTranscription" readonly></textarea>
                                    </div>
                                    <textarea v-else-if="isEditingTranscription"
                                        :style="{ fontSize: baseInfo.fontSize + 'px',height:'90vh',backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                        class="w-full h-60 p-2 border-2 border-blue-500 rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        v-model="editableText"></textarea>
                                    <textarea v-else ref="asrResultTextarea"
                                        :style="{ fontSize: baseInfo.fontSize + 'px',height:'90vh',backgroundColor:'rgba(0, 94, 170, 0.8)' }"
                                        class="w-full h-60 p-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none overflow-y-auto"
                                        :value="fullRealtimeTranscription" readonly></textarea>
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- ==================== 功能块：实时录音视图 End ==================== -->

                    <!-- ==================== 功能块：录音详情视图 Start ==================== -->
                    <!-- Recording Detail View -->
                    <div v-else-if="currentView === 'detail' && selectedRecording"
                        class="flex-1 flex flex-col overflow-hidden">
                        <!-- Mobile View -->
                        <div v-if="isMobileScreen" class="flex-1 flex flex-col overflow-hidden">
                            <!-- Mobile Header -->
                            <div
                                class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-4 flex-shrink-0">
                                <div @click="isMetadataExpanded = !isMetadataExpanded" class="cursor-pointer">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1 min-w-0">
                                            <h1 class="text-lg font-bold text-[var(--text-primary)] truncate">
                                                ${selectedRecording.title || 'Untitled Recording'}
                                            </h1>
                                            <p class="text-sm text-[var(--text-muted)] truncate">
                                                ${selectedRecording.participants || t('help.noParticipants')}
                                            </p>
                                            <div v-if="getRecordingTags(selectedRecording).length > 0"
                                                class="flex flex-wrap gap-1 mt-2">
                                                <button v-for="tag in getRecordingTags(selectedRecording)" :key="tag.id"
                                                    @click="filterByTag(tag)"
                                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                    :style="{ backgroundColor: tag.color }"
                                                    :title="'Filter by ' + tag.name">
                                                    <i class="fas fa-tag mr-1"></i>
                                                    <span v-text="tag.name"></span>
                                                </button>
                                            </div>
                                        </div>
                                        <i
                                            :class="['fas', 'fa-chevron-down', 'transition-transform', { 'rotate-180': isMetadataExpanded }]"></i>
                                    </div>
                                </div>
                                <!-- Expandable Metadata and Actions -->
                                <div v-if="isMetadataExpanded" class="mt-4 space-y-4">
                                    <div class="space-y-2 text-sm text-[var(--text-muted)]">
                                       <div class="flex items-center gap-2">
                                        <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                        <span>${selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}</span>
                                    </div>
                                        <div v-if="activeRecordingMetadata"
                                            class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                            <template v-for="(item, index) in activeRecordingMetadata" :key="index">
                                                <!-- Special rendering for tags -->
                                                <div v-if="item.isTagItem" class="flex items-center gap-1.5">
                                                    <i :class="item.icon" class="text-[var(--text-muted)]"></i>
                                                    <div class="flex flex-wrap items-center gap-1">
                                                        <span v-for="tag in item.tags" :key="tag.id"
                                                            class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full text-white"
                                                            :style="{ backgroundColor: tag.color || '#6B7280' }">
                                                            ${tag.name}
                                                        </span>
                                                    </div>
                                                </div>
                                                <!-- Regular metadata items -->
                                                <span v-else class="flex items-center gap-1.5">
                                                    <i :class="item.icon"></i>
                                                    <span :title="item.fullText || item.text">${item.text}</span>
                                                </span>
                                            </template>
                                        </div>
                                        <div v-if="selectedRecording.status !== 'COMPLETED'"
                                            class="flex items-center gap-2">
                                            <span :class="getStatusClass(selectedRecording.status)"
                                                class="status-badge">
                                                ${formatStatus(selectedRecording.status)}
                                            </span>
                                        </div>
                                    </div>
                                    <!-- Action Buttons -->
                                    <div class="flex items-center gap-2 overflow-x-auto pb-2">
                                        <button @click="toggleInbox(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :class="selectedRecording.is_inbox ? 'text-blue-500' : ''"
                                            :title="selectedRecording.is_inbox ? t('sidebar.markAsRead') : t('sidebar.moveToInbox')"><i
                                                class="fas fa-inbox"></i></button>
                                        <button @click="toggleHighlight(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''"
                                            :title="selectedRecording.is_highlighted ? t('sidebar.removeFromHighlighted') : t('sidebar.highlighted')"><i
                                                class="fas fa-star"></i></button>
                                        <button @click="editRecording(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="t('common.edit')"><i class="fas fa-edit"></i></button>
                                        <button @click="editRecordingTags(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="t('tags.title')"><i class="fas fa-tags"></i></button>
                                        <button @click="reprocessTranscription(selectedRecording.id)"
                                            v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'"><i
                                                class="fas fa-redo-alt"></i></button>
                                        <button @click="reprocessSummary(selectedRecording.id)"
                                            v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="t('buttons.reprocessSummary')"><i
                                                class="fas fa-sync-alt"></i></button>
                                        <button @click="confirmReset(selectedRecording)"
                                            v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500"
                                            :title="t('buttons.resetStuckProcessing')"><i
                                                class="fas fa-undo"></i></button>
                                        <button @click="openSpeakerModal"
                                            v-if="selectedRecording.transcription && useAsrEndpoint"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="t('buttons.identifySpeakers')"><i
                                                class="fas fa-user-tag"></i></button>
                                        <button @click="openShareModal(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                            :title="t('buttons.shareRecording')"><i
                                                class="fas fa-share-alt"></i></button>
                                        <button @click="confirmDelete(selectedRecording)"
                                            class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors"><i
                                                class="fas fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>

                            <!-- Mobile Audio Player -->
                            <div
                                class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                                <div class="audio-player-container">
                                    <audio controls :src="'/tool/speakr/audio/' + selectedRecording.id"
                                        :volume="playerVolume" @volumechange="onPlayerVolumeChange" class="w-full">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                            </div>

                            <!-- Mobile Tab Navigation -->
                            <div
                                class="flex-shrink-0 bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex overflow-x-auto">
                                <button @click="mobileTab = 'transcript'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'transcript' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']"
                                    v-text="t('transcription.title')"></button>
                                <button @click="mobileTab = 'summary'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'summary' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']"
                                    v-text="t('summary.title')"></button>
                                <button @click="mobileTab = 'notes'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'notes' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']"
                                    v-text="t('notes.title')"></button>
                                <button @click="mobileTab = 'chat'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'chat' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']"
                                    v-text="t('chat.title')"></button>
                                <button v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                    @click="mobileTab = 'events'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap', mobileTab === 'events' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">
                                    <i class="fas fa-calendar-alt mr-1"></i>${ selectedRecording.events.length }
                                </button>
                            </div>

                            <!-- Mobile Tab Content -->
                            <div class="flex-1 overflow-y-auto p-4">
                                <!-- Transcript Panel -->
                                <div v-if="mobileTab === 'transcript'" class="h-full flex flex-col space-y-4">
                                    <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                        <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                            <button @click="toggleTranscriptionViewMode"
                                                :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']"><i
                                                    class="fas fa-list"></i></button>
                                            <button @click="toggleTranscriptionViewMode"
                                                :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']"><i
                                                    class="fas fa-comments"></i></button>
                                        </div>
                                        <button @click="copyTranscription" class="copy-btn" title="Copy transcript"><i
                                                class="fas fa-copy"></i></button>
                                        <button @click="downloadTranscript"
                                            v-if="selectedRecording && selectedRecording.transcription" class="copy-btn"
                                            title="Download transcript with template"><i
                                                class="fas fa-download"></i></button>
                                        <button @click="openTranscriptionEditor"
                                            v-if="selectedRecording && selectedRecording.transcription" class="copy-btn"
                                            title="Edit transcript"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="flex-grow overflow-y-auto mobile-content-box">
                                        <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                            <p class="mt-2 text-[var(--text-muted)]"
                                                v-text="t('help.processingTranscription')"></p>
                                        </div>
                                        <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                            <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)]"
                                                v-text="t('transcription.noTranscription')"></p>
                                        </div>
                                        <div v-else>
                                            <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'"
                                                class="transcription-simple-view">
                                                <div v-if="processedTranscription.hasDialogue">
                                                    <div v-for="segment in processedTranscription.simpleSegments"
                                                        :key="segment.startTime || Math.random()"
                                                        class="speaker-segment" @click="seekAudioFromEvent"
                                                        :data-start-time="segment.startTime">
                                                        <div v-if="segment.showSpeaker"
                                                            :class="['speaker-tablet', segment.color]">
                                                            ${segment.speaker}</div>
                                                        <div class="speaker-text">${segment.sentence}</div>
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <div
                                                        v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                        <div v-for="segment in processedTranscription.simpleSegments"
                                                            :key="segment.startTime || Math.random()"
                                                            class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors"
                                                            @click="seekAudioFromEvent"
                                                            :data-start-time="segment.startTime">${segment.sentence}
                                                        </div>
                                                    </div>
                                                    <div v-else class="whitespace-pre-wrap">
                                                        ${processedTranscription.content}</div>
                                                </div>
                                            </div>
                                            <div v-else-if="transcriptionViewMode === 'bubble'"
                                                class="transcription-with-speakers">
                                                <div v-for="(row, rowIndex) in processedTranscription.bubbleRows"
                                                    :key="`${selectedRecording.id}-bubble-row-${rowIndex}`"
                                                    :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                    <div v-for="bubble in row.bubbles"
                                                        :key="bubble.startTime || Math.random()"
                                                        :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']"
                                                        @click="seekAudioFromEvent" :data-start-time="bubble.startTime">
                                                        <div class="speaker-bubble-content">${bubble.sentence}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Summary Panel -->
                                <div v-if="mobileTab === 'summary'" class="h-full flex flex-col space-y-4">
                                    <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                        <button @click="copySummary" class="copy-btn"
                                            :title="t('buttons.copySummary')"><i class="fas fa-copy"></i></button>
                                        <button @click="downloadSummary" class="copy-btn"
                                            :title="t('buttons.downloadAsWord')"><i
                                                class="fas fa-download"></i></button>
                                        <button @click="toggleEditSummary" class="copy-btn"
                                            :title="t('buttons.editSummary')"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="flex-grow overflow-y-auto mobile-content-box">
                                        <div v-if="editingSummary" class="h-full flex flex-col">
                                            <div class="markdown-editor-container flex-1">
                                                <textarea ref="summaryMarkdownEditor"
                                                    v-model="selectedRecording.summary"></textarea>
                                            </div>
                                            <div class="flex justify-end gap-2 mt-2">
                                                <button @click="cancelEditSummary"
                                                    class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]"
                                                    v-text="t('common.cancel')"></button>
                                                <button @click="saveEditSummary"
                                                    class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]"
                                                    v-text="t('common.save')"></button>
                                            </div>
                                        </div>
                                        <div v-else>
                                            <div v-if="selectedRecording.status === 'SUMMARIZING'"
                                                class="text-center py-8">
                                                <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                                <p class="mt-2 text-[var(--text-muted)]"
                                                    v-text="t('help.generatingSummary')"></p>
                                            </div>
                                            <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                                <i class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)] mb-4"
                                                    v-text="t('summary.noSummary')"></p>
                                                <button @click="generateSummary"
                                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                    <i class="fas fa-magic mr-2"></i>Generate Summary
                                                </button>
                                            </div>
                                            <div v-else class="summary-box h-full"
                                                v-html="selectedRecording.summary_html || selectedRecording.summary">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Notes Panel -->
                                <div v-if="mobileTab === 'notes'" class="h-full flex flex-col space-y-4">
                                    <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                        <button @click="copyNotes" class="copy-btn" :title="t('buttons.copyNotes')"><i
                                                class="fas fa-copy"></i></button>
                                        <button @click="downloadNotes" class="copy-btn"
                                            :title="t('buttons.downloadAsWord')"><i
                                                class="fas fa-download"></i></button>
                                        <button @click="toggleEditNotes" class="copy-btn"
                                            :title="t('buttons.editNotes')"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="flex-grow overflow-y-auto mobile-content-box">
                                        <div v-if="editingNotes" class="h-full flex flex-col">
                                            <div class="markdown-editor-container flex-1">
                                                <textarea ref="notesMarkdownEditor"
                                                    v-model="selectedRecording.notes"></textarea>
                                            </div>
                                            <div class="flex justify-end gap-2 mt-2">
                                                <button @click="cancelEditNotes"
                                                    class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]"
                                                    v-text="t('common.cancel')"></button>
                                                <button @click="saveEditNotes"
                                                    class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]"
                                                    v-text="t('common.save')"></button>
                                            </div>
                                        </div>
                                        <div v-else @click="clickToEditNotes">
                                            <div v-if="!selectedRecording.notes"
                                                class="text-center py-8 cursor-pointer hover:text-[var(--text-secondary)]">
                                                <i
                                                    class="fas fa-sticky-note text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)]" v-text="t('help.clickToAddNotes')">
                                                </p>
                                            </div>
                                            <div v-else class="notes-box h-full"
                                                v-html="selectedRecording.notes_html || selectedRecording.notes"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Chat Panel -->
                                <div v-if="mobileTab === 'chat'"
                                    class="h-full flex flex-col rounded-lg border border-[var(--border-primary)] overflow-hidden relative">
                                    <!-- Clear button - fixed at top right -->
                                    <button v-if="chatMessages.length > 0" @click="clearChat"
                                        class="absolute top-2 right-2 p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:text-[var(--text-danger)] rounded transition-all duration-200 z-20"
                                        title="Clear chat">
                                        <i class="fas fa-times text-xs"></i>
                                    </button>

                                    <div ref="chatMessagesRef"
                                        class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                        <div v-if="chatMessages.length === 0" class="text-center py-8">
                                            <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)]"
                                                v-text="t('help.askAboutTranscription')"></p>
                                        </div>
                                        <div v-for="(message, index) in chatMessages" :key="index" :class="['message relative group', message.role === 'user' ? 'user-message ml-auto' : 'ai-message', 
                                                  message.role === 'assistant' ? 'pr-10' : '']">
                                            <!-- Copy button for assistant messages -->
                                            <button v-if="message.role === 'assistant'"
                                                @click="copyMessage(message.content, $event)"
                                                class="absolute top-2 right-2 p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-all duration-200"
                                                :title="t('buttons.copyMessage')">
                                                <i class="fas fa-copy text-sm"></i>
                                            </button>
                                            <!-- Show thinking content if available -->
                                            <div v-if="message.thinking && message.role === 'assistant'" class="mb-2">
                                                <button @click="message.thinkingExpanded = !message.thinkingExpanded"
                                                    class="text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] flex items-center gap-1">
                                                    <i
                                                        :class="['fas', message.thinkingExpanded ? 'fa-chevron-down' : 'fa-chevron-right']"></i>
                                                    <span v-text="t('help.modelReasoning')"></span>
                                                    <span
                                                        class="text-[var(--text-muted)]">(${message.thinking.split('\n').length}
                                                        lines)</span>
                                                </button>
                                                <div v-if="message.thinkingExpanded"
                                                    class="mt-2 p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg text-xs text-[var(--text-muted)] max-h-64 overflow-y-auto">
                                                    <pre class="whitespace-pre-wrap font-mono">${message.thinking}</pre>
                                                </div>
                                            </div>
                                            <!-- Main message content -->
                                            <div v-if="message.html" v-html="message.html"></div>
                                            <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                        </div>
                                        <div v-if="isChatLoading" class="ai-message">
                                            <i class="fas fa-spinner fa-spin mr-2"></i> Thinking...
                                        </div>
                                    </div>
                                    <div class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                        <div class="flex gap-2">
                                            <textarea v-model="chatInput" @keydown="handleChatKeydown"
                                                :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                :placeholder="t('chat.placeholder')"
                                                class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm"
                                                rows="2"></textarea>
                                            <button @click="sendChatMessage"
                                                :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Events Panel (Mobile) -->
                                <div v-if="mobileTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0"
                                    class="h-full flex flex-col space-y-4">
                                    <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                        <button @click="downloadICS"
                                            v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                            class="copy-btn" :title="t('buttons.exportCalendar')">
                                            <i class="fas fa-calendar-plus"></i>
                                        </button>
                                    </div>
                                    <div class="flex-grow overflow-y-auto mobile-content-box">
                                        <div class="space-y-3">
                                            <div v-for="event in selectedRecording.events" :key="event.id"
                                                class="bg-[var(--bg-tertiary)] rounded-lg p-3 border border-[var(--border-primary)]">
                                                <div class="flex justify-between items-start mb-2">
                                                    <div class="flex-1">
                                                        <h3
                                                            class="text-base font-semibold text-[var(--text-primary)] mb-1">
                                                            <i
                                                                class="fas fa-calendar-check mr-2 text-[var(--text-accent)] text-sm"></i>
                                                            ${ event.title }
                                                        </h3>
                                                        <p v-if="event.description"
                                                            class="text-xs text-[var(--text-secondary)] mb-2">
                                                            ${ event.description }
                                                        </p>
                                                    </div>
                                                    <button @click="downloadEventICS(event)"
                                                        class="px-2 py-1 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-xs flex items-center gap-1"
                                                        :title="t('events.addToCalendar')">
                                                        <i class="fas fa-download text-xs"></i>
                                                        <span>Add</span>
                                                    </button>
                                                </div>
                                                <div class="grid grid-cols-1 gap-2 text-xs">
                                                    <div class="flex items-center text-[var(--text-muted)]">
                                                        <i class="fas fa-clock mr-2 text-[var(--text-accent)]"></i>
                                                        <span>
                                                            ${ formatEventDateTime(event.start_datetime) }
                                                            <template v-if="event.end_datetime">
                                                                - ${ formatEventDateTime(event.end_datetime, true) }
                                                            </template>
                                                        </span>
                                                    </div>
                                                    <div v-if="event.location"
                                                        class="flex items-center text-[var(--text-muted)]">
                                                        <i
                                                            class="fas fa-map-marker-alt mr-2 text-[var(--text-accent)]"></i>
                                                        <span>${ event.location }</span>
                                                    </div>
                                                    <div v-if="event.attendees && event.attendees.length > 0"
                                                        class="flex items-start text-[var(--text-muted)]">
                                                        <i
                                                            class="fas fa-users mr-2 text-[var(--text-accent)] mt-0.5"></i>
                                                        <div class="flex-1">
                                                            <span v-for="(attendee, index) in event.attendees"
                                                                :key="index"
                                                                class="inline-block bg-[var(--bg-secondary)] px-2 py-0.5 rounded mr-1 mb-1">
                                                                ${ attendee }
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Desktop View -->
                        <div v-else class="flex-1 flex flex-col overflow-hidden">
                            <!-- Recording Header -->
                            <div
                                class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-6 flex-shrink-0">
                                <div class="flex flex-col">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1 min-w-0">
                                            <h1 class="text-2xl font-bold text-[var(--text-primary)] mb-2">
                                                ${selectedRecording.title || 'Untitled Recording'}
                                            </h1>
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="flex items-center gap-2 ml-4">
                                            <button @click="toggleInbox(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_inbox ? 'text-blue-500' : ''"
                                                :title="selectedRecording.is_inbox ? '标记为已读' : '移到收件箱'">
                                                <i class="fas fa-inbox"></i>
                                            </button>
                                            <button @click="toggleHighlight(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''"
                                                :title="selectedRecording.is_highlighted ? '取消高亮' : '设为高亮'">
                                                <i class="fas fa-star"></i>
                                            </button>
                                            <button @click="editRecording(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                title="编辑录音">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button @click="editRecordingTags(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.editTags')">
                                                <i class="fas fa-tags"></i>
                                            </button>
                                            <button @click="reprocessTranscription(selectedRecording.id)"
                                                v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="useAsrEndpoint ? '重新处理录音' : '重新处理转录'">
                                                <i class="fas fa-redo-alt"></i>
                                            </button>
                                            <button @click="reprocessSummary(selectedRecording.id)"
                                                v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.reprocessSummary')">
                                                <i class="fas fa-sync-alt"></i>
                                            </button>
                                            <button @click="confirmReset(selectedRecording)"
                                                v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500"
                                                :title="t('buttons.resetStuckProcessing')">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            <button @click="openSpeakerModal"
                                                v-if="selectedRecording.transcription && useAsrEndpoint"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.identifySpeakers')">
                                                <i class="fas fa-user-tag"></i>
                                            </button>
                                            <button @click="openShareModal(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.shareRecording')">
                                                <i class="fas fa-share-alt"></i>
                                            </button>
                                            <button @click="confirmDelete(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors"
                                                title="删除录音">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Metadata Row -->
                                    <div
                                        class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-[var(--text-muted)] mt-2">
                                        <!-- Participants -->
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-users text-[var(--text-accent)]"></i>
                                            <span v-if="!editingParticipants" @click="toggleEditParticipants"
                                                class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                                ${selectedRecording.participants || t('help.noParticipants')}
                                            </span>
                                            <input v-else v-model="selectedRecording.participants"
                                                @blur="toggleEditParticipants" @keyup.enter="toggleEditParticipants"
                                                class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                        </div>

                                        <!-- Meeting Date -->
                                        <div class="flex items-center gap-2">
                                            <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                            <span v-if="!editingMeetingDate" @click="toggleEditMeetingDate"
                                                class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                                ${selectedRecording.meeting_date ?
                                                formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}
                                            </span>
                                            <input v-else v-model="selectedRecording.meeting_date"
                                                @blur="toggleEditMeetingDate" @keyup.enter="toggleEditMeetingDate"
                                                type="date"
                                                class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                        </div>

                                        <!-- Other Metadata -->
                                        <div v-if="activeRecordingMetadata"
                                            class="flex flex-wrap items-center gap-x-6 gap-y-2">
                                            <template v-for="(item, index) in activeRecordingMetadata" :key="index">
                                                <!-- Special rendering for tags -->
                                                <div v-if="item.isTagItem" class="flex items-center gap-1.5">
                                                    <i :class="item.icon" class="text-[var(--text-muted)]"></i>
                                                    <div class="flex flex-wrap items-center gap-1">
                                                        <span v-for="tag in item.tags" :key="tag.id"
                                                            class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full text-white"
                                                            :style="{ backgroundColor: tag.color || '#6B7280' }">
                                                            ${tag.name}
                                                        </span>
                                                    </div>
                                                </div>
                                                <!-- Regular metadata items -->
                                                <span v-else class="flex items-center gap-1.5">
                                                    <i :class="item.icon"></i>
                                                    <span :title="item.fullText || item.text">${item.text}</span>
                                                </span>
                                            </template>
                                        </div>

                                        <!-- Status -->
                                        <div v-if="selectedRecording.status !== 'COMPLETED'"
                                            class="flex items-center gap-2">
                                            <span :class="getStatusClass(selectedRecording.status)"
                                                class="status-badge">
                                                ${formatStatus(selectedRecording.status)}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Main Content Split View -->
                            <div id="mainContentColumns" class="flex-1 flex overflow-hidden">
                                <!-- Left Panel: Transcription -->
                                <div id="leftMainColumn" class="flex flex-col overflow-hidden"
                                    :style="{width: leftColumnWidth + '%'}">
                                    <!-- Transcription Header -->
                                    <div
                                        class="bg-[var(--bg-tertiary)] px-4 py-3 border-b border-[var(--border-primary)] flex items-center justify-between">
                                        <h3 class="font-semibold flex items-center">
                                            <i class="fas fa-file-text mr-2"></i>
                                            <span v-text="t('transcription.title')"></span>
                                        </h3>
                                        <div class="flex items-center gap-2">
                                            <!-- View Mode Toggle -->
                                            <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                                <button @click="toggleTranscriptionViewMode"
                                                    :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']">
                                                    <i class="fas fa-list"></i><span
                                                        v-text="t('transcription.simple')"></span>
                                                </button>
                                                <button @click="toggleTranscriptionViewMode"
                                                    :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']">
                                                    <i class="fas fa-comments"></i><span
                                                        v-text="t('transcription.bubble')"></span>
                                                </button>
                                            </div>

                                            <!-- Copy Button -->
                                            <button @click="copyTranscription" class="copy-btn">
                                                <i class="fas fa-copy mr-1"></i><span
                                                    v-text="t('transcription.copy')"></span>
                                            </button>
                                            <!-- Download Button -->
                                            <button @click="downloadTranscript"
                                                v-if="selectedRecording && selectedRecording.transcription"
                                                class="copy-btn" title="下载带有模板的字幕">
                                                <i class="fas fa-download mr-1"></i><span
                                                    v-text="t('transcription.download')"></span>
                                            </button>
                                            <!-- Edit Transcription Button -->
                                            <button @click="openTranscriptionEditor"
                                                v-if="selectedRecording && selectedRecording.transcription"
                                                class="copy-btn">
                                                <i class="fas fa-edit mr-1"></i><span
                                                    v-text="t('transcription.edit')"></span>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Transcription Content -->
                                    <div class="flex-1 overflow-y-auto p-4">
                                        <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                            <p class="mt-2 text-[var(--text-muted)]"
                                                v-text="t('help.processingTranscription')"></p>
                                        </div>

                                        <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                            <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)]"
                                                v-text="t('transcription.noTranscription')"></p>
                                        </div>

                                        <!-- Speaker Legend (for dialogue transcriptions in bubble view only) -->
                                        <div v-if="processedTranscription.hasDialogue && processedTranscription.speakers.length > 0 && transcriptionViewMode === 'bubble'"
                                            :class="['speaker-legend', legendExpanded ? 'expanded' : '']">
                                            <div class="speaker-legend-header"
                                                @click="legendExpanded = !legendExpanded">
                                                <div class="speaker-legend-title">
                                                    <i class="fas fa-users"></i>
                                                    <span v-text="t('help.speakers')"></span>
                                                    <span
                                                        class="speaker-count-indicator">(${processedTranscription.speakers.length})</span>
                                                </div>
                                                <i class="fas fa-chevron-down speaker-legend-toggle"></i>
                                            </div>
                                            <div class="speaker-legend-content">
                                                <div v-for="(speaker, index) in processedTranscription.speakers"
                                                    :key="`${selectedRecording.id}-speaker-legend-${index}`"
                                                    :class="['speaker-legend-item', speaker.color]">
                                                    <span class="speaker-name">${speaker.name}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Transcription Display -->
                                        <div v-if="selectedRecording.transcription">
                                            <!-- Simple View -->
                                            <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'"
                                                class="transcription-simple-view">
                                                <div v-if="processedTranscription.hasDialogue">
                                                    <div v-for="segment in processedTranscription.simpleSegments"
                                                        :key="segment.startTime || Math.random()"
                                                        class="speaker-segment" @click="seekAudioFromEvent"
                                                        :data-start-time="segment.startTime">
                                                        <div v-if="segment.showSpeaker"
                                                            :class="['speaker-tablet', segment.color]">
                                                            ${segment.speaker}
                                                        </div>
                                                        <div class="speaker-text">
                                                            ${segment.sentence}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <div
                                                        v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                        <div v-for="segment in processedTranscription.simpleSegments"
                                                            :key="segment.startTime || Math.random()"
                                                            class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors"
                                                            @click="seekAudioFromEvent"
                                                            :data-start-time="segment.startTime">
                                                            ${segment.sentence}
                                                        </div>
                                                    </div>
                                                    <div v-else class="whitespace-pre-wrap">
                                                        ${processedTranscription.content}
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Bubble View -->
                                            <div v-else-if="transcriptionViewMode === 'bubble'"
                                                class="transcription-with-speakers">
                                                <div v-for="(row, rowIndex) in processedTranscription.bubbleRows"
                                                    :key="`${selectedRecording.id}-bubble-row-${rowIndex}`"
                                                    :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                    <div v-for="bubble in row.bubbles"
                                                        :key="bubble.startTime || Math.random()"
                                                        :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']"
                                                        @click="seekAudioFromEvent" :data-start-time="bubble.startTime">
                                                        <div class="speaker-bubble-content">
                                                            ${bubble.sentence}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Resizable Divider - Minimal but functional -->
                                <div id="mainColumnResizer" @mousedown="startColumnResize"></div>

                                <!-- Right Panel: Summary/Notes and Chat -->
                                <div id="rightMainColumn" class="flex flex-col overflow-hidden"
                                    :style="{width: rightColumnWidth + '%'}">
                                    <!-- Audio Player -->
                                    <div
                                        class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                                        <div class="audio-player-container">
                                            <audio controls :src="'/tool/speakr/audio/' + selectedRecording.id"
                                                :volume="playerVolume" @volumechange="onPlayerVolumeChange"
                                                class="w-full">
                                                Your browser does not support the audio element.
                                            </audio>
                                        </div>
                                    </div>

                                    <!-- Summary/Notes Tabs -->
                                    <div :class="{'flex-1': !isChatMaximized, 'flex-none': isChatMaximized}"
                                        class="flex flex-col overflow-hidden">
                                        <!-- Tab Navigation -->
                                        <div
                                            class="bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex">
                                            <button @click="selectedTab = 'summary'" :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'summary' 
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' 
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                                ${ t('summary.title') }
                                            </button>
                                            <button @click="selectedTab = 'notes'" :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'notes'
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]'
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                                ${ t('notes.title') }
                                            </button>
                                            <button
                                                v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                                @click="selectedTab = 'events'" :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'events'
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]'
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                                <i class="fas fa-calendar-alt mr-1"></i>
                                                Events (${ selectedRecording.events.length })
                                            </button>
                                        </div>

                                        <!-- Tab Content -->
                                        <div v-if="!isChatMaximized" class="flex-1 overflow-hidden">
                                            <!-- Summary Tab -->
                                            <div v-if="selectedTab === 'summary'" class="h-full p-4 overflow-y-auto">
                                                <div v-if="selectedRecording.status === 'SUMMARIZING'"
                                                    class="text-center py-8">
                                                    <i
                                                        class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                                    <p class="mt-2 text-[var(--text-muted)]"
                                                        v-text="t('summary.summaryInProgress')"></p>
                                                </div>

                                                <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                                    <i
                                                        class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                                    <p class="text-[var(--text-muted)] mb-4"
                                                        v-text="t('summary.noSummary')"></p>
                                                    <button @click="generateSummary"
                                                        class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                        <i class="fas fa-magic mr-2"></i>${ t('summary.generateSummary')
                                                        }
                                                    </button>
                                                </div>

                                                <div v-else class="content-box relative">
                                                    <div v-if="!editingSummary"
                                                        class="absolute top-2 right-4 flex gap-1 z-10">
                                                        <button @click="copySummary" :title="t('buttons.copySummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-copy text-sm"></i>
                                                        </button>
                                                        <button @click="downloadSummary"
                                                            :title="t('buttons.downloadSummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-download text-sm"></i>
                                                        </button>
                                                        <button @click="toggleEditSummary"
                                                            :title="t('buttons.editSummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-edit text-sm"></i>
                                                        </button>
                                                    </div>
                                                    
                                                    <!-- 会议摘要 -->
                                                    <div v-if="!editingSummary" class="summary-box"
                                                        v-html="selectedRecording.summary_html || selectedRecording.summary">
                                                    </div>
                                                    <div v-else class="h-full flex flex-col">
                                                        <div class="markdown-editor-container flex-1">
                                                            <textarea ref="summaryMarkdownEditor"
                                                                v-model="selectedRecording.summary"
                                                                class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                :placeholder="t('form.enterSummaryMarkdown')">
                                                        </textarea>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-2">
                                                            <button @click="cancelEditSummary"
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                                取消
                                                            </button>
                                                            <button @click="saveEditSummary"
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                                保存
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Notes Tab -->
                                            <div v-if="selectedTab === 'notes'" class="h-full p-4 overflow-y-auto">
                                                <div class="content-box h-full relative">
                                                    <div v-if="!editingNotes"
                                                        class="absolute top-2 right-4 flex gap-1 z-10">
                                                        <button @click="copyNotes" :title="t('buttons.copyNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-copy text-sm"></i>
                                                        </button>
                                                        <button @click="downloadNotes"
                                                            :title="t('buttons.downloadNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-download text-sm"></i>
                                                        </button>
                                                        <button @click="toggleEditNotes" :title="t('buttons.editNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                            <i class="fas fa-edit text-sm"></i>
                                                        </button>
                                                    </div>

                                                    <div v-if="!editingNotes" class="notes-box h-full"
                                                        @click="clickToEditNotes">
                                                        <div v-if="selectedRecording.notes_html"
                                                            v-html="selectedRecording.notes_html">
                                                        </div>
                                                        <div v-else-if="selectedRecording.notes"
                                                            class="whitespace-pre-wrap">
                                                            ${selectedRecording.notes}
                                                        </div>
                                                        <div v-else
                                                            class="text-[var(--text-muted)] italic cursor-pointer hover:text-[var(--text-secondary)]">
                                                            ${ t('help.clickToAddNotes') }
                                                        </div>
                                                    </div>

                                                    <div v-else class="h-full flex flex-col">
                                                        <div class="markdown-editor-container flex-1">
                                                            <textarea ref="notesMarkdownEditor"
                                                                v-model="selectedRecording.notes"
                                                                class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                :placeholder="t('form.enterNotesMarkdown')">
                                                        </textarea>
                                                        </div>
                                                        <div class="flex justify-end gap-2 mt-2">
                                                            <button @click="cancelEditNotes"
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                                取消
                                                            </button>
                                                            <button @click="saveEditNotes"
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                                保存
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Events Tab -->
                                            <div v-if="selectedTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0"
                                                class="h-full p-4 overflow-y-auto">
                                                <div class="space-y-4">
                                                    <div v-for="event in selectedRecording.events" :key="event.id"
                                                        class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)] hover:border-[var(--border-accent)] transition-colors">
                                                        <div class="flex justify-between items-start mb-3">
                                                            <div class="flex-1">
                                                                <h3
                                                                    class="text-lg font-semibold text-[var(--text-primary)] mb-1">
                                                                    <i
                                                                        class="fas fa-calendar-check mr-2 text-[var(--text-accent)]"></i>
                                                                    ${ event.title }
                                                                </h3>
                                                                <p v-if="event.description"
                                                                    class="text-sm text-[var(--text-secondary)] mb-2">
                                                                    ${ event.description }
                                                                </p>
                                                            </div>
                                                            <button @click="downloadEventICS(event)"
                                                                class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm flex items-center gap-1.5"
                                                                :title="t('events.addToCalendar')">
                                                                <i class="fas fa-download"></i>
                                                                <span>Add to Calendar</span>
                                                            </button>
                                                        </div>

                                                        <div class="space-y-2 text-sm">
                                                            <div class="flex items-center gap-2"
                                                                v-if="event.start_datetime">
                                                                <i
                                                                    class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                                                                <span class="text-[var(--text-secondary)]">
                                                                    <strong>Start:</strong> ${
                                                                    formatEventDateTime(event.start_datetime) }
                                                                </span>
                                                            </div>
                                                            <div class="flex items-center gap-2"
                                                                v-if="event.end_datetime">
                                                                <i
                                                                    class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                                                                <span class="text-[var(--text-secondary)]">
                                                                    <strong>End:</strong> ${
                                                                    formatEventDateTime(event.end_datetime) }
                                                                </span>
                                                            </div>
                                                            <div class="flex items-center gap-2" v-if="event.location">
                                                                <i
                                                                    class="fas fa-map-marker-alt text-[var(--text-muted)] w-4"></i>
                                                                <span class="text-[var(--text-secondary)]">
                                                                    <strong>Location:</strong> ${ event.location }
                                                                </span>
                                                            </div>
                                                            <div class="flex items-start gap-2"
                                                                v-if="event.attendees && event.attendees.length > 0">
                                                                <i
                                                                    class="fas fa-users text-[var(--text-muted)] w-4 mt-0.5"></i>
                                                                <div class="text-[var(--text-secondary)]">
                                                                    <strong>Attendees:</strong>
                                                                    <span class="ml-1">${ event.attendees.join(', ')
                                                                        }</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div v-if="selectedRecording.events.length === 0"
                                                        class="text-center py-8">
                                                        <i
                                                            class="fas fa-calendar-times text-3xl text-[var(--text-muted)] mb-3"></i>
                                                        <p class="text-[var(--text-muted)]">No events detected in this
                                                            recording</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Chat Section -->
                                    <div class="border-t border-[var(--border-primary)] flex flex-col"
                                        :class="{'flex-1 overflow-hidden': isChatMaximized}">
                                        <!-- Chat Toggle -->
                                        <div
                                            class="bg-[var(--bg-tertiary)] px-4 py-3 hover:bg-[var(--bg-accent-hover)] transition-colors flex items-center">
                                            <button
                                                @click="() => { showChat = !showChat; if (!showChat) isChatMaximized = false; }"
                                                class="flex-1 text-left flex items-center">
                                                <span class="font-medium flex items-center">
                                                    <i class="fas fa-comments mr-2"></i>
                                                    ${ t('chat.chatWithTranscription') }
                                                </span>
                                            </button>
                                            <div class="flex items-center gap-2">
                                                <button v-if="chatMessages.length > 0" @click="downloadChat"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
                                                    :title="t('buttons.downloadChat')">
                                                    <i class="fas fa-download text-sm"></i>
                                                </button>
                                                <button @click="toggleChatMaximize"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
                                                    :title="isChatMaximized ? 'Restore chat' : 'Maximize chat'">
                                                    <i
                                                        :class="['fas text-sm', isChatMaximized ? 'fa-compress' : 'fa-expand']"></i>
                                                </button>
                                                <button
                                                    @click="() => { showChat = !showChat; if (!showChat) isChatMaximized = false; }"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                    <i
                                                        :class="['fas transition-transform duration-200', showChat ? 'fa-chevron-down' : 'fa-chevron-up']"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Chat Content -->
                                        <div v-if="showChat" class="flex flex-col relative"
                                            :class="isChatMaximized ? 'flex-1 overflow-hidden' : 'max-h-96'">
                                            <!-- Clear button - fixed at top right -->
                                            <button v-if="chatMessages.length > 0" @click="clearChat"
                                                class="absolute top-2 right-2 p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:text-[var(--text-danger)] rounded transition-all duration-200 z-20"
                                                title="Clear chat">
                                                <i class="fas fa-times text-xs"></i>
                                            </button>

                                            <!-- Chat Messages -->
                                            <div ref="chatMessagesRef"
                                                class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                                <div v-if="chatMessages.length === 0" class="text-center py-8">
                                                    <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                                    <p class="text-[var(--text-muted)]"
                                                        v-text="t('help.askAboutTranscription')"></p>
                                                </div>

                                                <div v-for="(message, index) in chatMessages" :key="index" :class="[
                                                     'message relative group',
                                                     message.role === 'user' ? 'user-message ml-auto' : 'ai-message',
                                                     message.role === 'assistant' ? 'pr-10' : ''
                                                 ]">
                                                    <!-- Copy button for assistant messages -->
                                                    <button v-if="message.role === 'assistant'"
                                                        @click="copyMessage(message.content, $event)"
                                                        class="absolute top-2 right-2 p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-all duration-200"
                                                        :title="t('buttons.copyMessage')">
                                                        <i class="fas fa-copy text-sm"></i>
                                                    </button>
                                                    <!-- Show thinking content if available -->
                                                    <div v-if="message.thinking && message.role === 'assistant'"
                                                        class="mb-2">
                                                        <button
                                                            @click="message.thinkingExpanded = !message.thinkingExpanded"
                                                            class="text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] flex items-center gap-1">
                                                            <i
                                                                :class="['fas', message.thinkingExpanded ? 'fa-chevron-down' : 'fa-chevron-right']"></i>
                                                            <span v-text="t('help.modelReasoning')"></span>
                                                            <span
                                                                class="text-[var(--text-muted)]">(${message.thinking.split('\n').length}
                                                                lines)</span>
                                                        </button>
                                                        <div v-if="message.thinkingExpanded"
                                                            class="mt-2 p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg text-xs text-[var(--text-muted)] max-h-64 overflow-y-auto">
                                                            <pre
                                                                class="whitespace-pre-wrap font-mono">${message.thinking}</pre>
                                                        </div>
                                                    </div>
                                                    <!-- Main message content -->
                                                    <div v-if="message.html" v-html="message.html"></div>
                                                    <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                                </div>

                                                <div v-if="isChatLoading" class="ai-message">
                                                    <i class="fas fa-spinner fa-spin mr-2"></i>
                                                    ${ t('chat.thinking') }
                                                </div>
                                            </div>

                                            <!-- Chat Input -->
                                            <div
                                                class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                                <div class="flex gap-2">
                                                    <textarea v-model="chatInput" @keydown="handleChatKeydown"
                                                        :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                        :placeholder="t('chat.placeholderWithHint')"
                                                        class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm"
                                                        rows="2">
                                                </textarea>
                                                    <button @click="sendChatMessage"
                                                        :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                                        <i class="fas fa-paper-plane"></i>
                                                    </button>
                                                </div>
                                                <p v-if="selectedRecording.status !== 'COMPLETED'"
                                                    class="text-xs text-[var(--text-muted)] mt-2">
                                                    ${ t('chat.availableAfterTranscription') }
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ==================== 功能块：录音详情视图 End ==================== -->

                    <!-- ==================== 功能块：无选中录音空态视图 Start ==================== -->
                    <!-- Empty State -->
                    <div v-else-if="currentView === 'detail' && !selectedRecording"
                        class="flex-1 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-microphone text-6xl text-[var(--text-muted)] mb-4"></i>
                            <h2 class="text-2xl font-bold mb-2" v-text="t('colorScheme.selectRecording')"></h2>
                            <p class="text-[var(--text-muted)] mb-6" v-text="t('colorScheme.chooseRecording')"></p>
                            <button @click="switchToUploadView"
                                class="px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                                <i class="fas fa-plus mr-2"></i>Upload New Recording
                            </button>
                        </div>
                    </div>
                </div>
        </div>

        <!-- ==================== 功能块：无选中录音空态视图 End ==================== -->
        <!-- ==================== 功能块：主内容视图区 End ==================== -->
        <!-- ==================== 功能块：应用主工作区 End ==================== -->

        <!-- ==================== 功能块：上传队列进度弹层 Start ==================== -->
        <!-- Upload Progress Popup -->
        <div v-if="uploadQueue.length > 0 && !progressPopupClosed" :class="[
                 'fixed bottom-4 left-4 z-[100] w-96 transition-all duration-300',
                 progressPopupMinimized ? 'minimized' : ''
             ]">
            <div class="bg-[var(--bg-secondary)] border-2 border-[var(--bg-accent)] rounded-lg shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-95 
                        ring-4 ring-[var(--bg-accent)] ring-opacity-20"
                style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--bg-accent), 0 0 20px rgba(var(--bg-accent-rgb), 0.3)">
                <!-- Progress Header -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-accent-hover)] px-4 py-3">
                    <!-- Top row: Title and buttons -->
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2 min-w-0">
                            <i class="fas fa-upload text-gray-800 dark:text-white animate-pulse"></i>
                            <span class="font-semibold text-gray-800 dark:text-white truncate"
                                v-text="t('uploadProgress.title')"></span>
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            <button v-if="completedInQueue > 0" @click="clearCompletedUploads()"
                                class="px-2 py-0.5 text-xs bg-black dark:bg-white bg-opacity-10 dark:bg-opacity-20 hover:bg-opacity-20 dark:hover:bg-opacity-30 rounded transition-all duration-200 text-gray-800 dark:text-white font-medium"
                                :title="t('buttons.clearCompleted')">
                                Clear
                            </button>
                            <button @click="progressPopupMinimized = !progressPopupMinimized"
                                class="p-1 rounded hover:bg-black dark:hover:bg-white hover:bg-opacity-10 dark:hover:bg-opacity-20 transition-colors text-gray-800 dark:text-white">
                                <i :class="progressPopupMinimized ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
                            </button>
                            <button @click="progressPopupClosed = true"
                                class="p-1 rounded hover:bg-red-600 dark:hover:bg-red-500 hover:bg-opacity-20 dark:hover:bg-opacity-30 text-gray-800 dark:text-white hover:text-white transition-colors">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- Overall Progress Bar -->
                    <div class="space-y-1">
                        <div class="flex justify-between items-center text-xs text-gray-800 dark:text-white">
                            <span class="font-medium">${completedInQueue} of ${totalInQueue} files</span>
                            <span class="font-bold">${Math.round((completedInQueue / Math.max(totalInQueue, 1)) *
                                100)}%</span>
                        </div>
                        <div
                            class="w-full bg-black dark:bg-white bg-opacity-10 dark:bg-opacity-20 rounded-full h-2 overflow-hidden">
                            <div class="bg-white dark:bg-white bg-opacity-80 dark:bg-opacity-90 h-full rounded-full transition-all duration-500 ease-out relative overflow-hidden"
                                :style="{width: (completedInQueue / Math.max(totalInQueue, 1) * 100) + '%'}">
                                <div class="absolute inset-0 bg-white opacity-30 animate-pulse"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress Content -->
                <div v-if="!progressPopupMinimized" class="p-3 max-h-64 overflow-y-auto">
                    <div v-if="currentlyProcessingFile"
                        class="mb-3 p-3 bg-[var(--bg-accent)] bg-opacity-10 border border-[var(--border-accent)] rounded-lg">
                        <div class="flex items-center justify-between mb-2">
                            <span
                                class="font-semibold truncate min-w-0 text-sm text-[var(--text-primary)]">${currentlyProcessingFile.file.name}</span>
                            <span
                                class="text-sm flex-shrink-0 ml-2 font-bold text-[var(--text-accent)]">${processingProgress}%</span>
                        </div>
                        <div class="w-full bg-[var(--bg-tertiary)] rounded-full h-2 mb-2 overflow-hidden">
                            <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-accent-hover)] h-full rounded-full transition-all duration-300 relative"
                                :style="{width: processingProgress + '%'}">
                                <div class="absolute inset-0 bg-white opacity-20 animate-pulse"></div>
                            </div>
                        </div>
                        <p class="text-xs text-[var(--text-secondary)] font-medium">${processingMessage}</p>
                    </div>

                    <div v-if="finishedFilesInQueue.length > 0" class="space-y-2">
                        <h4 class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider opacity-70"
                            v-text="t('help.completedFiles')"></h4>
                        <div v-for="item in finishedFilesInQueue" :key="item.clientId"
                            class="progress-list-item p-2 bg-[var(--bg-tertiary)] bg-opacity-50 rounded-lg flex items-center gap-2 hover:bg-opacity-70 transition-all duration-200">
                            <i :class="[
                                'fas',
                                item.status === 'completed' ? 'fa-check-circle text-green-500' : 'fa-exclamation-circle text-red-500'
                            ]"></i>
                            <span class="truncate text-sm flex-1 text-[var(--text-primary)]">${item.file.name}</span>
                            <span :class="[
                                'text-xs px-2 py-1 rounded-full font-semibold',
                                item.status === 'completed' ? 'bg-green-500 bg-opacity-20 text-green-600 dark:text-green-400' : 'bg-red-500 bg-opacity-20 text-red-600 dark:text-red-400'
                            ]">
                                ${item.status === 'completed' ? t('tagsModal.done') : t('status.failed')}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：上传队列进度弹层 End ==================== -->

        <!-- ==================== 功能块：共享弹窗区 Start ==================== -->
        <!-- Modals -->
        <!-- ==================== 功能块：录音基础信息编辑弹窗 Start ==================== -->
        <!-- Edit Modal -->
        <div v-if="showEditModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.editRecording')"></h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.title')"></label>
                        <input v-model="editingRecording.title"
                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.participants')"></label>
                        <input v-model="editingRecording.participants"
                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.meetingDate')"></label>
                        <input v-model="editingRecording.meeting_date" type="date"
                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.notes')"></label>
                        <textarea v-model="editingRecording.notes" rows="4"
                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="cancelEdit"
                        class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        取消
                    </button>
                    <button @click="saveEdit"
                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        保存更改
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：录音基础信息编辑弹窗 End ==================== -->

        <!-- ==================== 功能块：录音删除确认弹窗 Start ==================== -->
        <!-- Delete Confirmation Modal -->
        <div v-if="showDeleteModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-md">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <i class="fas fa-exclamation-triangle text-3xl text-[var(--text-danger)]"></i>
                        <div>
                            <h3 class="text-lg font-semibold" v-text="t('modal.deleteRecording')"></h3>
                            <p class="text-[var(--text-muted)]" v-text="t('help.thisActionCannotBeUndone')"></p>
                        </div>
                    </div>
                    <p class="text-[var(--text-secondary)] mb-6">
                        Are you sure you want to delete "${recordingToDelete?.title || 'this recording'}"?
                    </p>
                    <div class="flex justify-end gap-3">
                        <button @click="cancelDelete"
                            class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                            取消
                        </button>
                        <button @click="deleteRecording"
                            class="px-4 py-2 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：录音删除确认弹窗 End ==================== -->

        <!-- ==================== 功能块：录音标签编辑弹窗 Start ==================== -->
        <!-- Edit Recording Tags Modal -->
        <div v-if="showEditTagsModal" @click="closeEditTagsModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop
                class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
                <div class="flex-shrink-0 p-6 border-b border-[var(--border-primary)]">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-[var(--text-primary)]" v-text="t('modal.editTags')"></h3>
                        <button @click="closeEditTagsModal"
                            class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="flex-1 overflow-y-auto p-6 space-y-4">
                    <!-- Current Tags Section -->
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-3">
                            <i class="fas fa-tags mr-1 text-[var(--text-muted)]"></i>
                            <span v-text="t('tagsModal.currentTags')"></span>
                        </label>
                        <div v-if="getRecordingTags(editingRecording).length > 0"
                            class="p-2 bg-[var(--bg-primary)] rounded-md border border-[var(--border-secondary)] max-h-20 overflow-y-auto">
                            <div class="flex flex-wrap gap-1">
                                <span v-for="tag in getRecordingTags(editingRecording)" :key="tag.id"
                                    class="group inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white transition-all"
                                    :style="{ backgroundColor: tag.color }">
                                    <span v-text="tag.name"></span>
                                    <button @click="removeTagFromRecording(tag.id)"
                                        class="ml-1 opacity-70 hover:opacity-100 transition-opacity">
                                        <i class="fas fa-times" style="font-size: 9px;"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div v-else
                            class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-inbox mr-1"></i>
                                <span v-text="t('tagsModal.noTagsAssigned')"></span>
                            </p>
                        </div>
                    </div>

                    <!-- Add Tags Section -->
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-3">
                            <i class="fas fa-plus-circle mr-1 text-[var(--text-muted)]"></i>
                            <span v-text="t('tagsModal.addTags')"></span>
                        </label>

                        <!-- Search Filter (always visible if tags available) -->
                        <div v-if="getAvailableTagsForRecording(editingRecording).length > 0" class="mb-2">
                            <div class="relative">
                                <input v-model="tagSearchFilter" type="text" :placeholder="t('tagsModal.searchTags')"
                                    class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]"
                                    style="font-size: 9px;"></i>
                                <button v-if="tagSearchFilter" @click="tagSearchFilter = ''"
                                    class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                    <i class="fas fa-times" style="font-size: 9px;"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Available Tags Grid - Fixed Height -->
                        <div v-if="filteredAvailableTagsForModal.length > 0"
                            class="border border-[var(--border-secondary)] rounded-md p-1.5 bg-[var(--bg-primary)]"
                            style="max-height: 150px; overflow-y: auto;">
                            <div class="grid grid-cols-2 gap-1">
                                <button v-for="tag in filteredAvailableTagsForModal" :key="tag.id"
                                    @click="addTagToRecording(tag.id)"
                                    class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] transition-all">
                                    <div class="flex items-center gap-1 min-w-0">
                                        <span class="w-2 h-2 rounded-full flex-shrink-0"
                                            :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                        <span class="text-[11px] text-[var(--text-primary)] truncate"
                                            v-text="tag.name"></span>
                                    </div>
                                    <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors"
                                        style="font-size: 9px;"></i>
                                </button>
                            </div>
                        </div>
                        <div v-else-if="getAvailableTagsForRecording(editingRecording).length > 0"
                            class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-search mr-1"></i>
                                No tags match your filter
                            </p>
                        </div>
                        <div v-else
                            class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-check-circle mr-1"></i>
                                所有可用标签已添加
                            </p>
                        </div>
                    </div>
                </div>
                <div
                    class="flex-shrink-0 px-6 py-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex justify-end gap-3 rounded-b-lg">
                    <button @click="closeEditTagsModal"
                        class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-primary)] rounded-md hover:bg-[var(--bg-button-hover)] transition-colors">
                        <span v-text="t('tagsModal.done')"></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：录音标签编辑弹窗 End ==================== -->

        <!-- ==================== 功能块：配色方案设置弹窗 Start ==================== -->
        <!-- Color Scheme Modal -->
        <div v-if="showColorSchemeModal" class="color-scheme-modal" @click.self="closeColorSchemeModal">
            <div class="color-scheme-modal-content">
                <div class="color-scheme-header">
                    <h2 class="color-scheme-title">
                        <i class="fas fa-palette"></i>
                        Choose Color Scheme
                    </h2>
                    <p class="color-scheme-subtitle" v-text="t('colorScheme.subtitle')"></p>
                </div>

                <div class="color-scheme-body">
                    <div class="color-scheme-section">
                        <h3 class="color-scheme-section-title">
                            <i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
                            ${isDarkMode ? 'Dark' : 'Light'} Themes
                        </h3>
                        <div class="color-scheme-grid">
                            <div v-for="scheme in colorSchemes[isDarkMode ? 'dark' : 'light']" :key="scheme.id"
                                @click="selectColorScheme(scheme.id)"
                                :class="['color-scheme-option', currentColorScheme === scheme.id ? 'active' : '']">
                                <div class="color-scheme-preview">
                                    <div
                                        :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-primary color-scheme-preview-segment`">
                                    </div>
                                    <div
                                        :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-secondary color-scheme-preview-segment`">
                                    </div>
                                    <div
                                        :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-tertiary color-scheme-preview-segment`">
                                    </div>
                                </div>
                                <div class="color-scheme-name">${scheme.name}</div>
                                <div class="color-scheme-description">${scheme.description}</div>
                                <div v-if="currentColorScheme === scheme.id" class="color-scheme-check">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="color-scheme-footer">
                    <button @click="resetColorScheme" class="color-scheme-reset-btn">
                        <i class="fas fa-undo mr-2"></i>Reset to Default
                    </button>
                    <button @click="closeColorSchemeModal" class="color-scheme-close-btn">
                        Close
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：配色方案设置弹窗 End ==================== -->

        <!-- ==================== 功能块：重新处理确认弹窗 Start ==================== -->
        <!-- Reprocess Confirmation Modal -->
        <div v-if="showReprocessModal" @click="cancelReprocess"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm transition-all duration-300 ease-in-out">
            <div @click.stop
                class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div
                    class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-5 rounded-t-xl flex items-center">
                    <div class="flex items-center">
                        <div
                            class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-4 shadow-lg">
                            <i class="fas fa-sync-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-[var(--text-primary)] mb-1"
                                v-text="t('help.confirmReprocessingTitle')"></h3>
                            <p class="text-sm text-[var(--text-muted)] capitalize">${ reprocessType } reprocessing</p>
                        </div>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6 modal-content">
                    <div v-if="reprocessRecording" class="mb-6">
                        <div class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)]">
                            <div class="flex items-start space-x-3">
                                <i class="fas fa-file-audio text-[var(--text-accent)] mt-1"></i>
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-medium text-[var(--text-primary)] truncate"
                                        :title="reprocessRecording.title">
                                        ${ reprocessRecording.title || 'Untitled Recording' }
                                    </h4>
                                    <p class="text-sm text-[var(--text-muted)] mt-1">
                                        Created: ${ new Date(reprocessRecording.created_at).toLocaleDateString() }
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div
                                class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-exclamation-triangle text-amber-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1"
                                    v-text="t('help.whatWillHappen')"></p>
                                <p class="text-sm text-[var(--text-muted)]"
                                    v-if="reprocessType === 'transcription' && !useAsrEndpoint">
                                    <span v-text="t('reprocessModal.audioReTranscribedFromScratch')"></span>
                                </p>
                                <p class="text-sm text-[var(--text-muted)]"
                                    v-else-if="reprocessType === 'transcription' && useAsrEndpoint">
                                    <span v-text="t('reprocessModal.audioReTranscribedWithAsr')"></span>
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'summary'">
                                    <span v-text="t('reprocessModal.newTitleAndSummary')"></span>
                                </p>
                            </div>
                        </div>

                        <!-- ASR Options -->
                        <div v-if="reprocessType === 'transcription' && useAsrEndpoint"
                            class="space-y-4 pt-4 border-t border-[var(--border-primary)]">
                            <h4 class="text-md font-semibold text-[var(--text-secondary)]"
                                v-text="t('help.advancedAsrOptions')"></h4>
                            <div>
                                <label for="asr-language-reprocess"
                                    class="block text-sm font-medium text-[var(--text-muted)]"
                                    v-text="t('form.language')"></label>
                                <input type="text" id="asr-language-reprocess" v-model="asrReprocessOptions.language"
                                    class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]"
                                    placeholder="e.g., en, es, zh (optional)">
                            </div>
                            <div>
                                <label for="asr-min-speakers-reprocess"
                                    class="block text-sm font-medium text-[var(--text-muted)]"
                                    v-text="t('form.minSpeakers')"></label>
                                <input type="number" id="asr-min-speakers-reprocess"
                                    v-model.number="asrReprocessOptions.min_speakers"
                                    class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]"
                                    :placeholder="t('form.optional')">
                            </div>
                            <div>
                                <label for="asr-max-speakers-reprocess"
                                    class="block text-sm font-medium text-[var(--text-muted)]"
                                    v-text="t('form.maxSpeakers')"></label>
                                <input type="number" id="asr-max-speakers-reprocess"
                                    v-model.number="asrReprocessOptions.max_speakers"
                                    class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]"
                                    :placeholder="t('form.optional')">
                            </div>
                        </div>

                        <div class="flex items-start space-x-3">
                            <div
                                class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-clock text-blue-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1"
                                    v-text="t('help.processingTime')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('help.processingTimeDescription')"></span>
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-3" v-if="reprocessType === 'transcription'">
                            <div
                                class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1"
                                    v-text="t('help.importantNote')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('reprocessModal.manualEditsOverwritten')"></span>
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-3" v-else-if="reprocessType === 'summary'">
                            <div
                                class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1"
                                    v-text="t('help.importantNote')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('reprocessModal.manualEditsOverwrittenSummary')"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer with action buttons -->
                <div
                    class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3 border-t border-[var(--border-primary)]">
                    <button @click="cancelReprocess"
                        class="px-5 py-2.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-all duration-200 flex items-center shadow-sm font-medium">
                        <i class="fas fa-times mr-2"></i>
                        取消
                    </button>
                    <button @click="executeReprocess"
                        class="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center shadow-lg font-medium transform hover:scale-105">
                        <i class="fas fa-sync-alt mr-2"></i>
                        开始重新处理
                    </button>
                </div>
            </div>
        </div>
        <!-- ==================== 功能块：重新处理确认弹窗 End ==================== -->

        <!-- ==================== 功能块：状态重置确认弹窗 Start ==================== -->
        <!-- Reset Status Confirmation Modal -->
        <div v-if="showResetModal" @click="cancelReset"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md">
                <div class="p-6 text-center">
                    <div
                        class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-800 mb-4">
                        <i class="fas fa-exclamation-triangle text-2xl text-orange-500 dark:text-orange-300"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2" v-text="t('modal.resetStatus')">
                    </h3>
                    <p class="text-sm text-[var(--text-muted)] mb-6">
                        This will mark the recording as 'Failed'. This is useful if processing is stuck. You will be
                        able to reprocess it afterwards.
                    </p>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3">
                    <button @click="cancelReset"
                        class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">
                        取消
                    </button>
                    <button @click="executeReset"
                        class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600">
                        Yes, Reset Status
                    </button>
                </div>
            </div>
        </div>
        <!-- ==================== 功能块：状态重置确认弹窗 End ==================== -->

        <!-- ==================== 功能块：纯文本转写编辑弹窗 Start ==================== -->
        <!-- Simple Transcription Editor Modal -->
        <div v-if="showTextEditorModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.editTranscription')"></h3>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto flex-1">
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('transcription.title')"></label>
                        <textarea v-model="editingTranscriptionContent" rows="15"
                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] font-mono text-sm">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeTextEditorModal"
                        class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        取消
                    </button>
                    <button @click="saveTranscription"
                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        保存更改
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：纯文本转写编辑弹窗 End ==================== -->

        <!-- ==================== 功能块：ASR 分段转写编辑弹窗 Start ==================== -->
        <!-- ASR Transcription Editor Modal -->
        <div v-if="showAsrEditorModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop
                class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-6xl flex flex-col max-h-[90vh]">
                <div
                    class="p-5 border-b border-[var(--border-primary)] flex-shrink-0 flex justify-between items-center">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]" v-text="t('modal.editAsrTranscription')">
                    </h3>
                    <button @click="closeAsrEditorModal"
                        class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="flex-grow overflow-y-auto custom-scrollbar p-6">
                    <table class="min-w-full asr-editor-table">
                        <thead>
                            <tr>
                                <th class="w-1/4" v-text="t('help.speakerCount')"></th>
                                <th class="w-24" v-text="t('help.startTime')"></th>
                                <th class="w-24" v-text="t('help.endTime')"></th>
                                <th v-text="t('help.sentence')"></th>
                                <th class="w-12"><span class="sr-only" v-text="t('help.actions')"></span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(segment, index) in editingSegments" :key="segment.id || index">
                                <td>
                                    <div class="speaker-combobox" @mouseleave="closeSpeakerSuggestions(index)">
                                        <input type="text" v-model="segment.speaker" @input="filterSpeakers(index)"
                                            @focus="openSpeakerSuggestions(index)"
                                            class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] speaker-combobox-input" />
                                        <div class="speaker-combobox-arrow">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                        <div v-if="segment.showSuggestions" class="speaker-combobox-suggestions">
                                            <div v-for="speaker in segment.filteredSpeakers"
                                                @mousedown="selectSpeaker(index, speaker)"
                                                class="speaker-suggestion-item">${speaker}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.start_time"
                                            class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'start_time', 0.1)"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                                                </svg></button>
                                            <button @click="adjustTime(index, 'start_time', -0.1)"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                </svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.end_time"
                                            class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'end_time', 0.1)"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                                                </svg></button>
                                            <button @click="adjustTime(index, 'end_time', -0.1)"><svg
                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                </svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <textarea v-model="segment.sentence" rows="1"
                                        class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] resize-y"></textarea>
                                </td>
                                <td class="text-center">
                                    <button @click="removeSegment(index)" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mt-4">
                        <button @click="addSegment"
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> 添加片段
                        </button>
                    </div>
                </div>
                <div
                    class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-end space-x-3 border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <button @click="closeAsrEditorModal"
                        class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]"
                        v-text="t('common.cancel')"></button>
                    <button @click="saveAsrTranscription"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                        v-text="t('buttons.saveChanges')"></button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：ASR 分段转写编辑弹窗 End ==================== -->

        <!-- ==================== 功能块：说话人识别弹窗 Start ==================== -->
        <!-- Speaker Identification Modal -->
        <div v-if="showSpeakerModal" @click="closeSpeakerModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop @click="closeSpeakerSuggestionsOnClick"
                class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-4xl flex flex-col h-[85vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]" v-text="t('modal.identifySpeakers')"></h3>
                    <!-- Warning for too many speakers -->
                    <div v-if="modalSpeakers.length > 8"
                        class="mt-3 p-3 bg-[var(--bg-warn-light)] border border-amber-300 dark:border-amber-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-[var(--text-warn-strong)] mt-0.5 mr-2"></i>
                            <div class="text-sm">
                                <p class="font-medium text-[var(--text-warn-strong)]"
                                    v-text="t('help.moreSpeakersThanColors')"></p>
                                <p class="text-[var(--text-warn-strong)] mt-1"
                                    v-text="t('help.youHaveXSpeakers', { count: modalSpeakers.length })">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-grow flex overflow-hidden modal-content">
                    <div
                        class="w-1/3 p-6 space-y-4 overflow-y-auto custom-scrollbar border-r border-[var(--border-primary)]">
                        <div v-for="(speaker, index) in modalSpeakers"
                            :key="`${selectedRecording.id}-speaker-${index}-${speaker}`" class="space-y-3">
                            <!-- Speaker label with color indicator and "This is Me" checkbox on same line -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <div :class="speakerMap[speaker].color"
                                        class="w-4 h-4 rounded-full border border-white/30 shadow-sm flex-shrink-0">
                                    </div>
                                    <span class="font-mono text-sm text-[var(--text-muted)]">${
                                        speakerDisplayMap[speaker] || speaker }</span>
                                    <span v-if="index >= 8"
                                        class="text-xs text-[var(--text-warn-strong)] bg-[var(--bg-warn-light)] px-2 py-0.5 rounded-full"
                                        title="Color repeats from speaker ${ ((index % 8) + 1) }">
                                        Repeat
                                    </span>
                                </div>
                                <label
                                    class="flex items-center text-sm text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-primary)] transition-colors">
                                    <input type="checkbox" v-model="speakerMap[speaker].isMe"
                                        @focus="highlightSpeakerInTranscript(speaker)" @blur="clearSpeakerHighlight"
                                        class="speaker-checkbox">
                                    <span class="ml-2 select-none" v-text="t('help.me')"></span>
                                </label>
                            </div>

                            <!-- Autocomplete input field - disabled when "This is Me" is checked -->
                            <div class="relative">
                                <input type="text" v-model="speakerMap[speaker].name"
                                    @input="searchSpeakers($event.target.value, speaker)" @focus="focusSpeaker(speaker)"
                                    @blur="blurSpeaker()" :disabled="speakerMap[speaker].isMe"
                                    class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed"
                                    :placeholder="speakerMap[speaker].isMe ? t('help.me') : t('help.enterNameFor') + ' ' + (speakerDisplayMap[speaker] || speaker)"
                                    autocomplete="off">

                                <!-- Loading indicator -->
                                <div v-if="loadingSuggestions[speaker] && !speakerMap[speaker].isMe"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <i class="fas fa-spinner fa-spin text-[var(--text-muted)] text-sm"></i>
                                </div>

                                <!-- Suggestions dropdown - Only show when this input is active -->
                                <div v-if="activeSpeakerInput === speaker && speakerSuggestions[speaker] && speakerSuggestions[speaker].length > 0 && !speakerMap[speaker].isMe"
                                    @click.stop
                                    class="absolute z-10 w-full mt-1 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-md shadow-lg max-h-48 overflow-y-auto">
                                    <div class="py-1">
                                        <div v-for="suggestion in speakerSuggestions[speaker]" :key="suggestion.id"
                                            @click="selectSpeakerSuggestion(speaker, suggestion)"
                                            class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)] flex items-center justify-between">
                                            <div class="flex-grow">
                                                <div class="text-sm font-medium text-[var(--text-primary)]">${
                                                    suggestion.name }</div>
                                                <div class="text-xs text-[var(--text-muted)]">
                                                    Used ${ suggestion.use_count } time${ suggestion.use_count !== 1 ?
                                                    's' : '' }
                                                    <span v-if="suggestion.last_used">
                                                        • Last: ${ new Date(suggestion.last_used).toLocaleDateString() }
                                                    </span>
                                                </div>
                                            </div>
                                            <i class="fas fa-user text-[var(--text-muted)] ml-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-2/3 p-6 flex flex-col overflow-hidden">
                        <!-- Audio Player Section -->
                        <div class="mb-4 flex-shrink-0">
                            <h4 class="font-semibold text-[var(--text-secondary)] mb-2" v-text="t('help.audioPlayer')">
                            </h4>
                            <div class="audio-player-container">
                                <audio controls class="w-full speaker-modal-transcript" :key="selectedRecording.id"
                                    :src="'/tool/speakr/audio/' + selectedRecording.id" :volume="playerVolume"
                                    @volumechange="onPlayerVolumeChange">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>

                        <!-- Transcript Section -->
                        <div class="flex-grow overflow-y-auto custom-scrollbar speaker-modal-transcript"
                            @click="seekAudioFromEvent">
                            <div v-if="processedTranscription.isJson">
                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index"
                                    class="speaker-segment mb-2" :data-start-time="segment.startTime">
                                    <p>
                                        <span
                                            :class="[segment.color, 'speaker-tag', { 'speaker-highlight': highlightedSpeaker === segment.speakerId }]"
                                            :data-speaker-id="segment.speakerId">[${ segment.speaker }]</span>:
                                        <span
                                            class="word cursor-pointer hover:bg-[var(--bg-accent)] hover:text-[var(--text-accent)] rounded px-0.5">${
                                            segment.sentence }</span>
                                    </p>
                                </div>
                            </div>
                            <div v-else v-html="highlightedTranscript"></div>
                        </div>

                        <!-- Speaker Navigation Controls (at bottom) - Always visible for consistent height -->
                        <div class="mt-3 p-3 bg-[var(--bg-tertiary)] rounded-lg flex items-center justify-between flex-shrink-0"
                            :class="{'opacity-50': !highlightedSpeaker || speakerGroups.length <= 1}">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-[var(--text-muted)]">
                                    Navigate <span class="font-semibold">${ speakerDisplayMap[highlightedSpeaker] ||
                                        highlightedSpeaker }</span> groups:
                                </span>
                                <span class="text-xs text-[var(--text-muted)]">
                                    (${ currentSpeakerGroupIndex + 1 } of ${ speakerGroups.length })
                                </span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <button @mousedown.prevent @click="navigateToPrevSpeakerGroup"
                                    class="px-3 py-1.5 bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] rounded-md border border-[var(--border-secondary)] transition-all flex items-center text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                    :disabled="!highlightedSpeaker || speakerGroups.length <= 1">
                                    <i class="fas fa-chevron-up mr-1.5"></i>
                                    Previous
                                </button>
                                <button @mousedown.prevent @click="navigateToNextSpeakerGroup"
                                    class="px-3 py-1.5 bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] rounded-md border border-[var(--border-secondary)] transition-all flex items-center text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                    :disabled="!highlightedSpeaker || speakerGroups.length <= 1">
                                    Next
                                    <i class="fas fa-chevron-down ml-1.5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex-shrink-0">
                    <label
                        class="flex items-center text-sm text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-primary)] transition-colors">
                        <input type="checkbox" v-model="regenerateSummaryAfterSpeakerUpdate" class="speaker-checkbox">
                        <span class="ml-2 select-none" v-text="t('help.regenerateSummaryAfterNames')"></span>
                    </label>
                </div>
                <div
                    class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-between items-center border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <div>
                        <button @click="autoIdentifySpeakers"
                            class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center"
                            :disabled="isAutoIdentifying">
                            <i class="fas fa-magic mr-2"></i>
                            <span v-if="!isAutoIdentifying" v-text="t('help.autoIdentify')"></span>
                            <span v-else>
                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                Identifying...
                            </span>
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <button @click="closeSpeakerModal"
                            class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]"
                            v-text="t('common.cancel')"></button>
                        <button @click="saveSpeakerNames" :disabled="!hasSpeakerNames" :class="hasSpeakerNames 
                                ? 'px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer' 
                                : 'px-4 py-2 bg-gray-400 text-gray-200 rounded-lg cursor-not-allowed'">
                            保存名称
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：说话人识别弹窗 End ==================== -->

        <!-- ==================== 功能块：全局错误提示区 Start ==================== -->
        <!-- Global Error Display -->
        <div v-if="globalError"
            class="fixed top-4 right-4 bg-[var(--bg-danger)] text-white p-4 rounded-lg shadow-lg z-50 max-w-md">
            <div class="flex items-start gap-3">
                <i class="fas fa-exclamation-circle text-lg flex-shrink-0 mt-0.5"></i>
                <div class="flex-1">
                    <p class="font-medium" v-text="t('common.error')"></p>
                    <p class="text-sm opacity-90">${globalError}</p>
                </div>
                <button @click="globalError = null" class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <!-- ==================== 功能块：全局错误提示区 End ==================== -->

        <!-- ==================== 功能块：系统音频录制帮助弹窗 Start ==================== -->
        <!-- System Audio Help Modal -->
        <div v-if="showSystemAudioHelp"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 backdrop-blur-sm">
            <div
                class="bg-[var(--bg-secondary)] w-full h-full md:h-auto md:max-h-[90vh] md:w-full md:max-w-2xl md:rounded-lg md:shadow-xl flex flex-col">
                <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold flex items-center">
                            <i class="fas fa-desktop mr-2 text-blue-500"></i>
                            System Audio Recording
                        </h3>
                        <button @click="showSystemAudioHelp = false"
                            class="text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="p-6 space-y-6 overflow-y-auto flex-grow">
                    <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                        <h4 class="font-medium text-[var(--text-primary)] mb-2"
                            v-text="t('help.howToRecordSystemAudio')"></h4>
                        <p class="text-sm text-[var(--text-muted)]" v-text="t('help.toCaptureAudioFromMeetings')">
                        </p>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-3">
                            <li v-text="t('help.recordSystemSteps1')"></li>
                            <li><span v-text="t('help.recordSystemSteps2')"></span> <strong>"${ t('help.entireScreen')
                                    }"</strong> or a <strong v-text="t('help.specificBrowserTab')"></strong>.</li>
                            <li><span v-text="t('help.recordSystemSteps3')"></span> <strong>"${ t('help.shareTabAudio')
                                    }"</strong> or <strong>"${ t('help.shareSystemAudio') }"</strong>.</li>
                        </ol>
                        <p class="text-xs text-amber-600 dark:text-amber-400 mt-3"><i
                                class="fas fa-exclamation-triangle mr-1"></i><span
                                v-text="t('help.sharingWindowNoAudio')"></span></p>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-[var(--text-primary)]" v-text="t('help.troubleshooting')"></h4>

                        <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2" v-text="t('help.whyNotWorking')">
                            </h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                System audio recording requires a secure (HTTPS) connection. If you are developing
                                locally, you may need to enable a browser flag.
                            </p>
                        </div>

                        <!-- Chrome Solution -->
                        <div v-if="browser === 'chrome'"
                            class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-chrome mr-2"></i>
                                For Chrome on Localhost
                            </h5>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)]">
                                <li>Go to: <code
                                        class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>
                                </li>
                                <li>Add your local URL (e.g., <code
                                        class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">http://localhost:8899</code>)
                                </li>
                                <li>Set to <strong>"Enabled"</strong> and relaunch Chrome.</li>
                            </ol>
                        </div>

                        <!-- Firefox Solution -->
                        <div v-else-if="browser === 'firefox'"
                            class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-firefox-browser mr-2"></i>
                                For Firefox on Localhost
                            </h5>
                            <p class="text-sm text-[var(--text-secondary)]">
                                System audio recording is not well-supported on Firefox, even with these changes. For
                                best results, please use Chrome.
                            </p>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-2">
                                <li>Go to: <code
                                        class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">about:config</code>
                                </li>
                                <li>Search for <code
                                        class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">media.devices.insecure.enabled</code>
                                    and set it to `true`.</li>
                                <li>Restart Firefox.</li>
                            </ol>
                        </div>

                        <!-- Other Browsers -->
                        <div v-else
                            class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2"
                                v-text="t('help.unsupportedBrowser')"></h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                For the best experience with system audio recording, we recommend using Google Chrome.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="p-4 border-t border-[var(--border-primary)] flex justify-end flex-shrink-0">
                    <button @click="showSystemAudioHelp = false"
                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Got it
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：系统音频录制帮助弹窗 End ==================== -->

        <!-- ==================== 功能块：录音免责声明弹窗 Start ==================== -->
        <!-- Recording Disclaimer Modal -->
        <div v-if="showRecordingDisclaimerModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div
                class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
                <div class="flex-shrink-0 p-6 border-b border-[var(--border-primary)]">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-info-circle text-2xl text-[var(--text-accent)]"></i>
                        <h3 class="text-xl font-semibold text-[var(--text-primary)]"
                            v-text="t('modal.recordingNotice')"></h3>
                    </div>
                </div>
                <div class="flex-1 overflow-y-auto p-6">
                    <!-- Render markdown content -->
                    <div class="prose prose-sm max-w-none text-[var(--text-secondary)]"
                        style="color: var(--text-secondary); line-height: 1.6;">
                        <div v-html="recordingDisclaimer"></div>
                    </div>
                </div>
                <div
                    class="flex-shrink-0 p-6 border-t border-[var(--border-primary)] bg-[var(--bg-tertiary)] rounded-b-lg">
                    <div class="flex justify-end gap-3">
                        <button @click="cancelRecordingDisclaimer"
                            class="px-6 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors border border-[var(--border-secondary)]">
                            取消
                        </button>
                        <button @click="acceptRecordingDisclaimer"
                            class="px-6 py-2 bg-[var(--bg-accent)] text-white rounded-lg hover:bg-[var(--bg-accent-hover)] transition-colors">
                            <i class="fas fa-microphone mr-2"></i>
                            Start Recording
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：录音免责声明弹窗 End ==================== -->

        <!-- ==================== 功能块：页面 Toast 提示容器 Start ==================== -->
        <!-- Toast Container -->
        <div id="toastContainer" class="fixed bottom-4 right-4 z-50 space-y-2"></div>

        <!-- ==================== 功能块：页面 Toast 提示容器 End ==================== -->

        <!-- ==================== 功能块：录音分享弹窗 Start ==================== -->
        <!-- Share Modal -->
        <div v-if="showShareModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.shareRecording')"></h3>
                </div>
                <div class="p-6 space-y-4">
                    <p class="text-sm text-[var(--text-muted)]" v-text="t('help.createPublicLink')"></p>
                    <div v-if="!generatedShareLink">
                        <div class="flex items-center mb-2">
                            <input type="checkbox" v-model="shareOptions.share_summary" id="share_summary"
                                class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_summary" class="ml-2 block text-sm text-[var(--text-secondary)]"
                                v-text="t('form.shareSummary')"></label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" v-model="shareOptions.share_notes" id="share_notes"
                                class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_notes" class="ml-2 block text-sm text-[var(--text-secondary)]"
                                v-text="t('form.shareNotes')"></label>
                        </div>
                    </div>
                    <div v-if="generatedShareLink" class="mt-4">
                        <div v-if="existingShareDetected"
                            class="mb-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                            <div class="flex items-start gap-2">
                                <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-0.5"></i>
                                <div class="text-sm text-blue-800 dark:text-blue-300">
                                    <p class="font-medium">Using existing share link</p>
                                    <p class="mt-1 text-xs opacity-90">This recording was already shared. The same link
                                        has been retrieved.</p>
                                </div>
                            </div>
                        </div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.shareableLink')"></label>
                        <div class="flex items-center gap-2">
                            <input :value="generatedShareLink" readonly
                                class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg">
                            <button @click="copyShareLink"
                                class="px-3 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)]">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div v-if="existingShareDetected" class="mt-3">
                            <button @click="createShare(true)"
                                class="text-sm text-[var(--text-accent)] hover:underline">
                                <i class="fas fa-plus-circle mr-1"></i>Create a new share link instead
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeShareModal"
                        class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        取消
                    </button>
                    <button @click="createShare()" v-if="!generatedShareLink"
                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        创建链接
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：录音分享弹窗 End ==================== -->

        <!-- ==================== 功能块：共享链接列表弹窗 Start ==================== -->
        <!-- Shares List Modal -->
        <div v-if="showSharesListModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)] flex justify-between items-center">
                    <h3 class="text-lg font-semibold" v-text="t('modal.sharedTranscripts')"></h3>
                    <button @click="closeSharesList"
                        class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto">
                    <div v-if="isLoadingShares" class="text-center">
                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                    </div>
                    <div v-else-if="userShares.length === 0" class="text-center text-[var(--text-muted)]">
                        <span v-text="t('sharedTranscripts.noSharedTranscripts')"></span>
                    </div>
                    <div v-else class="space-y-3">
                        <div v-for="share in userShares" :key="share.id"
                            class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="font-semibold">${share.recording_title}</p>
                                    <p class="text-sm text-[var(--text-muted)]">${ t('help.sharedOn') }:
                                        ${share.created_at}</p>
                                </div>
                                <button @click="confirmDeleteShare(share)"
                                    class="text-red-500 hover:text-red-700 p-1"><i class="fas fa-trash"></i></button>
                            </div>
                            <div class="mt-4 flex items-center gap-4">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_summary" @change="updateShare(share)"
                                        class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2" v-text="t('form.shareSummary')"></span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_notes" @change="updateShare(share)"
                                        class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2" v-text="t('form.shareNotes')"></span>
                                </label>
                            </div>
                            <div class="mt-4">
                                <input :value="'{{ request.url_root }}share/' + share.public_id" readonly
                                    class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 功能块：共享链接列表弹窗 End ==================== -->

        <!-- ==================== 功能块：共享链接删除确认弹窗 Start ==================== -->
        <!-- Share Delete Confirmation Modal -->
        <div v-if="showShareDeleteModal"
            class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div
                class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-red-500 to-red-600 p-5 rounded-t-xl">
                    <div class="flex items-center">
                        <div
                            class="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-trash-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Delete Shared Link</h3>
                            <p class="text-red-100 text-sm mt-1">This action cannot be undone</p>
                        </div>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6">
                    <p class="text-[var(--text-secondary)] mb-4">
                        Are you sure you want to delete the shared link for:
                    </p>
                    <div v-if="shareToDelete"
                        class="bg-[var(--bg-tertiary)] p-3 rounded-lg border border-[var(--border-primary)]">
                        <p class="font-medium text-[var(--text-primary)]">${shareToDelete.recording_title}</p>
                        <p class="text-sm text-[var(--text-muted)] mt-1">Shared on: ${shareToDelete.created_at}</p>
                    </div>
                    <div
                        class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mt-0.5 mr-2"></i>
                            <p class="text-sm text-red-800 dark:text-red-300">
                                The share link will be permanently deleted and anyone with this link will no longer be
                                able to access the recording.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="p-6 pt-0 flex justify-end gap-3">
                    <button @click="cancelDeleteShare"
                        class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        取消
                    </button>
                    <button @click="deleteShare"
                        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2">
                        <i class="fas fa-trash"></i>
                        Delete Share Link
                    </button>
                </div>
            </div>
        </div>
        <!-- ==================== 功能块：共享链接删除确认弹窗 End ==================== -->
        <!-- ==================== 功能块：共享弹窗区 End ==================== -->
    </div>
    <!-- ==================== 功能块：Vue 应用根容器 End ==================== -->

    <!-- ==================== 功能块：页面底部脚本区 Start ==================== -->
    <!-- ==================== 功能块：Vue 应用脚本加载 Start ==================== -->
    <!-- Vite-built index page application bundle -->
    <script type="module" src="/tool/speakr/static/vite/index/assets/index.js"></script>
    <!-- ==================== 功能块：Vue 应用脚本加载 End ==================== -->
    <!-- ==================== 功能块：页面底部脚本区 End ==================== -->
<!-- ==================== 功能块：页面主体 End ==================== -->
</body>
<!-- ==================== 功能块：页面局部样式区 Start ==================== -->
<style>
    /* ==================== 功能块：录音页左侧实时录音面板样式 Start ==================== */
    .websockt_box {
        width: 50%;
        border-radius: 10px;
        overflow: hidden;
        /* height: 500px; */
        position: relative;
    }

    /* ==================== 功能块：录音页左侧实时录音面板样式 End ==================== */

    /* ==================== 功能块：录音页双栏容器样式 Start ==================== */
    .index_m_cot {
        width: 100%;
        display: flex;
        gap: 20px;
        height: 100%;
        padding: 20px;
        border-radius: 10px;
        overflow: hidden;

    }
    /* ==================== 功能块：录音页双栏容器样式 End ==================== */

    /* ==================== 功能块：富文本与代码块显示样式 Start ==================== */
    .prose {
  white-space: pre-wrap;       /* 保留换行并自动换行 */
  word-wrap: break-word;       /* 超长单词自动换行 */
  overflow-wrap: break-word;   /* 兼容老浏览器 */
  color: #fff;                 /* 根据你背景色调整 */
}

/* 代码块样式可选 */
.prose pre {
    width: 100%;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  border-radius: 6px;
  overflow-y: auto;
}
.prose pre {
  white-space: pre-wrap !important;   /* 自动换行 */
  word-break: break-word !important;  /* 长字符串也换行 */
  overflow-wrap: break-word !important;
}

.prose code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

    /* ==================== 功能块：富文本与代码块显示样式 End ==================== */

    .dual-transcript-stack {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 0;
    }

    .dual-transcript-stack textarea {
        min-height: 96px;
    }

    .dual-transcript-divider {
        height: 10px;
        flex: 0 0 10px;
        cursor: row-resize;
        position: relative;
    }

    .dual-transcript-divider::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 4px;
        height: 2px;
        background: var(--border-primary);
    }

    .dual-transcript-divider:hover::before {
        background: var(--text-accent);
    }
</style>
<!-- ==================== 功能块：页面局部样式区 End ==================== -->

</html>
