/* Blynk Avatar Styles for Posts */

.post-user .blynk-avatar,
.comment-avatar-container .blynk-avatar,
.search-result-post-avatar.blynk-avatar,
#navbar-avatar-desktop .blynk-avatar,
#navbar-avatar-mobile .blynk-avatar,
#post-input-avatar-container .blynk-avatar,
.comment-input-avatar-wrapper .blynk-avatar,
#profile-dropdown-avatar .blynk-avatar,
#profile-dropdown-avatar-mobile .blynk-avatar,
#profile-popup-avatar .blynk-avatar,
#profile-popup-avatar-mobile .blynk-avatar {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
}

/* Constrain avatar sizes in containers */
#navbar-avatar-desktop,
#navbar-avatar-mobile {
    max-width: 32px;
    max-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar-avatar-desktop img.post-avatar,
#navbar-avatar-mobile img.post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

#post-input-avatar-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#post-input-avatar-container img.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

#post-input-avatar-container .blynk-avatar {
    transform: scale(1);
    transform-origin: center center;
}

#profile-dropdown-avatar,
#profile-dropdown-avatar-mobile {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profile-dropdown-avatar img.post-avatar,
#profile-dropdown-avatar-mobile img.post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* Scale down Blynk avatars in dropdown to fit with accessories */
#profile-dropdown-avatar .blynk-avatar,
#profile-dropdown-avatar-mobile .blynk-avatar {
    width: 48px !important;
    height: 48px !important;
    transform: scale(0.6);
    transform-origin: center center;
}

#navbar-avatar-desktop .blynk-avatar,
#navbar-avatar-mobile .blynk-avatar {
    transform: scale(0.8);
    transform-origin: center center;
}

#profile-popup-avatar,
#profile-popup-avatar-mobile {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profile-popup-avatar img.post-avatar,
#profile-popup-avatar-mobile img.post-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

#profile-popup-avatar .blynk-avatar,
#profile-popup-avatar-mobile .blynk-avatar {
    transform: scale(0.65);
    transform-origin: center center;
}

.post-user .blynk-avatar-small,
#navbar-avatar-desktop .blynk-avatar-small,
#navbar-avatar-mobile .blynk-avatar-small,
#post-input-avatar-container .blynk-avatar-small,
.comment-input-avatar-wrapper .blynk-avatar-small {
    width: 40px;
    height: 40px;
}

.comment-avatar-container .blynk-avatar-small {
    width: 28px;
    height: 28px;
}

/* Ensure comment profile pictures stay at correct size */
.comment-avatar-container {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-avatar-container img.post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-avatar-container .blynk-avatar {
    transform: scale(1);
    transform-origin: center center;
}

/* Comment input avatar */
.comment-input-avatar-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comment-input-avatar-wrapper img.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-input-avatar-wrapper .blynk-avatar {
    transform: scale(1);
    transform-origin: center center;
}

.post-user .blynk-avatar-medium,
.comment-avatar-container .blynk-avatar-medium,
#profile-dropdown-avatar .blynk-avatar-medium,
#profile-dropdown-avatar-mobile .blynk-avatar-medium {
    width: 60px;
    height: 60px;
}

.post-user .blynk-avatar-large,
.comment-avatar-container .blynk-avatar-large,
#profile-popup-avatar .blynk-avatar-large,
#profile-popup-avatar-mobile .blynk-avatar-large {
    width: 100px;
    height: 100px;
}

.post-user .blynk-layer,
.comment-avatar-container .blynk-layer,
#navbar-avatar-desktop .blynk-layer,
#navbar-avatar-mobile .blynk-layer,
#post-input-avatar-container .blynk-layer,
.comment-input-avatar-wrapper .blynk-layer,
#profile-dropdown-avatar .blynk-layer,
#profile-dropdown-avatar-mobile .blynk-layer,
#profile-popup-avatar .blynk-layer,
#profile-popup-avatar-mobile .blynk-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.post-user .blynk-back-layer,
.comment-avatar-container .blynk-back-layer,
#navbar-avatar-desktop .blynk-back-layer,
#navbar-avatar-mobile .blynk-back-layer,
#post-input-avatar-container .blynk-back-layer,
.comment-input-avatar-wrapper .blynk-back-layer,
#profile-dropdown-avatar .blynk-back-layer,
#profile-dropdown-avatar-mobile .blynk-back-layer,
#profile-popup-avatar .blynk-back-layer,
#profile-popup-avatar-mobile .blynk-back-layer { z-index: 1; }

.post-user .blynk-body-layer,
.comment-avatar-container .blynk-body-layer,
#navbar-avatar-desktop .blynk-body-layer,
#navbar-avatar-mobile .blynk-body-layer,
#post-input-avatar-container .blynk-body-layer,
.comment-input-avatar-wrapper .blynk-body-layer,
#profile-dropdown-avatar .blynk-body-layer,
#profile-dropdown-avatar-mobile .blynk-body-layer,
#profile-popup-avatar .blynk-body-layer,
#profile-popup-avatar-mobile .blynk-body-layer { z-index: 5; }

.post-user .blynk-face-layer,
.comment-avatar-container .blynk-face-layer,
#navbar-avatar-desktop .blynk-face-layer,
#navbar-avatar-mobile .blynk-face-layer,
#post-input-avatar-container .blynk-face-layer,
.comment-input-avatar-wrapper .blynk-face-layer,
#profile-dropdown-avatar .blynk-face-layer,
#profile-dropdown-avatar-mobile .blynk-face-layer,
#profile-popup-avatar .blynk-face-layer,
#profile-popup-avatar-mobile .blynk-face-layer { z-index: 6; }

.post-user .blynk-face-accessory-layer,
.comment-avatar-container .blynk-face-accessory-layer,
#navbar-avatar-desktop .blynk-face-accessory-layer,
#navbar-avatar-mobile .blynk-face-accessory-layer,
#post-input-avatar-container .blynk-face-accessory-layer,
.comment-input-avatar-wrapper .blynk-face-accessory-layer,
#profile-dropdown-avatar .blynk-face-accessory-layer,
#profile-dropdown-avatar-mobile .blynk-face-accessory-layer,
#profile-popup-avatar .blynk-face-accessory-layer,
#profile-popup-avatar-mobile .blynk-face-accessory-layer { z-index: 10; }

.post-user .blynk-front-layer,
.comment-avatar-container .blynk-front-layer,
#navbar-avatar-desktop .blynk-front-layer,
#navbar-avatar-mobile .blynk-front-layer,
#post-input-avatar-container .blynk-front-layer,
.comment-input-avatar-wrapper .blynk-front-layer,
#profile-dropdown-avatar .blynk-front-layer,
#profile-dropdown-avatar-mobile .blynk-front-layer,
#profile-popup-avatar .blynk-front-layer,
#profile-popup-avatar-mobile .blynk-front-layer { z-index: 15; }

.post-user .blynk-layer img,
.comment-avatar-container .blynk-layer img,
#navbar-avatar-desktop .blynk-layer img,
#navbar-avatar-mobile .blynk-layer img,
#post-input-avatar-container .blynk-layer img,
.comment-input-avatar-wrapper .blynk-layer img,
#profile-dropdown-avatar .blynk-layer img,
#profile-dropdown-avatar-mobile .blynk-layer img,
#profile-popup-avatar .blynk-layer img,
#profile-popup-avatar-mobile .blynk-layer img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.post-user .blynk-body-color,
.comment-avatar-container .blynk-body-color,
#navbar-avatar-desktop .blynk-body-color,
#navbar-avatar-mobile .blynk-body-color,
#post-input-avatar-container .blynk-body-color,
.comment-input-avatar-wrapper .blynk-body-color,
#profile-dropdown-avatar .blynk-body-color,
#profile-dropdown-avatar-mobile .blynk-body-color,
#profile-popup-avatar .blynk-body-color,
#profile-popup-avatar-mobile .blynk-body-color {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.post-user .blynk-body-outline,
.comment-avatar-container .blynk-body-outline,
#navbar-avatar-desktop .blynk-body-outline,
#navbar-avatar-mobile .blynk-body-outline,
#post-input-avatar-container .blynk-body-outline,
.comment-input-avatar-wrapper .blynk-body-outline,
#profile-dropdown-avatar .blynk-body-outline,
#profile-dropdown-avatar-mobile .blynk-body-outline,
#profile-popup-avatar .blynk-body-outline,
#profile-popup-avatar-mobile .blynk-body-outline {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0.8;
    user-select: none;
    pointer-events: none;
}

/* Hover effect */
.post-user a:hover .blynk-avatar {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}