/* Mobile layer for Creative Studio — turns the desktop 3-column app into a touch-friendly layout. */
#mobile-panel-toggle{display:none;position:fixed;right:16px;bottom:86px;z-index:6100;width:56px;height:56px;
  border-radius:50%;border:none;cursor:pointer;background:#2a2a2a;color:#fff;font-size:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);align-items:center;justify-content:center}
#mobile-panel-toggle:active{transform:scale(.94)}
#mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:5500;display:none}
@media (max-width:820px){
  html,body{overflow:hidden;max-width:100%}
  /* top menus never overflow the screen */
  #menubar,.menubar,#topbar,.top-bar,.app-header,#header,.menu-bar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  /* right panel slides in as a drawer instead of eating the screen */
  #right-panel{position:fixed!important;top:0;right:0;height:100%;width:min(88vw,330px);z-index:6000;
    transform:translateX(101%);transition:transform .25s ease}
  body.panel-open #right-panel{transform:translateX(0);box-shadow:-10px 0 30px rgba(0,0,0,.55)}
  body.panel-open #mobile-backdrop{display:block}
  /* canvas takes the full width */
  #canvas-container,#main-container>#canvas-container{flex:1 1 auto;width:auto!important;min-width:0}
  /* bigger, finger-friendly controls */
  #mobile-panel-toggle{display:flex}
  .panel-tab{padding:13px 3px!important;font-size:11px!important;min-height:46px}
  #toolbar{overflow-y:auto;overflow-x:hidden}
  #toolbar button,#toolbar .tool-btn,#toolbar .tool-button{min-height:40px}
  .panel-section input,.panel-section select,.panel-section button{min-height:38px;font-size:15px}
}
@media (max-width:480px){
  :root{--toolbar-width:40px}
  #right-panel{width:100%}
}