@layer components {
  /* Layered avatar primitive used by every avatar in the app.

     Structure:
       <div class="kc-avatar" style="background:var(--color-blue-100)">
         <span class="kc-avatar-fallback">АП</span>
         <img class="kc-avatar-img" src="…" onerror="kcAvatarOnError(this)">
       </div>

     The wrapper carries the size and the user's colour token (so an
     initials tile shows by default). The <img> is positioned to cover
     the tile and lazy-loads on top — when the presigned URL expires
     and the retry also fails, the fallback initials remain visible
     instead of a broken-image icon. */
  .kc-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    font-size: var(--font-sm);
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
  }

  .kc-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    font-size: inherit;
    text-transform: uppercase;
    pointer-events: none;
  }

  .kc-avatar-img {
    position: absolute;
    /* Slight overdraw + overflow:hidden on .kc-avatar covers sub-pixel
       rounding gaps that otherwise leave a thin ring of the fallback
       tile around the photo on round wrappers. */
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    z-index: 1;
    background: transparent;
    border-radius: inherit;
    display: block;
    /* Stay invisible until kcAvatarOnLoad attaches `kc-avatar-loaded`
       so we never flash the browser's broken/loading placeholder icon
       on top of the initials tile. */
    opacity: 0;
    transition: opacity var(--transition);
  }
  .kc-avatar.kc-avatar-loaded .kc-avatar-img {
    opacity: 1;
  }

  /* Hide alt text and broken-image icon while loading or after a
     terminal error — the fallback initials underneath cover the gap. */
  .kc-avatar-img:not([src]),
  .kc-avatar-img[src=""] {
    display: none;
  }

  /* Once the image decodes (kcAvatarOnLoad attaches the class), drop
     the fallback colour and initials. PNGs with transparent corners
     would otherwise let the coloured tile bleed through the edges of
     the photo even though `<img>` reports a successful load. */
  .kc-avatar.kc-avatar-loaded {
    background: transparent !important;
  }
  .kc-avatar.kc-avatar-loaded .kc-avatar-fallback {
    display: none;
  }

  /* Square variant for server icons */
  .kc-avatar.kc-avatar-square {
    border-radius: var(--radius-md, 8px);
  }
}