/* V24.15 V19 — TARGETED MOBILE NAV + SETTINGS POLISH * Baseline: V18. * Scope ONLY: * 1) remove the legacy square outer layer around the mobile bottom-nav shell; * 2) lift the existing rounded shell ~1mm from the viewport edge; * 3) improve selected-item glass/water-drop press animation; * 4) keep mobile Settings as the direct Settings screen and make its sections * readable in both light/dark themes. * No Firebase/chat/unread/sort/online/admin business logic changes. */ @media (max-width:767px){ :root{ --v19-nav-lift:4px; --v19-nav-radius:22px; --v19-nav-shell-dark:rgba(31,36,39,.94); --v19-nav-shell-light:rgba(248,250,252,.96); } /* The sidebar itself becomes transparent; ::before is the ONE rounded shell. This removes the rectangular background/border left by legacy V6 rules. */ .sidebar-icon{ left:6px !important; right:6px !important; bottom:var(--v19-nav-lift) !important; width:auto !important; height:58px !important; min-height:58px !important; max-height:58px !important; padding:3px !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; isolation:isolate !important; } .sidebar-icon::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; border-radius:var(--v19-nav-radius) !important; background:var(--v19-nav-shell-dark) !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow: 0 9px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.25) !important; backdrop-filter:blur(20px) saturate(140%) !important; -webkit-backdrop-filter:blur(20px) saturate(140%) !important; pointer-events:none !important; } :root:not([data-theme="dark"]) .sidebar-icon::before, body:not([data-theme="dark"]) .sidebar-icon::before{ background:var(--v19-nav-shell-light) !important; border-color:rgba(15,23,42,.10) !important; box-shadow: 0 7px 20px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(15,23,42,.07) !important; } .sidebar-icon > .sidebar-top, .sidebar-icon > .sidebar-bottom, .sidebar-icon .nav-icons{ position:relative !important; z-index:2 !important; } /* Keep all four existing controls inside the single shell. */ .sidebar-icon .nav-icons > .nav-icon, .sidebar-icon #adminPanelBtn, .sidebar-icon #settingsNavBtn{ position:relative !important; z-index:2 !important; border-radius:18px !important; overflow:hidden !important; transform-origin:50% 50% !important; will-change:transform,box-shadow,filter !important; } /* More natural glass highlight: selected item gets a soft curved reflection. */ .sidebar-icon .nav-icons > .nav-icon.active::before, .sidebar-icon #adminPanelBtn.active::before, .sidebar-icon #settingsNavBtn.nav-settings-active::before{ left:14% !important; right:14% !important; top:3px !important; height:9px !important; border-radius:999px !important; opacity:.82 !important; background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.22),transparent) !important; } /* JS adds .v19-water-drop for a deterministic tap animation instead of relying only on :active, which is unreliable on iPhone touchscreens. */ .sidebar-icon .nav-icons > .nav-icon.v19-water-drop, .sidebar-icon #adminPanelBtn.v19-water-drop, .sidebar-icon #settingsNavBtn.v19-water-drop{ animation:v2415V19WaterDrop .48s cubic-bezier(.18,.86,.25,1) both !important; } .sidebar-icon .nav-icons > .nav-icon.v19-water-drop::after, .sidebar-icon #adminPanelBtn.v19-water-drop::after, .sidebar-icon #settingsNavBtn.v19-water-drop::after{ animation:v2415V19WaterReflection .48s ease-out both !important; } @keyframes v2415V19WaterDrop{ 0%{transform:translateY(2px) scale(.88);filter:brightness(1);} 26%{transform:translateY(-1px) scale(1.075);filter:brightness(1.12);} 52%{transform:translateY(0) scale(.965);filter:brightness(1.04);} 76%{transform:translateY(-.5px) scale(1.018);filter:brightness(1.02);} 100%{transform:translateY(0) scale(1);filter:none;} } @keyframes v2415V19WaterReflection{ 0%{opacity:.1;transform:scale(.65);} 25%{opacity:.95;transform:scale(1.08);} 55%{opacity:.35;transform:scale(.94);} 100%{opacity:.12;transform:scale(1);} } /* Settings is a screen now on mobile, not the old four-row popup. */ #settingsPopupMenu{ display:none !important; visibility:hidden !important; pointer-events:none !important; } #settingsModal.show .account-modal{ color:var(--text-main,#e8eef2) !important; background:var(--bg-panel,#151b1f) !important; border-color:rgba(255,255,255,.10) !important; } #settingsModal.show .account-modal-body{ color:var(--text-main,#e8eef2) !important; background:var(--bg-panel,#151b1f) !important; } #settingsModal.show .v19-section{ color:var(--text-main,#e8eef2) !important; background:transparent !important; } #settingsModal.show .v19-section-title, #settingsModal.show .v18-section-label{ color:var(--text-main,#e8eef2) !important; } #settingsModal.show .v18-account-card{ color:var(--text-main,#e8eef2) !important; background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.09) !important; } #settingsModal.show .v18-account-card small, #settingsModal.show .v19-label, #settingsModal.show .v19-note{ color:var(--text-sub,#9aa7b0) !important; } #settingsModal.show .v18-account-card strong{ color:var(--text-main,#e8eef2) !important; } #settingsModal.show .v19-input{ color:var(--text-main,#e8eef2) !important; background:var(--bg-input,#0e1418) !important; border-color:var(--border-color,rgba(255,255,255,.12)) !important; } #settingsModal.show .v19-input::placeholder{ color:var(--text-sub,#9aa7b0) !important; } :root:not([data-theme="dark"]) #settingsModal.show .account-modal, body:not([data-theme="dark"]) #settingsModal.show .account-modal, :root:not([data-theme="dark"]) #settingsModal.show .account-modal-body, body:not([data-theme="dark"]) #settingsModal.show .account-modal-body{ color:#172126 !important; background:#f8fafb !important; } :root:not([data-theme="dark"]) #settingsModal.show .v18-account-card, body:not([data-theme="dark"]) #settingsModal.show .v18-account-card{ color:#172126 !important; background:#f1f5f7 !important; border-color:#dce5e9 !important; } :root:not([data-theme="dark"]) #settingsModal.show .v18-account-card small, body:not([data-theme="dark"]) #settingsModal.show .v18-account-card small, :root:not([data-theme="dark"]) #settingsModal.show .v19-label, body:not([data-theme="dark"]) #settingsModal.show .v19-label, :root:not([data-theme="dark"]) #settingsModal.show .v19-note, body:not([data-theme="dark"]) #settingsModal.show .v19-note{ color:#68767d !important; } :root:not([data-theme="dark"]) #settingsModal.show .v18-account-card strong, body:not([data-theme="dark"]) #settingsModal.show .v18-account-card strong, :root:not([data-theme="dark"]) #settingsModal.show .v19-section-title, body:not([data-theme="light"]) #settingsModal.show .v19-section-title{ color:#172126 !important; } :root:not([data-theme="dark"]) #settingsModal.show .v19-input, body:not([data-theme="dark"]) #settingsModal.show .v19-input{ color:#172126 !important; background:#fff !important; border-color:#d7e0e4 !important; } #settingsModal.show .v19-btn-primary, #settingsModal.show .v19-btn-secondary{ border-color:color-mix(in srgb,var(--primary,#25D366) 35%,transparent) !important; } #adminAccentSettings[style*="display: block"]{ display:block !important; } } @media (prefers-reduced-motion:reduce){ .sidebar-icon .v19-water-drop{animation:none !important;} }