Update interface.py

interface.py

@@ -8,18 +8,21 @@ from ai_logic import (
 )
 
 css_customizado = """
+/* Estilo global */
+* {
+    box-sizing: border-box;
+}
+
 .gradio-container { 
     max-width: 1400px !important; 
     margin: 0 auto; 
     width: 99%; 
-    height: 100% !important;
     display: flex; 
     flex-direction: column; 
-    overflow: hidden;
 }
 
 .main-content {
-    height: 100vh !important;
+    min-height: 100vh; /* Garante que o conteúdo principal ocupe a tela inteira */
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -30,7 +33,7 @@ css_customizado = """
     color: white !important; 
     padding: 20px !important;
     border-radius: 10px !important; 
-    margin-bottom: 10px !important; 
+    margin: 10px !important; 
     text-align: center !important; 
     height: 10vh !important;
     display: flex;
@@ -41,24 +44,27 @@ css_customizado = """
 }
 
 .chat-container {
-    height: 50vh !important;
+    height: 75vh !important; /* Ajustado para ocupar o espaço restante */
     overflow-y: auto;
-    flex-shrink: 0;
-    margin-bottom: 10px;
+    flex-grow: 1; /* Cresce para preencher o espaço disponível */
+    margin: 10px !important;
 }
 
 .input-container {
-    height: 10vh !important;
+    height: 15vh !important; /* Aumentado para melhor centralização */
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center; /* Centraliza horizontalmente */
     flex-shrink: 0;
-    padding: 10px 0;
+    padding: 10px;
+    margin: 0 10px;
 }
 
 .additional-content {
     overflow-y: auto;
-    padding-top: 20px;
+    padding: 20px 10px;
+    flex-shrink: 0;
 }
 
 .gr-textbox textarea { 
@@ -89,21 +95,17 @@ css_customizado = """
 
 .modelo-dropdown { 
     margin-bottom: 15px !important; 
-}
-
-.unequal-height.svelte-1xp0cw7 { 
-    align-items: normal !important; 
-}
-
-div.svelte-1xp0cw7 { 
-    display: grid !important; 
+    width: 100%;
+    max-width: 300px; /* Limita a largura do dropdown */
 }
 
 #entrada_usuario textarea {
     color: white !important; 
-    font-size: large !important; 
+    font-size: 16px !important; 
     background-color: #1a1a1a !important; 
     min-height: 60px !important;
+    width: 100%;
+    max-width: 800px; /* Limita a largura do campo de texto */
 }
 
 .message-content { 
@@ -112,24 +114,32 @@ div.svelte-1xp0cw7 {
     background-color: #1a1a1a !important; 
 }
 
+/* Estilo do botão Enviar */
+.gr-button.primary {
+    max-width: 150px; /* Limita a largura do botão */
+    margin: 10px auto; /* Centraliza horizontalmente */
+}
+
 /* Responsivo para dispositivos móveis */
 @media (max-width: 768px) {
     .titulo-principal {
         height: 12vh !important;
         padding: 15px !important;
+        margin: 5px !important;
     }
     
     .chat-container {
-        height: 48vh !important;
+        height: 73vh !important;
     }
     
     .input-container {
-        height: 10vh !important;
+        height: 15vh !important;
+        padding: 8px !important;
     }
     
     #entrada_usuario textarea {
         min-height: 50px !important;
-        font-size: 16px !important;
+        font-size: 14px !important;
     }
 }
 
@@ -137,14 +147,26 @@ div.svelte-1xp0cw7 {
     .titulo-principal {
         height: 15vh !important;
         padding: 10px !important;
+        margin: 5px !important;
+        font-size: 14px !important;
     }
     
     .chat-container {
-        height: 55vh !important;
+        height: 70vh !important;
     }
     
     .input-container {
-        height: 10vh !important;
+        height: 15vh !important;
+        padding: 5px !important;
+    }
+    
+    #entrada_usuario textarea {
+        min-height: 45px !important;
+        font-size: 13px !important;
+    }
+    
+    .gr-button.primary {
+        max-width: 120px !important;
     }
 }
 """