/* --------------------------------------------------------------------
 * TraceLoopConnector
 *
 * Two dotted vertical lines with opposing arrowheads that visually
 * connect the agent trace (above) to the Claude Code session (below)
 * to signal a feedback loop: evaluate → improve → re-evaluate.
 * ------------------------------------------------------------------ */

.wrap {
  position: relative;
  width: 100%;
  height: 5.25rem;
  /* Sit inside the existing margins from the terminals above/below
   * (2rem mb on trace + 0.6rem mt on Claude Code) so the dotted lines
   * read as a deliberate pause between the two panels. */
  margin: 0.25rem 0;
  pointer-events: none;
}

/* ---------- Dotted vertical lines ---------- */

.line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dotted
    color-mix(in oklab, var(--color-fd-muted-foreground) 70%, transparent);
}

.lineLeft {
  left: 22%;
}

.lineRight {
  right: 22%;
}

/* ---------- Arrowheads (CSS triangles) ---------- */

.arrowDown,
.arrowUp {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.arrowDown {
  bottom: -4px;
  border-top: 6px solid
    color-mix(in oklab, var(--color-fd-muted-foreground) 70%, transparent);
}

.arrowUp {
  top: -4px;
  border-bottom: 6px solid
    color-mix(in oklab, var(--color-fd-muted-foreground) 70%, transparent);
}

@media (max-width: 720px) {
  .wrap {
    height: 4.25rem;
  }

  .lineLeft {
    left: 18%;
  }

  .lineRight {
    right: 18%;
  }
}