/* Mobile layer for Creative Studio — turns the desktop 3-column app into a touch-friendly layout.
   Everything is gated behind @media (max-width:820px); desktop is untouched. */
#mobile-panel-toggle{display:none;position:fixed;right:14px;bottom:64px;z-index:6100;width:56px;height:56px;
  border-radius:50%;border:none;cursor:pointer;background:#0078d4;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.45);align-items:center;justify-content:center}
#mobile-panel-toggle:active{transform:scale(.94)}
#mobile-panel-toggle svg{pointer-events:none}
#mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:5500;display:none}

@media (max-width:820px){
  :root{--menu-height:44px;--options-height:44px;--status-height:22px;--toolbar-width:48px}
  html,body{overflow:hidden;max-width:100%;height:100dvh}
  #main-container{height:calc(100dvh - var(--menu-height) - var(--options-height) - var(--status-height))}
  /* faster, more reliable taps everywhere */
  button,.menu-item,.tool-btn,.panel-tab,.menu-action,.color-swatch{touch-action:manipulation}

  /* top menus never overflow the screen */
  #menubar,.menubar,#topbar,.top-bar,.app-header,#header,.menu-bar,
  #menu-bar,#tool-options-bar,#tool-options-content{overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;white-space:nowrap;max-width:100vw}
  #menu-bar::-webkit-scrollbar,#tool-options-bar::-webkit-scrollbar,#tool-options-content::-webkit-scrollbar{display:none;height:0}
  #menu-bar .menu-item,#tool-options-bar .tool-option,#tool-options-content>*{flex:0 0 auto}
  #menu-bar .menu-item{padding:11px 12px;min-height:44px;display:flex;align-items:center}
  #menu-bar .app-title{display:none} /* free up space for the actual menus */
  #tool-options-bar{align-items:center}

  /* dropdown menus stay on screen and are finger-friendly */
  .dropdown-menu{max-width:calc(100vw - 12px);max-height:65dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu-action{min-height:44px;align-items:center}

  /* LEFT toolbar: slim scrollable rail with 44px tap targets */
  #toolbar{width:var(--toolbar-width);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-shrink:0}
  #toolbar::-webkit-scrollbar{display:none;width:0}
  #toolbar .tool-btn{width:44px;height:44px;flex-shrink:0}
  #toolbar .tool-divider{margin:2px 0}
  #toolbar-colors{padding:6px 2px}

  /* canvas takes the remaining width */
  #canvas-container,#main-container>#canvas-container{flex:1 1 auto;width:auto!important;min-width:0}

  /* right panel slides in as a drawer instead of eating the screen */
  #right-panel{position:fixed!important;top:0;right:0;height:100dvh;width:min(88vw,330px);z-index:6000;
    transform:translateX(101%);transition:transform .25s ease;border-left:none}
  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}
  #mobile-panel-toggle{display:flex;bottom:calc(var(--status-height) + 46px)}
  body.panel-open #mobile-panel-toggle{right:calc(min(88vw,330px) + 10px)}
  .panel-tab{padding:13px 3px!important;font-size:11px!important;min-height:46px}
  .panel-content{-webkit-overflow-scrolling:touch;padding-bottom:40px}
  .panel-section input,.panel-section select,.panel-section button{min-height:38px;font-size:15px}

  /* compact status bar that never overlaps the canvas */
  #status-bar{height:var(--status-height);font-size:10px;gap:10px;padding:0 8px;
    overflow:hidden;white-space:nowrap}
  #status-doc-info,#status-size{display:none}

  /* dialogs fit the phone screen */
  .dialog{min-width:0!important;width:calc(100vw - 20px);max-width:calc(100vw - 20px);
    max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .dialog input,.dialog select,.dialog button{min-height:40px}

  /* shape flyout stays on screen */
  #shape-picker-container{left:calc(var(--toolbar-width) + 4px)!important;max-width:calc(100vw - var(--toolbar-width) - 12px)}

  /* ---- clean RIGHT-EDGE action bar: panels / AI / web / keyboard, evenly spaced, no overlaps ---- */
  #mobile-panel-toggle{right:12px!important;bottom:14px!important;width:50px!important;height:50px!important}
  #bbai{right:13px!important;bottom:74px!important}   /* wrapper holds the ✨ button */
  #bbai-b{width:50px!important;height:50px!important}
  #bbws-btn{right:13px!important;left:auto!important;bottom:136px!important;width:50px!important;height:50px!important}
  #vkb-btn{right:13px!important;left:auto!important;bottom:198px!important}
  #bbacct{left:12px!important;bottom:12px!important}
  /* while a panel drawer is open, hide the floating buttons so they don't sit over it */
  body.panel-open #bbai-b,body.panel-open #bbws-btn,body.panel-open #vkb-btn{display:none!important}
  /* keep the layer dock minimal on phones so the panel list stays scannable */
  #panel-layers.layers-dock{max-height:38%!important}
}

@media (max-width:480px){
  /* keep a sliver of the workspace visible even with the panel open */
  #right-panel{width:min(86vw,320px)}
  body.panel-open #mobile-panel-toggle{right:calc(min(86vw,320px) + 8px);z-index:6200}
}

/* Bigger, finger-friendly selection-mode + option buttons on phones/tablets */
@media (max-width:820px){
  #marquee-options button { min-width: 44px; height: 42px; font-size: 20px; margin: 0 2px; }
  #marquee-options #sel-fill,#marquee-options #sel-mask,#marquee-options #sel-mask-layer,
  #marquee-options #sel-delete,#marquee-options #sel-deselect { font-size: 13.5px; padding: 0 12px; }
  #gradient-options select { height: 40px; font-size: 15px; }
  #gradient-options input[type=color] { width: 40px; height: 36px; }
}