Adicionado fluxo de revisão de transcrição de voz antes da análise de IA

public/index.html

@@ -296,8 +296,26 @@
         <!-- Estado: processando -->
         <div id="recordStateProcessing" class="record-state" style="display: none;">
           <div class="record-spinner"></div>
-          <p>Analisando sua observação...</p>
-          <small style="color: var(--text-muted);">Transcrevendo e gerando relatório</small>
+          <p id="recordProcessingText">Analisando sua observação...</p>
+          <small id="recordProcessingSubtext" style="color: var(--text-muted);">Transcrevendo e gerando relatório</small>
+        </div>
+
+        <!-- Estado: Transcrição Concluída (Revisão) -->
+        <div id="recordStateTranscribed" class="record-state" style="display: none; width: 100%;">
+          <h4 style="margin-bottom: 8px; color: var(--text-main); display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start;">
+            <span>✍️ Revisar Transcrição</span>
+          </h4>
+          <p class="record-hint" style="margin-bottom: 12px; text-align: left; width: 100%;">Você pode ajustar o texto abaixo antes da análise da IA:</p>
+          <textarea id="transcriptionTextarea" class="transcription-textarea" style="width: 100%; min-height: 120px; padding: 12px; border-radius: 8px; border: 1px solid var(--border-light); background-color: var(--bg-card); color: var(--text-main); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; margin-bottom: 16px;" placeholder="Digite ou ajuste o que foi falado..."></textarea>
+          <div class="preview-actions" style="display: flex; gap: 12px; width: 100%; justify-content: flex-end;">
+            <button id="btnDiscardTranscription" class="btn-discard" style="flex: 1; max-width: 150px;">Descartar</button>
+            <button id="btnAnalyzeTranscription" class="btn-save-report" style="flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 8px;">
+              <span>Analisar com IA</span>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 16px; height: 16px;">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+              </svg>
+            </button>
+          </div>
         </div>
 
         <!-- Estado: prévia -->