.overlay, .modal-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.close-button {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 22;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 30px;
  cursor: pointer;
}
.tree-stage { position: relative; width: 100%; height: 100%; overflow: auto; }
.tree-lines { position: absolute; inset: 0; pointer-events: none; }
.tree-link { fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
.tree-link.active-path { stroke: var(--accent); opacity: .78; }
.tree-link.preview-path { stroke: var(--accent); stroke-width: 4; opacity: 1; }
.tree-node {
  position: absolute;
  width: 210px;
  min-height: 92px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 18px 18px 18px 3px;
  background: var(--panel);
  cursor: pointer;
}
.tree-node.active-branch { border-color: var(--accent); }
.tree-node.system-prompt-node {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.tree-node.system-prompt-node strong { color: var(--accent); }
.tree-node.preview-path {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}
.tree-node.current:after {
  content: "*";
  position: absolute;
  right: -18px;
  bottom: -24px;
  color: var(--accent);
  font-size: 42px;
  line-height: 1;
}
.tree-node strong, .tree-node span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node span { color: var(--muted); font-size: 13px; }