/**
 * GymDiet Master — Performance & Smoothness Optimizations
 * Ensures 60/120 FPS buttery-smooth scrolling, unlocks full vertical touch scroll on all screens,
 * eliminates WebView composite layer clipping bottlenecks, and prevents GPU fillrate lag during fast flings.
 */

/* 1. Global Touch and Scrolling Engine */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: auto !important; /* Never fight native touch momentum */
}

/* Zero-delay immediate touch response for all interactive elements (eliminates 300ms tap lag) */
button,
a,
input,
select,
textarea,
[role="button"],
.btn,
.nav-item,
.tab-btn,
.chip,
.tab-pill,
.workout-hub-tab,
.action-btn,
.settings-tile,
.section-tile {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#app {
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  contain: none !important;
}

/* 2. Screens: NEVER clip or contain paint so vertical scrolling works freely */
.screen {
  contain: none !important;
  transform: none !important;
  overflow: visible !important;
  height: auto !important;
}

.screen:not(.active) {
  display: none !important;
}

.screen.active {
  display: block !important;
  position: relative !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  contain: none !important;
}

#screen-ai-coach.active {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* 3. Main Content: smooth scrolling and clearance for bottom nav */
.main-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-bottom: max(76px, calc(54px + max(env(safe-area-inset-bottom, 4px), 8px))) !important;
  contain: none !important;
}

.bottom-nav,
#bottom-nav {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-around !important;
  padding-top: 4px !important;
  padding-bottom: max(env(safe-area-inset-bottom, 4px), 8px) !important;
  min-height: calc(50px + max(env(safe-area-inset-bottom, 0px), 4px)) !important;
  box-sizing: border-box !important;
}

/* 4. Lightweight hardware acceleration on cards without touch-blocking layers */
.card,
.glass-card,
.st-card,
.section-tile,
.workout-recovery-hub-card,
.grocery-category-group,
.habit-card {
  will-change: auto;
  box-sizing: border-box;
}

/* 5. Smooth Text and Image Rendering */
body, input, button, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  content-visibility: visible;
  decoding: async;
}

/* 6. Dashboard & Main Screen Performance Acceleration */
#screen-main {
  transform: none;
  contain: none;
}

#dashboard-activity-heatmap-section,
.dashboard-workout-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}

.workout-map-container svg,
.workout-donor-muscle-svg {
  transform: translateZ(0);
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

/* 7. Virtualized Off-Screen Rendering & Instant Fling Scroll (60/120 FPS) */
.catalog-exercise-card,
.workout-catalog-card,
.workout-day-card,
.workout-exercise-item,
.workout-recovery-hub-card,
.menu-meal-card,
.menu-day-card,
.recipe-card,
.grocery-category-group,
.grocery-category-card,
.grocery-item-row,
.notes-card,
.note-card,
.habit-card,
.stat-card,
.dashboard-card-v2,
.dashboard-workout-card,
.leagues-tier-card,
.leaderboard-card,
.profile-card,
.profile-section-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

/* «Ещё» Hub & Section Tiles: Instant Stable Geometry (No Layout Thrashing / Scroll Jumps) */
.more-hub-card,
#screen-more .more-hub-card,
.section-tile,
#screen-more .section-tile {
  content-visibility: visible !important;
  contain: layout style;
  transform: translateZ(0);
}

#screen-more .main-content {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  transform: translateZ(0);
}

/* 8. Disable heavy backdrop-filter on repetitive in-feed cards to prevent GPU rasterization stalls during fast scrolls */
.main-content .card,
.main-content .glass-card,
.main-content .workout-card,
.main-content .section-tile,
.main-content .recipe-card,
.main-content .note-card,
.main-content .habit-card,
.main-content .catalog-exercise-card,
.main-content .grocery-category-group,
.main-content .more-hub-card,
.more-hub-card,
#screen-more .more-hub-card,
#screen-more .section-tile {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 9. Mobile & Android GPU Fillrate Turbo (Eliminates scroll stutter & frame drops on mobile GPUs) */
@media (max-width: 768px) {
  body.is-native-app .card,
  body.is-native-app .glass-card,
  body.is-native-app .section-tile,
  body.is-native-app .workout-card,
  body.is-native-app .catalog-exercise-card,
  body.is-native-app .grocery-category-group,
  body.is-native-app .habit-card,
  body.is-native-app .note-card,
  body.is-native-app .stat-card,
  body.is-native-app .st-card,
  .telegram-webapp .card,
  .telegram-webapp .glass-card,
  .telegram-webapp .section-tile,
  .telegram-webapp .workout-card,
  .telegram-webapp .catalog-exercise-card,
  .telegram-webapp .grocery-category-group,
  .telegram-webapp .habit-card,
  .telegram-webapp .note-card,
  .telegram-webapp .stat-card,
  .telegram-webapp .st-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* GPU Compositing for smooth 60/120 FPS fling scroll */
  body.is-native-app .main-content,
  .telegram-webapp .main-content {
    transform: translateZ(0);
    will-change: scroll-position;
  }
}

/* 10. Robust Bottom Navigation Centering Lock (Zero Horizontal Shift Guarantee) */
.bottom-nav,
#bottom-nav,
:root .bottom-nav,
:root[data-theme] .bottom-nav,
body .bottom-nav,
body.dark-theme .bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 auto !important;
  max-width: 480px !important;
  width: 100% !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Zero-FOUC Startup Protection & Instant Main Screen Paint
   ========================================================= */
#floating-rest-widget-container.is-hidden,
.floating-rest-widget-container.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.9) !important;
}

#trial-celebration-modal:not(.is-open),
.trial-celebration-backdrop:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.profile-modal.is-hidden,
.modal.is-hidden {
  display: none !important;
}

/* =========================================================
   Screen "More" -> Nexo AI Block Strict Left Alignment
   ========================================================= */
#section-ai-coach,
#screen-more #section-ai-coach,
.section-tile.section-tile-featured-wide {
  text-align: left !important;
}

#section-ai-coach .featured-tile-body,
#screen-more #section-ai-coach .featured-tile-body,
.section-tile.section-tile-featured-wide .featured-tile-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
}

#section-ai-coach .featured-tile-badge,
#screen-more #section-ai-coach .featured-tile-badge,
#section-ai-coach .featured-tile-title,
#screen-more #section-ai-coach .featured-tile-title,
#section-ai-coach .section-tile-label,
#screen-more #section-ai-coach .section-tile-label,
#section-ai-coach .featured-tile-caption,
#screen-more #section-ai-coach .featured-tile-caption {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
}