feat: implement draggable sidebar resizer with persistent state and dynamic UI updates

src/NexusReader.UI.Shared/Layout/MainLayout.razor.css

@@ -1,11 +1,10 @@
 .app-container {
     display: grid;
-    grid-template-columns: 1fr 450px;
+    grid-template-columns: 1fr auto var(--sidebar-width, 450px);
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     background: #121212;
-    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 
@@ -29,26 +28,47 @@ main {
 .intelligence-sidebar {
     display: grid;
     grid-template-columns: 50px 1fr;
-    width: 450px;
+    width: 100%; /* controlled by grid */
     height: 100%;
     background: #0d0d0d;
     box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(255, 255, 255, 0.05);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     z-index: 10;
 }
 
+.resizer {
+    width: 4px;
+    cursor: col-resize;
+    background: rgba(255, 255, 255, 0.02);
+    transition: background 0.2s, width 0.2s;
+    z-index: 20;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.resizer:hover, .app-container.is-resizing .resizer {
+    background: var(--nexus-neon);
+    width: 6px;
+    box-shadow: 0 0 10px var(--nexus-neon);
+}
+
+.app-container.is-resizing {
+    user-select: none;
+}
+
 
 .app-container.focus-mode-active {
-    grid-template-columns: 1fr 50px;
+    grid-template-columns: 1fr 0px 50px;
 }
 
 .app-container.focus-mode-active .intelligence-sidebar {
-    width: 50px;
     grid-template-columns: 50px 0px;
 }
 
+.app-container.focus-mode-active .resizer {
+    display: none;
+}
+
 .app-container.focus-mode-active .intelligence-content {
     opacity: 0;
     pointer-events: none;