fix(dashboard): chat mobile single-pane, comment-box theme, ChatView FOUC

- ChatView mobile: add @media (max-width: 768px) so the session-list
  sidebar goes full-width and the thread is hidden when the sidebar
  is visible (and vice-versa). The component already had the state,
  back-button (ChevronLeft), and visibility toggling — only the CSS
  was missing.
- TaskComments compose/edit textareas now use var(--surface) for
  background. The base .spec-editor-feedback uses var(--bg), which
  in light theme resolves to #ffffff — the same as the task detail
  modal's --card panel — making the comment box invisible.
- ChatView CSS is now imported eagerly from App.tsx so it bundles
  into the main CSS file. Previously the lazy ChatView JS chunk
  loaded its CSS via an async <link> tag, producing a brief flash
  of unstyled chat UI on first render.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/ChatView.css

@@ -637,3 +637,24 @@
   color: var(--text-muted);
 }
 
+/* === Mobile: one pane at a time =========================================
+   Sidebar (session list) and thread are siblings of .chat-view. On mobile
+   we show whichever one is "active" full-width: when the sidebar is
+   visible, the thread is hidden; when the sidebar is hidden (a session is
+   open), the sidebar is collapsed via .chat-sidebar--hidden and the
+   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-sidebar {
+    width: 100%;
+    min-width: 0;
+    border-right: none;
+  }
+
+  /* When the sidebar is shown, the thread is hidden so only the session
+     list is visible. When the sidebar is hidden, the thread fills the
+     viewport. Adjacent-sibling selector keeps logic in CSS only. */
+  .chat-sidebar:not(.chat-sidebar--hidden) + .chat-thread {
+    display: none;
+  }
+}