/* Warcut Paint Shop Studio - Phase 11 Context Menus + Panel Controller Rewrite */
html[data-app-phase="11-context-menu-panel-controller"] .brand-copy span::after{content:" / Phase 11";color:#ffd166;}
html[data-app-phase="11-context-menu-panel-controller"] .app-shell{isolation:isolate;}
html[data-app-phase="11-context-menu-panel-controller"] .option-group.compact-ops{flex-wrap:nowrap;}
html[data-app-phase="11-context-menu-panel-controller"] #uiZoomSlider,
html[data-app-phase="11-context-menu-panel-controller"] .phase11-fixed-ui-slider{
  flex:0 0 92px !important;
  width:92px !important;
  min-width:92px !important;
  max-width:92px !important;
  transform:none !important;
  contain:size layout style !important;
}
html[data-app-phase="11-context-menu-panel-controller"] #uiZoomReadout,
html[data-app-phase="11-context-menu-panel-controller"] .phase11-fixed-ui-readout{
  flex:0 0 auto !important;
  min-width:62px !important;
  text-align:center;
}
html[data-app-phase="11-context-menu-panel-controller"] .panel-reset-btn{
  border-color:rgba(255,209,102,.5) !important;
  color:#ffe6a3 !important;
  background:linear-gradient(180deg,rgba(255,209,102,.12),rgba(255,209,102,.03)) !important;
}

/* Phase 11 replaces the layered panel patch stack with one controller surface. */
html[data-app-phase="11-context-menu-panel-controller"] .dock{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  grid-template-rows:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-height:0 !important;
  padding-right:5px !important;
  scrollbar-width:thin !important;
  scrollbar-color:#4a4a4a #1f1f1f !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel{
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border:1px solid #4d4d4d !important;
  background:#2a2a2a !important;
  box-shadow:none !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="expanded"]{
  border-color:#64737b !important;
  box-shadow:0 4px 18px rgba(0,0,0,.22) !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="collapsed"]{border-color:#3f3f3f !important;}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="solo"]{
  flex:1 1 auto !important;
  min-height:clamp(520px,74vh,900px) !important;
  border-color:#ffd166 !important;
  box-shadow:0 0 0 1px rgba(255,209,102,.18),0 12px 28px rgba(0,0,0,.28) !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="hidden"]{display:none !important;}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel > .dock-head{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:7px !important;
  min-height:32px !important;
  padding:6px 8px !important;
  cursor:pointer !important;
  user-select:none !important;
  background:linear-gradient(180deg,#343434,#2e2e2e) !important;
  border-bottom:1px solid #444 !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="collapsed"] > .dock-head{border-bottom:0 !important;opacity:.96 !important;}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="collapsed"] > .dock-head::after{
  content:"collapsed";
  grid-column:3;
  font-size:9px;
  color:#8ebbd0;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.78;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="expanded"] > .dock-head::after,
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="solo"] > .dock-head::after{content:"";display:none;}
html[data-app-phase="11-context-menu-panel-controller"] .dock .phase11-panel-title,
html[data-app-phase="11-context-menu-panel-controller"] .dock .layer-tabs{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-meta{
  grid-column:3 !important;
  min-width:0 !important;
  max-width:120px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  justify-self:end !important;
  margin-left:0 !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .phase11-panel-actions{
  grid-column:4 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  justify-self:end !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .phase11-panel-btn{
  width:27px !important;
  height:23px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #606060 !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,#343434,#242424) !important;
  color:#bdefff !important;
  font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .phase11-panel-btn:hover{
  border-color:#ffd166 !important;
  color:#fff7d6 !important;
  background:linear-gradient(180deg,rgba(255,209,102,.18),rgba(255,209,102,.05)) !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-head-actions,
html[data-app-phase="11-context-menu-panel-controller"] .dock .hard-panel-actions,
html[data-app-phase="11-context-menu-panel-controller"] .dock .deck-actions,
html[data-app-phase="11-context-menu-panel-controller"] .dock [data-panel-toggle],
html[data-app-phase="11-context-menu-panel-controller"] .dock [data-panel-solo]{display:none !important;}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="collapsed"] > .dock-body{
  display:none !important;
  visibility:hidden !important;
  max-height:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="expanded"] > .dock-body{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  max-height:clamp(220px,45vh,650px) !important;
  min-height:0 !important;
  padding:8px !important;
  overflow:auto !important;
  pointer-events:auto !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .dock-panel[data-phase11-panel-state="solo"] > .dock-body{
  display:block !important;
  visibility:visible !important;
  flex:1 1 auto !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  padding:10px !important;
  overflow:auto !important;
  pointer-events:auto !important;
}
html[data-app-phase="11-context-menu-panel-controller"] .dock .layers-panel[data-phase11-panel-state="expanded"] > .dock-body,
html[data-app-phase="11-context-menu-panel-controller"] .dock .imaging-panel[data-phase11-panel-state="expanded"] > .dock-body,
html[data-app-phase="11-context-menu-panel-controller"] .dock .workbench-panel[data-phase11-panel-state="expanded"] > .dock-body{max-height:clamp(260px,50vh,760px) !important;}

/* Context menu */
.warcut-context-menu{
  position:fixed;
  z-index:999999;
  min-width:248px;
  max-width:min(340px,calc(100vw - 20px));
  padding:7px;
  border:1px solid rgba(255,209,102,.35);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(42,42,42,.98),rgba(24,24,24,.98));
  box-shadow:0 22px 54px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  color:#f3f3f3;
  backdrop-filter:blur(10px);
}
.warcut-context-menu[hidden]{display:none !important;}
.warcut-context-title{
  padding:7px 9px 8px;
  color:#ffe6a3;
  font:700 11px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:5px;
}
.warcut-context-item{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:30px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#efefef;
  text-align:left;
}
.warcut-context-item span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.warcut-context-item small{font-size:10px;color:#99d7ef;white-space:nowrap;justify-self:end;max-width:130px;overflow:hidden;text-overflow:ellipsis;}
.warcut-context-item:hover:not(:disabled),
.warcut-context-item:focus-visible:not(:disabled){
  border-color:rgba(56,189,248,.32);
  background:linear-gradient(90deg,rgba(56,189,248,.16),rgba(56,189,248,.04));
  outline:none;
}
.warcut-context-item.danger span{color:#ffb4b4;}
.warcut-context-item.danger:hover:not(:disabled){border-color:rgba(245,101,101,.45);background:linear-gradient(90deg,rgba(245,101,101,.16),rgba(245,101,101,.04));}
.warcut-context-item.staged small{color:#ffd166;}
.warcut-context-item:disabled{opacity:.42;cursor:not-allowed;}
.warcut-context-separator{height:1px;margin:5px 4px;background:rgba(255,255,255,.1);}
.layer-item.phase11-context-target{outline:2px solid rgba(255,209,102,.82);outline-offset:2px;}
.phase11-toast{border-left:3px solid #ffd166;}