style: re-apply branding, dynamic verse, and layout stability fixes

frontend/src/App.tsx

@@ -8,13 +8,29 @@ interface Message {
     content: string;
 }
 
+const VERSES = [
+    { text: "Thy word is a lamp unto my feet, and a light unto my path.", ref: "Psalm 119:105" },
+    { text: "For I know the thoughts that I think toward you, saith the Lord, thoughts of peace, and not of evil.", ref: "Jeremiah 29:11" },
+    { text: "But they that wait upon the Lord shall renew their strength; they shall mount up with wings as eagles.", ref: "Isaiah 40:31" },
+    { text: "Trust in the Lord with all thine heart; and lean not unto thine own understanding.", ref: "Proverbs 3:5" },
+    { text: "I can do all things through Christ which strengtheneth me.", ref: "Philippians 4:13" },
+    { text: "The Lord is my shepherd; I shall not want.", ref: "Psalm 23:1" },
+    { text: "And be not conformed to this world: but be ye transformed by the renewing of your mind.", ref: "Romans 12:2" }
+];
+
 const App: React.FC = () => {
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [sessionId] = useState<string>(() => Math.random().toString(36).substring(7));
+    const [verse, setVerse] = useState(VERSES[0]);
     const chatEndRef = useRef<HTMLDivElement>(null);
 
+    useEffect(() => {
+        const dayOfYear = Math.floor((new Date().getTime() - new Date(new Date().getFullYear(), 0, 0).getTime()) / 86400000);
+        setVerse(VERSES[dayOfYear % VERSES.length]);
+    }, []);
+
     useEffect(() => {
         chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [messages]);
@@ -53,53 +69,63 @@ const App: React.FC = () => {
     };
 
     return (
-        <div className="min-h-screen bg-[#002B22] flex flex-col items-center justify-center p-0 sm:p-6 font-outfit text-white overflow-hidden relative">
+        <div className="min-h-screen bg-[#002B22] flex flex-col items-center justify-center p-0 md:p-4 font-outfit text-white overflow-x-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 sm:h-[92vh] flex flex-col sm:flex-row relative z-10 bg-black/20 backdrop-blur-2xl sm: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-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)]">
 
                 {/* Modern Sidebar-style Header (Desktop) / Top Header (Mobile) */}
-                <aside className="w-full sm:w-80 bg-[#00362B]/80 p-8 flex flex-col items-center sm:items-start space-y-8 border-b sm:border-b-0 sm:border-r border-white/5 shrink-0">
+                <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-24 h-24 sm:w-32 sm:h-32 rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl transform transition-transform group-hover:scale-105 duration-500">
+                        <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">
                             <img src="/assets/logo.jpg" alt="CLCC Logo" className="w-full h-full object-cover" />
                         </div>
                     </div>
                     <div className="text-center sm:text-left space-y-2">
-                        <h1 className="text-4xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white via-[#FDFBD4] to-[#007055]">
+                        <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]">
                             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-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest">
-                                TechDisciples CLCC
+                            <span className="text-[9px] md:text-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest whitespace-nowrap">
+                                CLCC - TECHDISCIPLES
                             </span>
                         </div>
                     </div>
-                    <div className="hidden sm:block flex-1 w-full pt-8">
-                        <p className="text-[#FDFBD4]/40 text-xs leading-relaxed font-light italic">
-                            "Thy word is a lamp unto my feet, and a light unto my path."
-                            <span className="block mt-2 font-bold not-italic opacity-100">— Psalm 119:105</span>
-                        </p>
+                    <div className="hidden md:block flex-1 w-full pt-8">
+                        <div className="p-4 rounded-2xl bg-white/5 border border-white/5 backdrop-blur-sm animate-in fade-in slide-in-from-top-4 duration-1000">
+                            <h3 className="text-[10px] font-bold text-[#FDFBD4]/40 uppercase tracking-widest mb-3">Verse of the Day</h3>
+                            <p className="text-[#FDFBD4]/80 text-xs leading-relaxed font-light italic">
+                                "{verse.text}"
+                                <span className="block mt-2 font-bold not-italic opacity-100 text-[#FDFBD4]">— {verse.ref}</span>
+                            </p>
+                        </div>
                     </div>
                 </aside>
 
                 {/* Main Interaction Area */}
                 <main className="flex-1 flex flex-col min-w-0 bg-transparent relative">
                     {/* Chat Messages */}
-                    <div className="flex-1 overflow-y-auto p-4 sm:p-10 space-y-8 scroll-smooth scrollbar-hide">
+                    <div className="flex-1 overflow-y-auto p-4 md:p-10 space-y-8 scroll-smooth scrollbar-hide h-full">
                         {messages.length === 0 && (
                             <div className="h-full flex flex-col items-center justify-center space-y-6 text-center animate-in fade-in zoom-in duration-700">
                                 <div className="w-16 h-16 bg-[#FDFBD4]/5 rounded-2xl flex items-center justify-center border border-[#FDFBD4]/10 shadow-inner">
                                     <Bot size={32} className="text-[#FDFBD4]" />
                                 </div>
-                                <div className="space-y-2 max-w-sm">
+                                <div className="space-y-2 max-w-sm px-4">
                                     <h2 className="text-2xl font-bold text-white">Shalom, Beloved</h2>
-                                    <p className="text-white/40 text-sm leading-relaxed">
+                                    <p className="text-white/40 text-sm leading-relaxed mb-4">
                                         I am centered in Christ to provide you with scriptural guidance and faithful encouragement.
                                     </p>
+                                    <div className="md:hidden p-4 rounded-2xl bg-white/5 border border-white/5 text-left">
+                                        <h3 className="text-[8px] font-bold text-[#FDFBD4]/30 uppercase tracking-[0.2em] mb-2">Today's Word</h3>
+                                        <p className="text-[#FDFBD4]/70 text-xs italic">
+                                            "{verse.text}"
+                                            <span className="block mt-1 font-bold not-italic text-[10px]">— {verse.ref}</span>
+                                        </p>
+                                    </div>
                                 </div>
                             </div>
                         )}
@@ -109,15 +135,15 @@ const App: React.FC = () => {
                                 className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-6 duration-500 fill-mode-both`}
                                 style={{ animationDelay: `${index * 50}ms` }}
                             >
-                                <div className={`group flex flex-col max-w-[90%] sm:max-w-[80%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                                <div className={`group flex flex-col max-w-[95%] md:max-w-[80%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
                                     <div className={`flex items-center gap-2 mb-2 px-2 ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
                                         <div className={`text-[10px] font-bold uppercase tracking-widest ${msg.role === 'user' ? 'text-[#007055]' : 'text-[#FDFBD4]/60'}`}>
                                             {msg.role === 'user' ? 'You' : 'Theo'}
                                         </div>
                                     </div>
-                                    <div className={`relative p-5 sm:p-6 rounded-[2rem] text-sm leading-relaxed shadow-xl transition-all duration-300 ${msg.role === 'user'
-                                            ? 'bg-gradient-to-br from-[#007055] to-[#004D3C] text-white rounded-tr-none border border-white/5'
-                                            : 'bg-white/5 backdrop-blur-md text-white/90 rounded-tl-none border border-white/5 hover:bg-white/10'
+                                    <div className={`relative p-5 md:p-6 rounded-[2rem] text-sm leading-relaxed shadow-xl transition-all duration-300 ${msg.role === 'user'
+                                        ? 'bg-gradient-to-br from-[#007055] to-[#004D3C] text-white rounded-tr-none border border-white/5'
+                                        : 'bg-white/5 backdrop-blur-md text-white/90 rounded-tl-none border border-white/5 hover:bg-white/10'
                                         }`}>
                                         <div className={`markdown-content prose prose-invert prose-sm max-w-none 
                                             prose-p:leading-relaxed prose-headings:text-[#FDFBD4] prose-strong:text-[#FDFBD4]
@@ -145,32 +171,32 @@ const App: React.FC = () => {
                     </div>
 
                     {/* Sophisticated Input Box */}
-                    <div className="p-6 sm:p-10">
+                    <div className="p-4 md:p-10 shrink-0">
                         <div className="relative group max-w-3xl mx-auto">
                             <div className="absolute -inset-0.5 bg-gradient-to-r from-[#007055] via-[#FDFBD4]/20 to-[#004D3C] rounded-3xl blur opacity-20 group-focus-within:opacity-40 transition duration-500"></div>
-                            <div className="relative flex items-center bg-[#00362B]/60 backdrop-blur-xl border border-white/10 rounded-3xl p-2 transition-all duration-300 group-focus-within:border-[#FDFBD4]/30 group-focus-within:bg-[#00362B]/80 shadow-2xl">
+                            <div className="relative flex items-center bg-[#00362B]/60 backdrop-blur-xl border border-white/10 rounded-3xl p-1.5 md:p-2 transition-all duration-300 group-focus-within:border-[#FDFBD4]/30 group-focus-within:bg-[#00362B]/80 shadow-2xl">
                                 <input
                                     type="text"
                                     value={input}
                                     onChange={(e) => setInput(e.target.value)}
                                     onKeyPress={(e) => e.key === 'Enter' && handleSend()}
                                     placeholder="Type your spiritual inquiry here..."
-                                    className="flex-1 bg-transparent py-4 px-6 focus:outline-none text-white placeholder:text-white/20"
+                                    className="flex-1 bg-transparent py-3 md:py-4 px-4 md:px-6 focus:outline-none text-white placeholder:text-white/20 text-sm md:text-base"
                                     disabled={isLoading}
                                 />
                                 <button
                                     onClick={handleSend}
                                     disabled={isLoading || !input.trim()}
-                                    className={`p-4 rounded-2xl transition-all duration-500 ${input.trim()
-                                            ? 'bg-[#FDFBD4] text-[#002B22] shadow-[0_0_20px_rgba(253,251,212,0.3)] hover:scale-105 active:scale-95'
-                                            : 'bg-white/5 text-white/20 shadow-none'
+                                    className={`p-3 md:p-4 rounded-2xl transition-all duration-500 ${input.trim()
+                                        ? 'bg-[#FDFBD4] text-[#002B22] shadow-[0_0_20px_rgba(253,251,212,0.3)] hover:scale-105 active:scale-95'
+                                        : 'bg-white/5 text-white/20 shadow-none'
                                         }`}
                                 >
-                                    <Send size={20} className={isLoading ? 'animate-pulse' : ''} />
+                                    <Send size={18} className={isLoading ? 'animate-pulse' : ''} />
                                 </button>
                             </div>
-                            <div className="flex justify-center mt-4">
-                                <p className="text-[9px] uppercase tracking-[0.4em] text-white/20 font-black">
+                            <div className="flex justify-center mt-3 md:mt-4">
+                                <p className="text-[8px] md:text-[9px] uppercase tracking-[0.4em] text-white/20 font-black">
                                     Faith-based Intelligence • CLCC
                                 </p>
                             </div>