/**
 * Mobile Viewport Fix
 * Solves the issue where browser address bars obscure content
 *
 * Problem: 100vh includes browser UI space, causing content cutoff
 * Solution: Use CSS custom property updated by JS for real viewport height
 */

/* Set a fallback custom property for viewport height */
:root {
  --vh: 1vh; /* Fallback, will be updated by JS */
}

/* Apply to elements that use 100vh on mobile */
@media (max-width: 768px) {
  /* Main container */
  #content-wrapper {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* Session sidebar */
  #session-sidebar {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* Explorer panel fullscreen */
  #explorer-panel {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* Investigation panel */
  #investigation-panel {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  /* Modals */
  .modal-content {
    max-height: calc(var(--vh, 1vh) * 100 - 24px) !important;
  }

  /* Landing page hero */
  .hero {
    min-height: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* Prevent overscroll/bounce on iOS - App only (not landing page) */
@media (max-width: 768px) {
  /* Only apply fixed positioning when in the app (has #main-container) */
  body:has(#main-container) {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }

  #main-container {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
  }
}