/* React-specific overrides to keep the legacy CSS look.
   Keep this file for small React-only fixes, but avoid overriding `.browser-frame`
   transforms—centering is handled by the legacy CSS + react-draggable `positionOffset`. */

/* The legacy site assumes the top-level viewport container fills the screen.
   In React, `#root` needs this explicitly now that we removed Vite's default global CSS. */
#root {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* React-draggable moves elements with CSS transforms. The legacy `.browser-frame` centers the window
   using `top/left` + `transform: translate(...)`, which clashes with react-draggable and causes the
   element to snap to (0,0) when bounds are enforced. In React, we compute the initial centered x/y
   in JS and let react-draggable fully own transforms. */
.browser-frame {
  top: 0;
  left: 0;
  transform: none;
}

/* Intentionally minimal: avoid fighting legacy `.browser-frame` positioning.
   We use react-draggable `positionOffset` to preserve the legacy centering while dragging. */