From bef87cac7fa7b2206061236ec44807c3a2970553 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Sat, 1 Aug 2026 15:37:00 -0700
Subject: [PATCH 1/5] Subdue hover card footer

---
 plugins/thread-hover-cards/dist/app.js | 7 ++++++-
 plugins/thread-hover-cards/styles.ts   | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/plugins/thread-hover-cards/dist/app.js b/plugins/thread-hover-cards/dist/app.js
index 95b75a1..74657c6 100644
--- a/plugins/thread-hover-cards/dist/app.js
+++ b/plugins/thread-hover-cards/dist/app.js
@@ -738,6 +738,11 @@ var HOVER_CARD_CSS = String.raw`
   flex: 1 1 auto;
 }
 
+.bb-thread-hover-card__project-name,
+.bb-thread-hover-card__branch-name {
+  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
+}
+
 .bb-thread-hover-card__local {
   width: 100%;
   flex-wrap: nowrap;
@@ -806,7 +811,7 @@ var HOVER_CARD_CSS = String.raw`
   align-items: center;
   gap: 0.1875rem;
   border-radius: 0.25rem;
-  color: var(--foreground);
+  color: var(--muted-foreground);
   outline: none;
   text-decoration: none;
 }
diff --git a/plugins/thread-hover-cards/styles.ts b/plugins/thread-hover-cards/styles.ts
index 2775956..f55fe6e 100644
--- a/plugins/thread-hover-cards/styles.ts
+++ b/plugins/thread-hover-cards/styles.ts
@@ -244,6 +244,11 @@ export const HOVER_CARD_CSS = String.raw`
   flex: 1 1 auto;
 }
 
+.bb-thread-hover-card__project-name,
+.bb-thread-hover-card__branch-name {
+  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
+}
+
 .bb-thread-hover-card__local {
   width: 100%;
   flex-wrap: nowrap;
@@ -312,7 +317,7 @@ export const HOVER_CARD_CSS = String.raw`
   align-items: center;
   gap: 0.1875rem;
   border-radius: 0.25rem;
-  color: var(--foreground);
+  color: var(--muted-foreground);
   outline: none;
   text-decoration: none;
 }

From a96bbf7aab1bcc657f38f8abd30e4f6541c82f41 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Sat, 1 Aug 2026 16:00:25 -0700
Subject: [PATCH 2/5] Add muted hover card footer

---
 plugins/thread-hover-cards/app.tsx           |  7 +++--
 plugins/thread-hover-cards/dist/app.js       | 32 +++++++++++++++-----
 plugins/thread-hover-cards/styles.ts         | 26 +++++++++++++---
 plugins/thread-hover-cards/test/app.test.mjs | 28 +++++++++++++++--
 4 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/plugins/thread-hover-cards/app.tsx b/plugins/thread-hover-cards/app.tsx
index b512da4..d027367 100644
--- a/plugins/thread-hover-cards/app.tsx
+++ b/plugins/thread-hover-cards/app.tsx
@@ -756,6 +756,7 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
   if (times.childElementCount > 0) header.append(times);
 
   const content: HTMLElement[] = [header];
+  const footer = element("footer", "bb-thread-hover-card__footer");
   const summaryMessage = summary.latestAssistantMessage;
 
   if (summaryMessage) {
@@ -847,7 +848,7 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
       pullRequest.append(pullRequestLink);
       context.append(pullRequest);
     }
-    content.push(context);
+    footer.append(context);
   }
 
   if (!summary.repository.isGitRepository) {
@@ -875,9 +876,11 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
       ),
       localPath,
     );
-    content.push(local);
+    footer.append(local);
   }
 
+  if (footer.childElementCount > 0) content.push(footer);
+
   card.replaceChildren(...content);
   refreshRunTime(card);
 }
diff --git a/plugins/thread-hover-cards/dist/app.js b/plugins/thread-hover-cards/dist/app.js
index 74657c6..09bc74e 100644
--- a/plugins/thread-hover-cards/dist/app.js
+++ b/plugins/thread-hover-cards/dist/app.js
@@ -689,6 +689,27 @@ var HOVER_CARD_CSS = String.raw`
   color: var(--muted-foreground);
 }
 
+.bb-thread-hover-card__footer {
+  position: relative;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  margin-inline: -0.75rem;
+  margin-bottom: -0.75rem;
+  padding-inline: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.75rem;
+}
+
+.bb-thread-hover-card__footer::before {
+  position: absolute;
+  top: -0.75rem;
+  inset-inline: 0;
+  height: 0.75rem;
+  background: linear-gradient(to bottom, transparent, var(--muted));
+  content: "";
+  pointer-events: none;
+}
+
 .bb-thread-hover-card__context {
   width: 100%;
   flex-wrap: nowrap;
@@ -738,11 +759,6 @@ var HOVER_CARD_CSS = String.raw`
   flex: 1 1 auto;
 }
 
-.bb-thread-hover-card__project-name,
-.bb-thread-hover-card__branch-name {
-  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
-}
-
 .bb-thread-hover-card__local {
   width: 100%;
   flex-wrap: nowrap;
@@ -1588,6 +1604,7 @@ function renderSummary(card, summary) {
   }
   if (times.childElementCount > 0) header.append(times);
   const content = [header];
+  const footer = element("footer", "bb-thread-hover-card__footer");
   const summaryMessage = summary.latestAssistantMessage;
   if (summaryMessage) {
     const request = element("section", "bb-thread-hover-card__summary");
@@ -1670,7 +1687,7 @@ function renderSummary(card, summary) {
       pullRequest.append(pullRequestLink);
       context.append(pullRequest);
     }
-    content.push(context);
+    footer.append(context);
   }
   if (!summary.repository.isGitRepository) {
     const localContext = summary.repository.path?.trim() || (summary.repository.name === "Repository unavailable" ? "Local" : summary.repository.name);
@@ -1693,8 +1710,9 @@ function renderSummary(card, summary) {
       ),
       localPath
     );
-    content.push(local);
+    footer.append(local);
   }
+  if (footer.childElementCount > 0) content.push(footer);
   card.replaceChildren(...content);
   refreshRunTime(card);
 }
diff --git a/plugins/thread-hover-cards/styles.ts b/plugins/thread-hover-cards/styles.ts
index f55fe6e..6410cb9 100644
--- a/plugins/thread-hover-cards/styles.ts
+++ b/plugins/thread-hover-cards/styles.ts
@@ -195,6 +195,27 @@ export const HOVER_CARD_CSS = String.raw`
   color: var(--muted-foreground);
 }
 
+.bb-thread-hover-card__footer {
+  position: relative;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  margin-inline: -0.75rem;
+  margin-bottom: -0.75rem;
+  padding-inline: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.75rem;
+}
+
+.bb-thread-hover-card__footer::before {
+  position: absolute;
+  top: -0.75rem;
+  inset-inline: 0;
+  height: 0.75rem;
+  background: linear-gradient(to bottom, transparent, var(--muted));
+  content: "";
+  pointer-events: none;
+}
+
 .bb-thread-hover-card__context {
   width: 100%;
   flex-wrap: nowrap;
@@ -244,11 +265,6 @@ export const HOVER_CARD_CSS = String.raw`
   flex: 1 1 auto;
 }
 
-.bb-thread-hover-card__project-name,
-.bb-thread-hover-card__branch-name {
-  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
-}
-
 .bb-thread-hover-card__local {
   width: 100%;
   flex-wrap: nowrap;
diff --git a/plugins/thread-hover-cards/test/app.test.mjs b/plugins/thread-hover-cards/test/app.test.mjs
index fb4657c..ecc8859 100644
--- a/plugins/thread-hover-cards/test/app.test.mjs
+++ b/plugins/thread-hover-cards/test/app.test.mjs
@@ -407,6 +407,14 @@ assert.match(
 );
 assert.doesNotMatch(style.textContent, /--font-mono/);
 assert.match(style.textContent, /\.bb-thread-hover-card__context/);
+assert.match(
+  style.textContent,
+  /\.bb-thread-hover-card__footer \{[\s\S]*?background: var\(--muted\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.5rem;/,
+);
+assert.match(
+  style.textContent,
+  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\(to bottom, transparent, var\(--muted\)\);[\s\S]*?pointer-events: none;/,
+);
 assert.match(
   style.textContent,
   /\.bb-thread-hover-card__context \{[\s\S]*?width: 100%;[\s\S]*?flex-wrap: nowrap;/,
@@ -564,9 +572,17 @@ assert.deepEqual(
   [
     "bb-thread-hover-card__header",
     "bb-thread-hover-card__summary",
-    "bb-thread-hover-card__context",
+    "bb-thread-hover-card__footer",
   ],
 );
+assert.equal(
+  card.querySelector(".bb-thread-hover-card__footer")?.tagName,
+  "FOOTER",
+);
+assert.equal(
+  card.querySelector(".bb-thread-hover-card__context")?.parentElement,
+  card.querySelector(".bb-thread-hover-card__footer"),
+);
 assert.equal(
   card.querySelector(".bb-thread-hover-card__summary")?.dataset.working,
   "true",
@@ -932,6 +948,14 @@ assert.deepEqual(
   [
     "bb-thread-hover-card__header",
     "bb-thread-hover-card__summary",
+    "bb-thread-hover-card__footer",
+  ],
+);
+assert.deepEqual(
+  Array.from(
+    card.querySelector(".bb-thread-hover-card__footer")?.children ?? [],
+  ).map((child) => child.className),
+  [
     "bb-thread-hover-card__context",
     "bb-thread-hover-card__local",
   ],
@@ -994,7 +1018,7 @@ assert.deepEqual(
   Array.from(card.children).map((child) => child.className),
   [
     "bb-thread-hover-card__header",
-    "bb-thread-hover-card__context",
+    "bb-thread-hover-card__footer",
   ],
 );
 assert.deepEqual(requestBodies, [

From 23ce80a44d22584354f9efb629e937c08f4ff2cd Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Sat, 1 Aug 2026 16:25:40 -0700
Subject: [PATCH 3/5] Soften hover card footer surface

---
 plugins/thread-hover-cards/dist/app.js       | 10 +++++++---
 plugins/thread-hover-cards/styles.ts         | 10 +++++++---
 plugins/thread-hover-cards/test/app.test.mjs |  4 ++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/plugins/thread-hover-cards/dist/app.js b/plugins/thread-hover-cards/dist/app.js
index 09bc74e..b266e42 100644
--- a/plugins/thread-hover-cards/dist/app.js
+++ b/plugins/thread-hover-cards/dist/app.js
@@ -691,12 +691,12 @@ var HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: var(--muted);
+  background: color-mix(in srgb, var(--muted) 10%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
   padding-inline: 0.75rem;
-  padding-top: 0.5rem;
+  padding-top: 0.25rem;
   padding-bottom: 0.75rem;
 }
 
@@ -705,7 +705,11 @@ var HOVER_CARD_CSS = String.raw`
   top: -0.75rem;
   inset-inline: 0;
   height: 0.75rem;
-  background: linear-gradient(to bottom, transparent, var(--muted));
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    color-mix(in srgb, var(--muted) 10%, transparent)
+  );
   content: "";
   pointer-events: none;
 }
diff --git a/plugins/thread-hover-cards/styles.ts b/plugins/thread-hover-cards/styles.ts
index 6410cb9..270b27a 100644
--- a/plugins/thread-hover-cards/styles.ts
+++ b/plugins/thread-hover-cards/styles.ts
@@ -197,12 +197,12 @@ export const HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: var(--muted);
+  background: color-mix(in srgb, var(--muted) 10%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
   padding-inline: 0.75rem;
-  padding-top: 0.5rem;
+  padding-top: 0.25rem;
   padding-bottom: 0.75rem;
 }
 
@@ -211,7 +211,11 @@ export const HOVER_CARD_CSS = String.raw`
   top: -0.75rem;
   inset-inline: 0;
   height: 0.75rem;
-  background: linear-gradient(to bottom, transparent, var(--muted));
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    color-mix(in srgb, var(--muted) 10%, transparent)
+  );
   content: "";
   pointer-events: none;
 }
diff --git a/plugins/thread-hover-cards/test/app.test.mjs b/plugins/thread-hover-cards/test/app.test.mjs
index ecc8859..e6d316c 100644
--- a/plugins/thread-hover-cards/test/app.test.mjs
+++ b/plugins/thread-hover-cards/test/app.test.mjs
@@ -409,11 +409,11 @@ assert.doesNotMatch(style.textContent, /--font-mono/);
 assert.match(style.textContent, /\.bb-thread-hover-card__context/);
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer \{[\s\S]*?background: var\(--muted\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.5rem;/,
+  /\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 10%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
 );
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\(to bottom, transparent, var\(--muted\)\);[\s\S]*?pointer-events: none;/,
+  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 10%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
 );
 assert.match(
   style.textContent,

From 2434fee88ccc994b99f3bc8fe2b15103cb26b7c2 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Sat, 1 Aug 2026 18:20:06 -0700
Subject: [PATCH 4/5] Set hover card footer surface to 40 percent

---
 plugins/thread-hover-cards/dist/app.js       | 4 ++--
 plugins/thread-hover-cards/styles.ts         | 4 ++--
 plugins/thread-hover-cards/test/app.test.mjs | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/thread-hover-cards/dist/app.js b/plugins/thread-hover-cards/dist/app.js
index b266e42..eadc2aa 100644
--- a/plugins/thread-hover-cards/dist/app.js
+++ b/plugins/thread-hover-cards/dist/app.js
@@ -691,7 +691,7 @@ var HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: color-mix(in srgb, var(--muted) 10%, transparent);
+  background: color-mix(in srgb, var(--muted) 40%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
@@ -708,7 +708,7 @@ var HOVER_CARD_CSS = String.raw`
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--muted) 10%, transparent)
+    color-mix(in srgb, var(--muted) 40%, transparent)
   );
   content: "";
   pointer-events: none;
diff --git a/plugins/thread-hover-cards/styles.ts b/plugins/thread-hover-cards/styles.ts
index 270b27a..b09fae4 100644
--- a/plugins/thread-hover-cards/styles.ts
+++ b/plugins/thread-hover-cards/styles.ts
@@ -197,7 +197,7 @@ export const HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: color-mix(in srgb, var(--muted) 10%, transparent);
+  background: color-mix(in srgb, var(--muted) 40%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
@@ -214,7 +214,7 @@ export const HOVER_CARD_CSS = String.raw`
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--muted) 10%, transparent)
+    color-mix(in srgb, var(--muted) 40%, transparent)
   );
   content: "";
   pointer-events: none;
diff --git a/plugins/thread-hover-cards/test/app.test.mjs b/plugins/thread-hover-cards/test/app.test.mjs
index e6d316c..1597261 100644
--- a/plugins/thread-hover-cards/test/app.test.mjs
+++ b/plugins/thread-hover-cards/test/app.test.mjs
@@ -409,11 +409,11 @@ assert.doesNotMatch(style.textContent, /--font-mono/);
 assert.match(style.textContent, /\.bb-thread-hover-card__context/);
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 10%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
+  /\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 40%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
 );
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 10%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
+  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 40%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
 );
 assert.match(
   style.textContent,

From 7c6f743d25bee7580a5cb92290bdf31d937f7d31 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Sat, 1 Aug 2026 18:31:07 -0700
Subject: [PATCH 5/5] Refine dark hover card surface

---
 plugins/thread-hover-cards/dist/app.js       | 50 +++++++++++++++++++-
 plugins/thread-hover-cards/styles.ts         | 50 +++++++++++++++++++-
 plugins/thread-hover-cards/test/app.test.mjs | 12 ++++-
 3 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/plugins/thread-hover-cards/dist/app.js b/plugins/thread-hover-cards/dist/app.js
index eadc2aa..8cb1ce9 100644
--- a/plugins/thread-hover-cards/dist/app.js
+++ b/plugins/thread-hover-cards/dist/app.js
@@ -521,6 +521,52 @@ var HOVER_CARD_CSS = String.raw`
   user-select: text;
 }
 
+:is(.dark, [data-theme="dark"]) .bb-thread-hover-card {
+  border-color:
+    color-mix(
+      in oklab,
+      var(--warning-text, var(--warning)) 24%,
+      transparent
+    );
+  background:
+    radial-gradient(
+      ellipse at 18% -12%,
+      color-mix(
+        in oklab,
+        var(--warning-text, var(--warning)) 16%,
+        transparent
+      ),
+      transparent 48%
+    ),
+    linear-gradient(
+      115deg,
+      color-mix(
+          in oklab,
+          var(--warning-text, var(--warning)) 9%,
+          transparent
+        )
+        0%,
+      transparent 34%,
+      color-mix(
+          in oklab,
+          var(--warning-text, var(--warning)) 6%,
+          transparent
+        )
+        55%,
+      transparent 72%
+    ),
+    color-mix(in srgb, var(--popover) 92%, transparent);
+  box-shadow:
+    0 0.75rem 2.5rem
+      color-mix(in srgb, var(--foreground) 16%, transparent),
+    inset 0 1px 0
+      color-mix(
+        in oklab,
+        var(--warning-text, var(--warning)) 20%,
+        transparent
+      );
+}
+
 .bb-thread-hover-card.is-visible {
   animation: bb-thread-hover-card-in 120ms ease-out both;
 }
@@ -691,7 +737,7 @@ var HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: color-mix(in srgb, var(--muted) 40%, transparent);
+  background: color-mix(in srgb, var(--muted) 60%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
@@ -708,7 +754,7 @@ var HOVER_CARD_CSS = String.raw`
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--muted) 40%, transparent)
+    color-mix(in srgb, var(--muted) 60%, transparent)
   );
   content: "";
   pointer-events: none;
diff --git a/plugins/thread-hover-cards/styles.ts b/plugins/thread-hover-cards/styles.ts
index b09fae4..4bbe334 100644
--- a/plugins/thread-hover-cards/styles.ts
+++ b/plugins/thread-hover-cards/styles.ts
@@ -27,6 +27,52 @@ export const HOVER_CARD_CSS = String.raw`
   user-select: text;
 }
 
+:is(.dark, [data-theme="dark"]) .bb-thread-hover-card {
+  border-color:
+    color-mix(
+      in oklab,
+      var(--warning-text, var(--warning)) 24%,
+      transparent
+    );
+  background:
+    radial-gradient(
+      ellipse at 18% -12%,
+      color-mix(
+        in oklab,
+        var(--warning-text, var(--warning)) 16%,
+        transparent
+      ),
+      transparent 48%
+    ),
+    linear-gradient(
+      115deg,
+      color-mix(
+          in oklab,
+          var(--warning-text, var(--warning)) 9%,
+          transparent
+        )
+        0%,
+      transparent 34%,
+      color-mix(
+          in oklab,
+          var(--warning-text, var(--warning)) 6%,
+          transparent
+        )
+        55%,
+      transparent 72%
+    ),
+    color-mix(in srgb, var(--popover) 92%, transparent);
+  box-shadow:
+    0 0.75rem 2.5rem
+      color-mix(in srgb, var(--foreground) 16%, transparent),
+    inset 0 1px 0
+      color-mix(
+        in oklab,
+        var(--warning-text, var(--warning)) 20%,
+        transparent
+      );
+}
+
 .bb-thread-hover-card.is-visible {
   animation: bb-thread-hover-card-in 120ms ease-out both;
 }
@@ -197,7 +243,7 @@ export const HOVER_CARD_CSS = String.raw`
 
 .bb-thread-hover-card__footer {
   position: relative;
-  background: color-mix(in srgb, var(--muted) 40%, transparent);
+  background: color-mix(in srgb, var(--muted) 60%, transparent);
   color: var(--muted-foreground);
   margin-inline: -0.75rem;
   margin-bottom: -0.75rem;
@@ -214,7 +260,7 @@ export const HOVER_CARD_CSS = String.raw`
   background: linear-gradient(
     to bottom,
     transparent,
-    color-mix(in srgb, var(--muted) 40%, transparent)
+    color-mix(in srgb, var(--muted) 60%, transparent)
   );
   content: "";
   pointer-events: none;
diff --git a/plugins/thread-hover-cards/test/app.test.mjs b/plugins/thread-hover-cards/test/app.test.mjs
index 1597261..01814c9 100644
--- a/plugins/thread-hover-cards/test/app.test.mjs
+++ b/plugins/thread-hover-cards/test/app.test.mjs
@@ -409,11 +409,19 @@ assert.doesNotMatch(style.textContent, /--font-mono/);
 assert.match(style.textContent, /\.bb-thread-hover-card__context/);
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 40%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
+  /\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 60%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
 );
 assert.match(
   style.textContent,
-  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 40%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
+  /\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 60%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
+);
+assert.match(
+  style.textContent,
+  /:is\(\.dark, \[data-theme="dark"\]\) \.bb-thread-hover-card \{[\s\S]*?border-color:[\s\S]*?var\(--warning-text, var\(--warning\)\)[\s\S]*?radial-gradient\([\s\S]*?linear-gradient\([\s\S]*?box-shadow:[\s\S]*?var\(--warning-text, var\(--warning\)\)/,
+);
+assert.doesNotMatch(
+  style.textContent,
+  /:is\(\.dark, \[data-theme="dark"\]\) \.bb-thread-hover-card \{[\s\S]*?0 0 1\.75rem/,
 );
 assert.match(
   style.textContent,