/* Presence Beacons */
/* Small status indicators showing user online/offline/in-call state */

.avatar {
  position: relative;
}

/* Activity ring around presence beacon - clockwise like a clock */
.avatar[data-presence][data-activity-level]::before {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: conic-gradient(
    currentColor 0deg,
    currentColor calc(var(--activity-level, 0) * 3.6deg),
    transparent calc(var(--activity-level, 0) * 3.6deg)
  );
  mask: radial-gradient(circle, transparent 5px, black 5px);
  -webkit-mask: radial-gradient(circle, transparent 5px, black 5px);
}

/* Show ring when activity level > 0 */
.avatar[data-presence][data-activity-level]:not([data-activity-level="0"])::before {
  opacity: 0.4;
}

/* Presence beacon - positioned in bottom-right corner */
.avatar[data-presence]::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: var(--border-width-thick) solid var(--color-bg);
  z-index: 2;
}

/* Offline state - grey */
.avatar[data-presence="offline"]::after {
  background-color: #9ca3af; /* Gray-400 */
}

/* Online state - green */
.avatar[data-presence="online"]::after {
  background-color: #4ade80; /* Green-400 */
}

/* Away state - yellow (online but in different room) */
.avatar[data-presence="away"]::after {
  background-color: #fbbf24; /* Yellow-400 */
}

/* In call state - green with phone icon */
.avatar[data-presence="in_call"]::after {
  background-color: #4ade80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .avatar[data-presence]::after {
    border-color: var(--color-bg, #1f2937); /* Darker background in dark mode */
  }

  .avatar[data-presence="offline"]::after {
    background-color: #6b7280; /* Gray-500 for better contrast in dark mode */
  }
}

/* Smaller avatars in sidebar and compact views */
.avatar[data-presence]:has(img[size="20"])::after,
.avatar[data-presence]:has(img[size="24"])::after {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
  bottom: -1px;
  right: -1px;
}

/* Smaller activity ring for small avatars */
.avatar[data-presence]:has(img[size="20"])::before,
.avatar[data-presence]:has(img[size="24"])::before {
  width: 12px;
  height: 12px;
  bottom: -2px;
  right: -2px;
  mask: radial-gradient(circle, transparent 3.5px, black 3.5px);
  -webkit-mask: radial-gradient(circle, transparent 3.5px, black 3.5px);
}

/* Mobile responsiveness - slightly smaller beacons */
@media (max-width: 768px) {
  .avatar[data-presence]::after {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
  }

  /* Extra small on mobile for compact avatars */
  .avatar[data-presence]:has(img[size="20"])::after,
  .avatar[data-presence]:has(img[size="24"])::after {
    width: 7px;
    height: 7px;
    border-width: var(--border-width);
  }
}

/* Avatar groups (multiple overlapping avatars) */
.avatar__group .avatar[data-presence]::after {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}