/** * ═══════════════════════════════════════════════════════════════════════════════ * ANHAD - DEFINITIVE FLOATING PILL NAVIGATION * Standardized across all pages: Index, Nitnem, Insights, Dashboard, Profile * ═══════════════════════════════════════════════════════════════════════════════ */ .tab-bar { position: fixed !important; bottom: 32px !important; /* Raised higher for better "float" effect */ left: 50% !important; transform: translateX(-50%) !important; width: calc(100% - 40px) !important; max-width: 420px !important; /* Nav tier. 100000 was an escalation that put the pill above sheets and modals; body.modal-open hides it during a modal anyway. */ z-index: var(--z-nav, 200) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 12px !important; padding-bottom: 8px !important; border-radius: 35px !important; /* PREMIUM DARK GLASS (Default for maximum float contrast) */ background: rgba(18, 18, 20, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(20px) saturate(190%) !important; -webkit-backdrop-filter: blur(20px) saturate(190%) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important; transition: opacity 0.2s ease, transform 0.2s ease !important; pointer-events: all !important; margin: 0 !important; } /* Light Theme Overrides - High Contrast Glass */ [data-theme="light"] .tab-bar, html:not([data-theme="dark"]):not(.dark-mode) .tab-bar { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important; } /* Tab Item Styles - Unified - BRIGHT ICONS */ .tab-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 8px 18px !important; border-radius: 20px !important; text-decoration: none !important; color: rgba(255, 255, 255, 0.95) !important; /* FIXED: Increased from 0.5 to 0.95 - icons now bright */ transition: color 0.15s ease, background 0.2s ease !important; position: relative !important; flex: 1 !important; min-width: 60px !important; } [data-theme="light"] .tab-item, html:not([data-theme="dark"]):not(.dark-mode) .tab-item { color: rgba(0, 0, 0, 0.85) !important; /* FIXED: Increased from 0.4 to 0.85 - light mode icons bright */ } /* ACTIVE TAB - Claymorphism Highlighted Bar (NO RED SHADOW) */ .tab-item.active { color: #FF3B30 !important; /* Soft cushion clay effect - NO colored shadow */ background: linear-gradient(145deg, rgba(255, 245, 245, 0.95), rgba(255, 230, 230, 0.9)) !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.95), inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.95), inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.05) !important; } /* Dark mode active tab */ [data-theme="dark"] .tab-item.active, html.dark-mode .tab-item.active { background: linear-gradient(145deg, rgba(40, 40, 42, 0.9), rgba(30, 30, 32, 0.85)) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: -3px -3px 10px rgba(255, 255, 255, 0.05), inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.3), inset -1.5px -1.5px 3px rgba(255, 255, 255, 0.05) !important; } .tab-item.active .tab-icon { transform: scale(1.1) translateY(-2px) !important; /* PERF FIX: Removed filter:drop-shadow() — forces a paint layer on the tab icon inside the already backdrop-filtered nav bar. scale+translateY alone is fully GPU-composited and provides sufficient visual distinction. */ } .tab-icon { font-size: 22px !important; line-height: 1 !important; transition: transform 0.15s ease !important; } .tab-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; text-transform: uppercase !important; } /* Hover/Active effects */ .tab-item:active { transform: scale(0.96) !important; } /* ═══════════════════════════════════════════════════════════════════════════ BOTTOM SCROLL RUNWAY Both the nav pill and the mini player are position:fixed, so neither takes part in layout — the page must reserve scroll space or its last content ends up permanently underneath them. Geometry, measured from the viewport bottom: nav pill 32px -> ~110px (bottom:32px, ~78px tall) mini player 132px -> ~200px (global-mini-player.css: bottom is calc(98px + max(safe-area,4px)), min-height 68px) 110px covers the nav alone. It does NOT cover the player, which is why the last quick-access card on Home (Gurbani GPT) sat at 120->188px and was ~82% buried whenever audio was playing. The extra runway is added ONLY while the player is on screen — body.has-mini-player is set in lib/overlay-player.js's updateUI(), the single place its visibility is decided — so pages don't carry a large empty gap when there is nothing to make room for. ═══════════════════════════════════════════════════════════════════════════ */ .app, main, .app-container, #dashboardApp, #profileApp { padding-bottom: 110px !important; } body.has-mini-player .app, body.has-mini-player main, body.has-mini-player .app-container, body.has-mini-player #dashboardApp, body.has-mini-player #profileApp { /* 200px clears the player's top edge; +16px keeps the last card from sitting flush against it. */ padding-bottom: 216px !important; } /* Floating page actions live in the same band and would be covered outright. The Favorites "New Note" button sits at bottom:calc(96px + safe-area) ~ 130px, squarely inside 132->200px, and at the FAB tier it loses to the player. Lift it clear rather than escalating its z-index above an ambient surface. */ body.has-mini-player .floating-add-btn { bottom: calc(200px + var(--safe-bottom, 16px)) !important; }