Optimize mobile UI, fix layout overlaps and add tender questions link

frontend/components/AgentAnalysis.tsx

@@ -256,11 +256,11 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
               ) : null}
               <span className="text-xs text-slate-500 font-mono">{tender?.code}</span>
             </div>
-            <h2 className="text-4xl font-bold text-white tracking-tight leading-tight mb-4">{tender?.name}</h2>
-            <p className="text-slate-400 text-lg leading-relaxed">{tender?.buyer}</p>
+            <h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-4">{tender?.name}</h2>
+            <p className="text-slate-400 text-base md:text-lg leading-relaxed">{tender?.buyer}</p>
             
             {tender && (
-              <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                 <div className="rounded-2xl bg-white/5 p-4 border border-white/5 group hover:bg-white/10 transition-colors">
                    <p className="text-[10px] uppercase text-slate-500 font-bold mb-1 tracking-widest">Investment</p>
                    <p className="text-lg font-black text-white">
@@ -345,24 +345,35 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
 
             {/* Scraped Intelligence / Tabs */}
             {tenderDetails && (
-              <div className="mt-8 flex flex-wrap gap-4">
+              <div className="mt-8 flex flex-wrap gap-3">
                  {tenderDetails.tabs?.history?.found && (
-                   <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400">
+                   <div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/10 text-[9px] sm:text-[10px] font-bold text-slate-400">
                      <span className="text-purple-400 text-xs">📜</span> History Available
                    </div>
                  )}
-                 {tenderDetails.tabs?.questions?.found && (
-                   <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400">
-                     <span className="text-cyan text-xs">❓</span> Q&A Active
-                   </div>
+                 {tenderDetails.metadata?.question_count && tenderDetails.metadata.question_count > 0 ? (
+                   <a 
+                     href={`https://www.mercadopublico.cl/Procurement/Modules/RFB/DetailsAcquisition.aspx?codigo=${tender?.code}&tab=4`}
+                     target="_blank"
+                     rel="noopener noreferrer"
+                     className="flex items-center gap-2 px-3 py-2 rounded-xl bg-cyan/10 border border-cyan/30 text-[9px] sm:text-[10px] font-bold text-cyan hover:bg-cyan/20 transition-all animate-pulse"
+                   >
+                     <span className="text-xs">❓</span> View {tenderDetails.metadata.question_count} Questions in Portal 🔗
+                   </a>
+                 ) : (
+                   tenderDetails.tabs?.questions?.found && (
+                    <div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/10 text-[9px] sm:text-[10px] font-bold text-slate-400">
+                      <span className="text-cyan text-xs">❓</span> Q&A Active
+                    </div>
+                   )
                  )}
                  {tenderDetails.tabs?.opening?.found && (
-                   <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400">
+                   <div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/10 text-[9px] sm:text-[10px] font-bold text-slate-400">
                      <span className="text-green-400 text-xs">🔓</span> Opening Log Found
                    </div>
                  )}
                  {tenderDetails.metadata?.has_adjudication && (
-                   <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-green-500/10 border border-green-500/20 text-[10px] font-bold text-green-400">
+                   <div className="flex items-center gap-2 px-3 py-2 rounded-xl bg-green-500/10 border border-green-500/20 text-[9px] sm:text-[10px] font-bold text-green-400">
                      <span className="text-xs">🏆</span> Adjudicated
                    </div>
                  )}
@@ -553,68 +564,50 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
           <p className="text-slate-400 mb-6">{error}</p>
           <button 
             onClick={handleAnalyzeClick}
-            className="px-6 py-3 rounded-2xl bg-red-500/20 text-red-400 font-bold border border-red-500/30 hover:bg-red-500/30 transition-all active:scale-95"
-          >
-            Retry Analysis
-          </button>
-        </div>
-      )}
-
-      {/* Analysis Results View */}
+            className="px-6 py-3 rounded-2xl bg-red-500/20 text-red-400 font-bold border b      {/* Analysis Results & Intelligent Sections */}
       {activeAnalysis && (
-        <div id="analysis-results" className="grid gap-8 lg:grid-cols-12 animate-in fade-in slide-in-from-bottom-8 duration-500 scroll-mt-20">
+        <div id="analysis-results" className="grid gap-8 grid-cols-1 lg:grid-cols-12 animate-in fade-in slide-in-from-bottom-8 duration-500 scroll-mt-20">
           <div className="lg:col-span-8 space-y-8">
-             <div className="glass-card rounded-3xl p-10 bg-white/[0.02]">
-+                {/* Professional Print Header */}
-+                <div className="hidden print-only mb-12 border-b-4 border-slate-900 pb-8 text-center">
-+                   <h1 className="text-4xl font-black text-slate-900 mb-2">ANDESOPS AI</h1>
-+                   <p className="text-sm font-bold uppercase tracking-[0.5em] text-slate-500">Intelligent Bidding Analysis Report</p>
-+                   <div className="mt-6 flex justify-between text-[10px] font-mono text-slate-400">
-+                      <span>DATE: {new Date().toLocaleDateString()}</span>
-+                      <span>REF ID: {tender?.code}</span>
-+                      <span>CONFIDENTIAL - FOR INTERNAL USE ONLY</span>
-+                   </div>
-+                </div>
-+
-                 <div className="flex items-start justify-between mb-8">
+             {/* Main Analysis Card */}
+             <div className="glass-card rounded-3xl p-6 sm:p-10 bg-white/[0.02]">
+                {/* Professional Print Header */}
+                <div className="hidden print-only mb-12 border-b-4 border-slate-900 pb-8 text-center">
+                   <h1 className="text-4xl font-black text-slate-900 mb-2">ANDESOPS AI</h1>
+                   <p className="text-sm font-bold uppercase tracking-[0.5em] text-slate-500">Intelligent Bidding Analysis Report</p>
+                </div>
+
+                <div className="flex flex-col sm:flex-row items-start justify-between gap-6 mb-8">
                    <div>
                       <div className="text-[11px] font-bold uppercase tracking-[0.3em] text-purple-400 mb-2">Agent Consensus</div>
-                      <h3 className="text-6xl font-black text-white">{activeAnalysis.fit_score}% <span className="text-2xl font-light text-slate-500">Fit Score</span></h3>
+                      <h3 className="text-4xl sm:text-6xl font-black text-white">{activeAnalysis.fit_score}% <span className="text-xl sm:text-2xl font-light text-slate-500">Fit Score</span></h3>
                       <div className="mt-2 flex items-center gap-2">
                         <span className="text-[10px] text-slate-500 font-mono">Analyzing:</span>
-                        <span className="text-[10px] text-purple-300 font-bold">{corral.find(a => a.id === activeAnimalId)?.file.name || tender?.name}</span>
+                        <span className="text-[10px] text-purple-300 font-bold truncate max-w-[200px]">{corral.find(a => a.id === activeAnimalId)?.file.name || tender?.name}</span>
                       </div>
                    </div>
-              <div className="flex flex-col items-end gap-3">
-                      <div className={`rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest shadow-lg ${activeAnalysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400 border border-green-500/30 shadow-green-500/10' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30 shadow-amber-500/10'}`}>
+                   <div className="flex flex-col items-end gap-3 w-full sm:w-auto">
+                      <div className={`w-full sm:w-auto text-center rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest shadow-lg ${activeAnalysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400 border border-green-500/30 shadow-green-500/10' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30 shadow-amber-500/10'}`}>
                          {activeAnalysis.decision}
                       </div>
-                      <div className="flex gap-2">
+                      <div className="flex flex-wrap gap-2 w-full sm:w-auto justify-end">
                           <button 
                             onClick={() => window.print()}
-                            className="px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-[0.2em]"
+                            className="flex-1 sm:flex-none px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-widest"
                           >
                             Export PDF
                           </button>
                           <button 
                             onClick={generateAnnexes}
                             disabled={isGeneratingAnnexes}
-                            className={`px-4 py-2 rounded-xl border text-[10px] font-bold transition uppercase tracking-[0.2em] ${isGeneratingAnnexes ? 'bg-purple-500/20 border-purple-500/50 text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/20 text-purple-400 hover:bg-purple-500/20'}`}
+                            className={`flex-1 sm:flex-none px-4 py-2 rounded-xl border text-[9px] font-bold transition uppercase tracking-widest ${isGeneratingAnnexes ? 'bg-purple-500/20 border-purple-500/50 text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/20 text-purple-400 hover:bg-purple-500/20'}`}
                           >
-                            {isGeneratingAnnexes ? 'Generating...' : '✨ Anexos Express'}
+                            {isGeneratingAnnexes ? 'Generating...' : '✨ Anexos'}
                           </button>
-                         <button 
-                           onClick={() => alert("Report sent to executive committee via REW Secure Channel.")}
-                           className="px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-xs text-slate-400 hover:text-white hover:bg-white/10 transition"
-                           title="Share Analysis"
-                         >
-                           📧
-                         </button>
                       </div>
                    </div>
                 </div>
                 <div className="prose prose-invert max-w-none">
-                   <p className="text-slate-300 text-xl leading-relaxed italic border-l-4 border-purple-500 pl-8">{activeAnalysis.executive_summary}</p>
+                   <p className="text-slate-300 text-lg sm:text-xl leading-relaxed italic border-l-4 border-purple-500 pl-4 sm:pl-8">{activeAnalysis.executive_summary}</p>
                 </div>
 
                 {/* Requirement Q&A Section */}
@@ -622,176 +615,131 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
                   <div className="mt-12 space-y-6">
                     <div className="flex items-center gap-3 border-b border-white/5 pb-4">
                       <span className="text-2xl">📋</span>
-                      <h4 className="text-[11px] font-bold uppercase tracking-widest text-purple-400">Requirement Response (Q&A Style)</h4>
+                      <h4 className="text-[10px] sm:text-[11px] font-bold uppercase tracking-widest text-purple-400">Requirement Response</h4>
                     </div>
                     <div className="grid gap-4">
                       {activeAnalysis.requirement_responses.map((item, i) => (
-                        <div key={i} className="rounded-2xl bg-white/[0.03] border border-white/5 p-6 hover:border-purple-500/30 transition-all group">
+                        <div key={i} className="rounded-2xl bg-white/[0.03] border border-white/5 p-4 sm:p-6 hover:border-purple-500/30 transition-all group">
                           <div className="flex gap-4">
                             <span className="text-purple-500 font-bold font-mono">Q.</span>
-                            <p className="text-white font-semibold text-sm">{item.question}</p>
+                            <p className="text-white font-semibold text-xs sm:text-sm">{item.question}</p>
                           </div>
-                          <div className="mt-4 flex gap-4 pl-8 border-l border-white/10">
+                          <div className="mt-4 flex gap-4 pl-4 sm:pl-8 border-l border-white/10">
                             <span className="text-green-400 font-bold font-mono">A.</span>
-                            <p className="text-slate-400 text-sm leading-relaxed">{item.answer}</p>
+                            <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{item.answer}</p>
                           </div>
                         </div>
                       ))}
                     </div>
                   </div>
                 )}
-
-                {/* Proposal Draft Section */}
-                {activeAnalysis.proposal_draft && (
-                  <div className="mt-12 space-y-6">
-                    <div className="flex items-center justify-between border-b border-white/5 pb-4">
-                       <h4 className="text-[11px] font-bold uppercase tracking-widest text-purple-400">AI Generated Proposal Draft</h4>
-                       <button 
-                         onClick={() => {
-                           navigator.clipboard.writeText(activeAnalysis.proposal_draft);
-                           alert("Proposal copied to clipboard!");
-                         }}
-                         className="text-[10px] font-bold uppercase text-slate-500 hover:text-white transition"
-                       >
-                         Copy to Clipboard 📋
-                       </button>
-                    </div>
-                    <div className="p-8 rounded-3xl bg-white/[0.03] border border-white/10 font-serif text-slate-400 text-sm leading-relaxed whitespace-pre-wrap max-h-[500px] overflow-y-auto custom-scrollbar">
-                       {activeAnalysis.proposal_draft}
-                    </div>
-                  </div>
-                )}
              </div>
 
-
              <div className="grid gap-6 md:grid-cols-2">
-                <div className="glass-card rounded-3xl p-8 bg-white/[0.01]">
+                <div className="glass-card rounded-3xl p-6 sm:p-8 bg-white/[0.01]">
                    <h4 className="text-[11px] font-bold uppercase tracking-widest text-amber-400 mb-6 flex items-center gap-2">
-                     <span>⚠️</span> Legal Compliance Gaps
+                     <span>⚠️</span> Compliance Gaps
                    </h4>
                    <ul className="space-y-4">
                       {activeAnalysis.compliance_gaps.map((gap, i) => (
-                        <li key={i} className="flex gap-4 text-sm text-slate-400 leading-relaxed">
+                        <li key={i} className="flex gap-4 text-xs sm:text-sm text-slate-400 leading-relaxed">
                            <span className="text-amber-500 font-bold">•</span> {gap}
                         </li>
                       ))}
                    </ul>
                 </div>
-                <div className="glass-card rounded-3xl p-8 bg-white/[0.01]">
+                <div className="glass-card rounded-3xl p-6 sm:p-8 bg-white/[0.01]">
                    <h4 className="text-[11px] font-bold uppercase tracking-widest text-cyan mb-6 flex items-center gap-2">
-                     <span>💎</span> Technical Requirements
+                     <span>💎</span> Tech Requirements
                    </h4>
                    <ul className="space-y-4">
                       {activeAnalysis.key_requirements.map((req, i) => (
-                        <li key={i} className="flex gap-4 text-sm text-slate-400 leading-relaxed">
+                        <li key={i} className="flex gap-4 text-xs sm:text-sm text-slate-400 leading-relaxed">
                            <span className="text-cyan font-bold">▹</span> {req}
                         </li>
                       ))}
                    </ul>
                 </div>
              </div>
-
-             <div className="glass-card rounded-3xl p-10 bg-white/[0.01]">
-                <h4 className="text-[11px] font-bold uppercase tracking-widest text-purple-400 mb-8 text-center">Neural Risk Matrix</h4>
-                <div className="grid gap-6 md:grid-cols-2 mb-12">
-                   {activeAnalysis.risks.map((risk, i) => (
-                     <div key={i} className="group rounded-3xl bg-white/[0.02] p-6 border border-white/5 hover:border-purple-500/30 transition-all duration-300">
-                        <div className="flex items-center justify-between mb-4">
-                           <span className="font-bold text-white text-lg group-hover:text-purple-400 transition">{risk.title}</span>
-                           <span className={`text-[9px] font-black px-3 py-1 rounded-full uppercase tracking-widest ${risk.severity === 'High' ? 'bg-red-500/20 text-red-500 border border-red-500/20' : 'bg-white/5 text-slate-500 border border-white/5'}`}>{risk.severity}</span>
-                        </div>
-                        <p className="text-xs text-slate-500 leading-relaxed">{risk.explanation}</p>
-                     </div>
-                   ))}
-                </div>
-
-                {activeAnalysis.strategic_roadmap && (
-                  <div className="mt-8 pt-8 border-t border-white/5">
-                    <h4 className="text-[11px] font-bold uppercase tracking-widest text-cyan mb-6 text-center">Winning Strategic Roadmap</h4>
-                    <div className="p-8 rounded-3xl bg-cyan/5 border border-cyan/20 text-sm text-slate-300 leading-relaxed italic">
-                      <div className="prose prose-invert prose-sm max-w-none">
-                        {activeAnalysis.strategic_roadmap.split('\n').map((line, i) => (
-                          <p key={i} className="mb-2">{line}</p>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                )}
-             </div>
-
           </div>
 
-          <div className="lg:col-span-4">
-             <div className="glass-card rounded-3xl p-8 bg-black/40 h-full sticky top-32">
-                <div className="flex items-center gap-3 mb-8 border-b border-white/5 pb-6">
-                   <div className="h-2 w-2 rounded-full bg-purple-500 animate-pulse shadow-[0_0_12px_rgba(168,85,247,0.8)]" />
-                   <h4 className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Agent Intelligence Log</h4>
+          {/* Audit Log / Agent Thoughts Sticky Column */}
+          <div className="lg:col-span-4 space-y-8">
+             <div className="glass-card rounded-3xl p-6 sm:p-8 bg-black/40 lg:sticky lg:top-32 max-h-[500px] lg:max-h-[700px] overflow-hidden flex flex-col">
+                <div className="flex items-center gap-3 mb-6 border-b border-white/5 pb-4">
+                   <div className="h-2 w-2 rounded-full bg-purple-500 animate-pulse" />
+                   <h4 className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Agent Intel Log</h4>
                 </div>
-                <div className="space-y-8 overflow-y-auto max-h-[700px] pr-2 custom-scrollbar">
+                <div className="space-y-6 overflow-y-auto pr-2 custom-scrollbar">
                    {activeAnalysis.audit_log?.map((log, i) => (
-                     <div key={i} className="flex gap-5 group">
+                     <div key={i} className="flex gap-4 group">
                         <div className="flex flex-col items-center">
-                           <div className="h-8 w-8 rounded-xl bg-white/5 flex items-center justify-center text-sm border border-white/10 group-hover:border-purple-500/50 transition-all duration-300 shadow-lg">🤖</div>
-                           {i < (activeAnalysis.audit_log?.length ?? 0) - 1 && <div className="w-px flex-1 bg-gradient-to-b from-purple-500/40 to-transparent my-3" />}
-                        </div>
-                        <div className="pb-6">
-                           <p className="text-[13px] text-slate-400 leading-relaxed group-hover:text-white transition-colors duration-300">{log}</p>
+                           <div className="h-6 w-6 rounded-lg bg-white/5 flex items-center justify-center text-xs border border-white/10 group-hover:border-purple-500/50 transition-all">🤖</div>
+                           {i < (activeAnalysis.audit_log?.length ?? 0) - 1 && <div className="w-px flex-1 bg-white/5 my-2" />}
                         </div>
+                        <p className="text-xs text-slate-500 leading-relaxed group-hover:text-slate-300 transition-colors">{log}</p>
                      </div>
                    ))}
                 </div>
              </div>
-             
-             {/* Anexos Express Section */}
-             {generatedAnnexes.length > 0 && (
-                <div id="annexes-section" className="mt-8 glass-card rounded-3xl p-10 bg-purple-500/[0.03] border border-purple-500/20 animate-in fade-in slide-in-from-bottom-8 duration-700">
-                   <div className="flex items-center gap-4 mb-8">
-                      <div className="w-12 h-12 rounded-2xl bg-purple-500/20 flex items-center justify-center text-2xl shadow-lg shadow-purple-500/20">📄</div>
-                      <div>
-                        <h4 className="text-2xl font-black text-white tracking-tight">Compliance: Anexos Express</h4>
-                        <p className="text-slate-500 text-sm">Official annexes pre-filled with company data and tender requirements.</p>
-                      </div>
-                   </div>
-                   
-                   <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
-                      {generatedAnnexes.map((annex, i) => (
-                        <div key={i} className="group rounded-3xl bg-white/[0.02] border border-white/5 p-6 hover:border-purple-500/40 transition-all">
-                           <div className="text-[10px] font-bold uppercase text-purple-400 mb-3 tracking-widest">Template Generated</div>
-                           <h5 className="text-white font-bold mb-4 line-clamp-1">{annex.name}</h5>
-                           <div className="bg-black/40 rounded-xl p-4 text-[9px] font-mono text-slate-500 mb-4 h-32 overflow-hidden relative">
-                              <pre className="whitespace-pre-wrap">{annex.content}</pre>
-                              <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/60 to-transparent" />
-                           </div>
-                           <button 
-                             onClick={() => {
-                               const blob = new Blob([annex.content], { type: 'text/markdown' });
-                               const url = window.URL.createObjectURL(blob);
-                               const a = document.createElement('a');
-                               a.href = url;
-                               a.download = `${annex.name.replace(/ /g, '_')}.md`;
-                               a.click();
-                             }}
-                             className="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-widest"
-                           >
-                             Download .md 📥
-                           </button>
-                        </div>
-                      ))}
-                   </div>
-                </div>
-              )}
           </div>
         </div>
       )}
 
-      {/* Expert Consultation Chat */}
+      {/* Compliance Anexos Section (Moved to prevent overlap with Chat) */}
+      {generatedAnnexes.length > 0 && (
+        <div id="annexes-section" className="glass-card rounded-3xl p-6 sm:p-10 bg-purple-500/[0.03] border border-purple-500/20 animate-in fade-in slide-in-from-bottom-8 duration-700">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-8">
+              <div className="w-12 h-12 rounded-2xl bg-purple-500/20 flex items-center justify-center text-2xl shadow-lg shadow-purple-500/20">📄</div>
+              <div>
+                <h4 className="text-xl sm:text-2xl font-black text-white tracking-tight">Compliance: Anexos Express</h4>
+                <p className="text-slate-500 text-xs sm:text-sm">Official annexes pre-filled with company data.</p>
+              </div>
+            </div>
+            
+            <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+              {generatedAnnexes.map((annex, i) => (
+                <div key={i} className="group rounded-3xl bg-white/[0.02] border border-white/5 p-6 hover:border-purple-500/40 transition-all">
+                    <div className="text-[10px] font-bold uppercase text-purple-400 mb-3 tracking-widest">Template</div>
+                    <h5 className="text-white font-bold mb-4 line-clamp-1 text-sm">{annex.name}</h5>
+                    <div className="bg-black/40 rounded-xl p-4 text-[9px] font-mono text-slate-500 mb-4 h-32 overflow-hidden relative">
+                      <pre className="whitespace-pre-wrap">{annex.content}</pre>
+                      <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/60 to-transparent" />
+                    </div>
+                    <button 
+                      onClick={() => {
+                        const blob = new Blob([annex.content], { type: 'text/markdown' });
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `${annex.name.replace(/ /g, '_')}.md`;
+                        a.click();
+                      }}
+                      className="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-widest"
+                    >
+                      Download .md 📥
+                    </button>
+                </div>
+              ))}
+            </div>
+        </div>
+      )}
+
+      {/* Expert Consultation Chat (Bottom Section) */}
       {tender && (
         <div className="mt-12 animate-in fade-in slide-in-from-bottom-8 duration-700">
-           <div className="flex items-center gap-4 mb-6 px-2">
+           <div className="flex flex-col sm:flex-row sm:items-center gap-4 mb-6 px-2">
               <div className="w-10 h-10 rounded-2xl bg-purple-500/10 flex items-center justify-center text-xl shadow-lg shadow-purple-500/10">💬</div>
               <div>
-                <h3 className="text-2xl font-black text-white tracking-tight">Expert Agent Consultation</h3>
-                <p className="text-slate-500 text-sm">Deep-dive into specific questions with our specialized AI agents.</p>
+                <h3 className="text-xl sm:text-2xl font-black text-white tracking-tight">Expert Agent Consultation</h3>
+                <p className="text-slate-500 text-xs sm:text-sm">Deep-dive into specific questions with our AI agents.</p>
+              </div>
+           </div>
+           <AgentChat tender={tender} companyProfile={companyProfile} />
+        </div>
+      )}
+    </div>
+ons with our specialized AI agents.</p>
               </div>
            </div>
            <AgentChat tender={tender} companyProfile={companyProfile} />

frontend/components/MarketMonitor.tsx

@@ -118,37 +118,40 @@ export default function MarketMonitor() {
                 <table className="w-full text-left text-xs border-collapse sticky-header">
                   <thead className="sticky top-0 z-10">
                     <tr className="bg-slate-900/95 backdrop-blur-md text-slate-500 uppercase font-black tracking-tighter border-b border-white/5">
-                      <th className="px-6 py-5">Order ID / Description</th>
-                      <th className="px-6 py-5">Buyer</th>
-                      <th className="px-6 py-5">Vendor</th>
-                      <th className="px-6 py-5 text-right">Total Amount</th>
+                      <th className="px-4 sm:px-6 py-5">Order ID / Description</th>
+                      <th className="px-6 py-5 hidden md:table-cell">Buyer</th>
+                      <th className="px-6 py-5 hidden lg:table-cell">Vendor</th>
+                      <th className="px-4 sm:px-6 py-5 text-right">Total</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-white/5">
                     {paginatedOcs.map((oc) => (
                       <tr key={oc.code} className="hover:bg-white/[0.03] transition-colors group">
-                        <td className="px-6 py-5 max-w-md">
+                        <td className="px-4 sm:px-6 py-5 max-w-md">
                           <div className="flex items-center gap-2 mb-1">
-                            <span className="text-cyan font-bold font-mono text-[10px] bg-cyan/5 px-2 py-0.5 rounded border border-cyan/10">
+                            <span className="text-cyan font-bold font-mono text-[9px] bg-cyan/5 px-2 py-0.5 rounded border border-cyan/10">
                               {oc.code}
                             </span>
                           </div>
-                          <div className="text-white font-bold line-clamp-1 group-hover:line-clamp-none transition-all cursor-help" title={oc.name}>
+                          <div className="text-white font-bold line-clamp-1 group-hover:line-clamp-none transition-all cursor-help text-xs sm:text-sm" title={oc.name}>
                             {oc.name || "Orden de Compra"}
                           </div>
+                          <div className="md:hidden text-[10px] text-slate-500 mt-1 truncate max-w-[200px]">
+                            {oc.buyer}
+                          </div>
                         </td>
-                        <td className="px-6 py-5">
-                          <div className="text-slate-300 font-medium truncate max-w-[150px]">
+                        <td className="px-6 py-5 hidden md:table-cell">
+                          <div className="text-slate-300 font-medium truncate max-w-[150px] text-[11px]">
                             {oc.buyer !== "Unknown" ? oc.buyer : <span className="opacity-30">...</span>}
                           </div>
                         </td>
-                        <td className="px-6 py-5">
-                          <div className="text-sky-400 font-bold truncate max-w-[150px]">
+                        <td className="px-6 py-5 hidden lg:table-cell">
+                          <div className="text-sky-400 font-bold truncate max-w-[150px] text-[11px]">
                             {oc.provider !== "Unknown" ? oc.provider : <span className="opacity-30">...</span>}
                           </div>
                         </td>
-                        <td className="px-6 py-5 text-right">
-                          <div className="text-white font-black text-sm">
+                        <td className="px-4 sm:px-6 py-5 text-right">
+                          <div className="text-white font-black text-xs sm:text-sm">
                             {formatCurrency(oc.total_amount, oc.currency)}
                           </div>
                         </td>

frontend/components/Sidebar.tsx

@@ -47,7 +47,7 @@ export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang, fo
     <aside 
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={`glass-card rounded-3xl h-[calc(100vh-3rem)] sticky top-6 p-4 flex flex-col gap-8 transition-all duration-500 ease-in-out z-50 border-white/10 ${isExpanded ? 'w-72 shadow-2xl shadow-purple-500/10 bg-black/60' : 'w-[84px] shadow-none border-white/5 bg-white/[0.02]'}`}
+      className={`glass-card rounded-2xl md:rounded-3xl h-full md:h-[calc(100vh-3rem)] md:sticky md:top-6 p-3 md:p-4 flex flex-col gap-4 md:gap-8 transition-all duration-500 ease-in-out z-50 border-white/10 ${isExpanded ? 'w-full md:w-72 shadow-2xl shadow-purple-500/10 bg-black/60' : 'w-[84px] shadow-none border-white/5 bg-white/[0.02]'}`}
     >
       <div className={`flex items-center gap-3 px-2 transition-all duration-300 ${isExpanded ? 'justify-start' : 'justify-center'}`}>
         <div className="w-10 h-10 premium-gradient rounded-xl flex-shrink-0 flex items-center justify-center shadow-lg shadow-purple-500/20">

frontend/components/TenderSearch.tsx

@@ -126,7 +126,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
         </div>
         
         {!forceShowFollowed && (
-          <form onSubmit={handleSearch} className="relative z-10 space-y-6">
+        <form onSubmit={handleSearch} className="relative z-10 space-y-6">
             <div className="flex flex-col md:flex-row gap-4">
               <div className="relative flex-1">
                 <input
@@ -159,43 +159,44 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
         <table className="w-full text-left text-sm table-fixed">
           <thead className="bg-white/5 text-slate-500 uppercase text-[10px] font-bold border-b border-white/5">
             <tr>
-              <th className="px-6 py-5 w-[60px] text-center"></th>
-              <th className="px-6 py-5 w-[120px]">ID</th>
-              <th className="px-6 py-5">Opportunity</th>
-              <th className="px-6 py-5 w-[200px]">Buyer</th>
-              <th className="px-6 py-5 text-center w-[120px]">Status</th>
-              <th className="px-6 py-5 w-[100px] text-center">Action</th>
+              <th className="px-4 py-5 w-[50px] text-center"></th>
+              <th className="px-6 py-5 w-[110px] hidden sm:table-cell">ID</th>
+              <th className="px-6 py-5 min-w-[200px]">Opportunity</th>
+              <th className="px-6 py-5 w-[150px] hidden md:table-cell">Buyer</th>
+              <th className="px-6 py-5 text-center w-[100px] hidden sm:table-cell">Status</th>
+              <th className="px-6 py-5 w-[80px] text-center">Action</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-white/5">
             {filteredTenders.map((item) => (
               <tr key={item.code} className="hover:bg-white/[0.04] transition-colors group">
-                <td className="px-4 py-5 text-center">
+                <td className="px-2 py-5 text-center">
                   <button 
                     onPointerDown={(e) => {
                       e.stopPropagation();
-                      console.log("[Portfolio] Toggling follow for:", item.code);
                       toggleFollow(item);
                     }}
-                    className={`text-xl transition-all hover:scale-125 active:scale-90 p-2 cursor-pointer relative z-50 ${followedCodes.includes(item.code) ? 'text-amber-400 drop-shadow-[0_0_10px_rgba(251,191,36,0.6)]' : 'text-white/30 hover:text-white/60'}`}
+                    className={`text-lg transition-all hover:scale-125 active:scale-90 p-2 cursor-pointer relative z-50 ${followedCodes.includes(item.code) ? 'text-amber-400 drop-shadow-[0_0_10px_rgba(251,191,36,0.6)]' : 'text-white/30 hover:text-white/60'}`}
                   >
                     {followedCodes.includes(item.code) ? "★" : "☆"}
                   </button>
                 </td>
-                <td className="px-6 py-5 font-mono text-purple-400 text-[10px]">{item.code}</td>
+                <td className="px-6 py-5 font-mono text-purple-400 text-[9px] hidden sm:table-cell">{item.code}</td>
                 <td className="px-6 py-5">
-                   <div className="font-bold text-white truncate text-xs max-w-[400px]" title={item.name}>{item.name}</div>
+                   <div className="font-bold text-white text-xs sm:text-sm line-clamp-2" title={item.name}>{item.name}</div>
+                   <div className="text-[10px] text-slate-500 mt-1 md:hidden truncate max-w-[150px]">{item.buyer}</div>
                 </td>
-                <td className="px-6 py-5 text-slate-400 text-[11px] truncate">{item.buyer}</td>
-                <td className="px-6 py-5 text-center">
-                  <span className={`inline-block rounded-full px-3 py-1 text-[9px] font-black uppercase ${item.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400' : 'bg-slate-800 text-slate-500'}`}>{item.status}</span>
+                <td className="px-6 py-5 text-slate-400 text-[10px] truncate hidden md:table-cell">{item.buyer}</td>
+                <td className="px-6 py-5 text-center hidden sm:table-cell">
+                  <span className={`inline-block rounded-full px-2 py-1 text-[8px] font-black uppercase ${item.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400' : 'bg-slate-800 text-slate-500'}`}>{item.status}</span>
                 </td>
-                <td className="px-6 py-5 text-center">
+                <td className="px-4 py-5 text-center">
                    <button 
                      onClick={() => setSelectedTenderForModal(item)}
-                     className="px-4 py-2 rounded-xl bg-purple-500/10 border border-purple-500/20 text-[10px] font-black text-purple-400 hover:bg-purple-500 hover:text-white transition-all uppercase tracking-widest"
+                     className="p-2 sm:px-4 sm:py-2 rounded-xl bg-purple-500/10 border border-purple-500/20 text-[9px] font-black text-purple-400 hover:bg-purple-500 hover:text-white transition-all uppercase tracking-widest"
                    >
-                     View
+                     <span className="hidden sm:inline">View</span>
+                     <span className="sm:hidden">→</span>
                    </button>
                 </td>
               </tr>

frontend/globals.css

@@ -178,3 +178,18 @@ select {
     border-color: #e2e8f0 !important;
   }
 }
+
+@media (max-width: 640px) {
+  .glass-card {
+    padding: 1.25rem !important;
+  }
+  
+  h2 {
+    font-size: 1.5rem !important;
+    line-height: 2rem !important;
+  }
+  
+  .premium-gradient {
+    padding: 1rem !important;
+  }
+}