Update app.py

app.py

@@ -95,30 +95,31 @@ Sarah
     """
     negative_snippet = "Subject: Issue with Recent Delivery Dear Support, I received my package today, but..."
 
-    # Custom CSS for styling buttons and result boxes
+    # Custom CSS for styling buttons and result boxes with higher specificity
     st.markdown("""
         <style>
-        /* Style for sample buttons (smaller, light gray) */
+        /* Style for sample buttons (smaller, light gray), excluding Clear */
         div.stButton > button[kind="secondary"]:not([key="clear"]) {
-            font-size: 12px;
-            padding: 5px 10px;
-            background-color: #f0f0f0;
-            color: #333333;
-            border: 1px solid #cccccc;
-            border-radius: 3px;
+            font-size: 12px !important;
+            padding: 5px 10px !important;
+            background-color: #f0f0f0 !important;
+            color: #333333 !important;
+            border: 1px solid #cccccc !important;
+            border-radius: 3px !important;
         }
-        /* Analyze Email button (orange, matches Clear button size) */
+        /* Analyze Email button (force orange, matches Clear button size) */
         div.stButton > button[key="analyze"] {
             background-color: #FF5733 !important; /* Force orange color */
-            color: white !important;
-            font-size: 18px;
-            padding: 12px 24px;
-            border: none;
-            border-radius: 5px;
-            width: 100%;
-            height: 50px;
-            box-sizing: border-box;
-            text-align: center;
+            color: white !important; /* Force white text */
+            font-size: 18px !important;
+            padding: 12px 24px !important;
+            border: none !important;
+            border-radius: 5px !important;
+            width: 100% !important;
+            height: 50px !important;
+            box-sizing: border-box !important;
+            text-align: center !important;
+            margin: 0 !important; /* Remove any default margins */
         }
         div.stButton > button[key="analyze"]:hover {
             background-color: #E74C3C !important; /* Darker orange on hover */
@@ -126,40 +127,41 @@ Sarah
         /* Clear button (gray, aligned with Analyze) */
         div.stButton > button[key="clear"] {
             background-color: #d3d3d3 !important; /* Force gray color */
-            color: #333333 !important;
-            font-size: 18px;
-            padding: 12px 24px;
-            border: none;
-            border-radius: 5px;
-            width: 100%;
-            height: 50px;
-            box-sizing: border-box;
-            text-align: center;
+            color: #333333 !important; /* Force dark text */
+            font-size: 18px !important;
+            padding: 12px 24px !important;
+            border: none !important;
+            border-radius: 5px !important;
+            width: 100% !important;
+            height: 50px !important;
+            box-sizing: border-box !important;
+            text-align: center !important;
+            margin: 0 !important; /* Remove any default margins */
         }
         div.stButton > button[key="clear"]:hover {
             background-color: #b0b0b0 !important; /* Darker gray on hover */
         }
         /* Result boxes with updated colors */
         .spam-result {
-            background-color: #ff3333; /* Red for no follow-up (spam) */
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #cc0000;
+            background-color: #ff3333 !important; /* Red for no follow-up (spam) */
+            color: white !important;
+            padding: 10px !important;
+            border-radius: 5px !important;
+            border: 1px solid #cc0000 !important;
         }
         .positive-result {
-            background-color: #ff3333; /* Red for no follow-up (positive) */
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #cc0000;
+            background-color: #ff3333 !important; /* Red for no follow-up (positive) */
+            color: white !important;
+            padding: 10px !important;
+            border-radius: 5px !important;
+            border: 1px solid #cc0000 !important;
         }
         .negative-result {
-            background-color: #006633; /* Dark green for follow-up needed */
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #004d26;
+            background-color: #006633 !important; /* Dark green for follow-up needed */
+            color: white !important;
+            padding: 10px !important;
+            border-radius: 5px !important;
+            border: 1px solid #004d26 !important;
         }
         </style>
     """, unsafe_allow_html=True)