html[data-support-viewport],
html[data-support-viewport] body {
  height: 100%;
  overflow: hidden;
}

html[data-support-viewport] #root {
  position: fixed;
  top: var(--support-viewport-top, 0px);
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--support-viewport-height, 100dvh);
  min-height: 0;
}

/* The upstream Safari rule uses 100dvh, which does not account for keyboards. */
html[data-support-viewport="chat"] .chat-page {
  height: 100% !important;
}

html[data-support-viewport="chat"] .chat-navbar,
html[data-support-viewport] .ChatFooter {
  flex-shrink: 0;
}

html[data-support-viewport] .ChatFooter {
  box-sizing: border-box;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

/* The agent shell also has an inline 100vh height. */
html[data-support-viewport="agent"] .ant-pro-layout,
html[data-support-viewport="agent"] .ant-pro-layout > .ant-layout {
  height: 100% !important;
  min-height: 0 !important;
}