Criando novo módulo Estúdio de Poesia e renomeando botões

public/index.html

@@ -239,7 +239,7 @@
               <span class="mode-icon">🎨</span> Atividade BNCC
             </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
+              <span class="mode-icon">🎵</span> Musicando Ideias
             </button>
             <button type="button" class="btn-prompt-mode mode-video" data-mode="VIDEO" title="Criar um roteiro ou animação de vídeo">
               <span class="mode-icon">🎬</span> Criar Vídeo
@@ -247,11 +247,11 @@
             <button type="button" class="btn-prompt-mode mode-image" data-mode="IMAGE" title="Gerar ou desenhar uma ilustração educativa">
               <span class="mode-icon">🎨</span> Criar Imagem
             </button>
-            <button type="button" class="btn-prompt-mode mode-poetry" data-mode="POETRY" title="Escrever uma poesia infantil pedagógica">
-              <span class="mode-icon">📜</span> Criar Poesia
+            <button type="button" class="btn-prompt-mode mode-poetry" id="barBtnPoesia" title="Escrever uma poesia infantil pedagógica">
+              <span class="mode-icon">📜</span> Estúdio de Poesia
             </button>
             <button type="button" class="btn-prompt-mode mode-text" data-mode="TEXT" title="Escrever histórias, relatórios ou conversar">
-              <span class="mode-icon">✍️</span> Criar História / Chat
+              <span class="mode-icon">✍️</span> Inventando Historias
             </button>
           </div>
           <form id="chatForm">
@@ -736,6 +736,88 @@
     </div>
   </div>
 
+  <!-- Modal: Estúdio de Poesia -->
+  <div id="poesiaModal" class="settings-modal" style="display: none;">
+    <div class="settings-modal-content" style="max-width: 600px; 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;">📜 Estúdio de Poesia Camila AI</h3>
+        <div style="display: flex; gap: 10px;">
+          <button id="btnOpenPoesiaHistory" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); padding: 6px 12px; font-size: 0.8rem;">
+            🕒 Histórico
+          </button>
+          <button id="btnClosePoesiaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+        </div>
+      </div>
+      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
+        
+        <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. Faixa Etária (Idade da Criança)</label>
+          <select id="poesiaFaixaEtaria" class="obs-select" style="width: 100%; margin-top: 4px;">
+            <option value="Bebês (0 a 1 ano e 6 meses)">Bebês (0 a 1 ano e 6 meses)</option>
+            <option value="Crianças bem pequenas (1 ano e 7 meses a 3 anos e 11 meses)">Crianças bem pequenas (1 ano e 7 meses a 3 anos e 11 meses)</option>
+            <option value="Crianças pequenas (4 anos a 5 anos e 11 meses)" selected>Crianças pequenas (4 anos a 5 anos e 11 meses)</option>
+            <option value="Ensino Fundamental I (6 a 10 anos)">Ensino Fundamental I (6 a 10 anos)</option>
+          </select>
+        </div>
+
+        <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. Quantidade de Estrofes</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-poesia-estrofes" data-estrofes="2">2 Estrofes</button>
+            <button type="button" class="btn-poesia-estrofes active" data-estrofes="3">3 Estrofes</button>
+            <button type="button" class="btn-poesia-estrofes" data-estrofes="4">4 Estrofes</button>
+            <button type="button" class="btn-poesia-estrofes" data-estrofes="5">5 Estrofes</button>
+          </div>
+        </div>
+
+        <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. Tema da Poesia</label>
+          <textarea id="poesiaTemaInput" placeholder="Ex: Higiene pessoal, amizade na escola, os animais da fazenda..." class="obs-input" style="width: 100%; min-height: 80px; padding: 10px; resize: vertical; margin-top: 4px; line-height: 1.4;"></textarea>
+        </div>
+
+        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
+          <button id="btnGeneratePoesia" style="background: linear-gradient(135deg, #10b981 0%, #059669 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(16, 185, 129, 0.25);">
+            <span>📜 Criar Poesia Personalizada</span>
+          </button>
+          <div id="poesiaGenerateLoader" 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>A IA está buscando inspiração e compondo sua poesia...</span>
+          </div>
+        </div>
+
+        <div id="poesiaResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 14px;">
+          <h4 style="margin: 0; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 6px;">✨ Sua Poesia Está Pronta!</h4>
+          
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <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;">Poesia Gerada</label>
+              <div style="display: flex; gap: 8px;">
+                <button id="btnCopyPoesia" 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</button>
+                <button id="btnDownloadPoesiaPdf" 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>
+            <div id="poesiaTextOutput" class="markdown-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; font-size: 1rem; line-height: 1.6; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; min-height: 150px;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal: Histórico de Poesias -->
+  <div id="poesiaHistoryModal" class="settings-modal" style="display: none; z-index: 1002;">
+    <div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 80vh; 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;">🕒 Histórico de Poesias</h3>
+        <button id="btnClosePoesiaHistory" 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: 14px; flex: 1;">
+        <div id="poesiaHistoryList" style="display: flex; flex-direction: column; gap: 10px;">
+          <p style="color: var(--text-secondary); font-size: 0.9rem; text-align: center; margin-top: 20px;">Carregando histórico...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Modal: Fábrica de Quadrinhos (Criação de histórias pedagógicas visuais) -->
   <div id="fabricaQuadrinhosModal" class="settings-modal" style="display: none;">
     <div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">