/*
  workspace-bento-agentrollen.css — Gestaltung der Agenten-Wabe (workspace-bento-agentrollen.js), der Agenten-Bilder und der Agenten-Leiste
  im Chat (workspace-bento-agentleiste.js).

  Kurzbeschreibung (für Laien): Die Wabe steht in einem hellen Dialog (Baustein marke/bausteine/43-dialog.html): links der Agent in der Mitte
  mit sechs Waben, rechts das Feld zur gewählten Wabe. Fertige Waben färben sich in der Farbe des Agent-Bildes, mit leichtem Verlauf nach rechts
  unten ins Weiße. Die Leiste im Chat zeigt die Agenten als schmale Zeilen. Alle Farben sind Marken-Variablen (hell und dunkel),
  Radien 6/9/12/999, Abstände 4/8/12/16/24, Schrift Inter 11–15 px, keine farbigen Seitenstreifen.
*/

/* ── Agenten-Bild: Kachel mit Verlauf, weißer Roboter-Kopf ── */
.wab-bild { flex: none; display: inline-grid; place-items: center; border-radius: var(--marke-r-m); color: #fff;
  background: linear-gradient(135deg, var(--f) 30%, color-mix(in srgb, var(--f) 66%, var(--wab-ziel, #fff))); }
.wab-bild svg { width: 72%; height: 72%; }
:root[data-theme="dark"] .wab-bild, :root[data-theme="dark"] .war-modal { --wab-ziel: var(--marke-flaeche); }

/* ── Dialog ── */
.war-modal { --wab-f: var(--marke-nav-blau); --wab-ziel: #fff; }
/* höhere Gewichtung als die Dialog-Maße aus brand.css / marke-ui.css (460–520 px, Polster, Raster) */
.a4h-overlay .a4h-modal.war-modal { width: min(1040px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
:root[data-theme="dark"] .war-modal { --wab-ziel: var(--marke-flaeche); }
.war-wabe-rahmen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); min-height: 520px; min-width: 0; }
.war-buehne { display: grid; place-items: center; padding: 24px; background: var(--marke-flaeche-2); min-width: 0; }
.war-seitenfeld { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--marke-flaeche); }
.war-sf-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 24px; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, var(--wab-f) 30%, color-mix(in srgb, var(--wab-f) 66%, var(--wab-ziel))); }
.war-sf-kopf b { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-sf-kopf small { font-size: 12px; opacity: .9; white-space: nowrap; }
.war-sf-inhalt { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 24px; overflow-y: auto; min-height: 0; }
.war-sf-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--marke-linie); }
.war-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.war-h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--marke-text); }
.war-leise { margin: 0; font-size: 12px; color: var(--marke-text-3); }
.war-fehler { padding: 8px 12px; border-radius: var(--marke-r-m); background: var(--marke-flaeche-2); color: var(--marke-gefahr); font-size: 13px; }
.war-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--marke-text-3); }
.war-loeschen.is-scharf { color: var(--marke-gefahr); }

/* ── Waben ── */
.war-wabenfeld { --r: 70px; --d: calc(var(--r) * 1.732 + 10px); position: relative; flex: none;
  width: calc(var(--d) * 2 + var(--r) * 1.732); height: calc(var(--d) * 1.732 + var(--r) * 2); }
.war-wabe, .war-rahmen, .war-ring, .war-mitte { --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.war-wabe { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 1.732); height: calc(var(--r) * 2); margin: 0; padding: 0 14px; border: 0; cursor: pointer;
  translate: calc(-50% + var(--x, 0px)) calc(-50% + var(--y, 0px)); clip-path: var(--hex); box-sizing: border-box;
  display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; font: inherit;
  background: var(--marke-flaeche); color: var(--marke-text-3); transition: scale .18s, background .2s, opacity .3s; }
.war-wabe:hover { scale: 1.04; }
.war-wabe svg { width: 24px; height: 24px; }
.war-wabe b { font-size: 12px; font-weight: 600; color: var(--marke-text); }
.war-wabe small { font-size: 11px; line-height: 1.3; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-wabe.fertig { background: linear-gradient(135deg, var(--wab-f) 30%, color-mix(in srgb, var(--wab-f) 66%, var(--wab-ziel))); color: rgba(255, 255, 255, .9); }
.war-wabe.fertig b { color: #fff; }
/* .war-wabe.bald { background: transparent; color: var(--marke-text-3); } */
.war-wabe.gewaehlt { scale: 1.06; }
.war-rahmen { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 1.732 + 8px); height: calc(var(--r) * 2 + 9px); translate: calc(-50% + var(--x, 0px)) calc(-50% + var(--y, 0px));
  clip-path: var(--hex); background: var(--wab-f); pointer-events: none; opacity: 0; transition: opacity .2s; }
.war-rahmen.an { opacity: 1; }
.war-ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--r) * 1.732); height: calc(var(--r) * 2); clip-path: var(--hex);
  background: conic-gradient(var(--wab-f) var(--p, 0%), var(--marke-linie) 0); }
.war-mitte { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--r) * 1.732 - 10px); height: calc(var(--r) * 2 - 11px); clip-path: var(--hex);
  background: linear-gradient(160deg, color-mix(in srgb, var(--wab-f) 22%, var(--marke-flaeche)), var(--marke-flaeche));
  display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; pointer-events: none; padding: 0 12px; box-sizing: border-box; }
.war-mitte b { font-size: 14px; font-weight: 600; color: var(--marke-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-mitte small { font-size: 11px; color: var(--marke-text-3); }
.war-mitte-leer { color: var(--marke-nav-blau); }
.war-mitte-leer svg { width: 28px; height: 28px; }
.war-wabenfeld.leer .war-wabe, .war-wabenfeld.leer .war-rahmen { pointer-events: none; }
.war-wabenfeld.leer .war-rahmen { opacity: 0; }
/* Hervorhebung der gerade bearbeiteten Wabe: ein heller Lichtpunkt läuft ruhig am Sechseck-Rand entlang; ebenso an der Kante zur Mitte */
.war-licht { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 1.732 + 8px); height: calc(var(--r) * 2 + 9px); overflow: visible; pointer-events: none;
  translate: calc(-50% + var(--x, 0px)) calc(-50% + var(--y, 0px)); }
.war-licht polygon.grund { fill: none; stroke: var(--wab-f); stroke-width: 4; stroke-linejoin: round; animation: none; filter: none; stroke-dasharray: none; }
.war-licht polygon { fill: none; stroke: color-mix(in srgb, var(--wab-f) 35%, #fff); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 14 86; animation: war-lauf 3.2s linear infinite; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wab-f) 70%, #fff)); }
@keyframes war-lauf { to { stroke-dashoffset: -100; } }
.war-kante { position: absolute; left: 50%; top: 50%; width: var(--r); height: 4px; border-radius: 2px; pointer-events: none;
  translate: calc(-50% + var(--kx, 0px)) calc(-50% + var(--ky, 0px)); rotate: var(--rot, 0deg);
  background: linear-gradient(90deg, var(--wab-f) 0%, color-mix(in srgb, var(--wab-f) 35%, #fff) 50%, var(--wab-f) 100%); background-size: 200% 100%; animation: war-kante 2.4s ease-in-out infinite alternate; }
@keyframes war-kante { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .war-licht polygon:not(.grund) { display: none; }
  .war-licht polygon { animation: none; stroke-dasharray: none; stroke: var(--wab-f); filter: none; }
  .war-kante { animation: none; background: var(--wab-f); }
}
/* neue Wabe blendet sanft ein (nur beim Neuanlegen) */
.war-wabe.ein { animation: war-ein .5s ease-out backwards; }
@keyframes war-ein { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .war-wabe.ein { animation: none; } }

/* ── Felder rechts ── */
.war-wahl-liste { display: flex; flex-direction: column; gap: 8px; }
.war-wahl-liste > button { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: var(--marke-r-m); background: var(--marke-feld); color: var(--marke-text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.war-wahl-liste > button:hover { background: var(--marke-flaeche-2); }
.war-wahl-liste > button[aria-pressed="true"] { background: color-mix(in srgb, var(--wab-f) 14%, var(--marke-feld)); box-shadow: inset 0 0 0 1px var(--wab-f); }
.war-v-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.war-v-text small { font-size: 12px; color: var(--marke-text-2); }
.war-box { flex: none; width: 16px; height: 16px; border-radius: var(--marke-r-s); border: 1.5px solid var(--marke-text-3); display: grid; place-items: center; color: #fff; }
.war-box.rund { border-radius: 50%; }
[aria-pressed="true"] > .war-box { background: var(--wab-f); border-color: var(--wab-f); }
.war-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.war-pille { height: 28px; padding: 0 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-pill); background: var(--marke-flaeche); color: var(--marke-text); font: inherit; font-size: 13px; cursor: pointer; }
.war-pille:hover { border-color: var(--marke-linie-stark); }
.war-pille.an { background: var(--wab-f); border-color: var(--wab-f); color: #fff; }
.war-bilder { display: flex; flex-wrap: wrap; gap: 8px; }
.war-bilder button { padding: 2px; border: 0; border-radius: var(--marke-r-l); background: none; cursor: pointer; }
.war-bilder button.an { box-shadow: 0 0 0 2px var(--marke-flaeche), 0 0 0 4px var(--wab-f); }
.war-schalter { display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; color: var(--marke-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.war-knopf { flex: none; position: relative; width: 32px; height: 18px; border-radius: var(--marke-r-pill); background: var(--marke-linie-stark); transition: background .15s; }
.war-knopf::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--marke-flaeche); transition: transform .15s; }
.war-schalter.an .war-knopf { background: var(--wab-f); }
.war-schalter.an .war-knopf::after { transform: translateX(14px); }
.war-nie { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.war-nie li { display: flex; gap: 12px; padding: 8px 12px; border-radius: var(--marke-r-m); background: var(--marke-feld); font-size: 13px; color: var(--marke-text); }
.war-nie li svg { flex: none; margin-top: 2px; color: var(--marke-text-3); }

/* ── Wabe in der großen Karte des Agenten-Chats (statt Dialog): füllt die Karte unter der Kopfzeile, nichts überlagert ── */
.war-karte { position: absolute; inset: 0; z-index: 30; display: flex; min-width: 0; min-height: 0; container: warkarte / inline-size; overflow: hidden; border-radius: var(--wb-r, var(--marke-r-l)); background: var(--wb-karte, var(--marke-flaeche)); }
/* workspace-bento-chat.css blendet im Chat alles in der Karte außer Chat und Leiste aus (display:none !important) – die Wabe gehört bewusst dazu */
:root.ws-bento-chat #appShell > #warKarte.war-karte.war-karte.war-karte { display: flex !important; }
.war-modal.war-inkarte { --wab-f: var(--marke-nav-blau); --wab-ziel: #fff; flex: 1; display: flex; min-width: 0; min-height: 0; }
:root[data-theme="dark"] .war-modal.war-inkarte { --wab-ziel: var(--marke-flaeche); }
.war-inkarte .war-wabe-rahmen { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); border-radius: var(--wb-r, var(--marke-r-l)); overflow: hidden; }
.war-inkarte .war-sf-fuss { flex-wrap: wrap; }
.war-inkarte .war-buehne { container: wabenbuehne / size; padding: 0; }
/* Die Wabe passt sich dem freien Platz an (kein Scrollen der Übersicht): Höhe des Feldes = 5 r + 17 px, Breite = 5,2 r + 20 px */
.war-inkarte .war-wabenfeld { --r: clamp(36px, min(calc((100cqh - 64px) / 5), calc((100cqw - 56px) / 5.2)), 84px); }
@container wabenbuehne (max-height: 440px) { .war-inkarte .war-wabe small, .war-inkarte .war-mitte small { display: none; } .war-inkarte .war-mitte b { font-size: 12px; } .war-inkarte .war-mitte-leer b { white-space: normal; text-align: center; } }
@container wabenbuehne (max-width: 420px) { .war-inkarte .war-wabe small, .war-inkarte .war-mitte small { display: none; } .war-inkarte .war-wabe b { font-size: 11px; } .war-inkarte .war-mitte b { font-size: 12px; } .war-inkarte .war-mitte-leer b { white-space: normal; text-align: center; } }
/* schmale Karte (Fenster unter ~900 px): Wabe oben, Schritt-Spalte darunter; nur die Listen scrollen */
@container warkarte (max-width: 680px) {
  .war-inkarte .war-wabe-rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); }
  .war-inkarte .war-sf-kopf { padding: 12px 16px; }
  .war-inkarte .war-sf-inhalt { padding: 12px 16px; }
  .war-inkarte .war-sf-fuss { padding: 8px 16px; }
}

@media (max-width: 800px) {
  .war-wabe-rahmen { grid-template-columns: minmax(0, 1fr); }
  .war-buehne { padding: 16px 8px; }
  .war-wabenfeld { --r: 48px; }
  .war-wabe small { display: none; }
  .war-wabe b { font-size: 11px; }
  .war-wabe svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .war-wabe, .war-rahmen { transition: none; } }

/* ── Agenten-Spalte im Chat (nur im neuen Menü, Chat-Ansicht): Baustein BentoSpalte (bento-kern/bento-spalte.*), Ralph 08.11.2026.
   Die alte Unterhaltungsliste (#convList) bleibt unsichtbar im Dokument, weil Suche und Zeitraum-Filter an ihr hängen; gezeichnet wird die Spalte in #walLeiste. ── */
.wal { display: none; }
:root.wb-menue-modus.ws-bento-chat .wal.bsp { display: flex; width: 100%; flex: 1 1 auto; min-height: 0; border-left: 0; }
:root.wal-an.wb-menue-modus.ws-bento-chat #convList, :root.wal-an.wb-menue-modus.ws-bento-chat .wbc-filter { display: none !important; }
:root.wal-an.wb-menue-modus.ws-bento-chat #convSidebar { display: flex; flex-direction: column; padding: 0 !important; overflow: visible; }
@media (min-width: 1000px) {
  :root.wal-an.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .app-shell > #convSidebar { border-left: 0; padding: 0 !important; margin-left: var(--wbm-g, 24px); }
  :root.wal-an.wb-menue-modus.wb-menue-flaeche.ws-bento-chat .wal.bsp { border-left: 1px solid var(--wb-linie, color-mix(in srgb, var(--wb-text) 10%, transparent)); }
}
@media (max-width: 999px) { :root.wal-an.ws-bento-chat #convSidebar .wal { padding-top: 4px; } :root.wal-an.wb-menue-modus.ws-bento-chat #convSidebar { padding-bottom: 0 !important; } }

/* ── Grundwissen-Eintrag in „Agentenwissen“ (fest, nicht abwählbar) ── */
.war-gw { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: var(--marke-r-m); font: inherit; text-align: left; cursor: pointer;
  color: var(--marke-text); background: linear-gradient(135deg, color-mix(in srgb, var(--wab-f) 14%, var(--marke-feld)), var(--marke-feld)); box-shadow: inset 0 0 0 1px var(--wab-f); }
.war-gw-t { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.war-gw-t b { font-size: 13px; font-weight: 600; }
.war-gw-t small { font-size: 12px; color: var(--marke-text-3); }
.war-gw-k { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--marke-flaeche-2); color: var(--marke-text-2); }
.war-gw-k.ok { background: color-mix(in srgb, var(--wab-f) 18%, var(--marke-flaeche)); color: var(--marke-text); }
.war-gw-fest { flex: none; font-size: 11px; color: var(--marke-text-3); }
.war-gw-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border-radius: var(--marke-r-m); background: var(--marke-feld); }
.war-gw-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 12px; color: var(--marke-text); border-bottom: 1px solid var(--marke-linie); }
.war-gw-liste li:last-child { border-bottom: 0; }
.war-gw-liste li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-gw-s { flex: none; font-style: normal; font-size: 11px; color: var(--marke-text-3); }
.war-gw-s.s-offen, .war-gw-s.s-teils_offen { color: var(--marke-gefahr); }

/* Hauptknopf im Einrichter: Grafit statt Lila */
.war-modal .a4h-btn--primary { background: var(--marke-grafit); border-color: var(--marke-grafit); color: #fff; background-image: none; }
.war-modal .a4h-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--marke-grafit) 86%, #fff); border-color: transparent; filter: none; }
:root[data-theme="dark"] .war-modal .a4h-btn--primary { background: var(--marke-text); border-color: var(--marke-text); color: var(--marke-flaeche); }
.war-ordner-neu { align-self: flex-start; gap: 8px; }
.war-ordner-neu svg { width: 14px; height: 14px; }
.war-sf-rahmen { padding: 0; }
.war-ordner-rahmen { width: 100%; height: 100%; min-height: 420px; border: 0; background: var(--marke-flaeche); }