Update src/streamlit_app.py

src/streamlit_app.py

@@ -18,78 +18,90 @@ st.set_page_config(page_title="FoodHub Support", page_icon="🍕", layout="cente
 st.markdown(
     """
     <style>
-        /* Keep app compact and centered */
         .main { max-width: 980px; margin: 0 auto; }
 
-        /* Banner */
         .foodhub-card {
             background: linear-gradient(135deg, #fff3e0, #ffe0cc);
-            padding: 12px 14px;
+            padding: 12px 16px;
             border-radius: 16px;
             border: 1px solid #f5c28c;
             margin-bottom: 10px;
         }
         .foodhub-header-title {
-            margin-bottom: 2px;
+            margin: 0 0 2px 0;
             color: #e65c2b;
-            font-size: 20px;
+            font-size: 22px;
             font-weight: 800;
             line-height: 1.1;
         }
-        .foodhub-header-subtitle { margin: 0; color: #444; font-size: 12px; line-height: 1.25; }
+        .foodhub-header-subtitle {
+            margin: 0;
+            color: #444;
+            font-size: 13px;
+            line-height: 1.25;
+        }
         .foodhub-assistant-pill {
             display: inline-flex; align-items: center; gap: 6px;
             background: #ffffff; border-radius: 999px;
-            padding: 4px 8px; font-size: 10.5px; color: #555;
+            padding: 4px 8px;
+            font-size: 11px; color: #555;
             border: 1px solid #ffd3a3; margin-top: 6px;
         }
         .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
 
         .quick-actions-title {
-            font-size: 12px;
+            font-size: 13px;
             font-weight: 700;
             color: #555;
             margin-top: 6px;
             margin-bottom: 6px;
         }
 
-        /* Make Streamlit buttons compact so 4 columns fit nicely */
+        /* Make Streamlit buttons smaller */
         div.stButton > button {
-            padding: 0.25rem 0.35rem !important;
-            font-size: 0.80rem !important;
-            height: 34px !important;
+            padding: 0.45rem 0.6rem !important;
+            font-size: 0.90rem !important;
             border-radius: 12px !important;
+            height: 44px !important;
             white-space: nowrap !important;
         }
 
-        /* Chat scroll container */
-        .chat-shell {
-            border: 1px solid rgba(0,0,0,0.10);
-            border-radius: 14px;
-            background: #ffffff;
-            padding: 8px;
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
-        .chat-window {
-            max-height: 280px;  /* adjust if you want taller/shorter */
+        /* Scrollable chat container */
+        .chat-scroll{
+            height: 280px;               /* adjust if you want more/less */
             overflow-y: auto;
-            padding: 2px 6px;
+            border: 1px solid #e6e6e6;
+            border-radius: 16px;
+            padding: 10px 12px;
+            background: #fff;
+            margin-top: 6px;
+            margin-bottom: 10px;
         }
 
-        /* Bubbles */
         .bot-bubble {
-            background: #eef7f2; border-radius: 12px;
-            padding: 10px 12px; font-size: 14px;
-            margin-top: 6px; line-height: 1.35;
+            background: #eef7f2;
+            border-radius: 12px;
+            padding: 10px 12px;
+            font-size: 14px;
+            margin-top: 8px;
+            line-height: 1.35;
         }
         .user-bubble {
-            background: #ffffff; border-radius: 12px;
-            padding: 10px 12px; font-size: 14px;
-            margin-top: 6px; line-height: 1.35;
-            border: 1px solid rgba(0,0,0,0.06);
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 10px 12px;
+            font-size: 14px;
+            margin-top: 8px;
+            line-height: 1.35;
+            border: 1px solid #f0f0f0;
+        }
+
+        .user-label, .bot-label {
+            font-size: 12px;
+            color: #777;
+            margin-top: 10px;
+            margin-bottom: 2px;
         }
-        .user-label, .bot-label { font-size: 12px; color: #777; margin-top: 10px; margin-bottom: 2px; }
 
         code {
             background: rgba(0,0,0,0.06);
@@ -97,12 +109,6 @@ st.markdown(
             border-radius: 8px;
             font-size: 13px;
         }
-
-        /* Mobile-friendly: reduce chat height a bit */
-        @media (max-width: 720px) {
-            .chat-window { max-height: 240px; }
-            div.stButton > button { font-size: 0.76rem !important; height: 32px !important; }
-        }
     </style>
     """,
     unsafe_allow_html=True,
@@ -116,7 +122,7 @@ ASK_ORDER_ID_LINE = "Please share your **Order ID** (for example: `O12488`) so I
 ORDER_ID_REGEX = r"\b[oO]\d{3,}\b"
 
 def format_for_bubble(text: str) -> str:
-    """Safely render markdown-like **bold** and `code` inside HTML bubbles."""
+    """Safely render markdown-like **bold** and `code` inside HTML chat bubbles."""
     t = html.escape(str(text or ""))
     t = re.sub(r"\*\*(.+?)\*\*", r"<b>\1</b>", t)       # **bold**
     t = re.sub(r"`([^`]+)`", r"<code>\1</code>", t)     # `code`
@@ -129,21 +135,27 @@ def extract_order_id(text: str) -> Optional[str]:
 
 def needs_order_id(message: str) -> bool:
     t = (message or "").lower().strip()
+
     greetings = {"hi", "hello", "hey", "good morning", "good afternoon", "good evening"}
     thanks = {"thanks", "thank you", "thx", "thankyou"}
     if t in greetings or t in thanks:
         return False
+
     if extract_order_id(message):
         return False
 
     phrases = [
         "where is my order", "track my order", "track order", "order status", "delivery status",
-        "status of my order", "when will my order arrive", "eta",
+        "status of my order", "when will my order arrive", "when will it arrive", "eta",
         "order delayed", "delay in delivery", "order not delivered", "late delivery",
-        "order details", "show me the details",
+        "order details", "show me the details", "details of my order", "details for my order",
+        "what is in my order", "what's in my order", "items in my order", "my order items",
+        "what did i order", "what have i ordered",
         "cancel my order", "cancel order",
         "refund", "payment issue", "payment problem", "payment failed", "charged", "transaction",
+        "money back", "return my money",
         "modify my order", "change my order", "postpone my order", "deliver at different address",
+        "change address", "different address", "deliver to", "reschedule delivery",
         "order never arrived", "wrong or missing items", "food damage", "quality issue",
         "food safety", "delivery safety", "charged more than once",
         "another order issue"
@@ -152,8 +164,8 @@ def needs_order_id(message: str) -> bool:
         return True
 
     if "order" in t and any(k in t for k in [
-        "status", "track", "details", "cancel", "refund", "payment", "where", "when",
-        "modify", "change", "postpone", "address", "deliver",
+        "status", "track", "details", "item", "cancel", "refund", "payment", "where", "when",
+        "modify", "change", "postpone", "address", "deliver", "reschedule",
         "missing", "wrong", "quality", "damage", "safety", "arrived"
     ]):
         return True
@@ -193,6 +205,8 @@ def _is_escalation_intent(message: str) -> bool:
         "multiple follow-ups",
         "i have followed multiple times",
         "i have followed up multiple times",
+        "i have followed multiple times about my order",
+        "i have followed up multiple times about my order",
         "i want an update on my refund",
         "refund update",
         "update on my refund",
@@ -259,17 +273,23 @@ QUICK_BUTTON_EXACT_REPLIES = {
     ),
 }
 
-# ================== DB CONFIG (ALIGNED WITH YOUR NOTEBOOK) ==================
+# ================== DB CONFIG ==================
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 CLEAN_DB_PATH = os.path.join(BASE_DIR, "orders_clean.db")
 
+# Startup sanity check
 try:
     with sqlite3.connect(CLEAN_DB_PATH) as _conn:
         _cur = _conn.cursor()
         _cur.execute("SELECT name FROM sqlite_master WHERE type='table';")
         _tables = [r[0] for r in _cur.fetchall()]
     if "orders_clean" not in _tables:
-        st.error("Table 'orders_clean' not found in orders_clean.db (must be next to app.py).")
+        st.error(
+            f"Connected to {CLEAN_DB_PATH!r}, but table 'orders_clean' was not found.\n\n"
+            "Ensure your notebook saved df_eng like:\n"
+            "df_eng.to_sql('orders_clean', conn, if_exists='replace', index=False)\n\n"
+            "and that orders_clean.db is present next to app.py."
+        )
         st.stop()
 except Exception as e:
     st.error(f"Could not open database at {CLEAN_DB_PATH!r}: {e}")
@@ -306,37 +326,55 @@ Columns:
 - is_canceled (INTEGER 0/1)
 """
 
+# =====================================================================
+# SQL SAFETY FIREWALL
+# =====================================================================
 def is_safe_sql(sql: str) -> bool:
     if not isinstance(sql, str):
         return False
     s = sql.lower().strip()
+
     if not s.startswith("select"):
         return False
+
     if re.search(r";\s*\S", s):
         return False
+
     forbidden = ["drop", "delete", "update", "insert", "alter", "truncate", "create"]
     if any(k in s for k in forbidden):
         return False
+
     if any(tok in s for tok in ["--", "/*", "*/"]):
         return False
+
     return True
 
+# =====================================================================
+# run_sql_query()
+# =====================================================================
 def run_sql_query(sql: str) -> pd.DataFrame:
     if not isinstance(sql, str):
         return pd.DataFrame([{"message": "🚫 Invalid SQL type (expected string)."}])
     sql = sql.strip()
+
     if not is_safe_sql(sql):
         return pd.DataFrame([{"message": "🚫 Blocked unsafe or unsupported SQL."}])
+
     try:
         with sqlite3.connect(CLEAN_DB_PATH) as conn:
             df = pd.read_sql_query(sql, conn)
+
         for col in ["order_time", "preparing_eta", "prepared_time", "delivery_eta", "delivery_time"]:
             if col in df.columns:
                 df[col] = pd.to_datetime(df[col], errors="coerce")
+
         return df
     except Exception as e:
         return pd.DataFrame([{"message": f"⚠️ SQL execution error: {str(e)}"}])
 
+# =====================================================================
+# llm_to_sql()
+# =====================================================================
 def llm_to_sql(user_message: str) -> str:
     msg = user_message or ""
     text = msg.lower().strip()
@@ -351,7 +389,9 @@ def llm_to_sql(user_message: str) -> str:
 
     system_prompt = f"""
 You are an expert SQLite assistant for a food delivery company.
+
 You ONLY generate valid SQLite SELECT queries using this schema:
+
 {ORDERS_SCHEMA}
 
 RULES:
@@ -364,48 +404,84 @@ RULES:
 - If unsure:
   SELECT 'Unable to answer with available data.' AS message;
 """
+
     response = client.chat.completions.create(
         model="llama-3.3-70b-versatile",
         temperature=0.1,
-        messages=[{"role": "system", "content": system_prompt}, {"role": "user", "content": msg}],
+        messages=[
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": msg},
+        ],
     )
+
     sql = (response.choices[0].message.content or "").strip()
+
     if sql.startswith("```"):
         sql = re.sub(r"^```sql", "", sql, flags=re.IGNORECASE).strip()
         sql = re.sub(r"^```", "", sql).strip()
         sql = sql.replace("```", "").strip()
+
     sql = re.sub(r"\bfrom\s+\w+\b", "FROM orders_clean", sql, flags=re.IGNORECASE)
+
     sql = re.sub(
         r"where\s+order_id\s*=\s*'([^']+)'",
         r"WHERE LOWER(order_id) = LOWER('\1')",
         sql,
         flags=re.IGNORECASE,
     )
+
     return sql if is_safe_sql(sql) else "SELECT 'Unable to answer safely.' AS message;"
 
+# =====================================================================
+# analyze_sentiment_and_escalation()
+# =====================================================================
 def analyze_sentiment_and_escalation(user_message: str) -> dict:
     user_message = "" if user_message is None else str(user_message).strip()
+
     system_prompt = """
-Return ONLY JSON:
-{"sentiment":"calm"|"neutral"|"frustrated"|"angry","escalate":true|false}
+You are a classifier for a food delivery chatbot.
+
+Return ONLY JSON (no extra text):
+{
+  "sentiment": "calm" | "neutral" | "frustrated" | "angry",
+  "escalate": true or false
+}
+
+Escalate=true when user is frustrated/angry, mentions repeated attempts, or demands urgent help.
+If uncertain: {"sentiment":"neutral","escalate":false}
 """
+
     response = client.chat.completions.create(
         model="llama-3.3-70b-versatile",
         temperature=0.0,
-        messages=[{"role": "system", "content": system_prompt}, {"role": "user", "content": user_message}],
+        messages=[
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_message},
+        ],
     )
+
     raw = (response.choices[0].message.content or "").strip()
     try:
         info = json.loads(raw)
         if not isinstance(info, dict):
-            raise ValueError
-        return {"sentiment": str(info.get("sentiment", "neutral")).strip().lower(), "escalate": bool(info.get("escalate", False))}
+            raise ValueError("Not dict")
+        if "sentiment" not in info or "escalate" not in info:
+            raise ValueError("Missing keys")
+        info["sentiment"] = str(info["sentiment"]).strip().lower()
+        info["escalate"] = bool(info["escalate"])
+        if info["sentiment"] not in {"calm", "neutral", "frustrated", "angry"}:
+            raise ValueError("Bad label")
+        return info
     except Exception:
         return {"sentiment": "neutral", "escalate": False}
 
+# =====================================================================
+# create_ticket()
+# =====================================================================
 def create_ticket(user_message: str, sentiment: str, ticket_type: str = "general", order_id: Optional[str] = None) -> str:
     ticket_id = "TKT-" + uuid.uuid4().hex[:8].upper()
     created_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
     with sqlite3.connect(CLEAN_DB_PATH) as conn:
         cur = conn.cursor()
         cur.execute("""
@@ -424,8 +500,12 @@ def create_ticket(user_message: str, sentiment: str, ticket_type: str = "general
             VALUES (?, ?, ?, ?, ?, 'Open', ?);
         """, (ticket_id, ticket_type, sentiment, user_message, order_id, created_at))
         conn.commit()
+
     return ticket_id
 
+# =====================================================================
+# sql_result_to_response()
+# =====================================================================
 def sql_result_to_response(user_message: str, df: pd.DataFrame, max_rows_to_list: int = 5) -> str:
     if isinstance(df, pd.DataFrame) and "message" in df.columns and len(df) == 1:
         msg = str(df.iloc[0]["message"])
@@ -434,32 +514,72 @@ def sql_result_to_response(user_message: str, df: pd.DataFrame, max_rows_to_list
         return msg
 
     if df.empty:
-        return f"{WELCOME_LINE}\nI couldn’t find a matching order.\n{ASK_ORDER_ID_LINE}"
+        return (
+            f"{WELCOME_LINE}\n"
+            "I couldn’t find a matching order for the details provided.\n"
+            f"{ASK_ORDER_ID_LINE}"
+        )
 
     df_for_llm = df.head(max_rows_to_list).copy()
     result_data = df_for_llm.to_dict(orient="records")
 
     system_prompt = f"""
 You are a polite and professional customer support chatbot for FoodHub.
-Always start with EXACTLY: "{WELCOME_LINE}"
-Use ONLY the data given.
-End warmly.
+
+Always start with EXACTLY:
+"{WELCOME_LINE}"
+
+VERY IMPORTANT POLICY:
+- If ANY matching record exists in the data I give you → The order is CONFIRMED.
+- NEVER tell the user to re-check their order ID if matching rows exist.
+- NEVER say "order not found", "unable to locate order", or similar messages
+  when there is at least one matching record.
+- Instead, confidently acknowledge the order and use available data.
+
+CRITICAL RULES:
+- NEVER invent or guess items, ETA, status, payment, or any order details.
+- Use ONLY the data provided in "Matching order data".
+- If information is missing, say it's unavailable in tracking.
+
+DELIVERED TEMPLATE (use when order_status_std indicates delivered OR is_delivered == 1):
+- Use this meaning and style:
+  "I've checked on your order, and I'm happy to inform you that it has been delivered ✅. You should have received your order.
+   If you have any further concerns or issues, please let me know. If you need anything else, I’m here to help! 💛"
+
+If NOT delivered:
+- Provide the latest known status.
+- If delivery_time is missing but delivery_eta exists: share ETA.
+- If both delivery_time and delivery_eta missing: apologize for limited tracking.
+
+Keep it concise and helpful.
 """
-    content = f"User question: {user_message}\n\nMatching order data:\n{result_data}"
+
+    content = f"User question: {user_message}\n\nMatching order data (up to {max_rows_to_list} rows):\n{result_data}"
+
     resp = client.chat.completions.create(
         model="llama-3.3-70b-versatile",
         temperature=0.2,
-        messages=[{"role": "system", "content": system_prompt}, {"role": "user", "content": content}],
+        messages=[
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": content},
+        ],
     )
     return (resp.choices[0].message.content or "").strip()
 
+# =====================================================================
+# answer_user_question()
+# =====================================================================
 def answer_user_question(user_message: str) -> str:
     if needs_order_id(user_message) and not extract_order_id(user_message):
         return f"{WELCOME_LINE}\n{ASK_ORDER_ID_LINE}"
+
     sql = llm_to_sql(user_message)
     df = run_sql_query(sql)
-    return sql_result_to_response(user_message, df)
+    return sql_result_to_response(user_message, df, max_rows_to_list=5)
 
+# =====================================================================
+# chatbot_response() – main orchestration
+# =====================================================================
 def chatbot_response(user_message: str) -> str:
     text = (user_message or "").strip()
     t = text.lower().strip()
@@ -472,17 +592,33 @@ def chatbot_response(user_message: str) -> str:
         return f"{WELCOME_LINE}\n{ASK_ORDER_ID_LINE}"
 
     if any(w in t for w in thanks_words):
-        return "You’re most welcome! 💛\nIf you need help with an order, please share your Order ID (like `O12488`)."
+        return (
+            "You’re most welcome! 💛\n"
+            "If you need help with an order, please share your Order ID (like `O12488`)."
+        )
 
     if is_third_party_order_request(text):
-        return f"{WELCOME_LINE}\n😔 I can’t help with someone else’s order details for privacy reasons.\n\nPlease ask them to contact FoodHub Support directly. 💛"
+        return (
+            f"{WELCOME_LINE}\n"
+            "😔 I can’t help with someone else’s order details for privacy reasons.\n\n"
+            "Please ask them to contact FoodHub Support directly, or have them share their **Order ID** themselves. 💛"
+        )
 
     if "hack" in t or "hacker" in t or "all orders" in t or "dump" in t or "database" in t:
-        return f"{WELCOME_LINE}\n😔 Sorry, I can’t assist with that.\nFor privacy and security reasons, I can only help with your own order using a valid Order ID. 💛"
+        return (
+            f"{WELCOME_LINE}\n"
+            "😔 Sorry, I can’t assist with that.\n"
+            "For privacy and security reasons, I can only help with your own order using a valid Order ID. 💛"
+        )
 
     if _is_escalation_intent(text):
         senti = analyze_sentiment_and_escalation(text)
-        ticket_id = create_ticket(text, senti.get("sentiment", "frustrated"), "escalation", order_id)
+        ticket_id = create_ticket(
+            user_message=text,
+            sentiment=senti.get("sentiment", "frustrated"),
+            ticket_type="escalation",
+            order_id=order_id
+        )
         return (
             f"{WELCOME_LINE}\n"
             "💛 I’m really sorry you’ve had to follow up multiple times.\n\n"
@@ -491,6 +627,7 @@ def chatbot_response(user_message: str) -> str:
             f"{ASK_ORDER_ID_LINE if not order_id else 'If you need anything else, I’m here to help! 💛'}"
         )
 
+    # Payment / Refund intent (your desired response 2)
     if _is_payment_refund_intent(text) and not order_id:
         return (
             "💛 I’m sorry you’re facing an issue with the payment or refund. I’ll help you with this right away.\n\n"
@@ -499,6 +636,7 @@ def chatbot_response(user_message: str) -> str:
             "If the payment was received, the refund will be processed within 48 hours."
         )
 
+    # Cancel intent (your desired wording)
     if _is_cancel_intent(text) and not order_id:
         return (
             "💛 I’m sorry to hear you’d like to cancel your order — I completely understand and I’m here to help. "
@@ -514,10 +652,13 @@ def chatbot_response(user_message: str) -> str:
 # ================== SESSION STATE ==================
 if "welcome_shown" not in st.session_state:
     st.session_state["welcome_shown"] = False
+
 if "messages" not in st.session_state:
-    st.session_state["messages"] = []
+    st.session_state["messages"] = []  # [{"role":"user"/"assistant","content":"..."}]
+
 if "pending_message" not in st.session_state:
     st.session_state["pending_message"] = None
+
 if "pending_quick_exact" not in st.session_state:
     st.session_state["pending_quick_exact"] = None
 
@@ -525,7 +666,7 @@ if "pending_quick_exact" not in st.session_state:
 st.markdown(
     """
     <div class="foodhub-card">
-        <div style="display:flex; align-items:flex-start; gap:10px;">
+        <div style="display:flex; align-items:flex-start; gap:12px;">
             <div style="font-size:28px; line-height:1;">🍕</div>
             <div style="flex:1;">
                 <div class="foodhub-header-title">FoodHub AI Support</div>
@@ -548,79 +689,58 @@ if not st.session_state["welcome_shown"]:
     st.caption("Because great food deserves great service 💛")
     st.session_state["welcome_shown"] = True
 
-# ================== QUICK BUTTONS (3 x 4 GRID) ==================
+# ================== QUICK BUTTONS (3 x 4 with FULL TEXT) ==================
 st.markdown('<div class="quick-actions-title">Quick help</div>', unsafe_allow_html=True)
 
-r1 = st.columns(4)
-if r1[0].button("📍 Track", use_container_width=True):
+row1 = st.columns(4)
+if row1[0].button("📍 Track order", use_container_width=True):
     st.session_state["pending_message"] = "Where is my order?"
-if r1[1].button("💳 Payment", use_container_width=True):
+if row1[1].button("💳 Payment status", use_container_width=True):
     st.session_state["pending_message"] = "I have an issue with my payment / refund."
-if r1[2].button("❌ Cancel", use_container_width=True):
+if row1[2].button("❌ Cancel order", use_container_width=True):
     st.session_state["pending_message"] = "I want to cancel my order."
-if r1[3].button("🧾 Details", use_container_width=True):
+if row1[3].button("🧾 Order details", use_container_width=True):
     st.session_state["pending_message"] = "Show me the details for my order."
 
-r2 = st.columns(4)
-if r2[0].button("📦 Not arrived", use_container_width=True):
+row2 = st.columns(4)
+if row2[0].button("📦 Order not arrived", use_container_width=True):
     st.session_state["pending_quick_exact"] = "Order never arrived."
-if r2[1].button("🧾 Missing", use_container_width=True):
+if row2[1].button("🧾 Missing items", use_container_width=True):
     st.session_state["pending_quick_exact"] = "Wrong or missing items."
-if r2[2].button("🥡 Damage", use_container_width=True):
+if row2[2].button("🥡 Damaged order", use_container_width=True):
     st.session_state["pending_quick_exact"] = "Food damage or quality issue."
-if r2[3].button("🛡️ Safety", use_container_width=True):
+if row2[3].button("🛡️ Food safety", use_container_width=True):
     st.session_state["pending_quick_exact"] = "Delivery or food safety issue."
 
-r3 = st.columns(4)
-if r3[0].button("💳 Charged 2x", use_container_width=True):
+row3 = st.columns(4)
+if row3[0].button("💳 Duplicate payment", use_container_width=True):
     st.session_state["pending_quick_exact"] = "My card was charged more than once."
-if r3[1].button("🔁 Refund", use_container_width=True):
+if row3[1].button("🔁 Refund status", use_container_width=True):
     st.session_state["pending_quick_exact"] = "I want an update on my refund."
-if r3[2].button("🧑‍💻 Follow-ups", use_container_width=True):
-    st.session_state["pending_message"] = "I have followed multiple times about my order."
-if r3[3].button("❓ Other", use_container_width=True):
+if row3[2].button("❓ Another order issue", use_container_width=True):
     st.session_state["pending_quick_exact"] = "Another order issue."
+if row3[3].button("🧑‍💻 Followed up many times", use_container_width=True):
+    st.session_state["pending_message"] = "I have followed multiple times about my order."
 
 st.markdown("---")
 
-# ================== CHAT HISTORY (SCROLLABLE CONTAINER ABOVE INPUT) ==================
-def render_chat_history_inside_scroll():
-    parts = []
+# ================== CHAT HISTORY (scrollable container) ==================
+def render_chat_history():
     for m in st.session_state["messages"]:
         if m["role"] == "user":
-            parts.append(
-                f"<div class='user-label'>You</div>"
-                f"<div class='user-bubble'>{format_for_bubble('💬 ' + m['content'])}</div>"
-            )
+            user_html = format_for_bubble(f"💬 {m['content']}")
+            st.markdown('<div class="user-label">You</div>', unsafe_allow_html=True)
+            st.markdown(f"<div class='user-bubble'>{user_html}</div>", unsafe_allow_html=True)
         else:
-            parts.append(
-                f"<div class='bot-label'>FoodHub Assistant</div>"
-                f"<div class='bot-bubble'>{format_for_bubble('🤖 ' + m['content'])}</div>"
-            )
-
-    # auto-scroll to bottom (best-effort)
-    parts.append(
-        """
-        <script>
-          const shells = window.parent.document.querySelectorAll('.chat-window');
-          if (shells && shells.length) {
-            const w = shells[shells.length - 1];
-            w.scrollTop = w.scrollHeight;
-          }
-        </script>
-        """
-    )
+            bot_html = format_for_bubble(f"🤖 {m['content']}")
+            st.markdown('<div class="bot-label">FoodHub Assistant</div>', unsafe_allow_html=True)
+            st.markdown(f"<div class='bot-bubble'>{bot_html}</div>", unsafe_allow_html=True)
 
-    st.markdown(
-        f"""
-        <div class="chat-shell">
-            <div class="chat-window">
-                {''.join(parts) if parts else "<div style='color:#777; font-size:12px;'>Start by typing a message or using the quick buttons above.</div>"}
-            </div>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
+# OPEN container (unsafe)
+st.markdown('<div class="chat-scroll">', unsafe_allow_html=True)
+render_chat_history()
+# CLOSE container (unsafe) — fixes </div> showing up
+st.markdown("</div>", unsafe_allow_html=True)
 
 # ================== SEND LOGIC ==================
 def append_user_and_bot(user_text: str, bot_text: str):
@@ -636,7 +756,7 @@ def send_message(user_text: str):
     reply = chatbot_response(user_text)
     st.session_state["messages"].append({"role": "assistant", "content": reply})
 
-# Process quick clicks BEFORE rendering the chat (so user sees result instantly)
+# 1) Quick buttons with EXACT replies
 if st.session_state.get("pending_quick_exact"):
     q = st.session_state["pending_quick_exact"]
     st.session_state["pending_quick_exact"] = None
@@ -644,16 +764,14 @@ if st.session_state.get("pending_quick_exact"):
     append_user_and_bot(q, exact)
     st.rerun()
 
+# 2) Normal quick buttons
 if st.session_state.get("pending_message"):
     pm = st.session_state["pending_message"]
     st.session_state["pending_message"] = None
     send_message(pm)
     st.rerun()
 
-# Render scrollable chat history
-render_chat_history_inside_scroll()
-
-# ================== INPUT (FIXED BELOW CHAT) ==================
+# ================== INPUT (FORM) ==================
 with st.form("chat_form", clear_on_submit=True):
     query = st.text_input(
         "💬 Type your question here:",