/* Mia OS · Strak — os-gloed.css (04-10): één algemene stand van Mia als zachte gloed.
   Subtiel: lage dekking, alleen aan de rand, nooit over inhoud heen klikbaar. */
:root { --mg-geel: #E0A33A; --mg-groen: #2F9E62; --mg-rood: #D2483D; }
html[data-mia-stand="geel"] { --mg: var(--mg-geel); }
html[data-mia-stand="groen"] { --mg: var(--mg-groen); }
html[data-mia-stand="rood"] { --mg: var(--mg-rood); }

/* schermrand */
.mg-laag { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.mg-laag::before, .mg-laag::after { content: ''; position: absolute; inset: 0; }
.mg-laag::before { box-shadow: inset 0 0 70px -28px var(--mg, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mg, transparent) 22%, transparent); }
.mg-laag::after { background: radial-gradient(120% 55% at 50% 118%, color-mix(in srgb, var(--mg, transparent) 22%, transparent), transparent 62%); }
html[data-mia-stand="geel"] .mg-laag { opacity: .75; animation: mgAdem 3.6s ease-in-out infinite; }
html[data-mia-stand="groen"] .mg-laag { opacity: .8; }
html[data-mia-stand="rood"] .mg-laag { opacity: .9; animation: mgPuls 2.2s ease-in-out infinite; }
html[data-thema="avond"] .mg-laag::after { background: radial-gradient(120% 55% at 50% 118%, color-mix(in srgb, var(--mg, transparent) 30%, transparent), transparent 62%); }
@keyframes mgAdem { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes mgPuls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ring om de Mia DM-knop */
#btn-chat[data-mia-stand="geel"], #btn-chat[data-mia-stand="groen"], #btn-chat[data-mia-stand="rood"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg) 75%, transparent), 0 0 22px 2px color-mix(in srgb, var(--mg) 45%, transparent), var(--sh-m, 0 6px 16px rgba(0,0,0,.18)) !important;
  transition: box-shadow .5s ease;
}

/* chip in de bovenbalk */
.mg-chip { gap: 7px; }
.mg-chip[hidden] { display: none !important; }
.mg-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--mg, var(--inkt3, #8B9599)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg, transparent) 22%, transparent); flex: none; }
html[data-mia-stand="geel"] .mg-stip { animation: mgStip 1.6s ease-in-out infinite; }
@keyframes mgStip { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
.mg-tx { font-size: 13px; font-weight: 500; white-space: nowrap; }
html[data-mia-stand="rood"] .mg-chip { color: var(--mg-rood); border-color: color-mix(in srgb, var(--mg-rood) 40%, transparent); }
html[data-mia-stand="groen"] .mg-chip { color: var(--mg-groen); border-color: color-mix(in srgb, var(--mg-groen) 40%, transparent); }
@media (max-width: 600px) { .mg-chip { padding: 0 9px; } .mg-chip .mg-tx { display: none; } .mg-stip { width: 10px; height: 10px; } }

@media (prefers-reduced-motion: reduce) {
  html[data-mia-stand] .mg-laag, html[data-mia-stand] .mg-stip { animation: none !important; }
}