/* V24.15 V9 - WhatsApp-style mobile bottom navigation polish TARGETED CSS ONLY. No DOM/JS/data/chat/admin/settings logic changes. Visual target: compact dark/light pill, four equal items, one focused glass capsule, subtle top reflection, iPhone safe-area aware. */ @media (max-width: 767px){ :root{ --v9-nav-h: 64px; --v9-nav-gap: 3px; --v9-pill-radius: 20px; --v9-item-radius: 17px; } /* The navigation itself is one floating WhatsApp/iPhone-style pill. */ .sidebar-icon{ left: 7px !important; right: 7px !important; bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important; width: auto !important; height: var(--v9-nav-h) !important; min-height: var(--v9-nav-h) !important; max-height: var(--v9-nav-h) !important; padding: 4px !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--v9-pill-radius) !important; background: rgba(31,41,47,.96) !important; box-shadow: 0 8px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.18) !important; backdrop-filter: blur(18px) saturate(135%) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; overflow: hidden !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; gap: 0 !important; } /* Light mode: still a glass pill, but not a harsh white rectangle. */ :root:not([data-theme="dark"]) .sidebar-icon, body:not([data-theme="dark"]) .sidebar-icon{ background: rgba(248,250,252,.96) !important; border-color: rgba(15,23,42,.10) !important; box-shadow: 0 7px 22px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,23,42,.06) !important; } /* The old avatar is not a bottom-nav item. Keep the source element intact, but do not let it consume one of the four navigation slots. */ .sidebar-icon .avatar{ display: none !important; } .sidebar-icon .sidebar-top, .sidebar-icon .sidebar-bottom, .sidebar-icon .nav-icons{ display: contents !important; } /* Four existing controls only: messages, contacts, admin, settings. */ .sidebar-icon .nav-icons > .nav-icon, .sidebar-icon #adminPanelBtn, .sidebar-icon #settingsNavBtn{ flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; margin: 0 !important; padding: 5px 2px !important; border: 0 !important; border-radius: var(--v9-item-radius) !important; background: transparent !important; color: #aeb8be !important; box-shadow: none !important; transform: none !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: 1px !important; transition: background .16s ease, box-shadow .16s ease, color .16s ease, transform .10s ease !important; } :root:not([data-theme="dark"]) .sidebar-icon .nav-icons > .nav-icon, :root:not([data-theme="dark"]) .sidebar-icon #adminPanelBtn, :root:not([data-theme="dark"]) .sidebar-icon #settingsNavBtn, body:not([data-theme="dark"]) .sidebar-icon .nav-icons > .nav-icon, body:not([data-theme="dark"]) .sidebar-icon #adminPanelBtn, body:not([data-theme="dark"]) .sidebar-icon #settingsNavBtn{ color: #667781 !important; } /* Exactly one focused item. The focus is a soft glass capsule, not a large colored block. */ .sidebar-icon .nav-icons > .nav-icon.active, .sidebar-icon #adminPanelBtn.active, .sidebar-icon #settingsNavBtn.nav-settings-active{ color: var(--primary, #25D366) !important; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.045)) !important; border: 1px solid rgba(255,255,255,.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 16px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.16) !important; transform: none !important; } :root:not([data-theme="dark"]) .sidebar-icon .nav-icons > .nav-icon.active, :root:not([data-theme="dark"]) .sidebar-icon #adminPanelBtn.active, :root:not([data-theme="dark"]) .sidebar-icon #settingsNavBtn.nav-settings-active, body:not([data-theme="dark"]) .sidebar-icon .nav-icons > .nav-icon.active, body:not([data-theme="dark"]) .sidebar-icon #adminPanelBtn.active, body:not([data-theme="dark"]) .sidebar-icon #settingsNavBtn.nav-settings-active{ color: var(--primary, #25D366) !important; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(226,232,236,.70)) !important; border-color: rgba(255,255,255,.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -7px 13px rgba(15,23,42,.06), 0 2px 9px rgba(15,23,42,.14) !important; } /* One thin curved reflection at the top of the selected capsule. */ .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: 18% !important; right: 18% !important; top: 3px !important; height: 11px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.12), transparent) !important; opacity: .85 !important; pointer-events: none !important; } .sidebar-icon .nav-icons > .nav-icon.active::after, .sidebar-icon #adminPanelBtn.active::after, .sidebar-icon #settingsNavBtn.nav-settings-active::after{ position: relative !important; z-index: 2 !important; color: currentColor !important; } .sidebar-icon .nav-icons > .nav-icon svg, .sidebar-icon #adminPanelBtn svg, .sidebar-icon #settingsNavBtn svg{ position: relative !important; z-index: 2 !important; width: 20px !important; height: 20px !important; margin: 0 0 1px !important; flex: 0 0 auto !important; filter: none !important; } .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: 600 !important; letter-spacing: 0 !important; color: currentColor !important; white-space: nowrap !important; } .sidebar-icon .nav-icons > .nav-icon:active, .sidebar-icon #adminPanelBtn:active, .sidebar-icon #settingsNavBtn:active{ transform: scale(.96) !important; } /* No old rectangular/amber focus survives underneath the new capsule. */ .sidebar-icon .nav-icon.active{ background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.045)) !important; } :root:not([data-theme="dark"]) .sidebar-icon .nav-icon.active, body:not([data-theme="dark"]) .sidebar-icon .nav-icon.active{ background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(226,232,236,.70)) !important; } } @media (max-width: 360px){ .sidebar-icon{ left: 5px !important; right: 5px !important; bottom: max(5px, env(safe-area-inset-bottom, 0px)) !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; } .sidebar-icon .nav-icons > .nav-icon, .sidebar-icon #adminPanelBtn, .sidebar-icon #settingsNavBtn{ height: 52px !important; min-height: 52px !important; max-height: 52px !important; } }