/* OnlyShows 0.11.9: matched database spacing and persistent bottom fade. */

@media (max-width: 719px) {
  body.mobile-database-tab .library:not([hidden]) {
    bottom: calc(174px + env(safe-area-inset-bottom));
  }

  body.mobile-database-tab .mobile-bottom-shell {
    transform-origin: bottom center;
    animation: database-shell-reveal 280ms cubic-bezier(.2, .8, .2, 1) both;
    will-change: clip-path;
  }

  body.mobile-database-tab .mobile-bottom-shell .mobile-database-actions {
    animation: database-search-reveal 240ms 35ms cubic-bezier(.2, .8, .2, 1) both !important;
  }

  html body.mobile-database-tab .show-grid,
  html body.mobile-database-tab .library.library-at-top .show-grid,
  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 96px,
      #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 96px,
      #000 100%
    ) !important;
  }

  html body.mobile-database-tab:not(.mobile-profile-tab) main::after {
    content: "" !important;
    position: fixed !important;
    z-index: 1170;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 0;
    display: block !important;
    height: 160px;
    pointer-events: none;
    opacity: 1 !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--surface) 4%, transparent) 16%,
      color-mix(in srgb, var(--surface) 14%, transparent) 32%,
      color-mix(in srgb, var(--surface) 32%, transparent) 50%,
      color-mix(in srgb, var(--surface) 56%, transparent) 68%,
      color-mix(in srgb, var(--surface) 76%, transparent) 84%,
      color-mix(in srgb, var(--surface) 90%, transparent) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@keyframes database-shell-reveal {
  from {
    clip-path: inset(52px 0 0 0 round 30px);
  }
  to {
    clip-path: inset(0 0 0 0 round 30px);
  }
}

@keyframes database-search-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-database-tab .mobile-bottom-shell,
  body.mobile-database-tab .mobile-bottom-shell .mobile-database-actions {
    animation: none !important;
  }
}