/* ═══════════════════════════════════════════════════════════════════════════
   CHAT CLASSIQUE (« en cours ») — sans verre, blocs pleine largeur, zones inline
   Cible : utilisateur pro, non-tech. Le fil remplace la scène spatiale au travail.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Verre neutralisé partout : plus de réfraction, surfaces solides — */
[data-glass] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* fond plat : plus d'animation ni d'image derrière le chat */
.ark-backdrop { position: absolute; inset: 0; z-index: 0; background: var(--surface); }
#ark-canvas, .ark-vignette, .ark-grid { display: none !important; }

/* la scène live n'utilise plus les lanes spatiales ni le cœur central */
.ark-stage.live .ark-files,
.ark-stage.live .ark-shop,
.ark-stage.live .ark-id,
.ark-stage.live .ark-read,
.ark-stage.live .ark-think { display: none !important; }

/* ── Colonne de conversation ── */
.ark-chat {
  position: absolute; left: 64px; right: 340px; top: 56px; bottom: 118px; z-index: 5;
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.ark-stage.live .ark-chat { opacity: 1; pointer-events: auto; }
.ark-chat-in {
  width: 100%; max-width: 772px; margin: 0 auto; padding: 24px 26px 48px;
  display: flex; flex-direction: column; gap: 26px;
}

/* ── Bloc message (avatar + nom au-dessus, corps pleine largeur) ── */
.ark-msg { display: flex; flex-direction: column; gap: 11px; animation: ark-msg-in .42s cubic-bezier(.16,1,.3,1); }
@keyframes ark-msg-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.ark-msg-head { display: flex; align-items: center; gap: 10px; }
.ark-ava {
  width: 29px; height: 29px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.ark-msg.user .ark-ava { background: var(--surface-hover); color: var(--content-muted); border: 1px solid var(--app-border); }
.ark-msg.arka .ark-ava { background:var(--arka-red); color:#fff; }
.ark-msg .who { font-size: 13px; font-weight: 600; color: var(--content); }
.ark-msg .who .role { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--content-subtle); margin-left: 8px; }
.ark-msg .ts { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em; color: var(--content-subtle); }
.ark-msg-body { padding-left: 39px; }
/* message user : bulle neutre align\u00e9e \u00e0 droite */
.ark-msg.user { align-items: flex-end; }
.ark-msg.user .ark-msg-head { display: none; }
.ark-msg.user .ark-msg-body {
  padding: 11px 16px; max-width: 74%;
  background: var(--surface-hover);
  border: 1px solid var(--app-border-subtle);
  border-radius: 16px 16px 5px 16px;
  font-size: 14px; line-height: 1.5; color: var(--content);
}
body.theme-light .ark-msg.user .ark-msg-body { background: #fff; border-color: var(--app-border); box-shadow: 0 1px 2px rgba(28,24,22,.05); }

/* ── Carte d'activité (les 3 zones : raisonnement · fichiers · actions) ── */
.ark-work { border: 1px solid var(--app-border); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; margin-bottom: 15px; }
body.theme-light .ark-work { background: #fff; box-shadow: 0 1px 3px rgba(28,24,22,.05); }
.ark-work-h { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 15px; background: none; border: 0; cursor: pointer; color: var(--content); font-family: inherit; text-align: left; }
.ark-work-h .wsp { width: 15px; height: 15px; border-radius: 99px; border: 2px solid var(--app-border); border-top-color: var(--accent); flex-shrink: 0; animation: ark-spin .8s linear infinite; }
.ark-work.done .ark-work-h .wsp { border: 0; background: none; position: relative; animation: none; }
.ark-work.done .ark-work-h .wsp::after { content: ''; position: absolute; inset: 0; border-radius: 99px; background: var(--arka-green); box-shadow: 0 0 8px rgba(0,210,135,.55); mask: none; }
@keyframes ark-spin { to { transform: rotate(360deg); } }
.ark-work-h .wl { font-size: 12.5px; font-weight: 600; }
.ark-work-h .wsub { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; color: var(--content-subtle); }
.ark-work-h .wchev { margin-left: auto; display: flex; color: var(--content-subtle); transition: transform .22s; }
.ark-work-h .wchev svg { width: 15px; height: 15px; }
.ark-work.collapsed .ark-work-h .wchev { transform: rotate(-90deg); }
.ark-work-body { padding: 4px 15px 15px; display: flex; flex-direction: column; gap: 17px; }
.ark-work.collapsed .ark-work-body { display: none; }
.ark-work-sec { display: flex; flex-direction: column; gap: 11px; }
.ark-work-sec > .sh { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--content-subtle); }
.ark-work-sec > .sh svg { width: 13px; height: 13px; color: var(--accent); }
.ark-work-sec[hidden] { display: none; }

/* raisonnement : réutilise .ark-thought (déjà stylé) en flux vertical */
.ark-work-sec .ark-think-list { display: flex; flex-direction: column; gap: 10px; }
/* fichiers : réutilise .ark-doc ; actions : .ark-worker + .ark-tool */
.ark-work-sec .ark-files-list { display: flex; flex-direction: column; gap: 8px; }
.ark-work-sec .ark-workers-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.ark-work-sec .ark-workers-list:empty { margin: 0; }
.ark-work-sec .ark-tools { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Réponse d'arka (parole sourcée + propositions) ── */
.ark-reply { padding-left: 39px; }
.ark-reply .atxt { font-size: 14.5px; line-height: 1.62; color: var(--content); }
.ark-reply .src { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--content-subtle); }
.ark-reply .src svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--arka-green); }
.ark-reply .src b { color: var(--content-muted); font-weight: 600; }
.ark-reply .ark-props { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--app-border-subtle); }

/* indicateur « arka travaille » discret quand la carte activité n'a pas encore de réponse */
.ark-typing { display: inline-flex; align-items: center; gap: 8px; padding-left: 39px; font-size: 12.5px; color: var(--content-subtle); }
.ark-typing .dots { display: inline-flex; gap: 4px; }
.ark-typing .dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--content-subtle); animation: ark-typing 1.1s infinite; }
.ark-typing .dots i:nth-child(2) { animation-delay: .18s; }
.ark-typing .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ark-typing { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* ── Composer solidifié (plus de verre), ancré, centré ── */
.ark-bottom { background: var(--surface); padding-top: 12px; }
.ark-stage:not(.live) .ark-bottom { background: none; }
.ark-bottom .ark-ask { width: min(772px, calc(100vw - 116px)); background: var(--surface-alt); }
body:not(.theme-light) .ark-bottom .ark-ask { background: rgba(255,255,255,.045); }
body.theme-light .ark-bottom .ark-ask { background: #fff; box-shadow: 0 2px 12px rgba(28,24,22,.08); }
.ark-bottom .ark-chips { width: min(772px, calc(100vw - 116px)); }

/* petite barre de suggestions au-dessus du composer (chips) — visible au repos du fil */
.ark-bottom.working .ark-chips { display: none; }

/* ── Sidebar droite : contexte accumulé au fil du tour ── */
.ark-context {
  position: absolute; right: 0; top: 56px; bottom: 0; width: 340px; z-index: 6;
  display: flex; flex-direction: column; border-left: 1px solid var(--app-border);
  background: var(--surface-alt);
  transform: translateX(16px); opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
body:not(.theme-light) .ark-context { background: rgba(255,255,255,.015); }
.ark-stage.live .ark-context { transform: none; opacity: 1; pointer-events: auto; }
.ark-ctx-h { display: flex; align-items: center; gap: 9px; padding: 16px 18px 13px; font-size: 12.5px; font-weight: 600; color: var(--content); border-bottom: 1px solid var(--app-border-subtle); }
.ark-ctx-h svg { width: 15px; height: 15px; color: var(--content-subtle); }
.ark-ctx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 22px; }
.ark-ctx-sec { display: flex; flex-direction: column; gap: 9px; }
.ark-ctx-lbl { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--content-subtle); }
.ark-ctx-lbl svg { width: 13px; height: 13px; color: var(--content-subtle); }
.ark-ctx-lbl .n { margin-left: auto; font-size: 9px; color: var(--content-muted); background: var(--surface-hover); border-radius: 99px; min-width: 17px; height: 16px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.ark-ctx-list { display: flex; flex-direction: column; gap: 8px; }
.ark-ctx-empty { font-size: 11.5px; line-height: 1.5; color: var(--content-subtle); padding: 4px 2px; }

/* item source (fichier) */
.ark-ctx-src { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--app-border); background: var(--surface-card); animation: ark-ctx-in .4s cubic-bezier(.16,1,.3,1); }
body:not(.theme-light) .ark-ctx-src { background: rgba(255,255,255,.025); }
body.theme-light .ark-ctx-src { background: #fff; box-shadow: 0 1px 2px rgba(28,24,22,.05); }
@keyframes ark-ctx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ark-ctx-src .dglyph { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ark-ctx-src .dglyph svg { width: 15px; height: 15px; }
.ark-ctx-src .ci { min-width: 0; flex: 1; }
.ark-ctx-src .dn { font-size: 12.5px; font-weight: 600; color: var(--content); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-ctx-src .dm { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--content-subtle); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.ark-ctx-src .dm .dprov { color: var(--arka-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-ctx-src .dm .dprov.open { color: var(--status-warn); }

/* item à retenir (décision / point ouvert) */
.ark-ctx-keep { display: flex; gap: 10px; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--app-border); border-left: 2px solid var(--k-color, var(--accent)); background: var(--surface-card); animation: ark-ctx-in .4s cubic-bezier(.16,1,.3,1); }
body:not(.theme-light) .ark-ctx-keep { background: rgba(255,255,255,.025); }
body.theme-light .ark-ctx-keep { background: #fff; box-shadow: 0 1px 2px rgba(28,24,22,.05); }
.ark-ctx-keep .kg { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--k-color, var(--accent)) 14%, transparent); color: var(--k-color, var(--accent)); }
.ark-ctx-keep .kg svg { width: 14px; height: 14px; }
.ark-ctx-keep .kx { min-width: 0; flex: 1; }
.ark-ctx-keep .kk { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-color, var(--accent)); }
.ark-ctx-keep .kt { font-size: 12.5px; line-height: 1.4; color: var(--content); margin-top: 4px; }
.ark-ctx-keep .km { font-family: var(--font-mono); font-size: 8.5px; color: var(--content-subtle); margin-top: 5px; }

.ark-ctx-src .dm .conf { margin-left: auto; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.ark-ctx-src .dm .conf.high { color: var(--arka-green); background: rgba(0,210,135,.12); }
.ark-ctx-src .dm .conf.open { color: var(--status-warn); background: rgba(217,119,6,.14); }
.ark-ctx-src .dm .conf.low { color: var(--content-subtle); background: var(--surface-hover); }

@media (max-width: 720px) {
  .ark-chat { left: 0; right: 0; }
  .ark-bottom { left: 0; right: 0; }
  .ark-context { display: none; }
  .ark-chat-in { padding: 20px 16px 42px; }
  .ark-msg-body, .ark-reply, .ark-typing { padding-left: 0; }
  .ark-bottom .ark-ask, .ark-bottom .ark-chips { width: calc(100vw - 32px); }
}

/* ═══════════════════════════════════════════════════════════════
   ARKA PM AUGMENTÉ — moyens mobilisés (moteur/agents), niveaux de vérité, confirmation
   ═══════════════════════════════════════════════════════════════ */

/* moteur choisi (provider) — zéro-jargon */
.ark-provider { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--app-border); background: rgba(255,255,255,.02); }
body.theme-light .ark-provider { background: #fff; box-shadow: 0 1px 2px rgba(28,24,22,.05); }
.ark-provider .mpg { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
.ark-provider .mpg svg { width: 14px; height: 14px; }
.ark-provider .mpl { font-size: 12.5px; color: var(--content); }
.ark-provider .mpl b { font-weight: 600; }
.ark-provider .mpm { margin-left: auto; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--content-subtle); }

/* liste agents spawnés (exécutants temporaires) */
.ark-work-sec .ark-agents-list { display: flex; flex-direction: column; gap: 9px; }
.ark-work-sec .ark-agents-list:empty { display: none; }
.ark-agent { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--app-border); border-left: 2px dashed var(--arka-blue); background: rgba(74,144,226,.05); animation: ark-ctx-in .4s cubic-bezier(.16,1,.3,1); }
body.theme-light .ark-agent { background: rgba(74,144,226,.06); }
.ark-agent .agic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(74,144,226,.15); color: var(--arka-blue); }
.ark-agent .agic svg { width: 16px; height: 16px; }
.ark-agent .aginfo { flex: 1; min-width: 0; }
.ark-agent .agn { font-size: 13px; font-weight: 600; color: var(--content); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ark-agent .agtag { font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--arka-blue); background: rgba(74,144,226,.14); padding: 2px 6px; border-radius: 5px; }
.ark-agent .agbrief { font-size: 11.5px; line-height: 1.45; color: var(--content-muted); margin-top: 4px; }
.ark-agent .agcr { font-family: var(--font-mono); font-size: 10px; color: var(--content-subtle); margin-top: 5px; }
.ark-agent[data-st="done"] .agcr { color: var(--arka-blue); }
.ark-agent .agstat { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; display: flex; align-items: center; gap: 5px; color: var(--content-subtle); }
.ark-agent .agstat .sp { width: 6px; height: 6px; border-radius: 99px; background: var(--arka-blue); }
.ark-agent[data-st="run"] .agstat .sp { animation: ark-blink 1s infinite; }
.ark-agent[data-st="done"] .agstat { color: var(--arka-blue); }
.ark-agent[data-st="done"] .agstat .sp { box-shadow: 0 0 8px rgba(74,144,226,.6); }

/* réponse structurée par niveaux de vérité */
.ark-truth { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.ark-truth .tv { border-left: 2px solid var(--tvc, var(--content-subtle)); padding: 2px 0 2px 12px; }
.ark-truth .tl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tvc, var(--content-subtle)); }
.ark-truth .tl svg { width: 12px; height: 12px; }
.ark-truth .tb { font-size: 13px; line-height: 1.5; color: var(--content); margin-top: 5px; }
.ark-truth .tb > div + div { margin-top: 3px; }
.ark-truth .verified { --tvc: var(--status-pass); }
.ark-truth .hypo { --tvc: var(--arka-fuchsia); }
.ark-truth .hypo .tb { color: var(--content-muted); }
.ark-truth .risk { --tvc: var(--status-warn); }
.ark-truth .decision { --tvc: var(--accent); }
.ark-truth .decision .tb { font-weight: 500; }

/* limite — aucune source mobilisée */
.ark-limite { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--status-warn); background: rgba(217,119,6,.08); color: var(--status-warn); font-size: 12px; margin-bottom: 12px; }
.ark-limite svg { width: 14px; height: 14px; flex-shrink: 0; }

/* proposition à impact — confirmation avant exécution */
.ark-prop .pflag { display: none; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--status-warn); margin-top: 4px; }
.ark-prop.impact .pflag { display: block; }
.ark-prop.impact { border-color: color-mix(in oklab, var(--status-warn) 40%, var(--app-border)); }
.ark-prop.impact .pic { background: rgba(217,119,6,.14); color: var(--status-warn); }
.ark-prop.impact .pk { color: var(--status-warn); }
.ark-prop.arming { border-color: var(--status-warn); box-shadow: 0 0 0 3px rgba(217,119,6,.12); }
.ark-prop.armed-done { border-color: var(--status-pass); }
.ark-prop.armed-done .pflag { color: var(--status-pass); }
.ark-prop.armed-done .pic { background: rgba(22,163,74,.14); color: var(--status-pass); }
.ark-prop.armed-done .pk { color: var(--status-pass); }

/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS DE NAVIGATION (global) — sensation de navigation fluide
   Chargé par toutes les pages. Cross-fade inter-pages + entrées de
   contenu quand les routeurs (Config/Capteur/Biblio/Mémoire) échangent
   leur innerHTML. Tout est gardé sous prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* micro-transitions d'états interactifs (hover/focus) — sûres même en reduced-motion */
.ark-rail-item, .ark-rail-ses,
.cap-tab, .cap-row, .cap-btn, .cap-adapter,
.cfg-nav a, .cfg-card, .cfg-row,
.bib2-row, .subj, .gchip,
.ark-chip, .ark-prop, .mem-row, .mem-tab {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .2s ease, transform .16s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* — entrées réutilisables — */
  @keyframes ark-nav-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ark-nav-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* — entrée de page (fallback là où les View Transitions manquent) —
     opacité seule sur la coquille pour ne pas casser les layouts absolus.
     Le rail est ré-inclus pour rester ancré visuellement. */
  .ark-stage { animation: ark-nav-fade .34s ease both; }
  .ark-rail { animation: none; }
  .ark-top { animation: ark-nav-fade .5s ease both; }

  /* — échanges de sections / onglets / détails : le contenu recréé monte en fondu — */
  #cfg-main > *,
  .cfg-detail,
  .cap-list, .cap-adapters, .cap-empty,
  .bib2-reader-in,
  .mem, .mema,
  .adoc-editor, .ws-body, .sp-body {
    animation: ark-nav-rise .34s cubic-bezier(.16,1,.3,1) both;
  }

  /* — stagger léger des lignes de liste (plafonné) — */
  .cap-list > *, .bib2-sec, .cfg-nav-group {
    animation: ark-nav-rise .4s cubic-bezier(.16,1,.3,1) both;
  }
  .cap-list > *:nth-child(1), .bib2-sec:nth-child(1) { animation-delay: 0s; }
  .cap-list > *:nth-child(2), .bib2-sec:nth-child(2) { animation-delay: .04s; }
  .cap-list > *:nth-child(3), .bib2-sec:nth-child(3) { animation-delay: .08s; }
  .cap-list > *:nth-child(4), .bib2-sec:nth-child(4) { animation-delay: .12s; }
  .cap-list > *:nth-child(5), .bib2-sec:nth-child(5) { animation-delay: .16s; }
  .cap-list > *:nth-child(n+6) { animation-delay: .2s; }
}
ap-list > *:nth-child(5), .bib2-sec:nth-child(5) { animation-delay: .16s; }
  .cap-list > *:nth-child(n+6) { animation-delay: .2s; }
}
th-child(5) { animation-delay: .16s; }
  .cap-list > *:nth-child(n+6) { animation-delay: .2s; }
}