/* Ayster v120.1 — final iPhone social fit patch
   Keeps the app inside the viewport while preserving intentional horizontal carousels. */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
body { min-width: 0 !important; }

@media (max-width: 760px) {
  .social-utility,
  .social-layout,
  .main-col,
  .stories,
  .composer,
  .post-card,
  .ayster-reviews {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .social-utility,
  .social-layout {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .story-row,
  .reel-strip {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  .story,
  .reel-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  .compose-top,
  .compose-actions,
  .post-actions,
  .comment-form {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .compose-top textarea,
  .comment-form input {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #aysterV69BottomNav {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #aysterV69BottomNav a,
  #aysterV69BottomNav a span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}