diff --git a/frontend/src/app/conversations/page.tsx b/frontend/src/app/conversations/page.tsx
index e15da465..97e3a9ba 100644
--- a/frontend/src/app/conversations/page.tsx
+++ b/frontend/src/app/conversations/page.tsx
@@ -148,7 +148,7 @@ export default function ConversationsPage() {
             type="button"
             onClick={handleClearAll}
             disabled={items.length === 0 && !listLoading}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
           >
             Clear all
           </button>
@@ -242,7 +242,7 @@ function ConvRow({
           "flex w-full flex-col gap-1.5 rounded-[var(--radius-md)] px-3 py-2.5 text-left transition",
           active
             ? "bg-[var(--cnrs-yellow)] text-[var(--cnrs-blue)]"
-            : "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
+            : "text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
         ].join(" ")}
       >
         <span className="line-clamp-2 text-sm font-medium leading-snug">
@@ -266,7 +266,7 @@ function ConvRow({
               className={[
                 "rounded-full px-1.5 py-0.5 font-mono",
                 active
-                  ? "bg-[var(--cnrs-blue)]/10 text-[var(--cnrs-blue)]"
+                  ? "bg-[var(--cnrs-blue)]/10 text-[var(--text-body)]"
                   : "bg-[var(--cnrs-grey-light)] text-[var(--text-muted)]",
               ].join(" ")}
             >
@@ -275,7 +275,7 @@ function ConvRow({
           )}
           <span
             className={
-              active ? "text-[var(--cnrs-blue)]/70" : "text-[var(--text-muted)]"
+              active ? "text-[var(--text-body)]/70" : "text-[var(--text-muted)]"
             }
           >
             {relativeTime(conv.updated_at ?? conv.created_at)}
@@ -307,7 +307,7 @@ function EmptyState() {
         style={{ background: "var(--cnrs-yellow)" }}
         aria-hidden
       />
-      <h2 className="text-xl font-semibold text-[var(--cnrs-blue)]">
+      <h2 className="text-xl font-semibold text-[var(--text-body)]">
         Select a conversation
       </h2>
       <p className="max-w-md text-sm text-[var(--text-muted)]">
@@ -354,11 +354,11 @@ function DetailPane({
         <button
           type="button"
           onClick={onBack}
-          className="rounded-[var(--radius-sm)] px-2 py-1 text-xs text-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)] md:hidden"
+          className="rounded-[var(--radius-sm)] px-2 py-1 text-xs text-[var(--text-body)] hover:bg-[var(--surface-hover)] md:hidden"
         >
           ← Back
         </button>
-        <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--cnrs-blue)]">
+        <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-body)]">
           {detail?.title?.trim() || (loading ? "Loading…" : "Untitled")}
         </h2>
         {detail?.kb_name && (
@@ -368,7 +368,7 @@ function DetailPane({
         )}
         <a
           href={convApi.exportUrl(id)}
-          className="rounded-[var(--radius-sm)] border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-grey-light)]"
+          className="rounded-[var(--radius-sm)] border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
         >
           Export JSON
         </a>
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
index 348598af..be9e06c0 100644
Binary files a/frontend/src/app/favicon.ico and b/frontend/src/app/favicon.ico differ
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 8db92add..e13cd412 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -31,6 +31,8 @@
   --border: #dfe4ec;
   --text-body: #00284b;
   --text-muted: #4a5b75;
+  --surface-hover: var(--cnrs-grey-light);   /* light grey hover (unchanged in light mode) */
+  color-scheme: light;
 
   /* Geometry */
   --radius-sm: 8px;
@@ -77,6 +79,8 @@ html:not(.theme-light) {
     --border: #1d3d5e;
     --text-body: #ebf0f5;
     --text-muted: #8296a5;
+  --surface-hover: #1b3f63;   /* subtle elevated navy for button :hover (was a near-white flash) */
+  color-scheme: dark;          /* themes native controls (select dropdowns, scrollbars) */
     --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
     --shadow-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
     /* In dark mode, "CNRS-blue accent text" disappears against the
@@ -95,6 +99,8 @@ html.theme-dark {
   --border: #1d3d5e;
   --text-body: #ebf0f5;
   --text-muted: #8296a5;
+  --surface-hover: #1b3f63;   /* subtle elevated navy for button :hover (was a near-white flash) */
+  color-scheme: dark;          /* themes native controls (select dropdowns, scrollbars) */
   --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
   --shadow-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
   --accent-fg: #ffeb6e;
@@ -110,6 +116,8 @@ html.theme-light {
   --border: #dfe4ec;
   --text-body: #00284b;
   --text-muted: #4a5b75;
+  --surface-hover: var(--cnrs-grey-light);   /* light grey hover (unchanged in light mode) */
+  color-scheme: light;
   --shadow-card: 0 8px 30px rgba(0, 40, 75, 0.08);
   --shadow-elev: 0 16px 48px rgba(0, 40, 75, 0.12);
 }
diff --git a/frontend/src/app/icon.svg b/frontend/src/app/icon.svg
new file mode 100644
index 00000000..bdce6f7e
--- /dev/null
+++ b/frontend/src/app/icon.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Perspicacité favicon: the CNRS-yellow "sun" on the app's deep navy.
+       Mirrors the hero/sidebar logo (solid #ffeb6e disc) plus the
+       .cnrs-sun corona (soft concentric halo rings). -->
+  <rect width="32" height="32" rx="7" fill="#0a2238"/>
+  <circle cx="16" cy="16" r="10.5" fill="#ffeb6e" opacity="0.16"/>
+  <circle cx="16" cy="16" r="8.5" fill="#ffeb6e" opacity="0.32"/>
+  <circle cx="16" cy="16" r="6.5" fill="#ffeb6e"/>
+</svg>
diff --git a/frontend/src/app/kb/[name]/expand/_components/CandidateList.tsx b/frontend/src/app/kb/[name]/expand/_components/CandidateList.tsx
index 1269886d..0996eaad 100644
--- a/frontend/src/app/kb/[name]/expand/_components/CandidateList.tsx
+++ b/frontend/src/app/kb/[name]/expand/_components/CandidateList.tsx
@@ -22,7 +22,7 @@ export function CandidateList({ candidates }: { candidates: ExpandCandidate[] })
             {c.score.toFixed(3)}
           </span>
           <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium leading-snug text-[var(--cnrs-blue)]">
+            <p className="text-sm font-medium leading-snug text-[var(--text-body)]">
               {c.title ?? c.doi ?? "(untitled)"}
             </p>
             {c.doi && (
diff --git a/frontend/src/app/kb/[name]/expand/_components/SampleLabeler.tsx b/frontend/src/app/kb/[name]/expand/_components/SampleLabeler.tsx
index 48e2b1b5..b5234840 100644
--- a/frontend/src/app/kb/[name]/expand/_components/SampleLabeler.tsx
+++ b/frontend/src/app/kb/[name]/expand/_components/SampleLabeler.tsx
@@ -28,7 +28,7 @@ export function SampleLabeler({
             className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-4 shadow-[var(--shadow-card)]"
           >
             <div className="flex items-start justify-between gap-3">
-              <h3 className="text-[15px] font-semibold leading-snug text-[var(--cnrs-blue)]">
+              <h3 className="text-[15px] font-semibold leading-snug text-[var(--text-body)]">
                 {s.title ?? s.doi ?? "(untitled)"}
               </h3>
               <span className="shrink-0 rounded-full bg-[var(--cnrs-grey-light)] px-2 py-0.5 font-mono text-[11px] text-[var(--cnrs-blue)]">
@@ -49,7 +49,7 @@ export function SampleLabeler({
                   "rounded-[var(--radius-md)] px-3 py-1.5 text-sm font-medium transition",
                   label === true
                     ? "bg-[var(--cnrs-blue)] text-white"
-                    : "border border-[var(--border)] text-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)]",
+                    : "border border-[var(--border)] text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
                 ].join(" ")}
               >
                 Relevant
diff --git a/frontend/src/app/kb/[name]/expand/page.tsx b/frontend/src/app/kb/[name]/expand/page.tsx
index 4abddb91..2cf3a614 100644
--- a/frontend/src/app/kb/[name]/expand/page.tsx
+++ b/frontend/src/app/kb/[name]/expand/page.tsx
@@ -145,7 +145,7 @@ export default function ExpandSimilarPage({
         actions={
           <Link
             href={`/kb/${encodeURIComponent(name)}`}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
           >
             ← Back to KB
           </Link>
@@ -277,7 +277,7 @@ function ConfigurePhase({
       <div className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow-card)]">
         <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
           <label className="flex flex-col gap-2">
-            <span className="text-sm font-medium text-[var(--cnrs-blue)]">
+            <span className="text-sm font-medium text-[var(--text-body)]">
               Snowball direction
             </span>
             <select
@@ -300,7 +300,7 @@ function ConfigurePhase({
           </label>
 
           <label className="flex flex-col gap-2">
-            <span className="text-sm font-medium text-[var(--cnrs-blue)]">
+            <span className="text-sm font-medium text-[var(--text-body)]">
               Max candidates per seed
             </span>
             <input
@@ -323,7 +323,7 @@ function ConfigurePhase({
           </label>
 
           <label className="flex flex-col gap-2">
-            <span className="text-sm font-medium text-[var(--cnrs-blue)]">
+            <span className="text-sm font-medium text-[var(--text-body)]">
               Similarity scorer
             </span>
             <select
@@ -409,7 +409,7 @@ function CalibratePhase({
           <button
             type="button"
             onClick={onBack}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
           >
             ← Adjust settings
           </button>
@@ -421,7 +421,7 @@ function CalibratePhase({
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-wrap items-baseline justify-between gap-2">
-        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
           Score distribution
         </h2>
         <p className="text-xs text-[var(--text-muted)]">
@@ -433,7 +433,7 @@ function CalibratePhase({
       <ScoreHistogram buckets={report.histogram} />
 
       <div>
-        <h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+        <h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
           Calibrate the cutoff
         </h2>
         <p className="mb-3 text-sm text-[var(--text-muted)]">
@@ -451,7 +451,7 @@ function CalibratePhase({
         <button
           type="button"
           onClick={onBack}
-          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
         >
           ← Back
         </button>
@@ -495,11 +495,11 @@ function ReviewPhase({
         <div className="flex items-center justify-between gap-3">
           <label
             htmlFor="cutoff-slider"
-            className="text-sm font-medium text-[var(--cnrs-blue)]"
+            className="text-sm font-medium text-[var(--text-body)]"
           >
             Cutoff
           </label>
-          <span className="font-mono text-sm text-[var(--cnrs-blue)]">
+          <span className="font-mono text-sm text-[var(--text-body)]">
             {cutoff.toFixed(3)}
           </span>
         </div>
@@ -515,7 +515,7 @@ function ReviewPhase({
         />
         <p className="mt-2 text-sm text-[var(--text-muted)]">
           Keeping{" "}
-          <span className="font-semibold text-[var(--cnrs-blue)]">
+          <span className="font-semibold text-[var(--text-body)]">
             {kept.length}
           </span>{" "}
           of {total} candidate{total === 1 ? "" : "s"}.
@@ -523,7 +523,7 @@ function ReviewPhase({
       </div>
 
       <div>
-        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
           Will be ingested
         </h2>
         <CandidateList candidates={kept} />
@@ -535,7 +535,7 @@ function ReviewPhase({
             type="button"
             onClick={onBack}
             disabled={committing}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
           >
             ← Re-label samples
           </button>
@@ -583,7 +583,7 @@ function ResultPhase({
   return (
     <div className="flex flex-col gap-6">
       <div className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow-card)]">
-        <h2 className="text-lg font-semibold text-[var(--cnrs-blue)]">
+        <h2 className="text-lg font-semibold text-[var(--text-body)]">
           Expansion complete
         </h2>
         <div className="mt-4 grid grid-cols-3 gap-3">
@@ -609,7 +609,7 @@ function ResultPhase({
         <button
           type="button"
           onClick={onRestart}
-          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
         >
           Expand again
         </button>
@@ -624,7 +624,7 @@ function ResultTile({ label, value }: { label: string; value: number }) {
       <p className="font-mono text-[11px] uppercase tracking-wider text-[var(--text-muted)]">
         {label}
       </p>
-      <p className="mt-1 text-2xl font-semibold text-[var(--cnrs-blue)]">
+      <p className="mt-1 text-2xl font-semibold text-[var(--text-body)]">
         {value}
       </p>
     </div>
diff --git a/frontend/src/app/kb/[name]/page.tsx b/frontend/src/app/kb/[name]/page.tsx
index e529f1b3..12e42dd1 100644
--- a/frontend/src/app/kb/[name]/page.tsx
+++ b/frontend/src/app/kb/[name]/page.tsx
@@ -121,14 +121,14 @@ export default function KBDetailPage({
           <>
             <Link
               href={`/kb/${encodeURIComponent(name)}/expand`}
-              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:border-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)]"
+              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:border-[var(--cnrs-blue)] hover:bg-[var(--surface-hover)]"
             >
               Expand by similarity
             </Link>
             <BuildCapsulesButton name={name} />
             <a
               href={kb.exportUrl(name)}
-              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-grey-light)]"
+              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
             >
               Export
             </a>
@@ -205,8 +205,8 @@ function Tabs({ value, onChange }: { value: Tab; onChange: (t: Tab) => void }) {
             className={[
               "relative -mb-px px-4 py-2.5 text-sm font-medium transition",
               active
-                ? "text-[var(--cnrs-blue)]"
-                : "text-[var(--text-muted)] hover:text-[var(--cnrs-blue)]",
+                ? "text-[var(--text-body)]"
+                : "text-[var(--text-muted)] hover:text-[var(--text-body)]",
             ].join(" ")}
           >
             {t.label}
@@ -236,7 +236,7 @@ function StatTile({
       <p className="font-mono text-[11px] uppercase tracking-wider text-[var(--text-muted)]">
         {label}
       </p>
-      <p className="mt-1 text-2xl font-semibold tracking-tight text-[var(--cnrs-blue)]">
+      <p className="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-body)]">
         {value}
       </p>
     </div>
@@ -314,7 +314,7 @@ function PapersPanel({
               key={p.paper_id}
               className="border-b border-[var(--border)] last:border-0 hover:bg-[var(--bg-soft)]"
             >
-              <td className="px-4 py-2.5 align-top text-[var(--cnrs-blue)]">
+              <td className="px-4 py-2.5 align-top text-[var(--text-body)]">
                 {p.title ?? (
                   <span className="italic text-[var(--text-muted)]">
                     (untitled)
@@ -507,7 +507,7 @@ function AddPapersCard({
         <p className="font-mono text-[11px] uppercase tracking-widest text-[var(--text-muted)]">
           Ingest
         </p>
-        <h2 className="mt-0.5 text-lg font-semibold text-[var(--cnrs-blue)]">
+        <h2 className="mt-0.5 text-lg font-semibold text-[var(--text-body)]">
           Add papers
         </h2>
       </div>
@@ -515,7 +515,7 @@ function AddPapersCard({
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         {/* DOIs */}
         <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-[var(--cnrs-blue)]">
+          <label className="text-sm font-medium text-[var(--text-body)]">
             DOIs <span className="text-[var(--text-muted)]">(one per line)</span>
           </label>
           <textarea
@@ -541,7 +541,7 @@ function AddPapersCard({
 
         {/* BibTeX */}
         <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-[var(--cnrs-blue)]">
+          <label className="text-sm font-medium text-[var(--text-body)]">
             BibTeX file
           </label>
           <input
@@ -613,7 +613,7 @@ function LocalFilesDropZone({
 
   return (
     <div className="md:col-span-2 mt-2 flex flex-col gap-2">
-      <label className="text-sm font-medium text-[var(--cnrs-blue)]">
+      <label className="text-sm font-medium text-[var(--text-body)]">
         Local files <span className="text-[var(--text-muted)]">(PDF / docx)</span>
       </label>
       <div
@@ -637,7 +637,7 @@ function LocalFilesDropZone({
       >
         <p className="text-sm text-[var(--text-body)]">
           Drop files here, or{" "}
-          <label className="cursor-pointer font-medium text-[var(--cnrs-blue)] underline-offset-2 hover:underline">
+          <label className="cursor-pointer font-medium text-[var(--text-body)] underline-offset-2 hover:underline">
             click to choose
             <input
               type="file"
@@ -684,7 +684,7 @@ function BuildCapsulesButton({ name }: { name: string }) {
         onClick={run}
         disabled={status.kind === "working"}
         title="Build per-paper capsules (figures, structured text, provenance)"
-        className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:border-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)] disabled:cursor-not-allowed disabled:opacity-60"
+        className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:border-[var(--cnrs-blue)] hover:bg-[var(--surface-hover)] disabled:cursor-not-allowed disabled:opacity-60"
       >
         Build capsules
       </button>
@@ -703,7 +703,7 @@ function ClaimGraphExportButton({ name }: { name: string }) {
 
   return (
     <details className="relative">
-      <summary className="cursor-pointer list-none rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-grey-light)]">
+      <summary className="cursor-pointer list-none rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]">
         Claim graph ▾
       </summary>
       <div className="absolute right-0 top-full z-20 mt-1 w-52 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface)] shadow-lg">
@@ -711,7 +711,7 @@ function ClaimGraphExportButton({ name }: { name: string }) {
           <a
             key={f.value}
             href={kb.claimGraphUrl(name, f.value)}
-            className="flex flex-col gap-0.5 px-3 py-2 text-sm hover:bg-[var(--cnrs-grey-light)]"
+            className="flex flex-col gap-0.5 px-3 py-2 text-sm hover:bg-[var(--surface-hover)]"
             title={f.desc}
           >
             <span className="font-medium text-[var(--text-body)]">{f.label}</span>
diff --git a/frontend/src/app/kb/page.tsx b/frontend/src/app/kb/page.tsx
index 8dc3360f..980d5f4b 100644
--- a/frontend/src/app/kb/page.tsx
+++ b/frontend/src/app/kb/page.tsx
@@ -131,7 +131,7 @@ function KBCard({ kb: k, isActive }: { kb: KBSummary; isActive: boolean }) {
           aria-hidden
         />
       </div>
-      <h3 className="mt-2 break-words text-xl font-semibold tracking-tight text-[var(--cnrs-blue)] group-hover:underline">
+      <h3 className="mt-2 break-words text-xl font-semibold tracking-tight text-[var(--text-body)] group-hover:underline">
         {k.name}
       </h3>
 
@@ -150,7 +150,7 @@ function KBCard({ kb: k, isActive }: { kb: KBSummary; isActive: boolean }) {
           <dt className="font-mono uppercase tracking-wider text-[var(--text-muted)]">
             Papers
           </dt>
-          <dd className="mt-0.5 text-base font-semibold text-[var(--cnrs-blue)]">
+          <dd className="mt-0.5 text-base font-semibold text-[var(--text-body)]">
             {k.paper_count ?? 0}
           </dd>
         </div>
@@ -158,7 +158,7 @@ function KBCard({ kb: k, isActive }: { kb: KBSummary; isActive: boolean }) {
           <dt className="font-mono uppercase tracking-wider text-[var(--text-muted)]">
             Chunks
           </dt>
-          <dd className="mt-0.5 text-base font-semibold text-[var(--cnrs-blue)]">
+          <dd className="mt-0.5 text-base font-semibold text-[var(--text-body)]">
             {k.chunk_count ?? 0}
           </dd>
         </div>
@@ -194,7 +194,7 @@ function EmptyState({ onCreate }: { onCreate: () => void }) {
         style={{ background: "var(--cnrs-yellow)" }}
         aria-hidden
       />
-      <h2 className="text-xl font-semibold text-[var(--cnrs-blue)]">
+      <h2 className="text-xl font-semibold text-[var(--text-body)]">
         No knowledge bases yet
       </h2>
       <p className="max-w-md text-sm text-[var(--text-muted)]">
@@ -263,14 +263,14 @@ function NewKBDrawer({
             <p className="font-mono text-[11px] uppercase tracking-widest text-[var(--text-muted)]">
               Create
             </p>
-            <h2 className="mt-0.5 text-lg font-semibold text-[var(--cnrs-blue)]">
+            <h2 className="mt-0.5 text-lg font-semibold text-[var(--text-body)]">
               New knowledge base
             </h2>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-[var(--radius-sm)] px-2 py-1 text-sm text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)]"
+            className="rounded-[var(--radius-sm)] px-2 py-1 text-sm text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)]"
             aria-label="Close"
           >
             ✕
@@ -279,7 +279,7 @@ function NewKBDrawer({
 
         <form onSubmit={submit} className="flex flex-1 flex-col gap-4 p-6">
           <label className="flex flex-col gap-1.5 text-sm">
-            <span className="font-medium text-[var(--cnrs-blue)]">
+            <span className="font-medium text-[var(--text-body)]">
               Name <span className="text-red-600">*</span>
             </span>
             <input
@@ -295,7 +295,7 @@ function NewKBDrawer({
           </label>
 
           <label className="flex flex-col gap-1.5 text-sm">
-            <span className="font-medium text-[var(--cnrs-blue)]">
+            <span className="font-medium text-[var(--text-body)]">
               Description
             </span>
             <textarea
@@ -320,7 +320,7 @@ function NewKBDrawer({
               type="button"
               onClick={onClose}
               disabled={submitting}
-              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-grey-light)]"
+              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
             >
               Cancel
             </button>
diff --git a/frontend/src/app/reader/[doi]/page.tsx b/frontend/src/app/reader/[doi]/page.tsx
index 0d418720..a090641e 100644
--- a/frontend/src/app/reader/[doi]/page.tsx
+++ b/frontend/src/app/reader/[doi]/page.tsx
@@ -113,7 +113,7 @@ export default function PaperReaderPage({
                 href={`https://doi.org/${paper.doi}`}
                 target="_blank"
                 rel="noreferrer noopener"
-                className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)]"
+                className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] hover:bg-[var(--surface-hover)]"
               >
                 Open DOI
               </a>
@@ -152,7 +152,7 @@ export default function PaperReaderPage({
                   tab === t.id
                     ? "bg-[var(--cnrs-yellow)] font-medium text-[var(--cnrs-blue)]"
                     : t.available
-                      ? "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]"
+                      ? "text-[var(--text-body)] hover:bg-[var(--surface-hover)]"
                       : "cursor-not-allowed text-[var(--text-muted)] opacity-50",
                 ].join(" ")}
               >
@@ -176,7 +176,7 @@ export default function PaperReaderPage({
                         "block truncate rounded px-2 py-1 transition",
                         activeSection === s.id
                           ? "bg-[var(--cnrs-yellow)]/40 text-[var(--cnrs-blue)]"
-                          : "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
+                          : "text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
                       ].join(" ")}
                     >
                       {s.label}
@@ -262,7 +262,7 @@ export default function PaperReaderPage({
                       {r.doi ? (
                         <Link
                           href={`/reader/${encodeURIComponent(r.doi)}`}
-                          className="font-medium text-[var(--cnrs-blue)] hover:underline"
+                          className="font-medium text-[var(--text-body)] hover:underline"
                         >
                           {r.title ?? r.doi}
                         </Link>
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 511eb21c..158d7d10 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -65,7 +65,7 @@ export default function SettingsPage() {
             <button
               type="button"
               onClick={reset}
-              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]"
+              className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--text-body)] hover:bg-[var(--surface-hover)]"
             >
               Reset
             </button>
@@ -139,6 +139,7 @@ export default function SettingsPage() {
                 onChange={(v) => update("defaultKbName", v || null)}
               >
                 <option value="">— No KB (web only) —</option>
+                <option value="auto">Auto — best match</option>
                 {kbs.map((k) => (
                   <option key={k.name} value={k.name}>
                     {k.name}
@@ -353,7 +354,7 @@ function Card({
         <p className="font-mono text-[11px] uppercase tracking-widest text-[var(--text-muted)]">
           {eyebrow}
         </p>
-        <h2 className="mt-0.5 text-lg font-semibold text-[var(--cnrs-blue)]">
+        <h2 className="mt-0.5 text-lg font-semibold text-[var(--text-body)]">
           {title}
         </h2>
         {subtitle && (
@@ -385,7 +386,7 @@ function Field({
   return (
     <label className="flex flex-col gap-1.5">
       <span className="flex items-baseline justify-between gap-2">
-        <span className="text-sm font-medium text-[var(--cnrs-blue)]">
+        <span className="text-sm font-medium text-[var(--text-body)]">
           {label}
         </span>
       </span>
diff --git a/frontend/src/app/survey/[id]/page.tsx b/frontend/src/app/survey/[id]/page.tsx
index 465dece2..cc8b973e 100644
--- a/frontend/src/app/survey/[id]/page.tsx
+++ b/frontend/src/app/survey/[id]/page.tsx
@@ -174,7 +174,7 @@ export default function SurveyDetailPage({
             <button
               type="button"
               onClick={() => router.push("/survey")}
-              className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+              className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
             >
               ← Back
             </button>
@@ -201,7 +201,7 @@ export default function SurveyDetailPage({
           <button
             type="button"
             onClick={() => router.push("/survey")}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
           >
             Restart
           </button>
@@ -311,7 +311,7 @@ function ReviewPhase({
         {/* Themes */}
         <div>
           <div className="mb-3 flex items-baseline justify-between gap-3">
-            <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
               Themes
             </h2>
             <p className="text-xs text-[var(--text-muted)]">
@@ -334,7 +334,7 @@ function ReviewPhase({
         {/* Papers */}
         <div>
           <div className="mb-3 flex items-baseline justify-between gap-3">
-            <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
               Papers
             </h2>
             <p className="text-xs text-[var(--text-muted)]">
@@ -366,7 +366,7 @@ function ReviewPhase({
       <div className="sticky bottom-0 left-0 right-0 z-10 border-t border-[var(--border)] bg-[var(--surface)]/95 backdrop-blur">
         <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-6 py-3">
           <p className="text-sm text-[var(--text-body)]">
-            <span className="font-semibold text-[var(--cnrs-blue)]">
+            <span className="font-semibold text-[var(--text-body)]">
               {count}
             </span>{" "}
             of {total} selected
@@ -444,7 +444,7 @@ function PaperCard({
         />
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-start justify-between gap-2">
-            <h3 className="text-[15px] font-semibold leading-snug text-[var(--cnrs-blue)]">
+            <h3 className="text-[15px] font-semibold leading-snug text-[var(--text-body)]">
               {paper.title ?? paper.doi ?? paper.id}
             </h3>
             {paper.recommended && (
@@ -484,7 +484,7 @@ function PaperCard({
                 target="_blank"
                 rel="noreferrer noopener"
                 onClick={(e) => e.stopPropagation()}
-                className="font-mono text-[var(--cnrs-blue)] underline-offset-2 hover:underline"
+                className="font-mono text-[var(--text-body)] underline-offset-2 hover:underline"
               >
                 {paper.doi}
               </a>
@@ -535,7 +535,7 @@ function ConfirmPhase({
   return (
     <section className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-4 py-6 md:px-6">
       <div>
-        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
           Confirm your selection
         </h2>
         <p className="mt-1 text-sm text-[var(--text-muted)]">
@@ -554,7 +554,7 @@ function ConfirmPhase({
               {i + 1}
             </span>
             <div className="min-w-0 flex-1">
-              <p className="truncate text-sm font-medium text-[var(--cnrs-blue)]">
+              <p className="truncate text-sm font-medium text-[var(--text-body)]">
                 {p.title ?? p.id}
               </p>
               {p.doi && (
@@ -578,7 +578,7 @@ function ConfirmPhase({
           type="button"
           onClick={onBack}
           disabled={generating}
-          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+          className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           ← Back to review
         </button>
@@ -627,14 +627,14 @@ function ReportPhase({
   return (
     <section className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6">
       <div className="flex items-center justify-between gap-3">
-        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
           Deep report
         </h2>
         <div className="flex items-center gap-2">
           <button
             type="button"
             onClick={onCopy}
-            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
+            className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
           >
             {copied ? "Copied ✓" : "Copy report"}
           </button>
diff --git a/frontend/src/app/survey/page.tsx b/frontend/src/app/survey/page.tsx
index 8066383c..2ab4216d 100644
--- a/frontend/src/app/survey/page.tsx
+++ b/frontend/src/app/survey/page.tsx
@@ -31,7 +31,7 @@ export default function SurveyIndexPage() {
         />
 
         <div className="flex flex-col items-center gap-2">
-          <h2 className="text-xl font-semibold text-[var(--cnrs-blue)]">
+          <h2 className="text-xl font-semibold text-[var(--text-body)]">
             No survey session loaded
           </h2>
           <p className="max-w-md text-sm text-[var(--text-muted)]">
diff --git a/frontend/src/components/AboutModal.tsx b/frontend/src/components/AboutModal.tsx
index 589bbade..131633d0 100644
--- a/frontend/src/components/AboutModal.tsx
+++ b/frontend/src/components/AboutModal.tsx
@@ -12,7 +12,7 @@ export function AboutButton() {
         onClick={() => setOpen(true)}
         title="About Perspicacité"
         aria-label="About"
-        className="grid h-9 w-9 place-items-center rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent text-[var(--text-body)] transition hover:bg-[var(--cnrs-grey-light)]"
+        className="grid h-9 w-9 place-items-center rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
           <circle cx="12" cy="12" r="10" />
@@ -62,7 +62,7 @@ function AboutModal({ onClose }: { onClose: () => void }) {
           type="button"
           onClick={onClose}
           aria-label="Close"
-          className="absolute right-3 top-3 z-10 grid h-7 w-7 place-items-center rounded-full border border-[var(--border)] bg-[var(--surface)] text-[var(--text-muted)] hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)]"
+          className="absolute right-3 top-3 z-10 grid h-7 w-7 place-items-center rounded-full border border-[var(--border)] bg-[var(--surface)] text-[var(--text-muted)] hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)]"
         >
           ×
         </button>
@@ -71,7 +71,7 @@ function AboutModal({ onClose }: { onClose: () => void }) {
           <p className="font-mono text-[11px] uppercase tracking-widest text-[var(--text-muted)]">
             About
           </p>
-          <h2 className="mt-1 text-2xl font-semibold tracking-tight text-[var(--cnrs-blue)]">
+          <h2 className="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-body)]">
             Perspicacité
           </h2>
           <p className="mt-2 text-sm leading-relaxed text-[var(--text-body)]">
@@ -114,7 +114,7 @@ function AboutModal({ onClose }: { onClose: () => void }) {
               href="https://github.com/holobiomicslab/Perspicacite-AI"
               target="_blank"
               rel="noreferrer noopener"
-              className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-1.5 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-grey-light)]"
+              className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-1.5 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                 <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.07 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.21-1.49 3.18-1.18 3.18-1.18.63 1.6.23 2.78.11 3.07.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.13v3.16c0 .31.21.66.8.55C20.22 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z" />
@@ -125,7 +125,7 @@ function AboutModal({ onClose }: { onClose: () => void }) {
               href="https://github.com/holobiomicslab/Perspicacite-AI/issues/new"
               target="_blank"
               rel="noreferrer noopener"
-              className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-1.5 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-grey-light)]"
+              className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-1.5 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
             >
               Report an issue
             </a>
diff --git a/frontend/src/components/ChatPanel.tsx b/frontend/src/components/ChatPanel.tsx
index e291cbfb..9da040f5 100644
--- a/frontend/src/components/ChatPanel.tsx
+++ b/frontend/src/components/ChatPanel.tsx
@@ -20,7 +20,7 @@ import type { RAGMode } from "@/lib/modes";
 import { MODES, accentClasses } from "@/lib/modes";
 import { DATABASES, DEFAULT_DATABASES, type DatabaseId } from "@/lib/databases";
 import { DatabaseGlyph } from "./DatabaseGlyph";
-import { conversations as convApi, type ConvMessage } from "@/lib/api";
+import { conversations as convApi, kb as kbApi, type ConvMessage, type KBSummary } from "@/lib/api";
 import { loadPreferences } from "@/lib/preferences";
 
 type Turn = {
@@ -85,6 +85,7 @@ export function ChatPanel({
   // Hybrid retrieval weight: 0 = pure BM25, 0.5 = default, 1 = pure vector
   const [hybridWeight, setHybridWeight] = useState<number>(0.5);
   const [kbName, setKbName] = useState<string | null>(null);
+  const [kbList, setKbList] = useState<KBSummary[]>([]);
 
   // Honour user preferences on first mount (default mode, max papers,
   // default DBs, default KB). Composer toggles still override per-request.
@@ -95,6 +96,11 @@ export function ChatPanel({
     setMaxPapers(p.maxPapers);
     setKbName(p.defaultKbName);
   }, []);
+
+  // Load the user's knowledge bases for the composer KB picker.
+  useEffect(() => {
+    kbApi.list().then(setKbList).catch(() => setKbList([]));
+  }, []);
   const conversationIdRef = useRef<string | undefined>(initialConversationId);
   const abortRef = useRef<AbortController | null>(null);
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -529,7 +535,7 @@ export function ChatPanel({
                 <button
                   type="button"
                   onClick={() => setHybridWeight(0.5)}
-                  className="ml-1 rounded px-1 text-[10px] text-[var(--cnrs-blue)] hover:underline"
+                  className="ml-1 rounded px-1 text-[10px] text-[var(--text-body)] hover:underline"
                   title="Reset to 50/50"
                 >
                   reset
@@ -548,6 +554,12 @@ export function ChatPanel({
               onChange={setMode}
               disabled={streaming}
             />
+            <KbPicker
+              value={kbName}
+              kbs={kbList}
+              onChange={setKbName}
+              disabled={streaming}
+            />
             <DbFaviconRow
               selected={databases}
               onToggle={() => setShowDbPicker((s) => !s)}
@@ -564,7 +576,7 @@ export function ChatPanel({
                 <button
                   type="button"
                   onClick={cancel}
-                  className="rounded-[var(--radius-md)] border border-[var(--accent-fg)] px-3 py-1.5 text-xs font-medium text-[var(--accent-fg)] transition hover:bg-[var(--accent-fg)] hover:text-[var(--cnrs-blue)]"
+                  className="rounded-[var(--radius-md)] border border-[var(--accent-fg)] px-3 py-1.5 text-xs font-medium text-[var(--accent-fg)] transition hover:bg-[var(--accent-fg)] hover:text-[var(--text-body)]"
                   title="Stop generation (Esc)"
                 >
                   ◼ Stop
@@ -594,7 +606,7 @@ export function ChatPanel({
                 onClick={() => setShowDbPicker(false)}
                 title="Close database panel"
                 aria-label="Close database panel"
-                className="absolute right-2 top-2 grid h-6 w-6 place-items-center rounded text-[var(--text-muted)] opacity-60 transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)] hover:opacity-100"
+                className="absolute right-2 top-2 grid h-6 w-6 place-items-center rounded text-[var(--text-muted)] opacity-60 transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)] hover:opacity-100"
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -712,7 +724,7 @@ function TopNPill({
         onClick={() => onChange(clamp(value - 1))}
         disabled={disabled || value <= 1}
         aria-label="Decrease top-N papers"
-        className="grid w-6 place-items-center text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)] disabled:cursor-not-allowed disabled:opacity-40"
+        className="grid w-6 place-items-center text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)] disabled:cursor-not-allowed disabled:opacity-40"
       >
         −
       </button>
@@ -724,7 +736,7 @@ function TopNPill({
         onClick={() => onChange(clamp(value + 1))}
         disabled={disabled || value >= 25}
         aria-label="Increase top-N papers"
-        className="grid w-6 place-items-center text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)] disabled:cursor-not-allowed disabled:opacity-40"
+        className="grid w-6 place-items-center text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)] disabled:cursor-not-allowed disabled:opacity-40"
       >
         +
       </button>
@@ -732,6 +744,65 @@ function TopNPill({
   );
 }
 
+// Compact corpus selector for the composer toolbar. Initialised from
+// Settings → "Default knowledge base" but overridable per conversation
+// (like the mode / databases / Top-N toggles beside it). Values:
+//   ""     → no KB (web / databases only)
+//   "auto" → backend routes to the best-matching corpus by similarity
+//   <name> → that knowledge base
+function KbPicker({
+  value,
+  kbs,
+  onChange,
+  disabled,
+}: {
+  value: string | null;
+  kbs: KBSummary[];
+  onChange: (v: string | null) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label
+      title="Corpus to search · 'No KB' = web/databases only · 'Auto' = best-matching corpus by similarity. Overrides the Settings default for this conversation."
+      className="ml-1 inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border)] pl-2 leading-none transition focus-within:border-[var(--cnrs-blue)] hover:border-[var(--cnrs-blue)]"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="12"
+        height="12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden
+        className="shrink-0 text-[var(--text-muted)]"
+      >
+        <ellipse cx="12" cy="5" rx="8" ry="3" />
+        <path d="M4 5v6c0 1.6 3.6 3 8 3s8-1.4 8-3V5" />
+        <path d="M4 11v6c0 1.6 3.6 3 8 3s8-1.4 8-3v-6" />
+      </svg>
+      <select
+        value={value ?? ""}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value === "" ? null : e.target.value)}
+        aria-label="Knowledge base to search"
+        className="max-w-[11rem] cursor-pointer truncate bg-transparent py-1.5 pr-2 text-[11px] font-medium text-[var(--text-body)] outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <option value="">No KB · web only</option>
+        <option value="auto">Auto · best match</option>
+        {kbs.length > 0 && <option disabled>──────────</option>}
+        {kbs.map((k) => (
+          <option key={k.name} value={k.name}>
+            {k.name}
+            {typeof k.paper_count === "number" ? ` (${k.paper_count})` : ""}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
 function CompactModePicker({
   value,
   onChange,
@@ -759,7 +830,7 @@ function CompactModePicker({
               "rounded-full px-2.5 py-1 text-[11px] font-medium transition",
               selected
                 ? `${accent.bg} ${accent.text} shadow-sm`
-                : "border border-[var(--border)] bg-transparent text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--cnrs-blue)]",
+                : "border border-[var(--border)] bg-transparent text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--text-body)]",
               disabled && "cursor-not-allowed opacity-60",
             ].join(" ")}
           >
@@ -890,6 +961,7 @@ function AssistantMessage({
           sources={displayedSources}
           defaultOpen={true}
           running={!!(turn.streaming && streaming)}
+          errored={!!turn.error}
           modeId={turn.mode}
         />
       )}
@@ -925,7 +997,7 @@ function AssistantMessage({
           <p className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-[var(--text-muted)]">
             Sources · {displayedSources.length}
             {allSources.length > displayedSources.length && (
-              <span className="ml-1 text-[var(--cnrs-blue)]">
+              <span className="ml-1 text-[var(--text-body)]">
                 / {allSources.length}
               </span>
             )}
diff --git a/frontend/src/components/DatabasePicker.tsx b/frontend/src/components/DatabasePicker.tsx
index 72ce1668..bca42cca 100644
--- a/frontend/src/components/DatabasePicker.tsx
+++ b/frontend/src/components/DatabasePicker.tsx
@@ -54,7 +54,7 @@ export function DatabasePicker({
         <button
           type="button"
           onClick={toggleAll}
-          className="text-[11px] font-medium text-[var(--cnrs-blue)] underline-offset-2 hover:underline"
+          className="text-[11px] font-medium text-[var(--text-body)] underline-offset-2 hover:underline"
           disabled={disabled}
         >
           {allOn ? "Deselect all" : "Select all"}
@@ -80,7 +80,7 @@ export function DatabasePicker({
           <button
             type="button"
             onClick={() => setShowOthers((s) => !s)}
-            className="flex w-full items-center justify-between rounded-[var(--radius-sm)] px-2 py-1.5 text-[11px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)]"
+            className="flex w-full items-center justify-between rounded-[var(--radius-sm)] px-2 py-1.5 text-[11px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)]"
             aria-expanded={showOthers}
           >
             <span className="inline-flex items-center gap-1.5">
@@ -129,7 +129,7 @@ function DatabaseChip({
         "flex cursor-pointer items-center gap-2 rounded-[var(--radius-sm)] border px-2 py-1.5 text-xs transition",
         on
           ? "border-[var(--cnrs-blue)] bg-[var(--cnrs-yellow)]/30 text-[var(--cnrs-blue)]"
-          : "border-[var(--border)] bg-transparent text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
+          : "border-[var(--border)] bg-transparent text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
         disabled && "cursor-not-allowed opacity-60",
       ].join(" ")}
       title={db.blurb ? `${db.label} · ${db.blurb}` : db.label}
diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx
index 806694f2..2a3ac8d9 100644
--- a/frontend/src/components/Markdown.tsx
+++ b/frontend/src/components/Markdown.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Component, type ReactNode } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
@@ -110,6 +111,24 @@ const components: Components = {
   hr: () => <hr className="my-5 border-[var(--border)]" />,
 };
 
+// react-markdown's render is pure JS (no eval), so a SyntaxError thrown from
+// inside it means a dependency chunk failed to parse — a Turbopack dev-mode
+// hiccup (e.g. the page left open across a backend restart), not bad content.
+// This boundary keeps that from crashing the whole chat view: it falls back to
+// the raw answer text. A reload re-fetches the chunk and restores formatting.
+class MarkdownBoundary extends Component<
+  { fallback: ReactNode; children: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+
 export function Markdown({
   children,
   className = "",
@@ -119,13 +138,21 @@ export function Markdown({
 }) {
   return (
     <div className={`max-w-none ${className}`}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSanitize]}
-        components={components}
+      <MarkdownBoundary
+        fallback={
+          <div className="whitespace-pre-wrap text-[15px] leading-relaxed text-[var(--text-body)]">
+            {children}
+          </div>
+        }
       >
-        {children}
-      </ReactMarkdown>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeSanitize]}
+          components={components}
+        >
+          {children}
+        </ReactMarkdown>
+      </MarkdownBoundary>
     </div>
   );
 }
diff --git a/frontend/src/components/ModeSwitcher.tsx b/frontend/src/components/ModeSwitcher.tsx
index 7a8e34c4..0045d82e 100644
--- a/frontend/src/components/ModeSwitcher.tsx
+++ b/frontend/src/components/ModeSwitcher.tsx
@@ -31,7 +31,7 @@ export function ModeSwitcher({
               "group relative overflow-hidden rounded-[var(--radius-md)] border px-3 py-2.5 text-left transition",
               selected
                 ? `${a.bg} ${a.border} ${a.text} shadow-[var(--shadow-card)]`
-                : "border-[var(--border)] bg-[var(--surface)] text-[var(--text-body)] hover:border-[var(--cnrs-blue)]/40 hover:bg-[var(--cnrs-grey-light)]",
+                : "border-[var(--border)] bg-[var(--surface)] text-[var(--text-body)] hover:border-[var(--cnrs-blue)]/40 hover:bg-[var(--surface-hover)]",
               disabled && "cursor-not-allowed opacity-60",
             ].join(" ")}
           >
diff --git a/frontend/src/components/PageHeader.tsx b/frontend/src/components/PageHeader.tsx
index 52e8ae0d..8fbec806 100644
--- a/frontend/src/components/PageHeader.tsx
+++ b/frontend/src/components/PageHeader.tsx
@@ -17,7 +17,7 @@ export function PageHeader({
         href="/"
         title="Back to chat"
         aria-label="Back to chat"
-        className="absolute right-3 top-2 z-10 p-1 text-[var(--text-muted)] opacity-60 transition hover:text-[var(--cnrs-blue)] hover:opacity-100"
+        className="absolute right-3 top-2 z-10 p-1 text-[var(--text-muted)] opacity-60 transition hover:text-[var(--text-body)] hover:opacity-100"
       >
         <svg
           viewBox="0 0 24 24"
@@ -40,7 +40,7 @@ export function PageHeader({
               {eyebrow}
             </p>
           )}
-          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-[var(--cnrs-blue)]">
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-body)]">
             {title}
           </h1>
           {subtitle && (
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 6ac86b4e..598d5e9e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -88,7 +88,7 @@ export function Sidebar() {
           href="/"
           aria-label="Perspicacité home"
           title="Home"
-          className="mb-3 flex items-center gap-2.5 rounded-[var(--radius-md)] px-2 py-1 transition hover:bg-[var(--cnrs-grey-light)]"
+          className="mb-3 flex items-center gap-2.5 rounded-[var(--radius-md)] px-2 py-1 transition hover:bg-[var(--surface-hover)]"
         >
           <span
             className="grid h-7 w-7 place-items-center rounded-full"
@@ -121,7 +121,7 @@ export function Sidebar() {
               new KeyboardEvent("keydown", { key: "k", metaKey: true }),
             )
           }
-          className="mt-2 flex w-full items-center justify-between rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-soft)] px-3 py-1.5 text-[11px] text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--cnrs-blue)]"
+          className="mt-2 flex w-full items-center justify-between rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-soft)] px-3 py-1.5 text-[11px] text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--text-body)]"
           title="Open command palette"
         >
           <span>Quick switcher…</span>
@@ -168,7 +168,7 @@ export function Sidebar() {
                           "flex items-center gap-2 truncate rounded-[var(--radius-sm)] px-2 py-1.5 text-[13px] transition",
                           active
                             ? "bg-[var(--cnrs-yellow)] text-[var(--cnrs-blue)] font-medium"
-                            : "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
+                            : "text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
                         ].join(" ")}
                       >
                         <span className="truncate">
@@ -186,7 +186,7 @@ export function Sidebar() {
         {items.length > HISTORY_VISIBLE_LIMIT && !filter && (
           <Link
             href="/conversations"
-            className="mt-2 block px-2 py-1.5 text-[11px] font-medium text-[var(--cnrs-blue)] hover:underline"
+            className="mt-2 block px-2 py-1.5 text-[11px] font-medium text-[var(--text-body)] hover:underline"
           >
             See all {items.length} conversations →
           </Link>
@@ -205,7 +205,7 @@ export function Sidebar() {
                 "flex items-center gap-3 rounded-[var(--radius-sm)] px-2 py-1.5 text-[13px] transition",
                 active
                   ? "bg-[var(--cnrs-yellow)] text-[var(--cnrs-blue)] font-medium"
-                  : "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
+                  : "text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
               ].join(" ")}
               aria-current={active ? "page" : undefined}
             >
@@ -213,7 +213,7 @@ export function Sidebar() {
                 aria-hidden
                 className={
                   active
-                    ? "text-[var(--cnrs-blue)]"
+                    ? "text-[var(--text-body)]"
                     : "text-[var(--text-muted)]"
                 }
               >
@@ -260,7 +260,7 @@ export function Sidebar() {
           href="https://github.com/HolobiomicsLab/Perspicacite-AI"
           target="_blank"
           rel="noreferrer noopener"
-          className="mt-2 inline-flex items-center gap-1 text-[10px] leading-tight text-[var(--text-muted)] hover:text-[var(--cnrs-blue)]"
+          className="mt-2 inline-flex items-center gap-1 text-[10px] leading-tight text-[var(--text-muted)] hover:text-[var(--text-body)]"
           title="Perspicacité on GitHub"
         >
           <svg
diff --git a/frontend/src/components/SourceDrawer.tsx b/frontend/src/components/SourceDrawer.tsx
index 9cea9a18..d55c23ac 100644
--- a/frontend/src/components/SourceDrawer.tsx
+++ b/frontend/src/components/SourceDrawer.tsx
@@ -104,7 +104,7 @@ export function SourceDrawer({
               <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">
                 Source
               </p>
-              <h3 className="mt-0.5 text-sm font-semibold leading-snug text-[var(--cnrs-blue)]">
+              <h3 className="mt-0.5 text-sm font-semibold leading-snug text-[var(--text-body)]">
                 {source.title ?? source.doi ?? "Unknown"}
               </h3>
               <p className="mt-1 text-[11px] text-[var(--text-muted)]">
@@ -152,7 +152,7 @@ export function SourceDrawer({
             <button
               type="button"
               onClick={onClose}
-              className="rounded-[var(--radius-sm)] p-1 text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)]"
+              className="rounded-[var(--radius-sm)] p-1 text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)]"
               aria-label="Close"
             >
               ✕
@@ -252,7 +252,7 @@ export function SourceDrawer({
               href={externalHref}
               target="_blank"
               rel="noreferrer noopener"
-              className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--cnrs-blue)] hover:border-[var(--cnrs-blue)]"
+              className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-[var(--text-body)] hover:border-[var(--cnrs-blue)]"
             >
               External ↗
             </a>
@@ -300,7 +300,7 @@ function TabButton({
         "rounded-full px-2.5 py-1 text-[11px] font-medium transition",
         on
           ? "bg-[var(--cnrs-blue)] text-white"
-          : "border border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--cnrs-blue)]",
+          : "border border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--text-body)]",
         disabled && "cursor-not-allowed opacity-40",
       ].join(" ")}
     >
@@ -330,9 +330,9 @@ function InfoTab({
     rows.push(["Authors", <span key="a">{source.authors.join(", ")}</span>]);
   if (typeof source.citation_count === "number")
     rows.push(["Citations", <span key="c">{source.citation_count.toLocaleString()}</span>]);
-  if (source.url) rows.push(["URL", <a key="u" href={source.url} target="_blank" rel="noreferrer noopener" className="text-[var(--cnrs-blue)] underline">link</a>]);
-  if (source.pdf_url) rows.push(["PDF", <a key="p" href={source.pdf_url} target="_blank" rel="noreferrer noopener" className="text-[var(--cnrs-blue)] underline">PDF</a>]);
-  if (source.oa_url) rows.push(["Open Access", <a key="oa" href={source.oa_url} target="_blank" rel="noreferrer noopener" className="text-[var(--cnrs-blue)] underline">OA copy</a>]);
+  if (source.url) rows.push(["URL", <a key="u" href={source.url} target="_blank" rel="noreferrer noopener" className="text-[var(--text-body)] underline">link</a>]);
+  if (source.pdf_url) rows.push(["PDF", <a key="p" href={source.pdf_url} target="_blank" rel="noreferrer noopener" className="text-[var(--text-body)] underline">PDF</a>]);
+  if (source.oa_url) rows.push(["Open Access", <a key="oa" href={source.oa_url} target="_blank" rel="noreferrer noopener" className="text-[var(--text-body)] underline">OA copy</a>]);
 
   if (rows.length === 0) {
     return <p className="text-[var(--text-muted)]">No metadata available.</p>;
diff --git a/frontend/src/components/SourcePill.tsx b/frontend/src/components/SourcePill.tsx
index 3edde72d..fde9e3b9 100644
--- a/frontend/src/components/SourcePill.tsx
+++ b/frontend/src/components/SourcePill.tsx
@@ -77,7 +77,7 @@ export function SourcePill({
           <button
             type="button"
             onClick={() => setOpen(true)}
-            className="line-clamp-2 min-w-0 flex-1 text-left text-[12.5px] font-medium leading-snug text-[var(--cnrs-blue)] hover:underline"
+            className="line-clamp-2 min-w-0 flex-1 text-left text-[12.5px] font-medium leading-snug text-[var(--text-body)] hover:underline"
             title={label}
           >
             {label}
@@ -87,7 +87,7 @@ export function SourcePill({
           <button
             type="button"
             onClick={() => setOpen(true)}
-            className="shrink-0 rounded-[var(--radius-sm)] border border-[var(--border)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--cnrs-blue)]"
+            className="shrink-0 rounded-[var(--radius-sm)] border border-[var(--border)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--text-muted)] hover:border-[var(--cnrs-blue)] hover:text-[var(--text-body)]"
             title="Open abstract in side panel"
             aria-label="Open abstract in side panel"
           >
@@ -154,7 +154,7 @@ export function SourcePill({
             <button
               type="button"
               onClick={() => setOpen(true)}
-              className="font-medium text-[var(--cnrs-blue)] underline decoration-[var(--cnrs-yellow)] decoration-2 underline-offset-2 hover:decoration-[var(--cnrs-blue)]"
+              className="font-medium text-[var(--text-body)] underline decoration-[var(--cnrs-yellow)] decoration-2 underline-offset-2 hover:decoration-[var(--cnrs-blue)]"
               title="Open full abstract in side panel"
             >
               read more →
@@ -166,7 +166,7 @@ export function SourcePill({
             <button
               type="button"
               onClick={() => setOpen(true)}
-              className="font-medium text-[var(--cnrs-blue)] underline decoration-[var(--cnrs-yellow)] decoration-2 underline-offset-2 hover:decoration-[var(--cnrs-blue)]"
+              className="font-medium text-[var(--text-body)] underline decoration-[var(--cnrs-yellow)] decoration-2 underline-offset-2 hover:decoration-[var(--cnrs-blue)]"
             >
               Open detail panel →
             </button>
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
index 49df01d2..57268543 100644
--- a/frontend/src/components/StatusBar.tsx
+++ b/frontend/src/components/StatusBar.tsx
@@ -187,7 +187,7 @@ export function StatusBar({
             className={[
               "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider",
               modeAccent?.bg ?? "bg-[var(--cnrs-grey-light)]",
-              modeAccent?.text ?? "text-[var(--cnrs-blue)]",
+              modeAccent?.text ?? "text-[var(--text-body)]",
             ].join(" ")}
             title={`${mode.label} mode · ${mode.blurb}`}
           >
@@ -214,7 +214,7 @@ export function StatusBar({
           <button
             type="button"
             onClick={onCancel}
-            className="rounded-full border border-[var(--accent-fg)] px-2.5 py-0.5 text-[10px] font-semibold text-[var(--accent-fg)] transition hover:bg-[var(--accent-fg)] hover:text-[var(--cnrs-blue)]"
+            className="rounded-full border border-[var(--accent-fg)] px-2.5 py-0.5 text-[10px] font-semibold text-[var(--accent-fg)] transition hover:bg-[var(--accent-fg)] hover:text-[var(--text-body)]"
             aria-label="Stop generation"
             title="Stop generation (Esc)"
           >
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index e0b0852a..298c9bdb 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -38,7 +38,7 @@ export function ThemeToggle() {
     <button
       type="button"
       onClick={cycle}
-      className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-2 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-grey-light)]"
+      className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-transparent px-3 py-2 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
       aria-label={`Theme: ${label}. Click to cycle.`}
     >
       <span aria-hidden>{icon}</span>
diff --git a/frontend/src/components/ThinkingSteps.tsx b/frontend/src/components/ThinkingSteps.tsx
index 5c9938a8..a9ad2d19 100644
--- a/frontend/src/components/ThinkingSteps.tsx
+++ b/frontend/src/components/ThinkingSteps.tsx
@@ -30,12 +30,14 @@ export function ThinkingSteps({
   sources,
   defaultOpen = true,
   running = false,
+  errored = false,
   modeId,
 }: {
   steps: ThinkingStep[];
   sources?: ChatSource[];
   defaultOpen?: boolean;
   running?: boolean;
+  errored?: boolean;
   modeId?: RAGMode;
 }) {
   const [open, setOpen] = useState(defaultOpen);
@@ -97,14 +99,22 @@ export function ThinkingSteps({
           {showPhases
             ? phases.map((phase, i) => {
                 const phaseSteps = buckets.byPhase[phase.id] ?? [];
+                // A completed, non-errored run means the whole pipeline
+                // finished — mark every phase done, even ones the backend
+                // never emitted a matching step for (Basic mode emits steps
+                // only for retrieval, so later phases would otherwise stay
+                // stranded as "planned"). While running, or if the run
+                // errored partway, fall back to progressive status.
                 const status: PhaseStatus =
-                  i < activePhaseIdx
+                  !running && !errored
                     ? "done"
-                    : i === activePhaseIdx
-                      ? running
-                        ? "running"
-                        : "done"
-                      : "planned";
+                    : i < activePhaseIdx
+                      ? "done"
+                      : i === activePhaseIdx
+                        ? running
+                          ? "running"
+                          : "done"
+                        : "planned";
                 const phaseSources = i === sourcesPhaseIdx ? sources ?? [] : [];
                 return (
                   <li
@@ -447,7 +457,7 @@ function Row({
           "relative z-10 grid h-4 w-4 shrink-0 place-items-center rounded-full text-[10px]",
           running
             ? "bg-[var(--cnrs-yellow)] text-[var(--cnrs-blue)] ring-2 ring-[var(--cnrs-yellow)]/40"
-            : "bg-[var(--surface)] text-[var(--cnrs-blue)] ring-1 ring-[var(--border)]",
+            : "bg-[var(--surface)] text-[var(--text-body)] ring-1 ring-[var(--border)]",
         ].join(" ")}
         style={
           running
@@ -539,7 +549,7 @@ function MiniSourceCard({
         <button
           type="button"
           onClick={() => setOpen(true)}
-          className="flex shrink-0 items-center border-l border-[var(--border)] px-2 text-[10px] text-[var(--text-muted)] transition hover:bg-[var(--cnrs-grey-light)] hover:text-[var(--cnrs-blue)]"
+          className="flex shrink-0 items-center border-l border-[var(--border)] px-2 text-[10px] text-[var(--text-muted)] transition hover:bg-[var(--surface-hover)] hover:text-[var(--text-body)]"
           aria-label="Open abstract in side panel"
           title="Open abstract in side panel"
         >
diff --git a/frontend/src/lib/chat.ts b/frontend/src/lib/chat.ts
index e6e1ba1d..e105aa5c 100644
--- a/frontend/src/lib/chat.ts
+++ b/frontend/src/lib/chat.ts
@@ -292,6 +292,23 @@ function parseFrame(frame: string): ChatStreamEvent[] {
       },
     ];
   }
+  // Plain status frames carry the live phase text (e.g. "Basic RAG:
+  // Retrieving documents…", "Basic RAG: Generating response…"). Surface
+  // them as steps so the agentic trail advances through its phases in real
+  // time as the answer streams, instead of only snapping to done at the end.
+  if (obj.type === "status" && typeof obj.message === "string") {
+    return [
+      {
+        kind: "thinking",
+        step: {
+          id: nid(),
+          kind: "status",
+          label: obj.message,
+          ts: Date.now(),
+        },
+      },
+    ];
+  }
   if (obj.kind === "provider_progress") {
     const phase = obj.phase === "done" ? "done" : "start";
     const providers = Array.isArray(obj.providers)
diff --git a/src/perspicacite/web/routers/chat.py b/src/perspicacite/web/routers/chat.py
index 1dbcc531..ac428163 100644
--- a/src/perspicacite/web/routers/chat.py
+++ b/src/perspicacite/web/routers/chat.py
@@ -1036,24 +1036,65 @@ async def _stream_rag_mode(request: ChatRequest, conversation_id: str | None = N
                 "hits": [h.to_dict() for h in hits],
             }) + "\n\n"
         )
-        # If only one KB matched, route as single-KB; else multi-KB
+        # Auto-routing (esp. the default BM25 text router) can surface KBs
+        # across embedding models — e.g. a legacy all-MiniLM KB alongside
+        # text-embedding-3-large ones. They can't be queried together, and a
+        # KB in a different family than the running embedding provider can't
+        # be queried here at all (dimension mismatch). Narrow to the family
+        # the server can actually query instead of failing outright.
         picked = [h.kb_name for h in hits]
         if len(picked) == 1:
             effective_kb_name = picked[0]
         else:
-            # Run the same embedding-compat guard the manual multi-KB
-            # path uses.
-            from perspicacite.retrieval.multi_kb import check_embedding_compat
+            from perspicacite.retrieval.multi_kb import (
+                canonical_embedding_fingerprint,
+            )
+
             metas = [await app_state.session_store.get_kb_metadata(n) for n in picked]
-            compat_msg = check_embedding_compat(metas)
-            if compat_msg:
+            server_fp = canonical_embedding_fingerprint(
+                getattr(getattr(app_state, "embedding_provider", None), "model_name", None)
+            )
+            # Prefer the running server's embedding family; fall back to the
+            # most-relevant (top-ranked) KB's family if the server model is
+            # unknown.
+            target_fp = server_fp or next(
+                (
+                    canonical_embedding_fingerprint(getattr(m, "embedding_model", None))
+                    for m in metas
+                    if m is not None
+                ),
+                None,
+            )
+            compatible = [
+                n
+                for n, m in zip(picked, metas)
+                if m is not None
+                and canonical_embedding_fingerprint(getattr(m, "embedding_model", None))
+                == target_fp
+            ]
+            dropped = [n for n in picked if n not in compatible]
+            if dropped:
+                logger.info(
+                    f"auto-route narrowed to embedding family {target_fp!r}: "
+                    f"querying {compatible}, dropped {dropped}"
+                )
+            if not compatible:
                 yield (
                     "data: " + json.dumps({
-                        "type": "error", "message": compat_msg,
+                        "type": "error",
+                        "message": (
+                            f"Auto-routing matched {picked}, but none share the "
+                            f"running server's embedding model ({target_fp}). Pick a "
+                            "knowledge base with that embedding directly, or restart "
+                            "the server with the matching embedding config."
+                        ),
                     }) + "\n\n"
                 )
                 return
-            effective_kb_names = picked
+            if len(compatible) == 1:
+                effective_kb_name = compatible[0]
+            else:
+                effective_kb_names = compatible
 
     elif request.kb_names and len(request.kb_names) > 1 and app_state.session_store:
         from perspicacite.retrieval.multi_kb import check_embedding_compat