Deploy from GitHub: ac823d8

README.md

@@ -7,7 +7,7 @@ sdk: docker
 app_port: 7860
 pinned: true
 license: mit
-short_description: Search 300K+ Swiss court decisions with AI
+short_description: Search 800K+ Swiss court decisions with AI
 ---
 
 # Swiss Caselaw
@@ -16,9 +16,7 @@ Search Swiss federal and cantonal court decisions with hybrid retrieval (full-te
 
 ## Features
 
-- **300,000+ Decisions**: From all Swiss federal courts (BGer, BVGer, BStGer, BPatGer) and 26 cantons
-- **Multilingual UI**: German, French, Italian, Romansh, English
-- **Advanced Sorting**: By relevance, date, or court
+- **800,000+ Decisions**: From all Swiss federal courts (BGer, BVGer, BStGer, BPatGer) and 26 cantons
 - **Hybrid Search**: Combines full-text search with semantic embeddings for better results
 - **AI Answers**: Get AI-generated answers with pinpoint citations to source decisions
 - **Multi-language**: German, French, Italian decisions

frontend/app/globals.css

@@ -4,44 +4,91 @@
 
 :root {
   color-scheme: light;
+  --safe-top: env(safe-area-inset-top);
+  --safe-bottom: env(safe-area-inset-bottom);
 }
 
-html, body {
+html {
   height: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
-  @apply bg-white text-fg font-mono antialiased;
-  font-size: 13px;
-  line-height: 1.6;
+  min-height: 100%;
+  @apply bg-bg text-fg antialiased;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-tap-highlight-color: transparent;
 }
 
+/* Safe area helpers */
+.safe-area-top {
+  height: env(safe-area-inset-top);
+}
+
+.safe-area-bottom {
+  height: env(safe-area-inset-bottom);
+}
+
+/* Links */
 a {
-  @apply text-accent no-underline hover:underline;
+  @apply text-accent no-underline;
+}
+
+a:hover {
+  @apply underline;
 }
 
+/* Form inputs */
 input, select, textarea {
-  @apply border border-line bg-white px-3 py-2 text-sm font-mono;
-  @apply focus:outline-none focus:border-dim;
+  @apply border border-line bg-white px-4 py-3 text-base;
+  @apply focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent;
+  border-radius: 8px;
+  /* Prevent iOS zoom */
+  font-size: 16px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@media (min-width: 1024px) {
+  input, select, textarea {
+    @apply px-3 py-2 text-sm;
+    font-size: 14px;
+  }
 }
 
 input[type="checkbox"] {
-  @apply h-3.5 w-3.5 border border-line bg-white accent-accent;
-  @apply cursor-pointer;
+  @apply h-5 w-5 rounded border-2 border-line bg-white cursor-pointer;
+  min-width: 20px;
+  min-height: 20px;
+  accent-color: #2563eb;
+}
+
+input[type="date"] {
+  min-height: 48px;
+}
+
+@media (min-width: 1024px) {
+  input[type="date"] {
+    min-height: auto;
+  }
 }
 
 select {
-  @apply appearance-none cursor-pointer pr-7;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-width='1.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-  background-position: right 6px center;
+  @apply cursor-pointer pr-10;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+  background-position: right 12px center;
   background-repeat: no-repeat;
-  background-size: 14px;
+  background-size: 16px;
 }
 
 button {
-  @apply font-mono;
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
 }
 
+/* Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -60,6 +107,32 @@ button {
   background: #a3a3a3;
 }
 
+/* Selection */
 ::selection {
-  @apply bg-accent/10 text-fg;
+  @apply bg-accent/20 text-fg;
+}
+
+/* Line clamp */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Animations */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Prevent overscroll bounce on iOS */
+@supports (-webkit-touch-callout: none) {
+  body {
+    overscroll-behavior-y: none;
+  }
 }

frontend/app/layout.tsx

@@ -1,14 +1,33 @@
 import "./globals.css";
 import type { ReactNode } from "react";
+import type { Viewport, Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Swiss Case Law AI",
-  description: "Hybrid search + AI answers over Swiss case law"
+  description: "Search 800k+ Swiss court decisions with AI-powered answers",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Swiss Case Law"
+  }
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+  themeColor: "#ffffff"
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+      </head>
       <body>
         {children}
       </body>

frontend/app/page.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import { useEffect, useMemo, useState, useCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 
-// ============================================================================
-// Types
-// ============================================================================
-
 type Source = {
   id: string;
   name: string;
@@ -65,269 +61,42 @@ type AnswerResponse = {
   hits_count: number;
 };
 
-type Language = "de" | "fr" | "it" | "rm" | "en";
-
-type SortOption = "relevance" | "date_desc" | "date_asc" | "court";
-
-// ============================================================================
-// Translations
-// ============================================================================
-
-const translations: Record<Language, Record<string, string>> = {
-  de: {
-    title: "Schweizer Rechtsprechung",
-    subtitle: "Durchsuchen Sie Entscheide von Bundes- und Kantonsgerichten",
-    searchPlaceholder: "Suchen Sie nach Entscheiden...",
-    search: "Suchen",
-    filters: "Filter",
-    allLevels: "Alle Ebenen",
-    federal: "Bund",
-    cantonal: "Kantonal",
-    allCantons: "Alle Kantone",
-    anyLanguage: "Alle Sprachen",
-    from: "Von",
-    to: "Bis",
-    results: "Ergebnisse",
-    noResults: "Keine Ergebnisse gefunden",
-    loading: "Laden...",
-    loadMore: "Mehr laden",
-    aiAnswer: "KI-Antwort",
-    generating: "Generieren...",
-    aiHint: "Suchen Sie, um eine KI-generierte Antwort mit Zitaten zu erhalten.",
-    sources: "Quellen",
-    settings: "Einstellungen",
-    apiKey: "OpenAI API-Schlüssel",
-    close: "Schliessen",
-    clear: "Löschen",
-    source: "Quelle",
-    pdf: "PDF",
-    stats: "Statistiken",
-    api: "API",
-    sortBy: "Sortieren nach",
-    relevance: "Relevanz",
-    dateDesc: "Datum (neueste)",
-    dateAsc: "Datum (älteste)",
-    court: "Gericht",
-    decisions: "Entscheide",
-    searchHint: "Geben Sie eine Suchanfrage ein, um Entscheide zu finden.",
-  },
-  fr: {
-    title: "Jurisprudence Suisse",
-    subtitle: "Recherchez les décisions des tribunaux fédéraux et cantonaux",
-    searchPlaceholder: "Rechercher des décisions...",
-    search: "Rechercher",
-    filters: "Filtres",
-    allLevels: "Tous les niveaux",
-    federal: "Fédéral",
-    cantonal: "Cantonal",
-    allCantons: "Tous les cantons",
-    anyLanguage: "Toutes les langues",
-    from: "Du",
-    to: "Au",
-    results: "résultats",
-    noResults: "Aucun résultat trouvé",
-    loading: "Chargement...",
-    loadMore: "Charger plus",
-    aiAnswer: "Réponse IA",
-    generating: "Génération...",
-    aiHint: "Recherchez pour obtenir une réponse générée par IA avec citations.",
-    sources: "Sources",
-    settings: "Paramètres",
-    apiKey: "Clé API OpenAI",
-    close: "Fermer",
-    clear: "Effacer",
-    source: "Source",
-    pdf: "PDF",
-    stats: "Statistiques",
-    api: "API",
-    sortBy: "Trier par",
-    relevance: "Pertinence",
-    dateDesc: "Date (récent)",
-    dateAsc: "Date (ancien)",
-    court: "Tribunal",
-    decisions: "décisions",
-    searchHint: "Entrez une requête pour rechercher des décisions.",
-  },
-  it: {
-    title: "Giurisprudenza Svizzera",
-    subtitle: "Cerca le decisioni dei tribunali federali e cantonali",
-    searchPlaceholder: "Cerca decisioni...",
-    search: "Cerca",
-    filters: "Filtri",
-    allLevels: "Tutti i livelli",
-    federal: "Federale",
-    cantonal: "Cantonale",
-    allCantons: "Tutti i cantoni",
-    anyLanguage: "Tutte le lingue",
-    from: "Dal",
-    to: "Al",
-    results: "risultati",
-    noResults: "Nessun risultato trovato",
-    loading: "Caricamento...",
-    loadMore: "Carica altro",
-    aiAnswer: "Risposta IA",
-    generating: "Generazione...",
-    aiHint: "Cerca per ottenere una risposta generata dall'IA con citazioni.",
-    sources: "Fonti",
-    settings: "Impostazioni",
-    apiKey: "Chiave API OpenAI",
-    close: "Chiudi",
-    clear: "Cancella",
-    source: "Fonte",
-    pdf: "PDF",
-    stats: "Statistiche",
-    api: "API",
-    sortBy: "Ordina per",
-    relevance: "Rilevanza",
-    dateDesc: "Data (recente)",
-    dateAsc: "Data (vecchio)",
-    court: "Tribunale",
-    decisions: "decisioni",
-    searchHint: "Inserisci una query per cercare decisioni.",
-  },
-  rm: {
-    title: "Giurisprudenza Svizra",
-    subtitle: "Tschertgai decisiuns dals tribunals federals e chantunals",
-    searchPlaceholder: "Tschertgar decisiuns...",
-    search: "Tschertgar",
-    filters: "Filters",
-    allLevels: "Tuts nivels",
-    federal: "Federal",
-    cantonal: "Chantunal",
-    allCantons: "Tuts chantuns",
-    anyLanguage: "Tut las linguas",
-    from: "Da",
-    to: "Enfin",
-    results: "resultats",
-    noResults: "Nagins resultats chattads",
-    loading: "Chargiar...",
-    loadMore: "Chargiar dapli",
-    aiAnswer: "Resposta IA",
-    generating: "Generar...",
-    aiHint: "Tschertgai per obtegnair ina resposta generada da l'IA.",
-    sources: "Funtaunas",
-    settings: "Parameters",
-    apiKey: "Clav API OpenAI",
-    close: "Serrar",
-    clear: "Stizzar",
-    source: "Funtauna",
-    pdf: "PDF",
-    stats: "Statisticas",
-    api: "API",
-    sortBy: "Ordinar tenor",
-    relevance: "Relevanza",
-    dateDesc: "Data (nov)",
-    dateAsc: "Data (vegl)",
-    court: "Tribunal",
-    decisions: "decisiuns",
-    searchHint: "Endatai ina dumonda per tschertgar decisiuns.",
-  },
-  en: {
-    title: "Swiss Case Law",
-    subtitle: "Search federal and cantonal court decisions",
-    searchPlaceholder: "Search decisions...",
-    search: "Search",
-    filters: "Filters",
-    allLevels: "All levels",
-    federal: "Federal",
-    cantonal: "Cantonal",
-    allCantons: "All cantons",
-    anyLanguage: "Any language",
-    from: "From",
-    to: "To",
-    results: "results",
-    noResults: "No results found",
-    loading: "Loading...",
-    loadMore: "Load more",
-    aiAnswer: "AI Answer",
-    generating: "Generating...",
-    aiHint: "Search to get an AI-generated answer with citations.",
-    sources: "Sources",
-    settings: "Settings",
-    apiKey: "OpenAI API Key",
-    close: "Close",
-    clear: "Clear",
-    source: "Source",
-    pdf: "PDF",
-    stats: "Stats",
-    api: "API",
-    sortBy: "Sort by",
-    relevance: "Relevance",
-    dateDesc: "Date (newest)",
-    dateAsc: "Date (oldest)",
-    court: "Court",
-    decisions: "decisions",
-    searchHint: "Enter a query to search decisions.",
-  },
-};
-
-const languageNames: Record<Language, string> = {
-  de: "DE",
-  fr: "FR",
-  it: "IT",
-  rm: "RM",
-  en: "EN",
-};
-
-// ============================================================================
-// API
-// ============================================================================
-
 const API_BASE =
   process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/+$/, "") ?? "http://localhost:8000";
 
-// ============================================================================
-// Component
-// ============================================================================
-
 export default function HomePage() {
-  // Language
-  const [lang, setLang] = useState<Language>("de");
-  const t = useCallback((key: string) => translations[lang][key] || key, [lang]);
-
-  // Data
   const [sources, setSources] = useState<Source[]>([]);
-  const [stats, setStats] = useState<{ total: number } | null>(null);
-
-  // Search state
   const [query, setQuery] = useState("");
+  const [selectedSourceIds, setSelectedSourceIds] = useState<string[]>([]);
   const [level, setLevel] = useState<string>("");
   const [canton, setCanton] = useState<string>("");
   const [language, setLanguage] = useState<string>("");
   const [dateFrom, setDateFrom] = useState<string>("");
   const [dateTo, setDateTo] = useState<string>("");
-  const [sortBy, setSortBy] = useState<SortOption>("relevance");
 
-  // Results
   const [hits, setHits] = useState<SearchHit[]>([]);
-  const [totalResults, setTotalResults] = useState<number>(0);
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(false);
-  const PAGE_SIZE = 100;
+  const PAGE_SIZE = 20;
 
-  // AI
-  const [aiEnabled, setAiEnabled] = useState(false);
+  const [aiEnabled, setAiEnabled] = useState(true);
   const [answer, setAnswer] = useState<AnswerResponse | null>(null);
   const [answerLoading, setAnswerLoading] = useState(false);
+  const [showAiPanel, setShowAiPanel] = useState(false);
 
-  // Decision detail
   const [activeDecisionId, setActiveDecisionId] = useState<string | null>(null);
   const [activeDecision, setActiveDecision] = useState<any | null>(null);
   const [decisionLoading, setDecisionLoading] = useState(false);
 
-  // Settings
   const [apiKey, setApiKey] = useState<string>("");
   const [showSettings, setShowSettings] = useState(false);
   const [showFilters, setShowFilters] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
 
-  // Load saved preferences
   useEffect(() => {
-    const savedKey = localStorage.getItem("openai_api_key");
-    if (savedKey) setApiKey(savedKey);
-    
-    const savedLang = localStorage.getItem("ui_language") as Language;
-    if (savedLang && translations[savedLang]) setLang(savedLang);
+    const saved = localStorage.getItem("openai_api_key");
+    if (saved) setApiKey(saved);
   }, []);
 
   function saveApiKey(key: string) {
@@ -339,11 +108,6 @@ export default function HomePage() {
     }
   }
 
-  function saveLanguage(l: Language) {
-    setLang(l);
-    localStorage.setItem("ui_language", l);
-  }
-
   function getHeaders(): HeadersInit {
     const headers: HeadersInit = { "content-type": "application/json" };
     if (apiKey) {
@@ -352,17 +116,11 @@ export default function HomePage() {
     return headers;
   }
 
-  // Load sources and stats
   useEffect(() => {
     fetch(`${API_BASE}/api/sources`)
       .then((r) => r.json())
       .then((data) => setSources(Array.isArray(data) ? data : []))
       .catch(() => setSources([]));
-    
-    fetch(`${API_BASE}/api/stats`)
-      .then((r) => r.json())
-      .then((data) => setStats(data))
-      .catch(() => setStats(null));
   }, []);
 
   const cantons = useMemo(() => {
@@ -371,36 +129,12 @@ export default function HomePage() {
     return Array.from(set).sort();
   }, [sources]);
 
-  const docLanguages = useMemo(() => {
+  const languages = useMemo(() => {
     const set = new Set<string>();
     for (const s of sources) for (const l of s.languages || []) set.add(l);
     return Array.from(set).sort();
   }, [sources]);
 
-  // Sort hits client-side
-  const sortedHits = useMemo(() => {
-    if (sortBy === "relevance") return hits;
-    
-    return [...hits].sort((a, b) => {
-      if (sortBy === "date_desc") {
-        const dateA = a.decision.decision_date || "";
-        const dateB = b.decision.decision_date || "";
-        return dateB.localeCompare(dateA);
-      }
-      if (sortBy === "date_asc") {
-        const dateA = a.decision.decision_date || "";
-        const dateB = b.decision.decision_date || "";
-        return dateA.localeCompare(dateB);
-      }
-      if (sortBy === "court") {
-        const courtA = a.decision.court || a.decision.source_name || "";
-        const courtB = b.decision.court || b.decision.source_name || "";
-        return courtA.localeCompare(courtB);
-      }
-      return 0;
-    });
-  }, [hits, sortBy]);
-
   async function runSearch(newPage: number = 0) {
     const q = query.trim();
     if (!q) return;
@@ -409,11 +143,13 @@ export default function HomePage() {
     if (newPage === 0) {
       setAnswer(null);
       setHits([]);
-      setTotalResults(0);
     }
+    setShowFilters(false);
+    setShowMenu(false);
     setPage(newPage);
 
     const body: any = { query: q, limit: PAGE_SIZE, offset: newPage * PAGE_SIZE };
+    if (selectedSourceIds.length) body.source_ids = selectedSourceIds;
     if (level) body.level = level;
     if (canton) body.canton = canton;
     if (language) body.language = language;
@@ -424,14 +160,12 @@ export default function HomePage() {
       const res = await fetch(`${API_BASE}/api/search`, {
         method: "POST",
         headers: getHeaders(),
-        body: JSON.stringify(body),
+        body: JSON.stringify(body)
       });
       const data: SearchResponse = await res.json();
       const newHits = Array.isArray(data?.hits) ? data.hits : [];
-      
       if (newPage === 0) {
         setHits(newHits);
-        setTotalResults(data.total || newHits.length);
       } else {
         setHits((prev) => [...prev, ...newHits]);
       }
@@ -443,19 +177,24 @@ export default function HomePage() {
       setLoading(false);
     }
 
-    // AI answer (only on first page, if enabled)
-    if (aiEnabled && newPage === 0 && apiKey) {
+    if (aiEnabled && newPage === 0) {
       setAnswerLoading(true);
       try {
         const res = await fetch(`${API_BASE}/api/answer`, {
           method: "POST",
           headers: getHeaders(),
-          body: JSON.stringify({ ...body, offset: 0, limit: 20 }),
+          body: JSON.stringify({ ...body, offset: 0 })
         });
         const data: AnswerResponse = await res.json();
         setAnswer(data);
+        // Auto-show AI panel on mobile when answer arrives
+        if (data.answer) setShowAiPanel(true);
       } catch {
-        setAnswer(null);
+        setAnswer({
+          answer: "AI answer failed. Add your OpenAI API key in Settings.",
+          citations: [],
+          hits_count: 0
+        });
       } finally {
         setAnswerLoading(false);
       }
@@ -470,6 +209,7 @@ export default function HomePage() {
     setActiveDecisionId(decisionId);
     setDecisionLoading(true);
     setActiveDecision(null);
+    setShowAiPanel(false);
     try {
       const res = await fetch(`${API_BASE}/api/decisions/${decisionId}`);
       const data = await res.json();
@@ -481,410 +221,467 @@ export default function HomePage() {
     }
   }
 
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter") runSearch();
-  }
-
-  const activeFiltersCount = [level, canton, language, dateFrom, dateTo].filter(Boolean).length;
+  const activeFiltersCount = [
+    level,
+    canton,
+    language,
+    dateFrom,
+    dateTo,
+    ...selectedSourceIds
+  ].filter(Boolean).length;
 
   return (
-    <div className="min-h-screen bg-white text-neutral-900">
-      {/* Header */}
-      <header className="sticky top-0 z-40 bg-white/95 backdrop-blur border-b border-neutral-100">
-        <div className="mx-auto max-w-5xl px-4 sm:px-6">
-          {/* Top bar */}
-          <div className="flex items-center justify-between py-4">
+    <div className="min-h-screen bg-bg flex flex-col">
+      {/* Sticky Header */}
+      <header className="sticky top-0 z-40 bg-white border-b border-line shadow-sm">
+        <div className="safe-area-top" />
+        <div className="px-4 py-3 lg:max-w-6xl lg:mx-auto lg:px-6">
+          {/* Top row: Logo + Menu */}
+          <div className="flex items-center justify-between mb-3">
             <div>
-              <h1 className="text-lg font-semibold tracking-tight">{t("title")}</h1>
-              <p className="text-xs text-neutral-500 mt-0.5">
-                {stats ? `${stats.total.toLocaleString()} ${t("decisions")}` : t("subtitle")}
-              </p>
+              <h1 className="text-lg lg:text-base font-semibold text-fg">Swiss Case Law</h1>
+              <p className="text-xs text-dim hidden lg:block">800k+ decisions</p>
             </div>
             
-            <div className="flex items-center gap-1">
-              {/* Language switcher */}
-              <div className="flex border border-neutral-200 rounded-md overflow-hidden mr-4">
-                {(Object.keys(languageNames) as Language[]).map((l) => (
-                  <button
-                    key={l}
-                    onClick={() => saveLanguage(l)}
-                    className={`px-2 py-1 text-xs font-medium transition-colors ${
-                      lang === l
-                        ? "bg-neutral-900 text-white"
-                        : "text-neutral-500 hover:text-neutral-900 hover:bg-neutral-50"
-                    }`}
-                  >
-                    {languageNames[l]}
-                  </button>
-                ))}
-              </div>
-              
-              <Link
-                href="/stats"
-                className="px-3 py-1.5 text-xs text-neutral-500 hover:text-neutral-900 transition-colors"
-              >
-                {t("stats")}
-              </Link>
-              <a
-                href={`${API_BASE}/docs`}
-                target="_blank"
-                rel="noreferrer"
-                className="px-3 py-1.5 text-xs text-neutral-500 hover:text-neutral-900 transition-colors"
-              >
-                {t("api")}
-              </a>
-              <button
-                onClick={() => setShowSettings(true)}
-                className="px-3 py-1.5 text-xs text-neutral-500 hover:text-neutral-900 transition-colors"
-              >
-                {t("settings")}
+            {/* Desktop nav */}
+            <nav className="hidden lg:flex items-center gap-4 text-xs">
+              <label className="flex items-center gap-1.5 cursor-pointer text-dim hover:text-fg">
+                <input
+                  type="checkbox"
+                  checked={aiEnabled}
+                  onChange={(e) => setAiEnabled(e.target.checked)}
+                  className="!h-3.5 !w-3.5 !min-h-0 !min-w-0"
+                />
+                <span>AI</span>
+              </label>
+              <Link href="/stats" className="text-dim hover:text-fg">Stats</Link>
+              <Link href="/dashboard" className="text-dim hover:text-fg">Sources</Link>
+              <button onClick={() => setShowSettings(true)} className="text-dim hover:text-fg">
+                {apiKey ? "API ✓" : "Settings"}
               </button>
+              <a href={`${API_BASE}/docs`} target="_blank" rel="noreferrer" className="text-dim hover:text-fg">
+                API
+              </a>
+            </nav>
+            
+            {/* Mobile menu button */}
+            <button 
+              onClick={() => setShowMenu(!showMenu)}
+              className="lg:hidden p-2 -mr-2 text-dim hover:text-fg"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+          
+          {/* Search row */}
+          <div className="flex gap-2">
+            <div className="flex-1 relative">
+              <input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
+                placeholder="Search Swiss court decisions..."
+                className="w-full pl-4 pr-4 py-3 lg:py-2 rounded-lg border border-line bg-white text-base lg:text-sm focus:border-accent focus:ring-1 focus:ring-accent"
+              />
             </div>
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className={`px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
+                activeFiltersCount > 0
+                  ? "border-accent bg-accent/10 text-accent"
+                  : "border-line text-dim hover:text-fg hover:border-dim"
+              }`}
+            >
+              <svg className="w-5 h-5 lg:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+              </svg>
+              <span className="hidden lg:inline">Filters{activeFiltersCount > 0 ? ` (${activeFiltersCount})` : ""}</span>
+            </button>
+            <button
+              onClick={() => runSearch()}
+              disabled={!query.trim() || loading}
+              className="px-5 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+              ) : "Search"}
+            </button>
           </div>
-
-          {/* Search bar */}
-          <div className="pb-4">
-            <div className="flex gap-2">
-              <div className="flex-1 relative">
-                <input
-                  type="text"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder={t("searchPlaceholder")}
-                  className="w-full h-12 px-4 text-base border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:border-transparent transition-shadow"
-                />
-              </div>
-              <button
-                onClick={() => setShowFilters(!showFilters)}
-                className={`h-12 px-4 text-sm font-medium border rounded-lg transition-colors ${
-                  activeFiltersCount > 0
-                    ? "border-neutral-900 text-neutral-900 bg-neutral-50"
-                    : "border-neutral-200 text-neutral-500 hover:border-neutral-300 hover:text-neutral-700"
-                }`}
+          
+          {/* Filters - slide down */}
+          {showFilters && (
+            <div className="mt-3 pt-3 border-t border-line grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
+              <select
+                className="rounded-lg text-sm"
+                value={level}
+                onChange={(e) => setLevel(e.target.value)}
               >
-                {t("filters")}
-                {activeFiltersCount > 0 && (
-                  <span className="ml-1.5 inline-flex items-center justify-center w-5 h-5 text-xs bg-neutral-900 text-white rounded-full">
-                    {activeFiltersCount}
-                  </span>
-                )}
-              </button>
-              <button
-                onClick={() => runSearch()}
-                disabled={!query.trim() || loading}
-                className="h-12 px-6 text-sm font-medium bg-neutral-900 text-white rounded-lg hover:bg-neutral-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                <option value="">All levels</option>
+                <option value="federal">Federal</option>
+                <option value="cantonal">Cantonal</option>
+              </select>
+              <select
+                className="rounded-lg text-sm"
+                value={canton}
+                onChange={(e) => setCanton(e.target.value)}
+                disabled={level === "federal"}
               >
-                {loading ? "..." : t("search")}
-              </button>
+                <option value="">All cantons</option>
+                {cantons.map((c) => (<option key={c} value={c}>{c}</option>))}
+              </select>
+              <select
+                className="rounded-lg text-sm"
+                value={language}
+                onChange={(e) => setLanguage(e.target.value)}
+              >
+                <option value="">Any language</option>
+                {languages.map((l) => (<option key={l} value={l}>{l}</option>))}
+              </select>
+              <input
+                type="date"
+                className="rounded-lg text-sm"
+                value={dateFrom}
+                onChange={(e) => setDateFrom(e.target.value)}
+              />
+              <input
+                type="date"
+                className="rounded-lg text-sm"
+                value={dateTo}
+                onChange={(e) => setDateTo(e.target.value)}
+              />
             </div>
-
-            {/* Filters */}
-            {showFilters && (
-              <div className="mt-3 p-4 border border-neutral-200 rounded-lg bg-neutral-50/50">
-                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
-                  <select
-                    value={level}
-                    onChange={(e) => setLevel(e.target.value)}
-                    className="h-10 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900"
-                  >
-                    <option value="">{t("allLevels")}</option>
-                    <option value="federal">{t("federal")}</option>
-                    <option value="cantonal">{t("cantonal")}</option>
-                  </select>
-                  
-                  <select
-                    value={canton}
-                    onChange={(e) => setCanton(e.target.value)}
-                    disabled={level === "federal"}
-                    className="h-10 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900 disabled:opacity-50"
-                  >
-                    <option value="">{t("allCantons")}</option>
-                    {cantons.map((c) => (
-                      <option key={c} value={c}>{c}</option>
-                    ))}
-                  </select>
-                  
-                  <select
-                    value={language}
-                    onChange={(e) => setLanguage(e.target.value)}
-                    className="h-10 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900"
-                  >
-                    <option value="">{t("anyLanguage")}</option>
-                    {docLanguages.map((l) => (
-                      <option key={l} value={l}>{l.toUpperCase()}</option>
-                    ))}
-                  </select>
-                  
-                  <input
-                    type="date"
-                    value={dateFrom}
-                    onChange={(e) => setDateFrom(e.target.value)}
-                    className="h-10 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900"
-                    placeholder={t("from")}
-                  />
-                  
-                  <input
-                    type="date"
-                    value={dateTo}
-                    onChange={(e) => setDateTo(e.target.value)}
-                    className="h-10 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900"
-                    placeholder={t("to")}
-                  />
-                  
-                  <button
-                    onClick={() => {
-                      setLevel("");
-                      setCanton("");
-                      setLanguage("");
-                      setDateFrom("");
-                      setDateTo("");
-                    }}
-                    className="h-10 px-3 text-sm text-neutral-500 hover:text-neutral-900 border border-neutral-200 rounded-md bg-white transition-colors"
-                  >
-                    {t("clear")}
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
+          )}
         </div>
       </header>
 
-      {/* Main content */}
-      <main className="mx-auto max-w-5xl px-4 sm:px-6 py-6">
-        {/* Results header */}
-        {hits.length > 0 && (
-          <div className="flex items-center justify-between mb-4">
-            <p className="text-sm text-neutral-500">
-              {totalResults.toLocaleString()} {t("results")}
-            </p>
-            <div className="flex items-center gap-2">
-              <label className="flex items-center gap-2 text-sm text-neutral-500">
+      {/* Mobile Menu Dropdown */}
+      {showMenu && (
+        <div className="lg:hidden fixed inset-0 z-50 bg-black/50" onClick={() => setShowMenu(false)}>
+          <div 
+            className="absolute top-0 right-0 w-64 bg-white h-full shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="safe-area-top" />
+            <div className="p-4 border-b border-line flex items-center justify-between">
+              <span className="font-medium">Menu</span>
+              <button onClick={() => setShowMenu(false)} className="p-2 -mr-2">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <nav className="p-4 space-y-1">
+              <label className="flex items-center gap-3 p-3 rounded-lg hover:bg-bg cursor-pointer">
                 <input
                   type="checkbox"
                   checked={aiEnabled}
                   onChange={(e) => setAiEnabled(e.target.checked)}
-                  className="rounded"
+                  className="!h-5 !w-5"
                 />
-                {t("aiAnswer")}
+                <span>AI Answers</span>
               </label>
-              <select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value as SortOption)}
-                className="h-9 px-3 text-sm border border-neutral-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-neutral-900"
+              <Link href="/stats" className="flex items-center gap-3 p-3 rounded-lg hover:bg-bg">
+                <svg className="w-5 h-5 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+                <span>Statistics</span>
+              </Link>
+              <Link href="/dashboard" className="flex items-center gap-3 p-3 rounded-lg hover:bg-bg">
+                <svg className="w-5 h-5 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+                <span>Data Sources</span>
+              </Link>
+              <button 
+                onClick={() => { setShowMenu(false); setShowSettings(true); }} 
+                className="flex items-center gap-3 p-3 rounded-lg hover:bg-bg w-full text-left"
               >
-                <option value="relevance">{t("relevance")}</option>
-                <option value="date_desc">{t("dateDesc")}</option>
-                <option value="date_asc">{t("dateAsc")}</option>
-                <option value="court">{t("court")}</option>
-              </select>
-            </div>
-          </div>
-        )}
-
-        {/* AI Answer */}
-        {aiEnabled && (answer || answerLoading) && (
-          <div className="mb-6 p-5 border border-neutral-200 rounded-xl bg-gradient-to-br from-neutral-50 to-white">
-            <div className="flex items-center gap-2 mb-3">
-              <div className="w-6 h-6 rounded-full bg-neutral-900 flex items-center justify-center">
-                <svg className="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                <svg className="w-5 h-5 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                 </svg>
-              </div>
-              <span className="text-sm font-medium">{t("aiAnswer")}</span>
-            </div>
-            
-            {answerLoading ? (
-              <p className="text-sm text-neutral-500">{t("generating")}</p>
-            ) : answer ? (
-              <>
-                <p className="text-sm leading-relaxed whitespace-pre-wrap">{answer.answer}</p>
-                {answer.citations?.length > 0 && (
-                  <div className="mt-4 pt-3 border-t border-neutral-100">
-                    <p className="text-xs font-medium text-neutral-500 mb-2">{t("sources")}</p>
-                    <div className="flex flex-wrap gap-2">
-                      {answer.citations.map((c) => (
-                        <span
-                          key={c.marker}
-                          className="inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-neutral-100 rounded"
-                        >
-                          <span className="font-medium">[{c.marker}]</span>
-                          <span className="text-neutral-600">{c.docket || c.source_name}</span>
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </>
-            ) : null}
+                <span>Settings</span>
+                {apiKey && <span className="ml-auto text-xs text-accent">✓</span>}
+              </button>
+              <a 
+                href={`${API_BASE}/docs`} 
+                target="_blank" 
+                rel="noreferrer"
+                className="flex items-center gap-3 p-3 rounded-lg hover:bg-bg"
+              >
+                <svg className="w-5 h-5 text-dim" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+                <span>API Docs</span>
+              </a>
+            </nav>
           </div>
-        )}
+        </div>
+      )}
 
-        {/* Results */}
-        {loading && hits.length === 0 && (
-          <div className="py-20 text-center">
-            <div className="inline-block w-6 h-6 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin" />
-            <p className="mt-3 text-sm text-neutral-500">{t("loading")}</p>
-          </div>
-        )}
+      {/* Main Content */}
+      <main className="flex-1 lg:max-w-6xl lg:mx-auto lg:px-6 w-full">
+        <div className="lg:grid lg:grid-cols-3 lg:gap-6 lg:py-6">
+          {/* Results */}
+          <section className="lg:col-span-2">
+            {loading && hits.length === 0 && (
+              <div className="flex items-center justify-center py-20">
+                <div className="text-center">
+                  <svg className="w-8 h-8 animate-spin text-accent mx-auto mb-3" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  <p className="text-sm text-dim">Searching...</p>
+                </div>
+              </div>
+            )}
 
-        {!loading && hits.length === 0 && (
-          <div className="py-20 text-center">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-neutral-100 flex items-center justify-center">
-              <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <p className="text-neutral-500">{t("searchHint")}</p>
-          </div>
-        )}
+            {!loading && hits.length === 0 && (
+              <div className="flex items-center justify-center py-20 px-4">
+                <div className="text-center max-w-sm">
+                  <svg className="w-12 h-12 text-line mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                  <p className="text-dim">Search across 800k+ Swiss court decisions from federal and cantonal courts.</p>
+                </div>
+              </div>
+            )}
 
-        {sortedHits.length > 0 && (
-          <div className="space-y-1">
-            {sortedHits.map((hit, idx) => (
-              <button
-                key={`${hit.decision.id}-${idx}`}
-                onClick={() => openDecision(hit.decision.id)}
-                className="w-full text-left p-4 rounded-lg hover:bg-neutral-50 transition-colors group"
-              >
-                <div className="flex items-start justify-between gap-4">
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="font-medium text-neutral-900">
-                        {hit.decision.docket || hit.decision.source_name}
-                      </span>
-                      {hit.decision.canton && (
-                        <span className="px-1.5 py-0.5 text-xs font-medium bg-neutral-100 text-neutral-600 rounded">
-                          {hit.decision.canton}
-                        </span>
-                      )}
-                      {hit.decision.language && (
-                        <span className="px-1.5 py-0.5 text-xs bg-neutral-50 text-neutral-500 rounded">
-                          {hit.decision.language.toUpperCase()}
-                        </span>
-                      )}
-                    </div>
-                    <div className="mt-1 text-xs text-neutral-500">
-                      {hit.decision.decision_date || "—"}
-                      {hit.decision.court && ` · ${hit.decision.court}`}
-                    </div>
-                    <p className="mt-2 text-sm text-neutral-600 line-clamp-2">{hit.snippet}</p>
+            {hits.length > 0 && (
+              <div>
+                <div className="px-4 py-3 lg:px-0 lg:pb-3 flex items-center justify-between border-b border-line lg:border-0">
+                  <span className="text-sm text-dim">{hits.length} results</span>
+                  {aiEnabled && answer && (
+                    <button 
+                      onClick={() => setShowAiPanel(true)}
+                      className="lg:hidden flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-accent/10 text-accent text-sm font-medium"
+                    >
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                      </svg>
+                      AI Answer
+                    </button>
+                  )}
+                </div>
+                
+                <div className="divide-y divide-line">
+                  {hits.map((h, idx) => (
+                    <button
+                      key={`${h.decision.id}-${idx}`}
+                      onClick={() => openDecision(h.decision.id)}
+                      className="w-full text-left px-4 py-4 lg:px-0 hover:bg-white lg:hover:bg-bg/50 transition-colors active:bg-bg"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium text-fg">
+                            {h.decision.docket || h.decision.source_name}
+                            {h.decision.canton && (
+                              <span className="font-normal text-dim"> · {h.decision.canton}</span>
+                            )}
+                          </div>
+                          <div className="mt-1 text-sm text-dim">
+                            {h.decision.decision_date || "—"}
+                            {h.decision.court && ` · ${h.decision.court}`}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-faint tabular-nums bg-bg px-2 py-0.5 rounded">
+                            {Math.round(h.score * 100)}%
+                          </span>
+                          <svg className="w-4 h-4 text-dim lg:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </div>
+                      </div>
+                      <p className="mt-2 text-sm text-dim line-clamp-2">{h.snippet}</p>
+                    </button>
+                  ))}
+                </div>
+                
+                {hasMore && (
+                  <div className="px-4 py-4 lg:px-0">
+                    <button
+                      onClick={loadMore}
+                      disabled={loading}
+                      className="w-full py-3 rounded-lg border border-line text-accent font-medium hover:bg-bg disabled:opacity-50"
+                    >
+                      {loading ? "Loading..." : "Load more results"}
+                    </button>
                   </div>
-                  <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <svg className="w-5 h-5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                )}
+              </div>
+            )}
+          </section>
+
+          {/* AI Answer - Desktop sidebar */}
+          <aside className="hidden lg:block lg:col-span-1">
+            {aiEnabled && (
+              <div className="sticky top-24 border border-line bg-white p-4 rounded-lg">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-sm font-medium text-fg">AI Answer</span>
+                  {answer?.hits_count ? (
+                    <span className="text-xs text-dim">{answer.hits_count} sources</span>
+                  ) : null}
+                </div>
+
+                {answerLoading && (
+                  <div className="flex items-center gap-2 text-sm text-dim">
+                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                     </svg>
+                    Generating...
                   </div>
-                </div>
-              </button>
-            ))}
-
-            {hasMore && (
-              <div className="pt-4">
-                <button
-                  onClick={loadMore}
-                  disabled={loading}
-                  className="w-full py-3 text-sm font-medium text-neutral-600 hover:text-neutral-900 border border-neutral-200 rounded-lg hover:border-neutral-300 transition-colors disabled:opacity-50"
-                >
-                  {loading ? t("loading") : t("loadMore")}
-                </button>
+                )}
+
+                {!answerLoading && !answer && (
+                  <p className="text-sm text-dim">Search to get an AI-generated answer with citations.</p>
+                )}
+
+                {answer && (
+                  <>
+                    <div className="text-sm text-fg leading-relaxed whitespace-pre-wrap">{answer.answer}</div>
+                    {answer.citations?.length > 0 && (
+                      <div className="mt-4 pt-3 border-t border-line">
+                        <div className="text-xs font-medium text-dim mb-2">Sources</div>
+                        <div className="space-y-1">
+                          {answer.citations.map((c) => (
+                            <button
+                              key={c.marker}
+                              onClick={() => openDecision(c.decision_id)}
+                              className="text-xs text-left w-full p-2 rounded hover:bg-bg"
+                            >
+                              <span className="text-accent font-medium">[{c.marker}]</span>{" "}
+                              <span className="text-dim">{c.docket || c.source_name}</span>
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
             )}
-          </div>
-        )}
+          </aside>
+        </div>
       </main>
 
+      {/* Mobile AI Answer Bottom Sheet */}
+      {showAiPanel && aiEnabled && answer && (
+        <div 
+          className="lg:hidden fixed inset-0 z-50 bg-black/50"
+          onClick={() => setShowAiPanel(false)}
+        >
+          <div 
+            className="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-h-[80vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="safe-area-bottom" />
+            <div className="flex justify-center pt-3 pb-2">
+              <div className="w-10 h-1 bg-line rounded-full" />
+            </div>
+            <div className="px-4 pb-2 flex items-center justify-between border-b border-line">
+              <span className="font-medium">AI Answer</span>
+              <button onClick={() => setShowAiPanel(false)} className="p-2 -mr-2 text-dim">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="flex-1 overflow-auto p-4">
+              <div className="text-sm text-fg leading-relaxed whitespace-pre-wrap">{answer.answer}</div>
+              {answer.citations?.length > 0 && (
+                <div className="mt-4 pt-3 border-t border-line">
+                  <div className="text-xs font-medium text-dim mb-2">Sources</div>
+                  <div className="space-y-1">
+                    {answer.citations.map((c) => (
+                      <button
+                        key={c.marker}
+                        onClick={() => openDecision(c.decision_id)}
+                        className="text-sm text-left w-full p-3 rounded-lg bg-bg active:bg-line"
+                      >
+                        <span className="text-accent font-medium">[{c.marker}]</span>{" "}
+                        <span className="text-dim">{c.docket || c.source_name}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Decision Modal */}
       {activeDecisionId && (
         <div
-          className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm overflow-auto"
-          onClick={() => {
-            setActiveDecisionId(null);
-            setActiveDecision(null);
-          }}
+          className="fixed inset-0 z-50 bg-black/50 lg:p-8 overflow-auto"
+          onClick={() => { setActiveDecisionId(null); setActiveDecision(null); }}
         >
-          <div className="min-h-full flex items-start justify-center p-4 sm:p-8">
-            <div
-              className="w-full max-w-3xl bg-white rounded-xl shadow-2xl overflow-hidden"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {/* Modal header */}
-              <div className="sticky top-0 bg-white border-b border-neutral-100 px-6 py-4">
-                <div className="flex items-start justify-between gap-4">
-                  <div>
-                    <h2 className="text-lg font-semibold text-neutral-900">
-                      {activeDecision?.docket || activeDecision?.source_name || "Decision"}
-                    </h2>
-                    <div className="mt-1 flex items-center gap-2 text-sm text-neutral-500">
-                      {activeDecision?.decision_date}
-                      {activeDecision?.canton && (
-                        <span className="px-1.5 py-0.5 text-xs font-medium bg-neutral-100 rounded">
-                          {activeDecision.canton}
-                        </span>
-                      )}
-                      {activeDecision?.language && (
-                        <span className="px-1.5 py-0.5 text-xs bg-neutral-50 rounded">
-                          {activeDecision.language.toUpperCase()}
-                        </span>
-                      )}
-                    </div>
-                    {(activeDecision?.url || activeDecision?.pdf_url) && (
-                      <div className="mt-2 flex gap-3">
-                        {activeDecision?.url && (
-                          <a
-                            href={activeDecision.url}
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-sm text-neutral-600 hover:text-neutral-900 underline"
-                          >
-                            {t("source")} ↗
-                          </a>
-                        )}
-                        {activeDecision?.pdf_url && (
-                          <a
-                            href={activeDecision.pdf_url}
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-sm text-neutral-600 hover:text-neutral-900 underline"
-                          >
-                            {t("pdf")} ↗
-                          </a>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  <button
-                    onClick={() => {
-                      setActiveDecisionId(null);
-                      setActiveDecision(null);
-                    }}
-                    className="p-2 text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 rounded-lg transition-colors"
-                  >
-                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
+          <div
+            className="min-h-full lg:min-h-0 lg:mx-auto lg:max-w-3xl bg-white lg:rounded-lg flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="safe-area-top lg:hidden" />
+            <div className="sticky top-0 bg-white border-b border-line px-4 py-3 flex items-start justify-between gap-4 z-10">
+              <div className="min-w-0 flex-1">
+                <div className="font-medium text-fg">
+                  {activeDecision?.docket || activeDecision?.source_name || "Decision"}
                 </div>
-              </div>
-
-              {/* Modal content */}
-              <div className="px-6 py-4 max-h-[70vh] overflow-auto">
-                {decisionLoading && (
-                  <div className="py-8 text-center">
-                    <div className="inline-block w-6 h-6 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin" />
+                <div className="mt-1 text-sm text-dim">
+                  {activeDecision?.decision_date}
+                  {activeDecision?.canton && ` · ${activeDecision.canton}`}
+                  {activeDecision?.language && ` · ${activeDecision.language}`}
+                </div>
+                {(activeDecision?.url || activeDecision?.pdf_url) && (
+                  <div className="mt-2 flex gap-4">
+                    {activeDecision?.url && (
+                      <a href={activeDecision.url} target="_blank" rel="noreferrer" className="text-sm text-accent">
+                        Source ↗
+                      </a>
+                    )}
+                    {activeDecision?.pdf_url && (
+                      <a href={activeDecision.pdf_url} target="_blank" rel="noreferrer" className="text-sm text-accent">
+                        PDF ↗
+                      </a>
+                    )}
                   </div>
                 )}
-                {!decisionLoading && activeDecision?.content_text && (
-                  <pre className="whitespace-pre-wrap text-sm leading-relaxed text-neutral-700 font-sans">
-                    {activeDecision.content_text}
-                  </pre>
-                )}
-                {!decisionLoading && activeDecision?.error && (
-                  <p className="py-8 text-center text-neutral-500">Failed to load decision.</p>
-                )}
               </div>
+              <button
+                onClick={() => { setActiveDecisionId(null); setActiveDecision(null); }}
+                className="shrink-0 w-10 h-10 lg:w-auto lg:h-auto flex items-center justify-center rounded-full bg-bg lg:bg-transparent text-dim hover:text-fg"
+              >
+                <svg className="w-5 h-5 lg:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                <span className="hidden lg:inline text-sm">Close</span>
+              </button>
             </div>
+            <div className="flex-1 p-4 lg:max-h-[70vh] lg:overflow-auto">
+              {decisionLoading && (
+                <div className="flex items-center justify-center py-12">
+                  <svg className="w-6 h-6 animate-spin text-accent" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                </div>
+              )}
+              {!decisionLoading && activeDecision?.content_text && (
+                <pre className="whitespace-pre-wrap text-sm leading-relaxed text-fg font-mono">
+                  {activeDecision.content_text}
+                </pre>
+              )}
+              {!decisionLoading && activeDecision?.error && (
+                <p className="text-sm text-dim text-center py-12">Failed to load decision.</p>
+              )}
+            </div>
+            <div className="safe-area-bottom lg:hidden" />
           </div>
         </div>
       )}
@@ -892,49 +689,51 @@ export default function HomePage() {
       {/* Settings Modal */}
       {showSettings && (
         <div
-          className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
+          className="fixed inset-0 z-50 bg-black/50 flex items-end lg:items-center justify-center"
           onClick={() => setShowSettings(false)}
         >
           <div
-            className="w-full max-w-md bg-white rounded-xl shadow-2xl overflow-hidden"
+            className="w-full lg:max-w-md bg-white rounded-t-2xl lg:rounded-lg"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between border-b border-neutral-100 px-6 py-4">
-              <h3 className="text-lg font-semibold">{t("settings")}</h3>
-              <button
-                onClick={() => setShowSettings(false)}
-                className="p-2 text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 rounded-lg transition-colors"
-              >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="flex justify-center pt-3 pb-2 lg:hidden">
+              <div className="w-10 h-1 bg-line rounded-full" />
+            </div>
+            <div className="px-4 py-3 border-b border-line flex items-center justify-between">
+              <span className="font-medium">Settings</span>
+              <button onClick={() => setShowSettings(false)} className="p-2 -mr-2 text-dim lg:hidden">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
+              <button onClick={() => setShowSettings(false)} className="hidden lg:block text-sm text-dim hover:text-fg">
+                Close
+              </button>
             </div>
-            <div className="p-6 space-y-4">
+            <div className="p-4 space-y-4">
               <div>
-                <label className="block text-sm font-medium text-neutral-700 mb-1.5">
-                  {t("apiKey")}
-                </label>
+                <label className="text-sm text-dim block mb-2">OpenAI API Key</label>
                 <input
                   type="password"
                   value={apiKey}
                   onChange={(e) => saveApiKey(e.target.value)}
                   placeholder="sk-..."
-                  className="w-full h-10 px-3 text-sm border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-900"
+                  className="w-full rounded-lg"
                 />
-                <div className="mt-2 flex items-center justify-between text-xs text-neutral-500">
-                  <span>{apiKey ? `Set: ${apiKey.slice(0, 7)}...` : "Not set — required for AI answers"}</span>
+                <div className="mt-2 flex items-center justify-between text-sm text-dim">
+                  <span>{apiKey ? `Key set: ${apiKey.slice(0, 7)}...` : "No key set"}</span>
                   {apiKey && (
-                    <button
-                      onClick={() => saveApiKey("")}
-                      className="text-red-600 hover:underline"
-                    >
-                      {t("clear")}
+                    <button onClick={() => saveApiKey("")} className="text-accent">
+                      Clear
                     </button>
                   )}
                 </div>
+                <p className="mt-3 text-xs text-dim">
+                  Your API key is stored locally in your browser and never sent to our servers.
+                </p>
               </div>
             </div>
+            <div className="safe-area-bottom" />
           </div>
         </div>
       )}