diff --git a/src/components/chat-components/ChatInput.tsx b/src/components/chat-components/ChatInput.tsx
index 6b142ef9..e12a22b8 100644
--- a/src/components/chat-components/ChatInput.tsx
+++ b/src/components/chat-components/ChatInput.tsx
@@ -727,7 +727,13 @@ const ChatInput = React.forwardRef<ChatInputHandle, ChatInputProps>(function Cha
 
   return (
     <div
-      className="tw-flex tw-w-full tw-flex-col tw-gap-0.5 tw-rounded-md tw-border tw-border-solid tw-border-border tw-px-1 tw-pb-1 tw-pt-2 tw-@container/chat-input"
+      className={cn(
+        "tw-flex tw-w-full tw-flex-col tw-gap-0.5 tw-rounded-md tw-border tw-border-solid tw-border-border tw-px-1 tw-pb-1 tw-pt-2 tw-@container/chat-input",
+        modePickerOverride?.value === "plan" &&
+          "tw-shadow-[0_0_10px_rgba(var(--color-blue-rgb),0.18)] tw-border-blue/60",
+        modePickerOverride?.value === "auto" &&
+          "tw-shadow-[0_0_10px_rgba(var(--color-red-rgb),0.18)] tw-border-red/60"
+      )}
       ref={containerRef}
     >
       {/* Hide context controls in edit mode - editing only changes text, not context */}
diff --git a/src/components/ui/ModePicker.tsx b/src/components/ui/ModePicker.tsx
index 7816dec5..a37f7331 100644
--- a/src/components/ui/ModePicker.tsx
+++ b/src/components/ui/ModePicker.tsx
@@ -51,7 +51,14 @@ export function ModePicker({ override, className }: ModePickerProps) {
           variant="ghost2"
           size="sm"
           disabled={disabled}
-          className={cn("tw-shrink-0 tw-text-muted", className)}
+          className={cn(
+            "tw-shrink-0 tw-text-muted",
+            value === "plan" &&
+              "tw-text-blue/70 hover:tw-text-blue/100 focus-visible:tw-text-blue/100",
+            value === "auto" &&
+              "tw-text-red/70 hover:tw-text-red/100 focus-visible:tw-text-red/100",
+            className
+          )}
           title="Operational mode"
         >
           <span className="tw-truncate">{triggerLabel}</span>