/** * ═══════════════════════════════════════════════════════════════════════════════ * 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):not([data-time-of-day="night"]) .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; } /* Dark Theme & Dynamic Night Tab Bar */ [data-theme="dark"] .tab-bar, html.dark-mode .tab-bar, [data-time-of-day="night"] .tab-bar { background: rgba(18, 18, 22, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.06) !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 — ULTIMATE CUSHION CLAYMORPHISM (PREMIUM SOFT HIGHLIGHT) ═══════════════════════════════════════════════════════════════════════ */ /* Shared transition for all tab items */ .tab-item { transition: color 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .tab-item.active, [data-anhad-home] .tab-item.active, [data-theme-mode="auto"] .tab-item.active, html[data-theme-mode="auto"] .tab-item.active, [data-theme-mode="auto"][data-time-of-day="morning"] .tab-item.active, [data-theme-mode="auto"][data-time-of-day="day"] .tab-item.active, [data-theme-mode="auto"][data-time-of-day="evening"] .tab-item.active, .tab-bar .tab-item.active, body .tab-item.active { color: #C8821E !important; border: none !important; border-radius: 22px !important; background: linear-gradient(155deg, rgba(255,255,255,1) 0%, rgba(255,243,222,0.98) 50%, rgba(248,232,200,0.95) 100%) !important; box-shadow: 0 6px 18px rgba(212, 148, 58, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06), -3px -3px 8px rgba(255,255,255,0.98), inset 2px 2px 5px rgba(255,255,255,1), inset -1px -1px 4px rgba(200, 130, 30, 0.08) !important; transform: scale(1.03) !important; } [data-theme="dark"] .tab-item.active, html.dark-mode .tab-item.active, [data-time-of-day="night"] .tab-item.active, [data-theme-mode="auto"][data-time-of-day="night"] .tab-item.active, [data-theme="dark"][data-theme-mode="auto"] .tab-item.active, html.dark-mode[data-theme-mode="auto"] .tab-item.active { color: #F0A83A !important; border: none !important; border-radius: 22px !important; background: linear-gradient(155deg, rgba(52, 42, 24, 0.98) 0%, rgba(36, 28, 14, 0.98) 55%, rgba(24, 18, 8, 0.97) 100%) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.04), inset 2px 2px 5px rgba(212, 148, 58, 0.28), inset -2px -2px 5px rgba(0, 0, 0, 0.5) !important; transform: scale(1.03) !important; } .tab-item.active .tab-icon, .tab-item.active svg { color: #C8821E !important; fill: #C8821E !important; stroke: #C8821E !important; transform: scale(1.12) translateY(-1px) !important; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } [data-theme="dark"] .tab-item.active .tab-icon, [data-theme="dark"] .tab-item.active svg, html.dark-mode .tab-item.active .tab-icon, html.dark-mode .tab-item.active svg { color: #F0A83A !important; fill: #F0A83A !important; stroke: #F0A83A !important; } .tab-item.active .tab-label { color: #C8821E !important; font-weight: 800 !important; letter-spacing: 0.1px !important; } [data-theme="dark"] .tab-item.active .tab-label, html.dark-mode .tab-item.active .tab-label { color: #F0A83A !important; } .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; }