/* OnlyShows 0.11.5: matched dock spacing, scroll fades, and continuous database expansion. */

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

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

  body:not(.mobile-profile-tab) .library::before,
  body:not(.mobile-profile-tab) .library::after {
    content: "" !important;
    position: absolute;
    z-index: 6;
    right: 0;
    left: 0;
    display: block !important;
    height: 52px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms ease;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.mobile-profile-tab) .library::before {
    top: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--surface) 86%, transparent) 0%,
      color-mix(in srgb, var(--surface) 32%, transparent) 58%,
      transparent 100%
    ) !important;
  }

  body.mobile-database-tab .library::before {
    top: 52px;
  }

  body:not(.mobile-profile-tab) .library::after {
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--surface) 28%, transparent) 45%,
      color-mix(in srgb, var(--surface) 84%, transparent) 100%
    ) !important;
  }

  body:not(.mobile-profile-tab) .library.library-at-top::before,
  body:not(.mobile-profile-tab) .library.library-at-bottom::after {
    opacity: 0;
  }

  .mobile-workspace-heading {
    position: relative;
    z-index: 7;
  }

  #mobileWorkspaceDock {
    will-change: clip-path, transform;
  }

  body.mobile-database-tab #mobileWorkspaceDock {
    overflow: hidden;
    border-radius: 30px 30px 0 0 !important;
    background: var(--surface-container-high) !important;
    animation: database-shell-expand 320ms cubic-bezier(.2, .8, .2, 1) both;
  }

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

  body.mobile-database-tab .mobile-database-actions {
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .mobile-bottom-nav {
    transition:
      border-radius 320ms cubic-bezier(.2, .8, .2, 1),
      background-color 220ms ease,
      box-shadow 260ms ease !important;
  }
}

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

@keyframes database-tools-enter {
  from {
    opacity: .35;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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