/* Ailex 1.8.8 (24-10-2026): bijlagen zoals WhatsApp (bijlagen.js). Kleuren uit de bestaande Ailex-stijl: de tegelkleuren van
   speelgoed/kaartjes (roze #FF8AA3, blauw #5262F0, mint #4FDDB6), kaart- en inktkleur via --kaart/--ink (licht en donker).
   Tikvlakken minstens 48 px. De laag hangt los aan body (buiten de 3D-scène), zoals de plaatjeskijker in schermen.js. */
.compose .bl-knop { flex: 0 0 auto; width: 48px; height: 48px; background: none; box-shadow: none; border-color: transparent; }
.compose .bl-knop .ic { width: 26px; height: 26px; }
.compose .bl-knop[hidden] { display: none; }

.bl-laag { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; justify-content: flex-end; font-family: var(--sg-letter, system-ui, sans-serif); }
.bl-laag[hidden] { display: none; }
.bl-dek { position: absolute; inset: 0; background: rgba(20, 22, 60, .45); }
.bl-lade, .bl-voorbeeld { position: relative; background: var(--kaart, #fff); color: var(--ink, #111); border-radius: 26px 26px 0 0;
  box-shadow: var(--ax-diep, 0 -8px 24px rgba(0, 0, 0, .2)); padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.bl-kop { margin: 0 0 12px; font-size: 18px; font-weight: 800; }

.bl-rondjes { display: flex; justify-content: space-around; gap: 8px; margin-bottom: 14px; }
.bl-rond { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 84px; min-height: 96px; padding: 4px;
  background: none; border: 0; color: inherit; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bl-bol { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(20, 22, 60, .25); }
.bl-bol .ic { width: 34px; height: 34px; }
.bl-camera .bl-bol { background: #FF8AA3; }
.bl-galerij .bl-bol { background: #5262F0; }
.bl-document .bl-bol { background: #4FDDB6; }
.bl-rond:active .bl-bol { box-shadow: 0 2px 0 rgba(20, 22, 60, .25); }
.bl-rond:focus-visible { outline: 3px solid var(--ax-ring, #5262F0); border-radius: 16px; }
.bl-terug, .bl-rij .pl-k { min-height: 48px; font-size: 16px !important; width: 100%; }

.bl-voorbeeld { max-height: 88vh; display: flex; flex-direction: column; }
.bl-tegels { list-style: none; margin: 0 0 12px; padding: 4px 0; display: flex; gap: 10px; overflow-x: auto; }
.bl-tegels > li { flex: 0 0 auto; }
.bl-tegel { position: relative; width: 112px; display: flex; flex-direction: column; gap: 3px; }
.bl-mini { width: 112px; height: 112px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: #EEF0FF; box-shadow: 0 0 0 2px #5262F0; }
.bl-mini img { width: 100%; height: 100%; object-fit: cover; }
.bl-ic .ic { width: 44px; height: 44px; }
.bl-naam { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-stand { font-size: 12px; opacity: .9; }
.bl-tegel[data-fout] .bl-stand { color: #B8314F; opacity: 1; font-weight: 700; }
.bl-tegel[data-fout] .bl-mini { box-shadow: 0 0 0 2px #B8314F; }
.bl-tegel[data-stand="gedaan"] .bl-mini { box-shadow: 0 0 0 3px #1E8F5E; }
.bl-balk { height: 6px; border-radius: 3px; background: rgba(82, 98, 240, .18); overflow: hidden; }
.bl-balk i { display: block; height: 100%; background: #5262F0; transition: width 200ms; }
.bl-tegel[data-stand="gedaan"] .bl-balk i { background: #1E8F5E; }
.bl-weg { position: absolute; top: -10px; right: -10px; width: 48px; height: 48px; border: 10px solid transparent; border-radius: 50%;
  background: #262A4D; background-clip: padding-box; color: #fff; font-size: 20px; line-height: 1; font-weight: 800; padding: 0; cursor: pointer; }
.bl-plus { width: 112px; height: 112px; border-radius: 16px; border: 2px dashed #5262F0; background: none; color: #5262F0; font-size: 44px; font-weight: 700; cursor: pointer; }
.bl-schrift { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; padding: 10px 14px; border-radius: 16px;
  border: 1.5px solid var(--ax-rand-sterk, #262A4D); background: #fff; color: #111; font-family: inherit; margin-bottom: 12px; }
.bl-rij { display: flex; gap: 10px; }
.bl-rij .pl-k { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bl-rij .pl-k .ic { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .bl-balk i { transition: none; } }