Update app.py

app.py

@@ -1071,219 +1071,297 @@ def show_main_app():
     """Main DilBot application"""
     username = st.session_state.username
     
-    st.set_page_config(page_title="DilBot - Emotional AI", page_icon="🧠")
-   # --- CUSTOM CSS FOR MAIN APP ---
+    st.set_page_config(page_title="DilBot - Emotional AI", page_icon="🧠", layout="wide") # Changed to 'wide' for more space
+    
+    # --- ENHANCED CUSTOM CSS FOR MAIN APP ---
     st.markdown("""
     <style>
     /* Global Styles & Background */
     .stApp {
-        background-color: #f0f2f6; /* Light, calming background */
-        color: #333333; /* Darker default text color for better readability */
-        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Modern, clean font */
+        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 */
+    }
+
+    /* Streamlit's main block container for content centering and width */
+    .main .block-container {
+        max-width: 1200px; /* Max width for content */
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    /* Hide Streamlit's header/footer if you want a fully custom layout */
+    .stApp > header {
+        display: none;
+    }
+    .stApp > footer {
+        display: none;
     }
 
+
     /* Header & Titles */
     h1, h2, h3, h4, h5, h6 {
-        color: #4A4A4A; /* Slightly darker grey for headings */
-        margin-top: 1.5rem;
-        margin-bottom: 0.8rem;
+        color: #212529; /* Very dark grey for strong headings */
+        margin-top: 1.8rem; /* More space above headings */
+        margin-bottom: 0.9rem; /* More space below headings */
+        font-weight: 700;
     }
     h1 {
-        font-size: 2.5em;
-        font-weight: 700;
-        color: #7289da; /* DilBot's primary color */
+        font-size: 2.8em;
+        font-weight: 800; /* Extra bold */
+        color: #5d6dbe; /* A slightly darker, richer blue for main title */
+        letter-spacing: -0.8px;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */
+    }
+    .header-tagline { /* Custom class for the welcome 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 */
+        font-weight: 400;
     }
     h2 {
-        font-size: 1.8em;
-        font-weight: 600;
-        border-bottom: 1px solid #e0e0e0; /* Subtle line under subheaders */
-        padding-bottom: 0.5rem;
-        margin-bottom: 1.5rem;
+        font-size: 2em;
+        font-weight: 700;
+        border-bottom: 2px solid #e9ecef; /* Thicker, softer line */
+        padding-bottom: 0.7rem;
+        margin-bottom: 2rem; /* More space below subheader */
+        color: #343a40;
     }
     h3 {
-        font-size: 1.5em;
+        font-size: 1.6em;
         font-weight: 600;
-        color: #555555;
+        color: #495057;
+        margin-top: 2rem;
+        margin-bottom: 1.2rem;
+    }
+    h5 { /* For 'Custom Quotes & Voice Input' */
+        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 #e0e0e0;
-        border-radius: 10px;
-        padding: 15px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        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 */
         text-align: center;
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem; /* More space below metrics */
+        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 */
     }
     [data-testid="stMetricLabel"] {
-        font-size: 0.9em;
-        color: #666666;
-        margin-bottom: 5px;
+        font-size: 1em; /* Slightly larger label */
+        color: #6c757d;
+        margin-bottom: 8px; /* More space below label */
+        font-weight: 500;
     }
     [data-testid="stMetricValue"] {
-        font-size: 2.2em;
-        font-weight: 700;
-        color: #7289da; /* Match DilBot's primary color */
+        font-size: 2.8em; /* Larger value */
+        font-weight: 800; /* Bolder value */
+        color: #5d6dbe; /* Match primary color */
     }
 
     /* Buttons */
     .stButton>button {
-        background-color: #7289da; /* DilBot's primary blue/purple */
+        background-color: #5d6dbe; /* DilBot's primary blue/purple */
         color: white;
         border: none;
-        border-radius: 8px;
-        padding: 10px 20px;
-        font-size: 1em;
+        border-radius: 10px; /* More rounded */
+        padding: 12px 25px;
+        font-size: 1.1em;
         font-weight: bold;
-        transition: background-color 0.3s ease, transform 0.2s ease;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         cursor: pointer;
+        letter-spacing: 0.5px;
     }
     .stButton>button:hover {
-        background-color: #5b6fb8; /* Darker shade on hover */
-        transform: translateY(-2px); /* Slight lift effect */
+        background-color: #4a5c9d; /* Darker shade on hover */
+        transform: translateY(-3px); /* More pronounced lift effect */
+        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
     }
     .stButton>button:active {
-        background-color: #4a5a90;
+        background-color: #3b4b80;
         transform: translateY(0);
+        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
     }
-    /* Style for the logout button specifically if different */
-    [data-testid="stSidebarNav"] + div > .stButton > button { /* Adjust selector if needed for top-right logout */
+    /* Logout button specific style */
+    [key="logout_btn"] > button {
         background-color: #dc3545; /* Red for logout */
+        box-shadow: 0 5px 15px rgba(220,53,69,0.2);
     }
-    [data-testid="stSidebarNav"] + div > .stButton > button:hover {
+    [key="logout_btn"] > button:hover {
         background-color: #c82333;
+        box-shadow: 0 8px 20px rgba(220,53,69,0.3);
     }
 
 
     /* Text Inputs and Text Areas */
     .stTextInput>div>div>input, .stTextArea>div>div>textarea {
-        border-radius: 8px;
-        border: 1px solid #ced4da; /* Light grey border */
-        padding: 12px 15px;
-        font-size: 1em;
-        color: #333333;
-        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+        border-radius: 10px;
+        border: 1px solid #ced4da;
+        padding: 14px 18px; /* More padding */
+        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 */
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
     }
     .stTextInput>div>div>input:focus, .stTextArea>div>div>textarea:focus {
-        border-color: #7289da; /* Highlight on focus */
-        box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
+        border-color: #5d6dbe; /* Highlight on focus */
+        box-shadow: 0 0 0 0.25rem rgba(93,109,190,0.25); /* Glow effect */
         outline: none;
     }
     .stTextInput>label, .stTextArea>label {
         font-weight: 600;
-        color: #555555;
-        margin-bottom: 5px; /* Add some space below label */
+        color: #495057;
+        margin-bottom: 0.6rem; /* More space below label */
     }
 
     /* Selectbox (Dropdown) */
     .stSelectbox>div>div>div {
-        border-radius: 8px;
+        border-radius: 10px;
         border: 1px solid #ced4da;
-        padding: 8px 12px;
-        font-size: 1em;
-        color: #333333;
-        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+        padding: 12px 15px; /* More padding */
+        font-size: 1.05em;
+        color: #343a40;
+        background-color: #fcfcfc;
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
     }
     .stSelectbox>label {
         font-weight: 600;
-        color: #555555;
+        color: #495057;
+        margin-bottom: 0.6rem;
     }
 
     /* File Uploader */
     [data-testid="stFileUploaderDropzone"] {
-        border-radius: 10px;
-        border: 2px dashed #a0a8b4; /* Dashed border */
+        border-radius: 12px; /* More rounded */
+        border: 2px dashed #a0a8b4;
         background-color: #ffffff;
-        padding: 20px;
+        padding: 25px; /* More padding */
         transition: border-color 0.3s ease, background-color 0.3s ease;
-        margin-bottom: 1rem; /* Space below uploader */
+        margin-bottom: 1.5rem;
     }
     [data-testid="stFileUploaderDropzone"]:hover {
-        border-color: #7289da; /* Highlight on hover */
-        background-color: #f7f7f7;
+        border-color: #5d6dbe; /* Highlight on hover */
+        background-color: #f7f9fb;
     }
     /* Hide the redundant 'Drag and drop file here' text */
     [data-testid="stFileUploaderDropzone"] p:first-child {
         display: none;
     }
     [data-testid="stFileUploaderFileName"] {
-        font-size: 0.9em;
-        color: #555;
-        margin-top: 5px;
+        font-size: 0.95em;
+        color: #495057;
+        margin-top: 10px;
+        word-break: break-all; /* Ensure long filenames wrap */
+    }
+    [data-testid="stFileUploaderFile"] { /* Style for the actual uploaded file visual */
+        background-color: #e9ecef;
+        border-radius: 8px;
+        padding: 8px 12px;
+        margin-top: 10px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }
 
 
     /* Information, Success, Error, Warning Boxes */
     [data-testid="stAlert"] {
-        border-radius: 8px;
-        padding: 15px 20px;
-        margin-bottom: 1rem;
-        font-size: 1em;
-        line-height: 1.5;
-    }
-    [data-testid="stAlert"] .css-1aumx4k { /* Inner div for icon/text */
-        align-items: center;
+        border-radius: 10px;
+        padding: 18px 25px; /* More padding */
+        margin-bottom: 1.8rem; /* More space below */
+        font-size: 1.05em; /* Slightly larger text */
+        line-height: 1.6;
+        text-align: left;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for alerts */
     }
-    /* Specific styles for each type */
+    /* Specific styles for each type with slightly richer colors */
     [data-testid="stAlert"] .streamlit-warning {
-        background-color: #fff3cd; /* Light yellow */
-        color: #664d03;
-        border-left: 5px solid #ffc107; /* Yellow border */
+        background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
     }
     [data-testid="stAlert"] .streamlit-success {
-        background-color: #d1e7dd; /* Light green */
-        color: #0f5132;
-        border-left: 5px solid #198754; /* Green border */
+        background-color: #e6ffe6; color: #0a6b0a; border-left: 6px solid #4CAF50;
     }
     [data-testid="stAlert"] .streamlit-error {
-        background-color: #f8d7da; /* Light red */
-        color: #842029;
-        border-left: 5px solid #dc3545; /* Red border */
+        background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
     }
     [data-testid="stAlert"] .streamlit-info {
-        background-color: #cfe2ff; /* Light blue */
-        color: #055160;
-        border-left: 5px solid #0dcaf0; /* Cyan border */
+        background-color: #e6f7ff; color: #0a4d6e; border-left: 6px solid #3498db;
     }
 
 
-    /* Markdown for Quote and Response */
-    .stMarkdown h3 { /* For "DilBot's Response" title */
-        font-size: 1.6em;
-        color: #7289da;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+    /* Chat Message Bubbles */
+    .user-message-container {
+        display: flex;
+        justify-content: flex-end; /* Align to the right */
+        margin-bottom: 15px;
     }
-    /* Styling for the blockquote (DilBot's response) */
-    .stMarkdown blockquote {
-        background-color: #ffffff;
-        border-left: 6px solid #7289da; /* Accent border */
-        padding: 15px 20px;
-        margin: 1.5rem 0;
-        border-radius: 10px;
-        font-style: italic;
-        color: #4a4a4a;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        line-height: 1.6;
+    .user-message {
+        background-color: #e0e6f6; /* Light blue-grey for user */
+        color: #343a40;
+        border-radius: 18px 18px 5px 18px; /* Rounded corners, pointed at bottom-left */
+        padding: 12px 18px;
+        max-width: 75%; /* Limit width of message */
+        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+        line-height: 1.5;
+        text-align: left;
     }
-    .stMarkdown blockquote p { /* Ensure text inside blockquote is styled */
-        margin-bottom: 0;
+
+    .bot-message-container {
+        display: flex;
+        justify-content: flex-start; /* Align to the left */
+        margin-bottom: 15px;
+    }
+    .bot-message {
+        background-color: #ffffff; /* White for bot */
+        color: #343a40;
+        border-radius: 18px 18px 18px 5px; /* Rounded corners, pointed at bottom-right */
+        padding: 12px 18px;
+        max-width: 75%;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+        line-height: 1.5;
+        text-align: left;
+    }
+
+    .chat-separator {
+        border-bottom: 1px dashed #ced4da; /* Dashed separator for conversation turns */
+        margin: 25px 0;
+    }
+    .chat-title {
+        font-size: 1.8em;
+        font-weight: 700;
+        color: #5d6dbe;
+        text-align: center;
+        margin-bottom: 2rem;
     }
 
     /* Quote for you (st.info) */
-    .stInfo { /* Target the st.info for quotes specifically if needed */
+    .stInfo {
         background-color: #e6f7ff; /* Lighter blue for quote box */
-        border-left: 6px solid #4893c5; /* Accent border */
+        border-left: 6px solid #64b5f6; /* Accent border, slightly brighter blue */
         color: #004085;
-        border-radius: 8px;
-        padding: 15px 20px;
-        margin-top: 1.5rem;
+        border-radius: 10px;
+        padding: 18px 25px;
+        margin-top: 2rem;
         font-style: italic;
+        font-size: 1.05em;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
-    .stInfo span[data-baseweb="tag"] { /* Targeting the '💭 Quote for you:' part */
+    .stInfo span[data-baseweb="tag"] {
         font-weight: bold;
         color: #004085;
     }
@@ -1296,91 +1374,99 @@ def show_main_app():
     }
 
     /* Expander styling (for conversations) */
-    .streamlit-expanderContent {
-        background-color: #f8f9fa; /* Light background for content */
-        border-left: 3px solid #ced4da;
-        padding: 10px 15px;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
-        margin-top: -10px; /* Adjust to sit right under header */
-    }
     .streamlit-expanderHeader {
         background-color: #ffffff;
         border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 10px 15px;
-        margin-bottom: 0.5rem;
+        border-radius: 10px; /* More rounded */
+        padding: 12px 18px; /* More padding */
+        margin-bottom: 0.8rem; /* More space */
         cursor: pointer;
-        transition: background-color 0.2s ease;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        transition: background-color 0.2s ease, box-shadow 0.2s ease;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
     }
     .streamlit-expanderHeader:hover {
-        background-color: #f5f5f5;
+        background-color: #f7f9fb;
+        box-shadow: 0 6px 15px rgba(0,0,0,0.08);
     }
-    .streamlit-expanderHeader > div > div > p { /* Target expander title text */
-        font-weight: 500;
-        color: #333333;
+    .streamlit-expanderHeader > div > div > p {
+        font-weight: 600; /* Bolder text */
+        color: #343a40;
+        font-size: 1.05em;
     }
-    .stExpander.css-1r0f5rs.e1gf0vsg1 { /* specific class for closed expander */
-        /* You might need to inspect to get the exact class for closed/open state */
-        /* border-radius: 8px; */
+    .streamlit-expanderContent {
+        background-color: #f8f9fa;
+        border-left: 4px solid #ced4da; /* Thicker border */
+        padding: 15px 20px; /* More padding */
+        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 */
+        line-height: 1.6;
     }
 
 
     /* Horizontal rule */
     hr {
-        border-top: 1px solid #e0e0e0;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
+        border-top: 2px solid #e9ecef; /* Thicker, softer rule */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
     }
 
     /* Caption (footer) */
-    .stMarkdown small {
-        color: #888888;
-        font-size: 0.85em;
-        margin-top: 2rem;
-        display: block; /* Make sure it takes its own line */
+    .footer-caption { /* Custom class for footer */
+        color: #868e96;
+        font-size: 0.9em;
+        margin-top: 3rem;
+        display: block;
         text-align: center;
+        letter-spacing: 0.2px;
+    }
+
+    /* Container for sections */
+    .stContainer {
+        border-radius: 12px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+        border: 1px solid #e0e0e0;
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+        background-color: #ffffff;
+    }
+    .stContainer.has-border { /* Style for containers with border=True */
+        border: 1px solid #e0e0e0;
     }
 
     </style>
     """, unsafe_allow_html=True)
     # --- END CUSTOM CSS ---
 
-    
-   # Header with logout
+    # --- Streamlit UI Components ---
+    # Header with logout button
     col1, col2 = st.columns([4, 1])
     with col1:
-        st.title(f"🧠 DilBot - Welcome back, {username}!")
-        st.markdown("<p style='font-size: 1.1em; color: #666666;'>Your personal emotional AI companion</p>", unsafe_allow_html=True) # Styled tagline
+        st.markdown(f"<h1>🧠 DilBot</h1>", unsafe_allow_html=True)
+        st.markdown(f"<p class='header-tagline'>Welcome back, {username}! Your personal emotional AI companion</p>", unsafe_allow_html=True)
     with col2:
-        if st.button("Logout", key="logout_btn"):
+        st.markdown("<div style='height: 40px;'></div>", unsafe_allow_html=True) # Spacer
+        if st.button("Logout", key="logout_btn", use_container_width=True):
             st.session_state.authenticated = False
             st.session_state.username = None
             st.rerun()
 
-    # Quote categories
-    quote_categories = {
-        "Grief": ["Grief is the price we pay for love.", "Tears are the silent language of grief.", "What we have once enjoyed we can never lose; all that we love deeply becomes a part of us."],
-        "Motivation": ["Believe in yourself and all that you are.", "Tough times never last, but tough people do.", "The only way to do great work is to love what you do."],
-        "Healing": ["Every wound has its own time to heal.", "It's okay to take your time to feel better.", "Healing is not linear, and that's perfectly okay."],
-        "Relationships": ["The best relationships are built on trust.", "Love is not about possession but appreciation.", "Healthy relationships require both people to show up authentically."]
-    }
-
-    # UI for quote selection and file upload
-    # Use st.container for better visual grouping
-    st.markdown("### 📝 Input Your Thoughts") # New subheader for input section
-    with st.container(border=True): # New feature in Streamlit for container with border
+    # Input section wrapped in a styled container
+    st.markdown("<h3>📝 Input Your Thoughts</h3>", unsafe_allow_html=True)
+    with st.container(border=True): # Streamlit's built-in container with border
         col1, col2 = st.columns(2)
         with col1:
-            selected_category = st.selectbox("🎯 Choose a quote theme:", list(quote_categories.keys()))
+            st.markdown("<label class='stSelectbox>label' style='margin-bottom:0.6rem;padding-left:5px;'>🎯 Choose a quote theme:</label>", unsafe_allow_html=True) # Custom label for selectbox
+            selected_category = st.selectbox("Choose a quote theme", list(quote_categories.keys()), label_visibility="collapsed") # Hide default label
+
         with col2:
-            st.markdown("##### 📁 Custom Quotes & Voice Input") # Smaller header
+            st.markdown("<h5>📁 Custom Quotes & Voice Input</h5>", unsafe_allow_html=True)
             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")
 
-            # Voice transcription button moved for better flow
-            if uploaded_audio and st.button("🎙️ Transcribe Voice Message", key="transcribe_btn"): # Updated button text
+            # Voice transcription button
+            if uploaded_audio and st.button("🎙️ Transcribe Voice Message", key="transcribe_btn", use_container_width=True):
                 with st.spinner("Transcribing your voice..."):
                     transcribed = transcribe_audio_file(uploaded_audio)
                     if transcribed.startswith("Error:"):
@@ -1388,8 +1474,8 @@ def show_main_app():
                     else:
                         st.session_state.transcribed_text = transcribed
                         st.success("✅ Voice transcribed successfully!")
-    
-    # Handle vectorstore
+
+    # Handle vectorstore (ORIGINAL LOGIC - NO CHANGE)
     current_quotes = []
     vectorstore = None
     
@@ -1406,37 +1492,33 @@ def show_main_app():
             vectorstore = build_user_vectorstore(username, default_quotes)
         current_quotes = default_quotes
     
-    # Voice transcription
-    if uploaded_audio and st.button("🎙️ Transcribe Voice"):
-        with st.spinner("Transcribing your voice..."):
-            transcribed = transcribe_audio_file(uploaded_audio)
-            if transcribed.startswith("Error:"):
-                st.error(transcribed)
-            else:
-                st.session_state.transcribed_text = transcribed
-                st.success("✅ Voice transcribed successfully!")
-    
-    # Input area
-    st.markdown("##### 💬 What's on your mind?")
+    # Input area for user message
+    st.markdown("<h3>💬 What's on your mind?</h3>", unsafe_allow_html=True)
     user_input = st.text_area(
-        "Share your thoughts, feelings, or experiences...", # Removed redundant label
+        "Share your thoughts, feelings, or experiences...",
         value=st.session_state.transcribed_text,
-        height=150, # Slightly increased height
-        placeholder="Type here or use your transcribed voice message..."
+        height=180, # Increased height for more typing space
+        placeholder="Type here or use your transcribed voice message...",
+        label_visibility="collapsed" # Hide default label
     )
+    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) # Custom label
+
 
     final_input = user_input.strip() or st.session_state.transcribed_text.strip()
     
     # Main interaction button
+    # IMPORTANT: The "Talk to DilBot" button was appearing twice in your original code.
+    # I'm assuming you only want one, and it should trigger the logic.
+    # The one below is the one that correctly triggers the logic.
     if st.button("🧠 Talk to DilBot", type="primary", use_container_width=True):
         if not final_input:
             st.warning("⚠️ Please enter something to share or upload a voice message.")
         else:
             with st.spinner("DilBot is thinking and feeling..."):
-                # Emotion detection
+                # Emotion detection (ORIGINAL LOGIC - NO CHANGE)
                 emotion, score = detect_emotion(final_input)
                 
-                # Get AI response
+                # Get AI response (ORIGINAL LOGIC - NO CHANGE)
                 prompt_template = PromptTemplate(
                     input_variables=["context", "user_input", "username"],
                     template="""You are DilBot, an empathetic emotional support AI companion for {username}. 
@@ -1448,28 +1530,28 @@ User's message:
 Respond as DilBot with warmth, empathy, and understanding. Keep it conversational and supportive."""
                 )
                 
-                # Get similar quotes
+                # Get similar quotes (ORIGINAL LOGIC - NO CHANGE)
                 similar_docs = vectorstore.similarity_search(final_input, k=2)
                 context = "\n".join([doc.page_content for doc in similar_docs])
                 
-                # Generate response
+                # Generate response (ORIGINAL LOGIC - NO CHANGE)
                 groq_llm = ChatGroq(api_key=GROQ_API_KEY, model="llama3-70b-8192")
                 chain = LLMChain(llm=groq_llm, prompt=prompt_template)
                 response = chain.run(context=context, user_input=final_input, username=username)
                 
-                # Save to user's journal
+                # Save to user's journal (ORIGINAL LOGIC - NO CHANGE)
                 save_user_journal(username, final_input, emotion, score, response)
                 
-                # Display results
-                st.markdown("### 🤖 DilBot's Conversation:") # New title for conversation output
+                # Display results with new chat bubble styling
+                st.markdown("<h3 class='chat-title'>🤖 DilBot's Conversation:</h3>", unsafe_allow_html=True)
                 with st.container(border=True): # Container for the conversation output
-                    # User's input presented in a div
-                    st.markdown(f"<div class='user-message'>**You:** {final_input}</div>", unsafe_allow_html=True)
+                    # User's input presented in a chat bubble
+                    st.markdown(f"<div class='user-message-container'><div class='user-message'>**You:** {final_input}</div></div>", unsafe_allow_html=True)
                     st.success(f"**Emotion Detected:** {emotion.capitalize()} ({round(score*100)}% confidence)")
 
                     if is_crisis(final_input):
                         st.error("🚨 Crisis detected! Please reach out to a mental health professional immediately. "
-                                 "You are not alone. Consider contacting a helpline like the National Suicide Prevention Lifeline (988 in the US) or a local emergency service.") # Enhanced crisis message
+                                 "You are not alone. Consider contacting a helpline like the National Suicide Prevention Lifeline (988 in the US) or a local emergency service.")
 
                     if current_quotes:
                         model = SentenceTransformer("all-MiniLM-L6-v2")
@@ -1480,25 +1562,46 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
                         selected_quote = current_quotes[best_match]
                         st.info(f"💭 **Quote for you:** *{selected_quote}*")
 
-                    # DilBot's response presented in a blockquote with custom styling
-                    st.markdown("### 🤖 DilBot's Response:")
-                    st.markdown(f"> {response}") # Using your existing markdown blockquote
+                    # DilBot's response presented in a chat bubble
+                    st.markdown(f"<div class='bot-message-container'><div class='bot-message'>**DilBot:** {response}</div></div>", unsafe_allow_html=True)
 
                     speak(response, username)
                     st.session_state.transcribed_text = ""
-    
+            
+            # Add a visual separator after each conversation turn (optional)
+            st.markdown("<div class='chat-separator'></div>", unsafe_allow_html=True)
+
+
     # User's personal dashboard
     st.markdown("---")
     st.header("📊 Your Personal Dashboard")
     
-    # Load user's journal
+    # Load user's journal (ORIGINAL LOGIC - NO CHANGE)
     journal_data = load_user_journal(username)
     
     if journal_data:
-        # Mood tracker
-        st.subheader("📈 Your Daily Mood Tracker")
+        # Statistics
+        st.subheader("📈 Your Emotional Statistics") # Moved statistics to the top of dashboard for prominence
         with st.container(border=True):
-            # Prepare data for chart
+            col1, col2, col3 = st.columns(3)
+            with col1:
+                st.metric("Total Conversations", len(journal_data))
+            with col2:
+                emotions = [entry['emotion'] for entry in journal_data]
+                most_common = max(set(emotions), key=emotions.count) if emotions else "None"
+                st.metric("Most Common Emotion", most_common.capitalize())
+            with col3:
+                if journal_data:
+                    avg_confidence = sum(entry['confidence'] for entry in journal_data) / len(journal_data)
+                    st.metric("Avg. Confidence", f"{avg_confidence:.1f}%")
+                else:
+                    st.metric("Avg. Confidence", "N/A") # Handle case with no journal data for avg. confidence
+
+
+        # Mood tracker
+        st.subheader("📊 Your Daily Mood Tracker")
+        with st.container(border=True): # Wrap chart in a container
+            # Prepare data for chart (ORIGINAL LOGIC - NO CHANGE)
             df_data = []
             for entry in journal_data:
                 df_data.append({
@@ -1507,18 +1610,24 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
                 "confidence": entry["confidence"]
                 })
             if df_data:
-                chart = alt.Chart(alt.Data(values=df_data)).mark_bar().encode(
-                x=alt.X('date:N', title='Date'),
+                # Use pandas DataFrame for better Altair integration
+                import pandas as pd
+                df_chart = pd.DataFrame(df_data)
+                
+                chart = alt.Chart(df_chart).mark_bar().encode(
+                x=alt.X('date:N', title='Date', sort=None), # Sort by date ensures correct order
                 y=alt.Y('count():Q', title='Frequency'),
-                color=alt.Color('emotion:N', title='Emotion'),
+                color=alt.Color('emotion:N', title='Emotion', scale=alt.Scale(range=['#4CAF50', '#FFC107', '#E74C3C', '#3498DB', '#9B59B6', '#1ABC9C'])), # Custom colors
                 tooltip=['date:N', 'emotion:N', 'count():Q']
                 ).properties(
-                    width=600,
-                    height=300,
+                    # width=600, # Use use_container_width instead
+                    height=350, # Slightly increased height
                     title="Your Emotional Journey Over Time"
                 ).interactive() # Make chart interactive for zoom/pan
                 st.altair_chart(chart, use_container_width=True)
-        
+            else:
+                st.info("No emotional data to display yet. Start interacting with DilBot!")
+
         # Recent conversations
         st.subheader("💬 Recent Conversations")
         recent_entries = journal_data[-5:] if len(journal_data) >= 5 else journal_data
@@ -1526,31 +1635,17 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
         with st.container(border=True): # Wrap recent conversations in a container
             if recent_entries:
                 for i, entry in enumerate(reversed(recent_entries)):
-                    with st.expander(f"📅 {entry['date']} - {entry['emotion'].capitalize()} ({entry['confidence']}%)"):
+                    with st.expander(f"📅 {entry['date']} - {entry['emotion'].capitalize()} ({round(entry['confidence'] * 100)}%)"): # Round confidence for display
                         st.markdown(f"**You said:** {entry['user_input']}")
                         st.markdown(f"**DilBot replied:** {entry['response']}")
             else:
                 st.info("No recent conversations yet. Start talking to DilBot!")
-        
-        # Statistics
-        st.subheader("📊 Your Emotional Statistics")
-        col1, col2, col3 = st.columns(3)
-
-        with col1:
-            st.metric("Total Conversations", len(journal_data))
-        with col2:
-            emotions = [entry['emotion'] for entry in journal_data]
-            most_common = max(set(emotions), key=emotions.count) if emotions else "None"
-            st.metric("Most Common Emotion", most_common.capitalize())
-        with col3:
-            if journal_data:
-                avg_confidence = sum(entry['confidence'] for entry in journal_data) / len(journal_data)
-                st.metric("Avg. Confidence", f"{avg_confidence:.1f}%")
+            
     else:
-        st.info("🌟 Start your first conversation with DilBot to see your personal dashboard!")
+        st.info("🌟 Start your first conversation with DilBot to see your personal dashboard and insights!")
 
     st.markdown("---")
-    st.caption("Built by Members of CSG Hackathon Team | Your data is stored privately and securely")
+    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():