/* Previous 67% browser zoom is the new 100%.
   CSS `zoom` shrinks layout boxes, so 100vw/100dvh only cover 67% of the
   visual viewport (empty black + homepage leaking under the workbench).
   Invert the scale on the root and on fullscreen chrome so the UI fills
   the screen — especially the mobile chat + workbench surface.

   --site-vp-w / --site-vp-h are JS-measured (visualViewport / zoom) so they
   stay exact even when vw/dvh disagree with zoom. CSS calc is the fallback.

   This sheet must win over styles.css workbench-hero padding/height (border-box
   padding-top would otherwise clip the Harness OS dock). */
:root {
  --site-scale: 0.67;
  --site-unscale: calc(100 / 67);
  --site-vp-w: calc(100vw * var(--site-unscale));
  --site-vp-h: calc(100dvh * var(--site-unscale));
}

html {
  zoom: var(--site-scale);
  width: var(--site-vp-w) !important;
  min-width: var(--site-vp-w) !important;
  height: var(--site-vp-h) !important;
  min-height: var(--site-vp-h) !important;
}

body {
  width: 100%;
  min-height: var(--site-vp-h) !important;
}

body.workspace-page {
  overflow: hidden !important;
  height: var(--site-vp-h) !important;
  min-height: var(--site-vp-h) !important;
}

/* The standalone browser hides the menu bar and uses the entire viewport. */
html.is-browser-only body.workspace-page {
  --bar-h: 0px;
}
html.is-browser-only body.workspace-page #browserPane {
  visibility: visible;
  pointer-events: auto;
}

body.workspace-page .app-bar {
  width: var(--site-vp-w) !important;
  max-width: none !important;
}

/* Hero is border-box and already pads for the fixed app bar. Height must be
   the FULL unscaled viewport so padding-top does not steal dock space. */
body.workspace-page .workbench-hero {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-top: var(--bar-h) !important;
  min-height: var(--site-vp-h) !important;
  height: var(--site-vp-h) !important;
  overflow: hidden !important;
}

body.workspace-page .workbench,
body.workspace-page .workbench__grid {
  width: 100% !important;
  max-width: none !important;
  height: calc(var(--site-vp-h) - var(--bar-h)) !important;
  min-height: calc(var(--site-vp-h) - var(--bar-h)) !important;
}

html.is-webos-takeover,
html.is-webos-takeover body {
  width: var(--site-vp-w) !important;
  height: var(--site-vp-h) !important;
  min-height: var(--site-vp-h) !important;
  overflow: hidden !important;
  background: #111 !important;
}

html.is-webos-takeover #agentOs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--site-vp-w) !important;
  height: var(--site-vp-h) !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 900px) {
  html,
  body.workspace-page {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.workspace-page .workbench .agent-pane {
    width: 100% !important;
    height: 100% !important;
  }

  /* Fixed mobile panes must reserve the same menu/token-bar space as the
     workbench. Keep the offset and remaining height in unscaled CSS pixels. */
  body.workspace-page .workbench .repo-pane,
  body.workspace-page .workbench .preview-pane,
  body.workspace-page .workbench .editor-pane:not([hidden]) {
    inset: var(--bar-h) auto auto 0 !important;
    width: var(--site-vp-w) !important;
    height: calc(var(--site-vp-h) - var(--bar-h)) !important;
    max-width: none !important;
  }
}