/* =============================================================
   chip-avatar.css  ·  shared/components/  ·  standalone
   The circular avatar slot used in chip-llogo / chip-rlogo / chip-twologo
   to host a Telegram profile photo, a letter, a digit count badge, or
   a "+" / "F01" emblem. Sizing is geometric (50% / 80% of column width
   with aspect-ratio 1) and font-size is container-query relative.
   Depends on: shared/tokens.css.
   ============================================================= */

.chip-avatar {
    /* circle = 50% of the icon column's width (square via aspect-ratio) */
    width: 50%;
    aspect-ratio: 1;
    justify-self: center;
    align-self: center;
    margin: auto;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--brand-active);
    color: var(--brand-active);
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    /* container-type: size lets the .chip-avatar-label child resolve
       cqh against THIS box's height (queries can't read self). */
    container-type: size;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

/* Letter / digit content goes in this span. Auto-shrink: 1 char hits the
   70cqh cap; 2+ chars use the width budget (120cqw / digits) so multi-
   character labels still fit inside the circle. */
.chip-avatar-label {
    font-size: min(70cqh, calc(120cqw / var(--digits, 1)));
    line-height: 1;
}

/* When the entity has a real Telegram profile photo, the avatar holds an
   <img> instead of a label. Photo fills the circle (object-fit cover) but
   stays inside the cyan ring that defines .chip-avatar. */
.chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Larger variant — used for source/destination row chips (tab-3/4) and
   tab-1 account chips, where the photo is the primary row identifier. */
.chip-avatar.chip-avatar-photo {
    width: 80%;
}

/* Forwarder F-label — "F" white, two-digit number yellow. Used both in
   the avatar circle and inside the chip-name text. */
.forwarder-prefix { color: var(--on-brand); }
.forwarder-num    { color: var(--status-warn); }

/* "+ add new" chip — green ring + green plus glyph. */
.chip-avatar.chip-avatar-plus {
    color: var(--status-good);
    border-color: var(--status-good);
}