/**
 * Таббар в духе Telegram mobile:
 * — одна общая тёмная/светлая «пилюля» (nav);
 * — пункты: иконка над подписью, без своей подложки;
 * — у выбранного (.active) — отдельная вертикальная капсула + акцентный цвет.
 */
@media (max-width: 768px) {
  nav.mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 60 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 6px !important;
    align-items: stretch !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    /* Стеклянная подложка: фон чата/страницы слегка просвечивает */
    background: color-mix(in srgb, var(--rd-card) 76%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--rd-border) 88%, transparent) !important;
    box-shadow: var(--rd-tabbar-shadow, var(--rd-shadow-soft, 0 2px 10px rgba(0, 0, 0, 0.08)), var(--rd-btn-bevel, inset 0 1px 0 rgba(255, 255, 255, 0.14))) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  }

  /* Скользящая подложка активного таба (ставится из common.js); кнопки сверху без своего фона */
  nav.mobile-bottom-nav .mobile-bottom-nav__glide {
    position: absolute !important;
    left: 6px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: calc((100% - 12px) / 4) !important;
    border-radius: 999px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    background: var(--rd-nav-active) !important;
    box-shadow: var(--rd-btn-bevel, inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 1px 1.5px rgba(255, 255, 255, 0.06)) !important;
    transform: translateX(calc(var(--nav-tab, 0) * 100%)) !important;
    transition: transform 0.44s cubic-bezier(0.34, 1.22, 0.34, 1) !important;
    will-change: transform;
  }

  @keyframes hi-tabbar-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  nav.mobile-bottom-nav.mobile-bottom-nav--enter:not(.mobile-bottom-nav--enter-done) {
    opacity: 0 !important;
  }

  nav.mobile-bottom-nav.mobile-bottom-nav--enter-done {
    animation: hi-tabbar-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }

  /* Ячейка: колонка «иконка — текст», как в Telegram */
  nav.mobile-bottom-nav > button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 52px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition:
      color 0.32s cubic-bezier(0.33, 1, 0.68, 1),
      transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  }

  nav.mobile-bottom-nav > button .nav-label,
  nav.mobile-bottom-nav > button > span:not([class]) {
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  nav.mobile-bottom-nav > button img {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: block !important;
    transition:
      opacity 0.32s cubic-bezier(0.33, 1, 0.68, 1),
      filter 0.32s cubic-bezier(0.33, 1, 0.68, 1) !important;
  }

  /* Не выбрано: только фон полосы, без второй подложки */
  nav.mobile-bottom-nav > button:not(.active) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    color: color-mix(in srgb, var(--rd-muted) 88%, var(--rd-text)) !important;
  }

  nav.mobile-bottom-nav > button:not(.active):hover,
  nav.mobile-bottom-nav > button:not(.active):active,
  nav.mobile-bottom-nav > button:not(.active):focus,
  nav.mobile-bottom-nav > button:not(.active):focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Выбранный пункт: вторая «пилюля» внутри полосы + акцент */
  nav.mobile-bottom-nav > button.active {
    background: var(--rd-nav-active) !important;
    background-color: var(--rd-nav-active) !important;
    box-shadow:
      var(--rd-btn-bevel, inset 0 1px 0 rgba(255, 255, 255, 0.14)),
      inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 28%, transparent) !important;
    border: 0 !important;
    color: var(--rd-accent) !important;
  }

  /* Режим со скользящей подложкой: «пилюля» только у .mobile-bottom-nav__glide */
  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button,
  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button.active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button.active {
    color: var(--rd-accent) !important;
  }

  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button:active {
    transform: scale(0.94) !important;
  }

  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button.active:active {
    transform: scale(0.97) !important;
  }

  /* Не даём style.css поднимать табы при :hover — ломает scale при нажатии */
  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button:hover {
    transform: none !important;
  }

  /* Тёмные темы: иконки как в TG — неактивные приглушённые, активные в цвет акцента */
  body[data-theme="dark"] nav.mobile-bottom-nav > button:not(.active) img,
  body[data-theme="midnight"] nav.mobile-bottom-nav > button:not(.active) img,
  body[data-theme="graphite"] nav.mobile-bottom-nav > button:not(.active) img {
    opacity: 0.52 !important;
    filter: brightness(0) invert(1) !important;
  }

  body[data-theme="dark"] nav.mobile-bottom-nav > button.active img,
  body[data-theme="midnight"] nav.mobile-bottom-nav > button.active img,
  body[data-theme="graphite"] nav.mobile-bottom-nav > button.active img {
    opacity: 1 !important;
    /* приближение к «голубому» как в Telegram (из белой маски после invert) */
    filter: brightness(0) saturate(100%) invert(44%) sepia(93%) saturate(2200%) hue-rotate(188deg) brightness(103%) contrast(101%) !important;
  }

  /* Светлая тема */
  body[data-theme="light"] nav.mobile-bottom-nav > button:not(.active) {
    color: var(--rd-muted) !important;
  }

  body[data-theme="light"] nav.mobile-bottom-nav > button:not(.active) img {
    opacity: 0.72 !important;
    filter: brightness(0) saturate(100%) !important;
  }

  body[data-theme="light"] nav.mobile-bottom-nav > button.active {
    background: color-mix(in srgb, var(--rd-nav-active) 88%, var(--rd-card)) !important;
    background-color: color-mix(in srgb, var(--rd-nav-active) 88%, var(--rd-card)) !important;
    color: var(--rd-accent) !important;
    box-shadow:
      var(--rd-btn-bevel, inset 0 1px 0 rgba(255, 255, 255, 0.88)),
      inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 28%, transparent) !important;
  }

  body[data-theme="light"] nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) > button.active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body[data-theme="light"] nav.mobile-bottom-nav > button.active img {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) !important;
  }

  /* Настройки: иконки через .st-ico (маска), а не <img> */
  nav.mobile-bottom-nav .st-ico--nav {
    width: 24px !important;
    height: 24px !important;
  }

  nav.mobile-bottom-nav > button:not(.active) .st-ico--nav {
    opacity: 0.55 !important;
  }

  nav.mobile-bottom-nav > button.active .st-ico--nav {
    background-color: var(--rd-accent) !important;
    opacity: 1 !important;
  }

  body[data-theme="light"] nav.mobile-bottom-nav > button:not(.active) .st-ico--nav {
    opacity: 0.72 !important;
  }

  nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) .st-ico--nav {
    transition:
      opacity 0.32s cubic-bezier(0.33, 1, 0.68, 1),
      background-color 0.32s cubic-bezier(0.33, 1, 0.68, 1) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    nav.mobile-bottom-nav .mobile-bottom-nav__glide {
      transition: none !important;
    }

    nav.mobile-bottom-nav.mobile-bottom-nav--enter,
    nav.mobile-bottom-nav.mobile-bottom-nav--enter-done {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    nav.mobile-bottom-nav > button,
    nav.mobile-bottom-nav > button img,
    nav.mobile-bottom-nav:has(.mobile-bottom-nav__glide) .st-ico--nav {
      transition: none !important;
    }
  }

  /* Экран чата: таббар скрыт (между .app и nav — search-overlay, не сработает «+») */
  #appRoot.app--show-chat ~ nav.mobile-bottom-nav,
  body:has(#appRoot.app--show-chat) nav.mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Хаб + главная /app: fixed к вьюпорту, без transform (иначе уезжает вниз в PWA) */
  body.feed-page > nav.mobile-bottom-nav,
  body.gifts-page > nav.mobile-bottom-nav,
  body.usernames-market-page > nav.mobile-bottom-nav,
  body.st-hub > nav.mobile-bottom-nav,
  body.profile-shell > nav.mobile-bottom-nav,
  body.user-public-profile > nav.mobile-bottom-nav,
  body.user-profile-page > nav.mobile-bottom-nav,
  body:has(#appRoot) > nav.mobile-bottom-nav,
  #appRoot ~ nav.mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 200 !important;
  }

  body.gifts-page,
  body.usernames-market-page,
  body:has(#appRoot) {
    transform: none !important;
  }

  @media (display-mode: standalone) {
    body:has(#appRoot) > nav.mobile-bottom-nav,
    #appRoot ~ nav.mobile-bottom-nav {
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }

  body.feed-page .feed-shell,
  body.gifts-page .gifts-wrap,
  body.usernames-market-page .mk-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 769px) {
  body.feed-page > nav.mobile-bottom-nav,
  body.gifts-page > nav.mobile-bottom-nav,
  body.usernames-market-page > nav.mobile-bottom-nav {
    display: none !important;
  }
}