: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; }
/* Foto entfernen: zweiter Knopf AM Bild (oben rechts), damit die Aktion sichtbar zum Foto gehoert.
   Als Muelleimer weit rechts in der Kopfzeile las er sich wie „Profil loeschen". */
.avatar-del-btn { top: -2px; bottom: auto; background-color: #b02a37; border: 0; padding: 0; }
.avatar-del-btn:hover { background-color: #8f222c; }
.avatar-del-btn:disabled { opacity: .6; }

.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; }
/* „Rückfrage öffnen"-Button auf Karten in der Spalte „Wartet auf Eingabe" (bernsteinfarben, wie die Spalte). */
.kanban-mini-btn-answer { color: #b8860b; border-color: #f2d9a8; background: #fdf9ef; }
.kanban-mini-btn-answer:hover { color: #8a6608; border-color: #e0a94a; background: #fbf1d9; }
/* 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; }
/* Baseline-Ausrichtung: Agentennummer-Chip und Titel teilen die Schrift-Grundlinie; nur das Status-Icon bleibt mittig. */
.kanban-task-row { display: flex; align-items: baseline; 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; align-self: center; margin-right: .25rem; font-size: 1em; text-align: center; }
/* Agentennummer eines echten Sub-Agenten (start_agent) in der Task-Liste: Standard-Chip `agent-num-inline`
   (hellgrün hinterlegt), Schriftgröße erbt von der Zeile (.74rem) – Status-Icon/Titel bleiben unverändert. */
.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; }

/* Solange ein Dialog offen ist, scrollt die SEITE nicht mit.
   Die Anwendung baut ihre Dialoge selbst (kein Bootstrap-JS), also setzt auch niemand `modal-open` auf den
   Body – Bootstraps Sperre greift damit nie. Sichtbar wurde das beim Rollen in einem Dialog mit langer
   Liste: Der Zeiger verlässt beim Rollen kurz den Scrollbereich, und ab da bewegte sich der Hintergrund.
   `overscroll-behavior: contain` allein genügt nicht – es verhindert nur die Weitergabe AM RAND des
   Scrollbereichs, nicht das Rollen daneben. Zentral über :has(), damit es für JEDEN Dialog gilt und nicht
   je Dialog nachgezogen werden muss. */
body:has(.modal.d-block) { overflow: hidden; }

.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);
}
/* HAUSSTANDARD Dialogkopf: dunkles Band, weiße Schrift, kein Trennstrich. Gilt für ALLE `user-modal`,
   damit Zuordnungs-, Designer- und Verwaltungsdialoge denselben Kopf tragen. */
.user-modal-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.5rem;
    background: #1b1c1d;
    color: #fff;
    border-bottom: 0;
    border-top-left-radius: 1.1rem;
    border-top-right-radius: 1.1rem;
}
.user-modal-head h5, .user-modal-head h6, .user-modal-head .modal-title { color: #fff; }
/* Bootstrap-Hilfsklassen für Untertitel sind auf hellen Grund gemünzt – auf dem dunklen Band aufhellen. */
.user-modal-head .text-muted, .user-modal-head .text-secondary { color: #9ea2a6 !important; }
/* Weißes ✕ auf dunklem Feld. Bootstraps `.btn-close` bringt ein SCHWARZES Bild mit; ein `filter: invert(1)`
   hätte die Fläche mitgedreht (der Knopf wurde weiß). Deshalb wird das Bild ersetzt, nicht gefiltert. */
.user-modal-head .btn-close {
    flex: 0 0 auto; opacity: 1; width: 2.1rem; height: 2.1rem; padding: 0;
    border-radius: .6rem; background-color: #2c2e30; background-size: .85rem; background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfe1e3'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.user-modal-head .btn-close:hover { background-color: #3a3d40; }
/* HAUSSTANDARD Agententitel im Dialogkopf: Avatar · Zweckzeile (Kicker) · „#Nr Name" als Überschrift.
   Gilt für jeden Dialog, der sich auf EINEN Agenten bezieht – ein generisches Icon plus Zweck als
   Überschrift verwechselt der Benutzer sonst mit einer Funktion statt eines Agenten. */
.user-modal-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ea2a6; }
.user-modal-title { font-size: 1.05rem; font-weight: 700; color: #fff; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* Der abzukürzende Teil ist ein FLEX-ELEMENT, und ein Flex-Element wird ohne `min-width: 0` nie kleiner
   als sein Inhalt (Vorgabe `min-width: auto`). Ohne die Angabe griff `text-overflow: ellipsis` nicht: Ein
   langer Titel wuchs aus dem Kopfband heraus und schob das Schließen-Kreuz aus dem Dialog. */
.user-modal-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Zweites Netz: Auch ein Titel ohne die span-Struktur (nur Text im Element) darf das Band nicht sprengen. */
.user-modal-head { overflow: hidden; }
.user-modal-agentavatar { flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px #2c2e30; }
/* Die Agentennummer bleibt hellgrün wie überall und steht in der Größe des Namens davor. */
.user-modal-head .agent-num-inline { font-size: inherit; margin-right: 0; }
.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);
}
/* Warn-/Löschdialoge: gleiche runde Kachel, nur in Rot bzw. Gelb. Bootstraps `bg-danger` reicht nicht –
   `.user-modal-avatar` setzt einen Verlauf als background-image, der die Hintergrundfarbe verdeckt. */
.user-modal-avatar.is-danger { background: linear-gradient(135deg, #dc3545, #a71d2a); box-shadow: 0 4px 10px rgba(220,53,69,.35); }
.user-modal-avatar.is-warning { background: linear-gradient(135deg, #f0ad4e, #d98c1a); box-shadow: 0 4px 10px rgba(240,173,78,.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; }
/* HAUSSTANDARD Dialogfuß: ohne graue Fläche, ohne Trennstrich, Schaltflächen rechts. */
.user-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: .4rem 1.5rem 1rem;
    background: transparent;
    border-top: 0;
}
.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). */
/* Zeile "Nummer + Name" in Auswahllisten: Die Nummern sind unterschiedlich breit (#60 vs. #105) und
   schoben die Namen jeweils an eine andere Stelle. Feste Chip-Breite -> alle Namen beginnen gleich. */
.agent-pick-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.agent-pick-row > .agent-id-chip { flex: 0 0 auto; min-width: 3.1rem; }
.agent-pick-row > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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;
}

/* 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;
    /* Ein Pixel nach unten. Die Zeile richtet mittig aus (align-items: center), das Symbol ist aber mit
       1.25rem deutlich größer als der Text (0.82rem) - und bei den Bootstrap-Icons liegt die sichtbare
       Fläche innerhalb des Zeichens etwas über der Mitte. Mathematisch mittig sah deshalb zu hoch aus.
       Über `position: relative` verschoben, damit die Zeilenhöhe unberührt bleibt. */
    position: relative;
    top: 1px;
}

/* 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: 2px solid var(--tri-green);
    border-radius: 0.6rem;
    box-shadow: none;
}

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

/* Finale Antwort eines Sub-Agenten (delegierter Lauf): neutraler Block wie eine normale Nachricht;
   die Kennzeichnung übernimmt das grüne „Finale Antwort Sub-Agent"-Badge im Kopf (kein grüner Hintergrund/Streifen). */
.chat-msg-deleg {
    background-color: #fff;
    border: 1px solid var(--tri-border);
}
/* Kopf des Delegations-Blocks an der TEXT-Baseline ausrichten (nicht mittig): so sitzt das „Finale Antwort
   Sub-Agent"-Badge auf derselben Grundlinie wie der Agentenname/RUN-Link daneben. */
.chat-msg-deleg > .chat-msg-head { align-items: baseline; }

/* Agentenläufe-Übersicht: Agentenname + Aufgaben-Titel EINZEILIG mit Ellipsis (kein Umbruch, Kürzung nach Breite). */
.run-agent-name {
    display: inline-block;
    max-width: 26rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.run-agent-ref {
    display: block;
    max-width: 26rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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;
}

/* Vollständiges LLM-Protokoll: bei sehr langen Verläufen begrenzen + scrollen, statt die Seite zu sprengen. */
.chat-protocol-scroll {
    max-height: 32rem;
    overflow-y: auto;
}

/* Strukturiertes LLM-Protokoll: jeder Tool-Aufruf in eigenem Rahmen; finale Antwort (nach dem letzten Tool) hervor. */
.run-tool-card {
    border: 1px solid var(--tri-border, #d7ddd9);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin: 0.6rem 0;
    background: #fbfcfc;
}
.run-tool-card-head { font-weight: 600; margin-bottom: 0.25rem; }
.run-tool-card-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--tri-muted, #6b7770); margin: 0.45rem 0 0.1rem;
}
/* Parameter/Ergebnis: helles Grau mit schwarzem Text (nicht schwarz hinterlegt); lange Zeilen umbrechen. */
.run-tool-code {
    background: #f1f4f5;
    color: #1a1f1c;
    border: 1px solid var(--tri-border, #d7ddd9);
    border-radius: 0.4rem;
    padding: 0.5rem 0.7rem;
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}
.run-tool-code code { color: inherit; background: none; padding: 0; }
.run-final-answer {
    border: 1px solid var(--tri-green, #0a7d3c);
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    margin: 0.7rem 0 0.3rem;
    background: #fff;
}
.run-proto-meta { border-top: 1px dashed var(--tri-border, #d7ddd9); padding-top: 0.4rem; margin-top: 0.5rem; }

/* 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: 2px solid var(--tri-green); 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, .chat-msg-deleg { 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, .chat-msg-deleg > .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); }

/* Register „Ergebnis": Karten der gesendeten Mails */
.erg-mail-card { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.6rem; padding: 0.75rem 0.9rem; background: var(--bs-body-bg, #fff); }
.erg-mail-head { display: flex; align-items: center; gap: 0.15rem; }
.erg-mail-fields { margin-top: 0.5rem; display: grid; gap: 0.15rem; }
.erg-mf-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.5rem; font-size: 0.9rem; }
.erg-mf-label { color: var(--bs-secondary-color, #6c757d); font-weight: 600; }
.erg-mf-val { color: var(--bs-body-color); overflow-wrap: anywhere; }
.erg-mail-body { border-top: 1px solid var(--bs-border-color, #eee); padding-top: 0.5rem; margin-top: 0.5rem; }

/* Datei-Vorschau-Dialog (FilePreviewDialog): liegt ÜBER allem anderen. Sie wird meist aus einem anderen
   Dialog heraus geöffnet (Lauf-Ergebnis im Designer, Memory, Chat); mit der Bootstrap-Standardhöhe (1055)
   erschien sie hinter den Designer-Dialogen (1100) - der Klick sah dann wirkungslos aus. Über dem
   Avatar-Zuschnitt (1190/1200), weil beides nie zugleich offen ist und die Vorschau der letzte Aufruf ist. */
.file-preview-backdrop { z-index: 1210; }
.file-preview-modal { z-index: 1220; }

/* 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%; }
/* Rund wie die Benutzer-Avatare: Im Gespräch stehen zwei Gesprächspartner nebeneinander, und zwei
   verschiedene Formen ließen den einen wie eine Schaltfläche aussehen. */
.chat-avatar.agent { border-radius: 50%; font-size: 1.15rem; }

/* „Die KI überlegt": Der Avatar pulsiert im Sekundentakt von Hell- nach Dunkelgrün, das Symbol atmet
   leicht mit. Das ersetzt keinen Text – es sagt nur, dass etwas geschieht, während der Denkprozess
   darunter noch leer ist. Bei „prefers-reduced-motion" steht beides still. */
.chat-avatar.is-thinking { animation: ki-denkt 1s ease-in-out infinite; }
.chat-avatar.is-thinking > i { display: inline-block; animation: ki-denkt-symbol 1s ease-in-out infinite; }
@keyframes ki-denkt {
    0%, 100% { background: #7cc38c; }
    50%      { background: #1e6b33; }
}
@keyframes ki-denkt-symbol {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-avatar.is-thinking,
    .chat-avatar.is-thinking > i { animation: none; }
}

/* Die KI im Gespräch trägt ein Bild statt eines Symbols (KiAvatar): der grüne Wirbel, rund
   ausgeschnitten. Der Kreis selbst bringt seine Farbe mit – der grüne Grund würde nur hinter dem
   Bild liegen und beim Pulsieren an den weichen Rändern durchscheinen. */
.chat-avatar.agent:has(> img) { background: transparent; overflow: hidden; }
.chat-avatar.agent > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* „Die KI arbeitet": Der Wirbel ATMET und DREHT sich zugleich – das Atmen im Sekundentakt (Größe und
   Helligkeit), die Drehung gemächlich mit einer Umdrehung alle 4 Sekunden, gleichmäßig (linear, sonst
   ruckelte jede Runde am Übergang).

   Beides liegt bewusst auf ZWEI Elementen: Atmen (scale) und Drehen (rotate) sind beide `transform`, und
   zwei Animationen auf demselben Element überschreiben einander – die zuletzt gestartete gewinnt, die
   andere verschwindet spurlos. Der Kreis trägt deshalb das Atmen, das Bild darin die Drehung. Weil der
   Kreis das Bild beschneidet, skaliert er es mit, und die Helligkeit des Elternteils färbt ohnehin durch. */
.chat-avatar.agent.is-thinking:has(> img) { animation: ki-atmet 1s ease-in-out infinite; }
.chat-avatar.agent.is-thinking > img { animation: ki-dreht 4s linear infinite; }
@keyframes ki-atmet {
    0%, 100% { transform: scale(1);    filter: brightness(0.82); }
    50%      { transform: scale(1.08); filter: brightness(1.25); }
}
@keyframes ki-dreht {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-avatar.agent.is-thinking:has(> img),
    .chat-avatar.agent.is-thinking > img { animation: none; }
}

/* Dasselbe Sinnbild außerhalb des Gesprächs: im Menüpunkt und in der Seiten-Kopfzeile. Die Größe kommt
   von der Komponente (Size), hier steht nur die Ausrichtung in der jeweiligen Zeile. */
/* Der Kreis belegt GENAU die Box eines Menü-Symbols (.nav-icon: 1,25 rem breit, kein Rand rechts –
   den Abstand macht das Leerzeichen im Markup). Sonst beginnt die Beschriftung weiter rechts als in
   allen anderen Zeilen. */
.nav-ki-avatar { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; overflow: visible; }
/* Der Kreis selbst darf 5 % über seine Box hinausragen – er wirkt sonst kleiner als die Strichsymbole
   daneben. Die Box bleibt 1,25 rem, damit die Beschriftung an derselben Stelle beginnt wie überall.

   Er dreht sich dauerhaft, aber sehr gemächlich: eine Umdrehung in 20 Sekunden. Das ist langsam genug, um
   beim Lesen der Menüzeilen nicht abzulenken, und schnell genug, dass das Sinnbild lebendig wirkt statt
   wie ein Symbol. Im Gespräch dreht derselbe Wirbel fünfmal so schnell (4 s) – dort heißt die Bewegung
   „ich arbeite gerade", hier nur „ich bin da". */
.nav-ki-avatar > img { width: 1.3125rem; height: 1.3125rem; animation: ki-dreht 20s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .nav-ki-avatar > img { animation: none; }
}
.page-head-ki-avatar { align-self: flex-start; margin-top: 0.1rem; }
.chat-msg-main { flex: 1 1 auto; min-width: 0; }
/* Name und Text gehören zusammen: enge Zeile (die Standard-Zeilenhöhe polstert den Namen oben und
   unten aus). Ein Hauch Abstand darunter bleibt - ohne ihn klebte der Name an der Zeile mit Uhrzeit und
   Schrittzahl, die unmittelbar folgt. */
.chat-msg-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem; line-height: 1.2; }

/* Spaltenbreiten in Verwaltungs-Listen: EINE Spalte nimmt den Rest, alle anderen genau so viel, wie ihr
   Inhalt braucht. „width:100%" auf der wachsenden und „width:1%" auf den festen ist der übliche Weg, dem
   Tabellen-Algorithmus das beizubringen - er verteilt sonst gleichmäßig, und die Beschreibung bräche
   mitten in der Zeile um, während neben zwei Status-Chips die halbe Breite leer bliebe. */
th.col-grow, td.col-grow { width: 100%; }
th.col-fit,  td.col-fit  { width: 1%; white-space: nowrap; }

/* Der Knopf mit der Funktionszahl in den Listen der Werkzeuge und Konnektoren. Er ersetzt seit 2026.9.504
   die Spalte, in der alle Funktionsnamen standen: Die Namen sagten beim Überfliegen wenig, brauchten aber
   die halbe Zeilenbreite. Die Zahl beantwortet, was man dort suchte („hat es überhaupt etwas, und wie
   viel?"), der Klick zeigt alles samt Beschreibungen. Feste Mindestbreite, damit ein- und zweistellige
   Zahlen die Knopfreihe nicht gegeneinander verschieben. */
.fn-count { min-width: 3.4rem; font-variant-numeric: tabular-nums; }

/* Abgegrenzter Geltungsbereich in den Einstellungen: Was nur unter einer Bedingung wirkt (bisher nur der
   Demo-Modus), steht in einem eigenen Kasten mit Kopfzeile. Ohne die Abgrenzung landeten Einstellungen, die
   IMMER gelten, unter derselben Ueberschrift - und wer den Demo-Modus ausschaltete, hielt sie fuer mit
   abgeschaltet. */
.scope-box {
    border: 1px solid var(--tri-border, #e6e8ea); border-left: 3px solid var(--tri-green, #2e7d4f);
    border-radius: .5rem; padding: .75rem 1rem 1rem;
}
.scope-head {
    font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    color: var(--tri-green, #2e7d4f); margin-bottom: .6rem;
}

/* Anlagen direkt unter einer Rückfrage (RunResultView FilesOnly): etwas Luft zur Frage-Karte darüber. */
.run-read-files { margin-top: .75rem; }

/* Absenderliste im Mail-Werkzeug: zwei schmale Spalten (primär, auch erlaubt) und die Adresse daneben.
   Eine Tabelle waere hier zu schwer - es sind zwei Haken je Zeile, keine Daten. */
.sender-list { display: flex; flex-direction: column; }
.sender-row { display: grid; grid-template-columns: 4.5rem 5.5rem 1fr; align-items: center; gap: .25rem; padding: .25rem 0; }
.sender-head { font-size: .78rem; color: var(--tri-muted, #8a9099); padding-bottom: .15rem; }
.sender-head .sender-col { justify-content: flex-start; }
.sender-col { display: flex; justify-content: center; }
.sender-addr { margin: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Datei-Auswahl („Bild wählen", Anhang anhängen, Avatar tauschen …): Das Eingabefeld liegt UNSICHTBAR
   über seiner Schaltfläche, statt mit display:none aus dem Layout genommen zu werden.

   Mit display:none gibt es kein anklickbares Feld; der Klick trifft das umgebende <label> und wird von
   dort an das Feld weitergereicht. Safari öffnet den System-Dialog in diesem Fall gelegentlich HINTER dem
   Browserfenster - er ist dann scheinbar „kaputt" (gemeldet am 14.09.2026 am Agenten-Avatar). Liegt das
   Feld selbst unter dem Zeiger, ist der Klick ein echter Klick darauf, und der Dialog kommt nach vorn.
   Dasselbe Muster benutzen die Ablegezonen (.memory-drop-input, .aad-drop-input) seit jeher. */
label:has(> .file-pick-input) { position: relative; }
.file-pick-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.file-pick-input:disabled { cursor: default; }

/* Personen-Auswahl in Werkzeug-Dialogen (Outlook-Kalender): eine Liste, keine Knopfsammlung.
   Vorher lag der ganze Bereich auf grauem Grund (.bg-light) und jede Zeile war zusaetzlich ein graues
   btn-light - zwei Grautoene uebereinander, in denen die Namen untergingen. Jetzt: weisser Grund wie im
   uebrigen Dialog, Trennlinien statt Kaesten, und die Liste nimmt sich die Hoehe, die der Dialog hergibt
   (vorher 14 rem, darunter blieb der halbe Dialog leer). */
.pick-panel { background: #fff; }
.pick-list { min-height: 16rem; max-height: 30rem; overflow: auto; }
.pick-row {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--tri-border, #e6e8ea);
    padding: .4rem .35rem; color: inherit;
}
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover:not(:disabled) { background: var(--tri-green-bg-active, #eef6f0); }
.pick-row:disabled { opacity: .55; cursor: default; }
.pick-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pick-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-mail { font-size: .8rem; color: var(--tri-muted, #8a9099); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-done { color: var(--tri-green, #2e7d4f); font-size: 1.1rem; flex: 0 0 auto; }

/* Lauf-Detail, Register „Kontext": Der Inhalt einer Nachricht steht in der Standard-Chat-Komponente,
   die farbige Kennzeichnung (an das LLM, vom Agenten, Kritiker, Sub-Agent) traegt jetzt dieser innere
   Block statt einer eigenen Nachrichten-Optik. */
.run-ctx{min-width:0}
.run-ctx-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;margin-bottom:.25rem;font-size:.82rem;color:var(--tri-muted)}
.run-ctx-head:empty{display:none}
.run-ctx.chat-msg-out{border-left:3px solid var(--tri-green-soft,#cfe8d5);padding-left:.7rem}
.run-ctx.chat-msg-critic{border-left:3px solid #f0c36d;padding-left:.7rem}
.run-ctx.chat-msg-deleg{border-left:3px solid var(--tri-green);padding-left:.7rem}
/* Runder Avatar wie im Chat (AgentAvatar bringt seine eigene Form mit). */
.chat-avatar-round{border-radius:50%;overflow:hidden}

/* Tabler-Symbole in Schaltflaechen etwas kleiner als Bootstrap-Symbole: Tabler zeichnet bis an den Rand
   des Schriftquadrats, Bootstrap laesst innen Luft. Bei gleicher Schriftgroesse wirkt ein Tabler-Symbol
   dadurch deutlich groesser als seine Nachbarn in derselben Knopfleiste. */
.btn .ti { font-size: .88em; vertical-align: -.06em; }
.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; align-items: flex-start; text-align: left; padding: 7px 12px 9px 16px; }
.diag-run-card { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; }
.diag-run-avatarcol { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.diag-run-avatar { flex: 0 0 auto; line-height: 0; }
.diag-run-gauge { display: block; }
/* 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; }
/* Ab 992px hat der Inhaltsbereich 1.5rem Polster (px-lg-4). Bliebe der Bleed bei 1rem, stuende links
   neben dem Titel eine 8px-Luecke zur Sidebar - das Standard-Kopfband zieht dort ebenfalls auf 1.5rem. */
@media (min-width: 992px) {
    .chat-topbar { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* 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; }
/* Antwort-Dialog der Tabellenansicht: beide Register in einem Container mit fester Mindesthöhe
   (kein Größensprung beim Wechseln); das Chat-Fenster füllt die Höhe. */
.qa-tab-body { min-height: 26rem; display: flex; flex-direction: column; }
.qa-question { flex: 1 1 auto; min-height: 26rem; display: flex; flex-direction: column; }
.cursor-pointer { cursor: pointer; }

/* Mail-Vorschau: gerendertes Mail-HTML in einem abgeschotteten iframe (Höhe setzt js/mail-preview.js) */
.mail-preview-frame { width:100%; border:0; background:#fff; height:14rem; display:block; }

/* Leseansicht „Bisheriges Ergebnis" (RunResultDialog): schlichte Abschnitte statt Chat-Blasen */
.run-read-label { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
    color:var(--tri-faint); margin-bottom:.35rem; }
.run-read-block { background:var(--tri-surface); border:1px solid var(--tri-border); border-radius:.5rem;
    padding:.6rem .75rem; }
.run-read-entry { border-top:1px solid var(--tri-border); padding:.6rem 0; }
.run-read-entry:first-of-type { border-top:0; padding-top:.2rem; }
.run-read-time { font-size:.75rem; color:var(--tri-faint); margin-bottom:.25rem; }

/* Kopfzeile eines Rückfragen-Eintrags: Agent einzeilig, bei Platzmangel gekürzt (…) */
.chat-list-agent { display:flex; align-items:center; gap:.3rem; min-width:0; margin-bottom:.2rem;
    font-size:.78rem; color:var(--tri-muted-2); }
.chat-list-agent-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Empfänger einer Rückfrage – eigene Zeile unter dem Titel */
.chat-list-to { font-size:.78rem; color:var(--tri-muted-2); margin-top:.2rem;
    display:flex; align-items:center; gap:.3rem; min-width:0; }
.chat-list-to > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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; }
/* Ohne seitliches Polster: Der Einzug stammte vom fruehreren pulsierenden Punkt davor. Ohne ihn stand
   „KI denkt nach" einen Tick weiter rechts als die Zeile mit Dauer/Schritten und der Denkprozess-Kasten
   darunter - drei Zeilen, drei Anfaenge. */
/* „KI denkt nach …": linksbündig (kein seitlicher Rand) und ohne senkrechte Polsterung – sie schob
   die Zahlenzeile darunter sichtbar weg. */
.chat-typing { color:#6c757d; font-size:.85rem; padding:0; line-height:1.3; }
.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 */
/* Interaktive Rückfragen (```ask-Block) – Triagen-Design */
.chat-questions { margin:.4rem 0; font-size:.9rem; }
/* Entscheidungsgrundlage: KEINE Überschrift mehr, sondern ein Sachverhalt - normale Schriftstärke,
   eigene ruhige Fläche, Abstand. Fett und grün war richtig, solange dort ein Einleitungssatz stand;
   für eine Tabelle mit Empfänger und Betrag ist es falsch. */
.chat-questions .cq-intro-toggle { display:inline-flex; align-items:center; gap:.35rem; margin:0 0 .5rem;
    padding:0; border:0; background:none; color:var(--tri-green-dark); font-size:.85rem; font-weight:600; }
.chat-questions .cq-intro-toggle:hover { text-decoration:underline; }
.chat-questions .cq-intro-toggle i { font-size:.8em; }
.chat-questions .cq-intro { margin-bottom:.75rem; padding:.6rem .8rem; border-radius:.5rem;
    background:var(--tri-surface); border:1px solid var(--tri-border); }
.chat-questions .cq-intro .markdown-body > *:first-child { margin-top:0; }
.chat-questions .cq-intro .markdown-body > *:last-child { margin-bottom:0; }
.chat-questions .cq-intro table { font-size:.9em; margin:.35rem 0; }
/* Frage-Karte: Kopf (Fragetext) mit Trennlinie, darunter die Antwortoptionen */
.chat-questions .cq-card { border:1px solid var(--tri-border); border-radius:.75rem; background:#fff;
    margin-bottom:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.04); overflow:hidden; }
.chat-questions .cq-card-head { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
    padding:.8rem 1rem; border-bottom:1px solid var(--tri-border); }
.chat-questions .cq-qnum { font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--tri-faint); }
.chat-questions .cq-q { font-weight:700; color:var(--tri-text); line-height:1.35; }
.chat-questions .cq-card-body { padding:.85rem 1rem; }
/* Antwortoption als anklickbare Karte; ausgewählt = grün */
.chat-questions .cq-option { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; margin-bottom:.5rem; cursor:pointer;
    border:1px solid var(--tri-border); border-radius:.6rem; background:#fff;
    transition:background .12s ease, border-color .12s ease; }
.chat-questions .cq-option:last-child { margin-bottom:0; }
.chat-questions .cq-option:hover { background:var(--tri-green-bg); border-color:var(--tri-green-soft); }
.chat-questions .cq-option.sel { background:var(--tri-green-bg); border-color:var(--tri-green); }
.chat-questions .cq-option input { width:1.15rem; height:1.15rem; 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; }
/* „Andere Antwort": Option + (bei Auswahl) eingerücktes Freitextfeld mit Zeichenzähler */
.chat-questions .cq-option-other { display:block; }
.chat-questions .cq-option-lead { display:flex; align-items:center; gap:.7rem; cursor:pointer; }
.chat-questions .cq-free .cq-other-wrap { margin:0; }
.chat-questions .cq-free .cq-count { margin-left:0; }
.chat-questions .cq-other-wrap { position:relative; margin:.6rem 0 0 1.85rem; }
.chat-questions .cq-other { min-height:5.5rem; resize:vertical; padding-right:2.1rem; font-size:inherit; line-height:1.45; border-radius:.55rem; background:#fff; }
.chat-questions .cq-count { margin:.3rem 0 0 1.85rem; text-align:right; font-size:.78rem; color:var(--tri-faint); }
.chat-questions .cq-zoom-btn { position:absolute; top:.4rem; right:.4rem; width:1.65rem; height:1.65rem;
    display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:.78rem; line-height:1;
    border:1px solid var(--tri-green-soft); border-radius:.4rem; background:#fff; color:var(--tri-green); cursor:pointer; transition:background .12s, color .12s; }
.chat-questions .cq-zoom-btn:hover { background:var(--tri-green); color:#fff; }
.chat-questions .cq-zoom-btn:disabled { opacity:.45; cursor:default; background:#fff; color:var(--tri-green); }
/* Aktionszeile: Senden-Button + Hinweis, warum noch nicht gesendet werden kann */
.chat-questions .cq-actions { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.chat-questions .cq-submit { border-radius:.55rem; font-weight:600; padding:.5rem 1.1rem; }
.chat-questions .cq-submit:disabled { background:var(--tri-surface); border-color:var(--tri-border); color:var(--tri-faint); opacity:1; }
.chat-questions .cq-hint { font-size:.86rem; color:var(--tri-muted); }
.chat-questions .cq-done { display:inline-flex; align-items:center; font-size:.86rem; font-weight:600; color:var(--tri-green); }
/* Benutzergruppen: Mitglieder-Chips */
.ug-members { display:flex; flex-wrap:wrap; gap:.4rem; max-height:min(42vh,320px); overflow-y:auto; padding:.15rem; }
.ug-member { display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .3rem .2rem .25rem;
    border:1px solid #d0e5d8; border-radius:1rem; background:#fff; font-size:.85rem; max-width:100%; }
.ug-member-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:12rem; }
.ug-member-x { display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem;
    border:none; border-radius:50%; background:transparent; color:#98a2b3; cursor:pointer; padding:0; font-size:.7rem; flex:0 0 auto; }
.ug-member-x:hover { background:#f2dede; color:#c0392b; }
/* Benutzergruppen: Ankreuz-Liste im Benutzer-Editor */
.ug-checklist { display:flex; flex-direction:column; gap:.1rem; max-height:min(42vh,300px); overflow-y:auto;
    border:1px solid #e2ece6; border-radius:.5rem; padding:.35rem .5rem; background:#fff; }
.ug-check { display:flex; align-items:baseline; gap:.55rem; padding:.3rem .15rem; cursor:pointer; border-radius:.3rem; }
.ug-check:hover { background:#f5faf6; }
.ug-check input { width:1.05rem; height:1.05rem; flex:0 0 auto; margin:0; align-self:center; cursor:pointer; accent-color:var(--tri-green); }
.ug-check-name { font-weight:500; }
.ug-check-desc { color:#8a97a0; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Großes Eingabefeld (Zoom) für lange Freitext-Antworten einer Rückfrage */
/* „Antwort vergrößern": seit 2026.9.471 im Popup-Hausstandard (user-modal mit dunklem Kopf, Abbrechen · OK).
   Eigene Regeln gibt es nur noch für das große Eingabefeld - Kopf, Rumpf und Fuß kommen aus .user-modal. */
.cq-zoom-area { width:100%; min-height:min(60vh,26rem); resize:vertical; font-size:.95rem; line-height:1.5; }

/* ---------- 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.

   Die Ausnahme für Dialoge steht als EIGENE Regel weiter unten – NICHT als `:not(.modal)` an diesem
   Selektor. Ein `:not()` hier erhöht die Spezifität auf (0,4,0) und schlägt damit die Opt-outs anderer
   Seiten (`.page-content > .chat-page.chat-page`, (0,3,0)); Chat und KI-Assistent wurden dadurch am
   11.09.2026 schmal und mittig statt über die volle Breite. */
.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;
}

/* Opt-out für Dialoge: Rendert eine Seite STATT des Kopfbands einen Dialog (so sperrt der Demo-Modus die
   Verwaltungsseiten), wäre er das erste Element und bekäme Kopfband-Aussehen, `position: sticky` und
   `z-index: 30` – er stand dann oben links statt mittig, und das Backdrop (fest, z-index 1050) lag ÜBER
   ihm, sodass „Schließen" keinen Klick mehr annahm. Klasse doppelt notiert, damit die Spezifität (0,3,0)
   der des Kopfbands entspricht und die spätere Stelle entscheidet – genau wie beim Chat-Opt-out. */
.page-content > .modal.modal {
    display: block !important;
    align-items: stretch !important;
    position: fixed;
    top: 0;
    margin: 0 !important;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    border-bottom: 0;
    z-index: 1055;
}
.page-content > .modal-backdrop.modal-backdrop {
    display: block !important;
    align-items: stretch !important;
    position: fixed;
    top: 0;
    margin: 0 !important;
    padding: 0;
    min-height: 0;
    background-color: #000;
    border-bottom: 0;
    z-index: 1050;
}

/* 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). */
/* Hellgrau statt gruen: Der Denkprozess ist Beiwerk zur Antwort, kein Ergebnis. In Markenfarbe zog er
   den Blick auf sich, obwohl darunter das steht, worauf der Benutzer wartet. */
.chat-think-live {
    border: 1px solid var(--tri-line, #e6e8e7);
    border-radius: .5rem;
    background: #f5f6f7;
    overflow: hidden;
}
.chat-think-live-head {
    font-size: .72rem;
    font-weight: 600;
    color: #5b6168;
    padding: .35rem .65rem;
    border-bottom: 1px solid var(--tri-line, #e6e8e7);
    display: flex;
    align-items: center;
    gap: .4rem;
}
/* Auf-/Zuklappen des Denkprozesses – sitzt rechts in der Kopfzeile, nicht als eigene Zeile darunter. */
.chat-think-toggle {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0 .15rem;
    line-height: 1;
    cursor: pointer;
}
.chat-think-toggle:hover { color: var(--tri-text, #1f2a24); }
/* ---------- Denkprozess als Schrittliste (ThinkingSteps) ----------
   Je Schritt eine ruhige, graue Zeile; Einzelheiten erscheinen erst auf Klick. Die Liste ist das
   Protokoll einer Arbeit, keine Erzählung: Sie soll überflogen werden können, und nur dort, wo jemand
   nachsieht, steht der volle Befehl samt Ausgabe. */
.think-steps {
    border: 1px solid var(--tri-line, #e6e8e7);
    border-radius: .55rem;
    overflow: hidden;
    background: #fff;
}
.think-step + .think-step { border-top: 1px solid var(--tri-line, #e6e8e7); }
.think-step-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .5rem .7rem;
    font-size: .82rem;
    color: #6b7570;
    cursor: pointer;
}
.think-step-head.is-static { cursor: default; }
button.think-step-head:hover { background: #f6f8f9; }
.think-step-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Fehlgeschlagen steht IN der Zeile, nicht als Symbol daneben: Wer die Liste überfliegt, soll den
   Fehlschlag lesen können, ohne eine Farbe deuten zu müssen. */
.think-step-failed { color: #a4262c; font-weight: 600; flex: 0 0 auto; }
.think-step-caret { flex: 0 0 auto; font-size: .75rem; opacity: .7; }
.think-step-detail {
    padding: .1rem .7rem .6rem 1.4rem;
    background: #fbfcfc;
}
.think-step-detail-label { font-size: .72rem; color: #8a918c; margin-bottom: .2rem; }
.think-step-detail pre {
    margin: 0;
    font-size: .74rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow: auto;
    color: #46504a;
}
/* Die laufende Zeile: dezent hervorgehoben, mit pulsierendem Punkt - das Streaming soll sichtbar sein. */
.think-step.is-live .think-step-head { color: var(--tri-green-dark, #1d6b32); }
.think-step-dot {
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--tri-green, #2e8b3d);
    animation: think-dot 1s ease-in-out infinite;
}
@keyframes think-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .think-step-dot { animation: none; opacity: .8; } }

/* Zugeklappt: genau EINE Zeile, der Rest wird abgeschnitten. Ohne die feste Zeile waechst der Kasten
   waehrend des Wartens weiter und schiebt Verlauf und Eingabe aus dem Bild. */
.chat-think-live-last {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hinweis in der laufenden Antwort-Blase, wenn das Nachladen der Lauf-Details mehrfach scheitert.
   Die Live-Abfrage laeuft weiter – der Nutzer soll nur wissen, dass die Anzeige gerade haengt. */
.chat-poll-warn {
    font-size: .74rem;
    color: var(--tri-warn, #a8501b);
}

/* Token-Rate unter einer Antwort – nur fuer Administratoren sichtbar (Betriebskennzahl, kein Nutzerinhalt). */
.chat-rate {
    font-size: .72rem;
    color: var(--tri-text-muted, #6b7570);
    font-variant-numeric: tabular-nums;
}
.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. */
}

/* Keine gelbe Hervorhebung im Denkbereich. Der Denkprozess ist Rohtext des Modells; darin stehen
   Abschnittsmarken wie `==FRAGEN==` oder `==PROMPT==`. Markdown liest `==…==` als Hervorhebung und malt
   den Rest der Zeile gelb – gemeint war eine Trennlinie, zu sehen war ein Textmarker quer durch den
   Absatz. Im Denkbereich deshalb neutral darstellen; in den ANTWORTEN bleibt die Hervorhebung erhalten,
   dort ist sie gewollt. */
.chat-think-live-body mark,
.chat-section-body mark {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* 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); }
/* Agentennummer im Listen-Picker: hellgrüner Chip wie der Standard (.agent-num-inline), nicht faint-grau. */
.agent-lp-id { flex: 0 0 auto; font-size: .78rem; font-weight: 700; background: var(--tri-green-bg-active); color: var(--tri-green); border-radius: .3rem; padding: .02em .4em; }
.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; }

/* Provider-Auswahl (Designer „Provider ändern"): Karten mit Logo + Beschreibung, eine auswählbar. */
.wfd-prov-list { display: flex; flex-direction: column; gap: .5rem; max-height: 52vh; overflow-y: auto; padding: .15rem; }
.wfd-prov-card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
    background: #fff; border: 1.5px solid var(--tri-border, #dee2e6); border-radius: .6rem; padding: .6rem .8rem;
    cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.wfd-prov-card:hover { border-color: var(--tri-green); background: var(--tri-green-bg-active); }
.wfd-prov-card.sel { border-color: var(--tri-green); background: var(--tri-green-bg-active);
    box-shadow: 0 0 0 2px rgba(46,139,61,.15); }
.wfd-prov-logo { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #fff; }
.wfd-prov-logo-fb { display: inline-flex; align-items: center; justify-content: center; color: var(--tri-muted);
    font-size: 1.1rem; border: 1px solid var(--tri-border, #dee2e6); }
.wfd-prov-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.wfd-prov-name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.wfd-prov-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--tri-green); background: var(--tri-green-bg-active); border-radius: .3rem; padding: .05em .4em; }
.wfd-prov-model { font-size: .78rem; color: var(--tri-muted); }
.wfd-prov-desc { font-size: .8rem; color: var(--tri-muted); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wfd-prov-check { flex: 0 0 auto; font-size: 1.15rem; color: var(--tri-green); }
.wfd-prov-card:not(.sel) .wfd-prov-check { color: #c7cdc9; }
.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); }

/* SharePoint-Zuordnung: links der Baum, rechts die zugeordneten Pfade.
   Beide Spalten haben dieselbe feste Höhe und scrollen für sich – der Dialog selbst springt dadurch beim
   Aufklappen des Baums nicht, und die rechte Spalte bleibt beim Zuordnen an ihrem Platz. */
/* Höhe der beiden Spalten: so hoch wie der Dialog es zulässt, aber gedeckelt – sonst stand unter den
   Spalten ein Streifen Leerraum, während die Liste daneben scrollte. */
/* Beide Spalten füllen die HÖHE DES DIALOGS (er hat mit user-modal-fixed eine konstante Höhe). Eine
   eigene Zahl (vorher min(58vh, 34rem)) ließ unten einen Streifen Leerraum stehen. */
.sp-assign { --sp-indent: 1.1rem; height: 100%; }
/* Feste Höhe, nicht min-height: Mit min-height wächst die Spalte mit ihrem Inhalt, der innere
   Scrollbereich kommt nie zum Tragen – und es scrollte der ganze Dialog statt jeder Liste für sich. */
.sp-assign > [class*="col-"] { height: 100%; min-height: 0; }
.sp-tree { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.sp-tree-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    border: 1px solid var(--tri-border); border-radius: var(--tri-radius);
    padding: .35rem .25rem; background: #fff;
}
.sp-tree-row { display: flex; align-items: center; gap: .3rem; padding: .12rem 0; font-size: .88rem; }
.sp-tree-row:hover { background: var(--tri-green-bg); }
.sp-tree-toggle { width: 1.1rem; flex: 0 0 1.1rem; color: var(--tri-muted); text-align: center; }
.sp-tree-icon { color: var(--tri-muted); flex: 0 0 auto; }
.sp-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tree-badge { margin-left: auto; flex: 0 0 auto; font-weight: 500; }
/* Der „+"-Knopf steht rechts und erscheint erst beim Überfahren der Zeile: Sonst ist der Baum eine Wand
   aus Knöpfen, und man sieht die Struktur nicht mehr. */
.sp-tree-add { margin-left: auto; flex: 0 0 auto; padding: 0 .3rem; line-height: 1.3; visibility: hidden; }
.sp-tree-row:hover .sp-tree-add, .sp-tree-add:focus-visible { visibility: visible; }
.sp-assign-list {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    border: 1px solid var(--tri-border); border-radius: var(--tri-radius);
    padding: .4rem; background: #fff;
}
.sp-assign-row { border: 1px solid var(--tri-border); border-radius: var(--tri-radius); padding: .4rem; background: #fff; }
.sp-assign-row + .sp-assign-row { margin-top: .4rem; }
/* Kopfzeile einer Zuordnung: Sinnbild, Pfad (nur Anzeige, gekürzt) und das Entfernen-Kreuz rechts. */
.sp-assign-head { display: flex; align-items: center; gap: .4rem; }
.sp-assign-head > i { color: var(--tri-muted); flex: 0 0 auto; }
.sp-assign-path {
    /* Kein Monospace: Der Pfad ist hier Beschriftung, kein Code – er soll wie der übrige Text aussehen. */
    font-size: .85rem;
    color: var(--tri-text); direction: rtl; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0;
}
/* Gekürzt wird VORNE: „…/sites/DataCenter/Marketing" sagt etwas, „https://trinidat.sharepo…" nichts.
   direction: rtl schneidet am Anfang ab; die Zeichen selbst bleiben in ihrer Reihenfolge, weil eine URL
   keine bidirektionalen Anteile hat. */
.sp-assign-del { flex: 0 0 auto; padding: 0 .35rem; line-height: 1.4; }
.sp-assign-rights { margin: .3rem 0 0 .15rem; }
/* „inkl. Unterordner" ist Reichweite, kein Recht – etwas abgesetzt, damit die drei Rechte zusammenbleiben. */
.sp-assign-scope { margin-left: auto; }
.sp-assign-scope .form-check-label { color: var(--tri-muted); }

/* Auswahl „Welche Art von Tool?": kompakte Zeilen – Sinnbild links, Name und Zweck rechts gestapelt.
   Vorher war jede Zeile ein Knopf mit py-3 und dreizeilig umbrechender Beschreibung; sieben Einträge
   füllten damit zwei Bildschirmhöhen, obwohl man sie vergleichen will. */
.tool-type-row { display: flex; align-items: flex-start; gap: .55rem; text-align: left; padding: .5rem .7rem; }
.tool-type-row > i { font-size: 1.05rem; line-height: 1.35; flex: 0 0 1.2rem; }
.tool-type-row .tool-type-text { min-width: 0; }
.tool-type-row .tool-type-name { font-weight: 600; line-height: 1.3; }
.tool-type-desc { font-size: .82rem; line-height: 1.3; margin-top: .05rem; }

/* ===== 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; }
/* Prompt-Engineering/Diagnose-Fenster tragen denselben dunklen Kopf wie jeder andere Dialog. */
.pe-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: #1b1c1d; border-bottom: 0; }
.pe-head .btn-close {
    flex: 0 0 auto; opacity: 1; width: 2.1rem; height: 2.1rem; padding: 0;
    border-radius: .6rem; background-color: #2c2e30; background-size: .85rem; background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfe1e3'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.pe-head .btn-close:hover { background-color: #3a3d40; }
.pe-head .agent-num-inline { font-size: inherit; margin-right: 0; }
.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: #9ea2a6; }
.pe-title { font-size: 1.05rem; font-weight: 700; color: #fff; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* 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 { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pe-right-head { display: flex; align-items: center; min-height: 2.1rem; font-size: .8rem; font-weight: 700; color: var(--tri-muted); padding: .5rem 1rem .25rem; }
/* Die Lupe des Editors sitzt in der Zeile der Überschrift statt in einer eigenen Zeile darüber – sie stand
   sonst allein auf einer Zeile und nahm dem Editor die Höhe weg. Absolut, damit sie aus dem Fluss ist;
   die gewonnene Höhe bekommt der Editor. Gilt nur hier, andere PromptEditor-Verwendungen bleiben unberührt. */
.pe-right .prompt-find { position: absolute; top: .4rem; right: 1rem; margin: 0; z-index: 2; }
/* Aufgeklappt liegt die Suchleiste ueber der Ueberschrift – deshalb deckt sie sie sauber ab, statt sich
   mit ihr zu ueberlagern. */
.pe-right .prompt-find.open { background: #fff; padding: 0 0 0 .6rem; border-radius: .5rem; box-shadow: -10px 0 10px -8px rgba(0,0,0,.12); }
.pe-right .prompt-find-input { max-width: 15rem; }
/* 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; }
/* Fuß wie ueberall: ohne graue Flaeche und ohne Trennstrich, Schaltflaechen rechts. */
.pe-foot { display: flex; align-items: center; gap: .5rem; padding: .4rem 1.25rem 1rem; border-top: 0; background: transparent; }
@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; }
/* Trenner und Drehen-Schalter in derselben Leiste unten rechts. */
.ag-density-sep { width: 1px; height: 1.1rem; background: var(--tri-border); flex: 0 0 auto; }
.ag-density-check { display: flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer;
    font-size: .82rem; white-space: nowrap; user-select: none; }
.ag-density-check input { margin: 0; cursor: pointer; }
canvas.ag-svg { touch-action: none; cursor: grab; }
/* Hinweis-Textfeld des markierten Agenten (Triagen-Design, hell). Unten links, damit es die Dichte-Regelung
   (unten rechts) nicht überdeckt. Erscheint beim Anklicken eines Agenten. */
.ag-desc {
    position: absolute; left: 1rem; bottom: 1rem; max-width: min(360px, 72%); z-index: 5;
    background: #fff; border: 1px solid var(--tri-border); border-radius: .7rem; padding: .7rem .9rem;
    box-shadow: 0 10px 28px rgba(20,70,36,.14); font-size: .85rem; line-height: 1.45; color: #2b3138;
    pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s;
}
.ag-desc.is-visible { opacity: 1; transform: none; }
.ag-desc-title { display: flex; align-items: baseline; gap: .4rem; font-weight: 700; color: var(--tri-green); margin-bottom: .3rem; }
.ag-desc-text { color: var(--tri-muted); }
.ag-desc-empty { font-style: italic; opacity: .8; }

/* 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; }
/* Ordner-Seite (/folders): der Kartenkörper füllt die volle Höhe und scrollt selbst (overflow-y:auto). Die
   28rem-Kappung der inneren .ftv darf hier NICHT greifen – sonst endet der Baum vorzeitig mit leerem Raum
   darunter. Anders als .ftv-compact bleibt die normale (große) Schrift erhalten. */
.ftv-fill-host > .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; }

/* ---------- Wartungsmodus-Fußzeile ----------
   Fixe Leiste am unteren Rand (nur bei aktivem Wartungsmodus). Links um die Sidebar-Breite eingerückt, damit sie
   bündig zum Inhaltsbereich sitzt und die Sidebar nicht überdeckt. Der Inhalt bekommt unten Platz (padding),
   damit nichts hinter der Leiste verschwindet. Ersetzt NICHT das Seiten-Kopfband. */
.maintenance-footer {
    position: fixed;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background-color: #fff3cd;
    color: #664d03;
    border-top: 2px solid #e0a800;
    font-size: 0.9rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.10);
}
.maintenance-footer .bi { font-size: 1.05rem; flex: 0 0 auto; }
/* Knapper Plattenplatz: dieselbe Machart wie der Wartungshinweis, aber in Rot - hier droht Datenverlust,
   nicht bloss eine Wartepause. Steht ein Stueck hoeher, damit beide Hinweise gleichzeitig lesbar bleiben. */
.maintenance-footer.lowdisk-footer {
    background-color: #f8d7da;
    color: #842029;
    border-top-color: #dc3545;
}
.page.has-maintenance-footer .maintenance-footer.lowdisk-footer:not(:only-of-type) { bottom: 2.6rem; }
/* Aufgebrauchtes Budget: kein Fehler, sondern eine Grenze mit Ausweg - deshalb der Markenton statt Rot,
   und der Weg zur Erweiterung steht als Schaltflaeche mitten im Satz. */
.maintenance-footer.budget-footer {
    background-color: #e8f3ec;
    color: #15532f;
    border-top-color: var(--tri-green);
}
.maintenance-footer.budget-footer .budget-more {
    color: #15532f;
    font-weight: 600;
    text-decoration: underline;
}
.page.has-maintenance-footer .maintenance-footer.budget-footer:not(:only-of-type) { bottom: 2.6rem; }
/* Sind ausnahmsweise beide Warnungen da, steht der Plattenplatz oben - er ist der dringendere. */
.page.has-maintenance-footer main:has(.budget-footer) .maintenance-footer.lowdisk-footer { bottom: 5.2rem; }
.page.has-maintenance-footer .page-content { padding-bottom: 3rem; }

@media (min-width: 769px) {
    .sidebar-collapsed .maintenance-footer { left: 64px; }
}
@media (max-width: 768px) {
    .maintenance-footer { left: 0; }
}

/* --- Designer-Panel: Register Browser | KI-Assistent ------------------------------------ */
/* Register im Panel-Kopf: beide Reiter teilen die Breite, damit nichts aus dem schmalen Panel laeuft.
   Die Andock-Symbole sitzen rechtsbuendig und zaehlen nicht zur Breitenaufteilung. */
.wfd-tree-tabs { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; align-items: center; }
.wfd-tree-tabs .nav-item { flex: 1 1 0; min-width: 0; }
.wfd-tree-tabs .nav-item.wfd-tree-pin { flex: 0 0 auto; margin-left: auto; display: flex; gap: .1rem;
    padding: 0 .35rem; }
/* Durchgehend dunkelgrau; der aktive Zustand wird durch eine dezente Flaeche gezeigt, nicht durch Farbe. */
.wfd-dockbtn { border: 0; background: none; padding: .2rem .3rem; border-radius: .3rem; line-height: 1;
    color: var(--tri-muted-2); cursor: pointer; }
.wfd-dockbtn:hover { background: var(--tri-green-bg); color: var(--tri-text); }
.wfd-dockbtn.on { background: var(--tri-border); color: var(--tri-text); }
/* Kein eigenes Icon fuer "unten angedockt" - das Leisten-Symbol um 90 Grad gedreht zeigt es. */
.wfd-dockbtn-rot > i { display: inline-block; transform: rotate(90deg); }
.wfd-tree-tabs .nav-link { width: 100%; font-size: .78rem; padding: .45rem .3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Der KI-Bereich fuellt die Panel-Hoehe und scrollt innen (fill-col/fill-grow-Muster). */
.wfd-tree-ai { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.aip { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.aip-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem .6rem; }
/* Kopfzeile des KI-Assistenten: links der Agent im Dialog, rechts die beiden Neuanfaenge. */
.aip-head { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem;
    padding: .4rem .6rem; border-bottom: 1px solid var(--tri-border); background: #fff; }
.aip-head-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .35rem;
    font-size: .82rem; overflow: hidden; }
.aip-head-name { font-weight: 600; color: var(--tri-green-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-head-none { color: var(--tri-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-head .btn { flex: 0 0 auto; white-space: nowrap; font-size: .74rem; padding: .15rem .4rem; }
/* Was die KI gerade geaendert hat, waehrend sie noch arbeitet. */
.aip-progress { margin-top: .25rem; font-size: .74rem; color: var(--tri-green-dark); font-style: italic; }
.aip-hint { font-size: .82rem; color: var(--tri-muted); padding: .6rem .2rem; }
.aip-hint-title { font-weight: 600; color: var(--tri-text); margin-bottom: .35rem; }
.aip-draft { flex: 0 0 auto; border-top: 1px solid var(--tri-border); background: var(--tri-green-bg); }
.aip-draft-head { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none;
    padding: .45rem .6rem; font-size: .8rem; font-weight: 600; color: var(--tri-green-dark); cursor: pointer; }
.aip-draft-len { margin-left: auto; font-weight: 400; color: var(--tri-muted); font-variant-numeric: tabular-nums; }
.aip-draft-body { padding: 0 .6rem .4rem; background: #fff; }
.aip-draft-foot { padding: 0 .6rem .5rem; }
.aip-composer { flex: 0 0 auto; border-top: 1px solid var(--tri-border); padding: .5rem .6rem .6rem; background: #fff; }

/* "Neuer Chat" und die Anzahl der Beitraege stehen in der Sende-Leiste, linksbuendig zu den
   Sprechblasen; der Sende-Knopf bleibt per ms-auto rechts. */
.aip-bar-info { font-size: .76rem; color: var(--tri-muted); font-variant-numeric: tabular-nums; }

/* „Verlauf der Bearbeitung" der KI-Assistenten: die Werkzeuge, die die KI gerade aufruft. Bewusst schlicht
   und schmal - er soll beim Warten Auskunft geben, nicht die Antwort verdrängen. */
/* ---- Wartezustand der KI-Assistenten (AiLiveProgress) ---------------------------------------------
   Ohne Balken und ohne Punkt: „Es laeuft" sagt der pulsierende Avatar, „wie weit" sagen die Zahlen
   (Dauer, Schritte, Zeichen). Drei Bewegungen nebeneinander machten aus dem Warten ein Flimmern. */
.ai-live { margin-top: 0; }
.ai-live-meta {
    display: flex;
    gap: .5rem;
    margin-top: 0;
    /* Enge Zeile: Die Zahlen gehören zur Zeile „KI denkt nach …" darüber und sollen wie deren
       Unterzeile wirken, nicht wie ein eigener Absatz. */
    line-height: 1.15;
    font-size: .72rem;
    color: var(--tri-muted);
    font-variant-numeric: tabular-nums;
}
.ai-live-meta > span + span::before { content: "· "; }

.ai-steps {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.78rem;
    max-height: 9rem;
    overflow-y: auto;
}
.ai-steps li {
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.05rem 0;
    /* Bündig mit dem „KI denkt nach …" darüber - der Pfeil hing vorher davor und schob die Zeile ein. */
    margin: 0;
    text-align: left;
}
.ai-steps li::after {
    content: " …";
    opacity: 0.6;
}

/* ---- Spracheingabe (VoiceInputButton) --------------------------------------------------------------
   Der Ring um den Knopf folgt der Aussteuerung: voice-input.js schreibt --voice-level (0…1) auf das
   Element. Der Anwender muss sehen, DASS zugehört wird - eine stumme Aufnahme merkt man sonst erst am
   leeren Ergebnis. */
.voice-wrap { position: relative; display: inline-flex; }

.voice-btn {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid var(--tri-border);
    border-radius: 0.65rem;
    background: var(--tri-surface);
    color: var(--tri-muted);
    font-size: 1.05rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Grün beim Überfahren nur im Ruhezustand - während der Aufnahme muss der Knopf rot bleiben, sonst wird
   der Stopp-Knopf unter dem Mauszeiger grün und sieht aus wie „starten". */
.voice-btn:hover:not(:disabled):not(.voice-btn-rec) { color: var(--tri-green); border-color: var(--tri-green); }
.voice-btn:disabled { opacity: 0.45; }

/* Während der Aufnahme: rot, breiter (die Laufzeit steht daneben) und mit dem Pegelring. */
.voice-btn-rec {
    width: auto;
    padding: 0 0.6rem;
    background: rgba(192, 57, 43, 0.10);
    border-color: var(--tri-red);
    color: var(--tri-red);
    box-shadow: 0 0 0 calc(var(--voice-level, 0) * 0.45rem) rgba(192, 57, 43, 0.22);
}

.voice-btn-rec:hover { background: rgba(192, 57, 43, 0.16); }

.voice-time { font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Hinweis (kein Mikrofon, nichts zu hören, …): schwebt über dem Knopf, damit die Eingabezeile beim
   Erscheinen nicht springt. */
.voice-hint {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    right: 0;
    z-index: 5;
    max-width: 17rem;
    width: max-content;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--tri-ink);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.25;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Rückfragen: Dringlichkeit und verstrichene Frist. Farbe kommt aus den zentralen Tokens. */
.q-urgent { color: var(--tri-red); }
.q-overdue { color: var(--tri-red); font-weight: 600; }

/* ---- Rückfragen als Arbeitsliste ------------------------------------------------------------------
   Kein Datengitter: großzügige Karten, die Frage als Hauptzeile, das Beiwerk gedämpft darunter, rechts
   die Frist. Was oben steht, ist dran. */

/* Werkzeugleiste: Suche + Chips mit Zählern - man sieht, wie viel hinter einem Filter steckt, bevor
   man ihn setzt. */
.q-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; }
.q-search { position:relative; flex:1 1 22rem; max-width:34rem; }
.q-search > .bi-search { position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
    color:var(--tri-faint); font-size:.85rem; pointer-events:none; }
.q-search .form-control { border-radius:2rem; padding:.6rem 2.4rem .6rem 2.5rem; border-color:var(--tri-border);
    background:#fff; font-size:.95rem; }
.q-search .form-control:focus { border-color:var(--tri-green); box-shadow:0 0 0 .18rem rgba(46,139,61,.12); }
.q-search-clear { position:absolute; right:.7rem; top:50%; transform:translateY(-50%); border:0;
    background:transparent; color:var(--tri-faint); font-size:.8rem; line-height:1; padding:.2rem; }
.q-search-clear:hover { color:var(--tri-text); }

/* Sortierung: zwei Möglichkeiten, mehr braucht eine Arbeitsliste nicht. Als Segmentschalter statt
   Auswahlfeld - man sieht beide Zustände und trifft mit einem Klick. */
/* Rechtsbündig (margin-left:auto) und exakt so hoch wie das Suchfeld daneben (align-self:stretch):
   Die Knöpfe füllen die Höhe und zentrieren ihren Text, statt mit eigener Polsterung eine Höhe zu
   raten, die dann doch ein paar Pixel neben dem Suchfeld liegt. */
.q-sort { display:inline-flex; border:1px solid var(--tri-border); border-radius:2rem; overflow:hidden;
    background:#fff; margin-left:auto; align-self:stretch; }
.q-sort button { border:0; background:transparent; color:var(--tri-muted); font-size:.9rem;
    padding:0 1rem; line-height:1; display:inline-flex; align-items:center;
    transition:background .12s, color .12s; }
.q-sort button + button { border-left:1px solid var(--tri-border); }
.q-sort button:hover { color:var(--tri-green-dark); }
.q-sort button.on { background:var(--tri-green-bg); color:var(--tri-green-dark); font-weight:600; }

/* Gruppenkopf: leise Zwischenzeile mit auslaufender Linie, kein fetter Balken. */
.q-group-head { display:flex; align-items:center; gap:.6rem; margin:1.6rem 0 .6rem;
    font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tri-muted); }
.q-group-head:first-child { margin-top:.2rem; }
.q-group-count { display:inline-block; min-width:1.4rem; padding:.05rem .4rem; border-radius:1rem;
    background:var(--tri-surface); color:var(--tri-muted); font-size:.78rem; font-weight:700; text-align:center; }
.q-group-rule { flex:1 1 auto; height:1px; background:var(--tri-border); }

.q-item { border:1px solid var(--tri-border); border-radius:.9rem; margin-bottom:.7rem;
    background:#fff; transition:border-color .12s, box-shadow .12s; }
.q-item:hover { border-color:var(--tri-green-soft); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.q-item-open { border-color:var(--tri-green); box-shadow:0 2px 10px rgba(0,0,0,.07); }

.q-item-head { display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; cursor:pointer; }

/* Marker: kurzer Balken INNEN mit Abstand zur Kante. Als Rahmen wirkte er an der Rundung wie ein Klecks. */
.q-marker { flex:0 0 auto; width:4px; align-self:stretch; min-height:2.4rem; border-radius:2px;
    background:var(--tri-green-soft); }
.q-marker-urgent { background:var(--tri-red); }

.q-item-body { flex:1 1 auto; min-width:0; }
.q-item-title { font-size:.95rem; font-weight:400; color:var(--tri-text); line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.q-item-meta { font-size:.88rem; color:var(--tri-muted); margin-top:.4rem;
    display:flex; align-items:center; flex-wrap:wrap; gap:.1rem; }
.q-meta-strong { color:var(--tri-muted-2); }
.q-sep { color:var(--tri-faint); margin:0 .45rem; }
.q-agent-num { display:inline-block; margin-right:.5rem; padding:.12rem .45rem; border-radius:.4rem;
    background:var(--tri-green-bg); color:var(--tri-green); font-weight:700; font-size:.85rem; }

/* „DRINGEND" ist das EINZIGE Dringlichkeitssignal im Text - dazu der rote Marker links. */
.q-badge-urgent { display:inline-block; margin-left:.55rem; padding:.12rem .45rem; border-radius:.35rem;
    background:rgba(192,57,43,.09); color:var(--tri-red); font-size:.72rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; vertical-align:.12em; white-space:nowrap; }

/* Frist nur, wenn sie drängt: rotes Badge in der Machart von „DRINGEND". */
.q-due-badge { flex:0 0 auto; display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:.35rem;
    background:rgba(192,57,43,.09); color:var(--tri-red); font-size:.8rem; font-weight:600;
    white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Standard-Button (btn btn-sm btn-primary) – hier nur: nicht schrumpfen, nicht umbrechen. */
.q-answer { flex:0 0 auto; white-space:nowrap; }

.q-item-detail { border-top:1px solid var(--tri-border); padding:1rem 1.1rem; }

@media (max-width: 760px) {
    .q-item-head { flex-wrap:wrap; }
}

/* Mehrere Empfänger: kleiner Hinweis, dass die erste Antwort für alle gilt. */
.q-first-wins { margin-left:.45rem; padding:.05rem .35rem; border-radius:.35rem;
    background:var(--tri-green-bg); color:var(--tri-green-dark); font-size:.72rem; font-weight:600; }


/* ============================================================================
   MEMORY-VERLAUF: Name einzeilig mit „…", Pfad klein darunter.
   Ein Titel wie „Klärung Risikoteilung Abrechenbarkeits-Staffel / Zielvereinbarung Joachim Lemke" brach
   sonst über zwei Zeilen und schob die Tabelle auseinander. Die Breitenangabe ist nötig, weil
   text-overflow in einer Tabellenzelle ohne begrenzte Breite nicht greift.
   ============================================================================ */
.mc-hist-table { table-layout: fixed; width: 100%; }
.mc-hist-cell { min-width: 0; }
/* Sinnbild und Name in EINER Zeile; min-width:0 ist die Bedingung dafür, dass ein Flex-Kind
   überhaupt schrumpfen darf - ohne das wächst es über die Spalte hinaus. */
.mc-hist-line { display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
.mc-hist-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-hist-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Art des Eintrags („Word", „PDF", „Text") vor dem Pfad – ruhig, aber unterscheidbar. */
.mc-hist-type {
    display: inline-block;
    padding: 0 .3rem;
    margin-right: .35rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .25rem;
    font-size: .78em;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-tertiary-bg, #f8f9fa);
}
/* Die Registerfläche der Änderungsansicht: feste Höhe, damit der Dialog beim Wechseln zwischen
   „Ansicht" und „Änderungen" nicht springt; gerollt wird nur hier drin. */
.mc-diff-pane {
    height: 52vh;
    overflow: auto;
}


/* Suche im Register „System-Prompt" (Lauf-Detailseite): alle Fundstellen markiert, die aktuelle
   hervorgehoben – dieselbe Lesart wie in einem Editor, damit die Pfeiltasten sichtbar wirken. */
mark.prompt-hit-current {
    background: var(--tri-green, #2f8f4e);
    color: #fff;
}