/* Zero Slack OS · Strak — os-gloed.css (04-10, herzien 08-10): één algemene stand van Zero Slack.
   08-10 (Daan: "rommelig, ligt half over dingen heen"): geen laag meer over het scherm. De stand woont in de chrome zelf,
   in de Strak-taal (haarlijnen, kleine stippen met een zachte ring, geen waas):
     1. statuslijn: 2 px op de onderrand van de bovenbalk (bezig = een rustig glijdend stukje, klaar/aandacht = vaste lijn)
     2. de plek Werk in de zijbalk/tabbalk: teller als er iets loopt, stip als er iets klaar is of aandacht vraagt (os-plekken)
     3. zonder vaste plekken (noodrem): chip in de bovenbalk + stip op de Zero Slack DM-knop. */
html[data-mia-stand="geel"] { --mg: var(--oker, #B9821A); }
html[data-mia-stand="groen"] { --mg: var(--groen, #2F8A5B); }
html[data-mia-stand="rood"] { --mg: var(--warn, #C24A42); }

/* 1 · statuslijn op de onderrand van de bovenbalk (binnen de afgeronde hoeken, nooit over inhoud) */
.mg-lijn { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  /* zachte uiteinden: de lijn en het glijdende stukje lopen in- en uit het niets i.p.v. hard afgeknipt bij de rand (Daan 08-10) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.mg-lijn::before { content: ''; position: absolute; inset: 0; background: var(--mg, transparent); border-radius: inherit; }
html[data-mia-stand="geel"] .mg-lijn { opacity: 1; }
html[data-mia-stand="geel"] .mg-lijn::before { right: auto; width: 28%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mg) 70%, transparent), transparent); animation: mgGlij 3.4s cubic-bezier(.45,0,.55,1) infinite; will-change: transform; }
html[data-mia-stand="groen"] .mg-lijn { opacity: .55; }
html[data-mia-stand="rood"] .mg-lijn { opacity: .7; }
/* volledig buiten beeld beginnen én eindigen (stuk = 28% breed → 100/28 = 357%), daarna een korte adempauze zodat de herhaling niet aan elkaar plakt */
@keyframes mgGlij { 0% { transform: translateX(-100%); } 82%, 100% { transform: translateX(357.2%); } }

/* 2 · plek Werk (zijbalk + tabbalk): stip bij klaar/aandacht; de teller bij lopend werk zet os-plekken.js */
.op-ic .mg-pstip { position: absolute; top: -3px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mg, transparent); box-shadow: 0 0 0 2px var(--grond, #F3F4F4); pointer-events: none; }
.op-ic .mg-pstip[hidden] { display: none; }
.os-rail [data-plek="werk"] .op-bd, .os-tabbalk [data-plek="werk"] .op-bd { animation: mgAdem 2.4s ease-in-out infinite; }
@keyframes mgAdem { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* 3a · chip in de bovenbalk — alleen zonder vaste plekken (daar draagt Werk de stand) */
.mg-chip[hidden], html.os-plekken .mg-chip { display: none !important; }
.mg-stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mg, var(--inkt3, #8B9599)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg, transparent) 16%, transparent); }
html[data-mia-stand="geel"] .mg-stip { animation: mgAdem 2.4s ease-in-out infinite; }
.mg-tx { font-variant-numeric: tabular-nums; }
html[data-mia-stand="rood"] .topbar .mg-chip { color: var(--warn); }
@media (max-width: 759px) { .topbar .mg-chip { display: none; } }   /* telefoon: rust in de bovenbalk, de lijn zegt genoeg */

/* 3b · stip op de Zero Slack DM-knop (geen halo meer) */
#btn-chat[data-mia-stand="geel"]::after, #btn-chat[data-mia-stand="groen"]::after, #btn-chat[data-mia-stand="rood"]::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mg); box-shadow: 0 0 0 2px var(--grond, #F3F4F4); pointer-events: none;
}
#btn-chat[data-mia-stand="geel"]::after { animation: mgAdem 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html[data-mia-stand] .mg-lijn::before { animation: none !important; width: 100%; background: color-mix(in srgb, var(--mg) 45%, transparent); }
  html[data-mia-stand] .mg-stip, .os-rail .op-bd, .os-tabbalk .op-bd, #btn-chat::after { animation: none !important; }
}