:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

/* Global mobile helpers */
@media (max-width:700px){
  html,body{height:100%;padding-left:var(--safe-left);padding-right:var(--safe-right);box-sizing:border-box}
  .desktop{width:375px;max-width:375px;margin:0 auto}
  .window,.floating-window{width:375px;max-width:calc(100vw - 16px);height:auto}
  .window .window-content, .window-body, .notepad .notepad-content{max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  body{background-attachment:scroll}
  .notepad{right:8px;left:auto}
}

/* Make images and iframes scale */
img, iframe, video{max-width:100%;height:auto}

/* Ensure notepad tab and controls are finger-friendly */
.notepad-tab, .notepad-titlebar button{touch-action:manipulation}

/* Focus visuals for accessibility */
:focus{outline:3px solid #ff6666;outline-offset:2px}