/* Top feed chrome overlays scroll — gradient-only mirror of bottom tabbar, fades on scroll */
.screen-feed {
  position: relative;
}

.feed-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  pointer-events: none;
  will-change: opacity, transform;
  isolation: isolate;
}

/* Exact reverse of bottom .tabbar::before gradient */
.feed-chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 0) 100%);
}

body.theme-light .feed-chrome::before {
  background: linear-gradient(to bottom,
    #fff 0%,
    #fff 56%,
    rgba(255, 255, 255, 0.7) 80%,
    rgba(255, 255, 255, 0) 100%);
}

.feed-chrome .feed-header,
.feed-chrome .ftab {
  pointer-events: auto;
}

.feed-chrome .ftab {
  border-radius: 10px;
}

.feed-header {
  background: transparent;
  padding: 0 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.feed-tabs {
  display: flex;
  gap: 10px;
  padding: 2px 0 12px;
  overflow: hidden;
}

.feed-head-fade {
  display: none;
}

.feed {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 86px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Play mode locks scroll via demo-interactive-lock.js; Try it yourself keeps native scroll */
body.interactive .feed {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.feed-scroll {
  padding: 4px 12px 0;
  padding-top: var(--feed-nav-spacer, 120px);
}

.feed::-webkit-scrollbar {
  display: none;
}

/* Bottom tabbar gradient (icons stay full strength) */
.screen-feed > .tabbar {
  background: transparent !important;
  isolation: isolate;
}

.screen-feed > .tabbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 38%,
    #000 62%,
    #000 100%);
}

body.theme-light .screen-feed > .tabbar::before {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 38%,
    #fff 62%,
    #fff 100%);
}