/*
 * Nudjee v2.15.107 — Circle details/chat avatar hardening.
 * Kept in a version-specific stylesheet so hosts/CDNs that retain an older
 * style.css cannot leave the custom Circle avatar square or detach the edit
 * control from the avatar.
 */

/* The identity wrapper owns the overlap geometry. */
#pn-app #pn-circle-detail-modal .pn-circle-detail-identity {
    grid-template-columns: 64px minmax(0, 1fr);
}

#pn-app #pn-circle-detail-modal .pn-circle-detail-icon-wrap,
#pn-app #pn-circle-chat-modal .pn-circle-chat-icon-wrap {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    isolation: isolate;
}

#pn-app #pn-circle-detail-modal .pn-circle-detail-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    margin-top: -47px !important;
    z-index: 8;
}

#pn-app #pn-circle-chat-modal .pn-circle-chat-icon-wrap {
    width: 42px !important;
    height: 42px !important;
}

/* Always render the Circle identity as a circular avatar. The white border is
 * on the avatar container itself, so it remains visible with any uploaded
 * image rather than depending on the image's own corners. */
#pn-app #pn-circle-detail-modal #pn-circle-detail-icon,
#pn-app #pn-circle-chat-modal #pn-circle-chat-emoji {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-style: solid !important;
    border-color: #fff !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #7868f2, #43c7bf) !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border-width: 4px !important;
    box-shadow:
        0 0 0 1px rgba(27, 24, 42, .06),
        0 9px 22px rgba(34, 29, 53, .18) !important;
}

#pn-app #pn-circle-chat-modal #pn-circle-chat-emoji {
    width: 42px !important;
    height: 42px !important;
    border-width: 3px !important;
    box-shadow:
        0 0 0 1px rgba(27, 24, 42, .05),
        0 5px 14px rgba(34, 29, 53, .14) !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon.has-photo,
#pn-app #pn-circle-chat-modal #pn-circle-chat-emoji.has-photo {
    padding: 0 !important;
    background: #ececf2 !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon .pn-circle-icon-image,
#pn-app #pn-circle-chat-modal #pn-circle-chat-emoji .pn-circle-icon-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    clip-path: circle(50% at 50% 50%);
}

/* The edit button is a badge attached to the bottom centre of the avatar,
 * never a second block in the identity row. */
#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit,
#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit {
    position: absolute !important;
    z-index: 20 !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    border-style: solid !important;
    border-color: #fff !important;
    border-radius: 999px !important;
    background: var(--pn-mode-accent, var(--pn-primary, #7462f5)) !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    box-shadow:
        0 0 0 1px rgba(31, 27, 46, .08),
        0 5px 14px rgba(28, 24, 45, .24) !important;
    cursor: pointer !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit {
    bottom: -10px !important;
    width: 29px !important;
    height: 29px !important;
    border-width: 3px !important;
}

#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit {
    bottom: -8px !important;
    width: 23px !important;
    height: 23px !important;
    border-width: 2px !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit[hidden],
#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit[hidden] {
    display: none !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit .pn-icon-svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2 !important;
}

#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit .pn-icon-svg {
    width: 11px !important;
    height: 11px !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit:hover,
#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit:hover {
    filter: brightness(.96);
    transform: translateX(-50%) translateY(-1px) !important;
}

#pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit:focus-visible,
#pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pn-mode-accent, #7462f5) 30%, transparent) !important;
    outline-offset: 2px !important;
}

/* The branding manager preview uses the same clean circular ring so the edit
 * sheet visually matches the Circle details card. */
#pn-app #pn-circle-icon-modal #pn-circle-icon-preview {
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 4px solid #fff !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #7868f2, #43c7bf) !important;
    box-shadow:
        0 0 0 1px rgba(27, 24, 42, .06),
        0 9px 22px rgba(34, 29, 53, .16) !important;
}

#pn-app #pn-circle-icon-modal #pn-circle-icon-preview .pn-circle-icon-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    clip-path: circle(50% at 50% 50%);
}

@media (max-width: 680px) {
    #pn-app #pn-circle-detail-modal #pn-circle-detail-icon-edit {
        bottom: -9px !important;
        width: 27px !important;
        height: 27px !important;
    }

    #pn-app #pn-circle-chat-modal #pn-circle-chat-icon-edit {
        bottom: -7px !important;
        width: 22px !important;
        height: 22px !important;
    }
}