@@ -5,10 +5,10 @@ import { Send, ArrowRight } from 'lucide-react';
 import SchemaCanvasViewer from './SchemaCanvasViewer';
 
 const SUGGESTIONS = [
-  { label: '🛒 E-commerce store', prompt: 'Create an e-commerce platform with products, categories, orders, and customer reviews' },
-  { label: '📋 Project management', prompt: 'Build a project management tool with workspaces, tasks, milestones, and time tracking' },
-  { label: '📝 Blog platform', prompt: 'Design a blog with posts, authors, tags, comments, and draft management' },
-  { label: '🎓 Learning platform', prompt: 'Create a learning platform with courses, modules, lessons, quizzes, and student enrollments' },
+  { label: 'E-commerce Platform', prompt: 'Create an e-commerce platform with products, categories, orders, customers, and product reviews' },
+  { label: 'Project Management SaaS', prompt: 'Build a project management system with workspaces, projects, tasks, milestones, and team members' },
+  { label: 'Subscription Billing API', prompt: 'Design a subscription service with plans, subscriptions, invoices, payment methods, and usage logs' },
+  { label: 'Content Management (CMS)', prompt: 'Design a headless CMS with articles, authors, categories, media assets, and publishing revisions' },
 ];
 
 const createMsg = (role, content) => ({
@@ -19,7 +19,7 @@ const createMsg = (role, content) => ({
 
 export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
   const [messages, setMessages] = useState([
-    createMsg('assistant', "Hi! Tell me what you're building — for example: 'a food delivery app' or 'a SaaS project management tool' — and I'll design a MongoDB schema for you.")
+    createMsg('assistant', "Describe what you're building — for example: a multi-tenant SaaS, an e-commerce platform, or a workflow tool — and I will design a production-ready MongoDB schema for you.")
   ]);
   const [aiStatus, setAiStatus] = useState('idle'); // 'idle' | 'loading' | 'error'
   const [schema, setSchema] = useState(null);
@@ -106,7 +106,7 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
     try {
       await api.delete(`/api/projects/${projectId}/ai/collection-creator/session`);
       setMessages([
-        createMsg('assistant', "Hi! Tell me what you're building — for example: 'a food delivery app' or 'a SaaS project management tool' — and I'll design a MongoDB schema for you.")
+        createMsg('assistant', "Describe what you're building — for example: a multi-tenant SaaS, an e-commerce platform, or a workflow tool — and I will design a production-ready MongoDB schema for you.")
       ]);
       setSchema(null);
       setInsertResults(null);
@@ -214,37 +214,30 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
   };
 
   return (
-    <div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-170px)] min-h-[580px] font-sans">
+    <div className="flex flex-col lg:flex-row gap-5 h-full w-full font-sans overflow-hidden">
 
-      {/* Open Chat Stream & Floating Composer - Left */}
-      <div className="flex flex-col flex-1 h-full relative" style={{ display: 'flex', flexDirection: 'column' }}>
+      {/* Open Chat Stream & Pinned Composer - Left */}
+      <div className="flex flex-col flex-1 h-full min-w-0 overflow-hidden relative">
 
-        {/* Messages Stream (No container box) */}
+        {/* Messages Stream (Only this scrolls) */}
         <div 
-          className="flex-1 overflow-y-auto custom-scrollbar" 
-          style={{ 
-            paddingRight: '1rem',
-            paddingBottom: '1rem',
-            display: 'flex', 
-            flexDirection: 'column', 
-            gap: '1.25rem'
-          }}
+          className="flex-1 overflow-y-auto custom-scrollbar pr-2 flex flex-col gap-3 min-h-0"
         >
           {messages.map((msg) => (
             <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
               <div 
                 style={{ 
                   maxWidth: '85%', 
-                  padding: '14px 20px', 
-                  fontSize: '0.9rem',
-                  lineHeight: '1.6',
-                  borderRadius: '18px',
-                  borderBottomRightRadius: msg.role === 'user' ? '4px' : '18px',
-                  borderBottomLeftRadius: msg.role === 'assistant' ? '4px' : '18px',
+                  padding: '10px 16px', 
+                  fontSize: '0.85rem',
+                  lineHeight: '1.55',
+                  borderRadius: '14px',
+                  borderBottomRightRadius: msg.role === 'user' ? '3px' : '14px',
+                  borderBottomLeftRadius: msg.role === 'assistant' ? '3px' : '14px',
                   backgroundColor: msg.role === 'user' ? 'var(--color-primary)' : 'var(--color-bg-card)',
                   color: msg.role === 'user' ? '#000' : 'var(--color-text-main)',
                   border: msg.role === 'assistant' ? '1px solid var(--color-border)' : 'none',
-                  boxShadow: msg.role === 'assistant' ? '0 2px 10px rgba(0,0,0,0.06)' : '0 4px 14px rgba(62,207,142,0.25)',
+                  boxShadow: msg.role === 'assistant' ? '0 1px 4px rgba(0,0,0,0.05)' : '0 2px 8px rgba(62,207,142,0.2)',
                   whiteSpace: 'pre-wrap'
                 }}
               >
@@ -255,46 +248,21 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
 
           {/* Quick Start Suggestions on empty chat */}
           {messages.length <= 1 && !schema && (
-            <div style={{ marginTop: '0.5rem', display: 'flex', flexDirection: 'column', gap: '8px' }}>
-              <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', paddingLeft: '4px' }}>
+            <div className="mt-1 flex flex-col gap-2">
+              <span className="text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider pl-1">
                 Quick Start Ideas
               </span>
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '8px' }}>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {SUGGESTIONS.map((s, i) => (
                   <button
                     key={i}
                     type="button"
                     onClick={() => sendMessage(null, s.prompt)}
                     disabled={aiStatus === 'loading' || iterationsLeft === 0}
-                    style={{
-                      textAlign: 'left',
-                      padding: '10px 14px',
-                      backgroundColor: 'var(--color-bg-card)',
-                      border: '1px solid var(--color-border)',
-                      borderRadius: '12px',
-                      fontSize: '0.825rem',
-                      color: 'var(--color-text-main)',
-                      cursor: (aiStatus === 'loading' || iterationsLeft === 0) ? 'not-allowed' : 'pointer',
-                      opacity: (aiStatus === 'loading' || iterationsLeft === 0) ? 0.45 : 1,
-                      transition: 'all 0.2s ease',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      gap: '8px'
-                    }}
-                    onMouseEnter={(e) => {
-                      if (aiStatus !== 'loading' && iterationsLeft !== 0) {
-                        e.currentTarget.style.borderColor = 'var(--color-primary)';
-                        e.currentTarget.style.transform = 'translateY(-1px)';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.borderColor = 'var(--color-border)';
-                      e.currentTarget.style.transform = 'translateY(0)';
-                    }}
+                    className="text-left p-2.5 px-3 bg-[var(--color-bg-card)] border border-[var(--color-border)] hover:border-[var(--color-primary)] rounded-lg text-xs text-[var(--color-text-main)] flex items-center justify-between gap-2 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    <span>{s.label}</span>
-                    <ArrowRight size={13} style={{ opacity: 0.6, flexShrink: 0 }} />
+                    <span className="truncate">{s.label}</span>
+                    <ArrowRight size={12} className="opacity-50 shrink-0" />
                   </button>
                 ))}
               </div>
@@ -303,20 +271,9 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
 
           {aiStatus === 'loading' && (
             <div className="flex justify-start">
-              <div 
-                style={{ 
-                  backgroundColor: 'var(--color-bg-card)', 
-                  padding: '12px 20px', 
-                  borderRadius: '18px', 
-                  borderBottomLeftRadius: '4px', 
-                  border: '1px solid var(--color-border)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '10px'
-                }}
-              >
-                <div className="spinner-small" style={{ width: '14px', height: '14px', borderTopColor: 'var(--color-primary)' }}></div>
-                <span style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', fontWeight: 500 }}>
+              <div className="bg-[var(--color-bg-card)] p-2.5 px-4 rounded-xl rounded-bl-sm border border-[var(--color-border)] flex items-center gap-2.5 shadow-sm">
+                <div className="spinner-small w-3.5 h-3.5 border-t-[var(--color-primary)]"></div>
+                <span className="text-xs text-[var(--color-text-muted)] font-medium">
                   AI is designing your schema...
                 </span>
               </div>
@@ -325,67 +282,30 @@ export default function CollectionCreatorAgent({ projectId, onInsertAll }) {
           <div ref={messagesEndRef} />
         </div>
 
-        {/* Floating Bottom Composer */}
-        <div style={{ marginTop: 'auto', paddingTop: '12px', flexShrink: 0 }}>
+        {/* Pinned Bottom Composer */}
+        <div className="mt-auto pt-2 flex-shrink-0">
           <div 
-            style={{
-              position: 'relative',
-              display: 'flex',
-              alignItems: 'flex-end',
-              backgroundColor: 'var(--color-bg-card)',
-              border: '1px solid var(--color-border)',
-              borderRadius: '20px',
-              padding: '10px 14px 10px 20px',
-              boxShadow: '0 8px 32px rgba(0,0,0,0.25)',
-              transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
-            }}
+            className="relative flex items-end bg-[var(--color-bg-card)] border border-[var(--color-border)] rounded-xl p-2 px-3 shadow-lg transition-all focus-within:border-[var(--color-primary)]"
           >
             <textarea 
               ref={textareaRef}
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               onKeyDown={handleKeyDown}
               disabled={aiStatus === 'loading' || (iterationsLeft === 0)}
-              placeholder={iterationsLeft === 0 ? "Turn limit reached. Add Groq key in Settings." : "Describe your app (e.g. e-commerce, project management, todo app...)"}
+              placeholder={iterationsLeft === 0 ? "Turn limit reached. Add Groq key in Settings." : "Describe your app (e.g. e-commerce store, booking system, CRM...)"}
               aria-label="Message the schema assistant"
               rows={1}
-              style={{ 
-                width: '100%',
-                background: 'transparent',
-                border: 'none',
-                outline: 'none',
-                color: 'var(--color-text-main)',
-                fontSize: '0.9rem',
-                lineHeight: '1.5',
-                resize: 'none',
-                maxHeight: '130px',
-                minHeight: '26px',
-                padding: '4px 0'
-              }}
+              className="w-full bg-transparent border-0 outline-none text-[var(--color-text-main)] text-xs leading-relaxed resize-none max-h-[100px] min-h-[24px] py-1 placeholder:text-[var(--color-text-muted)]"
             />
             <button 
               type="button"
               onClick={sendMessage}
               disabled={!inputValue.trim() || aiStatus === 'loading' || (iterationsLeft === 0)}
-              style={{ 
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '36px',
-                height: '36px',
-                borderRadius: '50%',
-                backgroundColor: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? 'var(--color-primary)' : 'var(--color-bg-input)',
-                color: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? '#000' : 'var(--color-text-muted)',
-                border: '1px solid var(--color-border)',
-                cursor: (inputValue.trim() && aiStatus !== 'loading' && iterationsLeft !== 0) ? 'pointer' : 'default',
-                opacity: (!inputValue.trim() || aiStatus === 'loading' || iterationsLeft === 0) ? 0.4 : 1,
-                transition: 'all 0.2s ease',
-                flexShrink: 0,
-                marginLeft: '10px'
-              }}
+              className="flex items-center justify-center w-7 h-7 rounded-lg bg-[var(--color-primary)] text-black border-0 cursor-pointer disabled:opacity-35 disabled:cursor-not-allowed transition-all shrink-0 ml-2"
               title="Send message (Enter)"
             >
-              <Send size={15} />
+              <Send size={13} />
             </button>
           </div>
           {getIterationsBadge()}