/* ═══════════════════════════════════════════════════════════════════════════
   AGENT BUILDER v2.0 — assets/css/agent-builder.css
   AlphaVault AI · Custom AI Agent Platform
   Light Mode (default) · Dark Mode · 100% Responsive
   Design: Minimaliste & Pro · Gradient Bleu-Violet · Glassmorphism léger
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   §0 — CSS CUSTOM PROPERTIES — LIGHT (DEFAULT)
───────────────────────────────────────────── */
:root {
  /* ── Brand ──────────────────────────────── */
  --ab-primary:        #6366f1;
  --ab-primary-hover:  #4f46e5;
  --ab-primary-light:  rgba(99,102,241,.1);
  --ab-primary-glow:   rgba(99,102,241,.25);
  --ab-secondary:      #764ba2;
  --ab-gradient:       linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ab-gradient-soft:  linear-gradient(135deg, rgba(102,126,234,.06), rgba(118,75,162,.04));
  --ab-gradient-header: linear-gradient(135deg, rgba(102,126,234,.04), rgba(118,75,162,.02));

  /* ── Semantic ────────────────────────────── */
  --ab-success:        #10b981;
  --ab-success-light:  rgba(16,185,129,.1);
  --ab-error:          #ef4444;
  --ab-error-light:    rgba(239,68,68,.1);
  --ab-warning:        #f59e0b;
  --ab-warning-light:  rgba(245,158,11,.1);
  --ab-info:           #06b6d4;
  --ab-info-light:     rgba(6,182,212,.1);

  /* ── Icon Accents ────────────────────────── */
  --ab-cyan:    #06b6d4;
  --ab-amber:   #f59e0b;
  --ab-indigo:  #6366f1;
  --ab-violet:  #8b5cf6;
  --ab-emerald: #10b981;
  --ab-orange:  #f97316;
  --ab-slate:   #64748b;
  --ab-red:     #ef4444;
  --ab-blue:    #3b82f6;
  --ab-pink:    #ec4899;

  /* ── Layout ──────────────────────────────── */
  --ab-sidebar-w:   240px;
  --ab-sidebar-col: 64px;
  --ab-header-h:    56px;

  /* ── Surfaces ────────────────────────────── */
  --ab-bg:         #f1f5f9;
  --ab-bg-alt:     #f8fafc;
  --ab-surface:    rgba(255,255,255,0.92);
  --ab-surface-solid: #ffffff;
  --ab-header-bg:  rgba(255,255,255,0.95);

  /* ── Glassmorphism ───────────────────────── */
  --ab-glass-bg:      rgba(255,255,255,0.80);
  --ab-glass-border:  rgba(255,255,255,0.60);
  --ab-glass-shadow:  0 8px 32px rgba(99,102,241,.08), 0 2px 8px rgba(0,0,0,.04);
  --ab-glass-blur:    blur(12px) saturate(160%);

  /* ── Sidebar light ───────────────────────── */
  --ab-sidebar-bg:              rgba(255,255,255,0.97);
  --ab-sidebar-border:          rgba(0,0,0,.07);
  --ab-sidebar-hover:           rgba(99,102,241,.06);
  --ab-sidebar-active:          rgba(99,102,241,.1);
  --ab-sidebar-text:            #475569;
  --ab-sidebar-text-active:     #6366f1;
  --ab-sidebar-icon:            #94a3b8;
  --ab-sidebar-icon-active:     #6366f1;
  --ab-sidebar-label:           #b0bec5;
  --ab-sidebar-footer-border:   rgba(0,0,0,.06);
  --ab-sidebar-dropdown-bg:     #ffffff;
  --ab-sidebar-dropdown-border: rgba(0,0,0,.08);
  --ab-sidebar-dropdown-shadow: 0 -12px 40px rgba(0,0,0,.1), 0 4px 16px rgba(99,102,241,.06);
  --ab-sidebar-user-hover:      rgba(99,102,241,.05);
  --ab-sidebar-toggle-bg:       #ffffff;
  --ab-sidebar-toggle-shadow:   0 2px 12px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);

  /* ── Text ────────────────────────────────── */
  --ab-text:         #0f172a;
  --ab-text-muted:   #64748b;
  --ab-text-dim:     #94a3b8;
  --ab-text-inverse: #ffffff;

  /* ── Borders ─────────────────────────────── */
  --ab-border:        rgba(0,0,0,.07);
  --ab-border-strong: rgba(0,0,0,.11);

  /* ── Inputs ──────────────────────────────── */
  --ab-input-bg:     #f8fafc;
  --ab-input-border: #e2e8f0;
  --ab-input-focus:  rgba(99,102,241,.2);

  /* ── Shadows ─────────────────────────────── */
  --ab-shadow-sm:  0 1px 4px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --ab-shadow:     0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --ab-shadow-lg:  0 12px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.05);
  --ab-shadow-xl:  0 24px 64px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
  --ab-shadow-card: 0 2px 8px rgba(99,102,241,.04), 0 1px 3px rgba(0,0,0,.05);
  --ab-shadow-card-hover: 0 8px 24px rgba(99,102,241,.12), 0 2px 8px rgba(0,0,0,.06);

  /* ── Radius ──────────────────────────────── */
  --ab-radius:    8px;
  --ab-radius-lg: 12px;
  --ab-radius-xl: 16px;
  --ab-radius-2xl: 20px;

  /* ── Transitions ─────────────────────────── */
  --ab-transition:      all .2s cubic-bezier(.4,0,.2,1);
  --ab-transition-slow: all .35s cubic-bezier(.4,0,.2,1);

  /* ── Scrollbar ───────────────────────────── */
  --ab-scrollbar-bg:    transparent;
  --ab-scrollbar-thumb: rgba(99,102,241,.2);

  /* ── MCP aliases (utilisées par CSS injecté via JS) ── */
  --mcp-surface:    var(--ab-surface-solid);
  --mcp-border:     var(--ab-input-border);
  --mcp-bg-2:       var(--ab-bg-alt);
  --mcp-text:       var(--ab-text);
  --mcp-text-muted: var(--ab-text-muted);
  --mcp-hover:      var(--ab-sidebar-hover);
  --mcp-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─────────────────────────────────────────────
   §1 — DARK MODE (body.dark-mode)
───────────────────────────────────────────── */
body.dark-mode {
  --ab-bg:         #0a0f1e;
  --ab-bg-alt:     #111827;
  --ab-surface:    rgba(17,24,39,0.90);
  --ab-surface-solid: #111827;
  --ab-header-bg:  rgba(10,15,30,0.95);

  --ab-glass-bg:      rgba(15,23,42,0.75);
  --ab-glass-border:  rgba(99,102,241,.15);
  --ab-glass-shadow:  0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);

  --ab-sidebar-bg:              rgba(5,10,20,0.97);
  --ab-sidebar-border:          rgba(255,255,255,.05);
  --ab-sidebar-hover:           rgba(99,102,241,.12);
  --ab-sidebar-active:          rgba(99,102,241,.2);
  --ab-sidebar-text:            rgba(255,255,255,.55);
  --ab-sidebar-text-active:     #c7d2fe;
  --ab-sidebar-icon:            rgba(255,255,255,.3);
  --ab-sidebar-icon-active:     #818cf8;
  --ab-sidebar-label:           rgba(255,255,255,.2);
  --ab-sidebar-footer-border:   rgba(255,255,255,.05);
  --ab-sidebar-dropdown-bg:     #0f172a;
  --ab-sidebar-dropdown-border: rgba(255,255,255,.08);
  --ab-sidebar-dropdown-shadow: 0 -16px 48px rgba(0,0,0,.6);
  --ab-sidebar-user-hover:      rgba(255,255,255,.05);
  --ab-sidebar-toggle-bg:       #1e293b;
  --ab-sidebar-toggle-shadow:   0 2px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);

  --ab-text:          #e2e8f0;
  --ab-text-muted:    #94a3b8;
  --ab-text-dim:      #64748b;
  --ab-border:        rgba(255,255,255,.06);
  --ab-border-strong: rgba(255,255,255,.1);
  --ab-input-bg:      rgba(255,255,255,.04);
  --ab-input-border:  rgba(255,255,255,.1);
  --ab-input-focus:   rgba(99,102,241,.3);
  --ab-shadow-sm:     0 1px 4px rgba(0,0,0,.4);
  --ab-shadow:        0 4px 16px rgba(0,0,0,.5);
  --ab-shadow-lg:     0 12px 40px rgba(0,0,0,.6);
  --ab-shadow-card:   0 2px 8px rgba(0,0,0,.3);
  --ab-shadow-card-hover: 0 8px 24px rgba(99,102,241,.2);
  --ab-scrollbar-thumb: rgba(99,102,241,.25);

  --mcp-surface:    var(--ab-surface-solid);
  --mcp-border:     var(--ab-input-border);
  --mcp-bg-2:       var(--ab-bg-alt);
  --mcp-text:       var(--ab-text);
  --mcp-text-muted: var(--ab-text-muted);
  --mcp-hover:      rgba(99,102,241,.12);
}

/* ─────────────────────────────────────────────
   §2 — RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.ab-page {
  font-family: var(--mcp-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ab-text);
  background: var(--ab-bg);
  overflow: hidden;
  height: 100vh;
  transition: background .3s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ab-scrollbar-thumb);
  border-radius: 10px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--ab-primary); }

/* Utility */
.ab-hidden { display: none !important; }

/* Icon color helpers */
.ab-icon-cyan    { color: var(--ab-cyan);    }
.ab-icon-amber   { color: var(--ab-amber);   }
.ab-icon-indigo  { color: var(--ab-indigo);  }
.ab-icon-violet  { color: var(--ab-violet);  }
.ab-icon-emerald { color: var(--ab-emerald); }
.ab-icon-orange  { color: var(--ab-orange);  }
.ab-icon-slate   { color: var(--ab-slate);   }
.ab-icon-red     { color: var(--ab-red);     }
.ab-icon-blue    { color: var(--ab-blue);    }
.ab-icon-pink    { color: var(--ab-pink);    }

/* ─────────────────────────────────────────────
   §3 — APP SHELL
───────────────────────────────────────────── */
#abApp {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.ab-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
  backdrop-filter: blur(4px);
}
.ab-mobile-backdrop.ab-backdrop-visible { display: block; }

/* ═══════════════════════════════════════════
   §4 — SIDEBAR
═══════════════════════════════════════════ */
.ab-sidebar {
  width: var(--ab-sidebar-w);
  min-width: var(--ab-sidebar-w);
  height: 100vh;
  background: var(--ab-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  transition: width .25s cubic-bezier(.4,0,.2,1),
              min-width .25s cubic-bezier(.4,0,.2,1),
              background .3s ease;
  overflow: visible;   /* ⬅ CHANGÉ : hidden → visible pour laisser sortir le bouton */
  z-index: 100;
  border-right: 1px solid var(--ab-sidebar-border);
}
body:not(.dark-mode) .ab-sidebar {
  box-shadow: 2px 0 16px rgba(0,0,0,.04), 1px 0 4px rgba(0,0,0,.03);
}

/* Collapsed */
.ab-sidebar-collapsed {
  width: var(--ab-sidebar-col) !important;
  min-width: var(--ab-sidebar-col) !important;
}
.ab-sidebar-collapsed .ab-sidebar-text,
.ab-sidebar-collapsed .ab-new-btn > span,
.ab-sidebar-collapsed .ab-nav-badge,
.ab-sidebar-collapsed .ab-nav-label,
.ab-sidebar-collapsed .ab-logo-text,
.ab-sidebar-collapsed .ab-user-info,
.ab-sidebar-collapsed .ab-user-plan,
.ab-sidebar-collapsed .ab-user-chevron { display: none !important; opacity: 0; }
.ab-sidebar-collapsed .ab-logo-icon   { display: block !important; }
.ab-sidebar-collapsed .ab-new-btn     { padding: 10px; justify-content: center; }
.ab-sidebar-collapsed .ab-nav-item    { padding: 10px; justify-content: center; }
.ab-sidebar-collapsed .ab-sidebar-user-trigger { padding: 8px; justify-content: center; }

/* Mobile close */
.ab-mobile-close {
  display: none;
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border: none;
  background: rgba(0,0,0,.06);
  color: var(--ab-text-muted);
  border-radius: 7px;
  cursor: pointer; font-size: 11px;
  align-items: center; justify-content: center;
  z-index: 10; transition: var(--ab-transition);
}
.ab-mobile-close:hover { background: var(--ab-error-light); color: var(--ab-error); }
body.dark-mode .ab-mobile-close {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
}

/* Logo */
.ab-sidebar-logo-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  text-decoration: none; flex-shrink: 0;
  border-bottom: 1px solid var(--ab-sidebar-border);
}
.ab-logo-text { height: 22px; width: auto; object-fit: contain; }
.ab-logo-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; display: none; }

/* New chat button */
.ab-new-wrap { padding: 12px 10px 8px; flex-shrink: 0; }
.ab-new-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--ab-gradient);
  color: #fff; border: none;
  border-radius: var(--ab-radius-lg);
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: var(--ab-transition);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.ab-new-btn:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,.4);
}
.ab-new-btn i { font-size: 11px; flex-shrink: 0; }

/* Sidebar scroll */
.ab-sidebar-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding-bottom: 8px; min-height: 0;
}

/* ⬅ AJOUT : empêche le contenu (logo, footer) de déborder visuellement
   sans impacter le bouton toggle qui est un enfant direct de .ab-sidebar */
.ab-sidebar-logo-wrap,
.ab-sidebar-footer {
  overflow: hidden;
}

/* Navigation */
.ab-nav { padding: 4px 0; }
.ab-nav-section { margin-bottom: 2px; }
.ab-nav-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--ab-sidebar-label);
  padding: 10px 16px 4px;
  white-space: nowrap; overflow: hidden;
}
.ab-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 8px;
  border-radius: var(--ab-radius-lg);
  cursor: pointer; transition: var(--ab-transition);
  color: var(--ab-sidebar-text);
  text-decoration: none;
  white-space: nowrap; overflow: hidden;
  user-select: none;
}
.ab-nav-item:hover {
  background: var(--ab-sidebar-hover);
  color: var(--ab-text);
}
body.dark-mode .ab-nav-item:hover { color: rgba(255,255,255,.85); }
.ab-nav-item-active {
  background: var(--ab-sidebar-active);
  color: var(--ab-sidebar-text-active);
}
body.dark-mode .ab-nav-item-active { color: #c7d2fe; }
.ab-nav-item-active .ab-nav-item-icon { color: var(--ab-sidebar-icon-active); }
.ab-nav-item-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  color: var(--ab-sidebar-icon);
}
.ab-sidebar-text {
  font-size: 12px; font-weight: 600;
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}

/* Nav Badges */
.ab-nav-badge {
  font-size: 9px; font-weight: 800; padding: 2px 6px;
  border-radius: 10px; background: var(--ab-error); color: #fff;
  min-width: 18px; text-align: center; flex-shrink: 0;
}
.ab-badge-static { background: var(--ab-primary-light); color: var(--ab-primary); }
.ab-badge-live   { background: #10b981; color: #fff; }
.ab-badge-new    {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; animation: abBadgePulse 2.5s infinite;
}
@keyframes abBadgePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* Spinner */
.ab-spinner-wrap {
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.ab-spinner-ring {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--ab-border-strong);
  border-top-color: var(--ab-primary);
  border-radius: 50%;
  animation: abSpin .7s linear infinite;
}
@keyframes abSpin { to { transform: rotate(360deg); } }

/* Sidebar Footer */
.ab-sidebar-footer {
  padding: 8px 8px 10px;
  border-top: 1px solid var(--ab-sidebar-footer-border);
  position: relative; flex-shrink: 0;
}
.ab-sidebar-user-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--ab-radius-lg);
  cursor: pointer; transition: var(--ab-transition);
}
.ab-sidebar-user-trigger:hover { background: var(--ab-sidebar-user-hover); }
.ab-user-avatar-img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.ab-user-info { flex: 1; min-width: 0; }
.ab-user-name {
  font-size: 12px; font-weight: 700; color: var(--ab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark-mode .ab-user-name { color: #e2e8f0; }
.ab-user-email {
  font-size: 10px; color: var(--ab-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-user-plan {
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 12px; background: var(--ab-primary-light);
  color: var(--ab-primary); flex-shrink: 0;
}
.ab-user-chevron {
  font-size: 8px; color: var(--ab-text-muted);
  flex-shrink: 0; transition: transform .2s;
}

/* User dropdown */
.ab-sidebar-user-dropdown {
  position: absolute;
  bottom: calc(100% + 6px); left: 8px; right: 8px;
  background: var(--ab-sidebar-dropdown-bg);
  border: 1px solid var(--ab-sidebar-dropdown-border);
  border-radius: var(--ab-radius-xl); padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: var(--ab-transition);
  z-index: 200;
  box-shadow: var(--ab-sidebar-dropdown-shadow);
}
.ab-sidebar-user-dropdown.ab-dropdown-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ab-sidebar-dropdown-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--ab-sidebar-border);
  margin-bottom: 6px;
}
.ab-dropdown-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.ab-dropdown-info { flex: 1; min-width: 0; }
.ab-dropdown-name {
  font-size: 12px; font-weight: 700; color: var(--ab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark-mode .ab-dropdown-name { color: #e2e8f0; }
.ab-dropdown-email {
  font-size: 10px; color: var(--ab-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-sidebar-dropdown-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--ab-radius);
  font-size: 12px; font-weight: 600;
  color: var(--ab-sidebar-text);
  text-decoration: none; cursor: pointer;
  transition: var(--ab-transition);
}
.ab-sidebar-dropdown-link:hover {
  background: var(--ab-sidebar-hover); color: var(--ab-text);
}
body.dark-mode .ab-sidebar-dropdown-link { color: rgba(255,255,255,.65); }
body.dark-mode .ab-sidebar-dropdown-link:hover { color: #fff; }
.ab-sidebar-dropdown-link i { width: 14px; font-size: 12px; }
.ab-sidebar-dropdown-logout {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--ab-radius);
  font-size: 12px; font-weight: 600;
  color: var(--ab-error); background: none; border: none;
  cursor: pointer; width: 100%; margin-top: 4px;
  transition: var(--ab-transition);
}
.ab-sidebar-dropdown-logout:hover { background: var(--ab-error-light); }

/* Sidebar toggle button */
.ab-sidebar-toggle {
  position: absolute; top: 50%; right: -14px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--ab-sidebar-toggle-bg);
  border: 1.5px solid var(--ab-sidebar-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 9999;   /* ⬅ CHANGÉ : 110 → 9999 pour dominer .ab-main */
  font-size: 10px;
  color: var(--ab-text-muted);
  box-shadow: var(--ab-sidebar-toggle-shadow);
  transition: var(--ab-transition); flex-shrink: 0;
}
body:not(.dark-mode) .ab-sidebar-toggle {
  background: #fff; border-color: #e2e8f0; color: #64748b;
}
body.dark-mode .ab-sidebar-toggle {
  background: #1e293b; border-color: rgba(255,255,255,.12); color: #94a3b8;
}
.ab-sidebar-toggle:hover {
  background: var(--ab-primary) !important;
  color: #fff !important;
  border-color: var(--ab-primary) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.45) !important;
  transform: translateY(-50%) scale(1.1);
}

/* ═══════════════════════════════════════════
   §5 — MAIN
═══════════════════════════════════════════ */
.ab-main {
  flex: 1; display: flex;
  flex-direction: column;
  overflow: hidden; min-width: 0;
  position: relative;
  z-index: 1;   /* ⬅ AJOUT : garantit que la sidebar (z-index:100) passe devant */
}

/* ═══════════════════════════════════════════
   §6 — HEADER
═══════════════════════════════════════════ */
.ab-header {
  height: var(--ab-header-h);
  min-height: var(--ab-header-h);
  background: var(--ab-header-bg);
  border-bottom: 1px solid var(--ab-border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; flex-shrink: 0;
  position: relative; z-index: 50;
  transition: background .3s ease;
  backdrop-filter: blur(12px);
}

.ab-mobile-menu-btn {
  width: 34px; height: 34px; padding: 0;
  border: none; background: none; color: var(--ab-text-muted);
  border-radius: var(--ab-radius); cursor: pointer;
  font-size: 16px; display: flex;
  align-items: center; justify-content: center;
  transition: var(--ab-transition); flex-shrink: 0;
}
.ab-mobile-menu-btn:hover { background: var(--ab-bg-alt); color: var(--ab-text); }

/* Mode Selector */
.mcp-mode-selector {
  display: flex; gap: 2px;
  background: var(--ab-bg-alt);
  border: 1px solid var(--ab-border);
  border-radius: 20px;
  padding: 3px; flex-shrink: 0;
}
.mcp-mode-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: none;
  border-radius: 17px;
  font-size: 12px; font-weight: 700;
  color: var(--ab-text-muted); background: none;
  cursor: pointer; transition: var(--ab-transition);
  white-space: nowrap; font-family: var(--mcp-font);
}
.mcp-mode-btn:hover { color: var(--ab-text); }
.mcp-mode-btn.active {
  background: var(--ab-surface-solid);
  color: var(--ab-primary);
  box-shadow: var(--ab-shadow-sm);
}
.mcp-mode-btn i { font-size: 11px; }
body.dark-mode .mcp-mode-btn.active { background: rgba(99,102,241,.15); color: #818cf8; }

/* ✅ Fix boutons dupliqués — masquer les doublons du même data-mode */
.mcp-mode-selector button[data-mode="custom-agent"] + button[data-mode="custom-agent"],
.mcp-mode-selector button[data-mode="orchestrator"] + button[data-mode="orchestrator"],
.mcp-mode-selector button[data-mode="analyst"] + button[data-mode="analyst"],
.mcp-mode-selector button[data-mode="researcher"] + button[data-mode="researcher"] {
  display: none !important;
}

/* Agent Indicator */
.mcp-agent-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px; border-radius: 20px;
  background: var(--ab-primary-light);
  border: 1px solid rgba(99,102,241,.2);
  color: var(--ab-primary); font-size: 12px;
  font-weight: 700; flex-shrink: 0;
  animation: abIndicatorIn .3s ease;
}
@keyframes abIndicatorIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
.mcp-agent-indicator i { font-size: 12px; }
.ab-agent-indicator-close {
  background: none; border: none; color: inherit;
  cursor: pointer; padding: 2px 3px;
  border-radius: 4px; font-size: 10px;
  opacity: .65; transition: opacity .15s;
  display: flex; align-items: center;
}
.ab-agent-indicator-close:hover { opacity: 1; }

.ab-header-spacer { flex: 1; }

/* Header Controls */
.ab-header-controls {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ab-header-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px; border: none; background: none;
  color: var(--ab-text-muted); border-radius: var(--ab-radius);
  cursor: pointer; font-size: 13px; font-weight: 600;
  transition: var(--ab-transition); white-space: nowrap;
  flex-shrink: 0; font-family: var(--mcp-font);
}
.ab-header-btn:hover { background: var(--ab-bg-alt); color: var(--ab-text); }
.ab-header-btn-icon {
  width: 34px; height: 34px; padding: 0;
  border-radius: 9px; font-size: 14px;
}
.ab-header-btn-primary {
  background: var(--ab-gradient); color: #fff;
  border-radius: var(--ab-radius-lg); padding: 6px 14px; font-size: 12px;
  box-shadow: 0 2px 10px rgba(99,102,241,.3);
}
.ab-header-btn-primary:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
  color: #fff;
}

/* User avatar */
.ab-user-avatar-btn {
  cursor: pointer; border-radius: 50%; transition: var(--ab-transition);
}
.ab-user-avatar-btn:hover { opacity: .85; }
.ab-avatar-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ab-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* User Menu */
.ab-user-menu {
  position: absolute;
  top: calc(var(--ab-header-h) + 6px); right: 12px;
  background: var(--ab-surface-solid);
  border: 1px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-xl);
  box-shadow: var(--ab-shadow-xl);
  z-index: 500; min-width: 210px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: var(--ab-transition);
}
.ab-user-menu-open {
  opacity: 1 !important; visibility: visible !important;
  transform: translateY(0) !important;
}
.ab-user-menu-header {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--ab-border);
  margin-bottom: 6px;
}
.ab-user-menu-name  { font-size: 13px; font-weight: 800; color: var(--ab-text); }
.ab-user-menu-email { font-size: 11px; color: var(--ab-text-muted); margin-top: 2px; }
.ab-user-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--ab-radius);
  font-size: 12px; font-weight: 600; color: var(--ab-text);
  cursor: pointer; transition: var(--ab-transition);
}
.ab-user-menu-item:hover { background: var(--ab-bg-alt); }
.ab-user-menu-item i { width: 14px; font-size: 12px; color: var(--ab-text-muted); }
.ab-user-menu-danger { color: var(--ab-error); }
.ab-user-menu-danger:hover { background: var(--ab-error-light) !important; }
.ab-user-menu-danger i { color: var(--ab-error) !important; }
.ab-user-menu-divider { height: 1px; background: var(--ab-border); margin: 4px 0; }

/* ═══════════════════════════════════════════
   §7 — METRICS BAR
═══════════════════════════════════════════ */
.ab-metrics-bar {
  display: flex; align-items: center;
  background: var(--ab-gradient-soft);
  border-bottom: 1px solid rgba(99,102,241,.12);
  padding: 6px 16px; flex-shrink: 0; flex-wrap: wrap; gap: 4px;
}
.ab-metric {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; border-right: 1px solid var(--ab-border);
}
.ab-metric:first-child { padding-left: 0; }
.ab-metric:last-of-type { border-right: none; }
.ab-metric-label {
  font-size: 10px; font-weight: 700; color: var(--ab-text-muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.ab-metric-val { font-size: 12px; font-weight: 800; color: var(--ab-primary); }
.ab-metrics-close {
  margin-left: auto; background: none; border: none;
  color: var(--ab-text-muted); cursor: pointer;
  font-size: 12px; padding: 4px; border-radius: 6px;
  transition: var(--ab-transition);
}
.ab-metrics-close:hover { background: var(--ab-error-light); color: var(--ab-error); }

/* ═══════════════════════════════════════════
   §8 — CONTENT & VIEWS  ✅ SCROLL FIX
═══════════════════════════════════════════ */
#abContent {
  flex: 1; overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; /* ✅ CRITICAL — sans ça le scroll ne fonctionne pas */
}

.ab-view {
  display: none;
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}
.ab-view-active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
  animation: abFadeIn .18s ease;
}

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

/* View header */
.ab-view-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 20px 20px 0; flex-shrink: 0; flex-wrap: wrap;
}
.ab-view-title {
  font-size: 16px; font-weight: 800; color: var(--ab-text);
  display: flex; align-items: center; gap: 8px;
}
.ab-view-title i { color: var(--ab-primary); }
.ab-view-title-badge {
  font-size: 10px; font-weight: 800; padding: 2px 9px;
  border-radius: 20px; background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; letter-spacing: .3px;
}
.ab-view-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ab-view-description {
  font-size: 12px; color: var(--ab-text-muted);
  padding: 8px 20px 0; line-height: 1.65; flex-shrink: 0;
}
.ab-view-toolbar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 14px 20px 0; flex-shrink: 0; flex-wrap: wrap;
}
.ab-view-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--ab-input-bg);
  border: 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  padding: 7px 12px; transition: border-color .15s;
}
.ab-view-search:focus-within { border-color: var(--ab-primary); }
.ab-view-search i { color: var(--ab-text-muted); font-size: 12px; }
.ab-view-search input {
  border: none; background: transparent; outline: none;
  font-size: 12px; color: var(--ab-text);
  font-family: var(--mcp-font); width: 180px;
}
.ab-view-search input::placeholder { color: var(--ab-text-dim); }

/* Filter tabs */
.ab-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ab-filter-tab {
  padding: 6px 14px;
  border: 1.5px solid var(--ab-border-strong);
  border-radius: 20px; font-size: 11px; font-weight: 700;
  color: var(--ab-text-muted); background: var(--ab-surface-solid);
  cursor: pointer; transition: var(--ab-transition);
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.ab-filter-tab:hover { border-color: var(--ab-primary); color: var(--ab-primary); }
.ab-filter-tab-active {
  background: var(--ab-primary); border-color: var(--ab-primary); color: #fff;
}

/* ═══════════════════════════════════════════
   §9 — CHAT VIEW
═══════════════════════════════════════════ */
#view-chat { overflow: hidden; }

/* ReAct Monitor Bar */
.ab-react-bar {
  flex-shrink: 0;
  background: var(--ab-gradient-soft);
  border-bottom: 1px solid rgba(99,102,241,.12);
  padding: 8px 16px;
}
.ab-react-bar-inner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ab-react-step,
.ab-react-tool {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ab-primary);
}
.ab-react-step i { animation: abSpin .8s linear infinite; }
.ab-react-tool   { color: var(--ab-amber); }
.ab-react-progress {
  flex: 1; height: 2px; background: var(--ab-border);
  border-radius: 99px; overflow: hidden; min-width: 60px;
}
.ab-react-progress-fill {
  height: 100%; background: var(--ab-gradient);
  border-radius: 99px; width: 35%;
  animation: abProgressFlow 1.4s ease infinite;
}
@keyframes abProgressFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.ab-react-iter {
  font-size: 11px; font-weight: 800;
  color: var(--ab-text-muted); white-space: nowrap;
}

/* Messages container ✅ SCROLLABLE */
.ab-messages {
  flex: 1; overflow-y: auto;
  min-height: 0; /* ✅ CRITICAL */
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
  scroll-behavior: smooth;
}

/* Welcome Screen */
.ab-welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; gap: 20px;
  max-width: 740px; margin: 0 auto; width: 100%;
}
.ab-welcome-logo { margin-bottom: 4px; }
.ab-welcome-logo-img {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(99,102,241,.3));
}
.ab-welcome-title {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900; line-height: 1.2;
  background: var(--ab-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-welcome-sub {
  font-size: 14px; color: var(--ab-text-muted);
  line-height: 1.7; max-width: 520px;
}

/* Quick Prompts */
.ab-quick-prompts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; width: 100%; max-width: 700px;
}
.ab-quick-btn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  cursor: pointer; transition: var(--ab-transition); text-align: left;
  font-family: var(--mcp-font);
}
.ab-quick-btn:hover {
  border-color: var(--ab-primary);
  background: var(--ab-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--ab-shadow-card-hover);
}
.ab-quick-btn i {
  font-size: 15px; color: var(--ab-primary);
  flex-shrink: 0; margin-top: 1px;
}
.ab-quick-btn-content { display: flex; flex-direction: column; gap: 2px; }
.ab-quick-btn-label   { font-size: 12px; font-weight: 700; color: var(--ab-text); }
.ab-quick-btn-desc    { font-size: 10px; color: var(--ab-text-muted); }

/* Welcome Stats */
.ab-welcome-stats {
  display: flex; gap: 28px; flex-wrap: wrap; justify-content: center;
}
.ab-welcome-stat { text-align: center; }
.ab-welcome-stat-val {
  display: block; font-size: 22px; font-weight: 900;
  background: var(--ab-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-welcome-stat-label {
  font-size: 10px; font-weight: 700; color: var(--ab-text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* Chat Messages */
.ab-message,
.mcp-message {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 0; animation: abFadeIn .18s ease;
}
.ab-message-user { flex-direction: row-reverse; }

.ab-message-avatar,
.mcp-message-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; color: #fff;
}
.ab-message-avatar-user      { background: var(--ab-gradient); font-size: 12px; }
.ab-message-avatar-assistant {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,.3);
}

.ab-message-body,
.mcp-message-body {
  flex: 1; min-width: 0; max-width: calc(100% - 44px);
}
.ab-message-header,
.mcp-message-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.ab-message-author, .mcp-message-author {
  font-size: 11px; font-weight: 800; color: var(--ab-text);
}
.ab-message-time, .mcp-message-time {
  font-size: 10px; color: var(--ab-text-dim);
}
.ab-message-content,
.mcp-message-content {
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border: 1px solid var(--ab-border);
  border-radius: 0 12px 12px 12px;
  padding: 12px 16px; font-size: 13px; line-height: 1.7;
  color: var(--ab-text); word-wrap: break-word;
  box-shadow: var(--ab-shadow-card);
}
.ab-message-content-user {
  background: var(--ab-gradient); border: none;
  border-radius: 12px 0 12px 12px; color: #fff;
  backdrop-filter: none;
}

/* Markdown */
.ab-message-content h1,
.ab-message-content h2,
.ab-message-content h3,
.mcp-message-content h1,
.mcp-message-content h2,
.mcp-message-content h3 {
  font-size: 14px; font-weight: 800; color: var(--ab-text); margin: 12px 0 6px;
}
.ab-message-content p, .mcp-message-content p { margin: 6px 0; }
.ab-message-content ul, .ab-message-content ol,
.mcp-message-content ul,.mcp-message-content ol { padding-left: 18px; margin: 6px 0; }
.ab-message-content li, .mcp-message-content li { margin: 3px 0; }
.ab-message-content code, .mcp-message-content code {
  background: rgba(99,102,241,.08); border-radius: 4px; padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ab-primary);
}
.ab-message-content pre, .mcp-message-content pre {
  background: var(--ab-bg-alt); border-radius: 8px; padding: 12px;
  overflow-x: auto; margin: 8px 0; border: 1px solid var(--ab-border);
}
.ab-message-content pre code, .mcp-message-content pre code {
  background: none; padding: 0; color: var(--ab-text);
}
.ab-message-content table, .mcp-message-content table {
  border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px;
}
.ab-message-content th, .mcp-message-content th {
  background: var(--ab-bg-alt); padding: 6px 10px;
  font-weight: 800; text-align: left; border: 1px solid var(--ab-border);
}
.ab-message-content td, .mcp-message-content td {
  padding: 6px 10px; border: 1px solid var(--ab-border);
}
.ab-message-content blockquote, .mcp-message-content blockquote {
  border-left: 3px solid var(--ab-primary); padding-left: 12px;
  color: var(--ab-text-muted); margin: 8px 0;
}

/* Thinking */
.ab-thinking {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.ab-thinking-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ab-primary); animation: abThink 1.2s ease infinite;
}
.ab-thinking-dot:nth-child(2) { animation-delay: .2s; }
.ab-thinking-dot:nth-child(3) { animation-delay: .4s; }
@keyframes abThink {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-8px); opacity: 1; }
}
.ab-thinking-label {
  font-size: 11px; color: var(--ab-text-muted); font-style: italic;
}

/* Tool chips */
.ab-tool-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--ab-border);
}
.ab-tool-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: var(--ab-primary-light);
  color: var(--ab-primary); border: 1px solid rgba(99,102,241,.15);
}

/* Message actions */
.ab-message-actions {
  display: flex; gap: 4px; margin-top: 8px;
  opacity: 0; transition: opacity .15s;
}
.ab-message:hover .ab-message-actions,
.mcp-message:hover .ab-message-actions { opacity: 1; }
.ab-msg-action-btn {
  background: none; border: 1px solid var(--ab-border);
  color: var(--ab-text-muted); border-radius: 6px;
  padding: 4px 8px; font-size: 11px; cursor: pointer;
  transition: var(--ab-transition);
  display: flex; align-items: center; gap: 4px;
}
.ab-msg-action-btn:hover {
  background: var(--ab-primary-light);
  border-color: var(--ab-primary); color: var(--ab-primary);
}

/* Session context */
.rt-session-context {
  font-size: 12px; background: rgba(99,102,241,.07);
  border-left: 3px solid var(--ab-primary); padding: 6px 10px;
  border-radius: 0 8px 8px 0; color: var(--ab-text-muted); margin: 8px 0;
}

/* Error block */
.ab-error-block {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--ab-error-light);
  border-radius: 10px; border: 1px solid rgba(239,68,68,.2);
  color: var(--ab-error); font-size: 12px;
}
.ab-error-block i  { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ab-error-block p  { margin-top: 3px; }
.ab-error-block strong { display: block; }

/* Input Section */
.ab-input-section {
  flex-shrink: 0; padding: 0 16px 16px;
  background: var(--ab-header-bg);
  border-top: 1px solid var(--ab-border);
}
.ab-input-wrapper,
.mcp-input-wrapper {
  background: var(--ab-surface-solid);
  border: 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-xl); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--ab-shadow-sm); margin-top: 12px;
}
.ab-input-wrapper:focus-within,
.mcp-input-wrapper:focus-within {
  border-color: var(--ab-primary);
  box-shadow: 0 0 0 3px var(--ab-input-focus), var(--ab-shadow);
}
.ab-chat-input {
  width: 100%; border: none; background: transparent; outline: none;
  resize: none; padding: 14px 16px; font-size: 14px;
  color: var(--ab-text); font-family: var(--mcp-font);
  line-height: 1.6; min-height: 52px; max-height: 200px;
  overflow-y: auto; display: block;
}
.ab-chat-input::placeholder { color: var(--ab-text-dim); }

/* Input actions */
.ab-input-actions,
.mcp-input-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--ab-border);
  background: var(--ab-bg-alt); gap: 8px;
}
.ab-input-actions-left  { display: flex; align-items: center; gap: 4px; }
.ab-input-actions-right { display: flex; align-items: center; gap: 6px; }

.ab-attach-btn,
.mcp-attach-btn,
.mcp-attach-file-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background: var(--ab-surface-solid);
  color: var(--ab-text-muted); cursor: pointer;
  font-size: 11px; font-weight: 600;
  transition: var(--ab-transition); font-family: var(--mcp-font);
}
.ab-attach-btn:hover,
.mcp-attach-btn:hover {
  border-color: var(--ab-primary); color: var(--ab-primary);
  background: var(--ab-primary-light);
}
.ab-attach-btn-active {
  border-color: var(--ab-primary);
  background: var(--ab-primary-light); color: var(--ab-primary);
}
.ab-attach-label { font-size: 11px; }

.ab-deep-search-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25);
  color: #10b981; font-size: 10px; font-weight: 700;
  animation: abIndicatorIn .2s ease;
}
.ab-char-count { font-size: 10px; font-weight: 600; color: var(--ab-text-dim); }

.ab-clear-btn {
  width: 30px; height: 30px; border: none; background: none;
  color: var(--ab-text-dim); border-radius: var(--ab-radius);
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ab-transition);
}
.ab-clear-btn:hover { background: var(--ab-error-light); color: var(--ab-error); }

.ab-send-btn {
  width: 34px; height: 34px; border: none;
  background: var(--ab-gradient); color: #fff;
  border-radius: var(--ab-radius-lg); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ab-transition);
  box-shadow: 0 2px 10px rgba(99,102,241,.35); flex-shrink: 0;
}
.ab-send-btn:hover:not(:disabled) {
  opacity: .9; transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(99,102,241,.45);
}
.ab-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Input footer */
.ab-input-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 8px; flex-wrap: wrap; gap: 4px;
}
.ab-input-hint { font-size: 10px; color: var(--ab-text-dim); }
.ab-input-hint kbd {
  display: inline-flex; align-items: center; padding: 1px 5px;
  border: 1px solid var(--ab-border-strong); border-radius: 4px;
  background: var(--ab-bg-alt); font-size: 9px;
  font-family: monospace; color: var(--ab-text-muted);
}
.ab-input-disclaimer { font-size: 10px; color: var(--ab-text-dim); }

/* ═══════════════════════════════════════════
   §10 — TOOLS VIEW  ✅ SCROLL FIX
═══════════════════════════════════════════ */
.ab-tools-stats-bar {
  display: flex; padding: 14px 20px;
  border-bottom: 1px solid var(--ab-border);
  flex-shrink: 0; flex-wrap: wrap;
}
.ab-tools-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px; border-right: 1px solid var(--ab-border);
}
.ab-tools-stat:first-child { padding-left: 0; }
.ab-tools-stat:last-child  { border-right: none; }
.ab-tools-stat-val {
  font-size: 20px; font-weight: 900;
  background: var(--ab-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-tools-stat-label {
  font-size: 10px; font-weight: 700; color: var(--ab-text-muted);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 1px;
}
.ab-tools-search-wrap {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 20px;
  padding: 10px 14px; background: var(--ab-input-bg);
  border: 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg); flex-shrink: 0;
  transition: border-color .15s;
}
.ab-tools-search-wrap:focus-within { border-color: var(--ab-primary); }
.ab-tools-search-wrap i { color: var(--ab-text-muted); font-size: 13px; }
.ab-tools-search-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--ab-text); font-family: var(--mcp-font);
}
.ab-tools-search-input::placeholder { color: var(--ab-text-dim); }

/* ✅ SCROLL FIX */
.ab-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 0 20px 20px;
  overflow-y: auto; /* ✅ scrollable */
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}
.ab-tool-category-card {
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border: 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl); overflow: hidden;
  box-shadow: var(--ab-shadow-card); transition: var(--ab-transition);
}
.ab-tool-category-card:hover {
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--ab-shadow-card-hover);
  transform: translateY(-2px);
}
.ab-tool-cat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--ab-border);
  background: var(--ab-bg-alt);
}
.ab-tool-cat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ab-tool-cat-info  { flex: 1; min-width: 0; }
.ab-tool-cat-name  {
  font-size: 12px; font-weight: 800; color: var(--ab-text);
  text-transform: capitalize;
}
.ab-tool-cat-count { font-size: 10px; color: var(--ab-text-muted); margin-top: 1px; }
.ab-tool-chips-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 14px; }
.ab-tool-chip-item {
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; border: 1px solid var(--ab-border-strong);
  background: var(--ab-bg-alt); color: var(--ab-text-muted);
  cursor: pointer; transition: var(--ab-transition); white-space: nowrap;
}
.ab-tool-chip-item:hover {
  border-color: var(--ab-primary); color: var(--ab-primary);
  background: var(--ab-primary-light);
}

/* ═══════════════════════════════════════════
   §11 — AGENTS VIEW  ✅ SCROLL FIX
═══════════════════════════════════════════ */
.ab-agent-stats-bar {
  display: flex; padding: 14px 20px;
  border-bottom: 1px solid var(--ab-border);
  background: var(--ab-gradient-soft); flex-shrink: 0;
}
.ab-agent-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px; border-right: 1px solid rgba(99,102,241,.12);
  flex: 1; text-align: center;
}
.ab-agent-stat:last-child { border-right: none; }
.ab-agent-stat-val {
  font-size: 20px; font-weight: 900;
  background: var(--ab-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-agent-stat-label {
  font-size: 10px; font-weight: 700; color: var(--ab-text-muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* ✅ SCROLL FIX */
.ab-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 16px 20px 20px;
  overflow-y: auto; /* ✅ scrollable */
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}

/* ── A2A Compatibility fix: view-agents doit scroller pour voir la registry ── */
#view-agents {
  overflow-y: auto   !important;   /* Surpasse §25 overflow:hidden !important  */
  overflow-x: hidden !important;
}

/* La grille ne prend plus toute la hauteur : on laisse le contenu guider */
#view-agents .ab-agents-grid {
  flex      : 0 0 auto;   /* Taille naturelle selon le contenu             */
  overflow-y: visible;    /* Supprime le scroll interne (la vue scrolle)   */
  min-height: 200px;      /* Évite un collapse si grille vide              */
}

.ab-agent-card {
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border: 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl); padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: var(--ab-transition); position: relative;
  box-shadow: var(--ab-shadow-card);
}
.ab-agent-card:hover {
  border-color: rgba(99,102,241,.3);
  box-shadow: var(--ab-shadow-card-hover);
  transform: translateY(-2px);
}
.ab-agent-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.ab-agent-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
/* ✅ Fix icônes FA dans les cards */
.ab-agent-card-icon i,
.ab-tpl-card-icon i {
  font-size: 20px !important;
}
.ab-agent-card-actions { display: flex; gap: 2px; }
.ab-agent-card-name {
  font-size: 13px; font-weight: 800; color: var(--ab-text); line-height: 1.3;
}
.ab-agent-card-cat { font-size: 11px; font-weight: 700; }
.ab-agent-card-desc {
  font-size: 11px; color: var(--ab-text-muted);
  margin: 0; line-height: 1.5; flex: 1;
}
.ab-agent-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ab-agent-card-meta span {
  font-size: 10px; font-weight: 600; color: var(--ab-text-muted);
  display: flex; align-items: center; gap: 3px;
  background: var(--ab-bg-alt); padding: 2px 6px; border-radius: 20px;
}
.ab-agent-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px;
}
.ab-badge-personal { background: var(--ab-primary-light); color: var(--ab-primary); }
.ab-badge-team     { background: var(--ab-success-light); color: var(--ab-success); }
.ab-badge-tpl      { background: var(--ab-warning-light); color: var(--ab-warning); }

.ab-agent-card-run {
  margin-top: 8px; padding: 7px; border-radius: 9px;
  font-size: 12px; font-weight: 700; cursor: pointer; border: none;
  background: var(--ab-gradient); color: white; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mcp-font);
}
.ab-agent-card-run:hover { opacity: .88; }

/* Icon buttons */
.ab-icon-btn {
  background: none; border: none; cursor: pointer; padding: 5px;
  border-radius: 7px; font-size: 12px; color: var(--ab-text-muted);
  transition: var(--ab-transition);
}
.ab-icon-btn:hover     { background: var(--ab-bg-alt); color: var(--ab-primary); }
.ab-icon-danger:hover  {
  color: var(--ab-error) !important;
  background: var(--ab-error-light) !important;
}

/* ═══════════════════════════════════════════
   §12 — TEMPLATES VIEW  ✅ SCROLL FIX
═══════════════════════════════════════════ */
.ab-template-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 20px; flex-shrink: 0;
}
.ab-tpl-cat-btn {
  font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: 20px; border: 1.5px solid var(--ab-border-strong);
  background: var(--ab-surface-solid); color: var(--ab-text-muted);
  cursor: pointer; transition: var(--ab-transition); white-space: nowrap;
}
.ab-tpl-cat-btn:hover { border-color: var(--ab-primary); color: var(--ab-primary); }
.ab-tpl-cat-btn-active {
  border-color: var(--ab-primary);
  background: var(--ab-primary-light); color: var(--ab-primary);
}

/* ✅ SCROLL FIX */
.ab-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; padding: 0 20px 20px;
  overflow-y: auto; /* ✅ scrollable */
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}
.ab-tpl-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1.5px solid var(--ab-border); border-radius: var(--ab-radius-xl);
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  cursor: pointer; transition: var(--ab-transition);
  box-shadow: var(--ab-shadow-card);
}
.ab-tpl-card:hover {
  border-color: rgba(99,102,241,.3);
  box-shadow: var(--ab-shadow-card-hover);
  transform: translateY(-3px);
}
.ab-tpl-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
/* ✅ Fallback pour texte FA (avant fix JS) */
.ab-tpl-card-icon:not(:has(i)) {
  font-size: 10px; word-break: break-all; line-height: 1.2;
  font-weight: 700;
}
.ab-tpl-badge {
  display: inline-flex; padding: 2px 9px;
  border-radius: 20px; font-size: 10px; font-weight: 700;
  width: fit-content;
}
.ab-tpl-name  { font-size: 13px; font-weight: 800; color: var(--ab-text); }
.ab-tpl-desc  {
  font-size: 11px; color: var(--ab-text-muted);
  line-height: 1.55; margin: 0; flex: 1;
}
.ab-tpl-meta  { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tpl-meta span {
  font-size: 10px; font-weight: 600; color: var(--ab-text-muted);
  display: flex; align-items: center; gap: 3px;
}
.ab-tpl-use-btn {
  margin-top: auto; font-size: 12px; font-weight: 700;
  color: var(--ab-primary); padding-top: 8px;
  border-top: 1px solid var(--ab-border);
}

/* ═══════════════════════════════════════════
   §13 — DEEP SEARCH VIEW  ✅ SCROLL FIX
═══════════════════════════════════════════ */
.ab-deepsearch-container {
  flex: 1; overflow-y: auto;
  min-height: 0; /* ✅ CRITICAL */
  padding: 16px 20px 20px;
}
.ab-search-history-section { padding: 0 20px 20px; flex-shrink: 0; }
.ab-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ab-text-muted);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.ab-section-label-action {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: none; border: none; color: var(--ab-text-muted);
  cursor: pointer; transition: color .15s;
}
.ab-section-label-action:hover { color: var(--ab-error); }
.ab-search-history-list { display: flex; flex-direction: column; gap: 4px; }
.ab-search-history-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--ab-radius); cursor: pointer;
  transition: var(--ab-transition); font-size: 12px; color: var(--ab-text);
}
.ab-search-history-item:hover { background: var(--ab-bg-alt); }
.ab-search-history-item i { color: var(--ab-text-muted); flex-shrink: 0; }
.ab-sh-query {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-sh-meta { font-size: 10px; color: var(--ab-text-dim); flex-shrink: 0; }

/* ═══════════════════════════════════════════
   §14 — KNOWLEDGE BASE VIEW  ✅ SCROLL FIX
═══════════════════════════════════════════ */
.ab-kb-layout {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 20px 20px;
  overflow-y: auto; /* ✅ scrollable */
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}
.ab-kb-card {
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border: 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl); padding: 20px;
  box-shadow: var(--ab-shadow-card); flex-shrink: 0;
}
.ab-kb-card-header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px;
}
.ab-kb-card-header i { font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.ab-kb-card-title { font-size: 14px; font-weight: 800; color: var(--ab-text); margin-bottom: 3px; }
.ab-kb-card-sub   { font-size: 12px; color: var(--ab-text-muted); }
.ab-kb-formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ab-kb-format-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg); background: var(--ab-bg-alt);
  transition: var(--ab-transition);
}
.ab-kb-format-card:hover { border-color: var(--ab-primary); }
.ab-kb-format-card i     { font-size: 22px; }
.ab-kb-format-name       { font-size: 12px; font-weight: 700; color: var(--ab-text); }
.ab-kb-format-detail     { font-size: 10px; color: var(--ab-text-muted); }
.ab-kb-list { display: flex; flex-direction: column; gap: 6px; }
.ab-kb-empty {
  text-align: center; padding: 24px;
  color: var(--ab-text-muted); font-size: 12px;
}
.ab-kb-empty i {
  font-size: 28px; display: block;
  opacity: .25; margin-bottom: 8px;
}
.ab-kb-session-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--ab-radius-lg);
  border: 1px solid var(--ab-border); background: var(--ab-bg-alt);
  transition: var(--ab-transition);
}
.ab-kb-session-item:hover { border-color: var(--ab-primary); }
.ab-kb-session-item i     { font-size: 18px; flex-shrink: 0; }
.ab-kb-session-info       { flex: 1; min-width: 0; }
.ab-kb-session-name {
  display: block; font-size: 13px; font-weight: 700; color: var(--ab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-kb-session-meta  { font-size: 10px; color: var(--ab-text-muted); margin-top: 2px; }
.ab-kb-session-status {
  font-size: 11px; font-weight: 700; color: var(--ab-success);
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ab-kb-card-tips {
  background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(118,75,162,.03));
  border-color: rgba(99,102,241,.18);
}
.ab-kb-tips-title {
  font-size: 13px; font-weight: 800; color: var(--ab-primary);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.ab-kb-tips-list {
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ab-kb-tips-list li { font-size: 12px; color: var(--ab-text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════
   §15 — HISTORY VIEW  ✅ SCROLL + FORMAT FIX
═══════════════════════════════════════════ */

/* ✅ Agent filter pills — flex-shrink: 0 obligatoire */
.ab-history-agent-filter {
  padding: 10px 20px 4px;
  flex-shrink: 0; /* ✅ CRITICAL — ne prend pas de place au scroll */
}
.ab-haf-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ab-haf-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ab-text-muted);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.ab-haf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-haf-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--ab-border-strong);
  background: var(--ab-surface-solid); color: var(--ab-text-muted);
  transition: var(--ab-transition); white-space: nowrap;
}
.ab-haf-pill:hover { border-color: var(--ab-primary); color: var(--ab-primary); }
.ab-haf-pill-active {
  border-color: var(--ab-primary);
  background: var(--ab-primary-light); color: var(--ab-primary);
}
.ab-haf-pill-count {
  background: rgba(99,102,241,.15); color: var(--ab-primary);
  font-size: 9px; font-weight: 800; padding: 1px 6px;
  border-radius: 10px; min-width: 18px; text-align: center;
}
.ab-haf-pill-icon { font-size: 10px; opacity: .7; }

/* ✅ History list scrollable */
.ab-history-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 20px 20px;
  overflow-y: auto; /* ✅ scrollable */
  flex: 1;
  min-height: 0; /* ✅ CRITICAL */
}

/* History groups */
.ab-history-group { margin-bottom: 20px; }
.ab-history-group-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ab-text-muted);
  padding: 6px 2px 8px; margin-bottom: 6px;
  border-bottom: 1.5px solid var(--ab-border);
}
.ab-history-group-header.ab-history-group-agent {
  cursor: pointer; transition: color .15s;
}
.ab-history-group-header.ab-history-group-agent:hover { color: var(--ab-primary); }
.ab-history-group-count {
  background: var(--ab-primary-light); color: var(--ab-primary);
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 20px;
}
.ab-history-group-action {
  margin-left: auto; font-size: 10px; color: var(--ab-primary);
  opacity: 0; transition: opacity .15s;
  display: flex; align-items: center; gap: 3px;
}
.ab-history-group-header.ab-history-group-agent:hover .ab-history-group-action {
  opacity: 1;
}

/* Agent selected header */
.ab-history-agent-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0 14px;
  border-bottom: 1.5px solid var(--ab-border);
  margin-bottom: 14px; flex-shrink: 0;
}
.ab-history-back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ab-text-muted);
  background: var(--ab-bg-alt); border: none;
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: var(--ab-transition); flex-shrink: 0;
}
.ab-history-back-btn:hover { background: var(--ab-border); color: var(--ab-primary); }
.ab-history-agent-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--ab-text);
}

/* History items */
.ab-history-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl);
  background: var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  transition: var(--ab-transition); cursor: pointer;
  box-shadow: var(--ab-shadow-card);
  overflow: hidden;
}
.ab-history-item:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow: var(--ab-shadow-card-hover);
}
.ab-history-item-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ab-primary-light); color: var(--ab-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ab-history-item-body { flex: 1; min-width: 0; }
.ab-history-item-title {
  font-size: 13px; font-weight: 800; color: var(--ab-text);
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-history-item-badge {
  font-size: 9px; font-weight: 800; padding: 1px 6px;
  border-radius: 10px; background: var(--ab-primary-light); color: var(--ab-primary);
  flex-shrink: 0;
}
.ab-history-item-preview {
  font-size: 11px; color: var(--ab-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 6px; line-height: 1.4;
}
.ab-history-item-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ab-history-item-meta span {
  font-size: 10px; font-weight: 600; color: var(--ab-text-dim);
  display: flex; align-items: center; gap: 3px;
}
.ab-history-item-actions {
  display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start;
}

/* ═══════════════════════════════════════════
   §16 — BUTTONS
═══════════════════════════════════════════ */
.ab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--ab-radius-lg);
  font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent; transition: var(--ab-transition);
  white-space: nowrap; font-family: var(--mcp-font);
  text-decoration: none; flex-shrink: 0;
}
.ab-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.ab-btn-primary {
  background: var(--ab-gradient); color: #fff;
  border-color: var(--ab-primary);
  box-shadow: 0 2px 10px rgba(99,102,241,.25);
}
.ab-btn-primary:hover:not(:disabled) {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.ab-btn-secondary {
  background: var(--ab-surface-solid); color: var(--ab-text);
  border-color: var(--ab-border-strong);
}
.ab-btn-secondary:hover:not(:disabled) {
  border-color: var(--ab-primary); color: var(--ab-primary);
  background: var(--ab-primary-light);
}
.ab-btn-ghost {
  background: none; color: var(--ab-text-muted); border-color: transparent;
}
.ab-btn-ghost:hover:not(:disabled) {
  background: var(--ab-bg-alt); color: var(--ab-text);
  border-color: var(--ab-border);
}
.ab-btn-danger {
  background: var(--ab-error-light); color: var(--ab-error);
  border-color: rgba(239,68,68,.2);
}
.ab-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.15); }

/* ═══════════════════════════════════════════
   §17 — LOADING / EMPTY STATES
═══════════════════════════════════════════ */
.ab-loading-state {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 60px 20px; color: var(--ab-text-muted);
  font-size: 12px; grid-column: 1 / -1;
}
.ab-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center; grid-column: 1 / -1;
}
.ab-empty-state i {
  font-size: 36px; color: var(--ab-border-strong);
  margin-bottom: 16px; opacity: .3; display: block;
}
.ab-empty-title {
  font-size: 15px; font-weight: 800; color: var(--ab-text-muted); margin-bottom: 6px;
}
.ab-empty-sub {
  font-size: 12px; color: var(--ab-text-dim);
  max-width: 300px; line-height: 1.6; margin-bottom: 16px;
}

/* ═══════════════════════════════════════════
   §18 — TOAST
═══════════════════════════════════════════ */
.ab-toast {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--ab-radius-xl);
  background: var(--ab-surface-solid);
  box-shadow: var(--ab-shadow-xl);
  border: 1px solid var(--ab-border-strong);
  font-size: 12px; font-weight: 700; color: var(--ab-text);
  z-index: 9999; max-width: 360px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  transform: translateY(20px); opacity: 0; pointer-events: none;
}
.ab-toast:not(.ab-hidden) {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
.ab-toast i { font-size: 15px; flex-shrink: 0; }
.ab-toast-success { border-left: 3px solid var(--ab-success); }
.ab-toast-success i { color: var(--ab-success); }
.ab-toast-error   { border-left: 3px solid var(--ab-error); }
.ab-toast-error   i { color: var(--ab-error); }
.ab-toast-warning { border-left: 3px solid var(--ab-warning); }
.ab-toast-warning i { color: var(--ab-warning); }
.ab-toast-info    { border-left: 3px solid var(--ab-info); }
.ab-toast-info    i { color: var(--ab-info); }

/* ─────────────────────────────────────────────
   §19 — DARK MODE ADJUSTMENTS
───────────────────────────────────────────── */
body.dark-mode .ab-agent-card,
body.dark-mode .ab-tpl-card,
body.dark-mode .ab-kb-card,
body.dark-mode .ab-history-item,
body.dark-mode .ab-tool-category-card {
  background: rgba(17,24,39,0.85);
  border-color: rgba(255,255,255,.07);
}
body.dark-mode .ab-agent-card:hover,
body.dark-mode .ab-tpl-card:hover,
body.dark-mode .ab-history-item:hover,
body.dark-mode .ab-tool-category-card:hover {
  border-color: rgba(99,102,241,.3);
}
body.dark-mode .ab-tool-cat-header   { background: rgba(255,255,255,.03); }
body.dark-mode .ab-kb-format-card    { background: rgba(255,255,255,.04); }
body.dark-mode .ab-kb-session-item   { background: rgba(255,255,255,.04); }
body.dark-mode .ab-kb-card-tips      { background: rgba(99,102,241,.08); }
body.dark-mode .ab-attach-btn,
body.dark-mode .mcp-attach-btn       { background: rgba(255,255,255,.05); }
body.dark-mode .ab-tool-chip-item    { background: rgba(255,255,255,.06); }
body.dark-mode .ab-filter-tab        { background: rgba(255,255,255,.05); }
body.dark-mode .ab-tpl-cat-btn       { background: rgba(255,255,255,.05); }
body.dark-mode .ab-quick-btn         {
  background: rgba(17,24,39,0.8);
  border-color: rgba(255,255,255,.1);
}
body.dark-mode .ab-quick-btn:hover   {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.4);
}
body.dark-mode .ab-message-content   {
  background: rgba(17,24,39,0.85);
  border-color: rgba(255,255,255,.07);
}
body.dark-mode .ab-message-content code { background: rgba(99,102,241,.15); }
body.dark-mode .ab-message-content pre  { background: rgba(0,0,0,.3); }
body.dark-mode .ab-toast              { background: #1e293b; }
body.dark-mode .ab-user-menu         { background: #1e293b; }
body.dark-mode .ab-btn-secondary     { background: rgba(255,255,255,.06); }
body.dark-mode .ab-btn-secondary:hover:not(:disabled) {
  background: rgba(99,102,241,.15);
}
body.dark-mode .mcp-mode-btn.active  {
  background: rgba(99,102,241,.2); color: #818cf8;
}
body.dark-mode .ab-input-hint kbd   {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
body.dark-mode .ab-input-actions,
body.dark-mode .mcp-input-actions   { background: rgba(255,255,255,.03); }
body.dark-mode .ab-input-wrapper,
body.dark-mode .mcp-input-wrapper   { background: rgba(17,24,39,0.9); }
body.dark-mode .ab-haf-pill         { background: rgba(255,255,255,.06); }
body.dark-mode .ab-history-group-header { border-color: rgba(255,255,255,.07); }
body.dark-mode .ab-agent-card-meta span { background: rgba(255,255,255,.06); }

/* ─────────────────────────────────────────────
   §20 — RESPONSIVE — TABLET (≤ 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ab-agents-grid    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .ab-templates-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .ab-tools-grid     { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ab-quick-prompts  { grid-template-columns: repeat(2, 1fr); }
  .mcp-mode-selector .mcp-mode-btn span { display: none; }
  .mcp-mode-selector .mcp-mode-btn { padding: 5px 9px; }
}

/* ─────────────────────────────────────────────
   §21 — RESPONSIVE — MOBILE (≤ 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar off-canvas */
  .ab-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    z-index: 1000; transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    width: var(--ab-sidebar-w) !important;
    min-width: var(--ab-sidebar-w) !important;
    box-shadow: var(--ab-shadow-xl);
  }
  .ab-sidebar-mobile-open { transform: translateX(0) !important; }
  .ab-sidebar .ab-sidebar-text,
  .ab-sidebar .ab-nav-badge,
  .ab-sidebar .ab-nav-label,
  .ab-sidebar .ab-logo-text,
  .ab-sidebar .ab-user-info,
  .ab-sidebar .ab-user-plan,
  .ab-sidebar .ab-user-chevron { display: flex !important; opacity: 1 !important; }
  .ab-sidebar .ab-logo-icon    { display: none !important; }
  .ab-sidebar .ab-new-btn      { padding: 9px 14px; justify-content: flex-start; }
  .ab-sidebar .ab-nav-item     { padding: 9px 12px; justify-content: flex-start; }
  .ab-sidebar .ab-sidebar-user-trigger { padding: 8px 10px; justify-content: flex-start; }

  .ab-mobile-close   { display: flex; }
  .ab-sidebar-toggle { display: none; }

  /* Header */
  .ab-header { padding: 0 10px; gap: 6px; }
  .mcp-mode-selector { display: none; }
  .ab-header-controls { gap: 3px; }
  .ab-header-btn-primary span { display: none; }
  .ab-header-btn-primary { padding: 6px 8px; }
  .ab-header-controls .ab-header-btn-icon:not(.ab-theme-toggle):nth-child(n+3) { display: none; }

  /* Chat */
  .ab-messages { padding: 12px; }
  .ab-message-content { border-radius: 10px; padding: 10px 12px; font-size: 12px; }
  .ab-welcome { padding: 24px 16px; gap: 14px; }
  .ab-welcome-logo-img { width: 48px; height: 48px; }
  .ab-quick-prompts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ab-quick-btn { padding: 10px 12px; }
  .ab-quick-btn-desc { display: none; }
  .ab-welcome-stats { gap: 16px; }
  .ab-welcome-stat-val { font-size: 20px; }

  /* Input */
  .ab-input-section { padding: 0 10px 10px; }
  .ab-attach-label  { display: none; }
  .ab-input-footer  { display: none; }

  /* Views */
  .ab-view-header      { padding: 14px 14px 0; }
  .ab-view-toolbar     { padding: 12px 14px 0; flex-direction: column; align-items: flex-start; }
  .ab-view-description { padding: 6px 14px 0; }
  .ab-view-search input { width: 140px; }
  .ab-history-agent-filter { padding: 10px 14px 4px; }

  /* Grids */
  .ab-agents-grid    { grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .ab-templates-grid { grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .ab-tools-grid     { grid-template-columns: 1fr; padding: 12px 14px 14px; }
  .ab-history-list   { padding: 10px 14px 14px; }
  .ab-deepsearch-container { padding: 12px 14px 14px; }
  .ab-kb-layout      { padding: 12px 14px 14px; }

  /* Stats bars */
  .ab-tools-stats-bar,
  .ab-agent-stats-bar { padding: 10px 14px; }
  .ab-tools-stat,
  .ab-agent-stat { padding: 0 12px; }
  .ab-tools-stat-val,
  .ab-agent-stat-val { font-size: 16px; }
  .ab-tools-search-wrap { margin: 10px 14px; }

  /* Template cats */
  .ab-template-cats {
    padding: 10px 14px;
    overflow-x: auto; flex-wrap: nowrap;
  }
  .ab-tpl-cat-btn { flex-shrink: 0; }

  /* Metrics */
  .ab-metrics-bar { flex-wrap: wrap; padding: 6px 10px; }
  .ab-metric { padding: 0 8px; }

  /* Agent indicator */
  .mcp-agent-indicator { display: none; }

  /* KB */
  .ab-kb-formats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Toast */
  .ab-toast { bottom: 12px; right: 12px; left: 12px; max-width: unset; }
}

/* ─────────────────────────────────────────────
   §22 — RESPONSIVE — SMALL MOBILE (≤ 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ab-quick-prompts  { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 6px; }
  .ab-welcome-stat-val { font-size: 18px; }
  .ab-tools-stats-bar,
  .ab-agent-stats-bar { display: none; }
  .ab-kb-formats-grid { grid-template-columns: 1fr; }
  .ab-history-item-meta span:not(:first-child) { display: none; }
  .ab-agent-card-meta span:nth-child(n + 3)    { display: none; }
  .ab-input-section { padding: 0 8px 8px; }
  .ab-haf-pills { overflow-x: auto; flex-wrap: nowrap; }
  .ab-haf-pill  { flex-shrink: 0; }
}

/* ─────────────────────────────────────────────
   §23 — LARGE SCREENS (≥ 1280px)
───────────────────────────────────────────── */
@media (min-width: 1280px) {
  .ab-agents-grid    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .ab-templates-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ab-tools-grid     { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .ab-quick-prompts  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1600px) {
  .ab-templates-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─────────────────────────────────────────────
   §24 — PRINT
───────────────────────────────────────────── */
@media print {
  .ab-sidebar, .ab-header, .ab-input-section,
  .ab-view-toolbar, .ab-react-bar { display: none !important; }
  .ab-main    { margin: 0; }
  .ab-messages { overflow: visible; padding: 0; }
  .ab-message-content { box-shadow: none; border: 1px solid #ddd; }
}

/* ═══════════════════════════════════════════════════════════════
   §25 — VIEW VISIBILITY OVERRIDE (priority max)
═══════════════════════════════════════════════════════════════ */
.ab-view:not(.ab-view-active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  opacity: 0 !important;
}
.ab-view.ab-view-active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  opacity: 1 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important; /* ✅ CRITICAL */
  animation: abFadeIn .18s ease;
}

/* ═══════════════════════════════════════════════════════════════
   §26 — CHAT MODEL SELECTOR
═══════════════════════════════════════════════════════════════ */
.ab-cmd-wrap {
  position: relative; flex-shrink: 0;
}
.ab-cmd-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 20px;
  border: 1.5px solid var(--ab-border-strong);
  background: var(--ab-surface-solid);
  color: var(--ab-text-muted); cursor: pointer;
  font-size: 11px; font-weight: 700;
  transition: var(--ab-transition); font-family: var(--mcp-font);
  white-space: nowrap; height: 32px;
}
.ab-cmd-trigger:hover,
.ab-cmd-wrap.ab-cmd-open .ab-cmd-trigger {
  border-color: var(--ab-primary); color: var(--ab-primary);
  background: var(--ab-primary-light);
}
.ab-cmd-wrap.ab-cmd-open #abCmdChevron { transform: rotate(180deg); }

.ab-cmd-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  min-width: 250px;
  background: var(--ab-surface-solid);
  border: 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-xl); padding: 10px;
  box-shadow: var(--ab-shadow-xl); z-index: 600;
  display: none; animation: abFadeIn .15s ease;
}
.ab-cmd-wrap.ab-cmd-open .ab-cmd-dropdown { display: block; }

.ab-cmd-providers {
  display: flex; gap: 4px; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ab-border);
}
.ab-cmd-provider {
  flex: 1; padding: 5px 6px; border-radius: 8px;
  border: 1.5px solid var(--ab-border); background: var(--ab-bg-alt);
  color: var(--ab-text-muted); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: var(--ab-transition);
  font-family: var(--mcp-font); text-align: center;
}
.ab-cmd-provider:hover { border-color: var(--ab-primary); color: var(--ab-primary); }
.ab-cmd-provider.active {
  border-color: var(--ab-primary); background: var(--ab-primary-light);
  color: var(--ab-primary);
}

.ab-cmd-models {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 260px; overflow-y: auto;
}
.ab-cmd-model {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 9px;
  border: none; background: none; color: var(--ab-text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  text-align: left; transition: var(--ab-transition);
  font-family: var(--mcp-font); width: 100%;
}
.ab-cmd-model:hover { background: var(--ab-bg-alt); }
.ab-cmd-model.active { background: var(--ab-primary-light); color: var(--ab-primary); }
.ab-cmd-model.active::after {
  content: '✓'; font-size: 11px; font-weight: 900;
}

.ab-cmd-footer {
  font-size: 10px; color: var(--ab-success);
  padding: 7px 10px 2px; border-top: 1px solid var(--ab-border);
  margin-top: 6px; line-height: 1.5; font-weight: 600;
}
.ab-cmd-footer:empty { display: none; }

@media (max-width: 520px) {
  #abChatModelLabel { display: none; }

  /* ⬅ CRITIQUE : backdrop-filter sur .ab-header crée un containing block
     qui casse le position:fixed du dropdown. On le désactive sur mobile. */
  .ab-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Le dropdown devient un vrai modal centré, relatif à l'écran entier */
  .ab-cmd-dropdown {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 340px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    box-shadow: var(--ab-shadow-xl) !important;
    margin: 0 !important;
  }

  .ab-cmd-models {
    max-height: 50vh !important;
  }

  /* Backdrop sombre derrière le modal */
  .ab-cmd-wrap.ab-cmd-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §27 — RECENT CONVERSATIONS SIDEBAR
═══════════════════════════════════════════════════════════════ */
.ab-recent-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px;
  cursor: pointer; transition: var(--ab-transition);
}
.ab-recent-item:hover { background: var(--ab-sidebar-hover); }
.ab-recent-item-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ab-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ab-text-muted); flex-shrink: 0;
}
.ab-recent-item-icon.ab-recent-agent {
  background: var(--ab-primary-light); color: var(--ab-primary);
}
.ab-recent-item-body { flex: 1; min-width: 0; }
.ab-recent-item-title {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ab-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-recent-item-date { font-size: 10px; color: var(--ab-text-muted); }
.ab-recent-empty {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; font-size: 11px; color: var(--ab-text-muted);
}
.ab-recent-empty i { opacity: .4; font-size: 12px; }

/* ══════════════════════════════════════════════════════
   HISTORY VIEW — Cards spacing & style
══════════════════════════════════════════════════════ */

.ab-history-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}

/* Groupe (General Chat / Agent X) */
.ab-history-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header du groupe */
.ab-history-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--mcp-text-muted, #64748b);
  padding: 0 4px 6px;
  border-bottom: 1.5px solid var(--mcp-border, #e2e8f0);
  margin-bottom: 4px;
}

.ab-history-group-count {
  background: rgba(99,102,241,.1);
  color: #6366f1;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 20px;
}

/* Groupe cliquable (filtrer par agent) */
.ab-history-group-agent {
  cursor: pointer;
  transition: color .15s;
}
.ab-history-group-agent:hover { color: #6366f1; }

.ab-history-group-action {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #6366f1;
  opacity: 0;
  transition: opacity .15s;
}
.ab-history-group-agent:hover .ab-history-group-action { opacity: 1; }

/* ── History Item — Card style ── */
.ab-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--mcp-surface, #ffffff);
  border: 1.5px solid var(--mcp-border, #e2e8f0);
  border-radius: 14px;
  transition: all .15s;
  position: relative;
}

.ab-history-item:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 16px rgba(99,102,241,.1);
  transform: translateY(-1px);
}

/* Dark mode */
body.dark-mode .ab-history-item {
  background: var(--mcp-surface, #1e293b);
}

.ab-history-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(99,102,241,.1);
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ab-history-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ab-history-item-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--mcp-text, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ab-history-item-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(99,102,241,.12);
  color: #6366f1;
  flex-shrink: 0;
}

.ab-history-item-preview {
  font-size: 12px;
  color: var(--mcp-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ab-history-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.ab-history-item-meta span {
  font-size: 10px;
  font-weight: 600;
  color: var(--mcp-text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 3px;
}

.ab-history-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}

.ab-history-item:hover .ab-history-item-actions { opacity: 1; }

/* Header agent (vue filtrée) */
.ab-history-agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 16px;
  border-bottom: 1.5px solid var(--mcp-border, #e2e8f0);
  margin-bottom: 8px;
}

.ab-history-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--mcp-bg-2, #f1f5f9);
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--mcp-text, #475569);
  cursor: pointer;
  transition: all .15s;
}
.ab-history-back-btn:hover { background: var(--mcp-border, #e2e8f0); }

.ab-history-agent-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--mcp-text, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pills filtre agent (ab-history-agent-filter) */
.ab-haf-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.ab-haf-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--mcp-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.ab-haf-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.ab-haf-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--mcp-border, #e2e8f0);
  background: var(--mcp-bg-2, #f8fafc);
  color: var(--mcp-text-muted, #64748b);
  cursor: pointer;
  transition: all .15s;
}

.ab-haf-pill:hover { border-color: #6366f1; color: #6366f1; }

.ab-haf-pill-active {
  border-color: #6366f1;
  background: rgba(99,102,241,.1);
  color: #6366f1;
}

.ab-haf-pill-count {
  background: rgba(99,102,241,.15);
  color: #6366f1;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 20px;
}

.ab-haf-pill-icon { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════
   §28 — AGENT ANALYTICS VIEW
   Prefix  : aan- (Agent ANalytics)
   Palette : hérite des --ab-* variables
   Sections: KPIs · Charts · Rankings · Tool Usage · Table · Insights
═══════════════════════════════════════════════════════════════ */

/* ── §28.0 — View Root & CSS Custom Props ──────────────────── */
#view-analytics {
  /* ✅ SCROLL OVERRIDE — surpasse §25 overflow:hidden !important
     grâce à la spécificité supérieure (#id > .class.class)         */
  overflow-y: auto   !important;
  overflow-x: hidden !important;

  /* Layout */
  padding: 16px 20px 40px;
  gap    : 20px;
  flex-direction: column;

  /* ── Variables locales (réutilisées dans tout le module) ── */
  --aan-muted     : var(--ab-text-muted);
  --aan-border    : var(--ab-border);
  --aan-surface   : var(--ab-surface-solid);
  --aan-bg-alt    : var(--ab-bg-alt);
  --aan-radius    : var(--ab-radius-lg);
  --aan-shadow    : var(--ab-shadow-card);
  --aan-shadow-h  : var(--ab-shadow-card-hover);
  --aan-gradient  : var(--ab-gradient);
  --aan-transition: var(--ab-transition);
}

/* ── §28.1 — Period Selector ───────────────────────────────── */
.aan-period-selector {
  display        : flex;
  gap            : 3px;
  background     : var(--ab-bg-alt);
  border         : 1px solid var(--ab-border);
  border-radius  : 20px;
  padding        : 3px;
  flex-shrink    : 0;
}

.aan-period-btn {
  padding        : 5px 14px;
  border         : none;
  border-radius  : 17px;
  font-size      : 11px;
  font-weight    : 800;
  color          : var(--ab-text-muted);
  background     : none;
  cursor         : pointer;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
  white-space    : nowrap;
  letter-spacing : .3px;
}

.aan-period-btn:hover {
  color      : var(--ab-primary);
  background : var(--ab-primary-light);
}

.aan-period-btn-active {
  background : var(--ab-surface-solid);
  color      : var(--ab-primary);
  box-shadow : var(--ab-shadow-sm);
}

body.dark-mode .aan-period-btn-active {
  background : rgba(99,102,241,.20);
  color      : #818cf8;
}

/* ── §28.2 — KPI Grid ─────────────────────────────────────── */
.aan-kpi-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(180px, 1fr));
  gap                   : 12px;
  flex-shrink           : 0;
}

.aan-kpi-card {
  display         : flex;
  align-items     : center;
  gap             : 14px;
  padding         : 18px 16px;
  background      : var(--ab-glass-bg);
  backdrop-filter : var(--ab-glass-blur);
  border          : 1.5px solid var(--ab-border);
  border-radius   : var(--ab-radius-xl);
  box-shadow      : var(--ab-shadow-card);
  transition      : var(--ab-transition);
  flex-shrink     : 0;
}

.aan-kpi-card:hover {
  border-color : rgba(99,102,241,.30);
  box-shadow   : var(--ab-shadow-card-hover);
  transform    : translateY(-2px);
}

.aan-kpi-icon {
  width          : 46px;
  height         : 46px;
  border-radius  : 13px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  flex-shrink    : 0;
}

.aan-kpi-body {
  flex    : 1;
  min-width: 0;
}

.aan-kpi-label {
  font-size      : 10px;
  font-weight    : 700;
  color          : var(--ab-text-muted);
  text-transform : uppercase;
  letter-spacing : .5px;
  margin-bottom  : 4px;
}

.aan-kpi-val {
  font-size                : 22px;
  font-weight              : 900;
  line-height              : 1.1;
  margin-bottom            : 4px;
  background               : var(--ab-gradient);
  -webkit-background-clip  : text;
  -webkit-text-fill-color  : transparent;
  background-clip          : text;
}

/* KPI pop animation (toggled by JS) */
@keyframes aanKpiPop {
  0%   { transform: scale(.96); opacity: .7; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);   opacity: 1; }
}

.aan-kpi-anim {
  animation: aanKpiPop .35s cubic-bezier(.4,0,.2,1);
}

/* KPI Deltas */
.aan-kpi-delta {
  font-size  : 10px;
  font-weight: 700;
  display    : flex;
  align-items: center;
  gap        : 3px;
  line-height: 1.4;
}

.aan-kpi-delta.positive { color: var(--ab-success); }
.aan-kpi-delta.negative { color: var(--ab-error);   }
.aan-kpi-delta.neutral  { color: var(--ab-text-muted); }

/* ── §28.3 — Charts Row ───────────────────────────────────── */
.aan-charts-row {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
  gap                   : 14px;
  flex-shrink           : 0;
}

/* ── §28.4 — Chart Card ───────────────────────────────────── */
.aan-chart-card {
  background      : var(--ab-glass-bg);
  backdrop-filter : var(--ab-glass-blur);
  border          : 1.5px solid var(--ab-border);
  border-radius   : var(--ab-radius-xl);
  overflow        : hidden;
  box-shadow      : var(--ab-shadow-card);
  display         : flex;
  flex-direction  : column;
  transition      : var(--ab-transition);
}

.aan-chart-card:hover {
  border-color : rgba(99,102,241,.22);
  box-shadow   : var(--ab-shadow-card-hover);
}

/* Wide card — occupe 2 colonnes quand la grille le permet */
.aan-chart-card-wide {
  grid-column: span 2;
}

/* Chart header */
.aan-chart-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 14px 18px 12px;
  border-bottom   : 1px solid var(--ab-border);
  background      : var(--ab-gradient-header);
  flex-shrink     : 0;
  gap             : 12px;
  flex-wrap       : wrap;
}

.aan-chart-title {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
}

.aan-chart-title i {
  color    : var(--ab-primary);
  font-size: 14px;
}

/* Legend */
.aan-chart-legend {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
  font-size  : 11px;
  font-weight: 600;
  color      : var(--ab-text-muted);
}

.aan-legend-dot {
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
  flex-shrink  : 0;
}

/* ── §28.5 — Chart Wrappers ───────────────────────────────── */
.aan-chart-wrap {
  flex      : 1;
  position  : relative;
  padding   : 16px;
  min-height: 160px;
}

.aan-chart-wrap canvas {
  display: block;
  width  : 100% !important;
}

/* Donut layout — centre l'overlay et le canvas */
.aan-chart-wrap-donut {
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-height      : 240px;
  position        : relative;
  padding         : 12px 16px 0;
}

.aan-chart-wrap-donut canvas {
  position: relative;
  z-index : 1;
}

/* Donut center overlay */
.aan-chart-donut-center {
  position      : absolute;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -60%);
  text-align    : center;
  pointer-events: none;
  z-index       : 2;
}

.aan-donut-val {
  display                 : block;
  font-size               : 22px;
  font-weight             : 900;
  background              : var(--ab-gradient);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
  line-height             : 1.1;
}

.aan-donut-label {
  display        : block;
  font-size      : 10px;
  font-weight    : 700;
  color          : var(--ab-text-muted);
  text-transform : uppercase;
  letter-spacing : .4px;
  margin-top     : 3px;
}

/* Chart empty states */
.aan-chart-empty {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  padding         : 30px 20px;
  color           : var(--ab-text-muted);
  text-align      : center;
  font-size       : 12px;
  gap             : 8px;
  position        : absolute;
  inset           : 0;
  background      : var(--ab-glass-bg);
  border-radius   : var(--ab-radius-xl);
}

.aan-chart-empty i {
  font-size: 28px;
  opacity  : .20;
}

/* ── §28.6 — Agents Ranking ───────────────────────────────── */
.aan-agents-ranking {
  flex          : 1;
  padding       : 12px 16px 16px;
  display       : flex;
  flex-direction: column;
  gap           : 7px;
  overflow-y    : auto;
  max-height    : 310px;
}

.aan-rank-item {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 8px 10px;
  border-radius: var(--ab-radius-lg);
  background : var(--ab-bg-alt);
  border     : 1px solid var(--ab-border);
  transition : var(--ab-transition);
}

.aan-rank-item:hover {
  border-color: rgba(99,102,241,.30);
  background  : var(--ab-primary-light);
}

/* Rank number chips */
.aan-rank-num {
  width          : 24px;
  height         : 24px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  font-weight    : 900;
  flex-shrink    : 0;
}

.aan-rank-num.gold   { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.aan-rank-num.silver { background: linear-gradient(135deg,#94a3b8,#64748b); color:#fff; }
.aan-rank-num.bronze { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.aan-rank-num.other  { background: var(--ab-border); color: var(--ab-text-muted); }

.aan-rank-icon {
  font-size  : 18px;
  flex-shrink: 0;
  width      : 28px;
  text-align : center;
}

.aan-rank-info {
  flex     : 1;
  min-width: 0;
}

.aan-rank-name {
  font-size     : 12px;
  font-weight   : 700;
  color         : var(--ab-text);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.aan-rank-meta {
  font-size  : 10px;
  color      : var(--ab-text-muted);
  margin-top : 1px;
}

/* Progress bar */
.aan-rank-bar-wrap {
  width        : 72px;
  height       : 5px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
  flex-shrink  : 0;
}

.aan-rank-bar-fill {
  height       : 100%;
  background   : var(--ab-gradient);
  border-radius: 99px;
  transition   : width .45s cubic-bezier(.4,0,.2,1);
}

.aan-rank-count {
  font-size  : 12px;
  font-weight: 800;
  color      : var(--ab-primary);
  flex-shrink: 0;
  min-width  : 24px;
  text-align : right;
}

/* ── §28.7 — Tool Usage Breakdown ────────────────────────── */
.aan-tool-usage-grid {
  flex          : 1;
  padding       : 12px 18px 16px;
  display       : flex;
  flex-direction: column;
  gap           : 7px;
  overflow-y    : auto;
  max-height    : 290px;
}

.aan-tool-usage-item {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 4px 0;
}

.aan-tool-usage-name {
  font-size     : 11px;
  font-weight   : 600;
  color         : var(--ab-text-muted);
  min-width     : 110px;
  max-width     : 150px;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
  flex-shrink   : 0;
}

.aan-tool-usage-bar {
  flex         : 1;
  height       : 6px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
}

.aan-tool-usage-bar-fill {
  height       : 100%;
  border-radius: 99px;
  transition   : width .5s cubic-bezier(.4,0,.2,1);
}

/* Heatmap colours */
.aan-tool-usage-heat-high   { background: linear-gradient(90deg,#6366f1,#8b5cf6); }
.aan-tool-usage-heat-medium { background: linear-gradient(90deg,#10b981,#06b6d4); }
.aan-tool-usage-heat-low    { background: linear-gradient(90deg,#94a3b8,#64748b); }

.aan-tool-usage-count {
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
  min-width  : 64px;
  text-align : right;
  white-space: nowrap;
}

/* ── §28.8 — Deep Search Stats ───────────────────────────── */
.aan-search-stats {
  flex          : 1;
  padding       : 14px 18px;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  justify-content: center;
}

.aan-search-stat-row {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 10px;
  padding         : 9px 0;
  border-bottom   : 1px solid var(--ab-border);
}

.aan-search-stat-row:last-child { border-bottom: none; }

.aan-search-stat-label {
  display    : flex;
  align-items: center;
  gap        : 7px;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ab-text-muted);
}

.aan-search-stat-label i {
  width    : 16px;
  color    : var(--ab-primary);
  font-size: 12px;
}

.aan-search-stat-val {
  font-size  : 14px;
  font-weight: 800;
  color      : var(--ab-text);
  flex-shrink: 0;
}

/* ── §28.9 — Sessions Table ──────────────────────────────── */
.aan-table-card {
  background      : var(--ab-glass-bg);
  backdrop-filter : var(--ab-glass-blur);
  border          : 1.5px solid var(--ab-border);
  border-radius   : var(--ab-radius-xl);
  overflow        : hidden;
  box-shadow      : var(--ab-shadow-card);
  flex-shrink     : 0;
}

/* Inline search inside table header */
.aan-table-search {
  padding      : 6px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 11px;
  font-family  : var(--mcp-font);
  outline      : none;
  width        : 200px;
  transition   : border-color .15s;
}

.aan-table-search:focus { border-color: var(--ab-primary); }
.aan-table-search::placeholder { color: var(--ab-text-dim); }

/* Table scroll wrapper */
.aan-table-wrap { overflow-x: auto; }

/* Table */
.aan-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 12px;
}

.aan-table thead th {
  background     : var(--ab-bg-alt);
  padding        : 10px 14px;
  text-align     : left;
  font-size      : 10px;
  font-weight    : 800;
  color          : var(--ab-text-muted);
  text-transform : uppercase;
  letter-spacing : .5px;
  border-bottom  : 1.5px solid var(--ab-border);
  white-space    : nowrap;
  cursor         : pointer;
  transition     : color .15s;
  user-select    : none;
}

.aan-table thead th:hover { color: var(--ab-primary); }

.aan-table thead th i {
  font-size  : 9px;
  margin-left: 4px;
  opacity    : .45;
}

/* Rows */
.aan-table tbody tr {
  border-bottom: 1px solid var(--ab-border);
  transition   : background .12s;
  cursor       : pointer;
}

.aan-table tbody tr:last-child { border-bottom: none; }

.aan-table tbody tr:hover { background: var(--ab-primary-light); }

.aan-table tbody td {
  padding       : 10px 14px;
  color         : var(--ab-text);
  vertical-align: middle;
  white-space   : nowrap;
}

/* Agent cell */
.aan-agent-cell {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.aan-agent-cell-icon {
  font-size  : 16px;
  flex-shrink: 0;
}

/* Status badges */
.aan-status-badge {
  display    : inline-flex;
  align-items: center;
  gap        : 5px;
  padding    : 3px 9px;
  border-radius: 20px;
  font-size  : 10px;
  font-weight: 700;
  white-space: nowrap;
}

.aan-status-success { background: rgba(16,185,129,.12); color: #10b981; }
.aan-status-running { background: rgba(99,102,241,.12);  color: #6366f1; }
.aan-status-error   { background: rgba(239,68,68,.12);   color: #ef4444; }

/* Loading row */
.aan-table-loading {
  text-align: center;
  padding   : 36px 20px;
  color     : var(--ab-text-muted);
  font-size : 12px;
}

/* Table footer */
.aan-table-footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 12px 18px;
  border-top      : 1px solid var(--ab-border);
  background      : var(--ab-bg-alt);
  flex-wrap       : wrap;
  gap             : 8px;
}

.aan-table-count {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-muted);
}

/* ── §28.10 — Pagination ─────────────────────────────────── */
.aan-pagination {
  display  : flex;
  gap      : 4px;
  flex-wrap: wrap;
}

.aan-page-btn {
  width          : 30px;
  height         : 30px;
  border         : 1.5px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius);
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
}

.aan-page-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.aan-page-btn-active {
  background  : var(--ab-gradient);
  border-color: var(--ab-primary);
  color       : #fff;
  box-shadow  : 0 2px 10px rgba(99,102,241,.35);
}

.aan-page-btn-active:hover {
  opacity: .9;
  color  : #fff;
}

/* ── §28.11 — AI Insights Panel ──────────────────────────── */
.aan-insights-panel {
  background      : var(--ab-glass-bg);
  backdrop-filter : var(--ab-glass-blur);
  border          : 1.5px solid var(--ab-border);
  border-radius   : var(--ab-radius-xl);
  overflow        : hidden;
  box-shadow      : var(--ab-shadow-card);
  flex-shrink     : 0;
}

/* "Auto-generated" badge */
.aan-insights-badge {
  font-size     : 9px;
  font-weight   : 800;
  padding       : 2px 9px;
  border-radius : 20px;
  background    : linear-gradient(135deg,#10b981,#059669);
  color         : #fff;
  letter-spacing: .3px;
  animation     : abBadgePulse 2.5s infinite; /* reuse from §4 */
}

.aan-insights-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
  gap                   : 12px;
  padding               : 16px;
}

.aan-insight-card {
  display    : flex;
  align-items: flex-start;
  gap        : 14px;
  padding    : 14px 16px;
  border     : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  background : var(--ab-bg-alt);
  transition : var(--ab-transition);
}

.aan-insight-card:hover {
  border-color: rgba(99,102,241,.28);
  background  : var(--ab-primary-light);
  transform   : translateY(-2px);
  box-shadow  : var(--ab-shadow-card-hover);
}

.aan-insight-icon {
  width          : 42px;
  height         : 42px;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.aan-insight-body { flex: 1; min-width: 0; }

.aan-insight-title {
  font-size    : 12px;
  font-weight  : 800;
  color        : var(--ab-text);
  margin-bottom: 5px;
}

.aan-insight-text {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.65;
}

/* ── §28.12 — Generic Loading ────────────────────────────── */
.aan-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 32px 20px;
  color          : var(--ab-text-muted);
  font-size      : 12px;
}

/* ═══════════════════════════════════════════════════════════
   §28.13 — DARK MODE — ANALYTICS
═══════════════════════════════════════════════════════════ */
body.dark-mode .aan-kpi-card,
body.dark-mode .aan-chart-card,
body.dark-mode .aan-table-card,
body.dark-mode .aan-insights-panel {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .aan-kpi-card:hover,
body.dark-mode .aan-chart-card:hover {
  border-color: rgba(99,102,241,.30);
}

body.dark-mode .aan-rank-item,
body.dark-mode .aan-insight-card {
  background  : rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .aan-rank-item:hover,
body.dark-mode .aan-insight-card:hover {
  background  : rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.30);
}

body.dark-mode .aan-table thead th {
  background: rgba(255,255,255,.03);
}

body.dark-mode .aan-table tbody tr:hover {
  background: rgba(99,102,241,.10);
}

body.dark-mode .aan-table-footer,
body.dark-mode .aan-chart-header {
  background: rgba(255,255,255,.02);
}

body.dark-mode .aan-table-search {
  background: rgba(255,255,255,.05);
  color     : #e2e8f0;
}

body.dark-mode .aan-page-btn {
  background: rgba(255,255,255,.06);
  color     : #94a3b8;
}

body.dark-mode .aan-page-btn:hover {
  background: rgba(99,102,241,.15);
  color     : #818cf8;
}

body.dark-mode .aan-rank-bar-wrap,
body.dark-mode .aan-tool-usage-bar {
  background: rgba(255,255,255,.08);
}

body.dark-mode .aan-chart-empty {
  background: rgba(17,24,39,.85);
}

body.dark-mode .aan-period-selector {
  background  : rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .aan-search-stat-row {
  border-color: rgba(255,255,255,.06);
}

body.dark-mode .aan-table tbody td {
  color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════
   §28.14 — RESPONSIVE — ANALYTICS
═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1200px) ────────────────────────────────────── */
@media (max-width: 1200px) {
  .aan-chart-card-wide { grid-column: span 1; }
  .aan-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .aan-insights-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ── Standard Tablet (≤ 1024px) ──────────────────────────── */
@media (max-width: 1024px) {
  .aan-charts-row {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .aan-tool-usage-name {
    min-width: 90px;
    max-width: 120px;
  }
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  #view-analytics {
    padding: 12px 14px 32px;
    gap    : 14px;
  }

  .aan-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .aan-kpi-card    { padding: 14px 12px; gap: 10px; }
  .aan-kpi-icon    { width: 38px; height: 38px; font-size: 16px; }
  .aan-kpi-val     { font-size: 18px; }
  .aan-kpi-label   { font-size: 9px; }

  .aan-charts-row  { grid-template-columns: 1fr; gap: 10px; }

  .aan-chart-card-wide { grid-column: span 1; }

  .aan-insights-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .aan-tool-usage-name {
    min-width: 80px;
    max-width: 100px;
  }

  .aan-table-search { width: 140px; }

  .aan-agents-ranking,
  .aan-tool-usage-grid { max-height: 220px; }

  .aan-period-selector .aan-period-btn { padding: 5px 10px; }

  /* Hide rank bar on small screens — text only */
  .aan-rank-bar-wrap { display: none; }
}

/* ── Small Mobile (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .aan-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .aan-kpi-val  { font-size: 16px; }

  /* Hide secondary meta in table */
  .aan-table tbody td:nth-child(3),
  .aan-table tbody td:nth-child(4),
  .aan-table tbody td:nth-child(6) { display: none; }
  .aan-table thead th:nth-child(3),
  .aan-table thead th:nth-child(4),
  .aan-table thead th:nth-child(6) { display: none; }

  .aan-table-search     { width: 120px; font-size: 11px; }
  .aan-insights-grid    { padding: 10px; gap: 8px; }
  .aan-insight-card     { padding: 12px; gap: 10px; }
  .aan-insight-icon     { width: 36px; height: 36px; }
  .aan-search-stats     { padding: 10px 14px; }
  .aan-chart-donut-center { transform: translate(-50%, -65%); }
  .aan-donut-val        { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   §29 — KNOWLEDGE GRAPH VIEW (agent-knowledge-graph.js)
   Prefix  : akg- (Agent Knowledge Graph)
   D3 SVG  : kg-* (classes injectées dans le SVG par D3.js)
   Palette : hérite des --ab-* variables
═══════════════════════════════════════════════════════════════ */

/* ── §29.0 — View Root ────────────────────────────────────── */
#view-kg {
  overflow-y: auto   !important;
  overflow-x: hidden !important;
}

#kg-view-content {
  display       : flex;
  flex-direction: column;
  min-height    : 0;
  flex          : 1;
}

/* ── §29.1 — Loading ──────────────────────────────────────── */
.akg-loading {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  padding        : 60px 20px;
  color          : var(--ab-text-muted);
  font-size      : 13px;
}

.akg-spinner {
  width        : 36px;
  height       : 36px;
  border       : 3px solid var(--ab-border-strong);
  border-top-color: var(--ab-primary);
  border-radius: 50%;
  animation    : abSpin .7s linear infinite;
}

/* ── §29.2 — Main Layout ──────────────────────────────────── */
.akg-layout {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
  padding       : 16px 20px 32px;
}

/* ── §29.3 — Stats Bar ────────────────────────────────────── */
.akg-stats-bar {
  display    : flex;
  gap        : 10px;
  flex-wrap  : wrap;
  flex-shrink: 0;
}

.akg-stat {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 10px 14px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-lg);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.akg-stat:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow  : var(--ab-shadow-card-hover);
}

.akg-stat-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.akg-stat-body { display: flex; flex-direction: column; gap: 1px; }

.akg-stat-val {
  font-size                : 20px;
  font-weight              : 900;
  background               : var(--ab-gradient);
  -webkit-background-clip  : text;
  -webkit-text-fill-color  : transparent;
  background-clip          : text;
  line-height              : 1;
}

.akg-stat-lbl {
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── §29.4 — Search Bar & Filter Chips ───────────────────── */
.akg-search-bar {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
  flex-shrink: 0;
}

.akg-search-wrap {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 9px 14px;
  background     : var(--ab-input-bg);
  border         : 1.5px solid var(--ab-input-border);
  border-radius  : var(--ab-radius-lg);
  transition     : border-color .15s;
  min-width      : 240px;
  flex           : 1;
}

.akg-search-wrap:focus-within { border-color: var(--ab-primary); }
.akg-search-wrap i { color: var(--ab-text-muted); font-size: 13px; flex-shrink: 0; }

.akg-search-input {
  flex      : 1;
  border    : none;
  background: transparent;
  outline   : none;
  font-size : 13px;
  color     : var(--ab-text);
  font-family: var(--mcp-font);
}

.akg-search-input::placeholder { color: var(--ab-text-dim); }

.akg-filter-chips {
  display    : flex;
  gap        : 6px;
  flex-wrap  : wrap;
  align-items: center;
}

.akg-filter-chip {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 6px 12px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : var(--ab-surface-solid);
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
}

.akg-filter-chip:hover {
  border-color: var(--akg-chip-color, var(--ab-primary));
  color       : var(--akg-chip-color, var(--ab-primary));
  background  : var(--ab-primary-light);
}

.akg-filter-chip.active {
  border-color: var(--akg-chip-color, var(--ab-primary));
  background  : var(--akg-chip-color, var(--ab-primary));
  color       : #fff;
}

.akg-filter-chip-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--akg-chip-color, var(--ab-primary));
  flex-shrink  : 0;
}

.akg-filter-chip.active .akg-filter-chip-dot { background: rgba(255,255,255,.8); }

/* ── §29.5 — Main Area (Graph + Detail Panel) ────────────── */
.akg-main {
  display              : grid;
  grid-template-columns: 1fr 280px;
  gap                  : 14px;
  min-height           : 480px;
  flex-shrink          : 0;
}

/* ── §29.6 — Graph Pane ───────────────────────────────────── */
.akg-graph-pane {
  display        : flex;
  flex-direction : column;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  overflow       : hidden;
  box-shadow     : var(--ab-shadow-card);
}

.akg-graph-toolbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 10px 14px;
  border-bottom   : 1px solid var(--ab-border);
  background      : var(--ab-gradient-header);
  flex-shrink     : 0;
  gap             : 8px;
  flex-wrap       : wrap;
}

.akg-graph-toolbar-left,
.akg-graph-toolbar-right {
  display    : flex;
  align-items: center;
  gap        : 5px;
  flex-wrap  : wrap;
}

.akg-toolbar-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 5px 11px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
}

.akg-toolbar-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.akg-toolbar-btn.danger:hover {
  border-color: var(--ab-error);
  color       : var(--ab-error);
  background  : var(--ab-error-light);
}

.akg-toolbar-sep {
  width     : 1px;
  height    : 20px;
  background: var(--ab-border-strong);
  flex-shrink: 0;
}

/* D3 Canvas container */
.akg-canvas-wrap {
  flex      : 1;
  position  : relative;
  min-height: 400px;
  background: radial-gradient(ellipse at center,rgba(99,102,241,.03) 0%,transparent 70%);
  overflow  : hidden;
}

.akg-canvas-wrap svg { display: block; width: 100%; height: 100%; }

/* Empty state inside canvas */
.akg-canvas-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  padding        : 60px 20px;
  text-align     : center;
  height         : 100%;
}

.akg-canvas-empty-icon  { font-size: 48px; opacity: .25; }
.akg-canvas-empty-title { font-size: 16px; font-weight: 800; color: var(--ab-text-muted); }

.akg-canvas-empty-sub {
  font-size  : 12px;
  color      : var(--ab-text-dim);
  max-width  : 280px;
  line-height: 1.6;
}

.akg-canvas-empty-actions {
  display         : flex;
  gap             : 8px;
  margin-top      : 8px;
  flex-wrap       : wrap;
  justify-content : center;
}

/* ── §29.7 — Detail Panel ─────────────────────────────────── */
.akg-detail-panel {
  display        : flex;
  flex-direction : column;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  overflow       : hidden;
  box-shadow     : var(--ab-shadow-card);
}

.akg-detail-header {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 12px 16px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-gradient-header);
  font-size      : 12px;
  font-weight    : 800;
  color          : var(--ab-text);
  flex-shrink    : 0;
}

.akg-detail-header i { color: var(--ab-primary); }

.akg-detail-content { flex: 1; overflow-y: auto; padding: 14px; }

.akg-detail-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 40px 20px;
  text-align     : center;
  color          : var(--ab-text-dim);
}

.akg-detail-empty i { font-size: 24px; opacity: .2; display: block; }
.akg-detail-empty p { font-size: 12px; line-height: 1.6; }

/* Node Detail Content */
.akg-node-detail-icon {
  width          : 52px;
  height         : 52px;
  border-radius  : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 26px;
  margin         : 0 auto 8px;
}

.akg-node-detail-name {
  font-size  : 15px;
  font-weight: 900;
  color      : var(--ab-text);
  margin-bottom: 4px;
  word-break : break-word;
}

.akg-node-detail-type {
  display      : inline-block;
  font-size    : 10px;
  font-weight  : 800;
  padding      : 2px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* Source badge */
.akg-source-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 9px;
  font-weight  : 800;
  padding      : 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
}

.akg-source-badge.manual { background: var(--ab-primary-light);  color: var(--ab-primary); }
.akg-source-badge.agent  { background: rgba(16,185,129,.12);      color: #10b981; }
.akg-source-badge.file   { background: rgba(245,158,11,.12);      color: #f59e0b; }
.akg-source-badge.memory { background: rgba(6,182,212,.12);       color: #06b6d4; }

/* Properties table */
.akg-node-detail-props {
  background   : var(--ab-bg-alt);
  border-radius: var(--ab-radius-lg);
  padding      : 10px 12px;
  margin-bottom: 10px;
  display      : flex;
  flex-direction: column;
  gap          : 6px;
}

.akg-detail-prop {
  display       : flex;
  justify-content: space-between;
  gap           : 8px;
  font-size     : 11px;
  align-items   : flex-start;
}

.akg-detail-prop-key {
  font-weight   : 700;
  color         : var(--ab-text-muted);
  text-transform: capitalize;
  flex-shrink   : 0;
  min-width     : 60px;
}

.akg-detail-prop-val {
  color      : var(--ab-text);
  font-weight: 600;
  text-align : right;
  word-break : break-word;
}

/* Relations */
.akg-detail-relations      { margin-top: 10px; }

.akg-detail-relations-title {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  font-size      : 10px;
  font-weight    : 800;
  color          : var(--ab-text-muted);
  text-transform : uppercase;
  letter-spacing : .5px;
  margin-bottom  : 8px;
  padding-bottom : 6px;
  border-bottom  : 1px solid var(--ab-border);
}

.akg-relation-item {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 8px;
  border-radius: var(--ab-radius);
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-size    : 11px;
  margin-bottom: 3px;
}

.akg-relation-item:hover { background: var(--ab-primary-light); }

.akg-relation-dir {
  font-weight: 900;
  color      : var(--ab-primary);
  flex-shrink: 0;
  width      : 16px;
  text-align : center;
}

.akg-relation-label { color: var(--ab-text-muted); font-weight: 600; flex-shrink: 0; }

.akg-relation-target {
  color         : var(--ab-text);
  font-weight   : 700;
  flex          : 1;
  min-width     : 0;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

/* Detail Actions */
.akg-detail-actions {
  display       : flex;
  gap           : 5px;
  margin-top    : 12px;
  padding-top   : 12px;
  border-top    : 1px solid var(--ab-border);
  flex-wrap     : wrap;
}

.akg-detail-action-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  padding        : 6px 10px;
  border         : 1.5px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius);
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
  flex           : 1;
  justify-content: center;
}

.akg-detail-action-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.akg-detail-action-btn.danger:hover {
  border-color: var(--ab-error);
  color       : var(--ab-error);
  background  : var(--ab-error-light);
}

/* ── §29.8 — D3 SVG Styles (injectés dans le DOM SVG) ────── */
.kg-link {
  stroke        : #94a3b8;
  stroke-width  : 1.5;
  stroke-opacity: .5;
  fill          : none;
  transition    : stroke .2s, stroke-width .2s;
}

.kg-link.highlighted {
  stroke        : var(--ab-primary);
  stroke-width  : 2.5;
  stroke-opacity: .9;
}

.kg-link-label {
  font-size         : 9px;
  font-weight       : 600;
  fill              : #94a3b8;
  text-anchor       : middle;
  dominant-baseline : middle;
  pointer-events    : none;
  user-select       : none;
}

.kg-node-group { cursor: pointer; }

.kg-node-group:hover .kg-node-circle {
  filter: brightness(1.15) drop-shadow(0 4px 12px rgba(99,102,241,.4));
}

.kg-node-circle {
  stroke      : #fff;
  stroke-width: 2.5;
  transition  : stroke-width .15s, filter .15s;
}

.kg-node-emoji {
  font-size        : 14px;
  text-anchor      : middle;
  dominant-baseline: middle;
  pointer-events   : none;
  user-select      : none;
}

.kg-node-label {
  font-size        : 10px;
  font-weight      : 700;
  fill             : #1e293b;
  text-anchor      : middle;
  dominant-baseline: middle;
  pointer-events   : none;
  user-select      : none;
}

body.dark-mode .kg-node-label  { fill: #e2e8f0; }
body.dark-mode .kg-link        { stroke: rgba(255,255,255,.15); }
body.dark-mode .kg-link-label  { fill: rgba(255,255,255,.3); }

/* D3 Tooltip */
.akg-tooltip {
  position     : absolute;
  background   : var(--ab-surface-solid);
  border       : 1px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  padding      : 10px 14px;
  font-size    : 12px;
  pointer-events: none;
  z-index      : 100;
  min-width    : 160px;
  max-width    : 220px;
  box-shadow   : var(--ab-shadow-lg);
  transition   : opacity .15s;
}

.akg-tooltip-name { font-size: 13px; font-weight: 800; color: var(--ab-text); margin-bottom: 3px; }
.akg-tooltip-type { font-size: 10px; font-weight: 700; text-transform: capitalize; margin-bottom: 6px; }
.akg-tooltip-prop { font-size: 11px; color: var(--ab-text-muted); margin-top: 2px; }

/* ── §29.9 — Graph Query Section ─────────────────────────── */
.akg-query-section {
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  overflow       : hidden;
  box-shadow     : var(--ab-shadow-card);
  flex-shrink    : 0;
}

.akg-query-header {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 14px 18px;
  border-bottom: 1px solid var(--ab-border);
  background   : var(--ab-gradient-soft);
  flex-shrink  : 0;
}

.akg-query-icon {
  width          : 38px;
  height         : 38px;
  border-radius  : 11px;
  background     : var(--ab-primary-light);
  color          : var(--ab-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.akg-query-title { font-size: 13px; font-weight: 800; color: var(--ab-text); margin-bottom: 2px; }
.akg-query-sub   { font-size: 11px; color: var(--ab-text-muted); }

.akg-query-body {
  padding       : 16px 18px;
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.akg-query-examples { display: flex; gap: 6px; flex-wrap: wrap; }

.akg-query-example {
  padding      : 5px 12px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 600;
  color        : var(--ab-text-muted);
  background   : var(--ab-bg-alt);
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  white-space  : nowrap;
}

.akg-query-example:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.akg-query-row {
  display    : flex;
  gap        : 8px;
  align-items: center;
}

.akg-query-input-wrap {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  flex           : 1;
  background     : var(--ab-input-bg);
  border         : 1.5px solid var(--ab-input-border);
  border-radius  : var(--ab-radius-lg);
  padding        : 10px 14px;
  transition     : border-color .15s;
}

.akg-query-input-wrap:focus-within { border-color: var(--ab-primary); }

.akg-query-nl-input {
  flex      : 1;
  border    : none;
  background: transparent;
  outline   : none;
  font-size : 13px;
  color     : var(--ab-text);
  font-family: var(--mcp-font);
}

.akg-query-nl-input::placeholder { color: var(--ab-text-dim); }

.akg-query-submit-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 10px 18px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  white-space  : nowrap;
  box-shadow   : 0 2px 10px rgba(99,102,241,.3);
  flex-shrink  : 0;
}

.akg-query-submit-btn:hover:not(:disabled) {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

.akg-query-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.akg-query-result {
  display      : none;
  padding      : 14px 16px;
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  font-size    : 13px;
  line-height  : 1.7;
  color        : var(--ab-text);
}

.akg-query-result.visible { display: block; }

.akg-query-result-header {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  margin-bottom  : 10px;
  font-size      : 12px;
  font-weight    : 800;
  color          : var(--ab-text);
  padding-bottom : 8px;
  border-bottom  : 1px solid var(--ab-border);
}

/* ── §29.10 — Entity Grid Section ────────────────────────── */
.akg-entity-section {
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  overflow       : hidden;
  box-shadow     : var(--ab-shadow-card);
  flex-shrink    : 0;
}

.akg-entity-section-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 14px 18px;
  border-bottom   : 1px solid var(--ab-border);
  background      : var(--ab-gradient-header);
  flex-wrap       : wrap;
  gap             : 10px;
}

.akg-entity-section-title {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
}

.akg-entity-section-title i { color: var(--ab-primary); }
.akg-entity-section-actions { display: flex; gap: 6px; }

.akg-entity-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
  gap                   : 10px;
  padding               : 14px 16px;
}

.akg-entity-card {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 10px 12px;
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-bg-alt);
  cursor       : pointer;
  transition   : var(--ab-transition);
}

.akg-entity-card:hover {
  border-color: var(--akg-card-color, var(--ab-primary));
  background  : var(--ab-primary-light);
  transform   : translateY(-1px);
  box-shadow  : var(--ab-shadow-card);
}

.akg-entity-card-icon {
  width          : 34px;
  height         : 34px;
  border-radius  : 9px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  flex-shrink    : 0;
}

.akg-entity-card-body   { flex: 1; min-width: 0; }

.akg-entity-card-name {
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--ab-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.akg-entity-card-type {
  font-size    : 10px;
  font-weight  : 600;
  margin-top   : 2px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.akg-entity-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 40px 20px;
  text-align     : center;
  color          : var(--ab-text-dim);
  grid-column    : 1 / -1;
}

.akg-entity-empty i { font-size: 28px; opacity: .2; }
.akg-entity-empty p { font-size: 12px; color: var(--ab-text-muted); line-height: 1.6; }

/* ── §29.11 — Shared Buttons ──────────────────────────────── */
.akg-btn-primary {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 8px 16px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.3);
}

.akg-btn-primary:hover {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

.akg-btn-ghost {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 8px 14px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.akg-btn-ghost:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* ── §29.12 — Modal ───────────────────────────────────────── */
.akg-modal-overlay {
  display         : none;
  position        : fixed;
  inset           : 0;
  background      : rgba(0,0,0,.45);
  z-index         : 2000;
  align-items     : center;
  justify-content : center;
  backdrop-filter : blur(4px);
  padding         : 20px;
}

.akg-modal-overlay.akg-modal-open {
  display  : flex;
  animation: abFadeIn .2s ease;
}

.akg-modal {
  background   : var(--ab-surface-solid);
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-2xl);
  box-shadow   : var(--ab-shadow-xl);
  width        : 100%;
  max-width    : 540px;
  max-height   : 90vh;
  overflow-y   : auto;
  display      : flex;
  flex-direction: column;
  animation    : abFadeIn .2s ease;
}

.akg-modal-header {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 16px 20px;
  border-bottom: 1px solid var(--ab-border);
  flex-shrink: 0;
  position   : sticky;
  top        : 0;
  background : var(--ab-surface-solid);
  z-index    : 1;
}

.akg-modal-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  background     : var(--ab-primary-light);
  color          : var(--ab-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.akg-modal-title { font-size: 15px; font-weight: 800; color: var(--ab-text); flex: 1; }

.akg-modal-close {
  width          : 28px;
  height         : 28px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 8px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  transition     : var(--ab-transition);
}

.akg-modal-close:hover { background: var(--ab-error-light); color: var(--ab-error); }

.akg-modal-body {
  padding       : 20px;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
  flex          : 1;
}

.akg-modal-footer {
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
  gap             : 8px;
  padding         : 14px 20px;
  border-top      : 1px solid var(--ab-border);
  flex-shrink     : 0;
  background      : var(--ab-bg-alt);
}

/* ── §29.13 — Form Elements ───────────────────────────────── */
.akg-form-row   { display: flex; flex-direction: column; gap: 5px; }

.akg-form-label {
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.akg-form-label.required::after { content: ' *'; color: var(--ab-error); }

.akg-form-input {
  padding      : 9px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 13px;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s;
  width        : 100%;
}

.akg-form-input:focus {
  border-color: var(--ab-primary);
  box-shadow  : 0 0 0 3px var(--ab-input-focus);
}

.akg-form-input::placeholder { color: var(--ab-text-dim); }

.akg-form-select {
  appearance            : none;
  background-image      : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat     : no-repeat;
  background-position   : right 12px center;
  padding-right         : 32px;
}

.akg-form-two-col {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 10px;
}

/* Node Type Selector */
.akg-type-selector {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(80px, 1fr));
  gap                   : 8px;
}

.akg-type-opt {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 4px;
  padding        : 10px 8px;
  border         : 1.5px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius-lg);
  cursor         : pointer;
  transition     : var(--ab-transition);
  background     : var(--ab-bg-alt);
}

.akg-type-opt:hover {
  border-color: var(--akg-type-color, var(--ab-primary));
  background  : var(--ab-primary-light);
}

.akg-type-opt.selected {
  border-color: var(--akg-type-color, var(--ab-primary));
  background  : var(--akg-type-color, var(--ab-primary));
  color       : #fff;
}

.akg-type-opt-icon  { font-size: 20px; line-height: 1; }

.akg-type-opt-label {
  font-size  : 10px;
  font-weight: 700;
  text-align : center;
  white-space: nowrap;
}

.akg-type-opt.selected .akg-type-opt-label { color: #fff; }

/* ── §29.14 — Dark Mode ───────────────────────────────────── */
body.dark-mode .akg-stat,
body.dark-mode .akg-graph-pane,
body.dark-mode .akg-detail-panel,
body.dark-mode .akg-query-section,
body.dark-mode .akg-entity-section {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .akg-toolbar-btn,
body.dark-mode .akg-filter-chip:not(.active),
body.dark-mode .akg-query-example,
body.dark-mode .akg-entity-card { background: rgba(255,255,255,.05); }

body.dark-mode .akg-modal        { background: #1e293b; }
body.dark-mode .akg-modal-header { background: #1e293b; }
body.dark-mode .akg-modal-footer { background: rgba(255,255,255,.03); }
body.dark-mode .akg-node-detail-props { background: rgba(255,255,255,.04); }
body.dark-mode .akg-query-result { background: rgba(255,255,255,.03); }
body.dark-mode .akg-tooltip      { background: #1e293b; border-color: rgba(255,255,255,.12); }
body.dark-mode .akg-type-opt     { background: rgba(255,255,255,.05); }

/* ── §29.15 — Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
  .akg-main        { grid-template-columns: 1fr 240px; }
  .akg-entity-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 768px) {
  .akg-layout                   { padding: 12px 14px 24px; gap: 12px; }
  .akg-main                     { grid-template-columns: 1fr; }
  .akg-canvas-wrap              { min-height: 320px; }
  .akg-detail-panel             { display: none; }
  .akg-entity-grid              { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .akg-type-selector            { grid-template-columns: repeat(3, 1fr); }
  .akg-form-two-col             { grid-template-columns: 1fr; }
  .akg-stats-bar                { gap: 6px; }
  .akg-query-examples           { overflow-x: auto; flex-wrap: nowrap; }
  .akg-query-example            { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .akg-stats-bar .akg-stat      { padding: 8px 10px; }
  .akg-stats-bar .akg-stat-val  { font-size: 16px; }
  .akg-entity-grid              { grid-template-columns: 1fr 1fr; }
  .akg-modal                    { max-width: 100%; border-radius: var(--ab-radius-xl); }
  .akg-graph-toolbar            { flex-direction: column; align-items: stretch; }
  .akg-graph-toolbar-left,
  .akg-graph-toolbar-right      { justify-content: center; }
}

/* ─────────────────────────────────────────────
   END — §29 KNOWLEDGE GRAPH
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   §30 — AGENT MEMORY VIEW (agent-memory.js)
   Prefix  : mem- (MEMory engine)
   Sub-feat: abu- (Agent Builder UI — toggle switches)
   Covers  : Dashboard · Tier Cards · Entities · Episodes ·
             Settings · Slide-in Panel · Context Bar · Header Badge
═══════════════════════════════════════════════════════════════ */

/* ── §30.0 — View Root ────────────────────────────────────── */
#view-memory {
  overflow-y: auto   !important;
  overflow-x: hidden !important;
}

#mem-view-container {
  flex      : 1;
  min-height: 0;
}

/* ── §30.1 — Dashboard Wrapper ────────────────────────────── */
.mem-view-content {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
  padding       : 16px 20px 32px;
}

/* ── §30.2 — Loading ──────────────────────────────────────── */
.mem-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  padding        : 40px 20px;
  color          : var(--ab-text-muted);
  font-size      : 13px;
}

.mem-spinner {
  width            : 24px;
  height           : 24px;
  border           : 2.5px solid var(--ab-border-strong);
  border-top-color : var(--ab-primary);
  border-radius    : 50%;
  animation        : abSpin .7s linear infinite;
  flex-shrink      : 0;
}

/* ── §30.3 — Tier Cards Grid ──────────────────────────────── */
.mem-tier-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 12px;
  flex-shrink           : 0;
}

.mem-tier-card {
  display        : flex;
  flex-direction : column;
  gap            : 4px;
  padding        : 16px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  cursor         : pointer;
  transition     : var(--ab-transition);
  box-shadow     : var(--ab-shadow-card);
  position       : relative;
  overflow       : hidden;
}

/* Coloured top stripe per tier */
.mem-tier-card::before {
  content      : '';
  position     : absolute;
  top: 0; left: 0; right: 0;
  height       : 3px;
  border-radius: 3px 3px 0 0;
}

.mem-tier-0::before { background: #6366f1; }
.mem-tier-1::before { background: #06b6d4; }
.mem-tier-2::before { background: #10b981; }

.mem-tier-card:hover {
  border-color: rgba(99,102,241,.30);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-2px);
}

.mem-tier-card-top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 4px;
}

.mem-tier-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.mem-tier-0 .mem-tier-icon { background: rgba(99,102,241,.12); color: #6366f1; }
.mem-tier-1 .mem-tier-icon { background: rgba(6,182,212,.12);  color: #06b6d4; }
.mem-tier-2 .mem-tier-icon { background: rgba(16,185,129,.12); color: #10b981; }

.mem-tier-count {
  font-size                : 28px;
  font-weight              : 900;
  background               : var(--ab-gradient);
  -webkit-background-clip  : text;
  -webkit-text-fill-color  : transparent;
  background-clip          : text;
  line-height              : 1;
}

.mem-tier-label {
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
}

.mem-tier-sub {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.4;
}

.mem-tier-ttl {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  font-weight: 700;
  margin-top : 4px;
}

.mem-tier-ttl i { font-size: 9px; }

.mem-tier-action {
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-primary);
  margin-top : 6px;
  display    : flex;
  align-items: center;
  gap        : 4px;
  opacity    : 0;
  transition : opacity .2s;
}

.mem-tier-card:hover .mem-tier-action { opacity: 1; }

/* ── §30.4 — Search Bar ───────────────────────────────────── */
.mem-search-wrap {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 10px 14px;
  background : var(--ab-input-bg);
  border     : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  transition : border-color .15s;
  flex-shrink: 0;
}

.mem-search-wrap:focus-within { border-color: var(--ab-primary); }
.mem-search-wrap i { color: var(--ab-text-muted); font-size: 13px; flex-shrink: 0; }

.mem-search-input {
  flex      : 1;
  border    : none;
  background: transparent;
  outline   : none;
  font-size : 13px;
  color     : var(--ab-text);
  font-family: var(--mcp-font);
}

.mem-search-input::placeholder { color: var(--ab-text-dim); }

.mem-search-clear {
  border    : none;
  background: none;
  color     : var(--ab-text-muted);
  cursor    : pointer;
  font-size : 12px;
  padding   : 2px 4px;
  border-radius: 5px;
  transition: var(--ab-transition);
}

.mem-search-clear:hover { background: var(--ab-error-light); color: var(--ab-error); }

/* ── §30.5 — Section Headers ──────────────────────────────── */
.mem-section-header {
  display    : flex;
  align-items: center;
  gap        : 8px;
  margin-bottom: 10px;
}

.mem-section-label {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  font-size      : 11px;
  font-weight    : 800;
  color          : var(--ab-text-muted);
  text-transform : uppercase;
  letter-spacing : .5px;
  flex           : 1;
}

.mem-section-count {
  font-size    : 10px;
  font-weight  : 800;
  padding      : 1px 7px;
  border-radius: 20px;
  background   : var(--ab-primary-light);
  color        : var(--ab-primary);
}

.mem-section-action {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  background : none;
  border     : none;
  cursor     : pointer;
  display    : flex;
  align-items: center;
  gap        : 4px;
  padding    : 4px 8px;
  border-radius: var(--ab-radius);
  transition : var(--ab-transition);
  font-family: var(--mcp-font);
}

.mem-section-action:hover { background: var(--ab-bg-alt); color: var(--ab-text); }

/* ── §30.6 — Working Memory Chips ────────────────────────── */
.mem-working-entities {
  display  : flex;
  flex-wrap: wrap;
  gap      : 6px;
}

.mem-working-entity {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 4px 10px;
  background   : var(--ab-primary-light);
  border       : 1px solid rgba(99,102,241,.20);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-primary);
}

.mem-working-entity-remove {
  background : none;
  border     : none;
  color      : var(--ab-primary);
  cursor     : pointer;
  font-size  : 13px;
  line-height: 1;
  padding    : 0 0 0 2px;
  opacity    : .6;
  transition : opacity .15s;
  font-family: var(--mcp-font);
}

.mem-working-entity-remove:hover { opacity: 1; }

.mem-working-empty {
  font-size  : 11px;
  color      : var(--ab-text-dim);
  font-style : italic;
}

/* ── §30.7 — Semantic Entities Grid ──────────────────────── */
.mem-entities-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
  gap                   : 10px;
}

.mem-entity-card {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  padding        : 12px 14px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-lg);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
}

.mem-entity-card:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow  : var(--ab-shadow-card-hover);
}

.mem-entity-card-top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

/* Type badges */
.mem-entity-type-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 10px;
  font-weight  : 800;
  padding      : 2px 8px;
  border-radius: 20px;
  text-transform: capitalize;
}

.mem-type-company { background: rgba(99,102,241,.12);  color: #6366f1; }
.mem-type-person  { background: rgba(8,145,178,.12);   color: #0891b2; }
.mem-type-deal    { background: rgba(217,119,6,.12);   color: #d97706; }
.mem-type-fund    { background: rgba(5,150,105,.12);   color: #059669; }
.mem-type-ticker  { background: rgba(124,58,237,.12);  color: #7c3aed; }
.mem-type-other   { background: rgba(71,85,105,.12);   color: #475569; }

.mem-entity-mentions {
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-text-dim);
}

.mem-entity-name {
  font-size    : 13px;
  font-weight  : 800;
  color        : var(--ab-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.mem-entity-facts {
  display       : flex;
  flex-direction: column;
  gap           : 3px;
}

.mem-entity-fact {
  display    : flex;
  gap        : 5px;
  font-size  : 11px;
  align-items: baseline;
}

.mem-entity-fact-key {
  font-weight: 700;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
  min-width  : 50px;
}

.mem-entity-source {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  color      : var(--ab-text-dim);
  margin-top : 2px;
}

.mem-entity-source i { font-size: 9px; }

.mem-entity-actions {
  display       : flex;
  gap           : 5px;
  margin-top    : 4px;
  padding-top   : 8px;
  border-top    : 1px solid var(--ab-border);
}

.mem-entity-action-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 4px;
  padding        : 5px 9px;
  border         : 1px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius);
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  font-size      : 10px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
  flex           : 1;
  justify-content: center;
}

.mem-entity-action-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.mem-entity-action-btn.danger:hover {
  border-color: var(--ab-error);
  color       : var(--ab-error);
  background  : var(--ab-error-light);
}

.mem-entity-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 48px 20px;
  text-align     : center;
  grid-column    : 1 / -1;
}

.mem-entity-empty i { font-size: 28px; opacity: .15; color: var(--ab-text-muted); }
.mem-entity-empty p { font-size: 12px; color: var(--ab-text-muted); line-height: 1.7; }

/* ── §30.8 — Episodic Memory List ────────────────────────── */
.mem-episodes-list {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.mem-episode-item {
  padding        : 14px 16px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
}

.mem-episode-item:hover {
  border-color: rgba(99,102,241,.20);
  box-shadow  : var(--ab-shadow-card-hover);
}

.mem-episode-header {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  margin-bottom: 8px;
}

.mem-episode-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  background     : var(--ab-primary-light);
  color          : var(--ab-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  flex-shrink    : 0;
}

.mem-episode-title {
  font-size    : 13px;
  font-weight  : 800;
  color        : var(--ab-text);
  flex         : 1;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.mem-episode-time {
  font-size  : 10px;
  color      : var(--ab-text-dim);
  flex-shrink: 0;
}

.mem-episode-summary {
  font-size         : 12px;
  color             : var(--ab-text-muted);
  line-height       : 1.6;
  margin-bottom     : 8px;
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
}

.mem-episode-tags {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 5px;
  margin-bottom: 8px;
}

.mem-episode-tag {
  font-size    : 10px;
  font-weight  : 700;
  padding      : 2px 8px;
  border-radius: 20px;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  border       : 1px solid var(--ab-border);
}

.mem-episode-lesson {
  display      : flex;
  align-items  : flex-start;
  gap          : 6px;
  font-size    : 11px;
  color        : var(--ab-text-muted);
  background   : rgba(245,158,11,.06);
  border-left  : 3px solid #f59e0b;
  padding      : 6px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
  line-height  : 1.5;
}

.mem-episode-lesson i { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }

.mem-episode-meta {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex-wrap  : wrap;
}

.mem-episode-meta span {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-dim);
}

.mem-episode-delete {
  margin-left  : auto;
  background   : none;
  border       : none;
  color        : var(--ab-text-dim);
  cursor       : pointer;
  font-size    : 11px;
  padding      : 3px 6px;
  border-radius: var(--ab-radius);
  transition   : var(--ab-transition);
}

.mem-episode-delete:hover { background: var(--ab-error-light); color: var(--ab-error); }

.mem-episode-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 48px 20px;
  text-align     : center;
}

.mem-episode-empty i { font-size: 28px; opacity: .15; color: var(--ab-text-muted); display: block; }
.mem-episode-empty p { font-size: 12px; color: var(--ab-text-muted); line-height: 1.7; }

/* ── §30.9 — Settings Card ────────────────────────────────── */
.mem-settings-card {
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  padding        : 20px;
  box-shadow     : var(--ab-shadow-card);
  display        : flex;
  flex-direction : column;
}

.mem-settings-title {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  font-size      : 14px;
  font-weight    : 800;
  color          : var(--ab-text);
  margin-bottom  : 16px;
  padding-bottom : 12px;
  border-bottom  : 1px solid var(--ab-border);
}

.mem-settings-title i { color: var(--ab-primary); }

.mem-setting-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 16px;
  padding        : 14px 0;
  border-bottom  : 1px solid var(--ab-border);
}

.mem-setting-row:last-of-type { border-bottom: none; }

.mem-setting-info {
  display       : flex;
  flex-direction: column;
  gap           : 3px;
  flex          : 1;
}

.mem-setting-label { font-size: 13px; font-weight: 700; color: var(--ab-text); }

.mem-setting-hint {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.5;
}

/* ── §30.10 — Toggle Switch (abu-toggle-switch) ───────────── */
.abu-toggle-switch {
  position   : relative;
  display    : inline-flex;
  align-items: center;
  cursor     : pointer;
  flex-shrink: 0;
}

.abu-toggle-switch input {
  position     : absolute;
  width        : 1px;
  height       : 1px;
  opacity      : 0;
  pointer-events: none;
}

.abu-toggle-track {
  display      : block;
  width        : 40px;
  height       : 22px;
  background   : var(--ab-border-strong);
  border-radius: 11px;
  transition   : background .2s;
  position     : relative;
}

.abu-toggle-track::after {
  content      : '';
  position     : absolute;
  top          : 3px;
  left         : 3px;
  width        : 16px;
  height       : 16px;
  background   : #fff;
  border-radius: 50%;
  transition   : transform .2s, box-shadow .2s;
  box-shadow   : 0 1px 4px rgba(0,0,0,.20);
}

.abu-toggle-switch input:checked + .abu-toggle-track {
  background: var(--ab-primary);
}

.abu-toggle-switch input:checked + .abu-toggle-track::after {
  transform : translateX(18px);
  box-shadow: 0 2px 8px rgba(99,102,241,.40);
}

/* ── §30.11 — Danger Zone ────────────────────────────────── */
.mem-danger-zone {
  margin-top : 20px;
  padding-top: 16px;
  border-top : 1.5px dashed rgba(239,68,68,.30);
}

.mem-danger-title {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  font-size      : 11px;
  font-weight    : 800;
  color          : var(--ab-error);
  text-transform : uppercase;
  letter-spacing : .5px;
  margin-bottom  : 10px;
}

.mem-danger-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mem-danger-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 7px 12px;
  border       : 1.5px solid rgba(239,68,68,.25);
  border-radius: var(--ab-radius);
  background   : var(--ab-error-light);
  color        : var(--ab-error);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.mem-danger-btn:hover { background: rgba(239,68,68,.20); border-color: var(--ab-error); }

/* ── §30.12 — Slide-in Memory Panel ──────────────────────── */
.mem-panel-overlay {
  position  : fixed;
  inset     : 0;
  background: rgba(0,0,0,.40);
  z-index   : 1500;
  backdrop-filter: blur(4px);
  opacity   : 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.mem-panel-overlay.mem-open {
  opacity   : 1;
  visibility: visible;
}

.mem-panel {
  position   : absolute;
  top: 0; right: 0; bottom: 0;
  width      : 380px;
  max-width  : 100%;
  background : var(--ab-surface-solid);
  border-left: 1.5px solid var(--ab-border-strong);
  box-shadow : var(--ab-shadow-xl);
  display    : flex;
  flex-direction: column;
  transform  : translateX(100%);
  transition : transform .3s cubic-bezier(.4,0,.2,1);
}

.mem-panel-overlay.mem-open .mem-panel { transform: translateX(0); }

.mem-panel-header {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 16px 18px;
  border-bottom: 1px solid var(--ab-border);
  background   : var(--ab-gradient-soft);
  flex-shrink  : 0;
}

.mem-panel-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  background     : var(--ab-primary-light);
  color          : var(--ab-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.mem-panel-title { font-size: 14px; font-weight: 800; color: var(--ab-text); display: block; }
.mem-panel-sub   { font-size: 10px; color: var(--ab-text-muted); display: block; }

.mem-panel-close {
  margin-left    : auto;
  width          : 28px;
  height         : 28px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 8px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  transition     : var(--ab-transition);
}

.mem-panel-close:hover { background: var(--ab-error-light); color: var(--ab-error); }

.mem-panel-body {
  flex          : 1;
  overflow-y    : auto;
  padding       : 16px;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

.mem-panel-footer {
  display      : flex;
  gap          : 8px;
  padding      : 12px 16px;
  border-top   : 1px solid var(--ab-border);
  background   : var(--ab-bg-alt);
  flex-shrink  : 0;
}

.mem-panel-footer-btn {
  flex           : 1;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 8px 12px;
  border-radius  : var(--ab-radius-lg);
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
}

.mem-panel-footer-btn.primary {
  background: var(--ab-gradient);
  color     : #fff;
  border    : none;
  box-shadow: 0 2px 8px rgba(99,102,241,.30);
}

.mem-panel-footer-btn.primary:hover { opacity: .9; transform: translateY(-1px); }

.mem-panel-footer-btn.ghost {
  background: var(--ab-surface-solid);
  border    : 1.5px solid var(--ab-border-strong);
  color     : var(--ab-text-muted);
}

.mem-panel-footer-btn.ghost:hover {
  border-color: var(--ab-error);
  color       : var(--ab-error);
  background  : var(--ab-error-light);
}

/* Panel inner sections */
.mem-working-section,
.mem-recall-section {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.mem-working-label,
.mem-recall-label {
  font-size     : 10px;
  font-weight   : 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color         : var(--ab-text-muted);
  display       : flex;
  align-items   : center;
  gap           : 5px;
}

.mem-recall-chips {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

.mem-recall-chip {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 8px 12px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : var(--ab-transition);
  text-align   : left;
  font-family  : var(--mcp-font);
}

.mem-recall-chip i { color: var(--ab-primary); font-size: 10px; flex-shrink: 0; }

.mem-recall-chip:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* Panel episodes mini-list */
.mem-panel-episodes {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

.mem-panel-episode {
  padding      : 8px 12px;
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  cursor       : pointer;
  transition   : var(--ab-transition);
}

.mem-panel-episode:hover {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
}

.mem-panel-episode-title {
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--ab-text);
  margin-bottom: 2px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.mem-panel-episode-meta { font-size: 10px; color: var(--ab-text-muted); }

/* ── §30.13 — Header Memory Badge ────────────────────────── */
.mem-header-btn { position: relative; }

.mem-header-badge {
  position     : absolute;
  top: -3px; right: -3px;
  min-width    : 16px;
  height       : 16px;
  padding      : 0 4px;
  background   : var(--ab-primary);
  color        : #fff;
  font-size    : 9px;
  font-weight  : 900;
  border-radius: 99px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  border       : 2px solid var(--ab-header-bg);
  animation    : abBadgePulse 2.5s infinite;
  pointer-events: none;
}

/* ── §30.14 — Context Bar (below chat input) ──────────────── */
.mem-context-bar {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 8px 12px;
  background   : rgba(99,102,241,.06);
  border       : 1px solid rgba(99,102,241,.12);
  border-radius: var(--ab-radius-lg);
  margin-bottom: 10px;
  flex-shrink  : 0;
  flex-wrap    : wrap;
}

.mem-context-bar-label {
  display        : flex;
  align-items    : center;
  gap            : 5px;
  font-size      : 10px;
  font-weight    : 800;
  color          : var(--ab-primary);
  text-transform : uppercase;
  letter-spacing : .4px;
  flex-shrink    : 0;
  white-space    : nowrap;
}

.mem-context-chips {
  display  : flex;
  flex-wrap: wrap;
  gap      : 4px;
  flex     : 1;
}

.mem-context-chip {
  display      : inline-flex;
  align-items  : center;
  padding      : 2px 8px;
  background   : var(--ab-primary-light);
  border       : 1px solid rgba(99,102,241,.20);
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 700;
  color        : var(--ab-primary);
  white-space  : nowrap;
}

.mem-context-bar-clear {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  padding      : 4px 9px;
  border       : 1px solid rgba(99,102,241,.20);
  border-radius: 20px;
  background   : none;
  color        : var(--ab-primary);
  font-size    : 10px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  flex-shrink  : 0;
}

.mem-context-bar-clear:hover {
  background  : var(--ab-error-light);
  color       : var(--ab-error);
  border-color: var(--ab-error);
}

/* ── §30.15 — "Remember" button in chat messages ─────────── */
.mem-remember-btn { position: relative; }

.mem-remember-btn.mem-saved {
  color       : var(--ab-success)       !important;
  border-color: var(--ab-success)       !important;
  background  : var(--ab-success-light) !important;
}

/* ── §30.16 — Dark Mode ───────────────────────────────────── */
body.dark-mode .mem-tier-card,
body.dark-mode .mem-entity-card,
body.dark-mode .mem-episode-item,
body.dark-mode .mem-settings-card {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .mem-tier-card:hover,
body.dark-mode .mem-entity-card:hover,
body.dark-mode .mem-episode-item:hover {
  border-color: rgba(99,102,241,.30);
}

body.dark-mode .mem-panel {
  background : #0f172a;
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .mem-panel-header { background: rgba(255,255,255,.03); }
body.dark-mode .mem-panel-footer { background: rgba(255,255,255,.03); }

body.dark-mode .mem-panel-footer-btn.ghost {
  background: rgba(255,255,255,.06);
  color     : rgba(255,255,255,.6);
}

body.dark-mode .mem-recall-chip   { background: rgba(255,255,255,.05); }
body.dark-mode .mem-panel-episode { background: rgba(255,255,255,.04); }

body.dark-mode .mem-context-bar {
  background  : rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.15);
}

body.dark-mode .abu-toggle-track { background: rgba(255,255,255,.12); }

body.dark-mode .mem-entity-action-btn { background: rgba(255,255,255,.05); }
body.dark-mode .mem-episode-tag       { background: rgba(255,255,255,.06); }

body.dark-mode .mem-working-entity {
  background  : rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.25);
}

body.dark-mode .mem-danger-btn {
  background  : rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.20);
}

body.dark-mode .mem-entity-card:hover { background: rgba(99,102,241,.10); }
body.dark-mode .mem-recall-chip:hover { background: rgba(99,102,241,.15); }

/* ── §30.17 — Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
  .mem-entities-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .mem-tier-grid     { gap: 10px; }
}

@media (max-width: 768px) {
  .mem-view-content  { padding: 12px 14px 24px; gap: 12px; }

  /* Tier cards become horizontal rows */
  .mem-tier-grid     { grid-template-columns: 1fr; gap: 8px; }
  .mem-tier-card     { flex-direction: row; align-items: center; padding: 12px 14px; }
  .mem-tier-card-top { flex-direction: column; align-items: flex-start; min-width: 60px; }
  .mem-tier-count    { font-size: 22px; }
  .mem-tier-action   { display: none; }

  .mem-entities-grid { grid-template-columns: 1fr; }
  .mem-panel         { width: 100%; }
  .mem-danger-actions { flex-direction: column; }

  .mem-setting-row {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 10px;
  }
}

@media (max-width: 480px) {
  .mem-tier-grid         { grid-template-columns: 1fr; }
  .mem-context-chips     { overflow-x: auto; flex-wrap: nowrap; }
  .mem-context-chip      { flex-shrink: 0; }
  .mem-episode-meta span:nth-child(n+3) { display: none; }
  .mem-entities-grid     { grid-template-columns: 1fr; }
  .mem-recall-chip       { font-size: 10px; padding: 7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   §31 — AGENT SANDBOX VIEW (agent-sandbox.js)
   Prefix  : sb- (SandBox)
   Covers  : Sandbox Panel · Split Editor/Output · Language Tabs ·
             Template Pills · Output Renderer · Inline Chat Blocks ·
             Execution History · Agent Builder Capability Card
   Note    : abu-toggle-switch / abu-toggle-track → déjà en §30
═══════════════════════════════════════════════════════════════ */

/* ── §31.0 — View Root ────────────────────────────────────── */
/* overflow:hidden car l'éditeur + output scrollent en interne */
#view-sandbox {
  overflow  : hidden !important;
  display   : flex   !important;
  flex-direction: column !important;
}

#sb-view-content {
  flex      : 1;
  min-height: 0;
  overflow  : hidden;
  display   : flex;
  flex-direction: column;
}

/* ── §31.1 — Panel Wrapper ────────────────────────────────── */
.sb-panel {
  display        : flex;
  flex-direction : column;
  flex           : 1;
  min-height     : 0;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  overflow       : hidden;
}

/* ── §31.2 — Panel Header ─────────────────────────────────── */
.sb-panel-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 18px;
  border-bottom  : 1.5px solid var(--ab-border);
  background     : var(--ab-gradient-header);
  flex-shrink    : 0;
  gap            : 12px;
  flex-wrap      : wrap;
}

.sb-panel-header-left  { display: flex; align-items: center; gap: 12px; }
.sb-panel-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sb-panel-icon {
  width          : 38px;
  height         : 38px;
  border-radius  : 11px;
  background     : linear-gradient(135deg,#6366f1,#8b5cf6);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
  box-shadow     : 0 4px 12px rgba(99,102,241,.30);
}

.sb-panel-title { font-size: 14px; font-weight: 800; color: var(--ab-text); display: block; }

.sb-panel-sub {
  font-size : 10px;
  color     : var(--ab-text-muted);
  display   : block;
  margin-top: 1px;
}

/* ── §31.3 — Status Badge ─────────────────────────────────── */
.sb-status-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 4px 10px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : var(--ab-surface-solid);
  transition   : var(--ab-transition);
}

.sb-status-badge.running {
  border-color: rgba(99,102,241,.30);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sb-badge-dot-ready {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--ab-success);
  flex-shrink  : 0;
  box-shadow   : 0 0 6px rgba(16,185,129,.50);
}

.sb-badge-dot-running {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--ab-primary);
  flex-shrink  : 0;
  animation    : abBadgePulse 1s infinite;
}

/* ── §31.4 — Shared Tool Button ───────────────────────────── */
.sb-tool-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 5px 10px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
}

.sb-tool-btn:hover:not(:disabled) {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sb-tool-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── §31.5 — Language Tabs ────────────────────────────────── */
.sb-lang-tabs {
  display      : flex;
  gap          : 0;
  border-bottom: 1.5px solid var(--ab-border);
  background   : var(--ab-bg-alt);
  flex-shrink  : 0;
  overflow-x   : auto;
}

.sb-lang-tab {
  display      : inline-flex;
  align-items  : center;
  gap          : 7px;
  padding      : 10px 18px;
  border       : none;
  border-bottom: 2.5px solid transparent;
  background   : none;
  color        : var(--ab-text-muted);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
  flex-shrink  : 0;
}

.sb-lang-tab:hover {
  color     : var(--ab-text);
  background: rgba(99,102,241,.04);
}

.sb-lang-tab-active {
  border-bottom-color: var(--ab-primary);
  color              : var(--ab-primary);
  background         : var(--ab-primary-light);
}

.sb-lang-tab-icon { font-size: 14px; }

/* ── §31.6 — Template Bar ─────────────────────────────────── */
.sb-template-bar {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 8px 16px;
  border-bottom: 1px solid var(--ab-border);
  background : var(--ab-gradient-soft);
  flex-shrink: 0;
  overflow-x : auto;
}

.sb-template-bar-label {
  font-size     : 10px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  display       : flex;
  align-items   : center;
  gap           : 5px;
  flex-shrink   : 0;
  white-space   : nowrap;
}

.sb-template-pills { display: flex; gap: 5px; flex-shrink: 0; }

.sb-template-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  padding      : 4px 11px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
}

.sb-template-pill:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* ── §31.7 — Split View ───────────────────────────────────── */
.sb-split-view {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  flex                  : 1;
  min-height            : 0;
  overflow              : hidden;
}

/* ── §31.8 — Editor Panel ─────────────────────────────────── */
.sb-editor-panel {
  display       : flex;
  flex-direction: column;
  border-right  : 1.5px solid var(--ab-border);
  background    : var(--ab-bg-alt);
  overflow      : hidden;
  min-height    : 0;
}

.sb-editor-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 8px 12px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-surface-solid);
  flex-shrink    : 0;
  gap            : 8px;
  flex-wrap      : wrap;
}

.sb-editor-toolbar-left,
.sb-editor-toolbar-right { display: flex; align-items: center; gap: 6px; }

.sb-editor-lang-indicator {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  font-size    : 11px;
  font-weight  : 800;
  color        : var(--ab-primary);
  padding      : 2px 9px;
  background   : var(--ab-primary-light);
  border-radius: 20px;
}

.sb-editor-hint {
  font-size  : 10px;
  color      : var(--ab-text-dim);
  font-weight: 600;
}

/* Editor with line numbers */
.sb-editor-wrap {
  display  : flex;
  flex     : 1;
  overflow : hidden;
  position : relative;
  min-height: 0;
}

.sb-line-numbers {
  width        : 42px;
  min-width    : 42px;
  padding      : 12px 8px;
  background   : rgba(0,0,0,.04);
  color        : var(--ab-text-dim);
  font-family  : 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-size    : 12.5px;
  line-height  : 1.6;
  text-align   : right;
  user-select  : none;
  overflow     : hidden;
  flex-shrink  : 0;
  border-right : 1px solid var(--ab-border);
  white-space  : pre;
}

.sb-code-editor {
  flex       : 1;
  padding    : 12px 14px;
  border     : none;
  background : transparent;
  color      : var(--ab-text);
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-size  : 13px;
  line-height: 1.6;
  resize     : none;
  outline    : none;
  tab-size   : 4;
  white-space: pre;
  overflow-x : auto;
  overflow-y : auto;
  min-height : 0;
  caret-color: var(--ab-primary);
}

.sb-code-editor::placeholder {
  color      : var(--ab-text-dim);
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-style : italic;
}

/* Run Toolbar */
.sb-run-toolbar {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 10px 12px;
  border-top : 1.5px solid var(--ab-border);
  background : var(--ab-surface-solid);
  flex-shrink: 0;
  flex-wrap  : wrap;
}

.sb-run-primary-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 8px 18px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.35);
}

.sb-run-primary-btn:hover:not(:disabled) {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.45);
}

.sb-run-primary-btn:disabled { opacity: .55; cursor: not-allowed; }

.sb-stop-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 8px 14px;
  border       : 1.5px solid rgba(239,68,68,.30);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-error-light);
  color        : var(--ab-error);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.sb-stop-btn:hover:not(:disabled) { background: rgba(239,68,68,.18); }
.sb-stop-btn:disabled { opacity: .4; cursor: not-allowed; }

.sb-run-info {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  font-weight: 600;
  margin-left: auto;
}

/* ── §31.9 — Output Panel ─────────────────────────────────── */
.sb-output-panel {
  display       : flex;
  flex-direction: column;
  background    : var(--ab-surface-solid);
  overflow      : hidden;
  position      : relative;
  min-height    : 0;
}

.sb-output-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 8px 12px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-surface-solid);
  flex-shrink    : 0;
  gap            : 8px;
}

.sb-output-toolbar-left,
.sb-output-toolbar-right { display: flex; align-items: center; gap: 6px; }

.sb-output-title {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : 12px;
  font-weight: 800;
  color      : var(--ab-text);
}

.sb-output-title i { color: var(--ab-primary); }

.sb-output-count {
  font-size    : 10px;
  font-weight  : 700;
  padding      : 1px 7px;
  border-radius: 20px;
  background   : var(--ab-primary-light);
  color        : var(--ab-primary);
}

/* Output scrollable area */
.sb-output-area {
  flex      : 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding   : 12px 14px;
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-size  : 12.5px;
  line-height: 1.65;
  min-height : 0;
}

/* Placeholder */
.sb-output-placeholder {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 40px 20px;
  text-align     : center;
  color          : var(--ab-text-dim);
  height         : 100%;
}

.sb-output-placeholder i { font-size: 32px; opacity: .18; }
.sb-output-placeholder p { font-size: 13px; font-family: var(--mcp-font); }
.sb-output-placeholder-hint { font-size: 11px; opacity: .7; font-style: italic; }

/* ── §31.10 — Loading Overlay ─────────────────────────────── */
.sb-output-loading {
  position       : absolute;
  inset          : 0;
  background     : rgba(255,255,255,.92);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  z-index        : 10;
  backdrop-filter: blur(4px);
}

body.dark-mode .sb-output-loading { background: rgba(15,23,42,.93); }

.sb-loading-spinner {
  width            : 36px;
  height           : 36px;
  border           : 3px solid var(--ab-border-strong);
  border-top-color : var(--ab-primary);
  border-radius    : 50%;
  animation        : abSpin .7s linear infinite;
}

.sb-loading-text {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ab-text-muted);
  font-family: var(--mcp-font);
  text-align : center;
  max-width  : 260px;
}

.sb-loading-bar {
  width        : 220px;
  height       : 4px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
}

.sb-loading-fill {
  height       : 100%;
  background   : var(--ab-gradient);
  border-radius: 99px;
  transition   : width .4s ease;
}

/* ── §31.11 — Output Renderer ─────────────────────────────── */
.sb-out-block { display: flex; flex-direction: column; gap: 2px; }

.sb-out-line   { padding: 1px 0; word-break: break-all; white-space: pre-wrap; }
.sb-out-stdout { color: var(--ab-text); }

.sb-out-stderr {
  color        : #f59e0b;
  background   : rgba(245,158,11,.06);
  border-left  : 2px solid #f59e0b;
  padding-left : 8px;
  border-radius: 0 4px 4px 0;
}

.sb-out-error {
  display      : flex;
  gap          : 8px;
  align-items  : flex-start;
  color        : var(--ab-error);
  background   : var(--ab-error-light);
  border-left  : 2px solid var(--ab-error);
  padding      : 6px 10px;
  border-radius: 0 6px 6px 0;
  margin       : 4px 0;
  font-family  : var(--mcp-font);
  font-size    : 12px;
  white-space  : pre-wrap;
}

.sb-out-result {
  color        : var(--ab-success);
  background   : rgba(16,185,129,.06);
  border-left  : 2px solid var(--ab-success);
  padding      : 3px 8px;
  border-radius: 0 4px 4px 0;
}

.sb-out-result-arrow { color: var(--ab-success); font-weight: 900; margin-right: 4px; }

/* Matplotlib chart */
.sb-out-chart {
  margin       : 12px 0;
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  overflow     : hidden;
  background   : var(--ab-bg-alt);
}

.sb-out-chart-label {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  font-size    : 10px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : var(--ab-surface-solid);
  border-bottom: 1px solid var(--ab-border);
  font-family  : var(--mcp-font);
}

.sb-out-chart-img { display: block; max-width: 100%; height: auto; }

/* SQL Table */
.sb-out-table-wrap {
  margin       : 10px 0;
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  overflow     : hidden;
}

.sb-out-table-meta {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  font-size    : 10px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : var(--ab-bg-alt);
  border-bottom: 1px solid var(--ab-border);
  font-family  : var(--mcp-font);
}

.sb-out-table-scroll { overflow-x: auto; }

.sb-out-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 11.5px;
  font-family    : 'JetBrains Mono','Fira Code',monospace;
}

.sb-out-table thead th {
  background    : var(--ab-bg-alt);
  padding       : 7px 12px;
  text-align    : left;
  font-size     : 10px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom : 1.5px solid var(--ab-border);
  white-space   : nowrap;
}

.sb-out-table tbody tr  { border-bottom: 1px solid var(--ab-border); }
.sb-out-table tbody tr:last-child { border-bottom: none; }
.sb-out-table tbody tr:hover { background: var(--ab-primary-light); }

.sb-out-table tbody td {
  padding   : 6px 12px;
  color     : var(--ab-text);
  white-space: nowrap;
}

.sb-out-empty {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 16px;
  color      : var(--ab-text-muted);
  font-size  : 12px;
  font-family: var(--mcp-font);
}

.sb-out-duration {
  display    : flex;
  align-items: center;
  gap        : 5px;
  padding    : 8px 0 2px;
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-dim);
  font-family: var(--mcp-font);
}

/* ── §31.12 — Execution History Panel ────────────────────── */
.sb-history-section {
  border-top    : 1.5px solid var(--ab-border);
  background    : var(--ab-surface-solid);
  flex-shrink   : 0;
  max-height    : 200px;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}

.sb-history-header {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  padding       : 10px 14px;
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom : 1px solid var(--ab-border);
  flex-shrink   : 0;
}

.sb-history-list  { overflow-y: auto; flex: 1; }

.sb-history-empty {
  padding    : 16px;
  font-size  : 12px;
  color      : var(--ab-text-dim);
  font-style : italic;
  font-family: var(--mcp-font);
}

.sb-history-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 8px 14px;
  border-bottom: 1px solid var(--ab-border);
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : 'JetBrains Mono','Fira Code',monospace;
}

.sb-history-item:last-child { border-bottom: none; }
.sb-history-item:hover { background: var(--ab-primary-light); }

.sb-history-lang {
  font-size     : 9px;
  font-weight   : 800;
  padding       : 2px 7px;
  border-radius : 20px;
  background    : var(--ab-primary-light);
  color         : var(--ab-primary);
  flex-shrink   : 0;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.sb-history-code {
  flex         : 1;
  font-size    : 11px;
  color        : var(--ab-text-muted);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.sb-history-stat { font-size: 10px; font-weight: 700; flex-shrink: 0; font-family: var(--mcp-font); }
.sb-history-stat.ok  { color: var(--ab-success); }
.sb-history-stat.err { color: var(--ab-error); }

/* ── §31.13 — Inline Chat Code Blocks ────────────────────── */
.sb-run-bar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 10px;
  padding        : 7px 12px;
  background     : linear-gradient(135deg,rgba(99,102,241,.06),rgba(118,75,162,.04));
  border         : 1px solid rgba(99,102,241,.15);
  border-bottom  : none;
  border-radius  : var(--ab-radius-lg) var(--ab-radius-lg) 0 0;
  flex-wrap      : wrap;
}

.sb-run-bar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-run-bar-right { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.sb-run-lang-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 3px 9px;
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 700;
}

.sb-run-agent-label {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-muted);
}

/* Icon buttons (copy / download / open IDE) */
.sb-run-icon-btn {
  width          : 26px;
  height         : 26px;
  border         : 1px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius);
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : var(--ab-transition);
}

.sb-run-icon-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* ▶ Run this code button */
.sb-run-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 5px 12px;
  border       : none;
  border-radius: var(--ab-radius);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 8px rgba(99,102,241,.30);
}

.sb-run-btn:hover:not(:disabled) {
  opacity   : .9;
  box-shadow: 0 4px 12px rgba(99,102,241,.40);
}

.sb-run-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Inline output container (below <pre>) */
.sb-inline-output {
  border       : 1px solid var(--ab-border);
  border-radius: 0 0 var(--ab-radius-lg) var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  overflow     : hidden;
  margin-bottom: 8px;
}

.sb-inline-output-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 6px 12px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-bg-alt);
  font-size      : 11px;
  font-weight    : 700;
  color          : var(--ab-text-muted);
  font-family    : var(--mcp-font);
}

.sb-inline-close-btn {
  border       : none;
  background   : none;
  color        : var(--ab-text-muted);
  cursor       : pointer;
  font-size    : 11px;
  padding      : 2px 4px;
  border-radius: 5px;
  transition   : var(--ab-transition);
}

.sb-inline-close-btn:hover { background: var(--ab-error-light); color: var(--ab-error); }

.sb-inline-output-content {
  padding    : 10px 14px;
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  font-size  : 12px;
  line-height: 1.65;
  max-height : 300px;
  overflow-y : auto;
}

.sb-inline-loading {
  display    : flex;
  align-items: center;
  gap        : 8px;
  color      : var(--ab-text-muted);
  font-family: var(--mcp-font);
  font-size  : 12px;
  padding    : 8px 0;
}

/* ── §31.14 — Agent Builder Capability Card ───────────────── */
/* abu-toggle-switch & abu-toggle-track → déjà définis en §30  */

.abu-caps-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
  gap                   : 10px;
}

.abu-cap-card {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  padding       : 14px;
  border        : 1.5px solid var(--ab-border);
  border-radius : var(--ab-radius-lg);
  background    : var(--ab-bg-alt);
  transition    : var(--ab-transition);
}

.abu-cap-card.active {
  border-color: rgba(99,102,241,.35);
  background  : var(--ab-primary-light);
}

.abu-cap-top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 2px;
}

.abu-cap-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 15px;
  color          : #fff;
  flex-shrink    : 0;
}

.abu-cap-label { font-size: 12px; font-weight: 800; color: var(--ab-text); }

.abu-cap-desc {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.5;
}

/* ── §31.15 — Dark Mode ───────────────────────────────────── */
body.dark-mode .sb-panel          { background: rgba(10,15,30,.92); }
body.dark-mode .sb-panel-header   { background: rgba(255,255,255,.02); }
body.dark-mode .sb-editor-panel   { background: rgba(5,10,20,.60); }
body.dark-mode .sb-output-panel   { background: rgba(10,15,30,.55); }
body.dark-mode .sb-lang-tabs      { background: rgba(255,255,255,.03); }
body.dark-mode .sb-template-bar   { background: rgba(255,255,255,.02); }
body.dark-mode .sb-history-section{ background: rgba(5,10,20,.55); }

body.dark-mode .sb-lang-tab:hover      { background: rgba(99,102,241,.08); }
body.dark-mode .sb-lang-tab-active     { background: rgba(99,102,241,.16); }

body.dark-mode .sb-editor-toolbar,
body.dark-mode .sb-output-toolbar,
body.dark-mode .sb-run-toolbar         { background: rgba(255,255,255,.03); }

body.dark-mode .sb-code-editor         { color: #e2e8f0; caret-color: #818cf8; }
body.dark-mode .sb-line-numbers        { background: rgba(0,0,0,.20); color: rgba(255,255,255,.22); }

body.dark-mode .sb-out-table thead th  { background: rgba(255,255,255,.04); }
body.dark-mode .sb-out-table tbody tr:hover { background: rgba(99,102,241,.10); }
body.dark-mode .sb-out-table-wrap,
body.dark-mode .sb-out-chart           { border-color: rgba(255,255,255,.08); }
body.dark-mode .sb-out-table-meta,
body.dark-mode .sb-out-chart-label     { background: rgba(255,255,255,.04); }

body.dark-mode .sb-tool-btn,
body.dark-mode .sb-template-pill,
body.dark-mode .sb-run-icon-btn        { background: rgba(255,255,255,.06); }

body.dark-mode .sb-status-badge        { background: rgba(255,255,255,.06); }
body.dark-mode .sb-run-bar             { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.12); }
body.dark-mode .sb-inline-output       { background: rgba(15,23,42,.95); border-color: rgba(255,255,255,.08); }
body.dark-mode .sb-inline-output-header{ background: rgba(255,255,255,.04); }
body.dark-mode .sb-out-stdout          { color: #cbd5e1; }
body.dark-mode .sb-history-item:hover  { background: rgba(99,102,241,.10); }
body.dark-mode .abu-cap-card           { background: rgba(255,255,255,.04); }

/* ── §31.16 — Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
  .sb-split-view                 { grid-template-columns: 1fr; }
  .sb-editor-panel               { border-right: none; border-bottom: 1.5px solid var(--ab-border); min-height: 280px; }
  .sb-output-panel               { min-height: 240px; }
}

@media (max-width: 768px) {
  .sb-panel-header               { padding: 10px 14px; }
  .sb-panel-sub                  { display: none; }
  .sb-lang-tab                   { padding: 9px 14px; font-size: 11px; }
  .sb-editor-toolbar-right .sb-tool-btn:nth-child(n+3) { display: none; }
  .sb-run-bar                    { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sb-run-bar-right              { width: 100%; justify-content: flex-end; }
  .sb-run-agent-label            { display: none; }
  .sb-inline-output-content      { max-height: 200px; }
  .sb-history-section            { max-height: 160px; }
  .sb-loading-bar                { width: 160px; }
  .abu-caps-grid                 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sb-editor-panel               { min-height: 220px; }
  .sb-output-panel               { min-height: 200px; }
  .sb-lang-tab span:not(.sb-lang-tab-icon) { display: none; }
  .sb-lang-tab                   { padding: 9px 12px; }
  .sb-run-toolbar                { gap: 5px; }
  .sb-run-primary-btn            { padding: 7px 14px; font-size: 11px; }
  .sb-out-table tbody td         { padding: 5px 8px; font-size: 10.5px; }
  .abu-caps-grid                 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   END — §31 AGENT SANDBOX
   AlphaVault AI · agent-builder.css v2.0
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   §32 — AGENT SPAWNING & HIÉRARCHIE DYNAMIQUE (agent-spawning.js)
   Prefix  : sp- (SPawning)
   Covers  : Swarm Status Bar · Child Pills · Sub-Agent Messages ·
             Spawning Config Panel · Spawning Log · Execution Modes
   Note    : abu-toggle-switch → déjà défini en §30
═══════════════════════════════════════════════════════════════ */

/* ── §32.0 — View Root ────────────────────────────────────── */
#view-spawning {
  overflow-y: auto   !important;
  overflow-x: hidden !important;
}

#sp-log-view-content {
  flex      : 1;
  min-height: 0;
  padding   : 16px 20px 32px;
  display   : flex;
  flex-direction: column;
  gap       : 16px;
}

/* ══════════════════════════════════════════════════════════════
   §32.1 — SWARM STATUS BAR
══════════════════════════════════════════════════════════════ */
.sp-swarm-bar {
  position      : relative;
  padding       : 12px 20px;
  background    : linear-gradient(135deg,
                    rgba(99,102,241,.08) 0%,
                    rgba(118,75,162,.06) 100%);
  border-bottom : 1px solid rgba(99,102,241,.18);
  border-top    : 1px solid rgba(99,102,241,.10);
  display       : flex;
  align-items   : stretch;
  gap           : 0;
  flex-direction: column;
  flex-shrink   : 0;
  transition    : opacity .3s ease, transform .3s ease;
  z-index       : 20;
}

.sp-swarm-bar[data-swarm-status="done"] {
  background  : linear-gradient(135deg,
                  rgba(16,185,129,.08) 0%,
                  rgba(5,150,105,.06) 100%);
  border-color: rgba(16,185,129,.2);
}

.sp-swarm-bar[data-swarm-status="error"] {
  background  : linear-gradient(135deg,
                  rgba(239,68,68,.07) 0%,
                  rgba(220,38,38,.05) 100%);
  border-color: rgba(239,68,68,.2);
}

.sp-swarm-bar-inner {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  flex          : 1;
}

/* ── Header row ───────────────────────────────────────────── */
.sp-swarm-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 12px;
}

.sp-swarm-lead {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.sp-swarm-lead-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 9px;
  background     : var(--ab-gradient);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  font-size      : 12px;
  flex-shrink    : 0;
  box-shadow     : 0 2px 8px rgba(99,102,241,.30);
}

.sp-lead-name {
  display    : block;
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
  line-height: 1.2;
}

.sp-lead-sub {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  font-weight: 500;
}

.sp-swarm-right {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-shrink: 0;
}

.sp-count {
  font-size    : 12px;
  font-weight  : 800;
  color        : var(--ab-primary);
  background   : var(--ab-primary-light);
  padding      : 3px 10px;
  border-radius: 20px;
  white-space  : nowrap;
  transition   : background .2s;
}

.sp-swarm-bar[data-swarm-status="done"] .sp-count {
  background: var(--ab-success-light);
  color     : var(--ab-success);
}

.sp-close-btn {
  background   : none;
  border       : none;
  cursor       : pointer;
  color        : var(--ab-text-muted);
  font-size    : 13px;
  padding      : 4px 6px;
  border-radius: var(--ab-radius);
  transition   : var(--ab-transition);
}

.sp-close-btn:hover { color: var(--ab-text); background: var(--ab-bg-alt); }

/* ── Global progress bar ──────────────────────────────────── */
.sp-global-bar {
  height       : 3px;
  background   : rgba(99,102,241,.12);
  border-radius: 99px;
  overflow     : hidden;
}

.sp-global-fill {
  height         : 100%;
  background     : linear-gradient(90deg, #667eea, #764ba2, #10b981);
  background-size: 200% 100%;
  border-radius  : 99px;
  transition     : width .5s cubic-bezier(.4,0,.2,1);
  animation      : spShimmer 2s linear infinite;
}

@keyframes spShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.sp-swarm-bar[data-swarm-status="done"] .sp-global-fill {
  background: linear-gradient(90deg, #10b981, #059669);
  animation : none;
}

/* ── Children row ─────────────────────────────────────────── */
.sp-children-row {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 6px;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   §32.2 — CHILD PILLS
══════════════════════════════════════════════════════════════ */
.sp-child-pill {
  display      : flex;
  align-items  : center;
  gap          : 7px;
  padding      : 6px 10px 6px 8px;
  border-radius: 10px;
  border       : 1.5px solid var(--ab-input-border);
  background   : var(--ab-surface-solid);
  font-size    : 11px;
  transition   : var(--ab-transition);
  position     : relative;
  overflow     : hidden;
}

/* Status variants */
.sp-child-pill[data-status="waiting"] {
  opacity     : .65;
  border-color: var(--ab-border);
}

.sp-child-pill[data-status="running"] {
  border-color: rgba(99,102,241,.50);
  background  : rgba(99,102,241,.04);
  animation   : spPulseBorder 1.5s ease infinite;
}

.sp-child-pill[data-status="done"] {
  border-color: rgba(16,185,129,.40);
  background  : var(--ab-success-light);
}

.sp-child-pill[data-status="error"] {
  border-color: rgba(239,68,68,.40);
  background  : var(--ab-error-light);
}

.sp-child-pill[data-status="skipped"] {
  opacity     : .45;
  border-color: var(--ab-border);
}

@keyframes spPulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.0); }
  50%      { box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
}

.sp-child-role-icon {
  font-size  : 15px;
  line-height: 1;
  flex-shrink: 0;
}

.sp-child-meta {
  display       : flex;
  flex-direction: column;
  gap           : 1px;
}

.sp-child-label {
  font-size  : 11px;
  font-weight: 800;
  color      : var(--ab-text);
  white-space: nowrap;
}

.sp-child-role-name {
  font-size  : 10px;
  color      : var(--ab-text-muted);
  white-space: nowrap;
}

/* ── Status dot ───────────────────────────────────────────── */
.sp-status-indicator {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  flex-shrink  : 0;
  transition   : background .2s;
}

.sp-dot-waiting { background: #cbd5e1; }
.sp-dot-running { background: var(--ab-primary); animation: spDotBlink .8s ease infinite; }
.sp-dot-done    { background: var(--ab-success); }
.sp-dot-error   { background: var(--ab-error);   }
.sp-dot-skipped { background: var(--ab-text-dim); }

@keyframes spDotBlink {
  0%, 100% { opacity: 1; transform: scale(1);  }
  50%      { opacity: .5; transform: scale(.7); }
}

/* ══════════════════════════════════════════════════════════════
   §32.3 — SUB-AGENT MESSAGES
══════════════════════════════════════════════════════════════ */
.sp-sub-message {
  margin-left: 12px;
  position   : relative;
}

.sp-sub-message::before {
  content      : '';
  position     : absolute;
  left         : -12px; top: 0; bottom: 0;
  width        : 2px;
  background   : linear-gradient(to bottom,
                   rgba(99,102,241,.3) 0%,
                   transparent 100%);
  border-radius: 1px;
}

.sp-sub-indent { display: none; }

.sp-sub-avatar {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  flex-shrink    : 0;
  border         : 1.5px solid rgba(99,102,241,.15);
}

.sp-sub-author { font-weight: 700 !important; }

.sp-sub-role-badge {
  font-size    : 10px;
  font-weight  : 700;
  padding      : 2px 7px;
  border-radius: 20px;
  flex-shrink  : 0;
}

.sp-sub-badge {
  font-size     : 9px;
  font-weight   : 800;
  padding       : 2px 6px;
  border-radius : 20px;
  background    : rgba(118,75,162,.12);
  color         : #7c3aed;
  letter-spacing: .4px;
  text-transform: uppercase;
  flex-shrink   : 0;
}

.sp-sub-content {
  border-left : 2px solid rgba(99,102,241,.15);
  padding-left: 12px;
  margin-top  : 4px;
}

/* ══════════════════════════════════════════════════════════════
   §32.4 — SPAWNING CONFIG PANEL (Agent Builder)
══════════════════════════════════════════════════════════════ */
.sp-config-panel {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
}

.sp-config-toggle-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.sp-config-badge {
  font-size    : 11px;
  font-weight  : 700;
  padding      : 3px 10px;
  border-radius: 20px;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  transition   : var(--ab-transition);
}

/* ── Max agents slider ────────────────────────────────────── */
.sp-slider-wrap {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.sp-slider {
  flex              : 1;
  -webkit-appearance: none;
  height            : 4px;
  border-radius     : 2px;
  background        : var(--ab-border-strong);
  outline           : none;
  cursor            : pointer;
  accent-color      : var(--ab-primary);
}

.sp-slider-val {
  font-size  : 16px;
  font-weight: 900;
  color      : var(--ab-primary);
  min-width  : 20px;
  text-align : center;
}

/* ── Execution mode grid ──────────────────────────────────── */
.sp-mode-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 8px;
}

.sp-mode-option {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 4px;
  padding       : 12px 8px;
  border-radius : var(--ab-radius-lg);
  border        : 1.5px solid var(--ab-border-strong);
  background    : var(--ab-bg-alt);
  cursor        : pointer;
  text-align    : center;
  transition    : var(--ab-transition);
  font-family   : var(--mcp-font);
}

.sp-mode-option:hover    { border-color: var(--ab-primary); }
.sp-mode-option.selected {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sp-mode-icon  { font-size: 20px; }
.sp-mode-label { font-size: 12px; font-weight: 800; color: var(--ab-text); }
.sp-mode-desc  { font-size: 10px; color: var(--ab-text-muted); line-height: 1.3; }

/* Config preview badge */
.sp-preview-badge {
  display     : flex;
  align-items : center;
  gap         : 6px;
  padding     : 10px 14px;
  border-radius: 10px;
  background  : var(--ab-primary-light);
  border      : 1px solid rgba(99,102,241,.15);
  font-size   : 12px;
  font-weight : 600;
  color       : var(--ab-primary);
}

/* ══════════════════════════════════════════════════════════════
   §32.5 — SPAWNING LOG (Spawn History View)
══════════════════════════════════════════════════════════════ */
.sp-log-wrap {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.sp-log-header {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 14px;
  font-weight: 800;
  color      : var(--ab-text);
}

.sp-log-badge {
  font-size    : 11px;
  font-weight  : 700;
  padding      : 2px 8px;
  border-radius: 20px;
  background   : var(--ab-primary-light);
  color        : var(--ab-primary);
  margin-left  : auto;
}

.sp-log-list {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

/* ── Log item card ────────────────────────────────────────── */
.sp-log-item {
  padding       : 14px 16px;
  border-radius : var(--ab-radius-xl);
  border        : 1.5px solid var(--ab-border);
  background    : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  transition    : var(--ab-transition);
  box-shadow    : var(--ab-shadow-card);
}

.sp-log-item:hover {
  border-color: rgba(99,102,241,.30);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-1px);
}

.sp-log-item-header {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
}

.sp-log-item-status { font-size: 14px; flex-shrink: 0; }
.sp-log-item-name   { font-size: 13px; font-weight: 800; color: var(--ab-text); flex: 1; }
.sp-log-item-date   { font-size: 11px; color: var(--ab-text-muted); flex-shrink: 0; }

.sp-mode-tag {
  font-size     : 10px;
  font-weight   : 700;
  padding       : 2px 7px;
  border-radius : 20px;
  background    : var(--ab-primary-light);
  color         : var(--ab-primary);
  text-transform: capitalize;
}

/* Child agent tags */
.sp-log-item-children {
  display  : flex;
  flex-wrap: wrap;
  gap      : 5px;
}

.sp-log-child-tag {
  display      : flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 11px;
  font-weight  : 600;
  padding      : 3px 8px;
  border-radius: 20px;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  border       : 1px solid var(--ab-border);
}

/* Stats row */
.sp-log-item-stats {
  display  : flex;
  gap      : 14px;
  flex-wrap: wrap;
}

.sp-log-item-stats span {
  font-size  : 11px;
  font-weight: 600;
  color      : var(--ab-text-muted);
  display    : flex;
  align-items: center;
  gap        : 4px;
}

/* Log empty state */
.sp-log-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 60px 20px;
  text-align     : center;
  color          : var(--ab-text-muted);
}

.sp-log-empty i { font-size: 36px; opacity: .18; display: block; }

.sp-log-empty-title {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ab-text-muted);
}

.sp-log-empty-sub {
  font-size  : 12px;
  color      : var(--ab-text-dim);
  max-width  : 300px;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   §32.6 — SWARM LOADING / INLINE STATES
══════════════════════════════════════════════════════════════ */
.sp-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  padding        : 40px 20px;
  color          : var(--ab-text-muted);
  font-size      : 13px;
}

.sp-summary-bar {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  flex-wrap    : wrap;
  padding      : 12px 16px;
  background   : var(--ab-gradient-soft);
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl);
  flex-shrink  : 0;
  box-shadow   : var(--ab-shadow-card);
}

.sp-summary-stat {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 2px;
  padding       : 0 16px;
  border-right  : 1px solid var(--ab-border);
  flex          : 1;
  text-align    : center;
}

.sp-summary-stat:last-child { border-right: none; }

.sp-summary-val {
  font-size               : 20px;
  font-weight             : 900;
  background              : var(--ab-gradient);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
  line-height             : 1;
}

.sp-summary-label {
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ══════════════════════════════════════════════════════════════
   §32.7 — DARK MODE — SPAWNING
══════════════════════════════════════════════════════════════ */
body.dark-mode .sp-swarm-bar {
  background  : linear-gradient(135deg,
                  rgba(99,102,241,.10) 0%,
                  rgba(118,75,162,.08) 100%);
  border-color: rgba(99,102,241,.20);
}

body.dark-mode .sp-swarm-bar[data-swarm-status="done"] {
  background  : linear-gradient(135deg,
                  rgba(16,185,129,.10) 0%,
                  rgba(5,150,105,.08) 100%);
  border-color: rgba(16,185,129,.25);
}

body.dark-mode .sp-swarm-bar[data-swarm-status="error"] {
  background  : linear-gradient(135deg,
                  rgba(239,68,68,.08) 0%,
                  rgba(220,38,38,.06) 100%);
  border-color: rgba(239,68,68,.25);
}

body.dark-mode .sp-child-pill       { background: #1e293b; border-color: rgba(255,255,255,.10); }
body.dark-mode .sp-log-item         { background: rgba(17,24,39,.88); border-color: rgba(255,255,255,.07); }
body.dark-mode .sp-log-item:hover   { border-color: rgba(99,102,241,.30); }
body.dark-mode .sp-mode-option      { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
body.dark-mode .sp-mode-option.selected { background: rgba(99,102,241,.14); }
body.dark-mode .sp-log-child-tag    { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
body.dark-mode .sp-summary-bar      { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); }
body.dark-mode .sp-summary-stat     { border-color: rgba(255,255,255,.07); }
body.dark-mode .sp-preview-badge    { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.20); }
body.dark-mode .sp-config-badge     { background: rgba(255,255,255,.06); color: var(--ab-text-muted); }
body.dark-mode .sp-slider           { background: rgba(255,255,255,.12); }
body.dark-mode .sp-dot-waiting      { background: rgba(255,255,255,.20); }
body.dark-mode .sp-sub-content      { border-color: rgba(99,102,241,.20); }

/* ══════════════════════════════════════════════════════════════
   §32.8 — RESPONSIVE — SPAWNING
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sp-mode-grid    { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  #sp-log-view-content  { padding: 12px 14px 24px; gap: 12px; }

  .sp-mode-grid         { grid-template-columns: 1fr 1fr; }
  .sp-children-row      { gap: 4px; }

  .sp-child-pill        { padding: 5px 8px; }
  .sp-child-role-name   { display: none; }

  .sp-sub-message       { margin-left: 4px; }

  .sp-swarm-lead-icon   { display: none; }

  .sp-summary-bar       { gap: 8px; }
  .sp-summary-stat      { padding: 0 10px; }
  .sp-summary-val       { font-size: 16px; }

  .sp-log-item-stats span:nth-child(n+4) { display: none; }
}

@media (max-width: 480px) {
  .sp-mode-grid         { grid-template-columns: 1fr; }
  .sp-swarm-header      { flex-direction: column; align-items: flex-start; }
  .sp-swarm-right       { width: 100%; justify-content: space-between; }
  .sp-children-row      { overflow-x: auto; flex-wrap: nowrap; }
  .sp-child-pill        { flex-shrink: 0; }
  .sp-summary-bar       { gap: 6px; }
  .sp-summary-stat:nth-child(n+4) { display: none; }
}

/* ─────────────────────────────────────────────
   END — §32 AGENT SPAWNING
   AlphaVault AI · agent-builder.css v2.0
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   AGENT SWARM v2.0 — Ultra-Pro Glassmorphism · AlphaVault AI
   ═══════════════════════════════════════════════════════════════════════ */

   @keyframes sw-dash {
    to { stroke-dashoffset: -20; }
  }
  @keyframes sw-pulse {
    0%   { transform: scale(1);   opacity: .6; }
    70%  { transform: scale(1.2); opacity: 0;  }
    100% { transform: scale(1.2); opacity: 0;  }
  }
  @keyframes sw-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
  }
  @keyframes sw-glow-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(99,102,241,.28); }
    50%       { box-shadow: 0 0 36px rgba(99,102,241,.55); }
  }
  
  /* ── View container ───────────────────────────────────────────────────── */
  #view-swarm { display:flex; flex-direction:column; padding:0; overflow:hidden; }
  #sw-view-content { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  
  /* ════════════════════════════════════════════════════════════════════════
     TOOLBAR
  ════════════════════════════════════════════════════════════════════════ */
  .sw-toolbar {
    display:flex; align-items:center; gap:8px;
    padding:0 14px; height:56px; min-height:56px;
    background:rgba(13,17,23,.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid rgba(99,102,241,.14);
    overflow-x:auto; overflow-y:hidden;
    flex-shrink:0; scrollbar-width:none;
    position:relative; z-index:10;
  }
  .sw-toolbar::-webkit-scrollbar { display:none; }
  .sw-toolbar::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(99,102,241,.45),rgba(139,92,246,.4),transparent);
    pointer-events:none;
  }
  
  .sw-toolbar-left,
  .sw-toolbar-right  { display:flex; align-items:center; gap:5px; flex-shrink:0; }
  .sw-toolbar-center {
    display:flex; align-items:center; gap:8px;
    flex:1; justify-content:center; min-width:0;
  }
  .sw-toolbar-divider {
    width:1px; height:22px;
    background:linear-gradient(to bottom,transparent,rgba(99,102,241,.22),transparent);
    margin:0 4px; flex-shrink:0;
  }
  
  /* Palette buttons */
  .sw-palette-group { display:flex; align-items:center; gap:3px; flex-shrink:0; }
  .sw-palette-btn {
    display:flex; align-items:center; gap:5px;
    padding:5px 10px; border-radius:22px; font-size:10.5px;
    font-weight:700; font-family:'Inter',sans-serif;
    cursor:pointer; border:1px solid transparent;
    background:rgba(255,255,255,.04);
    transition:all .18s cubic-bezier(.4,0,.2,1);
    flex-shrink:0; white-space:nowrap;
  }
  .sw-palette-btn:hover {
    border-color:currentColor;
    background:rgba(99,102,241,.05);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,.2), 0 0 0 1px currentColor;
  }
  .sw-palette-btn i { font-size:11px; width:14px; text-align:center; flex-shrink:0; }
  .sw-palette-label { font-size:10px; }
  
  /* Tool buttons */
  .sw-tool-btn {
    display:flex; align-items:center; gap:5px;
    padding:5px 11px; border-radius:9px; font-size:11px;
    font-weight:700; cursor:pointer; white-space:nowrap;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.04);
    color:#64748b; transition:all .18s cubic-bezier(.4,0,.2,1);
    flex-shrink:0;
  }
  .sw-tool-btn:hover {
    border-color:rgba(99,102,241,.45); color:#818cf8;
    background:rgba(99,102,241,.07);
    box-shadow:0 0 14px rgba(99,102,241,.18);
  }
  .sw-tool-btn-active {
    border-color:rgba(99,102,241,.65) !important;
    background:rgba(99,102,241,.14) !important;
    color:#818cf8 !important;
    box-shadow:0 0 18px rgba(99,102,241,.28) !important;
  }
  .sw-btn-validate:hover { border-color:rgba(16,185,129,.45); color:#34d399; }
  .sw-btn-save:hover     { border-color:rgba(139,92,246,.45); color:#a78bfa; }
  
  /* Swarm name */
  .sw-swarm-name-wrap {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(99,102,241,.16);
    border-radius:11px; padding:6px 12px;
    max-width:280px; min-width:160px;
    backdrop-filter:blur(12px);
    transition:all .18s;
  }
  .sw-swarm-name-wrap:focus-within {
    border-color:rgba(99,102,241,.5);
    box-shadow:0 0 0 3px rgba(99,102,241,.1);
  }
  .sw-swarm-name-input {
    flex:1; border:none; background:transparent; outline:none;
    font-size:13px; font-weight:700; color:#f1f5f9;
    font-family:'Inter',sans-serif; min-width:80px;
  }
  .sw-dirty-dot {
    color:#f59e0b; font-size:9px; font-weight:900; flex-shrink:0;
    animation:sw-fadein .2s ease;
  }
  
  /* Zoom controls */
  .sw-zoom-group {
    display:flex; align-items:center; gap:1px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px; padding:2px;
  }
  .sw-zoom-btn {
    background:none; border:none; cursor:pointer; padding:4px 8px;
    border-radius:7px; font-size:11px; color:#475569; transition:all .15s;
  }
  .sw-zoom-btn:hover { background:rgba(99,102,241,.12); color:#818cf8; }
  .sw-zoom-level {
    font-size:11px; font-weight:800; min-width:38px;
    text-align:center; color:#94a3b8;
  }
  
  /* Run / Pause / Stop buttons */
  .sw-run-group { display:flex; align-items:center; gap:3px; flex-shrink:0; }
  .sw-run-btn {
    display:flex; align-items:center; gap:6px;
    padding:7px 16px; border-radius:10px; font-size:12px;
    font-weight:800; cursor:pointer; border:none;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:white; transition:all .2s; flex-shrink:0;
    box-shadow:0 4px 16px rgba(99,102,241,.35);
  }
  .sw-run-btn:hover:not(:disabled) {
    transform:translateY(-1px);
    box-shadow:0 6px 24px rgba(99,102,241,.52);
    animation:sw-glow-pulse .9s ease infinite;
  }
  .sw-run-btn:disabled { opacity:.4; cursor:not-allowed; }
  .sw-pause-btn { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 4px 16px rgba(245,158,11,.3); }
  .sw-stop-btn  { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 4px 16px rgba(239,68,68,.3); padding:7px 11px; }
  
  /* ════════════════════════════════════════════════════════════════════════
     WORKSPACE
  ════════════════════════════════════════════════════════════════════════ */
  .sw-workspace {
    display:flex; flex:1; min-height:0; overflow:hidden; position:relative;
  }
  .sw-canvas-container { flex:1; position:relative; overflow:hidden; min-width:0; }
  
  .sw-canvas-container.sw-drop-active::after {
    content:'Drop to add node';
    position:absolute; inset:12px;
    border:2px dashed rgba(99,102,241,.45);
    background:rgba(99,102,241,.04);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:700; color:rgba(99,102,241,.7);
    border-radius:16px; pointer-events:none; z-index:10;
  }
  
  /* ── Inspector ── */
  .sw-inspector-panel {
    width:0; overflow:hidden;
    background:rgba(9,12,19,.94);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-left:1px solid rgba(99,102,241,.13);
    display:flex; flex-direction:column;
    transition:width .22s cubic-bezier(.4,0,.2,1);
    flex-shrink:0;
  }
  .sw-inspector-visible { width:296px; }
  
  .sw-inspector-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; flex-shrink:0;
    border-bottom:1px solid rgba(99,102,241,.1);
    background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(139,92,246,.05));
  }
  .sw-inspector-title {
    font-size:12px; font-weight:800; color:#f1f5f9;
    display:flex; align-items:center; gap:7px; letter-spacing:.3px;
  }
  .sw-inspector-close-btn {
    background:none; border:none; cursor:pointer; padding:4px;
    border-radius:6px; font-size:12px; color:#475569; transition:all .15s;
  }
  .sw-inspector-close-btn:hover { color:#ef4444; background:rgba(239,68,68,.1); }
  
  .sw-inspector-scroll {
    flex:1; overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.2) transparent;
  }
  .sw-inspector-scroll::-webkit-scrollbar { width:3px; }
  .sw-inspector-scroll::-webkit-scrollbar-thumb { background:rgba(99,102,241,.25); border-radius:3px; }
  
  /* Inspector empty */
  .sw-inspector-empty {
    display:flex; flex-direction:column; align-items:center;
    padding:32px 20px; text-align:center; gap:12px;
    animation:sw-fadein .25s ease;
  }
  .sw-inspector-empty-icon {
    width:56px; height:56px; border-radius:16px;
    background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.09));
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:rgba(99,102,241,.7);
    border:1px solid rgba(99,102,241,.14);
  }
  .sw-inspector-empty-title { font-size:13px; font-weight:800; color:#e2e8f0; margin:0; }
  .sw-inspector-empty-sub   { font-size:11px; color:#475569; margin:0; line-height:1.65; }
  .sw-inspector-tips { display:flex; flex-direction:column; gap:5px; margin-top:4px; width:100%; }
  .sw-inspector-tip {
    display:flex; align-items:center; gap:8px;
    font-size:10.5px; color:#475569;
    padding:6px 10px; border-radius:8px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.04);
  }
  .sw-inspector-tip i { width:13px; text-align:center; color:rgba(99,102,241,.65); flex-shrink:0; }
  
  /* Inspector form */
  .sw-inspector-form { padding:14px 16px; display:flex; flex-direction:column; }
  .sw-inspector-node-header {
    display:flex; align-items:center; gap:10px;
    padding-bottom:14px; margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sw-inspector-node-icon {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .sw-inspector-node-meta { flex:1; min-width:0; }
  .sw-inspector-node-type  { display:block; font-size:12px; font-weight:800; color:#f1f5f9; }
  .sw-inspector-node-id    { font-size:9.5px; color:#334155; font-family:'JetBrains Mono',monospace; }
  .sw-inspector-delete-btn {
    background:none; border:none; cursor:pointer; padding:6px;
    border-radius:8px; font-size:12px; color:#334155; transition:all .15s; flex-shrink:0;
  }
  .sw-inspector-delete-btn:hover { color:#ef4444; background:rgba(239,68,68,.1); }
  
  .sw-inspector-field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
  .sw-inspector-label {
    font-size:10px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:.5px;
    display:flex; align-items:center; gap:6px;
  }
  .sw-inspector-label-muted { color:#334155; font-weight:600; text-transform:none; letter-spacing:0; }
  .sw-inspector-hint  { font-size:10px; color:#334155; line-height:1.5; }
  .sw-inspector-count {
    margin-left:auto; font-size:11px; font-weight:800; color:#818cf8;
    background:rgba(99,102,241,.12); padding:1px 7px; border-radius:20px;
  }
  .sw-inspector-input {
    padding:7px 10px; border-radius:9px; font-size:12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.04);
    color:#f1f5f9; font-family:'Inter',sans-serif;
    transition:all .15s; outline:none; width:100%; box-sizing:border-box;
  }
  .sw-inspector-input:focus {
    border-color:rgba(99,102,241,.5);
    background:rgba(99,102,241,.06);
    box-shadow:0 0 0 3px rgba(99,102,241,.1);
  }
  .sw-inspector-select  { cursor:pointer; }
  .sw-inspector-textarea{ resize:vertical; min-height:64px; line-height:1.5; }
  .sw-inspector-range   { width:100%; accent-color:#6366f1; cursor:pointer; }
  
  .sw-inspector-toggle-row { display:flex; align-items:center; margin-bottom:12px; }
  .sw-inspector-toggle-label {
    display:flex; align-items:center; gap:9px; cursor:pointer;
    font-size:11.5px; font-weight:600; color:#cbd5e1;
  }
  .sw-inspector-toggle { position:relative; display:inline-flex; flex-shrink:0; }
  .sw-inspector-toggle input { opacity:0; width:0; height:0; position:absolute; }
  .sw-inspector-toggle-track {
    display:block; width:36px; height:20px; border-radius:10px;
    background:rgba(255,255,255,.1); cursor:pointer; transition:background .2s; position:relative;
  }
  .sw-inspector-toggle-track::after {
    content:''; position:absolute; top:2px; left:2px;
    width:16px; height:16px; border-radius:50%;
    background:white; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.35);
  }
  .sw-inspector-toggle input:checked + .sw-inspector-toggle-track {
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
  }
  .sw-inspector-toggle input:checked + .sw-inspector-toggle-track::after { transform:translateX(16px); }
  
  .sw-inspector-details {
    border:1px solid rgba(255,255,255,.06); border-radius:10px;
    overflow:hidden; margin-bottom:12px;
  }
  .sw-inspector-summary {
    padding:8px 12px; font-size:11px; font-weight:700; color:#64748b;
    cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.03); user-select:none;
  }
  .sw-inspector-summary::-webkit-details-marker { display:none; }
  .sw-inspector-details[open] .sw-inspector-summary {
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sw-inspector-details > :not(summary) { padding:0 12px; }
  
  .sw-inspector-actions {
    padding-top:12px; margin-top:4px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .sw-inspector-apply-btn {
    width:100%; padding:9px; border-radius:10px; font-size:12px;
    font-weight:800; cursor:pointer; border:none;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:white; display:flex; align-items:center; justify-content:center;
    gap:7px; transition:all .2s;
    box-shadow:0 4px 14px rgba(99,102,241,.35);
  }
  .sw-inspector-apply-btn:hover:not(:disabled) {
    transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,.5);
  }
  .sw-inspector-apply-btn:disabled { opacity:.45; cursor:not-allowed; }
  
  .sw-inspector-cond-preview {
    padding:6px 12px; border-radius:20px; font-size:11px; font-weight:700;
    border:1px solid; display:flex; align-items:center; gap:6px;
    margin-top:6px; transition:all .2s;
  }
  
  /* Agent picker */
  .sw-agent-picker { display:flex; flex-direction:column; gap:6px; }
  .sw-agent-picker-search-wrap {
    display:flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:9px; padding:6px 10px; transition:all .15s;
  }
  .sw-agent-picker-search-wrap:focus-within {
    border-color:rgba(99,102,241,.4); box-shadow:0 0 0 3px rgba(99,102,241,.08);
  }
  .sw-agent-picker-search-wrap i { color:#334155; font-size:11px; }
  .sw-agent-picker-search-wrap .sw-inspector-input { padding:0; border:none; background:transparent; }
  
  .sw-agent-picker-list {
    max-height:220px; overflow-y:auto;
    border:1px solid rgba(255,255,255,.07); border-radius:9px;
    background:rgba(9,12,19,.85);
  }
  .sw-agent-pick-item {
    display:flex; align-items:center; gap:9px;
    padding:8px 12px; cursor:pointer; transition:background .12s;
  }
  .sw-agent-pick-item:hover   { background:rgba(99,102,241,.07); }
  .sw-agent-pick-active       { background:rgba(99,102,241,.1) !important; }
  .sw-agent-pick-dot          { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .sw-agent-pick-info         { flex:1; min-width:0; }
  .sw-agent-pick-name {
    display:block; font-size:12px; font-weight:700; color:#e2e8f0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sw-agent-pick-cat  { font-size:10px; color:#334155; }
  .sw-agent-pick-empty {
    padding:20px; text-align:center; font-size:12px; color:#334155;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  
  /* ════════════════════════════════════════════════════════════════════════
     SWARM HISTORY PANEL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-history-panel {
    position:absolute; top:0; left:0; bottom:0; width:316px;
    background:rgba(9,12,19,.95);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border-right:1px solid rgba(99,102,241,.15);
    display:flex; flex-direction:column; z-index:15;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:6px 0 28px rgba(0,0,0,.35);
  }
  .sw-history-panel.sw-history-visible { transform:translateX(0); }
  
  .sw-history-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; flex-shrink:0;
    border-bottom:1px solid rgba(99,102,241,.1);
    background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(139,92,246,.05));
  }
  .sw-history-title {
    font-size:12px; font-weight:800; color:#f1f5f9;
    display:flex; align-items:center; gap:8px; letter-spacing:.3px;
  }
  .sw-history-close {
    background:none; border:none; cursor:pointer; padding:4px;
    color:#475569; border-radius:6px; font-size:12px; transition:color .15s;
  }
  .sw-history-close:hover { color:#ef4444; }
  
  .sw-history-count {
    font-size:10px; font-weight:700; color:#818cf8;
    background:rgba(99,102,241,.12); padding:2px 8px; border-radius:20px;
    margin-left:auto; margin-right:8px;
  }
  
  .sw-history-list {
    flex:1; overflow-y:auto; padding:10px;
    scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.2) transparent;
  }
  .sw-history-list::-webkit-scrollbar { width:3px; }
  .sw-history-list::-webkit-scrollbar-thumb { background:rgba(99,102,241,.25); border-radius:3px; }
  
  .sw-history-item {
    padding:12px 14px; border-radius:12px; margin-bottom:8px;
    background:rgba(30,41,59,.4);
    border:1px solid rgba(99,102,241,.1);
    cursor:pointer; transition:all .18s; animation:sw-fadein .2s ease;
  }
  .sw-history-item:hover {
    border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.06);
    transform:translateX(2px);
  }
  .sw-history-item-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
  }
  .sw-history-item-name {
    font-size:12px; font-weight:700; color:#e2e8f0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
  }
  .sw-history-item-badge {
    font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px; flex-shrink:0; margin-left:6px;
  }
  .sw-history-item-badge.success {
    background:rgba(16,185,129,.18); color:#34d399; border:1px solid rgba(16,185,129,.25);
  }
  .sw-history-item-badge.error {
    background:rgba(239,68,68,.18); color:#f87171; border:1px solid rgba(239,68,68,.25);
  }
  .sw-history-item-preview {
    font-size:11px; color:#475569; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:8px;
  }
  .sw-history-item-meta {
    display:flex; align-items:center; gap:10px; font-size:10px; color:#334155;
  }
  .sw-history-item-meta span { display:flex; align-items:center; gap:4px; }
  
  .sw-history-empty {
    display:flex; flex-direction:column; align-items:center;
    padding:40px 20px; text-align:center; gap:12px; color:#334155;
  }
  .sw-history-empty i { font-size:30px; opacity:.2; }
  .sw-history-empty p { font-size:12px; line-height:1.65; margin:0; }
  
  .sw-history-expand-btn {
    width:100%; padding:8px; border-radius:9px; font-size:11px; font-weight:700;
    cursor:pointer; border:1px solid rgba(99,102,241,.18);
    background:rgba(99,102,241,.06); color:#818cf8;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:all .15s; margin-top:4px;
  }
  .sw-history-expand-btn:hover { background:rgba(99,102,241,.12); }
  
  /* ════════════════════════════════════════════════════════════════════════
     MINI-MAP
  ════════════════════════════════════════════════════════════════════════ */
  .sw-minimap {
    position:absolute; bottom:14px; right:14px; z-index:20;
    background:rgba(6,8,14,.93); border-radius:12px;
    border:1px solid rgba(99,102,241,.18); overflow:hidden; cursor:crosshair;
    box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.08);
    transition:opacity .2s;
  }
  .sw-minimap:hover { opacity:1 !important; }
  .sw-minimap-hidden { display:none; }
  .sw-minimap-canvas { display:block; }
  .sw-minimap-vp {
    position:absolute; border:1.5px solid rgba(99,102,241,.6);
    background:rgba(99,102,241,.08); pointer-events:none;
    border-radius:3px; transition:all .05s linear;
  }
  .sw-minimap-toggle {
    position:absolute; bottom:14px; right:208px; z-index:21;
    background:rgba(9,12,19,.8); border:1px solid rgba(99,102,241,.18);
    color:#475569; border-radius:9px; padding:5px 9px;
    font-size:11px; cursor:pointer; transition:all .15s;
    backdrop-filter:blur(12px);
  }
  .sw-minimap-toggle:hover { color:#818cf8; border-color:rgba(99,102,241,.4); box-shadow:0 0 12px rgba(99,102,241,.2); }
  
  /* ════════════════════════════════════════════════════════════════════════
     OUTPUT PANEL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-output-bar {
    flex-shrink:0; display:flex; flex-direction:column;
    background:#080b10;
    border-top:1px solid rgba(99,102,241,.13);
    transition:height .22s cubic-bezier(.4,0,.2,1);
    height:196px; min-height:34px; overflow:hidden;
  }
  .sw-output-collapsed { height:34px; }
  .sw-output-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; height:34px; min-height:34px;
    cursor:pointer; user-select:none;
    border-bottom:1px solid rgba(99,102,241,.1);
    flex-shrink:0; background:rgba(10,13,20,.9);
  }
  .sw-output-header:hover { background:rgba(16,20,30,.95); }
  .sw-output-header-left  { display:flex; align-items:center; gap:8px; }
  .sw-output-header-right { display:flex; align-items:center; gap:6px; }
  .sw-output-title {
    font-size:10.5px; font-weight:700; color:#475569;
    letter-spacing:.6px; text-transform:uppercase;
  }
  .sw-output-badge {
    font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px;
    background:linear-gradient(135deg,#667eea,#764ba2); color:white;
    letter-spacing:.8px; animation:sw-fadein .2s ease;
  }
  .sw-output-action-btn {
    background:none; border:none; cursor:pointer; padding:3px 6px;
    border-radius:6px; font-size:11px; color:#334155; transition:color .15s;
  }
  .sw-output-action-btn:hover { color:#818cf8; }
  .sw-output-chevron {
    font-size:10px; color:#334155; transition:transform .22s;
  }
  .sw-output-body {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:10px 14px; background:#060910;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; line-height:1.6;
    scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.15) transparent;
  }
  .sw-output-body::-webkit-scrollbar { width:3px; }
  .sw-output-body::-webkit-scrollbar-thumb { background:rgba(99,102,241,.2); border-radius:3px; }
  
  /* ════════════════════════════════════════════════════════════════════════
     STATUS BAR
  ════════════════════════════════════════════════════════════════════════ */
  .sw-status-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; height:24px; min-height:24px; flex-shrink:0;
    background:rgba(8,11,18,.9); border-top:1px solid rgba(99,102,241,.08);
    font-size:10px;
  }
  .sw-status-left, .sw-status-right { display:flex; align-items:center; gap:8px; }
  .sw-status-item { display:flex; align-items:center; gap:4px; color:#334155; font-weight:600; }
  .sw-status-sep  { color:rgba(99,102,241,.18); }
  .sw-status-hint { opacity:.5; font-size:9.5px; }
  
  /* ════════════════════════════════════════════════════════════════════════
     RUN MODAL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-run-modal-overlay {
    position:fixed; inset:0; z-index:12000;
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(10px) saturate(150%);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
    display:flex; align-items:center; justify-content:center;
    animation:sw-fadein .2s ease;
  }
  .sw-run-modal {
    background:rgba(11,15,25,.97);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border-radius:20px; width:94vw; max-width:520px;
    border:1px solid rgba(99,102,241,.2);
    box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(99,102,241,.08);
    overflow:hidden; animation:sw-fadein .2s ease;
  }
  .sw-run-modal-header {
    display:flex; align-items:center; gap:12px; padding:20px 24px;
    border-bottom:1px solid rgba(99,102,241,.12);
    background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.06));
  }
  .sw-run-modal-icon {
    width:44px; height:44px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:16px; box-shadow:0 4px 16px rgba(99,102,241,.45);
  }
  .sw-run-modal-title { font-size:15px; font-weight:800; color:#f1f5f9; }
  .sw-run-modal-sub   { font-size:11px; color:#64748b; }
  .sw-run-modal-close {
    margin-left:auto; background:none; border:none; cursor:pointer;
    font-size:15px; color:#475569; padding:5px; border-radius:8px; transition:color .15s;
  }
  .sw-run-modal-close:hover { color:#f1f5f9; }
  .sw-run-modal-body  { padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
  .sw-run-modal-label {
    font-size:10.5px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:.5px;
  }
  .sw-run-modal-input {
    width:100%; box-sizing:border-box; padding:11px 14px; border-radius:11px;
    border:1px solid rgba(99,102,241,.18);
    background:rgba(255,255,255,.04); font-size:13px; line-height:1.6;
    color:#f1f5f9; font-family:'Inter',sans-serif;
    resize:vertical; outline:none; transition:all .18s;
  }
  .sw-run-modal-input:focus {
    border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.06);
    box-shadow:0 0 0 3px rgba(99,102,241,.1);
  }
  .sw-run-modal-input::placeholder { color:#1e293b; }
  .sw-run-modal-hint { font-size:11px; color:#334155; display:flex; align-items:center; gap:6px; }
  .sw-run-modal-actions {
    display:flex; justify-content:flex-end; gap:10px;
    padding:16px 24px; border-top:1px solid rgba(99,102,241,.1);
  }
  .sw-run-modal-cancel {
    padding:9px 18px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer;
    border:1px solid rgba(99,102,241,.18); background:rgba(255,255,255,.04); color:#94a3b8; transition:all .15s;
  }
  .sw-run-modal-cancel:hover { border-color:rgba(99,102,241,.4); color:#818cf8; }
  .sw-run-modal-run {
    padding:9px 20px; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; border:none;
    background:linear-gradient(135deg,#667eea,#764ba2); color:white;
    display:flex; align-items:center; gap:7px; transition:all .2s;
    box-shadow:0 4px 16px rgba(99,102,241,.4);
  }
  .sw-run-modal-run:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(99,102,241,.55); }
  
  /* ════════════════════════════════════════════════════════════════════════
     HITL MODAL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-hitl-overlay {
    position:fixed; inset:0; z-index:13000;
    background:rgba(0,0,0,.72); backdrop-filter:blur(12px) saturate(150%);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    display:flex; align-items:center; justify-content:center; animation:sw-fadein .2s ease;
  }
  .sw-hitl-modal {
    background:rgba(11,15,25,.97); backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(6,182,212,.2); border-radius:20px;
    width:94vw; max-width:540px; max-height:90vh; overflow-y:auto;
    box-shadow:0 24px 64px rgba(0,0,0,.55); animation:sw-fadein .2s ease;
  }
  .sw-hitl-header {
    display:flex; align-items:center; gap:12px; padding:20px 24px;
    border-bottom:1px solid rgba(6,182,212,.14);
    background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(99,102,241,.06));
  }
  .sw-hitl-icon {
    width:48px; height:48px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg,#06b6d4,#0891b2);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:20px; box-shadow:0 4px 16px rgba(6,182,212,.45);
  }
  .sw-hitl-title { font-size:16px; font-weight:900; color:#f1f5f9; }
  .sw-hitl-sub   { font-size:12px; color:#64748b; margin-top:2px; }
  .sw-hitl-message {
    margin:16px 24px 0; padding:12px 14px; border-radius:11px;
    background:rgba(6,182,212,.07); border:1px solid rgba(6,182,212,.16);
    font-size:13px; color:#cbd5e1; display:flex; gap:9px;
  }
  .sw-hitl-message i { color:#06b6d4; margin-top:1px; flex-shrink:0; }
  .sw-hitl-context { margin:14px 24px 0; }
  .sw-hitl-context-label {
    font-size:10px; font-weight:700; color:#334155;
    margin-bottom:6px; text-transform:uppercase; letter-spacing:.7px;
  }
  .sw-hitl-context-text {
    padding:10px 12px; border-radius:10px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    font-size:12px; color:#94a3b8; line-height:1.6; max-height:140px; overflow-y:auto;
    font-family:'JetBrains Mono',monospace;
  }
  .sw-hitl-redirect-wrap  { margin:14px 24px 0; }
  .sw-hitl-redirect-label { font-size:11px; font-weight:700; color:#64748b; display:block; margin-bottom:6px; }
  .sw-hitl-redirect-input {
    width:100%; box-sizing:border-box; padding:8px 11px; border-radius:9px;
    border:1px solid rgba(6,182,212,.18); background:rgba(255,255,255,.04);
    font-size:12px; line-height:1.5; color:#f1f5f9; font-family:'Inter',sans-serif;
    resize:none; outline:none; transition:all .15s;
  }
  .sw-hitl-redirect-input:focus { border-color:rgba(6,182,212,.5); box-shadow:0 0 0 3px rgba(6,182,212,.1); }
  .sw-hitl-countdown {
    margin:12px 24px 0; font-size:12px; font-weight:600;
    color:#f59e0b; display:flex; align-items:center; gap:6px;
  }
  .sw-hitl-countdown span { font-weight:900; font-size:16px; }
  .sw-hitl-actions { display:flex; gap:10px; padding:18px 24px; justify-content:flex-end; }
  .sw-hitl-reject-btn {
    padding:10px 20px; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer;
    border:1px solid rgba(239,68,68,.28); background:rgba(239,68,68,.07); color:#f87171; transition:all .15s;
  }
  .sw-hitl-reject-btn:hover { background:rgba(239,68,68,.14); }
  .sw-hitl-approve-btn {
    padding:10px 24px; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; border:none;
    background:linear-gradient(135deg,#06b6d4,#0891b2); color:white; transition:all .2s;
    box-shadow:0 4px 14px rgba(6,182,212,.4);
  }
  .sw-hitl-approve-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(6,182,212,.55); }
  
  /* ════════════════════════════════════════════════════════════════════════
     SWARM LIBRARY MODAL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-lib-overlay {
    position:fixed; inset:0; z-index:12000;
    background:rgba(0,0,0,.65); backdrop-filter:blur(8px) saturate(150%);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
    display:flex; align-items:center; justify-content:center; animation:sw-fadein .2s ease;
  }
  .sw-lib-modal {
    background:rgba(11,15,25,.97); backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(99,102,241,.15); border-radius:20px;
    width:94vw; max-width:600px; max-height:80vh;
    display:flex; flex-direction:column;
    box-shadow:0 24px 64px rgba(0,0,0,.5); animation:sw-fadein .2s ease;
  }
  .sw-lib-header {
    display:flex; align-items:center; gap:12px; padding:18px 22px;
    border-bottom:1px solid rgba(99,102,241,.12);
    background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
    flex-shrink:0;
  }
  .sw-lib-header-icon {
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:15px; flex-shrink:0; box-shadow:0 4px 12px rgba(99,102,241,.4);
  }
  .sw-lib-title { font-size:15px; font-weight:800; color:#f1f5f9; flex:1; }
  .sw-lib-close {
    background:none; border:none; cursor:pointer; font-size:15px;
    color:#475569; padding:5px; border-radius:8px; transition:color .15s;
  }
  .sw-lib-close:hover { color:#f1f5f9; }
  .sw-lib-body {
    flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
    scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.2) transparent;
  }
  .sw-lib-loading, .sw-lib-empty {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:32px; font-size:13px; color:#334155; flex-direction:column; text-align:center;
  }
  .sw-lib-empty i { font-size:30px; opacity:.2; }
  .sw-lib-item {
    display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
    border:1px solid rgba(99,102,241,.1); background:rgba(30,41,59,.4); transition:all .18s;
  }
  .sw-lib-item:hover { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.06); }
  .sw-lib-item-icon {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));
    display:flex; align-items:center; justify-content:center; color:#818cf8; font-size:14px;
  }
  .sw-lib-item-info { flex:1; min-width:0; }
  .sw-lib-item-name {
    display:block; font-size:13px; font-weight:800; color:#e2e8f0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sw-lib-item-meta { font-size:11px; color:#334155; }
  .sw-lib-item-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
  .sw-lib-load-btn {
    padding:6px 12px; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; border:none;
    background:linear-gradient(135deg,#667eea,#764ba2); color:white;
    display:flex; align-items:center; gap:5px; transition:all .18s;
    box-shadow:0 2px 8px rgba(99,102,241,.3);
  }
  .sw-lib-load-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(99,102,241,.45); }
  .sw-lib-dup-btn, .sw-lib-del-btn {
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
    border-radius:8px; padding:6px 8px; font-size:12px; cursor:pointer; color:#334155; transition:all .15s;
  }
  .sw-lib-dup-btn:hover { border-color:rgba(99,102,241,.4); color:#818cf8; background:rgba(99,102,241,.08); }
  .sw-lib-del-btn:hover { border-color:rgba(239,68,68,.4); color:#f87171; background:rgba(239,68,68,.08); }
  
  /* ════════════════════════════════════════════════════════════════════════
     TEMPLATE PICKER MODAL
  ════════════════════════════════════════════════════════════════════════ */
  .sw-tpl-overlay {
    position:fixed; inset:0; z-index:12000;
    background:rgba(0,0,0,.65); backdrop-filter:blur(8px) saturate(150%);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
    display:flex; align-items:center; justify-content:center; animation:sw-fadein .2s ease;
  }
  .sw-tpl-modal {
    background:rgba(11,15,25,.97); backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(99,102,241,.15); border-radius:20px;
    width:94vw; max-width:780px; max-height:88vh; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 24px 64px rgba(0,0,0,.5); animation:sw-fadein .2s ease;
  }
  .sw-tpl-header {
    display:flex; align-items:center; gap:12px; padding:18px 22px;
    border-bottom:1px solid rgba(99,102,241,.12);
    background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
    flex-shrink:0;
  }
  .sw-tpl-header-icon {
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:15px; flex-shrink:0; box-shadow:0 4px 12px rgba(99,102,241,.4);
  }
  .sw-tpl-title { font-size:15px; font-weight:800; color:#f1f5f9; flex:1; }
  .sw-tpl-close {
    background:none; border:none; cursor:pointer; font-size:15px;
    color:#475569; padding:5px; border-radius:8px; transition:color .15s;
  }
  .sw-tpl-close:hover { color:#f1f5f9; }
  .sw-tpl-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px; padding:18px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.2) transparent;
  }
  .sw-tpl-card {
    display:flex; flex-direction:column; gap:9px; padding:18px;
    border-radius:14px; cursor:pointer;
    border:1px solid rgba(99,102,241,.1); background:rgba(30,41,59,.5);
    transition:all .2s; animation:sw-fadein .25s ease;
  }
  .sw-tpl-card:hover {
    border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.07);
    transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.15);
  }
  .sw-tpl-card-icon {
    width:48px; height:48px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
  }
  .sw-tpl-card-name { font-size:13px; font-weight:800; color:#e2e8f0; }
  .sw-tpl-card-desc { font-size:11px; color:#475569; line-height:1.55; margin:0; }
  .sw-tpl-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
  .sw-tpl-tag { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; border:1px solid; }
  .sw-tpl-card-use {
    font-size:11px; font-weight:700; color:#818cf8;
    margin-top:auto; padding-top:10px;
    border-top:1px solid rgba(99,102,241,.1);
    display:flex; align-items:center; gap:5px;
  }
  
  /* ════════════════════════════════════════════════════════════════════════
     SWARM FOLDER — Agent grouping (My Agents + History)
  ════════════════════════════════════════════════════════════════════════ */
  .sw-agent-folder {
    border:1px solid rgba(99,102,241,.18); border-radius:14px;
    overflow:hidden; margin-bottom:12px;
    background:rgba(99,102,241,.03);
  }
  .sw-agent-folder-header {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; cursor:pointer;
    background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.06));
    border-bottom:1px solid rgba(99,102,241,.12);
    user-select:none; transition:background .15s;
  }
  .sw-agent-folder-header:hover { background:rgba(99,102,241,.14); }
  .sw-agent-folder-icon {
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:13px; flex-shrink:0;
  }
  .sw-agent-folder-name {
    font-size:13px; font-weight:800; color:var(--mcp-text,#f1f5f9); flex:1;
  }
  .sw-agent-folder-meta {
    font-size:10.5px; color:#6366f1; font-weight:700;
    background:rgba(99,102,241,.12); padding:2px 8px; border-radius:20px;
  }
  .sw-agent-folder-chevron {
    font-size:10px; color:#64748b; transition:transform .22s;
  }
  .sw-agent-folder.open .sw-agent-folder-chevron { transform:rotate(180deg); }
  .sw-agent-folder-body {
    padding:10px; display:none;
  }
  .sw-agent-folder.open .sw-agent-folder-body {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;
  }
  
  /* ════════════════════════════════════════════════════════════════════════
     LIGHT MODE OVERRIDES
  ════════════════════════════════════════════════════════════════════════ */
  body:not(.dark-mode) .sw-toolbar {
    background:rgba(255,255,255,.94); border-bottom-color:rgba(99,102,241,.1);
  }
  body:not(.dark-mode) .sw-toolbar::after {
    background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),rgba(139,92,246,.3),transparent);
  }
  body:not(.dark-mode) .sw-palette-btn { background:rgba(255,255,255,.8); }
  body:not(.dark-mode) .sw-tool-btn {
    background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.07); color:#64748b;
  }
  body:not(.dark-mode) .sw-zoom-group { background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.07); }
  body:not(.dark-mode) .sw-swarm-name-wrap { background:rgba(255,255,255,.8); border-color:rgba(99,102,241,.18); }
  body:not(.dark-mode) .sw-swarm-name-input { color:#1e293b; }
  body:not(.dark-mode) .sw-inspector-panel { background:rgba(255,255,255,.96); border-left-color:rgba(99,102,241,.1); }
  body:not(.dark-mode) .sw-inspector-input { background:#f8fafc; border-color:rgba(0,0,0,.08); color:#1e293b; }
  body:not(.dark-mode) .sw-inspector-node-type { color:#1e293b; }
  body:not(.dark-mode) .sw-inspector-title { color:#1e293b; }
  body:not(.dark-mode) .sw-inspector-empty-title { color:#1e293b; }
  body:not(.dark-mode) .sw-inspector-toggle-track { background:#cbd5e1; }
  body:not(.dark-mode) .sw-agent-picker-list { background:white; border-color:rgba(0,0,0,.07); }
  body:not(.dark-mode) .sw-agent-pick-name { color:#1e293b; }
  body:not(.dark-mode) .sw-status-bar { background:rgba(255,255,255,.95); border-top-color:rgba(99,102,241,.1); }
  body:not(.dark-mode) .sw-status-item { color:#64748b; }
  body:not(.dark-mode) .sw-lib-item { background:#f8fafc; border-color:rgba(0,0,0,.06); }
  body:not(.dark-mode) .sw-lib-item-name { color:#1e293b; }
  body:not(.dark-mode) .sw-tpl-card { background:white; border-color:rgba(99,102,241,.1); }
  body:not(.dark-mode) .sw-tpl-card-name { color:#1e293b; }
  body:not(.dark-mode) .sw-run-modal,
  body:not(.dark-mode) .sw-hitl-modal,
  body:not(.dark-mode) .sw-lib-modal,
  body:not(.dark-mode) .sw-tpl-modal { background:rgba(255,255,255,.98); }
  body:not(.dark-mode) .sw-run-modal-title,
  body:not(.dark-mode) .sw-hitl-title { color:#1e293b; }
  body:not(.dark-mode) .sw-run-modal-input {
    background:#f8fafc; border-color:rgba(0,0,0,.1); color:#1e293b;
  }
  body:not(.dark-mode) .sw-run-modal-input::placeholder { color:#94a3b8; }
  body:not(.dark-mode) .sw-hitl-context-text { background:#f8fafc; border-color:rgba(0,0,0,.07); color:#475569; }
  body:not(.dark-mode) .sw-hitl-redirect-input { background:#f8fafc; border-color:rgba(0,0,0,.1); color:#1e293b; }
  body:not(.dark-mode) .sw-history-panel { background:rgba(255,255,255,.98); border-right-color:rgba(99,102,241,.12); }
  body:not(.dark-mode) .sw-history-item { background:#f8fafc; border-color:rgba(99,102,241,.12); }
  body:not(.dark-mode) .sw-history-item-name { color:#1e293b; }
  body:not(.dark-mode) .sw-agent-folder { background:rgba(99,102,241,.02); border-color:rgba(99,102,241,.12); }
  body:not(.dark-mode) .sw-agent-folder-name { color:#1e293b; }

  /* ═══════════════════════════════════════════════════════════════════════
   §33 — AGENT-TO-AGENT PROTOCOL (agent-a2a.js)
   Prefix  : a2a- (Agent-to-Agent)
   Standard: A2A Protocol 2025 (Google / Anthropic)
   Covers  : Registry · Wizard · Call Log · Stats · Floating Panel · Sidebar
   Design  : Hérite des --ab-* variables · Glassmorphism · Cohérent §28–32
   ═══════════════════════════════════════════════════════════════════════ */

/* ── §33.0 — Registry Root ──────────────────────────────────────────────── */
.a2a-registry-wrap {
  display       : flex;
  flex-direction: column;
  gap           : 0;
  padding-bottom: 40px;
  flex-shrink   : 0;
  animation     : abFadeIn .2s ease;
}

/* ── §33.1 — Section Divider ────────────────────────────────────────────── */
.a2a-section-divider {
  display    : flex;
  align-items: center;
  gap        : 14px;
  padding    : 32px 20px 20px;
  flex-shrink: 0;
}

.a2a-section-divider-line {
  flex      : 1;
  height    : 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(99,102,241,.3),
    transparent
  );
}

.a2a-section-divider-label {
  display       : flex;
  align-items   : center;
  gap           : 7px;
  font-size     : 10px;
  font-weight   : 900;
  color         : var(--ab-primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding       : 4px 14px;
  border-radius : 20px;
  background    : var(--ab-primary-light);
  border        : 1px solid rgba(99,102,241,.2);
  white-space   : nowrap;
  flex-shrink   : 0;
}

/* ── §33.2 — Registry Header ─────────────────────────────────────────────── */
.a2a-registry-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 14px;
  padding        : 0 20px 20px;
  flex-wrap      : wrap;
  flex-shrink    : 0;
}

.a2a-registry-header-left {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex-wrap  : wrap;
}

.a2a-registry-header-right {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
}

.a2a-registry-icon {
  width          : 44px;
  height         : 44px;
  border-radius  : 13px;
  background     : var(--ab-gradient);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  flex-shrink    : 0;
  box-shadow     : 0 4px 14px rgba(99,102,241,.35);
}

.a2a-registry-title {
  font-size  : 15px;
  font-weight: 900;
  color      : var(--ab-text);
  line-height: 1.2;
}

.a2a-registry-sub {
  font-size : 11px;
  color     : var(--ab-text-muted);
  margin-top: 2px;
}

.a2a-protocol-badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 3px 10px;
  border-radius : 20px;
  font-size     : 10px;
  font-weight   : 900;
  background    : var(--ab-gradient);
  color         : #fff;
  letter-spacing: .5px;
  flex-shrink   : 0;
  box-shadow    : 0 2px 8px rgba(99,102,241,.30);
}

/* ── §33.3 — Tabs Navigation ─────────────────────────────────────────────── */
.a2a-tabs {
  display       : flex;
  gap           : 0;
  padding       : 0 20px;
  border-bottom : 1.5px solid var(--ab-border);
  flex-shrink   : 0;
  overflow-x    : auto;
  scrollbar-width: none;
}

.a2a-tabs::-webkit-scrollbar { display: none; }

.a2a-tab {
  display        : inline-flex;
  align-items    : center;
  gap            : 7px;
  padding        : 11px 18px;
  border         : none;
  border-bottom  : 2.5px solid transparent;
  background     : none;
  color          : var(--ab-text-muted);
  font-size      : 12px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : var(--ab-transition);
  white-space    : nowrap;
  font-family    : var(--mcp-font);
  flex-shrink    : 0;
  margin-bottom  : -1.5px; /* Align with border-bottom du parent */
}

.a2a-tab:hover {
  color     : var(--ab-text);
  background: rgba(99,102,241,.04);
}

.a2a-tab.active {
  border-bottom-color: var(--ab-primary);
  color              : var(--ab-primary);
}

.a2a-tab-count {
  font-size    : 10px;
  font-weight  : 800;
  padding      : 1px 6px;
  border-radius: 20px;
  background   : var(--ab-primary-light);
  color        : var(--ab-primary);
  min-width    : 18px;
  text-align   : center;
}

/* ── §33.4 — Shared Buttons ──────────────────────────────────────────────── */
.a2a-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 7px 14px;
  border-radius: var(--ab-radius-lg);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  border       : 1.5px solid transparent;
  transition   : var(--ab-transition);
  white-space  : nowrap;
  font-family  : var(--mcp-font);
  flex-shrink  : 0;
}

.a2a-btn:disabled { opacity: .5; cursor: not-allowed; }

.a2a-btn-primary {
  background: var(--ab-gradient);
  color     : #fff;
  border-color: var(--ab-primary);
  box-shadow: 0 2px 10px rgba(99,102,241,.25);
}

.a2a-btn-primary:hover:not(:disabled) {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}

.a2a-btn-outline {
  background  : var(--ab-surface-solid);
  color       : var(--ab-primary);
  border-color: rgba(99,102,241,.30);
}

.a2a-btn-outline:hover:not(:disabled) {
  background  : var(--ab-primary-light);
  border-color: var(--ab-primary);
}

.a2a-btn-ghost {
  background  : none;
  color       : var(--ab-text-muted);
  border-color: transparent;
}

.a2a-btn-ghost:hover:not(:disabled) {
  background  : var(--ab-bg-alt);
  color       : var(--ab-text);
  border-color: var(--ab-border);
}

.a2a-btn-danger {
  background  : var(--ab-error-light);
  color       : var(--ab-error);
  border-color: rgba(239,68,68,.2);
}

.a2a-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.15); }

/* Icon buttons */
.a2a-icon-btn {
  background   : none;
  border       : none;
  cursor       : pointer;
  padding      : 5px 7px;
  border-radius: 7px;
  font-size    : 12px;
  color        : var(--ab-text-muted);
  transition   : var(--ab-transition);
}

.a2a-icon-btn:hover       { background: var(--ab-bg-alt); color: var(--ab-primary); }
.a2a-icon-btn-delete:hover {
  background: var(--ab-error-light) !important;
  color     : var(--ab-error)       !important;
}

/* ── §33.5 — Loading / Empty States ─────────────────────────────────────── */
.a2a-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 40px 20px;
  color          : var(--ab-text-muted);
  font-size      : 12px;
}

.a2a-spinner {
  display         : inline-block;
  width           : 18px;
  height          : 18px;
  border          : 2px solid var(--ab-border-strong);
  border-top-color: var(--ab-primary);
  border-radius   : 50%;
  animation       : abSpin .7s linear infinite;
  flex-shrink     : 0;
}

.a2a-empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 48px 20px;
  text-align     : center;
  gap            : 10px;
}

.a2a-empty-calls { padding: 28px 20px; }

.a2a-empty-icon {
  font-size    : 40px;
  opacity      : .2;
  line-height  : 1;
  margin-bottom: 4px;
}

.a2a-empty-title {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ab-text-muted);
}

.a2a-empty-sub {
  font-size  : 12px;
  color      : var(--ab-text-dim);
  max-width  : 320px;
  line-height: 1.65;
}

/* ── §33.6 — Connections Tab ─────────────────────────────────────────────── */
.a2a-connections-tab {
  display       : flex;
  flex-direction: column;
  gap           : 18px;
  padding       : 20px 20px 0;
}

/* Section label + action */
.a2a-section-label {
  display    : flex;
  align-items: center;
  gap        : 7px;
  font-size  : 11px;
  font-weight: 800;
  color      : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.a2a-section-action {
  margin-left  : auto;
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : none;
  border       : none;
  cursor       : pointer;
  padding      : 3px 8px;
  border-radius: var(--ab-radius);
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.a2a-section-action:hover { background: var(--ab-bg-alt); color: var(--ab-text); }

/* Connection group labels */
.a2a-conn-group-label {
  display       : flex;
  align-items   : center;
  gap           : 6px;
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  padding       : 6px 0 8px;
  border-bottom : 1px solid var(--ab-border);
  margin-bottom : 4px;
}

/* Connections grid */
.a2a-connections-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
  gap                   : 12px;
}

/* ── §33.7 — Preset Cards ────────────────────────────────────────────────── */
.a2a-presets-section {
  background   : var(--ab-gradient-soft);
  border       : 1.5px solid rgba(99,102,241,.14);
  border-radius: var(--ab-radius-xl);
  padding      : 16px;
}

.a2a-presets-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(280px, 1fr));
  gap                   : 10px;
  margin-top            : 10px;
}

.a2a-preset-card {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 12px 14px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-lg);
  transition     : var(--ab-transition);
  box-shadow     : var(--ab-shadow-card);
}

.a2a-preset-card:hover {
  border-color: rgba(99,102,241,.30);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-1px);
}

.a2a-preset-icon {
  font-size  : 28px;
  line-height: 1;
  flex-shrink: 0;
}

.a2a-preset-body  { flex: 1; min-width: 0; }

.a2a-preset-name {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  flex-wrap    : wrap;
  font-size    : 13px;
  font-weight  : 800;
  color        : var(--ab-text);
  margin-bottom: 3px;
}

.a2a-preset-desc {
  font-size    : 11px;
  color        : var(--ab-text-muted);
  line-height  : 1.4;
  margin-bottom: 6px;
}

.a2a-preset-caps { display: flex; flex-wrap: wrap; gap: 4px; }

/* Capability pills */
.a2a-cap-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 3px;
  padding      : 2px 8px;
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 700;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  border       : 1px solid var(--ab-border);
  white-space  : nowrap;
}

.a2a-cap-more       { background: var(--ab-primary-light); color: var(--ab-primary); border-color: rgba(99,102,241,.2); }
.a2a-cap-discovered { background: rgba(16,185,129,.10); color: var(--ab-success); border-color: rgba(16,185,129,.2); }

/* Verified badge */
.a2a-verified-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 9px;
  font-weight  : 800;
  padding      : 2px 7px;
  border-radius: 20px;
  background   : rgba(16,185,129,.12);
  color        : var(--ab-success);
  border       : 1px solid rgba(16,185,129,.2);
  white-space  : nowrap;
}

/* ── §33.8 — Connection Cards ────────────────────────────────────────────── */
.a2a-conn-card {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  padding        : 16px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
  position       : relative;
  overflow       : hidden;
}

.a2a-conn-card:hover {
  border-color: rgba(99,102,241,.28);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-2px);
}

.a2a-conn-card-top {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 8px;
}

.a2a-conn-icon {
  font-size  : 28px;
  line-height: 1;
  flex-shrink: 0;
}

.a2a-conn-info  { flex: 1; min-width: 0; }
.a2a-conn-name  { font-size: 13px; font-weight: 800; color: var(--ab-text); margin-bottom: 4px; }
.a2a-conn-badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* Type badges */
.a2a-type-badge {
  display      : inline-flex;
  align-items  : center;
  padding      : 2px 8px;
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 800;
  text-transform: capitalize;
}

.a2a-type-internal { background: rgba(99,102,241,.12);  color: #6366f1; }
.a2a-type-team     { background: rgba(6,182,212,.12);   color: #06b6d4; }
.a2a-type-external { background: rgba(139,92,246,.12);  color: #8b5cf6; }

.a2a-expose-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 10px;
  font-weight  : 700;
  padding      : 2px 7px;
  border-radius: 20px;
  background   : rgba(245,158,11,.10);
  color        : var(--ab-warning);
  border       : 1px solid rgba(245,158,11,.20);
}

/* Connection health */
.a2a-conn-health {
  display    : flex;
  align-items: center;
  gap        : 6px;
  flex-shrink: 0;
}

.a2a-conn-status-label { font-size: 11px; font-weight: 700; color: var(--ab-text-muted); }

.a2a-conn-latency {
  font-size    : 10px;
  font-weight  : 700;
  padding      : 1px 6px;
  border-radius: 20px;
  background   : var(--ab-success-light);
  color        : var(--ab-success);
}

/* Endpoint row */
.a2a-conn-endpoint {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  font-size    : 11px;
  color        : var(--ab-text-muted);
  font-family  : 'JetBrains Mono', monospace;
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  padding      : 5px 10px;
  overflow     : hidden;
}

.a2a-conn-endpoint i { flex-shrink: 0; color: var(--ab-text-dim); font-size: 10px; }

.a2a-conn-endpoint span {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  flex         : 1;
}

.a2a-conn-desc {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.55;
  margin     : 0;
}

.a2a-conn-caps { display: flex; flex-wrap: wrap; gap: 4px; }

.a2a-conn-meta {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
  padding  : 8px 0 0;
  border-top: 1px solid var(--ab-border);
}

.a2a-conn-meta span {
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-dim);
  display    : flex;
  align-items: center;
  gap        : 4px;
}

.a2a-conn-actions {
  display   : flex;
  gap       : 5px;
  flex-wrap : wrap;
  margin-top: 4px;
}

.a2a-conn-action-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  padding      : 5px 10px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.a2a-conn-action-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.a2a-action-test:hover {
  border-color: var(--ab-success)       !important;
  color       : var(--ab-success)       !important;
  background  : var(--ab-success-light) !important;
}

.a2a-action-delete:hover {
  border-color: var(--ab-error)       !important;
  color       : var(--ab-error)       !important;
  background  : var(--ab-error-light) !important;
}

/* ── §33.9 — Health Dots ──────────────────────────────────────────────────── */
.a2a-health-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  display      : inline-block;
  flex-shrink  : 0;
}

.a2a-health-active {
  background: var(--ab-success);
  box-shadow: 0 0 6px rgba(16,185,129,.5);
  animation : abBadgePulse 2.5s infinite;
}

.a2a-health-inactive { background: var(--ab-text-dim); }
.a2a-health-error    { background: var(--ab-error); box-shadow: 0 0 6px rgba(239,68,68,.4); }
.a2a-health-pending  { background: var(--ab-warning); animation: abBadgePulse 1.5s infinite; }

/* ── §33.10 — Call Log Tab ───────────────────────────────────────────────── */
.a2a-calls-tab {
  display       : flex;
  flex-direction: column;
  gap           : 0;
}

.a2a-calls-toolbar {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 16px 20px 12px;
  flex-wrap    : wrap;
  flex-shrink  : 0;
  border-bottom: 1px solid var(--ab-border);
}

.a2a-calls-search-wrap {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  flex         : 1;
  min-width    : 160px;
  padding      : 8px 12px;
  background   : var(--ab-input-bg);
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  transition   : border-color .15s;
}

.a2a-calls-search-wrap:focus-within { border-color: var(--ab-primary); }
.a2a-calls-search-wrap i { color: var(--ab-text-muted); font-size: 12px; }

.a2a-calls-search {
  flex      : 1;
  border    : none;
  background: transparent;
  outline   : none;
  font-size : 12px;
  color     : var(--ab-text);
  font-family: var(--mcp-font);
}

.a2a-calls-search::placeholder { color: var(--ab-text-dim); }

.a2a-filter-select {
  padding      : 7px 10px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 11px;
  font-weight  : 600;
  cursor       : pointer;
  outline      : none;
  transition   : border-color .15s;
  font-family  : var(--mcp-font);
}

.a2a-filter-select:focus { border-color: var(--ab-primary); }
.a2a-calls-toolbar-actions { display: flex; align-items: center; gap: 5px; }

/* ── §33.11 — Call Log Table ─────────────────────────────────────────────── */
.a2a-calls-table-wrap { overflow-x: auto; }

.a2a-calls-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 12px;
}

.a2a-calls-table thead th {
  background    : var(--ab-bg-alt);
  padding       : 10px 14px;
  text-align    : left;
  font-size     : 10px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom : 1.5px solid var(--ab-border);
  white-space   : nowrap;
  user-select   : none;
}

.a2a-call-row {
  border-bottom: 1px solid var(--ab-border);
  transition   : background .12s;
}

.a2a-call-row:last-child { border-bottom: none; }
.a2a-call-row:hover      { background: var(--ab-primary-light); }

.a2a-calls-table tbody td {
  padding       : 10px 14px;
  color         : var(--ab-text);
  vertical-align: middle;
}

.a2a-cell-duration,
.a2a-cell-date {
  font-size : 11px;
  color     : var(--ab-text-muted);
  white-space: nowrap;
}

.a2a-call-agent-name { font-size: 12px; font-weight: 700; color: var(--ab-text); }

.a2a-call-from-label {
  font-size : 10px;
  color     : var(--ab-text-dim);
  margin-top: 2px;
}

.a2a-call-task-preview {
  display      : block;
  font-size    : 11px;
  color        : var(--ab-text-muted);
  max-width    : 240px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  cursor       : default;
}

.a2a-call-error-hint {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  color      : var(--ab-error);
  margin-top : 3px;
  overflow   : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2a-call-row-actions { display: flex; gap: 4px; justify-content: flex-end; }

.a2a-calls-footer {
  padding    : 10px 16px;
  font-size  : 11px;
  font-weight: 600;
  color      : var(--ab-text-muted);
  border-top : 1px solid var(--ab-border);
  background : var(--ab-bg-alt);
}

/* ── §33.12 — Status & Mode Badges ──────────────────────────────────────── */
.a2a-call-status-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 3px 9px;
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 700;
  white-space  : nowrap;
}

.a2a-status-completed { background: rgba(16,185,129,.12); color: var(--ab-success); }
.a2a-status-failed    { background: rgba(239,68,68,.12);  color: var(--ab-error);   }
.a2a-status-working   { background: rgba(99,102,241,.12); color: var(--ab-primary); }
.a2a-status-pending   { background: rgba(245,158,11,.12); color: var(--ab-warning); }
.a2a-status-canceled  { background: rgba(100,116,139,.12); color: var(--ab-text-muted); }
.a2a-status-unknown   { background: rgba(100,116,139,.08); color: var(--ab-text-dim); }

.a2a-mode-badge {
  display      : inline-flex;
  align-items  : center;
  padding      : 3px 9px;
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 700;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  border       : 1px solid var(--ab-border);
  white-space  : nowrap;
}

/* Bar-fill color overrides for status breakdown chart */
.a2a-bar-completed { background: linear-gradient(90deg, #10b981, #059669); }
.a2a-bar-failed    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.a2a-bar-working   { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.a2a-bar-submitted { background: linear-gradient(90deg, #f59e0b, #d97706); }

/* ── §33.13 — Stats / Analytics Tab ─────────────────────────────────────── */
.a2a-stats-tab {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
  padding       : 20px 20px 0;
}

.a2a-stats-kpi-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(180px, 1fr));
  gap                   : 12px;
}

.a2a-stats-kpi {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 16px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
}

.a2a-stats-kpi:hover {
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-1px);
  border-color: rgba(99,102,241,.25);
}

.a2a-stats-kpi-icon {
  width          : 42px;
  height         : 42px;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 17px;
  flex-shrink    : 0;
}

.a2a-stats-kpi-body { flex: 1; min-width: 0; }

.a2a-stats-kpi-val {
  font-size               : 22px;
  font-weight             : 900;
  background              : var(--ab-gradient);
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
  line-height             : 1.1;
}

.a2a-stats-kpi-label {
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom : 3px;
}

.a2a-stats-kpi-sub {
  font-size : 11px;
  color     : var(--ab-text-dim);
  margin-top: 3px;
}

/* Charts row */
.a2a-stats-row {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 14px;
}

.a2a-stats-card {
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  padding        : 16px 18px;
  box-shadow     : var(--ab-shadow-card);
}

.a2a-stats-card-title {
  display       : flex;
  align-items   : center;
  gap           : 7px;
  font-size     : 12px;
  font-weight   : 800;
  color         : var(--ab-text);
  margin-bottom : 14px;
  padding-bottom: 10px;
  border-bottom : 1px solid var(--ab-border);
}

.a2a-stats-card-title i { color: var(--ab-primary); }

/* Bar charts */
.a2a-bar-list { display: flex; flex-direction: column; gap: 9px; }

.a2a-bar-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.a2a-bar-label {
  font-size    : 11px;
  font-weight  : 600;
  color        : var(--ab-text-muted);
  min-width    : 80px;
  max-width    : 120px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  flex-shrink  : 0;
}

.a2a-bar-track {
  flex         : 1;
  height       : 6px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
}

.a2a-bar-fill {
  height       : 100%;
  background   : var(--ab-gradient);
  border-radius: 99px;
  transition   : width .45s cubic-bezier(.4,0,.2,1);
}

.a2a-bar-val {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  min-width  : 70px;
  text-align : right;
  white-space: nowrap;
}

.a2a-stats-empty {
  font-size  : 12px;
  color      : var(--ab-text-dim);
  font-style : italic;
  text-align : center;
  padding    : 16px;
}

/* Ranking list */
.a2a-ranking-list { display: flex; flex-direction: column; gap: 7px; }

.a2a-rank-row {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 7px 10px;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  transition   : var(--ab-transition);
}

.a2a-rank-row:hover {
  border-color: rgba(99,102,241,.25);
  background  : var(--ab-primary-light);
}

.a2a-rank-num {
  font-size  : 11px;
  font-weight: 900;
  color      : var(--ab-primary);
  width      : 20px;
  text-align : center;
  flex-shrink: 0;
}

.a2a-rank-name  { flex: 1; font-size: 12px; font-weight: 700; color: var(--ab-text); }
.a2a-rank-count { font-size: 11px; font-weight: 800; color: var(--ab-primary); flex-shrink: 0; }

/* ── §33.14 — Wizard Modal ───────────────────────────────────────────────── */
.a2a-wizard-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,.50);
  z-index        : 2000;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
  backdrop-filter: blur(6px);
}

/* JS sets display:flex via style, override needed */
.a2a-wizard-overlay[style*="flex"] {
  display  : flex !important;
  animation: abFadeIn .2s ease;
}

.a2a-wizard-modal {
  background    : var(--ab-surface-solid);
  border        : 1.5px solid var(--ab-border-strong);
  border-radius : var(--ab-radius-2xl);
  box-shadow    : var(--ab-shadow-xl);
  width         : 100%;
  max-width     : 560px;
  max-height    : 90vh;
  overflow-y    : auto;
  display       : flex;
  flex-direction: column;
  animation     : abFadeIn .2s ease;
}

/* Wizard header */
.a2a-wizard-header {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 20px 22px;
  border-bottom: 1px solid var(--ab-border);
  flex-shrink  : 0;
  background   : var(--ab-gradient-soft);
}

.a2a-wizard-header-left {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex       : 1;
}

.a2a-wizard-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 12px;
  background     : var(--ab-gradient);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
  box-shadow     : 0 4px 12px rgba(99,102,241,.30);
}

.a2a-wizard-title { font-size: 15px; font-weight: 800; color: var(--ab-text); }
.a2a-wizard-sub   { font-size: 11px; color: var(--ab-text-muted); margin-top: 2px; }

.a2a-wizard-close-btn {
  width          : 30px;
  height         : 30px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 9px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.a2a-wizard-close-btn:hover { background: var(--ab-error-light); color: var(--ab-error); }

/* Step indicators */
.a2a-wizard-steps {
  display    : flex;
  align-items: center;
  gap        : 0;
  padding    : 20px 22px 0;
}

.a2a-wizard-step {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 12px;
  font-weight: 700;
  color      : var(--ab-text-dim);
}

.a2a-wizard-step.a2a-step-active { color: var(--ab-primary); }
.a2a-wizard-step.a2a-step-done   { color: var(--ab-success); }

.a2a-step-num {
  width          : 26px;
  height         : 26px;
  border-radius  : 50%;
  background     : var(--ab-border);
  color          : var(--ab-text-muted);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  font-weight    : 900;
  flex-shrink    : 0;
  transition     : var(--ab-transition);
}

.a2a-step-active .a2a-step-num { background: var(--ab-primary); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.35); }
.a2a-step-done   .a2a-step-num { background: var(--ab-success); color: #fff; }
.a2a-step-label  { font-size: 11px; }

.a2a-wizard-step-line {
  flex         : 1;
  height       : 2px;
  background   : var(--ab-border);
  margin       : 0 8px;
  border-radius: 99px;
  transition   : background .3s;
}

.a2a-line-done { background: var(--ab-success); }

/* Wizard body */
.a2a-wizard-body {
  display       : flex;
  flex-direction: column;
  gap           : 14px;
  padding       : 20px 22px;
  flex          : 1;
}

/* Form elements */
.a2a-form-row   { display: flex; flex-direction: column; gap: 5px; }

.a2a-form-label {
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.a2a-required::after { content: ' *'; color: var(--ab-error); }

.a2a-form-input {
  padding      : 9px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 13px;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s, box-shadow .15s;
  width        : 100%;
  box-sizing   : border-box;
}

.a2a-form-input:focus {
  border-color: var(--ab-primary);
  box-shadow  : 0 0 0 3px var(--ab-input-focus);
}

.a2a-form-input::placeholder { color: var(--ab-text-dim); }

.a2a-form-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

.a2a-mono-input { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.a2a-icon-input { font-size: 20px; text-align: center; max-width: 80px; }

.a2a-form-hint {
  font-size  : 11px;
  color      : var(--ab-text-dim);
  line-height: 1.5;
}

.a2a-form-hint code {
  background   : rgba(99,102,241,.08);
  border-radius: 4px;
  padding      : 1px 5px;
  font-family  : 'JetBrains Mono', monospace;
  font-size    : 11px;
  color        : var(--ab-primary);
}

.a2a-form-hint-inline { font-size: 11px; color: var(--ab-text-dim); font-weight: 500; }

.a2a-form-two-col {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 10px;
}

/* Endpoint status indicator */
.a2a-endpoint-input-row { display: flex; flex-direction: column; gap: 5px; }
.a2a-endpoint-status    { font-size: 11px; font-weight: 700; min-height: 18px; }

.a2a-ping-ok      { color: var(--ab-success); }
.a2a-ping-error   { color: var(--ab-error);   }
.a2a-ping-testing { color: var(--ab-warning); }

/* Type selector */
.a2a-type-selector { display: flex; gap: 6px; flex-wrap: wrap; }

.a2a-type-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 7px 14px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.a2a-type-btn:hover  { border-color: var(--ab-primary); color: var(--ab-primary); background: var(--ab-primary-light); }
.a2a-type-btn.active { border-color: var(--ab-primary); background: var(--ab-primary); color: #fff; }

/* Toggle switch */
.a2a-toggle-label {
  display    : flex;
  align-items: center;
  gap        : 10px;
  cursor     : pointer;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ab-text);
}

.a2a-toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.a2a-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.a2a-toggle-track {
  display      : block;
  width        : 40px;
  height       : 22px;
  background   : var(--ab-border-strong);
  border-radius: 11px;
  transition   : background .2s;
  position     : relative;
}

.a2a-toggle-track::after {
  content      : '';
  position     : absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background   : #fff;
  border-radius: 50%;
  transition   : transform .2s;
  box-shadow   : 0 1px 4px rgba(0,0,0,.2);
}

.a2a-toggle-switch input:checked + .a2a-toggle-track { background: var(--ab-primary); }
.a2a-toggle-switch input:checked + .a2a-toggle-track::after { transform: translateX(18px); }

/* Wizard footer */
.a2a-wizard-footer {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 8px;
  padding        : 14px 22px;
  border-top     : 1px solid var(--ab-border);
  flex-shrink    : 0;
  background     : var(--ab-bg-alt);
}

/* Step 2 — Summary */
.a2a-wizard-summary {
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-xl);
  overflow     : hidden;
}

.a2a-summary-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 10px;
  padding        : 10px 14px;
  border-bottom  : 1px solid var(--ab-border);
}

.a2a-summary-row:last-child { border-bottom: none; }
.a2a-summary-label { font-size: 12px; font-weight: 700; color: var(--ab-text-muted); flex-shrink: 0; }
.a2a-summary-val   { font-size: 12px; font-weight: 600; color: var(--ab-text); text-align: right; }
.a2a-mono          { font-family: 'JetBrains Mono', monospace; font-size: 11px; word-break: break-all; }

/* Discovery banners */
.a2a-disc-banner {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 12px 14px;
  border-radius: var(--ab-radius-lg);
  border       : 1.5px solid;
  font-size    : 12px;
  line-height  : 1.5;
}

.a2a-disc-banner i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.a2a-disc-banner > div { display: flex; flex-direction: column; gap: 2px; }
.a2a-disc-banner strong { font-size: 12px; font-weight: 800; }
.a2a-disc-banner span   { font-size: 11px; opacity: .8; }

.a2a-disc-ok      { background: var(--ab-success-light); border-color: rgba(16,185,129,.30); color: var(--ab-success); }
.a2a-disc-error   { background: var(--ab-error-light);   border-color: rgba(239,68,68,.30);  color: var(--ab-error);   }
.a2a-disc-warning { background: var(--ab-warning-light); border-color: rgba(245,158,11,.30); color: var(--ab-warning); }

/* Discovered agent card */
.a2a-disc-agent-card {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 12px 14px;
  background   : var(--ab-gradient-soft);
  border       : 1.5px solid rgba(99,102,241,.15);
  border-radius: var(--ab-radius-lg);
}

.a2a-disc-agent-icon    { font-size: 28px; flex-shrink: 0; }
.a2a-disc-agent-info    { flex: 1; }
.a2a-disc-agent-name    { font-size: 14px; font-weight: 800; color: var(--ab-text); }
.a2a-disc-agent-desc    { font-size: 11px; color: var(--ab-text-muted); margin-top: 3px; }
.a2a-disc-agent-provider{ font-size: 11px; color: var(--ab-text-dim);   margin-top: 2px; }

.a2a-caps-list { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── §33.15 — Result Modal ────────────────────────────────────────────────── */
.a2a-result-modal-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,.55);
  z-index        : 3000;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
  backdrop-filter: blur(6px);
  animation      : abFadeIn .2s ease;
}

.a2a-result-modal-inner {
  background    : var(--ab-surface-solid);
  border        : 1.5px solid var(--ab-border-strong);
  border-radius : var(--ab-radius-2xl);
  box-shadow    : var(--ab-shadow-xl);
  width         : 100%;
  max-width     : 680px;
  max-height    : 85vh;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  animation     : abFadeIn .2s ease;
}

.a2a-result-modal-header {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 12px;
  padding        : 18px 22px;
  border-bottom  : 1px solid var(--ab-border);
  flex-shrink    : 0;
  background     : var(--ab-gradient-soft);
}

.a2a-result-modal-title { font-size: 14px; font-weight: 800; color: var(--ab-text); }
.a2a-result-modal-meta  { font-size: 11px; color: var(--ab-text-muted); margin-top: 3px; }

.a2a-result-modal-task {
  padding      : 12px 22px;
  font-size    : 12px;
  color        : var(--ab-text-muted);
  background   : var(--ab-bg-alt);
  border-bottom: 1px solid var(--ab-border);
  flex-shrink  : 0;
  line-height  : 1.55;
}

.a2a-result-modal-result {
  flex      : 1;
  overflow-y: auto;
  padding   : 18px 22px;
  font-size : 13px;
  line-height: 1.7;
  color     : var(--ab-text);
}

/* Markdown in result */
.a2a-result-modal-result h1,
.a2a-result-modal-result h2,
.a2a-result-modal-result h3 { font-size: 14px; font-weight: 800; margin: 12px 0 6px; }
.a2a-result-modal-result p  { margin: 6px 0; }
.a2a-result-modal-result ul,
.a2a-result-modal-result ol { padding-left: 18px; margin: 6px 0; }
.a2a-result-modal-result li { margin: 3px 0; }
.a2a-result-modal-result code {
  background   : rgba(99,102,241,.08);
  border-radius: 4px;
  padding      : 1px 5px;
  font-family  : 'JetBrains Mono', monospace;
  font-size    : 12px;
  color        : var(--ab-primary);
}
.a2a-result-modal-result pre {
  background   : var(--ab-bg-alt);
  border-radius: 8px;
  padding      : 12px;
  overflow-x   : auto;
  margin       : 8px 0;
  border       : 1px solid var(--ab-border);
}
.a2a-result-modal-result pre code { background: none; padding: 0; }
.a2a-result-modal-result table    { border-collapse: collapse; width: 100%; font-size: 12px; margin: 8px 0; }
.a2a-result-modal-result th { background: var(--ab-bg-alt); padding: 6px 10px; font-weight: 800; border: 1px solid var(--ab-border); }
.a2a-result-modal-result td { padding: 6px 10px; border: 1px solid var(--ab-border); }

.a2a-result-error {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 12px 14px;
  background   : var(--ab-error-light);
  border       : 1px solid rgba(239,68,68,.2);
  border-radius: var(--ab-radius-lg);
  color        : var(--ab-error);
  font-size    : 12px;
  line-height  : 1.6;
}

.a2a-result-error i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.a2a-result-modal-footer {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 8px;
  padding        : 12px 22px;
  border-top     : 1px solid var(--ab-border);
  background     : var(--ab-bg-alt);
  flex-shrink    : 0;
}

/* ── §33.16 — A2A Call Log Panel (floating dans view-chat) ──────────────── */
.a2a-call-panel {
  flex-shrink    : 0;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border-bottom  : 1.5px solid rgba(99,102,241,.15);
  border-top     : 1.5px solid rgba(99,102,241,.10);
  transition     : var(--ab-transition);
  animation      : abFadeIn .2s ease;
}

.a2a-call-panel-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 9px 16px;
  background     : linear-gradient(135deg,
    rgba(99,102,241,.07),
    rgba(118,75,162,.04)
  );
}

.a2a-call-panel-title {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 12px;
  font-weight: 800;
  color      : var(--ab-primary);
}

.a2a-call-panel-title i { font-size: 13px; }

.a2a-call-panel-count {
  font-size    : 10px;
  font-weight  : 900;
  padding      : 1px 7px;
  border-radius: 20px;
  background   : var(--ab-primary);
  color        : #fff;
  min-width    : 18px;
  text-align   : center;
}

.a2a-call-panel-close {
  background   : none;
  border       : none;
  cursor       : pointer;
  color        : var(--ab-text-muted);
  font-size    : 11px;
  padding      : 4px 7px;
  border-radius: 7px;
  transition   : var(--ab-transition);
}

.a2a-call-panel-close:hover { background: var(--ab-bg-alt); color: var(--ab-text); }

.a2a-call-panel-entries {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  padding       : 8px 14px 10px;
  max-height    : 200px;
  overflow-y    : auto;
}

/* Panel entries */
.a2a-panel-entry {
  padding      : 10px 12px;
  border-radius: var(--ab-radius-lg);
  border       : 1px solid var(--ab-border);
  background   : var(--ab-surface-solid);
  transition   : var(--ab-transition);
  animation    : abFadeIn .18s ease;
}

.a2a-entry-working   { border-color: rgba(99,102,241,.25); background: rgba(99,102,241,.03); }
.a2a-entry-completed { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.03); }
.a2a-entry-failed    { border-color: rgba(239,68,68,.25);  background: rgba(239,68,68,.03);  }
.a2a-entry-collapsed { opacity: .6; transform: scale(.98); }

.a2a-panel-entry-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 8px;
  margin-bottom  : 5px;
}

.a2a-panel-entry-agent {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex       : 1;
  min-width  : 0;
}

/* Status icons inside panel */
.a2a-entry-spinner {
  display         : inline-block;
  width           : 14px;
  height          : 14px;
  border          : 2px solid rgba(99,102,241,.2);
  border-top-color: var(--ab-primary);
  border-radius   : 50%;
  animation       : abSpin .6s linear infinite;
  flex-shrink     : 0;
}

.a2a-entry-icon-ok,
.a2a-entry-icon-err {
  width          : 14px;
  height         : 14px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 9px;
  flex-shrink    : 0;
}

.a2a-entry-icon-ok  { background: var(--ab-success); color: #fff; }
.a2a-entry-icon-err { background: var(--ab-error);   color: #fff; }

.a2a-panel-entry-name {
  font-size    : 12px;
  font-weight  : 800;
  color        : var(--ab-text);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.a2a-panel-entry-mode {
  font-size  : 10px;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
}

.a2a-panel-entry-meta {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
}

.a2a-entry-elapsed { color: var(--ab-primary); }

.a2a-panel-entry-task {
  font-size    : 11px;
  color        : var(--ab-text-muted);
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  margin-bottom: 4px;
}

/* Progress bar */
.a2a-panel-entry-progress { margin-top: 5px; }

.a2a-panel-progress-bar {
  height       : 3px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
  margin-bottom: 4px;
}

.a2a-panel-progress-fill {
  height       : 100%;
  background   : var(--ab-gradient);
  border-radius: 99px;
  transition   : width .4s ease;
  min-width    : 5%;
}

.a2a-panel-progress-label {
  font-size  : 10px;
  color      : var(--ab-text-muted);
  line-height: 1.3;
}

/* Result / Error inline */
.a2a-panel-entry-result {
  display    : flex;
  align-items: flex-start;
  gap        : 5px;
  font-size  : 11px;
  color      : var(--ab-success);
  margin-top : 4px;
  overflow   : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2a-panel-entry-error {
  display    : flex;
  align-items: flex-start;
  gap        : 5px;
  font-size  : 11px;
  color      : var(--ab-error);
  margin-top : 4px;
  overflow   : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── §33.17 — Dark Mode ───────────────────────────────────────────────────── */
body.dark-mode .a2a-conn-card,
body.dark-mode .a2a-preset-card,
body.dark-mode .a2a-stats-kpi,
body.dark-mode .a2a-stats-card {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .a2a-conn-card:hover,
body.dark-mode .a2a-preset-card:hover,
body.dark-mode .a2a-stats-kpi:hover { border-color: rgba(99,102,241,.30); }

body.dark-mode .a2a-wizard-modal,
body.dark-mode .a2a-result-modal-inner  { background: #1e293b; }
body.dark-mode .a2a-wizard-footer,
body.dark-mode .a2a-result-modal-footer { background: rgba(255,255,255,.03); }

body.dark-mode .a2a-form-input {
  background  : rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color       : #e2e8f0;
}

body.dark-mode .a2a-form-input::placeholder { color: rgba(255,255,255,.2); }

body.dark-mode .a2a-filter-select {
  background  : rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color       : #e2e8f0;
}

body.dark-mode .a2a-calls-table thead th { background: rgba(255,255,255,.03); }
body.dark-mode .a2a-call-row:hover       { background: rgba(99,102,241,.10); }
body.dark-mode .a2a-calls-footer         { background: rgba(255,255,255,.03); }
body.dark-mode .a2a-conn-endpoint        { background: rgba(255,255,255,.04); }
body.dark-mode .a2a-type-btn:not(.active){ background: rgba(255,255,255,.05); }
body.dark-mode .a2a-wizard-summary       { background: rgba(255,255,255,.04); }
body.dark-mode .a2a-summary-row          { border-color: rgba(255,255,255,.06); }

body.dark-mode .a2a-call-panel {
  background  : rgba(10,15,30,.88);
  border-color: rgba(99,102,241,.15);
}

body.dark-mode .a2a-panel-entry         { background: rgba(17,24,39,.8); border-color: rgba(255,255,255,.07); }
body.dark-mode .a2a-entry-working       { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.20); }
body.dark-mode .a2a-entry-completed     { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.20); }
body.dark-mode .a2a-entry-failed        { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.20);  }

body.dark-mode .a2a-result-modal-task   { background: rgba(255,255,255,.03); }
body.dark-mode .a2a-result-modal-result pre { background: rgba(0,0,0,.3); }

body.dark-mode .a2a-rank-row            { background: rgba(255,255,255,.04); }
body.dark-mode .a2a-rank-row:hover      { background: rgba(99,102,241,.10); }
body.dark-mode .a2a-presets-section     { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.12); }
body.dark-mode .a2a-disc-agent-card     { background: rgba(99,102,241,.08); }
body.dark-mode .a2a-btn-outline         { background: rgba(255,255,255,.04); }
body.dark-mode .a2a-btn-ghost:hover     { background: rgba(255,255,255,.06); }
body.dark-mode .a2a-bar-track           { background: rgba(255,255,255,.1); }

/* ── §33.18 — Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .a2a-connections-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .a2a-presets-grid     { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .a2a-stats-kpi-grid   { grid-template-columns: repeat(2, 1fr); }
  .a2a-stats-row        { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .a2a-registry-header  { padding: 0 14px 16px; }
  .a2a-section-divider  { padding: 20px 14px 16px; }
  .a2a-connections-tab,
  .a2a-stats-tab        { padding: 14px 14px 0; gap: 12px; }
  .a2a-calls-toolbar    { padding: 12px 14px 10px; }
  .a2a-tabs             { padding: 0 14px; }
  .a2a-tab              { padding: 9px 12px; font-size: 11px; }
  .a2a-connections-grid { grid-template-columns: 1fr; }
  .a2a-presets-grid     { grid-template-columns: 1fr; }
  .a2a-stats-kpi-grid   { grid-template-columns: 1fr 1fr; }
  .a2a-stats-row        { grid-template-columns: 1fr; }
  .a2a-form-two-col     { grid-template-columns: 1fr; }
  .a2a-type-selector    { flex-direction: column; }
  .a2a-type-btn         { justify-content: center; }
  .a2a-wizard-modal     { max-width: 100%; border-radius: var(--ab-radius-xl); }
  .a2a-wizard-body      { padding: 16px; }
  .a2a-wizard-footer    { padding: 12px 16px; }
  .a2a-result-modal-inner { max-width: 100%; border-radius: var(--ab-radius-xl); }
  .a2a-result-modal-header,
  .a2a-result-modal-result { padding: 14px 16px; }
  .a2a-call-panel-entries  { max-height: 150px; }
  .a2a-registry-header-right { width: 100%; justify-content: flex-end; }
  .a2a-calls-search-wrap { min-width: 120px; }
}

@media (max-width: 480px) {
  .a2a-stats-kpi-grid   { grid-template-columns: 1fr; }
  .a2a-stats-kpi-val    { font-size: 18px; }
  .a2a-registry-header  { flex-direction: column; align-items: flex-start; }
  .a2a-registry-header-right { justify-content: flex-start; }
  .a2a-preset-card      { flex-direction: column; align-items: flex-start; }
  .a2a-calls-toolbar-actions .a2a-btn:not(:first-child) { display: none; }
  .a2a-call-panel-entries { max-height: 120px; }
}

/* ── §33.19 — Wizard Endpoint Guidance ─────────────────────────────────── */

/* Quick-fill bar */
.a2a-endpoint-quickfill {
  display    : flex;
  align-items: center;
  gap        : 6px;
  flex-wrap  : wrap;
  margin-bottom: 8px;
}

.a2a-endpoint-quickfill-label {
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  display    : flex;
  align-items: center;
  gap        : 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.a2a-endpoint-quick-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 4px 11px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  white-space  : nowrap;
}

.a2a-endpoint-quick-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.a2a-endpoint-quick-btn-internal:hover {
  border-color: #10b981;
  color       : #10b981;
  background  : rgba(16,185,129,.1);
}

/* Help accordion */
.a2a-endpoint-help {
  margin-top   : 6px;
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  overflow     : hidden;
}

.a2a-endpoint-help-summary {
  display      : flex;
  align-items  : center;
  gap          : 7px;
  padding      : 9px 14px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-primary);
  cursor       : pointer;
  background   : var(--ab-primary-light);
  user-select  : none;
  list-style   : none;
}

.a2a-endpoint-help-summary::-webkit-details-marker { display: none; }

.a2a-endpoint-help-summary i { font-size: 13px; }

.a2a-endpoint-help[open] .a2a-endpoint-help-summary {
  border-bottom: 1px solid rgba(99,102,241,.15);
}

.a2a-endpoint-help-body {
  padding       : 14px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  background    : var(--ab-bg-alt);
}

.a2a-endpoint-help-intro {
  font-size  : 12px;
  color      : var(--ab-text-muted);
  line-height: 1.55;
  margin     : 0;
}

/* Examples list */
.a2a-endpoint-example-list {
  display       : flex;
  flex-direction: column;
  gap           : 7px;
}

.a2a-endpoint-example {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  padding       : 10px 12px;
  border        : 1px solid var(--ab-border);
  border-radius : var(--ab-radius-lg);
  background    : var(--ab-surface-solid);
}

.a2a-endpoint-example-header {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
}

.a2a-endpoint-example-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  padding      : 2px 9px;
  border-radius: 20px;
  font-size    : 10px;
  font-weight  : 800;
  flex-shrink  : 0;
}

.a2a-eex-internal { background: var(--ab-primary-light); color: var(--ab-primary); }
.a2a-eex-external { background: rgba(139,92,246,.12);    color: #8b5cf6; }
.a2a-eex-test     { background: rgba(16,185,129,.12);    color: var(--ab-success); }

.a2a-endpoint-example-desc {
  font-size : 11px;
  color     : var(--ab-text-muted);
  flex      : 1;
}

.a2a-endpoint-example-code {
  display      : block;
  font-family  : 'JetBrains Mono', monospace;
  font-size    : 11px;
  color        : var(--ab-primary);
  background   : rgba(99,102,241,.06);
  padding      : 5px 10px;
  border-radius: 6px;
  border       : 1px solid rgba(99,102,241,.12);
  word-break   : break-all;
  cursor       : pointer;
  transition   : var(--ab-transition);
}

.a2a-endpoint-example-code:hover {
  background: var(--ab-primary-light);
}

/* Tip at the bottom of the help box */
.a2a-endpoint-help-tip {
  display      : flex;
  align-items  : flex-start;
  gap          : 8px;
  padding      : 10px 12px;
  background   : rgba(245,158,11,.07);
  border       : 1px solid rgba(245,158,11,.2);
  border-radius: var(--ab-radius-lg);
  font-size    : 11px;
  color        : var(--ab-text-muted);
  line-height  : 1.55;
}

.a2a-endpoint-help-tip i { color: var(--ab-warning); margin-top: 1px; flex-shrink: 0; }
.a2a-endpoint-help-tip strong { color: var(--ab-text); }
.a2a-endpoint-help-tip em { color: var(--ab-primary); font-style: normal; font-weight: 700; }

/* Internal agent picker modal */
.a2a-agent-picker-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(0,0,0,.45);
  z-index        : 4000;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
  backdrop-filter: blur(4px);
  animation      : abFadeIn .15s ease;
}

.a2a-agent-picker-inner {
  background    : var(--ab-surface-solid);
  border        : 1.5px solid var(--ab-border-strong);
  border-radius : var(--ab-radius-xl);
  box-shadow    : var(--ab-shadow-xl);
  width         : 100%;
  max-width     : 400px;
  max-height    : 70vh;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  animation     : abFadeIn .15s ease;
}

.a2a-agent-picker-header {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 14px 18px;
  border-bottom: 1px solid var(--ab-border);
  font-size    : 13px;
  font-weight  : 800;
  color        : var(--ab-text);
  background   : var(--ab-gradient-soft);
  flex-shrink  : 0;
}

.a2a-agent-picker-header i { color: var(--ab-primary); }

.a2a-agent-picker-list {
  overflow-y    : auto;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  padding       : 10px;
}

.a2a-agent-picker-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 10px 12px;
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  cursor       : pointer;
  transition   : var(--ab-transition);
  text-align   : left;
  font-family  : var(--mcp-font);
  width        : 100%;
}

.a2a-agent-picker-item:hover {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
}

.a2a-agent-picker-icon { font-size: 20px; flex-shrink: 0; }

.a2a-agent-picker-name {
  font-size  : 13px;
  font-weight: 700;
  color      : var(--ab-text);
  flex       : 1;
}

.a2a-agent-picker-code {
  font-size  : 10px;
  font-family: 'JetBrains Mono', monospace;
  color      : var(--ab-text-dim);
  flex-shrink: 0;
}

/* Dark mode pour les nouvelles classes */
body.dark-mode .a2a-endpoint-help     { background: rgba(17,24,39,.5); border-color: rgba(255,255,255,.07); }
body.dark-mode .a2a-endpoint-help-body { background: rgba(255,255,255,.03); }
body.dark-mode .a2a-endpoint-example  { background: rgba(17,24,39,.8); border-color: rgba(255,255,255,.07); }
body.dark-mode .a2a-endpoint-quick-btn { background: rgba(255,255,255,.05); }
body.dark-mode .a2a-agent-picker-inner { background: #1e293b; }
body.dark-mode .a2a-agent-picker-item  { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
body.dark-mode .a2a-agent-picker-item:hover { background: rgba(99,102,241,.12); }
body.dark-mode .a2a-endpoint-example-code { background: rgba(99,102,241,.08); }
body.dark-mode .a2a-endpoint-help-tip { background: rgba(245,158,11,.06); }

/* Responsive */
@media (max-width: 480px) {
  .a2a-endpoint-quickfill  { gap: 4px; }
  .a2a-endpoint-quick-btn  { font-size: 10px; padding: 3px 9px; }
  .a2a-agent-picker-inner  { max-width: 100%; }
  .a2a-endpoint-help-body  { padding: 10px; }
}

/* ─────────────────────────────────────────────
   END — §33.19 WIZARD ENDPOINT GUIDANCE
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   §31 — AGENT DOCGEN (agent-docgen.js)
   Prefix  : dg- (Document Generation)
   Covers  : Builder Panel · View Layout · Library · Wizard ·
             Preview · Export Bar · Inline Chat Button · Dark Mode
═══════════════════════════════════════════════════════════════ */

/* ── §31.0 — View Root ────────────────────────────────────── */
#view-docgen {
  overflow  : hidden !important;
  display   : flex   !important;
  flex-direction: column !important;
}

#docgen-view-content {
  flex      : 1;
  min-height: 0;
  display   : flex;
  flex-direction: column;
}

/* ── §31.1 — Main Layout ──────────────────────────────────── */
.dg-view {
  display   : flex;
  flex      : 1;
  min-height: 0;
  overflow  : hidden;
  gap       : 0;
}

/* ── §31.2 — Library Panel (left column) ─────────────────── */
.dg-library-panel {
  width         : 280px;
  min-width     : 280px;
  border-right  : 1.5px solid var(--ab-border);
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  background    : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
}

.dg-library-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 16px;
  border-bottom  : 1px solid var(--ab-border);
  flex-shrink    : 0;
  background     : var(--ab-gradient-header);
}

.dg-library-title {
  display    : flex;
  align-items: center;
  gap        : 7px;
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
}

.dg-library-title i { color: var(--ab-primary); }

.dg-new-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 6px 12px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 8px rgba(99,102,241,.30);
}

.dg-new-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Library filter tabs */
.dg-lib-tabs {
  display         : flex;
  gap             : 0;
  border-bottom   : 1px solid var(--ab-border);
  overflow-x      : auto;
  flex-shrink     : 0;
  scrollbar-width : none;
}

.dg-lib-tabs::-webkit-scrollbar { display: none; }

.dg-lib-tab {
  padding         : 7px 12px;
  border          : none;
  border-bottom   : 2px solid transparent;
  background      : none;
  color           : var(--ab-text-muted);
  font-size       : 10px;
  font-weight     : 700;
  cursor          : pointer;
  transition      : var(--ab-transition);
  white-space     : nowrap;
  font-family     : var(--mcp-font);
}

.dg-lib-tab:hover { color: var(--ab-primary); }

.dg-lib-tab.active {
  color        : var(--ab-primary);
  border-bottom-color: var(--ab-primary);
  background   : var(--ab-primary-light);
}

/* Library document list */
.dg-lib-list {
  flex          : 1;
  overflow-y    : auto;
  padding       : 8px 8px 16px;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}

.dg-lib-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 10px 10px;
  border-radius: var(--ab-radius-lg);
  cursor       : pointer;
  transition   : var(--ab-transition);
  border       : 1.5px solid transparent;
  position     : relative;
}

.dg-lib-item:hover {
  background  : var(--ab-primary-light);
  border-color: rgba(99,102,241,.20);
}

.dg-lib-item.active {
  background  : var(--ab-primary-light);
  border-color: var(--ab-primary);
}

.dg-lib-item-icon {
  width          : 34px;
  height         : 34px;
  border-radius  : 9px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  flex-shrink    : 0;
}

.dg-lib-item-body { flex: 1; min-width: 0; }

.dg-lib-item-title {
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--ab-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.dg-lib-item-meta {
  display    : flex;
  align-items: center;
  gap        : 5px;
  font-size  : 10px;
  color      : var(--ab-text-dim);
  flex-wrap  : wrap;
}

.dg-lib-item-del {
  background   : none;
  border       : none;
  color        : var(--ab-text-dim);
  cursor       : pointer;
  font-size    : 11px;
  padding      : 4px 5px;
  border-radius: var(--ab-radius);
  transition   : var(--ab-transition);
  opacity      : 0;
  flex-shrink  : 0;
}

.dg-lib-item:hover .dg-lib-item-del { opacity: 1; }
.dg-lib-item-del:hover { background: var(--ab-error-light); color: var(--ab-error); }

.dg-lib-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 30px 20px;
  color          : var(--ab-text-muted);
  font-size      : 12px;
}

.dg-lib-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 40px 16px;
  text-align     : center;
  color          : var(--ab-text-dim);
  font-size      : 11px;
  line-height    : 1.6;
}

.dg-lib-empty i { font-size: 24px; opacity: .2; display: block; margin-bottom: 4px; }

/* ── §31.3 — Content Area (right column) ─────────────────── */
.dg-content-area {
  flex          : 1;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
}

/* Empty state */
.dg-empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  flex           : 1;
  padding        : 40px 24px;
  text-align     : center;
}

.dg-empty-icon  { font-size: 56px; opacity: .25; }
.dg-empty-title { font-size: 18px; font-weight: 800; color: var(--ab-text-muted); }

.dg-empty-sub {
  font-size  : 13px;
  color      : var(--ab-text-dim);
  max-width  : 360px;
  line-height: 1.7;
}

/* ── §31.4 — Document Preview ─────────────────────────────── */
.dg-preview-wrap {
  display       : flex;
  flex-direction: column;
  flex          : 1;
  min-height    : 0;
  overflow      : hidden;
}

.dg-preview-header {
  display     : flex;
  align-items : center;
  padding     : 12px 18px;
  border-bottom: 1px solid var(--ab-border);
  background  : var(--ab-gradient-header);
  flex-shrink : 0;
}

.dg-preview-doc-info {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.dg-preview-doc-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 11px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 22px;
  flex-shrink    : 0;
}

.dg-preview-doc-title {
  font-size    : 14px;
  font-weight  : 800;
  color        : var(--ab-text);
  margin-bottom: 2px;
}

.dg-preview-doc-meta {
  font-size: 11px;
  color    : var(--ab-text-muted);
}

/* Export bar */
.dg-preview-export-bar {
  flex-shrink  : 0;
  border-bottom: 1px solid var(--ab-border);
}

.dg-export-bar {
  display    : flex;
  align-items: center;
  gap        : 6px;
  padding    : 8px 18px;
  flex-wrap  : wrap;
  background : var(--ab-bg-alt);
}

.dg-export-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 7px 14px;
  border-radius: var(--ab-radius-lg);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  border       : 1.5px solid var(--ab-border-strong);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-family  : var(--mcp-font);
  white-space  : nowrap;
}

.dg-export-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.dg-export-pdf:hover  { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }
.dg-export-docx:hover { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,.08); }
.dg-export-xlsx:hover { border-color: #16a34a; color: #16a34a; background: rgba(22,163,74,.08); }
.dg-export-share:hover { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.08); }
.dg-export-del:hover  { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.08); }

/* Preview iframe */
.dg-preview-iframe {
  flex  : 1;
  border: none;
  width : 100%;
  min-height: 0;
  background: #fff;
}

/* ── §31.5 — Generation Wizard ────────────────────────────── */
.dg-wizard {
  display       : flex;
  flex-direction: column;
  flex          : 1;
  min-height    : 0;
  overflow      : hidden;
}

.dg-wizard-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 20px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-gradient-header);
  flex-shrink    : 0;
  gap            : 16px;
}

/* Step indicators */
.dg-wizard-steps {
  display    : flex;
  align-items: center;
  gap        : 6px;
}

.dg-wizard-step {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-dim);
  white-space: nowrap;
  transition : color .2s;
}

.dg-wizard-step-num {
  width          : 22px;
  height         : 22px;
  border-radius  : 50%;
  border         : 2px solid var(--ab-border-strong);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 10px;
  font-weight    : 900;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.dg-wizard-step.active {
  color: var(--ab-primary);
}

.dg-wizard-step.active .dg-wizard-step-num {
  background  : var(--ab-primary);
  border-color: var(--ab-primary);
  color       : #fff;
}

.dg-wizard-step.completed .dg-wizard-step-num {
  background  : var(--ab-success);
  border-color: var(--ab-success);
  color       : #fff;
}

.dg-wizard-step.completed .dg-wizard-step-num::after { content: '✓'; }
.dg-wizard-step.completed .dg-wizard-step-num        { font-size: 0; }

.dg-wizard-close {
  width          : 28px;
  height         : 28px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 8px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.dg-wizard-close:hover { background: var(--ab-error-light); color: var(--ab-error); }

.dg-wizard-body {
  flex          : 1;
  overflow-y    : auto;
  min-height    : 0;
}

/* Wizard step content wrapper */
.dg-wizard-step-content {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
  padding       : 20px 24px 24px;
}

.dg-wizard-step-title {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ab-text);
  display    : flex;
  align-items: center;
  gap        : 8px;
}

/* Wizard actions bar */
.dg-wizard-actions {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 10px;
  padding-top    : 20px;
  border-top     : 1px solid var(--ab-border);
  margin-top     : auto;
}

/* ── §31.6 — Document Type Grid (Step 1) ──────────────────── */
.dg-type-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : 12px;
}

.dg-type-card {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  padding       : 16px;
  border        : 2px solid var(--ab-border-strong);
  border-radius : var(--ab-radius-xl);
  cursor        : pointer;
  transition    : var(--ab-transition);
  background    : var(--ab-surface-solid);
}

.dg-type-card:hover {
  border-color: var(--ab-primary);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-2px);
}

.dg-type-card.selected {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
  box-shadow  : 0 0 0 3px var(--ab-input-focus);
}

.dg-type-card-icon {
  width          : 52px;
  height         : 52px;
  border-radius  : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  align-self     : flex-start;
}

.dg-type-card-label {
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
}

.dg-type-card-desc {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.5;
}

.dg-type-card-audience {
  display    : flex;
  align-items: center;
  gap        : 5px;
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-dim);
}

.dg-type-card-sections {
  font-size  : 10px;
  font-weight: 800;
  color      : var(--ab-primary);
  background : var(--ab-primary-light);
  display    : inline-flex;
  padding    : 2px 8px;
  border-radius: 20px;
  align-self : flex-start;
}

/* ── §31.7 — Metadata Form (Step 2) ──────────────────────── */
.dg-meta-form {
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

.dg-meta-row {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

.dg-meta-label {
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.dg-meta-label-hint {
  font-size     : 10px;
  color         : var(--ab-text-dim);
  font-weight   : 400;
  text-transform: none;
  letter-spacing: 0;
}

.dg-meta-input {
  padding      : 9px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 13px;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s;
  width        : 100%;
}

.dg-meta-input:focus {
  border-color: var(--ab-primary);
  box-shadow  : 0 0 0 3px var(--ab-input-focus);
}

.dg-meta-input::placeholder { color: var(--ab-text-dim); }

.dg-meta-textarea {
  resize    : vertical;
  min-height: 140px;
  line-height: 1.6;
}

.dg-meta-two-col {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 10px;
}

.dg-meta-source-actions {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-top     : 6px;
  gap            : 8px;
}

/* ── §31.8 — Generating State (Step 3) ───────────────────── */
.dg-generating {
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 48px 32px;
}

.dg-generating-icon {
  width          : 72px;
  height         : 72px;
  border-radius  : 22px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 36px;
  margin         : 0 auto 16px;
  box-shadow     : 0 8px 24px rgba(99,102,241,.30);
}

.dg-generating-title {
  font-size  : 17px;
  font-weight: 900;
  color      : var(--ab-text);
  margin-bottom: 6px;
}

.dg-generating-sub {
  font-size  : 12px;
  color      : var(--ab-text-muted);
  margin-bottom: 24px;
  transition : color .2s;
}

.dg-generating-progress {
  width        : 100%;
  max-width    : 400px;
  height       : 6px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
  margin       : 0 auto 20px;
}

.dg-generating-bar {
  height       : 100%;
  background   : var(--ab-gradient);
  border-radius: 99px;
  width        : 0%;
  transition   : width .4s cubic-bezier(.4,0,.2,1);
}

.dg-generating-steps {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  max-width     : 340px;
  margin        : 0 auto;
}

.dg-gen-step {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ab-text-dim);
  padding    : 8px 14px;
  border-radius: var(--ab-radius-lg);
  transition : var(--ab-transition);
}

.dg-gen-step i { color: var(--ab-text-dim); font-size: 14px; flex-shrink: 0; }

.dg-gen-step.active {
  background  : var(--ab-primary-light);
  color       : var(--ab-primary);
  border      : 1px solid rgba(99,102,241,.20);
}

.dg-gen-step.active i { color: var(--ab-primary); }

.dg-gen-step.completed {
  color: var(--ab-success);
}

.dg-gen-step.completed i { color: var(--ab-success); }

/* ── §31.9 — Preview Step (Step 4) ───────────────────────── */
.dg-wizard-preview {
  padding: 0 !important;
  gap    : 0 !important;
}

.dg-wizard-preview-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 12px 18px;
  border-bottom  : 1px solid var(--ab-border);
  background     : var(--ab-gradient-header);
  flex-shrink    : 0;
  flex-wrap      : wrap;
  gap            : 10px;
}

.dg-wizard-preview-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 8px;
  padding      : 6px 14px;
  border-radius: 20px;
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
}

.dg-wizard-export-row {
  display  : flex;
  gap      : 6px;
  flex-wrap: wrap;
}

.dg-wizard-iframe {
  flex  : 1;
  border: none;
  width : 100%;
  min-height: 400px;
  background: #fff;
}

/* ── §31.10 — Inline Chat Button ─────────────────────────── */
.dg-inline-action-wrap {
  position     : relative;
  display      : inline-flex;
  align-items  : center;
  margin-top   : 10px;
  margin-bottom: 2px;
}

.dg-inline-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 7px;
  padding      : 7px 14px;
  border       : 1.5px solid rgba(99,102,241,.30);
  border-radius: var(--ab-radius-lg);
  background   : rgba(99,102,241,.06);
  color        : var(--ab-primary);
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.dg-inline-btn:hover {
  background  : var(--ab-primary-light);
  border-color: var(--ab-primary);
  box-shadow  : 0 2px 8px rgba(99,102,241,.20);
}

.dg-inline-btn-icon { font-size: 15px; }

.dg-inline-btn-chevron {
  font-size : 9px;
  opacity   : .6;
  transition: transform .2s;
}

/* Inline type picker dropdown */
.dg-inline-type-picker {
  position     : absolute;
  top          : calc(100% + 6px);
  left         : 0;
  background   : var(--ab-surface-solid);
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-xl);
  box-shadow   : var(--ab-shadow-xl);
  z-index      : 500;
  min-width    : 200px;
  padding      : 6px;
  display      : none;
  animation    : abFadeIn .15s ease;
}

.dg-inline-type-picker.open { display: flex; flex-direction: column; gap: 2px; }

.dg-inline-type-opt {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 8px 12px;
  border-radius: var(--ab-radius);
  border       : none;
  background   : none;
  color        : var(--ab-text);
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  text-align   : left;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  width        : 100%;
}

.dg-inline-type-opt:hover {
  background: var(--ab-primary-light);
  color     : var(--ab-primary);
}

/* ── §31.11 — Agent Builder Panel ─────────────────────────── */
.dg-builder-panel {
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

.dg-type-picker {
  display  : flex;
  flex-wrap: wrap;
  gap      : 6px;
  margin-top: 8px;
}

.dg-type-pick-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.dg-type-pick-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.dg-type-pick-btn.active {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
  color       : var(--ab-primary);
}

.dg-type-pick-icon { font-size: 14px; }
.dg-type-pick-label { font-size: 11px; }

/* ── §31.12 — Shared Buttons ──────────────────────────────── */
.dg-btn-primary {
  display      : inline-flex;
  align-items  : center;
  gap          : 7px;
  padding      : 10px 20px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 13px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.30);
}

.dg-btn-primary:hover {
  opacity   : .9;
  transform : translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.40);
}

.dg-btn-ghost {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 9px 18px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 13px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.dg-btn-ghost:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.dg-btn-ghost-sm {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 5px 10px;
  border       : 1px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background   : var(--ab-bg-alt);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
}

.dg-btn-ghost-sm:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* ── §31.13 — Swarm Folder (in agent list) ────────────────── */
.sw-agent-folder {
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-xl);
  overflow     : hidden;
  margin-bottom: 8px;
  transition   : var(--ab-transition);
}

.sw-agent-folder-header {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 12px 14px;
  background : var(--ab-gradient-soft);
  cursor     : pointer;
  user-select: none;
  transition : var(--ab-transition);
}

.sw-agent-folder-header:hover { background: var(--ab-primary-light); }

.sw-agent-folder-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  background     : linear-gradient(135deg,#6366f1,#8b5cf6);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  flex-shrink    : 0;
}

.sw-agent-folder-name {
  flex      : 1;
  font-size : 12px;
  font-weight: 800;
  color     : var(--ab-text);
}

.sw-agent-folder-meta {
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
}

.sw-agent-folder-chevron {
  font-size  : 10px;
  color      : var(--ab-text-muted);
  transition : transform .25s;
  flex-shrink: 0;
}

.sw-agent-folder.open .sw-agent-folder-chevron { transform: rotate(180deg); }

.sw-agent-folder-body {
  display: none;
  padding: 10px;
  gap    : 8px;
}

.sw-agent-folder.open .sw-agent-folder-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ── §31.14 — Dark Mode ───────────────────────────────────── */
body.dark-mode .dg-library-panel {
  background  : rgba(10,15,30,.95);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .dg-lib-item:hover,
body.dark-mode .dg-lib-item.active {
  background  : rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.30);
}

body.dark-mode .dg-type-card {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.10);
}

body.dark-mode .dg-type-card:hover {
  border-color: var(--ab-primary);
}

body.dark-mode .dg-type-card.selected {
  background  : rgba(99,102,241,.15);
  border-color: var(--ab-primary);
}

body.dark-mode .dg-meta-input {
  background: rgba(255,255,255,.05);
  color     : #e2e8f0;
}

body.dark-mode .dg-export-bar { background: rgba(255,255,255,.03); }

body.dark-mode .dg-inline-btn {
  background  : rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.25);
}

body.dark-mode .dg-inline-type-picker { background: #1e293b; }

body.dark-mode .dg-inline-type-opt:hover {
  background: rgba(99,102,241,.15);
}

body.dark-mode .sw-agent-folder {
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .dg-gen-step.active {
  background  : rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.20);
}

body.dark-mode .dg-type-pick-btn { background: rgba(255,255,255,.05); }

body.dark-mode .dg-btn-ghost {
  background: rgba(255,255,255,.06);
  color     : #94a3b8;
}

/* ── §31.15 — Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
  .dg-library-panel { width: 240px; min-width: 240px; }
  .dg-type-grid     { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
}

@media (max-width: 768px) {
  .dg-view          { flex-direction: column; }
  .dg-library-panel {
    width    : 100%;
    min-width: 100%;
    max-height: 220px;
    border-right : none;
    border-bottom: 1.5px solid var(--ab-border);
  }
  .dg-type-grid     { grid-template-columns: repeat(2, 1fr); }
  .dg-meta-two-col  { grid-template-columns: 1fr; }
  .dg-wizard-steps  { overflow-x: auto; gap: 4px; }
  .dg-wizard-step span { display: none; }
  .dg-wizard-step   { gap: 0; }
  .dg-export-bar    { gap: 4px; }
  .dg-export-btn    { padding: 6px 10px; font-size: 11px; }
  .sw-agent-folder-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .dg-type-grid           { grid-template-columns: 1fr; }
  .dg-generating          { padding: 32px 20px; }
  .dg-generating-icon     { width: 56px; height: 56px; font-size: 28px; }
  .dg-wizard-export-row   { gap: 4px; }
  .dg-export-btn span     { display: none; }
  .dg-inline-type-picker  { min-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════
   §31 — AGENT SKILLS — Self-Learning & Skills Library
   Feature 15 · agent-skills.js
   Prefix: sk- (SKills engine)
═══════════════════════════════════════════════════════════════ */

/* ── §31.0 — View Root ─────────────────────────────────────── */
#view-skills {
  overflow-y: auto   !important;
  overflow-x: hidden !important;
}

#sk-lib-content {
  flex      : 1;
  min-height: 0;
}

/* ── §31.1 — Stats Pill Row ────────────────────────────────── */
.sk-lib-stats {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 6px;
  flex-shrink: 0;
}

.sk-lib-stat-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 700;
  color        : var(--ab-text-muted);
  background   : var(--ab-surface-solid);
  cursor       : pointer;
  transition   : var(--ab-transition);
  white-space  : nowrap;
}

.sk-lib-stat-pill:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sk-lib-stat-pill.active { font-weight: 800; }

.sk-stat-count {
  font-size    : 10px;
  font-weight  : 800;
  padding      : 1px 6px;
  border-radius: 20px;
  background   : rgba(0,0,0,.06);
}

.sk-clear-filter {
  color: var(--ab-error) !important;
  border-color: rgba(239,68,68,.3) !important;
  background  : var(--ab-error-light) !important;
}

/* ── §31.2 — Toolbar ───────────────────────────────────────── */
.sk-lib-toolbar {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-shrink: 0;
  flex-wrap  : wrap;
}

.sk-lib-search-wrap {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 9px 14px;
  background     : var(--ab-input-bg);
  border         : 1.5px solid var(--ab-input-border);
  border-radius  : var(--ab-radius-lg);
  transition     : border-color .15s;
  flex           : 1;
  min-width      : 200px;
}

.sk-lib-search-wrap:focus-within { border-color: var(--ab-primary); }
.sk-lib-search-wrap i { color: var(--ab-text-muted); font-size: 13px; flex-shrink: 0; }

.sk-lib-search {
  flex      : 1;
  border    : none;
  background: transparent;
  outline   : none;
  font-size : 13px;
  color     : var(--ab-text);
  font-family: var(--mcp-font);
}

.sk-lib-search::placeholder { color: var(--ab-text-dim); }

.sk-lib-sort-select {
  padding      : 8px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 12px;
  font-family  : var(--mcp-font);
  outline      : none;
  cursor       : pointer;
  transition   : border-color .15s;
}

.sk-lib-sort-select:focus { border-color: var(--ab-primary); }

.sk-lib-create-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 9px 16px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  transition   : var(--ab-transition);
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.3);
  white-space  : nowrap;
  flex-shrink  : 0;
}

.sk-lib-create-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ── §31.3 — Skills Grid ───────────────────────────────────── */
.sk-lib-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(240px, 1fr));
  gap                   : 12px;
}

/* ── §31.4 — Skill Card ────────────────────────────────────── */
.sk-card {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  padding        : 16px;
  background     : var(--ab-glass-bg);
  backdrop-filter: var(--ab-glass-blur);
  border         : 1.5px solid var(--ab-border);
  border-radius  : var(--ab-radius-xl);
  box-shadow     : var(--ab-shadow-card);
  transition     : var(--ab-transition);
  position       : relative;
}

.sk-card:hover {
  border-color: rgba(99,102,241,.28);
  box-shadow  : var(--ab-shadow-card-hover);
  transform   : translateY(-2px);
}

.sk-card-top {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
}

.sk-card-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 11px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 17px;
  flex-shrink    : 0;
}

.sk-card-actions { display: flex; gap: 3px; }

.sk-card-btn {
  width          : 28px;
  height         : 28px;
  border         : 1px solid var(--ab-border-strong);
  border-radius  : 8px;
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : var(--ab-transition);
}

.sk-card-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sk-card-btn-danger:hover {
  border-color: var(--ab-error)       !important;
  color       : var(--ab-error)       !important;
  background  : var(--ab-error-light) !important;
}

.sk-card-type-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 10px;
  font-weight  : 800;
  padding      : 2px 9px;
  border-radius: 20px;
  width        : fit-content;
}

.sk-card-name {
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
  line-height: 1.3;
}

.sk-card-desc {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  line-height: 1.55;
  margin     : 0;
  flex       : 1;
}

/* Success rate bar */
.sk-card-rate-wrap {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.sk-card-rate-bar {
  flex         : 1;
  height       : 5px;
  background   : var(--ab-border);
  border-radius: 99px;
  overflow     : hidden;
}

.sk-card-rate-fill {
  height       : 100%;
  border-radius: 99px;
  transition   : width .5s cubic-bezier(.4,0,.2,1);
}

.sk-card-rate-label {
  font-size  : 11px;
  font-weight: 800;
  flex-shrink: 0;
  min-width  : 32px;
  text-align : right;
}

/* Meta row */
.sk-card-meta {
  display  : flex;
  flex-wrap: wrap;
  gap      : 6px;
}

.sk-card-meta span {
  display    : inline-flex;
  align-items: center;
  gap        : 3px;
  font-size  : 10px;
  font-weight: 600;
  color      : var(--ab-text-muted);
  background : var(--ab-bg-alt);
  padding    : 2px 7px;
  border-radius: 20px;
}

/* Tags */
.sk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.sk-tag {
  font-size    : 10px;
  font-weight  : 600;
  padding      : 2px 7px;
  border-radius: 20px;
  background   : var(--ab-primary-light);
  color        : var(--ab-primary);
  border       : 1px solid rgba(99,102,241,.15);
}

/* Attach button */
.sk-card-attach-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 7px;
  border         : 1.5px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius);
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : var(--ab-transition);
  font-family    : var(--mcp-font);
  margin-top     : auto;
}

.sk-card-attach-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
  background  : var(--ab-primary-light);
}

/* ── §31.5 — Empty State ───────────────────────────────────── */
.sk-lib-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  padding        : 60px 20px;
  text-align     : center;
  grid-column    : 1 / -1;
}

.sk-lib-empty i { font-size: 40px; opacity: .15; color: var(--ab-text-muted); }

.sk-lib-empty-title {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ab-text-muted);
}

.sk-lib-empty-sub {
  font-size  : 12px;
  color      : var(--ab-text-dim);
  line-height: 1.7;
  max-width  : 320px;
}

.sk-create-first-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 10px 20px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.3);
  transition   : var(--ab-transition);
}

.sk-create-first-btn:hover { opacity: .9; transform: translateY(-1px); }

.sk-outline-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 7px 14px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : var(--mcp-font);
  transition   : var(--ab-transition);
}

.sk-outline-btn:hover {
  border-color: var(--ab-primary);
  color       : var(--ab-primary);
}

/* ── §31.6 — Modal Overlay & Shell ────────────────────────── */
.sk-modal-overlay {
  position        : fixed;
  inset           : 0;
  background      : rgba(0,0,0,.5);
  z-index         : 2000;
  display         : flex;
  align-items     : center;
  justify-content : center;
  backdrop-filter : blur(5px);
  padding         : 20px;
  opacity         : 0;
  transition      : opacity .25s;
}

.sk-modal-overlay.sk-modal-open { opacity: 1; }

.sk-modal {
  background    : var(--ab-surface-solid);
  border        : 1.5px solid var(--ab-border-strong);
  border-radius : var(--ab-radius-2xl);
  box-shadow    : var(--ab-shadow-xl);
  width         : 100%;
  max-width     : 580px;
  max-height    : 88vh;
  overflow-y    : auto;
  display       : flex;
  flex-direction: column;
  animation     : abFadeIn .22s ease;
}

/* Modal Header */
.sk-modal-header {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 18px 22px;
  border-bottom: 1px solid var(--ab-border);
  flex-shrink  : 0;
  position     : sticky;
  top          : 0;
  background   : var(--ab-surface-solid);
  z-index      : 1;
}

.sk-modal-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 17px;
  flex-shrink    : 0;
}

.sk-modal-title {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ab-text);
  display    : block;
  flex       : 1;
}

.sk-modal-sub {
  font-size: 11px;
  color    : var(--ab-text-muted);
  display  : block;
}

.sk-modal-close {
  width          : 30px;
  height         : 30px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 9px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.sk-modal-close:hover { background: var(--ab-error-light); color: var(--ab-error); }

/* Modal Body */
.sk-modal-body {
  padding       : 20px 22px;
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

/* Modal Footer */
.sk-modal-footer {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 8px;
  padding        : 14px 22px;
  border-top     : 1px solid var(--ab-border);
  background     : var(--ab-bg-alt);
  flex-shrink    : 0;
}

.sk-modal-btn-primary {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 10px 20px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 13px;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : var(--mcp-font);
  box-shadow   : 0 2px 10px rgba(99,102,241,.3);
  transition   : var(--ab-transition);
}

.sk-modal-btn-primary:hover { opacity: .9; transform: translateY(-1px); }

.sk-modal-btn-ghost {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 10px 18px;
  border       : 1.5px solid var(--ab-border-strong);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-surface-solid);
  color        : var(--ab-text-muted);
  font-size    : 13px;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : var(--mcp-font);
  transition   : var(--ab-transition);
}

.sk-modal-btn-ghost:hover {
  border-color: var(--ab-border-strong);
  color       : var(--ab-text);
}

/* ── §31.7 — Form Fields (inside modals) ───────────────────── */
.sk-form-row   { display: flex; flex-direction: column; gap: 5px; }

.sk-form-label {
  font-size     : 11px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sk-form-input {
  padding      : 9px 12px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 13px;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s;
  width        : 100%;
  box-sizing   : border-box;
}

.sk-form-input:focus { border-color: var(--ab-primary); }
.sk-form-input::placeholder { color: var(--ab-text-dim); }

.sk-form-textarea {
  resize    : vertical;
  min-height: 200px;
  line-height: 1.65;
  font-family: 'JetBrains Mono', monospace;
  font-size  : 12px;
}

/* ── §31.8 — Preview Code Block ────────────────────────────── */
.sk-preview-desc {
  font-size  : 13px;
  color      : var(--ab-text-muted);
  line-height: 1.65;
  margin     : 0;
}

.sk-preview-content-label {
  font-size     : 10px;
  font-weight   : 800;
  color         : var(--ab-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom : 6px;
}

.sk-preview-code {
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  padding      : 14px;
  font-family  : 'JetBrains Mono', monospace;
  font-size    : 12px;
  line-height  : 1.65;
  color        : var(--ab-text);
  overflow-x   : auto;
  white-space  : pre-wrap;
  word-break   : break-word;
  max-height   : 360px;
  overflow-y   : auto;
}

.sk-preview-tools {
  display  : flex;
  flex-wrap: wrap;
  gap      : 5px;
}

.sk-tool-chip {
  display      : inline-flex;
  align-items  : center;
  padding      : 3px 9px;
  background   : var(--ab-primary-light);
  border       : 1px solid rgba(99,102,241,.18);
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 600;
  color        : var(--ab-primary);
}

/* ── §31.9 — Attach to Agent Modal list ────────────────────── */
.sk-attach-agent-list {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  max-height    : 340px;
  overflow-y    : auto;
}

.sk-attach-agent-row {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 10px 14px;
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  cursor       : pointer;
  transition   : var(--ab-transition);
  background   : var(--ab-surface-solid);
}

.sk-attach-agent-row:hover {
  border-color: var(--ab-primary);
  background  : var(--ab-primary-light);
}

.sk-attach-already {
  opacity: .55;
  cursor : default !important;
}

.sk-attach-already:hover {
  border-color: var(--ab-border)       !important;
  background  : var(--ab-surface-solid)!important;
}

.sk-attach-agent-icon {
  width          : 32px;
  height         : 32px;
  border-radius  : 9px;
  background     : var(--ab-primary-light);
  color          : var(--ab-primary);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 14px;
  flex-shrink    : 0;
}

.sk-attach-agent-info  { flex: 1; min-width: 0; }

.sk-attach-agent-name {
  display      : block;
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--ab-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sk-attach-agent-cat { font-size: 10px; color: var(--ab-text-muted); }

.sk-attach-status {
  display    : flex;
  align-items: center;
  gap        : 4px;
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ab-text-muted);
  flex-shrink: 0;
}

/* ── §31.10 — Extraction Prompt Toast ─────────────────────── */
.sk-extraction-prompt {
  position     : fixed;
  bottom       : 24px;
  right        : 24px;
  width        : 380px;
  max-width    : calc(100vw - 32px);
  background   : var(--ab-surface-solid);
  border       : 1.5px solid rgba(99,102,241,.25);
  border-radius: var(--ab-radius-2xl);
  box-shadow   : var(--ab-shadow-xl),
                 0 0 0 1px rgba(99,102,241,.08);
  z-index      : 3000;
  opacity      : 0;
  transform    : translateY(20px);
  transition   : opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  overflow     : hidden;
}

.sk-extraction-prompt.sk-ext-visible {
  opacity      : 1;
  transform    : translateY(0);
  pointer-events: auto;
}

/* Top gradient accent */
.sk-extraction-prompt::before {
  content      : '';
  position     : absolute;
  top: 0; left: 0; right: 0;
  height       : 3px;
  background   : var(--ab-gradient);
}

.sk-ext-header {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
  padding    : 14px 14px 0;
}

.sk-ext-icon {
  width          : 36px;
  height         : 36px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.sk-ext-title-wrap { flex: 1; min-width: 0; }

.sk-ext-title {
  font-size  : 13px;
  font-weight: 800;
  color      : var(--ab-text);
  display    : block;
}

.sk-ext-sub {
  font-size  : 11px;
  color      : var(--ab-text-muted);
  display    : block;
  margin-top : 2px;
}

.sk-ext-dismiss {
  width          : 26px;
  height         : 26px;
  border         : none;
  background     : var(--ab-bg-alt);
  color          : var(--ab-text-muted);
  border-radius  : 7px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.sk-ext-dismiss:hover { background: var(--ab-error-light); color: var(--ab-error); }

.sk-ext-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

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

.sk-ext-type-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  font-size    : 10px;
  font-weight  : 800;
  padding      : 2px 9px;
  border-radius: 20px;
}

.sk-ext-score {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
  font-size  : 10px;
  font-weight: 700;
  color      : var(--ab-text-muted);
}

.sk-ext-name-wrap { display: flex; }

.sk-ext-name-input {
  flex         : 1;
  padding      : 8px 11px;
  border       : 1.5px solid var(--ab-input-border);
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-input-bg);
  color        : var(--ab-text);
  font-size    : 12px;
  font-weight  : 700;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s;
}

.sk-ext-name-input:focus { border-color: var(--ab-primary); }

.sk-ext-preview {
  background   : var(--ab-bg-alt);
  border       : 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  overflow     : hidden;
}

.sk-ext-preview-label {
  font-size     : 9px;
  font-weight   : 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color         : var(--ab-text-muted);
  padding       : 5px 10px;
  border-bottom : 1px solid var(--ab-border);
}

.sk-ext-preview-code {
  font-size  : 10px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.6;
  color      : var(--ab-text);
  padding    : 8px 10px;
  margin     : 0;
  overflow-x : auto;
  white-space: pre-wrap;
  word-break : break-word;
  max-height : 90px;
  overflow-y : auto;
}

.sk-ext-actions {
  display    : flex;
  gap        : 8px;
  padding    : 10px 14px 14px;
  border-top : 1px solid var(--ab-border);
}

.sk-ext-btn-save {
  flex           : 1;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 9px 14px;
  border         : none;
  border-radius  : var(--ab-radius-lg);
  background     : var(--ab-gradient);
  color          : #fff;
  font-size      : 12px;
  font-weight    : 700;
  cursor         : pointer;
  font-family    : var(--mcp-font);
  box-shadow     : 0 2px 8px rgba(99,102,241,.30);
  transition     : var(--ab-transition);
}

.sk-ext-btn-save:hover { opacity: .9; transform: translateY(-1px); }

.sk-ext-btn-dismiss {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 5px;
  padding        : 9px 13px;
  border         : 1.5px solid var(--ab-border-strong);
  border-radius  : var(--ab-radius-lg);
  background     : var(--ab-surface-solid);
  color          : var(--ab-text-muted);
  font-size      : 12px;
  font-weight    : 700;
  cursor         : pointer;
  font-family    : var(--mcp-font);
  transition     : var(--ab-transition);
}

.sk-ext-btn-dismiss:hover { border-color: var(--ab-error); color: var(--ab-error); }

/* ── §31.11 — Skill Attacher Panel (Agent Builder form) ────── */
.sk-attacher-wrap {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.sk-attacher-list {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

.sk-attacher-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 9px 12px;
  background   : var(--ab-bg-alt);
  border       : 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  transition   : var(--ab-transition);
}

.sk-attacher-item:hover { border-color: rgba(99,102,241,.22); }

.sk-attacher-item-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  flex-shrink    : 0;
}

.sk-attacher-item-info { flex: 1; min-width: 0; }

.sk-attacher-item-name {
  display      : block;
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--ab-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sk-attacher-item-type { font-size: 10px; color: var(--ab-text-muted); }

.sk-attacher-item-rate {
  font-size  : 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.sk-attacher-detach {
  width          : 24px;
  height         : 24px;
  border         : none;
  background     : none;
  color          : var(--ab-text-muted);
  border-radius  : 6px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  transition     : var(--ab-transition);
  flex-shrink    : 0;
}

.sk-attacher-detach:hover {
  background: var(--ab-error-light);
  color     : var(--ab-error);
}

.sk-attacher-empty {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 12px 14px;
  border         : 1px dashed var(--ab-border-strong);
  border-radius  : var(--ab-radius-lg);
  color          : var(--ab-text-muted);
  font-size      : 11px;
  line-height    : 1.5;
}

.sk-attacher-empty i { font-size: 16px; opacity: .4; flex-shrink: 0; }

.sk-attacher-add {
  display: flex;
  gap    : 8px;
}

.sk-attacher-add-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 9px 14px;
  border       : none;
  border-radius: var(--ab-radius-lg);
  background   : var(--ab-gradient);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : var(--mcp-font);
  white-space  : nowrap;
  transition   : var(--ab-transition);
  flex-shrink  : 0;
}

.sk-attacher-add-btn:hover { opacity: .9; }

.sk-attacher-footer {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
}

/* ── §31.12 — Dark Mode ────────────────────────────────────── */
body.dark-mode .sk-card,
body.dark-mode .sk-modal {
  background  : rgba(17,24,39,.90);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .sk-card:hover {
  border-color: rgba(99,102,241,.30);
}

body.dark-mode .sk-extraction-prompt { background: #1e293b; }
body.dark-mode .sk-modal-header       { background: #1e293b; }
body.dark-mode .sk-modal-footer       { background: rgba(255,255,255,.03); }
body.dark-mode .sk-preview-code       { background: rgba(0,0,0,.3); }
body.dark-mode .sk-ext-preview        { background: rgba(255,255,255,.04); }
body.dark-mode .sk-attacher-item      { background: rgba(255,255,255,.04); }
body.dark-mode .sk-card-btn           { background: rgba(255,255,255,.05); }
body.dark-mode .sk-card-attach-btn    { background: rgba(255,255,255,.05); }
body.dark-mode .sk-attach-agent-row   { background: rgba(255,255,255,.04); }
body.dark-mode .sk-card-meta span     { background: rgba(255,255,255,.06); }

/* ── §31.13 — Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .sk-lib-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 768px) {
  .sk-lib-grid       { grid-template-columns: 1fr; }
  .sk-lib-toolbar    { flex-direction: column; align-items: stretch; }
  .sk-lib-search-wrap{ min-width: unset; }
  .sk-extraction-prompt {
    bottom: 12px; right: 12px; left: 12px; width: auto;
  }
  .sk-modal          { max-width: 100%; border-radius: var(--ab-radius-xl); }
  .sk-attach-agent-list { max-height: 260px; }
}

@media (max-width: 480px) {
  .sk-lib-stats { overflow-x: auto; flex-wrap: nowrap; }
  .sk-lib-stat-pill { flex-shrink: 0; }
  .sk-card-meta { gap: 4px; }
  .sk-card-meta span { font-size: 9px; padding: 1px 5px; }
}

/* ══════════════════════════════════════════════════════════════════
   SKILLS LIBRARY — Card Grid Spacing
══════════════════════════════════════════════════════════════════ */

.sk-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 4px 2px; /* évite le clipping des box-shadow */
}

/* Card — reset margin si appliqué ailleurs */
.sk-card {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   §32 — AGENT MONITOR (F21 Continuous Intelligence Monitor)
   Prefix  : mon- (MONitor)
   Covers  : KPI Row · Alert Feed · Heatmap · Watchlist ·
             Add Form · Response Log · Daily Digest ·
             Empty/Loading States · Mobile
═══════════════════════════════════════════════════════════════ */

/* ── §32.0 — CSS Variables (Monitor) ──────────────────────── */
:root {
  --mon-critical : #ef4444;
  --mon-high     : #f97316;
  --mon-medium   : #eab308;
  --mon-low      : #22c55e;
  --mon-ok       : #22c55e;
  --mon-radius   : var(--ab-radius-xl);
  --mon-radius-sm: var(--ab-radius);
  --mon-shadow   : var(--ab-shadow-card);
  --mon-border   : 1px solid var(--ab-border);
  --mon-bg       : var(--ab-surface-solid);
  --mon-bg-2     : var(--ab-bg-alt);
  --mon-text     : var(--ab-text);
  --mon-muted    : var(--ab-text-muted);
  --mon-indigo   : var(--ab-primary);
}

body.dark-mode {
  --mon-bg    : #1e293b;
  --mon-bg-2  : #0f172a;
  --mon-text  : #f1f5f9;
  --mon-muted : #94a3b8;
  --mon-border: 1px solid rgba(255,255,255,.07);
  --mon-shadow: 0 4px 24px rgba(0,0,0,.3);
}

/* ── §32.1 — View Root ─────────────────────────────────────── */
#view-monitor {
  overflow-y: auto   !important;
  overflow-x: hidden !important;
  padding   : 16px 20px 40px;
  gap       : 16px;
  flex-direction: column;
}

/* ── §32.2 — KPI Row ───────────────────────────────────────── */
.mon-kpi-row {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap                  : 12px;
  margin-bottom        : 20px;
  flex-shrink          : 0;
}

.mon-kpi-card {
  background : var(--mon-bg);
  border     : var(--mon-border);
  border-radius: var(--mon-radius);
  padding    : 16px;
  display    : flex;
  align-items: center;
  gap        : 12px;
  box-shadow : var(--mon-shadow);
  transition : transform .2s, box-shadow .2s;
}

.mon-kpi-card:hover {
  transform : translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

.mon-kpi-icon {
  width          : 40px;
  height         : 40px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 16px;
  flex-shrink    : 0;
}

.mon-kpi-critical .mon-kpi-icon { background: rgba(239,68,68,.12);  color: var(--mon-critical); }
.mon-kpi-high     .mon-kpi-icon { background: rgba(249,115,22,.12); color: var(--mon-high);     }
.mon-kpi-medium   .mon-kpi-icon { background: rgba(234,179,8,.12);  color: var(--mon-medium);   }
.mon-kpi-watched  .mon-kpi-icon { background: rgba(99,102,241,.12); color: var(--mon-indigo);   }
.mon-kpi-fg       .mon-kpi-icon { background: rgba(6,182,212,.12);  color: #06b6d4;             }
.mon-kpi-pollers  .mon-kpi-icon { background: rgba(34,197,94,.12);  color: var(--mon-ok);       }

.mon-kpi-val {
  font-size  : 1.6rem;
  font-weight: 900;
  color      : var(--mon-text);
  line-height: 1;
}

.mon-kpi-label {
  font-size     : .72rem;
  color         : var(--mon-muted);
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top    : 2px;
}

/* ── §32.3 — Main Grid ─────────────────────────────────────── */
.mon-main-grid {
  display              : grid;
  grid-template-columns: 1fr 380px;
  gap                  : 16px;
  align-items          : start;
  flex-shrink          : 0;
}

/* ── §32.4 — Card ──────────────────────────────────────────── */
.mon-card {
  background   : var(--mon-bg);
  border       : var(--mon-border);
  border-radius: var(--mon-radius);
  box-shadow   : var(--mon-shadow);
  overflow     : hidden;
  margin-bottom: 16px;
}

.mon-card-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 18px;
  border-bottom  : var(--mon-border);
  flex-wrap      : wrap;
  gap            : 8px;
}

.mon-card-title {
  font-size  : .95rem;
  font-weight: 700;
  color      : var(--mon-text);
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.mon-card-actions {
  display    : flex;
  align-items: center;
  gap        : 6px;
  flex-wrap  : wrap;
}

/* ── §32.5 — Live Dot ──────────────────────────────────────── */
.mon-live-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--mon-ok);
  box-shadow   : 0 0 0 0 rgba(34,197,94,.5);
  animation    : monPulse 2s infinite;
  flex-shrink  : 0;
}

@keyframes monPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0);  }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);  }
}

/* ── §32.6 — Severity Filter Pills ────────────────────────── */
.mon-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }

.mon-filter-pill {
  padding      : 3px 10px;
  border-radius: 20px;
  border       : none;
  font-size    : .72rem;
  font-weight  : 700;
  cursor       : pointer;
  background   : var(--mon-bg-2);
  color        : var(--mon-muted);
  transition   : all .15s;
  font-family  : var(--mcp-font);
}

.mon-filter-pill:hover                  { opacity: .85; }
.mon-pill-active                        { background: var(--mon-indigo); color: #fff; }
.mon-pill-critical.mon-pill-active      { background: var(--mon-critical); }
.mon-pill-high.mon-pill-active          { background: var(--mon-high); }
.mon-pill-medium.mon-pill-active        { background: var(--mon-medium); color: #1e293b; }

/* ── §32.7 — Alert Feed ────────────────────────────────────── */
.mon-alert-feed {
  max-height: 540px;
  overflow-y: auto;
  padding   : 8px;
}

/* ── §32.8 — Alert Card ────────────────────────────────────── */
.mon-alert-card {
  display      : flex;
  align-items  : stretch;
  border       : var(--mon-border);
  border-radius: var(--mon-radius-sm);
  margin-bottom: 8px;
  background   : var(--mon-bg-2);
  overflow     : hidden;
  transition   : transform .15s, box-shadow .15s;
}

.mon-alert-card:hover {
  transform : translateX(2px);
  box-shadow: var(--mon-shadow);
}

.mon-alert-card.mon-alert-new { border-left: none; }

.mon-alert-bar   { width: 4px; flex-shrink: 0; }

.mon-sev-critical .mon-alert-bar { background: var(--mon-critical); }
.mon-sev-high     .mon-alert-bar { background: var(--mon-high);     }
.mon-sev-medium   .mon-alert-bar { background: var(--mon-medium);   }
.mon-sev-low      .mon-alert-bar { background: var(--mon-low);      }

.mon-alert-body {
  padding  : 10px 12px;
  flex     : 1;
  min-width: 0;
}

.mon-alert-top {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 8px;
  flex-wrap      : wrap;
  margin-bottom  : 6px;
}

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

.mon-alert-asset {
  font-weight: 700;
  font-size  : .85rem;
  color      : var(--mon-text);
  display    : flex;
  align-items: center;
  gap        : 5px;
}

.mon-alert-trigger {
  font-size    : .72rem;
  background   : rgba(99,102,241,.1);
  color        : var(--mon-indigo);
  padding      : 2px 7px;
  border-radius: 10px;
  font-weight  : 600;
}

.mon-new-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--mon-indigo);
  flex-shrink  : 0;
}

.mon-alert-badges {
  display    : flex;
  align-items: center;
  gap        : 5px;
  flex-wrap  : wrap;
}

.mon-sev-pill {
  padding      : 2px 8px;
  border-radius: 20px;
  font-size    : .68rem;
  font-weight  : 800;
  display      : flex;
  align-items  : center;
  gap          : 4px;
  white-space  : nowrap;
}

.mon-sev-pill-critical { background: rgba(239,68,68,.15);  color: var(--mon-critical); }
.mon-sev-pill-high     { background: rgba(249,115,22,.15); color: var(--mon-high);     }
.mon-sev-pill-medium   { background: rgba(234,179,8,.15);  color: #b45309;             }
.mon-sev-pill-low      { background: rgba(34,197,94,.15);  color: #16a34a;             }

.mon-rel-badge,
.mon-conf-badge,
.mon-wf-badge {
  font-size    : .68rem;
  padding      : 2px 7px;
  border-radius: 10px;
  font-weight  : 700;
}

.mon-rel-ok    { background: rgba(34,197,94,.12);  color: #16a34a;           }
.mon-rel-warn  { background: rgba(234,179,8,.12);  color: #b45309;           }
.mon-rel-bad   { background: rgba(239,68,68,.12);  color: var(--mon-critical);}
.mon-conf-badge{ background: rgba(99,102,241,.1);  color: var(--mon-indigo); }
.mon-wf-badge  { background: rgba(139,92,246,.1);  color: #7c3aed;           }

.mon-alert-message {
  font-size    : .82rem;
  color        : var(--mon-text);
  line-height  : 1.5;
  margin-bottom: 8px;
}

.mon-alert-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 8px;
}

.mon-alert-time {
  font-size  : .7rem;
  color      : var(--mon-muted);
  display    : flex;
  align-items: center;
  gap        : 4px;
}

.mon-alert-actions {
  display    : flex;
  align-items: center;
  gap        : 4px;
}

.mon-action-btn {
  padding      : 3px 8px;
  border-radius: var(--mon-radius-sm);
  border       : none;
  background   : rgba(99,102,241,.08);
  color        : var(--mon-indigo);
  font-size    : .7rem;
  font-weight  : 700;
  cursor       : pointer;
  transition   : background .15s;
  display      : flex;
  align-items  : center;
  gap          : 4px;
  font-family  : var(--mcp-font);
}

.mon-action-btn:hover     { background: rgba(99,102,241,.18);  }
.mon-action-workflow      { background: rgba(139,92,246,.1); color: #7c3aed; }
.mon-action-danger        { background: rgba(239,68,68,.08); color: var(--mon-critical); }
.mon-action-danger:hover  { background: rgba(239,68,68,.18); }

.mon-focus-header {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 8px 4px 12px;
  border-bottom: var(--mon-border);
  margin-bottom: 8px;
}

.mon-focus-label {
  font-size  : .82rem;
  font-weight: 700;
  color      : var(--mon-text);
  display    : flex;
  align-items: center;
  gap        : 6px;
}

/* ── §32.9 — Heatmap ───────────────────────────────────────── */
.mon-heatmap-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap                  : 8px;
  padding              : 14px;
}

.mon-heat-cell {
  position       : relative;
  border-radius  : var(--mon-radius-sm);
  padding        : 10px 8px;
  text-align     : center;
  cursor         : pointer;
  transition     : transform .15s, box-shadow .15s;
  border         : 1px solid transparent;
  min-height     : 80px;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 4px;
}

.mon-heat-cell:hover {
  transform : scale(1.04);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index   : 2;
}

.mon-heat-ok       { background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.25);  }
.mon-heat-low      { background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.3);   }
.mon-heat-medium   { background: rgba(234,179,8,.12);  border-color: rgba(234,179,8,.3);   }
.mon-heat-high     { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.35); }

.mon-heat-critical {
  background  : rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
  animation   : monHeatPulse 1.5s ease-in-out infinite;
}

@keyframes monHeatPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(239,68,68,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0);  }
}

.mon-heat-global {
  grid-column : span 2;
  border-style: dashed;
}

.mon-heat-icon   { font-size: 1.1rem; }

.mon-heat-name {
  font-size     : .68rem;
  font-weight   : 800;
  color         : var(--mon-text);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
  max-width     : 100%;
}

.mon-heat-status {
  font-size  : .6rem;
  color      : var(--mon-muted);
  text-align : center;
  white-space: nowrap;
}

.mon-heat-time { font-size: .55rem; color: var(--mon-muted); }

.mon-heat-badge {
  position     : absolute;
  top: 4px; right: 4px;
  background   : var(--mon-critical);
  color        : #fff;
  font-size    : .6rem;
  font-weight  : 900;
  border-radius: 10px;
  padding      : 1px 5px;
  min-width    : 16px;
}

/* ── §32.10 — Add Form ─────────────────────────────────────── */
.mon-add-form { padding: 14px 16px; }

.mon-form-row {
  display      : flex;
  gap          : 8px;
  margin-bottom: 10px;
}

.mon-input {
  flex         : 1;
  padding      : 8px 12px;
  border-radius: var(--mon-radius-sm);
  border       : var(--mon-border);
  background   : var(--mon-bg-2);
  color        : var(--mon-text);
  font-size    : .82rem;
  font-family  : var(--mcp-font);
  outline      : none;
  transition   : border-color .15s;
}

.mon-input:focus { border-color: var(--mon-indigo); }
.mon-input-sm    { max-width: 110px; flex: none; }

.mon-preset-select {
  padding      : 4px 8px;
  border-radius: var(--mon-radius-sm);
  border       : var(--mon-border);
  background   : var(--mon-bg-2);
  color        : var(--mon-text);
  font-size    : .78rem;
  cursor       : pointer;
  font-family  : var(--mcp-font);
}

.mon-trigger-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 6px;
  margin-bottom        : 12px;
  max-height           : 180px;
  overflow-y           : auto;
}

.mon-trigger-check {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  font-size    : .75rem;
  color        : var(--mon-text);
  cursor       : pointer;
  padding      : 4px 6px;
  border-radius: var(--mon-radius-sm);
  transition   : background .12s;
}

.mon-trigger-check:hover        { background: rgba(99,102,241,.06); }
.mon-trigger-check input        { accent-color: var(--mon-indigo); cursor: pointer; }

.mon-add-btn {
  width          : 100%;
  justify-content: center;
  padding        : 10px;
  font-size      : .85rem;
}

/* ── §32.11 — Watchlist ────────────────────────────────────── */
.mon-watchlist-list {
  padding   : 8px;
  max-height: 400px;
  overflow-y: auto;
}

.mon-badge-count {
  font-size    : .7rem;
  font-weight  : 800;
  background   : rgba(99,102,241,.1);
  color        : var(--mon-indigo);
  padding      : 1px 7px;
  border-radius: 10px;
}

.mon-watchlist-item {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 10px;
  padding        : 10px;
  border-radius  : var(--mon-radius-sm);
  border         : var(--mon-border);
  margin-bottom  : 8px;
  background     : var(--mon-bg-2);
  transition     : box-shadow .15s;
}

.mon-watchlist-item:hover { box-shadow: var(--mon-shadow); }

.mon-wl-left {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
  flex       : 1;
  min-width  : 0;
}

.mon-wl-icon {
  width          : 34px;
  height         : 34px;
  border-radius  : 8px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 14px;
  flex-shrink    : 0;
}

.mon-wl-name {
  font-size  : .85rem;
  font-weight: 700;
  color      : var(--mon-text);
  display    : flex;
  align-items: center;
  gap        : 6px;
  flex-wrap  : wrap;
}

.mon-wl-ticker {
  font-size    : .7rem;
  background   : rgba(99,102,241,.1);
  color        : var(--mon-indigo);
  padding      : 1px 6px;
  border-radius: 8px;
  font-weight  : 800;
}

.mon-wl-alert-count {
  font-size    : .68rem;
  background   : rgba(239,68,68,.12);
  color        : var(--mon-critical);
  padding      : 1px 6px;
  border-radius: 8px;
  font-weight  : 800;
}

.mon-wl-meta {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
  font-size  : .7rem;
  color      : var(--mon-muted);
  margin     : 4px 0;
}

.mon-wl-triggers { display: flex; flex-wrap: wrap; gap: 4px; }

.mon-trigger-tag {
  font-size    : .62rem;
  padding      : 2px 6px;
  border-radius: 8px;
  background   : rgba(99,102,241,.08);
  color        : var(--mon-indigo);
  font-weight  : 600;
}

.mon-trigger-more { background: rgba(100,116,139,.1); color: var(--mon-muted); }
.mon-polling-dot  { color: var(--mon-ok); font-weight: 800; }

.mon-wl-actions {
  display    : flex;
  align-items: center;
  gap        : 4px;
  flex-shrink: 0;
}

/* ── §32.12 — Response Log ─────────────────────────────────── */
.mon-response-log {
  max-height: 220px;
  overflow-y: auto;
  padding   : 8px 12px;
}

.mon-log-entry {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 5px 0;
  border-bottom: var(--mon-border);
  font-size    : .72rem;
  flex-wrap    : wrap;
}

.mon-log-entry:last-child { border-bottom: none; }

.mon-log-time {
  color      : var(--mon-muted);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}

.mon-log-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  flex-shrink  : 0;
}

.mon-log-asset { font-weight: 700; color: var(--mon-text); flex-shrink: 0; }

.mon-log-msg {
  color         : var(--mon-muted);
  flex          : 1;
  min-width     : 0;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.mon-log-wf { color: #7c3aed; flex-shrink: 0; }

/* ── §32.13 — Daily Digest ─────────────────────────────────── */
.mon-digest-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 16px 10px;
  border-bottom  : var(--mon-border);
}

.mon-digest-title {
  font-size  : .9rem;
  font-weight: 700;
  color      : var(--mon-text);
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.mon-digest-actions { display: flex; gap: 6px; }

.mon-digest-kpi-row {
  display  : flex;
  flex-wrap: wrap;
  gap      : 8px;
  padding  : 12px 16px;
}

.mon-digest-kpi {
  flex         : 1;
  min-width    : 70px;
  text-align   : center;
  padding      : 8px 6px;
  border-radius: 8px;
  background   : var(--mon-bg-2);
  border-bottom: 2px solid transparent;
}

.mon-digest-kpi-val {
  font-size  : 1.3rem;
  font-weight: 900;
  color      : var(--mon-text);
}

.mon-digest-kpi-label {
  font-size     : .62rem;
  color         : var(--mon-muted);
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.mon-digest-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap                  : 8px;
  padding              : 0 16px 12px;
}

.mon-digest-section {
  background   : var(--mon-bg-2);
  border-radius: 8px;
  padding      : 10px;
}

.mon-digest-section-title {
  font-size    : .75rem;
  font-weight  : 800;
  color        : var(--mon-text);
  display      : flex;
  align-items  : center;
  gap          : 5px;
  margin-bottom: 8px;
}

.mon-digest-row {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 3px 0;
  font-size      : .72rem;
  border-bottom  : var(--mon-border);
}

.mon-digest-row:last-child { border-bottom: none; }
.mon-digest-row-name       { color: var(--mon-text); font-weight: 600; }
.mon-digest-row-val        { font-weight: 800; }
.mon-digest-empty          { font-size: .72rem; color: var(--mon-muted); text-align: center; padding: 8px 0; }

.mon-digest-table-wrap {
  padding    : 0 16px 12px;
  overflow-x : auto;
}

.mon-digest-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : .75rem;
}

.mon-digest-table th {
  text-align    : left;
  padding       : 6px 8px;
  color         : var(--mon-muted);
  font-weight   : 700;
  text-transform: uppercase;
  font-size     : .65rem;
  letter-spacing: .4px;
  border-bottom : var(--mon-border);
}

.mon-digest-table td {
  padding      : 6px 8px;
  color        : var(--mon-text);
  border-bottom: var(--mon-border);
}

.mon-digest-table tr:last-child td { border-bottom: none; }
.mon-digest-table tr:hover td      { background: rgba(99,102,241,.04); }

.mon-digest-footer {
  padding    : 8px 16px;
  text-align : center;
  font-size  : .65rem;
  color      : var(--mon-muted);
  border-top : var(--mon-border);
}

/* ── §32.14 — Empty & Loading States ──────────────────────── */
.mon-empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 32px 16px;
  gap            : 10px;
  color          : var(--mon-muted);
  text-align     : center;
  font-size      : .82rem;
}

.mon-empty-state i { font-size: 2rem; opacity: .35; }
.mon-empty-state p { margin: 0; line-height: 1.6; }

.mon-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 24px;
  color          : var(--mon-muted);
  font-size      : .82rem;
}

/* ── §32.15 — Utility Helpers ──────────────────────────────── */

/* Sidebar nav flash — alerte critique visible dans la nav */
.ab-nav-item-flash { animation: monNavFlash .4s ease 3; }

@keyframes monNavFlash {
  0%, 100% { background: transparent; }
  50%      { background: rgba(239,68,68,.12); }
}

/* Bouton compact */
.ab-btn-sm {
  padding   : 4px 10px !important;
  font-size : .75rem  !important;
}

/* Alerte snoozée */
.mon-alert-snoozed { opacity: .45; filter: grayscale(.6); }

/* ── §32.16 — Scrollbars (Monitor zones) ──────────────────── */
.mon-alert-feed::-webkit-scrollbar,
.mon-watchlist-list::-webkit-scrollbar,
.mon-response-log::-webkit-scrollbar        { width: 4px; }

.mon-alert-feed::-webkit-scrollbar-track,
.mon-watchlist-list::-webkit-scrollbar-track,
.mon-response-log::-webkit-scrollbar-track  { background: transparent; }

.mon-alert-feed::-webkit-scrollbar-thumb,
.mon-watchlist-list::-webkit-scrollbar-thumb,
.mon-response-log::-webkit-scrollbar-thumb  {
  background   : rgba(99,102,241,.2);
  border-radius: 4px;
}

/* ── §32.17 — Dark Mode Adjustments (Monitor) ─────────────── */
body.dark-mode .mon-card,
body.dark-mode .mon-kpi-card,
body.dark-mode .mon-alert-card,
body.dark-mode .mon-watchlist-item {
  background  : rgba(17,24,39,.88);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .mon-kpi-card:hover,
body.dark-mode .mon-alert-card:hover,
body.dark-mode .mon-watchlist-item:hover {
  border-color: rgba(99,102,241,.25);
}

body.dark-mode .mon-alert-body      { background: rgba(255,255,255,.02); }
body.dark-mode .mon-heat-cell       { border-color: rgba(255,255,255,.07); }
body.dark-mode .mon-digest-section  { background: rgba(255,255,255,.04); }
body.dark-mode .mon-digest-kpi      { background: rgba(255,255,255,.04); }
body.dark-mode .mon-filter-pill     { background: rgba(255,255,255,.06); color: #94a3b8; }
body.dark-mode .mon-trigger-check   { color: #e2e8f0; }
body.dark-mode .mon-input,
body.dark-mode .mon-preset-select   { background: rgba(255,255,255,.05); color: #e2e8f0; }
body.dark-mode .mon-action-btn      { background: rgba(99,102,241,.12);  }
body.dark-mode .mon-digest-table tr:hover td { background: rgba(99,102,241,.08); }

/* ── §32.18 — Responsive (Monitor) ────────────────────────── */
@media (max-width: 1100px) {
  .mon-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mon-kpi-row        { grid-template-columns: repeat(3, 1fr); }
  .mon-heatmap-grid   { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }
  .mon-trigger-grid   { grid-template-columns: 1fr; }
  .mon-form-row       { flex-direction: column; }
  .mon-input-sm       { max-width: 100%; }
  .mon-digest-grid    { grid-template-columns: 1fr; }
  .mon-watchlist-item { flex-direction: column; }
  .mon-alert-feed     { max-height: 360px; }
  .mon-watchlist-list { max-height: 280px; }
}

@media (max-width: 480px) {
  .mon-kpi-row    { grid-template-columns: repeat(2, 1fr); }
  .mon-kpi-val    { font-size: 1.3rem; }
  .mon-heat-cell  { min-height: 64px; }
}

/* ─────────────────────────────────────────────
   END — §32 AGENT MONITOR
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   §34 — RESCUE FIX: MCP TOOLS GRID (haute spécificité, fin de fichier)
   À coller en tout dernier dans agent-builder.css
═══════════════════════════════════════════════════════════════ */

#view-tools.ab-view.ab-view-active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#view-tools .ab-view-header,
#view-tools .ab-tools-stats-bar,
#view-tools .ab-tools-search-wrap {
  flex-shrink: 0 !important;
}

#view-tools #abToolsGrid.ab-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  padding: 0 20px 24px !important;
  flex: 1 1 auto !important;
  min-height: 300px !important;
  overflow-y: auto !important;
  align-content: start !important;
  box-sizing: border-box !important;
}

#view-tools .ab-tool-category-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  min-height: 140px !important;
}

body.dark-mode #view-tools .ab-tool-category-card {
  background: #111827 !important;
  border-color: rgba(255,255,255,.08) !important;
}

#view-tools .ab-tool-cat-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(0,0,0,.02) !important;
}

body.dark-mode #view-tools .ab-tool-cat-header {
  border-bottom-color: rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.03) !important;
}

#view-tools .ab-tool-cat-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

#view-tools .ab-tool-cat-icon i {
  font-size: 16px !important;
  line-height: 1 !important;
}

#view-tools .ab-tool-cat-info {
  flex: 1 !important;
  min-width: 0 !important;
}

#view-tools .ab-tool-cat-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.dark-mode #view-tools .ab-tool-cat-name {
  color: #e2e8f0 !important;
}

#view-tools .ab-tool-cat-count {
  font-size: 10px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

#view-tools .ab-tool-chips-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  flex: 1 !important;
}

#view-tools .ab-tool-chip-item {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  background: rgba(99,102,241,.08) !important;
  color: #6366f1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .15s ease !important;
}

body.dark-mode #view-tools .ab-tool-chip-item {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.35) !important;
  color: #a5b4fc !important;
}

#view-tools .ab-tool-chip-item:hover {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
}

/* Stats bar visibility */
#view-tools .ab-tools-stat-val {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  background: none !important;
}

body.dark-mode #view-tools .ab-tools-stat-val {
  color: #818cf8 !important;
  -webkit-text-fill-color: #818cf8 !important;
}

#view-tools .ab-tools-stat-label {
  color: #64748b !important;
}/* ═══════════════════════════════════════════════════════════════
   §35 — RESCUE FIX v2 : scroll interne des cards + réparation filtre
   À coller APRÈS le bloc §34
═══════════════════════════════════════════════════════════════ */

#view-tools .ab-tool-category-card {
  min-height: unset !important;
  max-height: none !important;   /* pas de limite */
  height: auto !important;
  overflow: visible !important;
}

#view-tools .ab-tool-chips-list {
  overflow-y: visible !important;
  max-height: none !important;
}

#view-tools .ab-tool-chips-list {
  overflow-y: auto !important;
  max-height: 270px !important;   /* 340px - header (~70px) */
  align-content: flex-start !important;
}

/* Scrollbar fine et discrète dans les chips */
#view-tools .ab-tool-chips-list::-webkit-scrollbar {
  width: 5px !important;
}
#view-tools .ab-tool-chips-list::-webkit-scrollbar-track {
  background: transparent !important;
}
#view-tools .ab-tool-chips-list::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.3) !important;
  border-radius: 10px !important;
}

/* ── FIX 2 : Réparer le filtre de recherche (priorité absolue à .ab-hidden) ── */
#view-tools .ab-tool-category-card.ab-hidden {
  display: none !important;
}

/* Sécurité supplémentaire : même chose pour tout élément caché dans #view-tools */
#view-tools .ab-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   §36 — TOOL DETAIL MODAL (Agent Builder)
═══════════════════════════════════════════════════════════════ */

.ab-tool-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}

.ab-tool-modal-overlay.open {
  display: flex !important;
  animation: abFadeIn .2s ease;
}

.ab-tool-modal {
  background: var(--ab-surface-solid, #fff);
  border: 1.5px solid var(--ab-border-strong, rgba(0,0,0,.11));
  border-radius: var(--ab-radius-2xl, 20px);
  box-shadow: var(--ab-shadow-xl, 0 24px 64px rgba(0,0,0,.12));
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  animation: abFadeIn .2s ease;
}

body.dark-mode .ab-tool-modal { background: #1e293b; }

.ab-tool-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ab-border, rgba(0,0,0,.07));
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}

.ab-tool-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ab-tool-modal-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  width: fit-content;
  background: rgba(99,102,241,.12);
  color: #6366f1;
  text-transform: capitalize;
}

.ab-tool-modal-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ab-text, #0f172a);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

.ab-tool-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--ab-bg-alt, #f8fafc);
  color: var(--ab-text-muted, #64748b);
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .15s;
  flex-shrink: 0;
}

.ab-tool-modal-close:hover {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}

.ab-tool-modal-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ab-tool-modal-desc {
  font-size: 13px;
  color: var(--ab-text-muted, #64748b);
  line-height: 1.7;
}

.ab-tool-modal-params h4 {
  font-size: 12px;
  font-weight: 800;
  color: var(--ab-text, #0f172a);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ab-tool-modal-params h4 i { color: #6366f1; }

.ab-tool-modal-pre {
  background: var(--ab-bg-alt, #f8fafc);
  border: 1px solid var(--ab-border, rgba(0,0,0,.07));
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
  margin: 0;
}

body.dark-mode .ab-tool-modal-pre { background: rgba(0,0,0,.3); }

.ab-tool-modal-pre code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ab-text, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
}

body.dark-mode .ab-tool-modal-pre code { color: #e2e8f0; }

.ab-tool-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ab-tool-modal-btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg,#667eea,#764ba2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 10px rgba(99,102,241,.3);
  min-width: 200px;
}

.ab-tool-modal-btn-primary:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

.ab-tool-modal-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border: 1.5px solid var(--ab-border-strong, rgba(0,0,0,.11));
  border-radius: 12px;
  background: var(--ab-surface-solid, #fff);
  color: var(--ab-text-muted, #64748b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
}

.ab-tool-modal-btn-secondary:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: rgba(99,102,241,.06);
}

@media (max-width: 480px) {
  .ab-tool-modal { max-width: 100%; border-radius: 16px; }
  .ab-tool-modal-actions { flex-direction: column; }
  .ab-tool-modal-btn-primary { min-width: unset; }
}

/* ═══════════════════════════════════════════════════════════════
   §37 — AMBIENT ANIMATED BACKGROUND (Chat Welcome Screen)
   Prefix : ab-ambient-
═══════════════════════════════════════════════════════════════ */

.ab-ambient-bg {
  position       : absolute;
  inset          : 0;
  overflow       : hidden;
  pointer-events : none;
  z-index        : 0;
  opacity        : 1;
  transition     : opacity .6s ease, filter .6s ease;
}

/* État "chat actif" — le fond disparaît en fondu */
.ab-ambient-bg.ab-ambient-hidden {
  opacity : 0;
  filter  : blur(20px);
}

/* S'assure que le contenu du chat passe TOUJOURS au-dessus du fond */
.ab-messages {
  position: relative;
  z-index : 1;
}

/* ── Grille subtile en fond (effet profondeur) ─────────────── */
.ab-ambient-grid {
  position  : absolute;
  inset     : -10%;
  background-image:
    linear-gradient(rgba(99,102,241,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
}

body.dark-mode .ab-ambient-grid {
  background-image:
    linear-gradient(rgba(129,140,248,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,140,248,.06) 1px, transparent 1px);
}

/* ── Formes linéaires flottantes (traits diffus au lieu de points) ── */
.ab-ambient-blob {
  position     : absolute;
  border-radius: 999px;      /* ⬅ CHANGÉ : forme en "pilule" allongée au lieu du cercle */
  filter       : blur(70px);
  opacity      : .55;
  will-change  : transform;
}

.ab-ambient-blob-1 {
  width      : 620px;         /* ⬅ CHANGÉ : très large */
  height     : 140px;         /* ⬅ CHANGÉ : peu épais */
  top        : -60px;
  left       : -140px;
  background : linear-gradient(100deg, #667eea, transparent 75%);
  transform  : rotate(-18deg);
  animation  : abWaveFloat1 18s ease-in-out infinite;
}

.ab-ambient-blob-2 {
  width      : 560px;
  height     : 120px;
  top        : 14%;
  right      : -180px;
  background : linear-gradient(-100deg, #764ba2, transparent 75%);
  transform  : rotate(14deg);
  animation  : abWaveFloat2 22s ease-in-out infinite;
}

.ab-ambient-blob-3 {
  width      : 520px;
  height     : 110px;
  bottom     : -80px;
  left       : 10%;
  background : linear-gradient(95deg, #06b6d4, transparent 75%);
  transform  : rotate(10deg);
  animation  : abWaveFloat3 26s ease-in-out infinite;
  opacity    : .40;
}

.ab-ambient-blob-4 {
  width      : 480px;
  height     : 100px;
  bottom     : 8%;
  right      : -60px;
  background : linear-gradient(-90deg, #8b5cf6, transparent 75%);
  transform  : rotate(-12deg);
  animation  : abWaveFloat4 20s ease-in-out infinite;
  opacity    : .38;
}

/* Dark mode — traits plus lumineux pour ressortir sur fond sombre */
body.dark-mode .ab-ambient-blob-1 { background: linear-gradient(100deg, #818cf8, transparent 75%); opacity: .35; }
body.dark-mode .ab-ambient-blob-2 { background: linear-gradient(-100deg, #a78bfa, transparent 75%); opacity: .32; }
body.dark-mode .ab-ambient-blob-3 { background: linear-gradient(95deg, #22d3ee, transparent 75%); opacity: .25; }
body.dark-mode .ab-ambient-blob-4 { background: linear-gradient(-90deg, #c084fc, transparent 75%); opacity: .25; }

/* ── Animations de flottement type "vagues" ──────────────────── */
@keyframes abWaveFloat1 {
  0%, 100% { transform: rotate(-18deg) translate(0, 0)      scale(1);    }
  25%      { transform: rotate(-18deg) translate(60px, 40px) scale(1.08); }
  50%      { transform: rotate(-18deg) translate(20px, 90px) scale(0.95); }
  75%      { transform: rotate(-18deg) translate(-40px, 30px) scale(1.05);}
}

@keyframes abWaveFloat2 {
  0%, 100% { transform: rotate(14deg) translate(0, 0)       scale(1);    }
  30%      { transform: rotate(14deg) translate(-50px, 60px) scale(0.92); }
  60%      { transform: rotate(14deg) translate(-90px, -20px) scale(1.1); }
}

@keyframes abWaveFloat3 {
  0%, 100% { transform: rotate(10deg) translate(0, 0)      scale(1);    }
  40%      { transform: rotate(10deg) translate(70px, -50px) scale(1.12); }
  70%      { transform: rotate(10deg) translate(30px, -90px) scale(0.9); }
}

@keyframes abWaveFloat4 {
  0%, 100% { transform: rotate(-12deg) translate(0, 0)       scale(1);    }
  35%      { transform: rotate(-12deg) translate(-60px, -40px) scale(1.06); }
  65%      { transform: rotate(-12deg) translate(-20px, 40px)  scale(0.94); }
}

/* ── Réduction de mouvement (accessibilité) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ab-ambient-blob { animation: none; }
}

/* ── Responsive — formes plus petites sur mobile pour la performance ── */
@media (max-width: 768px) {
  .ab-ambient-blob-1, .ab-ambient-blob-2,
  .ab-ambient-blob-3, .ab-ambient-blob-4 {
    filter: blur(50px);
  }
  .ab-ambient-blob-1 { width: 380px; height: 90px; }
  .ab-ambient-blob-2 { width: 340px; height: 80px; }
  .ab-ambient-blob-3 { width: 320px; height: 76px; }
  .ab-ambient-blob-4 { width: 300px; height: 70px; }
}

/* ══════════════════════════════════════════════════════════════════
   SWARM — LIGHT MODE CLARITY
══════════════════════════════════════════════════════════════════ */
body:not(.dark-mode) .sw-canvas-container,
body:not(.dark-mode) #sw-canvas-wrap,
body:not(.dark-mode) .sw-svg,
body:not(.dark-mode) .sw-bg {
    background: #f8fafc !important;
}
body:not(.dark-mode) .sw-svg .sw-boundary {
    stroke: rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .sw-node-g text {
    fill: #1e293b !important;
}
body:not(.dark-mode) .sw-minimap-canvas,
body:not(.dark-mode) .sw-minimap {
    background: #eef2f7 !important;
    border-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .sw-output-bar,
body:not(.dark-mode) #sw-output-body {
    background: #ffffff !important;
    color: #1e293b !important;
    border-top-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .sw-output-header {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
body:not(.dark-mode) .sw-output-title { color: #1e293b !important; }
body:not(.dark-mode) #sw-output-body p { filter: brightness(0.75); }
body:not(.dark-mode) .sw-toolbar {
    background: #ffffff !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .sw-status-bar {
    background: #f8fafc !important;
    color: #475569 !important;
    border-top-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .sw-history-panel,
body:not(.dark-mode) .sw-inspector-panel {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.08) !important;
    color: #1e293b !important;
}
body:not(.dark-mode) .sw-history-item,
body:not(.dark-mode) .sw-inspector-input {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #1e293b !important;
}

/* ══════════════════════════════════════════════════════════════════
   SWARM — CHAT REDIRECT BANNER
══════════════════════════════════════════════════════════════════ */
.sw-chat-redirect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(99,102,241,.10);
  border-top: 1px solid rgba(99,102,241,.25);
  border-bottom: 1px solid rgba(99,102,241,.25);
  font-size: 12.5px;
  flex-wrap: wrap;
}

/* ── Dark mode (défaut du site) ── */
.sw-chat-redirect-banner,
.sw-chat-redirect-content span,
.sw-chat-redirect-close {
  color: #e2e8f0;
}

/* ── Light mode override — cible explicitement tous les enfants ── */
body:not(.dark-mode) .sw-chat-redirect-banner {
  background: #eef2ff !important;
  border-top-color: rgba(99,102,241,.3) !important;
  border-bottom-color: rgba(99,102,241,.3) !important;
}
body:not(.dark-mode) .sw-chat-redirect-banner,
body:not(.dark-mode) .sw-chat-redirect-content,
body:not(.dark-mode) .sw-chat-redirect-content span,
body:not(.dark-mode) .sw-chat-redirect-close {
  color: #1e293b !important;
}
body:not(.dark-mode) .sw-chat-redirect-close {
  opacity: .55;
}
body:not(.dark-mode) .sw-chat-redirect-close:hover {
  opacity: 1;
}

/* Le bouton "Open in Chat" reste blanc sur fond dégradé dans les 2 modes */
.sw-chat-redirect-btn,
.sw-chat-redirect-btn i,
body:not(.dark-mode) .sw-chat-redirect-btn {
  color: #ffffff !important;
}
.sw-chat-redirect-content { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.sw-chat-redirect-actions { display: flex; align-items: center; gap: 6px; }
.sw-chat-redirect-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; border: none;
    background: linear-gradient(135deg,#667eea,#764ba2);
    color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sw-chat-redirect-close {
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: .6; padding: 4px 8px;
}
.sw-history-item-open-hint {
    margin-left: auto; color: #6366f1 !important; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   SWARM — FULL MOBILE RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .sw-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
        height: auto;
    }
    .sw-toolbar-left,
    .sw-toolbar-center,
    .sw-toolbar-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .sw-palette-group {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        max-width: 100%;
        scrollbar-width: none;
    }
    .sw-palette-group::-webkit-scrollbar { display: none; }
    .sw-palette-btn { flex-shrink: 0; }
    .sw-palette-label { display: none; }

    .sw-swarm-name-wrap { width: 100%; }
    .sw-swarm-name-input { width: 100%; min-width: 0; }

    .sw-toolbar-right {
        justify-content: space-between;
    }
    .sw-zoom-group { order: 2; }
    .sw-run-group { order: 1; margin-left: auto; }
    .sw-tool-btn span { display: none; }
    .sw-tool-btn { padding: 8px 10px; }

    /* Workspace: panels become full-screen overlays */
    .sw-workspace { position: relative; }
    .sw-inspector-panel,
    .sw-history-panel {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 88vw;
        max-width: 360px;
        z-index: 500;
        transform: translateX(100%);
        transition: transform .25s ease;
        box-shadow: -8px 0 24px rgba(0,0,0,.3);
    }
    .sw-history-panel {
        left: 0; right: auto;
        transform: translateX(-100%);
    }
    .sw-inspector-panel.sw-inspector-visible,
    .sw-history-panel.sw-history-visible {
        transform: translateX(0);
    }

    /* Output/log panel: full width bottom sheet */
    .sw-output-bar {
        max-height: 50vh;
    }
    .sw-output-body { font-size: 11px; }

    /* Status bar: hide hint text on mobile */
    .sw-status-hint { display: none; }
    .sw-status-bar { font-size: 10px; padding: 4px 8px; flex-wrap: wrap; }

    /* Chat redirect banner stacked */
    .sw-chat-redirect-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .sw-chat-redirect-actions { justify-content: flex-end; }

    /* Run modal full screen on mobile */
    .sw-run-modal { width: 94vw; max-width: none; }

    /* Minimap smaller / collapsible by default */
    .sw-minimap { width: 100px; height: 68px; }
    .sw-minimap-canvas { width: 100px !important; height: 68px !important; }
}

@media (max-width: 480px) {
    .sw-palette-btn i { font-size: 13px; }
    .sw-toolbar-divider { display: none; }
    .sw-zoom-level { display: none; }
    .sw-run-btn span { display: none; }
    .sw-run-btn { padding: 8px 12px; }
}

.ab-cmd-provider-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
}

/* Message utilisateur : avatar à droite, bulle alignée à droite */
.ab-message-user {
  flex-direction: row !important;
  justify-content: flex-end;
}
.ab-message-user .ab-message-body {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ab-message-user .ab-message-avatar-user {
  order: 2;
}
.ab-message-user .ab-message-header {
  flex-direction: row-reverse;
}
.ab-message-content-user {
  text-align: left;
}

/* Logo IA dans l'avatar assistant */
.ab-message-avatar-assistant {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-message-avatar-assistant img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Avatar utilisateur — cercle parfait, sans fond */
.ab-message-avatar-user {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-message-avatar-user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Avatar assistant — cercle parfait, sans fond blanc, logo bien centré */
.ab-message-avatar-assistant {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-message-avatar-assistant img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  padding: 0 !important;
  background: transparent !important;
  display: block;
}

/* ── Send Button — Thin Continuous Ring Spinner ─────────────── */
.ab-send-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ab-send-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes ab-send-spin {
  to { transform: rotate(360deg); }
}

/* Variante pour boutons avec fond clair (si besoin, ex: ab-btn-ghost) */
.ab-send-spinner-dark {
  border-color: rgba(99, 102, 241, 0.25);
  border-top-color: #6366f1;
}

.aan-agent-cell-icon img,
.aan-rank-icon img {
    display: block;
}
#aanQuotaWidget .aan-kpi-body { width: 100%; }

.ab-history-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ab-history-item-title-text {
  font-weight: 800;
  color: var(--mcp-text, #1e293b);
}
.ab-history-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* Garde-fou anti-widgets FX Analyst résiduels sur Agent Builder */
#fxChatFab,
#fxChatPanel {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   TRI-LOGO — Icône combinée Claude / OpenAI / Gemini
   Avec rotation automatique toutes les 5 secondes
   ═══════════════════════════════════════════════════════ */

/* ── Variante par défaut (sidebar, 20px) ── */
.ab-tri-logo {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  animation: ab-tri-container-spin 5s ease-in-out infinite;
}

.ab-tri-logo-img {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  border: 1.5px solid var(--ab-sidebar-bg, #0f172a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 50%;
  /* Contre-rotation pour garder chaque logo bien droit pendant le spin */
  animation: ab-tri-counter-spin 5s ease-in-out infinite;
}

/* Positions triangulaires */
.ab-tri-logo-c { top: 0;    left: 4px; z-index: 3; }
.ab-tri-logo-o { bottom: 0; left: 0;   z-index: 2; }
.ab-tri-logo-g { bottom: 0; right: 0;  z-index: 1; }

/* ── Keyframes : rotation rapide toutes les 5s (dernier 16% du cycle) ── */
@keyframes ab-tri-container-spin {
  0%, 82%   { transform: rotate(0deg); }
  100%      { transform: rotate(360deg); }
}
@keyframes ab-tri-counter-spin {
  0%, 82%   { transform: rotate(0deg); }
  100%      { transform: rotate(-360deg); }
}

/* Sidebar collapsed — recentrer proprement */
.ab-sidebar-collapsed .ab-tri-logo {
  margin: 0 auto;
}

/* Light mode — bordure blanche */
body:not(.dark-mode) .ab-tri-logo-img {
  border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════
 VARIANTE LARGE — Affichée sur la page "My Agents"
 ═══════════════════════════════════════════════════════ */
.ab-tri-logo-lg {
  width: 40px;
  height: 40px;
  animation-duration: 5s;
}
.ab-tri-logo-lg .ab-tri-logo-img {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
  animation-duration: 5s;
}
.ab-tri-logo-lg .ab-tri-logo-c { top: 0;    left: 8px; }
.ab-tri-logo-lg .ab-tri-logo-o { bottom: 0; left: 0;   }
.ab-tri-logo-lg .ab-tri-logo-g { bottom: 0; right: 0;  }

/* ── Bannière "Powered by" sur la page My Agents ── */
.abu-tri-logo-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(118,75,162,.05));
  border: 1px solid rgba(99,102,241,.15);
}
.abu-tri-logo-banner-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--mcp-text, #1e293b);
}
.abu-tri-logo-banner-sub {
  font-size: 11px;
  color: var(--mcp-text-muted, #64748b);
  font-weight: 500;
  display: block;
  margin-top: 2px;
}

/* Pause de la rotation au survol (optionnel, plus élégant) */
.abu-tri-logo-banner:hover .ab-tri-logo,
.abu-tri-logo-banner:hover .ab-tri-logo-img {
  animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════
   THINKING BLOCK — Identique à advanced-analysis.js (.aa-think)
   Adapté au namespace ab- + logo dynamique selon modèle sélectionné
   ══════════════════════════════════════════════════════════ */
   .ab-think {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
body.dark-mode .ab-think { background: #16181d; border-color: #2a2d35; }
.ab-think.is-active {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ab-think-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.ab-think-header:hover { background: #f9fafb; }
body.dark-mode .ab-think-header:hover { background: rgba(255,255,255,0.03); }
/* ── Icône : anneau spinner fixe + logo à double révélation ─── */
.ab-think-icon {
    position: relative;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ab-think-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.6px solid #e5e7eb;
    border-top-color: #111827;
    animation: abRingSpin 0.85s linear infinite;
    opacity: 1;
    transition: opacity .3s ease;
}
body.dark-mode .ab-think-ring { border-color: #333640; border-top-color: #f3f4f6; }
.ab-think:not(.is-active) .ab-think-ring { opacity: 0; }
@keyframes abRingSpin { to { transform: rotate(360deg); } }
@property --think-radius {
    syntax: '';
    inherits: false;
    initial-value: 0%;
}
@property --think-angle {
    syntax: '';
    inherits: false;
    initial-value: 0deg;
}
.ab-think-logo {
    width: 13px; height: 13px;
    object-fit: contain;
    display: block;
    filter: grayscale(100%) contrast(1.1);
    opacity: 0.85;
    transition: opacity .3s ease;
--think-radius: 0%;
--think-angle: 0deg;

-webkit-mask-image:
    radial-gradient(circle, #000 62%, transparent 64%),
    conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));
        mask-image:
    radial-gradient(circle, #000 62%, transparent 64%),
    conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));

-webkit-mask-size: var(--think-radius) var(--think-radius), 100% 100%;
        mask-size: var(--think-radius) var(--think-radius), 100% 100%;
-webkit-mask-repeat: no-repeat, no-repeat;
        mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, center;
        mask-position: center, center;

-webkit-mask-composite: source-in;
        mask-composite: intersect;

}
.ab-think.is-active .ab-think-logo {
    animation: abLogoReveal 1.6s cubic-bezier(.45,0,.55,1) infinite;
}
.ab-think:not(.is-active) .ab-think-logo {
    --think-radius: 160%;
    --think-angle: 360deg;
    opacity: 1;
}
@keyframes abLogoReveal {
    0%   { --think-radius: 0%;   --think-angle: 0deg;   opacity: 0;    }
    12%  { opacity: 1; }
    55%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
    78%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
    100% { --think-radius: 160%; --think-angle: 360deg; opacity: 0.15; }
}
.ab-think-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    gap: 2px;
}
body.dark-mode .ab-think-label { color: #d1d5db; }
.ab-think-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
.ab-think-dots i {
    width: 3px; height: 3px; border-radius: 50%;
    background: #9ca3af;
    animation: abThinkDot 1.1s ease-in-out infinite;
    display: inline-block;
}
.ab-think-dots i:nth-child(2) { animation-delay: .15s; }
.ab-think-dots i:nth-child(3) { animation-delay: .3s; }
.ab-think:not(.is-active) .ab-think-dots { display: none; }
@keyframes abThinkDot {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-1.5px); }
}
.ab-think-chev {
    font-size: 10px;
    color: #9ca3af;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.ab-think.is-open .ab-think-chev { transform: rotate(180deg); }
.ab-think-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.ab-think.is-open .ab-think-body { max-height: 260px; overflow-y: auto; }
.ab-think-text {
    padding: 2px 14px 14px 42px;
    font-size: 12px;
    line-height: 1.65;
    color: #6b7280;
    font-style: italic;
    white-space: pre-wrap;
    border-top: 1px solid #f1f2f4;
    margin-top: 2px;
    padding-top: 10px;
}
body.dark-mode .ab-think-text { color: #9199a6; border-top-color: #24262d; }

/* ── Thinking block — état statique persisté (historique / reload) ── */
.ab-think:not(.is-active) .ab-think-icon .ab-think-ring { display: none; }
.ab-think:not(.is-open) .ab-think-body { display: none; }
.ab-think.is-open .ab-think-body { display: block; }
.ab-think .ab-think-chev { transition: transform .2s; }
.ab-think.is-open .ab-think-chev { transform: rotate(180deg); }
.ab-think-text { white-space: pre-wrap; }

/* ═══ FIX CHIRURGICAL — Bulle assistant qui grandit correctement ═══ */

/* Le texte de la réponse (hors thinking) doit grandir librement */
[id^="text-"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block;
  width: 100%;
}

/* Le conteneur du contenu du message : jamais de hauteur fixe */
.ab-message-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Le body du message doit s'étirer avec son contenu, pas se fixer */
.ab-message-body {
  height: auto !important;
  max-height: none !important;
}

/* ⚠ NE PAS toucher .ab-think-body — il DOIT garder son overflow-y:auto
   + max-height:260px, sinon le thinking déborde visuellement en dehors
   de sa carte et donne l'illusion de "texte qui défile sur lui-même" */
.ab-think-body {
  max-height: 260px !important;
  overflow-y: auto !important;
}
.ab-think:not(.is-open) .ab-think-body {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Empêche l'ancrage de scroll du navigateur de "figer" la vue pendant
   les mutations DOM rapides du streaming (cause fréquente de l'effet
   ticker/scroll-sur-place) */
#chatMessages {
  overflow-anchor: none;
}