/* ============================================
   AVATAR ASPECT RATIO FIX
   Ensures avatars remain perfectly circular
   ============================================ */

/* Main avatar container fix */
.user-avatar-container {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Special handling for dog avatar wrapper */
.user-avatar-container .dog-avatar-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

/* Avatar wrapper fix */
.user-avatar {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  overflow: visible !important; /* Allow status ring to show */
  display: block !important;
  flex-shrink: 0 !important;
}

/* Dog avatar specific positioning in navbar */
.user-avatar .dog-avatar-wrapper {
  overflow: hidden !important;
  border-radius: 50% !important;
}

/* Avatar image fix */
.user-avatar .avatar-image,
.user-avatar img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Prevent any border from deforming the circle */
.user-avatar img {
  border: none !important; /* Remove any borders from img */
}

/* Status ring positioning adjustment */
.user-avatar .status-ring {
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .user-avatar-container,
  .user-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .user-avatar .avatar-image,
  .user-avatar img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Fix for flex containers that might squish the avatar */
.user-display-component {
  display: flex !important;
  align-items: center !important;
}

/* Ensure the avatar doesn't get squished in flex containers */
.user-display-component .user-avatar-container {
  flex: 0 0 36px !important; /* Don't grow or shrink, stay at 36px */
}