:root {
    /* =====================================================================
       ZENTRALE DESIGN-TOKENS – einzige Quelle der Wahrheit für Farben.
       Niemals Hex-Werte in Razor/Scoped-CSS duplizieren, immer hierauf
       referenzieren (var(--tri-…)). Auch scoped .razor.css erbt diese.
       ===================================================================== */

    /* Markengrün */
    --tri-green: #2e8b3d;          /* Standard (Buttons, Links, Akzente) */
    --tri-green-hover: #277a35;
    --tri-green-active: #1f5e28;
    --tri-green-dark: #14532d;     /* dunkler Akzent: Hover-Text, Links */
    --tri-green-soft: #cdeacf;     /* heller Akzent: weiche Ränder/Unterstriche */
    --tri-green-bg: #ebf6ed;       /* sehr heller Grün-Hintergrund (Hover-Flächen) */
    --tri-green-bg-active: #e1f1e4;/* aktiver Grün-Hintergrund (Sidebar active) */

    /* Grau & Text */
    --tri-text: #33373d;           /* Standard-Textfarbe */
    --tri-muted: #6c757d;          /* gedämpfter Text, Formular-Labels */
    --tri-muted-2: #4b5159;        /* etwas dunkler (Sekundärinfo, Nav-Text) */
    --tri-subtle: #495057;         /* Hinweis-Grau (z. B. „bearbeiten") */
    --tri-faint: #9aa0a6;          /* sehr blass (Abschnittstitel, Carets) */
    --tri-border: #e7e9ec;         /* Standard-Rahmen */
    --tri-surface: #f3f4f6;        /* Seiten-Hintergrund */
    --tri-ink: #1f2227;            /* schwarzer Sidebar-Kopf / mobiler Menü-Knopf */

    /* Akzentfarben */
    --tri-dialog: #e8590c;         /* „Nur im Dialog startbar"-Badge */
    --tri-secondary: #6c757d;      /* neutrale Sekundär-Pille (Kritiker-Badge) */
    --tri-red: #c0392b;            /* Gatekeeper (Security): Badge/Knoten */
    --tri-red-dark: #962d22;       /* dunkler Rot-Akzent (Gatekeeper-Knoten-Verlauf) */

    --bs-primary: var(--tri-green);
    --bs-primary-rgb: 46, 139, 61;
    --bs-success: var(--tri-green);
    --bs-success-rgb: 46, 139, 61;
    --bs-link-color: var(--tri-green);
    --bs-link-color-rgb: 46, 139, 61;
    --bs-link-hover-color: var(--tri-green-dark);
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--tri-surface);
    color: var(--tri-text);
}

/* Grün-Buttons (primary UND success) nutzen denselben zentralen Grünton. */
.btn-primary, .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tri-green);
    --bs-btn-border-color: var(--tri-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tri-green-hover);
    --bs-btn-hover-border-color: var(--tri-green-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tri-green-active);
    --bs-btn-active-border-color: var(--tri-green-active);
    --bs-btn-disabled-bg: var(--tri-green);
    --bs-btn-disabled-border-color: var(--tri-green);
}

.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--tri-green);
    --bs-btn-border-color: var(--tri-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tri-green);
    --bs-btn-hover-border-color: var(--tri-green);
    --bs-btn-active-bg: var(--tri-green);
    --bs-btn-active-border-color: var(--tri-green);
}

.text-primary, .text-success { color: var(--tri-green) !important; }
.bg-primary, .bg-success { background-color: var(--tri-green) !important; }
.text-bg-primary, .text-bg-success { background-color: var(--tri-green) !important; color: #fff !important; }

/* Einheitliche Bezeichnungsfelder (Formular-Labels): fett und dunkelgrau – überall gleich. */
.form-label {
    font-weight: 600 !important;
    color: var(--tri-muted) !important;
}

/* Klammer-/Zusatzhinweise im Label nicht fett (z. B. „(Markdown)", „(optional)"). */
.form-label .text-muted,
.form-label .small {
    font-weight: 400 !important;
}

/* Dashboard stat cards */
.stat-card {
    border: none;
    border-left: 0.3rem solid var(--accent, var(--tri-green));
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.3rem;
    color: #fff;
    background-color: var(--accent, var(--tri-green));
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 1.5rem;
}

/* Tag-Bubbles */
.tag-pill {
    background-color: var(--tri-green);
    color: #fff;
    font-weight: 500;
    padding: 0.4em 0.7em;
}

.tag-pill .tag-x {
    font-size: 0.55rem;
    padding: 0.25em;
    opacity: 0.85;
}

.tag-pill .tag-x:hover {
    opacity: 1;
}

.tag-x-btn {
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    font-size: 0.7rem;
    opacity: 0.85;
    cursor: pointer;
}

.tag-x-btn:hover { opacity: 1; }

/* Tag-Auswahlliste (Picker) */
.tag-picker {
    position: absolute;
    z-index: 1056;            /* über dem tag-pop-backdrop (1055), damit Einträge klickbar bleiben */
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 0.6rem;
    padding: 0.35rem;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.16);
}

/* Kopfzeile des Auswahl-Popups (MCP/Tool/Skill hinzufügen). */
.tag-picker-head {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.6rem 0.4rem;
}

.tag-picker-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    color: #33373d;
}

.tag-picker-item:hover {
    background-color: #ebf6ed;
    color: var(--tri-green);
}

/* Farb-Swatches (Tag-Verwaltung) */
.swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d0d3d8;
    cursor: pointer;
    padding: 0;
}

.swatch-active {
    box-shadow: 0 0 0 2px #212529;
}

/* Tag mit rundem Entfernen-Symbol (Detailansicht) */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.tag-chip .tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: inherit;
    opacity: 0.8;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.tag-chip .tag-remove:hover { opacity: 1; }
.tag-chip .tag-remove i { font-size: 1rem; }

/* Weißes "+"-Tag, das das Popover öffnet */
.tag-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #fff;
    color: #495057;
    border: 1px dashed #adb5bd;
    cursor: pointer;
}

.tag-add:hover { border-color: var(--tri-green); color: var(--tri-green); }

/* Popover zum Zuordnen/Anlegen von Tags */
.tag-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: transparent;
}

.btn-close-sm {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0.25rem;
}

.tag-pop {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.6rem;
}

.tag-pop-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 0.35rem 0.4rem;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.88rem;
}

.tag-pop-item:hover { background-color: #f3f5f7; }
.tag-pop-item input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; cursor: pointer; }
/* GLOBAL: Beim Ziehen ziehbarer Elemente (native HTML5-DnD, `draggable="true"`) darf KEIN Text markiert werden –
   sonst „färbt" das Ziehen die Inhalte blau ein (gilt für Ordnerbaum, Paletten, Agentenliste, Formular-Toolbox …).
   Eingabefelder innerhalb ziehbarer Elemente bleiben ausdrücklich markierbar. Pointer-basierte Drags (Agent-Designer)
   sind separat über `.wfd-canvas` abgedeckt. */
[draggable="true"], [draggable="true"] * { user-select: none; -webkit-user-select: none; }
[draggable="true"] input, [draggable="true"] textarea, [draggable="true"] [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
/* Zusätzlich für Ordnerbaum-/Paletten-Zeilen unabhängig vom draggable-Zustand (robust „überall"). */
.folder-agent-leaf, .folder-agent-leaf *, .folder-agent-row, .folder-agent-row * { user-select: none; -webkit-user-select: none; }
/* FolderTreeView: Schrift/Icons EXAKT wie die Menüpunkte (.nav-link 0.92rem / .nav-icon 1.05rem). */
.ftv .folder-node { font-size: 0.92rem; }
.ftv .folder-name { font-size: 0.92rem; font-weight: 400; }
.ftv .folder-agent-leaf { font-size: 0.92rem; padding-top: .25rem; padding-bottom: .25rem; }
.ftv .folder-agent-leaf-name { font-size: 0.92rem; font-weight: 400; color: #33373d; }
.ftv .folder-agent-leaf-num { font-size: 0.92rem; }
.ftv .folder-agent-leaf-icon { font-size: 1.05rem; }
.ftv input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; cursor: pointer; }
.ftv .folder-icon { font-size: 1.05rem; }

/* Kompakte Variante (z. B. im Tool-Einstellungen-Dialog): Schrift so groß wie der Erklärungstext darüber. */
.ftv-compact .ftv .folder-node,
.ftv-compact .ftv .folder-name,
.ftv-compact .ftv .folder-agent-leaf,
.ftv-compact .ftv .folder-agent-leaf-name,
.ftv-compact .ftv .folder-agent-leaf-num { font-size: .8rem; }
.ftv-compact .ftv .folder-agent-leaf-icon,
.ftv-compact .ftv .folder-icon { font-size: .9rem; }
.ftv-compact .ftv input[type="checkbox"] { width: 1rem; height: 1rem; }

/* Knowledge-Zuordnung (Liste + Hinzufügen-Popover): Schrift wie der Erklärungstext (.form-text). */
.kb-list, .kb-list .list-group-item, .kb-list label { font-size: .875rem; }
.kb-list .bi { font-size: 1rem; }
.kb-list label { cursor: pointer; margin: 0; }

.tag-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Zurück-Button auf gleiche Höhe wie die große Agenten-Nummer */
.btn-back {
    height: 3.2rem;
    width: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Große Agenten-Nummer in der Detailansicht */
.agent-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    height: 3.2rem;
    padding: 0 0.6rem;
    border-radius: 0.75rem;
    background: var(--tri-green);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(46,139,61,0.3);
}

/* Tag-Filter (Agentenliste): aufklappbares Popup mit mehrfach wählbaren Bubbles */
.tag-filter-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1056;
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: 0.6rem;
    padding: 0.6rem;
    max-height: 320px;
    overflow-y: auto;
}

.tag-filter-pill {
    border: 0;
    cursor: pointer;
    padding: 0.42em 0.75em;
    font-size: 0.82rem;
    opacity: 0.45;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.tag-filter-pill:hover {
    opacity: 0.8;
}

.tag-filter-pill.tag-filter-pill-on {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.22);
}

/* Kritiker-Agenten: graue Nummer statt grün */
.agent-id-badge.agent-id-badge-critic {
    background: #6f757d;
    box-shadow: 0 2px 6px rgba(111,117,125,0.3);
}

/* ---------- Kanban-Dashboard ---------- */

/* Kartenbewegungen werden per FLIP (Web Animations API) animiert – siehe index.html. */

/* Runder Benutzer-Avatar (Bild oder Symbol-Fallback) */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e7e9ec;
    color: #8a9099;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Runder Agenten-Avatar (hochgeladenes Bild oder Icon-Fallback) – überall statt des Agenten-Icons */
.agent-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e7e9ec;
    color: var(--tri-green, #4b9b5e);
    flex-shrink: 0;
    vertical-align: middle;
}
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kritiker-Avatare in Graustufe kenntlich machen */
.agent-avatar.agent-head-critic { filter: grayscale(1); color: #6c757d; }
/* Agenten-Avatar in der Chat-Nachricht (grüner Fallback-Hintergrund wie bisher) */
.agent-avatar.chat-msg-avatar { background: var(--tri-green); color: #fff; font-size: 1.15rem; }
/* Avatar-Zuschneide-Dialog – muss über dem Designer-Eigenschaften-Dialog (z-index 1100) liegen */
.avatar-crop-backdrop { z-index: 1190; }
.avatar-crop-dialog { z-index: 1200; }
.avatar-crop-stage { display: flex; justify-content: center; }
.avatar-crop-canvas { width: 256px; height: 256px; border-radius: 50%; touch-action: none; cursor: grab; background: #1113; }
.avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-zoom { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.3rem; }
.avatar-crop-zoom .form-range { flex: 1 1 auto; }
.wfd-avatar-tab .agent-avatar { background-color: #e7e9ec; }
/* „Avatar eines anderen Agenten übernehmen" – Liste der Agenten mit Avatar */
.wfd-avatar-reuse-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 12rem; overflow-y: auto; }
.wfd-avatar-reuse-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    border: 1px solid var(--tri-border, #dee2e6); border-radius: 2rem; background: #fff; cursor: pointer;
    max-width: 100%;
}
.wfd-avatar-reuse-item:hover:not(:disabled) { border-color: var(--tri-green); background: var(--tri-green-bg-active); }
.wfd-avatar-reuse-item:disabled { opacity: 0.6; cursor: default; }
.wfd-avatar-reuse-name { font-size: 0.85rem; color: var(--tri-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
/* Agentenliste: Avatar links, Name/Beschreibung rechts – Avatar über zwei Zeilen zentriert */
.agentlist-name-flex { display: flex; align-items: center; gap: 0.6rem; }
.agentlist-name-main { min-width: 0; }
.agentlist-avatar { flex: 0 0 auto; }
/* Fallback-Icon (kein Avatar) in der Agentenliste größer – überschreibt den Inline-font-size der Komponente */
.agentlist-avatar i { font-size: 1.9rem !important; }

/* ===== Kompakte Ordneransicht (Master-Detail): links Ordnerbaum, rechts Agenten des markierten Ordners =====
   Volle Resthöhe; Baum und Agentenliste scrollen UNABHÄNGIG (je eigenes overflow in der Grid-Zelle). */
.agentfolders-split { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); height: calc(100vh - 11rem); }
.agentfolders-tree { border-right: 1px solid var(--tri-border); display: flex; flex-direction: column; min-height: 0; }
.agentfolders-tree-scroll { padding: .5rem; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.agentfolders-tree-foot { border-top: 1px solid var(--tri-border); padding: .4rem; flex: 0 0 auto; }
.agentfolders-agents { padding: .35rem .25rem; overflow-y: auto; min-height: 0; }
/* Hover-„+" je Ordner zum Anlegen eines Unterordners. */
.agentfolders-addsub { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-left: .25rem; padding: 0; border: none; background: transparent; color: var(--tri-green); border-radius: .3rem; line-height: 1; opacity: 0; transition: opacity .12s; }
.agentfolders-folder:hover .agentfolders-addsub { opacity: 1; }
.agentfolders-addsub:hover { background: #d9efdd; }
/* Tags in der kompakten Agentenzeile (nur bei „Tags anzeigen"). */
.agentfolders-tags { display: flex; flex-wrap: wrap; gap: .2rem; margin-left: .4rem; min-width: 0; overflow: hidden; }
.agentfolders-folder { display: flex; align-items: center; padding: .32rem .4rem; border-radius: .45rem; cursor: pointer; user-select: none; }
.agentfolders-folder:hover { background: #f1f3f5; }
.agentfolders-folder.active { background: var(--tri-green-bg, #e8f4ea); }
.agentfolders-folder.drag-over { background: #d9efdd; outline: 2px dashed var(--tri-green); }
.agentfolders-caret { width: 1.1rem; flex: 0 0 auto; text-align: center; color: var(--tri-muted); font-size: .8rem; }
.agentfolders-folder-ic { color: var(--tri-green); margin-right: .35rem; flex: 0 0 auto; }
.agentfolders-folder-name { font-weight: 400; font-size: .875rem; color: var(--tri-text); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentfolders-count { flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: #fff; background: #6c757d; border-radius: 1rem; padding: .02rem .45rem; margin-left: .4rem; }
.agentfolders-agentrow { display: flex; align-items: center; gap: .55rem; padding: .32rem .5rem; border-bottom: 1px solid #f0f1f3; }
.agentfolders-agentrow:hover { background: #f8f9fa; }
.agentfolders-avatar { flex: 0 0 auto; border-radius: 50%; }
.agentfolders-avatar i { font-size: 1.05rem !important; }
.agentfolders-agent-name { min-width: 0; }
@media (max-width: 700px) {
    .agentfolders-split { grid-template-columns: 1fr; grid-template-rows: minmax(6rem, 38vh) 1fr; height: calc(100vh - 10rem); }
    .agentfolders-tree { border-right: none; border-bottom: 1px solid var(--tri-border); }
}
/* Agentennummer als Teil des Namens: echter Inline-Text (kein eigenes Box-Element) mit hellgrünem
   Hintergrund – dadurch liegt die Baseline automatisch bündig zum Agentennamen. */
.agent-num-inline {
    background: var(--tri-green-bg-active); color: var(--tri-green);
    border-radius: 0.3rem; padding: 0.02em 0.4em; margin-right: 0.25rem; font-weight: 700;
}
.agent-num-inline-critic { background: #e9ecef; color: #6c757d; }
/* Tag-Zeile je Agent (Option „Tags anzeigen"): einzeilig, bei Überlänge horizontal scrollbar */
.agentlist-tags { display: flex; gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; margin-top: 0.25rem; }
.agentlist-tag { flex: 0 0 auto; font-size: 0.65rem; line-height: 1.3; font-weight: 600; color: #fff;
    background: var(--tg, #2e8b3d); border-radius: 0.8rem; padding: 0.05rem 0.45rem; white-space: nowrap; }
/* Gehirn-Icon im Menüpunkt „LLM-Provider": global (scoped .nav-icon greift nicht auf das Kind-Komponenten-SVG).
   Layout-Breite = 1,25rem wie die übrigen Menü-Icons (Text bleibt bündig); optische Vergrößerung per transform
   (verändert die Layout-Box nicht) und minimale Anhebung, da die Zeichnung leicht unterhalb der viewBox-Mitte liegt. */
.nav-brain { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; overflow: visible; transform: scale(1.4) translateY(-0.8px); transform-origin: center; }
/* Gehirn-Icon im Seitenkopf „LLM-Provider" (grün, an .page-head-icon angeglichen) */
.page-head-brain { width: 1.9rem; height: 1.9rem; color: var(--tri-green); align-self: flex-start; flex: 0 0 auto; }
/* Nach-Nummer-sortieren-Umschalter im Namensspaltenkopf */
.agentlist-sort-num { margin-left: 0.5rem; color: var(--tri-muted, #8a9099); font-weight: 700; opacity: 0.6; }
.agentlist-sort-num.active { color: var(--tri-green); opacity: 1; }
.agentlist-sort-num:hover { opacity: 1; }
/* Kopf der Namensspalte um die Avatar-Breite (46px) + Abstand einrücken, damit „# Name" über den
   Zellinhalt „#id Agentenname" fällt statt über den Avatar. Erste Sortiermarke ohne Vorabstand. */
.agentlist-head-name { padding-left: calc(46px + 0.6rem + 0.5rem) !important; }
.agentlist-head-name .agentlist-sort-num { margin-left: 0; }

/* Avatar mit Kamera-Button (Foto wählen) in Dialogen */
.avatar-edit {
    position: relative;
    flex-shrink: 0;
}

.avatar-edit-btn {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--tri-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    border: 2px solid #fff;
}

.avatar-edit-btn:hover { background-color: #256e31; }

.kanban-board {
    display: grid;
    /* Alle Spalten dynamisch gleich breit in EINER Reihe (unabhängig von der Spaltenanzahl). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .kanban-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .kanban-board { grid-template-columns: 1fr; }
}

.kanban-col {
    background: var(--col-bg, #f4f5f7);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.9rem;
    padding: 0.75rem;
    min-height: 200px;
}

.kanban-col-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem 0.75rem;
}

.kanban-col-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--col-accent, #6c757d);
}

.kanban-col-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--col-accent, #6c757d);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.4rem;
    padding: 0.05rem 0.45rem;
}

/* Laufzeitanzeige in der Spalte "In Arbeit" */
.kanban-runtime { color: #80868b; }
.kanban-runtime-over { color: #dc3545; font-weight: 700; }

/* Stop-Button auf wartenden/laufenden Karten */
.kanban-stop-btn {
    border: none;
    background: none;
    color: #dc3545;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: 0.35rem;
    opacity: 0.7;
}
.kanban-stop-btn:hover { opacity: 1; background: #fdecea; }

/* Icon-Button zum Archivieren im Spaltenkopf */
.kanban-archive-btn {
    border: none;
    background: none;
    color: var(--col-accent, #6c757d);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 0.35rem;
    opacity: 0.65;
}
.kanban-archive-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kanban-empty {
    color: #9aa0a6;
    font-size: 0.85rem;
    text-align: center;
    padding: 1.25rem 0;
}

.kanban-col-foot {
    text-align: center;
    font-size: 0.75rem;
    color: #9aa0a6;
    padding: 0.6rem 0.4rem 0.1rem;
}

.kanban-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 0.7rem;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    min-height: 7rem;   /* Karten etwas höher */
}
/* Kopfzeile: Agentennummer + Name (ohne Symbol). */
.kanban-card-head-row { display: flex; align-items: flex-start; gap: 0.4rem; flex-wrap: nowrap; margin-bottom: 0.35rem; }
/* Titel als Text-Block; die #-Nummer sitzt inline als erster Teil des Namens → umgebrochene Zeilen beginnen
   linksbündig unter dem Chip (kein Einzug). */
.kanban-card-head-row .kanban-card-title { display: flex; align-items: flex-start; gap: 0.5rem; flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
/* Titeltext schrumpfbar + ellipsis, damit die Prioritäts-/Dialog-Badge daneben nicht den Namen überlappt. */
.kanban-card-head-row .kanban-card-titletext { overflow: hidden; text-overflow: ellipsis; }
.kanban-card-head-row .kanban-priority { flex: 0 0 auto; align-self: flex-start; }
/* Nummer + Name als eine Inline-Zeile (ein Flex-Item), damit die Baselines bündig sind; Avatar bleibt separates Item. */
.kanban-card-titletext { min-width: 0; }
.kanban-card-title .agent-id-chip {
    display: inline-block; height: auto; min-width: 0;
    padding: 0.05rem 0.35rem; margin-right: .25rem;
    vertical-align: baseline; line-height: 1.2;
}
/* Payload-Kurzanzeige (Details-Button). */
.kanban-card-payload {
    margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed var(--tri-border);
    font-size: 0.72rem; color: var(--tri-muted); line-height: 1.3; word-break: break-word;
}
.kanban-card-payload-label { font-weight: 700; color: #9aa0a6; margin-right: 0.35rem; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.03em; }
/* Fuß-Buttonleiste: RUN, Designer, Stopp, Details – als kleine Buttons unten. */
.kanban-card-actions { display: flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; flex-wrap: wrap; border-top: 1px solid #e8eaed; }
.kanban-mini-btn {
    display: inline-flex; align-items: center; gap: 0.25rem; height: 1.6rem; padding: 0 0.5rem;
    border-radius: 0.4rem; border: 1px solid var(--tri-border); background: #fff; color: var(--tri-muted);
    font-size: 0.72rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.kanban-mini-btn:hover { color: var(--tri-green); border-color: var(--tri-green); }
.kanban-mini-btn.is-active { color: var(--tri-green); border-color: var(--tri-green); background: #ebf6ed; }
.kanban-mini-btn-stop { color: #d9534f; }
/* Sub-Lauf-/Task-Marker in der Pipeline: eigene (bernsteinfarbene) Kennzeichnung + Verweis auf den Parent-Lauf. */
.kanban-mini-sub { color: #b45309; border-color: #f2d9a8; background: #fdf6e9; }
.kanban-mini-sub:hover { color: #92400e; border-color: #e0a94a; }
/* Task-/Sub-Lauf-Liste auf der Pipeline-Karte: je Zeile ein Status-Punkt + gekürzter Titel, Klick → Lauf-Detail. */
/* Task-Liste in der Pipeline-Karte: exakt an den Kopf-Meta-Zeilen (.kanban-card-times) ausgerichtet –
   gleiche Schriftgröße (.74rem) und Farbe (#80868b), Icon wie dort (bi-Icon in Textgröße + .25rem Abstand,
   1em Vorschub → Text fluchtet mit Kopf-Icons/-Texten), linksbündig ohne Extra-Padding. */
.kanban-card-tasks { display: flex; flex-direction: column; margin: .35rem 0 .15rem; }
.kanban-task-row { display: flex; align-items: center; text-decoration: none; color: #80868b; font-size: .74rem; line-height: 1.5; }
.kanban-task-row:hover { color: var(--tri-green); }
.kanban-task-title { flex: 1 1 auto; min-width: 0; }
.kanban-task-ic { flex: 0 0 auto; margin-right: .25rem; font-size: 1em; text-align: center; }
.kanban-task-more { display: block; font-size: .74rem; color: var(--tri-green, #3a9b4e); text-decoration: none; margin-top: .1rem; }
.kanban-task-more:hover { text-decoration: underline; }
/* Agentenläufe-Liste: delegierte Sub-Läufe leicht hinterlegt (stehen eingerückt unter dem Parent). */
.run-delegated-row > td { background: #fafbfa; }
.kanban-mini-btn-stop:hover { color: #b52b27; border-color: #d9534f; background: #fdecea; }
.kanban-card-designer {
    position: absolute; right: .5rem; bottom: .45rem;
    width: 1.7rem; height: 1.7rem; border-radius: .4rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tri-muted); border: 1px solid var(--tri-border); background: #fff;
    font-size: .85rem; text-decoration: none;
}
.kanban-card-designer:hover { color: var(--tri-green); border-color: var(--tri-green); }

.kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.kanban-card-id {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #9aa0a6;
    margin-bottom: 0.25rem;
}

.kanban-card-run-link {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.kanban-card-title {
    display: flex;
    align-items: flex-start;   /* Agentenkopf oben am (mehrzeiligen) Text, nicht mittig */
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tri-muted-2);
    text-decoration: none;
    margin-bottom: 0.45rem;
}

/* Statusfarbenes Agenten-Symbol (bi-robot, wie im Menü) auf der Karte – fett, Farbe je Status inline gesetzt. */
.kanban-card-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    font-weight: bold;
    -webkit-text-stroke: 0.4px currentColor;   /* Icon-Font kennt keine Schriftstärke → Glyph kräftiger zeichnen */
}

/* … und in der Lauf-Detailansicht (so hoch wie Titel + Unterzeile) */
.run-detail-icon {
    height: 72px;
    width: auto;
}

/* Einstellungen: Abschnitte */
.settings-section {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #eceef0;
}

.settings-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.settings-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2b2f36;
    margin-bottom: 0.75rem;
}

/* Lauf-Detail: grüne Icon-Kachel im Kopf */
.run-detail-tile {
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem;
    background-color: var(--tri-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

/* Audit-Zeitstrahl */
.run-timeline-item {
    position: relative;
    padding-left: 1.4rem;
    padding-bottom: 0.85rem;
}

.run-timeline-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 0;
    width: 2px;
    background-color: #d7e3da;
}

.run-timeline-item:last-child {
    padding-bottom: 0;
}

.run-timeline-item:last-child::before {
    bottom: auto;
    height: 9px;
}

.run-timeline-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--tri-green);
}

.run-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.run-timeline-time {
    font-size: 0.75rem;
    color: #8a9099;
}

/* Benachrichtigungs-Karten im Lauf-Detail */
.run-notif-card {
    border: 1px solid #e7e9ec;
    border-radius: 0.65rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
}

.run-notif-card:last-child {
    margin-bottom: 0;
}

.run-notif-hitl {
    background-color: #f6f7f9;
}


.kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.55rem;
}

.kanban-card-times {
    font-size: 0.74rem;
    color: #80868b;
    margin-bottom: 0.5rem;
}

.kanban-card-error {
    font-size: 0.78rem;
    color: #b02a37;
    background: #fdf0f1;
    border-left: 3px solid #dc3545;
    border-radius: 0.3rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-priority {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0.3rem;
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
}
.kanban-priority-low { background: #eceff1; color: #607d8b; }
.kanban-priority-high { background: #fff3e0; color: #e65100; }
.kanban-priority-immediate { background: #fdecea; color: #c62828; }
.kanban-priority-dialog { background: #e1f1e4; color: #1e6b2c; }

.kanban-card-foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-top: 1px solid #f1f3f4;
    padding-top: 0.55rem;
}

.kanban-card-foot .agent-id-chip {
    min-width: 1.6rem;
    height: 1.3rem;
    font-size: 0.72rem;
    border-radius: 0.35rem;
}

.kanban-card-agent {
    font-size: 0.8rem;
    color: #5f6368;
}

.kanban-card-link {
    color: #9aa0a6;
    font-size: 0.85rem;
    text-decoration: none;
}

.kanban-card-link:hover { color: var(--tri-green-dark); }

/* Modernes Benutzer-Modal */
/* Modal-Overlay fängt Scrollen ein: verhindert, dass das Scrollen (auch über Kopf/Fuß/Backdrop) an die Seite
   dahinter durchschlägt („Hintergrund scrollt statt Popup-Inhalt"). */
.modal.d-block { overscroll-behavior: contain; }

.user-modal {
    border-radius: 1.1rem;
    /* Kein overflow:hidden – sonst werden Popover/Menüs (z. B. „Tags zuordnen") am Modalrand abgeschnitten.
       Die runden Ecken werden stattdessen an Kopf/Fuß bzw. dem letzten Body einzeln gesetzt. */
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.user-modal-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef0f2;
    border-top-left-radius: 1.1rem;
    border-top-right-radius: 1.1rem;
}
.user-modal-foot {
    border-bottom-left-radius: 1.1rem;
    border-bottom-right-radius: 1.1rem;
}
/* Dialoge ohne Fußzeile (z. B. Typ-Auswahl): unteren Body abrunden. */
.user-modal > .modal-body:last-child {
    border-bottom-left-radius: 1.1rem;
    border-bottom-right-radius: 1.1rem;
}
.user-modal-avatar {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tri-green), #4caf50);
    box-shadow: 0 4px 10px rgba(46,139,61,0.35);
}
.user-modal-body { padding: 1.5rem; }
/* Modal, bei dem der INHALT scrollt statt das Fenster zu wachsen: feste Maximalhöhe, Kopf/Fuß bleiben,
   nur der Body scrollt. Robust auch in Safari (kein verlässliches max-height:Xvh auf zentrierten Flex-Bodys). */
.user-modal.user-modal-scroll { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); overflow: hidden; }
/* Falls ein <EditForm>/<form> Kopf/Body/Fuß umschließt: es muss selbst die Flex-Spalte weiterreichen. */
.user-modal.user-modal-scroll > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Descendant-Selektoren (nicht „>"), damit es mit UND ohne Form-Wrapper funktioniert. */
.user-modal.user-modal-scroll .user-modal-head,
.user-modal.user-modal-scroll .user-modal-foot { flex: 0 0 auto; }
/* Body füllt den Rest und scrollt. Höhe übernimmt der Flex (passt sich Kopf-/Fußhöhe automatisch an);
   Voraussetzung ist modal-no-lock, sonst friert modal-height-lock.js die min-height ein. */
.user-modal.user-modal-scroll .user-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* STANDARD für größere/tab-basierte Dialoge: KONSTANTE (feste) Höhe. Das Popup öffnet immer gleich groß und
   springt beim Tab-Wechsel NICHT; der Body (bzw. der aktive Tab) scrollt intern. Bei vielen Feldern Tabs
   (trinidat-tabs) verwenden. Pflicht-Kombi: `user-modal user-modal-fixed modal-no-lock` (modal-no-lock, sonst
   friert modal-height-lock.js die min-height ein). Funktioniert mit UND ohne <EditForm>/<form>-Wrapper. */
.user-modal.user-modal-fixed { display: flex; flex-direction: column; height: min(780px, 94vh); overflow: hidden; }
.user-modal.user-modal-fixed > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.user-modal.user-modal-fixed .user-modal-head,
.user-modal.user-modal-fixed .user-modal-foot { flex: 0 0 auto; }
.user-modal.user-modal-fixed .user-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Trigger-Dialog mit Tabs: KONSTANTE (feste) Höhe als Flex-Spalte, damit das Popup beim Tab-Wechsel nicht
   springt. Der aktive Tab füllt den Platz; lange Inhalte scrollen intern. */
.trigger-modal-body { display: flex; flex-direction: column; height: min(36rem, 76vh); overflow: hidden; }
.trigger-tab-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: flex-start; }
.trigger-tab-fill { flex: 1 1 auto; min-height: 0; }
.user-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #eef0f2;
}
.role-toggle {
    display: flex;
    gap: 0.5rem;
}
.role-option {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #dde1e5;
    border-radius: 0.6rem;
    background: #fff;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.role-option:hover { border-color: var(--tri-green); color: var(--tri-green); }
.role-option.active {
    border-color: var(--tri-green);
    background: #e1f1e4;
    color: #1e6b2c;
}

/* Sortierbare Tabellen-Überschriften */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover { background-color: #e9ecef; }

/* Kleine Agenten-Nummer für Listen/Überschriften */
.agent-id-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.3rem;
    padding: 0 0.4rem;
    border-radius: 0.35rem;
    /* Helles Marken-Grün wie das aktive Menü (branding-fähig: leitet sich bei aktivem Branding
       automatisch aus der Signature-Farbe ab – dieselben Tokens wie die Sidebar). */
    background: var(--tri-green-bg-active);
    color: var(--tri-green);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* Agentenkopf-Symbol in der Liste (grün; Kritiker grau via Graustufenfilter).
   Höhe an den zweizeiligen Textblock (Name + Beschreibung) rechts angeglichen. */
.agent-head {
    height: 2.4rem;
    width: auto;
    flex: 0 0 auto;
    display: block;
}

/* Etwas größere Nummern-Variante für die Agentenliste (Worker grün, Kritiker grau). */
.agent-id-chip-lg {
    min-width: 2.3rem;
    height: 1.95rem;
    padding: 0 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

/* In Titel/Namen integrierte Agentennummer: dunkelgrau, gleiche Schriftart wie der Name. */
/* Agentennummer (z. B. „#32") vor dem Namen: IMMER fett + grau, mit Abstand zum Namen. */
.agent-num {
    color: var(--tri-subtle);
    font-weight: 600;
    margin-right: .35rem;
}

/* Run-Detail-Kopf: EINZEILIG – Nummer-Badge, Agentenname (kürzt via Ellipsis) und RUN-Nummer nebeneinander (Links → Designer mit Lauf). */
/* Alle drei Elemente (Nummer-Badge, Agentenname, RUN-Nummer) als flache, an der Grundlinie ausgerichtete Zeile –
   so teilen Name und „RUN-…" exakt dieselbe Textbasislinie (früher lag der Name in einem verschachtelten Flex-Container,
   dessen synthetische Baseline die RUN-Nummer nach oben versetzte). */
.run-title-block { display: flex; flex-direction: row; align-items: baseline; gap: 0.5rem; min-width: 0; }
/* Agentennummer, Agentenname und Laufnummer im Lauf-Kopf: EINHEITLICHE Schriftgröße (= Titelgröße, per inherit) und
   gleiche line-height, damit sie über align-items:baseline sauber auf EINER Baseline sitzen. */
.agent-num-badge {
    flex: 0 0 auto; font-weight: 700; font-size: inherit; line-height: 1.2; color: var(--tri-green-dark, #1e5a2b);
    background: var(--tri-green-bg, #e8f4ea); border: 1px solid var(--tri-green-soft, #cfe8d5);
    border-radius: 0.5rem; padding: 0 0.45rem; text-decoration: none;
}
.agent-num-badge:hover { background: var(--tri-green-bg-active, #d8ecdd); color: var(--tri-green-dark, #1e5a2b); }
.run-title-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; line-height: 1.2; }
.run-num-link { flex: 0 0 auto; white-space: nowrap; font-size: inherit; line-height: 1.2; font-weight: 600; color: var(--tri-muted, #6b7280); text-decoration: none; }
.run-num-link:hover { color: var(--tri-green); text-decoration: underline; }
.run-num-sub { color: var(--tri-green, #3a9b4e); }
.run-num-sub:hover { color: var(--tri-green-dark, #277a35); text-decoration: underline; }

/* Agentenname im Seitentitel: Markengrün. */
.agent-name-title {
    color: var(--tri-green);
}

.agent-head-critic {
    filter: grayscale(1) brightness(1.05);
}

/* Größerer Kopf für Detail-/Kopfbereiche (passt zur Höhe des Nummern-Badges). */
.agent-head-lg {
    height: 3.2rem;
}

/* Kritiker-Agenten: helles Grau (analog zum hellen Grün der Worker-Nummer). */
.agent-id-chip-critic {
    background: #eceef0;
    color: #6f757d;
}

/* Drag&Drop-Tabelle für Skills (vorangestellte Prompts) */
.skill-order-table tbody tr {
    cursor: grab;
}

.skill-order-table tbody tr.skill-row-dragging {
    opacity: 0.5;
    background: #ebf6ed;
}

.skill-order-table .bi-grip-vertical {
    cursor: grab;
}

/* Aktionen-Menü (Kebab) in der Agentenliste. */
/* Aktionsmenü darf aus dem Tabellen-Container herausragen (sonst wird das Popup bei den
   unteren Zeilen abgeschnitten). */
.agents-table-wrap,
.triggers-table-wrap,
.bucket-table-wrap {
    overflow: visible;
}

/* Tabellen-Wrapper mit Zeilen-Aktionsmenü (agent-actions-menu) sichtbar lassen, damit das absolut
   positionierte Menü nicht vom horizontalen Scroll-Container (table-responsive) abgeschnitten wird. */
.memory-table-wrap,
.db-table-wrap { overflow: visible; }

.agent-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1056;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 0.6rem;
    padding: 0.35rem;
    text-align: left;
}

/* Bei den unteren Zeilen nach oben öffnen, damit das Menü im sichtbaren Bereich bleibt. */
.agent-actions-menu-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.agent-actions-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    color: #33373d;
}

.agent-actions-item:hover {
    background-color: #ebf6ed;
}

/* Gefährliche Aktion (z. B. Löschen): roter Hover statt grün. */
.agent-actions-item.text-danger:hover {
    background-color: #fdecec;
}

/* Trenner zwischen Aktionsgruppen im Zeilen-Menü. */
.agent-actions-sep {
    height: 1px;
    background: #e2e4e8;
    margin: 0.3rem 0.25rem;
}

/* ---------- Ordner-TreeView ---------- */
.folder-tree {
    user-select: none;
}

/* Ordner-Auswahl als Popup (z. B. Filter in der Agentenliste). */
.folder-filter-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1056;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 0.6rem;
    padding: 0.4rem;
    max-height: 22rem;
    overflow: auto;
    user-select: none;
}

.folder-node {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;       /* gleiche Größe wie die Agenten-Blätter */
    transition: background 0.12s, box-shadow 0.12s;
}

.folder-node:hover {
    background: #f1f5f2;
}

.folder-node.selected {
    background: #e4f3e7;
    box-shadow: inset 3px 0 0 var(--tri-green);
}

/* Ordner, der direkt oder in einem Unterordner (rekursiv) einen markierten Bucket enthält: deutlich hervorgehoben. */
.folder-node.folder-has-selected {
    background: #eaf6ee;
    box-shadow: inset 3px 0 0 var(--tri-green);
}
.folder-node.folder-has-selected .folder-name { color: var(--tri-green-dark, #1e7a43); font-weight: 600; }
.folder-node.folder-has-selected .folder-icon { color: var(--tri-green-dark, #1e7a43); }

/* Hervorhebung beim Darüberziehen eines Agenten (Drop-Ziel). */
.folder-node.drag-over {
    background: #d7efdc;
    box-shadow: 0 0 0 2px var(--tri-green) inset;
}

.folder-caret {
    width: 1rem;
    display: inline-flex;
    justify-content: center;
    color: #8a9099;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.folder-icon {
    color: var(--tri-green);   /* TriniDat-Grün */
    font-size: 1.25rem;        /* etwas größer */
    flex: 0 0 auto;
}

/* Pausierte Trigger-Zeile dezent ausgrauen (Bezeichnung/Aktionen bleiben bedienbar). */
.trigger-paused td:not(:last-child) {
    opacity: 0.55;
}

.folder-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-count {
    flex: 0 0 auto;
    min-width: 1.4rem;
    text-align: center;
    background: #e9ecef;
    color: #495057;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
}

/* Aktions-Buttons je Knoten: erst beim Hovern sichtbar – und reservieren vorher KEINEN Platz
   (Breite 0), damit der Ordnername die volle Breite nutzen kann und nur beim Hovern gekürzt wird. */
.folder-actions {
    display: inline-flex;
    gap: 0.15rem;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.12s;
    flex: 0 0 auto;
}

.folder-node:hover .folder-actions {
    opacity: 1;
    width: auto;
}

.folder-actions button {
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0.1rem 0.3rem;
    border-radius: 0.35rem;
    line-height: 1;
}

.folder-actions button:hover {
    background: #ffffff;
    color: var(--tri-green);
}

/* Agenten-Blatt im Baum (unter einem Ordner) – kompakt, dezent. */
.folder-agent-leaf {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 0.5rem;
    cursor: grab;
    font-size: 0.82rem;
}

.folder-agent-leaf:hover {
    background: #f1f5f2;
}

/* Klickbarer Agent (z. B. im Designer-Baum) + aktuell geöffneter Agent */
.folder-agent-leaf.is-clickable { cursor: pointer; }
.folder-agent-leaf.is-clickable .folder-agent-leaf-name { cursor: pointer; }
.folder-agent-leaf.active { background: #e7f4ea; }
.folder-agent-leaf.active .folder-agent-leaf-name { color: var(--tri-green-hover, #277a35); font-weight: 600; }

.folder-agent-leaf:active {
    cursor: grabbing;
}

.folder-agent-leaf-icon {
    color: #9aa0a6;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

/* Agentennummer: fett, dunkelgrau, mit Abstand zum Namen (#106782). */
.folder-agent-leaf-num {
    color: #495057;
    font-weight: 700;
    margin-right: 0.4rem;
}

/* Agentenname: normal (nicht fett), dezente Farbe, beim Hovern grün. */
.folder-agent-leaf-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #33373d;
    font-weight: 400;
    text-decoration: none;
}

.folder-agent-leaf-name:hover {
    color: var(--tri-green);
}

.folder-agent-leaf-remove {
    border: none;
    background: transparent;
    color: #adb5bd;
    padding: 0.05rem 0.3rem;
    border-radius: 0.35rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.12s;
    flex: 0 0 auto;
}

.folder-agent-leaf:hover .folder-agent-leaf-remove {
    opacity: 1;
}

.folder-agent-leaf-remove:hover {
    background: #fff;
    color: #dc3545;
}

/* Farbiger Tag-Punkt am Ordnerknoten. */
.folder-tag-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Agenten-Zeile (rechts), per Drag&Drop einem Ordner zuweisbar – kompakt. */
.folder-agent-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid #eceef1;
    border-radius: 0.5rem;
    margin-bottom: 0.2rem;
    background: #fff;
    cursor: grab;
    font-size: 0.92rem;
}
.folder-agent-row .folder-agent-leaf-name { font-weight: 400; color: #33373d; font-size: 0.92rem; }
.folder-agent-row .folder-agent-leaf-num { font-size: 0.92rem; }
.folder-agent-row .folder-agent-leaf-icon { font-size: 1.05rem; }
/* Ressourcen-Icons (Memory/Workspace/Datenbank/Konnektor/Tool) in Zeilen & Baum immer GRÜN. */
.folder-row-ic-green { color: var(--tri-green, #2e8b3d); font-size: 1.05rem; flex: 0 0 auto; }

.folder-agent-row:hover {
    border-color: #cfe6d5;
    background: #fafdfb;
}

.folder-agent-row:active {
    cursor: grabbing;
}

/* Topbar: angemeldeter Benutzer */
.topbar-user {
    color: #cfd2d6;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* Klickbarer Benutzername in der Topbar (öffnet das Profil) */
.topbar-user-btn {
    align-items: center;
    background: none;
    border: none;
    color: #cfd2d6;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
}
.topbar-user-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* API-Token-Liste in Profil-/Benutzer-Dialogen */
.token-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.token-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e6e8ea;
    border-radius: 0.5rem;
    background: #f8f9fa;
}
.token-value {
    display: block;
    font-size: 0.75rem;
    color: #4b5159;
    word-break: break-all;
}

/* Lauf-Historie */
.list-group-item-action.active-run {
    background-color: #e1f1e4;
    border-left: 3px solid var(--tri-green);
}

.chat-bubble {
    max-width: 85%;
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}

.chat-out {
    background-color: #e1f1e4;
    border: 1px solid var(--tri-green-soft);
}

.chat-in {
    background-color: #f1f3f5;
    border: 1px solid #e6e8ea;
}

/* Volle-Breite-Chatnachrichten (Claude-Desktop-Stil) */
.chat-msg {
    width: 100%;
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.chat-msg-out {
    background-color: #fff;
    border: 1px solid var(--tri-border);
}

/* Payload/JSON als Chat-Nachricht: eingerückt, umbrechend statt horizontalem Scroll */
.chat-json {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin-top: 0.25rem;
}

.chat-msg-in {
    background-color: #f7f8fa;
    border: 1px solid #e6e8ea;
}

.chat-msg-critic {
    background-color: #fff4e3;
    border: 1px solid #ffd9a0;
}

/* Finale, vom Lauf übernommene Antwort: schlichtes graues Rechteck mit runden Ecken. */
.chat-msg-final {
    border: 1px solid var(--tri-border);
    border-radius: 0.6rem;
    box-shadow: none;
}

.chat-msg-critic .chat-msg-head {
    color: #b45e09;
}

/* TaskDelegation-Start: eigener, deutlich abgesetzter Block (grünlich) mit Link zum delegierten Lauf. */
.chat-msg-deleg {
    background-color: #eef7f0;
    border: 1px solid #bfe0c8;
    border-left: 3px solid var(--tri-green, #2e7d32);
}
.chat-msg-deleg .chat-msg-head {
    color: var(--tri-green-dark, #1e5a2b);
}

.chat-msg-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5159;
    margin-bottom: 0.35rem;
}

.chat-tokens {
    font-size: 0.7rem;
    font-weight: 400;
    color: #9aa0a6;
    margin-left: 0.4rem;
}

.chat-copy {
    border: none;
    background: none;
    color: #9aa0a6;
    padding: 0 0.25rem;
    line-height: 1;
    cursor: pointer;
    font-size: 0.9rem;
}

.chat-copy:hover { color: var(--tri-green); }

.chat-activity > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    background: #f3f4f6;
    border: none;
    border-radius: 999px;
    color: var(--tri-text);
    font-size: 0.85rem;
    font-weight: 600;
}
.chat-activity > summary::-webkit-details-marker { display: none; }
.chat-activity > summary:hover { background: #eceef1; }
.chat-activity-bulb { color: var(--tri-green); font-size: 0.92rem; }
.chat-activity-caret-end { margin-left: 0.4rem; color: #6a7078; font-size: 0.78rem; transition: transform 0.15s; }
.chat-activity[open] > summary .chat-activity-caret-end { transform: rotate(180deg); }

/* Schritt-Timeline (Denk- & Tool-Schritte) */
.chat-activity-body.chat-steps { background: transparent; border-left: 2px solid #eceef1; padding: 0 0 0 0.5rem; margin-top: 0.5rem; font-size: inherit; }
.chat-step { display: flex; gap: 0.5rem; padding: 0.35rem 0 0.35rem 0.5rem; }
.chat-step-icon { color: #6a7078; font-size: 0.82rem; margin-top: 0.15rem; flex: 0 0 auto; }
.chat-step-main { min-width: 0; }
.chat-step-title { font-weight: 700; color: var(--tri-text); font-size: 0.82rem; }
.chat-step-detail { color: var(--tri-muted, #8a9099); font-size: 0.76rem; overflow-wrap: anywhere; }

.chat-activity-body {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #f6f8f9;
    border-left: 3px solid #c9d3cb;
    border-radius: 0.35rem;
    font-size: 0.82rem;
}

/* Immer sichtbare Abschnitte im Chat-Verlauf (Denkprozess, Tool-/MCP-Aufrufe) – kein Ein-/Ausklappen. */
.chat-section-head {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.chat-section-body {
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: #f6f8f9;
    border-left: 3px solid #c9d3cb;
    border-radius: 0.35rem;
    font-size: 0.82rem;
}

/* Tool-Aktivitäten: Tabelle mit aufklappbaren Zeilen (Parameter + Ergebnis). */
.run-toolcall-name {
    font-weight: 600;
    color: var(--bs-emphasis-color, #212529);
}
.run-toolcall-detail > td {
    background: #f6f8f9;
}

/* Live mitlaufender Text auf der Lauf-Detailseite – in voller Länge, Zeilenumbrüche erhalten, KEIN Scroll-Bereich
   (eigene Klasse, damit die scrollbare .chat-live-text aus Chat/Test-Dialog hier nicht greift). */
.run-live-text {
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: 0.82rem;
    margin-top: 0.35rem;
}

.progress-history {
    border-top: 1px solid #dde0e4;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    max-height: 55vh;
    overflow-y: auto;
}

.progress-activity-log {
    background: #f0f4f1;
    border-left: 3px solid var(--tri-green);
    border-radius: 0.4rem;
    padding: 0.4rem 0.75rem;
}

.progress-activity-item {
    font-size: 0.82rem;
    color: #3a4a3d;
    padding: 0.1rem 0;
}

/* Composer: Eingabefeld mit +-Button (Anhänge) und grünem Senden-Button */
.composer {
    border: 1px solid #e3e6ea;
    border-radius: 0.9rem;
    background: #fff;
    padding: 0.7rem 0.85rem 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Dezenter, neutraler Fokus – kein grüner Rahmen/Glow (Design-Vorgabe) */
.composer:focus-within {
    border-color: #cfd4da;
    box-shadow: none;
}

.composer-text {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    /* Deutlich höheres Eingabefeld; vom Nutzer vertikal vergrößerbar (#106823). */
    resize: vertical;
    min-height: 5.5rem;
    background: transparent;
    font: inherit;
    line-height: 1.45;
}

.composer-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.composer-add {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: #4b5159;
    font-size: 1.1rem;
    cursor: pointer;
    margin-bottom: 0;
}

.composer-add:hover { background: #eef0f3; }
.composer-add.disabled { opacity: 0.4; pointer-events: none; }

.composer-send {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.65rem;
    background: var(--tri-green);
    color: #fff;
    font-size: 1.05rem;
    transition: background 0.15s;
}

.composer-send:hover:not(:disabled) { background: #1e6b2c; }
.composer-send:disabled { opacity: 0.45; }

/* Datei-Drop auf den Composer: Rahmen hervorheben + Overlay-Hinweis (nur beim Ziehen sichtbar). */
.composer.composer-dragover { border-color: var(--tri-green); box-shadow: 0 0 0 2px rgba(46,139,61,.18); }
.composer-drophint {
    display: none; position: absolute; inset: 0; z-index: 3;
    align-items: center; justify-content: center;
    border-radius: 0.9rem; background: rgba(46,139,61,.06);
    border: 2px dashed var(--tri-green); color: var(--tri-green); font-weight: 600; font-size: 0.9rem;
    pointer-events: none;
}
.composer.composer-dragover .composer-drophint { display: flex; }

/* Datenbank-Browser: Primärschlüssel-Zelle als Link (öffnet Popup referenzierender Tabellen). */
.db-pk-link { color: var(--tri-green); font-weight: 600; cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--tri-green); }
.db-pk-link:hover { color: var(--tri-green-dark, #246b30); border-bottom-style: solid; }

/* ===== Modernes Chat-Fenster (AgentChatPanel): flach, Avatar + Name/Zeit + Text (kein Sprechblasen-Stil) ===== */
.chat-conv { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-conv > .chat-thread {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    background: #fff; padding: 0.25rem 0.25rem 0.5rem;
}
.chat-conv > .chat-composer { flex: 0 0 auto; padding: 0.85rem 1rem 1rem; border-top: 1px solid #eef0f2; }

.chat-msg { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 0.75rem; border-bottom: 1px solid #f0f1f3; }
.chat-msg:last-child { border-bottom: none; }
/* Finale Antwort: allseitiger grauer Rahmen auch als last-child (sonst nimmt .chat-msg:last-child die Unterkante weg). */
.chat-msg.chat-msg-final { border: 1px solid var(--tri-border); border-radius: 0.6rem; box-shadow: none; }
/* Run-Kontext-Nachrichten (RunDetail/AgentRuns/AgentTest) als gestapelter Block: Meta-Kopf OBEN (horizontal über die
   volle Breite), Inhalt + Anhänge darunter – NICHT links daneben. Gilt nicht für den Chat-Dialog (.chat-msg.user/.agent).
   Muss nach der .chat-msg{display:flex}-Regel stehen, um deren Flex-Spalten-Layout zu überschreiben. */
.chat-msg-out, .chat-msg-in, .chat-msg-critic { display: block; }
/* Meta-Kopf über die Breite verteilt (Name, Badge, Uhrzeit, Tokens nebeneinander). */
.chat-msg-out > .chat-msg-head, .chat-msg-in > .chat-msg-head, .chat-msg-critic > .chat-msg-head {
    width: 100%; margin-bottom: 0.5rem; column-gap: 0.75rem;
}
.chat-msg-body { min-width: 0; }
/* Datei-Anhang-Karten (Icon + Name + Größe), unter dem Textblock. */
.run-att-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.run-att-card {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-width: 11rem; max-width: 16rem; padding: 0.45rem 0.6rem;
    border: 1px solid var(--tri-border); border-radius: 0.6rem; background: #fff;
    text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s;
}
.run-att-card:hover { border-color: var(--tri-green); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.run-att-icon { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; display: inline-flex; }
.run-att-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.run-att-name { font-size: 0.82rem; font-weight: 600; color: var(--tri-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-att-size { font-size: 0.72rem; color: var(--tri-muted); }
.run-att-dl { flex: 0 0 auto; color: var(--tri-muted); font-size: 0.9rem; }
.run-att-card:hover .run-att-dl { color: var(--tri-green); }

/* Datei-Vorschau-Dialog (FilePreviewDialog): angenehm groß, aber nicht bildschirmfüllend. */
.file-preview-dialog { max-width: min(860px, 92vw); width: auto; margin: 1.75rem auto; }
.file-preview-body { max-height: 70vh; min-height: 32vh; overflow: auto; }
.file-preview-body:has(.file-preview-frame) { padding: 0; overflow: hidden; }
.file-preview-frame { width: 100%; height: 70vh; border: 0; display: block; }
.file-preview-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.chat-avatar {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: #fff;
    background: var(--tri-green);
}
.chat-avatar.user  { border-radius: 50%; }
.chat-avatar.agent { border-radius: 0.6rem; font-size: 1.15rem; }
.chat-msg-main { flex: 1 1 auto; min-width: 0; }
.chat-msg-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem; }
.chat-msg-name { font-weight: 700; color: var(--tri-text); }
.chat-msg-time { font-size: 0.72rem; font-weight: 400; color: #9aa0a6; }

/* Sub-Agenten-Antwort im Chat: sichtbar getrennter, leicht eingerückter Block mit hellgrünem Akzent (links),
   eigenem Icon-Avatar und einer „#Nr Name"-Kennung im Kopf. */
.chat-avatar.subagent { border-radius: 0.6rem; font-size: 1.05rem; background: var(--tri-green-bg-active); color: var(--tri-green); }
.chat-msg.subagent { background: color-mix(in srgb, var(--tri-green) 5%, transparent); border-left: 3px solid var(--tri-green-soft, #cfe8d5); }
.chat-msg.subagent .chat-msg-name { color: var(--tri-green); font-weight: 600; }
.chat-subagent-tag { display: inline-flex; align-items: baseline; font-weight: 600; color: var(--tri-text); }

/* Aktionszeile unter dem Nachrichtentext – erscheint beim Hovern über die Nachricht (Copy usw.) */
.chat-msg-actions { display: flex; gap: 0.25rem; margin-top: 0.4rem; opacity: 0; transition: opacity 0.12s; }
.chat-msg:hover .chat-msg-actions { opacity: 1; }
.chat-action-btn {
    border: none; background: transparent; color: #9aa0a6; cursor: pointer;
    padding: 0.2rem 0.4rem; border-radius: 0.45rem; font-size: 0.95rem; line-height: 1;
    transition: color 0.12s, background 0.12s;
}
.chat-action-btn:hover { color: var(--tri-green); background: #f0f2f4; }
.chat-msg-body { line-height: 1.5; color: var(--tri-text); overflow-wrap: anywhere; }
.chat-msg-body > :last-child { margin-bottom: 0; }

/* Benutzer-Nachrichten: rechtsbündig als hellgraue Bubble (Avatar rechts), Name/Zeit ausgeblendet */
.chat-msg.user { flex-direction: row-reverse; }
.chat-msg.user .chat-msg-main { display: flex; flex-direction: column; align-items: flex-end; }
.chat-msg.user .chat-msg-head { display: none; }
.chat-msg.user .chat-msg-body {
    background: #f0f1f3;
    border-radius: 1.1rem;
    padding: 0.6rem 0.95rem;
    max-width: 85%;
}
.chat-msg.user .chat-msg-actions { justify-content: flex-end; }

/* Composer: „+" oben rechts, „Senden ↑" als beschrifteter Button unten rechts */
.composer { position: relative; }
.composer-add-top {
    position: absolute; top: 0.55rem; right: 0.7rem; z-index: 1;
    width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; color: #6a7078; font-size: 1.15rem; cursor: pointer; margin: 0;
}
.composer-add-top:hover { background: #eef0f3; }
.composer-add-top.disabled { opacity: 0.4; pointer-events: none; }
.composer-text { padding-right: 2.4rem; }
.composer-send {
    width: auto; height: auto; padding: 0.5rem 1.15rem; border-radius: 0.75rem;
    font-size: 0.95rem; font-weight: 600; gap: 0.3rem;
}

/* Datei-Anhang-Button: Dateityp-Icon in Typ-Farbe; Download-Symbol erscheint beim Hover */
.chat-file-btn .chat-file-dl { opacity: 0; transition: opacity 0.12s; }
.chat-file-btn:hover .chat-file-dl { opacity: 1; }

/* Chat-Layout mit fixierter Eingabeleiste */
/* ============================================================================
   VOLL-HÖHE-LAYOUT – dauerhafte Lösung gegen „Seite/Panel nutzt die Fensterhöhe nicht aus".

   Wiederkehrende Ursache: Eine Spalte soll die volle (Rest-)Höhe einnehmen und nur EIN innerer Bereich
   soll scrollen. Das gelingt nur, wenn die GESAMTE Flex-Kette vom voll-hohen Vorfahren bis zum Scroll-
   bereich konsistent ist:
     • jeder Flex-Container in der Kette:  display:flex; flex-direction:column; min-height:0;
     • der füllende (wachsende) Bereich:   flex:1 1 auto; min-height:0;
     • der Scrollbereich zusätzlich:        overflow:auto;
   Fehlt irgendwo `min-height:0` oder `flex:1`, kollabiert der Bereich auf Inhaltshöhe (→ Lücke unten)
   ODER überläuft den Viewport (→ Inhalt unten unerreichbar). Genau dieser Fehler trat wiederholt auf.

   REGEL: Für „füllt die Höhe + scrollt intern" IMMER diese Utilities verwenden, statt feste vh-/calc-
   Höhen zu raten. Voraussetzung ist nur, dass ein Vorfahre eine definierte Höhe hat (z. B. 100vh oder
   selbst .fill-grow in einer .fill-col-Kette).
   ============================================================================ */
.fill-col    { display: flex; flex-direction: column; min-height: 0; }
.fill-grow   { flex: 1 1 auto; min-height: 0; }
.fill-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Seite füllt exakt die Fensterhöhe: page-content wird zur Flex-Spalte (Kopfband bleibt erstes Kind),
   der mit .page-fill markierte Inhalt nimmt die Resthöhe (kein geratenes calc, kein Rest unten). */
.page-content:has(> .page-fill) { display: flex; flex-direction: column; height: 100vh; }
.page-fill { flex: 1 1 auto; min-height: 0; }

/* Test-Dialog (/agents/{id}/test): Konfig + Chat füllen die Fensterhöhe.
   .test-fill nimmt mind. die Resthöhe unter dem Kopfband; der Chat wächst per Flex, intern scrollt nur
   .chat-scroll. min-height (statt height) → bei aufgeklappter Konfiguration darf der Block wachsen und die
   Seite normal scrollen. page-content bleibt unangetastet (sonst würde der Bleed des Kopfbands abgeschnitten). */
.test-fill {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 11rem);
}

.chat-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 18rem;
}

.chat-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.chat-input {
    border-top: 1px solid #e6e8ea;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom-left-radius: var(--bs-card-border-radius, .375rem);
    border-bottom-right-radius: var(--bs-card-border-radius, .375rem);
}

/* Markdown-Darstellung */
.markdown-body { font-size: 0.95rem; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 0.6rem; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 0.8rem 0 0.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tri-green);   /* Markdown-Überschriften einheitlich in TriniDat-Grün */
}
.markdown-body h1 { font-size: 1.2rem; }
.markdown-body h2 { font-size: 1.05rem; }
.markdown-body h3 { font-size: 0.95rem; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 0.9rem; }
.markdown-body ul, .markdown-body ol { margin: 0 0 0.6rem 1.25rem; }
.markdown-body code {
    background: #eceef1;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-size: 0.875em;
    color: #b3306f;
}
.markdown-body pre {
    background: #1f2227;
    color: #e6e8ea;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    /* Lange Zeilen (z. B. Tool-Parameter/Ergebnis-JSON) umbrechen statt horizontal scrollen. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.markdown-body pre code { background: none; color: inherit; padding: 0; white-space: inherit; }
/* Eingebettete Bilder (u. a. vom Agenten generierte SVG) proportional einpassen. */
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body img[src^="data:image/svg"] {
    display: block;
    max-height: 32rem;
    margin: 0.5rem 0;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 8px;
    background: #fff;
    padding: 0.25rem;
}
.markdown-body table {
    border-collapse: collapse;
    width: auto;
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}
.markdown-body th, .markdown-body td {
    border: 1px solid #d7dade;
    padding: 0.35rem 0.6rem;
    text-align: left;
}
.markdown-body th { background: #f1f3f5; }
.markdown-body blockquote {
    border-left: 3px solid var(--tri-green-soft);
    margin: 0 0 0.6rem;
    padding: 0.2rem 0.8rem;
    color: #5b6b73;
}
.markdown-body a { color: var(--tri-green); }

/* JSON-Editor / -Vorschau */
.json-preview {
    background: #1f2227;
    color: #e6e8ea;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 240px;
    overflow: auto;
    white-space: pre;
}
.json-preview .json-key { color: #79c0ff; }
.json-preview .json-string { color: #7ee787; }
.json-preview .json-number { color: #ffa657; }
.json-preview .json-bool { color: #d2a8ff; }
.json-preview .json-null { color: #8b949e; }

/* Agent-Detail */
/* Alle Links zentral: Logo-Grün. Beim HOVERN (Maus drüber, vor dem Klick)
   deutlich dunkleres Grün + fett + Zeigefinger → signalisiert Klickbarkeit.
   Kein Unterstreichen. !important schlägt Bootstrap. */
a,
.agent-name-link,
.kanban-card-title,
.kanban-card-run-link {
    color: var(--tri-green);
}

/* Namen in Listen/Karten durchgängig fett hervorheben. */
.agent-name-link,
.kanban-card-title {
    font-weight: 600;
}

/* Audit-Protokoll: farbiger Kategorie-Punkt vor dem Label. */
.audit-cat { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 400; }
.audit-dot {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
}
.bg-purple { background-color: #7c4dff !important; }
.bg-teal { background-color: #0d9488 !important; }
.bg-pink { background-color: #d63384 !important; }

a:hover,
.agent-name-link:hover,
.kanban-card-title:hover,
.kanban-card-run-link:hover {
    color: var(--tri-green-dark) !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Buttons/Chips/Badges/Picker bleiben beim Hovern normal (kein Fett).
   NICHT .nav-link aufnehmen: `inherit` zieht 400 vom Elternelement und würde
   das Zustands-Gewicht der Tabs (aktiv 700 / inaktiv 600) beim Hover auf 400
   stürzen lassen. Die Tab-Gewichte regelt allein der .trinidat-tabs-Block. */
a.btn:hover,
a.agent-id-chip:hover,
a.agent-id-badge:hover,
.trigger-agent-item:hover,
.tag-picker-item:hover {
    font-weight: inherit !important;
}

/* Anklickbare große Agentennummer-Badge (führt zur Detailseite) */
a.agent-id-badge {
    text-decoration: none;
    color: #fff;
    transition: background 0.15s;
}
a.agent-id-badge:hover {
    background: var(--tri-green-dark);
    color: #fff !important;
    text-shadow: none;
}

/* Anklickbarer Agentennummer-Chip (führt zur Detailseite) */
a.agent-id-chip {
    text-decoration: none;
    transition: background 0.15s;
}
a.agent-id-chip:hover {
    background: var(--tri-green-dark);
    color: #fff !important;
    text-shadow: none;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Interaktives Struktur-Diagramm */
.diagram-scroll {
    overflow-x: auto;
}

.diagram {
    position: relative;
    margin: 0 auto;
}

.diagram-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.diag-node {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 8px 12px 8px 16px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    border: 1px solid #e7e9ee;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

/* Farbiger Akzentstreifen links */
.diag-node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 16px 0 0 16px;
}

.diag-mcp::before {
    background: linear-gradient(180deg, #f3c66b 0%, #e0a51f 100%);
}

.diag-tool::before {
    background: linear-gradient(180deg, #8ed8cd 0%, #1f9e8d 100%);
}

.diag-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: #33373d;
    word-break: break-word;
}

.diag-node-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.diag-node-kind {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Ketten-/Orchestrierungs-Node im Designer-Look: Avatar + Kicker + Name + Beschreibung, linksbündig, keine Buttons. */
.diag-run { justify-content: flex-start; text-align: left; padding: 10px 12px 10px 16px; }
.diag-run-card { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; }
.diag-run-avatar { flex: 0 0 auto; line-height: 0; }
/* Avatar wie im Designer: grünes Rundquadrat statt grauem Kreis. */
.diag-run-avatar .agent-avatar { border-radius: .55rem; background-color: var(--tri-green-bg, #e8f4ea); color: var(--tri-green, #3a9b4e); }
.diag-run-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.diag-run-kicker { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tri-green, #3a9b4e); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diag-run-name { font-size: 14px; font-weight: 700; color: var(--tri-green-hover, #277a35); line-height: 1.2; }
.diag-run-desc { font-size: 11px; color: #8a9099; line-height: 1.3; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.diag-mcp {
    border-color: #f0d49a;
    background: linear-gradient(160deg, #fffdf8 0%, #fff4dc 100%);
}

.diag-mcp .diag-node-kind {
    color: #c98a00;
}

.diag-tool {
    border-color: #aee0d8;
    background: linear-gradient(160deg, #f7fcfb 0%, #e3f5f1 100%);
}

.diag-tool .diag-node-kind {
    color: #1f9e8d;
}

.diag-skill::before {
    background: linear-gradient(180deg, #8fb3f7 0%, #5b8def 100%);
}

.diag-skill {
    border-color: #b9cdf7;
    background: linear-gradient(160deg, #f7faff 0%, #e6eefb 100%);
}

.diag-skill .diag-node-kind {
    color: #3f6fd0;
}

/* Sub-Agenten von „Agent starten" – grau, unter dem Agenten */
.diag-subagent::before {
    background: linear-gradient(180deg, #b9bfc7 0%, #8a9099 100%);
}
.diag-subagent {
    border-color: #d3d7dd;
    background: linear-gradient(160deg, #f4f5f7 0%, #e7e9ed 100%);
    cursor: pointer;
}
.diag-subagent .diag-node-kind {
    color: #6c757d;
}

/* Lauf-Kette (Run-Knoten) */
.diag-run::before {
    background: linear-gradient(180deg, #b9c0c9 0%, #8a9099 100%);
}

.diag-run {
    border-color: #dfe3e8;
    background: linear-gradient(160deg, #fbfcfd 0%, #eef1f4 100%);
}

.diag-run .diag-node-kind {
    color: #5b6470;
}

.diag-run-user {
    font-size: 10px;
    color: #6b7280;
    margin-top: 1px;
}

.diag-run.diag-run-ok::before {
    background: linear-gradient(180deg, #6cc47c 0%, var(--tri-green) 100%);
}

.diag-run.diag-run-ok .diag-node-kind {
    color: var(--tri-green);
}

.diag-run.diag-run-error::before {
    background: linear-gradient(180deg, #e88a8a 0%, #d64545 100%);
}

.diag-run.diag-run-error .diag-node-kind {
    color: #d64545;
}

.diag-run.diag-run-active::before {
    background: linear-gradient(180deg, #8fb3f7 0%, #3f6fd0 100%);
}

/* --- Ketten-/Orchestrierungs-Node exakt im Designer-Node-Look: weiße Karte, farbiger OBERRAND je Status,
   sauberer Schatten, KEIN Links-Streifen (überschreibt die alte diag-node/diag-run-Optik). --- */
.diag-run {
    background: #fff;
    border: 1px solid var(--tri-border, #e5e7eb);
    border-top: 3px solid var(--tri-faint, #c2c8d0);
    border-radius: .7rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.10);
    padding: .7rem .85rem;
}
.diag-run::before { display: none; }
.diag-run:hover { box-shadow: 0 10px 26px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.12); }
.diag-run.diag-run-ok { border-top-color: var(--tri-green, #3a9b4e); }
.diag-run.diag-run-error { border-top-color: #d64545; }
.diag-run.diag-run-active { border-top-color: #3f6fd0; }
/* Aktueller Lauf hervorgehoben (grüner Ring wie im Designer). */
.diag-run.diag-run-current {
    border-color: var(--tri-green, #3a9b4e);
    box-shadow: 0 0 0 3px rgba(46, 139, 61, 0.18), 0 8px 20px rgba(16, 24, 40, 0.10);
}

/* Kritiker: wie der Worker dargestellt, aber in Grau.
   Doppelte Klasse erhöht die Spezifität, damit der graue Hintergrund den grünen
   von .diag-agent überschreibt, unabhängig von der Reihenfolge im Stylesheet. */
.diag-agent.diag-agent-critic {
    background: linear-gradient(150deg, #9aa0a8 0%, #7c828b 55%, #61666e 100%);
    box-shadow: 0 8px 22px rgba(60, 64, 70, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.diag-agent.diag-agent-critic .diag-agent-label {
    color: #e7e9ec;
}

/* Gatekeeper: wie der Worker dargestellt, aber in Rot (Security). */
.diag-agent.diag-agent-gatekeeper {
    background: linear-gradient(150deg, #d65f50 0%, var(--tri-red) 55%, var(--tri-red-dark) 100%);
    box-shadow: 0 8px 22px rgba(150, 45, 34, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
}
.diag-agent.diag-agent-gatekeeper .diag-agent-label {
    color: #ffe3df;
}

.diag-node-kind i {
    font-size: 10px;
    margin-right: 2px;
}

.diag-node:hover {
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

.diag-node.open {
    border-color: var(--tri-green);
    box-shadow: 0 0 0 3px rgba(46, 139, 61, 0.22), 0 10px 22px rgba(16, 24, 40, 0.16);
    /* Über das Klick-Backdrop (z-index 1055) heben, sonst fangen es die Popup-Buttons nicht. */
    z-index: 1056;
}

.diag-agent {
    z-index: 2;
    background: linear-gradient(150deg, #34a14a 0%, var(--tri-green) 55%, #246e31 100%);
    border: none;
    border-radius: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 14px;
    cursor: default;
    box-shadow: 0 8px 22px rgba(36, 110, 49, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.diag-agent-figure {
    height: 88%;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
    filter: grayscale(1) brightness(1.35) contrast(0.85)
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    opacity: 0.92;
}

/* Gatekeeper-Knoten: Schild-Icon anstelle der Roboter-Figur. */
.diag-gatekeeper-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    font-size: 2rem;
    color: #fff;
    opacity: 0.95;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.diag-agent-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    flex: 1 1 auto;
}

.diag-agent-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #d6f0d9;
}

.diag-agent-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    /* Lange Namen (z. B. „Rechtschreibprüfung Word") umbrechen statt aus dem Kasten laufen. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.diag-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1056;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    padding: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

h1:focus {
    outline: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem rgba(46, 139, 61, 0.35);
}

.form-control:focus, .form-select:focus {
    border-color: #8fd39b;
    box-shadow: 0 0 0 0.2rem rgba(46, 139, 61, 0.18);
}

.form-check-input:checked {
    background-color: var(--tri-green);
    border-color: var(--tri-green);
}

/* Rahmen unmarkierter Checkboxen/Radios dunkler, damit die Kästchen klar erkennbar sind. */
.form-check-input:not(:checked) { border-color: #8a9099; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--tri-green);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Durchsuchbare Agentenauswahl im Trigger-Dialog */
.trigger-agent-list {
    position: absolute;
    z-index: 1080;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 0.5rem;
    padding: 0.3rem;
}
.trigger-agent-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    color: #33373d;
}
.trigger-agent-item:hover { background-color: #ebf6ed; color: var(--tri-green-dark); }

/* Einzel-Agent-Auswahl (AgentPickerDialog): klickbare Zeilen. */
.agent-pick-row { display:flex; align-items:center; gap:.5rem; width:100%; border:0; background:transparent;
    border-bottom:1px solid #eef0f2; padding:.5rem .65rem; cursor:pointer; color:inherit; }
.agent-pick-row:last-child { border-bottom:0; }
.agent-pick-row:hover { background:#ebf6ed; }
.agent-pick-row.active { background:#e4f3e7; }

/* Tab-Register (Bootstrap nav-tabs) in Logo-Grün.
   WICHTIG: Hover ändert NIEMALS das Schriftgewicht – nur Farbe/Unterstrich.
   Sonst „springt" der aktive (700) Tab beim Hovern auf das Hover-Gewicht
   zurück und wirkt dünner. Gewicht hängt allein am Zustand inaktiv/aktiv. */
.trinidat-tabs .nav-link {
    border: none;
    background: none;
    color: var(--tri-muted);
    font-weight: 600;            /* inaktiv: solide, nie „dünn" */
    border-bottom: 2px solid transparent;
}
.trinidat-tabs .nav-link:hover {
    color: var(--tri-green-dark);
    border-bottom-color: var(--tri-green-soft);
}
.trinidat-tabs .nav-link.active {
    color: var(--tri-green);
    font-weight: 700;            /* aktiv: fett – unabhängig von Hover/Focus */
    background: none;
    border-bottom: 2px solid var(--tri-green);
}
/* Zähler-Badges in den Registern in hellerem Grau. */
.trinidat-tabs .nav-link .badge {
    background-color: #ced4da !important;
    color: var(--tri-subtle) !important;
}
/* Tab-Inhalt im Workspace-Dialog: feste Mindesthöhe, damit der Dialog beim
   Wechsel der Register nicht in der Höhe springt (Tab-Standard). */
/* Feste Höhe + Scroll: das Popup ändert die Höhe NICHT bei Tab-Wechsel oder langem Suchergebnis. */
.ws-tab-body { height: 24rem; overflow-y: auto; }

/* Entitäts-ID in Verwaltungstabellen (Knowledge-Buckets, Workspaces …): grün & fett. */
.entity-id { color: var(--tri-green); font-weight: 700; }

/* =====================================================================
   Wiederverwendbare Komponenten-Klassen – statt inline-style in Razor.
   ===================================================================== */

/* Art-/Status-Pillen am Seitenkopf (Worker / Kritiker / „Nur im Dialog"). */
.badge-kind {
    font-size: .7rem;
    font-weight: 600;
    vertical-align: middle;
}
/* Helle Badges (Hintergrund hell + farbiger Text), analog zu den Agentennummern-Chips.
   Grün-Varianten sind branding-fähig (Tokens leiten sich bei aktivem Branding aus der Signature-Farbe ab). */
.badge-worker { background-color: var(--tri-green-bg-active) !important; color: var(--tri-green) !important; }
.badge-critic { background-color: #eceef0 !important; color: var(--tri-secondary) !important; }
.badge-gatekeeper { background-color: color-mix(in srgb, var(--tri-red) 14%, white) !important; color: var(--tri-red) !important; }
.badge-dialog { background-color: var(--tri-green-bg-active) !important; color: var(--tri-green) !important; }
.badge-system { background-color: var(--tri-green-bg-active) !important; color: var(--tri-green) !important; }
/* Kleinere Inline-Variante (in Listen/Karten neben dem Agentennamen). */
.badge-dialog-sm { font-size: .65em; vertical-align: 2px; }

/* Grauer Zusatz im Editor-Titel (z. B. „bearbeiten"). */
.editor-subtitle { color: var(--tri-subtle); font-weight: 400; }

/* Text-Utilities auf Basis der zentralen Grautöne (statt inline-Farben). */
.text-muted-2 { color: var(--tri-muted-2) !important; }

/* Chat-Vollbild (?fullscreen): Menü + Kopfzeile ausblenden, nur der Chat bleibt sichtbar.
   Global (nicht scoped), damit die Layout-Struktur (.sidebar/.content-area/.page-content) getroffen wird. */
body.chat-fullscreen .sidebar,
body.chat-fullscreen .mobile-menu-toggle { display: none !important; }
body.chat-fullscreen .content-area { flex: 1 1 100% !important; }
body.chat-fullscreen .page-content { padding: 0 !important; }
body.chat-fullscreen .page-content > .chat-page.chat-page { height: 100vh !important; }
/* Schlanke Kopfleiste im Vollbild mit dem Agentennamen (der normale PageHeader ist ausgeblendet). */
.chat-fullscreen-bar {
    flex: 0 0 auto; display: flex; align-items: center; min-width: 0;
    padding: 0.6rem 1rem; background: #fff; border-bottom: 2px solid var(--tri-green);
    color: var(--tri-green); font-size: 1.05rem;
}

/* ===== Chat-Seite ===== */
/* Chat-Seite füllt die volle Höhe. Opt-out vom Standard-Kopfband (.page-content > :first-child),
   stattdessen eigenes Kopfband (.chat-topbar) und eine flex-füllende Chat-Fläche.
   Klasse doppelt notiert → höhere Spezifität als `.page-content > :first-child` (sonst gewinnt dessen
   `align-items:center !important` per Source-Order und die Kopfzeile würde zentriert/schmal). */
.page-content > .chat-page.chat-page {
    display:flex !important; flex-direction:column; align-items:stretch !important;
    position:static !important; min-height:0 !important; border-bottom:none !important;
    background:transparent !important; margin:0 !important; padding:0 !important;
    /* KEIN overflow:hidden – sonst wird der negative Rand (Bleed) des Kopfbands abgeschnitten → Lücke zur Sidebar.
       Die feste Höhe + flex-Chain (chat-thread scrollt intern) hält den Inhalt im Rahmen. */
    height: calc(100vh - 1.5rem); overflow:visible;
}
/* Eigenes Kopfband, das den Standard nachbildet (weiß, grüne Unterkante, randbündig). */
/* Exakt wie das Standard-Kopfband (.page-content > :first-child): weiß, grüne Unterkante, 64px, randbündig. */
.chat-topbar { display:flex; align-items:center; min-height:64px; background:#fff; border-bottom:2px solid var(--tri-green);
    margin:0 -1rem 1.5rem -1rem; padding:0 1rem; }
/* Kopf-Buttons (Details/Verlauf/Neuer Chat) einzeilig, nicht schrumpfen – der Agent-Bereich schrumpft stattdessen. */
.chat-topbar .btn { white-space:nowrap; flex-shrink:0; }
.chat-topbar .chat-history-wrap { flex-shrink:0; }
/* Titel & Icon im Chat-/KI-Kopfband kommen jetzt aus der zentralen PageHeader-Komponente
   (.page-head-title / .page-head-icon); frühere .chat-head-icon/.chat-head-name-Regeln entfernt. */
@media (min-width:992px){ .chat-topbar { margin-left:-1.5rem; margin-right:-1.5rem; padding-left:1.5rem; padding-right:1.5rem; } }
.chat-shell { display:flex; gap:1rem; flex:1 1 auto; min-height: 0; width:100%; }
/* KI-Assistent: Tab-Körper füllt die Resthöhe; nur der innere Bereich scrollt (wie die übrigen Voll-Höhe-Seiten). */
.kiv-tabbody { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.kiv-tab-scroll { flex:1 1 auto; min-height:0; overflow:auto; }
/* Verlauf-Popup im Kopf (ersetzt die frühere linke Sidebar) */
.chat-history-wrap { position:relative; display:inline-block; }
.chat-pop-backdrop { position:fixed; inset:0; z-index:1040; background:transparent; }
.chat-history-pop {
    position:absolute; top:calc(100% + .4rem); right:0; left:auto; z-index:1050;
    width:340px; max-width:90vw; max-height:70vh; display:flex; flex-direction:column;
    background:#fff; border:1px solid #eef0f2; border-radius:.75rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18); overflow:hidden;
}
.chat-history-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .8rem; border-bottom:1px solid #eef0f2; }
.chat-list { overflow:auto; padding:.4rem; flex:1 1 auto; }
.chat-list-item {
    display:block; width:100%; text-align:left; border:0; background:transparent;
    border-radius:.6rem; padding:.55rem .65rem; margin-bottom:.15rem; cursor:pointer; color:inherit;
}
.chat-list-item:hover { background:#f3f5f7; }
.chat-list-item.active { background:#e7f3ea; }
.chat-list-title { font-weight:600; font-size:.9rem; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-list-meta { font-size:.75rem; color:#8a9099; margin-top:.15rem; }
.chat-pager { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .6rem; border-top:1px solid #eef0f2; }

.chat-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
    background:#fff; border-radius:.75rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.06); overflow:hidden; }
/* Linke Liste (z. B. Rückfragen) als weiße Karte – gleiche Optik wie der rechte Bereich */
.chat-sidebar { flex:0 0 20rem; min-width:0; display:flex; flex-direction:column;
    background:#fff; border-radius:.75rem; box-shadow:0 .125rem .25rem rgba(0,0,0,.06); overflow:hidden; }
.chat-sidebar-head { padding:.85rem 1rem; border-bottom:1px solid #eef0f2; }
.chat-sidebar .chat-list { flex:1 1 auto; overflow-y:auto; padding:.4rem; }
.chat-main-head { padding:.85rem 1rem; border-bottom:1px solid #eef0f2; display:flex; align-items:center; gap:.6rem; }
/* Agentname im Chat-Kopf: groß und einzeilig (Tools/Prompt sind über „Details" erreichbar). */
.chat-info { padding:.7rem 1rem; border:1px solid #eef0f2; border-radius:.75rem; background:#fff;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.06); max-height:16rem; overflow:auto; }
.chat-info a { cursor:pointer; }
/* Sub-Agenten-Zeile im Chat-Details-Bereich: einzeilig, bei Überlänge horizontal scrollbar; jede Nummer hellgrün. */
.chat-subagents { display:flex; align-items:center; gap:.4rem; white-space:nowrap; overflow-x:auto; }
.chat-subagents > strong { flex:0 0 auto; }
.chat-subagent-list { display:inline-flex; align-items:center; gap:.7rem; min-width:0; }
.chat-subagent-item { display:inline-flex; align-items:center; flex:0 0 auto; }
.chat-thread { flex:1 1 auto; overflow:auto; padding:1.1rem 1.2rem; background:#fafbfc; }
.chat-row { display:flex; margin-bottom:.7rem; }
.chat-row.user { justify-content:flex-end; }
/* Wrapper um Blase + Copy-Symbol: begrenzt den Hover-Bereich auf Blase + Symbolzeile (#106828). */
.chat-bubble-wrap { position:relative; display:inline-block; max-width:78%; padding-bottom:1.2rem; }
.chat-copy { position:absolute; left:.15rem; bottom:-.05rem; border:none; background:transparent; color:#9aa0a6; padding:.1rem .25rem; font-size:.85rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s; }
.chat-bubble-wrap:hover .chat-copy { opacity:1; }
.chat-copy:hover { color:var(--tri-green); }
.chat-bubble { max-width:100%; padding:.55rem .85rem; border-radius:1rem; font-size:.92rem; }
.chat-bubble :last-child { margin-bottom:0; }
.chat-bubble.user { background:var(--tri-green); color:#fff; border-bottom-right-radius:.3rem; }
.chat-bubble.agent { background:#eef1f4; color:#212529; border-bottom-left-radius:.3rem; }
.chat-bubble.user a { color:#dff3e4; }
.chat-typing { color:#6c757d; font-size:.85rem; padding:.2rem .4rem; }
.chat-composer { padding:.75rem; border-top:1px solid #eef0f2; }
.chat-empty { flex:1 1 auto; display:flex; align-items:center; justify-content:center; color:#8a9099; text-align:center; padding:2rem; }
.chat-agent-pick { width:100%; }
/* System-Prompt-Editor: etwas kleinerer Font + Vollbild-Modus */
.agent-prompt-area { font-size: .82rem; line-height: 1.45; }
/* Gerenderte Markdown-Vorschau des System-Prompts (z. B. Test-/Dialogseite) – etwas kleiner. */
.agent-prompt-md, .agent-prompt-md .markdown-body { font-size: .85rem; }
.agent-prompt-sidebar { font-size: .9rem; }
.prompt-fs {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: #fff;
    padding: 1rem 1.25rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.prompt-fs .agent-prompt-row { flex: 1 1 auto; min-height: 0; }
.prompt-fs .agent-prompt-area { height: calc(100vh - 11rem) !important; resize: none; }
.prompt-fs .agent-prompt-preview { max-height: calc(100vh - 8rem) !important; }
.prompt-fs .agent-prompt-sidebar { max-height: calc(100vh - 11rem) !important; }

.chat-agent-item { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; border:1px solid #e6e8eb; background:#fff; border-radius:.6rem; padding:.6rem .75rem; margin-bottom:.4rem; cursor:pointer; }
.chat-agent-item:hover { border-color:var(--tri-green); background:#f6fbf7; }

/* Agenten-Auswahl als Kachel-Grid (ganze Kachel klickbar). */
.chat-agent-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:1rem; }
.chat-agent-tile { display:flex; flex-direction:row; align-items:flex-start; gap:1rem; text-align:left; background:#fff; border:1px solid #e6e8eb; border-radius:.85rem; padding:1.1rem 1.15rem; cursor:pointer; min-height:8rem; transition:box-shadow .15s, transform .15s, border-color .15s; }
.chat-agent-tile:hover { border-color:var(--tri-green); box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-1px); }
/* Agentenbeschreibung im Chat-Kopf (klein, grau, einzeilig) – kürzt erst am Spaltenrand (vor den Aktionen) */
.chat-head-desc { font-size:.82rem; font-weight:400; color:var(--tri-muted, #8a9099); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.chat-topbar.page-head { flex-wrap:nowrap; }
.chat-topbar .page-head-main { flex:1 1 auto; min-width:0; }
.chat-topbar .page-head-text { flex:1 1 auto; min-width:0; }
/* Aktionsleiste bleibt fix auf EINER Zeile; die Beschreibung (min-width:0) kürzt stattdessen */
.chat-topbar .page-head-actions { flex:0 0 auto; flex-wrap:nowrap; }
.chat-agent-tile-avatar { flex:0 0 auto; }
.chat-agent-tile-avatar i { font-size:2.4rem !important; }   /* größeres Fallback-Icon, wenn kein Avatar */
.chat-agent-tile-body { min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.chat-agent-tile-head { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.chat-agent-tile-kicker { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--tri-green); }
.chat-agent-tile-name { font-weight:700; font-size:.98rem; color:var(--tri-text, #33373d); line-height:1.2; }
.chat-agent-tile-desc { color:var(--tri-muted, #6c757d); font-size:.8rem; line-height:1.35; margin-top:.1rem; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== Agentenbeschreibung als Markdown – überall in der bestehenden (grauen, kleinen) Schrift; alle
   Überschriften werden auf die aktuelle Schriftgröße verkleinert (keine großen H1/H2 in Kacheln/Kopf/Liste). ===== */
/* Chat-Auswahlkachel (mehrzeilig, per line-clamp begrenzt): markdown-body verschwindet (display:contents),
   damit das -webkit-line-clamp die Block-Kinder (p/Überschriften) direkt begrenzt. */
.chat-agent-tile-desc .markdown-body { display: contents; }
.chat-agent-tile-desc :is(h1,h2,h3,h4,h5,h6),
.chat-agent-tile-desc p, .chat-agent-tile-desc ul, .chat-agent-tile-desc ol, .chat-agent-tile-desc li, .chat-agent-tile-desc code {
    font-size: inherit; line-height: inherit; color: inherit;
}
.chat-agent-tile-desc :is(h1,h2,h3,h4,h5,h6) { font-weight: 700; margin: 0; }
.chat-agent-tile-desc p { margin: 0; }
.chat-agent-tile-desc ul, .chat-agent-tile-desc ol { margin: 0; padding-left: 1.1em; }

/* Einzeilige Kontexte (Chat-Kopf, Agentenliste): Markdown inline, damit Ellipsis/nowrap greifen. */
.chat-head-desc .markdown-body, .chat-head-desc .markdown-body p, .chat-head-desc :is(h1,h2,h3,h4,h5,h6),
.agentlist-desc-md .markdown-body, .agentlist-desc-md .markdown-body p, .agentlist-desc-md :is(h1,h2,h3,h4,h5,h6) {
    display: inline; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin: 0;
}

/* Interaktive Rückfragen (Multiple-Choice) in der Agent-Bubble */
.chat-questions { margin:.15rem 0; font-size:.9rem; }   /* an die Conversation-Schriftgröße angleichen (.chat-bubble) */
.chat-questions .cq-intro { font-weight:600; margin-bottom:.5rem; }
.chat-questions .cq-group { border:1px solid #d0e5d8; border-radius:.5rem; background:#fff; padding:.5rem .65rem; margin-bottom:.5rem; }
.chat-questions .cq-q { font-weight:600; margin-bottom:.4rem; }
.chat-questions .cq-option { display:flex; align-items:center; gap:.6rem; padding:.28rem 0; cursor:pointer; }
.chat-questions .cq-option input { width:1.05rem; height:1.05rem; flex:0 0 auto; margin:0; cursor:pointer; accent-color:var(--tri-green); }
.chat-questions .cq-option span { font-size:inherit; }
.chat-questions .cq-option input:disabled, .chat-questions .cq-option input:disabled ~ span { cursor:default; }
.chat-questions .cq-other { margin-top:.4rem; }
.chat-questions .cq-submit { margin-top:.2rem; }

/* ---------- Einheitlich abgerundete Karten ----------
   Alle Karten erhalten einen deutlicheren, einheitlichen Radius. Karten, die eine
   Tabelle enthalten, beschneiden ihren Inhalt an den runden Ecken (sonst füllt die
   Tabelle die Ecken eckig aus). */
.card {
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: 0.7rem;
    border-radius: 0.75rem;
}

.card:has(> .table-responsive),
.card:has(> table) {
    overflow: hidden;
}

/* Agenten-/Trigger-/Datenbank-Liste: Karte NICHT clippen, sonst wird das Zeilen-Aktionsmenü („…") am Rand abgeschnitten. */
.card:has(> .agents-table-wrap),
.card:has(> .triggers-table-wrap),
.card:has(> .db-table-wrap) {
    overflow: visible;
}

/* Einheitliche Tabellen: etwas kleinere Schrift, Kopfzeilen in Grau (nicht schwarz/fett). */
.table {
    font-size: 0.875rem;
}
.table > thead th {
    color: var(--tri-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

/* JSON-Editor: kompaktere Schrift */
.json-editor textarea {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Tool-Call-Popover (Agent-Editor, über dem Tools-Symbol in der Formatierungsleiste) */
.toolcalls-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.toolcalls-pop {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1050;
    width: 24rem;
    max-width: 90vw;
    max-height: 26rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    padding: 0.7rem 0.8rem;
}

/* ---------- Einheitliches Seiten-Kopfband ----------
   Die Überschrift jeder Seite (erstes Element des Inhalts) bildet ein weißes Band
   in Höhe der schwarzen Sidebar-Kopfzeile (64px) mit hellgrüner Unterkante. Die Linie
   liegt damit bündig auf 64px; die Überschrift steht im weißen Band darüber, der
   restliche (graue) Seiteninhalt folgt darunter – ohne Überlappung. Volle Breite per
   negativer Ränder, die das horizontale Padding des Inhaltsbereichs ausgleichen. */
.page-content > :first-child {
    display: flex !important;
    align-items: center !important;
    min-height: 64px;
    background-color: #fff;
    border-bottom: 2px solid var(--tri-green);
    margin: 0 -1rem 1.5rem -1rem !important;
    padding: 0 1rem;
    /* Titelzeile bleibt beim Scrollen oben fixiert (gilt für alle Seiten,
       da jede Seite dieses Kopfband als erstes Element rendert). Das Fenster
       scrollt, daher genügt sticky top:0; z-index über den Inhaltskarten. */
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Seitenüberschriften einheitlich etwas kleiner und in Schwarz/Standardtextfarbe.
   Links (z. B. Agentennamen via .agent-name-link, Run-Badges) und Agentennummern
   behalten ihre eigene Farbe über ihre spezifischeren Regeln. */
.page-content > :first-child h1 {
    color: var(--tri-text);
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0;
}
/* Überschriften in Chat-Nachrichten folgen IMMER dem Markdown-Stil (grün, moderat) – die obige Seiten-Titel-Regel
   „.page-content > :first-child h1" würde sonst eine `#`-Überschrift des Agenten als große schwarze h1 rendern
   (während `###` grün bleibt). Höhere Spezifität + spätere Position → gewinnt. */
.chat-msg-body .markdown-body :is(h1, h2, h3, h4, h5, h6) { color: var(--tri-green); font-weight: 600; }
.chat-msg-body .markdown-body h1 { font-size: 1.2rem; margin-bottom: 0.5rem; }

/* Führendes Icon jeder Seitenüberschrift als grüne Kachel mit weißem Glyph
   (wie auf der Lauf-Detailseite). Das Glyph je Seite bleibt erhalten; Badge-Icons
   (in <span>) und der Agenten-Avatar (Bild) sind nicht betroffen. */
.page-content > :first-child h1 > i.bi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: 0.7rem !important;
    border-radius: 0.8rem;
    background-color: var(--tri-green);
    color: #fff;
    font-size: 1.5rem;
    vertical-align: middle;
}

@media (min-width: 992px) {
    .page-content > :first-child {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ---------- Kompakte Agent-Typ-Auswahl (Neuanlage) ---------- */
.kindpick { border-radius: .8rem; }
.kindpick-card {
    display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
    border: 1.5px solid var(--tri-border); border-radius: .7rem; background: #fff;
    padding: .7rem .85rem; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s;
}
/* Live mitlaufender Generierungstext (Denkprozess/Antwort) in Chat- und Test-Dialog. */
.chat-live-text {
    white-space: pre-wrap;
    font-size: .8rem;
    line-height: 1.35;
    color: #33373d;
    background: #f4f5f7;
    border: 1px solid var(--tri-border);
    border-radius: .5rem;
    padding: .5rem .65rem;
    max-height: 16rem;
    overflow-y: auto;
}

/* Live mitlaufender Denkprozess im Chat – beschriftete, scrollbare Box (statt roher 🧠-Zeile). */
.chat-think-live {
    border: 1px solid var(--tri-green-soft);
    border-radius: .5rem;
    background: var(--tri-green-bg);
    overflow: hidden;
}
.chat-think-live-head {
    font-size: .72rem;
    font-weight: 600;
    color: var(--tri-green-dark);
    padding: .35rem .65rem;
    border-bottom: 1px solid var(--tri-green-soft);
}
.chat-think-live-body {
    font-size: .78rem;
    line-height: 1.4;
    color: #5b6168;
    padding: .5rem .65rem;
    /* Vollständig anzeigen (kein eigener Scrollbalken); bei Bedarf scrollt der gesamte Chat-Thread. */
}

/* Markdown im Live-Denkprozess kompakt halten (kleine Überschriften/Abstände, damit der gesamte Verlauf reinpasst). */
.chat-think-live-body :is(h1, h2, h3, h4, h5, h6) { font-size: .82rem; font-weight: 600; margin: .35rem 0 .15rem; }
.chat-think-live-body p,
.chat-think-live-body ul,
.chat-think-live-body ol { margin: .15rem 0; }
.chat-think-live-body pre { margin: .25rem 0; font-size: .74rem; }
.chat-think-live-body :first-child { margin-top: 0; }

.kindpick-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.kindpick-card.selected { border-color: var(--tri-green); background: #f3faf4; box-shadow: 0 0 0 2px rgba(46,139,61,.15); }
.kindpick-card img { height: 1.9rem; width: auto; flex: 0 0 auto; }
.kindpick-card > i { font-size: 1.6rem; width: 1.9rem; text-align: center; flex: 0 0 auto; }
.kindpick-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.kindpick-title { font-weight: 700; font-size: .95rem; }
.kindpick-desc { font-size: .78rem; color: var(--tri-muted); }
.kindpick-worker:hover { border-color: var(--tri-green); background: #f3faf4; }
.kindpick-worker .kindpick-title { color: var(--tri-green); }
.kindpick-critic:hover { border-color: var(--tri-secondary); background: var(--tri-surface); }
.kindpick-critic .kindpick-title { color: var(--tri-secondary, #6c757d); }
.kindpick-gatekeeper:hover { border-color: var(--tri-red); background: #fcf3f2; }
.kindpick-gatekeeper > i { color: var(--tri-red); }
.kindpick-gatekeeper .kindpick-title { color: var(--tri-red); }

/* ===== Wiederverwendbare Agentenauswahl (AgentPicker) – Suche/Typeahead, NIE DropDown ===== */
/* AgentListPicker: gefilterte, seitenweise Liste mit Einzel-Markierung. */
.agent-lp { display: flex; flex-direction: column; gap: .5rem; }
.agent-lp-search { position: relative; display: flex; align-items: center; }
.agent-lp-ic { position: absolute; left: .7rem; color: var(--tri-faint); font-size: .9rem; pointer-events: none; }
.agent-lp-input {
    width: 100%; padding: .5rem .7rem .5rem 2rem; border: 1px solid var(--tri-border);
    border-radius: .5rem; font-size: .92rem; outline: none;
}
.agent-lp-input:focus { border-color: var(--tri-green); box-shadow: 0 0 0 2px rgba(46,139,61,.15); }
.agent-lp-list {
    display: flex; flex-direction: column; gap: .2rem;
    max-height: 60vh; min-height: 18rem; overflow-y: auto; padding-right: .15rem;
}
.agent-lp-empty { color: var(--tri-muted); font-size: .9rem; padding: .6rem; text-align: center; }
.agent-lp-item {
    display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
    border: 1px solid var(--tri-border); background: #fff; border-radius: .5rem; padding: .45rem .6rem;
    font-size: .9rem; color: #4b5159; cursor: pointer;
}
.agent-lp-item:hover { border-color: var(--tri-green); background: var(--tri-surface); }
.agent-lp-item.selected { border-color: var(--tri-green); background: var(--tri-green-bg); }
.agent-lp-radio { color: var(--tri-faint); font-size: 1rem; flex: 0 0 auto; }
.agent-lp-item.selected .agent-lp-radio { color: var(--tri-green); }
.agent-lp-id { color: var(--tri-faint); font-size: .78rem; flex: 0 0 auto; }
.agent-lp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.agent-lp-kind { color: var(--tri-muted); font-size: .76rem; flex: 0 0 auto; }
.agent-lp-pager { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.agent-lp-pageinfo { color: var(--tri-muted); font-size: .8rem; }
.agent-lp-pagebtn {
    border: 1px solid var(--tri-border); background: #fff; border-radius: .4rem;
    width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center;
    color: var(--tri-muted); cursor: pointer;
}
.agent-lp-pagebtn:disabled { opacity: .4; cursor: not-allowed; }
.agent-lp-pagebtn:hover:not(:disabled) { border-color: var(--tri-green); color: var(--tri-green); }

.agent-picker { position: relative; }
.agent-picker-field { position: relative; display: flex; align-items: center; }
.agent-picker-ic { position: absolute; left: .7rem; color: var(--tri-faint); font-size: .9rem; pointer-events: none; }
.agent-picker-input {
    width: 100%; border: 1px solid var(--tri-border); border-radius: .6rem;
    padding: .55rem .75rem .55rem 2.1rem; font-size: .92rem; color: var(--tri-text); background: #fff;
}
.agent-picker-input:focus { outline: none; border-color: var(--tri-green); box-shadow: 0 0 0 3px rgba(46,139,61,.18); }
.agent-picker-chosen {
    display: flex; align-items: center; gap: .5rem; border: 1px solid var(--tri-green);
    border-radius: .6rem; padding: .5rem .55rem .5rem .6rem; background: var(--tri-surface);
}
.agent-picker-chosen .agent-picker-name { font-weight: 600; color: var(--tri-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-picker-clear {
    margin-left: auto; flex: 0 0 auto; border: none; background: transparent; color: var(--tri-muted);
    cursor: pointer; font-size: .8rem; line-height: 1; padding: .25rem .3rem; border-radius: .35rem;
}
.agent-picker-clear:hover { color: var(--tri-red); background: rgba(192,57,43,.1); }
.agent-picker-id {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: #fff; background: var(--tri-green);
    border-radius: .35rem; padding: .1rem .4rem; line-height: 1.3;
}
.agent-picker-kind { flex: 0 0 auto; margin-left: auto; font-size: .72rem; color: var(--tri-faint); }
.agent-picker-list {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--tri-border); border-radius: .6rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.16); max-height: 16rem; overflow-y: auto; padding: .3rem;
}
.agent-picker-item {
    display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
    border: none; background: transparent; border-radius: .45rem; padding: .45rem .55rem; cursor: pointer;
}
.agent-picker-item .agent-picker-name { font-size: .9rem; color: var(--tri-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-picker-item:hover, .agent-picker-item.active { background: var(--tri-surface); }
.agent-picker-empty { padding: .6rem .55rem; color: var(--tri-muted); font-size: .88rem; }

/* SharePoint-Browser: Breadcrumb-Überschrift („Websites") größer/grau, Einträge kompakt */
.sp-crumbs { font-size: 1rem; color: var(--tri-muted); }
.sp-crumbs > i { color: var(--tri-muted); }
.sp-crumb { color: var(--tri-muted); font-weight: 600; }
.sp-crumb:hover { color: var(--tri-text); }

/* ===== Prompt-Engineering-Dialog (wiederverwendbar) ===== */
.pe-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pe-modal { background: #fff; border-radius: 1rem; box-shadow: 0 24px 60px rgba(0,0,0,.28); width: min(1100px, 96vw); height: min(86vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.pe-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tri-border); }
.pe-ic { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--tri-surface); color: var(--tri-green); font-size: 1.2rem; }
.pe-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tri-faint); }
.pe-title { font-size: 1.05rem; font-weight: 700; color: var(--tri-text); }
/* minmax(0,1fr) statt 1fr: verhindert, dass eine Spalte mit langen, nicht umbrechbaren Inhalten (z. B. eine lange
   URL im Editor) über ihre min-content-Breite ausbricht und die andere Spalte zusammenquetscht. */
.pe-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.pe-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--tri-border); }
/* Prompt-Engineering nutzt die einheitliche Chat-Optik (chat-conv/chat-thread/composer) → Kette füllt die Spalte. */
.pe-left > .chat-conv { flex: 1 1 auto; min-height: 0; }
.pe-chat { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.pe-hint { color: var(--tri-muted); font-size: .9rem; background: var(--tri-surface); border-radius: .6rem; padding: .7rem .8rem; }
/* An die moderne Chat-Optik angeglichen: Benutzer = rechte hellgraue Bubble, KI = flach linksbündig. */
.pe-msg { max-width: 92%; padding: 0; }
.pe-msg.user { align-self: flex-end; background: #f0f1f3; border: none; border-radius: 1.1rem; padding: .6rem .95rem; max-width: 85%; }
.pe-msg.user .pe-msg-role { display: none; }
.pe-msg.ai { align-self: stretch; background: transparent; border: none; padding: .1rem 0; }
.pe-msg-role { font-size: .78rem; font-weight: 700; color: var(--tri-text); margin-bottom: .15rem; }
.pe-msg-text { font-size: .9rem; color: var(--tri-text); white-space: pre-wrap; word-break: break-word; }
/* Prompt-Engineering-Editor-Spalte: Flex-Wrapper, damit die <PromptEditor>-Komponente die Höhe füllt.
   Die Editor-Optik (Überschriften, Toolbar) liegt jetzt in der Komponente (PromptEditor.razor.css). */
.pe-draft-editor { display: flex; flex-direction: column; min-height: 0; }

/* Moderner Composer: dezenter grauer Rahmen, kein grüner Kasten; Textfeld randlos, kompakter Senden-Button. */
.pe-compose { display: flex; gap: .5rem; margin: .6rem .75rem .75rem; padding: .5rem .6rem; border: 1px solid #e3e6ea; border-radius: .9rem; align-items: flex-end; }
.pe-compose:focus-within { border-color: #cfd4da; }
.pe-compose textarea { resize: vertical; min-height: 6rem; max-height: 45vh; border: none; box-shadow: none; background: transparent; padding: .25rem .35rem; }
.pe-compose textarea:focus { border: none; box-shadow: none; outline: none; }
.pe-compose #pe-send { align-self: flex-end; width: 2.6rem; height: 2.6rem; border-radius: .7rem; flex: 0 0 auto; }

/* Multiple-Choice-Rückfragen im Prompt-Engineer-Dialog */
.pe-qa { display: flex; flex-direction: column; gap: .8rem; border: 1px solid var(--tri-border); border-radius: .6rem; padding: .8rem; background: #fff; }
.pe-q { display: flex; flex-direction: column; gap: .45rem; }
.pe-q-text { font-weight: 600; font-size: .9rem; }
.pe-q-multi { font-weight: 400; color: var(--tri-muted); font-size: .8rem; }
.pe-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.pe-opt { border: 1px solid var(--tri-border); background: #fff; color: var(--tri-ink); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; transition: all .12s ease; }
.pe-opt:hover { border-color: var(--tri-green); }
.pe-opt.sel { background: var(--tri-green); border-color: var(--tri-green); color: #fff; }
.pe-free { max-width: 100%; }
.pe-qa-send { align-self: flex-start; }
.pe-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pe-right-head { font-size: .8rem; font-weight: 700; color: var(--tri-muted); padding: .75rem 1rem .25rem; }
/* width:auto + box-sizing: sonst überschreibt Bootstraps .form-control (width:100%) die seitlichen Ränder
   und das Textfeld ragt rechts über den Dialogrand hinaus (#106824). */
.pe-draft { flex: 1 1 auto; width: auto; box-sizing: border-box; margin: 0 1rem 1rem; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.pe-draft-md { flex: 1 1 auto; margin: 0 1rem 1rem; overflow-y: auto; border: 1px solid var(--tri-border); border-radius: .5rem; padding: .6rem .8rem; font-family: inherit; font-size: .92rem; background: #fff; }
.pe-foot { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid var(--tri-border); background: var(--tri-surface); }
@media (max-width: 800px) { .pe-body { grid-template-columns: 1fr; } .pe-left { border-right: none; border-bottom: 1px solid var(--tri-border); } }

/* ===== Agenten-Graph (Force-Directed) ===== */
/* Agentenwolke eingebettet in die Agentenseite (Inline-Umschalter): randlos, weiß, randbündig.
   Die Höhe (bis zum unteren Viewport-Rand) setzt das JS exakt per Pixel (spinalcordGraph), damit die SVG
   eine definite Höhe hat und der Graph die volle Fläche nutzt. */
.ag-cloud-embed { display: flex; flex-direction: column; min-height: 24rem;
    margin: -1.5rem -1rem -1.5rem -1rem; background: #fff; overflow: hidden; }
@media (min-width: 992px) { .ag-cloud-embed { margin-left: -1.5rem; margin-right: -1.5rem; } }
.ag-canvas { flex: 1 1 auto; min-height: 0; width: 100%; position: relative; background: #fff; overflow: hidden; }
.ag-svg { display: block; width: 100%; height: 100%; touch-action: none; }
.ag-svg text { user-select: none; pointer-events: none; }
.ag-density {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 5;
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.92); border: 1px solid var(--tri-border); border-radius: 1rem;
    padding: .4rem .8rem; box-shadow: 0 4px 14px rgba(0,0,0,.1); color: var(--tri-muted);
}
.ag-density input[type=range] { width: 9rem; accent-color: var(--tri-green); cursor: pointer; }

/* Bucket-interne Ordnerstruktur: nutzt die Klassen des Agenten-Ordnerbaums (.folder-tree/.folder-node …).
   Der Baum wird scrollbar gehalten; das Verschieben-Popover ist eigenständig. */
.folder-tree.ftv { max-height: 28rem; overflow: auto; }
/* In .ftv-compact-Kontexten bringt der umgebende Wrapper IMMER seine eigene Höhe + overflow:auto mit
   (Designer-Panel, /folders-Kartenkörper, Auswahl-Dialoge). Die 28rem-Kappung der bloßen Variante darf
   hier NICHT zusätzlich greifen – sonst endet der Baum vorzeitig (halbe Höhe). Der Wrapper scrollt. */
.ftv-compact .folder-tree.ftv { max-height: none; overflow: visible; }
/* Ziehbare Einträge (z. B. Bucket → auf Agenten ziehen) erhalten einen Greif-Cursor. */
.folder-agent-leaf.is-draggable { cursor: grab; }
.folder-agent-leaf.is-draggable:active { cursor: grabbing; }

/* Breadcrumb-Pfad auf der Bucket-Inhaltsseite (graue Pfeile als Trennzeichen) */
.bucket-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.bucket-breadcrumb .bc-seg { color: var(--tri-muted); text-decoration: none; cursor: pointer; }
.bucket-breadcrumb .bc-seg:hover { color: var(--tri-green); }
.bucket-breadcrumb .bc-seg.current { color: var(--tri-text); font-weight: 600; cursor: default; }
.bucket-breadcrumb .bc-sep { color: var(--tri-subtle, #b6bcc4); font-size: .7rem; }

/* Bucket-Ordnerbaum: Schrift exakt wie die Sidebar-Menüpunkte (~0.9rem), unabhängig von .ftv/.ftv-compact. */
.btree-sm .folder-node,
.btree-sm .folder-name { font-size: 0.9rem !important; line-height: 1.2; }
.btree-sm .folder-icon { font-size: 1rem !important; }
.btree-sm .folder-caret { font-size: 0.7rem !important; }
.btree-sm .folder-node { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* Trigger-Kalender (Monatsraster) */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow-row { margin-bottom: 6px; }
.cal-dow { text-align: center; font-size: .75rem; font-weight: 600; color: var(--tri-muted); padding: .15rem 0; }
.cal-cell {
    min-height: 6.5rem; background: #fff; border: 1px solid var(--tri-border);
    border-radius: .55rem; padding: .3rem; display: flex; flex-direction: column; gap: .25rem; overflow: hidden;
}
.cal-cell-clickable { cursor: pointer; transition: background-color .12s, box-shadow .12s; }
.cal-cell-clickable:hover { background: var(--tri-surface, #f3f7f4); box-shadow: inset 0 0 0 1px var(--tri-green); }
.cal-cell-other { background: #f6f7f9; color: var(--tri-muted); }
.cal-cell-other .cal-daynum { color: var(--tri-subtle, #aeb4bc); }
.cal-cell-today { border-color: var(--tri-green); box-shadow: inset 0 0 0 1px var(--tri-green); }
.cal-daynum { font-size: .8rem; font-weight: 600; color: var(--tri-text); align-self: flex-end; line-height: 1; }
.cal-cell-today .cal-daynum {
    background: var(--tri-green); color: #fff; border-radius: 999px;
    width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
}
.cal-events { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.cal-event {
    display: flex; align-items: baseline; gap: .3rem; width: 100%; text-align: left;
    border: none; border-radius: .35rem; padding: .12rem .35rem; cursor: pointer;
    font-size: .72rem; line-height: 1.2; color: #14532d; background: #e4f3e7;
    border-left: 3px solid var(--tri-green); overflow: hidden;
}
.cal-event:hover { filter: brightness(.97); }
.cal-event-rec { color: #1e3a8a; background: #e6eefc; border-left-color: #3b82f6; }
.cal-event-muted { opacity: .5; text-decoration: line-through; }
.cal-event-time { font-weight: 700; flex: 0 0 auto; }
.cal-event-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: middle; margin-right: .15rem; }
.cal-dot-once { background: var(--tri-green); }
.cal-dot-rec { background: #3b82f6; }

/* Icon-Auswahl für MCP-Server (Admin-Formular) */
.mcp-icon-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.mcp-icon-choice {
    width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tri-border); background: #fff; border-radius: .5rem; cursor: pointer;
    color: var(--tri-text); font-size: 1.1rem;
}
.mcp-icon-choice:hover { border-color: var(--tri-green); color: var(--tri-green); }
.mcp-icon-choice.active { background: var(--tri-green); color: #fff; border-color: var(--tri-green); }

/* Abschnittsüberschrift im Designer-Tree-Panel (z. B. „Workspaces"). */
.wfd-tree-section { padding: .5rem .5rem .15rem; font-size: .72rem; font-weight: 700; color: var(--tri-faint); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Kostenbericht: modernes, animiertes Balkendiagramm (grün) ---- */
.costchart { display: grid; grid-template-columns: auto 1fr; gap: .5rem; }
.costchart-yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 320px; padding-bottom: 1.6rem; /* Platz für X-Labels unten */
    font-size: .7rem; color: var(--tri-faint); text-align: right; white-space: nowrap;
}
.costchart-plot { position: relative; }
.costchart-grid {
    position: absolute; inset: 0 0 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
}
.costchart-grid span { border-top: 1px dashed var(--tri-border); height: 0; }
.costchart-bars {
    position: relative; display: flex; align-items: flex-end; gap: clamp(2px, 0.5%, 10px);
    height: 320px; padding-bottom: 1.6rem;
}
.costchart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.costchart-track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.costchart-bar {
    position: relative; width: 100%; height: var(--h); min-height: 2px;
    background: linear-gradient(180deg, var(--tri-green) 0%, var(--tri-green-active) 100%);
    border-radius: 6px 6px 0 0;
    transform: scaleY(0); transform-origin: bottom;
    animation: costbar-grow .6s cubic-bezier(.22,1,.36,1) forwards;
    transition: filter .15s ease;
}
.costchart-bar.is-zero { background: var(--tri-green-soft); }
.costchart-bar:hover { filter: brightness(1.08); }
.costchart-bar .costchart-val {
    position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%);
    font-size: .68rem; font-weight: 600; color: var(--tri-green-dark); white-space: nowrap;
    opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.costchart-bar:hover .costchart-val { opacity: 1; }
.costchart-xlabel {
    margin-top: .35rem; height: 1.25rem; font-size: .68rem; color: var(--tri-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center;
}
@keyframes costbar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Ein-/Ausklapp-Link für lange Funktionslisten (MCP-Server / Tools) – kleinere Schrift */
.fn-toggle { font-size: .72rem; }

/* Zentrale Seiten-Kopfzeile (PageHeader-Komponente) – einheitliches Layout & Abstände */
.page-head {
    display: flex;
    flex-wrap: nowrap;             /* Titel + Aktionen bleiben IMMER in EINER Zeile (nie zweizeilig) */
    justify-content: flex-start;   /* der wachsende Titelbereich (page-head-main) schiebt die Aktionen nach rechts */
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.page-head-main {
    display: flex;
    align-items: center;       /* Leading/Avatar mittig zur Überschrift */
    gap: 0.75rem;              /* Abstand Icon ↔ Titeltext */
    min-width: 0;            /* erlaubt Text-Truncation im Titel */
    flex: 1 1 auto;         /* Titelbereich schrumpft → Titel wird gekürzt, statt die Buttons zu verdrängen */
}
.page-head-icon {
    font-size: 1.45rem;
    /* Zeilenhöhe = erste Titelzeile (1.45rem × 1.25); zusammen mit align-self:flex-start
       sitzt das Icon mittig auf der ERSTEN Titelzeile (auch bei zweizeiligen Köpfen),
       statt zur Blockmitte zu rutschen. */
    line-height: 1.8rem;
    align-self: flex-start;
    color: var(--tri-green);
    flex-shrink: 0;
}
.page-head-text { min-width: 0; flex: 1 1 auto; }
.page-head-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tri-text);   /* schwarzer Titel; Links (Agentennamen, Runs) behalten ihre Farbe */
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;      /* Titelzeile bricht NIE um */
    min-width: 0;
    overflow: hidden;       /* Grundlage für die Ellipsis-Kürzung des Titeltexts */
}
/* Einfacher Titeltext (String-Titel): bei Platzmangel mit … gekürzt statt Umbruch. */
.page-head-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head-title.h4 { font-size: 1.3rem; }
.page-head-title.h5 { font-size: 1.1rem; }
/* Einzeiliger Kopftitel: nicht umbrechen; ein langer (Agenten-)Name wird mit … gekürzt, die #Nr bleibt sichtbar. */
.page-head-title.is-single-line { flex-wrap: nowrap; min-width: 0; }
.page-head-title.is-single-line .agent-num { flex-shrink: 0; }
.page-head-title.is-single-line .agent-name-link {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* RUN-Nummer inline hinter dem Namen: einzeilig, kleiner, bricht nicht um. */
.page-head-title.is-single-line .run-num-inline {
    flex-shrink: 0; white-space: nowrap;
    font-size: 0.8rem; font-weight: 500; margin-left: 0.15rem;
}
/* Einzeilige Kopfzeile: Titel und Aktionsbuttons bleiben in EINER Zeile (kein Umbruch der Buttons unter den
   Titel). Der Titelbereich schrumpft und kürzt den Agentennamen bei Platzmangel (siehe is-single-line). */
.page-head-1line { flex-wrap: nowrap; }
.page-head-1line .page-head-main { flex: 1 1 auto; min-width: 0; }
.page-head-1line .page-head-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.page-head-sub {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--tri-muted, #6c757d);
}
.page-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;      /* Aktionsbuttons bleiben nebeneinander (kein Umbruch unter den Titel) */
    flex: 0 0 auto;
}
/* Platz im Kopf knapp (Titel würde gekürzt) → Aktionsbuttons nur noch als Symbol (Text ausgeblendet, Icon
   behält Größe). Die Klasse .ph-compact wird von der PageHeader-Komponente per JS gesetzt, sobald der Titel
   nicht mehr vollständig passt (spinalcordHeaderFit). Trick: font-size:0 lässt den Textknoten kollabieren;
   das <i>-Icon bekommt seine Größe zurück. Ausnahme: .btn-keep-text behält seinen Text. */
.page-head.ph-compact .page-head-actions .btn:not(.btn-keep-text) { font-size: 0; }
.page-head.ph-compact .page-head-actions .btn:not(.btn-keep-text) > i { font-size: 1rem; margin: 0 !important; }
.page-head.ph-compact .page-head-actions .btn:not(.btn-keep-text) > .spinner-border { margin: 0 !important; }

/* Memory-Inhalt: Datei-Upload per Drag&Drop (Overlay + Zonen-Hervorhebung) */
.memory-dropzone { position: relative; }
.memory-dropzone.dragging { outline: 2px dashed var(--tri-green); outline-offset: -6px; border-radius: .5rem; }
.memory-drop-overlay {
    position: absolute; inset: 0; z-index: 30; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--tri-green-bg); /* leichtes Grün */
}
.memory-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: copy; }
.memory-drop-hint {
    pointer-events: none; display: inline-flex; align-items: center;
    font-weight: 600; color: var(--tri-green-dark);
    background: #fff; border: 1px solid var(--tri-green-soft); border-radius: .5rem;
    padding: .6rem 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.10);
}

/* Benachrichtigungen: gerendertes Markdown kompakt halten (kleine Überschriften/Abstände) */
.notif-md .markdown-body { font-size: .82rem; color: var(--tri-muted, #6b7280); }
.notif-md .markdown-body :is(h1,h2,h3,h4,h5,h6) { font-size: .92rem; font-weight: 600; margin: .35rem 0 .2rem; }
.notif-md .markdown-body p { margin: .2rem 0; }
.notif-md .markdown-body ul, .notif-md .markdown-body ol { margin: .2rem 0; padding-left: 1.15rem; }
.notif-md .markdown-body table { font-size: .8rem; }

/* Prompt-Editor: In-Editor-Suche (Find-Bar über dem Editor + Treffer-Hervorhebung in CodeMirror) */
.prompt-find { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; min-height: 1.9rem; margin-bottom: .25rem; }
.prompt-find.open { justify-content: flex-end; }
.prompt-find-input {
    width: 16rem; max-width: 60%; height: 1.9rem; padding: .1rem .5rem;
    border: 1px solid var(--tri-green-soft, #cdeacf); border-radius: .375rem; font-size: .85rem; outline: none;
}
.prompt-find-input:focus { border-color: var(--tri-green, #2e8b3d); box-shadow: 0 0 0 .15rem rgba(46,139,61,.15); }
.prompt-find-count { font-size: .78rem; color: var(--tri-muted, #6b7280); min-width: 2.5rem; text-align: right; }
.prompt-find-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
    border: 1px solid var(--tri-green-soft, #cdeacf); background: #fff; border-radius: .375rem;
    color: var(--tri-green-dark, #14532d); cursor: pointer;
}
.prompt-find-btn:hover:not(:disabled) { background: var(--tri-green-bg, #ebf6ed); }
.prompt-find-btn:disabled { opacity: .4; cursor: default; }
.prompt-find-ic { color: var(--tri-muted, #6b7280); margin-right: .1rem; }
/* Treffer-Hervorhebung innerhalb des CodeMirror-Editors (global, da von EasyMDE gerendert). */
.CodeMirror .ps-hit { background: rgba(253, 224, 71, .55); border-radius: 2px; }

/* Tool-Typ-Auswahl (Popup „Neues Tool"): Beschreibung je Eintrag auf max. 2 Zeilen begrenzen. */
.tool-type-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aufgaben-Register auf der Lauf-Detailseite: je Aufgabe eine Karte mit Feldern (Instructions, Ergebnis …). */
.task-card { border: 1px solid var(--tri-border, #dee2e6); border-radius: .6rem; padding: .85rem 1rem; margin-bottom: .85rem; background: #fff; }
.task-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.task-card-title { font-weight: 600; font-size: 1rem; }
.task-card-meta { color: var(--tri-muted, #6b7280); font-size: .78rem; margin: .3rem 0 .2rem; }
.task-field-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tri-muted, #6b7280); font-weight: 700; margin-top: .6rem; margin-bottom: .2rem; }
.task-field-box { border: 1px solid var(--tri-border, #e6e8ea); border-radius: .4rem; padding: .5rem .7rem; background: #fbfcfd; font-size: .9rem; }
.task-field-box .markdown-body { font-size: .9rem; }