/* Current canvas layout and compatibility history styles. */

/* ── 四列：导航 / 工具 / 画布 / 成果 ── */
body.dock-open .workspace{
  grid-template-columns:52px 372px minmax(0,1fr) 232px;
}
body:not(.dock-open) .workspace{
  grid-template-columns:52px minmax(0,1fr) 232px;
}

/* ── 画布内部三行 + 底部对话框 ──
   auto 那一行给 Agent 面板：面板 hidden 时行高塌成 0，画布占满。
   选择器用 body .canvas-shell 提高权重，压过 style.css 里的
   `.canvas-shell{grid-template-rows:89px minmax(0,1fr) 52px 141px}`
   和 760px 那条 media query。 */
body .canvas-shell{
  grid-template-rows:89px minmax(0,1fr) 52px auto;
}

/* ── 本次成果：从底部横条改成右侧竖栏 ── */
.history-tray{
  background:#1c2022;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  padding:12px 10px 8px;
  overflow:hidden;
}
.history-tray .history-title{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  font-size:11px;
  line-height:1.5;
}
.history-tray .history-title strong{flex:none}
.history-tray .history-title span{flex:none}
/* 原来靠 margin-left:auto 把按钮推到右边，竖栏里改成整行换行 */
.history-tray .history-title button{
  margin-left:0;
  border:1px solid #3b4245;
  border-radius:5px;
  padding:2px 6px;
  font-size:10px;
  color:var(--muted);
}
.history-tray .history-title button:hover{color:var(--accent);border-color:var(--accent)}

.history-tray #historyList{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:4px;
}
.history-tray #historyList::-webkit-scrollbar{width:7px}
.history-tray #historyList::-webkit-scrollbar-thumb{background:#3b4245;border-radius:4px}

.history-tray .history-item{
  width:100%;
  min-width:0;
  height:88px;
  flex:none;
}
.history-tray .history-empty{
  margin:8px 0;
  font-size:11px;
  line-height:1.7;
}

/* ── 窄屏：成果栏收窄，工具侧边栏收窄 ── */
@media(max-width:1400px){
  body.dock-open .workspace{grid-template-columns:52px 320px minmax(0,1fr) 200px}
  body:not(.dock-open) .workspace{grid-template-columns:52px minmax(0,1fr) 200px}
}
@media(max-width:1120px){
  body.dock-open .workspace{grid-template-columns:52px 280px minmax(0,1fr) 168px}
  body:not(.dock-open) .workspace{grid-template-columns:52px minmax(0,1fr) 168px}
  .history-tray .history-item{height:72px}
}

/* V0.5.3: current image occupies the central workspace. */
dialog.dialog:not([open]){display:none!important}
#focusWorkspace{position:absolute;inset:0;z-index:20;background:#171c1e;overflow:auto;padding:12px}
#focusWorkspace>.node{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100%;transform:none!important;display:flex;flex-direction:column}
#focusWorkspace .node-head{flex:none;cursor:default}
#focusWorkspace .node-body{display:flex;flex:1;padding:0;overflow:visible}
#focusWorkspace #benchMount{display:flex;flex:1;min-width:0}
#focusWorkspace .bench-body{height:auto;min-height:620px;width:100%;overflow:visible}
#focusWorkspace .bench-stage{min-height:340px;height:46vh;flex:none}
.focus-edit #world{visibility:hidden}
.focus-edit .canvas-bottom .zoom-bar,.focus-edit .canvas-hint{visibility:hidden}
#focusToggle{flex-shrink:0;white-space:nowrap;font-size:12px}
.top-actions button{white-space:nowrap}

body .canvas-shell{min-width:0;overflow:hidden}
.canvas-heading{gap:10px;padding:12px 16px}
.canvas-heading>div:first-child{min-width:0;flex:1}
.canvas-heading h1{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canvas-heading .session-label{display:none}
#focusWorkspace>.node{min-width:0;max-width:100%}
#focusWorkspace .bench-stage{min-height:220px;height:32vh}
#focusWorkspace .bench-tabs{flex-wrap:wrap}
.focus-edit #commentToggle,.focus-edit #commentOverlay,.focus-edit #cnQueue{display:none}
body .canvas-shell{grid-template-columns:minmax(0,1fr)} .canvas-shell>#stage,.canvas-shell>.canvas-heading{min-width:0;width:100%;max-width:100%} #focusWorkspace .bench-head{flex-wrap:wrap}
#focusToggle{pointer-events:auto;align-self:center;height:36px}