Enable custom draggable header on macOS

Updated window options in main.js to use a hidden, transparent title bar on macOS, allowing for a custom header in the renderer. Added CSS to designate draggable regions and opt-out for interactive controls, improving window drag usability while maintaining clickable elements.

main.js

@@ -101,10 +101,15 @@ function createWindow(startUrl) {
   };
 
   if (process.platform === 'darwin') {
+    // Use a hidden/transparent title bar on macOS so we can render a
+    // custom, sleeker header in the renderer while still supporting
+    // native traffic-light placement. The renderer will expose a
+    // draggable region via CSS (-webkit-app-region: drag).
     Object.assign(windowOptions, {
       frame: true,
       titleBarStyle: 'hidden',
       trafficLightPosition: { x: 15, y: 20 },
+      // Transparent background so renderer chrome blends with content.
       backgroundColor: '#00000000',
       transparent: true,
     });

renderer/style.css

@@ -40,6 +40,40 @@ html, body {
   box-shadow: none;
 }
 
+/* Make the top nav a draggable region on macOS when we use a hidden titlebar.
+   Interactive controls inside must opt-out with -webkit-app-region: no-drag. */
+@supports (-webkit-app-region: drag) {
+  /* Make both the tab strip and the nav area draggable so users have a
+     larger region to click-and-drag the window. Keep interactive elements
+     marked as no-drag so buttons and tabs remain clickable. */
+  #tab-bar,
+  #nav {
+    -webkit-app-region: drag;
+    user-select: none;
+    /* keep the appearance consistent even if transparent window behind it */
+    background: rgba(30,30,46,0.9);
+    backdrop-filter: blur(6px);
+  }
+
+  /* Interactive controls must explicitly opt-out of dragging. This keeps
+     the larger draggable area while preserving normal click behavior. */
+  #nav button,
+  #nav input,
+  #menu-popup,
+  .tab,
+  .tab *,
+  .new-tab-button,
+  .tab .tab-close,
+  #window-controls {
+    -webkit-app-region: no-drag;
+  }
+
+  /* Ensure the new-tab button (which sits on the tab strip) is not draggable */
+  #tab-bar .new-tab-button {
+    -webkit-app-region: no-drag;
+  }
+}
+
 .nav-left,
 .nav-center,
 .nav-right {