@media (max-width: 899px) and (pointer: coarse) {
  html:has(#feed:not([hidden])) {
    overscroll-behavior-y: contain;
  }

  #feed {
    position: relative;
  }

  #feed .feed-layout {
    transition: transform 180ms ease-out;
  }

  #feed.note-pull-active .feed-layout {
    transform: translateY(var(--note-pull-offset, 0px));
    transition: none;
  }

  #feed.note-pull-refreshing .feed-layout {
    transform: translateY(39px);
  }

  .note-pull-indicator {
    position: absolute;
    z-index: 2;
    top: 5px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    box-shadow: 0 5px 18px #23264a14;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .note-pull-indicator[hidden] {
    display: none !important;
  }

  .note-pull-spinner {
    width: 14px;
    height: 14px;
    flex: none;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
  }

  #feed.note-pull-refreshing .note-pull-spinner {
    animation: note-pull-spin 850ms linear infinite;
  }

  @keyframes note-pull-spin {
    to { transform: rotate(360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #feed .feed-layout { transition: none; }
  #feed.note-pull-refreshing .note-pull-spinner { animation: none; }
}