/* ============================================================================
   agenten.css — Reiter "Agenten"
   ----------------------------------------------------------------------------
   Wird NACH styles.css geladen und ergaenzt es; styles.css bleibt unberuehrt.
   Alle eigenen Klassen tragen das Praefix ag-, damit im 137-KB-Bestand nichts
   kollidiert (vorher geprueft: ".ag-" kommt in styles.css kein einziges Mal vor).

   ZWEI FARBWELTEN, BEWUSST GETRENNT
   1) Alles ausserhalb der Buehne — Kopf, Kennzahlen, Legende, Hinweiskarte —
      benutzt ausschliesslich die Board-Tokens und sieht dadurch in Hell wie in
      Dunkel stimmig aus.
   2) Die Buehne selbst ist ein Fenster in den Nachthimmel und deshalb in BEIDEN
      Themes dunkel. Fuer sie gibt es keine passenden Board-Tokens (--surface
      waere im Hellmodus weiss). Statt Hex-Werte ueber die Datei zu streuen,
      stehen die wenigen noetigen Farben als eigene Tokens gebuendelt in
      .ag-stage — dieselbe Disziplin wie im Bestand, nur mit eigenem Satz.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Reiterleiste: mit "Agenten" sind es acht Reiter. styles.css rechnet im
   Kommentar bei Zeile 665 ausdruecklich mit sieben und hat kein overflow-x —
   der achte wuerde ab ~940px die Werkzeuge rechts aus dem Bild druecken.
   Die Schiene darf deshalb notfalls waagerecht scrollen, ohne sichtbaren
   Balken. Additive Regel, kein Eingriff in styles.css.
   ------------------------------------------------------------------------- */
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   Kopfbereich: Kennzahlen und Legende
   ------------------------------------------------------------------------- */
.ag-stats { margin-bottom: var(--sp-5); }

/* Zahl faerbt sich nur, wenn sie etwas zu sagen hat. */
.ag-num--run { color: var(--flight); }
.ag-num--bad { color: var(--red); }

.ag-legend { justify-content: flex-start; }
.ag-legend-hint {
  margin-left: auto;
  color: var(--text-subtle);
  font-weight: var(--fw-normal);
}
.ag-dot {
  width: 9px;
  height: 9px;
  flex: none;
  display: inline-block;
  border-radius: var(--r-full);
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}
.ag-dot--idle {
  background: var(--slate);
  box-shadow: none;
}
.ag-dot--lost {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
}

/* ---------------------------------------------------------------------------
   Buehne — gerahmt wie eine Karte des Boards (gleiche Radien, Raender,
   Schatten), innen Nachthimmel. Feste, aber mitwachsende Hoehe: das Board hat
   Topbar und Kopfbereich ueber sich, eine Vollbildflaeche gibt es hier nicht.
   ------------------------------------------------------------------------- */
.ag-stage {
  /* eigene Tokens der Nachtwelt – gelten NUR innerhalb der Buehne */
  --ag-night: #05070d;
  --ag-glass: rgba(10, 17, 32, 0.96);
  --ag-line: rgba(255, 255, 255, 0.12);
  --ag-ink: #eef3ff;
  --ag-ink-2: #9aa8c4;
  --ag-ink-3: #6c7a97;

  position: relative;
  height: min(70vh, 640px);
  min-height: 380px;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  background: var(--ag-night);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  /* Beruehrungsgeraete: der erste Tipper gehoert dem Orb, nicht dem Scrollen */
  touch-action: manipulation;
}
/* Dunkelmodus: der Rand darf nicht heller sein als der Inhalt dahinter. */
:root[data-theme="dark"] .ag-stage {
  border-color: var(--border-strong);
  box-shadow: var(--e-3);
}
.ag-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------------------------------------------------------------------------
   Tooltip — liegt ABSOLUT in der Buehne, nicht fixed: waehrend der Einblend-
   Animation der View (.view.is-active, transform: translateY(4px)) waere ein
   position:fixed-Element am View-Element verankert und spraenge danach.
   ------------------------------------------------------------------------- */
.ag-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  max-width: min(330px, calc(100% - 24px));
  padding: 11px 13px 12px;
  background: var(--ag-glass);
  border: 1px solid var(--ag-line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 46px -10px rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 4px, 0);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ag-tip.is-shown {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.ag-tip-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--sp-2);
  color: var(--ag-ink-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.ag-tip-swatch {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-full);
}
.ag-tip-title {
  color: var(--ag-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}
.ag-tip-detail {
  margin-top: var(--sp-2);
  color: var(--ag-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.ag-tip-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--ag-line);
  color: var(--ag-ink-3);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------------
   Tastatur-Ersatz fuer die Orbs: unsichtbar, bis jemand hineintabbt.
   Zeigergeraete sehen nur die Orbs, Tastaturnutzer bekommen dieselbe Auskunft.
   ------------------------------------------------------------------------- */
.ag-tasknav {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  max-width: min(70%, 320px);
  padding: var(--sp-2);
  background: var(--ag-glass);
  border: 1px solid var(--ag-line);
  border-radius: var(--r-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ag-tasknav:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ag-tasknav h2 {
  padding: 2px 6px 6px;
  color: var(--ag-ink-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.ag-tasknav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-tasknav button {
  display: block;
  width: 100%;
  padding: 6px var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ag-ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ag-tasknav button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ag-ink);
}
.ag-tasknav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ag-ink);
}
.ag-sw {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: var(--r-full);
}
.ag-tasknav-empty {
  padding: 4px var(--sp-2) 6px;
  color: var(--ag-ink-3);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
   Hinweiszustand: der lokale Watcher laeuft nicht.
   Kein Fehlerbildschirm — eine ruhige Karte im Board-Design ueber dem weiter
   atmenden Nachthimmel. Sobald die Verbindung steht, verschwindet sie von
   selbst (agenten.js setzt [hidden]; styles.css erzwingt display:none).
   ------------------------------------------------------------------------- */
.ag-offline {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(4, 6, 11, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ag-fade var(--dur-slow) var(--ease-out) both;
}
@keyframes ag-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ag-offline-card {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sheen), var(--e-4);
  text-align: center;
  text-wrap: balance;
}
.ag-offline-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  font-size: var(--fs-xl);
}
.ag-offline-title {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.ag-offline-text {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.ag-offline-note {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--amber-soft);
  border-radius: var(--r-sm);
  color: var(--amber);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: left;
}
.ag-offline-meta {
  margin-top: var(--sp-3);
  color: var(--text-subtle);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
}
.ag-offline-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Kopierbarer Startbefehl */
.ag-code {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
}
/* Der Befehl wird umgebrochen statt abgeschnitten: ein halb sichtbarer Pfad
   nuetzt niemandem, und wer ihn abtippt, braucht ihn vollstaendig. */
.ag-code code {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.ag-code .ag-copy { flex: none; }

/* ---------------------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ag-stage {
    height: min(62vh, 460px);
    min-height: 300px;
  }
  .ag-legend-hint { display: none; }
  .ag-offline-card { padding: var(--sp-5); }
}
@media (max-width: 560px) {
  .ag-code { flex-wrap: wrap; }
  .ag-code code { flex-basis: 100%; }
}

/* Sehr flache Fenster: lieber eine kleinere Buehne als eine, durch die man
   scrollen muss, um die Beschriftungen zu sehen. */
@media (max-height: 620px) {
  .ag-stage {
    height: 62vh;
    min-height: 260px;
  }
}