/* Safe mobile-only layout guard. CSS only: no routing, no click interception, no DOM mutation. */
@media (max-width: 640px) {
  html, body, #root { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  section, main, header, footer { max-width: 100%; }

  /* Generic card/grid containment: keep desktop multi-column blocks from overflowing in WeChat. */
  .grid, [class*="grid-cols-"], [class*="sm:grid-cols-"], [class*="md:grid-cols-"], [class*="lg:grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [class*="max-w-"] { max-width: calc(100vw - 24px) !important; }
  [class*="min-w-"] { min-width: 0 !important; }
  [class*="w-["], [class*="min-h-["], [class*="h-["] { max-width: 100% !important; }

  /* Book/home intro areas: prevent cover or decorative panels from pushing beyond viewport. */
  [data-yiyu-section*="book"],
  [data-yiyu-section-title*="书"],
  [data-yiyu-section-title*="会员"],
  [data-yiyu-section-title*="图书"] {
    overflow-x: hidden !important;
  }
  [data-yiyu-section*="book"] * { max-width: 100%; }

  /* Dialogs/modals: mobile WeChat must always be closable and scrollable. */
  [role="dialog"],
  [aria-modal="true"],
  .fixed.inset-0 [class*="rounded"],
  .fixed [class*="max-w-"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .fixed.inset-0 {
    padding: 12px !important;
  }

  /* Buttons and pills should wrap instead of forcing horizontal scroll. */
  button, a { max-width: 100%; }
  [class*="gap-"] { row-gap: .75rem; }
}