/* Kapitel 380 — KI-Agenten: NUR Modul-Spezialoptik
   (alles Weitere kommt aus assets/css/style.css). Praefix "ag-" fuer alle Klassen. */

/* ---------- Checkbox-Zeile: darf im .input-group nicht die Label-Mindestbreite erben ---------- */
.ag-check{display:inline-flex;align-items:center;gap:.5rem;min-width:0!important;
  font-weight:600;cursor:pointer;min-height:44px}
.ag-check input{width:20px;height:20px;accent-color:var(--hk-blau);flex:0 0 auto}

/* ---------- Kontext-Balken der Agenten-Schleife ---------- */
.ag-kontext{display:flex;align-items:center;gap:.6rem;margin:.9rem 0;flex-wrap:wrap}
.ag-kontext-name{flex:0 0 5.5rem;font-size:.9rem;font-weight:600}
.ag-kontext-spur{flex:1 1 140px;height:18px;background:var(--hk-grau-hell);
  border:1px solid var(--hk-rahmen);border-radius:999px;overflow:hidden}
.ag-kontext-wert{flex:0 0 7rem;text-align:right;font-family:'Courier New',monospace;
  font-weight:700;font-size:.9rem;color:var(--hk-text)}

/* gemeinsame Fuellung fuer alle Balken dieses Kapitels */
.ag-fuell{display:block;height:100%;width:0;border-radius:999px;background:var(--hk-blau);
  transition:width .2s linear}
.ag-fuell-rot{background:var(--hk-rot)}
.ag-fuell-gruen{background:var(--hk-gruen)}

/* ---------- Schrittkarten der Agenten-Schleife ---------- */
.ag-schritte{display:flex;flex-direction:column;gap:.45rem;margin:.9rem 0}
.ag-schritt{border:1px solid var(--hk-rahmen);border-left:5px solid var(--hk-rahmen);
  border-radius:8px;padding:.55rem .8rem;background:#fff;overflow-wrap:anywhere}
.ag-schritt-rolle{display:block;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--hk-text-soft);margin-bottom:.2rem}
.ag-schritt-text{font-size:.92rem}
.ag-schritt-code{font-family:'Courier New',monospace;font-size:.86rem}

.ag-denken{border-left-color:var(--hk-blau);background:var(--hk-blau-hell)}
.ag-aufruf{border-left-color:var(--hk-blau-dunkel);background:#fff}
.ag-ergebnis{border-left-color:var(--hk-gruen);background:var(--hk-gruen-hell)}
.ag-antwort{border-left-color:var(--hk-gruen-dunkel);background:#fff;font-weight:600}
.ag-fehlerkarte{border-left-color:var(--hk-rot);background:var(--hk-rot-hell)}

/* eingeschmuggelte Anweisung im Werkzeug-Ergebnis */
.ag-inject{display:block;margin-top:.35rem;padding:.35rem .5rem;border-radius:6px;
  background:var(--hk-rot-hell);border:1px dashed var(--hk-rot);
  color:var(--hk-rot-dunkel);font-weight:700;font-size:.88rem}

/* ---------- Balkenpaare des Orchestrator-Rechners ---------- */
.ag-balken{margin:.9rem 0}
.ag-balken-zeile{display:flex;align-items:center;gap:.6rem;margin:.45rem 0;flex-wrap:wrap}
.ag-balken-name{flex:0 0 8rem;font-size:.9rem;font-weight:600}
.ag-balken-spur{flex:1 1 140px;height:16px;background:var(--hk-grau-hell);
  border:1px solid var(--hk-rahmen);border-radius:999px;overflow:hidden}
.ag-balken-wert{flex:0 0 7.5rem;text-align:right;font-family:'Courier New',monospace;
  font-weight:700;font-size:.9rem;color:var(--hk-text)}

@media (max-width:600px){
  .ag-balken-name{flex-basis:100%}
  .ag-balken-wert{flex-basis:6rem}
  .ag-kontext-name{flex-basis:100%}
}

/* ---------- Schwarm-Canvas ---------- */
.ag-canvas{display:block;margin:0 auto;touch-action:manipulation}

/* Quiz-Erklaerung erscheint erst nach dem Klick */
.quiz-erklaerung[hidden]{display:none}