🤖 fix: make message area darker and match sidebar to main exactly

- Message area: bg-neutral-800 → bg-neutral-950 (darker than sidebars)
- ProjectSidebar: bg-sky-600/[0.08] → bg-accent/[0.08] (match main)
- Added --color-accent to match main branch pattern

Author: kylecarbs

src/components/AIView.tsx

@@ -245,7 +245,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-800 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -286,7 +286,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-800 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -302,7 +302,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-800 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-neutral-800 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
@@ -329,7 +329,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
         ref={chatAreaRef}
         className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
       >
-        <div className="flex items-center justify-between border-b border-neutral-800 bg-neutral-800 px-[15px] py-1 [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
+        <div className="flex items-center justify-between border-b border-neutral-800 bg-neutral-950 px-[15px] py-1 [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]">
           <div className="flex min-w-0 items-center gap-2 overflow-hidden font-semibold text-neutral-300">
             <StatusIndicator
               streaming={canInterrupt}

src/components/ProjectSidebar.tsx

@@ -80,7 +80,7 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
       className={cn(
         "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-separator",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
-        isOver && "bg-sky-600/[0.08]",
+        isOver && "bg-accent/[0.08]",
         selected && "bg-hover border-l-accent",
         "hover:bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}

src/styles/globals.css

@@ -36,6 +36,7 @@
   --color-hover: hsl(0 0% 16.5%);            /* #2a2a2b - hover/selected states */
   --color-border: hsl(0 0% 25%);             /* #404040 - base borders */
   --color-border-light: hsl(0 0% 27%);       /* #464647 - lighter borders */
+  --color-accent: hsl(207 100% 40%);         /* #007acc - VS Code blue */
 
   /* Message Borders */
   --color-user-border: hsl(0 0% 38%);