/* Nixora – de zwerm op /ai-systemen. Laadt alleen op die pagina.
   De pagina zelf is gewoon compleet en zichtbaar; zwerm.js zet per blok (data-bouw) een inline opacity/transform,
   splitst de tekst in eenheden (<zw-u>) die als typwerk zichtbaar worden en tekent in deze vaste laag de kaders, de caret
   en de cursors. Zonder JS of met "minder beweging" blijft de laag verborgen en wordt er niets gesplitst. */
.zw-laag { position: fixed; inset: 0; z-index: 60; pointer-events: none; font-family: var(--body); }
.zw-laag[hidden] { display: none; }
.zw-kaders, .zw-cursors { position: absolute; inset: 0; overflow: hidden; }

/* Kader om een blok: vier dunne lijnen, een vulling en soms een maatlabel */
.zw-kader { position: absolute; left: 0; top: 0; display: none; --c: var(--blue); will-change: transform; }
.zw-kader.aan { display: block; }
.zw-lijn { position: absolute; background: var(--c); opacity: 0; }
.zw-lijn.t { left: 0; top: 0; width: 100%; height: 2px; transform-origin: left center; }
.zw-lijn.r { right: 0; top: 0; width: 2px; height: 100%; transform-origin: center top; }
.zw-lijn.b { left: 0; bottom: 0; width: 100%; height: 2px; transform-origin: right center; }
.zw-lijn.lf { left: 0; top: 0; width: 2px; height: 100%; transform-origin: center bottom; }
.zw-vul { position: absolute; inset: 0; background: #EEF1F8; background: color-mix(in srgb, var(--c) 9%, #fff); opacity: 0; }
/* Typwerk: eenheden (teken of woord) staan volledig in de layout; alleen hun opacity wisselt. De caret knippert in de agentkleur. */
zw-t, zw-u { display: inline; }
zw-u { opacity: 0; }
zw-u.aan { opacity: 1; }
.zw-caret { position: absolute; left: 0; top: 0; width: .5em; height: 1em; margin-left: 2px; background: var(--c); opacity: 0; will-change: transform; }
.zw-kader.typ .zw-caret { animation: zw-knipper 1s steps(2, start) infinite; }
@keyframes zw-knipper { 0% { opacity: 1; } 100% { opacity: 0; } }
.zw-maat { position: absolute; right: 0; top: -24px; padding: 4px 7px; border-radius: 5px; background: var(--c); color: #fff; font-size: 11px; line-height: 1.1; font-weight: 600; letter-spacing: .02em; white-space: nowrap; opacity: 0; font-variant-numeric: tabular-nums; }

/* Cursors: pijl met een gekleurd naamlabel; aan de rand rusten ze zonder label en zweven ze licht.
   Het label staat via transform naast de pijl (niet via left/top): zo telt zijn beweging niet mee als layoutverschuiving. */
.zw-cursor { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; will-change: transform; }
.zw-cursor.aan { opacity: 1; }
.zw-cursor.uit { display: none; }
.zw-cursor > i { display: block; position: relative; width: 18px; height: 18px; }
.zw-cursor svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(15,23,42,.35)); transition: transform .25s; }
.zw-cursor.pen svg { transform: scale(.88); }
.zw-cursor b { position: absolute; left: 0; top: 0; transform: translate(14px, 17px); padding: 3px 7px; border-radius: 5px; background: var(--c); color: #fff; font-size: 11px; line-height: 1.2; font-weight: 600; white-space: nowrap; transition: opacity .25s; }
.zw-cursor.links b { transform: translate(calc(-100% + 3px), 17px); }
.zw-cursor.rust b { opacity: 0; }
.zw-cursor.rust > i { animation: zw-zweef 3.6s ease-in-out infinite; }
.zw-cursor:nth-child(2n) > i { animation-delay: -1.2s; }
.zw-cursor:nth-child(3n) > i { animation-delay: -2.3s; animation-duration: 4.2s; }
@keyframes zw-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Voortgangsstrook (alleen op mobiel) */
.zw-strook { display: none; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: rgba(26,63,232,.12); }
.zw-strook i { display: block; height: 100%; background: var(--blue); transform-origin: left center; transform: scaleX(0); }

/* Agentlog: vast paneel rechtsonder op desktop. Uitgeklapt alleen als er naast de container ruimte voor is (zwerm.js meet dat);
   anders een compacte chip (.dicht) die na een klik tijdelijk open mag en weer dichtgaat bij scrollen of Escape. */
.zw-log { position: absolute; right: 16px; bottom: 16px; width: 260px; pointer-events: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px; box-shadow: 0 16px 40px rgba(15,23,42,.12); font-size: 13px; color: var(--ink); animation: zw-in .5s both; }
@keyframes zw-in { from { opacity: 0; } to { opacity: 1; } }
.zw-log-kop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; height: 26px; }   /* vaste hoogte: het vinkje verandert de chip niet van maat */
.zw-log-kop b { font-family: var(--head); font-weight: 500; font-size: 15px; }
.zw-log-tot { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zw-log-tot [data-totaal] { display: inline-block; min-width: 5ch; text-align: right; }   /* vaste breedte: het percentage verschuift niets (CLS) */
.zw-vink { display: inline-block; width: 1em; text-align: center; font-style: normal; margin-right: 2px; }   /* vaste breedte: "·" wordt "✓" zonder verschuiving */
.zw-vink::before { content: "·"; }
.zw-laag.klaar .zw-vink::before { content: "✓"; color: #15803D; font-weight: 700; }
.zw-log-knop { width: 26px; height: 26px; border: 0; border-radius: 7px; background: var(--paper); cursor: pointer; display: grid; place-items: center; padding: 0; }
.zw-log-knop:hover { background: var(--blue-tint); }
.zw-log-knop span { width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.zw-log.dicht .zw-log-knop span { transform: translateY(2px) rotate(-135deg); }
.zw-totaal { height: 4px; border-radius: 2px; background: var(--blue-tint); overflow: hidden; }
.zw-totaal i, .zw-balk i { display: block; height: 100%; background: var(--c, var(--blue)); border-radius: inherit; transform-origin: left center; transform: scaleX(0); will-change: transform; }
/* De chip: "Agentlog · 81%" met een pijlknop, hoogstens zo'n 180 px breed */
.zw-log.dicht { width: auto; max-width: 180px; padding: 6px 6px 6px 12px; border-radius: 999px; }
.zw-log.dicht .zw-log-kop { margin: 0; gap: 6px; }
.zw-log.dicht .zw-log-kop b { font-size: 13px; }
.zw-log.dicht .zw-log-van, .zw-log.dicht .zw-totaal { display: none; }
.zw-log-inhoud { margin-top: 10px; }
.zw-log.dicht .zw-log-inhoud { display: none; }
.zw-rijen { display: grid; gap: 1px; }
.zw-rij { --c: var(--blue); display: grid; grid-template-columns: 8px 1fr auto auto; grid-template-areas: "dot naam status pct" "dot balk balk balk"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 4px 6px; border-radius: 8px; }
.zw-rij[data-st="werkt"], .zw-rij[data-st="denkt"] { background: var(--paper); }
.zw-rij .zw-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.zw-rij[data-st="wacht"] .zw-dot { opacity: .35; }
.zw-rij b { grid-area: naam; font-weight: 600; font-size: 12.5px; }
.zw-rij [data-status] { grid-area: status; font-size: 11.5px; color: var(--ink-3); }
.zw-rij[data-st="werkt"] [data-status], .zw-rij[data-st="denkt"] [data-status] { color: var(--c); font-weight: 600; }
.zw-rij[data-st="klaar"] [data-status] { color: #15803D; font-weight: 600; }
.zw-rij [data-pct] { grid-area: pct; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.zw-balk { grid-area: balk; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.zw-log-uitleg { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.zw-klaar { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); gap: 8px; }
.zw-klaar b { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 500; font-size: 15px; }
.zw-klaar b i { width: 22px; height: 22px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.zw-klaar .btn { height: 40px; font-size: 14px; justify-content: center; }
.zw-laag.klaar .zw-klaar { display: grid; }
.zw-laag.klaar .zw-log-uitleg { display: none; }

/* Agentkaarten en de knoppen bij de prijsvraag (gewone pagina-inhoud) */
.zw-agents b { display: flex; align-items: center; gap: 8px; }
.zw-agents b .zw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.zw-cta-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

@media (max-width: 820px) {
  .zw-log { display: none; }            /* geen paneel op een telefoon: alleen de dunne strook bovenin */
  .zw-strook { display: block; }
  .zw-cursor > i, .zw-cursor svg { width: 16px; height: 16px; }
  .zw-cursor b { transform: translate(12px, 15px); font-size: 10px; padding: 2px 6px; }
  .zw-cursor.links b { transform: translate(calc(-100% + 3px), 15px); }
  .zw-maat { top: -20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .zw-laag { display: none; } }