fix: Replace sticky bar with proper FAB buttons

Previous sticky bar implementation took up vertical space in layout,
making viewport issues worse. Replaced with proper floating action
buttons that don't affect layout.

Changes:
- Remove sticky bar from index.html
- Add FAB container with fixed position (no layout impact)
- Two circular buttons: DM (green) and Contacts (blue)
- position: fixed, right: 16px, top: 80px
- z-index: 900 (lower than offcanvas menu 1045)
- Beautiful gradients and shadows
- Hover/active animations (scale transform)
- Mobile responsive (smaller on <768px)

Features:
- No vertical space taken (fixed position)
- Covered by offcanvas when menu opens (z-index hierarchy)
- Always visible in corner
- Uses navigateTo() for clean navigation

Test scenario:
1. Click FAB buttons (bypass offcanvas menu completely)
2. Navigate to DM / Contact Management
3. Return to main page
4. Check if status bar corruption still occurs

If FABs work: problem is in offcanvas cleanup
If FABs fail: problem is deeper in viewport/layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/css/style.css

@@ -581,26 +581,65 @@ main {
 }
 
 /* =============================================================================
-   TEST: Floating Navigation Buttons
+   TEST: Floating Action Buttons (FAB)
    ============================================================================= */
 
-.floating-test-buttons {
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    padding: 0.5rem;
+.fab-container {
+    position: fixed;
+    right: 16px;
+    top: 80px;
+    z-index: 900; /* Lower than offcanvas (1045) but higher than content */
     display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+    gap: 12px;
 }
 
-.floating-test-buttons .btn {
-    min-width: 100px;
-    font-weight: 500;
+.fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fab:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.fab:active {
+    transform: scale(0.95);
+}
+
+.fab-dm {
+    background: linear-gradient(135deg, #198754 0%, #157347 100%);
+    color: white;
+}
+
+.fab-contacts {
+    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+    color: white;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .fab-container {
+        right: 12px;
+        top: 70px;
+        gap: 10px;
+    }
+
+    .fab {
+        width: 48px;
+        height: 48px;
+        font-size: 1.25rem;
+    }
 }
 
 /* =============================================================================

app/templates/index.html

@@ -44,16 +44,6 @@
 {% endblock %}
 
 {% block content %}
-<!-- TEST: Floating navigation buttons (bypass offcanvas menu) -->
-<div class="floating-test-buttons">
-    <button class="btn btn-sm btn-success" onclick="navigateTo('/dm');" title="Test: Direct Messages">
-        <i class="bi bi-envelope"></i> DM
-    </button>
-    <button class="btn btn-sm btn-primary" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
-        <i class="bi bi-person-check"></i> Contacts
-    </button>
-</div>
-
 <div class="container-fluid d-flex flex-column" style="height: 100%;">
     <!-- Messages Container -->
     <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
@@ -115,6 +105,16 @@
         </div>
     </div>
 </div>
+
+<!-- TEST: Floating Action Buttons (fixed position, no layout impact) -->
+<div class="fab-container">
+    <button class="fab fab-dm" onclick="navigateTo('/dm');" title="Test: Direct Messages">
+        <i class="bi bi-envelope-fill"></i>
+    </button>
+    <button class="fab fab-contacts" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
+        <i class="bi bi-person-fill"></i>
+    </button>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}