/* V24.15 V10 - TARGETED WhatsApp/iPhone bottom navigation correction
   Scope: mobile bottom navigation visual shell + selected-state only.
   Does not change chat, Firebase, unread, sorting, admin data or page layout.
*/
@media (max-width: 767px){
  :root{
    --v10-nav-height: 58px;
    --v10-nav-side: 8px;
    --v10-nav-radius: 22px;
    --v10-item-radius: 18px;
    --v10-item-gap: 3px;
    --v10-nav-bg-dark: rgba(35,39,41,.94);
    --v10-nav-bg-light: rgba(248,250,252,.94);
  }

  /* One outer pill wrapping all four existing controls. */
  .sidebar-icon{
    position: fixed !important;
    left: var(--v10-nav-side) !important;
    right: var(--v10-nav-side) !important;
    top: auto !important;
    /* Keep the whole glass pill visibly lifted from the iPhone edge. */
    bottom: calc(1cm + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: var(--v10-nav-height) !important;
    min-height: var(--v10-nav-height) !important;
    max-height: var(--v10-nav-height) !important;
    box-sizing: border-box !important;
    padding: 3px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: var(--v10-item-gap) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: var(--v10-nav-radius) !important;
    background: var(--v10-nav-bg-dark) !important;
    box-shadow:
      0 10px 28px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.24) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    z-index: 2147483000 !important;
    overflow: visible !important;
  }

  /* Remove the legacy square/rectangular layers; the outer sidebar itself is
     the single rounded glass shell that wraps all four items. */
  .sidebar-icon .sidebar-top,
  .sidebar-icon .sidebar-bottom,
  .sidebar-icon .nav-icons{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="dark"]) .sidebar-icon,
  body:not([data-theme="dark"]) .sidebar-icon{
    background: var(--v10-nav-bg-light) !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow:
      0 7px 22px rgba(15,23,42,.18),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(15,23,42,.08) !important;
  }

  /* Preserve the existing DOM order: Chat, Contacts, Admin, Settings. */
  .sidebar-icon .sidebar-top,
  .sidebar-icon .sidebar-bottom,
  .sidebar-icon .nav-icons{
    display: contents !important;
  }

  .sidebar-icon .avatar{ display:none !important; }

  .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: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border: 1px solid transparent !important;
    border-radius: var(--v10-item-radius) !important;
    background: transparent !important;
    color: #aeb8be !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    transition: background .16s ease, border-color .16s ease,
                box-shadow .16s ease, color .16s ease, transform .1s 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: #59666d !important;
  }

  /* Exactly one selected capsule inside the outer pill. */
  .sidebar-icon .nav-icons > .nav-icon.active,
  .sidebar-icon #adminPanelBtn.active,
  .sidebar-icon #settingsNavBtn.nav-settings-active{
    color: var(--primary, #25D366) !important;
    border-color: rgba(255,255,255,.18) !important;
    background:
      radial-gradient(125% 75% at 50% -12%, rgba(255,255,255,.50), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.40),
      inset 0 -7px 13px rgba(0,0,0,.13),
      0 2px 8px rgba(0,0,0,.18) !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;
    border-color: rgba(255,255,255,.88) !important;
    background:
      radial-gradient(125% 75% at 50% -12%, rgba(255,255,255,.95), transparent 50%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(225,231,235,.76)) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,1),
      inset 0 -7px 13px rgba(15,23,42,.07),
      0 2px 9px rgba(15,23,42,.16) !important;
  }

  /* Glass reflection: the small curved highlight visible on the selected pill. */
  .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:1 !important;
    left:17% !important;
    right:17% !important;
    top:3px !important;
    height:10px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.16), transparent) !important;
    opacity:.88 !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{
    z-index:2 !important;
  }

  .sidebar-icon .nav-icons > .nav-icon svg,
  .sidebar-icon #adminPanelBtn svg,
  .sidebar-icon #settingsNavBtn svg{
    position:relative !important;
    z-index:3 !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:3 !important;
    font-size:8px !important;
    line-height:10px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    color:currentColor !important;
    white-space:nowrap !important;
    pointer-events:none !important;
  }

  /* Settings popup is positioned independently so it can never become a fifth nav item. */
  .sidebar-icon .settings-popup-menu{
    position:fixed !important;
    left:auto !important;
    right:10px !important;
    bottom:calc(1cm + env(safe-area-inset-bottom, 0px) + var(--v10-nav-height) + 8px) !important;
    width:min(270px, calc(100vw - 20px)) !important;
    max-height:calc(100dvh - var(--v10-nav-height) - 24px) !important;
    flex:none !important;
    z-index:2147483500 !important;
  }

  .sidebar-icon .settings-popup-menu:not(.show){ display:none !important; }
  .sidebar-icon .settings-popup-menu.show{ display:flex !important; }

  .sidebar-icon .nav-icons > .nav-icon:active,
  .sidebar-icon #adminPanelBtn:active,
  .sidebar-icon #settingsNavBtn:active{
    animation:v2415WaterDrop .46s cubic-bezier(.22,.82,.24,1) both !important;
    transform-origin:50% 50% !important;
  }

  .sidebar-icon .nav-icons > .nav-icon:active::before,
  .sidebar-icon #adminPanelBtn:active::before,
  .sidebar-icon #settingsNavBtn:active::before{
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    left:8% !important; right:8% !important; top:8% !important; bottom:8% !important;
    border-radius:999px !important;
    background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.70),rgba(255,255,255,.18) 42%,transparent 68%) !important;
    animation:v2415WaterSurface .46s cubic-bezier(.22,.82,.24,1) both !important;
    pointer-events:none !important;
  }

  /* Reflective water-drop press: expands from the center, then settles.
     The selected capsule keeps the final glass state after the animation. */
  .sidebar-icon .nav-icons > .nav-icon.active,
  .sidebar-icon #adminPanelBtn.active,
  .sidebar-icon #settingsNavBtn.nav-settings-active{
    animation: v2415WaterDrop .46s cubic-bezier(.22,.82,.24,1) both !important;
    transform-origin:50% 50% !important;
  }
  @keyframes v2415WaterDrop{
    0%{transform:translateY(3px) scale(.78);filter:brightness(1.05) saturate(1.05);}
    34%{transform:translateY(-2px) scale(1.08);filter:brightness(1.14) saturate(1.08);}
    62%{transform:translateY(0) scale(.97);filter:brightness(1.04) saturate(1.04);}
    82%{transform:translateY(-1px) scale(1.015);filter:brightness(1.02) saturate(1.02);}
    100%{transform:translateY(0) scale(1);filter:none;}
  }
  @keyframes v2415WaterSurface{
    0%{opacity:0;transform:scale(.42);filter:blur(1px);}
    30%{opacity:.78;transform:scale(1.12);filter:blur(0);}
    62%{opacity:.32;transform:scale(.94);}
    100%{opacity:.12;transform:scale(1);}
  }

  /* Do not let legacy mobile rules create a second colored rectangle. */
  .sidebar-icon .nav-icon.active{
    box-shadow:inherit !important;
  }
}

@media (max-width:360px){
  .sidebar-icon{
    left:5px !important;
    right:5px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:2px !important;
    --v10-nav-radius:20px;
  }
  .sidebar-icon .nav-icons > .nav-icon,
  .sidebar-icon #adminPanelBtn,
  .sidebar-icon #settingsNavBtn{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
}