Implementação da responsividade

app.py

@@ -449,9 +449,9 @@ def merge():
             
             # Atualizar o template de merge com os parâmetros de tamanho padrão
             updated_merge_template = PROMPT_ATOMICO_MERGE.replace(
-                "MIN_CHARS_PLACEHOLDER", "24000"
+                "MIN_CHARS_PLACEHOLDER", str(min_chars)
             ).replace(
-                "MAX_CHARS_PLACEHOLDER", "30000"
+                "MAX_CHARS_PLACEHOLDER", str(max_chars)
             )
             
             prompt_merge = PromptTemplate(template=updated_merge_template, input_variables=["solicitacao_usuario", "texto_para_analise_grok", "texto_para_analise_sonnet", "texto_para_analise_gemini"])

static/style.css

@@ -395,7 +395,7 @@ textarea.drag-over {
     border: 1px solid #ddd;
     border-radius: 8px;
     background-color: #f8f9fa;
-    width: 60%;
+    width: 70%;
 }
 
 #final-result-container h2 {

templates/index.html

@@ -39,12 +39,6 @@
             margin-bottom: 0;
         }
         
-        #final-result-container {
-            display: none;
-            width: 100%;
-            margin-top: 20px;
-        }
-        
         .results-container .result-column {
             flex: 1;
             min-width: 0;
@@ -52,13 +46,6 @@
 
         /* ESTILOS RESPONSIVOS */
         
-        /* Container principal */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 10px;
-        }
-        
         /* Header responsivo */
         .header-container {
             display: flex;
@@ -216,15 +203,14 @@
             background-color: #218838;
         }
         
-        /* Output boxes responsivos */
+        /* Output boxes responsivos - SEM BARRA DE ROLAGEM INDIVIDUAL */
         .output-box {
             padding: 15px;
             border: 1px solid #dee2e6;
             border-top: none;
             background-color: #ffffff;
             min-height: 300px;
-            max-height: 600px;
-            overflow-y: auto;
+            /* REMOVIDO: max-height e overflow-y */
             font-size: 14px;
             line-height: 1.6;
             word-wrap: break-word;
@@ -318,6 +304,7 @@
             
             .switch {
                 transform: scale(1.2);
+                margin-right: 37px;
             }
             
             .refresh-btn {
@@ -364,7 +351,7 @@
             .output-box {
                 font-size: 16px;
                 padding: 12px;
-                max-height: 400px;
+                /* REMOVIDO: max-height */
             }
             
             .cancel-btn {
@@ -416,7 +403,7 @@
             .output-box {
                 padding: 10px;
                 font-size: 14px;
-                max-height: 300px;
+                /* REMOVIDO: max-height */
             }
             
             .floating-merge-btn {
@@ -429,9 +416,7 @@
 
         /* Ajustes para modo landscape em mobile */
         @media (max-height: 500px) and (orientation: landscape) {
-            .output-box {
-                max-height: 200px;
-            }
+            /* REMOVIDO: ajuste de max-height dos output-box */
             
             .loader-content {
                 padding: 10px;
@@ -1067,4 +1052,4 @@ Use o botão `Converter para MD` para ver a mágica.</textarea>
         window.addEventListener('resize', handleOrientationChange);
     </script>
 </body>
-</html>
+</html>