/* Martha 3D 1.4.0 — Speelgoeddoos (21-10-2026, klus "Martha 3D bouwen door Ramón"; bouwlijst Camila stap 1-8 en 12).
   Kleuren letterlijk uit web/m3d-stijl/16-speelgoed-cute-licht.html en 17-...-donker.html. Laatste stylesheet: wint van de rest.
   html[data-vorm="plat"] (bron.js): geen lagen en geen bewegende wereld, de chat vult het scherm, de knoppen zweven erboven. */
@font-face { font-family: 'SgRond'; src: url(rond.woff2) format('woff2'); font-display: swap; }
:root {
  --bg1: #DDE6FF; --bg2: #F3E9FF; --kaart: #FFFFFF; --ink: #262A4D;
  --blauw: #5B6CFF; --blauwd: #4453E0; --blauwdd: #3341B8; --roze: #FF6B8A; --rozed: #E94B6E; --rozedd: #B8314F;
  --munt: #36D1A8; --muntd: #22B58E; --geel: #FFC83D; --geeld: #F2A900; --lila: #B48CFF; --lilad: #9566F0;
  --schaduw: #B7BFE6; --leeg: #CDD3F0;
  --sg-letter: "Nunito", "Baloo 2", "Varela Round", 'SgRond', system-ui, sans-serif;
  --sg-kop: 112px; --sg-onder: 150px; --sg-knop: 64px;
}
html[data-vorm="plat"], html[data-vorm="plat"] body { background: linear-gradient(170deg, var(--bg1), var(--bg2)) fixed; color: var(--ink); font-family: var(--sg-letter); }
html[data-vorm="plat"] body { margin: 0; overflow: hidden; }

/* ---- stap 2: lagen en bewegende wereld uit ---- */
html[data-vorm="plat"] .layer.bg, html[data-vorm="plat"] .layer.particles, html[data-vorm="plat"] .layer.frame { display: none !important; }
html[data-vorm="plat"] .stage, html[data-vorm="plat"] .device, html[data-vorm="plat"] .scene, html[data-vorm="plat"] .rig, html[data-vorm="plat"] .ui {
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  transform: none !important; perspective: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
html[data-vorm="plat"] .layer { transform: none !important; filter: none !important; }
html[data-vorm="plat"] .chat {
  position: fixed !important; inset: 0 !important; display: flex; flex-direction: column; box-sizing: border-box; margin: 0;
  padding: 0 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-vorm="plat"] .chat-head, html[data-vorm="plat"] .chat .search { display: none !important; }   /* rustig: geen kopje en geen zoekbalk boven de chat */
html[data-vorm="plat"] .search { margin: 0 4px 8px; border-radius: 28px; background: var(--kaart); color: var(--ink); border: 0; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .search input { color: var(--ink); font-family: var(--sg-letter); font-size: 18px; }
html[data-vorm="plat"] .log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; font-family: var(--sg-letter); font-size: 22px; line-height: 1.4; color: var(--ink);
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 4px calc(var(--sg-onder) + env(safe-area-inset-bottom, 0px)); background: none; border: 0; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 22px; font-family: var(--sg-letter); }
html[data-vorm="plat"] .msg .body { background: var(--kaart); color: var(--ink); border-radius: 28px; box-shadow: var(--ax-diep); border: 0; padding: 12px 16px; }
html[data-vorm="plat"] .msg.alex .body { background: var(--blauw); color: #fff; box-shadow: 0 6px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg .meta { color: inherit; opacity: .7; font-size: 14px; }
html[data-vorm="plat"] .compose { position: fixed; left: 12px; right: 12px; bottom: calc(var(--sg-onder) - 8px + env(safe-area-inset-bottom, 0px)); z-index: 72;
  background: var(--kaart); border-radius: 28px; box-shadow: var(--ax-diep); padding: 6px 8px; }
html[data-vorm="plat"] .compose input { font-size: 20px; color: var(--ink); background: none; font-family: var(--sg-letter); }

/* ---- stap 3: de kop zonder balk, met een zacht waasje ---- */
html[data-vorm="plat"] #kopStrook { position: fixed !important; top: 0; left: 0; right: 0; z-index: 70; display: flex !important; align-items: flex-start; gap: 8px;
  padding: calc(10px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 10px 0; height: auto; background: none !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box; }
html[data-vorm="plat"] #kopStrook::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg1) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
html[data-vorm="plat"] #kopWensKnop, html[data-vorm="plat"] #kopBlok { display: none !important; }
.sg-menu, .sg-knopje { font-family: var(--sg-letter); }
.sg-menu { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.sg-menu-ic { width: var(--sg-knop); height: var(--sg-knop); border-radius: 50%; background: var(--lila); box-shadow: 0 6px 0 var(--lilad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sg-menu-ic i { display: block; width: 26px; height: 4px; border-radius: 2px; background: #fff; }
.sg-woord { font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.sg-seg { flex: 1 1 auto; min-width: 0; display: flex; margin-top: 6px; background: var(--kaart); border-radius: 30px; padding: 5px; box-shadow: var(--ax-diep); gap: 2px; }
.sg-deel { flex: 1 1 0; min-width: 0; position: relative; border: 0; border-radius: 26px; background: none; color: var(--ink); font-family: var(--sg-letter);
  font-size: 18px; font-weight: 800; padding: 12px 4px; min-height: 48px; cursor: pointer; white-space: nowrap; overflow: visible; }
.sg-deel[aria-selected="true"] { background: var(--roze); color: #fff; box-shadow: 0 4px 0 var(--rozedd); }
.sg-deel-t { display: inline-block; }
.sg-rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html[data-vorm="plat"] #kopWie { height: 48px; padding: 0; background: none; border: 0; }
html[data-vorm="plat"] #kopWie:empty { display: none; }
html[data-vorm="plat"] .kop-gz { position: relative; width: 48px; height: 48px; margin-left: -14px; border-radius: 50%; background: var(--kaart); box-shadow: var(--ax-diep); overflow: visible; }
html[data-vorm="plat"] .kop-gz:first-child { margin-left: 0; }
html[data-vorm="plat"] .kop-gz .gz { width: 38px; height: 38px; margin: 5px; border-radius: 50%; }
.sg-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.sg-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.sg-ring .bak { stroke: var(--leeg); }
html[data-vorm="plat"] .kop-gz.meer { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: var(--ink); background: var(--geel); }
@keyframes sg-tel { 50% { transform: scale(1.18); } }
@media (max-width: 419px) { .sg-deel { font-size: 16px; padding: 12px 2px; } }
@media (max-width: 379px) {
  .sg-woord { display: none; }
  :root { --sg-knop: 52px; --sg-kop: 96px; }
  .sg-deel { font-size: 15px; padding: 10px 2px; }
  html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; margin-left: -18px; }
  html[data-vorm="plat"] .kop-gz .gz { width: 32px; height: 32px; margin: 4px; }
  .sg-ring { width: 40px; height: 40px; }
  html[data-vorm="plat"] #kopStrook { gap: 5px; padding-left: 6px; padding-right: 6px; }
}
/* afscherming (zoals de oude onderbalk): in de app zonder rol (niet ingelogd) alleen Privé, nooit Werk en Bedrijf */
html[data-schil="app"]:not([data-rol="eigenaar"]):not([data-rol="gebruiker"]) .sg-deel:not([data-wereld="prive"]) { display: none !important; }
/* uitklapmenu, kaartjes onder de kop */
.sg-menu-lijst, .sg-kaartje { position: fixed; z-index: 90; left: 10px; top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); background: var(--kaart); color: var(--ink);
  border-radius: 28px; box-shadow: var(--ax-diep), 0 10px 30px rgba(0,0,0,.18); padding: 10px; font-family: var(--sg-letter); }
.sg-menu-lijst[hidden], .sg-kaartje[hidden] { display: none; }
.sg-menu-lijst button { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: none; color: var(--ink); font: 800 20px var(--sg-letter); padding: 12px 14px; border-radius: 20px; min-height: 56px; text-align: left; }
.sg-menu-lijst button:active { background: var(--bg1); }
.sg-kaartje { left: 10px; right: 10px; padding: 16px 18px; font-size: 18px; }
.sg-kaartje b { font-size: 20px; }
.sg-kaartje p { margin: 6px 0; }
.sg-kaartje ul { margin: 6px 0 10px; padding-left: 22px; }
.sg-kaartje .sg-hint { opacity: .7; font-size: 15px; }
.sg-balk { height: 12px; border-radius: 6px; background: var(--leeg); overflow: hidden; margin: 8px 0; }
.sg-balk i { display: block; height: 100%; border-radius: 6px; background: var(--munt); }
.sg-ok { border: 0; border-radius: 24px; background: var(--blauw); color: #fff; font: 800 18px var(--sg-letter); padding: 10px 22px; box-shadow: 0 5px 0 var(--blauwdd); }

/* ---- stap 5: onderin vier zwevende knoppen met een woordje, zonder balk ---- */
html[data-vorm="plat"] .bottomnav { display: none !important; }
html[data-vorm="plat"] .actions { position: fixed !important; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex !important;
  justify-content: center; align-items: flex-end; gap: 18px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; pointer-events: none; }
html[data-vorm="plat"] .actions::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: var(--sg-onder); z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--bg2) 50%); }
html[data-vorm="plat"] .actions .ab { pointer-events: auto; position: relative; width: var(--sg-knop); height: var(--sg-knop); min-width: 0; border-radius: 50%; border: 0;
  color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 0; transform: none; }
html[data-vorm="plat"] .actions .ab .ic { width: 30px; height: 30px; stroke: #fff; color: #fff; }
html[data-vorm="plat"] .actions .ab::after { content: attr(data-woord); position: absolute; top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%);
  font: 800 14px var(--sg-letter); color: var(--ink); white-space: nowrap; }
html[data-vorm="plat"] .actions #btnErbij { background: var(--blauw) !important; box-shadow: 0 6px 0 var(--blauwdd) !important; }
html[data-vorm="plat"] .actions #btnKbd { background: var(--munt) !important; box-shadow: 0 6px 0 var(--muntd) !important; }
html[data-vorm="plat"] .actions #btnMic { background: var(--roze) !important; box-shadow: 0 6px 0 var(--rozedd) !important; width: 88px; height: 88px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 40px; height: 40px; }
html[data-vorm="plat"] .actions #btnSnd { background: var(--geel) !important; box-shadow: 0 6px 0 var(--geeld) !important; }
html[data-vorm="plat"] .actions .ab:active { transform: translateY(4px); box-shadow: var(--ax-diep-klein) !important; }
html[data-vorm="plat"] .micwrap { position: fixed !important; left: 0; right: 0; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 71; display: flex; justify-content: center; pointer-events: none; background: none; }
html[data-vorm="plat"] .micwrap:not(:has(#micBar.is-warn)) { display: none !important; }
html[data-vorm="plat"] #micBar { pointer-events: auto; border-radius: 20px; padding: 4px 12px; min-height: 0; font: 800 13px var(--sg-letter); background: var(--kaart); color: var(--rozed); border: 0; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] #micBar .ic { width: 16px; height: 16px; }

/* ---- stap 7: Moppie onderaan in de chat zolang Martha bezig is ---- */
.m3g-moppie [data-ding-laag], .m3g-moppie [data-extra-laag] { display: none; }
.m3g-moppie[data-ding="lampje"] [data-ding-laag="lampje"], .m3g-moppie[data-ding="loep"] [data-ding-laag="loep"], .m3g-moppie[data-ding="laptop"] [data-ding-laag="laptop"],
.m3g-moppie[data-ding="hamer"] [data-ding-laag="hamer"], .m3g-moppie[data-ding="zwaai"] [data-ding-laag="zwaai"] { display: inline; }
.m3g-moppie[data-extra~="1"] [data-extra-laag="1"], .m3g-moppie[data-extra~="2"] [data-extra-laag="2"], .m3g-moppie[data-extra~="3"] [data-extra-laag="3"],
.m3g-moppie[data-extra~="4"] [data-extra-laag="4"] { display: inline; }
.sg-bezig { display: flex; align-items: center; gap: 14px; background: var(--kaart); color: var(--ink); border-radius: 28px; padding: 10px 16px 10px 10px; box-shadow: var(--ax-diep); }
.sg-bezig-moppie { flex: 0 0 96px; width: 96px; height: 96px; }
.sg-bezig-moppie svg { width: 96px; height: 96px; display: block; }
.sg-bezig .m3g-pip-lijf { transform-origin: 50% 90%; animation: sg-wiebel 1.6s ease-in-out infinite; }
@keyframes sg-wiebel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.sg-bezig-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-bezig-t b { font: 900 22px var(--sg-letter); }
.sg-bolletjes { display: flex; gap: 6px; }
.sg-bolletjes i { width: 10px; height: 10px; border-radius: 50%; background: var(--blauw); animation: sg-bol 1.2s infinite ease-in-out; }
.sg-bolletjes i:nth-child(2) { animation-delay: .2s; background: var(--roze); }
.sg-bolletjes i:nth-child(3) { animation-delay: .4s; background: var(--munt); }
@keyframes sg-bol { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-6px); opacity: 1; } }
.sg-bezig-klussen { align-self: flex-start; border: 0; border-radius: 16px; background: var(--roze); color: #fff; font: 800 15px var(--sg-letter); padding: 5px 12px; box-shadow: 0 3px 0 var(--rozedd); }
.sg-bezig-klussen[hidden] { display: none; }
html[data-vorm="plat"] .msg.typing .av-col { display: none; }
html[data-vorm="plat"] .msg.typing .body { background: none; box-shadow: none; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .sg-bezig .m3g-pip-lijf, .sg-bolletjes i { animation: none !important; }
}

/* ---- stap 8: Privé, Werk en Bedrijf als volle pagina met terugknop en grote tegels ---- */
html[data-vorm="plat"] .sheet { position: fixed !important; inset: 0 !important; z-index: 60 !important; width: auto !important; height: auto !important; max-height: none !important; max-width: none !important;
  margin: 0 !important; border-radius: 0 !important; transform: none !important; display: none; flex-direction: column; box-sizing: border-box;
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 14px 20px !important; background: linear-gradient(170deg, var(--bg1), var(--bg2)) !important; color: var(--ink); border: 0 !important; box-shadow: none !important; opacity: 1 !important; }
html[data-vorm="plat"] .sheet.open { display: flex !important; }
html[data-vorm="plat"] .sheet-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; border: 0; background: none; }
html[data-vorm="plat"] .sheet-head h2 { font: 900 30px var(--sg-letter); color: var(--ink); letter-spacing: 0; text-transform: none; margin: 0; }
html[data-vorm="plat"] #sheetClose { display: none; }
.sg-terug { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--kaart); color: var(--ink); box-shadow: var(--ax-diep); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-terug svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html[data-vorm="plat"] .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-family: var(--sg-letter); font-size: 20px; color: var(--ink); }
html[data-vorm="plat"] .sheet-body .pl-tegels { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
html[data-vorm="plat"] .sheet-body .pl-tegel { background: var(--kaart); color: var(--ink); border-radius: 28px; box-shadow: var(--ax-diep); border: 0; padding: 16px; min-height: 120px; }
html[data-vorm="plat"] .sheet-body .nt-tegel { border-radius: 28px; min-height: 120px; }   /* de game-rand en het lint in wereldkleur blijven */
html[data-vorm="plat"] .sheet-body .pl-tegel .pl-ic, html[data-vorm="plat"] .sheet-body .nt-tegel .pl-ic { width: 56px; height: 56px; }
html[data-vorm="plat"] .sheet-body .pl-tegel .pl-t, html[data-vorm="plat"] .sheet-body .nt-tegel b { font-size: 22px; }
/* het Puntenboekje (stap 12), ook een volle pagina */
.sg-pagina { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; box-sizing: border-box; overflow-y: auto;
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 14px 30px; background: linear-gradient(170deg, var(--bg1), var(--bg2)); color: var(--ink); font-family: var(--sg-letter); }
.sg-pagina[hidden] { display: none; }
.sg-pagina-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.sg-pagina-kop h2 { font: 900 30px var(--sg-letter); margin: 0; }
.sg-vak { background: var(--kaart); border-radius: 28px; box-shadow: var(--ax-diep); padding: 14px 18px; margin: 0 0 14px; font-size: 19px; }
.sg-vak h3 { margin: 0 0 6px; font: 900 21px var(--sg-letter); }
.sg-groot { font: 900 44px var(--sg-letter); color: var(--geeld); }
.sg-vak ul { margin: 0; padding: 0; list-style: none; }
.sg-vak li { padding: 5px 0; }
.sg-vak li small { opacity: .7; }
.sg-rijtje { display: flex; gap: 14px; flex-wrap: wrap; }
.sg-wring { display: flex; flex-direction: column; align-items: center; font-size: 15px; }
.sg-wring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.sg-wring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sg-keuze { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.sg-keuze button { border: 0; border-radius: 22px; padding: 10px 16px; font: 800 17px var(--sg-letter); background: var(--bg1); color: var(--ink); min-height: 48px; }
.sg-keuze button[aria-pressed="true"] { background: var(--roze); color: #fff; box-shadow: 0 4px 0 var(--rozedd); }

/* ===== 1.4.1 (21-10-2026, klus "Martha 3D verbeterronde"; Alex: "het lijkt niet op wat je had getekend, de geel-zwart-witte
   stijl", "veel lag", "iconen gaan mee bij typen", "scherm vol maar weinig info") ===== */
/* geel-zwart-wit weg: de oude kleuren van styles.css (casual game-stijl 18-10) en game.css (1.3.3) wijzen nu naar de Speelgoeddoos.
   Er werd geen oude stijlkeuze onthouden (m3d.thema kent alleen licht/donker/systeem); wat speelgoed.css niet overschreef, bleef
   in de oude kleuren staan. */
html[data-vorm="plat"] {
  --bg: var(--bg1); --paper: var(--kaart); --paper-2: var(--bg1); --text: var(--ink); --text-dim: #6B6F99;
  --yellow: var(--blauw); --yellow-hi: var(--lila); --yellow-lo: var(--blauwdd); --cyan: var(--blauw); --green: var(--munt); --red: var(--roze);
  --rand: 0 0 0 0 transparent; --rond: var(--sg-letter);
  --m3g-geel: var(--geel); --m3g-geel-lo: var(--geeld); --m3g-inkt: var(--schaduw); --m3g-wit: var(--kaart); --m3g-kaart: var(--kaart);
  --m3g-nacht: var(--bg1); --m3g-nacht-hi: var(--bg2); --m3g-dim: #6B6F99; --m3g-goed: var(--munt); --m3g-fout: var(--roze);
  --m3g-prive: var(--roze); --m3g-werk: var(--blauw); --m3g-bedrijf: var(--lila); --m3g-font: var(--sg-letter);
}
/* lag: niets bewegends meer op de achtergrond; geen blur over het hele scherm, geen vaste achtergrond die bij elk scrolstapje
   opnieuw getekend wordt en geen will-change (elke laag een eigen tekenvlak); de kwartslag van de iconen staat uit (motion.js) */
html[data-vorm="plat"], html[data-vorm="plat"] body { background-attachment: scroll; }
html[data-vorm="plat"] #kopStrook::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(var(--bg1) 70%, transparent); }
html[data-vorm="plat"] .rig, html[data-vorm="plat"] .layer, html[data-vorm="plat"] .bg, html[data-vorm="plat"] .particles { will-change: auto !important; }
html[data-vorm="plat"] .bg, html[data-vorm="plat"] .particles, html[data-vorm="plat"] .frame, html[data-vorm="plat"] .edge-light, html[data-vorm="plat"] .gloss { animation: none !important; }
/* compacter: kleinere kop en knoppen, de chat krijgt de ruimte (was kop 112, onder 150, knop 64, praatknop 88) */
:root { --sg-kop: 84px; --sg-onder: 112px; --sg-knop: 52px; }
.sg-menu-ic { gap: 4px; } .sg-menu-ic i { width: 22px; height: 3px; }
.sg-woord { font-size: 12px; }
.sg-seg { margin-top: 2px; padding: 4px; }
.sg-deel { font-size: 17px; padding: 8px 4px; min-height: 40px; }
html[data-vorm="plat"] #kopStrook { padding-top: calc(6px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"] #kopStrook::before { height: 96px; }
html[data-vorm="plat"] #kopWie { height: 40px; }
html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; margin-left: -12px; }
html[data-vorm="plat"] .kop-gz .gz { width: 32px; height: 32px; margin: 4px; }
.sg-ring { width: 40px; height: 40px; }
html[data-vorm="plat"] .actions { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
html[data-vorm="plat"] .actions .ab .ic { width: 26px; height: 26px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 12px; margin-top: 5px; }
html[data-vorm="plat"] .actions #btnMic { width: 66px; height: 66px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 32px; height: 32px; }
@media (max-width: 379px) { :root { --sg-knop: 46px; --sg-kop: 78px; } }
/* toetsenbord: de pagina krimpt niet meer mee (main.dart); alleen het typveld en het einde van de chat schuiven boven het toetsenbord */
html[data-vorm="plat"][data-tb] .compose { bottom: calc(var(--tb, 0px) + 8px); }
html[data-vorm="plat"][data-tb] .log { padding-bottom: calc(var(--tb, 0px) + 80px); }
/* de 3D-dikte van de oude knoppen (zwarte plaatjes .ex achter elke knop), de glans en de schaduwlaag van lighting.js: weg */
html[data-vorm="plat"] .ex, html[data-vorm="plat"] .edge-light, html[data-vorm="plat"] .gloss, html[data-vorm="plat"] .sh { display: none !important; will-change: auto !important; }
/* 1.4.2: microfoon gepauzeerd = geen geel meer (Celeste 21-10); de pauze zie je aan het doorgestreepte icoon en het labeltje */
html[data-vorm="plat"] .b3d.is-warn, html[data-vorm="plat"] .micbar.is-warn { --face: var(--kaart); --face-hi: var(--kaart); }
/* ===== 1.4.2 (21-10-2026, klus "Martha 3D herstel na test"; gebruikerstest Celeste 1.4.1) ===== */
/* knoppen onderin zoals 27-optie1: de witte .face-laag met 3px donkere rand (styles.css .face, lighting.js) kwam over de gekleurde
   knop heen te liggen; in de platte vorm weg, de kleur zit op de knop zelf, het icoon is wit. Een zacht glansvlekje zoals op het blad. */
html[data-vorm="plat"] .actions .face, html[data-vorm="plat"] .micwrap .face { display: none !important; }
html[data-vorm="plat"] .actions .ab::before { content: ''; position: absolute; left: 22%; top: 12%; width: 30%; height: 16%; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transform: rotate(-20deg); pointer-events: none; }
html[data-vorm="plat"] .actions #btnMic.is-warn .ic { opacity: .9; }
/* de kop snijdt de bovenste chatregel niet meer half af: de chat vult nog steeds het hele scherm, maar wat onder de kop zou staan
   wordt weggeknipt (clip-path, geen eigen laag, geen blur); de onderste 12px van het waasje (::before 96px, kop 84px) laat een
   regel daaronder zacht verschijnen in plaats van dat hij half door de kop schemert */
html[data-vorm="plat"] .log { clip-path: inset(calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 0 0 0); }
/* gezichtjes zoals 27-personeel-bezig: getekend gezichtje op een lichte plekkleur, ring eromheen, naam eronder; geen zwart rondje */
html[data-vorm="plat"] .kop-gz { border: 0; margin-left: 4px; background: var(--kaart); box-shadow: var(--ax-diep); overflow: visible; }
html[data-vorm="plat"] .kop-gz:first-child { margin-left: 0; }
html[data-vorm="plat"] .kop-gz .gz-naam { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); max-width: 48px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; border-radius: 8px; background: var(--kaart); color: var(--ink);
  font: 800 10px/14px var(--sg-letter); box-shadow: var(--ax-diep-klein); pointer-events: none; }
html[data-vorm="plat"] .sg-rechts { gap: 10px; }
/* de oude 3px zwarte randen op de Privé-planning (planning.css) en de knopjes in het klussenlijstje (lampjes.css): zacht zoals de rest */
html[data-vorm="plat"] .pl-paneel, html[data-vorm="plat"] .pl-ballon, html[data-vorm="plat"] .pl-rij, html[data-vorm="plat"] .kl-knop {
  border-color: transparent !important; box-shadow: var(--ax-diep) !important; }

/* ===== 1.4.3 (21-10-2026, klus "Martha 3D herstel ronde 3"; hertest Celeste 1.4.2, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.2.md) ===== */
/* 1 de rondjes naast de berichten: rond en zacht zoals 27-optie1, geen 3px donkere rand en geen hoekje meer (styles.css .av);
   jij = witte letter op blauw, Martha = haar zeshoekje op zacht crème */
html[data-vorm="plat"] { --av-martha: #FFF1C9; --av-martha-ic: #8A5530; }
html[data-vorm="plat"] .msg .av { width: 34px; height: 34px; border: 0; border-radius: 50%; font: 900 17px var(--sg-letter); }
html[data-vorm="plat"] .msg.alex .av { background: var(--blauw); color: #fff; box-shadow: 0 3px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg.martha .av { background: var(--av-martha); color: var(--av-martha-ic); box-shadow: var(--ax-diep); }
/* 2 de gekozen wereld in de schuifknop heeft een eigen kleur (kop-speelgoed.js zet er altijd precies één op aria-selected) */
.sg-deel[data-wereld="werk"][aria-selected="true"] { background: var(--blauw); box-shadow: 0 4px 0 var(--blauwdd); }
.sg-deel[data-wereld="bedrijf"][aria-selected="true"] { background: var(--lilad); box-shadow: 0 4px 0 var(--blauwdd); }
/* 3 donker icoon op de lichte knoppen Typen (munt) en Geluid (geel), zoals de gele knop op 27-optie1 (WCAG 2.2 1.4.11: 3:1) */
html[data-vorm="plat"] .actions #btnKbd .ic, html[data-vorm="plat"] .actions #btnSnd .ic { stroke: #262A4D; color: #262A4D; }
/* de roze praatknop: wit icoon haalde maar 2,72:1 (licht) en 2,21:1 (donker); een wat dieper roze (#E94B6E, --rozed van licht) geeft 3,7:1
   en blijft het roze van het blad */
html[data-vorm="plat"] .actions #btnMic { background: #E94B6E !important; box-shadow: 0 6px 0 #B8314F !important; }
/* 24-10-2026 (Alex: "als ik de microfoon aanzet moet hij groen zijn"): zolang de microfoon aan staat (setMic in interactions.js
   zet dan .is-ok) is de praatknop groen, het groen van .b3d.is-ok; wit icoon 3,3:1 (WCAG 1.4.11: 3:1). Pauze/uit = roze zoals hierboven */
html[data-vorm="plat"] .actions #btnMic.is-ok { background: #23A243 !important; box-shadow: 0 6px 0 #17712E !important; }
/* 24-10-2026 (Lucía): "Luister even niet" (stem.js zet data-gedempt) = niet groen, weer roze */
html[data-vorm="plat"][data-gedempt] .actions #btnMic.is-ok { background: #E94B6E !important; box-shadow: 0 6px 0 #B8314F !important; }
/* 4 witte tekst in je eigen blauwe bubbel (styles.css .alex .txt / .alex .meta maakten hem donker) */
html[data-vorm="plat"] .msg.alex .txt, html[data-vorm="plat"] .msg.alex .meta { color: #fff; }
/* 5 geen lege band onder de kop: de melding "Voorbeeldgegevens / geen verbinding" (echt.js #bronMelding) stond in de chat-kolom
   onder de kop verstopt en duwde de chat 32-50px omlaag; nu een klein zwevend kaartje net onder de kop, in de Speelgoeddoos-kleuren */
html[data-vorm="plat"] .bron-melding { position: fixed; z-index: 69; left: 50%; transform: translateX(-50%); top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px)));
  max-width: calc(100% - 40px); margin: 0; padding: 4px 12px; border: 0; border-radius: 16px; background: var(--kaart); color: var(--ink);
  font: 800 13px/1.3 var(--sg-letter); box-shadow: var(--ax-diep); pointer-events: none; }
/* 6 namen onder de gezichtjes 12px; de gezichtjes 6px uit elkaar en een naam nooit breder dan gezicht plus tussenruimte, zodat
   namen elkaar niet raken */
html[data-vorm="plat"] .kop-gz { margin-left: 6px; }
html[data-vorm="plat"] .kop-gz .gz-naam { font: 800 12px/14px var(--sg-letter); max-width: 46px; padding: 0 3px; box-sizing: border-box; bottom: -9px; }

/* ===== 1.4.4 (21-10-2026, klus "Martha 3D herstel ronde 4"; hertest Celeste 1.4.3, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.3.md) ===== */
/* 1 de volle pagina's Privé, Werk en Bedrijf zoals blad 22 (web/m3d-stijl/22-speelgoed-prive-pagina.html): geen band bovenaan (de kop
   ligt onder de pagina, dus de ruimte voor de kop hoeft niet vrij), een gekleurde terugknop in de wereldkleur (kop-speelgoed.js zet
   #sheet[data-wereld]): Privé roze, Werk blauw, Bedrijf lila zoals de schuifknop; geen "3D"-tekstschaduw en geen rand onder de titel */
/* 1.4.9 (22-10-2026, Perla: datum "Di 20" te flets): wit op #E94B6E haalde maar 3,69:1; #CF3A60 geeft 4,74:1 (WCAG 1.4.3, kleine tekst 4,5:1) */
html[data-vorm="plat"] .sheet { --wk: #CF3A60; --wkd: #A82848; padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) !important; }
html[data-vorm="plat"] .sheet[data-wereld="werk"] { --wk: #4453E0; --wkd: #3341B8; }
html[data-vorm="plat"] .sheet[data-wereld="bedrijf"] { --wk: #7A50D6; --wkd: #5E36B0; }
html[data-vorm="plat"] .sheet:not([data-wereld]) { --wk: #4453E0; --wkd: #3341B8; }
.sg-pagina { padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"] .sheet-head { padding: 0 0 12px; gap: 12px; border: 0 !important; }
html[data-vorm="plat"] #sheetTitle { text-transform: none; display: inline-flex; align-items: center; gap: 8px; text-shadow: none; border: 0; background: none; padding: 0; font-size: 28px; line-height: 1.1; }
html[data-vorm="plat"] .sheet[data-wereld] #sheetTitle::before { content: ''; flex: none; width: 26px; height: 26px; background: var(--wk);
  -webkit-mask: var(--wk-ic) center / contain no-repeat; mask: var(--wk-ic) center / contain no-repeat; }
.sheet[data-wereld="prive"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 9v12h14V9M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.sheet[data-wereld="werk"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2.5'/%3E%3Cpath d='M9 7.5V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5v2M3 13h18'/%3E%3C/svg%3E"); }
.sheet[data-wereld="bedrijf"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M3 9h18v3a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0zM5 14v6h14v-6M10 20v-4h4v4'/%3E%3C/svg%3E"); }
.sg-terug { position: relative; width: 50px; height: 50px; background: var(--wk, #4453E0); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 5px 0 var(--wkd, #3341B8); }
.sg-terug::before { content: ''; position: absolute; left: 22%; top: 12%; width: 32%; height: 15%; border-radius: 8px; background: rgba(255, 255, 255, .55); transform: rotate(-20deg); pointer-events: none; }
.sg-terug svg { width: 24px; height: 24px; stroke-width: 2.8; }
/* Martha's zinnetje: haar zeshoekje op zacht crème (zoals het rondje in de chat) i.p.v. de paarse bol, de ballon crème zoals het blad */
html[data-vorm="plat"] .sheet .pl-bol { width: 38px; height: 38px; border: 0 !important; box-shadow: var(--ax-diep);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5530' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 5v10l-8 5-8-5V7zM12 7l4 2.5v5L12 17l-4-2.5v-5zM12 2v5M12 17v5'/%3E%3C/svg%3E") center / 22px no-repeat, var(--av-martha); }
html[data-vorm="plat"] .sheet .pl-martha .pl-ballon { background: var(--av-martha) !important; color: var(--ink); border-radius: 20px; border-bottom-left-radius: 6px; font-size: 15px; line-height: 1.35; font-weight: 800; padding: 8px 12px; }
html[data-vorm="plat"] .sheet .pl-privekop .pl-martha { align-items: flex-end; margin-top: 0; }
html[data-vorm="plat"] .sheet .pl-privekop { margin: 0 0 14px; }
/* de tegels: gekleurde speelgoedtegels met nopjes en een wit pilletje met icoon en gezichtje (blad 22); de oneven laatste over de
   hele breedte (Logboek). Vaste kleuren in licht en donker; tekstkleur per tegel zo dat de status >= 4,5:1 haalt. */
html[data-vorm="plat"] .sheet-body .pl-tegels { gap: 18px 12px; margin: 2px 0 14px; }
/* 1.8.7 (24-10-2026, Alex 07:30 "de map iconen is roze dan moet de taken plaatje ook roze zijn"): de zes tegelkleuren op één plek
   (--tg-<kleur>-*). De tegels hieronder en de kaarten onder de Privé-tegels (kaartjes.css, "tegelkleur") lezen allebei deze waarden. */
:root {
  --tg-roze-a: #FF8AA3; --tg-roze-b: #FF6B8A; --tg-roze-d: #B8314F; --tg-roze-ic: #E94B6E; --tg-roze-st: #262A4D;
  --tg-blauw-a: #5262F0; --tg-blauw-b: #4453E0; --tg-blauw-d: #3341B8; --tg-blauw-ic: #4453E0; --tg-blauw-st: #FFFFFF;
  --tg-mint-a: #4FDDB6; --tg-mint-b: #36D1A8; --tg-mint-d: #168565; --tg-mint-ic: #168565; --tg-mint-st: #262A4D;
  --tg-geel-a: #FFD25E; --tg-geel-b: #FFC83D; --tg-geel-d: #C48700; --tg-geel-ic: #B07800; --tg-geel-st: #262A4D;
  --tg-lila-a: #8058E6; --tg-lila-b: #7A50D6; --tg-lila-d: #5E36B0; --tg-lila-ic: #7A50D6; --tg-lila-st: #FFFFFF;
  --tg-oranje-a: #FFB06B; --tg-oranje-b: #FF9F43; --tg-oranje-d: #C26A12; --tg-oranje-ic: #C26A12; --tg-oranje-st: #262A4D;
}
html[data-vorm="plat"] .sheet-body .pl-tegel { --tg-a: var(--tg-roze-a); --tg-b: var(--tg-roze-b); --tg-d: var(--tg-roze-d); --tg-ic: var(--tg-roze-ic); --tg-st: var(--tg-roze-st);
  position: relative; overflow: visible; min-height: 0; padding: 14px 6px 10px; gap: 5px; align-items: center; justify-content: center; text-align: center;
  border: 0 !important; border-radius: 24px; color: #262A4D; background: linear-gradient(180deg, var(--tg-a), var(--tg-b));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--tg-d); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+2) { --tg-a: var(--tg-blauw-a); --tg-b: var(--tg-blauw-b); --tg-d: var(--tg-blauw-d); --tg-ic: var(--tg-blauw-ic); --tg-st: var(--tg-blauw-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+3) { --tg-a: var(--tg-mint-a); --tg-b: var(--tg-mint-b); --tg-d: var(--tg-mint-d); --tg-ic: var(--tg-mint-ic); --tg-st: var(--tg-mint-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+4) { --tg-a: var(--tg-geel-a); --tg-b: var(--tg-geel-b); --tg-d: var(--tg-geel-d); --tg-ic: var(--tg-geel-ic); --tg-st: var(--tg-geel-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+5) { --tg-a: var(--tg-lila-a); --tg-b: var(--tg-lila-b); --tg-d: var(--tg-lila-d); --tg-ic: var(--tg-lila-ic); --tg-st: var(--tg-lila-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+6) { --tg-a: var(--tg-oranje-a); --tg-b: var(--tg-oranje-b); --tg-d: var(--tg-oranje-d); --tg-ic: var(--tg-oranje-ic); --tg-st: var(--tg-oranje-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel::before { content: ''; position: absolute; top: -6px; left: 18%; right: 18%; height: 11px; pointer-events: none;
  background: radial-gradient(closest-side, var(--tg-a) 92%, transparent 100%) left / 22px 11px no-repeat, radial-gradient(closest-side, var(--tg-a) 92%, transparent 100%) right / 22px 11px no-repeat; }
html[data-vorm="plat"] .sheet-body .pl-tegel:active { background: linear-gradient(180deg, var(--tg-b), var(--tg-b)); transform: translateY(3px); box-shadow: 0 3px 0 var(--tg-d); }
html[data-vorm="plat"] .sheet-body .pl-tegel .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 6px 40px 6px 12px; margin: 0; border: 0 !important; border-radius: 18px;
  color: var(--tg-ic); stroke: var(--tg-ic); stroke-width: 2.8;
  background: rgba(255, 255, 255, .93) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cellipse cx='7' cy='6' rx='2' ry='2.5' fill='%23231B45'/%3E%3Cellipse cx='19' cy='6' rx='2' ry='2.5' fill='%23231B45'/%3E%3Ccircle cx='6.4' cy='5' r='.8' fill='%23fff'/%3E%3Ccircle cx='18.4' cy='5' r='.8' fill='%23fff'/%3E%3Cellipse cx='3' cy='9' rx='2.4' ry='1.4' fill='%23FF6B8A' opacity='.55'/%3E%3Cellipse cx='23' cy='9' rx='2.4' ry='1.4' fill='%23FF6B8A' opacity='.55'/%3E%3Cpath d='M11 9.5q2 2.2 4 0' stroke='%23231B45' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center / 26px 14px no-repeat; }
html[data-vorm="plat"] .sheet-body .pl-tegel b { display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; color: #262A4D; border-radius: 999px; padding: 2px 12px; font-size: 18px !important; font-weight: 900; line-height: 1.25; }
html[data-vorm="plat"] .sheet-body .pl-tegel small { color: var(--tg-st); font-size: 14px; font-weight: 900; opacity: 1; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 14px 10px 12px; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) b { order: 2; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) small { order: 3; flex-basis: auto; }
/* geen donkere randen meer op de pagina's: tabbladen, knopjes, linten, rondjes, labeltjes, regels (planning.css, oude stijl 3px
   var(--ink): in licht donker, in donker wit). Wat een rand nodig heeft om te zien wat het is (invulveld, vinkje, voortgang,
   tijdlijn) krijgt de zachte schaduwkleur. */
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k, .pl-lint, .pl-ava, .pl-tag, .pl-st, .pl-ic, .pl-ok, .pl-blok, .pl-wie span, .pl-let, .pl-sam span, .pl-bar,
  .pl-bewerk, .pl-tel, .pl-groot, .m3d-account, .pl-paneel, .pl-ballon, .pl-rij, .pl-pr) { border-color: transparent !important; }
html[data-vorm="plat"] .sheet :is(.pl-inv, .pl-vink, .pl-voortgang) { border-color: var(--ax-rand-sterk) !important; }
html[data-vorm="plat"] .sheet .pl-tijdlijn { border-left-color: var(--schaduw) !important; }
html[data-vorm="plat"] .sheet .pl-bar.dubbel { border-color: var(--roze) !important; }
html[data-vorm="plat"] .sheet .pl-ava.nieuw { border-color: var(--ax-rand-sterk) !important; }
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k) { background: var(--kaart); color: var(--ink); box-shadow: var(--ax-diep); border-radius: 16px; }
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k).aan { background: var(--wk); color: #fff; box-shadow: 0 3px 0 var(--wkd); }
html[data-vorm="plat"] .sheet :is(.pl-ic, .pl-ava) { box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .sheet .pl-lint { box-shadow: var(--ax-diep); }
/* 2 Privé gekozen in de schuifknop: witte tekst op roze haalde 2,72:1 (licht) en 2,21:1 (donker); nu donkere tekst op roze (>= 4,5:1,
   WCAG 2.2 1.4.3). Werk en Bedrijf: wit op een dieper blauw/lila, ook in donker (daar waren ze lichter) */
.sg-deel[data-wereld="prive"][aria-selected="true"] { background: #FF6B8A; color: #262A4D; box-shadow: 0 4px 0 #B8314F; }
.sg-deel[data-wereld="werk"][aria-selected="true"] { background: #4453E0; color: #fff; box-shadow: 0 4px 0 #3341B8; }
.sg-deel[data-wereld="bedrijf"][aria-selected="true"] { background: #7A50D6; color: #fff; box-shadow: 0 4px 0 #5E36B0; }
/* 3 de verbindingsmelding: één regel, en de chat begint eronder (padding en het wegknippen van de chat schuiven mee), dus hij
   bedekt geen bericht; zonder melding blijft alles zoals in 1.4.3 */
html[data-vorm="plat"] .bron-melding { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 32px); box-sizing: border-box;
  height: 24px; line-height: 16px; padding: 4px 12px; top: calc(var(--sg-kop) + 2px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"]:has(#bronMelding:not([hidden])) { --sg-melding: 30px; }
html[data-vorm="plat"] .log { padding-top: calc(var(--sg-kop) + var(--sg-melding, 0px) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px)));
  clip-path: inset(calc(var(--sg-kop) + var(--sg-melding, 0px) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 0 0 0); }
/* 4 Martha's eigen naam onder haar gezichtje paste niet ("Mart…"): iets meer ruimte tussen de gezichtjes en geen afkapping voor haar */
html[data-vorm="plat"] .kop-gz[data-kop-wie="Ailex"] .gz-naam { max-width: 54px; letter-spacing: -.3px; padding: 0 2px; }
/* ook het klussenlijstje (lampjes.css): titel, snelknopje en het wensen-labeltje zonder donkere rand of 3D-schaduw */
html[data-vorm="plat"] :is(#klTitel, .kl-snel, #klWensen) { border-color: transparent !important; text-shadow: none; }
html[data-vorm="plat"] .kl-snel { box-shadow: var(--ax-diep); }
/* ===== 1.4.5 (21-10-2026, klus "Martha 3D herstel ronde 5"; hertest Celeste 1.4.4, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.4.md) ===== */
/* 1 de paginatitel zoals blad 22: wereld-icoon en "Privé"/"Werk"/"Bedrijf" direct links naast de terugknop (styles.css .sheet-head
   zette justify-content: space-between, met de verborgen sluitknop stond de titel dus rechts), zonder de oude 3D-streep
   (box-shadow inset 0 -3px en 0 3px van styles.css .sheet-head h2); de tekst zelf staat nu in gewone letters (planning.js, index.html) */
html[data-vorm="plat"] .sheet-head { justify-content: flex-start; }
html[data-vorm="plat"] #sheetTitle { box-shadow: none !important; border-radius: 0; text-transform: none; }
/* 2 witte statustekst op de blauwe en lila tegel: de bovenste kleur van het verloop haalde 4,17:1 en 3,11:1; nu >= 4,5:1 over het
   hele verloop (blauw #5262F0 4,81:1, lila #8058E6 4,71:1; de onderste kleur was al 5,9:1 en 5,32:1) */
/* (nu al in --tg-blauw-a) */
/* (nu al in --tg-lila-a) */
/* 3 lucht tussen de tegels en het eerste kopje eronder ("Notities", "Jij", "Jouw zaak"): het lint steekt 15px boven zijn kaart uit
   (planning.css margin -37px) en stond daardoor 2px onder de tegels; nu ~18px */
html[data-vorm="plat"] .sheet-body .pl-tegels { margin-bottom: 30px; }
/* ===== 1.4.6 (21-10-2026, klus "Martha 3D herstel ronde 6"; hertest Celeste 1.4.5, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.5.md) ===== */
/* 1 labeltjes (werk/thuis, bezorgen/ophalen, bezig/klaar/wacht, procentjes, tellertjes): de vlakjes zijn vaste pastelkleuren (planning.css
   --w/--h, #FFF3C4, #FFD9DB, #fff), maar de tekst nam de inktkleur over, in donker bijna wit (1,0-1,1:1). Nu vaste donkere tekst op het
   vlakje, zoals Material 3 "on-container" per vlak; in licht was de inkt al #262A4D, daar verandert niets. .vb heeft eigen kleuren. */
html[data-vorm="plat"] .sheet :is(.pl-tag:not(.vb), .pl-st, .pl-tel) { color: #262A4D; }
/* 3 kopjes in de blauwe lintjes en de letterblokjes in de regels: donkere tekst op --blauw haalde 3,31:1 (licht), lichte 2,7:1 (donker);
   nu witte tekst op het diepere blauw van de Werk-knop (#4453E0, 5,9:1), in licht en donker gelijk */
html[data-vorm="plat"] .sheet :is(.pl-lint, .pl-rij .pl-ic) { background: #4453E0; color: #FFFFFF; }
/* 4 zelfde oorzaak elders op de pagina's (gevonden met Celestes proef celeste_pagina4.py, donker 1,0-2,7:1): agendablokjes en
   meldingen (.pl-blok, .pl-let: vaste pastelvlakken), witte rondjes met een letter (.pl-ava) en het vinkje op munt. Donkere tekst op
   het lichte vlak; de blauwe rondjes (.groot, .ai) zoals de lintjes wit op #4453E0. De subregel in een agendablokje haalde ook in licht
   maar 4,3:1 (--text-dim op pastel); nu #4B5080 (>= 6:1). */
html[data-vorm="plat"] .sheet :is(.pl-blok, .pl-let, .pl-ava, .pl-vink) { color: #262A4D; }
html[data-vorm="plat"] .sheet .pl-blok small { color: #4B5080; }
html[data-vorm="plat"] .sheet .pl-ava:is(.groot, .ai) { background: #4453E0; color: #FFFFFF; }
html[data-vorm="plat"] .sheet .pl-ava.nieuw { color: var(--ink); }

/* 1.4.8 (22-10-2026, Alex: "als je kantelt alleen de iconen worden gedraaid zoals bij Martha"): de app blijft staand (main.dart,
   AndroidManifest portrait); de iconen van de platte vorm draaien een kwartslag mee, 250 ms zoals styles.css 1.2.0. Alleen de
   tekening in de knop draait, de knop zelf en de indeling blijven staan. */
html[data-vorm="plat"] :is(.sg-menu-ic, .sg-terug svg, .sg-deel-t, .actions .b3d > svg) { transition: rotate .25s cubic-bezier(.215, .61, .355, 1); }
html[data-vorm="plat"][data-kwart="1"] :is(.sg-menu-ic, .sg-terug svg, .actions .b3d > svg) { rotate: 90deg; }
html[data-vorm="plat"][data-kwart="-1"] :is(.sg-menu-ic, .sg-terug svg, .actions .b3d > svg) { rotate: -90deg; }

/* ===== 1.5.0 Ailex (22-10-2026, klus "Ailex 1.5.0"; Alex 12:58: "ik zie geen moppie of hij komt onder het toetsenbord, alles is zo
   groot dus het is niet efficient"). Kleuren blijven (contrast al nagemeten in 1.4.x); alleen maten kleiner, tikvlakken minstens 44 px. ===== */
:root { --sg-kop: 80px; --sg-onder: 104px; --sg-knop: 48px; --sg-moppie: 52px; }
@media (max-width: 379px) { :root { --sg-knop: 46px; --sg-kop: 76px; --sg-moppie: 46px; } }
html[data-vorm="plat"] .log { font-size: 17px; line-height: 1.35; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 17px; }
html[data-vorm="plat"] .msg .body { border-radius: 20px; padding: 8px 12px; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .msg.alex .body { background: #4453E0; box-shadow: 0 4px 0 var(--blauwdd); }   /* wit op #5B6CFF was 4,17:1, bij 17 px te weinig; #4453E0 = 5,9:1 (licht en donker) */
html[data-vorm="plat"] .msg.alex .meta { opacity: .9; }
html[data-vorm="plat"] .msg .meta { font-size: 12px; }
html[data-vorm="plat"] .compose { border-radius: 22px; padding: 2px 6px; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .compose input { font-size: 17px; min-height: 44px; }
html[data-vorm="plat"] #kopStrook { padding-top: calc(6px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); gap: 6px; }
html[data-vorm="plat"] #kopStrook::before { height: 100px; }
.sg-menu-ic { box-shadow: 0 4px 0 var(--lilad); }
.sg-menu-ic i { width: 20px; height: 3px; }
.sg-woord { font-size: 12px; }
.sg-seg { margin-top: 2px; padding: 3px; border-radius: 24px; box-shadow: var(--ax-diep); }
.sg-deel { font-size: 15px; padding: 6px 2px; min-height: 44px; border-radius: 22px; }
html[data-vorm="plat"] #kopWie { height: 44px; }
html[data-vorm="plat"] .kop-gz { width: 44px; height: 44px; }
html[data-vorm="plat"] .kop-gz .gz { width: 34px; height: 34px; }
.sg-ring { width: 44px; height: 44px; }
.sg-menu-lijst button { font-size: 17px; padding: 8px 12px; min-height: 44px; }
.sg-kaartje { padding: 12px 14px; font-size: 16px; }
.sg-kaartje b { font-size: 17px; }
html[data-vorm="plat"] .actions { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
html[data-vorm="plat"] .actions .ab { box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .actions .ab .ic { width: 24px; height: 24px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 12px; margin-top: 4px; }
html[data-vorm="plat"] .actions #btnMic { width: 62px; height: 62px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 30px; height: 30px; }
html[data-vorm="plat"] .micwrap { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* ===== 1.5.1 Ailex (22-10-2026, klus "Ailex 1.5.1"; Alex 16:03 bij een schermafdruk: "de iconen kleiner dat alles ruimer is en de
   letter normaal natuurlijk niet extra groot"). Knoppen 48 -> 44 px (tikvlak blijft 44), microfoon 62 -> 54, Menu 48 -> 44,
   gezichtjes 44 -> 40 en chat-rondjes 34 -> 28; chattekst 17 -> 16 px, afzender 12 -> 10 px, dunnere bubbels, meer lucht. ===== */
:root { --sg-kop: 74px; --sg-onder: 92px; --sg-knop: 44px; --sg-moppie: 46px; }
@media (max-width: 379px) { :root { --sg-knop: 44px; --sg-kop: 72px; --sg-moppie: 44px; } }
html[data-vorm="plat"] .log { font-size: 16px; line-height: 1.4; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 16px; font-weight: 500; }
html[data-vorm="plat"] .log .msg { margin-bottom: 12px; gap: 8px; }
html[data-vorm="plat"] .msg .body { border-radius: 16px; padding: 7px 11px; box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .msg.alex .body { box-shadow: 0 2px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg .meta { font-size: 10px; letter-spacing: .06em; margin-bottom: 1px; }
html[data-vorm="plat"] .msg .av { width: 28px; height: 28px; font-size: 14px; box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .msg .av .ic { width: 18px; height: 18px; }
html[data-vorm="plat"] .msg time { font-size: 11px; }
html[data-vorm="plat"] .compose input { font-size: 16px; }
.sg-menu-ic { box-shadow: 0 3px 0 var(--lilad); }
.sg-menu-ic i { width: 18px; }
.sg-woord { font-size: 11px; }
.sg-deel { font-size: 14px; }
html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; }
html[data-vorm="plat"] .kop-gz .gz { width: 30px; height: 30px; }
.sg-ring { width: 40px; height: 40px; }
.sg-menu-lijst button { font-size: 16px; }
.sg-kaartje { font-size: 15px; } .sg-kaartje b { font-size: 16px; }
html[data-vorm="plat"] .actions { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); gap: 20px; }
html[data-vorm="plat"] .actions .ab { box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .actions .ab .ic { width: 21px; height: 21px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 11px; margin-top: 3px; }
html[data-vorm="plat"] .actions #btnMic { width: 54px; height: 54px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 26px; height: 26px; }
html[data-vorm="plat"] .micwrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ===== 1.5.2 Ailex (22-10-2026, klus "Ailex 1.5.2"; Alex 16:51 bij zijn afbeelding: "ik zie nu de beer links, ik wil hem zoals op de
   afbeelding"). Geen Moppie-dok meer linksonder (kop-speelgoed.js maakt hem niet meer). Het denk-kaartje zoals de afbeelding: Moppie
   groot links met het lampje boven zijn hoofd, rechts "Ailex denkt na", de bolletjes en het roze pilletje met het getal in een rondje.
   Letters volgen de rustige maat van 1.5.1 (titel 18 px, pilletje 15 px). ===== */
.sg-bezig { gap: 12px; border-radius: 24px; padding: 8px 18px 10px 8px; box-shadow: var(--ax-diep); max-width: 100%; }
.sg-bezig-moppie { position: relative; flex: 0 0 78px; width: 78px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sg-bezig-moppie svg.m3g-moppie { width: 78px; height: 78px; display: block; }
.sg-bezig .m3g-moppie [data-ding-laag="lampje"] { display: none !important; }   /* het lampje staat los boven zijn hoofd */
.sg-bezig-moppie svg.sg-bezig-lamp { width: 28px; height: 30px; display: block; margin-bottom: -2px; transform-origin: 50% 80%; animation: sg-lamp 1.6s ease-in-out infinite; }
.sg-bezig:not([data-ding="lampje"]) .sg-bezig-lamp { visibility: hidden; }
@keyframes sg-lamp { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.08); filter: drop-shadow(0 0 6px #FFD75E); } }
.sg-bezig-t { gap: 6px; }
.sg-bezig-t b { font: 900 18px var(--sg-letter); line-height: 1.2; }
.sg-bolletjes i { width: 9px; height: 9px; }
.sg-bezig-klussen { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 14px 3px 3px; border-radius: 18px; font: 800 15px var(--sg-letter); }
.sg-pil-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #B3123F; display: grid; place-items: center; font: 900 15px var(--sg-letter); }
@media (prefers-reduced-motion: reduce) { .sg-bezig-lamp { animation: none; } }
/* 1.5.2 tikvlakken (test/tikvlak_proef.py): het puntenpilletje was 44x22 px; een onzichtbare rand maakt het tikvlak 44 px hoog zonder
   dat de kop verschuift. Het Menu (9 knoppen bij de eigenaar) liep liggend (800x360) onder het scherm uit; nu scrolt het zelf. */
.sg-menu-lijst { max-height: calc(100dvh - 76px - max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); overflow-y: auto; overscroll-behavior: contain; }

/* 1.8.7: in Privé hangt de kleur aan de soort, niet aan de plek: Taken roze, Agenda blauw, Boodschappen mint, Notities geel
   (zelfde koppeling als de kaarten eronder, kaartjes.css "tegelkleur") */
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="taak"] { --tg-a: var(--tg-roze-a); --tg-b: var(--tg-roze-b); --tg-d: var(--tg-roze-d); --tg-ic: var(--tg-roze-ic); --tg-st: var(--tg-roze-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="afspraak"] { --tg-a: var(--tg-blauw-a); --tg-b: var(--tg-blauw-b); --tg-d: var(--tg-blauw-d); --tg-ic: var(--tg-blauw-ic); --tg-st: var(--tg-blauw-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="boodschap"] { --tg-a: var(--tg-mint-a); --tg-b: var(--tg-mint-b); --tg-d: var(--tg-mint-d); --tg-ic: var(--tg-mint-ic); --tg-st: var(--tg-mint-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="notitie"] { --tg-a: var(--tg-geel-a); --tg-b: var(--tg-geel-b); --tg-d: var(--tg-geel-d); --tg-ic: var(--tg-geel-ic); --tg-st: var(--tg-geel-st); }

/* ===== 1.8.15 Ailex (24-10-2026, klus "Ailex bovenbalk hoger en knoppen zonder tekst"; Alex 18:21: "boven zie ik nog ruimte over,
   die iconen mogen hoger helemaal, en de iconen beneden hoeven geen letters"). Bovenkant: sinds 1.8.14 staat de webview al onder de
   statusbalk (main.dart inhoudRand), dus viewport-fit=cover is uit index.html: env(safe-area-inset-*) is dan 0 en de kop telt de
   statusbalk niet meer dubbel (die lege strook). Onderin: alleen het icoon, het woordje (data-woord) blijft als aria-label/attribuut;
   knoppen even groot (44 / praatknop 54), ze zakken 8 px (de plek van het woordje) en de chat krijgt die ruimte. ===== */
:root { --sg-onder: 82px; }
html[data-vorm="plat"] .actions .ab::after { content: none; display: none; }
html[data-vorm="plat"] .actions { bottom: 10px; }
html[data-vorm="plat"] .micwrap { bottom: 86px; }

/* ===== 30-10-2026 (klus "Ailex menubalk en Privé groen", Gustavo; Alex: "boven moet gewoon privé, werk, bedrijf staan, dat is het
   hoofdmenu, dat moet altijd blijven waar je maar ook bent" en "ik zie privé rood gevinkt, is verwarrend") ===== */
/* 1 de balk blijft bovenin op elk scherm: kop-speelgoed.js hangt #kopStrook onder <body> (z-index 70 boven #sheet 60 en .sg-pagina 65);
   elke volle pagina (Privé, Werk, Bedrijf, Dossier, Boekhouding, Planner, Instellingen, Profiel) en Jouw gegevens begint eronder */
html[data-vorm="plat"] .sheet { padding-top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) !important; }
html[data-vorm="plat"] .ailex-gegevens { top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
/* 2 Privé is groen: rood leest als een fout. #1E7B3C met witte tekst 5,31:1 (WCAG 2.2 1.4.3 AA, 4,5:1), als kleur op de achtergrond
   #DDE6FF/#F3E9FF ruim 3:1 (1.4.11); botst niet met Werk blauw (#4453E0) en Bedrijf paars (#7A50D6) */
.sg-deel[data-wereld="prive"][aria-selected="true"] { background: #1E7B3C; color: #fff; box-shadow: 0 4px 0 #145A2B; }
html[data-vorm="plat"] .sheet[data-wereld="prive"] { --wk: #1E7B3C; --wkd: #145A2B; }
html[data-vorm="plat"] { --m3g-prive: #1E7B3C; }

/* ===== 31-10-2026 (klus "Ailex gespreksknop in de balk", Gustavo; Alex v842: "Gesprek als vierde knop in de balk") =====
   balk = Gesprek | Privé | Werk | Bedrijf. Gesprek is een smal knopje met een tekstballon (48 px breed, even hoog als de ruimtes), fel
   (#262A4D, wit icoon) zolang de chat zichtbaar is. De ruimte waar het gesprek in zit krijgt in de chat alleen een dunne rand en een lichte
   tint in zijn eigen kleur (data-zacht: 12 % van die kleur op wit, ondoorzichtig), tekst #262A4D; fel (aria-selected) alleen als dat dashboard open staat */
.sg-gk { flex: 0 0 48px; align-self: stretch; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 22px; background: none; color: var(--ink); cursor: pointer; }
.sg-gk svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.sg-gk[aria-selected="true"] { background: #262A4D; color: #fff; box-shadow: 0 4px 0 #11132B; }
.sg-gk[aria-selected="true"] svg { fill: #fff; stroke: #fff; }
.sg-deel[data-zacht="true"] { background: #E4EFE8; color: var(--ink); box-shadow: inset 0 0 0 2px #1E7B3C; }
.sg-deel[data-wereld="werk"][data-zacht="true"] { background: #E9EAFB; box-shadow: inset 0 0 0 2px #4453E0; }
.sg-deel[data-wereld="bedrijf"][data-zacht="true"] { background: #EFEAFA; box-shadow: inset 0 0 0 2px #7A50D6; }