redo ui

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

package-lock.json

@@ -19,6 +19,7 @@
                 "react": "18.3.1",
                 "react-dom": "18.3.1",
                 "react-markdown": "9.0.3",
+                "remark-gfm": "^4.0.1",
                 "tailwind-merge": "2.6.0"
             },
             "devDependencies": {
@@ -1756,6 +1757,18 @@
             "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
             "license": "MIT"
         },
+        "node_modules/escape-string-regexp": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+            "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/estree-util-is-identifier-name": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
@@ -2460,6 +2473,16 @@
                 "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
+        "node_modules/markdown-table": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+            "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2469,6 +2492,22 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/mdast-util-find-and-replace": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+            "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "escape-string-regexp": "^5.0.0",
+                "unist-util-is": "^6.0.0",
+                "unist-util-visit-parents": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-from-markdown": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -2493,6 +2532,107 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-gfm": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+            "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+            "license": "MIT",
+            "dependencies": {
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-gfm-autolink-literal": "^2.0.0",
+                "mdast-util-gfm-footnote": "^2.0.0",
+                "mdast-util-gfm-strikethrough": "^2.0.0",
+                "mdast-util-gfm-table": "^2.0.0",
+                "mdast-util-gfm-task-list-item": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-autolink-literal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+            "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "ccount": "^2.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-find-and-replace": "^3.0.0",
+                "micromark-util-character": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-footnote": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+            "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.1.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-strikethrough": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+            "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-table": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+            "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "markdown-table": "^3.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-gfm-task-list-item": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+            "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-mdx-expression": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -2722,6 +2862,127 @@
                 "micromark-util-types": "^2.0.0"
             }
         },
+        "node_modules/micromark-extension-gfm": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+            "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-extension-gfm-autolink-literal": "^2.0.0",
+                "micromark-extension-gfm-footnote": "^2.0.0",
+                "micromark-extension-gfm-strikethrough": "^2.0.0",
+                "micromark-extension-gfm-table": "^2.0.0",
+                "micromark-extension-gfm-tagfilter": "^2.0.0",
+                "micromark-extension-gfm-task-list-item": "^2.0.0",
+                "micromark-util-combine-extensions": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-autolink-literal": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+            "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-footnote": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+            "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-core-commonmark": "^2.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-normalize-identifier": "^2.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-strikethrough": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+            "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-util-chunked": "^2.0.0",
+                "micromark-util-classify-character": "^2.0.0",
+                "micromark-util-resolve-all": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-table": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+            "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-tagfilter": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+            "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+            "license": "MIT",
+            "dependencies": {
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-task-list-item": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+            "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+            "license": "MIT",
+            "dependencies": {
+                "devlop": "^1.0.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/micromark-factory-destination": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -3738,6 +3999,24 @@
                 "node": ">=8.10.0"
             }
         },
+        "node_modules/remark-gfm": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+            "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-gfm": "^3.0.0",
+                "micromark-extension-gfm": "^3.0.0",
+                "remark-parse": "^11.0.0",
+                "remark-stringify": "^11.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/remark-parse": {
             "version": "11.0.0",
             "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -3771,6 +4050,21 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/remark-stringify": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+            "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/require-from-string": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-markdown": "9.0.3",
+        "remark-gfm": "^4.0.1",
         "tailwind-merge": "2.6.0"
     },
     "devDependencies": {

src/app/globals.css

@@ -3,54 +3,33 @@
 @tailwind utilities;
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 220 13% 18%;
-  --card: 0 0% 100%;
-  --card-foreground: 220 13% 18%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 220 13% 18%;
-  --primary: 221 83% 53%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 220 14% 96%;
-  --secondary-foreground: 220 13% 18%;
-  --muted: 220 14% 96%;
-  --muted-foreground: 220 9% 46%;
-  --accent: 220 14% 96%;
-  --accent-foreground: 220 13% 18%;
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 220 13% 91%;
-  --input: 220 13% 91%;
-  --ring: 221 83% 53%;
+  --background: #09090b;
+  --foreground: #fafafa;
+  --muted: #18181b;
+  --muted-foreground: #a1a1aa;
+  --border: #27272a;
+  --card: #18181b;
+  --card-foreground: #fafafa;
+  --accent: #ff4c00;
+  --accent-hover: #ff6a2a;
+  --accent-light: rgba(255, 76, 0, 0.15);
+  --primary: #ff4c00;
+  --primary-foreground: #ffffff;
+  --secondary: #18181b;
+  --secondary-foreground: #fafafa;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --input: #27272a;
+  --ring: #ff4c00;
   --radius: 0.75rem;
 }
 
-.dark {
-  --background: 224 71% 4%;
-  --foreground: 213 31% 91%;
-  --card: 224 71% 4%;
-  --card-foreground: 213 31% 91%;
-  --popover: 224 71% 4%;
-  --popover-foreground: 213 31% 91%;
-  --primary: 217 91% 60%;
-  --primary-foreground: 222 47% 11%;
-  --secondary: 222 47% 11%;
-  --secondary-foreground: 213 31% 91%;
-  --muted: 223 47% 11%;
-  --muted-foreground: 215 20% 65%;
-  --accent: 216 34% 17%;
-  --accent-foreground: 213 31% 91%;
-  --destructive: 0 63% 31%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 216 34% 17%;
-  --input: 216 34% 17%;
-  --ring: 224 64% 33%;
-}
-
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-  padding: 0;
   margin: 0;
+  padding: 0;
 }
 
 html {
@@ -59,24 +38,23 @@ html {
 
 html,
 body {
+  height: 100%;
   max-width: 100vw;
-  min-height: 100vh;
   overflow-x: hidden;
-  font-feature-settings: "rlig" 1, "calt" 1;
 }
 
 body {
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  color: var(--foreground);
+  background: var(--background);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 6px;
-  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -84,27 +62,24 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.2);
+  background: #3f3f46;
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.4);
+  background: #52525b;
 }
 
-/* Selection */
 ::selection {
-  background: hsl(var(--primary) / 0.2);
-  color: hsl(var(--foreground));
+  background: var(--accent-light);
+  color: var(--foreground);
 }
 
-/* Focus styles */
 :focus-visible {
-  outline: 2px solid hsl(var(--ring));
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
-/* Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -115,10 +90,10 @@ body {
   }
 }
 
-@keyframes slideUp {
+@keyframes slideIn {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(8px);
   }
 
   to {
@@ -127,157 +102,284 @@ body {
   }
 }
 
-@keyframes pulse-subtle {
+@keyframes bounce-dot {
 
   0%,
+  80%,
   100% {
-    opacity: 1;
+    transform: scale(0);
   }
 
-  50% {
-    opacity: 0.7;
+  40% {
+    transform: scale(1);
   }
 }
 
 .animate-fade-in {
-  animation: fadeIn 0.3s ease-out;
+  animation: fadeIn 0.2s ease-out;
 }
 
-.animate-slide-up {
-  animation: slideUp 0.4s ease-out;
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
 }
 
-.animate-pulse-subtle {
-  animation: pulse-subtle 2s ease-in-out infinite;
+.dot-1 {
+  animation: bounce-dot 1.4s infinite ease-in-out both;
+  animation-delay: -0.32s;
 }
 
-/* Typography */
-.text-balance {
-  text-wrap: balance;
+.dot-2 {
+  animation: bounce-dot 1.4s infinite ease-in-out both;
+  animation-delay: -0.16s;
 }
 
-/* Glass effect */
-.glass {
-  background: hsl(var(--background) / 0.8);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+.dot-3 {
+  animation: bounce-dot 1.4s infinite ease-in-out both;
 }
 
-/* Gradient text */
-.gradient-text {
-  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(280 80% 60%) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.input-container {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-/* Message bubble styles */
-.message-user {
-  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.8) 100%);
+.input-container:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-light);
 }
 
-.message-assistant {
-  background: hsl(var(--secondary));
+.user-message {
+  background: var(--accent);
+  color: var(--primary-foreground);
 }
 
-/* Input glow effect */
-.input-glow:focus-within {
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1), 0 0 20px hsl(var(--primary) / 0.1);
+.markdown-content {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--foreground);
 }
 
-/* Markdown styling */
-.prose {
-  max-width: none;
-  line-height: 1.7;
+.markdown-content>*:first-child {
+  margin-top: 0;
+}
+
+.markdown-content>*:last-child {
+  margin-bottom: 0;
 }
 
-.prose p {
-  margin-bottom: 1em;
+.markdown-content p {
+  margin: 0 0 1em 0;
 }
 
-.prose p:last-child {
+.markdown-content p:last-child {
   margin-bottom: 0;
 }
 
-.prose pre {
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
-  padding: 1rem;
-  overflow-x: auto;
-  font-size: 0.875rem;
-  margin: 1rem 0;
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 1.5em 0 0.5em 0;
+  color: var(--foreground);
 }
 
-.prose code {
-  background: hsl(var(--muted));
-  padding: 0.2rem 0.4rem;
-  border-radius: 0.375rem;
-  font-size: 0.875em;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child,
+.markdown-content h4:first-child {
+  margin-top: 0;
 }
 
-.prose pre code {
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
+.markdown-content h1 {
+  font-size: 1.5em;
 }
 
-.prose ul,
-.prose ol {
-  padding-left: 1.5rem;
-  margin: 0.75rem 0;
+.markdown-content h2 {
+  font-size: 1.25em;
 }
 
-.prose li {
-  margin: 0.25rem 0;
+.markdown-content h3 {
+  font-size: 1.1em;
 }
 
-.prose blockquote {
-  border-left: 3px solid hsl(var(--primary));
-  padding-left: 1rem;
-  margin: 1rem 0;
-  color: hsl(var(--muted-foreground));
-  font-style: italic;
+.markdown-content h4 {
+  font-size: 1em;
 }
 
-.prose h1,
-.prose h2,
-.prose h3,
-.prose h4 {
+.markdown-content ul,
+.markdown-content ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.markdown-content li {
+  margin: 0.35em 0;
+}
+
+.markdown-content li>ul,
+.markdown-content li>ol {
+  margin: 0.25em 0;
+}
+
+.markdown-content a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s;
+}
+
+.markdown-content a:hover {
+  border-bottom-color: var(--accent);
+}
+
+.markdown-content strong {
   font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
 }
 
-.prose h1 {
-  font-size: 1.5rem;
+.markdown-content em {
+  font-style: italic;
+}
+
+.markdown-content blockquote {
+  margin: 1em 0;
+  padding: 0.5em 0 0.5em 1em;
+  border-left: 3px solid var(--accent);
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+.markdown-content hr {
+  margin: 1.5em 0;
+  border: none;
+  border-top: 1px solid var(--border);
+}
+
+.markdown-content .code-block {
+  margin: 1em 0;
+  padding: 1em;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+  line-height: 1.5;
 }
 
-.prose h2 {
-  font-size: 1.25rem;
+.markdown-content .inline-code {
+  padding: 0.15em 0.4em;
+  background: var(--muted);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9em;
 }
 
-.prose h3 {
-  font-size: 1.125rem;
+.markdown-content .table-wrapper {
+  margin: 1em 0;
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
 }
 
-.prose a {
-  color: hsl(var(--primary));
-  text-decoration: underline;
-  text-underline-offset: 2px;
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
 }
 
-.prose a:hover {
-  text-decoration-thickness: 2px;
+.markdown-content thead {
+  background: var(--muted);
 }
 
-.prose strong {
+.markdown-content th {
+  padding: 0.75em 1em;
+  text-align: left;
   font-weight: 600;
+  border-bottom: 1px solid var(--border);
 }
 
-.prose hr {
-  border: none;
-  border-top: 1px solid hsl(var(--border));
-  margin: 1.5rem 0;
+.markdown-content td {
+  padding: 0.75em 1em;
+  border-bottom: 1px solid var(--border);
+}
+
+.markdown-content tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.markdown-content tbody tr:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.thinking-block {
+  margin: 0.5em 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.thinking-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.625em 0.875em;
+  background: var(--muted);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.875em;
+  color: var(--muted-foreground);
+  transition: background 0.15s;
+}
+
+.thinking-header:hover {
+  background: #27272a;
+}
+
+.thinking-content {
+  padding: 0.875em;
+  font-size: 0.875em;
+  color: var(--muted-foreground);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  border-top: 1px solid var(--border);
+  background: var(--background);
+}
+
+.tool-block {
+  margin: 0.5em 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+  padding: 0.625em 0.875em;
+  background: var(--muted);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.875em;
+}
+
+.tool-header:hover {
+  background: #27272a;
+}
+
+.tool-content {
+  padding: 0.875em;
+  font-size: 0.8125em;
+  color: var(--muted-foreground);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  border-top: 1px solid var(--border);
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--background);
 }

src/components/chat.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
-import { Globe, Send, Loader2, RotateCcw, Sparkles, MessageSquare } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { ReasoningBlock } from "@/components/reasoning-block";
-import { ToolInvocation } from "@/components/tool-invocation";
+import { Globe, Send, Loader2, Plus, ChevronDown, ChevronRight } from "lucide-react";
 import { Markdown } from "@/components/markdown";
 import { cn } from "@/lib/utils";
 
@@ -22,6 +19,93 @@ interface Message {
     }>;
 }
 
+function ThinkingBlock({
+    content,
+    duration,
+    isStreaming
+}: {
+    content: string;
+    duration?: number;
+    isStreaming?: boolean;
+}) {
+    const [isOpen, setIsOpen] = useState(isStreaming);
+
+    useEffect(() => {
+        if (isStreaming) setIsOpen(true);
+    }, [isStreaming]);
+
+    const formatDuration = (s?: number) => {
+        if (!s) return "";
+        if (s < 1) return " · <1s";
+        return ` · ${Math.round(s)}s`;
+    };
+
+    return (
+        <div className="thinking-block">
+            <button
+                className="thinking-header w-full"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+                <span>
+                    {isStreaming ? "Thinking..." : `Thought process${formatDuration(duration)}`}
+                </span>
+                {isStreaming && (
+                    <span className="ml-auto flex gap-1">
+                        <span className="w-1.5 h-1.5 rounded-full bg-current dot-1" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-current dot-2" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-current dot-3" />
+                    </span>
+                )}
+            </button>
+            {isOpen && (
+                <div className="thinking-content">{content}</div>
+            )}
+        </div>
+    );
+}
+
+function ToolBlock({
+    toolName,
+    args,
+    result,
+    status
+}: {
+    toolName: string;
+    args: Record<string, unknown>;
+    result?: string;
+    status: string;
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const isRunning = status === "running" || status === "pending";
+    const query = (args.query as string) || JSON.stringify(args);
+
+    return (
+        <div className="tool-block">
+            <button
+                className="tool-header w-full"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {isRunning ? (
+                    <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
+                ) : (
+                    <Globe className="w-4 h-4 text-green-500" />
+                )}
+                <span className="font-medium">
+                    {toolName === "web_search" ? "Web Search" : toolName}
+                </span>
+                <span className="text-muted-foreground truncate flex-1 text-left ml-1">
+                    {query}
+                </span>
+                {isOpen ? <ChevronDown className="w-4 h-4 shrink-0" /> : <ChevronRight className="w-4 h-4 shrink-0" />}
+            </button>
+            {isOpen && result && (
+                <div className="tool-content">{result}</div>
+            )}
+        </div>
+    );
+}
+
 export function Chat() {
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState("");
@@ -39,12 +123,11 @@ export function Chat() {
         scrollToBottom();
     }, [messages, streamingMessage]);
 
-    // Auto-resize textarea
     useEffect(() => {
         const textarea = textareaRef.current;
         if (textarea) {
             textarea.style.height = "auto";
-            textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
+            textarea.style.height = Math.min(textarea.scrollHeight, 160) + "px";
         }
     }, [input]);
 
@@ -169,7 +252,6 @@ export function Chat() {
                 }
             }
 
-            // Finalize message
             setStreamingMessage((prev) => {
                 if (prev) {
                     setMessages((msgs) => [...msgs, prev]);
@@ -198,62 +280,75 @@ export function Chat() {
 
     const hasMessages = messages.length > 0 || streamingMessage;
 
+    const renderMessage = (message: Message, isStreaming = false) => (
+        <div className="space-y-3">
+            {message.reasoning && (
+                <ThinkingBlock
+                    content={message.reasoning}
+                    duration={message.reasoningDuration}
+                    isStreaming={isStreaming && !message.reasoningDuration}
+                />
+            )}
+            {message.toolInvocations?.map((tool, idx) => (
+                <ToolBlock
+                    key={idx}
+                    toolName={tool.toolName}
+                    args={tool.args}
+                    result={tool.result}
+                    status={tool.status}
+                />
+            ))}
+            {message.content && (
+                <Markdown>{message.content}</Markdown>
+            )}
+            {isStreaming && !message.content && !message.reasoning && (
+                <div className="flex items-center gap-2 py-2 text-muted-foreground">
+                    <span className="flex gap-1">
+                        <span className="w-2 h-2 rounded-full bg-current dot-1" />
+                        <span className="w-2 h-2 rounded-full bg-current dot-2" />
+                        <span className="w-2 h-2 rounded-full bg-current dot-3" />
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+
     return (
         <div className="flex flex-col h-screen bg-background">
             {/* Header */}
-            <header className="sticky top-0 z-50 glass border-b border-border/50">
-                <div className="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-                            <Sparkles className="w-4 h-4 text-white" />
-                        </div>
-                        <div>
-                            <h1 className="text-sm font-semibold">Qwen3 Claude Opus</h1>
-                            <p className="text-xs text-muted-foreground">Reasoning Model</p>
-                        </div>
+            <header className="shrink-0 border-b border-[#27272a] bg-[#09090b]">
+                <div className="max-w-3xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
+                    <div className="flex items-center gap-2.5">
+                        <img src="/teich.png" alt="Teich AI" className="w-8 h-8" />
+                        <span className="font-semibold text-[#fafafa]">Qwen3-4B-Thinking-2507-Claude-4.5-Opus</span>
                     </div>
                     {hasMessages && (
-                        <Button
-                            variant="ghost"
-                            size="sm"
+                        <button
                             onClick={clearChat}
-                            className="text-muted-foreground hover:text-foreground gap-2"
+                            className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-[#a1a1aa] hover:text-[#fafafa] hover:bg-[#27272a] rounded-md transition-colors"
                         >
-                            <RotateCcw className="h-4 w-4" />
-                            <span className="hidden sm:inline">New Chat</span>
-                        </Button>
+                            <Plus className="w-4 h-4" />
+                            New Chat
+                        </button>
                     )}
                 </div>
             </header>
 
-            {/* Messages Area */}
-            <div className="flex-1 overflow-y-auto">
-                <div className="max-w-3xl mx-auto px-4 py-6">
-                    {/* Empty State */}
+            {/* Messages */}
+            <main className="flex-1 overflow-y-auto">
+                <div className="max-w-3xl mx-auto px-4 sm:px-6 py-6">
                     {!hasMessages && (
-                        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center animate-fade-in">
-                            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-600/20 flex items-center justify-center mb-6">
-                                <MessageSquare className="w-8 h-8 text-blue-500" />
-                            </div>
-                            <h2 className="text-2xl font-semibold mb-2 text-balance">
-                                How can I help you today?
-                            </h2>
-                            <p className="text-muted-foreground max-w-md text-balance">
-                                I'm a reasoning model that thinks through problems step by step.
-                                Toggle web search for real-time information.
+                        <div className="flex flex-col items-center justify-center min-h-[50vh] text-center animate-fade-in">
+                            <h2 className="text-xl font-semibold mb-2 text-[#fafafa]">How can I help you?</h2>
+                            <p className="text-[#a1a1aa] text-sm max-w-sm mb-8">
+                                A reasoning model that thinks step by step. Enable web search for real-time information.
                             </p>
-
-                            {/* Quick Actions */}
-                            <div className="flex flex-wrap gap-2 mt-8 justify-center">
-                                {[
-                                    "Explain quantum computing",
-                                    "Write a Python function",
-                                    "What's the latest news?",
-                                ].map((prompt) => (
+                            <div className="flex flex-wrap gap-2 justify-center">
+                                {["Explain quantum computing", "Write a Python function", "What's in the news?"].map((prompt) => (
                                     <button
                                         key={prompt}
                                         onClick={() => setInput(prompt)}
-                                        className="px-4 py-2 text-sm rounded-full border border-border hover:bg-accent hover:border-accent transition-colors"
+                                        className="px-3 py-1.5 text-sm border border-[#27272a] text-[#a1a1aa] rounded-md hover:bg-[#18181b] hover:text-[#fafafa] hover:border-[#3f3f46] transition-colors"
                                     >
                                         {prompt}
                                     </button>
@@ -262,160 +357,92 @@ export function Chat() {
                         </div>
                     )}
 
-                    {/* Messages */}
                     <div className="space-y-6">
                         {messages.map((message) => (
-                            <div
-                                key={message.id}
-                                className={cn(
-                                    "animate-slide-up",
-                                    message.role === "user" ? "flex justify-end" : ""
-                                )}
-                            >
+                            <div key={message.id} className="animate-slide-in">
                                 {message.role === "user" ? (
-                                    <div className="message-user text-white px-4 py-3 rounded-2xl rounded-br-md max-w-[85%] shadow-lg">
-                                        <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+                                    <div className="flex justify-end">
+                                        <div className="user-message px-4 py-2.5 rounded-2xl rounded-br-sm max-w-[85%]">
+                                            <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+                                        </div>
                                     </div>
                                 ) : (
-                                    <div className="space-y-3 max-w-full">
-                                        {message.reasoning && (
-                                            <ReasoningBlock
-                                                content={message.reasoning}
-                                                duration={message.reasoningDuration}
-                                            />
-                                        )}
-                                        {message.toolInvocations?.map((tool, idx) => (
-                                            <ToolInvocation
-                                                key={idx}
-                                                toolName={tool.toolName}
-                                                args={tool.args}
-                                                result={tool.result}
-                                                status={tool.status}
-                                            />
-                                        ))}
-                                        {message.content && (
-                                            <div className="prose text-foreground">
-                                                <Markdown>{message.content}</Markdown>
-                                            </div>
-                                        )}
-                                    </div>
+                                    renderMessage(message)
                                 )}
                             </div>
                         ))}
 
-                        {/* Streaming message */}
                         {streamingMessage && (
-                            <div className="space-y-3 animate-fade-in">
-                                {streamingMessage.reasoning && (
-                                    <ReasoningBlock
-                                        content={streamingMessage.reasoning}
-                                        isStreaming={!streamingMessage.reasoningDuration}
-                                        duration={streamingMessage.reasoningDuration}
-                                    />
-                                )}
-                                {streamingMessage.toolInvocations?.map((tool, idx) => (
-                                    <ToolInvocation
-                                        key={idx}
-                                        toolName={tool.toolName}
-                                        args={tool.args}
-                                        result={tool.result}
-                                        status={tool.status}
-                                    />
-                                ))}
-                                {streamingMessage.content && (
-                                    <div className="prose text-foreground">
-                                        <Markdown>{streamingMessage.content}</Markdown>
-                                    </div>
-                                )}
-                                {!streamingMessage.content && !streamingMessage.reasoning && (
-                                    <div className="flex items-center gap-3 text-muted-foreground py-2">
-                                        <div className="flex gap-1">
-                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
-                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
-                                            <span className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
-                                        </div>
-                                        <span className="text-sm">Thinking...</span>
-                                    </div>
-                                )}
+                            <div className="animate-fade-in">
+                                {renderMessage(streamingMessage, true)}
                             </div>
                         )}
                     </div>
 
                     <div ref={messagesEndRef} className="h-4" />
                 </div>
-            </div>
-
-            {/* Input Area */}
-            <div className="sticky bottom-0 glass border-t border-border/50">
-                <div className="max-w-3xl mx-auto px-4 py-4">
-                    <form onSubmit={handleSubmit} className="relative">
-                        <div className={cn(
-                            "flex items-end gap-2 p-2 rounded-2xl border border-border bg-background/50 transition-all duration-200",
-                            "input-glow focus-within:border-primary/50"
-                        )}>
-                            {/* Web Search Toggle */}
+            </main>
+
+            {/* Input */}
+            <footer className="shrink-0 border-t border-[#27272a] bg-[#09090b]">
+                <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4">
+                    <form onSubmit={handleSubmit}>
+                        <div className="input-container flex items-end gap-2 p-2">
                             <button
                                 type="button"
                                 onClick={() => setSearchEnabled(!searchEnabled)}
                                 className={cn(
-                                    "shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200",
+                                    "shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors",
                                     searchEnabled
-                                        ? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
-                                        : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+                                        ? "bg-[#ff4c00] text-white"
+                                        : "text-[#a1a1aa] hover:text-[#fafafa] hover:bg-[#27272a]"
                                 )}
-                                title={searchEnabled ? "Web search enabled" : "Enable web search"}
+                                title={searchEnabled ? "Disable web search" : "Enable web search"}
                             >
-                                <Globe className="w-5 h-5" />
+                                <Globe className="w-4 h-4" />
                             </button>
 
-                            {/* Textarea */}
                             <textarea
                                 ref={textareaRef}
                                 value={input}
                                 onChange={(e) => setInput(e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                placeholder="Message Qwen3 Claude Opus..."
+                                placeholder="Send a message..."
                                 rows={1}
                                 disabled={isLoading}
-                                className={cn(
-                                    "flex-1 bg-transparent border-0 resize-none text-sm leading-6",
-                                    "placeholder:text-muted-foreground focus:outline-none focus:ring-0",
-                                    "min-h-[40px] max-h-[200px] py-2 px-1"
-                                )}
+                                className="flex-1 bg-transparent border-0 resize-none text-sm leading-6 text-[#fafafa] placeholder:text-[#71717a] focus:outline-none min-h-[36px] max-h-[160px] py-1.5"
                             />
 
-                            {/* Send Button */}
                             <button
                                 type="submit"
                                 disabled={isLoading || !input.trim()}
                                 className={cn(
-                                    "shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200",
+                                    "shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors",
                                     input.trim() && !isLoading
-                                        ? "bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:opacity-90"
-                                        : "bg-muted text-muted-foreground cursor-not-allowed"
+                                        ? "bg-[#ff4c00] text-white hover:bg-[#ff6a2a]"
+                                        : "text-[#a1a1aa] cursor-not-allowed"
                                 )}
                             >
                                 {isLoading ? (
-                                    <Loader2 className="w-5 h-5 animate-spin" />
+                                    <Loader2 className="w-4 h-4 animate-spin" />
                                 ) : (
-                                    <Send className="w-5 h-5" />
+                                    <Send className="w-4 h-4" />
                                 )}
                             </button>
                         </div>
 
-                        {/* Status Bar */}
-                        <div className="flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground">
+                        <div className="flex items-center justify-center gap-3 mt-2 text-xs text-[#a1a1aa]">
                             {searchEnabled && (
                                 <span className="flex items-center gap-1.5">
-                                    <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
-                                    Web search enabled
+                                    <span className="w-1.5 h-1.5 bg-[#ff4c00] rounded-full" />
+                                    Web search on
                                 </span>
                             )}
-                            <span>Press Enter to send, Shift+Enter for new line</span>
+                            <span>Enter to send · Shift+Enter for newline</span>
                         </div>
                     </form>
                 </div>
-            </div>
+            </footer>
         </div>
     );
 }

src/components/markdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { cn } from "@/lib/utils";
 
 interface MarkdownProps {
@@ -11,48 +12,46 @@ interface MarkdownProps {
 export function Markdown({ children, className }: MarkdownProps) {
     return (
         <ReactMarkdown
-            className={cn("prose max-w-none", className)}
+            className={cn("markdown-content", className)}
+            remarkPlugins={[remarkGfm]}
             components={{
                 pre: ({ children }) => (
-                    <pre className="bg-muted/50 border border-border rounded-xl p-4 overflow-x-auto my-4 text-sm">
-                        {children}
-                    </pre>
+                    <pre className="code-block">{children}</pre>
                 ),
                 code: ({ children, className: codeClassName }) => {
                     const isInline = !codeClassName;
                     if (isInline) {
-                        return (
-                            <code className="bg-muted/70 px-1.5 py-0.5 rounded-md text-sm font-mono">
-                                {children}
-                            </code>
-                        );
+                        return <code className="inline-code">{children}</code>;
                     }
                     return <code className={codeClassName}>{children}</code>;
                 },
-                p: ({ children }) => <p className="mb-4 last:mb-0 leading-7">{children}</p>,
-                ul: ({ children }) => <ul className="list-disc pl-6 mb-4 space-y-1">{children}</ul>,
-                ol: ({ children }) => <ol className="list-decimal pl-6 mb-4 space-y-1">{children}</ol>,
-                li: ({ children }) => <li className="leading-7">{children}</li>,
-                h1: ({ children }) => <h1 className="text-xl font-semibold mb-4 mt-6 first:mt-0">{children}</h1>,
-                h2: ({ children }) => <h2 className="text-lg font-semibold mb-3 mt-5 first:mt-0">{children}</h2>,
-                h3: ({ children }) => <h3 className="text-base font-semibold mb-2 mt-4 first:mt-0">{children}</h3>,
-                blockquote: ({ children }) => (
-                    <blockquote className="border-l-3 border-primary/50 pl-4 italic my-4 text-muted-foreground">
-                        {children}
-                    </blockquote>
-                ),
+                p: ({ children }) => <p>{children}</p>,
+                ul: ({ children }) => <ul>{children}</ul>,
+                ol: ({ children }) => <ol>{children}</ol>,
+                li: ({ children }) => <li>{children}</li>,
+                h1: ({ children }) => <h1>{children}</h1>,
+                h2: ({ children }) => <h2>{children}</h2>,
+                h3: ({ children }) => <h3>{children}</h3>,
+                h4: ({ children }) => <h4>{children}</h4>,
+                blockquote: ({ children }) => <blockquote>{children}</blockquote>,
                 a: ({ children, href }) => (
-                    <a
-                        href={href}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary hover:underline underline-offset-2"
-                    >
+                    <a href={href} target="_blank" rel="noopener noreferrer">
                         {children}
                     </a>
                 ),
-                strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
-                hr: () => <hr className="my-6 border-border" />,
+                strong: ({ children }) => <strong>{children}</strong>,
+                em: ({ children }) => <em>{children}</em>,
+                hr: () => <hr />,
+                table: ({ children }) => (
+                    <div className="table-wrapper">
+                        <table>{children}</table>
+                    </div>
+                ),
+                thead: ({ children }) => <thead>{children}</thead>,
+                tbody: ({ children }) => <tbody>{children}</tbody>,
+                tr: ({ children }) => <tr>{children}</tr>,
+                th: ({ children }) => <th>{children}</th>,
+                td: ({ children }) => <td>{children}</td>,
             }}
         >
             {children}