/* R.ai: Prevent scroll during animation + mobile app-shell sizing */
html.rai-animating,
body.rai-animating {
  overflow: hidden !important;
}

/* Mobile Safari: treat the widget like a full-screen app so the page footer/nav
   can't scroll over the composer and iOS fixed-position quirks are avoided. */
@media (max-width: 768px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  /* Keep site navigation usable and always visible above the widget */
  nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
  }

  /* During the arrival animation, the widget renders a full-viewport overlay.
     The navbar should not appear above that intro. */
  html.rai-animating nav.navbar,
  body.rai-animating nav.navbar {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }

  #rai-embed {
    /* Tell the widget to size to this fixed container (not the full viewport). */
    --rai-mobile-widget-height: 100%;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--rai-nav-height, 72px);
    z-index: 99999;
  }

  /* If the mobile menu expands, allow it to scroll within the viewport */
  nav.navbar .navbar-collapse {
    max-height: calc(100vh - var(--rai-nav-height, 72px));
    max-height: calc(100dvh - var(--rai-nav-height, 72px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide the site footer on mobile since the chat widget goes full-screen */
  footer,
  .footer,
  .site-footer {
    display: none !important;
  }
}