From 8d0dff88802aaeb4ef8df5dd5ea4394dae4e971d Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Sun, 27 Sep 2026 23:34:45 -0600
Subject: [PATCH] fix: brighten dark-mode section headers and bold markdown

Sidebar date group headers (Today, Yesterday, ...) were one step darker
than the session titles below them in dark mode; they now sit one step
lighter (gray-300 over gray-400).

Bold in assistant responses only changed weight in dark mode, because
the bubble's gray-200 body is too close to white to leave room above
it. Response prose now steps down to gray-300 while bold and headings
step up to white; bold inside a link keeps the link color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/session-list/session-list.html  |  2 +-
 frontend/ai.client/src/styles.css              | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/ai.client/src/app/components/sidenav/components/session-list/session-list.html b/frontend/ai.client/src/app/components/sidenav/components/session-list/session-list.html
index b4abff1e0..16d7b21ee 100644
--- a/frontend/ai.client/src/app/components/sidenav/components/session-list/session-list.html
+++ b/frontend/ai.client/src/app/components/sidenav/components/session-list/session-list.html
@@ -31,7 +31,7 @@
             <div class="sidenav-body-enter flex flex-col gap-y-3" style="animation-delay: 60ms">
                 @for (group of groupedSessions(); track group.label; let gi = $index) {
                     <section>
-                        <h3 class="px-2 pb-0.5 text-[11px]/5 font-medium text-gray-400 dark:text-gray-500">{{ group.label }}</h3>
+                        <h3 class="px-2 pb-0.5 text-[11px]/5 font-medium text-gray-400 dark:text-gray-300">{{ group.label }}</h3>
                         <ul role="list" class="flex flex-col gap-y-0.5">
                             @for (entry of group.entries; track entry.kind === 'session' ? entry.session.sessionId : 'project:' + entry.projectId) {
                                 @if (entry.kind === 'session') {
diff --git a/frontend/ai.client/src/styles.css b/frontend/ai.client/src/styles.css
index b9481f6ed..679d2e516 100644
--- a/frontend/ai.client/src/styles.css
+++ b/frontend/ai.client/src/styles.css
@@ -263,6 +263,24 @@ html.dark .message-block {
     a:hover {
         color: var(--color-primary-300);
     }
+
+    /* Weight alone barely separates bold from body text on a dark surface,
+       and the assistant bubble's gray-200 body sits too close to white to
+       leave room above it. So response prose steps down to gray-300 while
+       headings and bold step up to white. Inside a link, bold keeps the
+       link's color. */
+    &.text-block {
+        color: var(--color-gray-300);
+    }
+
+    h1, h2, h3, h4, h5, h6,
+    strong {
+        color: var(--color-white);
+    }
+
+    a strong {
+        color: inherit;
+    }
 }