feat(ui): dark tech theme — emoji-free chrome, subtle animated CSS background, WCAG AA dark palette

frontend/assets/app.js

@@ -107,13 +107,24 @@ export function renderMarkdown(md) {
   return text.replace(/\u0000CODE(\d+)\u0000/g, (_m, i) => codeBlocks[Number(i)]);
 }
 
+/* ---------- avatar glyphs (phase 08: emoji-free chrome) ----------
+ * Inline SVG as string constants so the message renderer and the typing
+ * indicator share exactly the same marks. currentColor lets the CSS theme
+ * the stroke (brand-ink for Brain, ink-soft for the user — see styles.css).
+ */
+const BRAIN_AVATAR =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="6.5" width="11" height="11" rx="2.5"/><circle cx="12" cy="12" r="1.9" fill="currentColor" stroke="none"/><path d="M9.5 6.5V3.8M14.5 6.5V3.8M9.5 20.2v-2.7M14.5 20.2v-2.7M6.5 9.5H3.8M6.5 14.5H3.8M20.2 9.5h-2.7M20.2 14.5h-2.7"/></svg>';
+
+const USER_AVATAR =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="3.6"/><path d="M4.8 20.2c.9-3.9 3.8-6 7.2-6s6.3 2.1 7.2 6"/></svg>';
+
 /* ---------- messages ---------- */
 function addMessage(who, html) {
   if (emptyState) emptyState.hidden = true;
   const wrap = document.createElement("div");
   wrap.className = `msg ${who}`;
   wrap.innerHTML = `
-    <span class="avatar" aria-hidden="true">${who === "brain" ? "🧠" : "🧑"}</span>
+    <span class="avatar" aria-hidden="true">${who === "brain" ? BRAIN_AVATAR : USER_AVATAR}</span>
     <div class="msg-body">
       <div class="bubble">${html}</div>
     </div>`;
@@ -129,7 +140,7 @@ function addTyping() {
   wrap.className = "msg brain";
   wrap.id = "typing-indicator";
   wrap.innerHTML = `
-    <span class="avatar" aria-hidden="true">🧠</span>
+    <span class="avatar" aria-hidden="true">${BRAIN_AVATAR}</span>
     <div class="msg-body">
       <div class="bubble typing" role="status" aria-label="${TYPING_LABEL}">
         <span></span><span></span><span></span>

frontend/assets/styles.css

@@ -1,30 +1,33 @@
 /* ==========================================================================
    Brain of Reese — design system (no CDN; system fonts only)
+   Dark tech theme (phase 08): emoji-free chrome, subtle animated pure-CSS
+   background, WCAG 2.1 AA dark palette (every pair computed >= 4.5:1).
    ========================================================================== */
 
 :root {
   /* Palette — all text/background pairs meet WCAG 2.1 AA (>= 4.5:1) */
-  --bg: #f4f5fb;
-  --surface: #ffffff;
-  --ink: #1c2130;            /* 14.9:1 on --surface */
-  --ink-soft: #4a5168;       /*  7.6:1 on --surface */
-  --line: #e3e6f0;
-  --brand: #4f46e5;          /* white on brand: 6.3:1 */
-  --brand-soft: #eef0fe;
-  --brand-ink: #3730a3;
-  --accent-bg: #fff7e8;
-  --accent-ink: #92400e;     /* 8.7:1 on --accent-bg */
-  --accent-line: #f59e0b;
-  --ok-ink: #15803d;
-  --ok-bg: #f0fdf4;
-  --err-ink: #b91c1c;
-  --err-bg: #fef2f2;
-  --err-line: #fecaca;
+  --bg: #0a0e17;            /* page: ink on bg 16.2:1 */
+  --surface: #121a2e;       /* ink on surface 14.5:1 */
+  --ink: #e8ebf4;
+  --ink-soft: #9aa4bd;      /*  6.9:1 on --surface */
+  --line: #26304a;          /* decorative 1px borders */
+  --brand: #6d78f2;         /* text on brand is DARK ink (--bg): 5.2:1 —
+                               never white on brand (3.7:1, fails) */
+  --brand-soft: #232b52;
+  --brand-ink: #a5b4fc;     /* 8.7:1 on --surface, 6.9:1 on --brand-soft */
+  --accent-bg: #2b2110;
+  --accent-ink: #fbbf24;    /*  9.5:1 on --accent-bg */
+  --accent-line: #f59e0b;   /*  8.9:1 on --bg (deflection border) */
+  --ok-bg: #10241b;
+  --ok-ink: #6ee7a8;        /* 10.6:1 on --ok-bg */
+  --err-bg: #2d1318;
+  --err-ink: #fca5a5;       /*  9.1:1 on --err-bg */
+  --err-line: #ef4444;      /*  4.6:1 on --err-bg (UI boundary, not text) */
 
-  --radius: 14px;
-  --radius-sm: 9px;
-  --shadow: 0 1px 2px rgb(28 33 48 / 0.06), 0 4px 16px rgb(28 33 48 / 0.07);
-  --shadow-lg: 0 4px 10px rgb(28 33 48 / 0.08), 0 12px 32px rgb(28 33 48 / 0.12);
+  --radius: 10px;
+  --radius-sm: 6px;
+  --shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 16px rgb(0 0 0 / 0.35);
+  --shadow-lg: 0 4px 10px rgb(0 0 0 / 0.40), 0 12px 32px rgb(0 0 0 / 0.50);
 
   --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -36,18 +39,66 @@
 
 html, body { height: 100%; }
 
+/* The visible page background lives on <html> (the canvas). <body> must
+   stay transparent and must NOT create a stacking context, or the
+   z-index:-1 background layers below would be painted over. */
+html { background: var(--bg); }
+
 body {
   margin: 0;
   font-family: var(--font);
   font-size: 16px;
   line-height: 1.55;
   color: var(--ink);
-  background: var(--bg);
+  background: transparent;
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 100dvh;
 }
 
+/* ---------- Animated background (pure CSS, zero JS — phase 08) ---------- */
+
+/* Fine drifting grid: 44px cells, 1px lines at ~35% --line alpha, masked
+   with a radial fade (visible center-top, fading to the edges). The drift
+   delta (44px) equals one cell, so the loop is seamless. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(38 48 74 / 0.35) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(38 48 74 / 0.35) 1px, transparent 1px);
+  background-size: 44px 44px;
+  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 25%, transparent 78%);
+  mask-image: radial-gradient(120% 90% at 50% 0%, black 25%, transparent 78%);
+  animation: bg-grid-drift 60s linear infinite;
+}
+@keyframes bg-grid-drift {
+  from { background-position: 0 0, 0 0; }
+  to   { background-position: 44px 44px, 44px 44px; }
+}
+
+/* Two large, soft radial glows: indigo top-left, cyan bottom-right —
+   14s ease-in-out breathing (opacity + scale). No filter:blur (perf). */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle 56rem at 12% 8%, rgb(109 120 242 / 0.14), transparent 62%),
+    radial-gradient(circle 60rem at 88% 92%, rgb(34 211 238 / 0.10), transparent 62%);
+  animation: bg-glow-breathe 14s ease-in-out infinite alternate;
+}
+@keyframes bg-glow-breathe {
+  from { opacity: 0.65; transform: scale(1); }
+  to   { opacity: 1;    transform: scale(1.05); }
+}
+
 .container {
   width: 100%;
   max-width: 72rem;
@@ -76,7 +127,7 @@ body {
   left: -9999px;
   top: 0;
   background: var(--brand);
-  color: #fff;
+  color: var(--bg);
   padding: 0.6rem 1rem;
   border-radius: 0 0 var(--radius-sm) 0;
   z-index: 100;
@@ -89,15 +140,34 @@ body {
   border-radius: 4px;
 }
 
+::selection {
+  background: rgb(109 120 242 / 0.45);
+  color: var(--ink);
+}
+
 /* ---------- Header ---------- */
 .app-header {
   height: var(--header-h);
   background: var(--surface);
-  border-bottom: 1px solid var(--line);
   position: sticky;
   top: 0;
   z-index: 20;
 }
+/* 2px brand→cyan gradient hairline under the sticky header (phase 08). */
+.app-header::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: -2px;
+  height: 2px;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    rgb(109 120 242 / 0.55),
+    rgb(34 211 238 / 0.30) 45%,
+    rgb(34 211 238 / 0.05) 90%
+  );
+}
 .header-inner {
   height: 100%;
   display: flex;
@@ -113,7 +183,13 @@ body {
   color: var(--ink);
   text-decoration: none;
 }
-.brand-mark { font-size: 1.4rem; }
+/* Mono wordmark with letter-spacing — the "technical" touch (phase 08). */
+.brand-text {
+  font-family: var(--mono);
+  font-size: 0.95rem;
+  letter-spacing: 0.08em;
+}
+.brand-mark { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
 .brand-text strong { color: var(--brand-ink); font-weight: 700; }
 
 .app-nav { display: flex; gap: 0.25rem; }
@@ -129,7 +205,7 @@ body {
   align-items: center;
 }
 .nav-link:hover { background: var(--brand-soft); color: var(--brand-ink); }
-.nav-link.is-active { background: var(--brand); color: #fff; }
+.nav-link.is-active { background: var(--brand); color: var(--bg); }
 
 /* ---------- Main frame ---------- */
 .app-main {
@@ -166,10 +242,14 @@ body {
   border-radius: 50%;
   display: grid;
   place-items: center;
-  font-size: 1.05rem;
   background: var(--brand-soft);
   border: 1px solid var(--line);
 }
+/* Emoji-free inline SVG glyphs (phase 08), currentColor so the theme
+   controls the stroke; sized to sit crisp at ~16-20px. */
+.msg .avatar svg { width: 20px; height: 20px; display: block; }
+.msg.brain .avatar { color: var(--brand-ink); }
+.msg.user .avatar { color: var(--ink-soft); }
 .msg-body {
   max-width: 85%;
   /* min-width: 0 — as a flex item this overrides min-width:auto so a
@@ -190,9 +270,10 @@ body {
 }
 .bubble p { margin: 0.2rem 0; }
 .bubble pre {
-  background: #10131c;
+  background: #0d1120;
   color: #e6e9f2;
   padding: 0.7rem 0.9rem;
+  border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   overflow-x: auto;
   font-size: 0.85rem;
@@ -206,10 +287,10 @@ body {
 .msg.user .bubble {
   background: var(--brand);
   border-color: var(--brand);
-  color: #fff;
+  color: var(--bg);
   border-bottom-right-radius: 4px;
 }
-.msg.user .bubble code { background: rgb(255 255 255 / 0.18); }
+.msg.user .bubble code { background: rgb(10 14 23 / 0.16); }
 
 .msg.brain .bubble { border-bottom-left-radius: 4px; }
 .msg.brain.is-deflected .bubble {
@@ -245,7 +326,7 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.source-chip:hover { background: #e2e5fd; }
+.source-chip:hover { background: #2a345f; }
 
 /* "Maybe try" chips under a deflected bubble (phase 04). Unlike the
    onboarding row (which scrolls horizontally on mobile), this group wraps
@@ -295,7 +376,8 @@ body {
   text-align: center;
   margin-top: 1rem;
 }
-.empty-state-emoji { font-size: 2.6rem; line-height: 1; }
+.empty-state-glyph { color: var(--brand-ink); width: 44px; height: 44px; margin-inline: auto; }
+.empty-state-glyph svg { width: 44px; height: 44px; display: block; }
 .empty-state-title { margin: 0.8rem 0 0.4rem; font-size: 1.5rem; color: var(--ink); }
 .empty-state-sub { margin: 0 auto 1.25rem; max-width: 34rem; color: var(--ink-soft); }
 .empty-state-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; }
@@ -322,7 +404,7 @@ body {
   cursor: pointer;
   transition: background 0.15s ease, transform 0.05s ease;
 }
-.suggestion-chip:hover { background: #e2e5fd; }
+.suggestion-chip:hover { background: #2a345f; }
 .suggestion-chip:active { transform: scale(0.98); }
 
 /* ---------- Composer ---------- */
@@ -347,6 +429,7 @@ body {
   padding: 0.55rem 0.5rem;
   background: transparent;
 }
+.composer textarea::placeholder { color: var(--ink-soft); }
 .send-btn {
   display: inline-flex;
   align-items: center;
@@ -357,19 +440,21 @@ body {
   border: 0;
   border-radius: var(--radius-sm);
   background: var(--brand);
-  color: #fff;
+  /* Dark ink on brand (5.2:1) — never white on brand (3.7:1, fails). */
+  color: var(--bg);
   font: inherit;
   font-weight: 700;
   cursor: pointer;
   padding-inline: 1rem;
 }
-.send-btn:hover:not(:disabled) { background: #4338ca; }
+.send-btn:hover:not(:disabled) { background: #7d88f5; }
 .send-btn:disabled { background: #a5b4fc; cursor: not-allowed; }
 
+/* Busy spinner: dark arc (--bg) on the #a5b4fc busy button = 9.7:1. */
 .spinner {
   width: 16px; height: 16px;
-  border: 2.5px solid rgb(255 255 255 / 0.4);
-  border-top-color: #fff;
+  border: 2.5px solid rgb(10 14 23 / 0.30);
+  border-top-color: var(--bg);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -377,6 +462,11 @@ body {
 @media (prefers-reduced-motion: reduce) {
   .spinner { animation-duration: 2s; }
 }
+/* The background layers are the only other motion on the page: under
+   reduced motion they go static (grid + glows remain, just still). */
+@media (prefers-reduced-motion: reduce) {
+  body::before, body::after { animation: none; }
+}
 
 /* ---------- Banners ---------- */
 .kb-banner {
@@ -392,6 +482,7 @@ body {
   font-weight: 600;
 }
 .kb-banner.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
+.kb-banner svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
 
 /* ---------- Sources page ---------- */
 .sources-shell {
@@ -419,7 +510,8 @@ body {
   flex-direction: column;
   gap: 0.15rem;
 }
-.stat-value { font-size: 2rem; font-weight: 800; color: var(--brand-ink); line-height: 1.1; }
+/* Mono stat values — technical readout (phase 08). */
+.stat-value { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--brand-ink); line-height: 1.1; }
 .stat-value-sm { font-size: 1.15rem; font-weight: 700; }
 .stat-label { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
 
@@ -474,7 +566,7 @@ body {
 @media (max-width: 640px) {
   :root { --header-h: 58px; }
   .container { padding-inline: 0.9rem; }
-  .brand-text { font-size: 1rem; }
+  .brand-text { font-size: 0.88rem; }
   .nav-link { padding: 0.45rem 0.7rem; font-size: 0.9rem; }
   .msg-body { max-width: 92%; }
   .empty-state { padding: 1.75rem 1.1rem; margin-top: 0.25rem; }

frontend/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="description" content="Ask Brain of Reese anything about the homelab and deployments.">
   <title>Brain of Reese</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cpath%20d=%22M32%204%2055%2018v28L32%2060%209%2046V18Z%22%20fill=%22%23121a2e%22%20stroke=%22%236d78f2%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%226.5%22%20fill=%22%236d78f2%22/%3E%3Cpath%20d=%22M32%2025.5V16M32%2048v-9.5M25.5%2032H16M48%2032h-9.5%22%20stroke=%22%2322d3ee%22%20stroke-width=%223%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E">
   <link rel="stylesheet" href="/assets/styles.css">
 </head>
 <body>
@@ -14,7 +14,7 @@
   <header class="app-header">
     <div class="container header-inner">
       <span class="brand">
-        <span class="brand-mark" aria-hidden="true">🧠</span>
+        <svg class="brand-mark" aria-hidden="true" viewBox="0 0 64 64"><path d="M32 4 55 18v28L32 60 9 46V18Z" fill="#121a2e" stroke="#6d78f2" stroke-width="4" stroke-linejoin="round"/><circle cx="32" cy="32" r="6.5" fill="#6d78f2"/><path d="M32 25.5V16M32 48v-9.5M25.5 32H16M48 32h-9.5" stroke="#22d3ee" stroke-width="3" stroke-linecap="round"/></svg>
         <span class="brand-text">Brain of <strong>Reese</strong></span>
       </span>
       <nav class="app-nav" aria-label="Primary">
@@ -27,13 +27,15 @@
   <main id="main" class="app-main" tabindex="-1">
     <div class="container chat-shell" data-state="empty">
       <div class="kb-banner" id="kb-banner" role="status" hidden>
-        <span aria-hidden="true">⚠️</span>
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.6 22.2 20.4H1.8Z"/><path d="M12 9.5v4.6"/><path d="M12 17.4h.01"/></svg>
         <span id="kb-banner-text"></span>
       </div>
 
       <section class="messages" id="messages" aria-live="polite" aria-label="Conversation with Brain of Reese">
         <div class="empty-state" id="empty-state">
-          <div class="empty-state-emoji" aria-hidden="true">👋</div>
+          <div class="empty-state-glyph" aria-hidden="true">
+            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 8h28a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H24l-9 8v-8h-5a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4Z"/><path d="m15 17 5 4-5 4"/><path d="M24 25h8"/></svg>
+          </div>
           <h1 class="empty-state-title">Hey! I'm Brain of Reese.</h1>
           <p class="empty-state-sub">
             I've read through the homelab and deployment notes — ask me anything,

frontend/sources.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="description" content="Documents indexed in Brain of Reese.">
   <title>Sources · Brain of Reese</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cpath%20d=%22M32%204%2055%2018v28L32%2060%209%2046V18Z%22%20fill=%22%23121a2e%22%20stroke=%22%236d78f2%22%20stroke-width=%224%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%226.5%22%20fill=%22%236d78f2%22/%3E%3Cpath%20d=%22M32%2025.5V16M32%2048v-9.5M25.5%2032H16M48%2032h-9.5%22%20stroke=%22%2322d3ee%22%20stroke-width=%223%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E">
   <link rel="stylesheet" href="/assets/styles.css">
 </head>
 <body>
@@ -14,7 +14,7 @@
   <header class="app-header">
     <div class="container header-inner">
       <span class="brand">
-        <span class="brand-mark" aria-hidden="true">🧠</span>
+        <svg class="brand-mark" aria-hidden="true" viewBox="0 0 64 64"><path d="M32 4 55 18v28L32 60 9 46V18Z" fill="#121a2e" stroke="#6d78f2" stroke-width="4" stroke-linejoin="round"/><circle cx="32" cy="32" r="6.5" fill="#6d78f2"/><path d="M32 25.5V16M32 48v-9.5M25.5 32H16M48 32h-9.5" stroke="#22d3ee" stroke-width="3" stroke-linecap="round"/></svg>
         <span class="brand-text">Brain of <strong>Reese</strong></span>
       </span>
       <nav class="app-nav" aria-label="Primary">
@@ -66,7 +66,9 @@
       </div>
 
       <div class="empty-state" id="sources-empty" hidden>
-        <div class="empty-state-emoji" aria-hidden="true">📂</div>
+        <div class="empty-state-glyph" aria-hidden="true">
+          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12a4 4 0 0 1 4-4h10l4 5h14a4 4 0 0 1 4 4v17a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4Z"/><path d="M6 20h36"/><path d="M15 28h9M15 33h14"/></svg>
+        </div>
         <h2 class="empty-state-title">Nothing indexed yet</h2>
         <p class="empty-state-sub">
           Run the import to pull in the markdown docs: