feat: aprendizado contínuo, presets temperatura e tabs na configuração

- Sistema de aprendizado contínuo: [KNOWLEDGE: ...] no system prompt
- 3 presets de temperatura: Técnico(0.2), Equilibrado(0.6), Detalhista(1.0)
- Tabs na configuração: Identidade, Estilo, Conhecimento
- CRUD de conhecimento adquirido (lista + adicionar manual)
- knowledge_adquirido.json persistido no servidor
- GET/POST/DELETE /api/conhecimento + POST /api/conhecimento/extrair
- CSS: modal grande, tabs, opções temperatura, lista conhecimento

public/index.html

@@ -249,32 +249,73 @@
 
   <!-- Modal de Configurações do Agente -->
   <div id="settingsModal" class="settings-modal" style="display: none;">
-    <div class="settings-modal-content">
+    <div class="settings-modal-content settings-modal-large">
       <div class="settings-modal-header">
         <h3>Configurações da Assistente</h3>
         <button id="closeSettingsModal" class="close-settings-btn">&times;</button>
       </div>
+      
+      <!-- Tabs de navegação -->
+      <div class="settings-tabs">
+        <button class="settings-tab active" data-tab="tabIdentidade">👤 Identidade</button>
+        <button class="settings-tab" data-tab="tabEstilo">🎯 Estilo</button>
+        <button class="settings-tab" data-tab="tabConhecimento">📚 Conhecimento</button>
+      </div>
+      
       <div class="settings-modal-body">
-        <div class="settings-group">
-          <label for="settingAgentName">Nome da Assistente</label>
-          <input type="text" id="settingAgentName" placeholder="Ex: Kemily">
-        </div>
-        
-        <div class="settings-group">
-          <label>Avatar da Assistente</label>
-          <div class="avatar-preview-container">
-            <img id="previewKemilyAvatar" src="assets/kemily.png" alt="Kemily Preview" class="preview-avatar-img">
-            <input type="file" id="uploadKemilyAvatar" accept="image/*" style="display: none;">
-            <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadKemilyAvatar').click()">Escolher Imagem</button>
+        <!-- Tab: Identidade -->
+        <div id="tabIdentidade" class="settings-tab-content active">
+          <div class="settings-group">
+            <label for="settingAgentName">Nome da Assistente</label>
+            <input type="text" id="settingAgentName" placeholder="Ex: Kemily">
+            <small style="color: var(--text-muted); margin-top: 4px; display: block;">Nome que aparece para a Camila na conversa</small>
+          </div>
+          
+          <div class="settings-group">
+            <label>Avatar da Assistente</label>
+            <div class="avatar-preview-container">
+              <img id="previewKemilyAvatar" src="assets/kemily.png" alt="Assistante Preview" class="preview-avatar-img">
+              <input type="file" id="uploadKemilyAvatar" accept="image/*" style="display: none;">
+              <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadKemilyAvatar').click()">Escolher Imagem</button>
+            </div>
+          </div>
+
+          <div class="settings-group">
+            <label>Avatar da Camila (Usuária)</label>
+            <div class="avatar-preview-container">
+              <img id="previewCamilaAvatar" src="assets/camila_prof.png" alt="Camila Preview" class="preview-avatar-img">
+              <input type="file" id="uploadCamilaAvatar" accept="image/*" style="display: none;">
+              <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadCamilaAvatar').click()">Escolher Imagem</button>
+            </div>
           </div>
         </div>
-
-        <div class="settings-group">
-          <label>Avatar da Camila (Usuária)</label>
-          <div class="avatar-preview-container">
-            <img id="previewCamilaAvatar" src="assets/camila_prof.png" alt="Camila Preview" class="preview-avatar-img">
-            <input type="file" id="uploadCamilaAvatar" accept="image/*" style="display: none;">
-            <button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadCamilaAvatar').click()">Escolher Imagem</button>
+        
+        <!-- Tab: Estilo -->
+        <div id="tabEstilo" class="settings-tab-content">
+          <div class="settings-group">
+            <label>Modo de Resposta da IA</label>
+            <p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Controla como a assistente se comporta nas respostas — mais técnica ou mais detalhista</p>
+            
+            <div class="temperature-options" id="temperatureOptions">
+              <!-- Opções preenchidas via JS -->
+            </div>
+          </div>
+        </div>
+        
+        <!-- Tab: Conhecimento -->
+        <div id="tabConhecimento" class="settings-tab-content">
+          <div class="settings-group">
+            <label>📖 Conhecimento Adquirido</label>
+            <p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Informações que a assistente aprendeu com você ao longo das conversas. Você pode revisar e remover o que não for mais válido.</p>
+            
+            <div id="knowledgeList" class="knowledge-list" style="max-height: 300px; overflow-y: auto; margin-bottom: 16px;">
+              <!-- Lista de fatos preenchida via JS -->
+            </div>
+            
+            <div style="display: flex; gap: 8px; align-items: center;">
+              <input type="text" id="manualKnowledgeInput" placeholder="Adicionar conhecimento manualmente..." style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text);">
+              <button type="button" id="btnAddKnowledge" class="btn-save-settings" style="padding: 10px 16px;">+ Adicionar</button>
+            </div>
           </div>
         </div>
       </div>