diff --git a/src/celemod-ui/src/components/WindowTitlebar.tsx b/src/celemod-ui/src/components/WindowTitlebar.tsx
index 1294e0e..dcb6721 100644
--- a/src/celemod-ui/src/components/WindowTitlebar.tsx
+++ b/src/celemod-ui/src/components/WindowTitlebar.tsx
@@ -47,6 +47,14 @@ export function WindowTitlebar() {
     };
   }, [platform]);
 
+  if (platform === "macos") {
+    // macOS keeps the native traffic lights via `titleBarStyle: "Overlay"`.
+    // This empty strip fills the reserved title bar area and makes the whole
+    // band draggable (Tauri handles dragging and double-click zoom; the native
+    // traffic lights stay clickable above the webview).
+    return <div className="macos-titlebar" data-tauri-drag-region />;
+  }
+
   if (platform !== "windows") return null;
 
   return (
diff --git a/src/celemod-ui/src/index.scss b/src/celemod-ui/src/index.scss
index 9d59a94..2e7b83d 100644
--- a/src/celemod-ui/src/index.scss
+++ b/src/celemod-ui/src/index.scss
@@ -75,6 +75,14 @@ textarea,
   user-select: none;
 }
 
+/* macOS uses a native overlay title bar: this strip must match the traffic
+   light area reserved by `trafficLightPosition` in tauri.macos.conf.json.
+   The component marks it with data-tauri-drag-region for window dragging. */
+.macos-titlebar {
+  flex: 0 0 32px;
+  min-height: 32px;
+}
+
 .window-caption {
   flex: 0 0 auto;
   padding: 0;
@@ -162,10 +170,6 @@ textarea,
   min-height: 0;
 }
 
-html[data-platform="macos"] .app-shell {
-  padding-top: 32px;
-}
-
 .sidebar {
   display: flex;
   flex-direction: column;