/* 梦境空间设计工作室 · 工具侧边栏样式 V0.3.1
   只描述 #panelDock 和 .docked 两族，不改 style.css 里任何既有规则。 */

/* ── 布局：侧边栏占第 2 列，画布退到第 3 列 ──
   选择器权重 (0,2,1) 高于 .workspace 的 (0,1,0)，
   所以能压过 style.css 里的基础定义和几条 media query。 */
body.dock-open .workspace{
  grid-template-columns:52px 372px minmax(0,1fr);
}
body.dock-open #panelDock[hidden]{display:none}

#panelDock{
  background:#1d2022;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
}

.dock-top{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  height:44px;
  border-bottom:1px solid var(--line);
  background:#202426;
}
.dock-title{font-size:12px;font-weight:500;letter-spacing:1px;color:#cbd0ce}
.dock-sub{font-size:10px;color:var(--dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dockCollapse{
  flex:none;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-size:12px;line-height:1;padding:4px 7px;border-radius:5px;
}
#dockCollapse:hover{color:var(--accent);border-color:var(--accent)}

.dock-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.dock-body::-webkit-scrollbar{width:8px}
.dock-body::-webkit-scrollbar-thumb{background:#3b4245;border-radius:4px}
.dock-body::-webkit-scrollbar-track{background:transparent}

/* ── 被搬进侧边栏的面板 ──
   关键：position 必须从 absolute 改成 relative，
   否则 app.js 里 inline 的 left/top 一旦残留就会飘出文档流。 */
#panelDock .node.docked{
  position:relative;
  left:auto;top:auto;width:auto;height:auto;
  border:0;
  border-bottom:1px solid #2f3538;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  cursor:default;
}
/* 连接圆点在侧边栏里没有意义 */
#panelDock .node.docked:before,
#panelDock .node.docked:after{display:none}

#panelDock .node.docked.sel{
  border-color:transparent;
  box-shadow:none;
  background:#212628;
}

#panelDock .node.docked .node-head{
  padding:11px 14px;
  border-bottom:0;
  cursor:pointer;
  background:transparent;
  position:sticky;
  top:0;
  z-index:2;
  backdrop-filter:blur(2px);
}
#panelDock .node.docked .node-head:hover{background:#232829}
#panelDock .node.docked .node-head h3{font-size:12px}
#panelDock .node.docked .node-num{font-size:10px}

/* 折叠箭头：用 CSS 画，不额外加 DOM */
#panelDock .node.docked .node-head:before{
  content:"";
  flex:none;
  width:6px;height:6px;
  border-right:1.5px solid var(--dim);
  border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .15s;
  margin-right:2px;
}
#panelDock .node.docked.collapsed .node-head:before{
  transform:rotate(-45deg) translateX(-1px);
}

#panelDock .node.docked .node-body{
  padding:2px 14px 16px;
  overflow:visible;
}
#panelDock .node.docked.collapsed .node-body{display:none}
#panelDock .node.docked.collapsed{border-bottom-color:#2a2f32}

/* 选中高亮（左侧 01–06 导航点过来时） */
#panelDock .node.docked.flash{
  animation:dockFlash 1s ease-out;
}
@keyframes dockFlash{
  0%{background:#3a3226}
  100%{background:transparent}
}

/* ── 参考图标题上的连线角标 ── */
.ref-link-badge{
  flex:none;
  font-size:10px;
  color:var(--accent);
  border:1px solid #6b5c42;
  background:#2b2721;
  border-radius:4px;
  padding:1px 5px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── 收起后的浮起按钮 ── */
#dockOpen{
  position:fixed;
  left:64px;
  top:88px;
  z-index:9500;
  padding:7px 12px;
  font-size:11px;
  border:1px solid #4a5257;
  border-radius:7px;
  background:#24292c;
  color:var(--muted);
  box-shadow:0 6px 18px #0007;
}
#dockOpen:hover{color:var(--accent);border-color:var(--accent)}
#dockOpen[hidden]{display:none}

/* ── 窄屏收窄 ── */
@media(max-width:1240px){
  body.dock-open .workspace{grid-template-columns:52px 320px minmax(0,1fr)}
}
@media(max-width:980px){
  body.dock-open .workspace{grid-template-columns:52px 280px minmax(0,1fr)}
  .dock-sub{display:none}
}