Lighten sidebars and input area, fix scrollbar blue tint

- Sidebars: neutral-900 → neutral-800 (lighter)
- Chat input area: neutral-900 → neutral-800 (lighter)
- Scrollbar: gray → neutral (removes blue tint)
- Main message area: kept at neutral-900

Author: kylecarbs

src/components/ChatInput.tsx

@@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="relative flex flex-col gap-1 border-t border-neutral-800 bg-neutral-900 px-[15px] pt-[5px] pb-[15px]"
+      className="relative flex flex-col gap-1 border-t border-neutral-800 bg-neutral-800 px-[15px] pt-[5px] pb-[15px]"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
@@ -782,7 +782,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
-                "flex gap-0 bg-neutral-900 rounded",
+                "flex gap-0 bg-neutral-800 rounded",
                 "[&>button:first-of-type]:rounded-l [&>button:last-of-type]:rounded-r",
                 mode === "exec" &&
                   "[&>button:first-of-type]:bg-exec-mode [&>button:first-of-type]:text-white [&>button:first-of-type]:hover:bg-exec-mode-hover",

src/components/ChatMetaSidebar.tsx

@@ -59,7 +59,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
   return (
     <div
       className={cn(
-        "bg-neutral-900 border-l border-neutral-800 flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
+        "bg-neutral-800 border-l border-neutral-800 flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
         showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-80"
       )}
       role="complementary"

src/components/LeftSidebar.tsx

@@ -46,10 +46,10 @@ export function LeftSidebar(props: LeftSidebarProps) {
           aria-label="Open sidebar menu"
           className={cn(
             "hidden max-md:flex fixed top-3 left-3 z-[998]",
-            "w-10 h-10 bg-neutral-900 border border-neutral-800 rounded-md cursor-pointer",
+            "w-10 h-10 bg-neutral-800 border border-neutral-800 rounded-md cursor-pointer",
             "items-center justify-center text-neutral-300 text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-neutral-900 hover:border-neutral-800",
+            "hover:bg-neutral-800 hover:border-neutral-800",
             "active:scale-95"
           )}
         >
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-neutral-900 border-r border-neutral-950 flex flex-col shrink-0",
+          "h-screen bg-neutral-800 border-r border-neutral-950 flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
           collapsed ? "w-8" : "w-72",
           "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-72 max-md:z-[1000]",

src/components/ProjectSidebar.tsx

@@ -78,11 +78,11 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
     <div
       ref={(node) => drag(drop(node))}
       className={cn(
-        "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-neutral-900",
+        "py-1 px-3 flex items-center border-l-transparent transition-all duration-150 bg-neutral-800",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
         isOver && "bg-sky-600/[0.08]",
-        selected && "bg-neutral-900 border-l-accent",
-        "hover:bg-neutral-900 hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
+        selected && "bg-neutral-800 border-l-accent",
+        "hover:bg-neutral-800 hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}
       {...rest}
     >
@@ -136,7 +136,7 @@ const ProjectDragLayer: React.FC = () => {
   return (
     <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
-        <div className="border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] bg-neutral-900/95 px-3 py-1.5 text-neutral-300 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
+        <div className="border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] bg-neutral-800/95 px-3 py-1.5 text-neutral-300 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
           <span className="mr-1.5 text-xs text-neutral-400">⠿</span>
           <span className="mr-2 text-[10px] text-neutral-400">▶</span>
           <div className="min-w-0 flex-1">
@@ -416,21 +416,21 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
       <DndProvider backend={HTML5Backend}>
         <ProjectDragLayer />
         <div
-          className="font-primary flex flex-1 flex-col overflow-hidden border-r border-neutral-800 bg-neutral-900"
+          className="font-primary flex flex-1 flex-col overflow-hidden border-r border-neutral-800 bg-neutral-800"
           role="navigation"
           aria-label="Projects"
         >
           {!collapsed && (
             <>
-              <div className="flex items-center justify-between border-b border-neutral-950 bg-neutral-900 p-4">
+              <div className="flex items-center justify-between border-b border-neutral-950 bg-neutral-800 p-4">
                 <h2 className="m-0 text-[13px] font-semibold tracking-[0.8px] text-neutral-300 uppercase">
                   Projects
                 </h2>
                 <TooltipWrapper inline>
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg text-neutral-300 transition-all duration-200 hover:border-neutral-800 hover:bg-neutral-900"
+                    className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg text-neutral-300 transition-all duration-200 hover:border-neutral-800 hover:bg-neutral-800"
                   >
                     +
                   </button>
@@ -549,7 +549,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="hover:border-neutral-800-darker w-full cursor-pointer rounded border border-dashed border-neutral-700 bg-transparent px-3 py-1.5 text-left text-[13px] text-neutral-400 transition-all duration-200 hover:bg-neutral-900 hover:text-neutral-300"
+                                className="hover:border-neutral-800-darker w-full cursor-pointer rounded border border-dashed border-neutral-700 bg-transparent px-3 py-1.5 text-left text-[13px] text-neutral-400 transition-all duration-200 hover:bg-neutral-800 hover:text-neutral-300"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              className="mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none border-neutral-950 bg-transparent p-0 text-sm text-neutral-400 transition-all duration-200 hover:bg-neutral-900 hover:text-neutral-300"
+              className="mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none border-neutral-950 bg-transparent p-0 text-sm text-neutral-400 transition-all duration-200 hover:bg-neutral-800 hover:text-neutral-300"
             >
               {collapsed ? "»" : "«"}
             </button>

src/components/RightSidebar.tsx

@@ -49,7 +49,7 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   return (
     <div
       className={cn(
-        "bg-neutral-900 border-l border-neutral-800 flex flex-col overflow-hidden flex-shrink-0",
+        "bg-neutral-800 border-l border-neutral-800 flex flex-col overflow-hidden flex-shrink-0",
         customWidth ? "" : "transition-[width] duration-200",
         collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
         "max-md:border-l-0 max-md:border-t max-md:border-neutral-800",
@@ -201,7 +201,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
       <div className={cn("flex-row h-full", !showCollapsed ? "flex" : "hidden")}>
         {/* Render meter when Review tab is active */}
         {selectedTab === "review" && (
-          <div className="flex w-5 shrink-0 flex-col border-r border-neutral-800 bg-neutral-900">
+          <div className="flex w-5 shrink-0 flex-col border-r border-neutral-800 bg-neutral-800">
             {verticalMeter}
           </div>
         )}
@@ -220,7 +220,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
         <div className="flex min-w-0 flex-1 flex-col">
           <div
-            className="bg-neutral-900-secondary flex border-b border-neutral-800 [&>*]:flex-1"
+            className="bg-neutral-800-secondary flex border-b border-neutral-800 [&>*]:flex-1"
             role="tablist"
             aria-label="Metadata views"
           >
@@ -229,8 +229,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "costs"
-                    ? "text-white bg-neutral-900 border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-900-secondary hover:text-neutral-300"
+                    ? "text-white bg-neutral-800 border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-800-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("costs")}
                 id={costsTabId}
@@ -250,8 +250,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "review"
-                    ? "text-white bg-neutral-900 border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-900-secondary hover:text-neutral-300"
+                    ? "text-white bg-neutral-800 border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-800-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("review")}
                 id={reviewTabId}

src/styles/globals.css

@@ -90,7 +90,7 @@ body {
 /* Firefox scrollbar */
 * {
   scrollbar-width: thin;
-  scrollbar-color: theme(colors.gray.600) theme(colors.gray.900);
+  scrollbar-color: theme(colors.neutral.500) theme(colors.neutral.800);
 }
 
 /* Root container */