Adiciona ferramenta VideoMind para transcrição e análise de vídeos com resumo customizado

public/index.html

@@ -237,6 +237,9 @@
             <button type="button" class="btn-prompt-mode mode-comics" id="barBtnComics" style="border-color: rgba(236, 72, 153, 0.4); color: #f472b6; background: rgba(236, 72, 153, 0.05);" title="Abrir Fábrica de Quadrinhos Pedagógicos">
               <span class="mode-icon">🎨</span> Fábrica de Quadrinhos
             </button>
+            <button type="button" class="btn-prompt-mode mode-video" id="barBtnVideoMind" style="border-color: rgba(6, 182, 212, 0.4); color: #22d3ee; background: rgba(6, 182, 212, 0.05);" title="Análise pedagógica e resumo de vídeos do YouTube">
+              <span class="mode-icon">🎬</span> VideoMind
+            </button>
             <button type="button" class="btn-prompt-mode mode-music" data-mode="AUDIO" title="Compor e gerar uma música pedagógica">
               <span class="mode-icon">🎵</span> Criar Letra de Música
             </button>
@@ -938,6 +941,72 @@
     </div>
   </div>
 
+  <!-- Modal: VideoMind (Transcrição e Resumo Pedagógico de Vídeos) -->
+  <div id="videoMindModal" class="settings-modal" style="display: none;">
+    <div class="settings-modal-content" style="max-width: 700px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
+      <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
+        <h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🎬 VideoMind - Transcrição & Análise de Vídeo</h3>
+        <button id="btnCloseVideoMindModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+      </div>
+      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
+        
+        <!-- INPUT URL YOUTUBE -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">1. Link do Vídeo no YouTube</label>
+          <input type="text" id="videoMindUrlInput" placeholder="Ex: https://www.youtube.com/watch?v=..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
+        </div>
+
+        <!-- TAMANHO DO RESUMO -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">2. Tamanho do Resumo Desejado</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-option btn-videomind-lines active" data-lines="20">📝 Curto (~20 linhas)</button>
+            <button type="button" class="btn-music-option btn-videomind-lines" data-lines="50">📄 Médio (~50 linhas)</button>
+            <button type="button" class="btn-music-option btn-videomind-lines" data-lines="100">📚 Longo (~100 linhas)</button>
+          </div>
+        </div>
+
+        <!-- BOTÃO ANALISAR E STATUS -->
+        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
+          <button id="btnGenerateVideoMind" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);">
+            <span>🎬 Analisar e Transcrever Vídeo</span>
+          </button>
+          <div id="videoMindLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
+            <div class="record-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
+            <span id="videoMindLoaderText">Buscando informações do vídeo...</span>
+          </div>
+        </div>
+
+        <!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
+        <div id="videoMindResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 18px;">
+          
+          <!-- Metadados do Vídeo -->
+          <div style="background: var(--bg-secondary); padding: 14px; border-radius: 12px; display: flex; gap: 14px; border: 1px solid var(--border-light); align-items: center;">
+            <img id="videoMindThumbnail" src="" alt="Thumbnail" style="width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-light);">
+            <div style="display: flex; flex-direction: column; gap: 4px;">
+              <h4 id="videoMindTitle" style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Título do Vídeo</h4>
+              <span id="videoMindAuthor" style="font-size: 0.85rem; color: var(--text-secondary);">Canal</span>
+            </div>
+          </div>
+
+          <!-- Ações da Análise -->
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Resumo & Parecer Pedagógico</label>
+            <div style="display: flex; gap: 8px;">
+              <button id="btnCopyVideoMindReport" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">📋 Copiar Parecer</button>
+              <button id="btnDownloadVideoMindReport" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">💾 Baixar TXT</button>
+              <button id="btnPdfVideoMindReport" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">📄 Baixar PDF</button>
+            </div>
+          </div>
+
+          <!-- Corpo da Análise em Markdown -->
+          <div id="videoMindReportArea" class="report-content-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; max-height: 350px; overflow-y: auto; font-family: inherit; font-size: 0.95rem; line-height: 1.6; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
   <!-- Bibliotecas externas para renderizar markdown e blocos de código -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>