/* IloveTools — Agent Builder (scoped agentic execution) styles
   Shares the task-runner visual language (cards, badges, status
   colors) so the agent flow feels native to the toolkit. */

.tr-app { display: grid; gap: 1rem; }
.tr-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; border-radius: 14px;
  border: 1px solid var(--color-border, rgba(127,127,127,.25));
  background: var(--color-surface-1, transparent);
}
.tr-title { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.tr-stage {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75;
  border: 1px solid var(--color-border, rgba(127,127,127,.3));
  border-radius: 999px; padding: .15rem .55rem;
}
.tr-meta { font-size: var(--text-xs, .78rem); opacity: .7; margin-top: .25rem; }
.tr-status {
  font-size: var(--text-xs, .78rem); font-weight: 600;
  padding: .3rem .6rem; border-radius: 999px; white-space: nowrap;
  background: rgba(245,158,11,.12); color: #f59e0b;
}
.tr-note {
  font-size: var(--text-xs, .78rem); opacity: .75; margin: 0;
  padding: .55rem .8rem; border-radius: 10px;
  background: var(--color-surface-1, transparent);
  border: 1px solid var(--color-border, rgba(127,127,127,.15));
}
.tr-section { display: grid; gap: .55rem; }
.tr-section-title {
  font-size: var(--text-sm, .88rem); font-weight: 700;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.tr-muted { font-weight: 400; opacity: .6; font-size: var(--text-xs, .78rem); }
.tr-steps { display: grid; gap: .5rem; }
.tr-step {
  border: 1px solid var(--color-border, rgba(127,127,127,.22));
  border-radius: 12px; padding: .65rem .8rem;
  background: var(--color-surface-1, transparent);
  display: grid; gap: .4rem;
}
.tr-step-ok { border-color: rgba(34,197,94,.35); }
.tr-step-err { border-color: rgba(239,68,68,.4); }
.tr-step-running { border-color: rgba(99,102,241,.4); }
.tr-step-head { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--text-sm, .88rem); }
.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-step-running .tr-step-icon { color: #6366f1; }
.tr-ok { color: #22c55e; font-weight: 600; }
.tr-flags { display: inline-flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.tr-badge {
  font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--color-border, rgba(127,127,127,.3)); opacity: .85; white-space: nowrap;
}
.tr-badge-warn { border-color: rgba(245,158,11,.5); color: #f59e0b; }
.tr-badge-err { border-color: rgba(239,68,68,.5); color: #ef4444; }
.tr-step-err { font-size: var(--text-xs, .78rem); color: #ef4444; padding-top: .1rem; }
.tr-step-verified { font-size: var(--text-xs, .78rem); color: #22c55e; padding-top: .1rem; }
.tr-step-out summary { cursor: pointer; font-size: var(--text-xs, .78rem); opacity: .75; }
.tr-step-out pre {
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
  font-family: var(--font-mono, monospace); font-size: .74rem; line-height: 1.5;
  margin: .4rem 0 0; padding: .5rem; border-radius: 8px;
  background: var(--color-surface-2, rgba(127,127,127,.08));
}
.tr-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.tr-foot {
  font-size: var(--text-xs, .72rem); opacity: .6; margin: 0;
  border-top: 1px dashed var(--color-border, rgba(127,127,127,.2)); padding-top: .6rem;
}

/* ---------- agent builder form ---------- */
.ab-form { display: grid; gap: .8rem; }
.ab-field { display: grid; gap: .3rem; }
.ab-field > span {
  font-size: var(--text-xs, .78rem); font-weight: 700; opacity: .85;
  text-transform: uppercase; letter-spacing: .05em;
}
.ab-input {
  width: 100%; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid var(--color-border, rgba(127,127,127,.3));
  background: var(--color-surface-1, transparent);
  color: inherit; font: inherit; font-size: var(--text-sm, .88rem);
}
.ab-input:focus { outline: none; border-color: rgba(99,102,241,.6); }
.ab-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .45rem; max-height: 320px; overflow: auto; padding: .2rem;
}
.ab-tool {
  display: flex; gap: .5rem; align-items: flex-start;
  border: 1px solid var(--color-border, rgba(127,127,127,.18));
  border-radius: 10px; padding: .45rem .55rem; cursor: pointer;
  background: var(--color-surface-1, transparent);
  transition: border-color .15s ease;
}
.ab-tool:hover { border-color: rgba(99,102,241,.5); }
.ab-tool input { margin-top: .15rem; accent-color: #6366f1; }
.ab-tool b { font-size: var(--text-xs, .8rem); display: block; }
.ab-tool small { font-size: .68rem; opacity: .65; line-height: 1.35; display: block; }

/* ---------- visual agent canvas ---------- */
.ac-canvas {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.1rem 1rem; border-radius: 14px;
  border: 1px dashed var(--color-border, rgba(127,127,127,.35));
  background: var(--color-surface-1, transparent);
}
.ac-canvas-node {
  display: grid; justify-items: center; gap: .1rem; text-align: center;
  border: 1px solid var(--color-border, rgba(127,127,127,.3));
  border-radius: 12px; padding: .55rem .9rem; min-width: 150px;
  background: var(--color-surface-2, rgba(127,127,127,.06));
  font-size: var(--text-sm, .88rem); font-weight: 700;
}
.ac-canvas-node small {
  font-size: .64rem; font-weight: 400; opacity: .6; line-height: 1.3;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-canvas-agent {
  border-color: rgba(99,102,241,.55);
  background: rgba(99,102,241,.1); color: #6366f1;
  font-size: 1.05rem;
}
.ac-canvas-edge {
  width: 2px; height: 14px;
  background: linear-gradient(var(--color-border, rgba(127,127,127,.4)), rgba(99,102,241,.5));
}

/* ---------- dark theme pass ---------- */
[data-theme="dark"] .tr-step-out pre {
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .ac-canvas-node {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .ac-canvas-agent {
  background: rgba(99,102,241,.18);
}