/* OnlyShows 0.11.6: transparent content fades and separated database controls. */

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

  body:not(.mobile-profile-tab) .library::before,
  body:not(.mobile-profile-tab) .library::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body:not(.mobile-profile-tab) .show-grid {
    --library-fade-size: 48px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--library-fade-size),
      #000 calc(100% - var(--library-fade-size)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--library-fade-size),
      #000 calc(100% - var(--library-fade-size)),
      transparent 100%
    );
  }

  body:not(.mobile-profile-tab) .library.library-at-top:not(.library-at-bottom) .show-grid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - var(--library-fade-size)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - var(--library-fade-size)),
      transparent 100%
    );
  }

  body:not(.mobile-profile-tab) .library.library-at-bottom:not(.library-at-top) .show-grid {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--library-fade-size),
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--library-fade-size),
      #000 100%
    );
  }

  body:not(.mobile-profile-tab) .library.library-at-top.library-at-bottom .show-grid {
    -webkit-mask-image: none;
    mask-image: none;
  }

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

  body.mobile-database-tab .mobile-database-dock {
    animation: database-controls-enter 260ms cubic-bezier(.2, .8, .2, 1) both;
  }

  body.mobile-database-tab .mobile-database-actions {
    border: 1px solid var(--outline-variant) !important;
    border-radius: 999px !important;
    background: var(--surface-container-high) !important;
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%) !important;
  }

  html body.mobile-database-tab .mobile-bottom-nav {
    border-color: color-mix(in srgb, var(--outline-variant) 82%, transparent) !important;
    border-radius: 999px !important;
  }
}

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

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