/* PrivateCanvas Studio V3 responsive workspace — Pass 17G */
:root{
  --pc-rail:78px;
  --pc-tools:290px;
  --pc-stack:300px;
  --pc-gap:10px;
}
html,body{height:100%}
body{overflow:hidden}
body>nav{
  height:30px;box-sizing:border-box;padding:5px 10px!important;
  white-space:nowrap;overflow:auto;border-bottom:1px solid #2b3340
}
.topbar{height:52px;box-sizing:border-box;position:relative;z-index:80}
.workspace{
  display:grid!important;
  grid-template-columns:var(--pc-rail) var(--pc-tools) minmax(0,1fr) var(--pc-stack)!important;
  grid-template-areas:"rail tools canvas stack";
  gap:0!important;
  height:calc(100vh - 82px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.pc-v3-rail{
  grid-area:rail;background:#0c1119;border-right:1px solid #2c3441;
  padding:8px 6px;display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;z-index:20
}
.pc-v3-rail button{
  min-height:48px;padding:6px 3px;border-radius:9px;font-size:11px;
  line-height:1.15;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;white-space:normal
}
.pc-v3-rail button .pc-icon{font-size:18px;line-height:1}
.pc-v3-rail button.active{outline:2px solid #458ce8;background:#192b46}
.effects-panel{
  grid-area:tools!important;position:relative!important;inset:auto!important;
  width:auto!important;max-width:none!important;height:100%!important;
  overflow-y:auto!important;border-radius:0!important;border-right:1px solid #2c3441!important;
  padding:12px!important;display:block!important
}
.effects-panel.pc-v3-hidden{display:none!important}
.effects-panel>h2{margin-top:0}
.effects-panel .effect-group{display:none}
.effects-panel .effect-group.pc-v3-visible{display:block}
.pc-v3-tools-heading{
  position:sticky;top:-12px;z-index:4;background:#101620;
  margin:-12px -12px 10px;padding:10px 12px;border-bottom:1px solid #2c3441
}
.pc-v3-category-title{font-weight:700;font-size:15px}
.pc-v3-category-note{font-size:11px;opacity:.68;margin-top:3px}

.preview-panel{
  grid-area:canvas!important;min-width:0!important;min-height:0!important;
  height:100%!important;display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto!important;overflow:hidden!important
}
.canvas-wrap{
  position:relative!important;min-width:0!important;min-height:0!important;
  height:auto!important;overflow:auto!important;padding:24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important
}
#canvas{max-width:none!important;max-height:none!important;flex:0 0 auto}
#emptyState{pointer-events:none}
.statusbar{min-height:28px;box-sizing:border-box}
.pc-v3-context-host{
  max-height:0;overflow:hidden;background:#0f151e;border-top:0 solid #303846;
  transition:max-height .18s ease;border-radius:0
}
.pc-v3-context-host.open{max-height:34vh;overflow:auto;border-top-width:1px}
.pc-v3-context-head{
  position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:#111925;border-bottom:1px solid #303846
}
.pc-v3-context-title{font-weight:700}
.pc-v3-context-close{min-width:34px}
.pc-v3-context-body{padding:10px 12px}
.pc-v3-context-body>#pc-editor-tools,
.pc-v3-context-body>#pc-smart-pen-panel,
.pc-v3-context-body>#pc-ai-line-refine,
.pc-v3-context-body>#pc-torch-panel,
.pc-v3-context-body>#pc-selection-effects-panel{
  margin:0!important;border:0!important;padding:0!important;border-radius:0!important
}
.pc-v3-context-body>#pc-editor-tools>h2{display:none}
.pc-v3-context-body p{margin:6px 0}
.pc-v3-context-body h2,.pc-v3-context-body h3{margin:8px 0}

.stack-panel{
  grid-area:stack!important;position:relative!important;inset:auto!important;
  width:auto!important;max-width:none!important;height:100%!important;
  overflow-y:auto!important;border-radius:0!important;border-left:1px solid #2c3441!important;
  padding:12px!important;display:block!important
}
.stack-panel.pc-v3-hidden{display:none!important}

.pc-v3-section-tabs{
  display:flex;gap:5px;flex-wrap:wrap;margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid #303846
}
.pc-v3-section-tabs button.active{outline:2px solid #458ce8}
#pc-editor-tools.pc-v3-submode #pc-primary-transform-controls,
#pc-editor-tools.pc-v3-submode>p,
#pc-editor-tools.pc-v3-submode>#pc-layer-panel,
#pc-editor-tools.pc-v3-submode>#pc-lighting-panel{display:none}
#pc-editor-tools.pc-v3-submode[data-pc-sub="edit"] #pc-primary-transform-controls,
#pc-editor-tools.pc-v3-submode[data-pc-sub="edit"]>p{display:block}
#pc-editor-tools.pc-v3-submode[data-pc-sub="layers"]>#pc-layer-panel{display:block}
#pc-editor-tools.pc-v3-submode[data-pc-sub="lighting"]>#pc-lighting-panel{display:block}

.pc-v3-mobile-bar{display:none}
.pc-v3-backdrop{display:none}

@media (max-width:1180px) and (min-width:761px){
  :root{--pc-tools:250px;--pc-stack:250px;--pc-rail:68px}
  .pc-v3-rail button{font-size:10px}
  .top-actions .button{padding-left:7px!important;padding-right:7px!important}
}

@media (max-width:760px){
  body{overflow:hidden;padding-bottom:58px}
  body>nav{display:none}
  .topbar{
    height:52px!important;padding:6px 8px!important;
    position:relative!important;display:flex!important
  }
  .topbar .brand{font-size:13px}
  .top-actions{gap:4px!important}
  .top-actions #saveRecipeBtn{display:none}
  .top-actions .button{font-size:11px!important;padding:7px 8px!important}
  .workspace{
    display:block!important;height:calc(100vh - 110px)!important;overflow:hidden!important
  }
  .pc-v3-rail{display:none!important}
  .preview-panel{height:100%!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important}
  .canvas-wrap{padding:10px!important;align-items:center!important;justify-content:center!important}
  .statusbar{font-size:10px;padding:4px 8px!important}
  .effects-panel,.stack-panel,.pc-v3-context-host{
    position:fixed!important;left:0!important;right:0!important;bottom:58px!important;
    top:auto!important;width:auto!important;max-width:none!important;height:auto!important;
    max-height:64vh!important;overflow-y:auto!important;z-index:120!important;
    border:1px solid #394454!important;border-bottom:0!important;
    border-radius:16px 16px 0 0!important;display:none!important;
    box-shadow:0 -12px 32px rgba(0,0,0,.45)
  }
  .effects-panel.pc-mobile-open,.stack-panel.pc-mobile-open,
  .pc-v3-context-host.pc-mobile-open{display:block!important}
  .pc-v3-context-host.open{max-height:64vh!important}
  .pc-v3-context-head{border-radius:16px 16px 0 0}
  .pc-v3-mobile-bar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
    position:fixed;z-index:150;left:0;right:0;bottom:0;height:58px;
    padding:5px 7px calc(5px + env(safe-area-inset-bottom));
    background:#0b1018;border-top:1px solid #394454;box-sizing:border-box
  }
  .pc-v3-mobile-bar button{font-size:11px;padding:5px 2px}
  .pc-v3-mobile-bar button.active{outline:2px solid #458ce8;background:#192b46}
  .pc-v3-backdrop.active{
    display:block;position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.35)
  }
  #pcMobileDock{display:none!important}
  #canvas{touch-action:none}
}

/* ===== Pass 17G.1 geometry corrections ===== */
:root{
  --pc-rail:70px;
  --pc-tools:286px;
  --pc-stack:258px;
}

/* Desktop: the contextual tool surface belongs in column 2, not below canvas. */
@media (min-width:761px){
  .pc-v3-context-host{
    grid-area:tools!important;
    display:block!important;
    position:relative!important;
    height:100%!important;
    max-height:none!important;
    overflow:auto!important;
    border-top:0!important;
    border-right:1px solid #303846!important;
    background:#0f151e!important;
  }
  .pc-v3-context-host.open{max-height:none!important}
  .pc-v3-context-head{
    position:sticky!important;top:0!important;
    border-bottom:1px solid #303846!important;
  }
  .pc-v3-context-close{display:none!important}

  /* Effects and Context occupy the same grid slot, but only one is visible. */
  .effects-panel{grid-area:tools!important}
  .effects-panel.pc-v3-hidden{display:none!important}

  .preview-panel{
    grid-area:canvas!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  .preview-panel>.pc-v3-context-host{display:none!important}
  .preview-panel>.pc-v3-context-host.pc-v3-desktop-tools{
    display:block!important;
    position:absolute!important;
    left:calc(-1 * var(--pc-tools))!important;
    top:0!important;
    width:var(--pc-tools)!important;
    height:100%!important;
    z-index:18!important;
  }

  .canvas-wrap{
    padding:18px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .stack-panel{width:auto!important}
}

/* Slightly denser tool rail. */
.pc-v3-rail{padding-left:5px!important;padding-right:5px!important}
.pc-v3-rail button{min-height:45px!important;font-size:10.5px!important}

/* Context controls become vertical and readable in the desktop tool column. */
@media (min-width:761px){
  .pc-v3-context-body{padding:10px!important}
  .pc-v3-context-body input[type="number"]{max-width:82px}
  .pc-v3-context-body input[type="range"]{max-width:150px}
  .pc-v3-context-body button,.pc-v3-context-body select{margin:2px 1px}
  .pc-v3-section-tabs{display:grid!important;grid-template-columns:1fr!important}
  .pc-v3-section-tabs button{width:100%;text-align:left}
}

/* Collapsible right stack gives the canvas extra working width when desired. */
.pc-v3-stack-toggle{
  position:absolute;right:8px;top:8px;z-index:25;
  width:28px;height:28px;padding:0!important;border-radius:7px
}
body.pc-v3-stack-collapsed{
  --pc-stack:42px;
}
body.pc-v3-stack-collapsed .stack-panel{
  overflow:hidden!important;padding:6px!important
}
body.pc-v3-stack-collapsed .stack-panel>*:not(.pc-v3-stack-toggle){display:none!important}

/* Mobile remains canvas-first; context is a bottom sheet, never a side column. */
@media (max-width:760px){
  :root{--pc-rail:0px;--pc-tools:0px;--pc-stack:0px}
  .pc-v3-context-host.pc-v3-desktop-tools{
    position:fixed!important;left:0!important;right:0!important;bottom:58px!important;top:auto!important;
    width:auto!important;height:auto!important
  }
  .canvas-wrap{padding:8px!important}
}

/* ===== Pass 17G.2: real tools column + robust canvas fit ===== */
@media (min-width:761px){
  .workspace{
    grid-template-columns:70px 286px minmax(0,1fr) 258px!important;
    grid-template-areas:"rail tools canvas stack"!important;
  }

  /* Context is now a true workspace/grid child, not visually faked with a negative offset. */
  .pc-v3-context-host.pc-v3-desktop-tools{
    grid-area:tools!important;
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;height:100%!important;max-height:none!important;
    display:block!important;overflow:auto!important;
    z-index:18!important;border-right:1px solid #303846!important
  }

  .preview-panel>.pc-v3-context-host.pc-v3-desktop-tools{display:none!important}

  .effects-panel{
    grid-area:tools!important;
    position:relative!important;
    width:auto!important;height:100%!important
  }

  .preview-panel{
    grid-area:canvas!important;
    min-width:0!important;min-height:0!important;height:100%!important;
    overflow:hidden!important
  }

  .canvas-wrap{
    min-width:0!important;min-height:0!important;
    width:100%!important;height:100%!important;
    overflow:auto!important;
    padding:18px!important;
    box-sizing:border-box!important
  }

  #canvas{
    transform-origin:top left!important;
  }
}

/* Make the currently active object-selection state obvious. */
.pc-primary-transform-box.active{
  box-shadow:0 0 0 1px rgba(110,182,255,.35),0 0 18px rgba(22,133,229,.22)
}

/* Tool column headings should not disappear into a black empty pane. */
.pc-v3-context-host .pc-v3-context-head{
  min-height:44px;box-sizing:border-box
}
.pc-v3-context-host .pc-v3-context-body:empty:before{
  content:"Choose a tool from the rail.";
  display:block;padding:12px;opacity:.65
}

/* Compact the right panel slightly more on ordinary laptops. */
@media (min-width:761px) and (max-width:1400px){
  .workspace{
    grid-template-columns:66px 260px minmax(0,1fr) 238px!important;
  }
}

/* Mobile retains bottom sheets and never participates in desktop grid relocation. */
@media (max-width:760px){
  .pc-v3-context-host.pc-v3-desktop-tools{
    position:fixed!important;
    left:0!important;right:0!important;bottom:58px!important;top:auto!important;
    width:auto!important;height:auto!important;max-height:64vh!important
  }
}

/* ===== Pass 17H: workspace scroll/pan + interactive crop ===== */
.canvas-wrap{
  overflow:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
.canvas-wrap::-webkit-scrollbar{width:12px;height:12px}
.canvas-wrap::-webkit-scrollbar-track{background:#0d1219}
.canvas-wrap::-webkit-scrollbar-thumb{background:#3a4657;border-radius:8px;border:2px solid #0d1219}
.canvas-wrap::-webkit-scrollbar-corner{background:#0d1219}

.pc-workspace-stage{
  position:relative;
  flex:0 0 auto;
  min-width:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:20px;
}
.pc-workspace-stage.pc-stage-overflow{
  align-items:flex-start;
  justify-content:flex-start;
}

.pc-crop-overlay{
  position:absolute;
  display:none;
  z-index:65;
  border:2px solid #f5c542;
  box-shadow:0 0 0 9999px rgba(0,0,0,.42);
  pointer-events:none;
  box-sizing:border-box;
}
.pc-crop-overlay.active{display:block}
.pc-crop-overlay:before,
.pc-crop-overlay:after{
  content:"";
  position:absolute;
  left:33.333%;
  top:0;
  bottom:0;
  width:33.333%;
  border-left:1px dashed rgba(255,255,255,.45);
  border-right:1px dashed rgba(255,255,255,.45);
}
.pc-crop-overlay:after{
  left:0;top:33.333%;right:0;bottom:auto;
  width:auto;height:33.333%;
  border-left:0;border-right:0;
  border-top:1px dashed rgba(255,255,255,.45);
  border-bottom:1px dashed rgba(255,255,255,.45);
}
.pc-crop-handle{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:#f5c542;border:2px solid #fff;box-sizing:border-box;
}
.pc-crop-handle.nw{left:-7px;top:-7px}
.pc-crop-handle.ne{right:-7px;top:-7px}
.pc-crop-handle.sw{left:-7px;bottom:-7px}
.pc-crop-handle.se{right:-7px;bottom:-7px}

.canvas-wrap.pc-pan-active{cursor:grabbing!important}
.canvas-wrap.pc-pan-ready{cursor:grab}
.pc-workspace-hint{
  position:absolute;right:12px;bottom:10px;z-index:20;
  padding:5px 8px;border-radius:8px;
  background:rgba(8,12,18,.78);font-size:11px;opacity:.72;
  pointer-events:none
}

@media(max-width:760px){
  .canvas-wrap::-webkit-scrollbar{width:8px;height:8px}
  .pc-workspace-hint{font-size:10px;bottom:66px}
}

/* ===== Pass 17H.1: professional crop frame ===== */
.pc-crop-overlay{
  pointer-events:auto!important;
  cursor:move;
  touch-action:none;
}
.pc-crop-handle{
  pointer-events:auto;
  z-index:3;
}
.pc-crop-handle.n{left:50%;top:-7px;transform:translateX(-50%);cursor:ns-resize}
.pc-crop-handle.s{left:50%;bottom:-7px;transform:translateX(-50%);cursor:ns-resize}
.pc-crop-handle.w{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.pc-crop-handle.e{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.pc-crop-handle.nw{cursor:nwse-resize}
.pc-crop-handle.se{cursor:nwse-resize}
.pc-crop-handle.ne{cursor:nesw-resize}
.pc-crop-handle.sw{cursor:nesw-resize}

#pc-crop-pro-controls{
  margin:8px 0 10px;
  padding:8px;
  border:1px solid #344052;
  border-radius:8px;
  background:#0c121b;
  font-size:12px;
}
#pc-crop-pro-controls .pc-crop-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin:5px 0;
}
#pc-crop-pro-controls label{white-space:nowrap}
#pc-crop-pro-controls input[type="number"]{
  width:68px;
  min-width:58px;
}
#pc-crop-pro-controls .pc-crop-dims{
  font-variant-numeric:tabular-nums;
  opacity:.82;
}
#pc-crop-pro-controls .pc-crop-lock{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
#pc-crop-pro-controls button{margin:0}

.pc-crop-overlay[data-locked="1"]{
  border-color:#61d7ff;
}
.pc-crop-overlay[data-locked="1"] .pc-crop-handle{
  background:#61d7ff;
}

@media(max-width:760px){
  #pc-crop-pro-controls input[type="number"]{width:62px}
  .pc-crop-handle{width:16px;height:16px}
  .pc-crop-handle.nw{left:-9px;top:-9px}
  .pc-crop-handle.ne{right:-9px;top:-9px}
  .pc-crop-handle.sw{left:-9px;bottom:-9px}
  .pc-crop-handle.se{right:-9px;bottom:-9px}
  .pc-crop-handle.n{top:-9px}
  .pc-crop-handle.s{bottom:-9px}
  .pc-crop-handle.w{left:-9px}
  .pc-crop-handle.e{right:-9px}
}

/* ===== Pass 17H.9: single scroll owner / stable desktop ===== */
/* Geometry contract:
   .canvas-wrap        = the one and only scroll viewport
   .pc-workspace-stage = the large matte / desktop
   #canvas             = image render surface on that desktop
   overlays            = siblings of #canvas in the same desktop coordinate system
*/
.canvas-wrap{
  position:relative!important;
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:scroll!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges!important;
  background:#dfe3e8!important;
  background-image:none!important;
  align-items:initial!important;
  justify-content:initial!important;
}
.pc-workspace-stage{
  position:relative!important;
  display:block!important;
  flex:none!important;
  box-sizing:border-box!important;
  width:4200px!important;
  height:3200px!important;
  min-width:4200px!important;
  min-height:3200px!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:var(--pc-matte-color,#ffffff)!important;
  background-image:var(--pc-matte-texture,none)!important;
}
.pc-workspace-stage #canvas{
  position:absolute!important;
  margin:0!important;
  z-index:10!important;
  max-width:none!important;
  max-height:none!important;
  flex:none!important;
  transform-origin:top left!important;
  background-color:#fff!important;
  background-image:
    linear-gradient(45deg,#d7d7d7 25%,transparent 25%),
    linear-gradient(-45deg,#d7d7d7 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#d7d7d7 75%),
    linear-gradient(-45deg,transparent 75%,#d7d7d7 75%)!important;
  background-size:20px 20px!important;
  background-position:0 0,0 10px,10px -10px,-10px 0!important;
}
.pc-workspace-stage .pc-primary-transform-box{
  position:absolute!important;
  z-index:30!important;
}
.pc-workspace-stage .pc-crop-overlay{
  position:absolute!important;
  z-index:40!important;
}
.pc-workspace-stage #emptyState{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:20!important;
  pointer-events:none!important;
}
.canvas-wrap::-webkit-scrollbar{width:15px;height:15px}
.canvas-wrap::-webkit-scrollbar-track{background:#e7eaee}
.canvas-wrap::-webkit-scrollbar-thumb{
  background:#7b8796;
  border:2px solid #e7eaee;
  border-radius:9px;
  min-width:48px;
  min-height:48px;
}
.canvas-wrap::-webkit-scrollbar-corner{background:#e7eaee}
.canvas-wrap.pc-pan-ready{cursor:grab}
.canvas-wrap.pc-pan-active{cursor:grabbing!important}
#pcDesktopDebug{
  position:sticky;
  left:8px;
  top:8px;
  z-index:70;
  display:inline-flex;
  width:max-content;
  padding:4px 7px;
  border-radius:6px;
  font-size:10px;
  color:#24313c;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.10);
  pointer-events:none;
}
#pc-matte-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#pc-matte-controls select,#pc-matte-controls input[type="color"]{min-height:28px}
#pc-matte-controls input[type="color"]{width:34px;padding:1px;border-radius:5px}
#pc-matte-controls .pc-matte-label{opacity:.78;font-size:11px;white-space:nowrap}
#pc-matte-controls .pc-swatch{width:22px;height:22px;border-radius:5px;border:1px solid rgba(255,255,255,.25);cursor:pointer}
#pc-matte-controls .pc-swatch[data-color="#d8e7e3"]{background:#d8e7e3}
#pc-matte-controls .pc-swatch[data-color="#d9e3ef"]{background:#d9e3ef}
#pc-matte-controls .pc-swatch[data-color="#e5e7eb"]{background:#e5e7eb}
#pc-matte-controls .pc-swatch[data-color="#ffffff"]{background:#fff}
#pc-matte-controls .pc-swatch[data-color="#4b5563"]{background:#4b5563}
@media(max-width:760px){
  .pc-workspace-stage{
    width:2200px!important;
    height:2200px!important;
    min-width:2200px!important;
    min-height:2200px!important;
  }
  .canvas-wrap::-webkit-scrollbar{width:9px;height:9px}
  #pc-matte-controls .pc-matte-label{display:none}
}


/* ===== Pass 17H.10: viewport controller cleanup + left footer ===== */
/* Zoom now uses layout dimensions, never competing CSS scale transforms. */
.pc-workspace-stage #canvas{
  transform:none;
}

/* Give matte controls and brand footer actual room in the left/context column. */
#pc-matte-controls{
  margin-top:14px!important;
  margin-bottom:12px!important;
  padding:10px 4px 12px!important;
  border-top:1px solid #303846!important;
}
.pc-studio-brand-footer{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:8px 4px 0;
  padding:14px 6px 28px;
  min-height:92px;
  border-top:1px solid #303846;
  font-size:10.5px;
  line-height:1.35;
  opacity:.78;
}
.pc-studio-brand-footer .pc-brand-blurb{opacity:.78}
@media(max-width:760px){
  .pc-studio-brand-footer{
    padding-bottom:76px;
    min-height:120px;
  }
}