diff --git a/src/renderer/components/dialogs/settings-tabs/agents-preferences-tab.tsx b/src/renderer/components/dialogs/settings-tabs/agents-preferences-tab.tsx
index 44a820eee..f66f386b0 100644
--- a/src/renderer/components/dialogs/settings-tabs/agents-preferences-tab.tsx
+++ b/src/renderer/components/dialogs/settings-tabs/agents-preferences-tab.tsx
@@ -16,9 +16,11 @@ import {
 } from "../../../lib/atoms"
 import {
   defaultAgentModeModelAtom,
+  defaultAgentModeThinkingAtom,
   defaultPlanModeModelAtom,
+  defaultPlanModeThinkingAtom,
   defaultReviewModeModelAtom,
-  lastSelectedClaudeThinkingAtom,
+  defaultReviewModeThinkingAtom,
 } from "../../../features/agents/atoms"
 import {
   CLAUDE_MODELS,
@@ -179,9 +181,6 @@ function formatModelLabel(modelId: string, options: ModelOption[]): string {
 }
 
 export function AgentsPreferencesTab() {
-  const [claudeThinking, setClaudeThinking] = useAtom(
-    lastSelectedClaudeThinkingAtom,
-  )
   const [soundEnabled, setSoundEnabled] = useAtom(soundNotificationsEnabledAtom)
   const [desktopNotificationsEnabled, setDesktopNotificationsEnabled] = useAtom(desktopNotificationsEnabledAtom)
   const [notifyWhenFocused, setNotifyWhenFocused] = useAtom(notifyWhenFocusedAtom)
@@ -196,6 +195,15 @@ export function AgentsPreferencesTab() {
   const [defaultReviewModel, setDefaultReviewModel] = useAtom(
     defaultReviewModeModelAtom,
   )
+  const [defaultPlanThinking, setDefaultPlanThinking] = useAtom(
+    defaultPlanModeThinkingAtom,
+  )
+  const [defaultAgentThinking, setDefaultAgentThinking] = useAtom(
+    defaultAgentModeThinkingAtom,
+  )
+  const [defaultReviewThinking, setDefaultReviewThinking] = useAtom(
+    defaultReviewModeThinkingAtom,
+  )
   const hiddenModels = useAtomValue(hiddenModelsAtom)
   const modelOptions = useMemo(
     () => buildModelOptions(hiddenModels),
@@ -244,38 +252,6 @@ export function AgentsPreferencesTab() {
       {/* Agent Behavior */}
       <div className="bg-background rounded-lg border border-border overflow-hidden">
         <div className="flex items-center justify-between p-4">
-          <div className="flex flex-col space-y-1">
-            <span className="text-sm font-medium text-foreground">
-              Thinking Effort
-            </span>
-            <span className="text-xs text-muted-foreground">
-              Default effort level for Claude's reasoning. Higher levels think
-              longer and use more credits.
-            </span>
-          </div>
-          <Select
-            value={claudeThinking}
-            onValueChange={(value: ClaudeThinkingLevel) =>
-              setClaudeThinking(value)
-            }
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatClaudeThinkingLabel(claudeThinking)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {(
-                ["off", "low", "medium", "high", "xhigh", "max"] as const
-              ).map((level) => (
-                <SelectItem key={level} value={level}>
-                  {formatClaudeThinkingLabel(level)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
           <div className="flex flex-col space-y-1">
             <span className="text-sm font-medium text-foreground">
               Default Mode
@@ -299,87 +275,158 @@ export function AgentsPreferencesTab() {
             </SelectContent>
           </Select>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Plan Mode Model
+              Default Plan
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when a chat starts or switches to Plan mode
+              Model and thinking effort applied when a chat starts or switches
+              to Plan mode
             </span>
           </div>
-          <Select
-            value={defaultPlanModel}
-            onValueChange={(value: string) => setDefaultPlanModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultPlanModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultPlanModel}
+              onValueChange={(value: string) => setDefaultPlanModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultPlanModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultPlanThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultPlanThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultPlanThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Agent Mode Model
+              Default Agent
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when a chat starts or switches to Agent mode (e.g. after
-              approving a plan)
+              Model and thinking effort applied when a chat starts or switches
+              to Agent mode (e.g. after approving a plan)
             </span>
           </div>
-          <Select
-            value={defaultAgentModel}
-            onValueChange={(value: string) => setDefaultAgentModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultAgentModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultAgentModel}
+              onValueChange={(value: string) => setDefaultAgentModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultAgentModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultAgentThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultAgentThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultAgentThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-        <div className="flex items-center justify-between p-4 border-t border-border">
-          <div className="flex flex-col space-y-1">
+        <div className="flex items-center justify-between p-4 border-t border-border gap-4">
+          <div className="flex flex-col space-y-1 min-w-0">
             <span className="text-sm font-medium text-foreground">
-              Default Review Mode Model
+              Default Review
             </span>
             <span className="text-xs text-muted-foreground">
-              Model used when running /review or /security-review
+              Model and thinking effort applied when running /review or
+              /security-review
             </span>
           </div>
-          <Select
-            value={defaultReviewModel}
-            onValueChange={(value: string) => setDefaultReviewModel(value)}
-          >
-            <SelectTrigger className="w-auto px-2">
-              <span className="text-xs">
-                {formatModelLabel(defaultReviewModel, modelOptions)}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.map((model) => (
-                <SelectItem key={model.id} value={model.id}>
-                  {model.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Select
+              value={defaultReviewModel}
+              onValueChange={(value: string) => setDefaultReviewModel(value)}
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatModelLabel(defaultReviewModel, modelOptions)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    {model.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={defaultReviewThinking}
+              onValueChange={(value: ClaudeThinkingLevel) =>
+                setDefaultReviewThinking(value)
+              }
+            >
+              <SelectTrigger className="w-auto px-2">
+                <span className="text-xs">
+                  {formatClaudeThinkingLabel(defaultReviewThinking)}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {(
+                  ["off", "low", "medium", "high", "xhigh", "max"] as const
+                ).map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {formatClaudeThinkingLabel(level)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
         <div className="flex items-center justify-between p-4 border-t border-border">
           <div className="flex flex-col space-y-1">
diff --git a/src/renderer/features/agents/atoms/index.ts b/src/renderer/features/agents/atoms/index.ts
index 00a03cbee..ff40a1f5c 100644
--- a/src/renderer/features/agents/atoms/index.ts
+++ b/src/renderer/features/agents/atoms/index.ts
@@ -297,6 +297,27 @@ export const lastSelectedClaudeThinkingAtom = atomWithStorage<ClaudeThinkingPref
   { getOnInit: true },
 )
 
+export const defaultPlanModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-plan-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
+export const defaultAgentModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-agent-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
+export const defaultReviewModeThinkingAtom = atomWithStorage<ClaudeThinkingPreference>(
+  "preferences:default-review-mode-thinking",
+  "high",
+  undefined,
+  { getOnInit: true },
+)
+
 // Storage for per-subChat Claude model selection.
 // Falls back to lastSelectedModelIdAtom when sub-chat has no explicit selection yet.
 const subChatModelIdsStorageAtom = atomWithStorage<Record<string, string>>(
diff --git a/src/renderer/features/agents/lib/model-switching.ts b/src/renderer/features/agents/lib/model-switching.ts
index d8c08fb26..b8f012333 100644
--- a/src/renderer/features/agents/lib/model-switching.ts
+++ b/src/renderer/features/agents/lib/model-switching.ts
@@ -1,10 +1,14 @@
 import { appStore } from "../../../lib/jotai-store"
-import type { AgentMode } from "../atoms"
+import type { AgentMode, ClaudeThinkingPreference } from "../atoms"
 import {
   defaultAgentModeModelAtom,
+  defaultAgentModeThinkingAtom,
   defaultPlanModeModelAtom,
+  defaultPlanModeThinkingAtom,
   defaultReviewModeModelAtom,
+  defaultReviewModeThinkingAtom,
   lastSelectedAgentIdAtom,
+  subChatClaudeThinkingAtomFamily,
   subChatCodexModelIdAtomFamily,
   subChatModelIdAtomFamily,
   subChatProviderOverrideAtomFamily,
@@ -35,6 +39,19 @@ export function getDefaultModelForMode(mode: ModeContext): string {
   }
 }
 
+export function getDefaultThinkingForMode(
+  mode: ModeContext,
+): ClaudeThinkingPreference {
+  switch (mode) {
+    case "plan":
+      return appStore.get(defaultPlanModeThinkingAtom)
+    case "agent":
+      return appStore.get(defaultAgentModeThinkingAtom)
+    case "review":
+      return appStore.get(defaultReviewModeThinkingAtom)
+  }
+}
+
 export function getSubChatModel(subChatId: string): string {
   return appStore.get(subChatModelIdAtomFamily(subChatId))
 }
@@ -70,5 +87,9 @@ export function applyModeDefaultModel(
 ): { modelId: string; provider: Provider } {
   const modelId = getDefaultModelForMode(mode)
   const provider = setSubChatModel(subChatId, modelId)
+  appStore.set(
+    subChatClaudeThinkingAtomFamily(subChatId),
+    getDefaultThinkingForMode(mode),
+  )
   return { modelId, provider }
 }
diff --git a/src/renderer/features/agents/main/active-chat.tsx b/src/renderer/features/agents/main/active-chat.tsx
index d6c3994e4..c2f9a40c4 100644
--- a/src/renderer/features/agents/main/active-chat.tsx
+++ b/src/renderer/features/agents/main/active-chat.tsx
@@ -4663,7 +4663,7 @@ const ChatViewInner = memo(function ChatViewInner({
           />
           {/* Workspace subtitle: repo • branch */}
           {(workspaceRepoName || workspaceBranch) && (
-            <div className="max-w-4xl mx-auto px-4">
+            <div className="max-w-5xl mx-auto px-4">
               <span className="text-xs text-muted-foreground/50 truncate block">
                 {[workspaceRepoName, workspaceBranch].filter(Boolean).join(" • ")}
               </span>
@@ -4708,7 +4708,7 @@ const ChatViewInner = memo(function ChatViewInner({
       >
         <div
           ref={contentWrapperRef}
-          className="px-2 max-w-4xl mx-auto -mb-4 space-y-4"
+          className="px-2 max-w-5xl mx-auto -mb-4 space-y-4"
           style={{
             paddingBottom: "32px",
           }}
@@ -4740,7 +4740,7 @@ const ChatViewInner = memo(function ChatViewInner({
       {/* User questions panel - shows for both live (pending) and expired (timed out) questions */}
       {displayQuestions && (
         <div className="px-4 relative z-20">
-          <div className="w-full px-2 max-w-4xl mx-auto">
+          <div className="w-full px-2 max-w-5xl mx-auto">
             <AgentUserQuestion
               ref={questionRef}
               pendingQuestions={displayQuestions}
@@ -4755,7 +4755,7 @@ const ChatViewInner = memo(function ChatViewInner({
       {/* Stacked cards container - queue + status */}
       {shouldShowStackedCards && (
           <div className="px-2 -mb-6 relative z-10">
-            <div className="w-full max-w-4xl mx-auto px-2">
+            <div className="w-full max-w-5xl mx-auto px-2">
               {/* Queue indicator card - top card */}
               {queue.length > 0 && (
                 <AgentQueueIndicator
@@ -7538,6 +7538,10 @@ Make sure to preserve all functionality from both branches when resolving confli
                               onClick={handleOpenLocally}
                               disabled={isImporting}
                               className="h-6 px-2 gap-1.5 text-xs font-medium ml-2"
+                              style={{
+                                // @ts-expect-error - WebKit-specific property
+                                WebkitAppRegion: "no-drag",
+                              }}
                             >
                               {isImporting ? (
                                 <IconSpinner className="h-3 w-3 animate-spin" />
@@ -7569,6 +7573,10 @@ Make sure to preserve all functionality from both branches when resolving confli
                           onClick={() => setIsPreviewSidebarOpen(true)}
                           className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
                           aria-label="Open preview"
+                          style={{
+                            // @ts-expect-error - WebKit-specific property
+                            WebkitAppRegion: "no-drag",
+                          }}
                         >
                           <IconOpenSidebarRight className="h-4 w-4" />
                         </Button>
@@ -7577,7 +7585,13 @@ Make sure to preserve all functionality from both branches when resolving confli
                     </Tooltip>
                   ) : (
                     <PreviewSetupHoverCard>
-                      <span className="inline-flex ml-2">
+                      <span
+                        className="inline-flex ml-2"
+                        style={{
+                          // @ts-expect-error - WebKit-specific property
+                          WebkitAppRegion: "no-drag",
+                        }}
+                      >
                         <Button
                           variant="ghost"
                           size="icon"
@@ -7604,6 +7618,10 @@ Make sure to preserve all functionality from both branches when resolving confli
                               onClick={() => setIsDetailsSidebarOpen(true)}
                               className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
                               aria-label="View details"
+                              style={{
+                                // @ts-expect-error - WebKit-specific property
+                                WebkitAppRegion: "no-drag",
+                              }}
                             >
                               <IconOpenSidebarRight className="h-4 w-4" />
                             </Button>
@@ -7625,6 +7643,10 @@ Make sure to preserve all functionality from both branches when resolving confli
                               onClick={() => setIsTerminalSidebarOpen(true)}
                               className="h-6 w-6 p-0 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2"
                               aria-label="Open terminal"
+                              style={{
+                                // @ts-expect-error - WebKit-specific property
+                                WebkitAppRegion: "no-drag",
+                              }}
                             >
                               <TerminalSquare className="h-4 w-4" />
                             </Button>
@@ -7647,6 +7669,10 @@ Make sure to preserve all functionality from both branches when resolving confli
                         disabled={restoreWorkspaceMutation.isPending}
                         className="h-6 px-2 gap-1.5 hover:bg-foreground/10 transition-colors text-foreground flex-shrink-0 rounded-md ml-2 flex items-center"
                         aria-label="Restore workspace"
+                        style={{
+                          // @ts-expect-error - WebKit-specific property
+                          WebkitAppRegion: "no-drag",
+                        }}
                       >
                         <UnarchiveIcon className="h-4 w-4" />
                         <span className="text-xs">Restore</span>
@@ -7846,7 +7872,7 @@ Make sure to preserve all functionality from both branches when resolving confli
 
               {/* Disabled input while loading */}
               <div className="px-2 pb-2">
-                <div className="w-full max-w-4xl mx-auto">
+                <div className="w-full max-w-5xl mx-auto">
                   <div className="relative w-full">
                     <PromptInput
                       className="border bg-input-background relative z-10 p-2 rounded-xl opacity-50 pointer-events-none"
diff --git a/src/renderer/features/agents/main/chat-input-area.tsx b/src/renderer/features/agents/main/chat-input-area.tsx
index 288765fcb..398091f97 100644
--- a/src/renderer/features/agents/main/chat-input-area.tsx
+++ b/src/renderer/features/agents/main/chat-input-area.tsx
@@ -1291,7 +1291,7 @@ export const ChatInputArea = memo(function ChatInputArea({
       }}
       className="px-2 pb-2 shadow-sm shadow-background relative z-10"
     >
-      <div className="w-full max-w-4xl mx-auto">
+      <div className="w-full max-w-5xl mx-auto">
         <div
           className="relative w-full"
           onDragOver={handleDragOver}
diff --git a/src/renderer/features/agents/main/new-chat-form.tsx b/src/renderer/features/agents/main/new-chat-form.tsx
index 63de62c72..d99f3573a 100644
--- a/src/renderer/features/agents/main/new-chat-form.tsx
+++ b/src/renderer/features/agents/main/new-chat-form.tsx
@@ -47,6 +47,7 @@ import {
 } from "../atoms"
 import {
   getDefaultModelForMode,
+  getDefaultThinkingForMode,
   getProviderForModelId,
 } from "../lib/model-switching"
 import { defaultAgentModeAtom } from "../../../lib/atoms"
@@ -357,8 +358,9 @@ export function NewChatForm({
 
   // When the mode changes (e.g. user toggles Plan ↔ Agent in the form, or the
   // Settings default changes before first render), switch the selected model
-  // to that mode's default. Works for both Claude and Codex defaults — the
-  // active agent is swapped accordingly so the right transport is used.
+  // and thinking effort to that mode's defaults. Works for both Claude and
+  // Codex defaults — the active agent is swapped accordingly so the right
+  // transport is used.
   useEffect(() => {
     const modeDefaultId = getDefaultModelForMode(agentMode)
     const provider = getProviderForModelId(modeDefaultId)
@@ -384,6 +386,7 @@ export function NewChatForm({
     if (model && model.id !== selectedModel.id) {
       setSelectedModel(model)
     }
+    setLastSelectedClaudeThinking(getDefaultThinkingForMode(agentMode))
     // Only fire on mode change — manual picks via setSelectedModel should not
     // be overridden by this effect re-running.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1717,7 +1720,7 @@ export function NewChatForm({
       </div>
 
       <div className="flex flex-1 items-center justify-center overflow-y-auto relative">
-        <div className="w-full max-w-2xl space-y-4 md:space-y-6 relative z-10 px-4">
+        <div className="w-full max-w-5xl space-y-4 md:space-y-6 relative z-10 px-4">
           {/* Title - only show when project is selected */}
           {validatedProject && (
             <div className="text-center">
diff --git a/src/renderer/features/agents/ui/agent-plan-sidebar.tsx b/src/renderer/features/agents/ui/agent-plan-sidebar.tsx
index 4d64b23e8..1025d05aa 100644
--- a/src/renderer/features/agents/ui/agent-plan-sidebar.tsx
+++ b/src/renderer/features/agents/ui/agent-plan-sidebar.tsx
@@ -62,7 +62,13 @@ export function AgentPlanSidebar({
   return (
     <div className="flex flex-col h-full bg-tl-background">
       {/* Header */}
-      <div className="flex items-center justify-between px-2 h-10 bg-tl-background flex-shrink-0 border-b border-border/50">
+      <div
+        className="flex items-center justify-between px-2 h-10 bg-tl-background flex-shrink-0 border-b border-border/50"
+        style={{
+          // @ts-expect-error - WebKit-specific property
+          WebkitAppRegion: "no-drag",
+        }}
+      >
         <div className="flex items-center gap-2 min-w-0 flex-1">
           <Button
             variant="ghost"
diff --git a/src/renderer/features/agents/ui/agent-preview.tsx b/src/renderer/features/agents/ui/agent-preview.tsx
index a30c78186..8d348d484 100644
--- a/src/renderer/features/agents/ui/agent-preview.tsx
+++ b/src/renderer/features/agents/ui/agent-preview.tsx
@@ -379,7 +379,13 @@ export function AgentPreview({
 
       {/* Desktop Header */}
       {!isMobile && !hideHeader && (
-        <div className="flex items-center justify-between px-3 h-10 bg-tl-background flex-shrink-0">
+        <div
+          className="flex items-center justify-between px-3 h-10 bg-tl-background flex-shrink-0"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
+        >
           {/* Left: Refresh + Viewport Toggle + Scale */}
           <div className="flex items-center gap-1 flex-1">
             <Button
diff --git a/src/renderer/features/details-sidebar/details-sidebar.tsx b/src/renderer/features/details-sidebar/details-sidebar.tsx
index 6d5b8d016..a3e1ccdf8 100644
--- a/src/renderer/features/details-sidebar/details-sidebar.tsx
+++ b/src/renderer/features/details-sidebar/details-sidebar.tsx
@@ -322,7 +322,13 @@ export function DetailsSidebar({
     >
       <div className="flex flex-col h-full min-w-0 overflow-hidden">
         {/* Header with pill tabs */}
-        <div className="flex items-center justify-between px-2 h-10 bg-tl-background flex-shrink-0 border-b border-border/50">
+        <div
+          className="flex items-center justify-between px-2 h-10 bg-tl-background flex-shrink-0 border-b border-border/50"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
+        >
           <div className="flex items-center gap-2">
             <Tooltip>
               <TooltipTrigger asChild>
diff --git a/src/renderer/features/details-sidebar/expanded-widget-sidebar.tsx b/src/renderer/features/details-sidebar/expanded-widget-sidebar.tsx
index 298928eff..27cb3d1a4 100644
--- a/src/renderer/features/details-sidebar/expanded-widget-sidebar.tsx
+++ b/src/renderer/features/details-sidebar/expanded-widget-sidebar.tsx
@@ -144,7 +144,13 @@ export function ExpandedWidgetSidebar({
     >
       <div className="flex flex-col h-full min-w-0 overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between pl-3 pr-1.5 h-10 bg-tl-background flex-shrink-0 border-b border-border/50">
+        <div
+          className="flex items-center justify-between pl-3 pr-1.5 h-10 bg-tl-background flex-shrink-0 border-b border-border/50"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
+        >
           <div className="flex items-center gap-2">
             {widgetConfig && (
               <>
diff --git a/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx b/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx
index 7eeba577b..2098e4925 100644
--- a/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx
+++ b/src/renderer/features/file-viewer/components/file-viewer-sidebar.tsx
@@ -149,7 +149,13 @@ function UnsupportedViewer({
 
   return (
     <div className="flex flex-col h-full bg-background">
-      <div className="flex items-center justify-between px-2 h-10 border-b border-border/50 bg-background flex-shrink-0">
+      <div
+        className="flex items-center justify-between px-2 h-10 border-b border-border/50 bg-background flex-shrink-0"
+        style={{
+          // @ts-expect-error - WebKit-specific property
+          WebkitAppRegion: "no-drag",
+        }}
+      >
         <div className="flex items-center gap-1 min-w-0 flex-1">
           {/* Close + mode switcher on the left */}
           <Button
@@ -214,7 +220,13 @@ function CodeViewerHeader({
   }, [filePath, preferredEditor, openInAppMutation])
 
   return (
-    <div className="@container flex items-center justify-between px-2 h-10 border-b border-border/50 bg-background flex-shrink-0">
+    <div
+      className="@container flex items-center justify-between px-2 h-10 border-b border-border/50 bg-background flex-shrink-0"
+      style={{
+        // @ts-expect-error - WebKit-specific property
+        WebkitAppRegion: "no-drag",
+      }}
+    >
       {/* Left side: Close button + mode switcher + file info */}
       <div className="flex items-center gap-1 min-w-0 flex-1">
         <Button
diff --git a/src/renderer/features/settings/settings-content.tsx b/src/renderer/features/settings/settings-content.tsx
index fa4ad6d78..149ff4975 100644
--- a/src/renderer/features/settings/settings-content.tsx
+++ b/src/renderer/features/settings/settings-content.tsx
@@ -83,7 +83,7 @@ export function SettingsContent() {
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-2xl mx-auto">
+      <div className="max-w-5xl mx-auto">
         {renderTabContent()}
       </div>
     </div>
diff --git a/src/renderer/features/terminal/terminal-sidebar.tsx b/src/renderer/features/terminal/terminal-sidebar.tsx
index 3725beb11..5143604c5 100644
--- a/src/renderer/features/terminal/terminal-sidebar.tsx
+++ b/src/renderer/features/terminal/terminal-sidebar.tsx
@@ -113,6 +113,10 @@ function TerminalModeSwitcher({
           variant="ghost"
           size="sm"
           className="h-6 w-6 p-0 flex-shrink-0 hover:bg-foreground/10"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
         >
           <CurrentIcon className="size-4 text-muted-foreground" />
         </Button>
@@ -546,6 +550,10 @@ export function TerminalSidebar({
                   onClick={closeSidebar}
                   className="h-6 w-6 p-0 hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] text-foreground flex-shrink-0 rounded-md"
                   aria-label="Close terminal"
+                  style={{
+                    // @ts-expect-error - WebKit-specific property
+                    WebkitAppRegion: "no-drag",
+                  }}
                 >
                   <IconDoubleChevronRight className="h-4 w-4" />
                 </Button>