BAI-15: refine dark mentor answer bubble

Co-authored-by: multica-agent <github@multica.ai>

app/config/architecture-inventory.json

@@ -390,7 +390,7 @@
     "/pages/popularity/foundation.css?v=20260806-1",
     "/pages/dragon-tiger/foundation.css?v=20260806-1",
     "/pages/screener/foundation.css?v=20260806-2",
-    "/pages/mentor/foundation.css?v=20260806-2",
+    "/pages/mentor/foundation.css?v=20260807-1",
     "/pages/heaven/foundation.css?v=20260806-2",
     "/pages/review/foundation.css?v=20260806-1"
   ],

app/frontend/index.html

@@ -37,7 +37,7 @@
   <link rel="stylesheet" href="/pages/popularity/foundation.css?v=20260806-1">
   <link rel="stylesheet" href="/pages/dragon-tiger/foundation.css?v=20260806-1">
   <link rel="stylesheet" href="/pages/screener/foundation.css?v=20260806-2">
-  <link rel="stylesheet" href="/pages/mentor/foundation.css?v=20260806-2">
+  <link rel="stylesheet" href="/pages/mentor/foundation.css?v=20260807-1">
   <link rel="stylesheet" href="/pages/heaven/foundation.css?v=20260806-2">
   <link rel="stylesheet" href="/pages/review/foundation.css?v=20260806-1">
 </head>

app/frontend/pages/mentor/foundation.css

@@ -966,11 +966,16 @@
 }
 
 :root[data-theme="dark"] #mentorView .mentor-message {
-  border-color: var(--line-soft);
+  background: transparent;
-  background: var(--surface-subtle);
   box-shadow: none;
 }
 
+:root[data-theme="dark"] #mentorView .mentor-message.assistant .mentor-message-content {
+  border-color: var(--border);
+  background: var(--surface-muted);
+  color: var(--text-primary);
+}
+
 :root[data-theme="dark"] #mentorView .mentor-message.user .mentor-message-content {
   border-color: var(--blue-line);
   background: var(--action-soft);

app/tests/e2e/app-shell.spec.js

@@ -2874,6 +2874,7 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
   await expect(page.locator("#mentorQuestion")).toHaveValue("哪些信号代表确认？");
   await expect(page.locator("#mentorMessages .mentor-message")).toHaveCount(messageCount);
   await page.locator("#themeToggle").click();
+  await expect(page.locator("html")).not.toHaveClass(/theme-switching/);
   const userMessage = page.locator("#mentorMessages .mentor-message.user");
   const darkUserMessageStyle = await userMessage.evaluate((element) => ({
     background: getComputedStyle(element).backgroundColor,
@@ -2888,22 +2889,25 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
   const darkMessageStyle = await answer.evaluate((element) => {
     const style = getComputedStyle(element);
     const content = element.querySelector(".mentor-message-content");
+    const contentStyle = getComputedStyle(content);
     const heading = element.querySelector(".mentor-answer-heading");
     const label = element.querySelector(".mentor-message-label");
     const meta = element.querySelector("small");
     return {
       background: style.backgroundColor,
-      border: style.borderTopColor,
       shadow: style.boxShadow,
-      contentColor: getComputedStyle(content).color,
+      contentBackground: contentStyle.backgroundColor,
+      contentBorder: contentStyle.borderTopColor,
+      contentColor: contentStyle.color,
       headingColor: getComputedStyle(heading).color,
       labelColor: getComputedStyle(label).color,
       metaColor: getComputedStyle(meta).color,
     };
   });
-  expect(darkMessageStyle.background).not.toBe("rgb(255, 255, 255)");
+  expect(darkMessageStyle.background).toBe("rgba(0, 0, 0, 0)");
-  expect(darkMessageStyle.border).not.toBe("rgb(255, 255, 255)");
   expect(darkMessageStyle.shadow).toBe("none");
+  expect(darkMessageStyle.contentBackground).toBe("rgb(32, 36, 40)");
+  expect(darkMessageStyle.contentBorder).toBe("rgb(52, 58, 64)");
   expect(darkMessageStyle.contentColor).toBe("rgb(232, 234, 237)");
   expect(darkMessageStyle.headingColor).toBe("rgb(232, 234, 237)");
   expect(darkMessageStyle.labelColor).toBe("rgb(127, 137, 147)");

app/tests/test_frontend_contract.py

@@ -279,14 +279,19 @@ class FrontendContractTests(unittest.TestCase):
         self.assertIn("context.fillStyle = palette.axis;", chart)
         self.assertNotIn('context.fillStyle = "#6c7983";', chart)
 
-    def test_dark_mentor_tokens_and_sentiment_bottom_clearance_are_defined(self):
+    def test_dark_mentor_answer_bubble_and_sentiment_bottom_clearance_are_defined(self):
         self.assertIn(":root[data-theme=\"dark\"] #mentorView {", self.mentor_styles)
         self.assertIn("--mentor-ink: var(--text-primary);", self.mentor_styles)
         self.assertIn("--mentor-sub: var(--text-secondary);", self.mentor_styles)
         self.assertIn(":root[data-theme=\"dark\"] #mentorView .mentor-message {", self.mentor_styles)
-        self.assertIn("border-color: var(--line-soft);", self.mentor_styles)
+        self.assertIn("background: transparent;", self.mentor_styles)
-        self.assertIn("background: var(--surface-subtle);", self.mentor_styles)
         self.assertIn("box-shadow: none;", self.mentor_styles)
+        self.assertIn(
+            ':root[data-theme="dark"] #mentorView .mentor-message.assistant .mentor-message-content {',
+            self.mentor_styles,
+        )
+        self.assertIn("border-color: var(--border);", self.mentor_styles)
+        self.assertIn("background: var(--surface-muted);", self.mentor_styles)
         self.assertIn("#sentimentCycleView .sentiment-history-frame {", self.sentiment_styles)
         self.assertIn("margin-bottom: var(--card-gap);", self.sentiment_styles)
         self.assertIn("padding-bottom: var(--card-gap);", self.sentiment_styles)