/* BabloParty mobile polish: keep navigation feeling immediate and native-like. */

/* Internal scrollports should keep iOS momentum without chaining the whole page.
   touch-action must stay "manipulation": "pan-x" on a photo carousel / stories bar
   made a vertical swipe that starts on it do nothing (the page would not scroll). */
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: manipulation;
}

/* Route/auth fallbacks: do not show a blocking spinner while React loads a chunk/session. */
.min-h-screen.bg-background.flex.items-center.justify-center > svg.animate-spin.text-primary {
  display: none !important;
}

/* Message history loading should look like content arriving, not an app freeze. */
[data-testid="messages-thread-loading"] {
  min-height: 7rem;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 1rem 0.75rem !important;
}

[data-testid="messages-thread-loading"] > svg {
  display: none !important;
}

[data-testid="messages-thread-loading"]::before,
[data-testid="messages-thread-loading"]::after {
  content: "";
  display: block;
  height: 2.65rem;
  border-radius: 1.25rem;
  background: linear-gradient(90deg, hsl(var(--muted) / 0.58), hsl(var(--muted) / 0.32), hsl(var(--muted) / 0.58));
  background-size: 220% 100%;
  animation: bablo-content-shimmer 1.15s ease-in-out infinite;
}

[data-testid="messages-thread-loading"]::before {
  width: min(72%, 18rem);
  margin-right: auto;
}

[data-testid="messages-thread-loading"]::after {
  width: min(58%, 15rem);
  margin-left: auto;
}

/* Lazy-loaded game session: preserve the game surface and use a subtle skeleton card. */
[data-testid="games-hub-session"] [role="status"] {
  min-height: 10rem;
  padding: 1rem !important;
}

[data-testid="games-hub-session"] [role="status"] > svg {
  display: none !important;
}

[data-testid="games-hub-session"] [role="status"]::before {
  content: "";
  display: block;
  width: min(100%, 30rem);
  height: 9rem;
  border-radius: 1.75rem;
  border: 1px solid hsl(var(--primary) / 0.12);
  background:
    radial-gradient(circle at 18% 20%, hsl(var(--primary) / 0.12), transparent 34%),
    linear-gradient(90deg, hsl(var(--muted) / 0.62), hsl(var(--muted) / 0.34), hsl(var(--muted) / 0.62));
  background-size: auto, 220% 100%;
  animation: bablo-content-shimmer 1.15s ease-in-out infinite;
}

/* Messages inbox: Beta 1 lot 4 styles live with the component (mockup). */

@keyframes bablo-content-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-testid="messages-thread-loading"]::before,
  [data-testid="messages-thread-loading"]::after,
  [data-testid="games-hub-session"] [role="status"]::before {
    animation: none !important;
  }
}