/* Native 3D stack, derived from the existing Brain catalogue. */
:root[data-theme=light]{--ink:#f3f2ee;--ink-raised:#faf9f5;--ink-high:#eae9e4;--line:#d9dad7;--line-soft:#e2e2dd;--card:linear-gradient(140deg,#fcfbf8,#f5f4ef)}
.bs-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.bs-header h1{font-size:36px;letter-spacing:-.045em;margin:6px 0}.bs-modes{display:flex;background:var(--ink-raised);border:1px solid var(--line);border-radius:15px;padding:4px}.bs-modes button{border:0;background:none;color:var(--text-dim);border-radius:11px;padding:0 20px;min-height:44px;font:inherit;font-size:12px}.bs-modes [aria-pressed=true]{background:var(--ink-high);color:var(--text);box-shadow:0 2px 8px #0002}.bs-modes button:disabled{opacity:.4;cursor:default}.bs-modes small{font-size:11px}
.bs-explorer{position:relative;isolation:isolate}.bs-stage{height:425px;position:relative;perspective:1200px;overflow:hidden;touch-action:pan-y;outline-offset:-3px;border-radius:24px}.bs-stage:before{content:"";position:absolute;inset:15% 12% 0;background:radial-gradient(ellipse at 50% 90%,#536bff24,transparent 65%);pointer-events:none}.bs-card{position:absolute;left:50%;top:28px;width:280px;height:352px;border:1px solid #7895cf59;border-radius:22px;background:linear-gradient(145deg,#18263b,#0e1626);color:var(--text);box-shadow:inset 0 1px 0 #ffffff22,0 22px 35px #0004;padding:25px;text-align:left;display:flex;flex-direction:column;gap:13px;transform:translateX(calc(-50% + var(--offset)*157px)) translateZ(calc(var(--distance)*-85px)) rotateY(var(--tilt));opacity:1;filter:brightness(calc(1 - var(--distance)*.09));transition:transform .48s cubic-bezier(.22,.8,.2,1),opacity .4s,border-color .4s;cursor:pointer;user-select:none}.bs-card.is-active{border-color:#91a8ff;box-shadow:inset 0 0 22px #617eff14,0 0 0 1px #8495ff20,0 0 35px #5e79ff29,0 25px 40px #0005}.bs-card-top{display:flex;justify-content:space-between;color:var(--text-dim);font-size:11px;letter-spacing:.04em}.bs-symbol{font-size:38px;display:block;margin-top:12px;line-height:1.2}.bs-card strong{display:block;font-size:27px;line-height:1.12;letter-spacing:-.035em}.bs-excerpt{font-size:13px;line-height:1.55;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.bs-card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim)}.bs-controls{display:flex;justify-content:center;align-items:center;gap:25px;margin:-8px 0 24px}.bs-controls button,.bs-relations button{background:var(--ink-raised);border:1px solid var(--line);color:var(--text);min-width:44px;min-height:44px;border-radius:12px;cursor:pointer}.bs-controls span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-dim);min-width:65px;text-align:center}.bs-details{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:24px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:24px;margin-bottom:20px}.bs-details h2{margin:8px 0;font-size:23px}.bs-details p{color:var(--text-dim);font-size:13px;line-height:1.65;margin:8px 0}.bs-details small{color:var(--text-faint);font-size:12px}.bs-relations>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.bs-relations button{padding:8px 12px;font-size:12px}.bs-open{background:var(--ink-high);color:var(--text);border:1px solid #759df36b;border-radius:12px;min-height:46px;padding:12px 18px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}.bs-search{margin:16px 0;border:1px solid var(--line);padding:20px;border-radius:18px;background:var(--ink-raised)}.bs-search[hidden]{display:none}.bs-search label{display:block;font-size:12px;margin-bottom:10px;color:var(--text-dim)}.bs-search input{width:100%;box-sizing:border-box;background:var(--ink);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:14px;font:inherit}.bs-search #bsResults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto;margin-top:14px}.bs-search #bsResults button{display:flex;flex-direction:column;gap:6px;min-height:55px;text-align:left;background:var(--ink-high);color:var(--text);border:0;border-radius:10px;padding:12px;cursor:pointer}.bs-search small{color:var(--text-dim)}.bs-workspace{grid-template-columns:minmax(0,1fr) 250px}.bs-workspace>#brainEditor:empty{display:none}.bs-memory summary{cursor:pointer;min-height:44px;line-height:44px}.bs-memory summary span{color:var(--text-faint);margin-left:10px}.bs-workspace #brainEditor{scroll-margin-top:20px;min-width:0}.bs-workspace .bm-area{min-height:330px;box-sizing:border-box;width:100%}.bs-workspace button{min-height:44px}.bs-empty{text-align:center;color:var(--text-dim);padding-top:120px}:root[data-theme=light] .bs-card{background:linear-gradient(145deg,#fcfbf8,#eeeeea);border-color:#c4ccd9;box-shadow:0 18px 35px #39404b12,inset 0 1px #fffc}:root[data-theme=light] .bs-card.is-active{border-color:#859bdd;box-shadow:0 12px 40px #6a80b922,0 0 0 1px #859bdd22}
@media(max-width:1050px){.bs-details{grid-template-columns:1fr 1fr}.bs-open{grid-column:1/-1}.bs-stage{height:395px}.bs-card{height:330px;width:250px;transform:translateX(calc(-50% + var(--offset)*125px)) translateZ(calc(var(--distance)*-100px)) rotateY(var(--tilt))}.bs-workspace{grid-template-columns:1fr}.bs-search #bsResults{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body[data-view=brain] #brainCanvas{min-width:0;padding-bottom:env(safe-area-inset-bottom,0px)}.bs-header{flex-wrap:wrap;gap:12px}.bs-header h1{font-size:29px}.bs-modes{width:100%}.bs-modes button{flex:1;padding:0 12px}.bs-stage{height:355px;margin:0 -12px}.bs-card{top:24px;width:235px;height:295px;padding:20px;gap:10px;transform:translateX(calc(-50% + var(--offset)*112px)) translateZ(calc(var(--distance)*-110px)) rotateY(var(--tilt))}.bs-symbol{font-size:28px;margin-top:4px}.bs-card strong{font-size:24px}.bs-excerpt{-webkit-line-clamp:3}.bs-details{grid-template-columns:1fr;padding:20px;gap:18px}.bs-open{width:100%}.bs-controls{margin-bottom:18px}.bs-search #bsResults{grid-template-columns:1fr}.bs-workspace .bm-ed-top{flex-wrap:wrap}.bs-workspace .bm-ed-top b{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.bs-card{transition:none!important}.bs-stage{scroll-behavior:auto}.bs-card:not(.is-active){transform:translateX(calc(-50% + var(--offset)*145px)) scale(.85)}}

/* ============================================================
   BRAIN CARDS V2 : types, couleurs d'accent, filtres, graphe
   La couleur ne touche que les accents (contour, halo, pastille,
   badge). Le fond et la typographie restent ceux de JARVIS.
   ============================================================ */
.bs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bs-filters button {
  --accent-type: var(--text-faint);
  font: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: transparent;
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.bs-filters button span { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bs-filters button:hover { color: var(--text); border-color: var(--line); }
.bs-filters button.is-on {
  color: var(--text); border-color: color-mix(in srgb, var(--accent-type) 55%, transparent);
  background: color-mix(in srgb, var(--accent-type) 10%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-type) 22%, transparent);
}
.bs-filters button.is-on span { color: var(--accent-type); }

[data-type="knowledge"] { --accent-type: #ff5db1; }
[data-type="rule"] { --accent-type: #2fe08a; }
[data-type="skill"] { --accent-type: #ffc63d; }
[data-type="workflow"] { --accent-type: #a97bff; }

.bs-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  color: var(--accent-type, var(--text-dim));
  border: 1px solid color-mix(in srgb, var(--accent-type, var(--line)) 45%, transparent);
  background: color-mix(in srgb, var(--accent-type, var(--ink-high)) 12%, transparent);
}
.bs-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent-type, var(--text-faint)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-type, transparent) 70%, transparent); }

/* Carte: le halo prend la couleur du type, la carte active brille plus. */
.bs-card { border-color: color-mix(in srgb, var(--accent-type, var(--line)) 28%, var(--line)); }
.bs-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-type, transparent) 30%, transparent);
  opacity: .8;
}
.bs-card.is-active {
  border-color: color-mix(in srgb, var(--accent-type, var(--accent)) 65%, transparent);
  box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 46px color-mix(in srgb, var(--accent-type, var(--accent)) 26%, transparent);
}
.bs-card .bs-symbol { text-shadow: 0 0 22px color-mix(in srgb, var(--accent-type, transparent) 45%, transparent); }

/* Panneau de detail */
.bs-detail-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bs-detail-main h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.bs-detail-main p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.bs-detail-main small { font-size: 11px; color: var(--text-faint); }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-chip { font-size: 10.5px; color: var(--text-dim); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-soft); }
.bs-relations-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bs-relations-head small { font-size: 11px; color: var(--text-faint); }
.bs-relations-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bs-relations-list button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--text-dim); cursor: pointer;
  padding: 7px 9px; border: 0; border-radius: 9px; background: transparent;
}
.bs-relations-list button:hover { background: var(--ink-high); color: var(--text); }
.bs-relations-list small { margin-left: auto; font-size: 10.5px; color: var(--text-faint); }

/* Graphe des connexions */
.bs-graph { width: 100%; height: auto; display: block; overflow: visible; }
.bs-edge { stroke: color-mix(in srgb, var(--accent-type, var(--line)) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.bs-node { fill: var(--ink-raised); stroke: var(--accent-type, var(--line)); stroke-width: 1.4; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-type, transparent) 45%, transparent)); }
.bs-node.is-center { r: 21; stroke-width: 2; }
.bs-node-center-label { fill: var(--text); font-size: 15px; text-anchor: middle; }
.bs-node-label { fill: var(--text-faint); font-size: 8.5px; text-anchor: middle; }
.bs-node-g { cursor: pointer; }
.bs-node-g:hover .bs-node, .bs-node-g:focus-visible .bs-node { fill: var(--ink-high); }
.bs-node-g:hover .bs-node-label { fill: var(--text); }
#bsResults button[data-type] span { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) { .bs-filters button, .bs-card { transition: none; } }

/* Le panneau passe a deux colonnes: identite a gauche, relations a droite. */
.bs-details { grid-template-columns: 1.05fr 1fr; align-items: start; }
.bs-relations .bs-relations-head { display: flex; flex-wrap: nowrap; margin-top: 0; }
.bs-relations .bs-relations-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin-top: 10px; }
.bs-relations .bs-relations-list button { min-width: 0; min-height: 36px; border: 0; background: transparent; padding: 7px 9px; }
.bs-relations .bs-relations-list button:hover { background: var(--ink-high); }
.bs-detail-main .bs-open { margin-top: 4px; }
@media (max-width: 1050px) { .bs-details { grid-template-columns: 1fr; } }
.bs-graph { max-width: 320px; margin: 4px auto 0; }