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,
     });