{% load i18n %}
    <!-- 聊天记录梳理流程演示 - 紧凑版 -->
    <section class="chat-record-section" id="chat-record-flow">
        <div class="chat-record-container">
            <div class="section-header reveal">
                <span class="section-tag">💬 {% trans "证据整理" %}</span>
                <h2 class="section-title">{% trans "聊天记录智能梳理" %}</h2>
                <p class="section-desc">{% trans "从视频录制到证据材料，AI 驱动的聊天记录取证全流程" %}</p>
            </div>

            <div class="chat-flow-compact" id="chatFlowDemo">
                <!-- 左侧：视频上传 -->
                <div class="chat-col chat-col-upload" id="chatColUpload">
                    <div class="chat-col-header">
                        <span class="chat-col-num">1</span>
                        <span class="chat-col-title">{% trans "上传录屏" %}</span>
                    </div>
                    <div class="chat-upload-box" id="chatUploadBox">
                        <div class="chat-upload-icon">📹</div>
                        <div class="chat-upload-text">{% trans "微信/QQ 录屏" %}</div>
                        <div class="chat-upload-progress" id="chatUploadProgress">
                            <div class="chat-progress-bar"></div>
                        </div>
                    </div>
                    <div class="chat-video-done" id="chatVideoDone">
                        <div class="chat-video-thumb">▶</div>
                        <div class="chat-video-info">
                            <div class="chat-video-name">聊天记录.mp4</div>
                            <div class="chat-video-meta">03:24 · 128MB</div>
                        </div>
                        <div class="chat-video-check">✓</div>
                    </div>
                </div>

                <!-- 箭头 -->
                <div class="chat-arrow" id="chatArrow1">→</div>

                <!-- 中间：AI 处理 -->
                <div class="chat-col chat-col-ai" id="chatColAi">
                    <div class="chat-col-header">
                        <span class="chat-col-num">2</span>
                        <span class="chat-col-title">AI {% trans "解析" %}</span>
                        <span class="chat-ai-badge">{% trans "本地" %}</span>
                    </div>
                    <div class="chat-ai-tasks">
                        <div class="chat-ai-task" id="chatAiTask1"><span>🎬</span> {% trans "视频解码" %}</div>
                        <div class="chat-ai-task" id="chatAiTask2"><span>🔍</span> {% trans "场景检测" %}</div>
                        <div class="chat-ai-task" id="chatAiTask3"><span>🧹</span> {% trans "去重过滤" %}</div>
                        <div class="chat-ai-task" id="chatAiTask4"><span>📝</span> OCR {% trans "识别" %}</div>
                    </div>
                </div>

                <!-- 箭头 -->
                <div class="chat-arrow" id="chatArrow2">→</div>

                <!-- 中间：截帧预览 -->
                <div class="chat-col chat-col-frames" id="chatColFrames">
                    <div class="chat-col-header">
                        <span class="chat-col-num">3</span>
                        <span class="chat-col-title">{% trans "智能截帧" %}</span>
                    </div>
                    <div class="chat-frames-mini">
                        <div class="chat-frame-mini" data-frame="1"></div>
                        <div class="chat-frame-mini" data-frame="2"></div>
                        <div class="chat-frame-mini" data-frame="3"></div>
                        <div class="chat-frame-mini" data-frame="4"></div>
                        <div class="chat-frame-mini dup" data-frame="5">
                            <span class="dup-x">✕</span>
                        </div>
                        <div class="chat-frame-mini" data-frame="6"></div>
                    </div>
                    <div class="chat-frames-stat">
                        <span id="chatFrameCount">0</span> {% trans "帧" %} · <span id="chatDupCount">0</span> {% trans "去重" %}
                    </div>
                </div>

                <!-- 箭头 -->
                <div class="chat-arrow" id="chatArrow3">→</div>

                <!-- 右侧：导出 -->
                <div class="chat-col chat-col-export" id="chatColExport">
                    <div class="chat-col-header">
                        <span class="chat-col-num">4</span>
                        <span class="chat-col-title">{% trans "导出 PDF" %}</span>
                    </div>
                    <div class="chat-export-file" id="chatExportFile">
                        <div class="chat-export-icon">📄</div>
                        <div class="chat-export-info">
                            <div class="chat-export-name">{% trans "证据材料.pdf" %}</div>
                            <div class="chat-export-meta">12{% trans "页" %} · {% trans "含OCR" %}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="chat-flow-controls">
                <button class="flow-btn flow-btn-play" id="chatFlowPlayBtn" onclick="startChatFlowAnimation()">
                    <span>▶</span> {% trans "播放演示" %}
                </button>
                <button class="flow-btn flow-btn-reset" id="chatFlowResetBtn" onclick="resetChatFlowAnimation()">
                    <span>↺</span> {% trans "重置" %}
                </button>
            </div>
        </div>
    </section>