/* BBYW OS — nieuwe navigatie (nav2, 08-10-2026). Alles onder html.os-nav2 (os-nav2.js zet die alleen met de vlag).
   Indeling = het goedgekeurde proefmodel (/home/mia/mobiel-nav/proefmodel/); huid = BBYW Design (--md-*) met de
   Strak-tokens als terugval. Telefoon < 760 px: vier tabs, kop per tab, vellen met greep. Computer ≥ 760 px: zijbalk. */

html.os-nav2 {
  --n2-tint: var(--md-tint, var(--teal, #0E6E73));
  --n2-tint-z: var(--md-tint-zacht, var(--teal-z, #E3EFEF));
  --n2-oker: var(--oker, #B9821A);
  --n2-oker-z: color-mix(in srgb, var(--oker, #B9821A) 16%, transparent);
  --n2-oker-i: color-mix(in srgb, var(--oker, #B9821A) 78%, var(--md-label, #1A2124));
  --n2-label: var(--md-label, var(--inkt, #1A2124));
  --n2-label2: var(--md-label-2, var(--inkt2, #566166));
  --n2-label3: var(--md-label-3, var(--inkt3, #8B9599));
  --n2-grond: var(--grond, var(--md-grond, #F3F4F4));
  --n2-vlak: var(--md-vlak, var(--vlak, #fff));
  --n2-vlak2: var(--md-vlak-2, var(--vlak2, #F7F8F8));
  --n2-fill: var(--md-fill, rgba(120,120,128,.12));
  --n2-sep: var(--md-sep, var(--lijn, rgba(20,32,36,.08)));
  --n2-f: var(--md-letter, var(--f, system-ui, sans-serif));
  --n2-rood: var(--md-rood-tekst, #C24A42);
  --n2-groen: var(--md-groen, #34C759);
  --n2-sat: env(safe-area-inset-top, 0px);
  --n2-sab: env(safe-area-inset-bottom, 0px);
  --n2-balk: calc(56px + var(--n2-sab));
  --n2-zb: 224px;
}

/* ── gedeelde bouwstenen ── */
html.os-nav2 .n2-ik { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 22px; color: var(--n2-label); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.os-nav2 .n2-ik svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.os-nav2 .n2-ik:active { background: var(--n2-fill); }
html.os-nav2 .n2-bd { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--n2-tint); color: #fff;
  font: 600 11px/18px var(--n2-f); font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 0 0 2px var(--n2-grond); }
html.os-nav2 .n2-bd[hidden] { display: none; }
html.os-nav2 .n2-bd.n2-oker { background: var(--n2-oker); color: #fff; }
html.os-nav2 .n2-avk { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.os-nav2 .n2-avatar { position: relative; width: 34px; height: 34px; border-radius: 17px; background: var(--n2-tint); color: #fff; display: grid; place-items: center; font: 600 15px/1 var(--n2-f); flex: none; }
html.os-nav2 .n2-avatar.groot { width: 54px; height: 54px; border-radius: 27px; font-size: 22px; }
html.os-nav2 .n2-stip { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 6px; background: var(--n2-label3); box-shadow: 0 0 0 2.5px var(--n2-grond); }
html.os-nav2 .n2-avatar.groot .n2-stip { width: 14px; height: 14px; border-radius: 7px; box-shadow: 0 0 0 3px var(--n2-vlak); }
html.os-nav2 .n2-stip.werkt { background: #3BB59A; }
html.os-nav2 .n2-stip.oker { background: var(--n2-oker); }
html.os-nav2 .n2-stip.rood { background: var(--md-rood, #FF3B30); }
html.os-nav2 .n2-stip.rust { background: var(--n2-groen); }
html.os-nav2 .n2-chev { width: 16px; height: 16px; fill: none; stroke: var(--n2-label3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── de oude ingangen weg: bovenbalk, Meer, rail, indicator, Werk-teller, chatknop, duim ── */
html.os-nav2 #topbar, html.os-nav2 #os-rail, html.os-nav2 .op-meer, html.os-nav2 #duim, html.os-nav2 #btn-chat { display: none !important; }
html.os-nav2 .os-tabbalk [data-plek="meer"], html.os-nav2 .os-tabbalk .op-ind,
html.os-nav2 .os-tabbalk [data-plek="werk"] .op-bd, html.os-nav2 .os-tabbalk [data-plek="werk"] .mg-pstip { display: none !important; }
html.os-nav2 .os-gloed-lijn, html.os-nav2 .mg-lijn { display: none !important; }

/* ═════════════ TELEFOON ═════════════ */
@media (max-width: 759px) {
  /* tabbalk: vier gelijke vakken, icoon 26 + label 11, actief = tint met gevuld vlakje (proefmodel) */
  html.os-nav2 .os-tabbalk { height: var(--n2-balk); padding: 4px 8px var(--n2-sab); display: grid !important; grid-template-columns: repeat(4, 1fr);
    background: var(--n2-grond); border-top: 0; box-shadow: 0 -.5px 0 var(--n2-sep); transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s; }
  html.os-nav2 .os-tabbalk .op-t { padding: 6px 0 4px; gap: 3px; color: var(--n2-label3); font: 500 10.5px/1.1 var(--n2-f); letter-spacing: .01em; }
  html.os-nav2 .os-tabbalk .op-t .op-ic { width: 28px; height: 28px; }
  html.os-nav2 .os-tabbalk .op-t .op-ic svg { width: 26px; height: 26px; stroke-width: 1.6; }
  html.os-nav2 .os-tabbalk .op-t.on { color: var(--n2-tint); font-weight: 600; }
  html.os-nav2 .os-tabbalk .op-t.on .op-ic svg { stroke-width: 1.9; }
  html.os-nav2 .os-tabbalk .op-t.on .op-ic svg .vul { fill: currentColor; fill-opacity: .14; }
  html.os-nav2 .os-tabbalk .op-t .op-ic svg rect, html.os-nav2 .os-tabbalk .op-t .op-ic svg path, html.os-nav2 .os-tabbalk .op-t .op-ic svg circle { transition: fill-opacity .2s; }
  html.os-nav2 .os-tabbalk [data-plek="gesprekken"] .op-bd { top: -5px; right: -12px; background: var(--n2-oker); color: #fff; box-shadow: 0 0 0 2px var(--n2-grond); }
  /* erin (gesprek, Bord, app, subscherm) = vol scherm: de tabbalk schuift weg en is niet aan te tikken */
  html.os-nav2.n2-diep .os-tabbalk, html.os-nav2.op-gesprek .os-tabbalk, html.os-nav2.fs-app .os-tabbalk { transform: translate3d(0,100%,0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s, visibility 0s .32s; }
  html.os-nav2.n2-diep .desktop, html.os-nav2.op-gesprek .desktop { margin-bottom: 0; }

  /* geen bovenbalk meer: de plekken beginnen bovenaan (safe-area), elke tab heeft zijn eigen kop */
  html.os-nav2 .desktop { margin-top: 0 !important; top: 0 !important; }
  html.os-nav2 .dm-plek { inset: 0 0 0 0 !important; }
  html.os-nav2 .dm-plek-vak { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--n2-grond); padding-top: env(safe-area-inset-top) !important; }

  /* Start: eigen kop met grote titel, zoekveld eronder; bel + avatar rechts */
  html.os-nav2 #n2-startkop { position: sticky; top: 0; z-index: 5; background: var(--n2-grond); padding-top: var(--n2-sat); }
  html.os-nav2 .home { padding-top: 0 !important; }
  /* de knoppenrij/pillen van Start zijn weg: lang drukken = bewerken (os-start), wacht op jou = teller op Gesprekken */
  html.os-nav2 .ms-nu, html.os-nav2 .ms-nu-mob, html.os-nav2 .ms-nu-kort, html.os-nav2 .ms-chip-meld, html.os-nav2 .ms-chip-wacht { display: none !important; }
  html.os-nav2:not(.ms-bewerk) .ms-tabs-rechts { display: none !important; }
  html.os-nav2 .ms-vlak { -webkit-mask-image: none !important; mask-image: none !important; padding-top: 4px !important; }
}
html.os-nav2 .n2-kop { color: var(--n2-label); font-family: var(--n2-f); }
html.os-nav2 .n2-kop-r { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; position: relative; transition: height .24s cubic-bezier(.32,.72,0,1); }
html.os-nav2 .n2-kop-r::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .5px; background: var(--n2-sep); opacity: 0; transition: opacity .18s; }
html.os-nav2 .n2-kop.ingeklapt .n2-kop-r { height: 44px; }
html.os-nav2 .n2-kop.ingeklapt .n2-kop-r::after { opacity: 1; }
html.os-nav2 .n2-titel { margin: 0; flex: none; font: 700 32px/1.1 var(--n2-f); letter-spacing: -.024em; color: var(--n2-label); transition: font-size .24s cubic-bezier(.32,.72,0,1); }
html.os-nav2 .n2-kop.ingeklapt .n2-titel { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
html.os-nav2 .n2-kop-rechts { margin-left: auto; display: flex; align-items: center; }
html.os-nav2 .n2-kop-rechts .n2-ik { width: 40px; }
@media (min-width: 760px) { html.os-nav2 #n2-startkop { display: none; } }

/* ═════════════ COMPUTER: zijbalk ═════════════ */
#n2-zij { display: none; }
@media (min-width: 760px) {
  html.os-nav2 { --op-rail: var(--n2-zb); }
  html.os-nav2 .desktop { margin-left: var(--n2-zb) !important; margin-top: 0 !important; top: 0 !important; }
  html.os-nav2 .dm-plek { inset: 0 0 0 0 !important; }
  html.os-nav2 .dm-plek-vak { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
  html.os-nav2 #n2-zij { position: fixed; z-index: 470; left: 0; top: 0; bottom: 0; width: var(--n2-zb); display: flex; flex-direction: column; gap: 2px;
    padding: calc(14px + var(--n2-sat)) 10px 12px; background: var(--md-glas-dik, var(--grond2, #ECEFEF)); box-shadow: inset -.5px 0 0 var(--n2-sep);
    -webkit-backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(var(--md-verzadig, 180%)); backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(var(--md-verzadig, 180%));
    font-family: var(--n2-f); color: var(--n2-label); }
  html.os-nav2 .n2-zb-merk { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; }
  html.os-nav2 .n2-zb-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--n2-tint); color: #fff; display: grid; place-items: center; flex: none; }
  html.os-nav2 .n2-zb-logo svg { width: 20px; height: 20px; }
  html.os-nav2 .n2-zb-naam { min-width: 0; line-height: 1.15; }
  html.os-nav2 .n2-zb-naam b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  html.os-nav2 .n2-zb-naam small { display: block; font-size: 12px; color: var(--n2-label3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.os-nav2 .n2-zb-zoek { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin: 0 0 10px; border: 0; border-radius: 9px; color: var(--n2-label3);
    font: 400 13.5px/1 var(--n2-f); background: var(--n2-fill); cursor: pointer; }
  html.os-nav2 .n2-zb-zoek svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
  html.os-nav2 .n2-zb-zoek span { flex: 1; text-align: left; }
  html.os-nav2 .n2-zb-zoek kbd { font: 11px var(--md-letter-mono, ui-monospace, monospace); color: var(--n2-label3); padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--n2-sep); }
  html.os-nav2 .n2-zb-tab, html.os-nav2 .n2-zb-bel { position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none;
    color: var(--n2-label2); font: 500 14.5px/1 var(--n2-f); text-align: left; cursor: pointer; }
  html.os-nav2 .n2-zb-tab svg, html.os-nav2 .n2-zb-bel svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  html.os-nav2 .n2-zb-tab:hover:not(.on), html.os-nav2 .n2-zb-bel:hover, html.os-nav2 .n2-zb-jij:hover { background: color-mix(in srgb, var(--n2-label) 5%, transparent); color: var(--n2-label); }
  html.os-nav2 .n2-zb-tab.on { background: var(--n2-vlak); color: var(--n2-label); box-shadow: var(--md-schaduw-s, 0 1px 2px rgba(0,0,0,.06)); font-weight: 600; }
  html.os-nav2 .n2-zb-tab.on svg { color: var(--n2-tint); }
  html.os-nav2 .n2-zb-tab.on svg .vul { fill: currentColor; fill-opacity: .14; }
  html.os-nav2 .n2-zb-tab .n2-bd, html.os-nav2 .n2-zb-bel .n2-bd { position: static; margin-left: auto; box-shadow: none; }
  html.os-nav2 .n2-zb-onder { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; box-shadow: 0 -.5px 0 var(--n2-sep); }
  html.os-nav2 .n2-zb-jij { display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 8px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; color: var(--n2-label); font-family: var(--n2-f); }
  html.os-nav2 .n2-zb-jij .n2-avatar { width: 32px; height: 32px; font-size: 14px; }
  html.os-nav2 .n2-zb-jij .n2-stip { box-shadow: 0 0 0 2.5px var(--n2-vlak2); }
  html.os-nav2 .n2-zb-jt { min-width: 0; line-height: 1.2; }
  html.os-nav2 .n2-zb-jt b { display: block; font-size: 14px; font-weight: 600; }
  html.os-nav2 .n2-zb-jt small { display: block; font-size: 12px; color: var(--n2-tint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.os-nav2 .n2-zb-jt small.oker { color: var(--n2-oker-i); }
  html.os-nav2 .n2-zb-jt small.rood { color: var(--n2-rood); }
  html.os-nav2 .n2-zb-jt small.rust { color: var(--n2-label3); }
  html.os-nav2 :is(.n2-zb-tab, .n2-zb-bel, .n2-zb-jij, .n2-zb-zoek):focus-visible { outline: 2px solid var(--n2-tint); outline-offset: -2px; }
  /* tabbalk van de telefoon bestaat op de computer niet */
  html.os-nav2 .os-tabbalk { display: none !important; }
  /* vensters en dock schuiven mee naast de zijbalk */
  html.os-nav2 #windows { position: absolute; inset: 0; }
  html.os-nav2 .dock { margin-left: calc(var(--n2-zb) / 2); }
}
/* tussenmaat 760–1023: alleen iconen (72 px), naam als tooltip */
@media (min-width: 760px) and (max-width: 1023px) {
  html.os-nav2 { --n2-zb: 72px; }
  html.os-nav2 #n2-zij { padding: calc(12px + var(--n2-sat)) 8px 12px; align-items: stretch; }
  html.os-nav2 .n2-zb-naam, html.os-nav2 .n2-zb-l, html.os-nav2 .n2-zb-zoek span, html.os-nav2 .n2-zb-zoek kbd, html.os-nav2 .n2-zb-jt { display: none; }
  html.os-nav2 .n2-zb-merk { justify-content: center; padding: 2px 0 12px; }
  html.os-nav2 .n2-zb-tab, html.os-nav2 .n2-zb-zoek, html.os-nav2 .n2-zb-bel, html.os-nav2 .n2-zb-jij { justify-content: center; padding: 0; }
  html.os-nav2 .n2-zb-tab { height: 44px; }
  html.os-nav2 .n2-zb-tab .n2-bd, html.os-nav2 .n2-zb-bel .n2-bd { position: absolute; top: 3px; right: 6px; margin: 0; box-shadow: 0 0 0 2px var(--n2-vlak2); }
}
@media (min-width: 1024px) and (max-width: 1279px) { html.os-nav2 { --n2-zb: 200px; } }

/* ═════════════ VELLEN ═════════════ */
.n2-vellaag { position: fixed; inset: 0; z-index: 9300; }
.n2-vellaag .n2-dim { position: absolute; inset: 0; background: var(--md-dimlaag, rgba(14,22,25,.32)); opacity: 0; }
.n2-vel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; will-change: transform;
  background: var(--md-grond, var(--grond2, #F2F2F7)); color: var(--n2-label, #1d1d1f); font-family: var(--n2-f, system-ui);
  border-radius: var(--md-r-vel, 14px) var(--md-r-vel, 14px) 0 0; box-shadow: 0 -.5px 0 var(--n2-sep), 0 -16px 40px -12px rgba(0,0,0,.28); }
.n2-grip { flex: none; height: 22px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.n2-grip i { width: 38px; height: 5px; border-radius: 3px; background: var(--md-label-3, rgba(20,32,36,.2)); }
.n2-velkop { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 8px 20px; touch-action: none; }
.n2-velkop h2 { flex: 1; margin: 0; font: 700 22px/1.2 var(--n2-f, system-ui); letter-spacing: -.016em; }
.n2-sluit { width: 30px; height: 30px; border: 0; border-radius: 15px; background: var(--n2-fill, rgba(120,120,128,.12)); display: grid; place-items: center; color: var(--n2-label2); cursor: pointer; }
.n2-sluit svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.n2-velinh { flex: 1; position: relative; overflow: hidden; background: inherit; }
.n2-velpag { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: inherit; will-change: transform; -webkit-overflow-scrolling: touch; }
.n2-vellaag.n2-desk .n2-vel { left: calc(var(--n2-zb, 224px) + 8px); right: auto; top: auto; bottom: 8px; width: min(400px, calc(100vw - var(--n2-zb, 224px) - 24px)); height: min(760px, calc(100vh - 16px)) !important;
  transform: none; border-radius: 16px; box-shadow: 0 0 0 .5px var(--n2-sep), var(--md-schaduw-l, 0 24px 60px -20px rgba(0,0,0,.35)); }
.n2-vellaag.n2-desk .n2-grip { display: none; }
.n2-vellaag.n2-desk .n2-velkop { padding: 14px 12px 10px 20px; }
.n2-vellaag.n2-desk .n2-dim { background: rgba(0,0,0,.08); }
html[data-thema="avond"] .n2-vellaag.n2-desk .n2-dim { background: rgba(0,0,0,.3); }
.n2-subterug { display: flex; align-items: center; color: var(--n2-tint); font: 500 17px/1 var(--n2-f); height: 36px; margin: -4px 0 4px 6px; border: 0; background: none; cursor: pointer; }
.n2-subterug svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.n2-subtitel { margin: 0 20px 14px; font: 700 24px/1.2 var(--n2-f); letter-spacing: -.02em; }

/* lijstgroepen (iOS-instellingen) */
.n2-lijstgroep { margin: 0 16px 20px; background: var(--n2-vlak, #fff); border-radius: 12px; overflow: hidden; }
.n2-lgk { margin: 0 32px 6px; font: 500 13px/1.3 var(--n2-f); color: var(--n2-label2); }
.n2-lr { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; width: 100%; text-align: left; position: relative; border: 0; background: none;
  color: var(--n2-label); font: 400 16px/1.25 var(--n2-f); cursor: pointer; -webkit-tap-highlight-color: transparent; }
div.n2-lr { cursor: default; }
.n2-lr + .n2-lr::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: .5px; background: var(--n2-sep); }
button.n2-lr:active { background: var(--n2-fill); }
.n2-li { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.n2-li svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.n2-lt { flex: 1; min-width: 0; }
.n2-lr em { font-style: normal; font-size: 15px; color: var(--n2-label3); }
.n2-rood { color: var(--n2-rood); }
.n2-miniseg { display: flex; background: var(--n2-fill); border-radius: 9px; padding: 2px; flex: none; }
.n2-miniseg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: 500 13px/1 var(--n2-f); color: var(--n2-label2); cursor: pointer; }
.n2-miniseg button.on { background: var(--md-seg-aan, #fff); color: var(--n2-label); box-shadow: 0 1px 2px rgba(0,0,0,.14); font-weight: 600; }
.n2-profiel { display: flex; align-items: center; gap: 14px; margin: 4px 16px 20px; padding: 14px; background: var(--n2-vlak, #fff); border-radius: 12px; }
.n2-profiel b { display: block; font: 600 19px/1.2 var(--n2-f); }
.n2-profiel .n2-stand { display: flex; align-items: center; gap: 6px; font: 500 14px/1.3 var(--n2-f); color: var(--n2-tint); margin-top: 2px; }
.n2-profiel .n2-stand.oker { color: var(--n2-oker-i); }
.n2-profiel .n2-stand.rood { color: var(--n2-rood); }
.n2-profiel .n2-stand.rust { color: var(--n2-label2); }
.n2-profiel .n2-org { display: block; font: 400 13px/1.3 var(--n2-f); color: var(--n2-label3); margin-top: 2px; }

/* actievel (uitloggen) */
.n2-actievel { position: fixed; inset: 0; z-index: 9400; }
.n2-actievel .n2-dim { position: absolute; inset: 0; background: var(--md-dimlaag, rgba(0,0,0,.28)); opacity: 1; }
.n2-av-blok { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0 auto;
  animation: n2-op .3s cubic-bezier(.32,.72,0,1) both; font-family: var(--n2-f, system-ui); }
.n2-av-groep { background: var(--md-vlak, #fff); border-radius: 14px; overflow: hidden; }
.n2-av-groep p { margin: 0; padding: 14px 16px; text-align: center; font-size: 13px; color: var(--n2-label2); border-bottom: .5px solid var(--n2-sep); }
.n2-av-groep button { display: block; width: 100%; height: 56px; border: 0; background: none; font: 400 19px/1 var(--n2-f, system-ui); color: var(--n2-tint); cursor: pointer; }
.n2-av-groep button.n2-av-rood { color: var(--n2-rood); }
@keyframes n2-op { from { transform: translateY(110%); } to { transform: none; } }

/* meldingen (strak-qol .qn) als vel op de telefoon, als paneel naast de zijbalk op de computer */
@media (max-width: 759px) {
  html.os-nav2 .qol .qn { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-height: 88dvh;
    border-radius: var(--md-r-vel, 14px) var(--md-r-vel, 14px) 0 0 !important; padding-top: 20px; padding-bottom: env(safe-area-inset-bottom); }
  html.os-nav2 .qol .qn::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--md-label-3, rgba(20,32,36,.2)); }
  html.os-nav2 .qol .q-scrim-leeg:has(.qn) { background: var(--md-dimlaag, rgba(14,22,25,.32)); }
}
@media (min-width: 760px) {
  html.os-nav2 .qol .qn { left: calc(var(--n2-zb) + 8px) !important; right: auto !important; top: auto !important; bottom: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.os-nav2 .os-tabbalk, html.os-nav2 .n2-kop-r, html.os-nav2 .n2-titel { transition: none !important; }
  .n2-av-blok { animation: none; }
}
/* statusknop (os-balk) in de zijbalk */
@media (min-width: 760px) {
  html.os-nav2 #n2-zij .st-plek.n2-st { position: relative; display: flex; margin: 0 0 4px; }
  html.os-nav2 #n2-zij .st-plek.n2-st > button, html.os-nav2 #n2-zij .st-plek.n2-st .st-knop { width: 100%; justify-content: flex-start; height: 38px; padding: 0 10px; border-radius: 9px; }
}
/* Start: werkbladen als stippen naast de grote titel; de tabsrij alleen in de bewerkstand; tegel BBYW DM weg (de DM = Gesprekken/Borden/Werk) */
html.os-nav2 .n2-wb { display: inline-flex; align-items: center; gap: 6px; color: var(--n2-label3); font: 500 13px/1 var(--n2-f); min-width: 0; }
html.os-nav2 .n2-kop.ingeklapt .n2-wb-n { display: none; }
html.os-nav2 .n2-wb[hidden] { display: none; }
html.os-nav2 .n2-wb-st { display: inline-flex; gap: 2px; }
html.os-nav2 .n2-wb-st button { width: 16px; height: 22px; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
html.os-nav2 .n2-wb-st button::after { content: ''; width: 7px; height: 7px; border-radius: 4px; background: var(--n2-label3); opacity: .45; transition: opacity .2s, transform .2s; }
html.os-nav2 .n2-wb-st button.on::after { opacity: 1; background: var(--n2-label); transform: scale(1.1); }
@media (max-width: 759px) {
  html.os-nav2:not(.ms-bewerk) .ms-tabsrij { display: none !important; }
}
html.os-nav2 .ms-item:has(> .app-tile[data-app="mia-dm"]), html.os-nav2 .ms-item:has(.app-tile[data-app="mia-dm"]) { display: none !important; }
/* één "wacht op jou": in de tabbalk alleen de teller op Gesprekken; BBYW's stand staat als stip op de avatar */
html.os-nav2 .os-tabbalk .mg-pstip, html.os-nav2 .os-tabbalk [data-plek]:not([data-plek="gesprekken"]) .op-bd { display: none !important; }
/* apps op de telefoon: vol scherm met één rustige balk — ‹ terug · icoon + naam; de gereedschapsknoppen van het venster wijken */
@media (max-width: 759px) {
  html.os-nav2 .window .window-bar { height: calc(44px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 12px 0 4px !important; display: flex !important; align-items: center; gap: 6px;
    background: var(--n2-grond) !important; border-bottom: 0 !important; box-shadow: 0 .5px 0 var(--n2-sep) !important; }
  html.os-nav2 .window .window-bar .back { display: grid !important; place-items: center; width: 40px; height: 44px; border: 0; background: none; color: var(--n2-tint); padding: 0; }
  html.os-nav2 .window .window-bar .back svg { width: 26px; height: 26px; }
  html.os-nav2 .window .window-bar .back svg path { stroke-width: 2.2; }
  html.os-nav2 .window .window-bar .win-naam { display: flex !important; align-items: center; gap: 8px; min-width: 0; flex: 1; }
  html.os-nav2 .window .window-bar .window-dot { display: none !important; }
  html.os-nav2 .window .window-bar .win-ico { display: block !important; width: 26px; height: 26px; flex: none; }
  html.os-nav2 .window .window-bar .win-ico .dock-ico { width: 26px; height: 26px; border-radius: 7px; }
  html.os-nav2 .window .window-bar .window-title { font: 600 17px/1.2 var(--n2-f) !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--n2-label) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.os-nav2 .window .window-bar .window-btns, html.os-nav2 .window .window-bar .win-lichten, html.os-nav2 .window .window-bar [class*="taak"], html.os-nav2 .window .window-bar .mt-knop { display: none !important; }
}
/* 09-10 (Daan): op de telefoon heeft de oude app-balk (dock) geen plek meer — de vier tabs vervangen hem en open apps staan op Start.
   Hij bleef als zwevend app-icoon boven het typvak van een gesprek hangen; daarom op de telefoon helemaal weg. */
@media (max-width: 759px) {
  html.os-nav2 .dock, html.os-nav2 #dock { display: none !important; }
}

/* navkaart 09-10 · App bouwen (#mia-panel) op de telefoon: een echt vel van onderen (was een doorschijnend zwevend
   kaartje half over de app-tegels, boven de tabbalk). Sluiten: ✕ of terug (de stap zet os-nav2.js). */
@media (max-width: 759px) {
  html.os-nav2 #mia-panel:not(.hidden) { left: 0; right: 0; bottom: 0; width: auto; z-index: 9300; border: 0;
    max-height: calc(100dvh - var(--n2-sat, 0px) - 40px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--md-grond, var(--grond2, #F2F2F7)) !important;
    border-radius: var(--md-r-vel, 14px) var(--md-r-vel, 14px) 0 0;
    box-shadow: 0 -.5px 0 var(--n2-sep), 0 -16px 40px -12px rgba(0, 0, 0, .28), 0 0 0 100vmax rgba(0, 0, 0, .28);
    animation: n2-bouw-op .34s cubic-bezier(.2, .9, .25, 1); }
  html.os-nav2 #mia-panel .mia-panel-bar { position: sticky; top: 0; z-index: 1; background: inherit; }
}
@keyframes n2-bouw-op { from { transform: translate3d(0, 40%, 0); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { html.os-nav2 #mia-panel:not(.hidden) { animation: none; } }

/* navkaart 09-10 · App bouwen op de computer: dicht vlak (de app-tegels schenen door het kaartje heen) */
@media (min-width: 760px) {
  #mia-panel:not(.hidden) { background: var(--md-vlak, #fff) !important; }
}