/* Keep the IDE frame symmetric, viewport-bound and free of stray blue dividers. */
html:has(body.hdlforge-ide-active),
body.hdlforge-ide-active{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}

/* The React app is inside #root, so size the real app/layout chain explicitly. */
body.hdlforge-ide-active #root{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active #root>.app{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.hdlforge-ide-active #root>.app>.nav{
  display:none!important;
}
body.hdlforge-ide-active #root>.app>.layout,
body.hdlforge-ide-active .layout:has(.ide-page){
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex:1 1 auto!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.hdlforge-ide-active .layout:has(.ide-page) .main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body.hdlforge-ide-active .ide-page{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding-left:8px!important;
  padding-right:8px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar{
  flex:0 0 50px!important;
}
body.hdlforge-ide-active .ide-page .ide-body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  flex:1 1 auto!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active .ide-page .ide-problem,
body.hdlforge-ide-active .ide-page .ide-workspace{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active .ide-page .editor-shell,
body.hdlforge-ide-active .ide-page .editor-wrap,
body.hdlforge-ide-active .ide-page .monaco-editor-wrap,
body.hdlforge-ide-active .ide-page .monaco-editor-stage{
  min-height:0!important;
}
body.hdlforge-ide-active .ide-page .editor-shell,
body.hdlforge-ide-active .ide-page .editor-wrap,
body.hdlforge-ide-active .ide-page .monaco-editor-wrap{
  flex:1 1 auto!important;
}

/* Visible neutral problem-statement scrollbar. */
body.hdlforge-ide-active .ide-page .ide-problem-content{
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  scrollbar-gutter:stable!important;
  scrollbar-width:auto!important;
  scrollbar-color:#666 #262626!important;
}
body.hdlforge-ide-active .ide-page .ide-problem-content::-webkit-scrollbar{
  display:block!important;
  width:10px!important;
  height:0!important;
}
body.hdlforge-ide-active .ide-page .ide-problem-content::-webkit-scrollbar-track{
  background:#262626!important;
}
body.hdlforge-ide-active .ide-page .ide-problem-content::-webkit-scrollbar-thumb{
  background:#666!important;
  border:2px solid #262626!important;
  border-radius:999px!important;
}
body.hdlforge-ide-active .ide-page .ide-problem-content::-webkit-scrollbar-thumb:hover{
  background:#7a7a7a!important;
}
body.hdlforge-ide-active .ide-page .ide-problem-content::-webkit-scrollbar-corner{
  background:#262626!important;
}

/* The splitter keeps a wide hit area but shows only a small neutral handle. */
body.hdlforge-ide-active .ide-page .ide-panel-resizer::before{
  display:none!important;
  opacity:0!important;
}
body.hdlforge-ide-active .ide-page .ide-panel-resizer span{
  display:block!important;
  visibility:visible!important;
  width:4px!important;
  height:34px!important;
  min-width:4px!important;
  min-height:34px!important;
  border:0!important;
  border-radius:999px!important;
  background:#5b5b5b!important;
  color:transparent!important;
  box-shadow:none!important;
  opacity:.9!important;
  font-size:0!important;
}
body.hdlforge-ide-active .ide-page .ide-panel-resizer:hover span,
body.hdlforge-ide-active .ide-page .ide-panel-resizer.dragging span{
  width:5px!important;
  min-width:5px!important;
  background:#777!important;
  color:transparent!important;
  opacity:1!important;
}

/* NeetCode-style console resize affordance: drag the top edge; double-click it to collapse/restore. */
body.hdlforge-ide-active .ide-page .ide-bottom{
  position:relative!important;
  flex-shrink:0!important;
}
body.hdlforge-ide-active .ide-page .ide-bottom::before{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  top:4px!important;
  left:50%!important;
  width:34px!important;
  height:4px!important;
  border-radius:999px!important;
  background:#5b5b5b!important;
  transform:translateX(-50%)!important;
  opacity:.85!important;
  pointer-events:none!important;
}
body.hdlforge-ide-active .ide-page .ide-bottom:hover::before,
body.ide-console-resizing.hdlforge-ide-active .ide-page .ide-bottom::before{
  background:#777!important;
  opacity:1!important;
}

@media(max-width:950px){
  html:has(body.hdlforge-ide-active),
  body.hdlforge-ide-active{
    height:auto!important;
    min-height:100dvh!important;
    overflow:auto!important;
  }
  body.hdlforge-ide-active #root,
  body.hdlforge-ide-active #root>.app,
  body.hdlforge-ide-active #root>.app>.layout,
  body.hdlforge-ide-active .layout:has(.ide-page),
  body.hdlforge-ide-active .layout:has(.ide-page) .main,
  body.hdlforge-ide-active .ide-page{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.hdlforge-ide-active .ide-page .ide-body{
    height:auto!important;
    overflow:visible!important;
  }
}


/* Route-level IDE viewport lock.
   The React app lives under #root, so target the real DOM chain directly.
   This prevents the normal site header height and .main top padding from
   reserving empty space above the problem editor. */
body.hdlforge-ide-active #root > .app > .nav{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
body.hdlforge-ide-active #root > .app > .layout{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active #root > .app > .layout > .main{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
}
body.hdlforge-ide-active #root > .app > .layout > .main > .ide-page{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding-top:0!important;
  box-sizing:border-box!important;
}