/* os-mia.css — de Mia-ingang als axolotl (09-10, team mascotte-os, lid A). Alleen actief met html.mia-merk (os-mia.js);
   noodrem localStorage mia-avatar=uit → de klasse ontbreekt en alles blijft zoals het was. */
html.mia-merk .mia-merk-weg { display: none !important; }
html.mia-merk .mia-merk-av { flex: none; }
/* computer: merk linksboven */
html.mia-merk .topbar .merk.mia-merk-host { padding-left: 2px; }
html.mia-merk .topbar .merk .mia-merk-home { margin: -3px 0; }
/* telefoon-tabbalk en rail: Mia is het icoon van Gesprekken, in het vak (24 px) van de lijniconen ernaast — de eigen kleine
   tekening (component ≥1.3) met haar vaste middentoon-ring, dus geen extra rand nodig op licht of donker.
   Niet actief = grijs en zacht zoals de andere iconen; actief = in kleur, net als de andere tabjes alleen door kleur (geen ring).
   Een stip alleen als het jou aangaat: wacht op jou (oker), fout (rood), offline (grijs). "Bezig" toont geen stip — dat is
   bijna altijd zo en een teal stip liet een niet-actief tabje actief lijken (ronde 2). Staat er al een wacht-teller: geen stip. */
html.mia-merk .op-ic.mia-merk-host { width: 24px; height: 24px; }
html.mia-merk .op-ic.mia-merk-host .mia-merk-tab { border-radius: 50%; box-shadow: none; transition: opacity .18s ease, filter .18s ease; }
html.mia-merk [data-plek="gesprekken"]:not(.on) .mia-merk-tab { filter: grayscale(1) contrast(.85); opacity: .5; }
html.mia-merk[data-thema="avond"] [data-plek="gesprekken"]:not(.on) .mia-merk-tab { filter: grayscale(1) brightness(1.05); opacity: .56; }
html.mia-merk .mia-merk-stip { position: absolute; right: -3px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; display: none;
  box-shadow: 0 0 0 2px var(--grond, var(--n2-bg, #F1F3F3)); pointer-events: none; }
html.mia-merk[data-thema="avond"] .mia-merk-stip { box-shadow: 0 0 0 2px var(--grond, var(--n2-bg, #0E1315)); }
html.mia-merk [data-mia-staat="wacht"] .mia-merk-stip { display: block; background: var(--oker, #E0A33A); }
html.mia-merk [data-mia-staat="fout"] .mia-merk-stip { display: block; background: var(--rood, #D64545); }
html.mia-merk [data-mia-staat="offline"] .mia-merk-stip { display: block; background: #8E8E93; }
html.mia-merk .op-bd:not([hidden]) ~ .mia-merk-stip { display: none !important; }
/* wacht-teller rechtsboven buiten het rondje, niet over kop en kieuwen */
html.mia-merk .os-rail [data-plek="gesprekken"] .op-ic.mia-merk-host .op-bd { top: -8px; right: -14px; left: auto; }
html.mia-merk .os-tabbalk [data-plek="gesprekken"] .op-ic.mia-merk-host .op-bd { top: -7px; left: 17px; }
/* telefoon-Start: de tab draagt Mia's stand al — de begroeting is daar tekst (geen tweede Mia in beeld) */
html.mia-merk .ms-kop .mo-groet-av { display: none; }
html.mia-merk .ms-kop .mo-groet-k { padding: 2px 12px 2px 4px; }
/* donker: de rand van het rondje valt weg op zwart onder ±36 px → een haarlijntje licht */
html.mia-merk[data-thema="avond"] .mia-merk-av:not(.mia-merk-tab) { border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
/* zijbalk nav2: het blauwe vlak met de M wordt Mia in haar water */
html.mia-merk .n2-zb-logo.mia-merk-host { background: none !important; width: auto !important; height: auto !important; border-radius: 50%; }
/* klassieke chatknop en DM-paneel */
html.mia-merk .chatknop.mia-merk-host { background: none; box-shadow: none; padding: 0; }
html.mia-merk .dm-logo.mia-merk-host { background: none; width: auto; height: auto; }
/* DM laden / niet bereikbaar */
html.mia-merk .dm-plek-laden { flex-direction: column; gap: 12px; }
html.mia-merk #dm-fout .mia-merk-fout { display: block; margin: 0 auto 10px; }
@media (prefers-reduced-motion: reduce) { html.mia-merk .op-ic.mia-merk-host .mia-merk-tab { transition: none; } }