/* ===========================================
   NON-CRITICAL STYLES - Loaded asynchronously
   These styles are not needed for initial render
   =========================================== */

/* DataViz loading animation - chart bars growing */
@keyframes grow {
  0%, 100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Custom scrollbar for sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* iOS Native App Specific Styles (for native app wrapper only) */
body.ios-native-app {
  /* Safe area padding for devices with rounded corners/notches */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  margin: 0;
}

body.ios-native-app #root {
  /* Native app - matches standard #root behavior */
  min-height: 100dvh;
  min-height: 100vh;
}

/* Fix viewport height for iOS */
.ios-full-height {
  height: 100dvh;
  height: -webkit-fill-available;
}

/* Ensure proper scrolling within app container */
.ios-scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
}

/* Study aid iframe container - prevent touch hijacking and layout thrashing */
.study-aid-container {
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
  contain: layout style;
  will-change: auto;
}

/* Prevent 3D transforms from affecting scroll performance */
.study-aid-container iframe {
  pointer-events: auto;
  touch-action: manipulation;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ===========================================
   MOBILE-FIRST RESPONSIVE VIEWPORT UTILITIES
   Using modern CSS units with fallbacks
   =========================================== */

/* Dynamic viewport height - adjusts for iOS Safari address bar */
:root {
  --app-vh: 1vh;
  --app-dvh: 1dvh;
}

/* Full viewport height with dvh fallback */
.h-screen-safe {
  height: 100vh;
  height: 100dvh;
}

/* Min height safe */
.min-h-screen-safe {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Max height safe */
.max-h-screen-safe {
  max-height: 100vh;
  max-height: 100dvh;
}

/* Small viewport height (excluding address bar) */
.h-screen-svh {
  height: 100vh;
  height: 100svh;
}

/* Large viewport height (full, ignoring address bar) */
.h-screen-lvh {
  height: 100vh;
  height: 100lvh;
}

/* Fixed fullscreen container - for modals, fullscreen games, etc */
.fixed-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* Fixed fullscreen with safe areas */
.fixed-fullscreen-safe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Flex column that fills available height */
.flex-col-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Scrollable content area within flex container */
.flex-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fixed header/footer within flex container */
.flex-fixed {
  flex-shrink: 0;
}

/* Mobile responsive breakpoint utilities */
@media (max-width: 768px) {
  /* Ensure touch-friendly minimum sizes */
  .touch-target {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Prevent text selection on touch targets */
  .no-select-touch {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* Smooth momentum scrolling on iOS */
  .smooth-scroll-mobile {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Aspect ratio containers for responsive games/media */
.aspect-game {
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 120px);
  max-height: calc(100vh - 120px);
  width: 100%;
  object-fit: contain;
}

.aspect-game-portrait {
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 120px);
  max-height: calc(100vh - 120px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Input safe area - no longer adds bottom padding on iOS */
.input-safe-area {
  padding-bottom: 0px;
}

/* Sticky elements with safe area awareness */
.sticky-top-safe {
  position: sticky;
  top: 0;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
}

.sticky-bottom-safe {
  position: sticky;
  bottom: 0;
  z-index: 40;
}