html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  background-color: #ffffff;
}

/* iOS Safari viewport fix */
html {
  height: -webkit-fill-available;
}

body {
  display: flex;
  overflow: hidden;
  /* Additional iOS Safari height fix */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* 
 * Import Monaco editor's Codicon font - this is critical for icons
 * IMPORTANT: This font-face declaration MUST remain in global CSS.
 * Chrome does not apply @font-face rules properly when they're inside shadow DOM.
 * Do not move this to the sketch-monaco-view component despite it being used there.
 */
@font-face {
  font-family: "codicon";
  font-display: block;
  src: url("./monaco/min/vs/base/browser/ui/codicons/codicon/codicon.ttf")
    format("truetype");
}

/* Mobile viewport optimizations */
@media screen and (max-width: 768px) {
  html {
    font-size: 16px; /* Prevent iOS zoom */
  }
}