/* self.systems chat widget viewport correction.
   JavaScript updates these values from window.visualViewport. */
:root {
  --self-cmp-viewport-width: 100vw;
  --self-cmp-viewport-height: 100vh;
  --self-cmp-viewport-top: 0px;
  --self-cmp-viewport-left: 0px;
}

/* The vendor stylesheet uses 100vw/100vh. Use the visual viewport instead so
   the full-screen modal follows the actually visible WebView area. */
#cmp-base.room-modal,
#cmp-base .room-modal {
  top: var(--self-cmp-viewport-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--self-cmp-viewport-left) !important;
  width: var(--self-cmp-viewport-width) !important;
  max-width: var(--self-cmp-viewport-width) !important;
  height: var(--self-cmp-viewport-height) !important;
  max-height: var(--self-cmp-viewport-height) !important;
}

/* Keep the grid itself inside the modal. Scrolling remains on the widget's
   scenario-history element rather than on the entire chat window. */
#cmp-base.room-modal .chat-window,
#cmp-base .room-modal .chat-window {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The root widget is also 100vw wide in the vendor mobile rules. */
@media screen and (max-width: 766px) {
  #cmp-base {
    width: var(--self-cmp-viewport-width) !important;
    max-width: var(--self-cmp-viewport-width) !important;
  }
}

/* The vendor switches to its desktop grid at a layout viewport width of
   767px. If the visual viewport is actually narrower, JavaScript adds this
   class so the widget keeps the compact layout used below that breakpoint. */
.self-cmp-compact-viewport #cmp-base {
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--self-cmp-viewport-width) !important;
  max-width: var(--self-cmp-viewport-width) !important;
}

.self-cmp-compact-viewport #cmp-base.room-modal .chat-window,
.self-cmp-compact-viewport #cmp-base .room-modal .chat-window {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  border-radius: 0 !important;
  --chat-gutter: 12px;
}

/* The sidebar is a desktop-only column and can consume most of a narrow
   landscape WebView. */
.self-cmp-compact-viewport #cmp-base .room-modal .left-sidebar {
  display: none !important;
}

.self-cmp-compact-viewport #cmp-base.room-modal .header,
.self-cmp-compact-viewport #cmp-base .room-modal .header {
  width: 100% !important;
  height: 40px !important;
}

.self-cmp-compact-viewport #cmp-base .room-modal .scenario-history {
  flex: 1 1 auto !important;
  width: calc(100% - 24px) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.self-cmp-compact-viewport #cmp-base.room-modal .question,
.self-cmp-compact-viewport #cmp-base .room-modal .question {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.self-cmp-compact-viewport #cmp-base .room-modal .input-form__content {
  width: calc(100% - 24px) !important;
}