/* The document ID makes this state outrank component pointer/text cursors.
   No overlay: scrolling, links and cancellation stay available while loading. */
#portal-document[data-portal-busy="true"],
#portal-document[data-portal-busy="true"] * {
  cursor: progress;
}

/* Direct body child: shell transforms/overflow do not clip the status badge.
   Above the mobile menu's 3200 layer. Native modal dialogs retain the top layer.
   The badge never captures input or changes the page's layout. */
.portal-busy-indicator {
  position: fixed;
  z-index: 3300;
  top: calc(env(safe-area-inset-top) + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(113, 183, 255, 0.45);
  border-radius: 999px;
  background: #0b1424;
  color: #f4faf7;
  font: 0.875rem/1.25 'Glacial Indifference', 'Segoe UI', sans-serif;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  /* Brief requests should not flash a badge; finishing hides it immediately.
     No [hidden]/display:none transition: visibility and opacity share the delay. */
  transition: opacity 0s, visibility 0s;
}

.portal-busy-indicator * { pointer-events: none; }

.portal-busy-indicator__ring {
  /* A 1.25rem ring sits beside one text line; 2px keeps the arc legible. */
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  box-sizing: border-box;
  border: 2px solid rgba(99, 255, 214, 0.25);
  border-top-color: #63ffd6;
  border-radius: 50%;
  animation: portal-busy-spin 0.8s linear infinite paused;
}

#portal-document[data-portal-busy="true"] .portal-busy-indicator {
  visibility: visible;
  opacity: 1;
  transition-delay: 150ms;
}

#portal-document[data-portal-busy="true"] .portal-busy-indicator__ring {
  animation-play-state: running;
}

@keyframes portal-busy-spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .portal-busy-indicator {
    /* The shared mobile header is 4.25rem tall; leave its controls visible. */
    top: calc(env(safe-area-inset-top) + 4.25rem + 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-busy-indicator__ring { animation: none; }
}