diff --git a/frontend/src/components/ai/ChatWindow.tsx b/frontend/src/components/ai/ChatWindow.tsx
index ae822bd..726020d 100644
--- a/frontend/src/components/ai/ChatWindow.tsx
+++ b/frontend/src/components/ai/ChatWindow.tsx
@@ -25,7 +25,7 @@ function MessageContent({ content, role }: { content: string; role: string }) {
return
{content}
;
}
return (
-
+
{content}
);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index baf0477..4a9ae3b 100644
--- a/frontend/src/index.css
+++ b/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;