/* Canonical mobile workspace spacing.
   This file is deliberately loaded after every design/module stylesheet:
   several older finishing layers use the `padding` shorthand on .app-view
   and could otherwise erase the bottom-navigation clearance. */
@media (max-width: 900px) {
  :root {
    --mobile-nav-height: 56px;
    --mobile-nav-buffer: 10px;
    --mobile-content-end-space: 48px;
    --mobile-bottom-clearance: calc(
      var(--mobile-content-end-space) +
      var(--mobile-nav-height) +
      env(safe-area-inset-bottom, 0px) +
      var(--mobile-nav-buffer)
    );
  }

  html,
  body,
  .app-main,
  .app-view {
    scroll-padding-bottom: var(--mobile-bottom-clearance);
  }

  /* Keep every page's final card/action fully above the fixed navigation.
     Longhand is intentional: it cannot disturb the established top and
     horizontal gutters. */
  .app-view {
    padding-bottom: var(--mobile-bottom-clearance);
  }

  /* The dashboard is the densest landing page. A small internal finish keeps
     its last aside/card from visually touching the reserved navigation zone. */
  #view > .dashboard-grid {
    padding-bottom: var(--space-2);
  }

  /* Keyboard and programmatic focus should reveal controls above the bar,
     not merely scroll them to the viewport's covered bottom edge. */
  .app-view :where(a[href], button, input, select, textarea, [tabindex]):focus {
    scroll-margin-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
  }

  .bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-nav-buffer));
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
  }

  .bottom-nav__link {
    min-height: var(--mobile-nav-height);
  }

  /* Toasts are actionable UI, not decoration. Keep them above the navigation
     and make their usable width deterministic on narrow devices. */
  .toast-stack {
    right: 14px;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--mobile-nav-buffer) + 12px);
    left: 14px;
  }

  .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* Full-screen search and slide-in workspaces own their scroll region and
     therefore cannot inherit .app-view's end clearance. */
  .search-overlay .search-results-menu,
  .drawer__body {
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    padding-bottom: max(var(--space-8), calc(env(safe-area-inset-bottom, 0px) + 24px));
  }

  .modal__body {
    scroll-padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}

/* Android's WebView reports the real IME through native-bootstrap. A fixed
   navigation bar must leave with the keyboard instead of floating above it
   and consuming another 56 px of the already reduced editing viewport. */
@media (max-width: 900px) {
  html.android-app.android-keyboard-open .bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }

  html.android-app.android-keyboard-open .toast-stack {
    bottom: 14px;
  }
}

@media (max-width: 600px) {
  /* Generic and workflow dialogs use one bottom-sheet geometry on phones.
     Both top and bottom safe edges remain reachable on short screens. */
  .modal-overlay {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px));
  }

  .modal {
    max-height: calc(100dvh - var(--safe-area-top) - env(safe-area-inset-bottom, 0px) - 16px);
  }

  html.android-app .drawer__head {
    padding-top: max(var(--space-5), calc(var(--safe-area-top) + 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav {
    transition: none;
  }
}