/* Avatar — Baustein Core\Design::avatar. Farbe kommt deterministisch aus dem Namen (Inline-Style, Datenwert). */
.cc-avatar { display: inline-flex; align-items: center; justify-content: center; width:var(--sz-30); height:var(--sz-30);
             border-radius: 50%; color: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-bold);
             overflow: hidden; vertical-align: middle; flex: none; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-avatar-lg { width:var(--sz-44); height:var(--sz-44); font-size: var(--fs-md); }
.cc-avatar-sm { width:var(--sz-22); height:var(--sz-22); font-size: var(--fs-xs); }
.cc-avatar-xl { width: var(--sz-80); height: var(--sz-80); font-size: var(--fs-xxl); }

/* Avatar-Stapel (Design::avatarStack) — überlappend, spart Platz in Tabellen.
   Reihenfolge bleibt lesbar, weil der linke Avatar oben liegt (z-index absteigend über die Marke). */
.cc-avstack { display: inline-flex; align-items: center; padding-left: var(--sp-2); }
.cc-avstack .cc-avatar { margin-left: calc(var(--sz-30) / -3); border: 2px solid var(--surface); }
.cc-avstack .cc-avatar:first-child { margin-left: 0; }
.cc-avstack .cc-avatar:hover { z-index: var(--z-raised); transform: translateY(calc(var(--sp-1) * -1)); }
.cc-avstack-open { cursor: pointer; }
.cc-avstack-more { display: inline-flex; align-items: center; justify-content: center;
                   width: var(--sz-30); height: var(--sz-30); border-radius: 50%;
                   margin-left: calc(var(--sz-30) / -3); border: 2px solid var(--surface);
                   background: var(--grey-200); color: var(--grey-600);
                   font-size: var(--fs-xs); font-weight: var(--fw-bold); flex: none; }
.cc-avstack .cc-avatar, .cc-avstack-more { transition: transform var(--dur-fast); }

/* Mittlere Grösse — Listenzeilen mit mehrzeiligem Text (Design::msgRow). */
.cc-avatar-md { width: var(--sz-36); height: var(--sz-36); }