/* Winston mobile PWA viewport/overflow fixes.
   The app shell is built with Tailwind's h-screen (100vh). On iOS/Android PWAs,
   100vh can include browser/safe-area UI, which pushes the composer below the
   visible window and makes the page feel like it scrolls in every direction. */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
  }

  .max-h-\[90vh\] {
    max-height: 90dvh;
  }

  .max-h-\[60vh\] {
    max-height: 60dvh;
  }

  .h-\[calc\(100vh-160px\)\] {
    height: calc(100dvh - 160px);
  }
}

html,
body,
#root {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
}

body {
  position: fixed;
  inset: 0;
  margin: 0;
  touch-action: pan-y;
}

#root > .h-screen {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  margin-inline: auto;
}

main,
main > div,
.flex-1 {
  min-width: 0;
  min-height: 0;
}

main {
  width: 100%;
  max-width: 100vw;
}

.max-w-\[80\%\],
.max-w-3xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg,
.max-w-md,
.max-w-sm,
.max-w-xs {
  min-width: 0;
}

.prose,
.prose-sm,
pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].p-3,
.border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].px-4 {
  padding-left: max(.75rem, env(safe-area-inset-left));
  padding-right: max(.75rem, env(safe-area-inset-right));
}

.border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].p-3 {
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

.border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].p-3 > .mx-auto,
.border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].px-4 > .mx-auto,
[data-radix-scroll-area-viewport] > div,
.mx-auto.max-w-3xl {
  max-width: min(48rem, 100%);
}

@media (max-width: 640px) {
  .flex-1.overflow-y-auto.px-4.py-6 {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .mx-auto.mb-4.flex.w-full.max-w-3xl {
    gap: .5rem;
  }

  .mx-auto.mb-4.flex.w-full.max-w-3xl > .max-w-\[80\%\] {
    max-width: calc(100% - 2.5rem);
  }
}

/* iOS Safari/PWA: when the software keyboard opens, a fixed body combined with
   100dvh can leave the app sized against the layout viewport instead of the
   visible viewport. Keep the app in normal flow on phones so the composer can
   resize/reposition with the visual viewport instead of overflowing sideways. */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    position: static;
    min-height: 100%;
    overflow: hidden;
    touch-action: manipulation;
  }

  #root > .h-screen {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: 100dvh;
    max-height: none;
  }

  .border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].p-3,
  .border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].px-4 {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].p-3 > .mx-auto,
  .border-t.border-\[var\(--color-border\)\].bg-\[var\(--color-bg\)\].px-4 > .mx-auto {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  textarea[name="input"] {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
}