/* Keep Settings and Screen Share stable as tabs, sources and devices change. */
:is(
  [role="dialog"][aria-label="Налаштування WCasting"],
  [role="dialog"][aria-label="Демонстрація екрана"]
) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem
    calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

:is(
  [role="dialog"][aria-label="Налаштування WCasting"],
  [role="dialog"][aria-label="Демонстрація екрана"]
) > div {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  translate: none;
  margin: 0;
  width: 100%;
  height: 600px;
  max-height: calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* Header, tabs and footer stay outside the scrolling content. */
:is(
  [role="dialog"][aria-label="Налаштування WCasting"],
  [role="dialog"][aria-label="Демонстрація екрана"]
) > div > div {
  flex-shrink: 0;
}

:is(
  [role="dialog"][aria-label="Налаштування WCasting"],
  [role="dialog"][aria-label="Демонстрація екрана"]
) > div > .flex-1.overflow-y-auto {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}