fix: fix popup size and position for mobile

frontend/src/components/layout/MobileNav.tsx

@@ -1,11 +1,12 @@
 import { NavLink } from 'react-router-dom'
-import { LayoutDashboard, Newspaper, Star, Settings } from 'lucide-react'
+import { LayoutDashboard, Newspaper, Star, Settings, FileText } from 'lucide-react'
 import { cn } from '@/lib/cn'
 
 const items = [
   { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
   { to: '/feed', icon: Newspaper, label: 'Actus' },
   { to: '/watchlist', icon: Star, label: 'Watchlist' },
+  { to: '/reports', icon: FileText, label: 'Rapports' },
   { to: '/admin', icon: Settings, label: 'Admin' },
 ]
 

frontend/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { TrendingUp, Clock, Sparkles, MessageSquarePlus, Loader2, Plus, X, Send } from 'lucide-react'
+import { TrendingUp, Clock, Sparkles, MessageSquarePlus, Loader2, Plus, X, Send, ChevronDown, ChevronUp } from 'lucide-react'
 import { summariesApi, type Summary } from '@/api/summaries'
 import { reportsApi } from '@/api/reports'
 import { assetsApi, type Asset } from '@/api/assets'
@@ -68,6 +68,7 @@ function ContextPanel({
   const [question, setQuestion] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [submitted, setSubmitted] = useState(false)
+  const [showExcerpts, setShowExcerpts] = useState(false)
 
   async function submit() {
     if (!question.trim() || submitting) return
@@ -83,20 +84,24 @@ function ContextPanel({
   }
 
   return (
-    <div className="fixed bottom-4 right-4 z-40 w-96 max-h-[70vh] flex flex-col bg-card border rounded-xl shadow-2xl overflow-hidden">
+    <div className="fixed bottom-16 left-0 right-0 z-40 flex flex-col bg-card border-t shadow-2xl overflow-hidden md:bottom-4 md:left-auto md:right-4 md:w-96 md:rounded-xl md:border">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b bg-primary/5">
-        <span className="text-sm font-semibold flex items-center gap-2">
+        <button
+          className="text-sm font-semibold flex items-center gap-2 hover:text-primary transition-colors"
+          onClick={() => setShowExcerpts(v => !v)}
+        >
           <MessageSquarePlus className="h-4 w-4 text-primary" />
           Contexte ({excerpts.length} extrait{excerpts.length > 1 ? 's' : ''})
-        </span>
+          <span className="md:hidden">{showExcerpts ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}</span>
+        </button>
         <button onClick={onClear} className="text-xs text-muted-foreground hover:text-destructive transition-colors">
           Tout effacer
         </button>
       </div>
 
-      {/* Extraits */}
+      {/* Extraits — toujours visible sur desktop, togglable sur mobile */}
-      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2 min-h-0">
+      <div className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 min-h-0 max-h-[25vh] ${showExcerpts ? 'block' : 'hidden'} md:block`}>
           {excerpts.map((e, i) => (
             <div key={i} className="flex items-start gap-2 group">
               <div className="flex-1 rounded bg-muted/60 px-2 py-1.5 text-xs text-muted-foreground italic line-clamp-3">
@@ -104,7 +109,7 @@ function ContextPanel({
               </div>
               <button
                 onClick={() => onRemove(i)}
-              className="mt-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+                className="mt-1 shrink-0 text-muted-foreground hover:text-destructive md:opacity-0 md:group-hover:opacity-100 transition-opacity"
               >
                 <X className="h-3 w-3" />
               </button>