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

/* Internal scrollports should keep iOS momentum without chaining the whole page. */
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

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

/* 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 — compact social-app rhythm on phone-sized viewports. */
@media (max-width: 767px) {
  [data-testid="messages-play-chrome"] {
    background: hsl(var(--background)) !important;
    border-bottom-color: hsl(var(--border) / 0.55) !important;
  }

  [data-testid="messages-play-chrome"] > div:first-child {
    padding: 0.7rem 1rem 0.45rem !important;
  }

  [data-testid="messages-play-chrome"] > div:first-child h1 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }

  [data-testid="messages-play-chrome"] > div:first-child p {
    margin-top: 0.1rem;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    opacity: 0.72;
  }

  [data-testid="messages-play-chrome"] > div:first-child button {
    width: 2.25rem !important;
    height: 2.25rem !important;
    background: hsl(var(--muted) / 0.58) !important;
  }

  /* Keep only the useful chat sub-tabs visually prominent. */
  [data-testid="messages-play-chrome"] > div:last-child {
    gap: 0.15rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  [data-testid="messages-play-chrome"] > div:last-child button {
    min-height: 2.7rem;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.82rem !important;
  }

  [data-testid="inbox-conversation"] {
    min-height: 4.35rem;
    gap: 0.75rem !important;
    padding: 0.55rem 1rem !important;
    -webkit-tap-highlight-color: transparent;
  }

  [data-testid="inbox-conversation"]:active {
    background: hsl(var(--muted) / 0.38) !important;
  }

  [data-testid="inbox-conversation"] .h-11.w-11,
  [data-testid="inbox-conversation"] > .relative > .h-11.w-11,
  [data-testid="inbox-conversation"] > .w-11.h-11 {
    width: 3rem !important;
    height: 3rem !important;
  }

  [data-testid="inbox-conversation"] p.font-semibold {
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
  }

  [data-testid="inbox-conversation"] p.text-\[13px\] {
    margin-top: 0.18rem !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  [data-testid="inbox-conversation"] span.text-\[11px\] {
    font-size: 0.66rem !important;
    opacity: 0.82;
  }
}

@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;
  }
}