/* ================================================================
   AI AGENT — page-specific visuals on top of css/tools/tools-page.css
   (the shared Tools page system, extracted from this page). Here:
   the hero execution vignette (rv) and the workspace architecture
   diagram (arch). Everything else is the shared grammar.
   ================================================================ */
/* ---- the workspace architecture diagram ---- */
.arch { position: relative; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem); border: 1px dashed var(--tp-purple-line); border-radius: var(--radius-xl); background: rgba(7, 10, 16, 0.35); display: grid; justify-items: center; }
.arch__frame-label { position: absolute; top: -0.7em; left: clamp(1.25rem, 3vw, 2rem); padding: 0 0.5em; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-lavender); background: var(--color-bg-canvas); }
.arch__tier { position: relative; width: 100%; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--tp-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; }
.arch__tier--agent { max-width: 22rem; border-color: var(--tp-purple-line); box-shadow: 0 0 0 4px var(--tp-purple-soft); }
.arch__kind { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-lavender); }
.arch__tier b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 4px; }
.arch__tier small { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--color-fg-tertiary); margin-top: 5px; }
.arch__link { position: relative; width: 100%; height: 2.5rem; }
.arch__link::before { content: ""; position: absolute; left: 50%; width: 1px; height: 50%; background: var(--tp-purple-line); }
.arch__link::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 50%; height: 1px; background: var(--tp-purple-line); }
.arch__link i { position: absolute; width: 1px; height: 50%; background: var(--tp-purple-line); }
.arch__link i:nth-child(1) { left: 16.66%; } .arch__link i:nth-child(2) { left: 50%; } .arch__link i:nth-child(3) { left: 83.33%; }
.arch__link--fan::before { top: 0; }
.arch__link--fan i { top: 50%; }
.arch__link--fan i::after { content: ""; position: absolute; left: -3.5px; bottom: 0; width: 6px; height: 6px; border-right: 1px solid var(--tp-lavender); border-bottom: 1px solid var(--tp-lavender); transform: rotate(45deg); }
.arch__link--merge::before { bottom: 0; }
.arch__link--merge::before { top: auto; }
.arch__link--merge i { top: 0; }
.arch__link--merge::after { top: 50%; }
.arch__link--merge .arch__arrow { position: absolute; left: calc(50% - 3.5px); bottom: 0; width: 6px; height: 6px; border-right: 1px solid var(--tp-lavender); border-bottom: 1px solid var(--tp-lavender); transform: rotate(45deg); background: none; }
.arch__tier--tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.arch__tool { padding: var(--space-3) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--tp-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; }
.arch__tool b { display: block; font-size: 0.95rem; font-weight: 600; margin-top: 3px; line-height: 1.3; }
.arch__loop { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--tp-lavender); border-right-color: transparent; animation: arch-loop 6s linear infinite; }
@keyframes arch-loop { to { transform: rotate(360deg); } }
@media (min-width: 64rem) { .agent-arch__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
@media (max-width: 30rem) {
  .arch-def > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .arch__tier--tools { gap: var(--space-2); }
  .arch__tool { padding: var(--space-3) var(--space-1); }
  .arch__tool b { font-size: 0.85rem; }
}


@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .arch__loop { animation: none; }
}