feat: improve mobile responsiveness for agent chat and tender tabs, verified groq integration

frontend/components/AgentChat.tsx

@@ -161,7 +161,7 @@ export default function AgentChat({ tender, companyProfile }: Props) {
   };
 
   return (
-    <div className="flex flex-col h-[600px] md:h-[650px] glass-card rounded-[2rem] overflow-hidden border border-white/10 bg-slate-900/60 backdrop-blur-xl shadow-2xl transition-all duration-500">
+    <div className="flex flex-col h-[550px] sm:h-[600px] md:h-[650px] lg:h-[700px] glass-card rounded-[2rem] overflow-hidden border border-white/10 bg-slate-900/60 backdrop-blur-xl shadow-2xl transition-all duration-500">
       <input 
         type="file" 
         ref={fileInputRef} 
@@ -266,15 +266,15 @@ export default function AgentChat({ tender, companyProfile }: Props) {
       )}
 
       {/* Input Area */}
-      <div className="p-4 md:p-6 bg-white/5 border-t border-white/5">
-        <div className="flex gap-2 md:gap-3 items-center">
+      <div className="p-3 md:p-6 bg-white/5 border-t border-white/5">
+        <div className="flex gap-1.5 md:gap-3 items-center">
           <button 
             onClick={() => fileInputRef.current?.click()}
             disabled={isUploading || isLoading}
-            className="w-10 h-10 md:w-12 md:h-12 rounded-2xl bg-white/5 border border-white/10 text-slate-400 flex items-center justify-center transition-all hover:bg-white/10 active:scale-95 disabled:opacity-30"
+            className="w-9 h-9 md:w-12 md:h-12 rounded-xl md:rounded-2xl bg-white/5 border border-white/10 text-slate-400 flex items-center justify-center transition-all hover:bg-white/10 active:scale-95 disabled:opacity-30 shrink-0"
             title="Attach Document"
           >
-            <span className={`text-xl ${isUploading ? 'animate-spin' : ''}`}>{isUploading ? '⌛' : '📎'}</span>
+            <span className={`text-lg md:text-xl ${isUploading ? 'animate-spin' : ''}`}>{isUploading ? '⌛' : '📎'}</span>
           </button>
           
           <input 
@@ -282,30 +282,30 @@ export default function AgentChat({ tender, companyProfile }: Props) {
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-            placeholder={isUploading ? "Uploading document..." : `Message ${selectedAgent.name}...`}
+            placeholder={isUploading ? "Uploading..." : `Message...`}
             disabled={isUploading}
-            className="flex-1 bg-black/40 border border-white/10 rounded-2xl px-4 md:px-5 py-3 text-white text-sm placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all disabled:opacity-50"
+            className="flex-1 min-w-0 bg-black/40 border border-white/10 rounded-xl md:rounded-2xl px-3 md:px-5 py-2.5 md:py-3 text-white text-xs md:text-sm placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all disabled:opacity-50"
           />
           
           <button 
             onClick={startSpeechRecognition}
             disabled={isListening || isLoading || isUploading}
-            className={`w-10 h-10 md:w-12 md:h-12 rounded-2xl flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 border ${
+            className={`w-9 h-9 md:w-12 md:h-12 rounded-xl md:rounded-2xl flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 border shrink-0 ${
               isListening 
                 ? 'bg-red-500/20 border-red-500 shadow-[0_0_20px_rgba(239,68,68,0.4)] animate-pulse' 
                 : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10'
             }`}
             title="Voice Command"
           >
-            <span className="text-xl">{isListening ? '🛑' : '🎙️'}</span>
+            <span className="text-lg md:text-xl">{isListening ? '🛑' : '🎙️'}</span>
           </button>
           
           <button 
             onClick={() => handleSend()}
             disabled={!input.trim() || isLoading || isUploading}
-            className="w-10 h-10 md:w-12 md:h-12 rounded-2xl premium-gradient text-white flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 shadow-lg shadow-purple-500/20"
+            className="w-9 h-9 md:w-12 md:h-12 rounded-xl md:rounded-2xl premium-gradient text-white flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 shadow-lg shadow-purple-500/20 shrink-0"
           >
-            <span className="text-xl">✈️</span>
+            <span className="text-lg md:text-xl">✈️</span>
           </button>
         </div>
       </div>

frontend/components/TenderSearch.tsx

@@ -210,28 +210,30 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   // VIEW: Detail Modal
   const renderDetailView = (tender: Tender) => (
     <div className="animate-in slide-in-from-right-8 fade-in duration-700 w-full max-w-[1600px] mx-auto pt-4 pb-20">
-      <div className="flex justify-between items-end mb-8 relative z-20">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-end gap-6 mb-8 relative z-20">
         <button 
           onClick={() => {
             console.log("[TenderSearch] Returning to list...");
             setSelectedTenderForModal(null);
           }} 
-          className="flex items-center gap-4 px-6 py-3 rounded-2xl bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all group active:scale-95 cursor-pointer relative z-30"
+          className="flex items-center gap-4 px-6 py-3 rounded-2xl bg-white/5 border border-white/10 text-slate-400 hover:text-white hover:bg-white/10 transition-all group active:scale-95 cursor-pointer relative z-30 w-fit"
         >
           <span className="text-2xl group-hover:-translate-x-1 transition-transform">←</span>
           <span className="text-xs font-black uppercase tracking-widest">Back to search</span>
         </button>
-        <div className="flex items-center gap-3 bg-white/5 p-1 rounded-2xl border border-white/10">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 bg-white/5 p-1 rounded-2xl border border-white/10 w-full md:w-auto">
           <button 
             onClick={() => toggleFollow(tender)}
-            className={`px-4 py-2.5 rounded-xl text-[10px] font-black uppercase transition-all flex items-center gap-2 ${followedCodes.includes(tender.code) ? "bg-amber-500/20 text-amber-400 border border-amber-500/30" : "bg-white/5 text-slate-400 hover:bg-white/10"}`}
+            className={`px-4 py-2.5 rounded-xl text-[10px] font-black uppercase transition-all flex items-center justify-center gap-2 ${followedCodes.includes(tender.code) ? "bg-amber-500/20 text-amber-400 border border-amber-500/30" : "bg-white/5 text-slate-400 hover:bg-white/10"}`}
           >
             <span>{followedCodes.includes(tender.code) ? "★" : "☆"}</span>
             <span>{followedCodes.includes(tender.code) ? "In Portfolio" : "Add to Portfolio"}</span>
           </button>
-          <div className="w-px h-6 bg-white/10 mx-1" />
-          <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500"}`}>Overview</button>
-          <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500"}`}>Agent Chat</button>
+          <div className="hidden sm:block w-px h-6 bg-white/10 mx-1" />
+          <div className="flex gap-2">
+            <button onClick={() => setActiveDetailTab("Overview")} className={`flex-1 md:flex-none px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500 bg-white/5"}`}>Overview</button>
+            <button onClick={() => setActiveDetailTab("Agent Chat")} className={`flex-1 md:flex-none px-6 py-2.5 rounded-xl text-xs font-black uppercase transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500 bg-white/5"}`}>Agent Chat</button>
+          </div>
         </div>
       </div>