/* Modern User Avatar component with dynamic glow and status support */

.user-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size, 48px);
  height: var(--avatar-size, 48px);
  border-radius: var(--avatar-radius, 999px);
  background: var(--avatar-bg, linear-gradient(135deg, rgba(30, 64, 175, 0.65), rgba(14, 165, 233, 0.65)));
  color: var(--avatar-fg, var(--color-text-primary));
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: var(--avatar-border, 1px solid rgba(148, 163, 253, 0.35));
  box-shadow: 0 24px 45px -30px rgba(15, 23, 42, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
  -webkit-backdrop-filter: var(--avatar-backdrop, saturate(120%) blur(0px));
  backdrop-filter: var(--avatar-backdrop, saturate(120%) blur(0px));
  -webkit-user-select: none;
  user-select: none;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform: scale(1.01);
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .initials {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: inherit;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from 180deg at 50% 50%, rgba(56, 189, 248, 0.5), rgba(129, 140, 248, 0.38), rgba(244, 114, 182, 0.45), rgba(56, 189, 248, 0.5));
    opacity: var(--avatar-ring-opacity, 0.35);
    z-index: -1;
    transition: opacity 0.3s ease;
  }

  &:hover,
  &:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 30px 60px -28px rgba(14, 165, 233, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  &:hover::before,
  &:focus-visible::before {
    opacity: var(--avatar-ring-hover-opacity, 0.6);
  }

  &:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.65);
    outline-offset: 4px;
  }

  &:hover img {
    transform: scale(1.05);
  }

  &.interactive {
    cursor: pointer;
  }

  &.interactive:active {
    transform: translateY(0) scale(0.99);
  }

  &.small {
    --avatar-size: 32px;
    font-size: 12px;
  }

  &.large {
    --avatar-size: 64px;
    font-size: 20px;
  }

  &.larger,
  &.hero {
    --avatar-size: 120px;
    font-size: 32px;
  }

  &.hero {
    --avatar-border: 0.5rem solid rgba(59, 130, 246, 0.65);
    --avatar-ring-opacity: 0.55;
    box-shadow: 0 40px 70px -28px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  &.rounded {
    --avatar-radius: var(--border-radius-lg, 20px);
  }

  &.square {
    --avatar-radius: var(--border-radius-md, 12px);
  }

  &.thick-border {
    --avatar-border: 3px solid rgba(148, 163, 253, 0.65);
  }

  &.hero-border {
    --avatar-border: 0.5rem solid rgba(59, 130, 246, 0.7);
  }

  &.no-border {
    --avatar-border: none;
    box-shadow: 0 18px 45px -30px rgba(15, 23, 42, 0.9);
  }

  &.user-avatar--image {
  --avatar-ring-opacity: 0.18;
  --avatar-ring-hover-opacity: 0.32;
  -webkit-backdrop-filter: var(--avatar-backdrop, saturate(110%) blur(2px));
  backdrop-filter: var(--avatar-backdrop, saturate(110%) blur(2px));
  }

  &.user-avatar--initials {
    --avatar-ring-opacity: 0.5;
    --avatar-ring-hover-opacity: 0.75;
    letter-spacing: 0.16em;
    text-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
  }

  &.online::after,
  &.offline::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: max(12px, calc(var(--avatar-size, 48px) * 0.24));
    height: max(12px, calc(var(--avatar-size, 48px) * 0.24));
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6);
  }

  &.online::after {
    background: linear-gradient(135deg, #22c55e, #4ade80);
  }

  &.offline::after {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
  }
}

.user-avatar-block {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 0.9rem);
  min-width: 0;
}

.user-avatar-block--inline,
.user-avatar-block:not(.user-avatar-block--stacked) {
  flex-direction: row;
  align-items: center;
}

.user-avatar-block--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.user-avatar-block__avatar {
  flex-shrink: 0;
  display: inline-flex;
}

.user-avatar-block__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.user-avatar-block--inline .user-avatar-block__meta,
.user-avatar-block:not(.user-avatar-block--stacked) .user-avatar-block__meta {
  align-items: flex-start;
}

.user-avatar-block--stacked .user-avatar-block__meta {
  align-items: center;
  text-align: center;
}

.user-avatar-block__name {
  font-weight: 600;
  font-size: clamp(0.95rem, 0.92rem + 0.08vw, 1.05rem);
  color: var(--color-text-primary);
  letter-spacing: 0.015em;
  line-height: 1.25;
  text-transform: none;
}

.user-avatar-block__email {
  font-size: clamp(0.78rem, 0.76rem + 0.06vw, 0.88rem);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: none;
  word-break: break-word;
  opacity: 0.85;
}