fix: theme

src/components/Sidebar.tsx

@@ -64,13 +64,13 @@ function DesktopSidebar({
   return (
     <div
       className={`
-        flex transition-[transform,opacity] duration-300 ease-in-out overflow-hidden
+        flex transition-all duration-300 ease overflow-hidden
         ${isOpen ? 'w-64 opacity-100' : 'w-0 opacity-0'}
       `}
     >
       {activePanel && (
         <div className="w-64 flex flex-col border-r border-muted transition-theme">
-          <div className="flex items-center justify-between px-4 py-3 border-b border-muted shrink-0">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-muted shrink-0 transition-theme">
             <span className="text-sm font-semibold text-accent">
               {activePanel.label}
             </span>

src/components/chat/ChatUI.tsx

@@ -119,7 +119,7 @@ export default function ChatUI({
   };
 
   return (
-    <div className="flex flex-1 bg-primary text-primary transition-theme">
+    <div className="flex flex-1 bg-primary text-primary transition-theme relative">
       {notification && (
         <div className="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg z-50">
           {notification}
@@ -152,9 +152,26 @@ export default function ChatUI({
           </div>
         </main>
 
-        {/* Input */}
+        {/* Input — floats center when empty, slides to bottom on first message */}
-        <div className="p-4 border-t border-white/10">
+        <div
-          <div className="w-full max-w-2xl mx-auto">
+          className={`
+            transition-all duration-500 ease-in-out
+            ${messages.length === 0
+              ? 'absolute inset-0 flex items-center justify-center pointer-events-none'
+              : 'p-4'}
+          `}
+        >
+          <div
+            className={`
+              w-full max-w-2xl mx-auto pointer-events-auto
+              transition-all duration-500 ease-in-out
+            `}
+          >
+            {messages.length === 0 && (
+              <p className="text-center text-primary text-sm mb-3 opacity-60">
+                Start a conversation…
+              </p>
+            )}
             <input
               value={input}
               onChange={(e) => setInput(e.target.value)}

src/components/chat/chat.panels.tsx

@@ -17,7 +17,7 @@ function ConversationHistoryPanel() {
           className="flex flex-col px-3 py-2 rounded-lg hover:bg-white/10 cursor-pointer transition-colors"
         >
           <span className="text-sm font-medium truncate">{h.title}</span>
-          <span className="text-xs text-white/40">{h.time}</span>
+          <span className="text-xs text-secondary">{h.time}</span>
         </li>
       ))}
     </ul>

src/globals.css

@@ -27,6 +27,7 @@ body {
   --bg-secondary: oklch(27.4% 0.006 286.033);
 
   --text-primary: #ffffff;
+  --text-secondary: #bbbbbb;
 
   --accent: #00d4ff;
   --accent2: #7b2ff7;
@@ -47,13 +48,14 @@ body {
 
 .light-mode {
   --bg-primary: #e0e0e0;
-  --bg-secondary: oklch(96.7% 0.001 286.375);
+  --bg-secondary: #dadada;
 
   --text-primary: #111111;
+  --text-secondary: #666666;
 
   --accent: #0077ff;
 
-  --muted-color: #ffffff33;
+  --muted-color: #88888833;
 
   --color-base: #ffffff;
   --color-inverse: #000000;
@@ -83,6 +85,10 @@ body {
   color: var(--text-primary);
 }
 
+.text-secondary {
+  color: var(--text-secondary);
+}
+
 .text-accent {
   color: var(--accent);
 }