/* Snoeten r285: echte ballonafbeeldingen over het grijze avatar-skeletonvlak heen.
   Zo werken ze ook waar oudere pagina-CSS !important/animaties gebruikt. */
.snoeten-loading-balloon-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: #e1e4e7 !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 5 !important;
    animation: none !important;
    pointer-events: none !important;
}
/* De positie van de skeleton-avatar wordt niet gewijzigd; slechts het invulvlak. */
[data-snoeten-loading-balloon="1"] { position: relative !important; }
/* Soms worden pseudoelementen gebruikt als grijze skeleton-overlay. */
[data-snoeten-loading-balloon="1"]::before,
[data-snoeten-loading-balloon="1"]::after {
    animation: none !important;
}
/* Bij echte avatar-IMG's is de ballon zichtbaar zolang de afbeelding laadt,
   maar de echte foto neemt het vlak over zodra de browser hem decodeert. */
img.snoeten-avatar-loading {
    background-color: #e1e4e7 !important;
    background-image: var(--snoeten-loading-balloon) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
/* Meldingen hebben een apart, met ::after getekend avatar-skeleton. */
#container.notifications-page-shell .notification-skeleton-avatar[data-snoeten-loading-balloon="1"] {
    height: 50px !important;
    min-height: 50px !important;
}
#container.notifications-page-shell .notification-skeleton-avatar[data-snoeten-loading-balloon="1"]::after {
    opacity: 0 !important;
}

/* r283: alleen tijdelijke ballon-profielfoto's grijs.
   Echte foto's blijven in kleur zodra hun laadklasse is verwijderd. */
.snoeten-loading-balloon-image,
img.snoeten-avatar-loading,
.list-profile-skeleton-avatar,
.list-month-skeleton-avatar,
.search-friend-skeleton-avatar,
.alphabet-friend-skeleton-avatar {
    filter: grayscale(100%) !important;
}

/* r285: de tien ballonbestanden hebben nu een werkelijk grijze ondergrond (#e1e4e7), in plaats van een witte. */