:root {
  --bg: #0a0e16;
  --panel: #101725;
  --panel2: #0d1420;
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.28);
  --text: #e2e8f0;
  --muted: #8fa1b8;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --r-outer: 12px;
  --r-inner: 7px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(2, 6, 23, 0.55);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
select, input { font: inherit; }

/* ---------- topbar ---------- */
#topbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d1526 0%, var(--bg) 100%);
}
#brand-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
#brand { flex-shrink: 0; }
#searchwrap { flex: 1; display: flex; gap: 6px; min-width: 200px; }
#brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#brand b { font-size: 15px; letter-spacing: 0.4px; }
#brand span { color: var(--accent); font-size: 11px; font-family: var(--mono); }
#stats { color: var(--muted); font-size: 11.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#searchwrap { flex: 1; display: flex; gap: 8px; min-width: 0; }
#q {
  flex: 1; min-width: 120px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-inner);
  padding: 8px 12px; outline: none;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}
#q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#q::placeholder { color: var(--muted); }
#go {
  padding: 8px 16px; border-radius: var(--r-inner);
  background: var(--accent); color: #06121f; font-weight: 600;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms;
}
#go:hover { opacity: 0.92; }
#go:active { transform: scale(0.96); }
#ask {
  padding: 8px 14px; border-radius: var(--r-inner); white-space: nowrap;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid rgba(251, 191, 36, 0.4); font-weight: 600; font-size: 13px;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms;
}
#ask:hover { opacity: 0.9; }
#ask:active { transform: scale(0.96); }
#ask[disabled] { opacity: 0.5; cursor: wait; }

/* réponse assistant */
#answercard {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--r-inner); padding: 12px 14px; margin-bottom: 12px;
}
#answercard .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--amber); }
#answercard .head .model { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
#answercard .head .warn { margin-left: auto; color: var(--muted); font-size: 10.5px; }
#answerbody { font-size: 13.5px; line-height: 1.62; color: #e2e8f0; white-space: pre-wrap; }
#answerbody sup a { color: var(--amber); text-decoration: none; font-weight: 700; padding: 0 1px; }
#answerbody sup a:hover { text-decoration: underline; }
#answersources { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
#answersources a {
  font-size: 11px; color: #cbd5e1; text-decoration: none;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
}
#answersources a:hover { border-color: var(--amber); color: var(--amber); }
#answercard .cur { display: inline-block; width: 7px; height: 14px; background: var(--amber);
  animation: blink 1s steps(2) infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #answercard .cur { animation: none; } }

/* ---------- filtres ---------- */
#topbar { overflow-x: hidden; }
#filters { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 6px; }
#filters select {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 6px; max-width: 190px; outline: none;
}
#filters select:focus { border-color: var(--accent); }
#filters label { color: var(--muted); font-size: 11px; margin-right: 2px; }
#reset {
  color: var(--muted); font-size: 12px; padding: 4px 8px;
  border-radius: 6px; border: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
#reset:hover { color: var(--text); border-color: var(--line-strong); }
#reset:active { transform: scale(0.96); }
#active-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px; padding: 1px 8px 1px 9px; font-size: 11px;
}
.chip button { color: inherit; opacity: 0.7; font-size: 12px; line-height: 1; }
.chip button:hover { opacity: 1; }

/* ---------- layout principal ---------- */
#main { display: flex; height: calc(100% - var(--top-h, 96px)); min-height: 0; }
#left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.tab {
  padding: 7px 16px 9px; border-radius: 9px 9px 0 0; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  display: inline-flex; gap: 7px; align-items: center;
  transition: color 150ms, background 150ms;
}
.tab svg { width: 15px; height: 15px; }
.tab[aria-selected="true"] { color: var(--text); background: var(--panel); border-color: var(--line); }
.tab:hover { color: var(--text); }
#views { flex: 1; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 0 var(--r-outer) 0 0; margin: 0 12px; position: relative; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }

/* graphe */
#graphview { overflow: hidden; border-radius: 0 var(--r-outer) 0 0; }
#graph { width: 100%; height: 100%; }
#glegend {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(10, 14, 22, 0.82); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--muted); z-index: 3;
}
#glegend .li { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#glegend .li.off { opacity: 0.35; }
#glegend img { width: 14px; height: 14px; }
#gcount { position: absolute; right: 10px; top: 8px; font: 11px var(--mono); color: var(--muted); z-index: 3; }
#ghint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; color: var(--muted); font-size: 11px; z-index: 3; pointer-events: none; }

/* nuage */
#cloudview { border-radius: 0 var(--r-outer) 0 0; }
#cloud { width: 100%; height: 100%; display: block; }
#cloudhint { position: absolute; left: 12px; top: 8px; color: var(--muted); font-size: 11px; z-index: 3; }

/* filtres favoris */
#save-filter { color: var(--amber); font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.08);
  transition: color 150ms, border-color 150ms, transform 120ms; white-space: nowrap; }
#save-filter:hover { border-color: var(--amber); }
#save-filter:active { transform: scale(.96); }
#filter-presets { display: flex; }
#filter-presets .preset {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 8px 2px 10px; border-radius: 999px;
  background: rgba(56,189,248,.08); color: var(--accent);
  border: 1px solid rgba(56,189,248,.25); cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 120ms;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
#filter-presets .preset:hover { background: rgba(56,189,248,.16); border-color: var(--accent); }
#filter-presets .preset:active { transform: scale(.96); }
#filter-presets .preset .del { color: var(--muted); font-size: 13px; line-height: 1; padding: 0 2px; }
#filter-presets .preset .del:hover { color: var(--danger); }
#filter-presets .empty-hint { font-size: 10.5px; color: var(--muted); }

/* onglet livres */
#booksview { border-radius: 0 var(--r-outer) 0 0; overflow-y: auto; padding: 12px 14px 30px; }
#booksbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; position: sticky; top: 0;
  background: linear-gradient(180deg, var(--panel) 75%, transparent); padding: 4px 0 10px; z-index: 2; }
#books-q { flex: 0 1 300px; background: var(--panel2); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 6px 10px; outline: none; }
#books-q:focus { border-color: var(--accent); }
#books-sort { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
#books-count { color: var(--muted); font: 11.5px var(--mono); margin-left: auto; }
#booksgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.book { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: 10px; display: flex; flex-direction: column; gap: 7px; transition: border-color 150ms; }
.book:hover { border-color: var(--line-strong); }
.book img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 5px; outline: 1px solid rgba(148,163,184,0.18); background: #0d1420; }
.book .t { font-size: 12.5px; font-weight: 650; line-height: 1.35; color: var(--text); }
.book .a { font-size: 11.5px; color: var(--muted); font-style: italic; }
.book .g { font-size: 11px; color: var(--accent); }
.book .m { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.book .pill { font: 10.5px var(--mono); color: #cdd7e4; background: rgba(148,163,184,0.12); border-radius: 4px; padding: 2px 6px; }
.book .pill.amb { color: var(--amber); background: var(--amber-soft); }
.book .ep { font-size: 10.5px; color: var(--muted); text-decoration: none; display: block; }
.book .ep:hover { color: var(--accent); }
.book .ep b { color: #b9c7da; font-weight: 600; }

/* frise chronologique */
#timeview { border-radius: 0 var(--r-outer) 0 0; position: relative; overflow: hidden; }
#time { width: 100%; height: 100%; display: block; cursor: crosshair; }
#timehint { position: absolute; left: 12px; top: 8px; color: var(--muted); font-size: 11px; z-index: 3; pointer-events: none; }
#timetip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 300px;
  background: rgba(10, 14, 22, 0.95); border: 1px solid var(--line-strong);
  border-radius: var(--r-inner); padding: 7px 10px; font-size: 12px; line-height: 1.45;
  box-shadow: var(--shadow-1); color: var(--text);
}
#timetip .d { color: var(--muted); font-size: 11px; font-family: var(--mono); }
#timetip .g { color: var(--accent); font-size: 11.5px; }

/* recherche */
#searchview { overflow-y: auto; border-radius: 0 var(--r-outer) 0 0; padding: 10px 12px 20px; }
#searchmeta { color: var(--muted); font-size: 12px; margin: 2px 2px 10px; }
.card {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: 10px 12px; margin-bottom: 10px;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.card:hover { border-color: var(--line-strong); }
.card .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.spk {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.25); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spk.host { background: var(--amber-soft); color: var(--amber); border-color: rgba(251, 191, 36, 0.25); }
.ts { font-family: var(--mono); font-size: 11px; color: var(--amber); text-decoration: none; }
.ts:hover { text-decoration: underline; }
.rrf { font: 10.5px var(--mono); color: var(--muted); margin-left: auto; white-space: nowrap; }
.card .etitle { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.card .etitle b { color: var(--text); font-weight: 600; }
.card .txt { font-size: 13.5px; color: #cbd5e1; }
.card .txt mark { background: rgba(251, 191, 36, 0.25); color: #fde68a; border-radius: 2px; padding: 0 1px; }
.card .foot { display: flex; gap: 8px; margin-top: 8px; }
.mini {
  font-size: 11.5px; color: var(--muted); padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  transition: color 150ms, border-color 150ms, transform 120ms;
}
.mini:hover { color: var(--accent); border-color: var(--accent); }
.mini:active { transform: scale(0.96); }
.mini.on { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); background: var(--amber-soft); }

/* ---------- panneau droit références ---------- */
#right {
  width: 378px; flex: none; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: var(--panel2);
}
#right h2 {
  margin: 0; padding: 10px 14px 8px; font-size: 12px; letter-spacing: 1.2px;
  color: var(--amber); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
#right h2 svg { width: 14px; height: 14px; }
#right h2 .n { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 11px; }
#refscroll { flex: 1; overflow-y: auto; padding: 10px 12px; }
.empty { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 32px; line-height: 1.7; }
#selbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; display: none;
}
#selbox.on { display: block; }
#selbox .t { font-weight: 600; margin-bottom: 3px; display: flex; gap: 8px; align-items: center; }
#selbox .t img { width: 18px; height: 18px; }
#selbox .meta { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
#selbox .row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#selbox .mini { font-size: 11px; }
.ref {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: 9px 11px; margin-bottom: 8px;
  animation: refin 220ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes refin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ref { animation: none; } }
.ref .head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ref .q1 { font-size: 12.5px; color: #cbd5e1; }
.ref .src { font-size: 11px; color: var(--muted); margin-top: 6px; }
.ref .del { margin-left: auto; color: var(--muted); font-size: 15px; line-height: 1; }
.ref .del:hover { color: var(--danger); }
#exportbar { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
#export {
  flex: 1; text-align: center; padding: 8px;
  border: 1px solid rgba(251, 191, 36, 0.35); color: var(--amber);
  border-radius: var(--r-inner); background: var(--amber-soft);
  font-size: 12.5px; font-weight: 600;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms;
}
#export:hover { opacity: 0.92; }
#export:active { transform: scale(0.96); }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- menu contextuel du graphe ---------- */
#ctxmenu {
  position: absolute; z-index: 40; min-width: 230px; max-width: 300px;
  background: rgba(13, 20, 32, 0.97); border: 1px solid var(--line-strong);
  border-radius: var(--r-inner); box-shadow: var(--shadow-1);
  padding: 5px; font-size: 13px;
}
#ctxmenu .ci {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px;
  border-radius: 5px; color: #dbe4f0; cursor: pointer; white-space: nowrap;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1);
}
#ctxmenu .ci:hover { background: rgba(56, 189, 248, 0.14); color: #e8f4ff; }
#ctxmenu .ci.ia { color: var(--amber); }
#ctxmenu .ci.ia:hover { background: rgba(251, 191, 36, 0.13); }
#ctxmenu .sep { height: 1px; background: var(--line); margin: 4px 8px; }
#ctxmenu .ttl { padding: 6px 10px 4px; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }

/* ---------- entités cliquables dans les textes ---------- */
.ent {
  color: #7dd3fc;
  border-bottom: 1px dotted rgba(125, 211, 252, 0.55);
  cursor: pointer;
  border-radius: 2px;
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms;
}
.ent:hover {
  background: rgba(56, 189, 248, 0.16);
  color: #bae6fd;
}
.trn-txt mark, .txt mark { background: rgba(251, 191, 36, 0.25); color: #fde68a; border-radius: 2px; padding: 0 1px; }

/* ---------- timeline par locuteur + audio player + rythme ---------- */
#tl-bar { position: relative; height: 56px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-inner); margin: 14px 0 6px; overflow: hidden; cursor: pointer; }
#tl-bar .seg { position: absolute; top: 8px; height: 16px; border-radius: 2px; min-width: 1px; transition: opacity 150ms; }
#tl-bar .seg.host { background: var(--amber); }
#tl-bar .seg.guest { background: var(--accent); }
#tl-bar .seg:hover { opacity: 0.7; }
#tl-bar .cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 2; display: none; }
#tl-bar .lbl { position: absolute; left: 6px; top: 2px; font-size: 9px; color: var(--muted); z-index: 1; }
#tl-bar .micro { position: absolute; top: 30px; height: 6px; background: rgba(251,191,36,.3); border-radius: 1px; min-width: 1px; }
#tl-rhythm { display: flex; gap: 6px; margin: 8px 0 0; flex-wrap: wrap; }
#tl-rhythm .pill { font: 10.5px var(--mono); padding: 3px 8px; border-radius: 4px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
#tl-rhythm .pill b { color: var(--amber); }
#audio-wrap { margin: 10px 0 4px; }
#audio-wrap audio { width: 100%; height: 36px; }
.trn-turn.playing { outline: 2px solid rgba(56,189,248,.5); outline-offset: 2px; }

/* ---------- page retranscription ---------- */
.trn-gsum, .trn-toc {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.07), rgba(56, 189, 248, 0.03));
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--r-inner);
  padding: 12px 16px; margin: 14px 0;
}
.trn-toc { background: rgba(251, 191, 36, 0.045); border-color: rgba(251, 191, 36, 0.25); }
.trn-gsum-t { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.trn-toc .trn-gsum-t { color: var(--amber); }
.trn-gsum p { margin: 0; font-size: 14px; line-height: 1.65; color: #d3dce8; }
.trn-toc ol { margin: 0; padding-left: 20px; }
.trn-toc li { margin: 3px 0; font-size: 13.5px; }
.trn-toc a { color: #d8c7a9; text-decoration: none; }
.trn-toc a:hover { color: var(--amber); text-decoration: underline; }
.trn-toc-ts { font-family: var(--mono); font-size: 11.5px; color: #927f56; margin-right: 4px; }
.trn-chap {
  margin: 30px 0 10px; padding: 10px 14px;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: var(--r-inner);
}
.trn-chap:first-of-type { margin-top: 8px; }
.trn-chap-h { display: flex; align-items: center; gap: 10px; }
.trn-chap-n {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #23170a; border-radius: 6px; font-size: 12px; font-weight: 700;
}
.trn-chap-t { font-size: 14.5px; font-weight: 650; color: #fdeec9; }
.trn-chap .ts { margin-left: auto; }
.trn-chap-r { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: #b9a97f; font-style: italic; }
.trn-page { overflow-y: auto; }
#trn-head {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, #0d1526 0%, rgba(13, 21, 38, 0.94) 85%, transparent);
  padding: 12px 18px 10px; margin-bottom: 4px;
}
.trn-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.trn-back {
  color: var(--accent); text-decoration: none; font-size: 13px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel2);
  transition: border-color 150ms;
}
.trn-back:hover { border-color: var(--accent); }
#trn-actions { margin-left: auto; display: flex; gap: 6px; }
#trn-title { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
.trn-meta { color: var(--muted); font-size: 12px; font-family: var(--mono); }
#trn-body { max-width: 880px; margin: 0 auto; padding: 0 18px 80px; }
#trn-layout { display: flex; gap: 0; max-width: 1320px; margin: 0 auto; align-items: flex-start; }
#trn-layout > #trn-body { flex: 1; min-width: 0; max-width: 880px; margin: 0; }
@media (max-width: 1100px) {
  #trn-layout { flex-direction: column; }
  #anpanel { position: relative; top: 0; max-height: none; margin: 14px 18px 0; width: auto; }
}

/* panneau d'analyse (transcript) */
#anpanel {
  flex: none; width: 350px; margin-left: 18px; position: sticky; top: 84px;
  align-self: flex-start; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-inner);
}
#anpanel.collapsed #an-tabs, #anpanel.collapsed #an-body { display: none; }
#an-toggle {
  align-self: flex-start; margin: 8px; padding: 6px 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  font-size: 12.5px; cursor: pointer;
}
#an-toggle:hover { border-color: var(--accent); }
#an-tabs { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--line); }
.antab {
  flex: 1; padding: 7px 4px 8px; font-size: 12.5px; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.antab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); background: rgba(56,189,248,0.06); }
.antab.sophe[aria-selected="true"] { color: var(--amber); border-bottom-color: var(--amber); background: rgba(251,191,36,0.08); }
.antab .n { font-family: var(--mono); font-size: 10.5px; opacity: 0.8; }
.antab.sophe { color: #d9b070; }
#an-body { overflow-y: auto; padding: 10px; flex: 1; min-height: 120px; }
.anview { display: none; }
.anview.on { display: block; }
.anitem {
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px;
}
.anitem.soph { border-left: 3px solid var(--amber); }
.anitem.fig { border-left: 3px solid var(--accent); }
.anitem .t {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 1px 7px; border-radius: 4px; margin-bottom: 5px;
  background: rgba(251,191,36,0.14); color: var(--amber);
}
.anitem.fig .t { background: var(--accent-soft); color: var(--accent); }
.anitem .q1 { color: #e8dcc8; font-style: italic; margin: 2px 0 4px; }
.anitem .who { color: var(--muted); font-size: 11px; }
.anitem .ex { color: #b9c7da; margin-top: 4px; line-height: 1.5; }
.anitem .jump { font-size: 11px; color: var(--accent); text-decoration: none; }
.anitem .jump:hover { text-decoration: underline; }
.anlegend { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.anlegend span {
  font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
  background: rgba(148,163,184,0.12); color: var(--muted);
}
.anlegend span b { color: var(--amber); }
#ancta {
  width: 100%; padding: 10px; border-radius: 7px; font-size: 13px; cursor: pointer;
  background: var(--amber-soft); border: 1px solid rgba(251,191,36,0.4); color: var(--amber);
}
#ancta[disabled] { opacity: 0.6; cursor: wait; }
.nerrow {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12.5px; cursor: pointer;
}
.nerrow:hover { border-color: var(--accent); }
.nerrow .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--accent); }
.trn-turn {
  border-left: 3px solid var(--spk, #64748b);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
  padding: 8px 14px 6px; margin: 9px 0;
}
.trn-turn.host { background: rgba(251, 191, 36, 0.05); }
.trn-turn.trn-target { outline: 2px solid rgba(56, 189, 248, 0.6); }
.trn-who { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.trn-spk { font-size: 12.5px; font-weight: 600; color: var(--spk, #cbd5e1); }
.trn-anchor { color: #475569; text-decoration: none; font-size: 12px; opacity: 0; transition: opacity 150ms; }
.trn-turn:hover .trn-anchor { opacity: 1; }
.trn-anchor:hover { color: var(--accent); }
.trn-txt { margin: 0 0 6px; font-size: 14.5px; line-height: 1.62; color: #d3dce8; }
.trn-txt.cont { margin-top: 2px; }
.trn-mini {
  font-size: 10.5px; font-weight: 600; color: var(--spk, #94a3b8);
  margin-right: 7px; letter-spacing: 0.2px; opacity: 0.85;
}
.trn-txt mark { background: rgba(251, 191, 36, 0.25); color: #fde68a; border-radius: 2px; padding: 0 1px; }
@media (max-width: 560px) {
  #trn-actions { flex-wrap: wrap; }
  .trn-txt { font-size: 14px; }
}

/* responsive */
#right-toggle { display: none; }
@media (max-width: 900px) {
  #main { position: relative; }
  #right {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 20;
    transform: translateX(100%); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--shadow-1);
  }
  #right.open { transform: none; }
  #right-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; right: 12px; top: 8px; z-index: 21;
    padding: 6px 12px; border-radius: 999px;
    background: var(--amber); color: #23170a; font-size: 12px; font-weight: 700;
    box-shadow: var(--shadow-1);
  }
}
@media (max-width: 560px) {
  #brand span { display: none; }
  #stats { display: none; }
  #filters select { max-width: 132px; }
}

/* multi-sélection graphe */
#multibar {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 4;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; max-width: min(92%, 860px);
}
#multibar .mb-count { color: #fbbf24; font-family: var(--mono); }
#multibar button.mini { white-space: nowrap; }
#multibar .mb-chips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 480px; }
#multibar .mb-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; cursor: pointer; color: var(--text); font-size: 11px; }
#multibar .mb-chip:hover { border-color: #f87171; color: #f87171; }