/* F7-05: Agent Graph. Usa i token di styles.css. */
.ag-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ag-kpi { border: 1px solid var(--line); background: rgba(10, 23, 37, .9); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.ag-kpi strong { font-size: 1.7rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ag-kpi span { color: var(--muted); font-size: .76rem; }
.ag-kpi.warn strong { color: #f2c85b; }
.ag-kpi.bad strong { color: #ff8a8f; }
.ag-kpi.ok strong { color: #7fe0ae; }

.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ag-stage { border: 1px solid var(--line); background: radial-gradient(circle at 50% 46%, #0f2238 0%, #0a1726 46%, #08131f 100%); border-radius: 18px; position: relative; overflow: hidden; }
.ag-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 0; flex-wrap: wrap; }
.ag-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-chip { border: 1px solid #23405f; background: #0c1b2c; color: #b9cbe0; border-radius: 999px; padding: 6px 11px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.ag-chip[aria-pressed="true"] { background: #d9eaff; color: #07111d; border-color: #d9eaff; }
.ag-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); }
.ag-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.ag-svg { display: block; width: 100%; height: auto; }
.ag-svg .ring { fill: none; stroke: #16304a; stroke-dasharray: 2 7; }
.ag-svg .edge { fill: none; stroke: #2c5279; stroke-linecap: round; opacity: .75; }
.ag-svg .edge.attention { stroke: #e0a63a; opacity: .95; }
.ag-svg .edge.flow { stroke: #9ed0ff; stroke-dasharray: 3 14; opacity: .9; animation: ag-flow 1.6s linear infinite; }
@keyframes ag-flow { to { stroke-dashoffset: -34; } }
.ag-node { cursor: pointer; outline: none; }
.ag-node circle.body { fill: #0f2135; stroke: #35587e; stroke-width: 1.5; transition: stroke .15s, fill .15s; }
.ag-node:hover circle.body, .ag-node:focus circle.body { stroke: #d9eaff; }
.ag-node.selected circle.body { stroke: #ffffff; stroke-width: 2.5; fill: #14304d; }
.ag-node circle.halo { fill: none; stroke-width: 2; opacity: 0; }
.ag-node.running circle.halo { stroke: #6fe0a6; opacity: .9; animation: ag-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ag-node.blocked circle.body { stroke: #f2c85b; }
.ag-node.failed circle.body { stroke: #ff7b82; }
.ag-node.planned circle.body { stroke-dasharray: 4 4; opacity: .7; }
@keyframes ag-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.ag-node text.code { fill: #f5f8fc; font-weight: 850; letter-spacing: .06em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ag-node text.sub { fill: #8ea4bd; font-size: 10px; text-anchor: middle; pointer-events: none; }
.ag-node .badge circle { stroke: #06101b; stroke-width: 2; }
.ag-node .badge text { fill: #06101b; font-size: 10px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.ag-hub circle.body { fill: #d9eaff; stroke: #d9eaff; }
.ag-hub text.code { fill: #07111d; }
.ag-node text { font-family: inherit; }

.ag-side { display: grid; gap: 16px; }
.ag-card { border: 1px solid var(--line); background: rgba(10, 23, 37, .92); border-radius: 16px; padding: 16px; }
.ag-card h2 { margin: 4px 0 10px; font-size: 1.05rem; letter-spacing: -.01em; }
.ag-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0 0; }
.ag-detail-grid div { display: grid; gap: 2px; }
.ag-detail-grid dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.ag-detail-grid dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.ag-current { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #0d2034; border: 1px solid #1d3a58; font-size: .85rem; }
.ag-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-attention li { border: 1px solid #2a3c52; border-left: 3px solid #e0a63a; background: #0c1a2a; border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.ag-attention li.failed { border-left-color: #ff7b82; }
.ag-attention .row { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: var(--muted); }
.ag-attention strong { font-size: .88rem; }
.ag-attention p { margin: 0; color: #c8d5e4; font-size: .8rem; }
.ag-empty { color: var(--muted); font-size: .85rem; padding: 8px 0; }
.ag-page .page-header { flex-wrap: wrap; }
.ag-page .header-actions { align-items: center; flex-wrap: wrap; }
.ag-mode { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 11px; font-size: .74rem; font-weight: 800; border: 1px solid #2b4866; color: #cfe2f6; }
.ag-mode.demo { border-color: #665626; color: #efd782; background: #251f0f; }
.ag-mode.live { border-color: #2c6d50; color: #9ff0c6; background: #0d2219; }

@media (max-width: 1100px) {
  .ag-layout { grid-template-columns: 1fr; }
  .ag-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ag-stage-head { padding: 12px 12px 0; }
  .ag-legend { gap: 8px; }
  .ag-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-svg .edge.flow, .ag-node.running circle.halo { animation: none; }
}