/* Ailex — echte kaartjes in de chat (22-10-2026, klus "Ailex kaartjes echt 2"). De kaartjes zelf gebruiken de vb-klassen uit
   styles.css (sinds G1 22-10-2026 in de spelkaart-stijl van gamekaart.css, geen geel-zwart-wit meer); hier alleen de rij onder het antwoord en de boodschappencatalogus. */
.ak-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; min-width: 0; }
.ak-rij .vb { margin-top: 0; }
.ak a.vb-knop { display: inline-block; text-decoration: none; color: inherit; }
.ak-yt { position: relative; display: block; aspect-ratio: 16 / 9; background: #2A2A2A; overflow: hidden; }
.ak-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-yt .vb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* boodschappencatalogus: tegeltjes met plaatje en naam, aftikken = grijs met vinkje */
.ak-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; margin-bottom: 6px; }
.ak-tegel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 44px; padding: 7px 4px 6px;
  border: 1px solid var(--ax-rand); border-radius: 11px; background: #fff; color: var(--ink); box-shadow: var(--ax-diep);
  font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.ak-tegel:active { transform: translateY(2px); box-shadow: var(--ax-diep-klein); }
.ak-plaatje { font-size: 26px; line-height: 1.15; }
.ak-plaatje.letter { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--yellow); border: 1.5px solid var(--ax-rand-sterk); font-size: 16px; font-weight: 800; }
.ak-naam { max-width: 100%; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.ak-tegel.af { background: #ECEAE3; box-shadow: var(--ax-diep-klein); transform: translateY(2px); }
.ak-tegel.af .ak-plaatje { opacity: .45; filter: grayscale(1); }
.ak-tegel.af .ak-naam { text-decoration: line-through; color: var(--text-dim); }
.ak-vink { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2BB24C; border: 1.5px solid var(--ax-rand-sterk); color: #fff; }
.ak-vink .vb-ic { width: 12px; height: 12px; stroke-width: 3.2; }
.ak-prive { padding: 0; background: none; border: 0; box-shadow: none; }
.ak-prive .vb { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ak-tegel { transition: none; } }

/* 1.7.1 (23-10-2026, klus "Ailex los van Martha"): plaatjes in kaartjes. Nieuwsberichten met foto, en productfoto's. */
.ak .ak-foto { flex: 0 0 auto; width: 84px; height: 64px; object-fit: cover; border-radius: 12px; border: 2px solid #262A4D; background: #F3EFE4; }
/* 1.8.16 (24-10-2026, klus "Ailex productfoto blijft staan"): de productfoto in een vast vak; zonder foto of als hij niet laadt het
   winkelwagen-icoon op dezelfde plek, zodat de kaart nooit verspringt. Alleen het productkaartje (nieuws houdt .ak-foto los). */
.ak .ak-fotovak { position: relative; flex: 0 0 auto; width: 84px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--f-zacht, #EEF0FF); }
.ak .ak-fotovak > .vb-ic { width: 30px; height: 30px; opacity: .55; }
.ak .ak-fotovak > .ak-foto { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.ak .vb-nieuws { display: flex; flex-direction: column; gap: 10px; }
.ak .ak-bericht { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.ak .ak-bericht + .ak-bericht { padding-top: 10px; border-top: 2px dashed #E4E1D6; }
.ak .ak-bericht > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ak .ak-bericht small { opacity: .7; }

/* 23-10-2026 (klus "Ailex mooie kaarten en Stop-knop"): zijn eigen lijsten als kaart, live uit thuis.json (kaartjes.js thuisKaart).
   Taken: rijtjes met plaatje en een rond vinkvak om af te tikken. Agenda: een scheurblaadje per dag met de afspraken ernaast.
   Boodschappen: dezelfde tegeltjes als de catalogus. Notities: kaartjes met plaatje, titel en de eerste regels. */
.ak-thuis .ak-plaatje { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F3EFE4; font-size: 24px; line-height: 1; }
.ak-thuis .ak-plaatje.letter { width: 40px; height: 40px; font-size: 17px; }
.ak-thuis .ak-plaatje.klein { width: 32px; height: 32px; border-radius: 10px; font-size: 19px; }
.ak-thuis .ak-plaatje.klein.letter { font-size: 14px; }
.ak-rt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ak-rt b { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; color: var(--ink); }
.ak-rt small { font-size: 12.5px; line-height: 1.3; color: var(--text-dim); overflow-wrap: anywhere; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ak-chip { font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 10px; background: #E8ECFF; color: #2B37A8; }
.ak-chip.werk { background: #E3F4EC; color: #075E48; }
.ak-chip.bedrijf { background: #FCE7EF; color: #A21D4C; }
.ak-rijen { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.ak-rijtje {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 7px 10px 7px 7px; border: 1px solid var(--ax-rand); border-radius: 14px;
  background: #fff; color: var(--ink); box-shadow: var(--ax-diep); font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.ak-rijtje:active { transform: translateY(2px); box-shadow: var(--ax-diep-klein); }
.ak-bol { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #2B7A3B; background: #fff; color: #fff; }
.ak-bol .vb-ic { width: 17px; height: 17px; stroke-width: 3.2; }
.ak-rijtje.af { background: var(--ax-oppervlak-2); box-shadow: var(--ax-diep-klein); transform: translateY(2px); }
.ak-rijtje.af .ak-bol { background: #2BB24C; border-color: #1E6B30; }
.ak-rijtje.af .ak-plaatje { filter: grayscale(1); opacity: .5; }
.ak-rijtje.af .ak-rt b { text-decoration: line-through; color: var(--text-dim); }
.ak-dagen { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ak-dag { display: flex; gap: 10px; align-items: flex-start; }
.ak-blad { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--ax-rand); box-shadow: var(--ax-diep); }
.ak-blad small:first-child { align-self: stretch; text-align: center; padding: 3px 0; background: #2B37A8; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ak-blad b { font-size: 22px; font-weight: 900; line-height: 1.1; padding-top: 2px; color: #1C2140; }
.ak-blad small:last-child { font-size: 11px; font-weight: 700; padding-bottom: 4px; color: #4A4F72; }
.ak-dag.nu .ak-blad small:first-child { background: #C2410C; }
.ak-dagin { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.ak-dagnaam { font-size: 12.5px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.ak-afspr { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 9px 6px 6px; border-radius: 12px; background: #fff; border: 1px solid var(--ax-rand); }
.ak-notities { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ak-notitie { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--ax-rand); box-shadow: var(--ax-diep); min-width: 0; }
.ak-thuis .ak-oeps { color: #A21D4C; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ak-rijtje { transition: none; } }

/* 1.8.7 (24-10-2026, Alex 07:30): "tegelkleur". De kaarten van zijn eigen lijsten (in de chat en onder de Privé-tegels) krijgen de
   kleur van hun tegel: Taken roze, Agenda blauw, Boodschappen mint, Notities geel. Eén bron: de --tg-<kleur>-* uit speelgoed.css.
   Kop = het verloop van de tegel met de tegeltekstkleur (zelfde contrast als de tegel); --f-diep (icoon in het muntje, tekst op
   de kaart) is de donkere tegelkleur, nog wat dieper gemengd zodat hij op wit minstens 4,5:1 haalt (proef: test/v187_proef.py). */
html .vb.ak-thuis-taken        { --f-a: var(--tg-roze-a);  --f-b: var(--tg-roze-b);  --f-t: var(--tg-roze-st);  --f-diep: color-mix(in srgb, var(--tg-roze-d) 82%, #1C1E3A); }
html .vb.ak-thuis-agenda       { --f-a: var(--tg-blauw-a); --f-b: var(--tg-blauw-b); --f-t: var(--tg-blauw-st); --f-diep: color-mix(in srgb, var(--tg-blauw-d) 82%, #1C1E3A); }
html .vb.ak-thuis-boodschappen { --f-a: var(--tg-mint-a);  --f-b: var(--tg-mint-b);  --f-t: var(--tg-mint-st);  --f-diep: color-mix(in srgb, var(--tg-mint-d) 70%, #1C1E3A); }
html .vb.ak-thuis-notities     { --f-a: var(--tg-geel-a);  --f-b: var(--tg-geel-b);  --f-t: var(--tg-geel-st);  --f-diep: color-mix(in srgb, var(--tg-geel-d) 55%, #1C1E3A); }
/* de plaatjes en vinkjes in de kaart in dezelfde kleur: een getint vakje met een rand in de tegelkleur */
html .vb.ak-thuis .ak-plaatje, html .vb.ak-thuis .ak-tegel .ak-plaatje { background: color-mix(in srgb, var(--f-a) 22%, #FFFFFF); box-shadow: inset 0 0 0 2px var(--f-a); }
html .vb.ak-thuis .ak-tegel, html .vb.ak-thuis .ak-rijtje, html .vb.ak-thuis .ak-afspr, html .vb.ak-thuis .ak-notitie, html .vb.ak-thuis .ak-blad { border-color: var(--f-a); }
html .vb.ak-thuis .ak-bol { border-color: var(--f-diep); }
html .vb.ak-thuis .ak-rijtje.af .ak-bol { background: var(--f-diep); border-color: var(--f-diep); }
html .vb.ak-thuis .ak-blad small:first-child { background: var(--f-b); color: var(--f-t); }
html .vb.ak-thuis .ak-vink { background: var(--f-diep); }
/* het lint boven elk Privé-blok ("Taken", "Agenda" ...) in de kleur van zijn tegel */
.pl-tegels[data-w-tegels="prive"] ~ .pl-paneel[data-w-paneel="taak"] > .pl-lint { background: var(--tg-roze-a); color: var(--tg-roze-st); box-shadow: 0 3px 0 var(--tg-roze-d); }
.pl-tegels[data-w-tegels="prive"] ~ .pl-paneel[data-w-paneel="afspraak"] > .pl-lint { background: var(--tg-blauw-a); color: var(--tg-blauw-st); box-shadow: 0 3px 0 var(--tg-blauw-d); }
.pl-tegels[data-w-tegels="prive"] ~ .pl-paneel[data-w-paneel="boodschap"] > .pl-lint { background: var(--tg-mint-a); color: var(--tg-mint-st); box-shadow: 0 3px 0 var(--tg-mint-d); }

/* 1.8.7 punt L: een bestand van Ailex als ballon (kaartjes.js maak.bestand); tik = naar Downloads via de app */
.ak-bestandknop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 7px 10px 7px 7px; border: 1px solid var(--f-rand);
  border-radius: 14px; background: var(--ax-oppervlak); color: var(--ax-tekst); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--ax-schaduw-vast); }
.ak-bestandknop:active { transform: translateY(2px); }
.ak-bestandknop[aria-busy="true"] { opacity: .7; }
.ak-bestand .ak-plaatje { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 24px; line-height: 1;
  background: var(--f-zacht); box-shadow: inset 0 0 0 2px var(--f-rand); }
.ak-bestand .ak-stand.ok { color: #1E6B30; font-weight: 800; }
.ak-bestand .ak-stand.mis { color: #A21D4C; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .ak-bestandknop:active { transform: none; } }

/* 1.8.7 punt M: waar Ailex kijkt, één rustige regel onder "Ailex denkt na" (ailexstroom.js; laatste wint, weg bij het antwoord) */
.ax-kijkt { display: block; max-width: 100%; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ax-tekst-zacht, #5A5F8C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1.8.8 live tv (kaartjes.js tvHtml): zwart beeldvlak met LIVE en een grote Kijk live, daaronder land, soort en Eigen app */
.ak-tvbeeld { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 180px; border-radius: 14px; background: #111326; overflow: hidden; }
.ak-tvlive { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 8px; background: #C8233F; color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.ak-tv .ak-tvknop { min-height: 48px; min-width: 140px; font-size: 1rem; }
.ak-tvrij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ak-tvrij .ak-tveigen { margin-left: auto; min-height: 44px; }
.ak-tv[data-ak-tvstand="fout"] .ak-tvstand, .ak-tv[data-ak-tvstand="leeg"] .ak-tvstand { color: #A21D4C; font-weight: 800; }