/* Stack the existing EDA panels so they cannot squeeze the mobile canvas to zero. */
@media (max-width: 640px) {
  #root > .h-screen {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  #root > .h-screen > .h-10 {
    overflow-x: auto;
    flex-shrink: 0;
  }
  #root > .h-screen > .h-10 > * { flex-shrink: 0; }
  #root > .h-screen > .flex-1.flex {
    flex-direction: column;
    overflow: visible;
  }
  #root > .h-screen > .flex-1.flex > .w-56 {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
  }
  #root > .h-screen > .flex-1.flex > .flex-1.flex-col {
    min-height: 640px;
    flex-shrink: 0;
  }
  #root > .h-screen > .flex-1.flex > .flex-1.flex-col > .flex-1.relative {
    min-height: 300px;
  }
}

/* 3B: give React Flow a real measurable height and allow touch scrolling. */
@media (max-width:640px) {
 html, body { overflow:auto !important; height:auto !important; }
 #root > .h-screen > .flex-1.flex > .flex-1.flex-col { height:640px; flex:none; }
 #root > .h-screen > .flex-1.flex > .flex-1.flex-col > .flex-1.relative { height:360px; min-height:360px; flex:none; }
}