#npm-chat-page .npm-swipe-hint,
#npm-chat-page .npm-edge-hint { display: none; }

@media (max-width: 680px), (pointer: coarse) and (max-width: 1100px) {
  #npm-chat-page .npm-swipe-hint {
    display: block; position: fixed; left: 50%; bottom: max(5px, calc(env(safe-area-inset-bottom, 0px) - 10px)); z-index: 2;
    width: 2.5rem; height: 0.25rem; margin-left: -1.25rem; border-radius: 999px;
    background: var(--npm-text-muted); opacity: .55; pointer-events: none;
    animation: npm-hint-up 2.6s var(--npm-side-ease) 1.4s 3;
  }
  #npm-chat-page[data-npm-app] .npm-edge-hint {
    display: block; position: fixed; top: 50%; right: 3px; z-index: 2;
    width: 0.25rem; height: 2.5rem; margin-top: -1.25rem; border-radius: 999px;
    background: var(--npm-text-muted); opacity: .45; pointer-events: none;
    animation: npm-hint-left 2.6s var(--npm-side-ease) 1.4s 3;
  }
  #npm-chat-page:not([data-npm-sidebar="collapsed"]) .npm-swipe-hint,
  #npm-chat-page:not([data-npm-sidebar="collapsed"]) .npm-edge-hint { visibility: hidden; }
}

@keyframes npm-hint-up { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(-0.375rem); } }
@keyframes npm-hint-left { 0%, 60%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.375rem); } }

@media (prefers-reduced-motion: reduce) {
  #npm-chat-page .npm-swipe-hint,
  #npm-chat-page .npm-edge-hint { animation: none; }
}