/* OnlyShows 0.13.3: stable card rendering and mobile viewport geometry. */

@media (max-width: 719px) {
  :root {
    --mobile-keyboard-height: 0px;
    --mobile-keyboard-search-offset: 0px;
  }

  /* Keep the main Tab at the physical screen edge while only the search row
     follows the visual viewport above the software keyboard. */
  html body.mobile-database-input-active > .mobile-bottom-shell {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    grid-template-rows: var(--mobile-database-row-height) var(--mobile-nav-row-height) !important;
    overflow: visible !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(var(--mobile-keyboard-height)) !important;
  }

  html body.mobile-database-input-active .mobile-bottom-shell .mobile-database-actions {
    position: relative !important;
    z-index: 3 !important;
    min-height: var(--mobile-database-row-height) !important;
    transform: translateY(calc(-1 * var(--mobile-keyboard-height) + var(--mobile-keyboard-search-offset))) !important;
  }

  html body.mobile-database-input-active > .mobile-bottom-shell > .mobile-bottom-nav,
  html body.mobile-database-input-active > .mobile-bottom-shell > .mobile-bottom-nav.is-scroll-hidden {
    height: var(--mobile-nav-row-height) !important;
    min-height: var(--mobile-nav-row-height) !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.mobile-database-input-active > #mobileWorkspaceDock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Switching workspaces or card density is a single committed frame, so a
     card cannot briefly inherit the previous workspace's bottom geometry. */
  body.mobile-workspace-switching :is(
    .library,
    #showGrid,
    .mobile-bottom-shell,
    #mobileWorkspaceDock,
    .topbar,
    .hero,
    .mobile-workspace-heading
  ),
  body.mobile-view-switching :is(#showGrid, .show-card) {
    animation: none !important;
    transition: none !important;
  }

  /* Stable containment cuts repaint work during fast reverse-grid scrolling. */
  #showGrid:not(.mobile-list-view) > .show-card {
    contain: layout paint style;
  }

  #showGrid .poster {
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* Reserve the Tab height permanently. Hiding the chrome no longer changes
     profile scroll range, and the final insight stays fully reachable. */
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-scroll,
  body.mobile-chrome-hidden.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-scroll {
    box-sizing: border-box !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin-bottom: 0 !important;
    padding-bottom: calc(var(--mobile-nav-row-height) + 32px) !important;
    scroll-padding-bottom: calc(var(--mobile-nav-row-height) + 32px) !important;
    overscroll-behavior-y: contain !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.mobile-database-input-active > .mobile-bottom-shell,
  html body.mobile-database-input-active .mobile-database-actions {
    transition: none !important;
  }
}