/* =========================
   页面布局
========================= */

/* 工具栏固定在顶部 */
#toolbar {
  position: fixed;       /* 固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;          /* 高度和之前一致 */
  background: #f2f2f2;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 0 8px;
  user-select: none;
  z-index: 1000;         /* 保证在 canvas 之上 */
}

/* 根容器，占据剩余空间 */
#root {
  position: relative;
  width: 100vw;
  height: calc(100vh - 32px); /* 减去 toolbar 高度 */
  top: 32px;                  /* 推下去，避免被 toolbar 遮挡 */
  overflow: hidden;
}

/* canvas 占满 root */
#canvas {
  position: absolute;
  inset: 0;
}

/* widgets 覆盖 canvas */
#widgets {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  pointer-events: none;  /* 避免挡住鼠标事件 */
}

/* =========================
   widget 样式
========================= */
.widget {
  position: absolute;
  border: 1px solid #0000FF;
  background: rgba(0,0,0,0.03);
  box-sizing: border-box;
  cursor: move;
  pointer-events: none;
}

.widget.selected {
  outline: 2px solid #0000FF;
}

/* 控制点 handle 样式 */
.handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #0000FF;
}

.handle-nw { left:-4px; top:-4px; cursor:nw-resize }
.handle-n  { left:50%; top:-4px; transform:translateX(-50%); cursor:n-resize }
.handle-ne { right:-4px; top:-4px; cursor:ne-resize }
.handle-e  { right:-4px; top:50%; transform:translateY(-50%); cursor:e-resize }
.handle-se { right:-4px; bottom:-4px; cursor:se-resize }
.handle-s  { left:50%; bottom:-4px; transform:translateX(-50%); cursor:s-resize }
.handle-sw { left:-4px; bottom:-4px; cursor:sw-resize }
.handle-w  { left:-4px; top:50%; transform:translateY(-50%); cursor:w-resize }

/* =========================
   菜单样式
========================= */
.menu {
  position: relative;
}

.menu-title {
  padding: 4px 10px;
  cursor: pointer;
}

.menu:hover .menu-dropdown {
  display: block;
}

.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 120px;
  z-index: 1001; /* 高于 toolbar，避免被覆盖 */
}

.menu-dropdown > div {
  padding: 6px 10px;
  cursor: pointer;
}

.menu-dropdown > div:hover {
  background: #3399ff;
  color: #fff;
}