/* Stage hosts (design vs flow) */
.stage-host { position: absolute; inset: 0; }

/* Stage / viewport */
#viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 28px 28px;
}
#scene { position: absolute; transform-origin: 0 0; }

.device-frame {
  position: relative;
  background: #0b0e13;
  border-radius: 22px;
  box-shadow: 0 0 0 6px #232a34, 0 20px 60px rgba(0,0,0,.55);
}
.device-frame.landscape { border-radius: 18px; }

.screen-svg { display: block; border-radius: 16px; overflow: hidden; }

/* Selection + handles overlay */
#overlay { position: absolute; inset: 0; pointer-events: none; }
.sel-box {
  position: absolute; border: 1.5px solid var(--accent);
  pointer-events: none;
}
.sel-label {
  position: absolute; top: -18px; left: 0;
  background: var(--accent); color: #fff; font-size: 10px; padding: 1px 5px;
  border-radius: 3px 3px 0 0; white-space: nowrap;
}
.handle {
  position: absolute; width: 9px; height: 9px; background: #fff;
  border: 1.5px solid var(--accent); border-radius: 2px;
  pointer-events: auto; margin: -5px 0 0 -5px;
}
.handle.nw { cursor: nwse-resize; } .handle.ne { cursor: nesw-resize; }
.handle.sw { cursor: nesw-resize; } .handle.se { cursor: nwse-resize; }
.handle.n, .handle.s { cursor: ns-resize; }
.handle.e, .handle.w { cursor: ew-resize; }

.hover-box { position: absolute; border: 1px dashed rgba(79,140,255,.6); pointer-events: none; }
/* In preview mode only linked nodes are hoverable — show them as tap targets. */
#viewport.preview-mode .hover-box {
  border: 1.5px solid rgba(79,140,255,.9);
  background: rgba(79,140,255,.16);
  border-radius: 6px;
}
/* Số đo bám theo phần tử khi kéo / resize */
.measure-pill {
  position: absolute; transform: translateX(-50%); pointer-events: none; z-index: 6;
  background: var(--accent); color: #fff; font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.guide { position: absolute; background: #ff45a0; pointer-events: none; }
.guide.v { width: 1px; } .guide.h { height: 1px; }

/* Zoom / status bar */
#stage-bar {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  background: rgba(21,26,33,.92); border: 1px solid var(--line);
  border-radius: 99px; padding: 4px 6px; backdrop-filter: blur(8px);
}
#stage-hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  color: var(--fg-2); font-size: 11px; background: rgba(21,26,33,.86);
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 8px;
  opacity: .55; transition: opacity .18s;
}
#stage-hint:hover { opacity: 1; }

/* Đang ở chế độ Preview thì nói rõ, và cho lối thoát ngay tại chỗ */
#preview-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap;
  background: rgba(21,26,33,.94); border: 1px solid var(--accent); border-radius: 99px;
  padding: 5px 6px 5px 14px; box-shadow: 0 10px 28px rgba(0,0,0,.5); backdrop-filter: blur(8px);
}
.pb-dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--accent);
  animation: pb-pulse 1.6s ease-in-out infinite;
}
@keyframes pb-pulse { 50% { opacity: .25; } }

/* Flow view */
#flow-view { position: absolute; inset: 0; overflow: auto; background: var(--bg-0); }
#flow-canvas { position: relative; transform-origin: 0 0; }
.flow-node {
  position: absolute; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; cursor: grab; user-select: none;
}
.flow-node:hover { border-color: var(--accent); }
.flow-node.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.flow-node .fn-title {
  font-size: 11px; font-weight: 600; margin-bottom: 4px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-node .fn-body { background: var(--bg-0); border-radius: 6px; overflow: hidden; }
.flow-node .fn-body svg { display: block; width: 100%; height: 100%; }
#flow-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
#flow-links path { fill: none; stroke: #4f8cff; stroke-width: 1.6; opacity: .75; }
#flow-links path.dim { stroke: #56626f; opacity: .5; }

/* Drop preview while dragging from palette */
.drop-ghost {
  position: absolute; border: 1.5px dashed var(--accent);
  background: rgba(79,140,255,.14); pointer-events: none; border-radius: 4px;
}