:root {

  /* ══════════════════════════════════════════════════════════════
     ALL colors live here. Inline color literals elsewhere in this
     file should be reduced to var(--token) references.
     Light-mode overrides for every theme-aware token are in the
     [data-theme="light"] block below.
     ══════════════════════════════════════════════════════════════ */

  /* ── Layer 1: Primitive Palette ─────────────────────────── */

  /* Surfaces (darkest → lightest) */
  --clr-base-deep:    color-mix(in srgb, var(--clr-base) 60%, black);                          /* nav-rail bg, deepest pill border */
  --clr-base:         #0a0e1a;
  --clr-shell:        color-mix(in srgb, var(--clr-base) 70%, var(--clr-surface-1));           /* between base and surface-1 */
  --clr-surface-deep: color-mix(in srgb, var(--clr-base) 55%, var(--clr-surface-3));           /* hero gradient anchor */
  --clr-surface-mid:  color-mix(in srgb, var(--clr-surface-1) 60%, var(--clr-surface-3) 40%);
  --clr-surface-1:    #161b22;
  --clr-surface-2:    color-mix(in srgb, var(--clr-surface-1) 50%, var(--clr-surface-3) 50%);
  --clr-surface-3:    #1e293b;
  --clr-surface-4:    color-mix(in srgb, var(--clr-surface-3) 92%, white 8%);                  /* skill-picker bg, dark gray surface */
  --clr-surface-5:    color-mix(in srgb, var(--clr-surface-3) 70%, white 30%);                 /* slate, avatar borders */
  --clr-grad-blue-mid: color-mix(in srgb, var(--clr-accent) 35%, var(--clr-surface-3));        /* hero gradient mid stop */
  --clr-grad-blue-low: color-mix(in srgb, var(--clr-accent) 12%, var(--clr-base));             /* hero gradient low stop */
  --clr-bubble-bot:   color-mix(in srgb, var(--clr-surface-1) 60%, var(--clr-surface-3) 40%);  /* bot bubble bg (dark) — same as surface-mid */
  --clr-bubble-bot-light: color-mix(in srgb, var(--clr-text-primary) 15%, white);              /* surface-pale-1 alias for legibility */
  --clr-surface-pale-1: color-mix(in srgb, var(--clr-text-primary) 15%, white);                /* very-light slate (light theme bot bubble, panels) */
  --clr-surface-pale-2: color-mix(in srgb, var(--clr-text-primary) 20%, white);                /* light slate (light nav-rail, gradients) */
  --clr-surface-pale-3: color-mix(in srgb, var(--clr-accent) 8%, white);                       /* faint blue (light hover bg) */

  /* Borders */
  --clr-border:         #21262d;
  --clr-border-accent:  color-mix(in srgb, var(--clr-accent) 22%, var(--clr-border));      /* accent-tinted border */
  --clr-border-soft:    color-mix(in srgb, var(--clr-text-secondary) 85%, white);          /* light-mode bubble bot border */

  /* Accent (blue scale) */
  --clr-accent:           #3b82f6;
  --clr-accent-rgb:       59, 130, 246;
  --clr-accent-btn:       #1d4ed8;
  --clr-accent-btn-rgb:   29, 78, 216;
  --clr-accent-btn-hover: #1e40af;
  --clr-accent-deep:      color-mix(in srgb, var(--clr-accent) 50%, black);                /* deepest accent (badge bg, gradient) */
  --clr-accent-deep2:     color-mix(in srgb, var(--clr-accent) 75%, black);                /* tonal alt — outline rings, gradients */
  --clr-accent-light:     color-mix(in srgb, var(--clr-accent) 80%, white);                /* lighter accent text */
  --clr-accent-soft:      color-mix(in srgb, var(--clr-accent) 55%, white);                /* soft accent text (badges, code) */
  --clr-accent-softer:    color-mix(in srgb, var(--clr-accent) 35%, white);                /* softer accent text */
  --clr-accent-softest:   color-mix(in srgb, var(--clr-accent) 18%, white);                /* badge bg light */
  --clr-accent-pale:      color-mix(in srgb, var(--clr-accent)  6%, white);                /* very pale accent (hero btn active) */

  /* Violet / Indigo accent family */
  --clr-violet:           #8b5cf6;    /* nav-rail ai dot */
  --clr-violet-rgb:       139, 92, 246;
  --clr-violet-pure:      color-mix(in srgb, var(--clr-violet) 85%, black);                /* origin tag, gradient */
  --clr-violet-deep:      color-mix(in srgb, var(--clr-violet) 55%, black);                /* badge bg (violet) */
  --clr-violet-bg:        color-mix(in srgb, var(--clr-violet) 30%, black);                /* indigo deep (light hero btn text) */
  --clr-violet-mid:       color-mix(in srgb, var(--clr-violet) 70%, black);                /* kpi user accent */
  --clr-violet-soft:      color-mix(in srgb, var(--clr-violet) 45%, white);                /* kpi user soft */
  --clr-violet-softer:    color-mix(in srgb, var(--clr-violet) 25%, white);                /* nav-rail ai chip text */
  --clr-indigo:           color-mix(in srgb, var(--clr-violet) 70%, var(--clr-accent) 30%); /* secondary indigo */
  --clr-indigo-rgb:       99, 102, 241;
  --clr-indigo-soft:      color-mix(in srgb, var(--clr-violet) 60%, white);                /* kpi user mid */
  --clr-indigo-light:     color-mix(in srgb, var(--clr-violet) 50%, white);               /* alt accent */

  /* Cyan family */
  --clr-cyan:             #06b6d4;    /* nav-rail res dot, gradient */
  --clr-cyan-rgb:         6, 182, 212;
  --clr-cyan-soft:        color-mix(in srgb, var(--clr-cyan) 25%, white);                  /* nav-rail res chip text */
  --clr-cyan-glow:        color-mix(in srgb, var(--clr-cyan) 50%, white);                  /* nav-rail res chip alt */
  --clr-cyan-deep:        color-mix(in srgb, var(--clr-cyan) 50%, black);                  /* docx chip text */

  /* Amber family */
  --clr-amber:            #f59e0b;    /* nav-rail fav dot */
  --clr-amber-rgb:        245, 158, 11;
  --clr-amber-soft:       #fde68a;    /* fav chip text */

  /* Text */
  --clr-text-primary:     #e2e8f0;
  --clr-text-secondary:   #cbd5e1;    /* boosted from #94a3b8 — better contrast on dark bg */
  --clr-text-muted:       color-mix(in srgb, var(--clr-text-secondary) 80%, black);        /* boosted from #475569 — AA contrast on dark bg */
  --clr-text-slate:       color-mix(in srgb, var(--clr-text-secondary) 100%, white 0%);    /* slate body text alt — boosted for readability */
  --clr-text-light-gray:  color-mix(in srgb, var(--clr-text-secondary) 70%, white);        /* legacy fallback */
  --clr-text-near-white:  color-mix(in srgb, var(--clr-text-primary) 70%, white);          /* hero title (dark) */
  --clr-text-deep-slate:  color-mix(in srgb, var(--clr-text-secondary) 40%, black);        /* light-mode label */
  --clr-text-inverse:     #ffffff;    /* on-accent button text */
  --clr-text-rgb:         226, 232, 240;
  --clr-text-secondary-rgb: 203, 213, 225;
  --clr-text-muted-rgb:   148, 163, 184;

  /* Neutrals (RGB triples for alpha mixing) */
  --clr-white:            #ffffff;
  --clr-white-rgb:        255, 255, 255;
  --clr-black-rgb:        0, 0, 0;

  /* Semantic colours */
  --clr-danger:           #ef4444;
  --clr-danger-rgb:       239, 68, 68;
  --clr-success:          #4ade80;
  --clr-success-rgb:      74, 222, 128;
  --clr-success-mid:      color-mix(in srgb, var(--clr-success) 78%, black);               /* mp-service-card green */
  --clr-success-mid2:     color-mix(in srgb, var(--clr-success) 88%, black);               /* kpi vol */
  --clr-success-emerald:  color-mix(in srgb, var(--clr-success) 35%, black);               /* kpi vol light */
  --clr-success-deep:     color-mix(in srgb, var(--clr-success) 45%, black);               /* wizard step done */
  --clr-success-darker:   color-mix(in srgb, var(--clr-success) 32%, black);               /* badge volume bg */
  --clr-success-darkest:  color-mix(in srgb, var(--clr-success) 26%, black);               /* badge volume bg darker */
  --clr-success-soft:     color-mix(in srgb, var(--clr-success) 70%, white 30%);           /* badge volume text */
  --clr-success-softer:   color-mix(in srgb, var(--clr-success) 50%, white 50%);           /* mp badge green text */
  --clr-success-pale:     color-mix(in srgb, var(--clr-success) 22%, white);               /* badge volume bg light */
  --clr-warning:          #fcd34d;
  --clr-warning-rgb:      252, 211, 77;

  /* Marketplace badges (semantic pairs) */
  --clr-badge-blue-bg:    var(--clr-accent-btn);
  --clr-badge-blue-fg:    var(--clr-accent-softer);
  --clr-badge-violet-bg:  var(--clr-violet-deep);
  --clr-badge-violet-fg:  var(--clr-violet-softer);
  --clr-badge-green-bg:   var(--clr-success-darker);
  --clr-badge-green-fg:   var(--clr-success-softer);
  --clr-badge-licence-bg: var(--clr-accent-deep);
  --clr-badge-licence-fg: var(--clr-accent-soft);
  --clr-badge-volume-bg:  var(--clr-success-darkest);
  --clr-badge-volume-fg:  var(--clr-success-soft);
  --clr-badge-test-bg:    var(--clr-surface-3);
  --clr-badge-test-fg:    var(--clr-text-secondary);

  /* KPI accents */
  --clr-kpi-user:         var(--clr-indigo-soft);
  --clr-kpi-pkg:          var(--clr-accent-light);
  --clr-kpi-vol:          var(--clr-success-mid2);
  --clr-accent-user-soft: var(--clr-violet-soft);
  --clr-accent-pkg-soft:  var(--clr-accent-soft);
  --clr-accent-vol-soft:  var(--clr-success-soft);

  /* Nav-rail chip rgb companions (theme-stable slate, plus shade rgbs) */
  --clr-chip-slate-rgb:   148, 163, 184;     /* dark chip text */
  --clr-chip-blue-rgb:    147, 197, 253;     /* chip-chat */
  --clr-chip-violet-rgb:  196, 181, 253;     /* chip-ai */
  --clr-chip-cyan-rgb:    103, 232, 249;     /* chip-res */

  /* Sky tone used by docx chip */
  --clr-sky:              #0ea5e9;
  --clr-sky-rgb:          14, 165, 233;

  /* Custom dark gradient surfaces (aiservice input/result cards) */
  --clr-surface-grad-1:   13, 24, 48;        /* rgba */
  --clr-surface-grad-2:   16, 28, 58;        /* rgba */
  --clr-surface-grad-3:   10, 16, 30;        /* rgba */

  /* Skill chip surfaces (used by skill-chip-list / skill-picker / skill-dnd-list) */
  --clr-bg-secondary:     rgba(var(--clr-white-rgb), 0.06);
  --clr-bg-hover:         rgba(var(--clr-white-rgb), 0.08);
  --clr-bg-elevated:      var(--clr-surface-4);

  /* Aliases */
  --clr-primary:          var(--clr-accent);   /* aiservice-stepper active node */

  /* Marketing/section page palette (used by section.css & media.css) */
  --clr-marketing-grad-from: #071b36;
  --clr-marketing-grad-to:   #23526b;
  --clr-marketing-link:      #0066cc;
  --clr-marketing-divider:   #cccccc;
  --clr-marketing-text-link: #23527c;
  --clr-marketing-thumb:     #dddddd;

  /* ── Layer 2: Semantic Tokens ────────────────────────────── */

  --auxdata-primary-color:          var(--clr-shell);
  --background-color-application:   var(--clr-base);
  --font-color-application:         var(--clr-text-primary);

  --background-color-navigation:       var(--clr-shell);
  --background-color-navigation-hover: var(--clr-surface-1);
  --font-color-navigation:             var(--clr-text-primary);
  --font-color-navigation-hover:       var(--clr-text-primary);
  --navigation-link:                   var(--clr-text-secondary);
  --navigation-hover:                  var(--clr-accent);

  --background-color-card:   var(--clr-surface-mid);
  --background-color-dialog: var(--clr-surface-mid);
  --font-color-card:         var(--clr-text-primary);
  --font-color-dialog:       var(--clr-text-primary);

  --background-color-input:  var(--clr-shell);
  --font-color-input:        var(--clr-text-primary);
  --font-color-input-header: var(--clr-text-primary);
  --editborder:              var(--clr-border);

  --background-color-table-header: var(--clr-shell);
  --background-color-table-data:   var(--clr-surface-1);
  --font-color-table:              var(--clr-text-secondary);
  --font-color-table-data:         var(--clr-text-secondary);
  --font-color-table-header:       var(--clr-accent);

  --background-color-button:       var(--clr-accent-btn);
  --background-color-button-hover: var(--clr-accent-btn-hover);
  --font-color-button:             var(--clr-text-primary);

  --background-color-disabled: var(--clr-surface-3);
  --font-color-disabled:       var(--clr-text-muted);

  --background-color-pagination: var(--clr-surface-1);
  --font-color-pagination:       var(--clr-text-secondary);
  --page-btn:                    var(--clr-accent-btn);
  --page-btn-delete:             var(--clr-danger);

  --container-border:        var(--clr-border-accent);
  --list-border:             var(--clr-border);
  --treeview-selected-color: var(--clr-accent);
  --checkbox-active:         var(--clr-accent);
  --checkbox-border:         var(--clr-border-accent);
  --checkbox-disabled-inner: var(--clr-surface-3);
  --spinner:                 var(--clr-accent);
  --error-color:             var(--clr-danger);
  --box-shadow:              5px 0px 1.75rem rgba(var(--clr-black-rgb),.2);
  --color-scrollbar:         var(--clr-border);

  --txt:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --btxt: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Layer 3: Compound Tokens ────────────────────────────── */

  --card-gradient: linear-gradient(135deg, var(--clr-surface-1), var(--clr-surface-2));
  --th-gradient:   linear-gradient(90deg,  var(--clr-shell),     var(--clr-surface-mid));
  --nav-gradient:  linear-gradient(135deg, var(--clr-surface-1), var(--clr-surface-2));
  --shadow-card:   0 4px 20px rgba(var(--clr-accent-rgb),.08);
  --shadow-glow:   0 4px 20px rgba(var(--clr-accent-rgb),.08);
  --shadow-dialog: 0 8px 40px rgba(var(--clr-black-rgb),.6), 0 0 0 1px var(--clr-border-accent);
  --overlay-bg:    rgba(var(--clr-black-rgb),0.5);
  --shadow-subtle: 0 0 10px rgba(var(--clr-black-rgb),0.1);
  --focus-ring:    2px rgba(var(--clr-accent-rgb), .3);
  --clr-row-hover: #1d3461;
}

[data-theme="light"] {

  /* ── Layer 1: Primitive Palette (light) ── */

  /* Surfaces */
  --clr-base-deep:    color-mix(in srgb, var(--clr-accent) 25%, white);                    /* light nav-rail border */
  --clr-base:         #eef2ff;
  --clr-shell:        color-mix(in srgb, var(--clr-base) 60%, var(--clr-surface-3));        /* between base and surface-3 */
  --clr-surface-deep: color-mix(in srgb, var(--clr-accent) 25%, white);                    /* hero gradient anchor (light) */
  --clr-surface-mid:  color-mix(in srgb, var(--clr-base) 35%, white);                      /* lighter than base */
  --clr-surface-1:    #ffffff;
  --clr-surface-2:    color-mix(in srgb, var(--clr-base) 40%, white);
  --clr-surface-3:    #e0e7ff;
  --clr-surface-4:    color-mix(in srgb, var(--clr-base) 12%, white);                      /* near white */
  --clr-surface-5:    color-mix(in srgb, var(--clr-text-secondary) 25%, white);            /* mid slate */
  --clr-grad-blue-mid: color-mix(in srgb, var(--clr-accent) 25%, white);
  --clr-grad-blue-low: color-mix(in srgb, var(--clr-base) 100%, white 0%);
  --clr-bubble-bot:        color-mix(in srgb, var(--clr-text-primary) 5%, white);
  --clr-bubble-bot-light:  color-mix(in srgb, var(--clr-text-primary) 5%, white);
  --clr-surface-pale-1: color-mix(in srgb, var(--clr-text-primary) 5%, white);
  --clr-surface-pale-2: color-mix(in srgb, var(--clr-text-primary) 8%, white);             /* light nav-rail bg */
  --clr-surface-pale-3: color-mix(in srgb, var(--clr-accent) 6%, white);

  /* Borders */
  --clr-border:         #c7d2fe;
  --clr-border-accent:  color-mix(in srgb, var(--clr-accent) 35%, white);                  /* deeper indigo border */
  --clr-border-soft:    color-mix(in srgb, var(--clr-text-secondary) 12%, white);          /* very-light bubble border */

  /* Accent (indigo scale) */
  --clr-accent:           #4f46e5;
  --clr-accent-rgb:       79, 70, 229;
  --clr-accent-btn:       #4338ca;
  --clr-accent-btn-rgb:   67, 56, 202;
  --clr-accent-btn-hover: #3730a3;
  --clr-accent-deep:      color-mix(in srgb, var(--clr-accent) 55%, black);
  --clr-accent-deep2:     color-mix(in srgb, var(--clr-accent) 100%, black 0%);
  --clr-accent-light:     color-mix(in srgb, var(--clr-accent) 80%, white);
  --clr-accent-soft:      color-mix(in srgb, var(--clr-accent) 88%, black);                /* on light bg, "soft" reads as deeper */
  --clr-accent-softer:    color-mix(in srgb, var(--clr-accent) 60%, black);
  --clr-accent-softest:   color-mix(in srgb, var(--clr-accent) 18%, white);
  --clr-accent-pale:      color-mix(in srgb, var(--clr-accent) 25%, black);                /* near-black for "active" states */

  /* Violet / Indigo accent family */
  --clr-violet:           #6d28d9;
  --clr-violet-rgb:       109, 40, 217;
  --clr-violet-pure:      color-mix(in srgb, var(--clr-violet) 100%, black 0%);
  --clr-violet-deep:      color-mix(in srgb, var(--clr-accent) 18%, white);                /* pale blue for light-mode badge bg */
  --clr-violet-bg:        color-mix(in srgb, var(--clr-violet) 55%, black);
  --clr-violet-mid:       color-mix(in srgb, var(--clr-violet) 100%, black 0%);
  --clr-violet-soft:      color-mix(in srgb, var(--clr-violet) 100%, black 0%);
  --clr-violet-softer:    color-mix(in srgb, var(--clr-violet) 55%, black);
  --clr-indigo:           color-mix(in srgb, var(--clr-violet) 50%, var(--clr-accent) 50%);
  --clr-indigo-rgb:       99, 102, 241;
  --clr-indigo-soft:      color-mix(in srgb, var(--clr-violet) 100%, black 0%);
  --clr-indigo-light:     color-mix(in srgb, var(--clr-accent) 88%, black);

  /* Cyan family */
  --clr-cyan:             #06b6d4;
  --clr-cyan-rgb:         6, 182, 212;
  --clr-cyan-soft:        color-mix(in srgb, var(--clr-cyan) 50%, black);
  --clr-cyan-glow:        color-mix(in srgb, var(--clr-cyan) 50%, black);
  --clr-cyan-deep:        color-mix(in srgb, var(--clr-cyan) 50%, black);

  /* Amber family */
  --clr-amber:            #d97706;
  --clr-amber-rgb:        217, 119, 6;
  --clr-amber-soft:       #d97706;

  /* Text */
  --clr-text-primary:     #1e1b4b;
  --clr-text-secondary:   #3730a3;
  --clr-text-muted:       color-mix(in srgb, var(--clr-text-secondary) 60%, white);
  --clr-text-slate:       color-mix(in srgb, var(--clr-text-secondary) 35%, black);
  --clr-text-light-gray:  color-mix(in srgb, var(--clr-text-primary) 100%, white 0%);
  --clr-text-near-white:  color-mix(in srgb, var(--clr-text-primary) 100%, white 0%);
  --clr-text-deep-slate:  color-mix(in srgb, var(--clr-text-secondary) 35%, black);
  --clr-text-inverse:     #ffffff;
  --clr-text-rgb:         30, 27, 75;
  --clr-text-secondary-rgb: 55, 48, 163;
  --clr-text-muted-rgb:   99, 102, 241;

  --clr-white:            #ffffff;
  --clr-white-rgb:        255, 255, 255;
  --clr-black-rgb:        0, 0, 0;

  /* Semantic colours */
  --clr-danger:           #dc2626;
  --clr-danger-rgb:       220, 38, 38;
  --clr-success:          #16a34a;
  --clr-success-rgb:      22, 163, 74;
  --clr-success-mid:      color-mix(in srgb, var(--clr-success) 100%, black 0%);
  --clr-success-mid2:     color-mix(in srgb, var(--clr-success) 70%, black);
  --clr-success-emerald:  color-mix(in srgb, var(--clr-success) 70%, black);
  --clr-success-deep:     color-mix(in srgb, var(--clr-success) 100%, black 0%);
  --clr-success-darker:   color-mix(in srgb, var(--clr-success) 50%, black);
  --clr-success-darkest:  color-mix(in srgb, var(--clr-success) 50%, black);
  --clr-success-soft:     color-mix(in srgb, var(--clr-success) 70%, black);
  --clr-success-softer:   color-mix(in srgb, var(--clr-success) 50%, black);
  --clr-success-pale:     color-mix(in srgb, var(--clr-success) 18%, white);
  --clr-warning:          #d97706;
  --clr-warning-rgb:      217, 119, 6;

  /* Marketplace badges (light pairs) */
  --clr-badge-blue-bg:    color-mix(in srgb, var(--clr-accent) 18%, white);
  --clr-badge-blue-fg:    color-mix(in srgb, var(--clr-accent) 60%, black);
  --clr-badge-violet-bg:  color-mix(in srgb, var(--clr-violet) 12%, white);
  --clr-badge-violet-fg:  color-mix(in srgb, var(--clr-violet) 100%, black 0%);
  --clr-badge-green-bg:   color-mix(in srgb, var(--clr-success) 18%, white);
  --clr-badge-green-fg:   color-mix(in srgb, var(--clr-success) 50%, black);
  --clr-badge-licence-bg: color-mix(in srgb, var(--clr-accent) 18%, white);
  --clr-badge-licence-fg: color-mix(in srgb, var(--clr-accent) 60%, black);
  --clr-badge-volume-bg:  color-mix(in srgb, var(--clr-success) 18%, white);
  --clr-badge-volume-fg:  color-mix(in srgb, var(--clr-success) 50%, black);
  --clr-badge-test-bg:    var(--clr-surface-pale-2);
  --clr-badge-test-fg:    var(--clr-text-slate);

  /* KPI accents (light) */
  --clr-kpi-user:         var(--clr-violet);
  --clr-kpi-pkg:          color-mix(in srgb, var(--clr-accent) 70%, black);
  --clr-kpi-vol:          color-mix(in srgb, var(--clr-success) 70%, black);
  --clr-accent-user-soft: var(--clr-violet);
  --clr-accent-pkg-soft:  color-mix(in srgb, var(--clr-accent) 70%, black);
  --clr-accent-vol-soft:  color-mix(in srgb, var(--clr-success) 70%, black);

  /* Nav-rail chip rgb companions (light) */
  --clr-chip-slate-rgb:   71, 85, 105;       /* light chip text — dark slate */
  --clr-chip-blue-rgb:    29, 78, 216;       /* chip-chat (light) */
  --clr-chip-violet-rgb:  109, 40, 217;      /* chip-ai (light) */
  --clr-chip-cyan-rgb:    6, 148, 162;       /* chip-res (light) */

  /* Sky tone */
  --clr-sky:              #0369a1;
  --clr-sky-rgb:          3, 105, 161;

  /* Custom gradient surfaces (light theme uses solid surfaces) */
  --clr-surface-grad-1:   238, 242, 255;
  --clr-surface-grad-2:   224, 231, 255;
  --clr-surface-grad-3:   245, 247, 255;

  /* Skill chip surfaces (light) */
  --clr-bg-secondary:     rgba(var(--clr-black-rgb), 0.04);
  --clr-bg-hover:         rgba(var(--clr-black-rgb), 0.06);
  --clr-bg-elevated:      var(--clr-surface-1);

  /* ── Layer 2: Semantic Token Overrides ── */

  --font-color-table-header: var(--clr-accent);
  --checkbox-active:         var(--clr-accent);
  --checkbox-border:         var(--clr-border-accent);
  --treeview-selected-color: var(--clr-accent);
  --spinner:                 var(--clr-accent);

  /* ── Layer 3: Compound Tokens ── */

  --card-gradient: linear-gradient(135deg, var(--clr-surface-1), var(--clr-surface-2));
  --th-gradient:   linear-gradient(90deg,  var(--clr-shell),     var(--clr-surface-mid));
  --nav-gradient:  linear-gradient(135deg, var(--clr-surface-3), var(--clr-base));
  --shadow-card:   0 4px 12px rgba(var(--clr-indigo-rgb),.14);
  --shadow-glow:   0 4px 12px rgba(var(--clr-indigo-rgb),.14);
  --shadow-dialog: 0 8px 40px rgba(var(--clr-indigo-rgb),.2), 0 0 0 1px var(--clr-border-accent);
  --overlay-bg:    rgba(var(--clr-indigo-rgb),.15);
  --shadow-subtle: 0 1px 4px rgba(var(--clr-indigo-rgb),.08);
  --focus-ring:    2px rgba(var(--clr-accent-rgb),.3);
  --box-shadow:    5px 0px 1.75rem rgba(var(--clr-indigo-rgb),.12);
  --color-scrollbar: var(--clr-border);
  --clr-row-hover: var(--clr-surface-3);
}

/* ── Light mode: icon filter overrides ────────────────── */

[data-theme="light"] button img:not(.logo),
[data-theme="light"] .buttonrow img,
[data-theme="light"] .chatbot-button img,
[data-theme="light"] .chatbot-button-deactivated img,
[data-theme="light"] .settings-icon img,
[data-theme="light"] img.settings-icon,
[data-theme="light"] .navbar2 .navimage {
  filter: brightness(0);
  opacity: 0.55;
}

[data-theme="light"] button:hover img,
[data-theme="light"] .buttonrow:hover img,
[data-theme="light"] .chatbot-button:hover img,
[data-theme="light"] .card-action img.settings-icon:hover {
  opacity: 0.85;
}

[data-theme="light"] .chatbot-button-deactivated img {
  opacity: 0.25;
}

[data-theme="light"] input[type="search"]::-webkit-search-cancel-button {
  filter: none;
  opacity: 0.5;
}



html {
    font-family: var(--txt);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--clr-shell);
  box-shadow: none;
  border: none;
}

::-webkit-scrollbar-thumb {
  background: var(--clr-border);
  border-radius: 3px;
  border: none;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-accent);
}

body::before {
  content: '';
  position: fixed;
  bottom: 0px; /* Adjust distance from bottom */
  right: 20px; /* Adjust distance from right */
  width: 300px; /* Adjust image width */
  height: 300px; /* Adjust image height */
  background-image: url("../images/robo-background.png"); /* Replace with your image URL */
  background-position: center; /* Center the image within the pseudo-element */
  background-repeat: no-repeat;
  background-size: contain; /* or cover; depending on desired scaling */
  z-index: 0;
  opacity: 0.04;
  pointer-events: none;
}

body {
    font-family: var(--txt);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--background-color-application);
    min-height: 100%;
    font-size: smaller;
    line-height: 20px;
    color: var(--font-color-application);
}
/* Hide dynamic Page content until render() completes, then fade in.
   Static pages (imprint, index, gdpr) don't have .welcome and are unaffected. */
.welcome {
    visibility: hidden;
}
body.page-ready .welcome {
    visibility: visible;
}

h1 {
    font-family: var(--btxt);
    color: var(--font-color-application);
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.3;
}

h2 {
    font-family: var(--btxt);
    color: var(--font-color-application);
    text-align: center;
    font-size: 1.75rem;
    line-height: 1;
}

h3 {
  font-family: var(--btxt);
  color: var(--font-color-application);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1;
}

h3#orginfo {
  display: none;
  color: var(--font-color-application);
}
h3#agentinfo {
  display: none;
  color: var(--font-color-application);
}
h3#containerinfo {
  display: none;
  color: var(--font-color-application);
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"] {
    width: calc(100% - 12px);
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: small;
    font-family: var(--btxt, sans-serif);
    background-color: var(--clr-shell);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-primary);
    border-radius: 5px;
    height: 30px;
    min-height: 30px;
}

input[type="date"], input[type="time"] {
    color-scheme: dark;
}

[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
    color-scheme: light;
}

input[type="file"] {
    width: calc(100% - 12px);
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: small;
    font-family: var(--btxt, sans-serif);
    background-color: var(--clr-shell);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-primary);
    border-radius: 5px;
    height: 30px;
}

input[type="search"] {
    width: 100%;
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: small;
    font-family: var(--btxt, sans-serif);
    background-color: var(--clr-shell);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-primary);
    border-radius: 5px;
    height: 30px;
}

input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 1;
}

.search-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

.search-input-wrapper input[type="search"] {
    padding-right: 32px;
    margin-bottom: 0;
    box-sizing: border-box;
}

.search-input-wrapper input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.search-input-wrapper button.image {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.search-input-wrapper button.image.is-visible {
    display: inline-flex !important;
}

.search-input-wrapper button.image img {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.search-input-wrapper button.image:hover {
    background: transparent !important;
}

.search-input-wrapper button.image:hover img {
    opacity: 1;
}

textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: small;
  font-family: var(--btxt, sans-serif);
  background-color: var(--clr-shell);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-primary);
  border-radius: 5px;
  height: 200px;
  min-height: 80px;
  max-height: 400px;
  box-sizing: border-box;
  flex-grow: 1;
}

input:focus, textarea:focus {
  border-color: var(--clr-accent);
  outline: none;
}

pre {
  background-color: var(--background-color-input);
  margin-left: 40px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  word-wrap: break-word;
  text-wrap: wrap;
  position: relative;
}

code {
  background-color: var(--background-color-input);
  font-family: var(--btxt, sans-serif);
  color: var(--font-color-input);
  word-wrap: break-word;
  text-wrap: wrap;
}

.inline-code-wrapper {
  position: relative;
  display: inline-block;
}

.copy-button {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  padding: 2px 7px;
  font-size: 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--clr-border);
  background: var(--background-color-input);
  color: var(--font-color-input);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 1;
  font-family: var(--btxt, sans-serif);
}

pre:hover .copy-button,
pre:focus-within .copy-button,
.inline-code-wrapper:hover .copy-button,
.inline-code-wrapper:focus-within .copy-button {
  opacity: 1;
}

.copy-button:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.copy-button.success {
  color: var(--clr-success);
  border-color: var(--clr-success);
}

.copy-button.error {
  color: var(--clr-danger);
  border-color: var(--clr-danger);
}

code-input {
  width:95%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  font-family: var(--btxt, sans-serif);
  border: 1px solid var(--editborder);
  border-radius: 5px;
  box-sizing: border-box;
  flex-grow: 1;
}

.text-align-right {
  text-align: right;
}

.whitetext {
  margin-top: 10px;
  color: var(--font-color-application);
}


.editor {
  min-height: 300px;
}

.resultDisplay {

  height: 350px;
  min-height: 200px;
}

button {
    color: var(--clr-text-primary);
    letter-spacing: 0.3px;
    border: none;
    padding: 6px 16px;
    font-family: var(--txt);
    width: auto;
    display: inline-block;
    margin-right: 6px;
    border-radius: 5px;
    background: var(--clr-accent-btn);
    font-size: 12px;
    font-weight: 500;
}

/* Normalize all icon SVGs to consistent light tone regardless of source color */
button img:not(.logo),
.buttonrow img,
.chatbot-button img,
.chatbot-button-deactivated img,
.settings-icon img,
img.settings-icon,
.navbar2 .navimage {
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

button:hover img,
.buttonrow:hover img,
.chatbot-button:hover img {
  opacity: 1;
}

.chatbot-button-deactivated img {
  opacity: 0.35;
}

.chatbot-button img,
.chatbot-button-deactivated img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}


input[type="checkbox"] {
  width: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 16px;
  font-family: var(--btxt, sans-serif);
}

.button-group {
  display: flex;
  padding: 15px;
  gap: 25px;
}

  
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-container input[type=checkbox] {
      --active: var(--checkbox-active);
      --active-inner: var(--font-color-application);
      --focus: var(--focus-ring);
      --border: var(--checkbox-border);
      --border-hover: var(-checkbox-active);
      --background: var(--background-color-application);
      --disabled: var(--font-color-disabled);
      --disabled-inner: var(--checkbox-disabled-inner);
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 21px;
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      margin-left: 0px;
      cursor: pointer;
      border: 1px solid var(--bc, var(--border));
      background: var(--b, var(--background));
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox-container input[type=checkbox]:after {
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox-container input[type=checkbox]:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-o: .3s;
      --d-t: .6s;
      --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox-container input[type=checkbox]:disabled {
      --b: var(--font-color-disabled);
      cursor: not-allowed;
      opacity: 0.9;
    }
    .checkbox-container input[type=checkbox]:disabled:checked {
      --b: var(--background-color-disabled);
      --bc: var(--border);
    }
    .checkbox-container input[type=checkbox]:disabled + label {
      cursor: not-allowed;
    }
    .checkbox-container input[type=checkbox]:hover:not(:checked):not(:disabled) {
      --bc: var(--border-hover);
    }
    .checkbox-container input[type=checkbox]:focus {
      box-shadow: 0 0 0 var(--focus);
    }
    .checkbox-container input[type=checkbox]:not(.switch) {
      width: 21px;
    }
    .checkbox-container input[type=checkbox]:not(.switch):after {
      opacity: var(--o, 0);
    }
    .checkbox-container input[type=checkbox]:not(.switch):checked {
      --o: 1;
    }
    .checkbox-container input[type=checkbox] + label {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 4px;
    }

    .checkbox-container input[type=checkbox]:not(.switch) {
      border-radius: 7px;
    }
    .checkbox-container input[type=checkbox]:not(.switch):after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 4px;
      transform: rotate(var(--r, 20deg));
    }
    .checkbox-container input[type=checkbox]:not(.switch):checked {
      --r: 43deg;
    }
    .checkbox-container input[type=checkbox].switch {
      width: 38px;
      border-radius: 11px;
    }
    .checkbox-container input[type=checkbox].switch:after {
      left: 2px;
      top: 2px;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      background: var(--ab, var(--border));
      transform: translateX(var(--x, 0));
    }
    .checkbox-container input[type=checkbox].switch:checked {
      --ab: var(--active-inner);
      --x: 17px;
    }
    .checkbox-container input[type=checkbox].switch:disabled:not(:checked):after {
      opacity: 0.6;
    }
}

.dialog-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--overlay-bg);
  z-index: 50000;
}

.dialog {
  position: absolute;
  top: '50%';
  left: '50%';
  transform: 'translate(-50%, -50%)';
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-dialog);
  padding: '20px';
  z-index: '60000';
  padding: 20px;
  min-height: 500px;
  max-height: calc(100vh - 50px) !important;
  min-width: min(400px, calc(100vw - 24px));
  max-width: min(1300px, calc(100vw - 24px));
  width: 80%;
  box-sizing: border-box;
  overflow: hidden !important;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
}

/* Dialog content: only tab-widget scrolls, not the outer scrollable container */
.dialog .scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dialog h4 {
  flex-shrink: 0;
  margin: 0;
}

.dialog .container-tab {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  padding: 0 !important;
}

.dialog .container-tab-navigation {
  flex-shrink: 0;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.dialog .container-tab-widget {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 12px 0 !important;
  width: 100% !important;
}

.dialog .button-container {
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.sourceinfo {
  font-size: 10px;
    line-height: 12px;
}

.sourceinfo a:visited {
  color: var(--font-color-application);
}

.sourceinfo a {
  color: var(--font-color-application);
  cursor: pointer;
}

/* ── Source Info Accordion ────────────────────────────── */

.src-accordion-wrapper {
  display: none; /* shown via JS when sources are available */
  flex-direction: column;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--clr-white-rgb), 0.06);
}

.src-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
  color: var(--clr-text-muted);
  font-size: 11px;
  transition: color 0.15s;
}

.src-trigger:hover {
  color: var(--clr-text-secondary);
}

.src-trigger-icon {
  font-size: 12px;
  opacity: 0.55;
  line-height: 1;
}

.src-trigger-label {
  font-size: 11px;
}

.src-badge {
  background: rgba(var(--clr-accent-rgb), 0.14);
  color: var(--clr-accent);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}

.src-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--clr-accent);
}

.src-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.src-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(var(--clr-white-rgb), 0.02);
  border: 1px solid rgba(var(--clr-white-rgb), 0.04);
  border-radius: 6px;
  font-size: 11px;
}

.src-name {
  flex: 1;
  color: var(--clr-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-link {
  flex: 1;
  color: var(--clr-accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-link:hover {
  text-decoration: underline;
}

.src-score {
  font-size: 10px;
  color: var(--clr-accent);
  background: rgba(var(--clr-accent-rgb), 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.src-origin-personal {
  font-size: 10px;
  color: var(--clr-violet-pure);
  background: rgba(var(--clr-violet-rgb), 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

[data-theme="light"] .src-origin-personal {
  color: var(--clr-violet-mid);
  background: rgba(var(--clr-violet-rgb), 0.1);
}

.src-chunk-link {
  color: var(--clr-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.src-chunk-link:hover {
  color: var(--clr-accent);
}

[data-theme="light"] .src-accordion-wrapper {
  border-top-color: rgba(var(--clr-black-rgb), 0.08);
}

[data-theme="light"] .src-row {
  background: rgba(var(--clr-black-rgb), 0.02);
  border-color: rgba(var(--clr-black-rgb), 0.06);
}

input:disabled {
  color: var(--font-color-disabled);
  background-color: var(--background-color-disabled);
}

.disabled {
  color: var(--font-color-disabled);
  background-color: var(--background-color-disabled);
}

.checkbox-container * {
  box-sizing: inherit;
}

.checkbox-container *:before,
.checkbox-container *:after {
  box-sizing: inherit;
}

.multiselect select option:checked {
  background-color: var(--background-color-application);
  color: var(--font-color-application);
}

.drag-over {
  background-color: color-mix(in srgb, var(--clr-accent) 15%, var(--clr-surface-1));
  outline: 2px dashed var(--clr-accent);
  outline-offset: -2px;
  color: var(--font-color-application);
}

.chatbot-drop-indicator {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px dashed var(--clr-accent);
  background: rgba(var(--clr-accent-rgb), 0.06);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--clr-accent);
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  z-index: 2;
}

.chatbot-input.drag-over .chatbot-drop-indicator {
  display: flex;
}

.chatbot-input.drag-over {
  outline: none;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--background-color-application);
  color: var(--font-color-application);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 999;
}

.tooltip:hover {
  background-color: var(--background-color-navigation-hover);
  border-radius: 5px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* ── Icon-only action button ── */
.button-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--clr-border-accent);
  background: transparent;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
}

.button-icon img {
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.button-icon:hover {
  background: rgba(var(--clr-accent-rgb), 0.12);
  border-color: var(--clr-accent);
}

.button-icon:hover img {
  opacity: 1;
}

.button-icon--danger:hover {
  background: rgba(var(--clr-danger-rgb),0.12);
  border-color: var(--clr-danger);
}

/* Tooltip via title attribute */
.button-icon::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--clr-surface-3);
  color: var(--clr-text-primary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  border: 1px solid var(--clr-border-accent);
  box-shadow: 0 2px 8px rgba(var(--clr-black-rgb),0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}

.button-icon:hover::after {
  opacity: 1;
}

.button-command {
  color: var(--clr-text-secondary);
  background-color: transparent;
  border: 1px solid var(--clr-border-accent);
  border-radius: 5px;
  padding: 6px 4px;
  font-size: 12px;
  width: 120px;
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}

.button-command-small {
  color: var(--clr-text-secondary);
  background-color: transparent;
  border: none;
  padding: 0px 0px;
  font-size: 12px;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
}

table-nav-button {
  color: var(--clr-text-secondary);
  letter-spacing: 1.25px;
  background-color: rgba(var(--clr-black-rgb), 0);
  border: 1px solid var(--background-color-application);
  border-radius: 5px;
  padding: 8px 24px;
  font-family: Avenirltpro Black, sans-serif;
  width: 40px;
  display: inline-block; /* Display-Typ */
  margin-bottom: 5px;
  margin-right: 10px;
}

button:hover {
  background: var(--clr-accent-btn-hover);
  color: var(--clr-text-primary);
  cursor: pointer;
}

select {
  width: 100%;
  padding-left: 10px;
  background: var(--clr-shell);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border);
  border-radius: 5px;
  font-size: small;
  margin-bottom: 10px;
  height: 30px;
  min-height: 30px;
}

select::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--font-color-navigation);
  background-color: var(--background-color-navigation);
  border-radius: 5px;
  border-radius: 5px;
}


option {
  padding: 10px;
  background: var(--clr-surface-1);
  color: var(--clr-text-primary);
  font-size: 16px;
}

.custom-select {
  position: relative;
  display: inline-block;
  width: 200px;
}

.custom-select::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--font-color-application);
}

.button-container {
  display: flex;
  justify-content: center;
  margin: 5px 0;
  z-index: 1;
  height: 30px;
  width: 100%;
  align-items: center;
  margin-top: 20px;
}

.vertical-button-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  margin: 5px;
  margin-bottom: 20px;
  z-index: 1;
  height: 50px;
  width: 100%;
}

#cockpitnav {
  flex-shrink: 0;
}

.button-command-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  width: 300px
}

.welcome {
    height: 100vh;
    width: 100%;
    background-color: var(--background-color-application);
    align-items: start;
    display: flex;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-direction: row;
    justify-content: flex-start;
  }

.welcome > .container-top-bottom {
    flex: 1;
    min-width: 0;
    height: calc(100vh - 25px);
    max-height: calc(100vh - 25px);
    overflow-y: auto;
  }

/* Non-cockpit pages: expand the main input area to fill available space
   and keep a 25px gap to the trailing button row. */
.welcome > .container-top-bottom > .input-container {
    flex: 1;
    min-height: 0;
    max-height: none;
    margin-bottom: 25px;
}

/* Secondary input-container (e.g. shared manual-context field on
   adddocumentstoknowledgedb): keep content height so the tabs above still
   take the flex space. */
.welcome > .container-top-bottom > #manualctx-container.input-container {
    flex: 0 0 auto;
    max-height: none;
    margin-bottom: 12px;
}

/* adddocumentstoknowledgedb: the tab container takes its natural content
   height when the viewport has room, but is allowed to shrink and scroll
   internally on short viewports so the manual context, protocol and
   upload button below stay visible without page-level scrolling. */
.welcome > .container-top-bottom > #add-docs-tabs.input-container {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-bottom: 12px;
}

.welcome > .container-top-bottom > #add-docs-tabs.input-container > .container-tab-widget {
    overflow: visible;
}

#add-docs-tabs .tab-content-organisation.active {
    overflow: visible;
}

/* knowledgebasesearch: the search panel must keep its natural content height
   so the results-container below has room to render — and so the input field
   stays the same size before and after a search is executed. */
.welcome > .container-top-bottom > #search-input-container.input-container {
    flex: 0 0 auto;
    max-height: none;
    margin-bottom: 12px;
}

/* entitiesview: the entity-count label must keep its natural content height
   so the entity card list below has room to render. */
.welcome > .container-top-bottom > #entity-count-container.input-container {
    flex: 0 0 auto;
    max-height: none;
    margin-bottom: 12px;
}

/* entity (single-entity detail view): the entity card panel must keep its
   natural content height so the relationships section below has room. */
.welcome > .container-top-bottom > #entity-section.input-container {
    flex: 0 0 auto;
    max-height: none;
    margin-bottom: 12px;
}

/* analyserequest: query textarea and config inputs must keep their natural
   content height so the results-wrapper below has room to render. */
.welcome > .container-top-bottom > #analyse-query-container.input-container,
.welcome > .container-top-bottom > #analyse-config-container.input-container {
    flex: 0 0 auto;
    max-height: none;
    margin-bottom: 12px;
}

#add-docs-tabs .tab-content-organisation.active {
    height: auto;
}

/* Non-cockpit pages: pin the trailing button row to the bottom of the
   scroll viewport so its lower edge always aligns with .navbar2's lower
   edge — even at small viewport heights where the content above would
   otherwise push it below the fold. The 10px bottom offset matches the
   container's padding-bottom so the visual position is identical whether
   content fits or overflows. */
.welcome > .container-top-bottom > .button-container:last-child {
    position: sticky;
    bottom: 10px;
    margin-top: auto;
    margin-bottom: 10px;
    background-color: var(--background-color-application);
    z-index: 2;
}

.welcome > .container-top-bottom .container-top-bottom {
    max-height: none;
    height: auto;
    overflow-y: visible;
  }

.container-left-right-top-aligned > .container-top-bottom {
  flex: 1;
  min-width: 0;
}

#profile-content {
  align-items: stretch;
  height: calc(100vh - 25px);
  max-height: calc(100vh - 25px);
  overflow: hidden;
}

/* Grid scrolls internally; page-header, hero and save-button row stay fixed.
   Save-button bottom edge then aligns with the navigation's bottom edge. */
#profile-content > #profile-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}
#profile-content > .button-container:last-child {
  flex-shrink: 0;
  margin-top: 25px;
  margin-bottom: 0;
}

/* ── AiProcessStepEditor page: wrap fills available height,
   the tab container scrolls internally, save button stays fixed. ── */
#step-editor-wrap {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#step-editor-wrap > #step-tabs {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
#step-editor-wrap > #errorMsg {
  flex-shrink: 0;
  margin: 0;
}
#step-editor-wrap > #errorMsg:empty {
  display: none;
}
#step-editor-wrap > .button-container {
  order: 1;
  flex-shrink: 0;
  margin-top: 25px;
  margin-bottom: 0;
}

#profile-persona-container {
  display: flex;
  flex-direction: column;
}

#profile-persona-container > .config-card {
  flex: 1;
  margin-bottom: 0;
}

/* ── AiProcessStepEditor: Aufgabe tab — System Prompt + Request side by side ── */
#prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  align-items: stretch;
}
#prompt-grid > .prompt-field-row {
  min-width: 0;
}
.prompt-field-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.prompt-field-row > .molecule:first-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.prompt-field-row > .step-token-inserter {
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 22px;
}
#prompt-grid textarea {
  height: 220px;
  min-height: 140px;
  max-height: 360px;
  flex: 1;
  margin-bottom: 0;
}

.welcome > .container-top-bottom .card-container {
    max-height: none;
    overflow-y: visible;
  }

  .dashboard {
    height: 100vh;
    width: 100%;
    background-color: var(--background-color-application);
    align-items: center;
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: flex-start;
    justify-items: stretch;
  }

.chat-container {
  width: 100%;
  margin-top: 25px;
  height: calc(100vh - 25px); /* 100vh - navbar2 height */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
  background-color: var(--background-color-application);
}

.chat-input-container {
  width: 100%;
  height: 130px;
  max-height: 130px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 20px;

}

.chat-window {
    /*height: 50%;*/
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 30px;
    /*flex: 1;*/
}

/* Embedded chatbot widget (iframe loaded with ?embedded=true; PublicChatbotPage
   adds `chat-embedded` to <body>). The narrow widget iframe always matches the
   <=1024px rules, which absolutely-position .chat-container at top:50px for a
   navbar that does not exist in the iframe — pushing the input off the bottom.
   Here we pin the container to the iframe and turn the message list into a
   bounded internal scroll area (the proven flex:1 + min-height:0 pattern used
   elsewhere in this file), so the input row stays visible during streaming.
   Scoped to .chat-embedded so the cockpit chat and the standalone public
   chatbot are byte-for-byte unchanged. */
body.chat-embedded .chat-container {
    position: static;
    left: 0;
    /* override the <=640px rule `width: calc(100% - 68px)` (paired with a
       left:60px offset that no longer applies once position is static) so the
       chat fills the iframe with symmetric left/right spacing. */
    width: 100%;
    margin: 0;
    height: 100vh;
    justify-content: flex-start;
}
body.chat-embedded .chat-window {
    flex: 1 1 auto;
    min-height: 0;
    /* symmetric side spacing regardless of widget width (the base/mobile rules
       use asymmetric left/right margins meant for the cockpit layout). */
    margin-left: 12px;
    margin-right: 12px;
}
body.chat-embedded .chatbot-input {
    flex: 0 0 auto;
    /* override the asymmetric base/mobile width+margins so the input stretches
       evenly to the same left/right spacing as the messages. */
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
}
/* The "⋯" secondary-actions toggle is shown on narrow (<=640px) layouts to
   collapse cockpit-only buttons. In the embedded widget those secondary
   actions aren't relevant, so hide the iconless toggle for a clean row. */
body.chat-embedded .chatbot-more-toggle {
    display: none;
}

/* Embedded widget colors: each var is set by PublicChatbotPage only when a valid
   hex color was passed via the iframe URL; otherwise the platform theme applies. */
body.chat-embedded .chat-window,
body.chat-embedded .chat-container {
    background: var(--acw-window-bg, var(--background-color-application));
}
body.chat-embedded .msg-bubble-bot,
body.chat-embedded .msg-bubble-greeting {
    background: var(--acw-bot-bg, #131929);
    color: var(--acw-bot-fg, var(--font-color-application));
}
body.chat-embedded .msg-bubble-user {
    background: var(--acw-user-bg, linear-gradient(135deg, #1e3a8a, #1d4ed8));
    color: var(--acw-user-fg, #fff);
}
/* The input container and its button row both carry .chatbot-input-bg; color both
   so a custom input background covers the whole input area. */
body.chat-embedded .chatbot-input-bg {
    background: var(--acw-input-bg, var(--background-color-input));
}
body.chat-embedded .chatbot-inputfield {
    color: var(--acw-input-fg, var(--font-color-input));
    background: transparent;
}
body.chat-embedded .chatbot-button-send {
    background: var(--acw-send-bg, linear-gradient(135deg, var(--clr-accent), var(--clr-accent-btn)));
}
/* Recolor the send icon to --acw-send-fg via a mask; the execute<->stop swap
   follows the existing .chatbot-input--streaming class, so no JS change is needed. */
body.chat-embedded .chatbot-button-send img {
    display: none;
}
body.chat-embedded .chatbot-button-send::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--acw-send-fg, #fff);
    -webkit-mask: url(../images/execute.svg) center / contain no-repeat;
    mask: url(../images/execute.svg) center / contain no-repeat;
}
body.chat-embedded .chatbot-input--streaming .chatbot-button-send::after {
    -webkit-mask-image: url(../images/stop.svg);
    mask-image: url(../images/stop.svg);
}

.message {
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 5px
}

.user-message {
  /* legacy — ersetzt durch .msg-user + .msg-bubble-user */
  font-size: small;
}

.bot-message {
  /* legacy — ersetzt durch .msg-bot + .msg-bubble-bot */
  color: var(--font-color-application);
  font-size: small;
}

.bot-message a {
  text-decoration: underline;
  color: var(--font-color-application); 
}

.bot-message td a {
  text-decoration: underline;
  color: var(--font-color-table); 
}

td a {
  text-decoration: underline;
  color: var(--font-color-table); 
}

.cockpit-service-input {
  width: 180px;
  font-size: 11px;
  margin-top: 10px;
  margin-left: 20px;
}

#agentselect {
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
}

#cockpit-input-lastDays {
  width: 180px;
  font-size: 11px;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 10px;
}

.chatbotlabel {
  margin-top: 10px;
  margin-bottom: 10px;
}

.chatbotfilelabel {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.chatbotfilelabel:not(:empty) {
  display: inline-flex;
}

.chatbotfile-chip {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(var(--clr-accent-rgb), 0.1);
  border: 1px solid rgba(var(--clr-accent-rgb), 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--clr-accent);
}

.chatbot-checkbox {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  width: 20px;
  height: 20px;
}

.config-container {
    max-width: 600px;
    border: 1px solid var(--container-border);
    border-radius: 10px;
    overflow: auto;
    box-shadow: var(--shadow-subtle);
    border-top: 1px solid var(--container-border);
    display: flex;
    flex-direction: column;
    background: var(--card-gradient);
}

.flex-div {
  display: flex;
  flex-direction: column;
}

.container {
    width: calc(100% - 80px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    margin-left: 20px;
    margin-right: 20px;

}

.aiservice-execution-container {
    width: calc(100% - 80px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    overflow: auto;
    height: calc(100vh - 50px);
}

.aiservice-container {
    width: calc(100% - 80px);
    margin: 25px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    overflow: auto;
    height: calc(100vh - 50px);
}

.aiservice-container .page-header {
    align-self: stretch;
    margin-bottom: 16px;
}

.container-top-bottom {
  width: 100%;
  margin: 0 auto;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-tab {
  width: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  max-height: 100%;
  height: 100%;
  flex: 1;
  color: var(--font-color-navigation);
}

.container-tab-widget {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin: 0px;
  align-items: start;
  justify-content: start;
  padding: 0px;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
}

.container-tab-navigation {
  flex-shrink: 0;
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.container-top-bottom-left-aligned {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}



.container-top-bottom-page {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.container-left-right {
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container-left-right-top-aligned {
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: row;
  align-items: start;
}

.container-message {
  width: 100%;
  margin-top: 0px;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 20px;
}

.message-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}

.message-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.buttonrow {
  width: 190px;
  margin: 0 0;
  padding-top: 10px;
  padding-left: 10px;
  background-color: rgba(var(--clr-black-rgb), 0); /* transparent */
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.buttonrow:hover {
  text-decoration: none;
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
  border-radius: 5px;
}

.buttonrow label:hover {
  text-decoration: none;
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
  border-radius: 5px;
}

.buttonrow button:hover {
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
}


.container-left-right-spacebetween {
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.container-cockpit-agent {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container-chat-buttons {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  justify-content: start;

}

/* ── Timeline Chat Design ────────────────────────────── */

.msg-bot,
.msg-greeting {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 20px 0;
}

.msg-bot-avatar,
.msg-greeting-avatar {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-accent-btn), var(--clr-accent));
  box-shadow: 0 0 12px rgba(var(--clr-accent-rgb),.45);
  overflow: hidden;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-bot-avatar .chatbot-avatar,
.msg-greeting-avatar .chatbot-avatar {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.msg-bot-content,
.msg-greeting-content {
  flex: 1;
  min-width: 0;
}

.msg-sender {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 5px;
}

.msg-sender-user {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  margin-bottom: 5px;
  text-align: right;
}

.msg-bubble-bot {
  background: var(--clr-surface-mid);
  border: 1px solid var(--clr-border-accent);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 15px;
  color: var(--font-color-application);
  line-height: 1.65;
  box-shadow: 0 2px 16px rgba(var(--clr-accent-rgb),.1);
  font-size: small;
}

.msg-bubble-bot a {
  text-decoration: underline;
  color: var(--font-color-application);
}

.msg-bubble-bot td a {
  text-decoration: underline;
  color: var(--font-color-table);
}

.msg-bubble-greeting {
  background: linear-gradient(135deg, var(--clr-shell), var(--clr-surface-mid));
  border: 1px solid var(--clr-surface-3);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 15px;
  color: var(--clr-text-secondary);
  line-height: 1.7;
  font-style: italic;
  font-size: small;
}

.msg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  min-height: 24px;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msg-meta-chip {
  font-size: 10px;
  color: var(--clr-text-muted);
}

/* Skill chips — shown below the bot answer for project chats so the
   user sees which project skills shaped the reply. The label sits
   inline with the chips and uses the same muted tone as the meta row. */
.msg-skills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}

.msg-skills-label {
  font-size: 10px;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

.msg-skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--clr-accent-rgb),0.14);
  border: 1px solid rgba(var(--clr-accent-rgb),0.30);
  color: var(--clr-accent-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-theme="light"] .msg-skill-chip {
  background: rgba(var(--clr-accent-rgb),0.10);
  border-color: rgba(var(--clr-accent-rgb),0.32);
  color: var(--clr-accent-btn-hover);
}

.msg-actions {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .18s ease;
}

.msg-bot:hover .msg-actions,
.msg-bot:focus-within .msg-actions {
  opacity: 1;
}

/* ── Tool Invocations (collapsible section + cards) ──────────── */

.molecule-collapsible-section { margin-top: 0.5em; }

.collapsible-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  cursor: pointer;
  padding: 0.25em 0;
  font-size: 0.9em;
  color: inherit;
  user-select: none;
}

.collapsible-header:hover { opacity: 0.8; }

.collapsible-arrow {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 0.8em;
  color: var(--clr-text-muted);
}

.collapsible-label {
  font-size: 0.85em;
  color: var(--clr-text-muted);
  font-weight: 500;
}

.collapsible-body { padding: 0.25em 0 0.5em 0.8em; }

.tool-invocation {
  border-left: 3px solid var(--clr-success-mid);
  padding: 0.4em 0.6em;
  margin-bottom: 0.4em;
  background: rgba(var(--clr-success-rgb), 0.05);
  border-radius: 0 4px 4px 0;
}

.tool-invocation-error {
  border-left-color: var(--clr-danger);
  background: rgba(var(--clr-danger-rgb), 0.05);
}

.tool-invocation-header {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.2em;
}

.tool-invocation-toggle {
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.tool-invocation-toggle:hover .tool-invocation-name {
  text-decoration: underline;
}

.tool-invocation-caret {
  display: inline-block;
  width: 0.9em;
  font-size: 0.85em;
  opacity: 0.7;
}

.tool-invocation-details {
  padding-left: 1.3em;
  margin-top: 0.2em;
}

.thinking-aiservice-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-top: 0.6em;
}

.thinking-aiservice-progress {
  border-left: 3px solid var(--clr-accent, #3b82f6);
  padding: 0.3em 0.6em;
  background: rgba(59, 130, 246, 0.06);
  border-radius: 0 4px 4px 0;
  min-width: 18em;
}

.thinking-aiservice-progress-title {
  font-weight: 600;
  font-size: 0.85em;
}

.thinking-aiservice-progress-subtitle {
  font-size: 0.8em;
  opacity: 0.8;
  margin: 0.1em 0 0.3em 0;
}

.thinking-aiservice-progress-bar-outer {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.thinking-aiservice-progress-bar-inner {
  height: 100%;
  width: 0%;
  background: var(--clr-accent, #3b82f6);
  transition: width 0.25s ease-out;
}

.tool-invocation-icon { font-size: 0.85em; }

.tool-invocation-ok .tool-invocation-icon { color: var(--clr-success-mid); }

.tool-invocation-error .tool-invocation-icon { color: var(--clr-danger); }

.tool-invocation-name {
  font-weight: 600;
  font-size: 0.85em;
}

.tool-invocation-duration {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.8em;
}

.tool-invocation-args,
.tool-invocation-body {
  font-family: monospace;
  font-size: 0.8em;
  white-space: pre-wrap;
  margin: 0.15em 0;
  color: var(--clr-text-secondary);
  overflow-x: auto;
}

.tool-decision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.4em;
  padding: 0.25em 0.6em;
  border-radius: 0.6em;
  font-size: 0.8em;
  font-weight: 600;
}

.tool-decision-approved {
  color: var(--clr-success-mid);
  background: rgba(var(--clr-success-rgb, 40, 167, 69), 0.12);
  border: 1px solid var(--clr-success-mid);
}

.tool-decision-declined {
  color: var(--clr-danger);
  background: rgba(var(--clr-danger-rgb), 0.10);
  border: 1px solid var(--clr-danger);
}

.msg-user {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0 0 20px 0;
}

.msg-user-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  max-width: 78%;
}

.msg-bubble-user {
  background: linear-gradient(135deg, var(--clr-accent-deep), var(--clr-accent-btn));
  border: 1px solid rgba(var(--clr-accent-btn-rgb),.33);
  border-radius: 14px 4px 14px 14px;
  padding: 12px 15px;
  color: var(--clr-white);
  line-height: 1.65;
  box-shadow: 0 2px 16px rgba(var(--clr-accent-rgb),.3);
  font-size: small;
  white-space: pre-wrap;
}

.msg-user-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  min-height: 20px;
}

.msg-user-footer button {
  opacity: 0;
  transition: opacity .18s ease;
}

.msg-user:hover .msg-user-footer button,
.msg-user:focus-within .msg-user-footer button {
  opacity: 1;
}

.msg-user-avatar {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-surface-5);
  overflow: hidden;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-user-avatar .chatbot-avatar {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.6;
}

[data-theme="light"] .msg-bubble-bot {
  background: var(--clr-surface-pale-1);
  border-color: var(--clr-border-soft);
  box-shadow: 0 2px 16px rgba(var(--clr-accent-rgb),.06);
}

[data-theme="light"] .msg-bubble-greeting {
  background: linear-gradient(135deg, var(--clr-surface-pale-2), var(--clr-surface-pale-1));
  border-color: var(--clr-text-primary);
}

[data-theme="light"] .msg-bubble-user {
  background: linear-gradient(135deg, var(--clr-accent-btn), var(--clr-accent));
}

.agentmanager-container {
  width: calc(100% - 40px);
  height: calc(100vh - 100px);
  margin: 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  padding: 10px;
  gap: 50px;
  justify-content: start; 
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
}

.card-container {
  width: calc(100% - 40px);
  margin: 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  padding: 10px;
  gap: 50px;
  justify-content: start; 
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  max-height: calc(100vh - 100px);
}

.card-info .container-left-right {
  align-items: center;
  justify-content: center;
}

.process-container {
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
}

.dashboard-container {
  box-sizing: border-box;
  margin: 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.empty-agents-container {
  width: 100%;
  margin: 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.input-container {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border-accent);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 5;
  flex-shrink: 0;
  max-height: calc(100vh - 300px);
}

.input-container h3 {
  color: var(--font-color-input);
}

.input-container-shrink {
  width: calc(100% - 100px);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border-accent);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  padding: 10px;
  overflow-x: hidden;
  z-index: 5;
}

.welcome-container {
  width: calc(100% - 100px);
  min-height: 180px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  padding: 10px;
  margin-bottom: 10px;
}

.resultrating-container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  z-index: 10;
}

.preview-image-container {
  width: 120px; 
  height: 120px; 
  border-radius: 50%; 
  overflow: hidden; 
  margin-top: 10px; 
  display: none;
}

.preview-image {
  width: 120px; 
  height: 120px; 
  object-fit: cover;
}

.chatbot-image {
  width: 300px;
}

.chatbot-video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

#agentImage {
  width: 36px; 
  height: 36px; 
  
  margin-left: 0px;
  border-radius: 5px;
}

.cockpit-agent-image {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 5px;
}


.cockpit-result-image {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 5px;
}

.chatbot-avatar-container {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 35px;
  margin-bottom: 10px;
  background: var(--clr-surface-1);
}

.chatbot-avatar {
  width: 50px; 
  height: 50px; 
  object-fit: cover;
}

.text-list {
    margin-top: 20px;
}

.text-list h2 {
    margin-bottom: 10px;
}

.text-list ul {
    list-style-type: none;
    padding: 0;
}

.text-list li {
    background: var(--background-color-application);
    color: var(--font-color-application);
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid var(--list-border);
}

.cardlist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 11px;
}

.cardlist a {
    text-decoration: underline;
    color: var(--clr-text-secondary);
}

.cardlist a:hover {
  text-decoration: none;
  color: var(--background-color-navigation-hover);
}

.header {
  top: 0;
  left: 0;
  height: 50px;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  z-index: 99;
  margin: 0 auto;
}

.dropdown p {
  color: var(--font-color-navigation);
}

.dialog p {
  margin-top: 0px;
  margin-bottom: 5px;
}

.dialog .container-top-bottom {
  margin-top: 0px;
  margin-bottom: 5px;
}

#wf-input-section {
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  padding: 0;
}

#wf-input-section .molecule {
  width: 100%;
  box-sizing: border-box;
}

.navbar2 .navimage {
  width: 16px;
  height: 16px;
  padding: 0px;
}

.navbar2 .buttonrow {
  width: 180px;
  margin-left: 0px;
  padding-left: 14px;
  padding-top: 0px;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  cursor: pointer;
}

.navbar2 .buttonrow:hover {
  text-decoration: none;
  background-color: var(--clr-surface-1);
  cursor: pointer;
  border-radius: 5px;
}

.navbar2 .buttonrow:hover label {
  color: var(--clr-text-primary);
}

.navbar2 .buttonrow.active {
  border-left: 2px solid var(--clr-accent);
  background: var(--clr-surface-3);
}

.navbar2 .buttonrow label:hover {
  text-decoration: none;
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
  border-radius: 5px;
}

.navbar2 .buttonrow button:hover {
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
}

.chatbot-service .buttonrow {
  width: 100%;
  margin: 0;
  padding: 7px 14px 7px 14px;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border-left: 2px solid transparent;
  box-sizing: border-box;
}

.chatbot-service .buttonrow:hover {
  background-color: var(--clr-surface-1);
  border-left-color: var(--clr-accent);
  border-radius: 0;
}

.chatbot-service .buttonrow:hover label {
  color: var(--clr-text-primary);
}

.chatbot-service .buttonrow.active {
  border-left: 2px solid var(--clr-accent);
  background: var(--clr-surface-3);
}

.chatbot-service .buttonrow button {
  background: transparent;
  border: none;
  padding: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chatbot-service .buttonrow button:hover {
  background: transparent;
}

.navbar2 .container-left-right {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 4px;
  border: none;
  cursor: default;
}

.navbar2 .container-left-right p {
  font-size: 9px;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0;
}

.navbar2 .container-left-right .settings-icon {
  width: 12px;
  height: 12px;
  padding: 0;
  opacity: 0.45;
}

.navbar2 .container-left-right:hover p {
  color: var(--clr-text-secondary);
}

.navbar2 .container-left-right:hover .settings-icon {
  opacity: 0.7;
}

.navbar2 .navbar-commands {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  
  z-index: 161;
}

.navbar-commands {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width:220px;
  z-index: 161;
}

.navbar2 hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 6px 14px;
  width: calc(100% - 28px);
}

.navbar2 {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-end;
  width: 220px;
  margin-top: 25px;
  background-color: var(--clr-shell);
  border-right: 1px solid var(--clr-border);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--clr-text-primary);
  overflow-y: auto;
  overflow-x: hidden;
}

.navbar2 img {
  padding: 15px;
}

/* ── Nav Rail ─────────────────────────────────────────────── */

.nav-rail {
  width: 60px;
  flex-shrink: 0;
  background: var(--clr-base-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 14px;
  gap: 6px;
  border-right: 1px solid rgba(var(--clr-white-rgb),0.04);
}

.nav-rail .rail-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 6px;
}

.nav-rail .rail-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.2s;
  position: relative;
  flex-shrink: 0;
  
}

.nav-rail .rail-btn:hover {
  background: rgba(var(--clr-white-rgb),0.06);
}

.nav-rail .rail-btn.active-chat {
  background: rgba(var(--clr-accent-rgb),0.18);
  box-shadow: 0 0 0 1px rgba(var(--clr-accent-rgb),0.25), 0 0 18px rgba(var(--clr-accent-rgb),0.15);
}
.nav-rail .rail-btn.active-ai {
  background: rgba(var(--clr-violet-rgb),0.18);
  box-shadow: 0 0 0 1px rgba(var(--clr-violet-rgb),0.25), 0 0 18px rgba(var(--clr-violet-rgb),0.15);
}
.nav-rail .rail-btn.active-fav {
  background: rgba(var(--clr-amber-rgb),0.18);
  box-shadow: 0 0 0 1px rgba(var(--clr-amber-rgb),0.25), 0 0 18px rgba(var(--clr-amber-rgb),0.15);
}
.nav-rail .rail-btn.active-res {
  background: rgba(var(--clr-cyan-rgb),0.15);
  box-shadow: 0 0 0 1px rgba(var(--clr-cyan-rgb),0.2), 0 0 18px rgba(var(--clr-cyan-rgb),0.1);
}
.nav-rail .rail-btn.active-projects {
  background: rgba(var(--clr-success-rgb),0.16);
  box-shadow: 0 0 0 1px rgba(var(--clr-success-rgb),0.22), 0 0 18px rgba(var(--clr-success-rgb),0.12);
}

.nav-rail .rail-btn.active-chat::after,
.nav-rail .rail-btn.active-ai::after,
.nav-rail .rail-btn.active-fav::after,
.nav-rail .rail-btn.active-res::after,
.nav-rail .rail-btn.active-projects::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-base-deep);
}
.nav-rail .rail-btn.active-chat::after { background: var(--clr-accent); }
.nav-rail .rail-btn.active-ai::after   { background: var(--clr-violet); }
.nav-rail .rail-btn.active-fav::after  { background: var(--clr-amber); }
.nav-rail .rail-btn.active-res::after  { background: var(--clr-cyan); }
.nav-rail .rail-btn.active-projects::after { background: var(--clr-success); }

.nav-rail .rail-btn[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-surface-3);
  border: 1px solid rgba(var(--clr-white-rgb),0.08);
  color: var(--clr-text-primary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(var(--clr-black-rgb),0.4);
}

.nav-rail .chip {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Neutral frame for every chip, independent of its colour variant. The
     per-variant .chip-* rules below re-state the same background (and set the
     icon colour); active states override it. This guarantees a chip is always
     framed at the same size even if its variant rule is missing. */
  background: rgba(var(--clr-white-rgb),0.07);
}

.nav-rail .chip svg {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}

.nav-rail .chip-chat     { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-blue-rgb),0.80); }
.nav-rail .chip-ai       { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-violet-rgb),0.80); }
.nav-rail .chip-fav      { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-warning-rgb),0.70);  }
.nav-rail .chip-res      { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-cyan-rgb),0.70); }
.nav-rail .chip-mgr      { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-slate-rgb),0.70); }
.nav-rail .chip-projects { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-success-rgb),0.80); }
.nav-rail .chip-collapse { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-slate-rgb),0.70); }

.nav-rail .chip-lang     {
  background: rgba(var(--clr-white-rgb),0.07);
  color: rgba(var(--clr-chip-slate-rgb),0.80);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-rail .chip-theme    { background: rgba(var(--clr-white-rgb),0.07); color: rgba(var(--clr-chip-slate-rgb),0.80); }

.nav-rail .rail-btn.active-chat .chip-chat { background: rgba(var(--clr-accent-rgb),0.30);  color: var(--clr-accent-softer); }
.nav-rail .rail-btn.active-ai   .chip-ai   { background: rgba(var(--clr-violet-rgb),0.30);  color: var(--clr-violet-softer); }
.nav-rail .rail-btn.active-fav  .chip-fav  { background: rgba(var(--clr-amber-rgb),0.28);  color: var(--clr-amber-soft); }
.nav-rail .rail-btn.active-res  .chip-res  { background: rgba(var(--clr-cyan-rgb),0.25);   color: var(--clr-cyan-soft); }
.nav-rail .rail-btn.active-projects .chip-projects { background: rgba(var(--clr-success-rgb),0.28); color: var(--clr-success-soft); }

.nav-rail .notif {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clr-danger);
  font-size: 8px;
  font-weight: 700;
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--clr-base-deep);
  line-height: 1;
}

.nav-rail .rail-spacer {
  flex: 1;
}

/* Menu dropdowns placed inside the rail */
.nav-rail .button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.nav-rail .dropdown {
  width: 40px;
  height: 30px;
  margin: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-rail .dropdown:hover {
  background: rgba(var(--clr-white-rgb), 0.06);
}

.nav-rail .container-left-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-rail .container-left-right:hover {
  background: transparent;
}

.nav-rail .dropdown .settings-icon {
  width: 20px;
  height: 20px;
  opacity: 0.65;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.nav-rail .dropdown:hover .settings-icon {
  opacity: 1;
}

.nav-rail .dropdown p {
  display: none;
}

.nav-rail .rail-divider {
  width: 28px;
  border: none;
  border-top: 1px solid rgba(var(--clr-white-rgb),0.07);
  margin: 2px 0;
}

nav {
  float: right;
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  padding: 15px;
}

nav a {
  text-decoration: none;
  color: var(--navigation-link);
  display: inline-block;
  padding-top: 15px;
}

nav a:hover {
  color: var(--navigation-hover);
}

nav a:active {
  font-weight: bold;
}

iframe {
  width: 480px;
  height: 315px;
}

.youtube-card {
  width: 500px;
  height: 360px;
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  margin: 20px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.youtube-card-info {
  text-align: center;
  margin-bottom: 5px;
  width: 500px;
}


.ytp-impression-link {
  display: none;
}

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
    margin-top: 0;
    z-index: 5;
}

th, td {
    padding: 10px 16px;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    border: none;
}

td {
    vertical-align: middle;
    color: var(--clr-text-secondary);
}

th {
    position: sticky;
    top: 0;
    background: var(--th-gradient);
    color: var(--clr-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-bottom: 1px solid var(--clr-border-accent);
}

tr:nth-child(odd) {
    background: var(--clr-surface-1);
}

tr:nth-child(even) {
    background: var(--clr-surface-2);
}

tr:not(:last-child) td {
    border-bottom: 1px solid var(--clr-border);
}

tr:hover {
    background: var(--clr-row-hover);
}

tr:hover td {
    color: var(--clr-text-primary);
}

/* ── Molecule table wrapper — border-radius + glow ── */
.molecule-table-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--clr-border-accent);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
    margin-top: 20px;
}

.molecule-table-wrap table tr:first-child th:first-child {
    border-top-left-radius: 9px;
}

.molecule-table-wrap table tr:first-child th:last-child {
    border-top-right-radius: 9px;
}

/* ── Parameter table drag handle column ── */
#aiservice-parameter-table th:first-child,
#aiservice-parameter-table td:first-child {
  width: 24px;
  text-align: center;
  padding: 12px 6px;
  color: var(--clr-text-muted);
  font-size: 1.1rem;
  letter-spacing: 1px;
  cursor: grab;
  user-select: none;
}

/* ── Drag-and-drop sortable rows ── */
tr.sortable-chosen {
  background: var(--clr-surface-3);
  cursor: grabbing;
}
tr.sortable-ghost {
  opacity: 0.4;
  background: var(--clr-accent);
}
tr:not(:first-child) {
  cursor: grab;
}


.pagination {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

/* Pagination wrappers in the personal-KB chunk list must not inherit the
   global 30px .button-container height, otherwise the 40px page buttons
   overflow and overlap the chunk-count line and the first chunk card. */
#user-kb-chunks-content #user-top-pagination,
#user-kb-chunks-content #user-bottom-pagination {
  height: auto;
  min-height: 48px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.page-btn {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid var(--clr-border);
  width: 40px;
  color: var(--clr-text-secondary);
  background: var(--clr-surface-1);
}

.page-btn-seleceted {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid var(--clr-accent-btn);
  background: var(--clr-accent-btn);
  color: var(--clr-text-primary);
  width: 40px;
}
button.delete {
  background: transparent;
  color: var(--clr-danger);
  border: 1px solid var(--clr-surface-3);
}

button.image.page-btn {
  color: var(--font-color-pagination);
  background-color: var(--background-color-pagination);
  border: 0px;
}

button.image {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--clr-surface-1);
  border: 1px solid var(--clr-border);
  margin-bottom: 10px;
}

button.image-tabwidget {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--clr-shell);
  border: none;
}

button.image-tabwidget:hover {
  background: var(--clr-surface-1);
}

button.image-small {
  border: 0px;
  padding: 0px 0px;
  width: 16px;
  height: 16px;
  background-color: rgba(var(--clr-black-rgb), 0.0);
}

button.image-small:hover {
  background-color: var(--background-color-button-hover);
}

button.white {
  background: var(--clr-surface-3);
  color: var(--clr-text-primary);
}

.upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
    border-radius: 6px;
}

.upload-container label {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: var(--font-color-application);*/
  cursor: pointer;
  color: var(--clr-text-secondary);
  letter-spacing: 1px;
}

.upload-container label:hover {
  color: var(--clr-text-secondary);
  cursor: pointer;
}

/* Büroklammer im Chatbot-Input: identisch zu .chatbot-button */
.chatbot-input .upload-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 0;
  border-radius: 0;
}

.chatbot-input .upload-container label {
  width: 28px;
  height: 28px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--clr-border);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  letter-spacing: normal;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chatbot-input .upload-container label:hover {
  background: rgba(var(--clr-accent-rgb), 0.08);
  border-color: rgba(var(--clr-accent-rgb), 0.3);
  color: inherit;
}

.chatbot-input .upload-container label img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.72;
}

[data-theme="light"] .chatbot-input .upload-container label img {
  filter: brightness(0);
  opacity: 0.55;
}

.chatbot-input .upload-container label:hover img {
  opacity: 1;
}

[data-theme="light"] .chatbot-input .upload-container label:hover img {
  opacity: 0.85;
}


#upload-image {
    width: 24px;
    height: 24px;
}

#file-input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: var(--clr-shell);
    color: var(--clr-text-primary);
    cursor: pointer;
}

#selected-files {
    font-size: 11px;
}

/* ── Upload page redesign ─────────────────────────────────────── */

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    border: 2px dashed var(--container-border);
    border-radius: 12px;
    background: var(--clr-surface-1);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}

.upload-dropzone:hover {
    border-color: var(--clr-accent);
    background: color-mix(in srgb, var(--clr-accent) 10%, var(--clr-surface-1));
}

.upload-dropzone h4 {
    margin: 0;
    color: var(--clr-text-primary);
    font-size: 1rem;
}

.upload-dropzone p {
    margin: 0;
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
}

.upload-dropzone-icon {
    width: 48px;
    height: 48px;
    opacity: 0.6;
}

.upload-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    padding: 4px 0;
}

.upload-file-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--clr-surface-3);
    border: 1px solid var(--clr-border-accent);
    color: var(--clr-text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.upload-text-view {
    width: 100%;
}

.upload-text-view textarea {
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    resize: vertical;
    background: var(--clr-surface-1);
    color: var(--font-color-application);
    border: 1px solid var(--clr-border-accent);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    cursor: default;
    box-sizing: border-box;
}

.upload-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: var(--clr-surface-1);
    border: 1px solid var(--clr-border);
}

.upload-protocol {
    border-left: 3px solid var(--clr-accent);
    padding: 10px 16px 10px 32px;
    border-radius: 0 8px 8px 0;
    background: var(--clr-surface-1);
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    list-style: disc;
    margin: 0;
}

.upload-protocol li {
    display: list-item;
    padding: 3px 0;
    line-height: 1.5;
}

.upload-dropzone.has-image {
    padding: 10px;
    gap: 8px;
}

.dropzone-image-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.dropzone-image-preview button {
    align-self: center;
    width: 40px;
    height: 40px;
    padding: 6px 16px;
    font-size: 12px;
    flex-shrink: 0;
}

.dropzone-image-preview img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--clr-border);
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────── */

button.image:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text-primary);
  cursor: pointer;
}

button.delete:hover {
  border-color: var(--clr-danger);
  background: transparent;
}


.login-container {
  width: 80%;
  padding: 20px;
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

label {
  margin-bottom: 5px;
  font-size: smaller;
}

.error-message {
  color: var(--error-color);
  text-align: center;
  margin-top: 10px;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dialogs sit at z-index 60000 — the loading overlay must be above them
     so long-running backend calls triggered from inside a dialog are visible. */
  z-index: 70000;
}

.spinner {
  border: 16px solid var(--clr-border);
  border-top: 16px solid var(--clr-accent);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  display: none;
}

#chat-search {
  width: calc(100% - 30px);
  margin-left: 20px;
  margin-right: 10px;
}

.search-spinner {
  display: block;
  align-self: center;
  width: 14px;
  height: 14px;
  margin: 8px 0;
  border: 2px solid var(--clr-border);
  border-top: 2px solid var(--clr-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--overlay-bg);
  z-index: 9999;
}

#editDialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-dialog);
  padding: 20px;
}

#editDialog button{
  background-color: var(--background-color-dialog);
  color: var(--font-color-dialog);
  border: 1px solid var(--font-color-dialog);
}

.process-card {
  width: 320px;
  height: 320px;
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  margin: 20px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.process-card-end h3 {
  color: var(--background-color-application);
}

.process-card-end {
  width: 320px;
  height: 80px;
  background: var(--clr-surface-1);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin: 20px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: center;
}

.process-card-info {
  text-align: center;
  margin-bottom: 5px;
  width: 320px;
}

.model-selection-card {
  width: 230px;
  height: 215px;
  background: var(--card-gradient);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);

  margin: 20px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.model-selection-card--deprecated {
  opacity: 0.55;
  filter: grayscale(60%);
}

/* ─── Accent strip (DSGVO state) ─────────────────────────── */
.model-card-accent { height: 3px; flex: 0 0 auto; }
.model-card-accent.compliant    { background: linear-gradient(90deg, var(--clr-success) 0%, transparent 100%); }
.model-card-accent.conditional  { background: linear-gradient(90deg, var(--clr-warning) 0%, transparent 100%); }
.model-card-accent.noncompliant { background: linear-gradient(90deg, var(--clr-danger)  0%, transparent 100%); }

/* ─── Header: model name + provider + DSGVO label ────────── */
.model-card-header { padding: 10px 12px 6px; flex: 0 0 auto; }
.model-card-header .name {
  font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--clr-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-card-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  margin-top: 2px; font-size: 11px; color: var(--clr-text-secondary);
}
.model-card-meta .provider { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgsvo-label { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; flex: 0 0 auto; }
.dgsvo-label.compliant    { color: var(--clr-success); }
.dgsvo-label.conditional  { color: var(--clr-warning); }
.dgsvo-label.noncompliant { color: var(--clr-danger); }

/* ─── Factor row: label + 5-dot scale + numeric value ─────── */
.model-card-factor { padding: 2px 12px 6px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.model-card-factor .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--clr-text-secondary); opacity: 0.7;
}
.factor-dots { display: flex; gap: 3px; }
.factor-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.factor-dot.on { background: var(--clr-accent); }
.model-card-factor .value { margin-left: auto; font-size: 11px; color: var(--clr-text-secondary); }

/* ─── Capability chips (max 2 lines, "+N mehr" on overflow) ─ */
.model-card-chips {
  padding: 4px 12px 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
  height: 56px;
  overflow: hidden;
  align-content: flex-start;
  flex: 1 1 auto;
}
.cap-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--clr-accent-rgb), 0.18);
  color: var(--clr-accent);
  border: 1px solid rgba(var(--clr-accent-rgb), 0.35);
  line-height: 1.5; white-space: nowrap;
}
.cap-chip.more {
  background: rgba(255,255,255,0.08);
  color: var(--clr-text-secondary);
  border-color: rgba(255,255,255,0.15);
  cursor: help;
}

/* ─── Toggle footer + deprecated variant ─────────────────── */
.model-card-footer {
  background: rgba(0,0,0,0.28);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 8px 12px;
  display: flex; justify-content: space-between; gap: 10px;
  flex: 0 0 auto;
}
.model-card-footer .toggle-cell { display: flex; align-items: center; gap: 6px; }
.model-card-footer .toggle-cell span { font-size: 11px; color: var(--clr-text-primary); }
.model-card-footer .toggle-cell.disabled span { color: var(--clr-text-muted); opacity: 0.6; }

.model-card-footer.deprecated {
  background: rgba(var(--clr-danger-rgb), 0.10);
  border-top-color: rgba(var(--clr-danger-rgb), 0.18);
}

.badge-deprecated {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(var(--clr-danger-rgb), 0.15);
  color: var(--clr-danger);
  border: 1px solid rgba(var(--clr-danger-rgb), 0.3);
  letter-spacing: 0.03em;
}


.card {
  width: 200px;
  min-height: 220px;
  height: auto;
  color: var(--clr-text-primary);
  background: var(--card-gradient);
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-card);

  margin: 20px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.card-info {
  text-align: center;
  margin-bottom: 5px;
  font-size: smaller;
  width: 200px;
}

.card-info:has(.badge-internal) {
  position: relative;
}

.card-info img {
  border-radius: 10px;
}

.card-action {
  display: block;
  position: absolute;
  top: 8px;
  right: 10px;
}

.card-action .dropdown {
  margin-right: 0;
}

.card-action img.settings-icon:hover {
  opacity: 1;
}

.add-process-step-action {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.card-favorite {
  position: absolute;
  top: 10px;
  left: 10px;
}

.img-favorite img,
img.img-favorite {
  width: 24px;
  height: 24px;
  filter: brightness(1.7);
}

[data-theme="light"] .img-favorite img,
[data-theme="light"] img.img-favorite {
  filter: none;
}

.img-favorite:hover {
  cursor: pointer;
}

.actions-dropdown {
  display: none;
  position: absolute;
  flex-direction: column;
  background: var(--clr-shell);
  border: 1px solid var(--clr-border);
  border-radius: 5px;
  box-shadow: var(--shadow-subtle);
  transition: opacity 0.2s ease;
  z-index: 1;
}

.actions-dropdown.active {
  display: flex;
}

.button-action {
  color: var(--clr-text-secondary);
  letter-spacing: 1px;
  background-color: rgba(var(--clr-black-rgb), 0);
  border: 1px solid var(--background-color-application);
  border-radius: 5px;
  padding: 6px 10px;
  font-family: var(--btxt, sans-serif);
  font-size: 12px;
  margin: 5px;
  z-index: 2;
}

.button-action:hover {
  background-color: var(--background-color-application);
  color: var(--font-color-application);
}

.result-card {
  background-color: var(--background-color-card);
  color: var(--font-color-card);
  border-radius: 10px;
  border: 1px solid var(--clr-border-accent);
  box-shadow: var(--shadow-card);
  padding: 20px;
  width: calc(100% - 80px);
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  z-index: 5;
}

.result-card a {
  text-decoration: underline;
  cursor: pointer;
  color: var(--font-color-input);
}

.result-card h3 {
  color: var(--font-color-input-header);
}

.result-card h1 {
  color: var(--font-color-input-header);
  text-align: left;
}

.result-card h2 {
  color: var(--font-color-input-header);
  text-align: left;
}

.result-card h3 {
  color: var(--font-color-input-header);
  text-align: left;
}

.result-card h4 {
  color: var(--font-color-input-header);
  text-align: left;
}

.jodit-container {
  min-height: 800px;
}

/* Make the Jodit editor follow the active app theme (dark/light) instead of
   Jodit's fixed white surface. Jodit drives its surface via
   --jd-color-background-default on .jodit-workplace and leaves the editing
   text colour to inherit. We remap both to our semantic theme tokens.
   Scoped under .jodit-container (specificity 0,2,0) so these win over Jodit's
   single-class rules, whose stylesheet is loaded after webapp.css. */
.jodit.jodit-container:not(.jodit_inline) .jodit-workplace,
.jodit.jodit-container:not(.jodit_inline) .jodit-wysiwyg {
  background-color: var(--background-color-input);
  color: var(--font-color-input);
}

.jodit.jodit-container:not(.jodit_inline) .jodit-wysiwyg h1,
.jodit.jodit-container:not(.jodit_inline) .jodit-wysiwyg h2,
.jodit.jodit-container:not(.jodit_inline) .jodit-wysiwyg h3 {
  color: var(--font-color-input-header);
}

.result-card img {
  top: 0;
  left: 0;
}

.result-card-img {
  top: 0;
  left: 0;
  width: 100%
}

.result-card-border {
  border: 2px solid var(--editborder);
}

.tab-widget {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  
}

.tab {
  padding: 10px;
  cursor: pointer;
  background: var(--clr-surface-1);
  color: var(--clr-text-secondary);
  border-color: var(--clr-border);
  border: 1px solid var(--clr-border);
}

.tab.active {
  background: var(--clr-surface-3);
  color: var(--clr-text-primary);
  border-bottom-color: var(--clr-accent);
}

.tab:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text-primary);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid var(--editborder);

  padding: 8px;
  margin-bottom: 20px;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 300px);
}

.tab-content-request {
  display: none;
}

.tab-content-request.active {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--editborder);
  overflow-y: auto;
  overflow-x: hidden;

  padding: 8px;
  margin-bottom: 20px;
  justify-content: flex-start;
  
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 300px);
}

.tab-content-agent {
  display: none;
}

.tab-content-agent.active {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--editborder);

  padding: 8px;
  margin-bottom: 10px;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 300px);
}

.tab-content-organisation {
  display: none;
}

.tab-content-organisation.active {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--editborder);

  padding: 8px;
  margin-bottom: 5px;
  justify-content: flex-start;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 300px);
}

/* Inside a dialog the tab body uses a constant height instead of the
   full-page calc(100vh - 300px). This keeps the dialog one stable size
   while switching tabs (so it never resizes per tab), with each tab's
   content fitting inside the area and the tab's own overflow-y scrolling
   anything taller (e.g. the Persona tab). The calc keeps the area below
   Dialog.refreshState's clientHeight-360 content cap — minus the tab-nav
   row and this body's own padding/border/margin — so the dialog itself
   never grows a scrollbar; the px ceiling bounds it on very tall screens. */
.dialog .tab-content-organisation.active {
  height: min(760px, calc(100vh - 440px));
}

/* DialogProject — a MoleculeTabContainer nested inside the dialog. The tab
   container (#project-tabs) and each tab's inner input-card both carry the
   shared .input-container class (overflow-y:auto, max-height, flex-shrink:0).
   That, plus the fixed tab-body height (min(760px, calc(100vh-440px)) above)
   and the second .dialog .scrollable rule that re-enables overflow:auto,
   produced TWO–THREE scrollbars whose count changed with the dialog height
   (the three magic offsets — dialog 100vh-50, tab body 100vh-440, JS
   clientHeight-360 — never reconcile).

   Fix: a single, size-independent flex scroll chain. #project-tabs fills the
   .scrollable and is allowed to shrink (flex:1 1 auto + min-height:0), so it
   never overflows the .scrollable — that kills the outer scrollbar regardless
   of the .scrollable's own overflow setting. The active tab BODY flexes to
   fill whatever height remains and is the ONLY scroller (height:auto overrides
   the fixed-height rule above). The inner card just flows (overflow:visible),
   pushing its content into the tab body's scroll. Result: 0 scrollbars when
   the content fits, exactly 1 (the tab body) when it doesn't — at every size. */
#project-tabs.input-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

#project-tabs .tab-content-organisation.active {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

#project-tabs .tab-content-organisation.active > .input-container {
  flex-shrink: 0;
  max-height: none;
  overflow: visible;
}

.dropdown {
  position: relative;
  display: block;
  width: 20px;
  margin-right: 30px;
}

.navbar2 .dropdown {
  width: 100%;
  margin-right: 0;
}

.dropbtn {
  background-color: var(--background-color-application);
  color: var(--font-color-application);
  padding: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--btxt);
  border-radius: 5px;
  width: 40px;
}

.navbar2 .dropdown-content {
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--clr-text-secondary);
  background-color: var(--background-color-navigation);
  width: 100%;
  border: none;
  border-radius: 0;
  left: 0;
  padding: 0 0 6px 0;
}


.dropdown-content {
  display: none;
  position: fixed;
  flex-direction: column;
  background-color: var(--background-color-navigation);
  min-width: 200px;
  /*box-shadow: var(--box-shadow);*/
  z-index: 9999;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  max-height: 80vh;
  overflow-y: auto;
}

.navbar2 .dropdown-content .buttonrow:hover {
  color: var(--clr-text-secondary);
  display: flex;
  font-family: var(--txt);
  font-size: 12px;
  border-radius: 0;
  border-left-color: var(--clr-accent);
  border-left: 2px solid;
}

.navbar2 .dropdown-content a {
  color: var(--clr-text-secondary);
  padding: 7px 14px 7px 26px;
  text-decoration: none;
  display: flex;
  font-family: var(--txt);
  font-size: 12px;
  
  border-left: 2px solid transparent;
}

.dropdown-content a {
  color: var(--font-color-navigation);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: var(--txt);
}

.navbar2 .dropdown-content a:hover {
  background-color: var(--clr-surface-1);
  color: var(--clr-text-primary);
  cursor: pointer;
}

.dropdown-content a:hover {
  background: var(--background-color-navigation-hover);
  color: var(--clr-text-primary);
  cursor: pointer;
  border-radius: 6px;
}

/* needed for old pages like agent manager ...*/
.dropdown:hover .dropdown-content {
  display: block;
}

.settings-icon:hover .dropdown-content {
  display: block;
}
/*  */

.title-bar {
  width: 100%;
  height: 50px;
  background: var(--card-gradient);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--list-border);
  box-shadow: var(--shadow-subtle);
}

.logo {
  max-height: 30px;
  max-width: 160px;
  margin-top: 10px;
  align-self: center;
  object-fit: contain;
}

/* ── Chatbot service panel (right side of rail) ────────── */

.chatbot-service-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--clr-base);
  min-height: 0;
  height: calc(100vh - 50px);
  transition: width 0.2s ease, min-width 0.2s ease;
}

/* ── Panel collapse (triggered by nav rail toggle) ──────────── */
.chatbot-service.panel-collapsed {
  width: 60px;
}

.chatbot-service.panel-collapsed .chatbot-service-panel {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  overflow: hidden;
  padding: 0;
}

.nav-rail .rail-toggle .chip-collapse svg {
  transition: transform 0.2s ease;
}

.chatbot-service.panel-collapsed .nav-rail .rail-toggle .chip-collapse svg {
  transform: rotate(180deg);
}

.chatbot-service-panel::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.chatbot-service-panel > * {
  position: relative;
  z-index: 1;
}

/* ── Agent selector block inside the panel ───────────────────── */
.chatbot-service-panel .container-cockpit-agent {
  flex-direction: column;
  align-items: center;
  padding: 18px 12px 10px;
  gap: 10px;
  margin-top: 0;
  border-bottom: 1px solid rgba(var(--clr-white-rgb),0.05);
  width: calc(100% - 25px)
}

.chatbot-service-panel .cockpit-agent-image {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid rgba(var(--clr-white-rgb),0.10);
  box-shadow: 0 2px 12px rgba(var(--clr-black-rgb),0.35);
}

.chatbot-service-panel .cockpit-service-input {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  font-size: 12px;
  background: rgba(var(--clr-white-rgb),0.05);
  border: 1px solid rgba(var(--clr-white-rgb),0.10);
  border-radius: 8px;
  color: var(--clr-text-primary);
  padding: 6px 10px;
  cursor: pointer;
}

.chatbot-service-panel .cockpit-service-input:hover {
  border-color: rgba(var(--clr-accent-rgb),0.4);
  background: rgba(var(--clr-white-rgb),0.07);
}

.chatbot-service-panel .cockpit-service-input:focus {
  outline: none;
  border-color: rgba(var(--clr-accent-rgb),0.6);
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 8px 12px;
  background: rgba(var(--clr-accent-rgb),0.12);
  border: 1px solid rgba(var(--clr-accent-rgb),0.2);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-accent-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.new-chat-btn:hover {
  background: rgba(var(--clr-accent-rgb),0.2);
  border-color: rgba(var(--clr-accent-rgb),0.35);
  box-shadow: 0 0 16px rgba(var(--clr-accent-rgb),0.1);
}

.new-chat-btn .ncb-plus {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(var(--clr-accent-rgb),0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--clr-accent-soft);
  flex-shrink: 0;
}

.chatbot-service-panel .chat-history li.active,
.chatbot-service-panel .list-item.active {
  border-left: 2px solid var(--clr-accent);
  background: rgba(var(--clr-accent-rgb),0.07);
  color: var(--clr-accent-soft);
}

.chatbot-service .logo {
  margin-top: 20px;
  margin-left: 20px;
  max-height: 30px;
  max-width: 160px;
}

.settings-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  z-index: 100;
}

.menu-command {
  color: var(--clr-text-secondary);
  letter-spacing: 1px;
  background-color: rgba(var(--clr-black-rgb), 0);
  border: 1px solid var(--background-color-application);
  border-radius: 5px;
  padding: 6px 4px;
  font-family: Avenirltpro Black, sans-serif;
  font-size: 12px;
  width: 24px;
  height: 24px;
  display: inline-block; /* Display-Typ */
  margin-bottom: 5px;
  margin-right: 5px;
}

.menu-command:hover {
  cursor: pointer;
  filter: brightness(0.8);
}



.settings-icon:hover {
  cursor: pointer;
  filter: brightness(0.8);
}

.navbar2 .settings-icon:hover,
.chatbot-service .settings-icon:hover {
  filter: none;
}

.treeview-container {
  width: 500px;
  height: 60%;
  border: 1px solid var(--container-border);
  border-radius: 10px;
  box-shadow: var(--shadow-subtle);
  background: var(--clr-shell);
  overflow: visible;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.treeview-container li {
   color: var(--font-color-card);
}


.treeview-selection-container {
  width: 80%;
  max-height: 500px;
  margin: 0 auto;
  border: 1px solid var(--container-border);
  border-radius: 10px;
  box-shadow: var(--shadow-subtle);
  background: var(--clr-shell);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-clip-margin: 20px;
  padding: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* Eingeklappter Knoten */
.treeview-root li {
  list-style-type: none;
  cursor: pointer;
}

.treeview-root li::before {
  display: inline-block;
  margin-right: 5px;
}

.treeview-root li.expanded::before {
  content: "";
}

.treeview-root ul,
.treeview-root {
  list-style-image: url('../images/categories.svg');
}

.treeview-root li ul {
  padding-left: 15px;
}

/* Ausgeklappter Knoten */
.treeview-root li.expanded > ul {
  display: block;
}

.treeview-node-label {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.treeview-node-label:hover {
	background-color: rgba(var(--clr-accent-rgb), 0.12);
}

.treeview-root li.selected > .treeview-node-label {
	color: var(--clr-white);
	font-weight: 700;
	background-color: var(--clr-accent);
	box-shadow: 0 1px 3px rgba(var(--clr-accent-rgb), 0.35);
}

.treeview-root li.selected > .treeview-node-label:hover {
	background-color: var(--clr-accent);
}


.scrollable {
  width: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

.dialog .scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* In dialog context, disable ALL inner scrollbars — only parent .scrollable scrolls */
.dialog .container-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.dialog .container-tab-widget {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.dialog .container-tab-widget > * {
  overflow: hidden !important;
}

.dialog .molecule-list {
  overflow: hidden !important;
  flex: 1;
  min-height: 0;
}

.dialog .buttonrow {
  flex: 0 0 auto;
}

#aiassistent-image {
  position: fixed; /* or position: sticky; if you want it to stick within a container */
  bottom: 20px; /* Adjust the distance from the bottom as needed */
  right: 20px; /* Adjust the distance from the right as needed */
  z-index: 1; /* Ensure it's above other elements */
}

iframe {
  width: 480px;height: 100vh;
  height: 300px;
 }

#rating {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: var(--container-border);
  margin-left: 10px;
}

.star {
  cursor: pointer;
  font-size: 24px;
  color: var(--font-color-navigation);
}

.star.active,
.star:hover {
  color: var(--font-color-navigation-hover);
}

.chatbot-service {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 320px;
  transition: width 0.2s ease;
  height: calc(100vh - 50px);
  margin-top: 25px;
  background-color: var(--clr-shell);
  border-right: 1px solid var(--clr-border);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.chatbot-service .container-left-right-spacebetween .molecule {
  width: 20px;
}

.chatbot-service .molecule {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
    width: 100%;
}

/* ── Molecule base layout ─────────────────────────────────────── */

.molecule {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.molecule > label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-secondary);
    margin-bottom: 0;
}

.molecule > input,
.molecule > textarea,
.molecule > select {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────── */

.molecule-list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}

.chatbot-input {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: calc(100% - 100px);
  margin-left: 40px;
  margin-right: 50px;
  margin-bottom: 30px;
  border-radius: 16px;
  height: 100px;
  max-height: 180px;
  border: 1px solid var(--clr-border);
  color: var(--font-color-input);
  padding: 10px;
  position: relative;
}

.chatbot-input--focused {
  border: 1.5px solid var(--clr-accent);
  box-shadow:
    0 0 0 3px rgba(var(--clr-accent-rgb), 0.15),
    0 0 20px rgba(var(--clr-accent-rgb), 0.1);
}

.chatbot-input--streaming {
  opacity: 0.72;
}

.chatbot-input--streaming textarea {
  pointer-events: none;
  cursor: not-allowed;
}

.chatbot-input-bg {
  background-color: var(--background-color-input);
}

.chatbot-inputfield {
  width: 100%;
  font-size: 14px;
  margin-bottom: 0px;
  border-bottom: 0px;
  border-radius: 6px;
  padding: 8px 0px;
  border: 0px;
  resize: none;
  min-height: 40px;
  box-sizing: border-box;
  color: var(--font-color-input);
}

.chatbot-inputfield .drag-over {
  background-color: color-mix(in srgb, var(--clr-accent) 15%, var(--clr-surface-1));
  outline: 2px dashed var(--clr-accent);
  outline-offset: -2px;
  color: var(--font-color-application);
}

.chatbot-inputfield:focus {
  outline: none;
}

.chatbot-inputfield::placeholder {
  color: var(--clr-text-muted);
}

.chatbot-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  width: 100%;
}

.chatbot-button {
  border: 1px solid var(--clr-border);
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chatbot-button:hover {
  cursor: pointer;
  background: rgba(var(--clr-accent-rgb), 0.08);
  border-color: rgba(var(--clr-accent-rgb), 0.3);
}

.chatbot-button-deactivated {
  border: 1px solid var(--clr-border);
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0.45;
}

.chatbot-button-deactivated:hover {
  cursor: help;
}

.chatbot-button-send {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-btn));
  border-radius: 7px;
  border: none;
  box-shadow: 0 2px 8px rgba(var(--clr-accent-rgb), 0.35);
  transition: box-shadow 0.2s ease;
}

.chatbot-input--focused .chatbot-button-send {
  box-shadow: 0 2px 14px rgba(var(--clr-accent-rgb), 0.55);
}

.chatbot-button-send:hover {
  cursor: pointer;
  background: linear-gradient(135deg, var(--clr-accent-btn), var(--clr-accent-btn-hover));
}

.chatbot-service label {
  color: var(--clr-text-secondary);
  margin-left: 0px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.chatbot-service li {
  color: var(--font-color-application);
  cursor: pointer;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 5px;
  font-size: smaller;
  list-style-type: none;
  color: var(--font-color-navigation);
}

.chatbot-service li:hover {
  background: transparent;
  color: var(--clr-text-primary);
}

/*
.chatbot-service .tooltip {
  color: var(--font-color-application);
}
  */

.chatbot-service #settings {
  margin-bottom: 20px;
}

.chatbot-service .dropdown {
  width: auto;
}

.chatbot-service .container-left-right {
  cursor: pointer;
  padding: 8px 14px;
  border-left: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
}

.chatbot-service .container-left-right:hover {
  background-color: var(--clr-surface-1);
  border-left-color: var(--clr-accent);
}

.chatbot-service .container-left-right:hover p {
  color: var(--clr-text-primary);
}

.chatbot-service .container-left-right:hover .settings-icon {
  opacity: 0.9;
}

.chatbot-service .container-left-right-spacebetween {
  width: 100%;
  margin-left: 0;
  padding: 0 0;
  box-sizing: border-box;
  border-left: 2px solid transparent;
  border-radius: 4px;
}

.chatbot-service .container-left-right-spacebetween:hover {
  background-color: var(--clr-surface-1);
  border-left-color: var(--clr-accent);
  cursor: pointer;
}

.chatbot-service .container-left-right-spacebetween:hover li {
  color: var(--clr-text-primary);
}

.chatbot-service hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 6px 14px;
  width: calc(100% - 28px);
}

.chatbot-service .container-tab {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
}

/* ── Panel flex chain: ensure every level gives height to children ── */
.chatbot-service-panel .container-cockpit-agent {
  flex-shrink: 0;
}

.chatbot-service-panel .new-chat-btn {
  flex-shrink: 0;
}

.chatbot-service-panel .container-tab-navigation {
  flex-shrink: 0;
  margin-top: 10px;
}

/* ── History tab: uniform left alignment ─────────────────────── */
.chatbot-service-panel .container-tab-widget {
  padding: 8px 12px 0;
  box-sizing: border-box;
  /* Allow the tab body to scroll vertically when it is taller than the panel
     (e.g. the Einstellungen tab on short screens, whose action buttons —
     Bearbeiten / Wissensdatenbank / Projekt löschen — would otherwise be
     clipped and unreachable). The Chat-Historie tab keeps its inner
     .molecule-list scroll; that list fills the available height via
     flex:1/min-height:0, so no second scrollbar appears here. */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-height: none;
  gap: 10px;
}

.chatbot-service-panel .container-tab-widget .modelinfo {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  margin: 0 0 6px;
}

.chatbot-service-panel #chat-search {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}

.chatbot-service-panel .molecule-list {
  padding: 0;
  margin: 4px 0 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.chatbot-service-panel .molecule-list li,
.chatbot-service-panel .molecule-list .list-item {
  padding-left: 6px;
  box-sizing: border-box;
}

#menubuttons {
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

#menubuttons .container-left-right {
  width: auto;
  padding: 8px;
  border-left: none;
  border-radius: 5px;
}

#menubuttons .container-left-right:hover {
  border-left: none;
  border-radius: 5px;
}


.dropdown-content-small {
  display: none;
  flex-direction: column;
  position: absolute;
  background-color: var(--background-color-navigation);
  color: var(--font-color-navigation);
  min-width: 100px;
  box-shadow: var(--box-shadow);
  z-index: 999;
  border-radius: 5px;
  left: -80px
}

.dropdown-content-small a {
  color: var(--clr-text-secondary);
  padding: 6px 8px;
  text-decoration: none;
  display: block;
  font-family: var(--txt);
  background-color: var(--background-color-navigation);
  font-size: 10px;
  border-radius: 5px;
}

.dropdown-content-small a:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text-primary);
  cursor: pointer;
  border-radius: 5px;
}

.rating {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  height: 25px;
}

.chatbot-service .checkbox-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* ── Details tab redesign ────────────────────────────────────── */

/* Uniform vertical rhythm */
#details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

/* Section header */
#details .modelinfo {
  margin: 6px 0 2px;
}

/* Field labels: small muted caps, extra top space to group with select below */
#details label:not(.modelinfo) {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--clr-text-muted);
  margin: 10px 0 0;
}

/* Collapse the gap between label and its select */
#details label:not(.modelinfo) + .cockpit-service-input {
  margin-top: -2px;
}

/* Full-width selects */
#details .cockpit-service-input {
  width: 100%;
  box-sizing: border-box;
}

/* Checkbox rows — styled as clean toggle rows, same height as selects */
#details .molecule {
  margin: 0;
}

#details .checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(var(--clr-white-rgb),0.03);
  border: 1px solid rgba(var(--clr-white-rgb),0.05);
  margin-bottom: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#details .checkbox-container:hover {
  background: rgba(var(--clr-white-rgb),0.06);
  border-color: rgba(var(--clr-accent-rgb),0.2);
}

#details .checkbox-container label {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-text-secondary);
  margin: 0;
  cursor: pointer;
}

/* Rating section — two-line card: label top, stars below */
#details .container-left-right-top-aligned {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--clr-white-rgb),0.03);
  border: 1px solid rgba(var(--clr-white-rgb),0.05);
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: calc(100% - 22px);
}

#details .container-left-right-top-aligned .modelinfo {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--clr-text-muted);
  margin: 0;
}

/* Token usage — same card style, sits at bottom */
#details #tokenusage {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(var(--clr-white-rgb),0.03);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-text-muted);
  border: 1px solid rgba(var(--clr-white-rgb),0.05);
  margin: 0;
}

/* Light theme overrides for details tab */
[data-theme="light"] #details .checkbox-container {
  background: rgba(var(--clr-black-rgb),0.03);
  border-color: rgba(var(--clr-black-rgb),0.08);
}

[data-theme="light"] #details .checkbox-container:hover {
  background: rgba(var(--clr-accent-rgb),0.06);
  border-color: rgba(var(--clr-accent-rgb),0.25);
}

[data-theme="light"] #details .checkbox-container label {
  color: var(--clr-surface-5);
}

[data-theme="light"] #details .container-left-right-top-aligned {
  background: rgba(var(--clr-black-rgb),0.03);
  border-color: rgba(var(--clr-black-rgb),0.08);
}

[data-theme="light"] #details #tokenusage {
  background: rgba(var(--clr-black-rgb),0.03);
  border-color: rgba(var(--clr-black-rgb),0.08);
  color: var(--clr-text-slate);
}

/* Project Einstellungen tab — centre the unified action-button row
   (Bearbeiten / Wissensdatenbank / Chatverlauf in Wissensdatenbank
   speichern / Chatverlauf als Word exportieren / Projekt löschen).
   The inherited `.chatbot-service .container-left-right` rule adds
   padding + cursor:pointer that don't apply here, and at the panel's
   ~260px width the five 30px icons can't fit on one line — so we drop
   the inherited padding/cursor, allow wrap, and centre on both axes. */
#settings-buttons {
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 6px;
  padding: 0;
  cursor: default;
}

#settings-buttons .button-icon {
  margin-right: 0;
}

/* Primary action button inside the details tab — rendered as AtomButton with
   icon + title. Uses the title attribute to surface the label visually so the
   button carries the same card aesthetic as the rows above it. */
#details .details-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-top: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb),0.20), rgba(var(--clr-accent-rgb),0.10));
  border: 1px solid rgba(var(--clr-accent-rgb),0.35);
  color: var(--clr-text-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

#details .details-action-button::after {
  content: attr(title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#details .details-action-button img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#details .details-action-button:hover {
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb),0.30), rgba(var(--clr-accent-rgb),0.16));
  border-color: rgba(var(--clr-accent-rgb),0.55);
}

#details .details-action-button:active {
  transform: translateY(1px);
}

[data-theme="light"] #details .details-action-button {
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb),0.10), rgba(var(--clr-accent-rgb),0.05));
  border-color: rgba(var(--clr-accent-rgb),0.35);
  color: var(--clr-accent-btn-hover);
}

[data-theme="light"] #details .details-action-button:hover {
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb),0.18), rgba(var(--clr-accent-rgb),0.10));
  border-color: rgba(var(--clr-accent-rgb),0.55);
}

.chatbot-service .button-container {
  margin-left: 0px;
}

.message .user-message .button-container {
  align-content: center;
  width: 100%;
  margin-bottom: 0px;
  height: 20px;
}

.bot-message h1 {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.2;
}

.bot-message h2 {
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.1;
}

.bot-message h3 {
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.0;
}

.bot-message h4 {
  text-align: left;
}

.bot-message .button-container {
  align-items: center;
  width: 100%;
  margin-bottom: 0px;
  height: 20px;
}

.chatbot-service .vertical-button-container {
  margin-left: 0;
  width: 100%;
  padding: 0 0 6px;
  flex: 0 0 auto;
}

.chatbot-info-image {
  height: 16px;
  width: 16px;
  margin-right: 10px;
}

.visibilityButton-container {
  display: none !important;
}

.visibilityButton img {
  padding-top: 2px;
}

.visibilityButton {
  height: 40px;
  width: 40px;
  background-color: var(--background-color-navigation);
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  margin-bottom: 10px;
  border: 0px;
}

.visibilityButton:hover {
  background-color: var(--background-color-navigation-hover);
  cursor: pointer;
  border-radius: 6px;
}

.list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto; 
  overflow-x: hidden; 
  padding-top: 10px; 
  padding-bottom: 10px; 
    
  width: 100%;
  
  margin-left: 2px;
  margin-bottom: 20px;
  margin-top: 10px;
}

#service-history {
  display: flex;
  flex-direction: column;
  
  flex: 1;
  overflow-y: auto; 
  padding-top: 10px; 
  padding-bottom: 10px; 
    
  width: 100%;
  
  margin-left: 0px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.scrollable-list {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%;
    flex: 1;
    color: var(--font-color-navigation);
}
.modelinfo {
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
}

.scrollable-list li {
    padding: 5px; 
    /*border-bottom: 1px solid var(--container-border); /**/
    color : var(--font-color-application);
    cursor: pointer; 
}

.scrollable-list .container-left-right-spacebetween li:hover {
    background-color: var(--background-color-navigation-hover);
    color: var(--clr-text-secondary);
    border-radius: 5px;
}

@media screen and (max-width: 1024px) {
  nav {
    width: 100%;
    margin-top: -5px;
  }

  nav li {
    display: block;
    background: var(--clr-shell);
    text-align: center;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  .navbar2 img {
    padding: 25px;
  }

  

  .navbar-commands {
    justify-content: flex-end;
  }

  .resultrating-container {
    display: none;
  }

  h3#orginfo {
    display: none;
  }
  h3#agentinfo {
    display: none;
  }
  h3#containerinfo {
    display: none;
  }

  .welcome-container {
    display: none;
  }

  #aiassistent-image {
    display: none;
  }

  #container {
    justify-content: center; 
  }

  
  .chat-container {
    position: absolute;
    top: 50px; /* Height of the navbar2 */
    
  }

  .aiservice-container {
    position: absolute;
    top: 50px; /* Height of the navbar2 */
    left: 20px;
    width: calc(100% - 40px);
  }

  .aiservice-execution-container {
    position: absolute;
    top: 50px; /* Height of the navbar2 */
    left: 20px;
    width: calc(100% - 20px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .card-container {
    padding-left: 20px;
  }

  .result-card {
    margin-left: 20px;
  }

  .input-container {
    width: calc(100% - 80px);
    margin-left: 60px;
  }

  /*
  .list-container {
    height: 150px;
    max-height: 150px;
  }
    */

  textarea {
    min-height: 50px
  }

  .chatbot-service {
    z-index: 100;
    width: 260px;
    min-width: 260px;
  }

  .chatbot-service.panel-collapsed {
    min-width: 60px;
  }

  .list-container {
    min-width: 180px;
  }

  .button-container {
    margin-top: 5px;
    height: 25px;
  }

  .chatbot-button {
    padding-left: 10px;
  }
  .chatbot-input {
    height: 100px;
    width: calc(100% - 100px);
    margin-left: 60px;
    margin-bottom: 75px;
  }

  .upload-container {
    height: 24px;
  }

  .upload-container label {
    margin-top: 10px;
  }

  #cockpit-input-lastDays {
    width: 140px;
  }

  .visibilityButton-container {
    z-index: 100;
    height: calc(100vh - 50px);
  }

  .container-chat-buttons {
    width: 100%;
    margin-bottom: 10px;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    justify-content: start;
  }

  .chat-input-container {
    width: 100%;
    height: 150px;
    max-height: 150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
  }

  #user-input {
    margin-right: -5px; 
  }

  .cockpit-service-input {
    width: 160px;
    font-size: 11px;
    height: 40px;
    margin-top: 10px;
    margin-left: 20px;
  }

  #ratingContainer {
    height: 20px;
  }

  #rating {
    display: none;
  }

  #rating_label {
    display: none;
  }

  .chatbot-avatar-container {
    display: none;
  }


  .bot-message {
    margin-left: 0px;
    width: 100%;
  }

  /* Timeline: Tablet */
  .msg-bot-avatar,
  .msg-greeting-avatar,
  .msg-user-avatar {
    display: none;
  }

  .msg-user-content {
    max-width: 90%;
  }

  .msg-meta-chip:nth-child(n+3) {
    display: none;
  }
}


#historyTable td:first-child, #historyTable th:first-child {
  display: none;
}

#serviceTable td:first-child, #serviceTable th:first-child {
  display: none;
}

#document-table td:first-child, #document-table th:first-child {
  display: none;
}

.youtube-card {
  width: 300px;
  height: 220px;
}

.youtube-card-info {
  width: 300px;
  
}

iframe {
  width: 300px;
  height: 180px;
}


/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE BASE SEARCH PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Info paragraph ── */
#info {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  border-left: 3px solid var(--clr-border-accent);
  padding-left: 12px;
  margin: 4px 0 18px;
}

/* ── Search panel ── */
#search-input-container {
  position: relative;
  background: var(--card-gradient);
  border: 1px solid var(--clr-border-accent);
  border-radius: 16px;
  padding: 20px 20px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s, box-shadow 0.25s;
}

#search-input-container:focus-within {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb), 0.12), var(--shadow-card);
}

#request {
  width: 100%;
  min-height: 90px;
  height: 90px;
  resize: vertical;
  font-size: 0.92rem;
  line-height: 1.65;
  border-radius: 10px;
  border: 1px solid var(--clr-border);
  background: var(--clr-shell);
  color: var(--clr-text-primary);
  padding: 12px 14px;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: border-color 0.2s;
  letter-spacing: 0.01em;
}

#request:focus {
  border-color: var(--clr-accent);
  box-shadow: none;
  outline: none;
}

#request::placeholder {
  color: var(--clr-text-muted);
  font-style: italic;
}

/* ── Checkbox row inside search panel ── */
#search-input-container .checkbox-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#search-input-container label {
  font-size: 0.78rem;
  color: var(--clr-text-secondary);
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* ── Button row ── */
#search-button-container {
  margin-bottom: 10px;
}

/* ── Result count badge ── */
#chunkcount {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  padding: 3px 12px;
  margin: 2px 0 18px;
}

/* ── Results area ── */
#results-container {
  padding-top: 6px;
}

#results-container > h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: left;
  margin: 10px 0 20px;
  color: var(--clr-text-primary);
  position: relative;
  padding-bottom: 12px;
}

#results-container > h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--clr-accent);
  border-radius: 2px;
}

#results-container > h3 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--clr-accent);
  margin: 24px 0 10px;
  opacity: 0.85;
}

/* ── Found-documents file-list card ── */
#results-container .result-card:not([id^="result-card-"]) {
  padding: 16px 20px;
  border-left: 3px solid var(--clr-border-accent);
  background: var(--card-gradient);
}

#results-container .result-card:not([id^="result-card-"]) ol {
  list-style: none;
  counter-reset: doc-item;
  padding: 0;
  margin: 0;
}

#results-container .result-card:not([id^="result-card-"]) ol li {
  counter-increment: doc-item;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
  font-size: 0.85rem;
  color: var(--clr-text-secondary);
  margin-bottom: 2px;
  line-height: 1.5;
}

#results-container .result-card:not([id^="result-card-"]) ol li::before {
  content: counter(doc-item);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--clr-accent);
  color: var(--clr-white);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0;
}

#results-container .result-card:not([id^="result-card-"]) ol li:hover {
  background: rgba(var(--clr-accent-rgb), 0.07);
}

#results-container .result-card:not([id^="result-card-"]) ol li a {
  color: var(--clr-accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

#results-container .result-card:not([id^="result-card-"]) ol li a:hover {
  border-bottom-color: var(--clr-accent);
}

/* ── Chunk result cards ── */
#results-container .result-card[id^="result-card-"] {
  border-left: 3px solid var(--clr-accent);
  background: var(--card-gradient);
  padding: 18px 22px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: visible;
  transition: box-shadow 0.2s, border-left-color 0.2s;
  animation: searchCardEnter 0.3s ease both;
  width: calc(100% - 48px);
}

#results-container .result-card[id^="result-card-"]:hover {
  box-shadow: 0 6px 28px rgba(var(--clr-accent-rgb), 0.15), var(--shadow-card);
}

@keyframes searchCardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#results-container .result-card[id^="result-card-"] h4 {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--clr-text-primary);
  margin: 0 0 10px;
  line-height: 1.4;
}

#results-container .result-card[id^="result-card-"] > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--clr-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}

#results-container .result-card[id^="result-card-"] > a:hover {
  border-bottom-color: var(--clr-accent);
}

/* ── Chunk content textarea ── */
#results-container textarea[id^="resultDisplay-"] {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.5;
  color: var(--clr-text-secondary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  margin-top: 3px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  cursor: text;
}

/* ── Score badge ── */
#results-container p[id^="score-"] {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--clr-accent-rgb), 0.1);
  border: 1px solid rgba(var(--clr-accent-rgb), 0.25);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--clr-accent);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}

#results-container p[id^="score-"] strong {
  font-weight: 600;
  color: inherit;
}

/* ── Light theme adjustments ── */
[data-theme="light"] #search-input-container {
  box-shadow: 0 2px 12px rgba(var(--clr-indigo-rgb), 0.1);
}

[data-theme="light"] #results-container p[id^="score-"] {
  background: rgba(var(--clr-accent-rgb), 0.08);
  border-color: rgba(var(--clr-accent-rgb), 0.22);
  color: var(--clr-accent);
}

[data-theme="light"] #results-container .result-card:not([id^="result-card-"]) ol li a {
  color: var(--clr-accent);
}

/* ── Multi-select ───────────────────────────────────────────────────────────── */

.multiselect select {
  min-height: 140px;
}

/* ── Container multi-select (checkbox list) ─────────────────────────────────── */

.container-multiselect {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--editborder);
  border-radius: 4px;
  background: var(--background-color-input);
}

.container-multiselect.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.container-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.container-multiselect-item:hover {
  background: color-mix(in srgb, var(--clr-accent) 8%, transparent);
}

.container-multiselect-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.container-multiselect-label {
  flex: 1;
  color: var(--font-color-application);
}

.container-multiselect-empty {
  color: var(--font-color-secondary, #888);
  font-style: italic;
  padding: 4px 0;
}

/* ── AI-Service Mehrfachauswahl (MoleculeOptionMultiSelect) ─────────────────── */
.option-multiselect {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--editborder);
  border-radius: 4px;
  background: var(--background-color-input);
}

.option-multiselect.input-error {
  border-color: red;
}

.option-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.option-multiselect-item:hover {
  background: color-mix(in srgb, var(--clr-accent) 8%, transparent);
}

.option-multiselect-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.option-multiselect-label {
  flex: 1;
  color: var(--font-color-application);
}

/* ── LLM Provider Selector ─────────────────────────────────────────────────── */

.llm-selector {
  position: relative;
  width: 100%;
}

.llm-selector-hidden-select {
  display: none;
}

.llm-selector-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--background-color-input);
  border: 1px solid var(--editborder);
  border-radius: 4px;
  cursor: pointer;
  min-height: 42px;
  transition: border-color 0.15s;
  user-select: none;
}

.llm-selector-selected:hover {
  border-color: var(--clr-accent);
}

.llm-selector.open .llm-selector-selected {
  border-color: var(--clr-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.llm-selector-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--background-color-card);
  border: 1px solid var(--clr-accent);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(var(--clr-black-rgb), 0.45);
}

.llm-selector-dropdown.open-up {
  top: auto;
  bottom: 100%;
  border-top: 1px solid var(--clr-accent);
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.llm-selector-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
  transition: background 0.12s;
}

.llm-selector-item:last-child {
  border-bottom: none;
}

.llm-selector-item:hover {
  background: var(--clr-surface-2);
}

.llm-selector-item.selected {
  background: var(--clr-surface-3);
}

.llm-gdpr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.llm-gdpr-badge.compliant {
  background: rgba(var(--clr-success-rgb), 0.12);
  color: var(--clr-success);
  border: 1px solid rgba(var(--clr-success-rgb), 0.28);
}

.llm-gdpr-badge.conditional {
  background: rgba(var(--clr-warning-rgb), 0.12);
  color: var(--clr-warning);
  border: 1px solid rgba(var(--clr-warning-rgb), 0.28);
}

.llm-gdpr-badge.non-compliant {
  background: rgba(var(--clr-danger-rgb), 0.12);
  color: var(--clr-danger);
  border: 1px solid rgba(var(--clr-danger-rgb), 0.28);
}

.llm-model-info {
  flex: 1;
  min-width: 0;
}

.llm-model-name {
  font-size: 13px;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-token-factor {
  font-size: 12px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.llm-selector-arrow {
  margin-left: auto;
  color: var(--clr-text-secondary);
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.18s;
}

.llm-selector.open .llm-selector-arrow {
  transform: rotate(180deg);
}

.llm-selector-placeholder {
  color: var(--clr-text-muted);
  font-style: italic;
  font-size: 13px;
}

/* Compact three-row layout for narrow containers (project sidebar, dialogs).
   Stacks provider name → model name → meta (DSGVO badge + Faktor) so the
   full label stays readable when the host is too narrow for the default
   single-row layout. The row grows in height to accommodate the stack. */
.llm-selector.compact .llm-selector-selected,
.llm-selector.compact .llm-selector-item {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  min-height: 0;
}

.llm-selector.compact .llm-model-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.llm-selector.compact .llm-model-provider {
  font-size: 11px;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.llm-selector.compact .llm-model-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  font-weight: 500;
  word-break: break-word;
}

.llm-selector.compact .llm-model-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.llm-selector.compact .llm-token-factor {
  font-size: 11px;
}

.llm-selector.compact .llm-selector-arrow {
  align-self: center;
}

/* ═══════════════════════════════════════════════════
   Agent Page Redesign — config cards, status banners
   ═══════════════════════════════════════════════════ */

/* ── Card grid wrapper inside a tab ── */
/* auto-fit + minmax keeps two columns side-by-side on a wide tab and collapses
   to a single column once a card would shrink below 360px — prevents card-internal
   overflow (e.g. button rows being clipped) at narrow viewport widths. */
.tab-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.tab-cards-grid.dimmed > .config-card {
  opacity: 0.35;
  pointer-events: none;
}
.tab-cards-grid > .config-card:only-child {
  grid-column: 1 / -1;
}

/* Agent page: cap all tab card grids at 2 cards per row regardless of
   viewport width. Other pages (e.g. register-wizard) keep the auto-fit
   behaviour from the base rule above. */
#agenttabs .tab-cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  #agenttabs .tab-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* HTTP-Service editor: cap the advanced section (Header, Parameter, Env,
   Pagination, Token-Source) at 2 cards per row so the cards stay readable.
   Stacks to a single column on narrow viewports. */
#httpeditor-adv-section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  #httpeditor-adv-section {
    grid-template-columns: 1fr;
  }
}

/* ── EditAiService page: compact description textarea ── */
#aiservice-description {
  height: 80px;
  min-height: 80px;
  max-height: 80px;
  resize: none;
}

/* ── EditAiService page: compact dropzone inside config card ── */
#aiservice-image-dropzone-mol-container .upload-dropzone {
  padding: 12px 16px;
  gap: 6px;
}
#aiservice-image-dropzone-mol-container .upload-dropzone-icon {
  width: 28px;
  height: 28px;
}
#aiservice-image-dropzone-mol-container .upload-dropzone h4 {
  font-size: 0.85rem;
}
#aiservice-image-dropzone-mol-container .upload-dropzone p {
  font-size: 0.75rem;
}

/* ── EditAiService page: viewport-bounded card layout ── */
#aiservice-outer-container {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
#aiservice-card-grid {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  margin-bottom: 0;
}
#aiservice-card-grid > .config-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
#aiservice-card-grid > .config-card .config-card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#aiservice-treeview-container {
  flex: 1;
  min-height: 0;
}
/* Table wrapper fills available card-body space and scrolls internally.
   Overrides .input-container's flex-shrink:0 and its large max-height. */
#aiservice-parameter-table-wrapper {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#aiservice-parameter-table-wrapper > .molecule-table-wrap {
  flex-shrink: 0;
  margin-top: 0;
}

/* ── Config section card ── */
.config-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.config-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.config-card:hover {
  border-color: var(--clr-border-accent);
}
.config-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.config-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(var(--clr-accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.config-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-accent);
}
/* Buttons inside a config card may wrap to a second row instead of being clipped
   when the card is narrow (mobile, two-column tab grid). The global 30px height
   on .button-container is overridden here because two-row content needs to grow. */
.config-card .button-container {
  flex-wrap: wrap;
  height: auto;
  min-height: 30px;
  row-gap: 6px;
}

/* ── Multi-select checkbox list (MoleculeLabelSelection multi-select mode) ── */
.molecule-label-selection-checkboxes {
  max-height: 16em;
  min-height: 8em;
  overflow-y: auto;
  padding: 0.4em 0.6em;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-surface-1);
  color: var(--clr-text-primary);
}
.molecule-label-selection-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0;
  cursor: pointer;
  color: var(--clr-text-primary);
}

/* ── Tools tab: model-capability warning (only shown when the selected chat
   model can't run tools — see AgentPage.refreshModelWarning) ── */
.tools-model-warning {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--clr-warning-rgb), 0.5);
  border-left: 3px solid var(--clr-warning);
  border-radius: 8px;
  background: rgba(var(--clr-warning-rgb), 0.12);
  color: var(--clr-text-primary);
  font-size: 13px;
  line-height: 1.4;
}

/* ── Status banner ── */
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border: 1px solid var(--clr-border-accent);
  border-radius: 8px;
  margin-bottom: 16px;
}
.status-banner.inactive {
  border-color: var(--clr-border);
  opacity: 0.85;
}
.status-banner-text strong {
  display: block;
  font-size: 14px;
  color: var(--clr-text-primary);
}
.status-banner-subtitle {
  display: block;
  font-size: 12px;
  color: var(--clr-text-secondary);
  margin-top: 2px;
}
.status-banner-subtitle.on {
  color: var(--clr-success);
}
.status-banner input[type="checkbox"] {
  display: none;
}
.status-banner-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Toggle switch ── */
.toggle-track {
  position: relative;
  width: 38px;
  height: 20px;
  background: var(--clr-surface-3);
  border-radius: 10px;
  border: 1px solid var(--clr-border-accent);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-track.on {
  background: var(--clr-accent-btn);
  border-color: var(--clr-accent);
}
.toggle-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clr-text-muted);
  top: 2px;
  left: 2px;
  transition: left 0.2s, background 0.2s;
}
.toggle-track.on .toggle-thumb {
  left: 20px;
  background: var(--clr-white);
}

/* ── Status dot on tab label ── */
.status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.status-dot.on {
  background: var(--clr-success);
  box-shadow: 0 0 5px rgba(var(--clr-success-rgb), 0.6);
}
.status-dot.feedback {
  background: var(--clr-danger);
  box-shadow: 0 0 6px rgba(var(--clr-danger-rgb), 0.7);
}

/* ── Password field (input + toggle + copy buttons inline) ── */
.password-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.password-field input {
  flex: 1;
  min-width: 0;
}
.password-field .button {
  flex-shrink: 0;
  padding: 6px;
  width: 32px;
  height: 32px;
}
input.password-masked {
  -webkit-text-security: disc;
  text-security: disc;
}

/* ── Advanced settings toggle row ── */
.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--clr-border-accent);
  border-radius: 8px;
  color: var(--clr-accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  background: rgba(var(--clr-accent-rgb), 0.04);
  user-select: none;
  margin-bottom: 10px;
}
.advanced-toggle:hover {
  background: rgba(var(--clr-accent-rgb), 0.09);
}

/* ── Entity detail view ─────────────────────────────────────────────────── */

#entity-section {
  align-items: center;
}

#entity-section .card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

#entity-section .card-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Entities overview (card grid) ──────────────────────────────────────── */

#card-container-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  justify-content: start;
  gap: 20px;
  padding: 10px;
}

/* ── Relationship Card ──────────────────────────────────────────────────── */

.relationship-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.relationship-section-header div:first-child {
  font-weight: 700;
  color: var(--clr-text-primary);
  font-size: 16px;
}

.relationship-count-badge,
.keyword-chip {
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border-accent);
  border-radius: 20px;
  padding: 2px 10px;
  color: var(--clr-text-secondary);
  font-size: 10px;
}

.similarity-chip-row {
  display: flex;
  margin: 6px 0;
}

.similarity-chip {
  display: inline-block;
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-accent);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--clr-accent);
  font-size: 12px;
  font-weight: 600;
}

.relationship-entity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  width: 100%;
}

.relationship-entity-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.relationship-entity-label-e1 {
  color: var(--clr-accent);
}

.relationship-entity-label-e2 {
  color: var(--clr-indigo);
}

.relationship-entity-name-e1 {
  display: block;
  color: var(--clr-text-primary);
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  text-decoration: none;
  border-bottom: 1px solid var(--clr-accent);
  cursor: pointer;
}

.relationship-entity-name-e2 {
  display: block;
  color: var(--clr-text-primary);
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  text-decoration: none;
  border-bottom: 1px solid var(--clr-indigo);
  cursor: pointer;
  text-align: right;
}

.relationship-entity-description {
  color: var(--clr-text-secondary);
  font-size: 10px;
  margin-top: 2px;
  margin-bottom: 6px;
}

.relationship-entity-panel-right {
  text-align: right;
}

.relationship-connector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--clr-base);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.relationship-type-badge {
  background: var(--clr-accent-btn);
  color: var(--clr-white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.relationship-dashed-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--clr-accent) 0,
    var(--clr-accent) 5px,
    transparent 5px,
    transparent 10px
  );
}

.relationship-score {
  color: var(--clr-success);
  font-size: 11px;
  font-weight: 700;
}

.relationship-meta-label {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--clr-border);
  width: 100%;
}

.relationship-meta-label-text {
  color: var(--clr-text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.relationship-description {
  color: var(--clr-text-secondary);
  font-size: 11px;
  line-height: 1.6;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}

.relationship-keywords-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.relationship-chunk-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 10px;
}

.relationship-chunk-item {
  background: var(--clr-base);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 8px 10px;
}

.relationship-chunk-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
}

.relationship-chunk-excerpt {
  color: var(--clr-text-secondary);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 3px;
  display: block;
  white-space: pre-wrap;
}

.toggle-btn {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-accent);
  border-radius: 6px;
  padding: 3px 10px;
  color: var(--clr-text-secondary);
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}

.toggle-btn:hover {
  border-color: var(--clr-accent);
  color: var(--clr-text-primary);
}

.toggle-btn-expanded-e1 {
  border-color: var(--clr-accent);
  color: var(--clr-text-primary);
}

.toggle-btn-expanded-e2 {
  border-color: var(--clr-indigo);
  color: var(--clr-text-primary);
}

/* ── FunctionServiceEditor: code tab fills full tab height ── */
#functioneditor-tab-code {
  overflow: hidden;
}
#functioneditor-tab-code .config-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
#functioneditor-tab-code .config-card-body {
  flex: 1;
  min-height: 0;
}
#functioneditor-tab-code .editor {
  flex: 1;
  min-height: 0;
}
#functioneditor-tab-code .editor > div {
  height: 100%;
}

/* ── McpPage: Resources card spans full grid width ── */
#mcp-capabilities-grid .mcp-resources-card-full {
  grid-column: 1 / -1;
}

.mcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--clr-surface-3);
  color: var(--clr-accent);
  border: 1px solid var(--clr-border-accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Marketplace Details Page ── */

.mp-hero {
  width: calc(100% - 60px);
  background: var(--card-gradient);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  margin-right: 20px;
  border: 1px solid var(--editborder);
  box-shadow: var(--shadow-card);
}

.mp-hero-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mp-hero-image {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.mp-hero-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-hero-content h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--font-color-input-header);
}

.mp-hero-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: var(--clr-text-secondary);
}

.mp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.mp-hero-description {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--editborder);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--font-color-application);
}

.mp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
}

.mp-badge--blue   { background: var(--clr-accent-btn); color: var(--clr-accent-softer); }
.mp-badge--violet { background: var(--clr-violet-deep); color: var(--clr-violet-softer); }
.mp-badge--green  { background: var(--clr-success-darker); color: var(--clr-success-softer); }

/* Status-Chip für Listenzeilen (z. B. Projekt-Freigabe in den Service-Listen) */
.list-access-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--clr-success-darker);
  color: var(--clr-success-softer);
  white-space: nowrap;
}

/* Tab strip */
.mp-tab-strip {
  width: calc(100% - 10px);
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.mp-tab-btn {
  background: var(--background-color-card);
  color: var(--clr-text-secondary);
  border: 1px solid var(--editborder);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mp-tab-btn:hover {
  background: var(--background-color-navigation-hover);
  color: var(--font-color-application);
}

.mp-tab-btn.active {
  background: var(--background-color-button);
  color: var(--font-color-button);
  border-color: var(--background-color-button);
  font-weight: 600;
}

/* Overview info grid */
.mp-info-grid {
  width: calc(100% - 30px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-right: 20px;
}

@media (max-width: 640px) {
  .mp-info-grid { grid-template-columns: repeat(2, 1fr); }

  .chatbot-input {
    margin-left: 8px;
    margin-right: 8px;
    width: calc(100% - 16px);
    border-radius: 12px;
  }

  .chat-window {
    margin-left: 8px;
    margin-right: 8px;
  }

  .chatbot-buttons {
    flex-wrap: wrap;
    gap: 4px;
  }

  .chatbotfile-chip {
    max-width: 120px;
  }

  .chatbot-button,
  .chatbot-button-deactivated {
    min-width: 36px;
    min-height: 36px;
  }

  .chatbot-button-send {
    min-width: 40px;
    min-height: 40px;
  }

  /* Timeline: Mobile */
  .msg-sender,
  .msg-sender-user {
    display: none;
  }

  .msg-user-content {
    max-width: 95%;
  }

  .msg-meta-chip:nth-child(n+2) {
    display: none;
  }

  .msg-actions {
    opacity: 1;
  }

  .msg-user-footer button {
    opacity: 1;
  }

  .msg-bubble-bot,
  .msg-bubble-user,
  .msg-bubble-greeting {
    border-radius: 8px;
  }
}

.mp-info-tile {
  background: var(--background-color-card);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--editborder);
}

.mp-info-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-secondary);
}

.mp-info-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--font-color-input-header);
}

/* Service cards */
.mp-pane-services {
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-service-card {
  background: var(--background-color-card);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid var(--editborder);
  border-left-width: 3px;
}

.mp-service-card h3 {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--font-color-input-header);
}

.mp-service-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--font-color-application);
}

.mp-service-card--blue   { border-left-color: var(--clr-accent); }
.mp-service-card--indigo { border-left-color: var(--clr-indigo); }
.mp-service-card--green  { border-left-color: var(--clr-success-mid); }

/* Data-Info pane */
.mp-pane-datainfo {
  width: calc(100% - 60px);
  background: var(--background-color-card);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--editborder);
  margin-right: 20px;
}

.mp-pane-datainfo p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--font-color-application);
}

/* ── Profile hero strip ── */
.profile-hero {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--clr-surface-1) 0%, var(--clr-surface-2) 60%, var(--clr-surface-3) 100%);
  border: 1px solid var(--clr-border-accent);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.profile-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-accent-btn), var(--clr-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-white);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb), .2), 0 4px 12px rgba(var(--clr-black-rgb), .3);
}

.profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-hero-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text-primary);
}

.profile-hero-email {
  font-size: 0.8rem;
  color: var(--clr-text-secondary);
}

.profile-hero-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--clr-accent-rgb), .12);
  color: var(--clr-accent);
  border: 1px solid rgba(var(--clr-accent-rgb), .25);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* ── Page Header ──────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--clr-border);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-header-agent {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--clr-text-secondary);
  margin-bottom: 2px;
}

.page-header-title h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-1);
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}

.page-action-btn img {
  width: 18px;
  height: 18px;
}

.page-action-btn:hover {
  background: var(--clr-surface-2);
}

.page-action-btn.primary {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
}

.page-action-btn.primary:hover {
  opacity: 0.85;
}

/* ============================================================
   AI Service Execution Wizard — added 2026-04-03
   ============================================================ */

/* Execution container — flex column, clips at viewport height so only body scrolls */
.aiservice-execution-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    align-items: stretch;
    overflow: hidden;
    height: calc(100vh - 50px);
}

/* ---- Wizard bar ---- */
.aiservice-wizard-bar {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--clr-shell);
    border-bottom: 1px solid var(--clr-border);
    margin-top: 25px;
    margin-right: 20px;
    margin-left: 10px;
    flex-shrink: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.aiservice-wizard-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
}
.aiservice-wizard-step.active  { color: var(--clr-text-primary); font-weight: 600; }
.aiservice-wizard-step.done    { color: var(--clr-success); }
.aiservice-wizard-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700;
    background: var(--clr-surface-3);
    border: 1.5px solid var(--clr-border);
    color: var(--clr-text-muted);
    flex-shrink: 0;
    user-select: none;
}
.aiservice-wizard-step-num.active  { background: var(--clr-accent-btn); border-color: var(--clr-accent); color: var(--clr-white); }
.aiservice-wizard-step-num.done    { background: var(--clr-success-deep); border-color: var(--clr-success); color: var(--clr-success); }
.aiservice-wizard-step-num.clickable { cursor: pointer; transition: opacity 0.15s; }
.aiservice-wizard-step-num.clickable:hover { opacity: 0.75; }
.aiservice-wizard-line {
    flex: 1; height: 1px;
    margin: 0 8px;
    background: var(--clr-border);
}
.aiservice-wizard-line.done { background: var(--clr-success); }

/* ── Register wizard: full-width layout ── */
#register-wizard-bar.aiservice-wizard-bar {
    margin: 0;
    border-radius: 8px 8px 0 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Save-chat-as-document dialog wizard: full-width header ── */
#saveChatWizard-bar.aiservice-wizard-bar {
    margin: 0;
    border-radius: 8px 8px 0 0;
    width: 100%;
    box-sizing: border-box;
}

#register-wizard > .container-tab-widget {
    width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
}

#register-wizard .tab-cards-grid {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
}

#register-wizard .button-container {
    width: 100%;
}

/* ---- Hero header ---- */
.aiservice-hero {
    background: linear-gradient(135deg, var(--clr-surface-deep) 0%, var(--clr-grad-blue-mid) 50%, var(--clr-grad-blue-low) 100%);
    padding: 22px 24px;
    border-bottom: 1px solid var(--clr-border-accent);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 20px;
    margin-left: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.aiservice-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -30px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.22) 0%, transparent 65%);
    pointer-events: none;
}
.aiservice-hero::after {
    content: '';
    position: absolute;
    bottom: -30px; left: 40px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(var(--clr-indigo-rgb),0.12) 0%, transparent 65%);
    pointer-events: none;
}
.aiservice-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(var(--clr-accent-rgb),0.15);
    border: 1px solid rgba(var(--clr-accent-rgb),0.35);
    border-radius: 20px; padding: 3px 12px;
    font-size: 0.72rem; color: var(--clr-accent-light); font-weight: 700;
    letter-spacing: 0.04em; margin-bottom: 10px;
}
.aiservice-hero-title {
    font-size: 1.4rem; font-weight: 800;
    color: var(--clr-surface-pale-2); letter-spacing: -0.015em;
    margin-bottom: 6px;
}
.aiservice-hero-desc {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    line-height: 1.6;
}
.aiservice-hero-background-info {
    margin-top: 12px; padding: 9px 14px;
    background: rgba(var(--clr-accent-rgb),0.08);
    border: 1px solid rgba(var(--clr-accent-rgb),0.2);
    border-radius: 6px;
    font-size: 0.78rem; color: var(--clr-accent-soft);
}

/* ---- Body — fills remaining height, input scrolls, buttons stay fixed ---- */
.aiservice-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 24px;
    padding-bottom: 12px;
    margin-right: 20px;
    margin-left: 10px;
}

/* ---- Input step (step 1) — input scrolls, buttons stay fixed ---- */
#input-step {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Compact file-drop zone inside AI service execution input ---- */
.aiservice-execution-container .upload-dropzone {
    padding: 20px 16px;
    gap: 6px;
}
.aiservice-execution-container .upload-dropzone-icon {
    width: 32px;
    height: 32px;
}

/* ---- Result step (step 3) — cards scroll, buttons stay fixed ---- */
#result-step {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.aiservice-result-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%
}

/* ---- Input section heading (step 1) ---- */
.aiservice-input-section-title {
    text-align: left;
    margin: 0 0 12px 0;
}

/* ---- Progress box (step 2) ---- */
.aiservice-progress-box {
    background: var(--clr-shell);
    border: 1px solid var(--clr-border-accent);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.aiservice-progress-title {
    font-size: 0.9rem; font-weight: 700;
    color: var(--clr-accent-soft);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.aiservice-progress-subtitle {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin-bottom: 12px;
}
.aiservice-progress-track {
    background: var(--clr-surface-1);
    border-radius: 5px; height: 7px;
    overflow: hidden;
}
.aiservice-progress-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--clr-violet-pure), var(--clr-accent), var(--clr-cyan));
    background-size: 200%;
    animation: aiservice-shimmer 2s linear infinite;
    transition: width 0.6s ease;
    width: 3%;
}
@keyframes aiservice-shimmer {
    0%   { background-position: 0%; }
    100% { background-position: 200%; }
}
.aiservice-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--clr-text-muted);
    margin-top: 6px;
}
.aiservice-progress-timing {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--clr-text-muted);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--clr-border);
}
.aiservice-spin {
    display: inline-block;
    animation: aiservice-spin 1s linear infinite;
}
@keyframes aiservice-spin { to { transform: rotate(360deg); } }

/* Input toggle (step 2) */
.aiservice-input-toggle {
    background: var(--clr-surface-1);
    border: 1px solid var(--clr-border);
    border-radius: 6px; padding: 9px 14px;
    font-size: 0.78rem; color: var(--clr-text-secondary);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; margin-bottom: 14px;
    transition: border-color 0.2s;
    user-select: none;
}
.aiservice-input-toggle:hover { border-color: var(--clr-accent); }
.aiservice-input-toggle-label { color: var(--clr-accent); font-size: 0.75rem; }

/* ---- Hero result info (success badge + timestamp, step 3) ---- */
.aiservice-hero-result-info {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--clr-accent-rgb),0.18);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
[data-theme="light"] .aiservice-hero-result-info {
    border-top-color: rgba(var(--clr-accent-rgb),0.18);
}

/* ---- Hero action buttons (shown in step 3, top-right of hero) ---- */
.aiservice-hero-actions {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 1;
    /* individual buttons carry their own display:none/'' */
}
/* Hero has overflow:hidden, so a tooltip rendered above the button would
   be clipped at the top edge. Flip it to render below the button. */
.aiservice-hero-actions .button-icon::after {
    bottom: auto;
    top: calc(100% + 6px);
}
.aiservice-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(var(--clr-accent-rgb),0.38);
    background: rgba(var(--clr-accent-rgb),0.1);
    color: var(--clr-accent-soft);
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
}
.aiservice-hero-btn:hover {
    background: rgba(var(--clr-accent-rgb),0.22);
    border-color: rgba(var(--clr-accent-rgb),0.6);
    color: var(--clr-accent-softer);
}
.aiservice-hero-btn.active {
    background: rgba(var(--clr-accent-rgb),0.28);
    border-color: var(--clr-accent);
    color: var(--clr-accent-pale);
}
.aiservice-hero-btn-primary {
    background: rgba(var(--clr-accent-rgb),0.18);
    border-color: rgba(var(--clr-accent-rgb),0.5);
    color: var(--clr-accent-softer);
}
.aiservice-hero-btn-primary:hover {
    background: rgba(var(--clr-accent-rgb),0.32);
    border-color: var(--clr-accent);
}
[data-theme="light"] .aiservice-hero-btn {
    border-color: rgba(var(--clr-accent-rgb),0.4);
    background: rgba(var(--clr-accent-rgb),0.09);
    color: var(--clr-accent-btn);
}
[data-theme="light"] .aiservice-hero-btn:hover {
    background: rgba(var(--clr-accent-rgb),0.18);
    border-color: rgba(var(--clr-accent-rgb),0.6);
    color: var(--clr-violet-bg);
}
[data-theme="light"] .aiservice-hero-btn.active {
    background: rgba(var(--clr-accent-rgb),0.2);
    border-color: var(--clr-accent);
    color: var(--clr-violet-bg);
}
[data-theme="light"] .aiservice-hero-btn-primary {
    background: rgba(var(--clr-accent-rgb),0.15);
    border-color: rgba(var(--clr-accent-rgb),0.5);
}

/* ---- Success badge (step 3) ---- */
.aiservice-success-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--clr-success-rgb),0.1);
    border: 1px solid rgba(var(--clr-success-rgb),0.3);
    border-radius: 20px; padding: 5px 14px;
    font-size: 0.78rem; color: var(--clr-success); font-weight: 700;
}
.aiservice-info-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--clr-indigo-rgb),0.08);
    border: 1px solid rgba(var(--clr-indigo-rgb),0.25);
    border-radius: 20px; padding: 5px 14px;
    font-size: 0.78rem; color: var(--clr-text-secondary);
    white-space: nowrap;
}

/* ---- Light mode overrides ---- */
[data-theme="light"] .aiservice-hero {
    background: linear-gradient(135deg, var(--clr-base) 0%, var(--clr-surface-3) 50%, var(--clr-border) 100%);
    border-bottom-color: var(--clr-border-accent);
}
[data-theme="light"] .aiservice-hero::before {
    background: radial-gradient(circle, rgba(var(--clr-indigo-rgb),0.18) 0%, transparent 65%);
}
[data-theme="light"] .aiservice-hero::after {
    background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.10) 0%, transparent 65%);
}
[data-theme="light"] .aiservice-hero-badge {
    background: rgba(var(--clr-accent-rgb),0.1);
    border-color: rgba(var(--clr-accent-rgb),0.3);
    color: var(--clr-accent);
}
[data-theme="light"] .aiservice-hero-title {
    color: var(--clr-text-primary);
}
[data-theme="light"] .aiservice-hero-background-info {
    background: rgba(var(--clr-accent-rgb),0.07);
    border-color: rgba(var(--clr-accent-rgb),0.2);
    color: var(--clr-accent-btn);
}
[data-theme="light"] .aiservice-progress-title {
    color: var(--clr-accent-btn);
}

/* ---- Responsive — tablet (≤ 1024px) ---- */
@media screen and (max-width: 1024px) {
    .aiservice-wizard-step-label { display: none; }
    .aiservice-hero              { padding: 14px 16px; }
    .aiservice-hero-title        { font-size: 1.1rem; }
    .aiservice-body              { padding: 14px 16px; }
}

/* ---- Responsive — mobile (≤ 640px) ---- */

/* ================================================================
   Aiservice execution — unified input & result styling
   Scoped to .aiservice-execution-container so other pages
   are not affected.
   ================================================================ */

/* ---- Section headings (e.g. "Eingabe") ---- */
.aiservice-body > h3 {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--clr-accent-light);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--clr-accent-rgb),0.18);
    display: flex;
    align-items: center;
    gap: 8px;
}
.aiservice-body > h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 13px;
    background: linear-gradient(180deg, var(--clr-accent) 0%, var(--clr-cyan) 100%);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---- Input card — flex: 1 fills available body height, scrolls internally ---- */
.aiservice-execution-container .input-container {
    flex: 1;
    flex-shrink: 0;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    background: linear-gradient(135deg, rgba(var(--clr-surface-grad-1),0.97) 0%, rgba(var(--clr-surface-grad-2),0.97) 100%);
    border: 1px solid rgba(var(--clr-accent-rgb),0.22);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(var(--clr-black-rgb),0.45), inset 0 1px 0 rgba(var(--clr-white-rgb),0.03);
    padding: 20px 22px;
    width: calc(100% - 45px);
    margin-left: 0;
    margin-bottom: 20px;
}

/* Labels */
.aiservice-execution-container .input-container label {
    color: var(--clr-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Text inputs, textareas, selects */
.aiservice-execution-container .input-container input[type="text"],
.aiservice-execution-container .input-container input[type="number"],
.aiservice-execution-container .input-container input[type="date"],
.aiservice-execution-container .input-container input[type="time"],
.aiservice-execution-container .input-container textarea,
.aiservice-execution-container .input-container select {
    background: rgba(var(--clr-surface-grad-3),0.85);
    border: 1px solid rgba(var(--clr-accent-rgb),0.22);
    border-radius: 8px;
    color: var(--clr-text-primary);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.aiservice-execution-container .input-container input[type="text"]:focus,
.aiservice-execution-container .input-container input[type="number"]:focus,
.aiservice-execution-container .input-container input[type="date"]:focus,
.aiservice-execution-container .input-container input[type="time"]:focus,
.aiservice-execution-container .input-container textarea:focus,
.aiservice-execution-container .input-container select:focus {
    border-color: rgba(var(--clr-accent-rgb),0.55);
    box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb),0.12);
    outline: none;
}

/* ---- Button row — always visible, pinned below scrollable input ---- */
.aiservice-body > .button-container {
    flex-shrink: 0;
    margin-top: 8px;
    gap: 10px;
    padding-bottom: 4px;
}

/* ---- Result container ---- */
.aiservice-execution-container .container {
    width: 100%;
    padding: 0;
    margin-left: 0px;
}

/* ---- Result cards ---- */
.aiservice-execution-container .result-card {
    background: linear-gradient(135deg, rgba(var(--clr-surface-grad-1),0.97) 0%, rgba(var(--clr-surface-grad-2),0.97) 100%);
    border: 1px solid rgba(var(--clr-accent-rgb),0.22);
    border-left: 3px solid var(--clr-accent);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(var(--clr-black-rgb),0.45), inset 0 1px 0 rgba(var(--clr-white-rgb),0.03);
    width: calc(100% - 50px);
    padding: 22px;
    margin-bottom: 16px;
    color: var(--clr-text-primary);
}
.aiservice-execution-container .result-card h1,
.aiservice-execution-container .result-card h2,
.aiservice-execution-container .result-card h3,
.aiservice-execution-container .result-card h4 {
    color: var(--clr-accent-soft);
}
/* Prevent section-label rule from applying inside result cards */
.aiservice-execution-container .result-card h3 {
    font-size: unset;
    font-weight: unset;
    letter-spacing: unset;
    text-transform: unset;
    border-bottom: none;
    padding-bottom: 0;
    gap: unset;
    display: block;
}
.aiservice-execution-container .result-card h3::before {
    display: none;
}


/* ---- Light mode overrides ---- */
[data-theme="light"] .aiservice-body > h3 {
    color: var(--clr-accent-btn);
    border-bottom-color: rgba(var(--clr-accent-rgb),0.18);
}
[data-theme="light"] .aiservice-body > h3::before {
    background: linear-gradient(180deg, var(--clr-accent) 0%, var(--clr-indigo) 100%);
}
[data-theme="light"] .aiservice-execution-container .input-container {
    background: linear-gradient(135deg, var(--clr-base) 0%, var(--clr-surface-3) 100%);
    border-color: rgba(var(--clr-accent-rgb),0.25);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb),0.09);
}
[data-theme="light"] .aiservice-execution-container .input-container label {
    color: var(--clr-accent-btn);
}
[data-theme="light"] .aiservice-execution-container .input-container input[type="text"],
[data-theme="light"] .aiservice-execution-container .input-container input[type="number"],
[data-theme="light"] .aiservice-execution-container .input-container input[type="date"],
[data-theme="light"] .aiservice-execution-container .input-container input[type="time"],
[data-theme="light"] .aiservice-execution-container .input-container textarea,
[data-theme="light"] .aiservice-execution-container .input-container select {
    background: rgba(var(--clr-white-rgb),0.92);
    border-color: rgba(var(--clr-accent-rgb),0.28);
    color: var(--clr-text-primary);
}
[data-theme="light"] .aiservice-execution-container .input-container input:focus,
[data-theme="light"] .aiservice-execution-container .input-container textarea:focus,
[data-theme="light"] .aiservice-execution-container .input-container select:focus {
    border-color: rgba(var(--clr-accent-rgb),0.55);
    box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb),0.1);
}
[data-theme="light"] .aiservice-execution-container .result-card {
    background: linear-gradient(135deg, var(--clr-base) 0%, var(--clr-surface-3) 100%);
    border-color: rgba(var(--clr-accent-rgb),0.25);
    border-left-color: var(--clr-accent);
    box-shadow: 0 4px 16px rgba(var(--clr-accent-rgb),0.09);
    color: var(--clr-text-primary);
}
[data-theme="light"] .aiservice-execution-container .result-card h1,
[data-theme="light"] .aiservice-execution-container .result-card h2,
[data-theme="light"] .aiservice-execution-container .result-card h3,
[data-theme="light"] .aiservice-execution-container .result-card h4 {
    color: var(--clr-accent-btn);
}

[data-theme="light"] .nav-rail {
  background: var(--clr-surface-pale-2);
  border-right-color: var(--clr-text-primary);
}

[data-theme="light"] .nav-rail .rail-btn:hover {
  background: rgba(var(--clr-black-rgb),0.06);
}

[data-theme="light"] .nav-rail .dropdown:hover {
  background: rgba(var(--clr-black-rgb),0.06);
}

[data-theme="light"] .nav-rail .dropdown .settings-icon {
  filter: invert(1) brightness(0.3);
}

[data-theme="light"] .nav-rail .chip          { background: rgba(var(--clr-black-rgb),0.05); }
[data-theme="light"] .nav-rail .chip-chat     { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-accent-rgb),0.75); }
[data-theme="light"] .nav-rail .chip-ai       { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-violet-rgb),0.70); }
[data-theme="light"] .nav-rail .chip-fav      { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-warning-rgb),0.70);  }
[data-theme="light"] .nav-rail .chip-res      { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-cyan-rgb),0.70);  }
[data-theme="light"] .nav-rail .chip-mgr      { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-slate-rgb),0.70);  }
[data-theme="light"] .nav-rail .chip-projects { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-success-rgb),0.75);  }
[data-theme="light"] .nav-rail .chip-collapse { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-slate-rgb),0.70);  }
[data-theme="light"] .nav-rail .chip-lang     { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-slate-rgb),0.80);  }
[data-theme="light"] .nav-rail .chip-theme    { background: rgba(var(--clr-black-rgb),0.05); color: rgba(var(--clr-chip-slate-rgb),0.80);  }

[data-theme="light"] .nav-rail .rail-btn.active-chat { background: rgba(var(--clr-accent-rgb),0.12); }
[data-theme="light"] .nav-rail .rail-btn.active-ai   { background: rgba(var(--clr-violet-rgb),0.12); }
[data-theme="light"] .nav-rail .rail-btn.active-projects { background: rgba(var(--clr-success-rgb),0.12); }

[data-theme="light"] .chatbot-service-panel {
  background: var(--clr-surface-pale-1);
}

[data-theme="light"] .chatbot-service-panel .container-cockpit-agent {
  border-bottom-color: rgba(var(--clr-black-rgb),0.06);
}

[data-theme="light"] .chatbot-service-panel .cockpit-agent-image {
  border-color: rgba(var(--clr-black-rgb),0.10);
  box-shadow: 0 2px 8px rgba(var(--clr-black-rgb),0.10);
}

[data-theme="light"] .chatbot-service-panel .cockpit-service-input {
  background: var(--clr-white);
  border-color: rgba(var(--clr-black-rgb),0.14);
  color: var(--clr-surface-deep);
}

[data-theme="light"] .chatbot-service-panel .cockpit-service-input:hover {
  border-color: rgba(var(--clr-accent-rgb),0.5);
  background: var(--clr-surface-pale-3);
}

[data-theme="light"] .chatbot-service-panel::before {
  background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.05) 0%, transparent 70%);
}

[data-theme="light"] .new-chat-btn {
  background: rgba(var(--clr-accent-rgb),0.08);
  border-color: rgba(var(--clr-accent-rgb),0.2);
  color: var(--clr-accent-btn);
}

[data-theme="light"] .new-chat-btn:hover {
  background: rgba(var(--clr-accent-rgb),0.14);
}

[data-theme="light"] .new-chat-btn .ncb-plus {
  background: rgba(var(--clr-accent-rgb),0.15);
  color: var(--clr-accent-btn);
}

/* ------------------------------------------------------------------ */
/* Workflow Stepper                                                     */
/* ------------------------------------------------------------------ */

.aiservice-stepper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.aiservice-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.aiservice-stepper-step-node {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--clr-border);
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.aiservice-stepper-step.is-active .aiservice-stepper-step-node {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}

.aiservice-stepper-step.is-done .aiservice-stepper-step-node {
    background: rgba(var(--clr-indigo-rgb), 0.4);
    border-color: rgba(var(--clr-indigo-rgb), 0.4);
}

.aiservice-stepper-connector {
    flex: 1;
    height: 2px;
    background: var(--clr-border);
    margin-top: 9px;
    align-self: flex-start;
    flex-shrink: 0;
    min-width: 8px;
}

.aiservice-stepper-step-label {
    font-size: 0.72rem;
    text-align: center;
    max-width: 80px;
    margin-top: 6px;
    color: var(--clr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiservice-stepper-step.is-active .aiservice-stepper-step-label {
    color: var(--clr-primary);
    font-weight: 600;
}

.aiservice-stepper-step.is-done .aiservice-stepper-step-label {
    color: var(--clr-text-secondary);
}

.aiservice-stepper-step.is-skipped .aiservice-stepper-step-node {
    background: transparent;
    border-color: var(--clr-border);
    border-style: dashed;
    opacity: 0.5;
}

.aiservice-stepper-step.is-skipped .aiservice-stepper-step-label {
    color: var(--clr-text-muted);
    text-decoration: line-through;
    opacity: 0.6;
}

.aiservice-stepper--compact .aiservice-stepper-step-label {
    display: none;
}

/* ── Contract Data Editor — full-width layout ── */
#contractData-container {
    width: 100%;
    box-sizing: border-box;
}
#contractData-container .tab-cards-grid,
#price-grid {
    width: 100%;
    box-sizing: border-box;
}
#buttons {
    width: 100%;
    padding-bottom: 24px;
    position: sticky;
    bottom: 0;
    background-color: var(--background-color-application);
    z-index: 1;
}

#pricetier-container .scrollable {
    max-height: 220px;
}

/* ══ Chat-Historie: neue Listeneintrag-Styles (2026-04-05) ══════════════
   Selectors target both the agent chat-history list (`#chat-history`)
   and the project chat-history list (`#project-chat-history`) via
   `:is(...)`, so the project panel inherits the exact same row layout,
   colours and time-line as the agent panel. */

/* Gruppen-Header (Heute / Gestern / Diese Woche / Älter) */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .chat-history-group-header {
  font-size: 9px;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 0 4px 3px;
  margin-top: 10px;
  margin-bottom: 2px;
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .chat-history-group-header:first-child {
  margin-top: 0;
}

/* Container-Zeile: flex, kein border-left */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 20px 3px 4px;
  border-left: none !important;
  border-radius: 4px;
}

/* Hover */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-white-rgb), .04);
  border-left: none !important;
}

/* Aktiver Eintrag */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween.chat-history-active {
  background: rgba(var(--clr-indigo-rgb), .12);
}

/* Icon-Box */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .list-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(var(--clr-white-rgb), .05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--clr-text-secondary);
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween.chat-history-active .list-item-icon {
  background: rgba(var(--clr-indigo-rgb), .2);
  color: var(--clr-accent);
}

/* li: flex-column für Name + Zeit */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween li {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--clr-text-secondary);
  padding-left: 0;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween.chat-history-active li {
  color: var(--clr-text-primary);
  font-weight: 500;
}

/* Zweite Zeile: Zeit via data-time Attribut */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween li::after {
  content: attr(data-time);
  font-size: 10px;
  color: var(--clr-text-muted);
  font-weight: normal;
  display: block;
  white-space: nowrap;
  margin-top: 1px;
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween.chat-history-active li::after {
  color: var(--clr-accent);
}

/* ⋯-Menü: Container immer im Layout, nur das Icon ausblenden (kein visibility-Erbe auf das Popup) */
.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween .dropdown {
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 0;
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween .dropdown .settings-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween:hover .dropdown .settings-icon {
  opacity: 1;
  pointer-events: auto;
}

/* Light-theme hover override */
[data-theme="light"] .chatbot-service-panel :is(#chat-history, #project-chat-history, #project-members-list) .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-black-rgb), .04);
}

/* ══ Ai-Service Historie: gleicher Stil wie Chat-Historie (2026-04-06) ══ */

.chatbot-service-panel #service-history .chat-history-group-header {
  font-size: 9px;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 0 4px 3px;
  margin-top: 10px;
  margin-bottom: 2px;
}

.chatbot-service-panel #service-history .chat-history-group-header:first-child {
  margin-top: 0;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-left: none !important;
  border-radius: 4px;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-white-rgb), .04);
  border-left: none !important;
}

.chatbot-service-panel #service-history .list-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(var(--clr-white-rgb), .05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--clr-text-secondary);
}

.chatbot-service-panel #service-history .container-left-right-spacebetween li {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--clr-text-secondary);
  padding-left: 0;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween li::after {
  content: attr(data-time);
  font-size: 10px;
  color: var(--clr-text-muted);
  font-weight: normal;
  display: block;
  white-space: nowrap;
  margin-top: 1px;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween .dropdown {
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 0;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween .dropdown .settings-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.chatbot-service-panel #service-history .container-left-right-spacebetween:hover .dropdown .settings-icon {
  opacity: 1;
  pointer-events: auto;
}

[data-theme="light"] .chatbot-service-panel #service-history .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-black-rgb), .04);
}

/* ══ Running Services: gleicher Stil wie Chat-Historie (2026-04-06) ══════ */

.chatbot-service-panel #running-services-list .container-left-right-spacebetween {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-left: none !important;
  border-radius: 4px;
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-white-rgb), .04);
  border-left: none !important;
}

.chatbot-service-panel #running-services-list .list-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(var(--clr-white-rgb), .05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--clr-text-secondary);
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween li {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--clr-text-secondary);
  padding-left: 0;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween li::after {
  content: attr(data-time);
  font-size: 10px;
  color: var(--clr-text-muted);
  font-weight: normal;
  display: block;
  white-space: nowrap;
  margin-top: 1px;
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween .dropdown {
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 0;
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween .dropdown .settings-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.chatbot-service-panel #running-services-list .container-left-right-spacebetween:hover .dropdown .settings-icon {
  opacity: 1;
  pointer-events: auto;
}

[data-theme="light"] .chatbot-service-panel #running-services-list .container-left-right-spacebetween:hover {
  background: rgba(var(--clr-black-rgb), .04);
}

/* ── Platform Usage Page ───────────────────────────────────────────── */

/* KPI Summary */
.usage-summary-kpi {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    padding: 4px 0;
}
.kpi-tile {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-accent);
    border-radius: 8px;
    padding: 14px 22px;
    min-width: 150px;
    text-align: center;
}
.kpi-label {
    display: block;
    font-size: 11px;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.kpi-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--clr-text-primary);
}
.kpi-accent-user { color: var(--clr-indigo-soft); }
.kpi-accent-pkg  { color: var(--clr-accent-light); }
.kpi-accent-vol  { color: var(--clr-kpi-vol); }

/* Distributor summary */
.distributor-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 16px;
    margin-bottom: 16px;
    background: rgba(var(--clr-accent-rgb),0.07);
    border-left: 3px solid var(--clr-accent);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--clr-text-secondary);
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}
.dist-sum-label {
    color: var(--clr-accent);
    margin-right: auto;
}

/* Accordion */
.partner-accordion {
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-accent);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}
.accordion-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.accordion-header:hover {
    background: rgba(var(--clr-accent-rgb), 0.06);
}
.accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.accordion-arrow {
    font-size: 11px;
    width: 14px;
    color: var(--clr-accent);
}
.accordion-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--clr-text-primary);
}
.accordion-badge {
    background: rgba(var(--clr-accent-rgb), 0.18);
    color: var(--clr-text-secondary);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
}
.accordion-summary {
    display: flex;
    gap: 20px;
    font-size: 11px;
    color: var(--clr-text-secondary);
}
.accordion-summary .accent-user { color: var(--clr-violet-soft); }
.accordion-summary .accent-pkg  { color: var(--clr-accent-soft); }
.accordion-summary .accent-vol  { color: var(--clr-success-soft); }

/* Customer table */
.accordion-table {
    background: var(--clr-surface-mid);
    padding-bottom: 1px;
}
.table-header-row,
.table-row {
    display: grid;
    grid-template-columns: minmax(140px,2fr) 90px 80px 60px 60px 130px 90px;
    gap: 4px;
    padding: 7px 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--clr-border);
    align-items: center;
    color: var(--clr-text-primary);
}
.table-header-row {
    font-size: 10px;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--clr-shell);
}
.row-test { opacity: 0.45; }
.row-summary {
    background: var(--clr-shell);
    font-weight: bold;
    border-top: 1px solid var(--clr-border-accent);
}
.partner-self-row {
    background: rgba(var(--clr-accent-rgb), 0.07);
    font-weight: 600;
    border-bottom: 1px solid var(--clr-border-accent);
}
.partner-self-card {
    background: var(--clr-surface-mid);
    border: 1px solid var(--clr-border-accent);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}
.cell-name      { font-weight: 500; color: var(--clr-text-primary); }
.cell-date      { font-size: 11px; color: var(--clr-text-secondary); }
.cell-sum-label { color: var(--clr-accent); }
.token-main     { font-weight: bold; }
.token-sub      { font-size: 10px; color: var(--clr-text-secondary); }

/* Badges */
.badge         { padding: 2px 8px; border-radius: 10px; font-size: 10px; display: inline-block; font-weight: 500; }
.badge-licence { background: var(--clr-accent-deep); color: var(--clr-accent-soft); }
.badge-volume  { background: var(--clr-success-darkest); color: var(--clr-success-soft); }
.badge-test    { background: var(--clr-surface-3); color: var(--clr-text-secondary); }

.docx-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--clr-sky-rgb), 0.12);
    color: var(--clr-cyan-deep);
    border: 1px solid rgba(var(--clr-sky-rgb), 0.24);
    vertical-align: middle;
}

/* Row accent colors */
.accent-user { color: var(--clr-violet-soft); }
.accent-pkg  { color: var(--clr-accent-soft); }
.accent-vol  { color: var(--clr-success-soft); }

/* Light mode overrides */
[data-theme="light"] .kpi-accent-user { color: var(--clr-violet-mid); }
[data-theme="light"] .kpi-accent-pkg  { color: var(--clr-accent-btn); }
[data-theme="light"] .kpi-accent-vol  { color: var(--clr-success-emerald); }

[data-theme="light"] .distributor-summary {
    background: rgba(var(--clr-accent-rgb),0.06);
}

[data-theme="light"] .accordion-table {
    background: var(--clr-surface-2);
}
[data-theme="light"] .table-header-row {
    background: var(--clr-surface-3);
}
[data-theme="light"] .table-header-row,
[data-theme="light"] .table-row {
    border-bottom-color: var(--clr-border);
    color: var(--clr-text-primary);
}
[data-theme="light"] .row-summary {
    background: var(--clr-surface-3);
    border-top-color: var(--clr-border-accent);
}
[data-theme="light"] .partner-self-row {
    background: rgba(79,70,229,0.08);
}
[data-theme="light"] .accordion-summary .accent-user { color: var(--clr-violet-mid); }
[data-theme="light"] .accordion-summary .accent-pkg  { color: var(--clr-accent-btn); }
[data-theme="light"] .accordion-summary .accent-vol  { color: var(--clr-success-emerald); }
[data-theme="light"] .accent-user { color: var(--clr-violet-mid); }
[data-theme="light"] .accent-pkg  { color: var(--clr-accent-btn); }
[data-theme="light"] .accent-vol  { color: var(--clr-success-emerald); }
[data-theme="light"] .badge-licence { background: var(--clr-accent-softest); color: var(--clr-accent-btn-hover); }
[data-theme="light"] .badge-volume  { background: var(--clr-success-pale); color: var(--clr-success-darker); }
[data-theme="light"] .badge-test    { background: var(--clr-surface-pale-2); color: var(--clr-text-slate); }

/* Export action — peer tile in KPI row, matches .kpi-tile frame */
.usage-summary-kpi button.usage-export-fab {
    margin-bottom: 14px;
    align-self: stretch;
    min-width: 110px;
    padding: 0 22px;
    background: var(--clr-surface-2);
    border: 1px solid var(--clr-border-accent);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.usage-summary-kpi button.usage-export-fab img {
    width: 22px;
    height: 22px;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
.usage-summary-kpi button.usage-export-fab:hover {
    background: rgba(var(--clr-accent-rgb), 0.10);
    border-color: var(--clr-accent);
}
.usage-summary-kpi button.usage-export-fab:hover img {
    opacity: 1;
}
[data-theme="light"] .usage-summary-kpi button.usage-export-fab {
    border-color: var(--clr-border);
}
[data-theme="light"] .usage-summary-kpi button.usage-export-fab:hover {
    border-color: var(--clr-accent);
}

/* State-5: user input required — feedback highlight */
.feedback-required {
  position: relative;
  border: 1.5px solid var(--clr-warning) !important;
  background: rgba(var(--clr-warning-rgb), 0.07) !important;
  animation: feedback-pulse 1.8s ease-out infinite;
}

.feedback-required .list-item-icon svg {
  stroke: var(--clr-warning);
}

.feedback-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  background: var(--clr-warning);
  color: var(--clr-base);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  pointer-events: none;
}

@keyframes feedback-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(var(--clr-warning-rgb), 0.5); }
  70%  { box-shadow: 0 0 8px 4px rgba(var(--clr-warning-rgb), 0);  }
  100% { box-shadow: 0 0 0 0    rgba(var(--clr-warning-rgb), 0);   }
}

/* Desktop-only: hide mobile-exclusive elements */
.chatbot-more-toggle { display: none; }
.aiservice-wizard-progress { display: none; }

/* ============================================================
   MOBILE RESPONSIVE — max-width: 640px
   ============================================================ */

@media (max-width: 640px) {

  /* --- 1. General container (AI Service Manager, Favorites, Results) --- */

  /* aiservice-container is position:absolute left:20px at ≤1024px — shift past the 60px nav-rail */
  .aiservice-container {
    left: 60px;
    width: calc(100% - 68px); /* 60px nav + 8px right gap */
    margin-top: 8px;
    align-items: stretch; /* override align-items:center so ALL children fill full width */
  }

  /* aiservice-execution-container has the same left:20px issue at ≤1024px */
  .aiservice-execution-container {
    left: 60px;
    width: calc(100% - 68px);
  }

  /* Inner .container wrapper: reset width/margins so it fills the full aiservice-container */
  .aiservice-container .container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-items: stretch;
  }

  .page-header {
    padding: 10px 12px;
  }

  .page-header-title h1 {
    font-size: 15px;
  }

  /* --- 2. Card grid → stacked list --- */
  .card-container {
    flex-direction: column;
    align-items: stretch; /* all cards fill the full container width */
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    max-height: none;
  }

  .card {
    flex-direction: row;
    align-items: center;
    width: calc(100% - 10px);
    box-sizing: border-box;
    overflow: hidden; /* prevent wide content from stretching the card */
    min-height: auto;
    margin: 0;
    padding: 10px 12px;
    gap: 10px;
    margin-left: 10px;
  }

  /* card-info: flex row — image comes second in DOM (after header), use order to show it first */
  .card-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-align: left;
    width: auto;
    margin-bottom: 0;
    gap: 8px;
  }

  /* Image is second in DOM but should appear first visually */
  .card-info .cockpit-agent-image,
  .card-info .cockpit-result-image {
    order: -1;
  }

  /* Title/header text fills remaining space, allows wrapping */
  .card-info h2,
  .card-info h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13px;
  }

  .cockpit-agent-image,
  .cockpit-result-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* Execute button container: auto-width, no extra height/margin */
  .card .button-container {
    flex-shrink: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    justify-content: flex-end;
  }

  /* Execute button: compact on mobile */
  .card .button-container .button-command {
    width: auto;
    padding: 5px 10px;
    margin: 0;
    white-space: nowrap;
  }

  /* Hide all buttons after the first (e.g. "Historie") — not needed on mobile */
  .card .button-container .button-command:not(:first-child) {
    display: none;
  }

  /* card-action (settings dropdown): static for flex flow */
  .card-action {
    position: static;
    flex-shrink: 0;
    align-self: center;
  }

  /* card-favorite: hidden on mobile — not needed */
  .card-favorite {
    display: none;
  }

  /* Personal-KB chunk cards: the .result-card width:calc(100% - 80px) plus
     default padding leaves way too little room on a phone. Full-width (minus
     a tiny gutter) with tighter padding, stretched textarea, wrapping button
     row. Scoped via the chunk page's content id so other result-cards stay
     untouched. */
  #user-kb-chunks-content {
    width: 100%;
    box-sizing: border-box;
  }

  #user-kb-chunks-content .card-container {
    padding-left: 0;
  }

  #user-kb-chunks-content .result-card {
    width: calc(100% - 12px);
    margin: 0 6px 10px;
    padding: 12px;
    box-sizing: border-box;
  }

  #user-kb-chunks-content .result-card textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
  }

  #user-kb-chunks-content .result-card .button-container {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
  }

  /* Pagination wrappers (AtomContainerButton -> .button-container) inherit
     the global 25px mobile height, which clips the 40px pagination buttons
     and makes them overlap the chunk-count line above and the first card
     below. Force auto height on these specific wrappers. */
  #user-kb-chunks-content #user-top-pagination,
  #user-kb-chunks-content #user-bottom-pagination {
    height: auto;
    min-height: 40px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* Personal-KB document card opts out of the horizontal "image + title + action"
     layout — it has several stacked text lines plus a delete button that need
     to read top-to-bottom, centered like in the desktop view. */
  .user-kb-card.card {
    flex-direction: column;
    align-items: center;
  }

  .user-kb-card .card-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    width: auto;
  }

  .user-kb-card .card-info p,
  .user-kb-card .card-info h2,
  .user-kb-card .card-info h3,
  .user-kb-card .card-info h4,
  .user-kb-card .card-info h5 {
    flex: none;
    margin: 0;
  }

  .user-kb-card .card .button-container,
  .user-kb-card .button-container {
    justify-content: center;
    margin-top: 6px;
  }

  /* --- 3. Chat input --- */
  .chatbot-input {
    box-sizing: border-box; /* include padding+border in width so it doesn't overflow chat-container */
    margin: 8px;
    width: calc(100% - 16px);
    border-radius: 12px;
    height: auto; /* let the input grow with wrapped button rows */
    max-height: none;
  }

  /* All chatbot buttons the same size; reset padding-left:10px from the 1024px rule */
  .chatbot-button,
  .chatbot-button-deactivated,
  .chatbot-button-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  /* Secondary buttons hidden by default on mobile */
  .chatbot-btn-secondary {
    display: none;
  }

  /* Shown when more-toggle is active */
  .chatbot-secondary-expanded .chatbot-btn-secondary {
    display: flex;
  }

  /* More-toggle button: only visible on mobile */
  .chatbot-more-toggle {
    display: inline-flex;
  }

  .chatbot-inputfield {
    flex: 1;
  }

  /* --- 4. AI Service Execution --- */

  /* Desktop wizard bar hidden on mobile */
  .aiservice-wizard-bar {
    display: none;
  }

  /* Mobile progress bar (rendered by MoleculeWizardProgressBar, hidden on desktop) */
  .aiservice-wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: var(--clr-shell);
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
  }

  .aiservice-wizard-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--clr-text-primary);
  }

  .aiservice-wizard-progress-track {
    background: var(--clr-border);
    border-radius: 4px;
    height: 4px;
  }

  .aiservice-wizard-progress-fill {
    background: var(--clr-accent);
    border-radius: 4px;
    height: 4px;
    width: 33%;
    transition: width 0.3s ease;
  }

  .aiservice-hero {
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
    border-radius: 0;
  }

  .aiservice-body {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 8px;
  }

  .input-container {
    width: calc(100% - 10px);
    box-sizing: border-box; /* padding included in width to prevent right overflow */
    margin-left: 10px; /* reset the 60px left margin from the 1024px rule */
    padding: 12px;
  }

  /* Override the more-specific desktop rule that sets width:calc(100%-45px) */
  .aiservice-execution-container .input-container {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
  }

  /* --- 5. Chatbot page layout --- */

  /* Mobile default: nav-rail only (collapsed). JS also enforces this on first load. */
  .chatbot-service {
    width: 60px;
    min-width: 60px;
  }

  /* When user expands the panel: overlay over chat content */
  .chatbot-service:not(.panel-collapsed) {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 200;
    width: 280px;
    min-width: 280px;
  }

  /* Push chat container past the nav-rail — same 8px right gap as other containers */
  .chat-container {
    left: 60px;
    width: calc(100% - 68px);
  }

  /* Button containers: auto-width + natural height — overrides 1024px width:100%/height:25px */
  .chatbot-input .button-container {
    height: auto;
    margin-top: 4px;
    width: auto;
  }

}

/* Chunk Image Strip */
.chunk-img-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    margin-top: 12px;
}

.chunk-img-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.chunk-img-badge {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 8px;
}

/* Chunks list width chain: .container-top-bottom uses align-items: center,
   so the chunk-list molecule is sized to its intrinsic content and grows with
   wide chunk cards. Pin it to parent width and let children shrink below
   intrinsic content so the .chunk-img-strip can overflow internally. */
#chunk-list-container {
    width: 100%;
    min-width: 0;
}

#chunk-cards > .result-card {
    min-width: 0;
}

/* .result-card uses align-items: start, so its flex-column children are NOT
   stretched. The image-strip molecule therefore sizes to its intrinsic
   content (all thumbnails in one row). Pin the specific molecule that hosts
   the carousel to the card width so the strip clips+scrolls internally. */
.molecule:has(> .chunk-img-carousel) {
    width: 100%;
    min-width: 0;
}

.chunk-img-carousel {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.chunk-img-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    min-width: 0;
    max-width: 100%;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    outline: none;
}

.chunk-img-strip:focus-visible {
    outline: 2px solid var(--clr-border-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.chunk-img-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    opacity: 1;
    transition: opacity 0.2s ease, background-color 0.15s ease;
    background: var(--clr-surface-1);
    border: 1px solid var(--clr-border-accent);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--clr-black-rgb), 0.25);
    cursor: pointer;
    overflow: hidden;
}

.chunk-img-carousel-btn:hover {
    background: var(--clr-surface-2);
}

/* Stretch the inner <button class="image-small"> so the entire circular
   wrapper is clickable and the icon is flex-centered inside it. */
.chunk-img-carousel-btn > button.image-small {
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chunk-img-carousel-btn--left  { left: 4px; }
.chunk-img-carousel-btn--right { right: 4px; }

.chunk-img-carousel-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.result-card-warning {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    margin: 8px 0;
    background: rgba(255, 200, 60, 0.12);
    border-left: 3px solid #e8b324;
    border-radius: 3px;
}
.result-card-warning ul {
    margin: 0;
    padding-left: 16px;
}
.result-card-warning-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.chunk-img-thumb {
    min-width: 120px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid var(--border-secondary);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.chunk-img-thumb:hover {
    border-color: var(--accent);
}

.chunk-img-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Expanded view */
/* ── Expanded image viewer ── */
.chunk-img-expanded {
    background: var(--clr-surface-1);
    border: 1px solid var(--clr-border-accent);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 24px rgba(var(--clr-black-rgb), 0.25);
}

.chunk-img-expanded-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.chunk-img-expanded-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text-primary);
}

.chunk-img-expanded-img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    background: var(--clr-base);
}

.chunk-img-expanded-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--clr-border);
}

.chunk-img-nav {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--clr-text-secondary);
    min-width: 4em;
    text-align: center;
}

/* ── Filter bar container ─────────────────────────────────────────────
   Dedicated bar for list pages (agentmanager, documentlist, …). Sits
   at its natural height above a .scrollable list. Visual treatment
   mirrors .input-container so the app feels uniform. */
.filter-bar-container {
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--clr-border-accent);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    background: var(--card-gradient);
    color: var(--clr-text-primary);
    flex-shrink: 0;
    flex-grow: 0;
}

.filter-bar-container h3 {
    margin: 0;
    color: var(--font-color-input);
}

/* Collapsible filter bar: clicking the header toggles a `.collapsed`
   class on .filter-bar-container that hides every direct child except
   the heading. The heading carries .filter-bar-toggle to render an
   expand/collapse chevron. */
.filter-bar-container .filter-bar-toggle {
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-bar-container .filter-bar-toggle::before {
    content: "▾";
    display: inline-block;
    width: 12px;
    font-size: 13px;
    color: var(--clr-text-secondary, #94a3b8);
    transition: transform 150ms ease;
}

.filter-bar-container.collapsed {
    gap: 0;
}

.filter-bar-container.collapsed .filter-bar-toggle::before {
    transform: rotate(-90deg);
}

.filter-bar-container.collapsed > *:not(h3) {
    display: none;
}

/* ── List page scrollable sizing ──────────────────────────────────────
   On list pages the .scrollable sits as a direct child of
   .container-top-bottom. Give it the remaining space with internal
   scrolling — otherwise it grows to its content height and starves
   the filter bar above. */
.welcome > .container-top-bottom > .scrollable {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 25px;
}

/* ── List page card container alignment ───────────────────────────────
   Align card rows flush with the .filter-bar-container border: fill the
   scrollable width (it already shares the filter bar's 20px side
   gutters), drop horizontal padding, and zero the .card horizontal
   margin so first/last card in a row sit flush with the filter border.
   Spacing between cards comes from the container's gap alone. */
.welcome > .container-top-bottom > .scrollable .card-container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.welcome > .container-top-bottom > .scrollable .card-container .card {
    margin-left: 0;
    margin-right: 0;
}

/* ── AI service manager: internal-service marker ────────────── */

.card.card-internal {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 1px var(--clr-accent), var(--shadow-card);
}

.badge-internal {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-white);
  background: var(--clr-accent-btn);
  box-shadow: var(--shadow-subtle);
  letter-spacing: 0.02em;
  z-index: 2;
  pointer-events: none;
}

/* ----------------------------- skill chip list ----------------------------- */
.skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  font-size: 0.85rem;
  border: 1px solid var(--clr-border);
  cursor: grab;
  user-select: none;
}

.skill-chip:active {
  cursor: grabbing;
}

.skill-chip-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
}

.skill-chip-close:hover {
  color: var(--clr-danger);
}

.skill-chip-add {
  cursor: pointer;
  background: transparent;
  border: 1px dashed var(--clr-border);
  color: var(--clr-text-secondary);
}

.skill-chip-add:hover {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
}

.skill-picker {
  background: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(var(--clr-black-rgb), 0.35);
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.skill-picker-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

.skill-picker-item:hover {
  background: var(--clr-bg-hover);
}

.skill-picker-empty {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--clr-text-secondary);
  font-style: italic;
}

/* ------------------------ skill drag-and-drop list ------------------------ */
/* Vertical list of project skills inside the Einstellungen tab, with a grab
   handle, an "active" checkbox, the skill name and a truncated prompt
   preview per row. Visual order maps 1:1 to the order in which the active
   skills are sent with each chat message. */
.skill-dnd-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-dnd-empty {
  padding: 6px 4px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--clr-text-secondary);
}

.skill-dnd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border);
  cursor: grab;
  user-select: none;
}

.skill-dnd-row:active {
  cursor: grabbing;
}

.skill-dnd-row--dragging {
  opacity: 0.4;
}

.skill-dnd-row--over {
  outline: 2px dashed var(--clr-accent-btn);
  outline-offset: -2px;
}

.skill-dnd-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--clr-text-secondary);
  cursor: grab;
  font-size: 1rem;
}

.skill-dnd-active {
  cursor: pointer;
}

.skill-dnd-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.skill-dnd-name {
  font-size: 0.9rem;
  color: var(--clr-text-primary);
}

.skill-dnd-prompt {
  font-size: 0.78rem;
  color: var(--clr-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--clr-text-secondary);
  margin: 2px 0 6px 0;
}

/* --------------------------- project chat layout -------------------------- */
/* Two-column chat tab on the project detail page: a fixed-width sidebar with
   the chat list and a flexible main column with header / history / mode bar /
   input row. Class names match the *.classList.add(...) calls in
   frontend/js/ui/pages/projectpage.js. */

.project-chat-layout {
  display: flex;
  gap: 8px;
  height: 100%;
  align-items: stretch;
}

.project-chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 8px;
  border-right: 1px solid var(--clr-border);
}

.project-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-chat-card {
  cursor: pointer;
  margin-bottom: 6px;
  padding: 8px 10px;
}

.project-chat-card-time {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

.project-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--clr-border);
}

.project-chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

.project-chat-mode-bar {
  padding: 6px 8px;
  border-top: 1px solid var(--clr-border);
}

.project-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 8px;
  align-items: flex-end;
  border-top: 1px solid var(--clr-border);
}

.project-chat-badge-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 4px 0;
}

/* Project select in the cockpit panel header (Projekte pages).
 * Horizontal layout: dropdown takes the row, compact "+" icon button sits
 * on its right. Replaces the agent-select container which stacks an avatar
 * above its dropdown — projects have no avatar, so a side-by-side layout
 * keeps the dropdown wide enough that options are readable. */
.chatbot-service-panel .container-cockpit-project {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 10px;
  margin-top: 0;
  border-bottom: 1px solid rgba(var(--clr-white-rgb),0.05);
  /* Match the "+ Neuer Chat" button below — that one sits with `margin: 0
     12px 10px;` inside the panel, so its visual edges align 12px from
     the panel walls. We use the same horizontal padding here and let the
     container fill the panel; the inner select gets the full remaining
     width via `flex: 1 1 auto`. The previous `width: calc(100% - 25px)`
     made the row narrower than the CTA below for no good reason. */
  width: 100%;
  box-sizing: border-box;
  box-sizing: border-box;
}

.chatbot-service-panel .cockpit-project-select-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.chatbot-service-panel .cockpit-project-add-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  /* `.button-icon` adds `margin-right: 4px` which would push the right
     edge of the "+" button 4 px inward from the panel padding. Reset it
     so the row's right edge aligns with the "+ Neuer Chat" CTA below. */
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatbot-service-panel .cockpit-project-add-btn img {
  width: 18px;
  height: 18px;
}

/* Skill list inside the Skills tab — same row layout as the agent
   chat-history list (`#chat-history` selectors at line 7361 onwards).
   Without these rules the `<li>` shrinks to its content and floats
   centered between the icon and the dropdown menu. Replicated here
   instead of broadening the original scope to avoid regressing the
   agent panel. */
.chatbot-service-panel #project-skills-list .list-item-icon {
  /* Skills list is single-line, but the <li> renders with the browser's
     default line-height (≈1.5 × 12px ≈ 18px), so a 12-14px icon looks
     visibly shorter than the text. Match the rendered text block height
     instead of the bare font-size. */
  width: 18px;
  height: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--clr-text-secondary);
}

.chatbot-service-panel #project-skills-list .list-item-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.chatbot-service-panel #project-skills-list .container-left-right-spacebetween li {
  flex: 1;
  min-width: 0;
  /* Single-line skill row — `flex-direction: column` (used by the chat
     history's two-line entries) would top-align the text inside a tall
     content box, leaving the icon and the name visually offset. Use
     plain block flow with `line-height` matching the icon-box height so
     the text is vertically centred against the icon. */
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--clr-text-secondary);
  margin: 0;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.chatbot-service-panel #project-skills-list .container-left-right-spacebetween li::after {
  content: attr(data-time);
  font-size: 10px;
  color: var(--clr-text-muted);
  font-weight: normal;
  display: block;
  white-space: nowrap;
  margin-top: 1px;
}

.chatbot-service-panel #project-skills-list .container-left-right-spacebetween .dropdown {
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 0;
}

.chatbot-service-panel #project-skills-list .container-left-right-spacebetween .dropdown .settings-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.chatbot-service-panel #project-skills-list .container-left-right-spacebetween:hover .dropdown .settings-icon {
  opacity: 1;
  pointer-events: auto;
}

.input-error {
  outline: 2px solid var(--clr-danger);
}

/* MoleculeLabelColorPicker: label on its own row, then color picker +
   hex input + reset button share the row below. The base .molecule rule
   (line 4353) sets flex-direction: column — we replace it with a 2-row
   grid via the higher-specificity .molecule.color-picker-molecule
   selector. */
.molecule.color-picker-molecule {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: stretch;
  margin-bottom: 0.6rem;
  box-sizing: border-box;
}

.molecule.color-picker-molecule > label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--clr-text-primary);
}

.molecule.color-picker-molecule > input[type="color"] {
  width: 2.2rem;
  height: 1.85rem;
  padding: 2px;
  border: 1px solid var(--clr-border);
  border-radius: 0.3rem;
  background: var(--clr-surface-1);
  cursor: pointer;
  box-sizing: border-box;
}

.molecule.color-picker-molecule > input[type="text"] {
  width: 100%;
  min-width: 6rem;
  height: 1.85rem;
  padding: 0.2rem 0.5rem;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.8rem;
  box-sizing: border-box;
  margin-right: 0.4rem;
}

.molecule.color-picker-molecule > button {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
  align-self: stretch;
}

.molecule.color-picker-molecule > button img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/* Branding-preview badge variants — pick up the local data-theme overrides
   set by OrganismsBrandingPreview's inline style. */
.badge-success,
.badge-danger,
.badge-accent {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.badge-success {
  background-color: var(--clr-success);
  color: var(--clr-text-inverse);
}

.badge-danger {
  background-color: var(--clr-danger);
  color: var(--clr-text-inverse);
}

.badge-accent {
  background-color: var(--clr-accent);
  color: var(--clr-text-inverse);
}

/* ── Branding-preview shell ──────────────────────────────────────────
   The preview is a self-contained "mini-app" that paints itself with
   the org's chosen primitives via inline CSS variables on .branding-
   preview-shell. The header strip stays in the page-level theme so
   "current preview mode" is unambiguous. */

.branding-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.25rem;
}

.branding-preview-theme-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  letter-spacing: 0.02em;
}

.branding-preview-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px dashed var(--clr-border);
  border-radius: 0.75rem;
  background-color: var(--clr-base);
  color: var(--clr-text-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.branding-preview-caption {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-secondary);
  margin: 0.25rem 0 -0.25rem 0.1rem;
}

.branding-preview-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  background-color: var(--clr-surface-1);
  color: var(--clr-text-primary);
}

.branding-preview-card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--clr-text-primary);
}

.branding-preview-card p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  line-height: 1.45;
}

.branding-preview-card a {
  color: var(--clr-accent);
  font-size: 0.875rem;
  text-decoration: underline;
}

.branding-preview-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.branding-preview-buttons .btn-primary,
.branding-preview-buttons .btn-secondary {
  width: auto;
  min-width: max-content;
  padding: 0.5rem 1.1rem;
  border-radius: 0.35rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.branding-preview-buttons .btn-primary {
  background-color: var(--clr-accent-btn);
  color: var(--clr-text-inverse);
  border: none;
}

.branding-preview-buttons .btn-secondary {
  background-color: transparent;
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border);
  font-weight: 500;
}

.branding-preview-status-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  background-color: var(--clr-surface-3);
}

.branding-preview-input-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  background-color: var(--clr-surface-1);
}

.branding-preview-input-block label {
  font-size: 0.8rem;
  color: var(--clr-text-secondary);
}

.branding-preview-input-block input[type="text"] {
  background-color: var(--clr-base);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-primary);
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 0.875rem;
}

/* ─── Condition expression editor (recursive AND/OR tree) ───────────── */

.condition-expression-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.condition-leaf {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  padding: 6px 0;
}

/* Every field in a condition row shares one baseline. The fields are a mix of
   widget types (label+select, label+input-with-mic, a bare NOT toggle and a
   delete button) whose default vertical spacing differs: `.molecule` carries a
   14px bottom margin and the value `<input>` keeps a 10px bottom margin inside
   `.input-with-action` (the `.molecule > input` reset can't reach it). Stripping
   those margins lets `align-items: end` line every control up on the same row. */
.condition-leaf > .molecule {
  margin-bottom: 0;
}

.condition-leaf .molecule .input-with-action > input {
  margin-bottom: 0;
}

/* The NOT toggle and the delete button have no label above them, so let their
   control sit on the same baseline as the dropdowns/value input rather than
   bottom-anchoring the whole (short) molecule box. */
.condition-leaf > .molecule:has(> .checkbox-container) {
  padding-bottom: 4px;
}

.condition-group {
  padding: 8px;
  border: 1px solid var(--clr-border, #ccc);
  border-radius: 6px;
  margin: 4px 0;
}

.condition-group-children {
  padding-left: 16px;
  border-left: 2px solid var(--clr-border, #ccc);
  margin: 8px 0;
}

/* ─── Condition step card (workflow list view) ───────────────────────── */

.condition-card { border-left: 3px solid var(--clr-accent, #0078d4); }
.condition-summary { font-family: monospace; font-size: 0.9em; color: var(--clr-text-primary, inherit); }
.target-link { color: var(--clr-accent, #0078d4); text-decoration: none; cursor: pointer; }
.target-link:hover { text-decoration: underline; }
.incoming-jumps-badge { font-size: 0.85em; color: var(--clr-text-secondary, #666); margin-top: 8px; }

/* ─── View toggle (Panel / Ablaufdiagramm) ───────────────────────────── */

.atom-view-toggle { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.atom-view-toggle .toggle-pill {
    padding: 6px 14px;
    border: 1px solid var(--clr-border, #ccc);
    background: transparent;
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
}
.atom-view-toggle .toggle-pill.active {
    background: var(--clr-accent, #0078d4);
    color: white;
    border-color: var(--clr-accent, #0078d4);
}

/* ─── Workflow graph view (read-only flow diagram) ───────────────────── */

.workflow-graph-container { position: relative; width: 100%; min-height: 400px; }
.workflow-graph-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.graph-node {
    position: absolute;
    width: 220px;
    height: 64px;
    background: var(--clr-surface-2);
    color: var(--clr-text-primary);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
    z-index: 1;
}
.graph-node:hover { border-color: var(--clr-accent, #0078d4); }
.graph-node-icon { font-size: 1.5em; margin-right: 12px; }
.graph-node-label { font-weight: bold; font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; }
.graph-node-end {
    position: absolute;
    width: 80px;
    height: 32px;
    background: var(--clr-text-secondary, #666);
    color: white;
    border-radius: 16px;
    text-align: center;
    line-height: 32px;
    z-index: 1;
}

/* ── AtomEmojiPicker ─────────────────────────────────────────────────────── */
.emoji-picker { display: flex; flex-direction: column; gap: 6px; }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-picker-cell { background: var(--clr-surface-1, #f4f4f4); border: 1px solid var(--clr-border, #ddd); border-radius: 4px; padding: 4px; font-size: 18px; cursor: pointer; }
.emoji-picker-cell:hover { background: var(--clr-surface-2, #e8e8e8); }
.emoji-picker-input { padding: 6px; border: 1px solid var(--clr-border, #ddd); border-radius: 4px; font-size: 14px; }

/* ── MoleculeIconPicker ──────────────────────────────────────────────────── */
.icon-picker-toggle { display: flex; gap: 4px; margin-bottom: 6px; }
.icon-picker-toggle-btn { padding: 4px 10px; border: 1px solid var(--clr-border, #ddd); background: var(--clr-base, #fff); border-radius: 4px; cursor: pointer; color: var(--clr-text-primary); }
.icon-picker-toggle-btn.active { background: var(--clr-accent, #2266cc); color: var(--clr-text-on-accent, #fff); }
.emoji-picker.hidden { display: none; }

/* ── Persona organisms ───────────────────────────────────────────────────── */
.result-card-persona-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; margin: 4px 0 8px 0;
    border-left: 3px solid var(--clr-accent, #2266cc);
    background: var(--clr-surface-1, #f6f6f6);
    border-radius: 4px;
    font-size: 13px;
}
/* Defeat the source-order tie with the global `.hidden` utility (display:none),
   which is declared earlier in this file and would otherwise lose to the
   single-class `display:flex` above — leaving an empty accent bar when the
   step ran without a configured persona. */
.result-card-persona-badge.hidden { display: none; }
.result-card-persona-icon-img { max-width: 22px; max-height: 22px; border-radius: 3px; }
.result-card-persona-icon-emoji { font-size: 18px; }
.result-card-persona-name { font-weight: 600; color: var(--clr-text-primary, #222); }
.result-card-persona-role { color: var(--clr-text-secondary, #666); }
.result-card-persona-role::before { content: "·"; margin: 0 6px; color: var(--clr-text-secondary, #aaa); }

.msg-persona-badge {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0 4px 0;
    font-size: 12px;
    color: var(--clr-text-secondary, #666);
}
/* Same source-order fix as .result-card-persona-badge.hidden above. */
.msg-persona-badge.hidden { display: none; }
.msg-persona-icon-img { max-width: 18px; max-height: 18px; border-radius: 3px; }
.msg-persona-icon-emoji { font-size: 14px; }
.msg-persona-name { font-weight: 600; color: var(--clr-text-primary, #222); }
.msg-persona-role::before { content: "·"; margin: 0 4px; color: var(--clr-text-secondary, #aaa); }

.persona-list-table { width: 100%; border-collapse: collapse; }
.persona-list-table th, .persona-list-table td { border-bottom: 1px solid var(--clr-border, #ddd); padding: 6px; text-align: left; }
.persona-list-icon-img { max-width: 24px; max-height: 24px; vertical-align: middle; }
.persona-supervisor-badge { display: inline-block; background: var(--clr-accent, #2266cc); color: var(--clr-text-on-accent, #fff); padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.persona-references-list { margin: 8px 0 0 16px; }

/* ── Dictation: Inline mic button next to a text input/textarea ── */
.input-with-action {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.input-with-action > input,
.input-with-action > textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.input-with-action > .button-icon {
  flex: 0 0 auto;
  margin-right: 0;
}

.input-with-action:has(> textarea) {
  align-items: flex-end;
}

.input-with-action:has(> input:disabled) > .button-icon,
.input-with-action:has(> input:read-only) > .button-icon,
.input-with-action:has(> textarea:disabled) > .button-icon,
.input-with-action:has(> textarea:read-only) > .button-icon {
  display: none;
}

.button-icon.dictation-active {
  border-color: var(--clr-danger, #ef4444);
  background: rgba(239, 68, 68, 0.12);
  animation: dictation-pulse 1.2s ease-in-out infinite;
}

.button-icon.dictation-active img {
  opacity: 1;
}

@keyframes dictation-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Entity Versions Dialog ────────────────────────────────────────────────── */
.entity-versions-list {
  padding: 4px 0;
}

.entity-versions-empty {
  padding: 12px 8px;
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

.entity-versions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.entity-versions-table th,
.entity-versions-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--clr-border);
}

.entity-versions-table thead th {
  color: var(--clr-text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--clr-border-accent, var(--clr-border));
}

.entity-version-row-current {
  font-weight: 600;
  background: color-mix(in srgb, var(--clr-accent) 6%, transparent);
}

/* Star column — narrow, centred. Override the table-wide cell padding so the
 * column shrinks to roughly the width of the star glyph. */
.entity-versions-table th.entity-version-col-star,
.entity-versions-table td.entity-version-col-star {
  width: 1.25rem;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  color: var(--clr-amber, #f59e0b);
}

.entity-version-col-actions {
  white-space: nowrap;
  text-align: right;
}

/* ── Function Editor — Read-Only Preview Banner ────────────────────────────── */
.function-editor-readonly-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--clr-amber, #f59e0b) 14%, var(--clr-surface-1));
  border: 1px solid color-mix(in srgb, var(--clr-amber, #f59e0b) 40%, var(--clr-border));
  border-radius: 6px;
  color: var(--clr-text-primary);
  font-size: 0.9rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.function-editor-readonly-label {
  flex: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--clr-amber, #f59e0b) 80%, var(--clr-text-primary));
}

.function-editor-readonly-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.function-editor-readonly-restore-btn {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}

.function-editor-readonly-restore-btn:hover {
  background: color-mix(in srgb, var(--clr-accent) 16%, transparent);
  border-color: var(--clr-accent);
  color: var(--clr-accent-light, var(--clr-accent));
}

/* Disable all form inputs while the editor is in read-only preview mode.
 * The ACE code editor is NOT covered here — it gets ACE's native
 * setReadOnly(true) so scrolling / selection / copy keep working. */
.function-editor-readonly input,
.function-editor-readonly textarea,
.function-editor-readonly select {
  pointer-events: none;
  opacity: 0.55;
}

/* Visual cue only on the ACE editor — keep it interactive for scroll/copy. */
.function-editor-readonly .ace_editor {
  opacity: 0.75;
}

/* ── Workflow Editor — Read-Only Preview Banner ────────────────────────────── */
.workflow-editor-readonly-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--clr-amber, #f59e0b) 14%, var(--clr-surface-1));
  border: 1px solid color-mix(in srgb, var(--clr-amber, #f59e0b) 40%, var(--clr-border));
  border-radius: 6px;
  color: var(--clr-text-primary);
  font-size: 0.9rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.workflow-editor-readonly-label {
  flex: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--clr-amber, #f59e0b) 80%, var(--clr-text-primary));
}

.workflow-editor-readonly-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-editor-readonly-restore-btn {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}

.workflow-editor-readonly-restore-btn:hover {
  background: color-mix(in srgb, var(--clr-accent) 16%, transparent);
  border-color: var(--clr-accent);
  color: var(--clr-accent-light, var(--clr-accent));
}

/* Disable form inputs and most buttons while the workflow editor is in
 * read-only preview mode. Step-edit buttons (title "Bearbeiten") and the
 * version dialog's own action buttons remain interactive so the user can
 * open a step in read-only preview too. */
.workflow-editor-readonly input,
.workflow-editor-readonly textarea,
.workflow-editor-readonly select,
.workflow-editor-readonly button:not(.entity-version-action-btn):not([title="Bearbeiten"]) {
  pointer-events: none;
  opacity: 0.55;
}

/* ── Workflow Step Editor — Version Preview Chrome ─────────────────────────── */
.workflow-step-readonly-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--clr-amber, #f59e0b) 14%, var(--clr-surface-1));
  border-bottom: 1px solid color-mix(in srgb, var(--clr-amber, #f59e0b) 40%, var(--clr-border));
  color: var(--clr-text-primary);
  font-size: 0.9rem;
  position: sticky;
  top: 0;
  z-index: 60000;
}

.workflow-step-readonly-label {
  flex: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--clr-amber, #f59e0b) 80%, var(--clr-text-primary));
}

.workflow-step-readonly-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Step editor preview mode.
 *
 * Buttons/checkboxes/selects: blocked via pointer-events.
 * The banner buttons keep working (they are .entity-version-action-btn) and
 * the page-header back button (#page-header-back-btn) stays active so the
 * user can navigate away from the preview at any time.
 *
 * Text inputs / textareas / ACE editors: NOT blocked via pointer-events,
 * because that would also kill scrolling and text selection. They are made
 * non-editable in JS (`element.readOnly = true` for natives,
 * `editor.setReadOnly(true)` for ACE). The CSS only dims them visually. */
.workflow-step-readonly select,
.workflow-step-readonly input[type="checkbox"],
.workflow-step-readonly input[type="radio"],
.workflow-step-readonly input[type="file"],
.workflow-step-readonly button:not(.entity-version-action-btn):not(#page-header-back-btn) {
  pointer-events: none;
  opacity: 0.6;
}

.workflow-step-readonly input[type="text"],
.workflow-step-readonly input:not([type]),
.workflow-step-readonly textarea {
  opacity: 0.85;
  background-color: color-mix(in srgb, var(--clr-surface-2) 60%, transparent);
}

.workflow-step-readonly .ace_editor {
  opacity: 0.85;
}

.save-target-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    height: 360px;
}
.save-target-picker-grid > * {
    /* Without min-width:0 grid children clamp to content width instead of the 1fr/1.4fr cells. */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.save-target-list {
    border: 1px solid var(--border-color, #555);
    border-radius: 4px;
    padding: 6px;
    height: 280px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}
.save-target-list.disabled {
    opacity: 0.45;
    pointer-events: none;
    background: rgba(255,255,255,0.02);
}
.save-target-list-empty-hint {
    padding: 12px 8px;
    font-style: italic;
    opacity: 0.7;
}
.save-target-list-row {
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}
.save-target-list-row:hover {
    background: rgba(255,255,255,0.05);
}
.save-target-list-row.selected {
    background: rgba(120,180,255,0.18);
}
.save-target-picker-grid input[id="save-target-search"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
}

/* ---- In-app help chatbot ---- */
.help-widget-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--clr-accent-btn, #1d4ed8);
    color: var(--clr-text-inverse, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(var(--clr-accent-rgb, 59, 130, 246), 0.40);
    z-index: 10000;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.help-widget-launcher:hover {
    background: var(--clr-accent-btn-hover, #1e40af);
    box-shadow: 0 6px 20px rgba(var(--clr-accent-rgb, 59, 130, 246), 0.55);
}
.help-widget-launcher svg { width: 26px; height: 26px; }

/* When the help chatbot has an avatar, show it as the launcher button (the
   round button clips the cover image); the "?" fallback icon is hidden. */
.help-widget-launcher.help-widget-has-avatar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.help-widget-launcher.help-widget-has-avatar svg { display: none; }

.help-chat-panel {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 400px;
    height: 600px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    background: var(--clr-surface-mid, #1e293b);
    border-radius: 12px;
    border: 1px solid var(--clr-border-accent, rgba(59, 130, 246, 0.22));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--clr-border-accent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10001;
}
.help-chat-panel[hidden] { display: none; }

.help-chat-panel--maximized {
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}

.help-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--clr-accent-btn, #1d4ed8);
    color: var(--clr-text-inverse, #ffffff);
    font-weight: 600;
    flex-shrink: 0;
}

.help-chat-close {
    background: transparent;
    border: none;
    color: var(--clr-text-inverse, #ffffff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.85;
    transition: opacity 0.1s ease;
}
.help-chat-close:hover { opacity: 1; }

.help-chat-maximize {
    background: transparent;
    border: none;
    color: var(--clr-text-inverse, #ffffff);
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    /* Push the maximize button (and the close button after it) to the right,
       so both actions sit together at the end of the header next to the title. */
    margin-left: auto;
    transition: opacity 0.1s ease;
}
.help-chat-maximize:hover { opacity: 1; }

.help-chat-iframe {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 0;
}

/* Nav-rail chip for the help button (cyan tone — distinct from chat/blue and ai/violet) */
.nav-rail .chip-help { background: rgba(var(--clr-white-rgb), 0.07); color: rgba(var(--clr-chip-cyan-rgb), 0.70); }
.nav-rail .rail-btn.active-help .chip-help { background: rgba(var(--clr-cyan-rgb), 0.25); color: var(--clr-cyan-soft); }

/* --- Benachrichtigungssystem: Inbox --- */
/* Cockpit-Content-Container linksbündig auf volle Breite strecken
   (Basis-.container-top-bottom zentriert sonst auf Inhaltsbreite). */
#notification-content { align-items: stretch; }
.notification-inbox { display: flex; gap: 16px; min-height: 60vh; padding: 16px; width: 100%; box-sizing: border-box; }
.notification-list { width: 40%; max-width: 420px; border: 1px solid var(--clr-border); border-radius: 8px; overflow-y: auto; background: var(--background-color-card); color: var(--font-color-card); }
.notification-row { padding: 10px 12px; border-bottom: 1px solid var(--clr-border); cursor: pointer; }
.notification-row:hover { background: var(--clr-surface-3); }
.notification-row.selected { background: var(--clr-surface-3); border-left: 3px solid var(--clr-accent); }
.notification-row.unread .notification-row-subject { font-weight: 700; }
.notification-row-subject { font-size: 14px; color: var(--clr-text-primary); }
.notification-row-meta { font-size: 12px; color: var(--clr-text-muted); margin-top: 2px; }
.notification-reading { flex: 1; border: 1px solid var(--clr-border); border-radius: 8px; background: var(--background-color-card); color: var(--font-color-card); padding: 16px; }
.notification-reading-head h3 { margin: 0 0 4px; color: var(--clr-text-primary); }
.notification-reading-meta { font-size: 12px; color: var(--clr-text-muted); margin-bottom: 12px; }
.notification-reading-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.notification-reading-body { white-space: pre-wrap; line-height: 1.5; color: var(--clr-text-secondary); }
.notification-empty { color: var(--clr-text-muted); padding: 16px; }

[data-theme="light"] .nav-rail .chip-help { background: rgba(var(--clr-black-rgb), 0.05); color: rgba(var(--clr-chip-cyan-rgb), 0.70); }

/* --- Benachrichtigungssystem: Cockpit-Banner (Toast-Overlay oben rechts) --- */
.notification-banner-stack { position: fixed; top: 16px; right: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; }
.notification-banner-card { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--background-color-card); color: var(--font-color-card);
  border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-accent); border-radius: 6px; padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.notification-banner-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.notification-banner-sub { font-size: 12px; color: var(--clr-text-muted); }
.notification-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Benachrichtigungssystem: Admin --- */
#notification-admin-content { align-items: stretch; }
.notification-admin { display: flex; flex-direction: column; gap: 24px; padding: 16px; width: 100%; box-sizing: border-box; }
.notification-compose { display: flex; flex-direction: column; gap: 6px; background: var(--background-color-card); color: var(--font-color-card); border: 1px solid var(--clr-border); border-radius: 8px; padding: 16px; }
.notification-compose label { font-size: 13px; color: var(--clr-text-secondary); margin-top: 6px; }
.notification-input, .notification-textarea { padding: 8px; border: 1px solid var(--clr-border); border-radius: 6px; font: inherit; background: var(--background-color-input); color: var(--font-color-input); }
.notification-compose-editor { display: flex; gap: 12px; align-items: stretch; }
.notification-compose-editor > .notification-textarea { flex: 1; min-width: 0; resize: vertical; min-height: 240px; }
.notification-compose-preview { flex: 1; min-width: 0; border: 1px solid var(--clr-border); border-radius: 6px; padding: 8px 12px; background: var(--background-color-input); overflow-y: auto; max-height: 420px; }
@media (max-width: 800px) { .notification-compose-editor { flex-direction: column; } .notification-compose-preview { max-height: 240px; } }
.notification-compose .button { margin-top: 12px; align-self: flex-start; }
.notification-sent-list { display: flex; flex-direction: column; gap: 8px; }
.notification-sent-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--background-color-card); color: var(--font-color-card); border: 1px solid var(--clr-border); border-radius: 6px; padding: 8px 12px; }
.notification-sent-row.inactive { opacity: .55; }
.notification-sent-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Benachrichtigungssystem: gerenderter Markdown-Inhalt --- */
.notification-markdown { color: var(--font-color-card); white-space: normal; overflow-wrap: anywhere; }
.notification-markdown > :first-child { margin-top: 0; }
.notification-markdown > :last-child { margin-bottom: 0; }
.notification-markdown h1 { font-size: 1.5rem; line-height: 1.2; text-align: left; margin: .5em 0 .3em; }
.notification-markdown h2 { font-size: 1.25rem; line-height: 1.2; text-align: left; margin: .5em 0 .3em; }
.notification-markdown h3 { font-size: 1.1rem; line-height: 1.2; text-align: left; margin: .5em 0 .3em; }
.notification-markdown h4 { font-size: 1rem; text-align: left; margin: .5em 0 .3em; }
.notification-markdown p { margin: .4em 0; }
.notification-markdown ul, .notification-markdown ol { margin: .4em 0; padding-left: 1.4em; }
.notification-markdown li { margin: .2em 0; }
.notification-markdown a { color: var(--clr-accent); text-decoration: underline; }
.notification-markdown code { font-family: monospace; background: var(--clr-surface-3); padding: 0 .3em; border-radius: 4px; }
.notification-markdown pre { background: var(--clr-surface-3); padding: 10px; border-radius: 6px; overflow-x: auto; }
.notification-markdown pre code { background: none; padding: 0; }
.notification-markdown blockquote { margin: .4em 0; padding-left: .8em; border-left: 3px solid var(--clr-border); color: var(--clr-text-muted); }
.notification-markdown img { max-width: 100%; height: auto; }
.notification-markdown table { border-collapse: collapse; }
.notification-markdown th, .notification-markdown td { border: 1px solid var(--clr-border); padding: 4px 8px; }
/* Banner: gerendertes Markdown kompakt halten */
.notification-banner-body { font-size: 13px; max-height: 6.5em; overflow: hidden; }