/* AxisVPN Mini App - Floating Capsule Navigation Bar (Ultra-Fluid Smooth Motion) */

/* Bottom Scroll Fade Gradient Scrim (Smoothly dissolves scrolled content below navigation bar) */
.bottom-scroll-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(105px + var(--tg-safe-bottom, 0px));
  background: linear-gradient(to top, 
    #F8FAFC 0%, 
    rgba(248, 250, 252, 0.96) 28%,
    rgba(248, 250, 252, 0.72) 55%,
    rgba(248, 250, 252, 0.25) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 990;
  transition: opacity 0.35s ease;
}

[data-theme="dark"] .bottom-scroll-fade {
  background: linear-gradient(to top, 
    #111115 0%, 
    rgba(17, 17, 21, 0.98) 28%,
    rgba(17, 17, 21, 0.75) 55%,
    rgba(17, 17, 21, 0.28) 80%,
    transparent 100%
  );
}

/* Auto-hide bottom scroll fade when bottom sheet modal is open */
body:has(.modal-overlay.active) .bottom-scroll-fade,
.modal-overlay.active ~ #navbar-container .bottom-scroll-fade,
.modal-overlay.active ~ .bottom-scroll-fade {
  opacity: 0;
  pointer-events: none;
}

.floating-nav-wrapper {
  position: fixed;
  bottom: calc(22px + var(--tg-safe-bottom, 0px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  pointer-events: none;
  padding: 0 16px;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Auto-hide floating nav bar when bottom sheet modal is open */
body:has(.modal-overlay.active) .floating-nav-wrapper,
.modal-overlay.active ~ .floating-nav-wrapper,
.modal-overlay.active ~ #navbar-container .floating-nav-wrapper {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px);
}

.floating-nav-bar {
  pointer-events: auto;
  width: 345px;
  max-width: calc(100vw - 32px);
  height: 57px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(30, 11, 54, 0.06);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}

/* Individual Tab Button with 10% Slower Ultra-Fluid Physics Timing */
.nav-tab-btn {
  height: 45px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: pointer;
  background: transparent;
  color: #4B5563;
  transition: flex 0.58s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.58s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.58s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.50s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.50s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.38s ease,
              transform 0.28s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-sizing: border-box;
  overflow: hidden;
  transform: translateZ(0);
  will-change: width, flex, background, transform;
}

.nav-tab-btn:active {
  transform: scale(0.95);
}

/* Inactive Tabs */
.nav-tab-btn:not(.active) {
  flex: 0 0 45px;
  width: 45px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.nav-tab-btn:not(.active):hover {
  background: rgba(30, 11, 54, 0.05);
  color: #1E0B36;
}

.nav-tab-btn:not(.active) .nav-tab-label {
  max-width: 0;
  opacity: 0;
  transform: scale(0.9);
  margin: 0;
  pointer-events: none;
}

/* Tab Icon */
.nav-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), color 0.38s ease;
  color: inherit;
  flex-shrink: 0;
}

.nav-tab-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* Animated Dark Capsule Gradient Keyframes */
@keyframes activeNavGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Active State: Midnight Deep Dark Purple Accent with Animated Gradient */
.nav-tab-btn.active {
  flex: 0 0 115px;
  width: 115px;
  background: linear-gradient(-45deg, #1A0B2E, #2E1065, #150926, #3B0764);
  background-size: 250% 250%;
  animation: activeNavGradient 8s ease infinite;
  color: #FFFFFF;
  padding: 0 14px;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(30, 11, 54, 0.42);
}

.nav-tab-btn.active .nav-tab-icon {
  color: #FFFFFF;
  transform: scale(1.05);
}

.nav-tab-btn.active .nav-tab-icon svg {
  stroke: #FFFFFF !important;
}

/* Tab Label (Silky smooth gliding expansion) */
.nav-tab-label {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  color: #FFFFFF;
  transition: max-width 0.58s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
              transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-tab-btn.active .nav-tab-label {
  max-width: 75px;
  opacity: 1;
  transform: scale(1);
}

/* RTL Spacing */
html[dir="rtl"] .nav-tab-btn.active .nav-tab-label {
  margin-right: 3px;
}

/* LTR Spacing */
html[dir="ltr"] .nav-tab-btn.active .nav-tab-label {
  margin-left: 3px;
}

/* =========================================================
   Dark Mode Floating Navbar
   ========================================================= */
[data-theme="dark"] .floating-nav-bar {
  background: rgba(22, 22, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-tab-btn {
  color: #94A3B8;
}

[data-theme="dark"] .nav-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
}

[data-theme="dark"] .nav-tab-btn.active {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5);
  color: #FFFFFF;
}