Modifica a exibição de diálogos para caixa editável embaixo dos quadrinhos, remove balões internos e atualiza prompts

public/app.js

@@ -3775,7 +3775,7 @@ const initApp = () => {
         comicsResultTitle.textContent = project.titulo || 'História em Quadrinhos';
         comicsGridContainer.innerHTML = '';
         
-        generatedPanelsData.forEach(panel => {
+        generatedPanelsData.forEach((panel, index) => {
           const panelCard = document.createElement('div');
           panelCard.className = 'comic-panel-card';
           
@@ -3793,21 +3793,27 @@ const initApp = () => {
           badge.textContent = panel.panel_number;
           imgContainer.appendChild(badge);
           
-          if (selectedComicsBubbles && panel.dialogue) {
-            const bubble = document.createElement('div');
-            bubble.className = 'comic-speech-bubble';
-            bubble.textContent = panel.dialogue;
-            imgContainer.appendChild(bubble);
-          }
-          
           panelCard.appendChild(imgContainer);
           
-          if (panel.dialogue) {
-            const caption = document.createElement('div');
-            caption.className = 'comic-caption-text';
-            caption.textContent = panel.dialogue;
-            panelCard.appendChild(caption);
-          }
+          const caption = document.createElement('div');
+          caption.className = 'comic-caption-text';
+          caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);';
+          
+          const textarea = document.createElement('textarea');
+          textarea.className = 'comic-caption-input';
+          textarea.value = panel.dialogue || '';
+          textarea.placeholder = 'Digite a fala ou legenda do quadrinho...';
+          textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;';
+          
+          textarea.addEventListener('input', (e) => {
+            panel.dialogue = e.target.value;
+            if (generatedPanelsData[index]) {
+              generatedPanelsData[index].dialogue = e.target.value;
+            }
+          });
+          
+          caption.appendChild(textarea);
+          panelCard.appendChild(caption);
           
           comicsGridContainer.appendChild(panelCard);
         });
@@ -4093,7 +4099,7 @@ const initApp = () => {
         comicsResultTitle.textContent = scriptData.title || comicsResultTitle.textContent || 'Fábrica de Quadrinhos Camila';
         comicsGridContainer.innerHTML = '';
 
-        generatedPanelsData.forEach(panel => {
+        generatedPanelsData.forEach((panel, index) => {
           const panelCard = document.createElement('div');
           panelCard.className = 'comic-panel-card';
 
@@ -4112,23 +4118,27 @@ const initApp = () => {
           badge.textContent = panel.panel_number;
           imgContainer.appendChild(badge);
 
-          // Balão de fala absoluto por cima se habilitado e houver diálogo
-          if (selectedComicsBubbles && panel.dialogue) {
-            const bubble = document.createElement('div');
-            bubble.className = 'comic-speech-bubble';
-            bubble.textContent = panel.dialogue;
-            imgContainer.appendChild(bubble);
-          }
-
           panelCard.appendChild(imgContainer);
 
-          // Legenda do texto abaixo
-          if (panel.dialogue) {
-            const caption = document.createElement('div');
-            caption.className = 'comic-caption-text';
-            caption.textContent = panel.dialogue;
-            panelCard.appendChild(caption);
-          }
+          const caption = document.createElement('div');
+          caption.className = 'comic-caption-text';
+          caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);';
+
+          const textarea = document.createElement('textarea');
+          textarea.className = 'comic-caption-input';
+          textarea.value = panel.dialogue || '';
+          textarea.placeholder = 'Digite a fala ou legenda do quadrinho...';
+          textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;';
+
+          textarea.addEventListener('input', (e) => {
+            panel.dialogue = e.target.value;
+            if (generatedPanelsData[index]) {
+              generatedPanelsData[index].dialogue = e.target.value;
+            }
+          });
+
+          caption.appendChild(textarea);
+          panelCard.appendChild(caption);
 
           comicsGridContainer.appendChild(panelCard);
         });

public/index.html

@@ -798,9 +798,9 @@
 
           <!-- BALÕES DE FALAS -->
           <div class="settings-group">
-            <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Falas/Diálogos</label>
+            <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Falas / Legendas</label>
             <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
-              <button type="button" class="btn-music-option btn-comics-bubbles active" data-bubbles="true">Com Balões</button>
+              <button type="button" class="btn-music-option btn-comics-bubbles active" data-bubbles="true">Com Falas</button>
               <button type="button" class="btn-music-option btn-comics-bubbles" data-bubbles="false">Sem Texto</button>
             </div>
           </div>

server.js

@@ -332,7 +332,7 @@ app.post('/api/comics/generate-script', requireAuth, async (req, res) => {
     cenario,
     existingPanels,
     character_description,
-    continuationType // 'extend' ou 'new_story'
+    continuationType 
   } = req.body;
 
   if (!tema) {
@@ -365,7 +365,7 @@ Gere um JSON perfeitamente válido contendo:
   "panels": [
     {
       "panel_number": ${startPanelNum},
-      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (obtida de character_description) em cada quadrinho que aparecerem (ex: em vez de apenas escrever 'Lucas', escreva a descrição detalhada dele com roupas e cabelos específicos, etc). IMPORTANTE PARA TEXTO: Use enquadramento baixo/afastado (wide angle, medium shot, characters seen from a distance, low framing). O prompt DEVE conter a instrução explícita em inglês de deixar o terço superior (cerca de 30% do topo da imagem) totalmente livre de personagens ou elementos cruciais da cena, mantendo-o como espaço vazio/fundo limpo (ex: 'lower framing, characters positioned in the middle-to-lower section, leaving the top 30% of the image as empty space / simple clean background for text overlay'), para os balões de diálogo. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
+      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (obtida de character_description) em cada quadrinho que aparecerem (ex: em vez de apenas escrever 'Lucas', escreva a descrição detalhada dele com roupas e cabelos específicos, etc). O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
       "dialogue": "Falas do quadrinho em português (ex: 'Lucas: Veja aquilo!') com NO MÁXIMO 10 palavras, ou narração curta caso não tenha balões."
     },
     ...
@@ -388,7 +388,7 @@ Gere um JSON perfeitamente válido contendo:
   "panels": [
     {
       "panel_number": 1,
-      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (do character_description) em cada quadrinho que aparecerem (ex: não escreva apenas 'Mariana', escreva a descrição dela detalhando cabelo e roupas de forma fixa e idêntica em todos os quadrinhos). IMPORTANTE PARA TEXTO: Use enquadramento baixo/afastado (wide angle, medium shot, characters seen from a distance, low framing) e instrua em inglês a deixar o terço superior (30% do topo da imagem) totalmente livre de personagens ou elementos cruciais (ex: 'lower framing, characters positioned in the middle-to-lower section, leaving the top 30% of the image as empty space / simple clean background for text overlay'), para os balões de diálogo. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
+      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (do character_description) em cada quadrinho que aparecerem (ex: não escreva apenas 'Mariana', escreva a descrição dela detalhando cabelo e roupas de forma fixa e idêntica em todos os quadrinhos). O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
       "dialogue": "Falas do quadrinho em português (ex: 'Lucas: Veja aquilo!') com NO MÁXIMO 10 palavras, ou narração curta caso não tenha balões."
     },
     ...