feat(ui): implement premium mobile-first reader toolbar, bottom navigation, and auth ux stabilization (#61)

# Description

This Pull Request integrates the premium mobile-first layout enhancements, a responsive, full-bleed Reader Toolbar, and critical authorization flow stabilizations for the NexusReader Blazor application (targeting .NET 10 with Native AOT compatibility).

Resolves #62
Resolves #63
Resolves #15

## Key Changes

### 📱 1. Mobile-First Reader Layout & Toolbar
- **Full-Bleed Responsive Layout**: Redesigned `ReaderLayout` to feature a premium mobile-first three-tab bottom navigation system (Chapters, Graph, Assistant) and a glassmorphic floating action button (FAB) for the AI assistant.
- **Header & Escaping Routes**: Built `MobileReaderToolbar` with seamless exit paths back to the "Pulpit" (dashboard) and smooth transitions.
- **Custom Iconography**: Added the custom `NexusIcon` component supporting dynamic theme styling and responsive layouts without relying on external CSS frameworks.

### 🔐 2. Authentication Flow UX Stabilization
- **WASM Transition Hydration**: Implemented `AuthenticationStatePersister` and loading preloaders to eliminate authorization race conditions during Blazor WASM interactive hydration.
- **AOT-Compatible JWT Validation**: Integrated a robust, AOT-compatible `JwtTokenValidator` with unit tests (`JwtTokenValidatorTests.cs`) to cleanly parse claims without throwing performance-heavy runtime exceptions.
- **Secure Header Propagation**: Standardized token transmission in WASM (`AuthenticationHeaderHandler.cs`) and MAUI Hybrid client layers (`MobileAuthenticationHeaderHandler.cs`), ensuring cookies are correctly propagated.

### 📊 3. D3.js Knowledge Graph & Interaction
- **Dynamic Viewport Synchronization**: Refactored `knowledgeGraph.js` to ensure the SVG graph behaves correctly under flexbox containment, handles panel expansion/collapse gracefully, and avoids infinite loop redraws.
- **Interaction Hook**: Connected graph node clicks directly to chapter jumps via a new `IReaderInteractionService` abstraction.

### 🏗️ 4. Infrastructure & Central Package Management (CPM)
- **Beta Deployment Configuration**: Added `.env.test.template`, `docker-compose.test.yml`, and `appsettings.Test.json` with hardened environment security guards.
- **Docker-Compose Cache Optimization**: Maintained CPM consistency during multi-stage Docker builds.

## Verification & Build Results
- Run a successful local build check:
  ```bash
  dotnet build NexusReader.slnx --no-restore
  ```
  **Status**: Successfully completed with `0` compilation errors.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #61
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>

src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css

@@ -258,4 +258,118 @@
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
+}
+
+/* MOBILE READER UI OVERRIDES */
+@media (max-width: 768px) {
+    .reader-canvas {
+        padding-top: 54px !important;
+        padding-bottom: 80px !important; /* Ensure content is clear of bottom toolbar */
+    }
+
+    .reader-flow-container {
+        padding-bottom: 4rem; /* Safe breathing room */
+    }
+}
+
+.nexus-mobile-reader-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 50px;
+    background: rgba(18, 18, 18, 0.75);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    z-index: 1000;
+    box-sizing: border-box;
+}
+
+.theme-light .nexus-mobile-reader-header {
+    background: rgba(249, 249, 249, 0.8);
+    border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+
+.nexus-mobile-escape-btn {
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--nexus-neon, #00FF99);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 8px;
+    transition: background-color 0.2s ease;
+    margin-left: -8px;
+}
+
+.nexus-mobile-escape-btn:active {
+    background-color: rgba(0, 255, 153, 0.08);
+}
+
+.nexus-mobile-chapter-navigation {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    height: 100%;
+    min-width: 0;
+}
+
+.nexus-mobile-chapter-title {
+    flex: 1;
+    text-align: center;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #FFFFFF;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 0.5rem;
+    min-width: 0;
+}
+
+.theme-light .nexus-mobile-chapter-title {
+    color: #1a1a1a;
+}
+
+.nexus-chapter-nav-btn {
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.nexus-chapter-nav-btn:hover:not(:disabled) {
+    color: var(--nexus-neon, #00FF99);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.nexus-chapter-nav-btn:disabled {
+    opacity: 0.2;
+    cursor: not-allowed;
+}
+
+.theme-light .nexus-chapter-nav-btn {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
+    background: rgba(0, 0, 0, 0.06);
 }