fix: custom markdown CSS styles for AI chat responses (tables, code, lists, headings)

frontend/src/components/ai/ChatWindow.tsx

@@ -25,7 +25,7 @@ function MessageContent({ content, role }: { content: string; role: string }) {
     return <div className="whitespace-pre-wrap break-words">{content}</div>;
   }
   return (
-    <div className="prose prose-sm max-w-none break-words [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1 [&_table]:text-xs [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_pre]:text-xs [&_code]:text-xs">
+    <div className="ai-markdown max-w-none break-words">
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
     </div>
   );

frontend/src/index.css

@@ -2,6 +2,116 @@
 @tailwind components;
 @tailwind utilities;
 
+/* AI Chat Markdown Styles */
+.ai-markdown {
+  line-height: 1.6;
+  color: #0f172a;
+  font-size: 0.875rem;
+}
+.ai-markdown p {
+  margin: 0.5rem 0;
+}
+.ai-markdown h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 1rem 0 0.5rem;
+  color: #1e293b;
+}
+.ai-markdown h2 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0.875rem 0 0.5rem;
+  color: #1e293b;
+}
+.ai-markdown h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0.75rem 0 0.375rem;
+  color: #334155;
+}
+.ai-markdown ul {
+  list-style: disc;
+  padding-left: 1.25rem;
+  margin: 0.5rem 0;
+}
+.ai-markdown ol {
+  list-style: decimal;
+  padding-left: 1.25rem;
+  margin: 0.5rem 0;
+}
+.ai-markdown li {
+  margin: 0.25rem 0;
+}
+.ai-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  font-size: 0.75rem;
+}
+.ai-markdown th {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  padding: 0.375rem 0.5rem;
+  text-align: left;
+  font-weight: 600;
+}
+.ai-markdown td {
+  border: 1px solid #e2e8f0;
+  padding: 0.375rem 0.5rem;
+}
+.ai-markdown pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+  font-size: 0.75rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+.ai-markdown code {
+  background: #f1f5f9;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.75rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+.ai-markdown pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+.ai-markdown blockquote {
+  border-left: 3px solid #cbd5e1;
+  padding-left: 0.75rem;
+  margin: 0.5rem 0;
+  color: #64748b;
+  font-style: italic;
+}
+.ai-markdown strong {
+  font-weight: 700;
+}
+.ai-markdown em {
+  font-style: italic;
+}
+.ai-markdown a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+.ai-markdown a:hover {
+  color: #1d4ed8;
+}
+.ai-markdown hr {
+  border: none;
+  border-top: 1px solid #e2e8f0;
+  margin: 1rem 0;
+}
+.ai-markdown img {
+  max-width: 100%;
+  border-radius: 0.5rem;
+  margin: 0.5rem 0;
+}
+
 :root {
   /* Design tokens from prototype */
   --color-primary: #2563eb;