/* AI-beeld (kop van Kunstmatige intelligentie, Henrik 05-11): waar de pagina over gaat, in één beeld. Een vraag aan een AI-assistent,
   het antwoord verschijnt regel voor regel, één regel licht op als verzonnen feit ("Klopt dit?", rood) en wordt daarna verbeterd: de
   regel wordt groen en korter (er staat iets anders), het label "Verbeterd" met een vinkje (Henrik: rood → groen = fout → goed;
   "nagekeken" zegt niet dat het is aangepast). Groen staat niet in het palet: een koel groen, alleen in dit beeld (tekst 5,7:1).
   Zonder script en bij minder beweging staat meteen het eindbeeld er: antwoord verbeterd.
   Familie van het ERP-, Test IT- en Maatwerk-beeld: getekend op 584 x 328 (16:9), alles in --u, titel links en drie stipjes rechts. */
.ai-beeld{--ai-groen:#1f8f5c;--ai-groen-licht:#e2f3ea;--ai-groen-tekst:#156b44;position:relative;container-type:inline-size}
.ai-doek{--u:calc(100cqw / 584);position:relative;aspect-ratio:16/9}

/* Het venster: titelbalk zoals de andere beelden. */
.ai-venster{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #d2dae3,0 22px 40px -20px rgba(70,85,110,.36)}
.ai-balk{display:flex;align-items:center;gap:calc(6 * var(--u));background:var(--wp--preset--color--inkt);padding:calc(10 * var(--u)) calc(14 * var(--u))}
.ai-balk i{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
.ai-balk span,.ai-balk em{font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));font-style:normal}
.ai-balk span{color:#dbe3f1;font-weight:600}
.ai-balk em{margin-right:auto;color:rgba(219,227,241,.6)}
.ai-balk em::before{content:"·";display:inline-block;margin-right:calc(6 * var(--u))}
.ai-romp{position:relative;flex:1;background:#f5f8fb}

/* De vraag: rechts, in merk licht, twee regels. */
.ai-vraag{position:absolute;right:calc(24 * var(--u));top:calc(20 * var(--u));width:calc(228 * var(--u));box-sizing:border-box;padding:calc(14 * var(--u)) calc(18 * var(--u));background:var(--wp--preset--color--merk-licht);border-radius:calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u))}
.ai-vraag b{display:block;height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--merk)}
.ai-vraag b+b{width:62%;margin-top:calc(9 * var(--u))}

/* Het antwoord: links, wit, met een stip voor de assistent en vier regels. De derde regel is het verzonnen feit. */
.ai-antwoord{position:absolute;left:calc(24 * var(--u));top:calc(86 * var(--u));width:calc(392 * var(--u));box-sizing:border-box;padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));background:var(--wp--preset--color--base);border-radius:calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u));box-shadow:0 1px 3px rgba(70,85,110,.14)}
.ai-wie{display:flex;align-items:center;gap:calc(8 * var(--u));margin-bottom:calc(14 * var(--u))}
.ai-wie i{width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:var(--wp--preset--color--merk)}
.ai-wie b{display:block;width:calc(64 * var(--u));height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--lijn)}
.ai-regel{display:block;height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--inkt);transition:background .35s,box-shadow .35s,width .5s cubic-bezier(.45,0,.25,1),opacity .45s,translate .45s}
.ai-regel+.ai-regel{margin-top:calc(12 * var(--u))}
.ai-regel:nth-child(2){width:94%}.ai-regel:nth-child(3){width:86%}.ai-regel:nth-child(4){width:78%}.ai-regel:nth-child(5){width:52%}
/* Verbeterd (eindbeeld): de regel groen en korter, met een lichte band eromheen. */
.ai-regel.ai-feit{width:64%;background:var(--ai-groen);box-shadow:0 0 0 calc(5 * var(--u)) var(--ai-groen-licht)}
/* Verzonnen feit (tijdens het verhaal): rood. */
.ai-beeld .ai-regel.ai-feit.ai-fout{background:var(--wp--preset--color--actie);box-shadow:0 0 0 calc(5 * var(--u)) color-mix(in srgb,var(--wp--preset--color--actie) 14%,white)}

/* Het label naast de regel: eerst "Klopt dit?" in rood, daarna "Verbeterd" met een vinkje in groen. */
.ai-beeld.ai-speelt .ai-regel.ai-feit:not(.ai-klaar){width:78%}.ai-beeld.ai-speelt .ai-regel.ai-feit:not(.ai-fout):not(.ai-klaar){background:var(--wp--preset--color--inkt);box-shadow:none}
.ai-label{position:absolute;left:calc(428 * var(--u));top:calc(166 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));padding:calc(5 * var(--u)) calc(11 * var(--u)) calc(5 * var(--u)) calc(8 * var(--u));border-radius:99px;font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));font-weight:600;white-space:nowrap;background:var(--ai-groen-licht);color:var(--ai-groen-tekst);transition:background .4s,color .4s,opacity .45s,translate .45s}
/* De wissel van rood naar groen (Henrik: met een korte overgang): tekst en teken vervagen even, de kleur loopt over, dan komt
   "Verbeterd" op. */
.ai-label>span,.ai-label::before{transition:opacity .16s}
.ai-label.ai-wissel>span,.ai-label.ai-wissel::before{opacity:0}
.ai-label::before{content:"";width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;background:var(--ai-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.ai-label .ai-vraagt{display:none}
.ai-label.ai-fout{background:color-mix(in srgb,var(--wp--preset--color--actie) 12%,white);color:#b3261e}
.ai-label.ai-fout::before{background:var(--wp--preset--color--actie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.6v4.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.3' r='1' fill='white'/%3E%3C/svg%3E") center/100% no-repeat}
.ai-label.ai-fout .ai-vraagt{display:inline}.ai-label.ai-fout .ai-klaar{display:none}

/* Het invoerveld onderaan, met de verzendknop. */
.ai-invoer{position:absolute;left:calc(24 * var(--u));right:calc(24 * var(--u));bottom:calc(18 * var(--u));height:calc(34 * var(--u));box-sizing:border-box;border-radius:99px;background:var(--wp--preset--color--base);box-shadow:inset 0 0 0 1px #c3cfdb}
.ai-invoer b{position:absolute;left:calc(18 * var(--u));top:50%;width:calc(140 * var(--u));height:calc(7 * var(--u));margin-top:calc(-3.5 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--lijn)}
.ai-invoer i{position:absolute;right:calc(5 * var(--u));top:calc(5 * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:var(--wp--preset--color--merk)}

/* Verschijnen: alles met data-s staat eerst verborgen tot het script het aanzet. */
.ai-beeld.ai-speelt [data-s]:not(.ai-aan){opacity:0;translate:0 calc(6 * var(--u))}
.ai-vraag,.ai-antwoord{transition:opacity .45s,translate .45s}

@media (prefers-reduced-motion:no-preference){
html.lk-js .ai-beeld:not(.ai-speelt) [data-s]{opacity:0}
}
@media (prefers-reduced-motion:reduce){.ai-beeld *{transition:none!important}}