/* Mobile navigation is a normal row in the app frame, never a bottom-fixed
   compositor layer. Only #app scrolls; dialogs remain outside the frame. */
@media (max-width: 900px) {
  :root {
    --nav-h: 60px;
    --mobile-nav-safe-bottom: clamp(0px, var(--sb), 34px);
  }
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    min-height: 0;
    padding-bottom: 0;
  }
  #app-frame {
    width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }
  #app {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    /* overflow-y:auto otherwise makes the default visible x-axis scrollable.
       Screen transitions must not leave the entire workspace panned sideways. */
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
    scroll-padding-block: 16px;
  }
  #tabs {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    inset: auto;
    height: calc(var(--nav-h) + var(--mobile-nav-safe-bottom));
    padding: 4px 4px calc(4px + var(--mobile-nav-safe-bottom));
    min-width: 0;
    max-height: calc(var(--nav-h) + var(--mobile-nav-safe-bottom));
    box-sizing: border-box;
    background: #06060e;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    will-change: auto;
  }
  #tabs .tab {
    min-height: 48px;
    padding: 4px 2px;
    gap: 3px;
  }
  .snd, #immersionNudge {
    bottom: calc(var(--nav-h) + var(--mobile-nav-safe-bottom) + 10px);
  }
  .csw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .csw-card { min-width: 0; }
  .csw-pname { overflow-wrap: anywhere; }
}

/* Apply the same bounded home-indicator clearance in browser, minimal-ui,
   standalone, fullscreen and embedded mobile views. Display-mode detection
   must not decide whether a reported browser-toolbar inset enlarges the nav.
   The browser already reserves its own chrome outside the dynamic viewport. */