/*
 * ANT-SYS-2026-0828-005
 * Full-site viewport fit and compact visual-card rules.
 * Loaded after the legacy bundle so this remains a reversible presentation-only layer.
 */

html,
body.clean-ui {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.clean-ui {
  overflow-x: hidden;
}

body.clean-ui .app-shell,
body.clean-ui .main,
body.clean-ui .topbar,
body.clean-ui .view-root,
body.clean-ui .view-root > * {
  min-width: 0;
  max-width: 100%;
}

body.clean-ui .app-shell,
body.clean-ui .main,
body.clean-ui .view-root {
  width: 100%;
}

body.clean-ui:not(.agent-canvas-focus-mode):not(.agent-canvas-window-mode) .main {
  overflow-x: clip;
}

body.clean-ui:not(.agent-canvas-focus-mode):not(.agent-canvas-window-mode)
  :where(img, video, iframe) {
  max-width: 100%;
}

/*
 * A compact canvas grid previously used auto-fit with a flexible 1fr maximum.
 * With one team canvas this made a single 16:9 thumbnail expand to the entire
 * content width (1577 x 887 at a 1920px viewport). Keep cards compact instead.
 */
body.clean-ui .personal-canvas-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(260px, 360px));
  align-items: start;
  justify-content: start;
}

body.clean-ui .personal-canvas-grid.compact > .personal-canvas-card {
  width: 100%;
  max-width: 360px;
}

body.clean-ui .personal-canvas-grid.compact .personal-canvas-cover :is(img, video) {
  width: 100%;
  height: auto;
  max-height: 203px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Other media collections should retain useful card-sized tracks when sparse. */
body.clean-ui .case-gallery-grid,
body.clean-ui .reading-image-grid:not(.prompt-media-section .reading-image-grid) {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* The editor shell follows the usable browser viewport, including mobile bars. */
body.agent-canvas-focus-mode,
body.agent-canvas-window-mode,
body.agent-canvas-focus-mode .app-shell,
body.agent-canvas-window-mode .app-shell,
body.agent-canvas-focus-mode .main,
body.agent-canvas-window-mode .main,
body.agent-canvas-focus-mode .view-root,
body.agent-canvas-window-mode .view-root,
body.agent-canvas-focus-mode .ant-agent-canvas-panel,
body.agent-canvas-window-mode .ant-agent-canvas-panel,
body.agent-canvas-focus-mode .ant-agent-canvas-layout,
body.agent-canvas-window-mode .ant-agent-canvas-layout,
body.agent-canvas-focus-mode .ant-agent-canvas-stage,
body.agent-canvas-window-mode .ant-agent-canvas-stage {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
}

@supports (height: 100dvh) {
  body.agent-canvas-focus-mode,
  body.agent-canvas-window-mode,
  body.agent-canvas-focus-mode .app-shell,
  body.agent-canvas-window-mode .app-shell,
  body.agent-canvas-focus-mode .main,
  body.agent-canvas-window-mode .main,
  body.agent-canvas-focus-mode .view-root,
  body.agent-canvas-window-mode .view-root,
  body.agent-canvas-focus-mode .ant-agent-canvas-panel,
  body.agent-canvas-window-mode .ant-agent-canvas-panel,
  body.agent-canvas-focus-mode .ant-agent-canvas-layout,
  body.agent-canvas-window-mode .ant-agent-canvas-layout,
  body.agent-canvas-focus-mode .ant-agent-canvas-stage,
  body.agent-canvas-window-mode .ant-agent-canvas-stage {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
  }
}

body.agent-canvas-focus-mode .ant-agent-canvas-panel,
body.agent-canvas-window-mode .ant-agent-canvas-panel,
body.agent-canvas-focus-mode .ant-agent-canvas-stage,
body.agent-canvas-window-mode .ant-agent-canvas-stage {
  overflow: hidden;
}

body.clean-ui.agent-canvas-focus-mode,
body.clean-ui.agent-canvas-window-mode,
body.clean-ui.agent-canvas-focus-mode .app-shell,
body.clean-ui.agent-canvas-window-mode .app-shell,
body.clean-ui.agent-canvas-focus-mode .main,
body.clean-ui.agent-canvas-window-mode .main,
body.clean-ui.agent-canvas-focus-mode .view-root,
body.clean-ui.agent-canvas-window-mode .view-root,
body.clean-ui.agent-canvas-focus-mode .ant-agent-canvas-panel,
body.clean-ui.agent-canvas-window-mode .ant-agent-canvas-panel,
body.clean-ui.agent-canvas-focus-mode .ant-agent-canvas-layout,
body.clean-ui.agent-canvas-window-mode .ant-agent-canvas-layout,
body.clean-ui.agent-canvas-focus-mode .ant-agent-canvas-stage,
body.clean-ui.agent-canvas-window-mode .ant-agent-canvas-stage {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

@media (min-width: 901px) and (max-width: 1450px) {
  body.agent-canvas-focus-mode .ant-agent-team-bar,
  body.agent-canvas-window-mode .ant-agent-team-bar {
    right: 12px;
    left: auto;
    width: min(800px, calc(100% - 360px));
    transform: none;
  }

  body.agent-canvas-focus-mode .ant-help-center-canvas-button,
  body.agent-canvas-window-mode .ant-help-center-canvas-button {
    top: 82px;
  }
}

@media (max-width: 900px) {
  body.clean-ui .personal-canvas-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 360px));
  }

  body.agent-canvas-focus-mode .ant-agent-team-bar,
  body.agent-canvas-window-mode .ant-agent-team-bar {
    top: max(56px, calc(44px + env(safe-area-inset-top)));
  }

  body.agent-canvas-focus-mode .ant-help-center-canvas-button,
  body.agent-canvas-window-mode .ant-help-center-canvas-button {
    top: 172px;
  }
}

@media (max-width: 760px) {
  body.clean-ui .personal-canvas-grid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  body.clean-ui .personal-canvas-grid.compact > .personal-canvas-card {
    max-width: none;
  }

  body.clean-ui .personal-canvas-grid.compact .personal-canvas-cover :is(img, video) {
    max-height: min(56vw, 280px);
  }

  body.clean-ui .case-gallery-grid,
  body.clean-ui .reading-image-grid:not(.prompt-media-section .reading-image-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}