/* ========================================
   全面屏手势适配
   ======================================== */

/* 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: constant(safe-area-inset-bottom, 0);
  }
  
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
  
  .container {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* 手势提示条（iPhone X+ 风格） */
.gesture-hint {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: var(--gray-300);
  border-radius: 100px;
  opacity: 0.7;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .gesture-hint {
    display: block;
    bottom: calc(8px + env(safe-area-inset-bottom, 0) / 2);
  }
}

/* 防止底部手势冲突的额外底部间距 */
.gesture-safe-area {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
}

/* 页面切换动画 */
.page-enter {
  animation: slideInFromRight 0.3s ease forwards;
}

.page-exit {
  animation: slideOutToRight 0.3s ease forwards;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

/* 全面屏手机特殊处理 */
@media screen and (display-mode: standalone) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* 安卓全面屏手势条适配 */
@media screen and (min-height: 800px) {
  .bottom-nav-items {
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0) - 8px);
  }
}

/* 返回手势视觉反馈 */
.back-gesture-indicator {
  position: fixed;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10000;
  transform: translate(-100%, -50%);
  transition: transform 0.1s ease;
  pointer-events: none;
}

.back-gesture-indicator.active {
  transform: translate(10px, -50%);
}