/* OnlyShows 0.11.17: keyboard-edge add search, reliable Tab restore and identical hard mastheads. */

@media (max-width: 719px) {
  /*
   * The add-show search control belongs at the keyboard edge while it owns
   * focus. Fixed positioning follows the resized mobile viewport.
   */
  html body #searchDialog.search-dialog:has(#remoteSearchInput:focus) .remote-search {
    position: fixed !important;
    z-index: 4;
    right: 18px !important;
    bottom: 0 !important;
    left: 18px !important;
    width: auto !important;
    margin: 0 !important;
  }

  html body #searchDialog.search-dialog .remote-results {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  /*
   * After closing the add-show page, keep a solid surface behind the restored
   * Tab while Android finishes dismissing the IME. There is no fading or
   * wallpaper exposure during this short compositor transition.
   */
  body.mobile-dialog-returning::after {
    content: "";
    position: fixed;
    z-index: 1190;
    inset: 0;
    background: var(--surface-container-high);
    pointer-events: none;
  }

  body.mobile-dialog-returning > .mobile-bottom-shell {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-dialog-returning > .mobile-bottom-shell > .mobile-bottom-nav,
  body.mobile-dialog-returning > .mobile-bottom-shell > .mobile-bottom-nav.is-scroll-hidden {
    height: 56px !important;
    min-height: 56px !important;
    padding: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
   * Database uses the heading itself as the black clipping plate. It extends
   * through the library gutters and ends at exactly the same 64px boundary as
   * the home masthead.
   */
  body.mobile-database-tab:not(.mobile-profile-tab)::before {
    content: none !important;
    display: none !important;
  }

  body.mobile-database-tab .mobile-workspace-heading {
    z-index: 8 !important;
    top: 0 !important;
    right: -12px !important;
    left: -12px !important;
    width: auto !important;
    height: var(--mobile-masthead-height) !important;
    padding: var(--mobile-masthead-top) 14px 0 !important;
    border: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
  }
}