/* VibeGram — mobile / tablet responsiveness fixes.
   Kept in its own file on purpose: app.css is generated by Tailwind (npm run build:css) and is overwritten on rebuild.
   Everything structural is scoped below the `lg` breakpoint (1024px) so the desktop layout is untouched. */

/* `mx-auto` inside a flex column cancels stretch, so a page used to size itself to its widest word/table and push past the screen.
   (max-width classes such as max-w-6xl still apply, so centred desktop pages look exactly the same.) */
#main > * { width: 100%; }

/* ---------- 1. Stop long words / URLs / usernames from widening the page ---------- */
@media (max-width: 1023px) {
  html, body { max-width: 100%; overflow-x: clip; }
  #main { min-width: 0; overflow-wrap: anywhere; }


  /* flex/grid children may shrink below their content width (needed for truncate / wrapping) */
  #main :is([class*="max-w-"], .flex > *, .grid > *) { min-width: 0; }
  #main :is(.shrink-0, .flex-shrink-0) { min-width: auto; }
  /* inside modals only let things shrink when they actually hold truncating text (avoids crushing labels) */
  [role="dialog"] :is(div, a, span):has(> .truncate, > * > .truncate) { min-width: 0; }

  /* ...but avatars, icons, pills, badges, buttons and chips in scroll rows keep their size */
  :is(#main, [role="dialog"]) :is(img, svg, .rounded-full, .uppercase:is(.rounded, .rounded-md, .rounded-sm), button) { flex-shrink: 0; }
  :is(#main, [role="dialog"]) :is(.uppercase:is(.rounded, .rounded-full, .rounded-md, .rounded-sm), .whitespace-nowrap) { white-space: nowrap; }
  :is(#main, [role="dialog"]) :is(.overflow-x-auto, .no-scrollbar) > * { flex-shrink: 0; min-width: auto; }
  [role="dialog"] { overflow-wrap: break-word; }
  #main :is(img, video, canvas) { max-width: 100%; }
  #main .overflow-x-auto, [role="dialog"] .overflow-x-auto { max-width: 100%; }
}

/* ---------- 2. Dynamic viewport units: mobile browser URL bars no longer hide content ---------- */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
  .h-screen { height: 100dvh; }
  .max-h-\[92vh\] { max-height: 92dvh; }
  .max-h-\[90vh\] { max-height: 90dvh; }
  .max-h-\[85vh\] { max-height: 85dvh; }
  .max-h-\[80vh\] { max-height: 80dvh; }
}

/* ---------- 3. Phones: safe areas (notch / home indicator) ---------- */
@media (max-width: 767px) {
  header.fixed.top-0 { padding-top: env(safe-area-inset-top); height: calc(3.5rem + env(safe-area-inset-top)); }
  #main { padding-top: calc(3.5rem + env(safe-area-inset-top)); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  nav.fixed.bottom-0 { height: calc(3.5rem + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; max-width: 90vw; }
}

/* ---------- 4. Comments / post modal: full-height sheet on phones ----------
   media on top, scrolling comments in the middle, like-bar + input pinned at the bottom */
@media (max-width: 767px) {
  .cm-card { height: calc(100dvh - 1rem); max-height: none !important; }
  .cm-media { flex: 0 0 auto; min-height: 0 !important; max-height: 32dvh !important; }
  .cm-media img, .cm-media video { max-height: 32dvh !important; height: auto; width: 100%; object-fit: contain; }
  .cm-side { flex: 1 1 0; height: auto !important; max-height: none !important; min-height: 0; min-width: 0; overflow-wrap: break-word; }
  .cm-side #cm-list { flex: 1 1 0; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .cm-side .flex > * { min-width: 0; }
  .cm-side form { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .cm-side input[type="text"] { font-size: 16px; } /* stops iOS zooming into the field */
}

/* ---------- 5. Chat + Reels: fill exactly the space between top bar and bottom nav ----------
   (the old `100vh - 6rem` ignored both fixed bars, the safe areas and the mobile browser chrome) */
@media (max-width: 767px) {
  #main:has(#msgs), #main:has(.reel-card) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  #msgs, #main [class*="h-[calc(100vh-6rem)]"] {
    height: calc(100dvh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  .reel-card { width: min(100%, calc((100dvh - 8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)); }
  #msgs input[type="text"], #msgs textarea { font-size: 16px; }
}

/* ---------- 6. Create-post modal on phones ----------
   The Post / Reel / Story / Live switcher in the header is `hidden sm:flex`, so on a phone there was no way to choose what to post.
   .vg-sw-m is the phone version (a row under the header, upload step only). */
.vg-sw-m { display: none; }
@media (max-width: 639px) {
  .vg-sw-m { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(128, 128, 128, .25); flex: none; }
  .vg-sw-m > * { flex: 1; text-align: center; padding: 9px 0; border: 0; border-radius: 10px; font-size: 13px; font-weight: 700; background: rgba(128, 128, 128, .13); color: #737373; }
  .vg-sw-m > .on { background: #262626; color: #fff; }
  html.dark .vg-sw-m > .on { background: #fff; color: #000; }
  .vg-sw-m > .live { color: #ef4444; }
}
@media (max-width: 767px) {
  /* card fills the screen; preview on top, options below get the rest and scroll (was squeezed to a sliver) */
  #cr > div { height: calc(100dvh - 1.5rem); max-height: none !important; }
  #cr .vg-cr-media { flex: 0 0 36%; min-height: 130px; }
  #cr .vg-cr-panel { flex: 1 1 0; min-height: 0; -webkit-overflow-scrolling: touch; }
  #cr input[type="text"], #cr textarea, .vg-edit input[type="text"], .vg-edit textarea { font-size: 16px; }   /* stops iOS zooming into the field */
}
/* owner's "Edit" pencil in the post pop-up must not sit under the pop-up's close (X) button */
@media (max-width: 1100px) { .vg-edit-btn { margin-right: 40px; } }

/* ---------- 7. Hidden / cut-off content fixes (tablet + phone) ---------- */
/* Page headers ("title block" + action buttons) switch to a row at 640px, but next to the 256px sidebar a tablet only has ~500px,
   so buttons ran off the right edge and were clipped. Let the row and its button group wrap instead. */
@media (max-width: 1279px) {
  #main :is(.sm\:flex-row, .md\:flex-row, .lg\:flex-row).justify-between { flex-wrap: wrap; }
  #main :is(.sm\:flex-row, .md\:flex-row, .lg\:flex-row).justify-between > .flex { flex-wrap: wrap; min-width: 0; max-width: 100%; }
}
@media (max-width: 1023px) {
  /* long banner labels (e.g. "ADMIN COMMENT MODERATION & SAFETY CENTER") may wrap instead of being cut off */
  #main .bg-gradient-to-r span.uppercase { white-space: normal; display: inline-block; max-width: 100%; }
  /* Tables: keep their natural width and scroll sideways inside their own box (they were squeezed to a few letters per column) */
  #main .overflow-x-auto > table { min-width: max-content; }
  #main table :is(th, td) { overflow-wrap: normal; word-break: normal; }
  #main table th { white-space: nowrap; }
  #main table td .truncate { max-width: 14rem; }
}

/* ---------- 8. Horizontal strips (admin tabs etc.): visible thin scrollbar + fade at the edge that has more content ---------- */
.vg-tabs { scrollbar-width: thin; scrollbar-color: rgba(155, 155, 155, .45) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; position: relative; }
.vg-tabs.vg-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }

/* ---------- Reels: let JS handle vertical swipes (no page scroll / pull-to-refresh while swiping the card) ---------- */
.reel-card { touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#main:has(.reel-card) { overscroll-behavior-y: contain; }