feat(mobile-ux): optimize layout, typography, and bottom toolbar for mobile viewports

src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor

@@ -3,57 +3,59 @@
 @using NexusReader.UI.Shared.Models
 @using NexusReader.Application.Utilities
 @namespace NexusReader.UI.Shared.Components.Organisms
+@implements IDisposable
 @inject IReaderInteractionService InteractionService
 @inject IReaderStateService StateService
+@inject IThemeService ThemeService
 
-<div class="nexus-unified-mobile-toolbar">
+<div class="nexus-unified-mobile-toolbar @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
-    <!-- LEFT SLOT: Progress & Section Checkpoints -->
+    <!-- Tab 1: Progress (Postęp) -->
-    <div class="toolbar-slot left-slot" @onclick="ToggleCheckpoints" title="Rozdziały i checkpoints">
+    <button class="nav-toggle-btn progress-btn" @onclick="ToggleCheckpoints" aria-label="Postęp" title="Rozdziały i checkpoints">
         <div class="progress-ring-wrapper">
-            <svg class="progress-ring" width="38" height="38">
+            <svg class="progress-ring" width="28" height="28">
-                <circle class="progress-ring-track" stroke="rgba(255,255,255,0.06)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19" />
+                <circle class="progress-ring-track" stroke="rgba(139, 130, 115, 0.15)" stroke-width="2" fill="transparent" r="12" cx="14" cy="14" />
-                <circle class="progress-ring-indicator" stroke="var(--nexus-neon, #00FF99)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19"
+                <circle class="progress-ring-indicator" stroke="#10b981" stroke-width="2" fill="transparent" r="12" cx="14" cy="14"
-                        stroke-dasharray="100.53" stroke-dashoffset="@GetDashOffset()" />
+                        stroke-dasharray="75.4" stroke-dashoffset="@GetDashOffset()" />
             </svg>
             <span class="progress-text">@ScrollPercentage%</span>
         </div>
-        <div class="progress-info">
+        <span class="tab-label">Postęp</span>
-            <span class="slot-label">Postęp</span>
-            <span class="slot-desc">Checkpoints</span>
-        </div>
-    </div>
-
-    <!-- CENTER SLOT: Global AI Assistant Glowing Trigger -->
-    <div class="toolbar-slot center-slot">
-        <button class="btn-nexus-ai-core" @onclick="HandleAssistantClick" aria-label="Asystent AI">
-            <div class="pulse-ring"></div>
-            <div class="pulse-ring-outer"></div>
-            <NexusIcon Name="robot" Size="22" Class="ai-core-icon" />
     </button>
-    </div>
 
-    <!-- RIGHT SLOT: Context View Toggles -->
+    <!-- Tab 2: Text (Tekst) -->
-    <div class="toolbar-slot right-slot">
     <button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Reader ? "active" : "")" 
             @onclick="() => ChangeTab(MobileReaderTab.Reader)" 
             aria-label="Tekst">
         <NexusIcon Name="book-open" Size="18" />
-            <span>Tekst</span>
+        <span class="tab-label">Tekst</span>
     </button>
+
+    <!-- Tab 3: Center AI Button (Asystent AI) -->
+    <div class="nav-toggle-btn center-ai-container">
+        <button class="btn-nexus-ai-core" @onclick="HandleAssistantClick" aria-label="Asystent AI">
+            <div class="pulse-ring"></div>
+            <div class="pulse-ring-outer"></div>
+            <NexusIcon Name="robot" Size="20" Class="ai-core-icon" />
+        </button>
+        <span class="tab-label">AI</span>
+    </div>
+
+    <!-- Tab 4: Graph (Graf) -->
     <button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Graph ? "active" : "")" 
             @onclick="() => ChangeTab(MobileReaderTab.Graph)" 
             aria-label="Graf">
         <NexusIcon Name="share-2" Size="18" />
-            <span>Graf</span>
+        <span class="tab-label">Graf</span>
     </button>
+
+    <!-- Tab 5: Map (Mapa) -->
     <button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Concepts ? "active" : "")" 
             @onclick="() => ChangeTab(MobileReaderTab.Concepts)" 
             aria-label="Mapa">
         <NexusIcon Name="map" Size="18" />
-            <span>Mapa</span>
+        <span class="tab-label">Mapa</span>
     </button>
 </div>
-</div>
 
 <!-- SECTION CHECKPOINTS OVERLAY -->
 <div class="checkpoints-overlay @(IsCheckpointsOpen ? "is-open" : "")">
@@ -107,11 +109,17 @@
 
     private bool IsCheckpointsOpen { get; set; }
 
+    protected override void OnInitialized()
+    {
+        ThemeService.OnThemeChanged += HandleThemeChanged;
+    }
+
+    private Task HandleThemeChanged() => InvokeAsync(StateHasChanged);
 
     private double GetDashOffset()
     {
-        // Circumference of r=16 is 2 * pi * 16 = 100.53
+        // Circumference of r=12 is 2 * pi * 12 = 75.40
-        double circumference = 100.53;
+        double circumference = 75.40;
         double progress = Math.Clamp(ScrollPercentage, 0, 100);
         return circumference - (progress / 100.0) * circumference;
     }
@@ -148,4 +156,9 @@
             await OnAssistantClick.InvokeAsync();
         }
     }
+
+    public void Dispose()
+    {
+        ThemeService.OnThemeChanged -= HandleThemeChanged;
+    }
 }

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

@@ -4,38 +4,75 @@
     left: 16px;
     right: 16px;
     height: 64px;
-    background: rgba(18, 18, 18, 0.75);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    border: 1px solid rgba(0, 255, 153, 0.2);
     border-radius: 16px;
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr auto 1fr;
+    justify-content: space-between;
     align-items: center;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
     z-index: 1000;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
     box-sizing: border-box;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    overflow: visible; /* Critical to show elevated FAB */
 }
 
-.toolbar-slot {
+/* Light Mode: Premium Paper Look */
+.nexus-unified-mobile-toolbar.theme-light {
+    background: rgba(244, 241, 234, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(139, 130, 115, 0.18);
+    box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
+}
+
+/* Dark Mode: Translucent Slate */
+.nexus-unified-mobile-toolbar.theme-dark {
+    background: rgba(18, 18, 18, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+}
+
+.nav-toggle-btn {
+    flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: #8b8273; /* Inactive items earthy gray */
+    padding: 6px 0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 0;
+    position: relative;
+    height: 100%;
 }
 
-/* LEFT SLOT: Progress circular ring */
+.nav-toggle-btn.active {
-.left-slot {
+    color: #10b981; /* Active items vibrant green */
-    justify-content: flex-start;
+}
-    gap: 0.65rem;
+
-    cursor: pointer;
+.nav-toggle-btn ::deep .nexus-icon {
-    user-select: none;
+    transition: transform 0.2s ease;
+}
+
+.nav-toggle-btn.active ::deep .nexus-icon {
+    transform: scale(1.1);
+}
+
+.tab-label {
+    font-size: 11px;
+    font-weight: 500;
+    margin-top: 4px;
+    white-space: nowrap;
 }
 
 .progress-ring-wrapper {
     position: relative;
-    width: 38px;
+    width: 28px;
-    height: 38px;
+    height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -45,65 +82,53 @@
     transform: rotate(-90deg);
 }
 
-.progress-ring-indicator {
-    transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .progress-text {
     position: absolute;
-    font-size: 0.65rem;
-    font-weight: 700;
-    color: #FFFFFF;
-}
-
-.progress-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.slot-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #FFFFFF;
-}
-
-.slot-desc {
     font-size: 0.6rem;
-    color: rgba(255,255,255,0.4);
+    font-weight: 700;
+    color: #8b8273;
 }
 
-/* CENTER SLOT: Glowing AI Core Button */
+.nav-toggle-btn.active .progress-text {
-.center-slot {
+    color: #10b981;
-    justify-content: center;
+}
-    position: relative;
+
+/* Center AI FAB container & button */
+.center-ai-container {
+    overflow: visible;
 }
 
 .btn-nexus-ai-core {
-    width: 52px;
+    width: 48px;
-    height: 52px;
+    height: 48px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%);
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #0B0C10;
+    color: #ffffff;
     cursor: pointer;
-    position: relative;
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
     z-index: 5;
-    box-shadow: 0 0 20px rgba(0, 255, 153, 0.4);
+    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
-    transform: translateY(-8px);
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .btn-nexus-ai-core:active {
-    transform: translateY(-6px) scale(0.95);
+    transform: translateX(-50%) translateY(-18px) scale(0.95);
-    box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
+    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
 }
 
 .ai-core-icon {
-    color: #0b0c10;
+    color: #ffffff !important;
-    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
+}
+
+.center-ai-container .tab-label {
+    margin-top: 32px;
 }
 
 /* Pulse effects */
@@ -114,7 +139,7 @@
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
-    border: 2px solid rgba(0, 255, 153, 0.4);
+    border: 2px solid rgba(16, 185, 129, 0.4);
     opacity: 0;
     animation: corePulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
     pointer-events: none;
@@ -128,7 +153,7 @@
     right: -8px;
     bottom: -8px;
     border-radius: 50%;
-    border: 1px solid rgba(0, 240, 255, 0.2);
+    border: 1px solid rgba(16, 185, 129, 0.2);
     opacity: 0;
     animation: corePulseOuter 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
     pointer-events: none;
@@ -147,43 +172,6 @@
     100% { transform: scale(1.25); opacity: 0; }
 }
 
-/* RIGHT SLOT: Layout Switching */
-.right-slot {
-    justify-content: flex-end;
-    gap: 0.35rem;
-}
-
-.nav-toggle-btn {
-    background: none;
-    border: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
-    padding: 6px 8px;
-    border-radius: 8px;
-    color: rgba(255, 255, 255, 0.45);
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-
-.nav-toggle-btn.active {
-    color: var(--nexus-neon, #00FF99);
-    background-color: rgba(0, 255, 153, 0.06);
-}
-
-.nav-toggle-btn ::deep .nexus-icon {
-    transition: transform 0.2s ease;
-}
-
-.nav-toggle-btn.active ::deep .nexus-icon {
-    transform: scale(1.08);
-}
-
-.nav-toggle-btn span {
-    font-size: 0.6rem;
-    font-weight: 500;
-}
 
 /* SECTION CHECKPOINTS OVERLAY */
 .checkpoints-overlay {
@@ -360,3 +348,54 @@
 .checkpoint-item:active .arrow-icon {
     transform: translateX(2px);
 }
+
+/* Light Mode overrides for Checkpoints Overlay */
+.theme-light .checkpoints-sheet {
+    background: rgba(244, 241, 234, 0.95);
+    border-top: 1px solid rgba(139, 130, 115, 0.15);
+    box-shadow: 0 -8px 30px rgba(139, 130, 115, 0.15);
+}
+
+.theme-light .checkpoints-header {
+    border-bottom: 1px solid rgba(139, 130, 115, 0.1);
+}
+
+.theme-light .checkpoints-header h4 {
+    color: #292524;
+}
+
+.theme-light .close-checkpoints-btn {
+    color: #8b8273;
+}
+
+.theme-light .checkpoint-item {
+    background-color: rgba(139, 130, 115, 0.03);
+    border: 1px solid rgba(139, 130, 115, 0.06);
+}
+
+.theme-light .checkpoint-item.active {
+    background-color: rgba(16, 185, 129, 0.08);
+    border-color: rgba(16, 185, 129, 0.25);
+}
+
+.theme-light .checkpoint-item.active .checkpoint-id {
+    color: #10b981;
+}
+
+.theme-light .checkpoint-item.active .indicator-dot {
+    background-color: #10b981;
+    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
+}
+
+.theme-light .checkpoint-id {
+    color: #292524;
+}
+
+.theme-light .checkpoint-label {
+    color: #8b8273;
+}
+
+.theme-light .arrow-icon {
+    color: #8b8273;
+}
+

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

@@ -340,7 +340,7 @@
 @media (max-width: 768px) {
     .reader-canvas {
         padding-top: 54px !important;
-        padding-bottom: 80px !important;
+        padding-bottom: 120px !important;
         /* Ensure content is clear of bottom toolbar */
     }
 
@@ -350,6 +350,22 @@
     }
 }
 
+@media (max-width: 767px) {
+    ::deep .nexus-ebook,
+    ::deep .nexus-ebook p {
+        font-size: 16px !important;
+        line-height: 1.55 !important;
+    }
+
+    ::deep .nexus-ebook h1 {
+        font-size: 1.35rem !important;
+        line-height: 1.4 !important;
+        margin-top: 1.5rem !important;
+        margin-bottom: 1rem !important;
+    }
+}
+
+
 .nexus-mobile-reader-header {
     position: fixed;
     top: 0;