/* ==================== Info Bars ==================== */
#zoom-info {
  position: fixed; bottom: 48px; left: 16px; z-index: 1000;
  background: rgba(22,33,62,.85); padding: 6px 14px; border-radius: 6px;
  font-size: calc(12px * var(--font-scale)); color: #8aa; border: 1px solid #0f3460;
  transition: bottom .25s ease; touch-action: none;
}
#log-panel:not(.collapsed) ~ #canvas-area ~ #zoom-info,
body.log-expanded #zoom-info {
  bottom: 196px;
}
#toast {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%);
  padding: 8px 20px; border-radius: 8px;
  font-size: calc(13px * var(--font-scale)); z-index: 2000; opacity: 0; transition: opacity .3s, bottom .25s ease;
  pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }
#toast.error   { background: rgba(231,76,60,.9); color: #fff; }
#toast.success { background: rgba(39,174,96,.9); color: #fff; }
#toast.info    { background: rgba(52,152,219,.9); color: #fff; }

/* ==================== Canvas ==================== */
#canvas-area {
  position: fixed; top: var(--toolbar-h, 48px); left: 0; right: 0; bottom: 32px;
  overflow: hidden; cursor: grab; touch-action: none;
}
#canvas-area textarea,
#canvas-area input[type="text"],
#canvas-area input[type="number"],
#canvas-area input[type="file"],
#canvas-area select,
#canvas-area .result-display,
#canvas-area .ai-stream-output,
#canvas-area .script-output-display,
#canvas-area .combine-preview,
#canvas-area .de-code,
#canvas-area .file-preview,
#canvas-area .ai-thinking-body,
#canvas-area .podcast-local-list,
#canvas-area .podcast-audio-area {
  touch-action: pan-x pan-y;
}
#canvas-area.panning    { cursor: grabbing; }
#canvas-area.connecting { cursor: crosshair; }

#world {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform-origin: 0 0;
}

/* ==================== SVG Connections ==================== */
#connections-svg {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: visible; pointer-events: none;
  z-index: 0;
}
#connections-svg path.connection-hitarea { pointer-events: stroke; }

.connection-hitarea { pointer-events: stroke; cursor: pointer; }
.connection-path {
  fill: none; stroke-width: 2.5; pointer-events: none;
  transition: stroke-width .15s, filter .15s;
}
.connection-path.hovered { stroke-width: 5; filter: brightness(1.3); }
.connection-path.has-breakpoint { stroke-dasharray: 12 4 4 4; }

.breakpoint-icon { cursor: pointer; }
.breakpoint-icon circle { transition: fill 0.15s, opacity 0.15s; }
.breakpoint-icon:hover circle { fill: #c0392b; }
.breakpoint-icon.dimmed circle { fill: rgba(231,76,60,0.35); stroke: rgba(255,255,255,0.6); }
.breakpoint-icon.dimmed line { stroke: rgba(255,255,255,0.5); }
.breakpoint-hint { pointer-events: none; }

@keyframes flowAnim { to { stroke-dashoffset: -24; } }
.connection-path.flowing {
  stroke-dasharray: 8 4;
  animation: flowAnim .6s linear infinite;
}
.connection-path.executing {
  stroke-dasharray: 12 6;
  animation: flowExecAnim .4s linear infinite;
  stroke-width: 4;
}
@keyframes flowExecAnim { to { stroke-dashoffset: -36; } }

#temp-connection {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.5;
  stroke-dasharray: 6 4; pointer-events: none;
}

/* ==================== Grid ==================== */
#grid-canvas {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: -1;
}