/* =====================================================================
   KI-Agenten Dashboard – Stylesheet (v6)
   Dunkles Dashboard + 3D-Büro (Hero) + Aufgaben-Chat + Team-Konversation
   + Einzel-Agent-Chat + Live-Metriken.
   ===================================================================== */

:root {
  --bg-0: #070a12; --bg-1: #0b1020;
  --glass: rgba(20, 28, 48, 0.55); --glass-2: rgba(120, 160, 255, 0.05);
  --glass-brd: rgba(120, 160, 255, 0.14);
  --txt: #e8edff; --txt-dim: #8c98ba;
  --neon: #38e1ff; --neon-2: #8a5bff; --neon-3: #2bf5b0; --warn: #ffb454; --danger: #ff5c7a;
  --radius: 18px; --shadow-glow: 0 0 24px rgba(56, 225, 255, 0.25);
  --font: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif; --gap: 22px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); color: var(--txt); background: var(--bg-0); display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; overflow-x: hidden; }
.bg-glow { position: fixed; inset: 0; z-index: -1; background: radial-gradient(640px 420px at 12% 6%, rgba(56,225,255,0.10), transparent 60%), radial-gradient(720px 520px at 88% 14%, rgba(138,91,255,0.12), transparent 60%), radial-gradient(640px 640px at 50% 100%, rgba(43,245,176,0.07), transparent 60%), var(--bg-0); animation: hueShift 22s ease-in-out infinite alternate; }
@keyframes hueShift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(26deg); } }

.card { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 40px rgba(0,0,0,0.35); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.card-head h2 { font-size: 15px; font-weight: 650; letter-spacing: .2px; }
.card-tag { font-size: 11px; color: var(--neon); padding: 3px 10px; border-radius: 999px; background: rgba(56,225,255,0.10); border: 1px solid rgba(56,225,255,0.25); white-space: nowrap; }
.card-tag.pulse { color: var(--neon-3); border-color: rgba(43,245,176,.3); background: rgba(43,245,176,.1); }

.sidebar { background: linear-gradient(180deg, rgba(12,18,36,.92), rgba(8,12,24,.92)); border-right: 1px solid var(--glass-brd); padding: 22px 16px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #04121a; background: linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: var(--shadow-glow); }
.brand-text { display: flex; flex-direction: column; } .brand-name { font-weight: 700; font-size: 15px; } .brand-sub { font-size: 11px; color: var(--txt-dim); }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid transparent; color: var(--txt-dim); padding: 11px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; font-family: var(--font); text-align: left; transition: all .2s ease; }
.nav-item .nav-icon { width: 18px; text-align: center; opacity: .9; }
.nav-item:hover { color: var(--txt); background: rgba(120,160,255,0.06); }
.nav-item.active { color: var(--txt); background: rgba(56,225,255,0.10); border-color: rgba(56,225,255,0.3); box-shadow: var(--shadow-glow); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt-dim); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neon-3); box-shadow: 0 0 10px var(--neon-3); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .4; } }

.main { padding: 30px 40px 60px; min-width: 0; max-width: 1640px; margin: 0 auto; width: 100%; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; }
.page-title { font-size: 25px; font-weight: 750; } .page-sub { color: var(--txt-dim); font-size: 13px; margin-top: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; } .clock { font-variant-numeric: tabular-nums; color: var(--neon); font-size: 14px; letter-spacing: 1px; }

.btn { font-family: var(--font); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; background: rgba(120,160,255,.08); color: var(--txt); border-color: var(--glass-brd); }
.btn:disabled { opacity: .5; cursor: not-allowed; } .btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { color: #04121a; background: linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: var(--shadow-glow); border-color: transparent; }
.btn-primary:hover { box-shadow: 0 0 30px rgba(56,225,255,.45); }
.btn-danger { background: rgba(255,92,122,0.12); border-color: rgba(255,92,122,.4); color: var(--danger); }
.btn-sm { padding: 7px 12px; font-size: 12px; }

.view { display: none; animation: fadeUp .35s ease both; } .view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.stat-card { display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; background: radial-gradient(circle, rgba(56,225,255,.12), transparent 70%); }
.stat-label { font-size: 12px; color: var(--txt-dim); } .stat-value { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; color: var(--txt-dim); font-weight: 600; margin-left: 2px; } .stat-trend { font-size: 11px; } .stat-trend.up { color: var(--neon-3); } .stat-trend.down { color: var(--neon); }

.work-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); margin-bottom: var(--gap); align-items: stretch; }
.office-card { display: flex; flex-direction: column; }
.zone-legend { display: flex; gap: 8px; }
.zone-chip { font-size: 11px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--glass-brd); color: var(--txt-dim); }
.zone-chip.work { border-color: rgba(185,130,79,.55); color: #d8a672; } .zone-chip.meet { border-color: rgba(135,148,171,.55); color: #aebacf; } .zone-chip.srv { border-color: rgba(46,242,166,.4); color: #74e0b0; }
.collab-stage { position: relative; width: 100%; height: 460px; border-radius: 14px; overflow: hidden; background: #ecd9c2; border: 1px solid rgba(180, 140, 110, 0.35); box-shadow: inset 0 2px 26px rgba(120, 70, 40, 0.14); }
.room { position: absolute; inset: 0; z-index: 0; } .room-svg { width: 100%; height: 100%; display: block; }

.canvas-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 9px; } .legend-item.absent { opacity: .42; }
.legend-avatar { width: 22px; height: 34px; display: block; } .legend-avatar .char-svg { width: 100%; height: 100%; }
.legend-text { display: flex; flex-direction: column; line-height: 1.2; } .legend-text b { font-size: 12px; color: var(--txt); } .legend-text small { font-size: 10.5px; color: var(--txt-dim); }

/* CHAT */
.chat-card { display: flex; flex-direction: column; min-height: 460px; }
.chat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .chat-head h2 { font-size: 15px; font-weight: 650; }
.chat-status { font-size: 11px; color: var(--txt-dim); } .chat-status.ok { color: var(--neon-3); } .chat-status.off { color: var(--danger); }
/* Chat-Toolbar */
.chat-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-tool { font-family: var(--font); font-size: 11.5px; color: var(--txt-dim); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 8px; padding: 4px 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.chat-tool:hover { color: var(--txt); border-color: var(--neon); }
.chat-tool[aria-expanded="true"] { color: var(--neon); border-color: var(--neon); }
.chat-tool#chatSpeakToggle { font-size: 14px; padding: 3px 8px; }
.chat-tool#chatSpeakToggle.off { opacity: .55; }
.chat-tool:disabled { opacity: .4; cursor: not-allowed; }
.chat-tool.agent[aria-pressed="true"] { color: var(--neon-3); border-color: rgba(43,245,176,.45); background: rgba(43,245,176,.1); }
.chat-tool.agent.off { opacity: .6; }
/* Manager-Arbeitsschritte */
.msg-steps { display: flex; flex-direction: column; gap: 4px; margin: 9px 0; padding: 9px 11px; border-left: 2px solid var(--neon-2); background: rgba(138,91,255,.06); border-radius: 9px; }
.msg-steps .step { font-size: 11.5px; line-height: 1.45; word-break: break-word; }
.msg-steps .step.tool { color: var(--neon); font-variant-numeric: tabular-nums; }
.msg-steps .step.res { color: var(--neon-3); }
.msg-steps .step.say { color: var(--txt-dim); font-style: italic; }
/* Verlauf-Panel */
.chat-history-panel { border: 1px solid var(--glass-brd); border-radius: 11px; background: rgba(8,12,24,.7); margin-bottom: 10px; max-height: 210px; overflow-y: auto; animation: fadeUp .2s ease both; }
.chat-history-panel[hidden] { display: none; }
.ch-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid rgba(120,160,255,.07); cursor: pointer; transition: background .15s; }
.ch-item:last-child { border-bottom: 0; }
.ch-item:hover { background: var(--glass-2); }
.ch-item.active { box-shadow: inset 3px 0 0 var(--neon); }
.ch-title { flex: 1; font-size: 12.5px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-date { font-size: 10.5px; color: var(--txt-dim); white-space: nowrap; }
.ch-del { background: none; border: 0; color: var(--txt-dim); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 6px; transition: color .15s, background .15s; }
.ch-del:hover { color: var(--danger); background: rgba(255,92,122,.12); }
.ch-empty { padding: 16px; text-align: center; color: var(--txt-dim); font-size: 12px; }
/* Sidebar-Foot + Logout */
.sidebar-foot { display: flex; flex-direction: column; gap: 10px; }
.sf-status { display: flex; align-items: center; gap: 8px; }
.logout-btn { font-family: var(--font); font-size: 12px; color: var(--txt-dim); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 9px; padding: 7px 10px; cursor: pointer; text-align: left; transition: color .15s, border-color .15s, background .15s; }
.logout-btn:hover { color: var(--danger); border-color: var(--danger); }
/* Login-Overlay */
body.locked { overflow: hidden; }
.auth-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(900px 600px at 50% 30%, rgba(20,28,48,.7), rgba(7,10,18,.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-overlay[hidden] { display: none; }
.auth-card { width: min(380px, 94vw); background: var(--bg-1); border: 1px solid var(--glass-brd); border-radius: 16px; padding: 26px 24px; box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 14px; animation: fadeUp .3s ease both; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.auth-brand-txt { display: flex; flex-direction: column; }
.auth-title { font-size: 17px; font-weight: 700; }
.auth-sub { font-size: 11.5px; color: var(--txt-dim); }
.auth-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--txt-dim); }
.auth-field input { font-family: var(--font); font-size: 14px; color: var(--txt); background: rgba(8,12,24,.7); border: 1px solid var(--glass-brd); border-radius: 10px; padding: 11px 12px; outline: none; transition: border .2s, box-shadow .2s; }
.auth-field input:focus { border-color: var(--neon); box-shadow: var(--shadow-glow); }
.auth-msg { min-height: 16px; font-size: 12px; color: var(--txt-dim); }
.auth-msg.error { color: var(--danger); }
.auth-msg.ok { color: var(--neon-3); }
.auth-submit { margin-top: 4px; padding: 11px; font-size: 14px; }
.chat-messages { flex: 1; min-height: 180px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.msg { max-width: 94%; animation: fadeUp .25s ease both; } .msg.user { align-self: flex-end; }
.msg.user .msg-body { background: linear-gradient(135deg, var(--neon), var(--neon-2)); color: #04121a; border-radius: 12px 12px 4px 12px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.msg.bot .msg-body { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 12px 12px 12px 4px; padding: 11px 12px; font-size: 13px; }
.msg.thinking .msg-body { color: var(--txt-dim); font-style: italic; } .msg.error .msg-body { border-color: rgba(255,92,122,.5); }
.msg-head { font-weight: 700; font-size: 12px; color: var(--neon); margin-bottom: 7px; }
.msg-agents { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.msg-agent { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; } .ma-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; box-shadow: 0 0 6px currentColor; } .ma-txt { line-height: 1.35; }
.msg-meeting { font-size: 12px; color: var(--txt-dim); margin: 5px 0; }
.msg-final { margin-top: 8px; border-top: 1px solid var(--glass-brd); padding-top: 8px; }
.mf-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--neon-3); } .mf-text { font-size: 13px; margin-top: 3px; line-height: 1.45; }
/* Markdown im Antwort-Text */
.mf-text h4 { font-size: 13.5px; font-weight: 700; margin: 9px 0 4px; color: var(--txt); }
.mf-text p { margin: 4px 0; }
.mf-text ul, .mf-text ol { margin: 4px 0 4px 20px; } .mf-text li { margin: 2px 0; }
.mf-text code { background: rgba(8,12,24,.6); border: 1px solid var(--glass-brd); border-radius: 5px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.mf-text a { color: var(--neon); }
.mf-text hr { border: 0; border-top: 1px solid var(--glass-brd); margin: 9px 0; }
.mf-text strong { color: var(--txt); }
.md-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--glass-brd); padding: 5px 9px; text-align: left; white-space: nowrap; }
.md-table th { background: var(--glass-2); color: var(--txt); font-weight: 650; position: sticky; top: 0; }
.md-table tbody tr:nth-child(even) td { background: rgba(120,160,255,.03); }
.msg-metrics { margin-top: 6px; font-size: 11px; color: var(--neon-3); }
.msg-hint { font-size: 11px; color: var(--txt-dim); margin-top: 6px; }
.chat-examples { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 10px; }
.chat-example { font-size: 11px; color: var(--txt-dim); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 999px; padding: 4px 10px; cursor: pointer; font-family: var(--font); }
.chat-example:hover { color: var(--txt); border-color: var(--neon); }
.chat-input-row { display: flex; gap: 8px; align-items: stretch; }
.chat-input-row textarea { flex: 1; resize: none; font-family: var(--font); font-size: 13px; color: var(--txt); background: rgba(8,12,24,.6); border: 1px solid var(--glass-brd); border-radius: 11px; padding: 10px 12px; outline: none; transition: border .2s, box-shadow .2s; }
.chat-input-row textarea:focus { border-color: var(--neon); box-shadow: var(--shadow-glow); }
.btn-mic { background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--txt); font-size: 17px; padding: 0 12px; border-radius: 11px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.btn-mic:hover { border-color: var(--neon); }
.btn-mic.listening { border-color: var(--danger); color: var(--danger); background: rgba(255,92,122,.12); animation: micPulse 1.1s ease-in-out infinite; }
.btn-mic.unsupported { opacity: .4; cursor: not-allowed; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,92,122,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,92,122,0); } }
/* Bild-Anhang */
.chat-attach-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px; border: 1px dashed var(--glass-brd); border-radius: 11px; background: var(--glass-2); }
.chat-attach-preview[hidden] { display: none; }
.cap-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--glass-brd); }
.cap-remove { font-family: var(--font); font-size: 12px; color: var(--txt-dim); background: none; border: 1px solid var(--glass-brd); border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: color .15s, border-color .15s; }
.cap-remove:hover { color: var(--danger); border-color: var(--danger); }
.msg-img { max-width: 220px; max-height: 200px; border-radius: 10px; border: 1px solid var(--glass-brd); display: block; margin-bottom: 6px; }
.msg-utext { white-space: pre-wrap; }
/* Pelican Server-Ansicht */
.srv-head-actions { display: flex; align-items: center; gap: 10px; }
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.srv-card { background: linear-gradient(180deg, rgba(20,28,48,.6), rgba(11,16,32,.6)); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; animation: fadeUp .25s ease both; transition: border-color .15s, box-shadow .15s; }
.srv-card:hover { border-color: var(--neon); box-shadow: 0 0 18px rgba(56,225,255,.12); }
.srv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.srv-name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-state { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.srv-state.ok { color: var(--neon-3); background: rgba(43,245,176,.12); }
.srv-state.susp { color: var(--warn); background: rgba(255,180,84,.12); }
.srv-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; color: var(--txt-dim); }
.srv-desc { font-size: 11.5px; color: var(--txt-dim); border-top: 1px solid rgba(120,160,255,.07); padding-top: 7px; }
.srv-id { font-size: 10.5px; color: var(--txt-dim); opacity: .7; font-variant-numeric: tabular-nums; }
.srv-empty { color: var(--txt-dim); font-size: 12.5px; text-align: center; padding: 28px 8px; border: 1px dashed var(--glass-brd); border-radius: 11px; grid-column: 1 / -1; }
.metrics-strip { margin-top: 10px; font-size: 11px; color: var(--txt-dim); border-top: 1px solid var(--glass-brd); padding-top: 8px; }

/* LOWER GRID */
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.team-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 11px; background: var(--glass-2); border: 1px solid rgba(120,160,255,.07); cursor: pointer; transition: border-color .2s; }
.team-row:hover { border-color: var(--neon); }
.team-avatar { width: 22px; height: 34px; flex: none; } .team-avatar .char-svg { width: 100%; height: 100%; }
.team-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .team-info b { font-size: 13px; } .team-task { font-size: 11.5px; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-meta { font-size: 10.5px; color: var(--txt-dim); white-space: nowrap; }
.team-phase { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; flex: none; }
.team-phase.working { color: var(--neon-3); background: rgba(43,245,176,.12); } .team-phase.walking { color: var(--neon); background: rgba(56,225,255,.12); } .team-phase.meeting { color: #bda6ff; background: rgba(138,91,255,.16); } .team-phase.idle { color: var(--txt-dim); background: rgba(120,160,255,.08); }
.add-agent { display: flex; gap: 8px; margin-top: 12px; } .add-agent .select { flex: 1; } .add-hint { display: block; font-size: 11px; color: var(--txt-dim); margin-top: 6px; }
.log-card { display: flex; flex-direction: column; }
.activity-log { list-style: none; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; max-height: 300px; padding-right: 4px; }
.activity-log li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 9px 11px; border-radius: 10px; background: var(--glass-2); border-left: 2px solid var(--neon); animation: logIn .35s ease both; }
.activity-log li .log-time { color: var(--txt-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; } .activity-log li .log-agent { color: var(--neon); font-weight: 600; }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* GLOBALER TEAM-CHAT (aufklappbar) */
.global-chat { margin-top: var(--gap); }
.gc-head { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0; }
.gc-head h2 { font-size: 15px; font-weight: 650; }
.gc-toggle { margin-left: auto; color: var(--txt-dim); transition: transform .25s; }
.global-chat.open .gc-toggle { transform: rotate(180deg); }
.gc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; display: flex; flex-direction: column; gap: 8px; }
.global-chat.open .gc-body { max-height: 300px; overflow-y: auto; margin-top: 14px; }
.gc-sep { text-align: center; font-size: 10.5px; color: var(--txt-dim); opacity: .7; padding: 2px 0; }
.gc-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; animation: fadeUp .25s ease both; }
.gc-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; box-shadow: 0 0 6px currentColor; }
.gc-txt { line-height: 1.4; }

/* AGENTEN-VIEW */
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap); }
.agent-card { display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.agent-card:hover { transform: translateY(-3px); box-shadow: 0 0 26px rgba(138,91,255,.2); }
.agent-top { display: flex; align-items: center; gap: 12px; }
.agent-avatar { width: 40px; height: 56px; border-radius: 13px; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(255,243,228,.14), rgba(255,243,228,.04)); flex-shrink: 0; } .agent-avatar .char-svg { width: 100%; height: 100%; }
.agent-meta { display: flex; flex-direction: column; } .agent-name { font-weight: 700; font-size: 15px; } .agent-role { font-size: 12px; color: var(--txt-dim); }
.agent-state { margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 999px; } .agent-state.running { color: var(--neon-3); background: rgba(43,245,176,.1); border: 1px solid rgba(43,245,176,.3); } .agent-state.idle { color: var(--txt-dim); background: rgba(120,160,255,.06); border: 1px solid var(--glass-brd); }
.agent-current { font-size: 12px; color: var(--txt-dim); } .agent-current b { color: var(--txt); }
.agent-metrics { font-size: 11.5px; color: var(--txt-dim); }
.agent-actions { display: flex; gap: 8px; } .agent-actions .btn { flex: 1; }

/* EINZEL-AGENT-CHAT (Modal) */
.agent-modal { position: fixed; inset: 0; background: rgba(4,7,14,.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.agent-modal.open { display: flex; animation: fadeUp .2s ease both; }
.am-card { width: min(540px, 94vw); max-height: 82vh; background: var(--bg-1); border: 1px solid var(--glass-brd); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; }
.am-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--glass-brd); }
.am-avatar { width: 30px; height: 44px; flex: none; } .am-avatar .char-svg { width: 100%; height: 100%; }
.am-head h3 { font-size: 16px; flex: 1; }
.am-close { background: rgba(120,160,255,.08); border: 1px solid var(--glass-brd); color: var(--txt); border-radius: 9px; width: 30px; height: 30px; cursor: pointer; }
.am-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ac-empty { color: var(--txt-dim); font-size: 13px; }
.ac-item { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 12px; }
.ac-task { font-size: 13px; margin-bottom: 6px; } .ac-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.ac-out { font-size: 13px; color: var(--txt); background: rgba(56,225,255,.06); border-radius: 8px; padding: 8px 10px; line-height: 1.45; }

/* INPUTS / SETTINGS / TOASTS */
.input { font-family: var(--font); font-size: 13px; color: var(--txt); background: rgba(8,12,24,.6); border: 1px solid var(--glass-brd); border-radius: 11px; padding: 11px 13px; outline: none; transition: border .2s ease, box-shadow .2s ease; }
.input:focus { border-color: var(--neon); box-shadow: var(--shadow-glow); } .select { cursor: pointer; }
.settings-card { max-width: 620px; } .form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .form-row label { font-size: 13px; color: var(--txt-dim); }
.form-actions { display: flex; align-items: center; gap: 14px; } .settings-note { margin-top: 14px; font-size: 12px; color: var(--txt-dim); border-top: 1px solid var(--glass-brd); padding-top: 12px; }
.toast-wrap { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.toast { background: var(--glass); border: 1px solid var(--glass-brd); border-left: 3px solid var(--neon); backdrop-filter: blur(14px); padding: 12px 16px; border-radius: 12px; font-size: 13px; box-shadow: 0 12px 40px rgba(0,0,0,.4); animation: toastIn .3s ease both; min-width: 220px; }
.toast.success { border-left-color: var(--neon-3); } .toast.warn { border-left-color: var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) { .work-grid { grid-template-columns: 1fr; } .lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { body { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .nav { flex-direction: row; flex-wrap: wrap; } .sidebar-foot { margin-top: 0; } .collab-stage { height: 360px; } }

/* ---- 2D-Fallback-Figuren (nur falls kein WebGL; identisch zu v5) ---- */
.character { position: absolute; top: 0; left: 0; width: 64px; z-index: 2; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.char-body { width: 52px; height: 78px; } .char-svg { width: 100%; height: 100%; overflow: visible; } .character.face-left .char-svg { transform: scaleX(-1); }
.char-shadow { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 34px; height: 8px; border-radius: 50%; background: rgba(70, 40, 20, 0.28); filter: blur(2px); }
.char-label { margin-top: -2px; font-size: 10px; font-weight: 700; color: #5e4734; background: rgba(255, 255, 255, 0.82); padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.character.stopped { opacity: 0.5; filter: grayscale(0.55); }
.task-badge { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; z-index: 5; background: rgba(255,255,255,0.94); color: #3a2f26; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9px; max-width: 124px; white-space: nowrap; }
.task-badge .tb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .task-badge .tb-text { overflow: hidden; text-overflow: ellipsis; }
.char-svg .leg, .char-svg .arm { transform-box: fill-box; transform-origin: 50% 8%; }
.character.walking .char-svg .leg-l { animation: legSwing .42s ease-in-out infinite; } .character.walking .char-svg .leg-r { animation: legSwing .42s ease-in-out infinite; animation-delay: .21s; }
.character.walking .char-svg .arm-l { animation: armSwing .42s ease-in-out infinite; animation-delay: .21s; } .character.walking .char-svg .arm-r { animation: armSwing .42s ease-in-out infinite; }
@keyframes legSwing { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } } @keyframes armSwing { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.bubble { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: #fff; color: #333; padding: 6px 8px; border-radius: 12px; box-shadow: 0 4px 12px rgba(120, 70, 40, 0.2); z-index: 6; }
.bubble.text { font-size: 10px; font-weight: 700; max-width: 116px; text-align: center; }

/* ===== Integrationen + API-Monitor (v8) ===== */
.int-card { max-width: 820px; margin-top: var(--gap); }
.int-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--glass-brd); border-radius: 11px; background: var(--glass-2); margin-bottom: 8px; }
.int-info { display: flex; flex-direction: column; min-width: 0; }
.int-info b { font-size: 13.5px; } .int-info small { font-size: 11px; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-type { font-size: 10.5px; color: var(--neon); border: 1px solid rgba(56,225,255,.3); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.int-actions { display: flex; gap: 6px; flex: none; }
.int-form { margin-top: 14px; border-top: 1px solid var(--glass-brd); padding-top: 14px; }
.int-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 700px) { .int-grid { grid-template-columns: 1fr; } }
/* ===== Live-API-Lastverteilung (Load Balancer) ===== */
.lb-stage { position: relative; display: grid; grid-template-columns: 150px 1fr 230px; align-items: center; gap: 0; min-height: 320px; padding: 8px 4px; }
.lb-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.lb-col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; }
.lb-col-mid { align-items: center; }
.lb-col-dst { gap: 12px; }

.lb-node { background: linear-gradient(180deg, rgba(20,28,48,.85), rgba(11,16,32,.85)); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35); }
.lb-source { align-items: flex-start; border-color: rgba(56,225,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 22px rgba(56,225,255,.18); }
.lb-node-title { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--neon); }
.lb-node-sub { font-size: 12px; color: var(--txt-dim); }

/* Balancer */
.lb-balancer { position: relative; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-ring { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(56,225,255,.35); border-top-color: var(--neon); border-right-color: transparent; animation: lbSpin 3.2s linear infinite; }
.lb-ring2 { width: 70px; height: 70px; top: 19px; border-color: rgba(138,91,255,.3); border-bottom-color: var(--neon-2); border-left-color: transparent; animation: lbSpin 2.1s linear infinite reverse; }
.lb-core { position: absolute; top: 33px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #bff4ff, var(--neon) 45%, rgba(56,225,255,.25) 75%); box-shadow: 0 0 26px rgba(56,225,255,.7); animation: lbPulse 1.8s ease-in-out infinite; }
.lb-balancer.active .lb-core { animation-duration: .9s; }
.lb-bal-label { position: absolute; bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--neon); text-align: center; }
.lb-bal-sub { position: absolute; bottom: -8px; font-size: 10px; color: var(--txt-dim); }
@keyframes lbSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes lbPulse { 0%,100% { transform: translateX(-50%) scale(1); opacity: .92; } 50% { transform: translateX(-50%) scale(1.14); opacity: 1; } }

/* Zielknoten */
.lb-target { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(20,28,48,.85), rgba(11,16,32,.85)); border: 1px solid var(--glass-brd); border-radius: 11px; padding: 9px 12px; animation: fadeUp .3s ease both; transition: border-color .25s, box-shadow .25s, transform .12s; }
.lb-target.ok { border-left: 3px solid var(--neon-3); }
.lb-target.err { border-left: 3px solid var(--danger); }
.lb-target.flash { box-shadow: 0 0 22px rgba(56,225,255,.4); transform: translateX(-2px); }
.lb-tgt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lb-tgt-name { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tgt-meta { font-size: 10.5px; color: var(--txt-dim); }
.lb-tgt-meta .err-n { color: var(--danger); }
.lb-tgt-pct { font-size: 13px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.lb-empty { color: var(--txt-dim); font-size: 12.5px; text-align: center; padding: 24px 8px; border: 1px dashed var(--glass-brd); border-radius: 11px; }

/* Packets */
.lb-packet { fill: var(--neon); filter: drop-shadow(0 0 5px var(--neon)); }
.lb-packet.err { fill: var(--danger); filter: drop-shadow(0 0 5px var(--danger)); }

/* Stat-Karten */
.lb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.lb-stat { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lb-stat-label { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: var(--txt-dim); }
.lb-stat-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-stat-val.ok { color: var(--neon-3); }
.lb-stat-val.err { color: var(--danger); }

.lb-banner { margin-top: 14px; text-align: center; padding: 10px; border-radius: 10px; background: rgba(43,245,176,.08); border: 1px solid rgba(43,245,176,.2); color: var(--neon-3); font-size: 12.5px; font-weight: 600; }
.lb-banner.warn { background: rgba(255,92,122,.08); border-color: rgba(255,92,122,.25); color: var(--danger); }
.lb-banner.idle { background: var(--glass-2); border-color: var(--glass-brd); color: var(--txt-dim); }

@media (max-width: 760px) { .lb-stage { grid-template-columns: 110px 1fr 180px; min-height: 280px; } .lb-balancer { width: 100px; height: 100px; } }