/* Mystiques Design Studio — consistent vertical scrolling */
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
}
body{
  min-height:100%;
  overscroll-behavior-y:auto;
}

/* Make scrollable areas obvious and easy to drag on desktop. */
.editor-left,
.editor-right,
.editor-main,
.market-side,
.market-main,
.market-right,
.account-side,
.account-main,
.admin-nav,
.admin-panel,
.modalcard,
#pngLibraryResults{
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  overscroll-behavior:contain;
}

@media (min-width:981px){
  #editorPage.active .editor-left,
  #editorPage.active .editor-right,
  #editorPage.active .editor-main{
    overflow-y:scroll !important;
  }
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar,
.editor-left::-webkit-scrollbar,
.editor-right::-webkit-scrollbar,
.editor-main::-webkit-scrollbar,
.market-side::-webkit-scrollbar,
.market-main::-webkit-scrollbar,
.market-right::-webkit-scrollbar,
.account-side::-webkit-scrollbar,
.account-main::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar,
.admin-panel::-webkit-scrollbar,
.modalcard::-webkit-scrollbar,
#pngLibraryResults::-webkit-scrollbar{
  width:14px;
  height:14px;
}
html::-webkit-scrollbar-track,
.editor-left::-webkit-scrollbar-track,
.editor-right::-webkit-scrollbar-track,
.editor-main::-webkit-scrollbar-track,
.market-side::-webkit-scrollbar-track,
.market-main::-webkit-scrollbar-track,
.market-right::-webkit-scrollbar-track,
.account-side::-webkit-scrollbar-track,
.account-main::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track,
.admin-panel::-webkit-scrollbar-track,
.modalcard::-webkit-scrollbar-track,
#pngLibraryResults::-webkit-scrollbar-track{
  background:#f3efe7;
  border-left:1px solid #e2d7c3;
}
html::-webkit-scrollbar-thumb,
.editor-left::-webkit-scrollbar-thumb,
.editor-right::-webkit-scrollbar-thumb,
.editor-main::-webkit-scrollbar-thumb,
.market-side::-webkit-scrollbar-thumb,
.market-main::-webkit-scrollbar-thumb,
.market-right::-webkit-scrollbar-thumb,
.account-side::-webkit-scrollbar-thumb,
.account-main::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb,
.admin-panel::-webkit-scrollbar-thumb,
.modalcard::-webkit-scrollbar-thumb,
#pngLibraryResults::-webkit-scrollbar-thumb{
  background:#9a7a42;
  border:3px solid #f3efe7;
  border-radius:999px;
  min-height:44px;
}
html::-webkit-scrollbar-thumb:hover,
.editor-left::-webkit-scrollbar-thumb:hover,
.editor-right::-webkit-scrollbar-thumb:hover,
.editor-main::-webkit-scrollbar-thumb:hover,
.market-side::-webkit-scrollbar-thumb:hover,
.market-main::-webkit-scrollbar-thumb:hover,
.market-right::-webkit-scrollbar-thumb:hover,
.account-side::-webkit-scrollbar-thumb:hover,
.account-main::-webkit-scrollbar-thumb:hover,
.admin-nav::-webkit-scrollbar-thumb:hover,
.admin-panel::-webkit-scrollbar-thumb:hover,
.modalcard::-webkit-scrollbar-thumb:hover,
#pngLibraryResults::-webkit-scrollbar-thumb:hover{
  background:#6f562f;
}

/* On touch/mobile, keep normal document scrolling rather than trapping panels. */
@media (max-width:980px){
  .editor-left,.editor-right,.editor-main,
  .market-side,.market-main,.market-right,
  .account-side,.account-main,.admin-nav,.admin-panel{
    overflow:visible !important;
    max-height:none !important;
  }
}


/* Browse Templates left category rail */
@media (min-width:981px){
  #templatesPage.active .market-side{
    overflow:hidden !important;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  #templatesPage.active .market-side > h3,
  #templatesPage.active .market-side > .sidecat[data-cat="All"]{
    flex:0 0 auto;
  }
  #templatesPage.active #sideCats{
    flex:1 1 auto;
    min-height:0;
    overflow-y:scroll;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:4px;
    margin-right:-4px;
  }
  #templatesPage.active #sideCats::-webkit-scrollbar{width:14px}
  #templatesPage.active #sideCats::-webkit-scrollbar-track{
    background:#f3efe7;
    border-left:1px solid #e2d7c3;
    border-radius:999px;
  }
  #templatesPage.active #sideCats::-webkit-scrollbar-thumb{
    background:#9a7a42;
    border:3px solid #f3efe7;
    border-radius:999px;
    min-height:44px;
  }
  #templatesPage.active #sideCats::-webkit-scrollbar-thumb:hover{background:#6f562f}
  #templatesPage.active #sideCats{scrollbar-width:auto;scrollbar-color:#9a7a42 #f3efe7}
}


/* Persistent AI left-panel scrollbar */
@media (min-width:981px){
  #aiPage.active .ai-shell{
    align-items:start;
  }
  #aiPage.active .ai-builder{
    position:sticky !important;
    top:86px !important;
    max-height:calc(100vh - 104px) !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:14px;
  }
  #aiPage.active .ai-builder::-webkit-scrollbar{width:14px}
  #aiPage.active .ai-builder::-webkit-scrollbar-track{
    background:#f3efe7;
    border-left:1px solid #e2d7c3;
    border-radius:999px;
  }
  #aiPage.active .ai-builder::-webkit-scrollbar-thumb{
    background:#9a7a42;
    border:3px solid #f3efe7;
    border-radius:999px;
    min-height:48px;
  }
  #aiPage.active .ai-builder::-webkit-scrollbar-thumb:hover{background:#6f562f}
  #aiPage.active .ai-builder{scrollbar-width:auto;scrollbar-color:#9a7a42 #f3efe7}
}