.navigation-feedback[hidden] { display: none; }
.navigation-feedback { pointer-events: none; }
.navigation-feedback-rail {
  position: fixed; inset: 0 0 auto; height: 3px; overflow: hidden;
  background: #27674918; z-index: 10001;
}
.navigation-feedback-rail::after {
  content: ""; display: block; width: 35%; height: 100%;
  background: var(--green, #276749);
  animation: navigation-feedback-progress 1.5s ease-in-out infinite;
}
.navigation-feedback-message {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 9px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px;
  border: 1px solid #c4dace; border-radius: 24px; background: #f3faf6; color: #195c42;
  box-shadow: 0 4px 18px #1a202c0d;
  font: 500 .85rem/1.6 "Aalim Urdu Sans", Georgia, serif; z-index: 10001;
}
.navigation-feedback-spinner {
  flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid #27674933;
  border-top-color: #276749; border-radius: 50%; animation: navigation-feedback-spin .8s linear infinite;
}
.navigation-click-received { outline: 2px solid #27674966; outline-offset: 2px; }
.navigation-feedback-error .navigation-feedback-rail,
.navigation-feedback-error .navigation-feedback-spinner { display: none; }
.navigation-feedback-error .navigation-feedback-message { color: #805019; border-color: #e7caa2; background: #fffaf1; }
@keyframes navigation-feedback-progress { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
@keyframes navigation-feedback-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .navigation-feedback-rail::after { animation: none; width: 100%; opacity: .6; }
  .navigation-feedback-spinner { animation: none; }
}