/* agent.css: sectie 5 van de mix, kijk wat de agent doet. Ronde 3 (22 oktober 2026, brief BRIEF-agent-podium.md).
   Per voorbeeld één donker podium: links de telefoon van de zaak, groot en recht, afgesneden door de onderrand
   (WhatsApp Business, of Mail bij het cv); rechts een witte kaart met het resultaat in één zin, de daden met een vinkje,
   het scherm van het systeem met de wijziging en onderaan één voetregel met de systemen; ertussen de agent als smalle
   draad van stappen aan een lijn van licht, die na hun vinkje inklappen tot één regel. Hoort bij agent.js; de parels
   komen van de motor (motor.js en motor.css, zonder zon, op donkere grond). Alles heeft het voorvoegsel at-.
   Letters: General Sans voor de zin op de kaart, Hanken Grotesk voor tekst, Geist Mono alleen voor de aanroep onder
   een stap (klein en grijs), binnen het scherm van de telefoon de systeemletter van iOS. Maten in de telefoon in punten
   van iOS (--pt: één punt van een scherm van 393 punten breed), zodat de verhoudingen kloppen. Alles recht: geen
   rotate, skew of perspectief; diepte alleen met schaduw en licht. Zonder JavaScript staat de eindstand van de
   ziekmelding. */

.agent { overflow-x: clip; }
.agent {
  --at-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --at-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --at-groen: #10b981;
  --at-amber: #b45309;
  --at-amber-stip: #f59e0b;
  --at-licht: linear-gradient(rgba(178, 210, 252, 0.95), rgba(178, 210, 252, 0.95));   /* de lijn van licht langs de stappen */
  /* Het podium is op breed een fractie breder dan de tekstkolom: hooguit 40 px aan elke kant. */
  --at-uit: 0px;        /* 28 oktober 2026, Huub: het podium even breed als de tekst ("die tekst is minder breed dan de widget") */
  --at-pad: 40px;      /* de binnenrand links en rechts */
  --at-boven: 56px;    /* boven de draad en de kaart */
  --at-gat: 32px;      /* tussen telefoon, draad en kaart */
  --at-tw: 330px;      /* de breedte van de telefoon */
  --at-tz: 560px;      /* hoeveel van de telefoon in beeld is (ongeveer 80 procent van het toestel) */
  --at-kw: 384px;      /* de breedte van de kaart */
}
.at-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== De tabs: drie voorbeelden en Nog een keer ===== */
.at-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.at-tab { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px 13px; border-radius: 14px; background: var(--wit); border: 1px solid rgba(11, 18, 32, 0.08); font-size: 15px; font-weight: 500; color: var(--leisteen); overflow: hidden; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.at-tab small { font-size: 12.5px; color: var(--mist); font-weight: 500; }
.at-tab:hover { color: var(--inkt); }
.at-tab[aria-selected="true"] { color: var(--inkt); border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 10px 24px -16px rgba(37, 99, 235, 0.55); }
.at-tab[aria-selected="true"] small { color: var(--blauw); }
/* De voortgang van het voorbeeld dat speelt: een blauwe streep onder de tab, vol als het klaar is. */
.at-tab-loop { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--blauw); transform: scaleX(var(--loop, 1)); transform-origin: 0 50%; opacity: 0; }
.at-tab[aria-selected="true"] .at-tab-loop { opacity: 1; }
.at-nog { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; color: var(--leisteen); font-size: 14px; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; }
.at-nog:hover { color: var(--blauw); background: var(--tint); }
.geen-js .at-tabs { display: none; }

/* ===== De podia: per voorbeeld één, gestapeld in één rastercel, zodat een tab de pagina niet laat verspringen ===== */
.at-toneelen { display: grid; }
.at-toneel { grid-area: 1 / 1; min-width: 0; }
.js .at-toneel:not(.aan) { visibility: hidden; }
.geen-js .at-toneel:not([data-vb="ziek"]) { display: none; }

/* Het podium is de motorkap: inkt met de korrel van de pagina, licht van het scherm op de grond, en het licht van de
   motor. De telefoon staat onderaan en loopt door de onderrand weg; de draad en de kaart staan bovenaan. Is de draad
   hoger dan de telefoon (op smallere maten), dan groeit het podium mee en blijft de telefoon op de onderrand staan. */
.at-podium {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  margin: 0 calc(-1 * var(--at-uit));
  display: grid; grid-template-columns: var(--at-tw) minmax(0, 1fr) var(--at-kw); column-gap: var(--at-gat); align-items: start;
  min-height: calc(var(--at-boven) + var(--at-tz)); padding: 0 var(--at-pad);
  border-radius: 28px; color: #e8eef7;
  background:
    radial-gradient(34% 52% at calc(var(--at-pad) + var(--at-tw) / 2) 104%, rgba(147, 197, 253, 0.16), rgba(147, 197, 253, 0) 72%),
    radial-gradient(46% 70% at 64% -8%, rgba(96, 165, 250, 0.09), rgba(96, 165, 250, 0) 70%),
    linear-gradient(180deg, #0f1832 0%, #0c1426 54%, #0b1220 100%);
  box-shadow: 0 56px 90px -62px rgba(11, 18, 32, 0.7), 0 18px 36px -30px rgba(11, 18, 32, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.at-korrel { z-index: 1; border-radius: inherit; opacity: 0.1; }
.at-tel, .at-draad, .at-kaart { position: relative; z-index: 5; }

/* De lijnen en parels van de motor: alles recht (geen glansstreep met skew, geen gedraaid spoor) en de tik zonder de
   tweede, grote ring. Wacht en tik landen op de witte kaart, dus in het blauw van lichte grond. */
.at-podium .mt-chip-glans, .at-podium .mt-pakket-spoor, .at-podium .mt-ring-zacht { display: none; }
.at-podium .mt-chip-extra:empty { display: none !important; }
.at-podium .mt-chip { font-size: 12.5px; }
.at-podium .mt-wacht { box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0.9), 0 0 22px rgba(96, 165, 250, 0.55); }
.at-podium .mt-wacht-ring { box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.8); }
.at-podium .mt-ring { border-color: rgba(37, 99, 235, 0.95); box-shadow: 0 0 18px rgba(96, 165, 250, 0.6), inset 0 0 12px rgba(96, 165, 250, 0.3); }

/* ===== 1. De telefoon: een iPhone van 393 punten breed, recht en frontaal, alleen het bovenste deel in beeld ===== */
.at-tel { grid-column: 1; grid-row: 1; align-self: end; width: var(--at-tw); height: var(--at-tz); }
.at-ios {
  --zijde: calc(var(--at-tw) * 0.0345);   /* rand plus bezel, per kant */
  --ti: calc(var(--at-tw) * 0.0115);      /* de titaniumrand */
  --pt: calc((var(--at-tw) - 2 * var(--zijde)) / 393);
  --hoek: calc(55 * var(--pt));
  position: absolute; left: 0; top: 0; width: var(--at-tw); height: calc(852 * var(--pt) + 2 * var(--zijde));
  padding: var(--ti); border-radius: calc(var(--hoek) + var(--zijde));
  /* Zwart titanium, zoals Apple zijn toestel op donkere grond zet: de rand valt bijna weg in het podium, alleen het licht
     van linksboven en een zweem blauw van het podium rechts tekenen hem, zodat het scherm de hoofdrol houdt. */
  background: linear-gradient(132deg, #8e8b86 0%, #4b4945 5%, #2c2b29 15%, #3a3936 34%, #222120 55%, #33322f 75%, #1a1918 100%);
  box-shadow:
    inset 0 0 0 0.7px rgba(255, 255, 255, 0.16), inset 0.8px 1px 0 rgba(255, 255, 255, 0.34), inset -0.7px 0 0 rgba(147, 197, 253, 0.16),
    -26px 0 48px -22px rgba(0, 0, 0, 0.62), 26px 0 48px -22px rgba(0, 0, 0, 0.62), 0 -10px 40px -24px rgba(0, 0, 0, 0.5);
}
/* De zwarte bezel binnen de rand, met de rand van het glas als dunne lichte lijn; daarbuiten de gepolijste schuine
   kant van het metaal, een haarfijne lichte lijn zoals op Apples eigen beelden. */
.at-ios-glas { height: 100%; padding: calc(var(--zijde) - var(--ti)); border-radius: calc(var(--hoek) + var(--zijde) - var(--ti)); background: #040405; box-shadow: inset 0 0 0 0.7px rgba(0, 0, 0, 0.95), inset 0 0 0 1.4px rgba(255, 255, 255, 0.08), 0 0 0 0.8px rgba(214, 208, 200, 0.24); }
.at-ios-scherm {
  position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: var(--hoek);
  background: #efeae2; color: #000; font-family: var(--at-ios); font-size: calc(17 * var(--pt)); line-height: 1.25; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; font-variant-numeric: normal;
}
.at-ios-scherm svg { display: block; flex: none; }
.at-ios-wit { background: #fff; }
/* Een zweem van weerspiegeling op het glas, van linksboven. */
.at-ios-glans { position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0) 34%); }
/* De knoppen: smalle lichtere lijnen op de zijkant (actieknop, volume, aan en uit). */
.at-ios-knop { position: absolute; width: 2.4px; border-radius: 1.4px 0 0 1.4px; background: linear-gradient(90deg, #232220, #615f5a 55%, #2e2d2b); box-shadow: inset 0 0 0 0.4px rgba(0, 0, 0, 0.4); }
.at-ios-knop-actie { left: -1.6px; top: 17%; height: 4.2%; }
.at-ios-knop-op { left: -1.6px; top: 24.6%; height: 7.6%; }
.at-ios-knop-neer { left: -1.6px; top: 33.6%; height: 7.6%; }
.at-ios-knop-aan { right: -1.6px; top: 27.4%; height: 11.2%; border-radius: 0 1.4px 1.4px 0; background: linear-gradient(90deg, #2e2d2b, #615f5a 45%, #232220); }

/* De statusbalk: de tijd, het eiland met het lensje, bereik, wifi en de accu. */
.at-ios-status { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: calc(59 * var(--pt)); display: grid; grid-template-columns: 1fr calc(125 * var(--pt)) 1fr; align-items: center; pointer-events: none; }
.at-ios-tijd { justify-self: center; padding-left: calc(10 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.at-ios-eiland { position: relative; display: block; height: calc(36.7 * var(--pt)); border-radius: 999px; background: #000; }
.at-ios-lens { position: absolute; right: calc(13.5 * var(--pt)); top: 50%; width: calc(11.5 * var(--pt)); height: calc(11.5 * var(--pt)); margin-top: calc(-5.75 * var(--pt)); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #44557f 0%, #18203a 40%, #07080d 74%); box-shadow: 0 0 0 calc(1.4 * var(--pt)) #0d0e12; }
.at-ios-iconen { justify-self: center; display: flex; align-items: center; gap: calc(5.5 * var(--pt)); padding-right: calc(8 * var(--pt)); }
.at-ios-iconen svg { fill: currentColor; }
.at-ios-bereik { width: calc(18 * var(--pt)); height: calc(12 * var(--pt)); }
.at-ios-wifi { width: calc(16 * var(--pt)); height: calc(12 * var(--pt)); }
.at-ios-accu { width: calc(26.5 * var(--pt)); height: calc(12.8 * var(--pt)); }

/* WhatsApp Business: de kop met wie je spreekt en het gesprek op het beige behang. Alleen het deel boven de onderrand
   van het podium telt: daar eindigt het gesprek, met het nieuwste bericht vlak boven de rand. */
.at-wa, .at-ml { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--at-tz) - var(--zijde)); display: flex; flex-direction: column; }
.at-wa-kop { flex: none; position: relative; z-index: 3; display: flex; align-items: center; height: calc(104 * var(--pt)); padding: calc(59 * var(--pt)) calc(17 * var(--pt)) 0 calc(8 * var(--pt)); background: rgba(246, 246, 246, 0.97); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.18); }
.at-wa-terug { display: flex; align-items: center; gap: calc(5 * var(--pt)); color: #007aff; }
.at-wa-terug svg { width: calc(12 * var(--pt)); height: calc(21 * var(--pt)); }
.at-wa-terug b { font-weight: 400; font-size: calc(17 * var(--pt)); }
.at-wa-av { width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); margin-left: calc(11 * var(--pt)); }
.at-wa-wie { flex: 1; min-width: 0; margin-left: calc(9 * var(--pt)); display: grid; line-height: 1.22; }
.at-wa-wie b { font-size: calc(16.5 * var(--pt)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-wa-wie .at-wissel { display: grid; }
.at-wa-wie small { font-size: calc(12.5 * var(--pt)); color: #8a8a8e; }
.at-wa-acties { display: flex; align-items: center; gap: calc(25 * var(--pt)); color: #007aff; }
.at-wa-video { width: calc(25 * var(--pt)); height: calc(17 * var(--pt)); }
.at-wa-bel-i { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.at-wa-chat {
  position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  background-color: #efeae2;
  /* Het patroon van tekeningetjes, net zichtbaar zoals in WhatsApp zelf. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='144' viewBox='0 0 160 144' fill='none' stroke='%23e4ddd1' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30c-4.6-3.4-8-6.2-8-9.6a4 4 0 0 1 8-1.6 4 4 0 0 1 8 1.6c0 3.4-3.4 6.2-8 9.6z'/%3E%3Cpath d='M60 12l2.6 5.4 6 .9-4.3 4.2 1 5.9-5.3-2.8-5.3 2.8 1-5.9-4.3-4.2 6-.9z'/%3E%3Cpath d='M92 31h20a5.6 5.6 0 0 0-1.2-11 8 8 0 0 0-15.2 2.2A4.6 4.6 0 0 0 92 31z'/%3E%3Cpath d='M134 16h12v9a6 6 0 0 1-12 0zM146 19h2.4a3 3 0 0 1 0 6H146'/%3E%3Cpath d='M18 78a3.4 3.4 0 1 1-3.4-3.4A3.4 3.4 0 0 1 18 78V63l11-2.4v14.4a3.4 3.4 0 1 1-3.4-3.4'/%3E%3Ccircle cx='62' cy='70' r='8'/%3E%3Cpath d='M58.6 72.4a4.8 4.8 0 0 0 6.8 0M59.4 67.4h.01M64.6 67.4h.01'/%3E%3Crect x='96' y='60' width='14' height='22' rx='2.6'/%3E%3Cpath d='M101 77.6h4'/%3E%3Cpath d='M134 80c0-10 7-15 16-15 0 9-6 15-16 15zM134 80l9-9'/%3E%3Cpath d='M20 106a6.6 7.6 0 1 1-.01 0zM20 121.2l-1.4 2.6h2.8zM20 123.8c0 3 2.4 4.4 0 7.6'/%3E%3Cpath d='M51 112h4.4l2-3h7.2l2 3H71a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H51a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z'/%3E%3Ccircle cx='61' cy='118.6' r='3.8'/%3E%3Cpath d='M92 120l20-8-6.4 18-4.6-6.6zM101 123.4l11-11.4'/%3E%3Ccircle cx='142' cy='118' r='5'/%3E%3Cpath d='M142 108v3M142 125v3M132 118h3M149 118h3M135 111l2 2M147 123l2 2M149 111l-2 2M137 123l-2 2'/%3E%3Cg fill='%23e4ddd1' stroke='none'%3E%3Ccircle cx='40' cy='48' r='1.2'/%3E%3Ccircle cx='82' cy='46' r='1.2'/%3E%3Ccircle cx='120' cy='50' r='1.2'/%3E%3Ccircle cx='152' cy='44' r='1.2'/%3E%3Ccircle cx='40' cy='96' r='1.2'/%3E%3Ccircle cx='80' cy='98' r='1.2'/%3E%3Ccircle cx='122' cy='94' r='1.2'/%3E%3Ccircle cx='4' cy='96' r='1.2'/%3E%3Ccircle cx='42' cy='138' r='1.2'/%3E%3Ccircle cx='84' cy='140' r='1.2'/%3E%3Ccircle cx='124' cy='138' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: calc(132 * var(--pt)) calc(119 * var(--pt));
}
/* Het gesprek. Zolang het past, staat het bovenaan, direct onder de kop, zoals WhatsApp en Mail een kort gesprek tonen
   (de automarge onderaan vangt de lege ruimte op). Wordt het ooit langer dan het scherm, dan staat zonder JavaScript
   het nieuwste bericht vlak boven de rand, en schuift agent.js het gesprek omhoog als er een bericht bijkomt. */
.at-wa-stroom, .at-ml-stroom { position: relative; flex: none; display: flex; flex-direction: column; margin-bottom: auto; padding-bottom: var(--at-marge, calc(12 * var(--pt))); }
.at-wa-stroom { gap: calc(2.5 * var(--pt)); padding-top: calc(8 * var(--pt)); padding-left: calc(10 * var(--pt)); padding-right: calc(10 * var(--pt)); }
.js .at-wa-chat, .js .at-ml-chat { justify-content: flex-start; }
.js .at-wa-stroom, .js .at-ml-stroom { transform: translateY(var(--at-schuif, 0px)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.at-wa-melding { align-self: center; max-width: 86%; margin: calc(2 * var(--pt)) 0 calc(6 * var(--pt)); }
.at-wa-melding span { display: block; padding: calc(6 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(9 * var(--pt)); background: #fdf4c5; box-shadow: 0 calc(1 * var(--pt)) calc(0.5 * var(--pt)) rgba(11, 20, 26, 0.08); text-align: center; font-size: calc(12.5 * var(--pt)); line-height: 1.32; color: #54656f; }
.at-wa-dag { align-self: center; margin: calc(8 * var(--pt)) 0 calc(6 * var(--pt)); }
.at-wa-dag span { display: block; padding: calc(4.5 * var(--pt)) calc(11 * var(--pt)); border-radius: calc(9 * var(--pt)); background: rgba(255, 255, 255, 0.95); box-shadow: 0 calc(1 * var(--pt)) calc(0.5 * var(--pt)) rgba(11, 20, 26, 0.09); font-size: calc(12.5 * var(--pt)); font-weight: 500; color: #54656f; }
.at-wa-b {
  position: relative; max-width: 79%; padding: calc(6.5 * var(--pt)) calc(9 * var(--pt)) calc(7 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(17 * var(--pt));
  font-size: calc(17 * var(--pt)); line-height: 1.29; letter-spacing: -0.012em; color: #111b21;
  filter: drop-shadow(0 calc(0.8 * var(--pt)) calc(0.3 * var(--pt)) rgba(11, 20, 26, 0.13));
}
.at-wa-in { align-self: flex-start; margin-left: calc(6 * var(--pt)); background: #fff; border-bottom-left-radius: calc(5 * var(--pt)); }
.at-wa-uit { align-self: flex-end; margin-right: calc(6 * var(--pt)); background: #d9fdd3; border-bottom-right-radius: calc(5 * var(--pt)); }
.at-wa-in + .at-wa-uit, .at-wa-uit + .at-wa-in { margin-top: calc(6 * var(--pt)); }
/* Het staartje onderaan de bel, zoals WhatsApp op iOS hem tekent. */
.at-wa-b::before { content: ""; position: absolute; bottom: 0; width: calc(14 * var(--pt)); height: calc(17 * var(--pt)); background: no-repeat 0 0 / 100% 100%; }
.at-wa-in::before { left: calc(-7 * var(--pt)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17' preserveAspectRatio='none'%3E%3Cpath d='M7 2v8.5c0 3.1-2.8 5.9-7 6.5h14V2z' fill='%23fff'/%3E%3C/svg%3E"); }
.at-wa-uit::before { right: calc(-7 * var(--pt)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17' preserveAspectRatio='none'%3E%3Cpath d='M7 2v8.5c0 3.1 2.8 5.9 7 6.5H0V2z' fill='%23d9fdd3'/%3E%3C/svg%3E"); }
/* De tijd en de vinkjes in de bel, rechtsonder; de lege ruimte houdt de laatste regel vrij. */
.at-wa-ruimte { display: inline-block; width: calc(40 * var(--pt)); height: 1px; }
.at-wa-uit .at-wa-ruimte { width: calc(58 * var(--pt)); }
.at-wa-meta { position: absolute; right: calc(9 * var(--pt)); bottom: calc(5 * var(--pt)); display: flex; align-items: center; gap: calc(3 * var(--pt)); font-size: calc(11 * var(--pt)); line-height: 1; letter-spacing: 0; color: rgba(17, 27, 33, 0.48); font-variant-numeric: tabular-nums; }
.at-wa-vinken { display: inline-grid; }
.at-wa-vinken > * { grid-area: 1 / 1; }
.at-wa-vink { width: calc(16.5 * var(--pt)); height: calc(10.5 * var(--pt)); color: #8696a0; }
.at-wa-vink-blauw { color: #53bdeb; }
/* Typt...: een bel met drie puntjes, waar het bericht zo komt (agent.js zet hem op zijn plek). */
.at-wa-typt { position: absolute; left: calc(16 * var(--pt)); top: 0; display: flex; align-items: center; gap: calc(4 * var(--pt)); height: calc(36 * var(--pt)); padding: 0 calc(13 * var(--pt)); border-radius: calc(17 * var(--pt)); border-bottom-left-radius: calc(5 * var(--pt)); background: #fff; filter: drop-shadow(0 calc(0.8 * var(--pt)) calc(0.3 * var(--pt)) rgba(11, 20, 26, 0.13)); }
.at-wa-typt i { width: calc(7.5 * var(--pt)); height: calc(7.5 * var(--pt)); border-radius: 50%; background: #9aa5ab; animation: at-typt 1.2s ease-in-out infinite; }
.at-wa-typt i:nth-child(2) { animation-delay: 0.16s; }
.at-wa-typt i:nth-child(3) { animation-delay: 0.32s; }
@keyframes at-typt { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(calc(-2 * var(--pt))); } }

/* Mail op iOS: de mailbox Vacatures, het gesprek met Dana. */
.at-ml { background: #fff; }
.at-ml-nav { flex: none; position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: calc(102 * var(--pt)); padding: calc(59 * var(--pt)) calc(18 * var(--pt)) 0 calc(8 * var(--pt)); background: rgba(255, 255, 255, 0.97); color: #007aff; font-size: calc(17 * var(--pt)); }
/* Is het gesprek omhoog geschoven, dan schuift het onder de balk door en krijgt die zijn haarlijn, zoals in Mail. */
.at-ml-nav { transition: box-shadow 0.3s ease; }
.at-geschoven .at-ml-nav, .geen-js .at-ml-nav { box-shadow: 0 0.5px 0 rgba(60, 60, 67, 0.3); }
.at-ml-terug { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.at-ml-terug svg { width: calc(12 * var(--pt)); height: calc(21 * var(--pt)); }
.at-ml-pijlen { display: flex; gap: calc(24 * var(--pt)); }
.at-ml-pijlen svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.at-ml-chat { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.at-ml-stroom { padding-left: calc(18 * var(--pt)); padding-right: calc(18 * var(--pt)); padding-top: calc(2 * var(--pt)); }
.at-ml-onderwerp { margin-bottom: calc(10 * var(--pt)); font-size: calc(22 * var(--pt)); font-weight: 700; line-height: 1.18; letter-spacing: -0.022em; }
/* Eerdere berichten in het gesprek: ingeklapt, met de eerste regel. */
.at-ml-dicht { display: flex; align-items: flex-start; gap: calc(10 * var(--pt)); padding: calc(11 * var(--pt)) 0; box-shadow: inset 0 0.5px 0 rgba(60, 60, 67, 0.25); }
.at-ml-dicht-tekst { flex: 1; min-width: 0; display: grid; line-height: 1.28; }
.at-ml-dicht-tekst b { font-size: calc(16 * var(--pt)); font-weight: 600; }
.at-ml-dicht-tekst small { font-size: calc(15 * var(--pt)); color: #8a8a8e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.at-ml-bericht { position: relative; padding: calc(13 * var(--pt)) 0 calc(14 * var(--pt)); box-shadow: inset 0 0.5px 0 rgba(60, 60, 67, 0.25); }
.at-ml-kop { display: flex; align-items: flex-start; gap: calc(10 * var(--pt)); }
.at-ml-av { flex: none; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #a9afbb, #868c98); color: #fff; font-size: calc(14.5 * var(--pt)); font-weight: 500; font-style: normal; letter-spacing: 0.02em; }
.at-ml-av-wij { background: linear-gradient(180deg, #8fb0e9, #5f86cf); }
.at-ml-wie { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.at-ml-wie b { font-size: calc(17 * var(--pt)); font-weight: 600; }
.at-ml-wie small, .at-ml-tijd { font-size: calc(15 * var(--pt)); color: #8a8a8e; }
.at-ml-tekst { margin-top: calc(10 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: 1.32; }
.at-ml-tekst p + p { margin-top: calc(8 * var(--pt)); }
.at-ml-bijlage { display: flex; align-items: center; gap: calc(11 * var(--pt)); margin-top: calc(10 * var(--pt)); padding: calc(9 * var(--pt)) calc(12 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #f2f2f7; line-height: 1.25; }
.at-ml-bijlage b { display: block; font-size: calc(15 * var(--pt)); font-weight: 500; }
.at-ml-bijlage small { font-size: calc(13 * var(--pt)); color: #8a8a8e; }
.at-ml-pdf { flex: none; width: calc(30 * var(--pt)); height: calc(37 * var(--pt)); display: grid; place-items: end center; padding-bottom: calc(5 * var(--pt)); border-radius: calc(4 * var(--pt)); background: #fff; box-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.16); font-size: calc(9 * var(--pt)); font-weight: 700; font-style: normal; color: #8a8a8e; }
.at-ml-kal { flex: none; width: calc(34 * var(--pt)); height: calc(36 * var(--pt)); display: grid; place-content: center; text-align: center; border-radius: calc(8 * var(--pt)); background: #fff; box-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.16); font-size: calc(17 * var(--pt)); font-weight: 400; font-style: normal; line-height: 1; }
.at-ml-kal small { font-size: calc(9.5 * var(--pt)); font-weight: 600; color: #ff3b30; margin-bottom: calc(2 * var(--pt)); }

/* ===== 2. De agent als smalle draad: stappen aan een lijn van licht, met het icoon van het systeem op de lijn ===== */
.at-draad {
  --at-st-gat: 6px;      /* tussen de stappen */
  --at-st-boven: 14px;   /* tussen de kop en de eerste stap */
  --at-ic-top: 7.5px;    /* het icoon staat midden op de regel van de stap */
  grid-column: 2; grid-row: 1; min-width: 0; margin: var(--at-boven) 0 32px; padding-left: 32px;
}
/* Wie er werkt, en wat hij nu doet: luistert, bezig, wacht op jou, klaar. De stip is het begin van de lijn. */
.at-draad-kop { position: relative; display: flex; align-items: center; gap: 10px; margin-left: -32px; padding-left: 6px; font-size: 12.5px; font-weight: 500; line-height: 18px; letter-spacing: 0.01em; color: #a7b5c9; }
.at-draad-stip { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), 0 0 10px rgba(96, 165, 250, 0.6); transition: background 0.3s ease, box-shadow 0.3s ease; }
.at-draad-wie { min-width: 0; color: #dbe4f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-draad-staat { flex: none; margin-left: auto; color: #8ea0b8; transition: color 0.3s ease; }
.at-draad[data-staat="luistert"] .at-draad-stip { background: #7c8aa0; box-shadow: 0 0 0 3px rgba(124, 138, 160, 0.18); }
.at-draad[data-staat="bezig"] .at-draad-staat { color: #93c5fd; }
.at-draad[data-staat="bezig"] .at-draad-stip { animation: at-hart 1.1s ease-in-out infinite; }
.at-draad[data-staat="wacht"] .at-draad-staat { color: #fbbf24; }
.at-draad[data-staat="wacht"] .at-draad-stip { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 0 10px rgba(245, 158, 11, 0.55); }
.at-draad[data-staat="klaar"] .at-draad-staat { color: #6ee7b7; }
.at-draad[data-staat="klaar"] .at-draad-stip { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18), 0 0 10px rgba(52, 211, 153, 0.45); }
@keyframes at-hart { 0%, 100% { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16), 0 0 8px rgba(96, 165, 250, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.26), 0 0 16px rgba(96, 165, 250, 0.85); } }

/* Een stap. Terwijl hij loopt is hij een kaartje van donker glas met een rand van licht: één regel in gewone taal,
   rechts het vinkje, eronder klein en grijs de aanroep (en bij wachten de klok). Komt de volgende stap, dan klapt hij
   in tot alleen die ene regel met zijn vinkje, zoals het werk bij Giga; de laatste blijft open. Met een tik op de regel
   gaat een stap open of dicht (agent.js zet er een pijltje bij). Zonder JavaScript: alle regels dicht, de laatste open. */
/* align-content: start, zodat de ruimte die agent.js onder elkaar vrijhoudt (min-height) onderaan blijft en niet over
   de rijen wordt verdeeld. */
.at-stappen { display: grid; align-content: start; gap: var(--at-st-gat); margin-top: var(--at-st-boven); }
.at-stap {
  position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px; column-gap: 10px; align-items: start; align-content: start;
  padding: 9px 11px 9px 13px; border-radius: 13px;
}
.at-stap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #172440 0%, #121c33 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 0 rgba(96, 165, 250, 0), 0 16px 28px -20px rgba(0, 0, 0, 0.85), 0 0 0 -6px rgba(96, 165, 250, 0);
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
}
.at-stap.at-open::before { opacity: 1; }
.at-stap.at-loopt::before { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(96, 165, 250, 0.1), 0 16px 28px -20px rgba(0, 0, 0, 0.85), 0 0 26px -6px rgba(96, 165, 250, 0.4); }
/* Het icoon van het systeem staat op de lijn en licht op zolang de stap loopt. */
.at-stap-ic {
  position: absolute; left: -32px; top: var(--at-ic-top); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #0f1a33; color: #bfdbfe; box-shadow: 0 0 0 1.5px rgba(147, 197, 253, 0.55), 0 0 10px rgba(96, 165, 250, 0.22);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.at-stap.at-loopt .at-stap-ic { background: #1b2d57; color: #fff; box-shadow: 0 0 0 1.5px #60a5fa, 0 0 0 4px rgba(96, 165, 250, 0.16), 0 0 16px rgba(96, 165, 250, 0.8); }
.at-stap-ic svg, .at-stap-wacht svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.at-stap-ic svg { width: 12px; height: 12px; }
/* De lijn van licht: per stap een stuk van het icoon omhoog (naar de vorige stap, bij de eerste naar de stip van de
   kop) en een stuk omlaag tot de onderrand van de stap. Dat laatste is vaag tot de volgende stap er is en vult zich dan
   met licht. Zo loopt de lijn vanzelf mee als een stap open- of dichtklapt. Het midden ligt op dat van de iconen. */
.at-stap-ic::before, .at-stap::after { content: ""; position: absolute; width: 3px; pointer-events: none; background-repeat: no-repeat; background-position: 50% 0; }
.at-stap-ic::before { left: 9.5px; bottom: 100%; height: calc(var(--at-st-gat) + var(--at-ic-top)); background-image: var(--at-licht); background-size: 2.5px 100%; filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.6)); }
.at-stap:first-child .at-stap-ic::before { height: calc(var(--at-st-boven) + var(--at-ic-top) + 4px); }
.at-stap::after {
  left: -22.5px; top: calc(var(--at-ic-top) + 22px); bottom: 0;
  background-image: var(--at-licht), linear-gradient(180deg, rgba(147, 197, 253, 0.32), rgba(147, 197, 253, 0.12));
  background-size: 2.5px 0%, 1.5px 100%;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease; filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0));
}
.at-stap.at-door::after, .geen-js .at-stap::after { background-size: 2.5px 100%, 1.5px 100%; filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.6)); }
.at-stap:last-child::after { content: none; }
/* De regel in gewone taal; met JavaScript een knop met een pijltje (dicht naar rechts, open naar beneden). */
.at-stap-kop { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: center; gap: 5px; border-radius: 6px; }
.at-stap-tekst { min-width: 0; font-size: 13.5px; line-height: 19px; font-weight: 500; color: #eef3fa; }
.at-stap-pijl { flex: none; display: grid; width: 14px; height: 14px; color: #6d7b92; transition: color 0.2s ease; }
.at-stap-pijl svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease; }
.at-pijl-open, .at-stap.at-open .at-pijl-dicht { opacity: 0; }
.at-stap.at-open .at-pijl-open { opacity: 1; }
.at-stap-kop[role="button"] { cursor: pointer; }
.at-stap-kop:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
@media (hover: hover) {
  .at-stap:hover .at-stap-pijl { color: #bfdbfe; }
  .js .at-stap:not(.at-open):hover::before { opacity: 0.5; }
}
.at-stap-m { grid-column: 2; grid-row: 1; display: grid; justify-items: end; padding-top: 0.5px; }
.at-stap-m > * { grid-area: 1 / 1; }
.at-vink { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--at-groen); color: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }
.at-vink svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.at-spin { display: inline-flex; align-items: center; gap: 2.5px; height: 18px; }
.at-spin i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #60a5fa; animation: at-punt 0.9s ease-in-out infinite; }
.at-spin i:nth-child(2) { animation-delay: 0.15s; }
.at-spin i:nth-child(3) { animation-delay: 0.3s; }
@keyframes at-punt { 0%, 70%, 100% { opacity: 0.3; } 35% { opacity: 1; } }
/* Binnen jouw regels: de agent besliste hier zelf, zonder akkoord, omdat het past binnen wat jij vooraf bepaalde. */
.at-regels {
  grid-column: 1 / 3; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  padding: 2px 9px 2px 6px; border-radius: 999px; background: rgba(16, 185, 129, 0.13); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.34);
  color: #6ee7b7; font-size: 11.5px; font-weight: 500; line-height: 16px; white-space: nowrap;
}
.at-regels svg, .at-regel svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Wat er onder de regel zit: de klok bij wachten en de aanroep. Klapt in en uit met een raster van 0fr naar 1fr. */
.at-stap-meer { grid-column: 1 / 3; grid-row: 3; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s; }
/* inherit, niet visible: een verborgen voorbeeld (een andere tab) moet verborgen blijven. */
.at-stap.at-open > .at-stap-meer { grid-template-rows: 1fr; visibility: inherit; transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.at-stap-meer-in { min-height: 0; overflow: hidden; }
/* Wachten: de tijd loopt door tot het antwoord of het akkoord er is (agent.js spoelt de klok). */
.at-stap-wacht { margin-top: 6px; display: grid; font-size: 12.5px; line-height: 1.35; color: #dbe4f0; }
.at-stap-wacht > * { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.at-stap-wacht svg { flex: none; width: 12px; height: 12px; align-self: center; color: #8ea0b8; }
.at-stap-wacht time { flex: none; font-variant-numeric: tabular-nums; color: #8ea0b8; }
.at-stap-wacht .at-wacht-nu { color: #93c5fd; }
.at-stap-wacht .at-wacht-nu time, .at-stap-wacht .at-wacht-nu svg { color: #93c5fd; }
.at-stap-wacht .at-wacht-jij { color: #fcd34d; }
.at-stap-wacht .at-wacht-jij time, .at-stap-wacht .at-wacht-jij svg { color: #fcd34d; }
/* De aanroep: de code erachter, als ondertitel. */
.at-stap-code { display: block; margin-top: 5px; font-family: var(--at-mono); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: -0.015em; color: #6d7b92; font-variant-ligatures: none; }
.at-stap-code b { font-weight: 400; color: #95a6bf; }

/* ===== 3. Het resultaat: een witte kaart met één zin, de daden, en het scherm van het systeem als bewijs ===== */
.at-kaart {
  grid-column: 3; grid-row: 1; min-width: 0; margin: var(--at-boven) 0 32px; padding: 20px 20px 20px; border-radius: 20px;
  background: #fff; color: var(--inkt);
  box-shadow: 0 44px 70px -44px rgba(0, 0, 0, 0.8), 0 12px 26px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 60px -18px rgba(147, 197, 253, 0.2);
}
.at-wissel { display: inline-grid; }
.at-wissel > * { grid-area: 1 / 1; }
/* De kop van de kaart: alle standen op dezelfde plek, zodat er niets verspringt. */
.at-uk { position: relative; display: grid; }
.at-uk > * { grid-area: 1 / 1; min-width: 0; }
.at-uk-st { position: relative; }
/* In rust (na het afspelen, en zonder JavaScript) telt alleen de stand die er staat, zodat de kaart geen lege ruimte
   houdt van een hogere tussenstand; agent.js laat hem dan zacht krimpen. */
.at-rust .at-uk > .at-uk-st.at-af, .geen-js .at-uk > .at-uk-st[data-tot] { display: none; }
.at-uk-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--mist); }
.at-uk-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nevel-diep); }
.at-uk-open { color: var(--at-amber); }
.at-uk-open::before { background: var(--at-amber-stip); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.at-uk-klaar { color: #047857; }
.at-uk-klaar::before { background: var(--at-groen); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.at-uk-zin { margin-top: 9px; font-family: var(--kop); font-weight: 500; font-size: 24px; line-height: 1.12; letter-spacing: -0.024em; color: var(--inkt); text-wrap: balance; }
.at-uk-sub { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--leisteen); text-wrap: pretty; }
/* De daden in de verleden tijd, elk met een rond groen vinkje. */
.at-daden { margin-top: 13px; display: grid; gap: 8px; }
.at-daden li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.3; font-weight: 500; color: #1e293b; }
.at-daad-v { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--at-groen); color: #fff; box-shadow: 0 3px 8px -3px rgba(16, 185, 129, 0.7); }
.at-daad-v svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Wacht op jou: de knop Akkoord onder de daden, met ernaast de regel die hier geldt: "eerst voorleggen". Na de tik
   staat er "Akkoord gegeven door jou", en zo blijft het ook als alles verstuurd is (een eigen regel in die stand,
   direct onder zijn daden). */
.at-akkoord { display: flex; align-items: center; gap: 12px; }
.at-uk-st > .at-akkoord { margin-top: 14px; }
.at-knop { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; border-radius: 9px; background: var(--blauw); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.15; white-space: nowrap; box-shadow: 0 8px 16px -9px rgba(37, 99, 235, 0.9); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.at-knop .at-wissel { justify-items: center; }
.at-knop.at-gegeven { background: var(--tint); color: var(--blauw); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28); }
.at-tikpunt { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; }
.at-hint { font-size: 13px; font-weight: 500; color: var(--mist); }
.at-hint > * { display: inline-flex; align-items: center; gap: 7px; }
.at-hint > .at-regel { gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; background: #fff7e6; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.55); color: var(--at-amber); font-size: 12px; line-height: 16px; white-space: nowrap; }

/* Het scherm van het systeem: dezelfde familie als de vensters in de aanbodkaarten (rail, kruimel, titel, rijen). */
.at-app { position: relative; margin-top: 18px; display: flex; overflow: hidden; border-radius: 12px; background: #fbfbf9; color: var(--inkt); font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.08), 0 16px 30px -24px rgba(28, 16, 4, 0.4), 0 2px 6px rgba(28, 16, 4, 0.04); }
.at-app svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.at-app-rail { flex: none; width: 32px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 0; background: #f3f3f0; border-right: 1px solid rgba(11, 18, 32, 0.06); }
.at-app-logo { width: 19px; height: 19px; margin-bottom: 4px; border-radius: 6px; display: grid; place-items: center; background: var(--inkt); color: #fff; font-family: var(--kop); font-weight: 600; font-size: 10px; line-height: 1; }
.at-ri { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #8b95a7; }
.at-ri svg { width: 12px; height: 12px; }
.at-ri-aan { background: #e5ebf6; color: var(--blauw); }
.at-app-hoofd { flex: 1; min-width: 0; padding: 9px 10px 10px 11px; }
.at-app-kruimel { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; }
.at-app-kruimel b { font-weight: 500; color: var(--leisteen); }
.at-app-kruimel i { font-style: normal; }
.at-app-titelrij { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.at-app-titel { min-width: 0; font-family: var(--kop); font-weight: 500; font-size: 15px; line-height: 1.15; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-app-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: #eef1f5; font-size: 10.5px; font-weight: 500; color: var(--leisteen); white-space: nowrap; }
.at-app-chip svg { width: 11px; height: 11px; }
.at-app-teller { display: grid; margin-top: 2px; font-size: 10.5px; color: var(--mist); }
/* Rijen: tijd, wie of wat, en de status. Een markering over de hele rij laat zien wat er veranderde. */
.at-app-lijst { margin-top: 8px; display: grid; gap: 4px; }
.at-dr { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 33px; padding: 3px 7px 3px 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.07); }
.at-dr-kand { grid-template-columns: minmax(0, 1fr) auto; }
.at-dr > :not(.at-dr-merk) { position: relative; }
.at-dr-merk { position: absolute; inset: 0; border-radius: inherit; background: #f1f6ff; box-shadow: inset 0 0 0 1.3px rgba(37, 99, 235, 0.5); pointer-events: none; }
.at-dr-merk-open { background: #fffaf0; box-shadow: none; border: 1.3px dashed rgba(245, 158, 11, 0.85); }
.at-dr-merk-leeg { background: #fbfbf9; box-shadow: none; border: 1.2px dashed rgba(11, 18, 32, 0.16); }
.at-dr-tijd { display: grid; font-size: 10px; line-height: 1.22; color: #94a3b8; }
.at-dr-tijd b { font-size: 11px; font-weight: 600; color: var(--leisteen); }
.at-dr-wie { min-width: 0; }
.at-dr-wie.at-wissel { display: grid; }
.at-dr-p { min-width: 0; display: flex; align-items: center; gap: 7px; }
.at-dr-naam { min-width: 0; display: grid; line-height: 1.2; white-space: nowrap; }
.at-dr-naam > span, .at-dr-naam > b { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
.at-dr-naam > b { font-weight: 600; }
.at-dr-naam s, .at-dr-naam small { font-size: 10px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.at-dr-naam s { text-decoration-thickness: 1px; }
.at-dr-sub { display: grid; }
.at-dr-open { color: var(--at-amber); }
.at-dr-naam > .at-dr-vrij { color: #a3adbd; }
.at-dr-leeg { font-size: 11px; color: #a3adbd; }
.at-av { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #e9edf3; color: var(--leisteen); font-size: 8.5px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: 0.02em; }
.at-av-nieuw { background: var(--blauw); color: #fff; }
.at-av-open { background: transparent; border: 1.3px dashed var(--at-amber-stip); }
.at-av-groep { background: #eef1f5; color: var(--mist); }
.at-av svg { width: 11px; height: 11px; }
.at-dr-st { justify-self: end; display: inline-grid; justify-items: end; font-size: 10.5px; color: var(--mist); white-space: nowrap; }
.at-dr-ok { color: #94a3b8; }
.at-dr-ok svg { width: 13px; height: 13px; stroke-width: 1.8; }
.at-pil { display: inline-flex; align-items: center; padding: 2.5px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; background: #eef1f5; color: var(--leisteen); }
.at-pil-open { background: #fff7e6; color: var(--at-amber); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.6); }
.at-pil-blauw { background: var(--blauw); color: #fff; }
/* De laatste wijziging, zoals het systeem hem zelf bijhoudt. */
.at-app-log { display: grid; margin-top: 8px; font-size: 10.5px; color: var(--mist); }
.at-app-log > span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-app-log svg { width: 11px; height: 11px; color: #94a3b8; }
.at-app-log > .at-log-nieuw, .at-app-log > .at-log-nieuw svg { color: var(--blauw); }
/* De wijziging zoals Ramp hem bijhoudt: de oude naam doorgestreept, de nieuwe eerst in groen, even later gewoon. */
.at-dr-merk-groen { background: #f0fdf4; box-shadow: inset 0 0 0 1.3px rgba(16, 185, 129, 0.55); }
.at-dr-naam > .at-dr-groen { color: #047857; }
.at-av-groen { background: var(--at-groen); color: #fff; }
.at-pil-groen { background: var(--at-groen); color: #fff; }

/* De voetregel van de kaart: het werk in één regel, met de systemen waarin het gebeurde (zoals Gumloop). */
.at-bon { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--mist); }
.at-bon-ic { flex: none; display: flex; }
.at-bon-ic i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #eef2f8; color: #52627a; box-shadow: 0 0 0 2px #fff; }
.at-bon-ic i + i { margin-left: -4px; }
.at-bon-ic svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Een rand van licht om wat een parel brengt of wegstuurt (--at-gloed van 0 tot 1, uit agent.js). */
.at-gloei { position: relative; }
.at-gloei::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.95), 0 0 20px rgba(96, 165, 250, 0.6); opacity: var(--at-gloed, 0); pointer-events: none; }
.at-wa-b.at-gloei::after { inset: -2px; border-radius: calc(18 * var(--pt)); }
.at-ml-bericht.at-gloei::after { inset: 0 calc(-8 * var(--pt)); border-radius: 10px; }
.at-uk.at-gloei::after { inset: -10px -12px; border-radius: 14px; box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.7), 0 0 24px rgba(96, 165, 250, 0.45); }

/* De meting onder het podium, met haar bron. */
.at-meting { margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--inkt); }
.at-meting .bron { margin-left: 6px; }
.agent .agent-bron { margin-top: 6px; }

/* ===== Standen in de tijd (agent.js zet at-aan en at-af) =====
   data-van: zichtbaar vanaf dat moment; data-tot: zichtbaar tot dat moment. Zonder JavaScript staat de eindstand: wat
   een data-tot heeft, hoort daar niet bij. */
.at-toneel [data-tot] { opacity: 0; }
.js .at-toneel [data-tot].at-aan { opacity: 1; }
.js .at-toneel [data-van].at-af { opacity: 0; }
.js .at-toneel [data-van], .js .at-toneel [data-tot] { transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .at-toneel .at-stap.at-af { transform: translateY(10px); pointer-events: none; }
.js .at-toneel .at-daden li.at-af { transform: translateX(-6px); }
.js .at-toneel .at-uk > .at-af { transform: translateY(6px); }
.js .at-toneel .at-wa-b.at-af, .js .at-toneel .at-ml-bericht.at-af { transform: translateY(12px); }
.js .at-toneel .at-wa-dag.at-af { transform: translateY(8px); }
.js .at-toneel .at-vink.at-af { transform: scale(0.4); }
.js .at-toneel .at-vink { transition: opacity 0.2s ease, transform 0.36s cubic-bezier(0.3, 1.5, 0.5, 1); }

/* ===== Tot 1239: de kolommen iets smaller; de draad houdt de breedte van de langste monoregel ===== */
@media (max-width: 1239px) {
  .agent { --at-pad: 32px; --at-gat: 26px; --at-boven: 48px; --at-tw: 300px; --at-tz: 510px; --at-kw: 340px; }
  .at-uk-zin { font-size: 22px; }
}
/* ===== Tussen 960 en 1120: telefoon en kaart naast elkaar, de draad als smalle strook ertussen. Telefoon en kaart
   schalen mee met de breedte, zodat de draad op 960 nog de langste monoregel op één regel houdt. ===== */
@media (min-width: 960px) and (max-width: 1120px) {
  .agent {
    --at-pad: 22px; --at-gat: 18px; --at-boven: 40px;
    --at-tw: clamp(232px, calc(232px + (100vw - 960px) * 0.1875), 262px);
    --at-tz: calc(var(--at-tw) * 1.7);
    --at-kw: clamp(288px, calc(288px + (100vw - 960px) * 0.25), 328px);
  }
  .at-draad { --at-st-gat: 5px; --at-st-boven: 12px; --at-ic-top: 5.5px; }
  .at-stap { padding: 8px 9px 8px 11px; column-gap: 8px; }
  .at-stap-tekst { font-size: 12.5px; line-height: 17px; }
  .at-stap-m { padding-top: 0; }
  .at-stap-wacht { font-size: 12px; }
  .at-kaart { padding: 16px; }
  .at-uk-zin { font-size: 20px; }
  .at-uk-sub { font-size: 13px; }
  .at-daden li { font-size: 13px; gap: 8px; }
  .at-daden { gap: 6px; }
  .at-app { margin-top: 14px; }
  /* De knop en "eerst voorleggen" houden elk de breedte van hun bredere stand; zo passen ze hier naast elkaar. */
  .at-akkoord { gap: 8px; }
  .at-knop { padding: 8px 12px; }
  .at-hint > .at-regel { padding: 3px 8px 3px 6px; font-size: 11.5px; }
  .at-bon { gap: 7px; font-size: 11.5px; }
}

/* ===== Onder 960: het podium als donkere kaart met alles onder elkaar (telefoon, draad, kaart); de lijnen van licht
   lopen verticaal langs de randen van het podium. De parel schuift een stukje naar binnen, zodat hij niet half buiten
   het podium valt. ===== */
@media (max-width: 959px) {
  .agent { --at-tw: min(330px, calc(100vw - 2 * var(--rand) + 2 * var(--at-uit) - 30px)); --at-tz: 404px; }
  .at-toneel { width: 100%; max-width: 640px; margin: 0 auto; }
  .at-podium { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 20px 15px 15px; border-radius: 24px; }
  /* De telefoon loopt hier niet door de onderrand van het podium maar zakt zacht weg in het donker. */
  .at-tel { align-self: center; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); }
  .at-tel .at-ios { --at-marge: 52px; }
  .at-draad { margin: 10px 0 0; }
  .at-kaart { margin: 16px 0 0; padding: 18px 16px 16px; }
  .at-p-links .mt-chip, .at-p-links .mt-pakket-echo { margin-left: 46px; }
  .at-p-rechts .mt-chip, .at-p-rechts .mt-pakket-echo { margin-left: -46px; }
  .js .at-toneel:not(.aan) { display: none; }
}
@media (max-width: 819px) {
  .at-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--rand) * -1) 16px; padding: 2px var(--rand) 4px; scrollbar-width: none; }
  .at-tabs::-webkit-scrollbar { display: none; }
  .at-tab { flex: none; padding: 10px 14px 11px; font-size: 14px; }
  .at-tab small { display: none; }
  .at-nog { flex: none; padding: 10px 12px; }
}
@media (max-width: 599px) {
  .agent { --at-tz: 380px; }
  .at-draad { --at-st-gat: 5px; --at-st-boven: 10px; --at-ic-top: 6px; }
  .at-stap { padding: 8px 10px 8px 12px; column-gap: 9px; }
  .at-stap-tekst { font-size: 13px; line-height: 18px; }
  .at-stap-m { padding-top: 0; }
  .at-stap-wacht { font-size: 12px; margin-top: 4px; }
  /* De aanroep klein en op één regel; is hij te lang, dan loopt hij weg in drie puntjes. */
  .at-stap-code { margin-top: 4px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .at-uk-zin { font-size: 22px; }
  .at-uk-sub { font-size: 13.5px; }
  .at-daden li { font-size: 13.5px; }
  .at-akkoord { gap: 8px; }
  .at-hint > .at-regel { padding: 3px 9px 3px 6px; }
  .at-bon { gap: 7px; }
  .at-bon-ic i + i { margin-left: -5px; }
  .at-app { margin-top: 15px; }
  .at-app-lijst { gap: 3px; margin-top: 7px; }
  .at-dr { min-height: 31px; }
  .at-app-log { margin-top: 7px; }
  .at-meting { margin-top: 12px; font-size: 13.5px; }
  .at-nog span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .at-nog { padding: 10px; }
}

/* ===== Op het veld (27 oktober 2026, teruggedraaid op 28 oktober 11:3x): het podium blijft inkt ===== */
/* Op 27 oktober werd het podium licht (besluit 14, geen donkere blokken) en op 27 oktober 20:57 pastel (besluit 17). Huub
   op 28 oktober, 11:3x, nadat de sectie wegviel in het wit: "dat widget waar die telefoon is, iets van zwart of
   lichtgrijs of gewoon iets anders maken, maar niet die hele sexy erachter, die vind ik mooi". Dus het podium is weer
   de motorkap van ronde 3: inkt met de korrel, de witte stappen en de witte kaart erop, zoals in agent.css hierboven;
   het veld erachter blijft. Alleen de kleine tijden in de nagebouwde schermen houden hun contrastregel. */
/* De kleine tijden en de kruimel in de nagebouwde schermen (het rooster, de tijd onder de appjes) waren grijs op wit
   (2,4 tot 3,2); nu in de mist van het veld, zodat ook die 4,5 halen. */
.op-veld .at-dr-tijd, .op-veld .at-app-kruimel span { color: #5b6577; }
.op-veld .at-wa-meta { color: rgba(17, 27, 33, 0.68); }

/* ===== De tabs als knoppen (28 oktober 2026, 09:19) ===== */
/* Huub: "dit mogen eigenlijk ook meer een soort van buttons zijn, dat het iets meer opvalt". De gekozen gevuld blauw met
   witte letters, de andere witte pillen met een blauwe rand zoals de soortchips in het aanbod, Nog een keer een randknop. */
.op-veld .at-tab { border-radius: 999px; padding: 11px 18px 12px; background: #fff; border-color: rgba(37, 99, 235, 0.24); color: var(--blauw-diep); box-shadow: 0 8px 18px -12px rgba(29, 78, 216, 0.4); }
.op-veld .at-tab small { color: rgba(29, 78, 216, 0.62); }
.op-veld .at-tab:hover { color: var(--blauw-diep); border-color: rgba(37, 99, 235, 0.5); background: var(--tint); }
.op-veld .at-tab[aria-selected="true"] { background: var(--blauw); border-color: var(--blauw); color: #fff; box-shadow: 0 12px 26px -12px rgba(29, 78, 216, 0.8); }
.op-veld .at-tab[aria-selected="true"] small { color: rgba(255, 255, 255, 0.78); }
.op-veld .at-tab-loop { background: #fff; opacity: 0; height: 3px; }
.op-veld .at-tab[aria-selected="true"] .at-tab-loop { opacity: 0.9; }
.op-veld .at-nog { color: var(--blauw-diep); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); background: rgba(255, 255, 255, 0.6); }
.op-veld .at-nog:hover { color: #fff; background: var(--blauw); box-shadow: inset 0 0 0 1px var(--blauw); }