Update app.py

app.py

@@ -96,21 +96,13 @@ Sarah
     negative_snippet = "Subject: Issue with Recent Delivery Dear Support, I received my package today, but..."
 
     # Custom CSS for styling buttons and result boxes with higher specificity
+    # Replace your existing st.markdown CSS block with this
     st.markdown("""
         <style>
-        /* Style for sample buttons (smaller, light gray), excluding Clear */
-        div.stButton > button[kind="secondary"]:not([key="clear"]) {
-            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 (force orange, matches Clear button size) */
-        div.stButton > button[key="analyze"] {
-            background-color: #FF5733 !important; /* Force orange color */
-            color: white !important; /* Force white text */
+        /* Ensure high specificity for Analyze Email button (orange) */
+        div[data-testid="stButton"] > button[key="analyze"] {
+            background-color: #FF5733 !important; /* Orange */
+            color: white !important;
             font-size: 18px !important;
             padding: 12px 24px !important;
             border: none !important;
@@ -119,15 +111,16 @@ Sarah
             height: 50px !important;
             box-sizing: border-box !important;
             text-align: center !important;
-            margin: 0 !important; /* Remove any default margins */
+            margin: 0 !important;
         }
-        div.stButton > button[key="analyze"]:hover {
+        div[data-testid="stButton"] > button[key="analyze"]:hover {
             background-color: #E74C3C !important; /* Darker orange on hover */
         }
-        /* Clear button (blue, aligned with Analyze) */
-        div.stButton > button[key="clear"] {
-            background-color: #007BFF !important; /* Force blue color */
-            color: white !important; /* Force white text */
+    
+        /* Ensure high specificity for Clear button (blue) */
+        div[data-testid="stButton"] > button[key="clear"] {
+            background-color: #007BFF !important; /* Blue */
+            color: white !important;
             font-size: 18px !important;
             padding: 12px 24px !important;
             border: none !important;
@@ -136,12 +129,23 @@ Sarah
             height: 50px !important;
             box-sizing: border-box !important;
             text-align: center !important;
-            margin: 0 !important; /* Remove any default margins */
+            margin: 0 !important;
         }
-        div.stButton > button[key="clear"]:hover {
+        div[data-testid="stButton"] > button[key="clear"]:hover {
             background-color: #0056b3 !important; /* Darker blue on hover */
         }
-        /* Result boxes with updated colors */
+    
+        /* Style for sample buttons (light gray) */
+        div[data-testid="stButton"] > button[kind="secondary"]:not([key="clear"]):not([key="analyze"]) {
+            font-size: 12px !important;
+            padding: 5px 10px !important;
+            background-color: #f0f0f0 !important;
+            color: #333333 !important;
+            border: 1px solid #cccccc !important;
+            border-radius: 3px !important;
+        }
+    
+        /* Result boxes (unchanged) */
         .spam-result {
             background-color: #ff3333 !important; /* Red for no follow-up (spam) */
             color: white !important;