Update app.py

app.py

@@ -126,7 +126,7 @@ def chat_with_portfolio(message, history):
         return f"Error: {str(e)}"
 
 
-# Aesthetics - Fixed CSS for proper icon sizing
+# Fixed CSS for Gradio 5.0 - properly sized icons
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');
 
@@ -139,6 +139,7 @@ custom_css = """
     background-attachment: fixed !important;
 }
 
+/* Chat messages */
 .message-wrap {
     background: rgba(255, 255, 255, 0.15) !important;
     backdrop-filter: blur(12px) !important;
@@ -151,6 +152,7 @@ custom_css = """
     color: white !important;
 }
 
+/* Input textarea */
 .input-wrap textarea, 
 textarea {
     background: rgba(255, 255, 255, 0.1) !important;
@@ -164,45 +166,76 @@ textarea::placeholder {
     color: rgba(255, 255, 255, 0.6) !important;
 }
 
+/* Fix button and icon sizes for Gradio 5.0 */
 button {
-    max-width: 100px !important;
+    height: 44px !important;
+    min-height: 44px !important;
     max-height: 44px !important;
-    min-width: 40px !important;
-    padding: 8px 16px !important;
+    padding: 8px 12px !important;
 }
 
-button svg {
+/* Target SVG icons inside buttons */
+button svg,
+button img {
     width: 20px !important;
     height: 20px !important;
+    min-width: 20px !important;
+    min-height: 20px !important;
     max-width: 20px !important;
     max-height: 20px !important;
 }
 
-.submit-btn, 
-button[aria-label="Submit"] {
-    max-width: 60px !important;
+/* Submit button specific sizing */
+.submit-btn,
+button[type="submit"],
+.chatbot button[aria-label*="Submit"],
+.chatbot button[aria-label*="Send"] {
     width: 60px !important;
+    min-width: 60px !important;
+    max-width: 60px !important;
+}
+
+/* Action buttons (clear, undo, etc) */
+.chatbot .action-button,
+.chatbot button[aria-label*="Clear"],
+.chatbot button[aria-label*="Undo"],
+.chatbot button[aria-label*="Delete"] {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
 }
 
+/* Example buttons */
 .examples button {
     background: rgba(255, 255, 255, 0.1) !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     color: white !important;
-    max-width: 100% !important;
     border-radius: 12px !important;
+    height: auto !important;
+    max-height: none !important;
+    padding: 12px 16px !important;
 }
 
 .examples button:hover {
     background: rgba(255, 255, 255, 0.2) !important;
 }
 
+/* Chatbot container */
+.chatbot {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 20px !important;
+}
+
+/* Hide footer */
 footer { 
     display: none !important; 
 }
 
-.chatbot {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border-radius: 20px !important;
+/* Additional icon fix for any nested elements */
+button * svg,
+button * img {
+    width: 20px !important;
+    height: 20px !important;
 }
 """