html,
body,
#root {
  height: 100%;
  min-height: 0;
}

body {
  overflow: hidden;
}

.visitor-page {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.visitor-page > .visitor-conversation {
  grid-row: 2;
}

.visitor-page > .visitor-composer {
  grid-row: 3;
}

.visitor-page:has(> .service-announcement),
.visitor-page:has(> .service-degradation-notice) {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.visitor-page:has(> .service-announcement) > .service-announcement,
.visitor-page:has(> .service-degradation-notice) > .service-degradation-notice {
  grid-row: 2;
}

.visitor-page:has(> .service-announcement) > .visitor-conversation,
.visitor-page:has(> .service-degradation-notice) > .visitor-conversation {
  grid-row: 3;
}

.visitor-page:has(> .service-announcement) > .visitor-composer,
.visitor-page:has(> .service-degradation-notice) > .visitor-composer {
  grid-row: 4;
}

.visitor-page:has(> .service-announcement):has(> .service-degradation-notice) {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.visitor-page:has(> .service-announcement):has(> .service-degradation-notice)
  > .service-degradation-notice {
  grid-row: 3;
}

.visitor-page:has(> .service-announcement):has(> .service-degradation-notice)
  > .visitor-conversation {
  grid-row: 4;
}

.visitor-page:has(> .service-announcement):has(> .service-degradation-notice)
  > .visitor-composer {
  grid-row: 5;
}

.visitor-conversation {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.visitor-composer {
  max-height: min(45dvh, 360px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.visitor-composer textarea {
  resize: none;
  overflow-y: auto;
}