/* Main window container - Fixed spacing and proper vertical stacking */
.window {
  margin: var(--p1);
  /* padding: var(--p1); */
  width: calc(100vw - var(--p1) * 2);
  height: calc(100vh - var(--p1) * 2);
  overflow-y: auto;
  position: absolute;
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out; /* Add transition */
}

#sidebar-container.open ~ .window {
  margin-left: calc(var(--sidebar-desktop-width) + var(--p2));
  width: calc(100vw - var(--sidebar-desktop-width) - var(--p1) * 3);
}

#sidebar-container:not(.open) ~ .window {
    margin-left: var(--p1);
    /* The width will implicitly transition back to the base .window rule's width */
}

@media (max-width: 768px) {
  .window {
    margin: 0 !important;
    padding-bottom: calc(var(--sidebar-header-height) + var(--p1)) !important;
    width: 100vw !important;
    height: 100vh !important;
    transition: none; /* Disable transition on mobile where layout is different */
  }
}