/* ==========================================================================
   pages/demo.css — de demo: vijf stations uit de echte tool
   Elk station is een blok met een kopkaart, daaronder een echt scherm met
   pinnen en een replica die zich gedraagt als de tool. De zijden wisselen per
   station; onder 900px staat alles onder elkaar in bronvolgorde.
   De replica's rekenen in containereenheden (cqw): een replica is een klein
   stukje tool, dus alles schaalt mee met de breedte van het vel.
   Klassen van deze pagina beginnen met dm-.
   ========================================================================== */

/* De kleuren van de tool zelf (public/app/styles.css): inkt, babyblauw en
   doorzichtigheden van de inkt. Een replica hoort op de tool te lijken. */
.dm-replica,
.dm-toc {
  --dm-inkt: #16294a;
  --dm-baby: #a8cbeb;
  --dm-tint: rgba(22, 41, 74, .05);
  --dm-tint2: rgba(22, 41, 74, .095);
  --dm-lijn: rgba(22, 41, 74, .12);
  --dm-lijn2: rgba(22, 41, 74, .22);
  /* de twee grijzen voor bijschriften (de namen komen uit de tool: 42 en 60 %);
     op de site donkerder, zodat ze op wit en op elke tint ≥ 4.5:1 halen */
  --dm-42: rgba(22, 41, 74, .74);
  --dm-60: rgba(22, 41, 74, .78);
  --dm-groep: #9c36b5;            /* de lijnen van een groep, zoals op de kaart */
  --dm-veer: cubic-bezier(.3, 1.5, .5, 1);
  --dm-zacht: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- inhoud in de paginakop: de vijf stations als pillen ---------- */

.dm-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(18px, 2.4vw, 28px);
}
.dm-toc .pill { gap: 9px; padding: 6px 14px 6px 12px; }
.dm-toc-n { color: var(--tag); }
.dm-toc .pill:hover .dm-toc-n,
.dm-toc .pill:focus-visible .dm-toc-n { color: var(--ink); }

/* ---------- de opbouw van een station ---------- */

.dm-station .split { align-items: start; }
/* De zijden wisselen per station: scherm | replica, replica | scherm, …
   Altijd twee gelijke helften, zoals elke .split. */
.dm-media { display: flex; flex-direction: column; min-width: 0; }
.dm-media .pin-list { margin-bottom: 4px; }
.dm-shot-small { width: 60%; margin-top: 18px; }
.dm-list-small { max-width: 60ch; }

/* twee kleine schermen naast elkaar, even hoog: de breedte volgt de verhouding */
.dm-pair { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.dm-pair .shot { min-width: 0; }
.dm-pair-a { flex: .788 1 0; }
.dm-pair-b { flex: 1.731 1 0; }

.dm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 18px 40px;
  margin-top: clamp(26px, 3.2vw, 44px);
}
.dm-next { flex: none; }

/* Onder 900px staan scherm en replica onder elkaar; een staande replica wordt
   dan niet schermhoog. */
@media (max-width: 899px) {
  .dm-station .split > .dm-replica:not(.dm-edit) { width: 100%; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 559px) {
  .dm-shot-small { width: 78%; }
  .dm-pair { flex-direction: column; }
  .dm-pair-a { flex: none; width: 70%; }
  .dm-pair-b { flex: none; width: 100%; }
}

/* Een replica blijft in beeld terwijl je langs de schermen ernaast leest. */
@media (min-width: 900px) and (min-height: 720px) {
  .dm-station .split > .dm-replica { position: sticky; top: 92px; }
}

/* ---------- de replica: vel, knoppen en bijschrift ---------- */

/* De knoppen staan onder het vel in plaats van erop: zo dekken ze op geen
   enkele breedte iets van de tool af. */
.dm-replica {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: start;
  container: dm-fig / inline-size;
}
/* Het vel vult zijn kolom. Zonder width: 100% zet een grid een element met
   aspect-ratio op "start", en rekent de browser een min-height via de
   verhouding om naar een breedte: dan wordt het vel breder dan zijn kolom. */
.dm-replica > .replica-sheet { grid-column: 1 / -1; width: 100%; min-width: 0; }
.dm-replica > .replica-ctrl {
  position: static;
  grid-column: 2;
  grid-row: 2;
  margin-top: 10px;
}
.dm-replica > .replica-cap { grid-column: 1; grid-row: 2; }
/* Is de replica smal, dan de knoppen op een eigen regel boven het bijschrift. */
@container dm-fig (max-width: 559px) {
  .dm-replica > .replica-ctrl { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .dm-replica > .replica-cap { grid-column: 1 / -1; grid-row: 3; }
}
.dm-replica .replica-sheet { color: var(--dm-inkt); }
.dm-replica :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Maten in een replica: --u is één procent van de breedte van het vel. Op een
   smal scherm krijgt het vel meer hoogte en de tekst een slag groter. */
.dm-scan .replica-sheet,
.dm-team .replica-sheet,
.dm-wire .replica-sheet {
  container-type: inline-size;
  --u: 1cqw;
}
@media (max-width: 559px) {
  .dm-scan .replica-sheet { aspect-ratio: 2 / 3; --u: 1.14cqw; }
  .dm-team .replica-sheet { aspect-ratio: 3 / 5; --u: 1.14cqw; }
  /* op het vel van wire liggen blokken en labels op vaste plekken: de maten
     blijven gelijk (dan past alles zoals breed), alleen de tekst groeit mee */
  .dm-wire .replica-sheet { aspect-ratio: 9 / 16; --t: 1.2; }
}
@media (max-width: 379px) {
  .dm-wire .replica-sheet { aspect-ratio: 9 / 17; --t: 1.32; }
}

/* knop die even ingedrukt wordt tijdens een replay */
.dm-druk { transform: scale(.93) !important; box-shadow: 0 0 0 calc(1.1 * var(--u, 1px) + 2px) rgba(168, 203, 235, .75) !important; }

@keyframes dm-caret { 50% { opacity: 0; } }
@keyframes dm-stip { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-30%); } }
@keyframes dm-flits { 0% { background-color: rgba(168, 203, 235, .75); } 100% { background-color: rgba(168, 203, 235, 0); } }
@keyframes dm-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes dm-pop { from { opacity: 0; transform: scale(.4); } }

/* ==========================================================================
   01 · scan: het onboardingvel, stap voor stap gevuld
   ========================================================================== */

.dm-ob {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(6.4 * var(--u)) calc(6.6 * var(--u)) calc(5.4 * var(--u));
  font-size: calc(3 * var(--u));
  line-height: 1.35;
}
.dm-ob-bars { display: flex; gap: calc(1.2 * var(--u)); margin-bottom: calc(4.6 * var(--u)); }
.dm-ob-bars i {
  flex: 1;
  height: max(3px, calc(.8 * var(--u)));
  border-radius: 9px;
  background: var(--dm-tint2);
  transition: background-color .45s ease;
}
.dm-ob-bars i.is-done { background: var(--dm-inkt); }

.dm-ob-part { transition: opacity .45s ease, transform .6s var(--dm-zacht); }
.dm-ob-part.is-uit { opacity: 0; transform: translateY(calc(1.6 * var(--u))); }
.dm-ob-h {
  margin: 0 0 calc(1.8 * var(--u));
  font-size: calc(3.6 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.dm-ob-row { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-bottom: calc(4.2 * var(--u)); }
.dm-ob-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: calc(8.4 * var(--u));
  padding: 0 calc(3 * var(--u));
  border: 1px solid var(--dm-lijn2);
  border-radius: calc(2.6 * var(--u));
  background: #fff;
  font-size: calc(3.1 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dm-ob-field[data-leeg]:not(.is-filled)::before { content: attr(data-leeg); color: var(--dm-42); }
.dm-ob-field.is-typing { border-color: var(--dm-inkt); box-shadow: 0 0 0 calc(.7 * var(--u)) var(--dm-tint2); }
.dm-ob-field.is-typing:not(.is-filled)::before { content: none; }
.dm-ob-field.is-typing .dm-ob-typed::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -.2em;
  background: var(--dm-inkt);
  animation: dm-caret 1s steps(2) infinite;
}
.dm-ob-btn {
  flex: none;
  display: grid;
  place-items: center;
  height: calc(8.4 * var(--u));
  padding: 0 calc(4.4 * var(--u));
  border-radius: 999px;
  background: var(--dm-inkt);
  color: #fff;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .25s ease;
}

.dm-ob-langs { display: flex; flex-wrap: wrap; gap: calc(1.3 * var(--u)); margin-bottom: calc(4.2 * var(--u)); }
.dm-ob-opt {
  display: inline-flex;
  align-items: center;
  gap: calc(1.3 * var(--u));
  padding: calc(1.1 * var(--u)) calc(2.4 * var(--u)) calc(1.1 * var(--u)) calc(1.1 * var(--u));
  border: 1px solid var(--dm-lijn);
  border-radius: 999px;
  background: #fff;
  font-size: calc(2.8 * var(--u));
  transition: border-color .3s ease, box-shadow .3s ease, transform .18s ease;
}
.dm-ob-opt b {
  display: grid;
  place-items: center;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--dm-tint2);
  font-size: calc(2.2 * var(--u));
  font-weight: 600;
  transition: background-color .3s ease, color .3s ease;
}
.dm-ob-opt.is-on { border-color: var(--dm-inkt); box-shadow: 0 0 0 calc(.7 * var(--u)) var(--dm-tint2); }
.dm-ob-opt.is-on b { background: var(--dm-inkt); color: #fff; }

.dm-ob-status {
  display: grid;
  min-height: calc(5.6 * var(--u));
  margin: 0 0 calc(2 * var(--u));
  color: var(--dm-60);
  font-size: calc(2.8 * var(--u));
}
.dm-ob-reading,
.dm-ob-found {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--u));
  opacity: 0;
  transform: translateY(calc(.8 * var(--u)));
  transition: opacity .35s ease, transform .45s var(--dm-zacht);
}
.dm-ob-reading.is-on,
.dm-ob-found.is-on { opacity: 1; transform: none; }
.dm-ob-orb { --s: calc(5.2 * var(--u)); }
.dm-dots { display: inline-flex; gap: calc(.6 * var(--u)); margin-left: calc(.2 * var(--u)); }
.dm-dots i {
  width: calc(.9 * var(--u));
  height: calc(.9 * var(--u));
  border-radius: 50%;
  background: currentColor;
  animation: dm-stip 1.1s ease-in-out infinite;
}
.dm-dots i:nth-child(2) { animation-delay: .15s; }
.dm-dots i:nth-child(3) { animation-delay: .3s; }

.dm-ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.8 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.dm-ob-card {
  display: flex;
  flex-direction: column;
  gap: calc(1.4 * var(--u));
  min-width: 0;
  padding: calc(2.4 * var(--u)) calc(2.8 * var(--u));
  border: 1px solid var(--dm-lijn);
  border-radius: calc(3 * var(--u));
  background: #fff;
  transition: opacity .35s ease, transform .5s var(--dm-zacht), border-color .3s ease, box-shadow .3s ease;
}
.dm-ob-card.is-uit { opacity: 0; transform: translateY(calc(1.4 * var(--u))) scale(.97); }
.dm-ob-card.is-on { border-color: var(--dm-inkt); box-shadow: 0 0 0 calc(.8 * var(--u)) var(--dm-tint2); }
.dm-ob-cardkop { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.8 * var(--u)) calc(1.4 * var(--u)); min-height: calc(4.4 * var(--u)); }
.dm-ob-cardkop b { font-size: calc(3 * var(--u)); font-weight: 600; }
.dm-ob-cardkop em {
  padding: calc(.3 * var(--u)) calc(1.6 * var(--u));
  border-radius: 999px;
  background: var(--dm-baby);
  font-size: calc(2.2 * var(--u));
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s ease, transform .45s var(--dm-veer);
}
.dm-ob-card.is-on em { opacity: 1; transform: none; }
.dm-stips { display: flex; }
.dm-stips i {
  width: calc(3.1 * var(--u));
  height: calc(3.1 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #cfe2ff 0 14%, #5c8dff 42%, #1d3fb8 100%);
  box-shadow: 0 0 0 calc(.45 * var(--u)) #fff;
  filter: hue-rotate(var(--hue, 0deg));
}
.dm-stips i + i { margin-left: calc(-.8 * var(--u)); }
.dm-ob-name { flex: none; }

/* ==========================================================================
   02 · team: de teller uit de onboarding, en het team dat eruit komt
   ========================================================================== */

.dm-count { gap: 0; }
.dm-count .dm-ob-bars { margin-bottom: calc(4.2 * var(--u)); }
.dm-ob-title {
  margin: 0;
  font-size: calc(4.4 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.dm-ob-sub { margin: calc(1.2 * var(--u)) 0 0; color: var(--dm-60); font-size: max(12px, calc(3 * var(--u))); }
.dm-count-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4.6 * var(--u));
  margin: calc(3.4 * var(--u)) 0 calc(3.4 * var(--u));
}
.dm-round {
  display: grid;
  place-items: center;
  width: calc(9.6 * var(--u));
  height: calc(9.6 * var(--u));
  padding: 0;
  border: 1px solid var(--dm-lijn2);
  border-radius: 50%;
  background: var(--dm-tint);
  color: var(--dm-inkt);
  font: 500 calc(4.4 * var(--u)) / 1 var(--sans);
  cursor: pointer;
  transition: background-color .18s ease, transform .15s ease, box-shadow .25s ease;
}
.dm-round:hover:not(:disabled) { background: var(--dm-tint2); }
.dm-round:active:not(:disabled) { transform: scale(.92); }
.dm-round:disabled { opacity: .3; cursor: default; }
.dm-count-n {
  min-width: 1.6ch;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.dm-count-list,
.dm-count-grid {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dm-count-list { display: flex; flex-direction: column; gap: calc(1 * var(--u)); overflow: hidden; }
.dm-count-list li {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(2.6 * var(--u));
  padding: calc(1.3 * var(--u)) calc(2.6 * var(--u));
  border-radius: calc(2.6 * var(--u));
  background: var(--dm-tint);
}
.dm-count-list li.is-vast { background: none; border: 1px dashed var(--dm-lijn2); }
.dm-count-list li.is-nieuw { animation: dm-in .38s var(--dm-veer) both; }
.dm-count-list .orb { --s: calc(5.2 * var(--u)) !important; }
.dm-count-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dm-count-list strong { font-size: max(12px, calc(3.1 * var(--u))); font-weight: 600; line-height: 1.25; }
.dm-count-list small {
  overflow: hidden;
  color: var(--dm-60);
  font-size: max(11px, calc(2.6 * var(--u)));   /* een replica wordt nooit kleiner dan 11px */
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* vanaf zeven rollen op één regel, zodat het hele team op het vel past */
.dm-count-list.is-dicht li { padding-block: calc(1 * var(--u)); }
.dm-count-list.is-dicht li > span:last-child { flex-direction: row; align-items: baseline; gap: calc(1.8 * var(--u)); }
.dm-count-list.is-dicht strong { flex: none; }

.dm-count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: calc(3 * var(--u)) calc(2 * var(--u));
  margin-top: calc(3 * var(--u));
}
.dm-count-grid[hidden] { display: none; }
.dm-count-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.4 * var(--u));
  text-align: center;
  animation: dm-pop .55s var(--dm-veer) both;
  animation-delay: var(--d, 0s);
}
.dm-count-grid .orb { --s: calc(13 * var(--u)) !important; }
.dm-count-grid .orb-name { font-size: max(12px, calc(2.7 * var(--u))); color: var(--dm-inkt); }
.dm-count-grid .orb-role { margin-top: calc(-1.2 * var(--u)); font-size: max(11px, calc(2.3 * var(--u))); color: var(--dm-60); }
.dm-count[data-view="team"] .dm-count-stepper,
.dm-count[data-view="team"] .dm-count-list,
.dm-count[data-view="team"] [data-doe="maak"] { display: none; }

.dm-ob-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  margin-top: calc(3 * var(--u));
}
.dm-ob-quiet,
.dm-ob-primary {
  height: calc(9 * var(--u));
  padding: 0 calc(4.6 * var(--u));
  border: 0;
  border-radius: 999px;
  font: 600 max(12px, calc(3.1 * var(--u))) / 1 var(--sans);
  cursor: pointer;
  transition: transform .18s ease, color .2s ease, background-color .2s ease;
}
.dm-ob-quiet { margin-left: calc(-2 * var(--u)); background: none; color: var(--dm-60); }
.dm-ob-quiet:hover { color: var(--dm-inkt); }
.dm-ob-primary { margin-left: auto; background: var(--dm-inkt); color: #fff; }
.dm-ob-primary:hover { transform: translateY(-1px); }

/* ==========================================================================
   03 · edit: het karakter, rechtsklikken, en het formulier van de tool
   ========================================================================== */

.dm-edit .replica-sheet {
  aspect-ratio: 4 / 3;
  min-height: 560px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* De affiches van de luie karakters: in de tint van reservations, en zonder
   JavaScript ongeveer waar het karakter komt (main.js zet de precieze maten). */
.dm-edit-char,
.dm-chat-char { --hue: 110deg; }
.dm-edit-char { position: absolute; inset: 0; z-index: 0; --kx: 50%; --ky: 47%; --kd: 118%; --fx: 44%; --fy: 38%; --fw: 16%; }
.dm-edit-char > gloei-karakter { transition: filter .6s ease; }
.dm-edit-name {
  position: absolute;
  z-index: 1;
  left: var(--cx, 50%);
  top: var(--naam-y, 78%);
  margin: 0;
  transform: translateX(-50%);
  color: var(--dm-inkt);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.dm-edit-ask {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.dm-edit-hint {
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--dm-60);
  font-size: 13px;
}
.dm-edit-open { min-height: 32px; padding: 5px 13px; font-size: 13.5px; }
.dm-edit-open[aria-expanded="true"] { background: var(--dm-inkt); color: #fff; }

/* waar de replay "rechtsklikt" */
.dm-edit-ripple {
  position: absolute;
  z-index: 2;
  left: var(--fx, 24%);
  top: var(--fy, 40%);
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.dm-edit-ripple.is-on { animation: dm-rimpel .75s ease-out both; }
@keyframes dm-rimpel {
  0% { opacity: .95; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.7); }
}

.dm-pop {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 3.2%;
  width: clamp(250px, 52%, 360px);
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 14px;
  border: 1px solid var(--dm-lijn);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(22, 41, 74, .08), 0 26px 60px -26px rgba(22, 41, 74, .5);
  transform: translateY(-50%);
  -webkit-user-select: text;
  user-select: text;
  scrollbar-width: thin;
}
.dm-pop[hidden] { display: none; }
.dm-pop.is-open { animation: dm-pop-in .3s var(--dm-zacht) both; }
@keyframes dm-pop-in { from { opacity: 0; transform: translateY(calc(-50% + 10px)) scale(.97); } }
.dm-pop-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 17px; }
.dm-pop-kop strong { font-weight: 600; }
.dm-pop-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px var(--dm-tint2); transition: background-color .4s ease; }
.dm-pop-form { margin: 0; }
.dm-pop-row { display: grid; gap: 4px; margin-top: 9px; }
.dm-pop-row > span { color: var(--dm-60); font-size: 12.5px; font-weight: 500; }
.dm-pop-field {
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--dm-lijn2);
  border-radius: 11px;
  background: #fff;
  color: var(--dm-inkt);
  font: 400 14px/1.4 var(--sans);
}
.dm-pop-field:focus { border-color: var(--dm-inkt); outline: none; box-shadow: 0 0 0 3px var(--dm-tint2); }
.dm-pop-long { min-height: 64px; resize: vertical; }
.dm-pop-seg { display: flex; width: 100%; }
.dm-pop-seg button { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; }
.dm-pop-rolregel { margin: 3px 0 0; color: var(--dm-60); font-size: 12px; line-height: 1.42; }
.dm-pop-row--kleur { grid-template-columns: 1fr auto; align-items: center; border-radius: 10px; }
.dm-pop-row--kleur.is-flits { animation: dm-flits 1.4s ease; }
.dm-pop-kleur {
  width: 48px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--dm-lijn2);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.dm-pop-weg {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--dm-tint);
  color: var(--dm-inkt);
  font-size: 12.5px;
  line-height: 1.45;
}
.dm-pop-voet { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.dm-pop-ruimte { flex: 1; }
.dm-pop-knop {
  height: 36px;
  padding: 0 15px;
  border: 1px solid var(--dm-lijn2);
  border-radius: 999px;
  background: #fff;
  color: var(--dm-inkt);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.dm-pop-knop:hover { background: var(--dm-tint); }
.dm-pop-primair { border-color: var(--dm-inkt); background: var(--dm-inkt); color: #fff; }
.dm-pop-primair:hover { background: var(--dm-inkt); transform: translateY(-1px); }
.dm-pop-gevaar { margin-left: -6px; padding-inline: 8px; border-color: transparent; background: none; color: var(--red); }

/* Smal: een vel van onderen, zoals de tool het op een telefoon doet. */
@media (max-width: 759px) {
  .dm-edit .replica-sheet { aspect-ratio: 3 / 4; min-height: 520px; }
  .dm-pop {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100% - 16px);
    border-radius: 18px;
    transform: none;
  }
  .dm-pop.is-open { animation-name: dm-vel-op; }
  @keyframes dm-vel-op { from { opacity: 0; transform: translateY(24px); } }
}

/* ==========================================================================
   04 · wire: het vel van de infrastructuurlaag
   ========================================================================== */

.dm-wire-vel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-size: calc(2.6 * var(--u) * var(--t, 1));
  line-height: 1.35;
}
.dm-wire-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  padding: calc(3.2 * var(--u)) calc(3.6 * var(--u)) 0;
}
.dm-wire-step { margin: 0; color: var(--dm-60); font-size: calc(2.9 * var(--u) * var(--t, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-wire-step b { color: var(--dm-inkt); font-weight: 600; }
.dm-wire-step span { color: var(--dm-inkt); }
.dm-mapbtns { flex: none; display: flex; gap: calc(1.3 * var(--u)); }
.dm-mapbtns i {
  display: grid;
  place-items: center;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border: 1px solid var(--dm-tint2);
  border-radius: calc(2 * var(--u));
  background: #fff;
  color: var(--dm-inkt);
}
.dm-mapbtns i.is-ink { border-color: var(--dm-inkt); background: var(--dm-inkt); color: #fff; }
.dm-mapbtns svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dm-wire-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: calc(2.4 * var(--u)) calc(3 * var(--u)) 0;
  border-radius: calc(3 * var(--u));
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(22, 41, 74, .17) 1px, transparent 1.4px);
  background-size: calc(3.6 * var(--u)) calc(3.6 * var(--u));
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--dm-lijn);
}
.dm-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.dm-edge { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.dm-edge--groep { stroke: var(--dm-groep); }
.dm-edge--tool { stroke: rgba(22, 41, 74, .55); }
.dm-edge--sleep { stroke: var(--dm-groep); stroke-width: 1.4; }
.dm-edge--wacht { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .9; }
.dm-port { fill: #fff; stroke: var(--dm-lijn2); stroke-width: 1.4; }
.dm-pakket { fill: var(--dm-groep); }
.dm-pakket--tool { fill: var(--dm-inkt); }

/* Een knooppunt is precies zo groot als zijn bol of tegel, zonder transform:
   dan kloppen de lijnen, ook terwijl iets opspringt. */
.dm-node { position: absolute; z-index: 2; left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--w) / 2); width: var(--w); height: var(--w); }
.dm-agent { --w: calc(12.4 * var(--u)); }
.dm-agent .orb { --s: calc(12.4 * var(--u)) !important; }
.dm-handle {
  position: absolute;
  right: calc(-.4 * var(--u));
  bottom: calc(.2 * var(--u));
  display: grid;
  place-items: center;
  width: calc(3.8 * var(--u));
  height: calc(3.8 * var(--u));
  border-radius: 50%;
  background: #2f7fc7;
  color: #fff;
  font-size: calc(2.9 * var(--u) * var(--t, 1));
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 calc(.5 * var(--u)) #fff;
  filter: hue-rotate(var(--hue, 0deg));
  transition: transform .3s var(--dm-veer);
}
.dm-handle.is-trek { transform: scale(1.3); }
.dm-node-lbl {
  position: absolute;
  top: calc(100% + 1 * var(--u));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(30 * var(--u));
  margin-left: calc(-15 * var(--u));
  text-align: center;
  pointer-events: none;
}
.dm-node-name { color: var(--dm-inkt); font-size: calc(2.45 * var(--u) * var(--t, 1)); line-height: 1.2; }
.dm-agent .dm-node-name { color: var(--dm-60); }
.dm-agent .dm-node-lbl { top: auto; bottom: calc(100% + .6 * var(--u)); }
.dm-node-sub { margin-top: calc(.4 * var(--u)); color: var(--dm-60); font-size: calc(2.2 * var(--u) * var(--t, 1)); line-height: 1.25; }
.dm-draft .dm-node-lbl { width: calc(19 * var(--u)); margin-left: calc(-9.5 * var(--u)); }
.dm-doc .dm-node-lbl { width: calc(22 * var(--u)); margin-left: calc(-11 * var(--u)); }
.dm-tile { --w: calc(9.4 * var(--u)); }
.dm-tile-box {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--dm-lijn2);
  border-radius: calc(2.6 * var(--u));
  background: #fff;
  box-shadow: 0 calc(.6 * var(--u)) calc(2 * var(--u)) calc(-1 * var(--u)) rgba(22, 41, 74, .2);
  color: var(--dm-inkt);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.dm-tile-box svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dm-group .dm-tile-box {
  position: relative;
  border: calc(.45 * var(--u)) solid var(--dm-inkt);
  background: #f6e9fa;
}
.dm-group .dm-tile-box i {
  position: absolute;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  border-radius: 50%;
  background: var(--dm-groep);
}
.dm-group .dm-tile-box i:nth-child(1) { left: 50%; top: 32%; margin-left: calc(-.75 * var(--u)); }
.dm-group .dm-tile-box i:nth-child(2) { left: 30%; top: 58%; }
.dm-group .dm-tile-box i:nth-child(3) { right: 30%; top: 58%; }
.dm-group { transition: opacity .3s ease, transform .55s var(--dm-veer); }
.dm-group:not(.is-on) { opacity: 0; transform: scale(.4); }
.dm-group .dm-node-name { font-weight: 500; }
.dm-doc.is-on .dm-tile-box,
.dm-block.is-on { border-color: var(--dm-inkt); box-shadow: 0 0 0 calc(.6 * var(--u)) var(--dm-tint2); }
.dm-draft .dm-tile-box { border: 1.5px dashed rgba(192, 86, 75, .6); background: rgba(192, 86, 75, .04); box-shadow: none; }
.dm-wait {
  position: absolute;
  z-index: 2;
  left: var(--wx, 86%);
  top: var(--wy, 36%);
  margin: 0;
  padding: calc(.5 * var(--u)) calc(1.4 * var(--u));
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(192, 86, 75, .25);
  color: var(--red);
  font-size: calc(2.2 * var(--u) * var(--t, 1));
  white-space: nowrap;
  transform: translate(-100%, -50%);
}

.dm-tray {
  position: absolute;
  z-index: 2;
  left: calc(2.4 * var(--u));
  right: calc(2.4 * var(--u));
  bottom: calc(2.4 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1.2 * var(--u));
}
.dm-tray-h { color: var(--dm-60); font-size: calc(2.3 * var(--u) * var(--t, 1)); margin-right: calc(.4 * var(--u)); }
.dm-block {
  padding: calc(1.1 * var(--u)) calc(2 * var(--u));
  border: 1px solid var(--dm-lijn2);
  border-radius: calc(1.8 * var(--u));
  background: #fff;
  color: var(--dm-inkt);
  font-size: calc(2.35 * var(--u) * var(--t, 1));
  white-space: nowrap;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.dm-toast {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  z-index: 3;
  margin: 0;
  padding: calc(1.8 * var(--u)) calc(2.6 * var(--u));
  border-radius: calc(2.4 * var(--u));
  background: var(--dm-inkt);
  color: #fff;
  font-size: calc(2.4 * var(--u) * var(--t, 1));
  line-height: 1.38;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) calc(-2 * var(--u)) rgba(22, 41, 74, .55);
  opacity: 0;
  transform: translateY(calc(1.4 * var(--u)));
  transition: opacity .3s ease, transform .45s var(--dm-zacht);
  pointer-events: none;
}
.dm-toast.is-on { opacity: 1; transform: none; }

.dm-wire-onder {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(2.2 * var(--u));
  padding: calc(2.2 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
}
.dm-view,
.dm-wire-chat {
  min-width: 0;
  padding: calc(2.2 * var(--u)) calc(2.6 * var(--u));
  border: 1px solid var(--dm-lijn);
  border-radius: calc(3 * var(--u));
  background: #fff;
}
.dm-view-h { display: flex; align-items: center; gap: calc(1.2 * var(--u)); margin: 0 0 calc(1.4 * var(--u)); font-size: calc(2.7 * var(--u) * var(--t, 1)); font-weight: 600; }
.dm-view-h .orb { --s: calc(3.8 * var(--u)) !important; }
.dm-view dl { display: grid; gap: calc(.9 * var(--u)); margin: 0; }
.dm-view dl > div { display: grid; grid-template-columns: calc(13.5 * var(--u)) minmax(0, 1fr); gap: calc(1.2 * var(--u)); border-radius: calc(1 * var(--u)); }
.dm-view dl > div.is-nieuw { animation: dm-flits 1.4s ease; }
.dm-view dt { color: var(--dm-60); font-size: calc(2.3 * var(--u) * var(--t, 1)); }
.dm-view dd { margin: 0; font-size: calc(2.3 * var(--u) * var(--t, 1)); line-height: 1.35; overflow-wrap: anywhere; }
.dm-wire-chat { grid-column: 2; grid-row: 1; transition: opacity .35s ease, transform .5s var(--dm-zacht); }
.dm-wire-chat:not(.is-on) { opacity: 0; transform: translateY(calc(2 * var(--u))); }
.dm-wire-chat-h { margin: 0 0 calc(1.3 * var(--u)); color: var(--dm-60); font-size: calc(2.3 * var(--u) * var(--t, 1)); }
.dm-wire-chat div.toolcard {
  gap: calc(1.6 * var(--u));
  padding: calc(1.3 * var(--u)) calc(2 * var(--u));
  border-radius: calc(1.8 * var(--u));
  font-size: calc(2.4 * var(--u) * var(--t, 1));
}
.dm-wire-chat .toolcard-name { font-size: calc(2.4 * var(--u) * var(--t, 1)); }
.dm-wire-chat .toolcard-state { font-size: calc(2.2 * var(--u) * var(--t, 1)); }
.dm-wire-chat .toolcard-state::before { width: calc(1.3 * var(--u)) !important; height: calc(1.3 * var(--u)) !important; }
.dm-wire-chat .toolcard.is-open { border-radius: calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0 0; }
.dm-wire-refuse {
  margin: 0;
  padding: 0 calc(2 * var(--u)) calc(1.5 * var(--u));
  border-radius: 0 0 calc(1.8 * var(--u)) calc(1.8 * var(--u));
  background: rgba(12, 19, 48, .05);
  box-shadow: inset 3px 0 0 var(--red);
  font-size: calc(2.2 * var(--u) * var(--t, 1));
  line-height: 1.4;
}
.dm-wire-refuse[hidden] { display: none; }
.dm-wire-cap { margin: calc(1.4 * var(--u)) 0 0; color: var(--dm-60); font-size: calc(2.25 * var(--u) * var(--t, 1)); line-height: 1.4; transition: opacity .35s ease; }
.dm-wire-cap.is-uit { opacity: 0; }
@container (max-width: 380px) {
  .dm-wire-onder { grid-template-columns: minmax(0, 1fr); }
  .dm-wire-chat,
  .dm-toast { grid-column: 1; grid-row: 2; }
}

/* ==========================================================================
   05 · chat: het vel van de tool, met "All agents" rechtsboven vast
   ========================================================================== */

.dm-chat .replica-sheet {
  aspect-ratio: 16 / 10;
  min-height: 540px;
  --dm-rand: 14px;
  --dm-voet: 176px;             /* ruimte voor de vragen en de praatknop */
}
@media (max-width: 759px) {
  .dm-chat .replica-sheet { aspect-ratio: 9 / 16; min-height: 0; --dm-voet: 150px; }
}

.dm-chat-vel {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.dm-chat-vel,
.dm-chat-map { transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .3s ease-out; }
.dm-chat-char { position: absolute; inset: 0; z-index: 0; --kx: 42%; --ky: 56%; --kd: 150%; --fx: 36%; --fy: 44%; --fw: 18%; }

/* linksboven: de menuknop en de statusregel */
.dm-chat-menu {
  position: absolute;
  z-index: 4;
  top: var(--dm-rand);
  left: var(--dm-rand);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--dm-inkt);
}
.dm-chat-menu svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.dm-chat-menu .dm-vul { fill: currentColor; stroke: none; }
.dm-chat-status {
  position: absolute;
  z-index: 4;
  top: calc(var(--dm-rand) + 13px);
  left: calc(var(--dm-rand) + 52px);
  right: calc(var(--dm-rand) * 2 + 44px);   /* nooit onder de knop rechtsboven */
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease;
}
.dm-chat-status.is-uit { opacity: 0; }
.dm-chat-title { flex: none; color: var(--dm-inkt); font-weight: 600; }
.dm-chat-detail { min-width: 0; overflow: hidden; color: var(--dm-42); font-size: 12px; text-overflow: ellipsis; }

/* Rechtsboven: "All agents". Vast in de hoek van het vel, op elke breedte,
   nooit in de stroom en nooit onder iets anders. */
.dm-all {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--dm-inkt);
  cursor: pointer;
  transition: background-color .18s ease;
}
.dm-all:hover { background: var(--dm-tint); }
.dm-all[aria-expanded="true"] { background: var(--dm-tint2); }
.dm-all svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Het tooltipje: de plaatsingsregel zonder gewicht (:where), zodat hij de
   knop nooit uit zijn hoek haalt. Het label hangt onder de knop, rechts
   uitgelijnd, en duwt niets opzij. */
:where(.dm-chat [data-tip]) { position: relative; }
.dm-chat [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--dm-inkt);
  color: #fff;
  font: 500 12px/1.2 var(--sans);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.dm-chat [data-tip]:hover::after,
.dm-chat [data-tip]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .dm-chat [data-tip]::after { display: none; } }

/* het antwoord: een rij lager dan de knop, rechts; smal over de hele breedte */
.dm-chat-out {
  position: absolute;
  z-index: 3;
  top: 64px;
  right: var(--dm-rand);
  width: min(46%, 430px);
  max-height: calc(100% - 64px - var(--dm-voet));
  display: flex;
  flex-direction: column;
  transition: opacity .3s ease, transform .4s var(--dm-zacht);
}
.dm-chat-out.is-uit { opacity: 0; transform: translateY(-8px) scale(.985); pointer-events: none; }
.dm-chat-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--dm-lijn);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 14px 44px rgba(22, 41, 74, .12);
  font-size: 14.5px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: var(--dm-lijn2) transparent;
}
.dm-chat-tail { flex: none; display: flex; align-items: center; gap: 5px; margin: 7px 0 0 14px; }
.dm-chat-tail i { display: block; border: 1px solid var(--dm-lijn); border-radius: 50%; background: #fff; }
.dm-chat-tail i:nth-child(1) { width: 13px; height: 13px; }
.dm-chat-tail i:nth-child(2) { width: 9px; height: 9px; }
.dm-chat-tail i:nth-child(3) { width: 5px; height: 5px; }
.dm-chat.is-bezig .dm-chat-tail i { border-color: var(--dm-lijn2); animation: dm-bel 1.25s ease-in-out infinite; }
.dm-chat.is-bezig .dm-chat-tail i:nth-child(2) { animation-delay: .16s; }
.dm-chat.is-bezig .dm-chat-tail i:nth-child(3) { animation-delay: .32s; }
@keyframes dm-bel { 0%, 100% { transform: none; } 45% { transform: translateY(-4px) scale(1.14); } }

.dm-msg { display: flex; flex-direction: column; gap: 5px; }
.dm-msg.is-in { animation: dm-in .3s ease both; }
.dm-msg-who { color: var(--dm-42); font-size: 12px; font-weight: 600; }
.dm-msg-text { margin: 0; }
.dm-docs {
  align-self: flex-start;
  display: inline-flex;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dm-tint2);
  color: rgba(22, 41, 74, .8);
  font-size: 13px;
}
.dm-chat .toolcard { margin: 2px 0 8px; }
.dm-chat .toolcard-json { max-height: 150px; font-size: 12px; }
.dm-prose { min-height: 1.55em; overflow-wrap: anywhere; }
.dm-prose p { margin: 0 0 10px; }
.dm-prose > :last-child { margin-bottom: 0; }
.dm-prose table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.dm-prose th,
.dm-prose td { padding: 6px 9px; border: 1px solid var(--dm-lijn); text-align: left; vertical-align: top; }
.dm-prose th { background: var(--dm-tint); font-weight: 500; }
.dm-prose tr { animation: dm-in .25s ease both; }
.dm-cursor::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--dm-inkt);
  animation: dm-caret 1.05s steps(2) infinite;
}
.dm-prose.dm-cursor:empty::after { margin-left: 0; }

/* onderaan: de vragen, de praatknop en rechts de knop om te typen */
.dm-chat-foot {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px calc(var(--dm-rand) + 44px) 18px;
  pointer-events: none;
}
.dm-chat-foot > * { pointer-events: auto; }
.dm-ask { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.dm-ask[hidden] { display: none; }
.dm-ask-label {
  margin: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--dm-60);
  font-size: 12.5px;
}
.dm-ask-chips {
  display: flex;
  gap: 6px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dm-ask-chips::-webkit-scrollbar { display: none; }
.dm-ask-chips > :first-child { margin-left: auto; }
.dm-ask-chips > :last-child { margin-right: auto; }
.dm-q { flex: none; min-height: 32px; padding: 5px 12px; background: rgba(255, 255, 255, .94); font-size: 13px; white-space: nowrap; }
.dm-ask .dm-q[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--dm-inkt), 0 6px 14px -8px rgba(22, 41, 74, .4); }

.dm-talk {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dm-inkt);
  box-shadow: 0 8px 26px rgba(22, 41, 74, .26);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.3, .8, .4, 1);
}
.dm-talk:hover { transform: scale(1.05); }
.dm-talk:active { transform: scale(.96); }
.dm-talk:focus-visible { outline: 2px solid var(--dm-inkt); outline-offset: 5px; }
.dm-talk-vorm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: border-radius .26s cubic-bezier(.3, .8, .4, 1), width .26s cubic-bezier(.3, .8, .4, 1), height .26s cubic-bezier(.3, .8, .4, 1), background-color .2s ease;
}
.dm-talk::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1.5px solid var(--dm-baby);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.dm-talk[data-actie="stoppen"] .dm-talk-vorm { width: 18px; height: 18px; border-radius: 5px; background: var(--dm-baby); }
.dm-talk[data-actie="stoppen"]::after { opacity: 1; animation: dm-luister 1.1s ease-in-out infinite; }
@keyframes dm-luister { 50% { transform: scale(1.1); } }

.dm-typebtn {
  position: absolute;
  z-index: 6;
  right: var(--dm-rand);
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--dm-42);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.dm-typebtn:hover,
.dm-typebtn[aria-expanded="true"] { color: var(--dm-inkt); background: var(--dm-tint); }
.dm-typebtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* praten: golf, woorden die nog vervaagd zijn, en eerlijk wat dit is */
.dm-chat-voice { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.dm-chat-voice[hidden] { display: none; }
.dm-golf { display: flex; align-items: center; gap: 5px; height: 38px; }
.dm-golf i {
  width: 5px;
  height: 12px;
  border-radius: 3px;
  background: var(--dm-inkt);
  animation: dm-golf .9s ease-in-out infinite;
}
.dm-golf i:nth-child(2n) { animation-delay: -.3s; animation-duration: .8s; }
.dm-golf i:nth-child(3n) { animation-delay: -.55s; animation-duration: 1.05s; }
.dm-golf i:nth-child(5n) { animation-delay: -.15s; }
@keyframes dm-golf { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(2.3); } }
.dm-transcript {
  max-width: 100%;
  min-height: 1.4em;
  margin: 0;
  color: var(--dm-inkt);
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 0 14px #fff, 0 0 6px #fff;
}
.dm-transcript .dm-vaag { color: var(--dm-42); }
.dm-voicenote {
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--dm-60);
  font-size: 12.5px;
}

/* typen: de invoerkaart van de tool */
.dm-chat-typecard {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--dm-inkt);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 16px rgba(22, 41, 74, .08);
  animation: dm-in .25s ease both;
}
.dm-chat-typecard[hidden] { display: none; }
.dm-typefield { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.dm-typed:not(:empty) + .dm-typeholder { display: none; }
.dm-typeholder { color: var(--dm-42); }
.dm-typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -.2em;
  background: var(--dm-inkt);
  animation: dm-caret 1s steps(2) infinite;
}
.dm-typesend {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dm-inkt);
  color: #fff;
  transition: transform .15s ease, box-shadow .25s ease;
}
.dm-typesend svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* All agents: het vel zoomt uit naar de kaart */
.dm-chat-map {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #fff;
  --dm-orb: clamp(54px, 9vw, 108px);
}
.dm-chat-map[hidden] { display: none; }
.dm-chat-map .dm-mapbtns { position: absolute; top: 18px; right: 74px; gap: 8px; }
.dm-chat-map .dm-mapbtns i { width: 38px; height: 38px; border-radius: 12px; }
.dm-map-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: 76px 4% 44px;
}
.dm-map-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 24px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
}
.dm-map-agent .orb { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
button.dm-map-agent { cursor: pointer; }
button.dm-map-agent:hover .orb { transform: scale(1.08); }
.dm-map-agent .orb-name { font-size: 13px; }
.dm-map-agent .orb-role { margin-top: -8px; color: var(--dm-60); font-size: 12px; }
.dm-map-agent.is-actief .orb { transform: scale(1.07); }
.dm-map-agent.is-actief .orb-name { color: var(--dm-inkt); font-weight: 600; }
.dm-map-hint { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; color: var(--dm-60); font-size: 12.5px; text-align: center; }

@media (max-width: 759px) {
  .dm-chat-out { left: var(--dm-rand); right: var(--dm-rand); width: auto; }
  .dm-chat-tail { flex-direction: column; gap: 4px; margin: 7px auto 0; }
  .dm-chat-body { gap: 14px; padding: 15px; font-size: 13.5px; }
  .dm-chat-foot { gap: 9px; padding: 8px var(--dm-rand) 14px; }
  .dm-talk { width: 52px; height: 52px; }
  .dm-typebtn { bottom: 21px; }
  .dm-transcript { font-size: 15px; }
  .dm-chat-map .dm-mapbtns { top: 17px; right: 64px; }
  .dm-chat-map .dm-mapbtns i { width: 34px; height: 34px; }
  .dm-map-grid { grid-template-rows: repeat(2, auto); align-content: center; row-gap: 26px; padding: 70px 2% 44px; }
  .dm-map-agent .orb-name { font-size: 12px; }
}

/* De twee echte schermen onder de replica: even hoog, naast elkaar. */
.dm-duo { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; }
.dm-duo-chat { flex: 2.286 1 0; min-width: 0; }
.dm-duo-drawer { flex: .528 1 0; min-width: 0; }
@media (max-width: 699px) {
  .dm-duo { flex-direction: column; }
  .dm-duo-chat { flex: none; width: 100%; }
  .dm-duo-drawer { flex: none; width: 62%; }
}

/* Minder beweging: alles staat meteen in zijn eindstand. */
@media (prefers-reduced-motion: reduce) {
  .dm-ob-part, .dm-ob-card, .dm-group, .dm-toast, .dm-wire-chat, .dm-chat-vel, .dm-chat-map { transition: none; }
  .dm-golf i, .dm-talk[data-actie="stoppen"]::after, .dm-dots i { animation: none; }
}