/* ──────────────────────────────────────────────────────────────
   Avatar — initials or image, optional presence indicator.
   Defaults to 28px (table list size). Use .is-sm/.is-md/.is-lg/.is-xl
   for other sizes per DESIGN-SYSTEM 3.3.
   Replaces the HEX-hardcoded .avatar-* classes in app.css with
   OKLCH variants matching the WiserFlow palette.
   ────────────────────────────────────────────────────────────── */

.wt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--wt-bg-3);
  color: white;
  font-family: var(--wt-font);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.wt-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Sizes — per DESIGN-SYSTEM 3.3 */
.wt-avatar.is-sm { width: 22px; height: 22px; font-size: 10px; }
.wt-avatar.is-md { width: 32px; height: 32px; font-size: 12px; }
.wt-avatar.is-lg { width: 40px; height: 40px; font-size: 14px; }
.wt-avatar.is-xl { width: 48px; height: 48px; font-size: 16px; }

/* Color variants — OKLCH (replaces HEX in app.css .avatar-*) */
.wt-avatar.is-blue    { background: oklch(0.62 0.18 245); }
.wt-avatar.is-emerald { background: oklch(0.62 0.16 155); }
.wt-avatar.is-violet  { background: oklch(0.62 0.20 295); }
.wt-avatar.is-amber   { background: oklch(0.72 0.16 75);  color: oklch(0.20 0.02 265); }
.wt-avatar.is-rose    { background: oklch(0.62 0.20 15);  }
.wt-avatar.is-cyan    { background: oklch(0.68 0.13 215); }
.wt-avatar.is-orange  { background: oklch(0.66 0.18 55);  }
.wt-avatar.is-indigo  { background: oklch(0.55 0.18 275); }
.wt-avatar.is-teal    { background: oklch(0.62 0.13 195); }
.wt-avatar.is-pink    { background: oklch(0.68 0.18 350); }

/* Presence indicator — wrap avatar in .wt-avatar-wrap to position it */
.wt-avatar-wrap { position: relative; display: inline-flex; }
.wt-avatar-presence {
  position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--wt-card);
  background: var(--wt-fg-4);
}
.wt-avatar-presence.is-online  { background: var(--wt-success); }
.wt-avatar-presence.is-offline { background: var(--wt-fg-4); }
.wt-avatar-presence.is-busy    { background: var(--wt-danger); }