/* OnlyShows 0.11.8: persistent mobile shells and full-height content fades. */

.mobile-bottom-shell {
  display: none;
}

@media (max-width: 719px) {
  html body > .mobile-bottom-shell {
    position: fixed !important;
    z-index: 1200 !important;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    width: auto;
    overflow: hidden;
    border-radius: 30px;
  }

  .mobile-bottom-shell > [hidden] {
    display: none !important;
  }

  html body .mobile-bottom-shell .mobile-bottom-nav,
  html body .mobile-bottom-shell .mobile-bottom-nav.is-scroll-hidden {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body:not(.mobile-database-tab) .mobile-bottom-shell {
    overflow: visible;
  }

  body:not(.mobile-database-tab) .mobile-bottom-shell .mobile-bottom-nav {
    border-radius: 999px !important;
  }

  body.mobile-database-tab .mobile-bottom-shell {
    grid-template-rows: 52px 60px;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 82%, transparent);
    background: var(--surface-container-high);
    box-shadow: 0 10px 26px rgb(0 0 0 / 18%);
  }

  body.mobile-database-tab .mobile-bottom-shell .mobile-database-actions {
    min-height: 52px;
    padding: 5px 5px 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
  }

  html body.mobile-database-tab .mobile-bottom-shell .mobile-bottom-nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-database-tab #mobileWorkspaceDock {
    bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  body.mobile-database-tab .mobile-database-dock,
  body.mobile-database-tab .library {
    animation: none !important;
    transform: none !important;
  }

  body.mobile-database-tab .library:not([hidden]) {
    bottom: calc(177px + env(safe-area-inset-bottom));
  }

  body.mobile-database-tab .mobile-workspace-heading {
    position: absolute !important;
    z-index: 7;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 !important;
    padding: 6px 2px 10px;
    pointer-events: none;
  }

  html body.mobile-database-tab .show-grid {
    --database-top-fade: 96px;
    --database-bottom-fade: 68px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 var(--database-top-fade),
      #000 calc(100% - var(--database-bottom-fade)),
      rgb(0 0 0 / 78%) calc(100% - 52px),
      rgb(0 0 0 / 46%) calc(100% - 34px),
      rgb(0 0 0 / 18%) calc(100% - 16px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 var(--database-top-fade),
      #000 calc(100% - var(--database-bottom-fade)),
      rgb(0 0 0 / 78%) calc(100% - 52px),
      rgb(0 0 0 / 46%) calc(100% - 34px),
      rgb(0 0 0 / 18%) calc(100% - 16px),
      transparent 100%
    ) !important;
  }

  html body.mobile-database-tab .library.library-at-bottom .show-grid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 var(--database-top-fade),
      #000 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 4%) 10px,
      rgb(0 0 0 / 12%) 24px,
      rgb(0 0 0 / 28%) 40px,
      rgb(0 0 0 / 50%) 58px,
      rgb(0 0 0 / 72%) 74px,
      rgb(0 0 0 / 90%) 88px,
      #000 var(--database-top-fade),
      #000 100%
    ) !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page[open] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page[open] .insights-head,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page[open] .insights-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-scroll {
    padding-bottom: 88px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page[open]::after {
    content: "" !important;
    position: fixed;
    z-index: 5;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 0;
    display: block !important;
    height: 92px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--surface) 10%, transparent) 20%,
      color-mix(in srgb, var(--surface) 36%, transparent) 48%,
      color-mix(in srgb, var(--surface) 72%, transparent) 76%,
      var(--surface) 100%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-shell,
  .mobile-bottom-shell *,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page[open] {
    animation: none !important;
    transition: none !important;
  }
}