/* Mobile chrome reuses the existing canvas actions and save state. */
#vjtop-ref .canvas-empty-hint,
#vjtop-ref #mobileCanvasMoreToggle,
#vjtop-ref #canvasUndoButton { display:none; }
#vjtop-ref .canvas-touch-help { display:none; }
#vjtop-ref .mobile-node-menu,
#vjtop-ref .mobile-prompt-node-menu,
#vjtop-ref .mobile-node-menu-header { display:none; }
@media(pointer:coarse) {
  #vjtop-ref .canvas-touch-help { display:block; margin:12px 0; color:#c9c9c9; font-size:14px; line-height:1.7; }
}
#vjtop-ref #mobileCanvasMore {
  position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom,0px));
  width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); margin:0 auto;
  overflow:auto; padding:16px; border:1px solid #3b3b3b; border-radius:20px;
  background:#1c1c1e; color:#eee; box-shadow:0 16px 48px #0008;
}
#vjtop-ref #mobileCanvasMore::backdrop { background:#0007; }
#vjtop-ref #mobileCanvasMore header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#vjtop-ref #mobileCanvasMore h2 { margin:0; font-size:16px; }
#vjtop-ref #mobileCanvasMore button { min-height:48px; border:1px solid #39393c; border-radius:12px; background:#29292c; color:#eee; font-size:14px; }
#vjtop-ref #mobileCanvasMore [data-mobile-close] { display:grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px; padding:0; gap:0; line-height:1; background:transparent; }
#vjtop-ref #mobileCanvasMore button:focus-visible { outline:2px solid #cfabff; outline-offset:2px; }
#vjtop-ref .mobile-canvas-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media(max-width:720px) {
  #vjtop-ref.workflow-mode .mobile-prompt-node-menu { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:10px; color:#ddd; background:transparent; }
  #vjtop-ref.workflow-mode .node.selected > .mobile-node-menu {
    position:absolute; display:grid; place-items:center; z-index:12; right:0;
    top:calc(-48px * var(--canvas-inverse-zoom,1)); transform:scale(var(--canvas-inverse-zoom,1)); transform-origin:top right;
    width:44px; height:44px; padding:0; border:1px solid #454545; border-radius:12px; background:#222; color:#eee;
  }
  #vjtop-ref.workflow-mode .node.selected > .node-type-label { max-width:calc(100% - 48px * var(--canvas-inverse-zoom,1)); overflow:hidden; white-space:nowrap; }
  #vjtop-ref.workflow-mode .node img { -webkit-touch-callout:none; }
  #vjtop-ref.workflow-mode #contextMenu {
    position:fixed; inset:auto 12px max(12px,env(safe-area-inset-bottom,0px)) !important;
    width:auto; max-width:none; max-height:calc(100dvh - 88px); padding:12px; border-radius:20px;
    overflow:auto; overscroll-behavior:contain; background:#1c1c1e;
  }
  #vjtop-ref.workflow-mode .mobile-node-menu-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  #vjtop-ref.workflow-mode .mobile-node-menu-header button { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; }
  #vjtop-ref.workflow-mode #contextMenu kbd { display:none; }
  #vjtop-ref.workflow-mode #contextMenu :is(#contextNodeActions,#contextAddActions):not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #vjtop-ref.workflow-mode #contextMenu [data-context-action] { min-height:44px; padding:10px; border:1px solid #39393c; border-radius:12px; background:#29292c; font-size:14px; }
  #vjtop-ref.workflow-mode #contextMenu .context-menu-divider { grid-column:1/-1; margin:2px 0; }
  #vjtop-ref.workflow-mode #contextMenu [data-context-action="delete"] { grid-column:1/-1; color:#ffaaa5; }
  #vjtop-ref.workflow-mode .video-prompt-panel.prompt-editor-v2 {
    height:min(361.4px,var(--image-panel-available-height,361.4px)); min-height:0;
    max-height:var(--image-panel-available-height,361.4px);
  }
  #vjtop-ref.workflow-mode .video-prompt-panel.prompt-editor-v2 .prompt-rich-editor { font-size:16px; }
  #vjtop-ref.workflow-mode .video-prompt-panel.prompt-editor-v2 .video-control-bar { flex-wrap:nowrap; align-items:flex-start; }
  #vjtop-ref.workflow-mode .video-prompt-panel.prompt-editor-v2 .prompt-compose-settings { flex:1 1 0; align-items:flex-start; }
  #vjtop-ref.workflow-mode .video-prompt-panel.prompt-editor-v2 .generation-action-group { align-self:flex-start; }
  #vjtop-ref.workflow-mode .topbar { height:64px; padding:8px 12px; flex-wrap:nowrap; gap:56px; }
  #vjtop-ref.workflow-mode .canvas-selector { flex:1; min-width:0; }
  #vjtop-ref.workflow-mode .workspace-pill { width:100%; height:48px; min-height:48px; padding:1px 4px; gap:3px; }
  #vjtop-ref.workflow-mode .workspace-logo-button { flex:none; justify-content:center; width:44px; height:44px; }
  #vjtop-ref.workflow-mode .workspace-icon { width:28px; }
  #vjtop-ref.workflow-mode .workspace-brand-logo { width:28px; }
  #vjtop-ref.workflow-mode .workspace-title { font-size:13px; }
  #vjtop-ref.workflow-mode .workspace-project-control { flex:1; width:auto; min-width:0; }
  #vjtop-ref.workflow-mode .workspace-project-label,
  #vjtop-ref.workflow-mode .workspace-project-rename { width:100%; height:44px; min-width:0; padding:0 4px; font-size:13px; }
  #vjtop-ref.workflow-mode .workspace-project-rename { font-size:16px; }
  #vjtop-ref.workflow-mode .workspace-canvas-label { flex:none; min-width:44px; height:44px; padding:0 5px; font-size:12px; }
  #vjtop-ref.workflow-mode .workspace-canvas-label .ui-icon { width:16px; height:16px; }
  #vjtop-ref.workflow-mode .top-right { flex:none; margin:0; }
  #vjtop-ref.workflow-mode .top-right .header-credit-summary { display:none; }
  #vjtop-ref.workflow-mode .top-right.is-authenticated .user-login-button { width:48px; min-width:48px; height:48px; min-height:48px; }
  #vjtop-ref.workflow-mode .top-right.is-authenticated .header-member-avatar { width:40px; height:40px; flex-basis:40px; }
  #vjtop-ref.workflow-mode .floating-toolbar,
  #vjtop-ref.workflow-mode.agent-panel-open .floating-toolbar {
    display:flex; flex-direction:row; width:min(420px,calc(100vw - 24px)); height:64px; min-height:64px;
    max-width:calc(100vw - 24px); padding:6px; gap:8px; bottom:max(12px,env(safe-area-inset-bottom,0px));
    visibility:visible; pointer-events:auto;
    border:1px solid #393939; border-radius:20px; background:#1c1c1e; box-shadow:0 8px 24px #0005;
  }
  #vjtop-ref.workflow-mode .floating-toolbar > .toolbar-group { display:contents; }
  #vjtop-ref.workflow-mode .floating-toolbar > .divider,
  #vjtop-ref.workflow-mode .floating-toolbar :is(#canvasMusicTool,#canvasTextTool,#canvasUploadTool,#canvasShortcutsButton,#assetLibraryButton,#projectRailToggle,#canvasEditingDeskButton) { display:none; }
  #vjtop-ref.workflow-mode .floating-toolbar :is(.bottom-action,.canvas-agent-toggle) {
    display:flex; flex:1 1 0; flex-direction:column; justify-content:center; align-items:center; gap:3px;
    width:auto; height:50px; min-height:50px; min-width:44px; padding:3px; border-radius:12px;
  }
  #vjtop-ref.workflow-mode .floating-toolbar #canvasPointerTool.active { border-radius:12px; }
  #vjtop-ref.workflow-mode .floating-toolbar .bottom-action[data-mobile-label]::after,
  #vjtop-ref.workflow-mode .floating-toolbar .canvas-agent-toggle[data-mobile-label]::after {
    content:attr(data-mobile-label); position:static; display:block; padding:0; border:0;
    background:transparent; color:inherit; font-size:10px; line-height:14px; transform:none; opacity:1; visibility:visible; box-shadow:none;
  }
  #vjtop-ref.workflow-mode .floating-toolbar .canvas-agent-toggle > span { display:none; }
  #vjtop-ref.workflow-mode #mobileCanvasMoreToggle,
  #vjtop-ref.workflow-mode #canvasUndoButton { display:flex; }
  #vjtop-ref.workflow-mode #canvasUndoButton { font-size:24px; }
  #vjtop-ref.workflow-mode #mobileCanvasMoreToggle > span { height:22px; font-size:26px; line-height:12px; }
  #vjtop-ref.workflow-mode:not(.agent-panel-open) .canvas-utility-stack,
  #vjtop-ref.workflow-mode.agent-panel-open .canvas-utility-stack { top:10px; bottom:auto; right:68px; width:44px; max-width:44px; }
  #vjtop-ref.workflow-mode .canvas-utility-stack .canvas-utility-dock { height:auto; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  #vjtop-ref.workflow-mode .canvas-utility-dock > :is(.toolbar-group,.divider) { display:none; }
  #vjtop-ref.workflow-mode .canvas-save-details { margin:0; }
  #vjtop-ref.workflow-mode .canvas-save-state { width:44px; height:44px; padding:0; gap:0; background:#171717; }
  #vjtop-ref.workflow-mode #canvasSaveStateLabel { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #vjtop-ref.workflow-mode .canvas-utility-stack .canvas-save-explanation { top:calc(100% + 8px); bottom:auto; right:-56px; left:auto; }
  #vjtop-ref.workflow-mode .canvas-utility-stack .toast { position:fixed; top:auto; bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 76px); right:12px; left:auto; max-width:calc(100vw - 24px); }
  #vjtop-ref.workflow-mode .canvas-empty-actions { display:none; }
  #vjtop-ref.workflow-mode .canvas-empty-hint { display:block; text-align:center; }
  #vjtop-ref.workflow-mode .canvas-empty-hint strong { font-size:22px; font-weight:550; color:#e8e8e8; }
  #vjtop-ref.workflow-mode .canvas-empty-hint p { max-width:250px; margin:12px auto 0; font-size:13px; line-height:1.8; color:#929292; }
}
@media(max-width:359px) {
  /* Keep six 44px touch targets on the narrowest phones. */
  #vjtop-ref.workflow-mode .floating-toolbar,
  #vjtop-ref.workflow-mode.agent-panel-open .floating-toolbar { gap:3px; }
}