fix: refine scroll logic, mobile layout, and AI formatting tone

frontend/src/App.tsx

@@ -31,10 +31,17 @@ const App: React.FC = () => {
         setVerse(VERSES[dayOfYear % VERSES.length]);
     }, []);
 
-    // Automatic scroll removed as per user request for manual control
-    // useEffect(() => {
-    //     chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    // }, [messages]);
+    const isFirstRender = useRef(true);
+
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        if (messages.length > 0) {
+            chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages]);
 
     const handleSend = async () => {
         if (!input.trim() || isLoading) return;
@@ -70,27 +77,27 @@ const App: React.FC = () => {
     };
 
     return (
-        <div className="h-screen bg-[#002B22] flex flex-col items-center justify-center p-0 md:p-4 font-outfit text-white overflow-hidden relative">
+        <div className="h-[100dvh] bg-[#002B22] flex flex-col items-center justify-center p-0 md:p-4 font-outfit text-white overflow-hidden relative">
             {/* Dynamic Background Elements */}
             <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[#007055]/20 rounded-full blur-[150px] animate-pulse pointer-events-none"></div>
             <div className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-[#FDFBD4]/5 rounded-full blur-[150px] pointer-events-none"></div>
 
-            <div className="w-full max-w-5xl h-screen md:h-[92vh] flex flex-col md:flex-row relative z-10 bg-black/20 backdrop-blur-2xl md:rounded-[2.5rem] overflow-hidden border border-white/5 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
+            <div className="w-full max-w-5xl h-full md:h-[92vh] flex flex-col md:flex-row relative z-10 bg-black/20 backdrop-blur-2xl md:rounded-[2.5rem] overflow-hidden border border-white/5 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
 
                 {/* Modern Sidebar-style Header (Desktop) / Top Header (Mobile) */}
-                <aside className="w-full md:w-80 bg-[#00362B]/80 p-6 md:p-8 flex flex-col items-center md:items-start space-y-6 md:space-y-8 border-b md:border-b-0 md:border-r border-white/5 shrink-0">
-                    <div className="relative group">
-                        <div className="absolute -inset-1 bg-gradient-to-tr from-[#FDFBD4] to-[#007055] rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
-                        <div className="relative w-20 h-20 md:w-32 md:h-32 rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl transform transition-transform group-hover:scale-105 duration-500">
+                <aside className="w-full md:w-80 bg-[#00362B]/80 p-4 md:p-8 flex flex-row md:flex-col items-center md:items-start space-x-4 md:space-x-0 md:space-y-8 border-b md:border-b-0 md:border-r border-white/5 shrink-0">
+                    <div className="relative group shrink-0">
+                        <div className="absolute -inset-1 bg-gradient-to-tr from-[#FDFBD4] to-[#007055] rounded-2xl md:rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+                        <div className="relative w-12 h-12 md:w-32 md:h-32 rounded-xl md:rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl transform transition-transform group-hover:scale-105 duration-500">
                             <img src="/assets/logo.jpg" alt="CLCC Logo" className="w-full h-full object-cover" />
                         </div>
                     </div>
-                    <div className="text-center md:text-left space-y-2">
-                        <h1 className="text-3xl md:text-4xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white via-[#FDFBD4] to-[#007055]">
+                    <div className="flex-1 md:flex-none text-left space-y-1 md:space-y-2">
+                        <h1 className="text-xl md:text-4xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white via-[#FDFBD4] to-[#007055]">
                             Theo AI
                         </h1>
-                        <div className="inline-flex items-center px-3 py-1 bg-[#FDFBD4]/10 rounded-full border border-[#FDFBD4]/20">
-                            <span className="text-[9px] md:text-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest whitespace-nowrap">
+                        <div className="inline-flex items-center px-2 py-0.5 md:px-3 md:py-1 bg-[#FDFBD4]/10 rounded-full border border-[#FDFBD4]/20">
+                            <span className="text-[8px] md:text-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest whitespace-nowrap">
                                 CLCC - TECHDISCIPLES
                             </span>
                         </div>
@@ -148,6 +155,7 @@ const App: React.FC = () => {
                                         }`}>
                                         <div className={`markdown-content prose prose-invert prose-sm max-w-none 
                                             prose-p:leading-relaxed prose-headings:text-[#FDFBD4] prose-strong:text-[#FDFBD4]
+                                            prose-li:text-white/90 prose-ul:my-2
                                             ${msg.role === 'assistant' ? 'selection:bg-[#FDFBD4]/30' : 'selection:bg-white/20'}
                                         `}>
                                             <ReactMarkdown>{msg.content}</ReactMarkdown>

main.py

@@ -65,21 +65,23 @@ search = DuckDuckGoSearchRun()
 # =====================================================
 # PROMPT TEMPLATE
 # =====================================================
-SYSTEM_PROMPT = """You are Theo — a warm, spiritual, and insightful Christian AI assistant created by TechDisciples CLCC. 
-Your purpose is to offer Biblical guidance, Christian reflections, and empathetic counsel.
+SYSTEM_PROMPT = """You are Theo — a warm, friendly, and deeply insightful Christian companion created by TechDisciples CLCC. 
+
+TONE & STYLE:
+1. CHATTY & WARM: Speak like a loving friend or a caring elder. Use a conversational, "chatty" tone that feels personal and welcoming.
+2. PARAGRAPHS: NEVER send a single wall of text. Break your thoughts into 2-4 short, readable paragraphs. Each point should have its own breathing space.
+3. NIGERIAN HEARTBEAT: Use simple, relatable English with a gentle Nigerian inflection. Be clear and accessible to everyone.
 
 CORE GUIDELINES:
-1. BIBLICAL ONLY: Always relate your responses to scripture or Christian principles. For any personal or sensitive issues (including distress or suicidal thoughts), offer comfort and hope using the Holy Bible ONLY.
-2. NIGERIAN PERSPECTIVE: Speak with a Nigerian heartbeat, using simple, clear, and relatable English that is easy for everyone to understand.
-3. EMPATHY & WISDOM: Be compassionate, non-judgmental, and wise — like a trusted pastor or Christian counsellor.
-4. FORMATTING: Use clean Markdown (bolding, lists, tables) to make your replies easy to read.
-5. UNKNOWN TOPICS: If you encounter a question you cannot answer with your spiritual knowledge or if it's a factual query outside your training, you MUST conduct a web search to provide accurate information, while still maintaining your Christian tone.
+1. BIBLICAL FOCUS: Root your wisdom and encouragement in the Holy Bible. Use scripture to offer hope, especially for those in distress.
+2. FORMATTING: Use Markdown (bolding for emphasis, short lists if needed) to keep your replies professional yet approachable. 
+3. UNKNOWN TOPICS: If you lack specific knowledge, use your web search tool to find facts, then wrap that information in your warm Christian perspective.
 
-AI Name: Theo
-Provider: TechDisciples CLCC
-Logo: [CLCC logo](https://raw.githubusercontent.com/Alasela/Theo/main/assests/logo.png) (Internal reference for link)
+Identity: Theo
+Creators: TechDisciples CLCC
+Logo: [CLCC logo](https://raw.githubusercontent.com/Alasela/Theo/main/assests/logo.png)
 
-Remember: Your goal is to lead people to the truth of God's word with love and clarity."""
+Remember: Be a beacon of God's love. Keep your messages structured with clear paragraphs so they are easy to read in a chat window."""
 
 # =====================================================
 # MEMORY