/* Fine cream dividers keep real faces legible at conversation-avatar sizes. */
.crab-h5 .group-avatar { position:relative; display:block; box-sizing:border-box; flex:none; width:var(--group-avatar-size,44px); height:var(--group-avatar-size,44px); overflow:hidden; border:1px solid #201C2224; border-radius:50%; background:#F6EBD6; color:#82796B; isolation:isolate; }
.crab-h5 .group-avatar-mosaic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:1px; width:100%; height:100%; background:#FFFCF7; }
.crab-h5 .group-avatar-tile { min-width:0; min-height:0; overflow:hidden; background:#F6EBD6; }
.crab-h5 .group-avatar-image,.crab-h5 .group-avatar-custom { display:block; width:100%; height:100%; object-fit:cover; }
.crab-h5 .group-avatar-mosaic-1 .group-avatar-tile { grid-column:1 / -1; grid-row:1 / -1; }
.crab-h5 .group-avatar-mosaic-2 .group-avatar-tile { grid-row:1 / -1; }
.crab-h5 .group-avatar-mosaic-3 .group-avatar-tile:first-child { grid-row:1 / -1; }
.crab-h5 .group-avatar-mosaic-0 { display:grid; place-items:center; background:#F6EBD6; }
.crab-h5 .group-avatar-mosaic-0 svg { width:55%; height:55%; }
.crab-h5 .group-avatar-custom { position:absolute; inset:0; z-index:1; }
.crab-h5 .group-avatar-custom[hidden] { display:none; }
.crab-h5 .group-avatar-large { --group-avatar-size:80px; }