/*
 * V6 iPhone/Android mobile layout refinement - targeted only.
 * Scope:
 *   1) Remove duplicated top safe-area spacing on the mobile list screen.
 *   2) Center the Personal/avatar and navigation icons vertically.
 *   3) Let the bottom navigation background extend through the iPhone
 *      bottom safe-area so there is no blank strip below it.
 *
 * No JS, Firebase, login, chat, message, presence, admin or business logic.
 */

@media (max-width: 767px) {

  /* 1) The mobile list already handles the top safe-area in its search area.
     Do not reserve the same safe-area a second time on the whole sidebar. */
  .sidebar-menu {
    top: 0 !important;
  }

  .sidebar-menu .search-box-area {
    padding-top: max(5px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 5px !important;
  }

  /* Keep the filter row compact after removing the duplicated top spacing. */
  .sidebar-menu .filter-tabs {
    min-height: 42px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* 2 + 3) Bottom navigation:
     The bar itself is moved through the iPhone safe-area. Because its height
     already includes that safe-area, the top edge stays at the same visual
     position while the background reaches the physical bottom.
     This also keeps Android unchanged because its safe-area is normally 0px. */
  .sidebar-icon {
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    height: calc(var(--mobile-nav-content) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(var(--mobile-nav-content) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--mobile-nav-content) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* Remove the previous child translation: the bar itself now owns the
     safe-area and the navigation items remain in their normal geometry. */
  .sidebar-icon .avatar,
  .sidebar-icon .nav-icon,
  .sidebar-icon .icon-btn {
    transform: none !important;
    height: var(--mobile-nav-content) !important;
    min-height: var(--mobile-nav-content) !important;
    padding: 4px 3px 3px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Personal/avatar: same vertical center as the other navigation items. */
  .sidebar-icon .avatar::before,
  .sidebar-icon .avatar img {
    top: 4px !important;
  }

  .sidebar-icon .avatar::after {
    bottom: 3px !important;
    line-height: 11px !important;
  }

  .sidebar-icon .nav-icon svg,
  .sidebar-icon .icon-btn svg {
    margin: 0 0 4px !important;
  }

  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after {
    line-height: 11px !important;
  }

  .sidebar-icon .nav-icon.active::before {
    top: 4px !important;
    height: 38px !important;
  }
}

/* Very small phones: preserve the same alignment while retaining the
   existing compact sizes from mobile.css. */
@media (max-width: 360px) {
  .sidebar-icon .avatar::before,
  .sidebar-icon .avatar img {
    top: 4px !important;
  }

  .sidebar-icon .avatar::after,
  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after {
    bottom: 3px !important;
  }
}