/**
 * R2 — official F7 Tabbar glass pill skin (styling only, F7 owns navigation).
 * C1AB — stable-host tabbar; full hide distance; transform-only progress.
 * C1AE — main tabbar: no backdrop-filter; stable opaque pill; transform-only motion.
 * C1AG — disable tabbar pseudo-glass; fully opaque stable surface (no matrix bleed-through).
 */

/* C1AE/C1AG — main bottom tabbar only: permanent no-blur surface (composer/header glass untouched) */
#f7-app-root .toolbar.tabbar.f7-glass-tabbar,
#f7-app-root .toolbar.tabbar.f7-glass-tabbar.f7-glass-surface {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* C1AG — tabbar-only: disable .f7-glass-surface glare/border pseudos (global glass tokens unchanged) */
#f7-app-root .toolbar.tabbar.f7-glass-tabbar.f7-glass-surface::before,
#f7-app-root .toolbar.tabbar.f7-glass-tabbar.f7-glass-surface::after {
  content: none !important;
  display: none !important;
}

#f7-app-root .toolbar.tabbar.f7-glass-tabbar,
#f7-app-root .toolbar.tabbar.f7-glass-tabbar *,
#f7-app-root .toolbar.tabbar.f7-glass-tabbar::before,
#f7-app-root .toolbar.tabbar.f7-glass-tabbar::after {
  filter: none !important;
}

body.f7-shell-settled #f7-app-root .toolbar.tabbar.f7-glass-tabbar,
body.f7-shell-settled #f7-app-root .page-home .toolbar.tabbar.f7-glass-tabbar {
  --f7-toolbar-height: var(--f7-glass-tabbar-h);
  --f7-tabbar-icons-height: var(--f7-glass-tabbar-h);
  --f7-tabbar-icon-size: var(--f7-glass-tab-icon);
  --f7-tabbar-label-font-size: var(--f7-glass-tab-label);
  display: block;
  position: fixed;
  left: var(--f7-glass-tabbar-margin-x);
  right: var(--f7-glass-tabbar-margin-x);
  bottom: var(--f7-glass-tabbar-float-bottom);
  width: auto;
  height: var(--f7-glass-tabbar-h);
  min-height: var(--f7-glass-tabbar-h);
  z-index: 530;
  margin: 0;
  padding: 0;
  border-radius: var(--f7-glass-radius-pill);
  touch-action: manipulation;
  background: rgb(18, 18, 22) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --f7-clean-chat-tabbar-hide-distance: calc(
    100% + var(--f7-glass-tabbar-float-bottom, 0px) + 20px
  );
  --f7-profile-tabbar-hide-distance: calc(
    100% + var(--f7-glass-tabbar-float-bottom, 0px) + 20px
  );
  opacity: 1 !important;
  transform: translate3d(
    0,
    calc(
      var(--f7-clean-chat-tabbar-progress, 0) * var(--f7-clean-chat-tabbar-hide-distance)
      + var(--f7-profile-tabbar-progress, 0) * var(--f7-profile-tabbar-hide-distance)
    ),
    0
  );
  transition: transform var(--f7-page-transition-duration, 400ms) ease;
}

body.f7-clean-chat-tabbar-swipeback-active
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar {
  transition: none !important;
}

body.f7-profile-tabbar-progress-active:not(.f7-chat-route-active):not(.f7-sandbox-route-active)
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar {
  transition: none !important;
}

body.f7-clean-chat-tabbar-hidden
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar,
body.f7-chat-route-active:not(.f7-sandbox-route-active)
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar {
  pointer-events: none !important;
}

body.f7-clean-chat-tabbar-visible
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar {
  pointer-events: auto !important;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .toolbar-inner {
  display: flex;
  align-items: center;
  min-height: var(--f7-glass-tabbar-h);
  height: auto;
  max-height: var(--f7-glass-tabbar-h);
  padding: 2px 20px;
  box-sizing: border-box;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f7-glass-tab-gap);
  padding: 2px 1px 1px;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  border-radius: 14px;
  transition: color 0.15s ease, background 0.15s ease;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .f7-tab-icon {
  width: var(--f7-glass-tab-icon);
  height: var(--f7-glass-tab-icon);
  color: var(--f7-glass-icon-idle);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tabbar-label {
  font-size: var(--f7-glass-tab-label);
  font-weight: 600;
  color: var(--f7-glass-label-idle);
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: visible;
  max-width: 100%;
  line-height: 1.1;
  transition: color 0.15s ease;
}

/* CSS-only press / focus glare — no JS pointer tracking */
body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link:active {
  background: var(--f7-glass-glare-active);
}

@media (hover: hover) {
  body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link:hover:not(.tab-link-active) {
    background: rgba(255, 255, 255, 0.04);
  }
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link:focus-visible {
  outline: 2px solid rgba(255, 106, 0, 0.45);
  outline-offset: 1px;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link-active .f7-tab-icon {
  color: var(--f7-glass-accent);
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link-active .tabbar-label {
  color: var(--f7-glass-accent);
  font-weight: 700;
}

body.f7-shell-settled #f7-app-root .f7-glass-tabbar .tab-link-active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--f7-glass-tab-dot);
  height: var(--f7-glass-tab-dot);
  border-radius: 50%;
  background: var(--f7-glass-accent);
  z-index: 2;
}

/* Chat route lifecycle — hide glass tabbar while sandbox/chat route active */
body.f7-sandbox-route-active #f7-app-root .f7-glass-tabbar {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(110%);
}

/* C1W — clean chat tabbar hide/show driven by --f7-clean-chat-tabbar-progress (no instant opacity/visibility) */

/* Profile tab — progress-driven hide via --f7-profile-tabbar-progress (layout: body.f7-profile-tab-active) */
body.f7-profile-tabbar-hidden:not(.f7-profile-tabbar-progress-active):not(.f7-chat-route-active):not(
    .f7-sandbox-route-active
  )
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar {
  pointer-events: none !important;
  visibility: hidden !important;
}

body.f7-profile-tab-active:not(.f7-chat-route-active):not(.f7-sandbox-route-active)
  #f7-app-root
  .f7-glass-tabbar {
  pointer-events: none !important;
}

body.f7-shell-settled
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar.toolbar-hidden {
  pointer-events: none !important;
  transform: translate3d(0, 110%, 0);
}

body.f7-shell-settled
  #f7-app-root
  .toolbar.tabbar.f7-glass-tabbar.toolbar-hidden.toolbar-transitioning {
  transition-duration: var(--f7-toolbar-hide-show-transition-duration, 0.22s);
}

/* Legacy custom toolbar must never appear under F7 shell after R2 */
body.f7-shell-active #f7-bottom-toolbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.f7-shell-active #bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transform: translateY(110%) !important;
}

body.f7-shell-active.bar-in-chat #bottom-nav,
body.f7-shell-active.bar-in-chat:not(.pn-chat-sheet-open):not(.pn-nav-hidden) #bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transform: translateY(110%) !important;
}

/* P1-UNREAD-BADGE-F7-A — DM + Общий чат tab badges */
body.f7-shell-settled #f7-app-root .f7-glass-tabbar .f7-tabbar-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: calc(50% - var(--f7-glass-tab-icon) / 2 - 2px);
  background: #ee2222;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  font-size: 10px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  line-height: 1;
}