From 6604826abac54e01f7c9572d3b9c32b56860d647 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Mon, 11 May 2026 13:08:08 -0700
Subject: [PATCH] feat(FN-4024): scope chat styles to owning components

Scoped chat and popup styles to their owning components, removing cross-contaminating global rules from AgentReflectionsTab and consolidating FileMentionPopup and AgentMentionPopup styles locally, while applying final tokenization and budget style revisions in the fixup commit.

Fusion-Task-Id: FN-4024
---
 .../app/components/AgentMentionPopup.css      |   4 +-
 .../app/components/AgentReflectionsTab.css    | 139 +++---------------
 .../components/BackgroundTasksIndicator.css   |   6 +-
 .../dashboard/app/components/ChatView.css     |  42 +++++-
 .../app/components/FileMentionPopup.css       |  86 +++++------
 5 files changed, 114 insertions(+), 163 deletions(-)

diff --git a/packages/dashboard/app/components/AgentMentionPopup.css b/packages/dashboard/app/components/AgentMentionPopup.css
index e96d40d9ec..a821f4c42d 100644
--- a/packages/dashboard/app/components/AgentMentionPopup.css
+++ b/packages/dashboard/app/components/AgentMentionPopup.css
@@ -115,8 +115,8 @@
 
 @media (max-width: 768px) {
   .agent-mention-popup {
-    min-width: calc(var(--space-xl) * 9);
-    max-width: 100%;
+    min-width: 200px;
+    max-width: min(280px, 100%);
   }
 }
 
diff --git a/packages/dashboard/app/components/AgentReflectionsTab.css b/packages/dashboard/app/components/AgentReflectionsTab.css
index 161988cbe3..92afe386c2 100644
--- a/packages/dashboard/app/components/AgentReflectionsTab.css
+++ b/packages/dashboard/app/components/AgentReflectionsTab.css
@@ -291,40 +291,40 @@
 /* ── Budget Progress Bar ────────────────────────────────────────────────────── */
 
 .budget-progress-container {
-  margin-top: 4px;
+  margin-top: var(--space-xs);
 }
 
 .budget-progress-bar {
   width: 100%;
-  height: 8px;
-  background: var(--bg-secondary, #161b22);
-  border-radius: 4px;
+  height: var(--space-sm);
+  background: var(--surface);
+  border-radius: var(--radius-sm);
   overflow: hidden;
-  margin-top: 4px;
+  margin-top: var(--space-xs);
 }
 
 .budget-progress-bar__fill {
   height: 100%;
-  border-radius: 4px;
-  transition: width 0.3s ease, background-color 0.3s ease;
+  border-radius: var(--radius-sm);
+  transition: width var(--transition-slow), background-color var(--transition-slow);
 }
 
 .budget-progress-bar__fill--green {
-  background: var(--state-active-text, #3fb950);
+  background: var(--color-success);
 }
 
 .budget-progress-bar__fill--amber {
-  background: var(--state-paused-text, #e3b541);
+  background: var(--color-warning);
 }
 
 .budget-progress-bar__fill--red {
-  background: var(--state-error-text, #f85149);
+  background: var(--color-error);
 }
 
 .budget-progress-label {
   font-size: 0.75rem;
-  color: var(--text-secondary, #8b949e);
-  margin-top: 4px;
+  color: var(--text-muted);
+  margin-top: var(--space-xs);
   display: block;
 }
 
@@ -333,9 +333,9 @@
 .budget-badge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
+  gap: var(--space-xs);
+  padding: calc(var(--space-xs) / 2) var(--space-sm);
+  border-radius: var(--radius-pill);
   font-size: 0.75rem;
   font-weight: 500;
 }
@@ -345,117 +345,22 @@
 .budget-warning-banner {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 6px;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
   background: var(--state-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
-  color: var(--state-error-text, #f85149);
-  border: 1px solid var(--state-error-border, #f85149);
+  color: var(--state-error-text);
+  border: 1px solid var(--state-error-border);
   font-size: 0.875rem;
-  margin-bottom: 12px;
+  margin-bottom: var(--space-md);
 }
 
 /* ── Budget Reset Button ─────────────────────────────────────────────────────── */
 
 .btn-reset-budget {
-  margin-top: 8px;
-}
-
-/* ── Chat View Mobile Styles ────────────────────────────────────────────────── */
-
-/* Default: hide footer, mobile will override to show bottom-anchored New Chat */
-.chat-sidebar-footer {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .chat-view {
-    flex-direction: column;
-  }
-
-  .chat-sidebar {
-    width: 100%;
-    min-width: 100%;
-    height: 100%;
-    max-height: none;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    flex-direction: column;
-  }
-
-  /* Desktop header hidden on mobile - New Chat is in footer instead */
-  .chat-sidebar-header {
-    display: none;
-  }
-
-  /* Hide search controls on mobile list view */
-  .chat-sidebar-search {
-    display: none;
-  }
-
-  /* Session list fills available space with scrolling */
-  .chat-sidebar-list {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-  }
-
-  /* Footer with bottom-anchored New Chat action */
-  .chat-sidebar-footer {
-    display: flex;
-    padding: var(--space-md);
-    border-top: 1px solid var(--border);
-    background: var(--bg-secondary);
-  }
-
-  .chat-sidebar-footer-btn {
-    flex: 1;
-    justify-content: center;
-  }
-
-  .chat-sidebar--hidden {
-    display: none;
-  }
-
-  .chat-message {
-    max-width: 90%;
-  }
-
-  .chat-new-dialog {
-    width: 95vw;
-    margin: 16px;
-  }
-
-  .chat-thread-header {
-    padding: 8px 12px;
-  }
-
-  .chat-skill-menu {
-    left: var(--space-md);
-    right: calc(var(--space-md) + var(--mobile-nav-height));
-    min-width: 0;
-    max-width: none;
-  }
+  margin-top: var(--space-sm);
 }
 
 
 
-/* Mobile responsive for file mention popup */
-@media (max-width: 768px) {
-  .file-mention-popup {
-    max-height: 200px;
-  }
-
-  .file-mention-popup-item {
-    min-height: 36px;
-    padding: 10px 12px;
-  }
-
-  .agent-mention-popup {
-    max-width: 280px;
-    min-width: 200px;
-  }
-}
-
-
 
diff --git a/packages/dashboard/app/components/BackgroundTasksIndicator.css b/packages/dashboard/app/components/BackgroundTasksIndicator.css
index e01032520c..dc8d21b4ad 100644
--- a/packages/dashboard/app/components/BackgroundTasksIndicator.css
+++ b/packages/dashboard/app/components/BackgroundTasksIndicator.css
@@ -112,7 +112,11 @@
     position: fixed;
     /* Add iOS home-indicator inset so the popover doesn't sit inside the
        indicator zone on iPhone with viewport-fit=cover. */
-    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
+    bottom: calc(
+      var(--mobile-nav-height) +
+      env(safe-area-inset-bottom, 0px) +
+      var(--standalone-bottom-gap)
+    );
     left: max(8px, env(safe-area-inset-left, 0px));
     right: max(8px, env(safe-area-inset-right, 0px));
     min-width: auto;
diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css
index f177c256b8..3c8a8d5edf 100644
--- a/packages/dashboard/app/components/ChatView.css
+++ b/packages/dashboard/app/components/ChatView.css
@@ -1274,10 +1274,32 @@
    thread takes the full viewport. The thread already renders a back
    button (ChevronLeft) on mobile to flip back to the session list. */
 @media (max-width: 768px) {
+  .chat-view {
+    flex-direction: column;
+  }
+
   .chat-sidebar {
     width: 100%;
-    min-width: 0;
+    min-width: 100%;
+    height: 100%;
+    max-height: none;
     border-right: none;
+    border-bottom: 1px solid var(--border);
+    flex-direction: column;
+  }
+
+  .chat-sidebar-header {
+    display: none;
+  }
+
+  .chat-sidebar-search {
+    display: none;
+  }
+
+  .chat-sidebar-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
   }
 
   /* When the sidebar is shown, the thread is hidden so only the session
@@ -1405,7 +1427,23 @@
   }
 
   .chat-message {
-    max-width: 82%;
+    max-width: 90%;
+  }
+
+  .chat-new-dialog {
+    width: 95vw;
+    margin: var(--space-lg);
+  }
+
+  .chat-thread-header {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .chat-skill-menu {
+    left: var(--space-md);
+    right: calc(var(--space-md) + var(--mobile-nav-height));
+    min-width: 0;
+    max-width: none;
   }
 
   .chat-jump-to-latest {
diff --git a/packages/dashboard/app/components/FileMentionPopup.css b/packages/dashboard/app/components/FileMentionPopup.css
index bbd0a93051..3627a6208a 100644
--- a/packages/dashboard/app/components/FileMentionPopup.css
+++ b/packages/dashboard/app/components/FileMentionPopup.css
@@ -105,9 +105,13 @@
 }
 
 @media (max-width: 768px) {
-  .agent-mention-popup {
-    max-width: 280px;
-    min-width: 200px;
+  .file-mention-popup {
+    max-height: calc(var(--space-xl) * 8 + var(--space-sm));
+  }
+
+  .file-mention-popup-item {
+    min-height: calc(var(--space-lg) + var(--space-xl) - var(--space-sm));
+    padding: calc(var(--space-sm) + (var(--space-xs) / 2)) var(--space-md);
   }
 }
 
@@ -118,26 +122,26 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: var(--space-lg);
   color: var(--text-secondary);
-  padding: 24px;
+  padding: var(--space-xl);
   text-align: center;
 }
 
 .chat-empty-state h2 {
-  font-size: 20px;
+  font-size: calc(var(--space-xl) - var(--space-xs));
   color: var(--text);
   margin: 0;
 }
 
 .chat-empty-state-agent-select select {
-  padding: 8px 12px;
+  padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--bg);
   color: var(--text);
-  font-size: 14px;
-  min-width: 200px;
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
+  min-width: calc(var(--space-xl) * 8 + var(--space-sm));
 }
 
 /* New chat dialog */
@@ -155,36 +159,36 @@
 .chat-new-dialog {
   background: var(--bg-elevated, var(--bg));
   border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 24px;
-  width: 400px;
-  max-width: 90vw;
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  width: calc(var(--space-xl) * 16 + var(--space-md));
+  max-width: calc(100vw - (var(--space-md) * 2));
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-lg);
 }
 
 .chat-new-dialog h3 {
   margin: 0;
-  font-size: 18px;
+  font-size: calc(var(--space-lg) + (var(--space-xs) / 2));
 }
 
 .chat-new-dialog label {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
+  gap: var(--space-xs);
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.25));
   color: var(--text-secondary);
 }
 
 .chat-new-dialog input,
 .chat-new-dialog select {
-  padding: 8px 12px;
+  padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--bg);
   color: var(--text);
-  font-size: 14px;
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
 }
 
 .chat-new-dialog-mode-toggle {
@@ -199,7 +203,7 @@
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.25));
   cursor: pointer;
   transition: var(--transition-fast);
 }
@@ -238,42 +242,42 @@
 .chat-new-dialog-model-label {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-sm);
 }
 
 /* Agent list in new chat dialog */
 .chat-new-dialog-loading,
 .chat-new-dialog-empty {
-  padding: 16px;
+  padding: var(--space-lg);
   text-align: center;
   color: var(--text-secondary);
-  font-size: 14px;
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
 }
 
 .chat-new-dialog-agent-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  max-height: 300px;
+  gap: var(--space-xs);
+  max-height: calc(var(--space-xl) * 12 + var(--space-md));
   overflow-y: auto;
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 4px;
+  border-radius: var(--radius-md);
+  padding: var(--space-xs);
 }
 
 .chat-new-dialog-agent-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text);
-  font-size: 14px;
+  font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
   text-align: left;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
 }
 
 .chat-new-dialog-agent-item:hover {
@@ -291,7 +295,7 @@
 }
 
 .chat-new-dialog-agent-role {
-  font-size: 12px;
+  font-size: var(--space-md);
   color: var(--text-secondary);
   text-transform: capitalize;
 }
@@ -303,16 +307,16 @@
 
 @media (max-width: 768px) {
   .quick-chat-fab {
-    right: 4px;
-    bottom: calc(4px + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
+    right: var(--space-xs);
+    bottom: calc(var(--space-xs) + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
   }
 
   .quick-chat-panel {
-    right: 4px;
-    left: 4px;
+    right: var(--space-xs);
+    left: var(--space-xs);
     width: auto;
-    bottom: calc(60px + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
-    height: min(520px, calc(100dvh - 120px));
+    bottom: calc((var(--space-xl) * 2) + var(--space-md) + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
+    height: min(calc(var(--space-xl) * 21 + var(--space-md)), calc(100dvh - (var(--space-xl) * 5)));
   }
 
   /* ChatView New Chat + Delete dialogs should stay inset/compact on mobile.