/* Нижняя навигация: белый круг + иконка; активный таб — тёмный круг + белая иконка */
.app-bottom-nav {
  --nav-orb: 40px;
  --nav-orb-active: 48px;
  --nav-icon: 28px;
  --nav-icon-active: 31px;
  --nav-slot: 52px;
  --nav-bar-h: var(--nav-orb-active);
  --nav-ink: #023e61;
  --nav-orb-active-bg: #24292c;
  --nav-orb-active-glow: 0 8px 18px rgba(121, 190, 214, 0.38);

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}

.app-bottom-nav__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: calc(var(--nav-slot) * 5 + 8px * 4);
  min-height: var(--nav-bar-h);
  margin: 0 auto;
  pointer-events: auto;
}

.app-bottom-nav__item {
  flex: 0 0 var(--nav-slot);
  width: var(--nav-slot);
  height: var(--nav-bar-h);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.app-bottom-nav__orb-wrap {
  position: relative;
  width: var(--nav-orb);
  height: var(--nav-orb);
  flex-shrink: 0;
  transition: width 0.2s ease, height 0.2s ease;
}

.app-bottom-nav__item.is-active .app-bottom-nav__orb-wrap {
  width: var(--nav-orb-active);
  height: var(--nav-orb-active);
}

.app-bottom-nav__orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.app-bottom-nav__orb--idle {
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 2px 8px rgba(68, 93, 102, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
}

.app-bottom-nav__orb--active {
  display: none;
  background: var(--nav-orb-active-bg);
  box-shadow: var(--nav-orb-active-glow);
}

.app-bottom-nav__glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--nav-icon);
  height: var(--nav-icon);
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  display: block;
}

.app-bottom-nav__glyph--active {
  display: none;
}

.app-bottom-nav__item.is-active .app-bottom-nav__orb--idle,
.app-bottom-nav__item.is-active .app-bottom-nav__glyph--idle {
  display: none;
}

.app-bottom-nav__item.is-active .app-bottom-nav__orb--active,
.app-bottom-nav__item.is-active .app-bottom-nav__glyph--active {
  display: block;
}

.app-bottom-nav__item.is-active .app-bottom-nav__glyph--active {
  width: var(--nav-icon-active);
  height: var(--nav-icon-active);
}

/* Профиль: фото на весь круг */
.app-bottom-nav__orb-wrap--profile {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(68, 93, 102, 0.22);
}

.app-bottom-nav__orb-wrap--profile .app-bottom-nav__glyph {
  display: none;
}

.app-bottom-nav__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

.app-bottom-nav__photo--idle {
  z-index: 1;
}

.app-bottom-nav__item[data-screen="profile"]:not(.has-user-photo) .app-bottom-nav__photo--idle {
  width: 52%;
  height: 52%;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.app-bottom-nav__item[data-screen="profile"].has-user-photo .app-bottom-nav__orb--idle {
  display: none;
}

.app-bottom-nav__orb-wrap--profile .app-bottom-nav__orb--active {
  z-index: 0;
  inset: 0;
}

.app-bottom-nav__photo--active {
  z-index: 1;
}

.app-bottom-nav__item[data-screen="profile"].is-active .app-bottom-nav__orb--idle,
.app-bottom-nav__item[data-screen="profile"].is-active .app-bottom-nav__photo--idle {
  display: none;
}

.app-bottom-nav__item[data-screen="profile"].is-active .app-bottom-nav__orb--active {
  display: block;
}

.app-bottom-nav__item[data-screen="profile"].is-active .app-bottom-nav__orb-wrap--profile {
  box-shadow: var(--nav-orb-active-glow);
}

@media (hover: hover) {
  .app-bottom-nav__item:not(.is-active):hover .app-bottom-nav__orb--idle {
    box-shadow: 0 4px 12px rgba(68, 93, 102, 0.28);
  }
}

@media (max-width: 360px) {
  .app-bottom-nav {
    --nav-orb: 36px;
    --nav-orb-active: 44px;
    --nav-icon: 24px;
    --nav-icon-active: 27px;
    --nav-slot: 46px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-bottom-nav__bar {
    gap: 6px;
    max-width: calc(var(--nav-slot) * 5 + 6px * 4);
  }
}