/* BBYW OS — één schil (OS×DM fase 3, 08-10-2026): rail (desktop) / tabbalk (telefoon) + de DM-plek.
   Alles onder html.os-plekken (os-plekken.js zet die alleen als de DM-module er is en de gebruiker BBYW DM heeft).
   Stijl = de huidige Strak-schil: tokens uit os-strak.css, Switzer/Satoshi, zachte randen, status als stip/pil. */

.os-rail, .os-tabbalk { display: none; }

/* ── desktop: rail links onder de bovenbalk ── */
@media (min-width: 760px) {
  html.os-plekken { --op-rail: 84px; }
  html.os-plekken .os-rail {
    position: fixed; left: 0; top: var(--op-top, 74px); bottom: 0; z-index: 40; width: var(--op-rail);
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 16px;
  }
  html.os-plekken .desktop { margin-left: var(--op-rail); }
  html.os-plekken .op-k {
    position: relative; width: 68px; min-height: 62px; padding: 8px 2px 7px; border: 0; border-radius: var(--r2);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: transparent; color: var(--inkt2); font: 500 11.5px/1.15 var(--f); letter-spacing: 0; cursor: pointer;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  html.os-plekken .op-k:hover { background: var(--vlak); color: var(--inkt); }
  html.os-plekken .op-k.on { background: var(--vlak); color: var(--teal); box-shadow: var(--sh-s); }
  html.os-plekken .op-k:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  html.os-plekken .op-k:active { transform: scale(.97); }
  html.os-plekken .op-scheid { display: block; width: 36px; height: 1px; margin: 6px 0; background: var(--lijn2); }
  /* de oude ingangen: Gesprekken staat in de rail */
  html.os-plekken #btn-chat, html.os-plekken #dm-panel { display: none !important; }
  html.os-plekken .op-zoek { display: none !important; }
}
.os-rail .op-ic, .os-tabbalk .op-ic { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.os-rail .op-ic svg, .os-tabbalk .op-ic svg, .op-meer .op-ic svg, .op-zoek svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.os-rail .op-bd, .os-tabbalk .op-bd {
  position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--teal); color: #fff; font: 600 11px/18px var(--f); font-variant-numeric: tabular-nums; text-align: center;
  box-shadow: 0 0 0 2px var(--grond);
}
/* "wacht op jou" (polish 08-10: de Inbox woont in Gesprekken) — oker, zoals de wacht-stip overal */
.os-rail [data-plek="gesprekken"] .op-bd, .os-tabbalk [data-plek="gesprekken"] .op-bd { background: var(--oker); color: #1A2124; }
.os-rail .op-bd[hidden], .os-tabbalk .op-bd[hidden] { display: none; }

/* ── de DM-plek: de ene DM-module schermvullend naast de rail ── */
.dm-plek { position: absolute; inset: 6px 12px 12px 4px; z-index: 6; display: flex; }
.dm-plek[hidden] { display: none; }
.dm-plek-vak {
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: var(--r3); background: var(--vlak2); border: 1px solid var(--lijn); box-shadow: var(--sh-m);
}
.dm-plek-vak > .mia-dm-vak { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-plek-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--inkt2); font: 500 14px var(--f); pointer-events: none; }
.dm-plek-laden[hidden] { display: none; }
html.os-plekken.op-dm .home { visibility: hidden; }
html.os-plekken.op-dm .dock:empty { display: none; }
/* het model staat één keer: in een gesprek de modelkeuze van dat gesprek (DM-kop), niet ook de OS-pil */
html.os-plekken.op-dm #topbar-model { display: none !important; }

/* ── telefoon: één tabbalk onderaan; zoeken = knop in de bovenbalk ── */
@media (max-width: 759px) {
  html.os-plekken { --op-balk: calc(62px + env(safe-area-inset-bottom)); }
  html.os-plekken .os-tabbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 480; height: var(--op-balk);
    display: flex; align-items: stretch; padding: 0 4px env(safe-area-inset-bottom);
    background: var(--vlak); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px -14px rgba(0,0,0,.25);
  }
  html.os-plekken .op-t {
    position: relative; flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 7px 0 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--inkt3); font: 500 11px/1.1 var(--f); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html.os-plekken .op-t.on { color: var(--teal); font-weight: 600; }
  html.os-plekken .op-t:active .op-ic { transform: scale(.92); }
  html.os-plekken .op-t .op-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.os-plekken .duim, html.os-plekken #btn-chat, html.os-plekken #dm-panel { display: none !important; }
  html.os-plekken .home { padding-bottom: calc(var(--op-balk) + 24px); }
  html.os-plekken .desktop { margin-bottom: var(--op-balk); }
  /* 08-10: met de tabbalk eindigt het startvlak al boven de balk (.home houdt die ruimte vrij). De vervaging uit S13
     (gemaakt voor de oude zwevende zoekbalk, ±126 px) sneed de tweede rij apps halverwege af: nu alleen de laatste 20 px. */
  /* Boven idem: apps schoven hard afgesneden onder de knoppenrij (Start · + · ? · raster · potlood) door.
     Nu een zachte rand van 22 px; de 22 px bovenmarge houdt de eerste rij in rust volledig scherp. */
  html.os-plekken .ms-vlak { padding-top: 22px; padding-bottom: 28px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 20px), transparent 100%); }
  html.os-plekken.ms-bewerk .ms-vlak { -webkit-mask-image: none; mask-image: none; }
  html.os-plekken .op-zoek { display: grid; }
  html.os-plekken .dm-plek { inset: 4px 0 0 0; }
  html.os-plekken .dm-plek-vak { border-radius: var(--r3) var(--r3) 0 0; border-bottom: 0; box-shadow: none; }
  /* open gesprek: één balk — de DM-kop (terug · titel · Bord · ⋯); de OS-bovenbalk wijkt */
  html.os-plekken.op-gesprek .topbar { display: none; }
  html.os-plekken.op-gesprek .dm-plek { inset: 0; }
  html.os-plekken.op-gesprek .dm-plek-vak { border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); }
  /* een app schermvullend (fs-app): die heeft zijn eigen terugknop, de tabbalk wijkt */
  html.os-plekken.fs-app .os-tabbalk { display: none; }
  html.os-plekken.fs-app .desktop { margin-bottom: 0; }
}

/* ── Meer: zelfde vorm als het Meldingen-paneel (strak-qol .qn) — kop + sluitknop, groepskopjes, rijen met pictogramvak.
   Telefoon: vel van onderen; desktop: zwevend paneel naast de rail-knop. ── */
.op-meer { position: fixed; inset: 0; z-index: 9200; }
.op-meer-scrim { position: absolute; inset: 0; background: rgba(10,16,18,.32); animation: op-in .18s ease both; }
.op-meer-vel {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 82dvh; overflow: hidden;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  background: var(--vlak); border-radius: var(--r3) var(--r3) 0 0; box-shadow: var(--sh-l); color: var(--inkt); font-family: var(--f);
  animation: op-op .26s cubic-bezier(.32,.72,0,1) both;
}
.op-meer-greep { width: 36px; height: 5px; margin: 2px auto 4px; border-radius: 3px; background: var(--lijn2); flex: none; }
.op-meer-kop { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px 16px; border-bottom: 1px solid var(--lijn); flex: none; }
.op-meer-kop h2 { flex: 1; margin: 0; font: 600 15px var(--f); color: var(--inkt); }
.op-meer-x {
  width: 32px; height: 32px; border: 0; border-radius: var(--r1); background: none; color: var(--inkt3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.op-meer-x:hover { background: var(--vlak2); color: var(--inkt); }
.op-meer-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.op-meer-lijst { overflow: auto; padding: 0 8px 4px; overscroll-behavior: contain; scrollbar-width: thin; }
.op-meer-groep { font: 600 11px var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt3); padding: 12px 8px 6px; }
.op-meer-r {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r2);
  background: none; color: var(--inkt); font-family: var(--f); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease;
}
.op-meer-r + .op-meer-r::before { content: ""; position: absolute; left: 52px; right: 8px; top: 0; height: 1px; background: var(--lijn); }
.op-meer-r:hover, .op-meer-r:focus-visible { background: var(--vlak2); outline: none; }
.op-meer-r:hover::before, .op-meer-r:hover + .op-meer-r::before, .op-meer-r.on::before, .op-meer-r.on + .op-meer-r::before { opacity: 0; }
.op-meer-r:active { background: var(--vlak2); }
.op-meer-r .op-ic {
  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r1); background: var(--vlak2); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt2);
}
.op-meer .op-meer-r .op-ic svg { width: 17px; height: 17px; }
.op-meer-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-meer-b b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-meer-b span { font-size: 12.5px; color: var(--inkt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* waar je nu bent: teal, zoals de actieve knop in de rail */
.op-meer-r.on { background: var(--vlak2); }
.op-meer-r.on .op-ic { background: var(--teal-z); box-shadow: none; color: var(--teal); }
.op-meer-r.on b { color: var(--teal); }
/* desktop: zwevend paneel naast de rail-knop (zoals Meldingen: geen rand, alleen schaduw) */
.op-meer.zwevend .op-meer-scrim { background: transparent; animation: none; }
.op-meer.zwevend .op-meer-vel { position: fixed; right: auto; bottom: auto; width: 300px; max-height: calc(100vh - 24px); padding: 0 0 4px; border-radius: var(--r3); animation: op-zweef .16s cubic-bezier(.16,1,.3,1) both; }
.op-meer.zwevend .op-meer-greep { display: none; }
.op-meer.zwevend .op-meer-kop { padding: 12px 8px 12px 16px; }
@media (max-width: 759px) { .op-meer-r { padding: 12px 8px; } .op-meer-b b { font-size: 14px; } .op-meer-b span { font-size: 13px; } }
@keyframes op-zweef { from { opacity: 0; transform: translateX(-6px); } }
@keyframes op-in { from { opacity: 0; } }
@keyframes op-op { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .op-meer-scrim, .op-meer-vel { animation: none; } .op-k, .op-t { transition: none; } }

/* ── Vegen en wisselen tussen de plekken (telefoon) — OS×DM polish 08-10 ──
   os-plekken.js zet alleen transform/opacity (inline, per beeldje); hier staan de lagen en de rustige vormen. */
/* een draaiende DM blijft buiten beeld in de opmaak (klaar voor de eerste veeg), onzichtbaar en ontastbaar */
/* Buiten beeld geschoven, niet alleen onzichtbaar: de DM-host zet met :host{all:initial} zijn zichtbaarheid én
   aanraakbaarheid zelf terug, dus visibility/pointer-events alleen zou Start onder een onzichtbare DM laten liggen. */
.dm-plek.op-rust { visibility: hidden; opacity: 0; pointer-events: none; transform: translate3d(110%,0,0); }
.dm-plek.op-rust.op-buur { visibility: visible; opacity: 1; }
html.os-plekken.op-dm .home.op-buur { visibility: visible; }
.op-buur { pointer-events: none; }
.os-tabbalk .op-ind { display: none; }
@media (max-width: 759px) {
  /* de pil achter het pictogram van de plek; loopt met de vinger mee */
  html.os-plekken .os-tabbalk .op-ind {
    display: block; position: absolute; left: 0; top: 4px; width: 56px; height: 30px; border-radius: 15px;
    background: var(--teal-z); opacity: 0; pointer-events: none; will-change: transform;
  }
  html.os-plekken .os-tabbalk .op-ind.klaar { opacity: 1; transition: opacity .2s ease; }
  html.os-plekken .op-t { z-index: 1; transition: color .16s ease; }
  html.os-plekken .op-t .op-ic { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  html.os-plekken .home, html.os-plekken .dm-plek { backface-visibility: hidden; }
}
/* lichte voorvertoning van een plek die nog niet klaarstaat: kop + rustige vlakken in de vorm van die plek */
.op-spook {
  position: absolute; inset: 4px 0 0 0; z-index: 7; pointer-events: none; overflow: hidden;
  background: var(--vlak2); border-radius: var(--r3) var(--r3) 0 0; border: 1px solid var(--lijn); border-bottom: 0;
  padding: 16px 16px 0; color: var(--inkt); font-family: var(--f); will-change: transform;
}
.op-spook-kop { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 14px; color: var(--teal); }
.op-spook-kop b { font: 600 17px/1 var(--f); color: var(--inkt); letter-spacing: -.01em; }
.op-spook .op-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.op-spook-rijen i { display: block; height: 58px; margin-bottom: 8px; border-radius: var(--r2); background: var(--vlak); border: 1px solid var(--lijn); }
.op-spook-rijen i:nth-child(2n) { opacity: .8; } .op-spook-rijen i:nth-child(n+4) { opacity: .55; }
.op-spook-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-spook-raster i { display: block; height: 128px; border-radius: var(--r2); background: var(--vlak); border: 1px solid var(--lijn); }
@media (prefers-reduced-motion: reduce) { html.os-plekken .os-tabbalk .op-ind { transition: none !important; } }

/* brein 08-10: de plek Brein staat alleen in de rail als de DM hem heeft */
.os-rail [data-plek][hidden], .os-tabbalk [data-plek][hidden] { display:none !important; }

/* ── tabbalk netjes (08-10, Daan: "slordig en sloppy") ─────────────────────────────────────────────────────────────
   Wat er mis was: (1) de BBYW-gloed legde onderin een groene waas over de balk, waardoor balk en strook eronder
   modderig in elkaar liepen; (2) onder de knoppen bleef een lege band van de volle iOS-veilige zone over;
   (3) grijze labels (inkt3) met te weinig contrast, de badge-rand had de kleur van de achtergrond i.p.v. de balk;
   (4) pictogrammen hingen los in de knop (verticaal gecentreerd) en de pil stond er niet precies achter.
   Nu: een strakke, lichte balk met haarlijn, vaste maat (pictogram 8 px van boven, pil er exact achter),
   leesbare labels, de veilige zone 6 px ingekort (de thuisbalk van iOS staat er al ruim onder). */
@media (max-width: 759px) {
  html.os-plekken { --op-veilig: max(0px, calc(env(safe-area-inset-bottom) - 6px)); --op-balk: calc(56px + var(--op-veilig)); }
  html.os-plekken .os-tabbalk {
    padding: 0 6px var(--op-veilig);
    background: color-mix(in srgb, var(--vlak) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
    border-top: 1px solid var(--lijn); box-shadow: none;
  }
  html.os-plekken .op-t {
    justify-content: flex-start; padding: 8px 0 0; gap: 4px;
    color: var(--inkt2); font: 500 11px/1.1 var(--f); letter-spacing: .005em;
  }
  html.os-plekken .op-t.on { color: var(--teal); font-weight: 600; }
  html.os-plekken .os-tabbalk .op-ic svg { stroke-width: 1.7; }
  html.os-plekken .os-tabbalk .op-t.on .op-ic svg { stroke-width: 2; }
  html.os-plekken .os-tabbalk .op-ind { top: 5px; height: 30px; border-radius: 15px; }
  /* tellers: klein, op de rechterbovenhoek van het pictogram (niet eroverheen) */
  html.os-plekken .os-tabbalk .op-bd { top: -4px; right: auto; left: 15px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    font: 650 10px/16px var(--f); box-shadow: 0 0 0 2px var(--vlak); }
  /* de BBYW-gloed (08-10): geen rand of waas meer; de stand staat op de plek Werk en als lijn onder de bovenbalk (os-gloed.css) */
}