/**
 * 🍎 iOS Navigation Fix - Instagram-style always-raised bottom navigation
 * 
 * Features:
 * - Root scroll isolation (mobile only, when content container exists)
 * - Always-raised navigation with internal top strip (96px height)
 * - Safe-area handling (internal padding, not external gap)
 * - No transforms on .bottom-nav except when hidden
 * - Touch-device only via media queries
 * - No overlay belts covering content
 */

/* ============================================================================
   📱 MOBILE-ONLY ROOT SCROLL ISOLATION (CONDITIONAL)
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Root elements should not scroll on mobile ONLY when content container exists */
  html.has-content-container, 
  html.has-content-container body {
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
  }
  
  /* 
   * WEAKENED: Content layer scroll handling - now handled by scroll-fix.css
   * These rules are kept minimal to avoid conflicts with scroll-fix.css
   * The primary scroll container rules are in scroll-fix.css
   */
  .page-content, .page-body, .content, .app-content, .screen-content {
    /* REMOVED: min-height: 100dvh - conflicts with scroll-fix.css */
    /* REMOVED: overflow-y: auto - conflicts with scroll-fix.css */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: var(--bg-primary);
    /* REMOVED: padding-bottom - now handled by scroll-fix.css on #page-content only */
  }
  
  /* Additional content selectors - minimal styling only */
  #app .content {
    /* REMOVED: min-height: 100dvh - conflicts with scroll-fix.css */
    /* REMOVED: overflow-y: auto - conflicts with scroll-fix.css */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: var(--bg-primary);
    /* REMOVED: padding-bottom - now handled by scroll-fix.css on #page-content only */
  }
  
  /* Fallback for older browsers without dvh support - REMOVED to avoid conflicts */
}

/* ============================================================================
   🧭 BOTTOM NAVIGATION - ALWAYS FIXED, NO TRANSFORMS
   ============================================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 96px;
  z-index: 1000;
  background-color: var(--bg-card);
  border-top: 1px solid var(--bg-secondary);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  
  /* Subtle shadow for raised effect */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  
  /* Remove transforms - position: fixed should be reliable */
  transform: none;
  will-change: auto;
  
  /* iOS WebKit stability */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* No animations on the container itself */
  animation: none;
}

/* Hide navigation when keyboard is visible (only toggle allowed) - ИСПРАВЛЕНО: Поддержка обоих контекстов */
html.nav-hidden .bottom-nav,
body.nav-hidden .bottom-nav,
.nav-hidden .bottom-nav {
  transform: translateY(100%);
}

/* ============================================================================
   📱 MOBILE-ONLY: ALWAYS-RAISED STATE WITH INTERNAL TOP STRIP
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
  /* Always-raised state: add internal top strip */
  html.nav-raised .bottom-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--spacing-2xs, 6px);
    background: var(--bg-primary);
    pointer-events: none;
    z-index: 1;
  }
  
  /* Push down navigation content when raised to sit below strip */
  html.nav-raised .bottom-nav {
    padding-top: calc(var(--spacing-2xs, 6px) + var(--spacing-xs, 8px));
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  /* Center nav items vertically in the taller bar */
  html.nav-raised .bottom-nav .nav-items {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    height: calc(96px - var(--spacing-2xs, 6px) - var(--spacing-xs, 8px) - env(safe-area-inset-bottom, 0px));
  }
  
  /* Ensure nav items are properly centered vertically below the strip */
  html.nav-raised .bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    /* Prevent overlap with strip */
    position: relative;
    z-index: 2;
  }
  
  /* Ensure nav icons and labels have proper spacing */
  html.nav-raised .bottom-nav .nav-icon {
    margin-bottom: var(--spacing-xs, 8px);
  }
  
  html.nav-raised .bottom-nav .nav-label {
    margin-top: 0;
  }
}

/* ============================================================================
   🔧 PREVENT TRANSFORM ANCESTORS BREAKING POSITION FIXED
   ============================================================================ */

/* Ensure no transforms/filters on critical ancestors that could break position: fixed */
.app-container,
#app,
body {
  transform: none;
  filter: none;
  perspective: none;
}

/* ============================================================================
   🧪 FALLBACKS AND COMPATIBILITY
   ============================================================================ */

/* Unified background to prevent white seams */
html, body, #app, .app-container, .page-content, .page-body, .content {
  background: var(--bg-primary);
}

/* Desktop behavior unchanged - basic content padding only */
@media (hover: hover) and (pointer: fine) {
  .page-content, .page-body, .content, .app-content, .screen-content, #app .content {
    /* REMOVED: padding-bottom - now handled by scroll-fix.css on #page-content only */
    /* REMOVED: min-height: auto - conflicts with scroll-fix.css */
    overflow-y: visible;
  }
}

/* ============================================================================
   ⌨️ ENHANCED KEYBOARD SCROLL LOCK WITH VIEWPORT STABILIZATION
   ============================================================================ */

/* Keyboard scroll lock (улучшено для более стабильного поведения) */
.keyboard-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* Дополнительные классы для стабилизации viewport на iOS - ИСПРАВЛЕНО: Поддержка обоих контекстов */
html.keyboard-open,
body.keyboard-open {
  overflow: hidden !important;
}

html.keyboard-open body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Блокировка скролла контента при открытой клавиатуре - ИСПРАВЛЕНО: Поддержка обоих контекстов */
html.keyboard-open .content,
html.keyboard-open .page-content,
html.keyboard-open .app-content,
body.keyboard-open .content,
body.keyboard-open .page-content,
body.keyboard-open .app-content {
  overflow: hidden !important;
}