Update app.py

app.py

@@ -1083,21 +1083,21 @@ def show_main_app():
     }
     # --- END QUOTE CATEGORIES DEFINITION ---
 
-    # --- ENHANCED CUSTOM CSS FOR MAIN APP (INCLUDING ALL FIXES) ---
+    # --- ENHANCED CUSTOM CSS FOR MAIN APP (ONLY FIXING TEXT COLORS AND PRESERVING LAYOUT) ---
     st.markdown("""
     <style>
     /* Global Styles & Background */
     .stApp {
-        background: linear-gradient(to bottom right, #f8f9fa, #e9ecef); /* Softer, subtle gradient */
-        color: #343a40; /* Darker default text for better contrast */
-        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern, clean font stack */
-        -webkit-font-smoothing: antialiased; /* Smoother font rendering */
-        padding-top: 2rem; /* Add some padding at the top */
+        background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
+        color: #343a40;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        padding-top: 2rem;
     }
 
     /* Streamlit's main block container for content centering and width */
     .main .block-container {
-        max-width: 1200px; /* Max width for content */
+        max-width: 1200px;
         padding-top: 2rem;
         padding-bottom: 2rem;
         padding-left: 1rem;
@@ -1112,34 +1112,33 @@ def show_main_app():
         display: none;
     }
 
-
     /* Header & Titles */
     h1, h2, h3, h4, h5, h6 {
-        color: #212529; /* Very dark grey for strong headings */
-        margin-top: 1.8rem; /* More space above headings */
-        margin-bottom: 0.9rem; /* More space below headings */
+        color: #212529;
+        margin-top: 1.8rem;
+        margin-bottom: 0.9rem;
         font-weight: 700;
     }
     h1 {
         font-size: 2.8em;
-        font-weight: 800; /* Extra bold */
-        color: #5d6dbe; /* A slightly darker, richer blue for main title */
+        font-weight: 800;
+        color: #5d6dbe;
         letter-spacing: -0.8px;
-        text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
     }
-    .header-tagline { /* Custom class for the welcome tagline */
+    .header-tagline {
         font-size: 1.2em;
-        color: #6c757d; /* Softer grey */
-        margin-top: -0.5rem; /* Pull it closer to the main title */
-        margin-bottom: 2.5rem; /* More space below tagline */
+        color: #6c757d;
+        margin-top: -0.5rem;
+        margin-bottom: 2.5rem;
         font-weight: 400;
     }
     h2 {
         font-size: 2em;
         font-weight: 700;
-        border-bottom: 2px solid #e9ecef; /* Thicker, softer line */
+        border-bottom: 2px solid #e9ecef;
         padding-bottom: 0.7rem;
-        margin-bottom: 2rem; /* More space below subheader */
+        margin-bottom: 2rem;
         color: #343a40;
     }
     h3 {
@@ -1149,47 +1148,46 @@ def show_main_app():
         margin-top: 2rem;
         margin-bottom: 1.2rem;
     }
-    h5 { /* For 'Custom Quotes & Voice Input' */
+    h5 {
         font-size: 1.1em;
         font-weight: 600;
         color: #495057;
         margin-bottom: 1rem;
     }
 
-
     /* Metrics (Total Conversations, Most Common Emotion, Avg. Confidence) */
     [data-testid="stMetric"] {
         background-color: #ffffff;
-        border: 1px solid #dee2e6; /* Softer border */
-        border-radius: 12px; /* More rounded */
-        padding: 20px; /* More padding */
-        box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Stronger, softer shadow */
+        border: 1px solid #dee2e6;
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
         text-align: center;
-        margin-bottom: 1.5rem; /* More space below metrics */
+        margin-bottom: 1.5rem;
         transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
     }
     [data-testid="stMetric"]:hover {
-        transform: translateY(-5px); /* Lift effect on hover */
-        box-shadow: 0 12px 30px rgba(0,0,0,0.12); /* Enhanced shadow on hover */
+        transform: translateY(-5px);
+        box-shadow: 0 12px 30px rgba(0,0,0,0.12);
     }
     [data-testid="stMetricLabel"] {
-        font-size: 1em; /* Slightly larger label */
+        font-size: 1em;
         color: #6c757d;
-        margin-bottom: 8px; /* More space below label */
+        margin-bottom: 8px;
         font-weight: 500;
     }
     [data-testid="stMetricValue"] {
-        font-size: 2.8em; /* Larger value */
-        font-weight: 800; /* Bolder value */
-        color: #5d6dbe; /* Match primary color */
+        font-size: 2.8em;
+        font-weight: 800;
+        color: #5d6dbe;
     }
 
     /* Buttons */
     .stButton>button {
-        background-color: #5d6dbe; /* DilBot's primary blue/purple */
+        background-color: #5d6dbe;
         color: white;
         border: none;
-        border-radius: 10px; /* More rounded */
+        border-radius: 10px;
         padding: 12px 25px;
         font-size: 1.1em;
         font-weight: bold;
@@ -1199,8 +1197,8 @@ def show_main_app():
         letter-spacing: 0.5px;
     }
     .stButton>button:hover {
-        background-color: #4a5c9d; /* Darker shade on hover */
-        transform: translateY(-3px); /* More pronounced lift effect */
+        background-color: #4a5c9d;
+        transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(0,0,0,0.15);
     }
     .stButton>button:active {
@@ -1210,7 +1208,7 @@ def show_main_app():
     }
     /* Logout button specific style */
     [key="logout_btn"] > button {
-        background-color: #dc3545; /* Red for logout */
+        background-color: #dc3545;
         box-shadow: 0 5px 15px rgba(220,53,69,0.2);
     }
     [key="logout_btn"] > button:hover {
@@ -1223,116 +1221,110 @@ def show_main_app():
     .stTextInput>div>div>input, .stTextArea>div>div>textarea {
         border-radius: 10px;
         border: 1px solid #ced4da;
-        padding: 14px 18px; /* More padding */
+        padding: 14px 18px;
         font-size: 1.05em;
         color: #343a40;
-        background-color: #fcfcfc; /* Off-white background */
-        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); /* Subtle inner shadow */
+        background-color: #fcfcfc;
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
     }
     .stTextInput>div>div>input:focus, .stTextArea>div>div>textarea:focus {
-        border-color: #5d6dbe; /* Highlight on focus */
-        box-shadow: 0 0 0 0.25rem rgba(93,109,190,0.25); /* Glow effect */
+        border-color: #5d6dbe;
+        box-shadow: 0 0 0 0.25rem rgba(93,109,190,0.25);
         outline: none;
     }
     .stTextInput>label, .stTextArea>label {
         font-weight: 600;
         color: #495057;
-        margin-bottom: 0.6rem; /* More space below label */
+        margin-bottom: 0.6rem;
     }
 
-    /* Selectbox (Dropdown) */
-    /* Target the main container for the selectbox */
+    /* Selectbox (Dropdown) Text Color Fixes */
     [data-testid="stSelectbox"] > div:first-child > div:first-child {
         border-radius: 10px;
         border: 1px solid #ced4da;
         background-color: #fcfcfc;
         box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
-        display: flex; /* Use flexbox for alignment of input and arrow */
-        align-items: center; /* Vertically center items */
-        min-height: 48px; /* Ensure a comfortable height */
-        padding: 0 10px; /* Horizontal padding, vertical padding on input */
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+        padding: 0 10px;
     }
     .stSelectbox>label {
         font-weight: 600;
         color: #495057;
         margin-bottom: 0.6rem;
     }
-    /* FIX: Selectbox selected value text color and ensure it fits properly */
+    /* Force selected value text to black */
     [data-testid="stSelectbox"] input[type="text"] {
-        color: black !important; /* Force text to be black */
-        -webkit-text-fill-color: black !important; /* For Webkit browsers like Chrome, Safari */
-        opacity: 1 !important; /* Ensure no transparency issues */
-        flex-grow: 1; /* Allow input to take up most space */
-        padding: 12px 5px; /* Adjust vertical padding within the input */
-        font-size: 1.05em; /* Ensure consistent font size */
-        line-height: 1.2em; /* Ensure text line height */
-        min-height: 1.2em; /* Minimum height for text content */
-        background-color: transparent !important; /* Ensure no white overlay */
-        border: none !important; /* Remove any default input borders */
-        outline: none !important; /* Remove outline on focus */
-        box-shadow: none !important; /* Remove any default input shadow */
-    }
-
-    /* FIX: Dropdown arrow color and visibility */
-    /* Target the button containing the SVG icon for the dropdown */
+        color: black !important;
+        -webkit-text-fill-color: black !important; /* For Webkit browsers */
+        opacity: 1 !important;
+        flex-grow: 1;
+        padding: 12px 5px;
+        font-size: 1.05em;
+        line-height: 1.2em;
+        min-height: 1.2em;
+        background-color: transparent !important;
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+    }
+    /* Force dropdown arrow to black */
     [data-testid="stSelectbox"] button {
-        background-color: transparent !important; /* Ensure button background is transparent */
-        border: none !important; /* Remove button border */
-        padding: 0 5px; /* Small padding for the arrow */
+        background-color: transparent !important;
+        border: none !important;
+        padding: 0 5px;
         cursor: pointer;
-        display: flex; /* Flexbox to center the SVG inside the button */
+        display: flex;
         align-items: center;
         justify-content: center;
     }
-    /* Target the SVG icon itself */
     [data-testid="stSelectbox"] svg {
-        fill: black !important; /* Force the SVG icon to be black */
-        color: black !important; /* Fallback for some SVG types */
-        font-size: 1.5em !important; /* Make the arrow a bit larger */
-        width: 1em !important; /* Ensure proper width */
-        height: 1em !important; /* Ensure proper height */
+        fill: black !important;
+        color: black !important;
+        font-size: 1.5em !important;
+        width: 1em !important;
+        height: 1em !important;
     }
-    /* Specific path inside SVG might also need fill */
     [data-testid="stSelectbox"] svg path {
         fill: black !important;
     }
 
 
-    /* File Uploader */
+    /* File Uploader Text Color Fixes */
     [data-testid="stFileUploaderDropzone"] {
-        border-radius: 12px; /* More rounded */
+        border-radius: 12px;
         border: 2px dashed #a0a8b4;
-        background-color: #ffffff !important; /* Ensure background is white */
-        padding: 25px; /* More padding */
+        background-color: #ffffff !important;
+        padding: 25px;
         transition: border-color 0.3s ease, background-color 0.3s ease;
         margin-bottom: 1.5rem;
-        display: flex; /* Ensure content is centered */
+        display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
         min-height: 120px;
-        overflow: hidden; /* Hide overflowing content */
+        overflow: hidden;
     }
     [data-testid="stFileUploaderDropzone"]:hover {
-        border-color: #5d6dbe; /* Highlight on hover */
+        border-color: #5d6dbe;
         background-color: #f7f9fb;
     }
-
-    /* FIX: File Uploader text color */
-    /* Target all relevant text elements inside the file uploader dropzone */
+    /* Force ALL text inside file uploader dropzone to black */
     [data-testid="stFileUploaderDropzone"] *,
     [data-testid="stFileUploaderDropzone"] p,
     [data-testid="stFileUploaderDropzone"] span,
     [data-testid="stFileUploaderDropzone"] div {
-        color: black !important; /* Force all text to black */
-        white-space: normal !important; /* Prevent text clipping */
-        word-break: break-word !important; /* Allow long words to break */
-        font-weight: normal !important; /* Reset any bolding that might make text appear thinner */
-        opacity: 1 !important; /* Ensure full visibility */
+        color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
+        white-space: normal !important;
+        word-break: break-word !important;
+        font-weight: normal !important;
     }
-    /* More specific selectors for file uploader text, often containing the "Drag and drop..." message */
+    /* Specific text within the file uploader (e.g., "Drag and drop file here") */
     [data-testid="stFileUploaderDropzone"] > div > div > div:nth-child(2) > div:first-child {
         color: black !important;
     }
@@ -1340,14 +1332,13 @@ def show_main_app():
         color: black !important;
     }
 
-
     [data-testid="stFileUploaderFileName"] {
         font-size: 0.95em;
         color: #495057;
         margin-top: 10px;
-        word-break: break-all; /* Ensure long filenames wrap */
+        word-break: break-all;
     }
-    [data-testid="stFileUploaderFile"] { /* Style for the actual uploaded file visual */
+    [data-testid="stFileUploaderFile"] {
         background-color: #e9ecef;
         border-radius: 8px;
         padding: 8px 12px;
@@ -1359,14 +1350,14 @@ def show_main_app():
     /* Information, Success, Error, Warning Boxes */
     [data-testid="stAlert"] {
         border-radius: 10px;
-        padding: 18px 25px; /* More padding */
-        margin-bottom: 1.8rem; /* More space below */
-        font-size: 1.05em; /* Slightly larger text */
+        padding: 18px 25px;
+        margin-bottom: 1.8rem;
+        font-size: 1.05em;
         line-height: 1.6;
         text-align: left;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for alerts */
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
-    /* Specific styles for each type with slightly richer colors */
+    /* Warning alert style (keep original color) */
     [data-testid="stAlert"] .streamlit-warning {
         background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
     }
@@ -1374,25 +1365,27 @@ def show_main_app():
     [data-testid="stAlert"] .streamlit-success {
         background-color: #e6ffe6;
         border-left: 6px solid #4CAF50;
-        /* Set color here as fallback, but specific p/span/div below are more robust */
-        color: black !important;
+        color: black !important; /* General color for the container */
     }
-    /* More aggressive targeting for text inside st.success alert */
+    /* Aggressive targeting for specific text elements within st.success */
     [data-testid="stAlert"] .streamlit-success p,
     [data-testid="stAlert"] .streamlit-success span,
-    [data-testid="stAlert"] .streamlit-success div {
+    [data-testid="stAlert"] .streamlit-success div,
+    [data-testid="stAlert"] .streamlit-success strong { /* Added strong for bold text */
         color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
     }
 
+    /* Error alert style (keep original color) */
     [data-testid="stAlert"] .streamlit-error {
         background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
     }
     /* FIX: Quote for you (st.info) text color to black */
     .stInfo {
-        background-color: #e6f7ff; /* Lighter blue for quote box */
-        border-left: 6px solid #64b5f6; /* Accent border, slightly brighter blue */
-        /* Set color here as fallback, but specific p/span/strong/div below are more robust */
-        color: black !important;
+        background-color: #e6f7ff;
+        border-left: 6px solid #64b5f6;
+        color: black !important; /* General color for the container */
         border-radius: 10px;
         padding: 18px 25px;
         margin-top: 2rem;
@@ -1400,27 +1393,29 @@ def show_main_app():
         font-size: 1.05em;
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
-    /* More aggressive targeting for text inside st.info alert */
+    /* Aggressive targeting for specific text elements within st.info */
     .stInfo p,
     .stInfo span,
     .stInfo strong,
     .stInfo div {
         color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
     }
 
 
-    /* Chat Message Bubbles */
+    /* Chat Message Bubbles (kept original styles) */
     .user-message-container {
         display: flex;
-        justify-content: flex-end; /* Align to the right */
+        justify-content: flex-end;
         margin-bottom: 15px;
     }
     .user-message {
-        background-color: #e0e6f6; /* Light blue-grey for user */
+        background-color: #e0e6f6;
         color: #343a40;
-        border-radius: 18px 18px 5px 18px; /* Rounded corners, pointed at bottom-left */
+        border-radius: 18px 18px 5px 18px;
         padding: 12px 18px;
-        max-width: 75%; /* Limit width of message */
+        max-width: 75%;
         box-shadow: 0 4px 10px rgba(0,0,0,0.08);
         line-height: 1.5;
         text-align: left;
@@ -1428,13 +1423,13 @@ def show_main_app():
 
     .bot-message-container {
         display: flex;
-        justify-content: flex-start; /* Align to the left */
+        justify-content: flex-start;
         margin-bottom: 15px;
     }
     .bot-message {
-        background-color: #ffffff; /* White for bot */
+        background-color: #ffffff;
         color: #343a40;
-        border-radius: 18px 18px 18px 5px; /* Rounded corners, pointed at bottom-right */
+        border-radius: 18px 18px 18px 5px;
         padding: 12px 18px;
         max-width: 75%;
         box-shadow: 0 4px 10px rgba(0,0,0,0.08);
@@ -1443,7 +1438,7 @@ def show_main_app():
     }
 
     .chat-separator {
-        border-bottom: 1px dashed #ced4da; /* Dashed separator for conversation turns */
+        border-bottom: 1px dashed #ced4da;
         margin: 25px 0;
     }
     .chat-title {
@@ -1455,19 +1450,19 @@ def show_main_app():
     }
 
 
-    /* Audio Player */
+    /* Audio Player (kept original styles) */
     .stAudio {
         margin-top: 1.5rem;
         margin-bottom: 2rem;
     }
 
-    /* Expander styling (for conversations) */
+    /* Expander styling (for conversations - kept original styles) */
     .streamlit-expanderHeader {
         background-color: #ffffff;
         border: 1px solid #e0e0e0;
-        border-radius: 10px; /* More rounded */
-        padding: 12px 18px; /* More padding */
-        margin-bottom: 0.8rem; /* More space */
+        border-radius: 10px;
+        padding: 12px 18px;
+        margin-bottom: 0.8rem;
         cursor: pointer;
         transition: background-color 0.2s ease, box-shadow 0.2s ease;
         box-shadow: 0 4px 10px rgba(0,0,0,0.05);
@@ -1477,31 +1472,30 @@ def show_main_app():
         box-shadow: 0 6px 15px rgba(0,0,0,0.08);
     }
     .streamlit-expanderHeader > div > div > p {
-        font-weight: 600; /* Bolder text */
+        font-weight: 600;
         color: #343a40;
         font-size: 1.05em;
     }
     .streamlit-expanderContent {
         background-color: #f8f9fa;
-        border-left: 4px solid #ced4da; /* Thicker border */
-        padding: 15px 20px; /* More padding */
+        border-left: 4px solid #ced4da;
+        padding: 15px 20px;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
         margin-top: -10px;
-        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); /* Inner shadow */
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
         line-height: 1.6;
     }
 
-
-    /* Horizontal rule */
+    /* Horizontal rule (kept original styles) */
     hr {
-        border-top: 2px solid #e9ecef; /* Thicker, softer rule */
+        border-top: 2px solid #e9ecef;
         margin-top: 3rem;
         margin-bottom: 3rem;
     }
 
-    /* Caption (footer) */
-    .footer-caption { /* Custom class for footer */
+    /* Caption (footer - kept original styles) */
+    .footer-caption {
         color: #868e96;
         font-size: 0.9em;
         margin-top: 3rem;
@@ -1510,7 +1504,7 @@ def show_main_app():
         letter-spacing: 0.2px;
     }
 
-    /* Container for sections */
+    /* Container for sections (kept original styles) */
     .stContainer {
         border-radius: 12px;
         box-shadow: 0 8px 20px rgba(0,0,0,0.08);
@@ -1519,7 +1513,7 @@ def show_main_app():
         margin-bottom: 2.5rem;
         background-color: #ffffff;
     }
-    .stContainer.has-border { /* Style for containers with border=True */
+    .stContainer.has-border {
         border: 1px solid #e0e0e0;
     }
 
@@ -1544,12 +1538,14 @@ def show_main_app():
     with st.container(border=True): # Streamlit's built-in container with border
         col1, col2 = st.columns(2)
         with col1:
-            # Using a custom markdown for the label as selectbox label_visibility is collapsed
-            st.markdown("<label class='stSelectbox>label' style='margin-bottom:0.6rem;padding-left:5px;'>🎯 Choose a quote theme:</label>", unsafe_allow_html=True)
-            selected_category = st.selectbox("Choose a quote theme", list(quote_categories.keys()), label_visibility="collapsed")
+            # Reverting to direct st.selectbox with a visible label
+            st.markdown("🎯 **Choose a quote theme:**") # Custom label for the selectbox
+            selected_category = st.selectbox("Select Quote Theme", list(quote_categories.keys()), label_visibility="collapsed") # Original label hidden
+            # The custom markdown above provides the visual label, while the st.selectbox's internal label is hidden.
 
         with col2:
             st.markdown("<h5>📁 Custom Quotes & Voice Input</h5>", unsafe_allow_html=True)
+            # Ensure file uploader labels are visible
             uploaded_quotes = st.file_uploader("Upload your own quotes (.txt)", type=["txt"], key="quote_uploader")
             uploaded_audio = st.file_uploader("Upload a voice message (.wav)", type=["wav"], key="audio_uploader")
 
@@ -1587,10 +1583,10 @@ def show_main_app():
         value=st.session_state.transcribed_text,
         height=180, # Increased height for more typing space
         placeholder="Type here or use your transcribed voice message...",
-        label_visibility="collapsed" # Hide default label
+        # label_visibility="collapsed" # Removed, rely on default or custom markdown if needed
     )
-    # Custom label for text area
-    st.markdown("<label class='stTextArea>label' style='margin-bottom:0.6rem;padding-left:5px;'>Share your thoughts, feelings, or experiences...</label>", unsafe_allow_html=True)
+    # Re-adding explicit label for text area if needed, to be safe
+    # st.markdown("<label class='stTextArea>label' style='margin-bottom:0.6rem;padding-left:5px;'>Share your thoughts, feelings, or experiences...</label>", unsafe_allow_html=True)
 
 
     final_input = user_input.strip() or st.session_state.transcribed_text.strip()
@@ -1728,7 +1724,7 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
         st.info("🌟 Start your first conversation with DilBot to see your personal dashboard and insights!")
 
     st.markdown("---")
-    st.markdown("<p class='footer-caption'>Built by Members of CSG Hackathon Team | Your data is stored privately and securely</p>", unsafe_allow_html=True) 
+    st.markdown("<p class='footer-caption'>Built by Members of CSG Hackathon Team | Your data is stored privately and securely</p>", unsafe_allow_html=True)
 # Main app logic
 def main():
     if not st.session_state.authenticated: