/* Agent Pipeline — chain visualisation */

.tr-app { display: grid; gap: 1.1rem; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tr-title { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tr-title strong { font-size: 1.05rem; }
.tr-stage {
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #6366f1; background: rgba(99, 102, 241, .12);
  border: 1px solid rgba(99, 102, 241, .3); border-radius: 999px; padding: .15rem .6rem;
}
.tr-meta { color: var(--text-2, #55555f); font-size: .82rem; margin-top: .2rem; }
.tr-status {
  font-size: .74rem; font-weight: 600; color: #059669;
  background: rgba(5, 150, 105, .1); border: 1px solid rgba(5, 150, 105, .25);
  border-radius: 8px; padding: .3rem .6rem; white-space: nowrap;
}
.tr-section { display: grid; gap: .55rem; }
.tr-section-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2, #55555f);
}
.tr-steps { display: grid; gap: .5rem; }
.tr-step {
  border: 1px solid var(--border, rgba(15, 23, 42, .14));
  border-radius: 12px; padding: .65rem .8rem;
  background: var(--surface, #fff);
}
.tr-step-ok { border-color: rgba(34, 197, 94, .35); }
.tr-step-err { border-color: rgba(239, 68, 68, .4); }
.tr-step-head { display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; }
.tr-step-icon { flex: 0 0 auto; width: 1.1rem; text-align: center; font-weight: 700; }
.tr-step-ok .tr-step-icon { color: #22c55e; }
.tr-step-err .tr-step-icon { color: #ef4444; }
.tr-ok { color: #22c55e; font-weight: 600; }
.tr-step-err { font-size: .76rem; color: #ef4444; padding-top: .1rem; }
.tr-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.tr-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.tr-note {
  font-size: .8rem; color: var(--text-2, #55555f);
  background: rgba(99, 102, 241, .07); border: 1px dashed rgba(99, 102, 241, .35);
  border-radius: 10px; padding: .6rem .8rem; margin: 0;
}
.tr-foot { font-size: .72rem; color: var(--text-2, #55555f); margin-top: .3rem; }

/* chain */
.ap-chain { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ap-wire { color: #6366f1; font-weight: 700; font-size: 1.1rem; line-height: 1; opacity: .7; }
.ap-node {
  display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 520px;
  border: 1px solid var(--border, rgba(15, 23, 42, .18));
  border-radius: 12px; padding: .6rem .8rem;
  background: var(--surface, #fff);
}
.ap-node-ok { border-color: rgba(34, 197, 94, .4); }
.ap-node-err { border-color: rgba(239, 68, 68, .45); }
.ap-node-icon { font-size: 1.2rem; }
.ap-node b { display: block; font-size: .88rem; }
.ap-node small { font-size: .68rem; opacity: .6; }
.ap-node-actions { margin-left: auto; display: flex; gap: .25rem; }

/* add chips */
.ap-add { display: flex; flex-wrap: wrap; gap: .4rem; }
.ap-chip {
  border: 1px solid var(--border, rgba(15, 23, 42, .16));
  border-radius: 999px; padding: .4rem .8rem; font-size: .8rem; font-weight: 600;
  background: var(--surface, #fff); color: inherit; cursor: pointer;
  transition: border-color .15s ease;
}
.ap-chip:hover { border-color: rgba(99, 102, 241, .55); }