/* Fully Operated: kantoor met chief of staff (module, v2.1, 5-11-2026).
   Hoort bij assets/kantoor.js en _kantoor-snippet.html. Alle klassen en ids beginnen met ko-.
   Leunt op de site-tokens (--ink, --muted, --line, --accent...) maar heeft eigen terugvalwaarden.
   Indeling: mobiel = scène, stapkaart, chat. 768+ = scène, daaronder stappen | chat.
   1180+ = scène + chat naast elkaar, stappen als rij van zes onder de scène. */

.ko {
  --ko-bg: #0B0C0F;
  --ko-panel: var(--panel, #121418);
  --ko-panel-2: var(--panel-2, #171A1F);
  --ko-ink: var(--ink, #F2F4F7);
  --ko-ink-2: var(--ink-2, #C9CED6);
  --ko-muted: var(--muted, #8E95A0);
  --ko-dim: #5B626D;
  --ko-line: var(--line, rgba(255, 255, 255, .08));
  --ko-line-2: var(--line-2, rgba(255, 255, 255, .14));
  --ko-accent: var(--accent, #2563EB);
  --ko-accent-text: var(--accent-text, #7FA2F8);
  --ko-accent-soft: rgba(37, 99, 235, .14);
  --ko-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  --ko-font: var(--font, "Geist", "Helvetica Neue", Arial, sans-serif);
  --ko-mono: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);

  /* scène */
  --ko-floor: #14171C;
  --ko-floor-l: #0E1014;
  --ko-floor-r: #0B0D10;
  --ko-grid: rgba(255, 255, 255, .018);
  --ko-wall: #111317;
  --ko-wall-2: #0D0F12;
  --ko-wall-top: #1D2026;
  --ko-desk: #2A2E36;
  --ko-desk-l: #1C1F25;
  --ko-desk-r: #16181D;
  --ko-screen: #0C0E12;
  --ko-seat: #1E2127;

  position: relative;
  color: var(--ko-ink);
  font-family: var(--ko-font);
}
.ko-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ---------------------------------------------------------------- podium */
.ko-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--ko-line); border-radius: var(--radius-panel, 24px);
  background:
    radial-gradient(60% 50% at 40% 38%, rgba(37, 99, 235, .09), transparent 70%),
    linear-gradient(180deg, #101216, var(--ko-bg));
}
.ko-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--ko-line);
}
@media (min-width: 768px) { .ko-bar { padding: 8px 14px 8px 24px; } }
.ko-live { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: .8125rem; color: var(--ko-muted); }
.ko-live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ko-accent); box-shadow: 0 0 0 4px var(--ko-accent-soft), 0 0 12px 2px rgba(37, 99, 235, .5); }
.ko-live-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-finished .ko-live-t { color: var(--ko-ink); }
.ko-is-paused .ko-live-dot, .ko-static .ko-live-dot { background: var(--ko-dim); box-shadow: none; }

/* pauzeknop: klein icoon, 44px tikvlak */
.ko-toggle {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; border: 1px solid var(--ko-line-2); background: transparent; color: var(--ko-ink-2); cursor: pointer;
  transition: border-color 250ms var(--ko-ease), background-color 250ms var(--ko-ease), color 250ms;
}
.ko-toggle::after { content: ""; position: absolute; inset: -6px; }
.ko-toggle:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .03); color: var(--ko-ink); }
.ko-toggle svg { width: 10px; height: 10px; fill: currentColor; }
.ko-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- indeling */
.ko-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.ko-scene { display: none; position: relative; padding: 8px 0 4px; }
.ko-ready .ko-scene { display: block; }
.ko-steps-wrap { border-top: 1px solid var(--ko-line); padding: 18px 16px 20px; }
.ko-chat { display: none; border-top: 1px solid var(--ko-line); background: rgba(10, 11, 13, .55); }
.ko-ready .ko-chat { display: flex; flex-direction: column; min-width: 0; }

@media (min-width: 768px) {
  .ko-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "scene scene" "steps chat"; }
  .ko-scene { grid-area: scene; padding: 16px 16px 8px; }
  .ko-steps-wrap { grid-area: steps; padding: 26px 28px 28px; }
  .ko-chat { grid-area: chat; border-left: 1px solid var(--ko-line); }
}
@media (min-width: 1180px) {
  .ko-body { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "scene chat" "steps chat"; }
  .ko-scene { padding: 20px 20px 12px; }
  .ko-chat { border-top: 0; }
}

/* ---------------------------------------------------------------- scène */
.ko-svg { --ko-u: 1; display: block; width: 100%; height: auto; margin: 0 auto; max-height: 560px; overflow: visible; }
.ko-svg text { font-family: var(--ko-font); }
/* donkere rand om tekst in de tekening: lijnen lopen er netjes achterlangs */
.ko-zone text, .ko-lab text, .ko-mem, .ko-wait { paint-order: stroke; stroke: #101216; stroke-width: calc(4px * var(--ko-u)); stroke-linejoin: round; }

.ko-f-top { fill: var(--ko-floor); }
.ko-f-l { fill: var(--ko-floor-l); }
.ko-f-r { fill: var(--ko-floor-r); }
.ko-f-edge { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.ko-f-grid { fill: none; stroke: var(--ko-grid); stroke-width: 1; }
.ko-w-a { fill: var(--ko-wall); }
.ko-w-b { fill: var(--ko-wall-2); }
.ko-w-top { fill: var(--ko-wall-top); }
.ko-w-win { fill: rgba(127, 162, 248, .04); stroke: rgba(127, 162, 248, .09); stroke-width: 1; }
.ko-d-top { fill: var(--ko-desk); }
.ko-d-l { fill: var(--ko-desk-l); }
.ko-d-r { fill: var(--ko-desk-r); }
.ko-scr { fill: var(--ko-screen); }
.ko-scr-glow { fill: var(--ko-accent); opacity: 0; transition: opacity 400ms var(--ko-ease); }
.ko-scr-line { stroke: var(--ko-accent-text); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity 300ms; }
.ko-seat { fill: var(--ko-seat); }
.ko-head { stroke: transparent; stroke-width: 1.4; transition: stroke 300ms; }
.ko-shadow { fill: #000; opacity: .35; }

/* chief of staff */
.ko-orb-glow { transition: opacity 500ms var(--ko-ease); opacity: .6; }
.ko-orb { fill: #040507; stroke: rgba(127, 162, 248, .55); stroke-width: 1.2; }
.ko-orb-hi { fill: none; stroke: rgba(220, 230, 242, .35); stroke-width: 1; }
.ko-ped-top { fill: #2F333B; }
.ko-mem { fill: var(--ko-muted); font-size: calc(12px * var(--ko-u)); transition: fill 400ms var(--ko-ease); }
.ko-mem-on { fill: var(--ko-accent-text); }

/* jij */
.ko-wait { fill: var(--ko-accent-text); font-size: calc(12.5px * var(--ko-u)); font-weight: 500; opacity: 0; transition: opacity 300ms; }
[data-s="wait"] > .ko-wait, .ko-static .ko-wait { opacity: 1; }
.ko-phone { fill: #1A1D23; stroke: rgba(255, 255, 255, .18); stroke-width: 1; transition: fill 300ms; }
.ko-phone-glow { opacity: 0; transition: opacity 300ms; }

/* zonekoppen en afdelingslabels */
.ko-zone-t { fill: var(--ko-ink); font-size: calc(15px * var(--ko-u)); font-weight: 560; letter-spacing: -.01em; }
.ko-zone-s { fill: var(--ko-muted); font-size: calc(12px * var(--ko-u)); }
.ko-lab text { fill: var(--ko-muted); font-size: calc(12px * var(--ko-u)); font-weight: 500; transition: fill 300ms; }
.ko-lab .ko-dot { fill: var(--ko-dim); transition: fill 300ms; }
.ko-lab[data-s="busy"] text, .ko-lab[data-s="done"] text { fill: var(--ko-ink); }
.ko-lab[data-s="busy"] .ko-dot { fill: var(--ko-accent-text); }
.ko-lab[data-s="done"] .ko-dot { fill: var(--ko-ink); }

/* verbindingen */
.ko-link { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; transition: stroke 400ms var(--ko-ease), stroke-width 400ms; }
.ko-link.ko-on { stroke: var(--ko-accent); stroke-dasharray: none; stroke-width: 1.8; }
.ko-link-end { fill: rgba(255, 255, 255, .22); }
.ko-pk-core { fill: #DCE6F2; }

/* toestanden (op de station-groep: data-s = idle | busy | done | wait) */
[data-s="busy"] .ko-scr-line { opacity: 1; }
[data-s="busy"] .ko-scr-glow { opacity: .10; }
[data-s="busy"] .ko-head, [data-s="wait"] .ko-head { stroke: rgba(127, 162, 248, .8); }
[data-s="wait"] .ko-phone { fill: var(--ko-accent-text); }
[data-s="wait"] .ko-phone-glow, .ko-phone-on .ko-phone-glow { opacity: .9; }
.ko-phone-on .ko-phone { fill: #C9D6F7; }
[data-s="busy"] .ko-orb-glow { opacity: 1; }

/* lijntjes tussen de afdelingen: rust = zacht gestippeld, samenwerken = kobalt */
.ko-peer { stroke: rgba(255, 255, 255, .22); stroke-width: 1.1; stroke-dasharray: 2 4; }
.ko-peer.ko-on { stroke: var(--ko-accent); stroke-width: 1.6; stroke-dasharray: none; }

/* statisch schema (reduced motion) */
.ko-num { display: none; }
.ko-num circle { fill: var(--ko-bg); stroke: var(--ko-accent-text); stroke-width: 1.3; }
.ko-num text { fill: var(--ko-ink); font-family: var(--ko-mono) !important; font-size: 11px; font-weight: 500; }
.ko-static .ko-num { display: block; }
.ko-static .ko-link { stroke: rgba(127, 162, 248, .4); stroke-dasharray: none; }
.ko-static .ko-peer { stroke: rgba(127, 162, 248, .3); stroke-dasharray: 2 4; }
.ko-static .ko-pk { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ko-anim [data-s="busy"] .ko-fig { animation: ko-bob 1.6s ease-in-out infinite; }
  .ko-anim [data-s="busy"] .ko-scr-line { animation: ko-type 1.4s steps(4) infinite; }
  .ko-anim [data-s="busy"] .ko-scr-line + .ko-scr-line { animation-delay: .35s; }
  .ko-anim .ko-cos-st[data-s="busy"] .ko-orb-glow { animation: ko-breathe 1.8s ease-in-out infinite; }
  .ko-anim .ko-live-dot { animation: ko-breathe 2.4s ease-in-out infinite; }
  .ko-anim.ko-waiting .ko-acts:not(.ko-used) .ko-act-ok { animation: ko-pulse 1.6s ease-in-out infinite; }
  .ko-anim.ko-is-paused *, .ko-anim.ko-is-paused *::before { animation-play-state: paused !important; }
}
@keyframes ko-bob { 50% { transform: translateY(-1.5px); } }
@keyframes ko-type { 0% { opacity: .35; } 100% { opacity: 1; } }
@keyframes ko-breathe { 50% { opacity: .55; } }
@keyframes ko-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55), 0 0 18px rgba(37, 99, 235, .35); } 50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0), 0 0 22px rgba(37, 99, 235, .5); } }

/* eind van een ronde: zacht uitfaden */
.ko-msgs, .ko-svg .ko-links, .ko-lab { transition: opacity 600ms var(--ko-ease); }
.ko-fading .ko-msgs, .ko-fading .ko-svg .ko-links { opacity: 0; }

/* ---------------------------------------------------------------- stappen */
.ko-rail { display: none; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.ko-rail i { height: 2px; border-radius: 2px; background: var(--ko-line-2); transition: background-color 300ms var(--ko-ease); }
.ko-rail i.ko-done, .ko-rail i.ko-now { background: var(--ko-accent); }
.ko-rail i.ko-now { box-shadow: 0 0 8px rgba(37, 99, 235, .6); }

.ko-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ko-step {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; align-content: start;
  padding: 10px 12px 10px 0;
}
.ko-step-n { grid-row: span 2; font: 500 .75rem/1.9 var(--ko-mono); color: var(--ko-muted); letter-spacing: .04em; }
.ko-step h3 { margin: 0; font-size: 1rem; font-weight: 560; letter-spacing: -.015em; line-height: 1.35; color: var(--ko-ink); transition: color 300ms; }
.ko-step p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ko-muted); text-wrap: pretty; }
.ko-desc { display: none; }

/* animatie: kleur, geen doorzichtigheid (contrast blijft >= 4,5:1) */
.ko-anim .ko-step h3 { color: var(--ko-muted); }
.ko-anim .ko-step.ko-done h3 { color: var(--ko-ink-2); }
.ko-anim .ko-step.ko-now h3 { color: var(--ko-ink); }
.ko-anim .ko-step.ko-now .ko-step-n { color: var(--ko-accent-text); }
.ko-anim .ko-step::before {
  content: ""; position: absolute; left: -28px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: var(--ko-accent); opacity: 0; transition: opacity 300ms;
}
.ko-anim .ko-step.ko-now::before { opacity: 1; }

/* mobiel tijdens de animatie: één stapkaart + balk; de rest blijft voor schermlezers */
@media (max-width: 767px) {
  .ko-anim .ko-rail { display: grid; }
  .ko-anim .ko-step:not(.ko-now) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .ko-anim .ko-step.ko-now { min-height: 92px; align-content: start; padding-block: 0; }
  .ko-anim .ko-step::before { display: none; }
}

/* 1180+: rij van zes (nummer + titel), tekst van de actieve stap eronder */
@media (min-width: 1180px) {
  .ko-steps-wrap { padding: 0 20px 22px; border-top: 0; }
  .ko-anim .ko-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .ko-anim .ko-step { display: block; padding: 14px 0 0; border-top: 2px solid var(--ko-line-2); transition: border-color 300ms; }
  .ko-anim .ko-step::before { display: none; }
  .ko-anim .ko-step.ko-done, .ko-anim .ko-step.ko-now { border-top-color: var(--ko-accent); }
  .ko-anim .ko-step-n { display: block; line-height: 1.4; margin-bottom: 4px; }
  .ko-anim .ko-step h3 { font-size: .875rem; line-height: 1.3; }
  .ko-anim .ko-step p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ko-anim .ko-desc { display: block; margin: 14px 0 0; min-height: 1.5em; font-size: .9375rem; line-height: 1.5; color: var(--ko-ink-2); }
}

/* statisch: alle stappen met tekst, 3 x 2 vanaf 768 */
@media (min-width: 768px) {
  .ko-static .ko-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
}
@media (min-width: 1180px) {
  .ko-static .ko-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ko-static .ko-steps-wrap { padding-top: 8px; }
}

/* ---------------------------------------------------------------- chat */
.ko-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ko-line); }
.ko-chat-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #040507 38%, rgba(37, 99, 235, .55) 62%, rgba(37, 99, 235, 0) 72%); box-shadow: inset 0 0 0 1px rgba(127, 162, 248, .35); }
.ko-chat-who { display: grid; line-height: 1.25; }
.ko-chat-who b { font-size: .875rem; font-weight: 560; }
.ko-chat-who span { font-size: .75rem; color: var(--ko-muted); }
.ko-msgs {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
  height: 300px; overflow: hidden; padding: 14px 16px 16px;
}
@media (min-width: 768px) { .ko-msgs { justify-content: flex-end; height: 360px; } }
@media (min-width: 1180px) { .ko-msgs { flex: 1 1 0; height: auto; min-height: 0; } }
.ko-static .ko-msgs { flex: none; height: auto; overflow: visible; justify-content: flex-start; }
.ko-msg {
  flex: none; max-width: 86%; padding: 9px 12px 10px; border-radius: 14px 14px 14px 4px;
  font-size: .875rem; line-height: 1.45; color: var(--ko-ink-2);
  background: var(--ko-panel-2); border: 1px solid var(--ko-line);
}
.ko-msg-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; color: var(--ko-ink); background: rgba(37, 99, 235, .16); border-color: rgba(127, 162, 248, .22); }
.ko-msg-t { display: block; margin-top: 4px; font: .6875rem/1 var(--ko-mono); color: var(--ko-muted); letter-spacing: .02em; }
.ko-msg-me .ko-msg-t { text-align: right; color: rgba(201, 214, 247, .6); }
.ko-anim .ko-msg { animation: ko-in 450ms var(--ko-ease) both; }
@keyframes ko-in { from { opacity: 0; transform: translateY(6px); } }
.ko-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ko-act {
  height: 36px; padding: 0 14px; border-radius: 999px; font: 500 .8125rem/1 var(--ko-font); cursor: default;
  border: 1px solid var(--ko-line-2); background: transparent; color: var(--ko-ink-2);
  transition: transform 200ms var(--ko-ease), background-color 200ms, border-color 200ms, color 200ms;
}
.ko-act-ok { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--ko-ink); color: #0A0B0D; border-color: var(--ko-ink); box-shadow: 0 0 18px rgba(37, 99, 235, .35); }
.ko-act-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ko-accent); }
.ko-act-ok.ko-pressed { transform: scale(.94); }
.ko-hint { display: none; font-size: .75rem; color: var(--ko-accent-text); }
.ko-waiting .ko-acts:not(.ko-used) .ko-hint { display: inline; }
/* na het akkoord: omlijnd met vinkje, niet grijs gevuld */
.ko-acts.ko-used .ko-act-view { display: none; }
.ko-acts.ko-used .ko-act-ok { cursor: default; background: transparent; color: var(--ko-muted); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.ko-acts.ko-used .ko-act-ok::before { display: none; }
.ko-acts.ko-used .ko-act-ok::after { content: "\2713"; font-size: .8125rem; color: var(--ko-accent-text); }
.ko-typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px 14px 4px 14px; background: rgba(37, 99, 235, .10); border: 1px solid rgba(127, 162, 248, .16); }
.ko-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ko-accent-text); opacity: .4; animation: ko-dot 1s infinite; }
.ko-typing i:nth-child(2) { animation-delay: .15s; } .ko-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ko-dot { 30% { opacity: 1; } }
.ko-day { flex: none; align-self: center; margin: 2px 0 4px; padding: 3px 10px; border-radius: 999px; font: .6875rem/1.4 var(--ko-mono); color: var(--ko-muted); border: 1px solid var(--ko-line); letter-spacing: .04em; }

/* mobiel, wachten op akkoord: alleen het vraagbericht, direct onder de stapkaart */
@media (max-width: 767px) {
  .ko-waiting .ko-msgs > :not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ko *, .ko *::before, .ko *::after { animation: none !important; transition: none !important; }
}

/* testhaak #ko-at: geen overgangen, zodat screenshots de eindstand tonen */
.ko-test *, .ko-test *::before, .ko-test *::after { transition: none !important; }

/* ================================================================ LICHT (site v6, 5-11-2026)
   Herkleuring via tokens + de paar vaste donkere waarden hierboven. De module (kantoor.js) is niet aangepast.
   Donkere variant: verwijder dit blok (staat ook in _archief/site-v5-licht-2026-11-05/assets/kantoor.css). */
.ko {
  --ko-bg: #FFFFFF;
  --ko-dim: #9AA1AC;
  --ko-accent-soft: rgba(37, 99, 235, .12);
  --ko-floor: #EEF1F5;
  --ko-floor-l: #DCE1E8;
  --ko-floor-r: #D0D6DF;
  --ko-grid: rgba(10, 12, 18, .05);
  --ko-wall: #E6EAF0;
  --ko-wall-2: #DADFE7;
  --ko-wall-top: #F8F9FB;
  --ko-desk: #FFFFFF;
  --ko-desk-l: #D9DEE6;
  --ko-desk-r: #C8CFD9;
  --ko-screen: #2A2F38;
  --ko-seat: #C4CBD5;
}
.ko-stage { background: radial-gradient(60% 50% at 40% 38%, rgba(37, 99, 235, .06), transparent 70%), linear-gradient(180deg, #FFFFFF, #F7F8FA); border-color: var(--line-2, rgba(10, 12, 18, .14)); box-shadow: 0 2px 4px rgba(11, 13, 18, .04), 0 24px 60px -30px rgba(11, 13, 18, .28); }
.ko-zone text, .ko-lab text, .ko-mem, .ko-wait { stroke: #F4F6F9; }
.ko-f-edge { stroke: rgba(10, 12, 18, .12); }
.ko-w-win { fill: rgba(37, 99, 235, .05); stroke: rgba(37, 99, 235, .14); }
.ko-shadow { opacity: .12; }
.ko-ped-top { fill: #C8CFD9; }
.ko-orb { stroke: rgba(37, 99, 235, .7); }
.ko-orb-hi { stroke: rgba(255, 255, 255, .5); }
.ko-phone { fill: #2A2F38; stroke: rgba(10, 12, 18, .2); }
.ko-phone-on .ko-phone, [data-s="wait"] .ko-phone { fill: var(--ko-accent); }
.ko-link { stroke: rgba(10, 12, 18, .24); }
.ko-link-end { fill: rgba(10, 12, 18, .3); }
.ko-pk-core { fill: var(--ko-accent); }
.ko-num circle { fill: #FFFFFF; }
.ko-static .ko-link { stroke: rgba(37, 99, 235, .45); }
.ko-peer { stroke: rgba(10, 12, 18, .32); }
.ko-peer.ko-on { stroke: var(--ko-accent); }
.ko-static .ko-peer { stroke: rgba(37, 99, 235, .35); }
.ko-toggle:hover { border-color: rgba(10, 12, 18, .3); background: rgba(10, 12, 18, .03); }
.ko-chat { background: rgba(244, 245, 247, .7); }
.ko-msg { background: #FFFFFF; }
.ko-msg-me { background: rgba(37, 99, 235, .09); border-color: rgba(37, 99, 235, .25); }
.ko-msg-me .ko-msg-t { color: var(--ko-muted); }
.ko-act-ok { color: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .5); }
.ko-acts.ko-used .ko-act-ok { border-color: rgba(10, 12, 18, .12); }
.ko-typing { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .2); }
.ko-live-dot { box-shadow: 0 0 0 4px var(--ko-accent-soft); }
.ko-svg linearGradient[id^="ko-g-body"] stop:first-child { stop-color: #59606B; }
.ko-svg linearGradient[id^="ko-g-body"] stop:last-child { stop-color: #343943; }

/* chatberichten nooit bevroren op onzichtbaar (pauze of buiten beeld): het inkomen speelt altijd af */
.ko-anim.ko-is-paused .ko-msg { animation-play-state: running !important; }

/* ================================================================ DONKER (systeem of knop, 5-11-2026)
   Zet de oorspronkelijke donkere kantoorkleuren terug zodra de site donker staat. */
/* ---- kantoor donker ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ko { --ko-bg: #0B0C0F; --ko-dim: #5B626D; --ko-accent-soft: rgba(37,99,235,.14); --ko-floor: #14171C; --ko-floor-l: #0E1014; --ko-floor-r: #0B0D10; --ko-grid: rgba(255,255,255,.018); --ko-wall: #111317; --ko-wall-2: #0D0F12; --ko-wall-top: #1D2026; --ko-desk: #2A2E36; --ko-desk-l: #1C1F25; --ko-desk-r: #16181D; --ko-screen: #0C0E12; --ko-seat: #1E2127; }
  :root:not([data-theme="light"]) .ko-stage { background: radial-gradient(60% 50% at 40% 38%, rgba(37,99,235,.09), transparent 70%), linear-gradient(180deg, #101216, var(--ko-bg)); border-color: var(--ko-line); box-shadow: none; }
  :root:not([data-theme="light"]) .ko-zone text, :root:not([data-theme="light"]) .ko-lab text, :root:not([data-theme="light"]) .ko-mem, :root:not([data-theme="light"]) .ko-wait { stroke: #101216; }
  :root:not([data-theme="light"]) .ko-f-edge { stroke: rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .ko-w-win { fill: rgba(127,162,248,.04); stroke: rgba(127,162,248,.09); }
  :root:not([data-theme="light"]) .ko-shadow { opacity: .35; }
  :root:not([data-theme="light"]) .ko-ped-top { fill: #2F333B; }
  :root:not([data-theme="light"]) .ko-orb { stroke: rgba(127,162,248,.55); }
  :root:not([data-theme="light"]) .ko-orb-hi { stroke: rgba(220,230,242,.35); }
  :root:not([data-theme="light"]) .ko-phone { fill: #1A1D23; stroke: rgba(255,255,255,.18); }
  :root:not([data-theme="light"]) .ko-phone-on .ko-phone { fill: #C9D6F7; }
  :root:not([data-theme="light"]) [data-s="wait"] .ko-phone { fill: var(--ko-accent-text); }
  :root:not([data-theme="light"]) .ko-link { stroke: rgba(255,255,255,.16); }
  :root:not([data-theme="light"]) .ko-peer { stroke: rgba(255,255,255,.22); }
  :root:not([data-theme="light"]) .ko-link.ko-on, :root:not([data-theme="light"]) .ko-peer.ko-on { stroke: var(--ko-accent); }
  :root:not([data-theme="light"]) .ko-link-end { fill: rgba(255,255,255,.22); }
  :root:not([data-theme="light"]) .ko-pk-core { fill: #DCE6F2; }
  :root:not([data-theme="light"]) .ko-num circle { fill: var(--ko-bg); }
  :root:not([data-theme="light"]) .ko-static .ko-link { stroke: rgba(127,162,248,.4); }
  :root:not([data-theme="light"]) .ko-static .ko-peer { stroke: rgba(127,162,248,.3); }
  :root:not([data-theme="light"]) .ko-toggle:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .ko-chat { background: rgba(10,11,13,.55); }
  :root:not([data-theme="light"]) .ko-msg { background: var(--ko-panel-2); }
  :root:not([data-theme="light"]) .ko-msg-me { background: rgba(37,99,235,.16); border-color: rgba(127,162,248,.22); }
  :root:not([data-theme="light"]) .ko-act-ok { color: #0A0B0D; box-shadow: 0 0 18px rgba(37,99,235,.35); }
  :root:not([data-theme="light"]) .ko-acts.ko-used .ko-act-ok { color: var(--ko-muted); background: transparent; border-color: rgba(255,255,255,.1); box-shadow: none; }
  :root:not([data-theme="light"]) .ko-typing { background: rgba(37,99,235,.10); border-color: rgba(127,162,248,.16); }
  :root:not([data-theme="light"]) .ko-live-dot { box-shadow: 0 0 0 4px var(--ko-accent-soft), 0 0 12px 2px rgba(37,99,235,.5); }
  :root:not([data-theme="light"]) .ko-is-paused .ko-live-dot, :root:not([data-theme="light"]) .ko-static .ko-live-dot { box-shadow: none; }
  :root:not([data-theme="light"]) .ko-svg linearGradient[id^="ko-g-body"] stop:first-child { stop-color: #454B55; }
  :root:not([data-theme="light"]) .ko-svg linearGradient[id^="ko-g-body"] stop:last-child { stop-color: #262A31; }
}
:root[data-theme="dark"] .ko { --ko-bg: #0B0C0F; --ko-dim: #5B626D; --ko-accent-soft: rgba(37,99,235,.14); --ko-floor: #14171C; --ko-floor-l: #0E1014; --ko-floor-r: #0B0D10; --ko-grid: rgba(255,255,255,.018); --ko-wall: #111317; --ko-wall-2: #0D0F12; --ko-wall-top: #1D2026; --ko-desk: #2A2E36; --ko-desk-l: #1C1F25; --ko-desk-r: #16181D; --ko-screen: #0C0E12; --ko-seat: #1E2127; }
:root[data-theme="dark"] .ko-stage { background: radial-gradient(60% 50% at 40% 38%, rgba(37,99,235,.09), transparent 70%), linear-gradient(180deg, #101216, var(--ko-bg)); border-color: var(--ko-line); box-shadow: none; }
:root[data-theme="dark"] .ko-zone text, :root[data-theme="dark"] .ko-lab text, :root[data-theme="dark"] .ko-mem, :root[data-theme="dark"] .ko-wait { stroke: #101216; }
:root[data-theme="dark"] .ko-f-edge { stroke: rgba(255,255,255,.07); }
:root[data-theme="dark"] .ko-w-win { fill: rgba(127,162,248,.04); stroke: rgba(127,162,248,.09); }
:root[data-theme="dark"] .ko-shadow { opacity: .35; }
:root[data-theme="dark"] .ko-ped-top { fill: #2F333B; }
:root[data-theme="dark"] .ko-orb { stroke: rgba(127,162,248,.55); }
:root[data-theme="dark"] .ko-orb-hi { stroke: rgba(220,230,242,.35); }
:root[data-theme="dark"] .ko-phone { fill: #1A1D23; stroke: rgba(255,255,255,.18); }
:root[data-theme="dark"] .ko-phone-on .ko-phone { fill: #C9D6F7; }
:root[data-theme="dark"] [data-s="wait"] .ko-phone { fill: var(--ko-accent-text); }
:root[data-theme="dark"] .ko-link { stroke: rgba(255,255,255,.16); }
:root[data-theme="dark"] .ko-peer { stroke: rgba(255,255,255,.22); }
:root[data-theme="dark"] .ko-link.ko-on, :root[data-theme="dark"] .ko-peer.ko-on { stroke: var(--ko-accent); }
:root[data-theme="dark"] .ko-link-end { fill: rgba(255,255,255,.22); }
:root[data-theme="dark"] .ko-pk-core { fill: #DCE6F2; }
:root[data-theme="dark"] .ko-num circle { fill: var(--ko-bg); }
:root[data-theme="dark"] .ko-static .ko-link { stroke: rgba(127,162,248,.4); }
:root[data-theme="dark"] .ko-static .ko-peer { stroke: rgba(127,162,248,.3); }
:root[data-theme="dark"] .ko-toggle:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .ko-chat { background: rgba(10,11,13,.55); }
:root[data-theme="dark"] .ko-msg { background: var(--ko-panel-2); }
:root[data-theme="dark"] .ko-msg-me { background: rgba(37,99,235,.16); border-color: rgba(127,162,248,.22); }
:root[data-theme="dark"] .ko-act-ok { color: #0A0B0D; box-shadow: 0 0 18px rgba(37,99,235,.35); }
:root[data-theme="dark"] .ko-acts.ko-used .ko-act-ok { color: var(--ko-muted); background: transparent; border-color: rgba(255,255,255,.1); box-shadow: none; }
:root[data-theme="dark"] .ko-typing { background: rgba(37,99,235,.10); border-color: rgba(127,162,248,.16); }
:root[data-theme="dark"] .ko-live-dot { box-shadow: 0 0 0 4px var(--ko-accent-soft), 0 0 12px 2px rgba(37,99,235,.5); }
:root[data-theme="dark"] .ko-is-paused .ko-live-dot, :root[data-theme="dark"] .ko-static .ko-live-dot { box-shadow: none; }
:root[data-theme="dark"] .ko-svg linearGradient[id^="ko-g-body"] stop:first-child { stop-color: #454B55; }
:root[data-theme="dark"] .ko-svg linearGradient[id^="ko-g-body"] stop:last-child { stop-color: #262A31; }