Update interface.py

interface.py

@@ -17,107 +17,69 @@ css_customizado = """
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: #ffffff;
-    color: #374151;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    background: #0f0f23;
+    color: #ffffff;
     overflow-x: hidden;
-    height: 100vh;
-    -webkit-font-smoothing: antialiased;
 }
 
-/* Container principal */
 .gradio-container {
-    background: #ffffff !important;
+    background: #0f0f23 !important;
     min-height: 100vh !important;
     max-width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
-    height: 100vh !important;
-    overflow: hidden !important;
+    overflow-x: hidden !important;
+    height: 100vh !important; /* FORÇA altura fixa */
 }
 
-/* Layout principal */
-.main-layout {
+/* CRÍTICO: Layout principal com altura fixa absoluta */
+.main-container {
     display: flex !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    background: #ffffff;
+    height: 100vh !important; 
+    max-height: 100vh !important; /* Impede crescimento */
+    background: #0f0f23;
     overflow: hidden !important;
     position: relative;
 }
 
-/* Sidebar */
+/* Sidebar lateral com altura fixa */
 .sidebar {
-    width: 280px;
-    min-width: 280px;
-    background: #f7f7f8;
-    border-right: 1px solid #e5e7eb;
-    display: flex;
-    flex-direction: column;
+    width: 260px;
+    min-width: 260px;
+    max-width: 260px;
+    background: #171717;
+    border-right: 1px solid #2d2d2d;
+    padding: 16px;
+    overflow-y: auto;
+    flex-shrink: 0;
     height: 100vh !important;
-    overflow: hidden;
-    transition: all 0.3s ease;
+    max-height: 100vh !important;
 }
 
 .sidebar-header {
-    padding: 20px;
-    border-bottom: 1px solid #e5e7eb;
-    background: #ffffff;
-    flex-shrink: 0;
-}
-
-.logo {
     display: flex;
     align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-
-.logo-icon {
-    width: 32px;
-    height: 32px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: 600;
-    font-size: 16px;
-}
-
-.logo-text {
-    font-size: 20px;
-    font-weight: 700;
-    color: #111827;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #2d2d2d;
 }
 
 .new-chat-btn {
-    width: 100%;
-    background: #ffffff !important;
-    color: #374151 !important;
-    border: 1px solid #d1d5db !important;
+    background: #10a37f !important;
+    color: white !important;
+    border: none !important;
     border-radius: 8px !important;
-    padding: 12px 16px !important;
+    padding: 8px 12px !important;
     font-size: 14px !important;
     font-weight: 500 !important;
     cursor: pointer !important;
     transition: all 0.2s ease !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
 }
 
 .new-chat-btn:hover {
-    background: #f9fafb !important;
-    border-color: #9ca3af !important;
-}
-
-.sidebar-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px 20px;
+    background: #0d8f6e !important;
 }
 
 .sidebar-section {
@@ -125,59 +87,52 @@ body {
 }
 
 .sidebar-section h3 {
-    color: #6b7280;
+    color: #8e8ea0;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 12px;
+    letter-spacing: 1px;
+    margin-bottom: 8px;
 }
 
-/* Chat principal */
-.chat-area {
+/* CRÍTICO: Área principal com altura controlada */
+.chat-main {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: #ffffff;
+    display: flex !important;
+    flex-direction: column !important;
+    background: #0f0f23;
+    position: relative;
     height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden;
-    min-width: 0;
+    max-height: 100vh !important; /* IMPEDE CRESCIMENTO */
+    overflow: hidden !important;
+    min-height: 0; /* Permite encolhimento */
 }
 
+/* Header do chat com altura fixa */
 .chat-header {
-    background: #ffffff;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 16px 24px;
+    background: #171717;
+    border-bottom: 1px solid #2d2d2d;
+    padding: 12px 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
+    z-index: 10;
     flex-shrink: 0;
-    height: 60px;
-}
-
-.mobile-menu-btn {
-    display: none;
-    background: none;
-    border: none;
-    padding: 8px;
-    cursor: pointer;
-    position: absolute;
-    left: 16px;
-    color: #6b7280;
-    font-size: 18px;
+    height: 60px !important; /* Altura fixa */
+    min-height: 60px !important;
+    max-height: 60px !important;
 }
 
 .chat-title {
-    color: #111827;
+    color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     text-align: center;
 }
 
 .chat-title a {
-    color: #667eea;
+    color: #10a37f;
     text-decoration: none;
 }
 
@@ -185,125 +140,80 @@ body {
     text-decoration: underline;
 }
 
-/* Área de mensagens */
-.messages-area {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
+/* SOLUÇÃO PRINCIPAL: Container de mensagens com altura calculada */
+.messages-container {
+    flex: 1 !important; /* Ocupa espaço disponível */
+    display: flex !important;
+    flex-direction: column !important;
+    background: #0f0f23;
+    min-height: 0 !important; /* PERMITE ENCOLHIMENTO */
+    max-height: calc(100vh - 180px) !important; /* Altura máxima calculada (total - header - input) */
+    overflow: hidden !important;
+    position: relative !important;
 }
 
+/* CRÍTICO: Chatbot com scroll controlado */
 .chatbot {
     flex: 1 !important;
-    min-height: 0 !important;
+    min-height: 0 !important; /* PERMITE ENCOLHIMENTO */
     height: 100% !important;
+    max-height: 100% !important; /* NÃO ULTRAPASSA O CONTAINER */
+    overflow: hidden !important; /* Container não faz scroll */
     background: transparent !important;
     border: none !important;
-    padding: 0 !important;
+    padding: 0 !important; /* Remove padding que pode causar overflow */
     margin: 0 !important;
+    position: relative !important;
 }
 
+/* Container interno com scroll */
 .chatbot > div {
     height: 100% !important;
-    overflow-y: auto !important;
+    max-height: 100% !important;
+    overflow-y: auto !important; /* APENAS ESTE DIV FAZ SCROLL */
     overflow-x: hidden !important;
+    padding: 16px 24px !important; /* Padding interno */
     scroll-behavior: smooth !important;
-    padding: 0 !important;
-}
-
-/* Container das mensagens */
-.message-container {
-    max-width: 768px;
-    margin: 0 auto;
-    padding: 0 16px;
-}
-
-/* Estilo das mensagens */
-.message {
-    padding: 24px 0;
-    border-bottom: 1px solid #f3f4f6;
-}
-
-.message:last-child {
-    border-bottom: none;
-}
-
-.message-content {
-    display: flex;
-    gap: 16px;
-    align-items: flex-start;
-}
-
-.message-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    font-weight: 600;
-    position: relative;
-}
-
-.user-avatar {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-}
-
-.bot-avatar {
-    background: #f3f4f6;
-    color: #374151;
-    border: 2px solid #e5e7eb;
-}
-
-.message-text {
-    flex: 1;
-    line-height: 1.6;
-    font-size: 16px;
-    color: #374151;
-    word-wrap: break-word;
 }
 
-.user-message {
-    background: rgba(102, 126, 234, 0.05);
-}
-
-.bot-message {
-    background: #ffffff;
-}
-
-/* Área de input */
+/* CRÍTICO: Área de input com altura fixa */
 .input-area {
-    background: #ffffff;
-    border-top: 1px solid #e5e7eb;
+    background: #0f0f23;
     padding: 24px;
-    flex-shrink: 0;
+    border-top: 1px solid #2d2d2d;
+    flex-shrink: 0 !important; /* NUNCA ENCOLHE */
+    position: relative;
+    z-index: 20;
+    height: 120px !important; /* Altura fixa para area do input */
+    min-height: 120px !important;
+    max-height: 120px !important;
 }
 
 .input-container {
     max-width: 768px;
     margin: 0 auto;
     position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
 .input-wrapper {
-    background: #ffffff;
-    border: 2px solid #e5e7eb;
-    border-radius: 24px;
-    padding: 12px 20px;
+    background: #2d2d2d;
+    border: 1px solid #4d4d4d;
+    border-radius: 12px;
+    padding: 12px 16px;
     display: flex;
     align-items: flex-end;
     gap: 12px;
     transition: all 0.2s ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-height: 72px; /* Altura máxima do wrapper de input */
 }
 
 .input-wrapper:focus-within {
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    border-color: #10a37f;
+    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.2);
 }
 
 #entrada_usuario {
@@ -313,29 +223,29 @@ body {
 #entrada_usuario textarea {
     background: transparent !important;
     border: none !important;
-    color: #374151 !important;
+    color: #ffffff !important;
     font-size: 16px !important;
     line-height: 1.5 !important;
     resize: none !important;
     outline: none !important;
     min-height: 24px !important;
-    max-height: 120px !important;
+    max-height: 48px !important; /* Reduzido para não afetar layout */
     height: 24px !important;
     padding: 0 !important;
     margin: 0 !important;
-    font-family: inherit !important;
+    overflow-y: auto !important;
 }
 
 #entrada_usuario textarea::placeholder {
-    color: #9ca3af !important;
+    color: #8e8ea0 !important;
 }
 
 .send-button {
-    width: 40px;
-    height: 40px;
-    background: #667eea !important;
+    width: 32px;
+    height: 32px;
+    background: #10a37f !important;
     border: none !important;
-    border-radius: 50% !important;
+    border-radius: 6px !important;
     color: white !important;
     cursor: pointer !important;
     display: flex !important;
@@ -343,94 +253,126 @@ body {
     justify-content: center !important;
     transition: all 0.2s ease !important;
     flex-shrink: 0;
-    font-size: 18px !important;
 }
 
 .send-button:hover:not(:disabled) {
-    background: #5a67d8 !important;
-    transform: scale(1.05);
+    background: #0d8f6e !important;
 }
 
 .send-button:disabled {
-    background: #d1d5db !important;
+    background: #4d4d4d !important;
     cursor: not-allowed !important;
-    transform: none !important;
 }
 
-/* Dropdown personalizado */
-.model-selector {
-    background: #ffffff !important;
-    border: 1px solid #d1d5db !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    color: #374151 !important;
-    font-size: 14px !important;
-    width: 100% !important;
-    cursor: pointer !important;
-    transition: all 0.2s ease !important;
+/* Estilo das mensagens */
+.message {
+    width: 100%;
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.message-content {
+    max-width: 768px;
+    margin: 0 auto;
+    padding: 0 24px;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+.message-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.user-avatar {
+    background: #10a37f;
+    color: white;
+}
+
+.bot-avatar {
+    background: #5436da;
+    color: white;
+}
+
+.message-text {
+    flex: 1;
+    line-height: 1.7;
+    font-size: 16px;
+    color: #ffffff;
 }
 
-.model-selector:hover {
-    border-color: #9ca3af !important;
+.message.user {
+    background: rgba(16, 163, 127, 0.05);
 }
 
-.model-selector:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+.message.assistant {
+    background: rgba(84, 54, 218, 0.05);
+}
+
+/* Modelo selector na sidebar */
+.model-selector {
+    background: #2d2d2d;
+    border: 1px solid #4d4d4d;
+    border-radius: 8px;
+    padding: 8px 12px;
+    color: #ffffff;
+    font-size: 14px;
 }
 
-/* Accordions */
-.sidebar-accordion {
-    background: #ffffff !important;
-    border: 1px solid #e5e7eb !important;
+/* Accordions na sidebar */
+.sidebar .gr-accordion {
+    background: transparent !important;
+    border: 1px solid #2d2d2d !important;
     border-radius: 8px !important;
     margin-bottom: 16px !important;
-    overflow: hidden !important;
 }
 
-.sidebar-accordion summary {
-    background: #f9fafb !important;
-    color: #374151 !important;
-    padding: 16px !important;
+.sidebar .gr-accordion summary {
+    background: #2d2d2d !important;
+    color: #ffffff !important;
+    padding: 12px 16px !important;
+    border-radius: 8px !important;
     font-weight: 500 !important;
-    cursor: pointer !important;
-    border: none !important;
-    transition: all 0.2s ease !important;
 }
 
-.sidebar-accordion summary:hover {
-    background: #f3f4f6 !important;
+.sidebar .gr-accordion[open] summary {
+    border-bottom: 1px solid #4d4d4d !important;
+    border-radius: 8px 8px 0 0 !important;
 }
 
-.sidebar-accordion[open] summary {
-    border-bottom: 1px solid #e5e7eb !important;
-}
-
-.sidebar-accordion .gr-panel {
-    background: #ffffff !important;
+.sidebar .gr-accordion .gr-panel {
+    background: #1a1a1a !important;
     padding: 16px !important;
+    border-radius: 0 0 8px 8px !important;
 }
 
 /* Estilo para código */
 .message pre {
-    background: #f8fafc !important;
-    border: 1px solid #e2e8f0 !important;
+    background: #1e1e1e !important;
+    border: 1px solid #3e3e3e !important;
     border-radius: 8px !important;
     padding: 16px !important;
-    margin: 16px 0 !important;
+    margin: 12px 0 !important;
     overflow-x: auto !important;
-    font-family: 'Monaco', 'Menlo', 'SF Mono', 'Consolas', monospace !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
     font-size: 14px !important;
     line-height: 1.5 !important;
 }
 
 .message code {
-    background: #f1f5f9 !important;
+    background: rgba(255, 255, 255, 0.1) !important;
     padding: 2px 6px !important;
     border-radius: 4px !important;
-    font-family: 'Monaco', 'Menlo', 'SF Mono', 'Consolas', monospace !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
     font-size: 14px !important;
-    color: #1e293b !important;
 }
 
 .message pre code {
@@ -440,7 +382,7 @@ body {
 
 /* Links */
 .message a {
-    color: #667eea !important;
+    color: #10a37f !important;
     text-decoration: none !important;
 }
 
@@ -450,12 +392,12 @@ body {
 
 /* Listas */
 .message ul, .message ol {
-    margin: 16px 0 !important;
+    margin: 12px 0 !important;
     padding-left: 24px !important;
 }
 
 .message li {
-    margin: 8px 0 !important;
+    margin: 6px 0 !important;
     line-height: 1.6 !important;
 }
 
@@ -464,78 +406,120 @@ body {
     border-collapse: collapse !important;
     width: 100% !important;
     margin: 16px 0 !important;
-    background: #ffffff !important;
-    border: 1px solid #e5e7eb !important;
+    background: rgba(255, 255, 255, 0.05) !important;
     border-radius: 8px !important;
     overflow: hidden !important;
 }
 
 .message th, .message td {
-    border: 1px solid #e5e7eb !important;
+    border: 1px solid #3e3e3e !important;
     padding: 12px !important;
     text-align: left !important;
 }
 
 .message th {
-    background: #f9fafb !important;
+    background: rgba(255, 255, 255, 0.1) !important;
     font-weight: 600 !important;
-    color: #374151 !important;
 }
 
 /* Scrollbar personalizada */
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 8px;
+    height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #f1f5f9;
+    background: #1a1a1a;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
+    background: #4d4d4d;
+    border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
+    background: #6d6d6d;
 }
 
-/* Status indicators */
-.status-indicator {
-    font-size: 12px;
-    padding: 6px 12px;
-    border-radius: 16px;
-    font-weight: 500;
-    display: inline-block;
+/* CRÍTICO: CSS para componentes Gradio específicos */
+.gr-column:has(.messages-container) {
+    flex: 1 !important;
+    min-height: 0 !important;
+    max-height: calc(100vh - 180px) !important;
+    overflow: hidden !important;
 }
 
-.status-success {
-    background: #dcfce7;
-    color: #166534;
-    border: 1px solid #bbf7d0;
+.gr-column:has(.input-area) {
+    flex-shrink: 0 !important;
+    height: 120px !important;
+    min-height: 120px !important;
+    max-height: 120px !important;
 }
 
-.status-error {
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
+/* Força o container principal do gradio */
+.gradio-container > .gr-column {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
 }
 
-.status-warning {
-    background: #fefbeb;
-    color: #d97706;
-    border: 1px solid #fed7aa;
+/* Responsive */
+@media (max-width: 768px) {
+    .main-container {
+        flex-direction: column;
+        height: 100vh !important;
+        max-height: 100vh !important;
+    }
+    
+    .sidebar {
+        width: 100%;
+        height: 200px !important;
+        max-height: 200px !important;
+        min-height: 200px !important;
+        border-right: none;
+        border-bottom: 1px solid #2d2d2d;
+    }
+    
+    .chat-main {
+        height: calc(100vh - 200px) !important;
+        max-height: calc(100vh - 200px) !important;
+    }
+    
+    .messages-container {
+        max-height: calc(100vh - 320px) !important;
+    }
+    
+    .message-content {
+        padding: 0 16px;
+        gap: 12px;
+    }
+    
+    .message-avatar {
+        width: 28px;
+        height: 28px;
+        font-size: 14px;
+    }
+    
+    .input-area {
+        padding: 16px;
+        height: 100px !important;
+        max-height: 100px !important;
+    }
+    
+    .message-text {
+        font-size: 15px;
+    }
 }
 
 /* Animações */
 .message {
-    animation: slideIn 0.3s ease-out;
+    animation: fadeIn 0.3s ease-out;
 }
 
-@keyframes slideIn {
+@keyframes fadeIn {
     from {
         opacity: 0;
-        transform: translateY(20px);
+        transform: translateY(10px);
     }
     to {
         opacity: 1;
@@ -543,357 +527,180 @@ body {
     }
 }
 
-/* Loading animation */
+/* Estado de carregamento */
 .loading-indicator {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
-    color: #6b7280;
+    color: #8e8ea0;
     font-style: italic;
 }
 
 .loading-dots {
-    display: flex;
-    gap: 4px;
+    display: inline-flex;
+    gap: 2px;
 }
 
 .loading-dots span {
-    width: 8px;
-    height: 8px;
-    background: #667eea;
+    width: 4px;
+    height: 4px;
+    background: #8e8ea0;
     border-radius: 50%;
-    animation: bounce 1.4s ease-in-out infinite both;
+    animation: pulse 1.4s ease-in-out infinite both;
 }
 
 .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
 .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
 .loading-dots span:nth-child(3) { animation-delay: 0s; }
 
-@keyframes bounce {
+@keyframes pulse {
     0%, 80%, 100% {
-        transform: scale(0.6);
-        opacity: 0.5;
+        opacity: 0.3;
     }
     40% {
-        transform: scale(1);
         opacity: 1;
     }
 }
 
-/* Responsividade Mobile */
-@media (max-width: 768px) {
-    .main-layout {
-        flex-direction: column;
-    }
-    
-    .sidebar {
-        position: fixed;
-        top: 0;
-        left: -280px;
-        width: 280px;
-        height: 100vh;
-        z-index: 1000;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s ease;
-    }
-    
-    .sidebar.open {
-        left: 0;
-    }
-    
-    .sidebar-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 999;
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s ease;
-    }
-    
-    .sidebar-overlay.active {
-        opacity: 1;
-        visibility: visible;
-    }
-    
-    .mobile-menu-btn {
-        display: block !important;
-    }
-    
-    .chat-area {
-        width: 100%;
-        margin-left: 0;
-    }
-    
-    .chat-header {
-        padding: 16px;
-    }
-    
-    .input-area {
-        padding: 16px;
-    }
-    
-    .input-wrapper {
-        padding: 10px 16px;
-    }
-    
-    .message-content {
-        gap: 12px;
-    }
-    
-    .message-avatar {
-        width: 36px;
-        height: 36px;
-        font-size: 16px;
-    }
-    
-    .message-text {
-        font-size: 15px;
-    }
-    
-    .send-button {
-        width: 36px;
-        height: 36px;
-        font-size: 16px !important;
-    }
+/* Ocultar elementos desnecessários do Gradio */
+.gr-button-lg {
+    display: none !important;
 }
 
-@media (max-width: 480px) {
-    .sidebar {
-        width: 100%;
-        left: -100%;
-    }
-    
-    .sidebar.open {
-        left: 0;
-    }
-    
-    .message {
-        padding: 16px 0;
-    }
-    
-    .input-area {
-        padding: 12px;
-    }
-    
-    .chat-header {
-        padding: 12px 16px;
-    }
+/* Customizar os componentes específicos */
+.gr-textbox {
+    background: transparent !important;
+    border: none !important;
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    body {
-        background: #1f2937;
-        color: #f9fafb;
-    }
-    
-    .gradio-container {
-        background: #1f2937 !important;
-    }
-    
-    .main-layout {
-        background: #1f2937;
-    }
-    
-    .sidebar {
-        background: #111827;
-        border-right-color: #374151;
-    }
-    
-    .sidebar-header {
-        background: #1f2937;
-        border-bottom-color: #374151;
-    }
-    
-    .chat-area {
-        background: #1f2937;
-    }
-    
-    .chat-header {
-        background: #1f2937;
-        border-bottom-color: #374151;
-    }
-    
-    .input-area {
-        background: #1f2937;
-        border-top-color: #374151;
-    }
-    
-    .input-wrapper {
-        background: #374151;
-        border-color: #4b5563;
-    }
-    
-    #entrada_usuario textarea {
-        color: #f9fafb !important;
-    }
-    
-    .message-text {
-        color: #f9fafb;
-    }
+.gr-dropdown {
+    background: #2d2d2d !important;
+    border: 1px solid #4d4d4d !important;
+    border-radius: 8px !important;
+    color: #ffffff !important;
 }
 
-/* Ocultar elementos desnecessários */
-.gr-button-lg {
-    display: none !important;
+/* Botões personalizados */
+.control-button {
+    background: #2d2d2d !important;
+    color: #ffffff !important;
+    border: 1px solid #4d4d4d !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
 }
 
-.gr-form {
-    background: transparent !important;
-    border: none !important;
+.control-button:hover {
+    background: #3d3d3d !important;
+    border-color: #6d6d6d !important;
 }
 
-/* Ajustes adicionais para melhor UX */
-.message-content {
-    animation: fadeInUp 0.5s ease-out;
+.control-button.primary {
+    background: #10a37f !important;
+    border-color: #10a37f !important;
 }
 
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.control-button.primary:hover {
+    background: #0d8f6e !important;
 }
 
-/* Hover effects */
-.sidebar-section:hover {
-    transform: translateX(2px);
-    transition: transform 0.2s ease;
+/* Status indicators */
+.status-indicator {
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-weight: 500;
 }
 
-/* Focus states */
-.send-button:focus {
-    outline: 2px solid #667eea;
-    outline-offset: 2px;
+.status-success {
+    background: rgba(16, 163, 127, 0.2);
+    color: #10a37f;
+    border: 1px solid rgba(16, 163, 127, 0.3);
 }
 
-.model-selector:focus {
-    outline: none;
+.status-error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
-/* Improved accessibility */
-@media (prefers-reduced-motion: reduce) {
-    * {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
+.status-warning {
+    background: rgba(245, 158, 11, 0.2);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.3);
 }
 """
 
 def criar_interface():
-    with gr.Blocks(title="Dr. Aldo Henrique - iAldo AI Assistant", theme=gr.themes.Soft(), css=css_customizado) as interface:
+    with gr.Blocks(title="Dr. Aldo Henrique - iAldo AI Assistant", theme=gr.themes.Base(), css=css_customizado) as interface:
         session_id_state = gr.State(str(uuid.uuid4()))
 
-        # Layout principal
-        with gr.Row(elem_classes="main-layout"):
-            # Sidebar
-            with gr.Column(elem_classes="sidebar", scale=0, min_width=280):
-                # Header da sidebar
+        with gr.Row(elem_classes="main-container"):
+            # Sidebar esquerda
+            with gr.Column(elem_classes="sidebar", scale=0, min_width=260):
                 gr.HTML("""
                 <div class="sidebar-header">
-                    <div class="logo">
-                        <div class="logo-icon">🤖</div>
-                        <div class="logo-text">iAldo AI</div>
-                    </div>
-                    <button class="new-chat-btn">
-                        <span>➕</span>
-                        Nova Conversa
-                    </button>
+                    <h2 style="color: #10a37f; font-size: 18px; font-weight: 600;">iAldo AI</h2>
                 </div>
                 """)
                 
-                # Conteúdo da sidebar
-                with gr.Column(elem_classes="sidebar-content"):
-                    # Seletor de modelo
-                    with gr.Group():
-                        gr.HTML('<h3>🧠 Modelo de IA</h3>')
-                        modelo_select = gr.Dropdown(
-                            choices=list(MODELS.keys()),
-                            value="Llama 3.2 3B",
-                            label="",
-                            show_label=False,
-                            elem_classes="model-selector",
-                            container=False
-                        )
-
-                    # Status da API
-                    with gr.Accordion("🔧 Status do Sistema", open=False, elem_classes="sidebar-accordion"):
-                        status_api = gr.Textbox(
-                            label="", 
-                            interactive=False, 
-                            lines=3, 
-                            show_label=False,
-                            value="✅ Sistema inicializado\n🤖 Modelos carregados\n🔄 Pronto para uso",
-                            container=False
-                        )
-
-                    # Configurações
-                    with gr.Accordion("⚙️ Configurações", open=False, elem_classes="sidebar-accordion"):
-                        gr.HTML("""
-                        <div style="font-size: 14px; line-height: 1.6; color: #6b7280;">
-                            <p><strong>💡 Dicas de uso:</strong></p>
-                            <ul style="margin: 8px 0; padding-left: 20px;">
-                                <li>Faça perguntas específicas</li>
-                                <li>Use o RAG para consultar conhecimento</li>
-                                <li>Experimente diferentes modelos</li>
-                            </ul>
-                        </div>
-                        """)
-
-                    # Informações
-                    with gr.Accordion("ℹ️ Sobre o Dr. Aldo", open=False, elem_classes="sidebar-accordion"):
-                        gr.HTML("""
-                        <div style="font-size: 14px; line-height: 1.6; color: #6b7280;">
-                            <p><strong>🎓 Especialidades:</strong></p>
-                            <ul style="margin: 8px 0; padding-left: 20px;">
-                                <li>C/C++ & Java</li>
-                                <li>Desenvolvimento Web</li>
-                                <li>Inteligência Artificial</li>
-                                <li>Programação Educacional</li>
-                            </ul>
-                            <p style="margin-top: 12px;">
-                                <strong>🌐 Website:</strong><br>
-                                <a href="https://aldohenrique.com.br/" style="color: #667eea;">aldohenrique.com.br</a>
-                            </p>
-                        </div>
-                        """)
+                # Seletor de modelo
+                with gr.Group():
+                    gr.HTML('<h3 style="color: #8e8ea0; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px;">🧠 Modelo de IA</h3>')
+                    modelo_select = gr.Dropdown(
+                        choices=list(MODELS.keys()),
+                        value="Llama 3.2 3B",
+                        label="",
+                        show_label=False,
+                        elem_classes="model-selector",
+                        container=False
+                    )
+
+                # Status da API
+                with gr.Accordion("🔧 Status API", open=False, elem_classes="sidebar-section"):
+                    status_api = gr.Textbox(label="", interactive=False, lines=4, show_label=False,
+                                          value="✅ Modelos carregados com sucesso!")
+
+                # Informações
+                with gr.Accordion("ℹ️ Sobre", open=False, elem_classes="sidebar-section"):
+                    gr.Markdown("""
+                    **Dr. Aldo Henrique**
+                    
+                    • Especialista em C/C++, Java
+                    • Desenvolvimento Web & IA
+                    • Conteúdo: aldohenrique.com.br
+                    
+                    **Dicas:**
+                    • Faça perguntas específicas
+                    • Use o RAG para consultar o blog
+                    • Experimente diferentes modelos
+                    """)
 
             # Área principal do chat
-            with gr.Column(elem_classes="chat-area", scale=1):
+            with gr.Column(elem_classes="chat-main", scale=1):
                 # Header do chat
                 gr.HTML("""
                 <div class="chat-header">
-                    <button class="mobile-menu-btn" onclick="toggleSidebar()">☰</button>
                     <div class="chat-title">
-                        💬 Conversando com <a href="https://aldohenrique.com.br/" target="_blank">Prof. Dr. Aldo Henrique</a>
+                        🤖 Conversando com <a href="https://aldohenrique.com.br/" target="_blank">Prof. Dr. Aldo Henrique</a>
                     </div>
                 </div>
                 """)
 
-                # Área das mensagens
-                with gr.Column(elem_classes="messages-area"):
+                # Área de mensagens
+                with gr.Column(elem_classes="messages-container"):
                     chatbot = gr.Chatbot(
                         label="",
                         elem_id="chat",
                         show_label=False,
                         container=False,
                         elem_classes="chatbot",
-                        avatar_images=(
-                            "https://api.dicebear.com/7.x/avataaars/svg?seed=user&backgroundColor=667eea",
-                            "https://api.dicebear.com/7.x/bottts/svg?seed=aldo&backgroundColor=f3f4f6"
-                        ),
+                        avatar_images=("https://cdn-icons-png.flaticon.com/256/9055/9055398.png", 
+                                       "https://cdn.iconscout.com/icon/premium/png-256-thumb/robo-97-415007.png"),
                         bubble_full_width=False,
-                        height="100%",
-                        show_copy_button=True
+                        height="100%"  # Força altura 100%
                     )
 
                 # Área de input
@@ -902,44 +709,35 @@ def criar_interface():
                         with gr.Column(elem_classes="input-wrapper", scale=1):
                             user_input = gr.Textbox(
                                 show_label=False,
-                                placeholder="Digite sua mensagem aqui... (Shift+Enter para nova linha)",
+                                placeholder="Digite sua mensagem aqui...",
                                 lines=1,
                                 elem_id="entrada_usuario",
-                                max_lines=5,
+                                max_lines=3,  # Reduzido para não expandir muito
                                 container=False,
-                                scale=1,
-                                autofocus=True
+                                scale=1
                             )
+                            # Botão de envio oculto (será substituído por JavaScript)
                             enviar_btn = gr.Button("➤", variant="primary", size="sm", elem_classes="send-button")
 
-        # Overlay para mobile
-        gr.HTML("""
-        <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
-        """)
-
         def responder(chat_history, user_msg, modelo, session_id):
             if not user_msg.strip():
                 return chat_history, ""
 
-            # Adiciona a mensagem do usuário
-            chat_history = chat_history + [[user_msg, None]]
+            # Adiciona a mensagem do usuário ao histórico
+            chat_history = chat_history + [[user_msg, "🤔 Dr. Aldo está pensando..."]]
             yield chat_history, ""
 
             try:
-                # Simula typing indicator
-                chat_history[-1][1] = "✨ Dr. Aldo está analisando sua pergunta..."
-                yield chat_history, ""
-
-                # Obtem a resposta
+                # Obtem a resposta do modelo
                 resposta_final = responder_como_aldo(session_id, user_msg, modelo)
                 
-                # Atualiza com a resposta final
+                # Atualiza o histórico com a resposta final
                 chat_history[-1][1] = resposta_final
                 yield chat_history, ""
                 
             except Exception as e:
-                error_msg = f"❌ **Ops! Algo deu errado**\n\nDesculpe, encontrei um problema ao processar sua mensagem:\n\n`{str(e)}`\n\nTente novamente ou reformule sua pergunta."
-                chat_history[-1][1] = error_msg
+                # Em caso de erro, mostra uma mensagem amigável
+                chat_history[-1][1] = f"❌ Desculpe, ocorreu um erro: {str(e)}"
                 yield chat_history, ""
 
         # Eventos
@@ -957,161 +755,86 @@ def criar_interface():
             show_progress=False
         )
 
-        # JavaScript para funcionalidades avançadas
+        # JavaScript otimizado e simplificado
         gr.HTML("""
         <script>
         (function() {
             let initialized = false;
             
-            function initializeInterface() {
+            function initLayout() {
                 if (initialized) return;
                 initialized = true;
                 
-                // Auto-resize do textarea
-                const textarea = document.querySelector("#entrada_usuario textarea");
-                if (textarea) {
-                    function autoResize() {
-                        textarea.style.height = "24px";
-                        const newHeight = Math.min(textarea.scrollHeight, 120);
-                        textarea.style.height = Math.max(newHeight, 24) + "px";
-                    }
-                    
-                    textarea.addEventListener('input', autoResize);
-                    textarea.addEventListener('paste', () => setTimeout(autoResize, 10));
-                    
-                    // Foco automático
-                    setTimeout(() => textarea.focus(), 500);
+                // Força layout fixo imediatamente
+                const mainContainer = document.querySelector('.main-container');
+                if (mainContainer) {
+                    mainContainer.style.height = '100vh';
+                    mainContainer.style.maxHeight = '100vh';
+                    mainContainer.style.overflow = 'hidden';
                 }
                 
-                // Scroll automático para última mensagem
-                function scrollToBottom() {
-                    const chatContainer = document.querySelector(".chatbot > div");
-                    if (chatContainer) {
-                        chatContainer.scrollTop = chatContainer.scrollHeight;
-                    }
+                const chatMain = document.querySelector('.chat-main');
+                if (chatMain) {
+                    chatMain.style.height = '100vh';
+                    chatMain.style.maxHeight = '100vh';
+                    chatMain.style.display = 'flex';
+                    chatMain.style.flexDirection = 'column';
                 }
                 
-                // Observer para novas mensagens
-                const chatbot = document.querySelector(".chatbot");
-                if (chatbot) {
-                    const observer = new MutationObserver(scrollToBottom);
-                    observer.observe(chatbot, { childList: true, subtree: true });
+                const messagesContainer = document.querySelector('.messages-container');
+                if (messagesContainer) {
+                    messagesContainer.style.flex = '1';
+                    messagesContainer.style.minHeight = '0';
+                    messagesContainer.style.overflow = 'hidden';
                 }
                 
-                // Atalhos de teclado
-                document.addEventListener('keydown', function(e) {
-                    // Ctrl/Cmd + Enter para enviar
-                    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                        const sendBtn = document.querySelector('.send-button');
-                        if (sendBtn && !sendBtn.disabled) {
-                            sendBtn.click();
-                        }
-                    }
-                    
-                    // Esc para focar no input
-                    if (e.key === 'Escape') {
-                        const textarea = document.querySelector("#entrada_usuario textarea");
-                        if (textarea) textarea.focus();
-                    }
-                });
-                
-                console.log("Interface moderna inicializada com sucesso!");
-            }
-            
-            // Função para toggle da sidebar no mobile
-            window.toggleSidebar = function() {
-                const sidebar = document.querySelector('.sidebar');
-                const overlay = document.querySelector('.sidebar-overlay');
+                const inputArea = document.querySelector('.input-area');
+                if (inputArea) {
+                    inputArea.style.flexShrink = '0';
+                    inputArea.style.height = '120px';
+                    inputArea.style.maxHeight = '120px';
+                }
                 
-                if (sidebar && overlay) {
-                    const isOpen = sidebar.classList.contains('open');
+                // Configuração do textarea
+                const textarea = document.querySelector("#entrada_usuario textarea");
+                if (textarea) {
+                    textarea.style.height = "24px";
+                    textarea.style.minHeight = "24px";
+                    textarea.style.maxHeight = "48px"; // Limitado para não quebrar layout
+                    textarea.style.resize = "none";
+                    textarea.style.overflowY = "hidden";
                     
-                    if (isOpen) {
-                        sidebar.classList.remove('open');
-                        overlay.classList.remove('active');
-                    } else {
-                        sidebar.classList.add('open');
-                        overlay.classList.add('active');
+                    // Auto-resize limitado
+                    function autoResize() {
+                        textarea.style.height = "24px";
+                        const newHeight = Math.min(textarea.scrollHeight, 48);
+                        textarea.style.height = Math.max(newHeight, 24) + "px";
+                        
+                        if (textarea.scrollHeight > 48) {
+                            textarea.style.overflowY = "auto";
+                        } else {
+                            textarea.style.overflowY = "hidden";
+                        }
                     }
+                    
+                    textarea.addEventListener('input', autoResize);
+                    textarea.addEventListener('paste', () => setTimeout(autoResize, 0));
+                    setTimeout(() => textarea.focus(), 300);
                 }
-            };
-            
-            // Função para nova conversa
-            window.newChat = function() {
-                const chatbot = document.querySelector('.chatbot');
-                if (chatbot) {
-                    // Limpa o chat (implementar conforme necessário)
-                    console.log("Nova conversa iniciada");
-                }
-            };
-            
-            // Detecta mudanças de tema do sistema
-            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            mediaQuery.addListener(function(e) {
-                document.body.classList.toggle('dark-mode', e.matches);
-            });
-            
-            // Aplicar tema inicial
-            if (mediaQuery.matches) {
-                document.body.classList.add('dark-mode');
+                
+                console.log("Layout fixo inicializado");
             }
             
-            // Inicialização
+            // Executa quando DOM estiver pronto
             if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', initializeInterface);
+                document.addEventListener('DOMContentLoaded', initLayout);
             } else {
-                setTimeout(initializeInterface, 100);
-            }
-            
-            // Garantir inicialização
-            setTimeout(initializeInterface, 1000);
-            setTimeout(initializeInterface, 2000);
-            
-            // Melhorar performance do scroll
-            let scrollTimeout;
-            function optimizedScrollToBottom() {
-                if (scrollTimeout) clearTimeout(scrollTimeout);
-                scrollTimeout = setTimeout(() => {
-                    const chatContainer = document.querySelector(".chatbot > div");
-                    if (chatContainer) {
-                        chatContainer.scrollTo({
-                            top: chatContainer.scrollHeight,
-                            behavior: 'smooth'
-                        });
-                    }
-                }, 100);
-            }
-            
-            // Observer otimizado para mensagens
-            const chatObserver = new MutationObserver(function(mutations) {
-                let shouldScroll = false;
-                mutations.forEach(function(mutation) {
-                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-                        shouldScroll = true;
-                    }
-                });
-                if (shouldScroll) {
-                    optimizedScrollToBottom();
-                }
-            });
-            
-            // Iniciar observer quando chatbot estiver disponível
-            function startChatObserver() {
-                const chatbot = document.querySelector(".chatbot");
-                if (chatbot) {
-                    chatObserver.observe(chatbot, { 
-                        childList: true, 
-                        subtree: true,
-                        attributes: false,
-                        characterData: false
-                    });
-                } else {
-                    setTimeout(startChatObserver, 500);
-                }
+                setTimeout(initLayout, 100);
             }
             
-            startChatObserver();
-            
+            // Reforça o layout depois que o Gradio terminar de carregar
+            setTimeout(initLayout, 1000);
+            setTimeout(initLayout, 2000);
         })();
         </script>
         """)
@@ -1145,72 +868,30 @@ def inicializar_sistema_sync():
 
 def configurar_interface():
     """
-    Configura a interface Gradio moderna com design inspirado no ChatGPT.
-    Lança uma exceção se o sistema não puder ser inicializado adequadamente.
+    Configura a interface Gradio apenas se o sistema for inicializado com pelo menos 3 modelos disponíveis.
+    Lança uma exceção com a lista de modelos disponíveis se a inicialização falhar.
     """
     try:
-        print("🚀 Inicializando sistema iAldo AI...")
-        status, available_models = inicializar_sistema_sync()
-        
-        if status and len(available_models) >= 1:  # Relaxado para pelo menos 1 modelo
-            print(f"✅ Sistema inicializado com {len(available_models)} modelo(s)")
-            print(f"📋 Modelos disponíveis: {', '.join(available_models.keys())}")
+        status, available_models = inicializar_sistema()
+        if status:
             return criar_interface()
         else:
-            error_msg = f"❌ Sistema não inicializado adequadamente. Modelos disponíveis: {list(available_models.keys()) if available_models else 'Nenhum'}"
-            print(error_msg)
+            error_msg = f"Sistema não inicializado: menos de 3 modelos disponíveis. Modelos: {', '.join(available_models.keys()) if available_models else 'Nenhum'}"
             raise RuntimeError(error_msg)
     except Exception as e:
-        print(f"💥 Erro na configuração da interface: {e}")
+        print(f"Erro na configuração da interface: {e}")
         raise
 
-# Função adicional para melhor experiência do usuário
-def criar_mensagem_boas_vindas():
-    """Cria uma mensagem de boas-vindas personalizada"""
-    return """
-👋 **Olá! Seja bem-vindo ao iAldo AI!**
-
-Sou uma IA baseada no conhecimento do **Prof. Dr. Aldo Henrique**, especialista em:
-
-• 💻 **Programação:** C/C++, Java, Python
-• 🌐 **Desenvolvimento Web:** Frontend e Backend  
-• 🤖 **Inteligência Artificial:** Machine Learning, Deep Learning
-• 📚 **Educação:** Ensino de programação e tecnologia
-
-**Como posso te ajudar hoje?**
-
-💡 *Dica: Use Ctrl+Enter para enviar mensagens rapidamente!*
-"""
-
 if __name__ == "__main__":
     try:
-        print("🌟 Iniciando iAldo AI - Interface Moderna")
-        print("=" * 50)
-        
         app = configurar_interface()
-        
-        print("🎯 Interface configurada com sucesso!")
-        print("📱 Design responsivo: ✅")
-        print("🎨 Tema moderno: ✅") 
-        print("⚡ Performance otimizada: ✅")
-        print("=" * 50)
-        
         app.launch(
             server_name="0.0.0.0",
             server_port=7860,
             share=False,
             debug=False,
-            show_error=True,
-            favicon_path=None,
-            show_tips=False,
-            enable_queue=True,
-            max_threads=40
+            show_error=True
         )
-        
     except Exception as e:
-        print(f"💥 Erro crítico ao iniciar a aplicação: {e}")
-        print("\n🔧 Sugestões para resolver:")
-        print("1. Verifique se todos os modelos estão configurados")
-        print("2. Confirme se o módulo 'ai_logic' está disponível")
-        print("3. Verifique as dependências do sistema")
+        print(f"Erro ao iniciar a aplicação: {e}")
         exit(1)