/* V24.15 V8 - SAFE TARGETED FIX Mobile bottom navigation only. No DOM, JS, Firebase, message, sorting or page-layout changes. Goal: WhatsApp/iPhone-style rounded glass selection for the existing 4 items. */ @media (max-width: 767px){ :root{ --v8-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); --v8-nav-item-h: 54px; --v8-nav-radius: 18px; } /* Keep the existing bottom bar position and safe-area behavior. */ .sidebar-icon{ height: var(--v8-nav-height) !important; min-height: var(--v8-nav-height) !important; max-height: var(--v8-nav-height) !important; padding: 4px 8px env(safe-area-inset-bottom, 0px) !important; gap: 4px !important; align-items: center !important; justify-content: stretch !important; background: #ffffff !important; border-top: 1px solid #dfe5e8 !important; box-shadow: 0 -4px 18px rgba(15,23,42,.10) !important; } /* Dark WhatsApp surface. */ :root[data-theme="dark"] .sidebar-icon, body[data-theme="dark"] .sidebar-icon{ background: #111b21 !important; border-top-color: #26343d !important; box-shadow: 0 -5px 20px rgba(0,0,0,.34) !important; } /* Exactly the existing four controls; no new controls are created. */ .sidebar-icon .nav-icons > .nav-icon, .sidebar-icon #adminPanelBtn, .sidebar-icon #settingsNavBtn{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: var(--v8-nav-item-h) !important; min-height: var(--v8-nav-item-h) !important; max-height: var(--v8-nav-item-h) !important; margin: 0 !important; padding: 5px 4px 4px !important; border-radius: var(--v8-nav-radius) !important; border: 1px solid transparent !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; background: transparent !important; color: #667781 !important; box-shadow: none !important; transform: none !important; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, color .18s ease !important; } :root[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon, :root[data-theme="dark"] .sidebar-icon #adminPanelBtn, :root[data-theme="dark"] .sidebar-icon #settingsNavBtn, body[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon, body[data-theme="dark"] .sidebar-icon #adminPanelBtn, body[data-theme="dark"] .sidebar-icon #settingsNavBtn{ color: #8696a0 !important; } /* Selected item: one rounded, glass/water surface only. */ .sidebar-icon .nav-icons > .nav-icon.active, .sidebar-icon #adminPanelBtn.active, .sidebar-icon #settingsNavBtn.nav-settings-active{ color: var(--primary, #25D366) !important; border-color: color-mix(in srgb, var(--primary, #25D366) 42%, white 58%) !important; background: radial-gradient(125% 80% at 50% -12%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.30) 25%, rgba(255,255,255,0) 52%), linear-gradient(180deg, color-mix(in srgb, var(--primary, #25D366) 15%, white 85%), color-mix(in srgb, var(--primary, #25D366) 9%, white 91%)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.92), inset 0 -7px 14px color-mix(in srgb, var(--primary, #25D366) 10%, transparent), 0 3px 12px color-mix(in srgb, var(--primary, #25D366) 22%, transparent) !important; transform: translateY(-1px) !important; } :root[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon.active, :root[data-theme="dark"] .sidebar-icon #adminPanelBtn.active, :root[data-theme="dark"] .sidebar-icon #settingsNavBtn.nav-settings-active, body[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon.active, body[data-theme="dark"] .sidebar-icon #adminPanelBtn.active, body[data-theme="dark"] .sidebar-icon #settingsNavBtn.nav-settings-active{ color: var(--primary, #25D366) !important; border-color: color-mix(in srgb, var(--primary, #25D366) 42%, #ffffff 58%) !important; background: radial-gradient(125% 80% at 50% -12%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 27%, rgba(255,255,255,0) 52%), linear-gradient(180deg, color-mix(in srgb, var(--primary, #25D366) 23%, #202c33 77%), color-mix(in srgb, var(--primary, #25D366) 13%, #111b21 87%)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -8px 15px rgba(0,0,0,.18), 0 4px 14px color-mix(in srgb, var(--primary, #25D366) 28%, transparent) !important; } /* Small glossy reflection on the selected surface. */ .sidebar-icon .nav-icons > .nav-icon.active::before, .sidebar-icon #adminPanelBtn.active::before, .sidebar-icon #settingsNavBtn.nav-settings-active::before{ content: "" !important; position: absolute !important; z-index: 0 !important; left: 14% !important; right: 14% !important; top: 3px !important; height: 15px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.16), transparent) !important; opacity: .88 !important; pointer-events: none !important; } .sidebar-icon .nav-icons > .nav-icon.active svg, .sidebar-icon #adminPanelBtn.active svg, .sidebar-icon #settingsNavBtn.nav-settings-active svg{ position: relative !important; z-index: 2 !important; width: 22px !important; height: 22px !important; margin: 0 0 1px !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.14)) !important; } /* Labels remain compact like a native iPhone tab bar. */ .sidebar-icon .nav-icons > .nav-icon::after, .sidebar-icon #adminPanelBtn::after, .sidebar-icon #settingsNavBtn::after{ position: relative !important; z-index: 2 !important; font-size: 8px !important; line-height: 10px !important; font-weight: 650 !important; letter-spacing: -.05px !important; color: currentColor !important; } /* Prevent the old mobile pseudo-highlight from drawing a second bubble. */ .sidebar-icon .nav-icon.active::after{ background: none !important; filter: none !important; } /* Touch feedback stays subtle; never creates a second selected item. */ .sidebar-icon .nav-icons > .nav-icon:active, .sidebar-icon #adminPanelBtn:active, .sidebar-icon #settingsNavBtn:active{ transform: scale(.97) !important; } /* The existing chat-focus rule decides whether the bar is visible. Do not override that behavior here. */ }