/* Keep every page within a centered 21:9 viewport, including fixed controls. */
:root {
  --site-max-width: calc(100vh * 21 / 9);
  --site-gutter: max(0px, calc((100% - var(--site-max-width)) / 2));
}

/* Allow longer English copy to wrap without widening mobile creator pages. */
html[lang="en"] .cc-main-column,
html[lang="en"] .cc-right-column,
html[lang="en"] .cc-hero > div:first-child {
  min-width: 0;
}

@media (max-width: 650px) {
  html[lang="en"] .account-shell .cc-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html[lang="en"] .cc-hero {
    height: auto;
    min-height: 163px;
  }
  html[lang="en"] .cc-hero p {
    white-space: normal;
  }
  html[lang="en"] .cc-hero-art {
    display: none;
  }
  html[lang="en"] .cc-section-heading {
    flex-wrap: wrap;
  }
  html[lang="en"] .cc-welcome > div {
    flex: 1 1 190px;
    min-width: 0;
  }
  html[lang="en"] .cc-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[lang="en"] .center-switch {
    flex-shrink: 1;
    min-width: 0;
  }
  html[lang="en"] .center-switch a {
    white-space: normal;
    text-align: center;
  }
  html[lang="en"] .creator-mode .nav-shell,
  html[lang="en"] .nav-shell:has(.center-switch) {
    gap: 8px;
  }
  html[lang="en"] .nav-shell:has(.center-switch) .nav-actions {
    flex-shrink: 0;
    margin-left: auto;
  }
  html[lang="en"] .nav-shell:has(.center-switch) .lili-admin-entry {
    font-size: 10px;
    max-width: 70px;
    white-space: normal;
  }
}

@supports (height: 100dvh) {
  :root {
    --site-max-width: calc(100dvh * 21 / 9);
  }
}

body,
body.room-page {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: var(--site-max-width);
  margin-inline: auto;
}

@media (min-aspect-ratio: 21/9) {
  .side-nav,
  .directory-sidebar,
  .cc-sidebar,
  .sidebar,
  .channel-drawer {
    left: var(--site-gutter);
  }

  .live-header {
    left: var(--site-gutter);
    right: var(--site-gutter);
  }

  .floating-tools { right: calc(var(--site-gutter) + 6px); }
  .directory-to-top { right: calc(var(--site-gutter) + 11px); }
  .directory-skip { left: calc(var(--site-gutter) + 20px); }
  .room-page .room-back-top { right: calc(var(--site-gutter) + 9px); }
  .tv-back-top { right: calc(var(--site-gutter) + 12px); }
  .back-top { right: calc(var(--site-gutter) + 16px); }

  /* Enforce this shared cap over page-specific physical max-width rules. */
  body dialog {
    max-inline-size: min(calc(100vw - 32px), calc(var(--site-max-width) - 24px)) !important;
  }

  body .comment-image-dialog img,
  body .cm-image-dialog img,
  #tvCommentsHost .comment-image-dialog img {
    max-inline-size: min(calc(100vw - 60px), calc(var(--site-max-width) - 60px)) !important;
  }
}