/* =========================
   AVATAR SYSTEM CORE
========================= */

.avatar {
  position: relative;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* =========================
   SIZES
========================= */

.avatar-sm { width: 32px;  height: 32px; }
.avatar-md { width: 48px;  height: 48px; }

.avatar-lg {
  width: 120px;
  height: 120px;
  box-shadow: var(--shadow-accent);
}

/* =========================
   PLACEHOLDER
========================= */

.avatar-placeholder {
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.avatar-sm .avatar-placeholder { font-size: 14px; }
.avatar-md .avatar-placeholder { font-size: 18px; }
.avatar-lg .avatar-placeholder { font-size: 40px; }

/* =========================
   TRUST FRAME
========================= */

.avatar-trusted {
  box-shadow: 0 0 0 3px #4ade80, var(--shadow-soft);
}

.avatar-warning {
  box-shadow: 0 0 0 3px #f59e0b, var(--shadow-soft);
}

.avatar-danger {
  box-shadow: 0 0 0 3px var(--danger), var(--shadow-soft);
}

/* =========================
   STATUS DOT
========================= */

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.status-online  { background: #22c55e; }
.status-offline { background: var(--muted); }
.status-busy    { background: var(--danger); }

/* =========================
   SKELETON LOADING
========================= */

.avatar-skeleton {
  background: linear-gradient(90deg, #0d1526 25%, #131d35 50%, #0d1526 75%);
  background-size: 200% 100%;
  animation: avatarLoading 1.2s infinite;
}

@keyframes avatarLoading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}