/*
 * TLGAWY V24 profile geometry lock.
 * This file is intentionally loaded after custom.css. It preserves the accepted
 * profile design and only restores the compact, centred proportions on phones.
 */
.profile-modern-shell.tlgawy-profile-v17{
    width:100%!important;
    max-width:580px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
}
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-cover,
.profile-modern-shell.tlgawy-profile-v17 .bg_pro_cover{
    width:100%!important;
    height:auto!important;
    min-height:360px!important;
    box-sizing:border-box!important;
}
.profile-modern-shell.tlgawy-profile-v17 .bg_pro_cover{
    display:flex!important;
    flex-direction:column!important;
}
.profile-modern-shell.tlgawy-profile-v17 .bg_pro_cover > .brow:last-child{
    display:flex!important;
    flex:1 1 auto!important;
    min-height:0!important;
}
.profile-modern-shell.tlgawy-profile-v17 .profile_top{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    width:100%!important;
    height:auto!important;
    min-height:285px!important;
    padding:24px 18px 16px!important;
    box-sizing:border-box!important;
}
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-stack{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:100%!important;
    max-width:540px!important;
    margin:0 auto!important;
    text-align:center!important;
}
.profile-modern-shell.tlgawy-profile-v17 .profile_avatar{
    display:block!important;
    flex:0 0 auto!important;
    float:none!important;
    width:154px!important;
    height:154px!important;
    min-width:154px!important;
    min-height:154px!important;
    margin:0 auto 3px!important;
    overflow:visible!important;
}
.profile-modern-shell.tlgawy-profile-v17 .rt-avatar-shell{
    width:154px!important;
    height:154px!important;
    margin:0 auto!important;
}
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-img{
    position:absolute!important;
    inset:21px!important;
    width:112px!important;
    height:112px!important;
    margin:0!important;
    object-fit:cover!important;
    border-radius:50%!important;
    transform:none!important;
}
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-border{
    position:absolute!important;
    inset:0!important;
    width:154px!important;
    height:154px!important;
    object-fit:contain!important;
    transform:none!important;
}
.profile-modern-shell.tlgawy-profile-v17 .profile_tinfo{
    display:block!important;
    width:100%!important;
    max-width:540px!important;
    padding:0!important;
    margin:0 auto!important;
    float:none!important;
    text-align:center!important;
}
.profile-modern-shell.tlgawy-profile-v17 .pdetails,
.profile-modern-shell.tlgawy-profile-v17 .pdetails_text{
    text-align:center!important;
    margin-inline:auto!important;
}
.profile-modern-shell.tlgawy-profile-v17 .pro_mood,
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-marquee{
    max-width:min(94%,520px)!important;
}
@media (max-width:600px){
    .profile-modern-shell.tlgawy-profile-v17{
        max-width:100%!important;
        border-radius:12px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .rt-profile-cover,
    .profile-modern-shell.tlgawy-profile-v17 .bg_pro_cover{
        min-height:300px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .profile_top{
        min-height:235px!important;
        padding:18px 12px 14px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .profile_avatar,
    .profile-modern-shell.tlgawy-profile-v17 .rt-avatar-shell{
        width:112px!important;
        height:112px!important;
        min-width:112px!important;
        min-height:112px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-img{
        inset:15px!important;
        width:82px!important;
        height:82px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-border{
        width:112px!important;
        height:112px!important;
    }
    .profile-modern-shell.tlgawy-profile-v17 .pro_name{
        font-size:22px!important;
        line-height:1.2!important;
    }
}


/* TLGAWY V2026 mobile colored avatar ring fix: profile only. */
.profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-color-ring{
    left:13px!important;
    top:13px!important;
    width:128px!important;
    height:128px!important;
    max-width:none!important;
    max-height:none!important;
}
@media(max-width:600px){
    .profile-modern-shell.tlgawy-profile-v17 .rt-profile-avatar-color-ring{
        left:8px!important;
        top:8px!important;
        width:96px!important;
        height:96px!important;
    }
}


/* TLGAWY V64.6 — authoritative profile modal geometry.
 * getProfile() opens #large_modal, not #over_modal. The class is applied by
 * function_logged.js, so this works at intermediate desktop widths without
 * relying on :has(). */
#large_modal.tlgawy-profile-modal{
    padding-left:0!important;
    padding-right:0!important;
}
#large_modal.tlgawy-profile-modal #large_modal_in,
#large_modal_in.tlgawy-profile-modal{
    width:min(580px,calc(100vw - 16px))!important;
    max-width:min(580px,calc(100vw - 16px))!important;
    min-width:0!important;
    margin:3vh auto!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    box-shadow:none!important;
}
#large_modal.tlgawy-profile-modal #large_modal_content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
}
#large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17{
    width:100%!important;
    max-width:580px!important;
    min-width:0!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
}
@media(max-width:600px){
    #large_modal.tlgawy-profile-modal #large_modal_in,
    #large_modal_in.tlgawy-profile-modal{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto!important;
        border-radius:12px!important;
    }
}

/* ========================================================================== */
/* TLGAWY V64.6.7 — restore mobile profile card edges, glow and solid backing */
/* ========================================================================== */
.profile-modern-shell.tlgawy-profile-v17{
    background-color:#12141a!important;
    opacity:1!important;
}
.profile-modern-shell.tlgawy-profile-v17 .pro_menu_wrap,
.profile-modern-shell.tlgawy-profile-v17 .inside-profile,
.profile-modern-shell.tlgawy-profile-v17 .modal_zone{
    opacity:1!important;
}
@media(max-width:600px){
    #large_modal.tlgawy-profile-modal{
        padding:8px 0 18px!important;
        overflow-x:visible!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_in,
    #large_modal_in.tlgawy-profile-modal{
        width:calc(100vw - 24px)!important;
        max-width:calc(100vw - 24px)!important;
        min-width:0!important;
        margin:4px auto 18px!important;
        padding:0!important;
        border-radius:28px!important;
        background:transparent!important;
        border:0!important;
        overflow:visible!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_content{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:10px!important;
        overflow-x:visible!important;
        box-sizing:border-box!important;
        background:transparent!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
        border-radius:28px!important;
        overflow:hidden!important;
        opacity:1!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal .profile-modern-shell.tlgawy-profile-v17 .rt-profile-cover{
        border-radius:28px 28px 0 0!important;
        overflow:hidden!important;
    }
    /* Preserve the user's shgrad profile glow. The old full-width mobile modal
       clipped this shadow against both screen edges. */
    #large_modal.tlgawy-profile-modal .profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]{
        overflow:hidden!important;
    }
}

/* ========================================================================== */
/* TLGAWY V64.6.8 — restore original solid-grey profile + wide mobile card    */
/* ========================================================================== */

/* The normal profile body used to be solid grey. Keep it opaque, while still
   allowing accounts that selected a full profile background to keep that image. */
.profile-modern-shell.tlgawy-profile-v17{
    background-color:#8e8e91!important;
    opacity:1!important;
}
.profile-modern-shell.tlgawy-profile-v17:not(.profile-bg-full) .pro_menu_wrap,
.profile-modern-shell.tlgawy-profile-v17:not(.profile-bg-full) .inside-profile,
.profile-modern-shell.tlgawy-profile-v17:not(.profile-bg-full) .modal_zone{
    background-color:#8e8e91!important;
    background-image:none!important;
    opacity:1!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

/* A full-background profile remains a full-background profile; only remove the
   accidental element opacity introduced by previous responsive fixes. */
.profile-modern-shell.tlgawy-profile-v17.profile-bg-full .pro_menu_wrap,
.profile-modern-shell.tlgawy-profile-v17.profile-bg-full .inside-profile,
.profile-modern-shell.tlgawy-profile-v17.profile-bg-full .modal_zone{
    opacity:1!important;
}

/* profile_shadow stores shgrad1..shgrad45 on the shell. Re-assert that saved
   colour on the OUTER edge so it is visible on phones exactly as intended. */
.profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]{
    border-width:2px!important;
    border-style:solid!important;
    border-color:currentColor!important;
    box-shadow:0 0 18px currentColor!important;
}

@media(max-width:600px){
    /* One outer margin only. V64.6.7 had an outer margin + 10px content padding,
       making the profile look much thinner than the reference design. */
    #large_modal.tlgawy-profile-modal{
        padding:6px 0 18px!important;
        overflow-x:visible!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_in,
    #large_modal_in.tlgawy-profile-modal{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        min-width:0!important;
        margin:8px auto 18px!important;
        padding:0!important;
        border:0!important;
        border-radius:28px!important;
        background:transparent!important;
        overflow:visible!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_content{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:28px!important;
        background:transparent!important;
        overflow:visible!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
        border-radius:28px!important;
        overflow:hidden!important;
        opacity:1!important;
        box-sizing:border-box!important;
    }
    #large_modal.tlgawy-profile-modal .profile-modern-shell.tlgawy-profile-v17 .rt-profile-cover{
        border-radius:26px 26px 0 0!important;
        overflow:hidden!important;
    }

    /* Keep the saved profile-shadow glow outside the rounded card. */
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]{
        border-width:2px!important;
        border-style:solid!important;
        border-color:currentColor!important;
        box-shadow:0 0 18px currentColor!important;
    }
}

/* ========================================================================== */
/* TLGAWY V64.6.9 — restore native mobile profile scrolling                  */
/* ========================================================================== */
/*
 * The generic V62 mobile-modal rules turn #large_modal into an overflow:hidden
 * flex shell. V64.6.8 intentionally made the profile content overflow visible
 * so the coloured outer glow is not clipped. Together those rules remove the
 * only vertical scrolling layer on phones. For profile view only, return to the
 * original Codychat behaviour: the fixed modal backdrop itself is the scroller.
 */
@media (max-width:800px){
    #large_modal.tlgawy-profile-modal{
        display:block!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-y:contain!important;
        touch-action:pan-y pinch-zoom!important;
        height:100%!important;
        height:100dvh!important;
        max-height:100dvh!important;
        padding:6px 0 calc(18px + env(safe-area-inset-bottom))!important;
        box-sizing:border-box!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_in,
    #large_modal_in.tlgawy-profile-modal{
        display:block!important;
        flex:none!important;
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
        overflow:visible!important;
        margin:8px auto 24px!important;
        transform:none!important;
        touch-action:pan-y!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_content{
        display:block!important;
        flex:none!important;
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
        overflow:visible!important;
        overscroll-behavior:visible!important;
        touch-action:pan-y!important;
        -webkit-overflow-scrolling:auto!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        touch-action:pan-y!important;
    }

    /* Leave enough room below the final profile row so the user can actually
       scroll the last information block above the browser's bottom safe area. */
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17:after{
        content:"";
        display:block;
        width:100%;
        height:max(18px,env(safe-area-inset-bottom));
        pointer-events:none;
    }
}

/* ========================================================================== */
/* TLGAWY V64.6.10 — native inner profile scroll + wider card + stronger glow */
/* ========================================================================== */
/*
 * V64.6.9 made the modal backdrop itself the scroll layer. That restored access
 * to the full profile but changed the finger/scroll feel compared with the old
 * mobile profile. The old behaviour used #large_modal_content as the momentum
 * scroller while the backdrop stayed fixed. Restore that behaviour here.
 */
@media (max-width:800px){
    #large_modal.tlgawy-profile-modal{
        display:flex!important;
        align-items:flex-start!important;
        justify-content:center!important;
        width:100%!important;
        height:100vh!important;
        height:100dvh!important;
        max-height:100dvh!important;
        padding:2px 0 max(2px,env(safe-area-inset-bottom))!important;
        overflow:hidden!important;
        overscroll-behavior:none!important;
        touch-action:auto!important;
        box-sizing:border-box!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_in,
    #large_modal_in.tlgawy-profile-modal{
        display:flex!important;
        flex-direction:column!important;
        flex:0 1 auto!important;
        width:calc(100vw - 4px)!important;
        max-width:calc(100vw - 4px)!important;
        height:calc(100dvh - max(4px,env(safe-area-inset-bottom)))!important;
        max-height:calc(100dvh - max(4px,env(safe-area-inset-bottom)))!important;
        min-height:0!important;
        margin:0 auto!important;
        padding:0!important;
        border:0!important;
        border-radius:27px!important;
        background:transparent!important;
        overflow:visible!important;
        transform:none!important;
        box-sizing:border-box!important;
        touch-action:auto!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_content{
        display:block!important;
        flex:1 1 auto!important;
        width:100%!important;
        max-width:100%!important;
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        margin:0!important;
        padding:3px 2px calc(18px + env(safe-area-inset-bottom))!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        scroll-behavior:auto!important;
        scroll-snap-type:none!important;
        overscroll-behavior-y:auto!important;
        touch-action:pan-y!important;
        box-sizing:border-box!important;
        background:transparent!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17{
        position:relative!important;
        width:calc(100% - 2px)!important;
        max-width:none!important;
        min-width:0!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0 auto 14px!important;
        border-radius:27px!important;
        overflow:hidden!important;
        opacity:1!important;
        box-sizing:border-box!important;
        touch-action:auto!important;
        isolation:isolate!important;
    }

    /* Keep the card's saved shgrad colour but make the illumination visible even
       when the native scroll viewport clips the outermost blur. The normal
       colors.css shadow remains, and these extra inner/near-edge layers create
       the same luminous edge visible in the user's reference screenshot. */
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]{
        border-width:2px!important;
        border-style:solid!important;
        border-color:currentColor!important;
        box-shadow:
            0 0 7px currentColor,
            0 0 16px currentColor,
            inset 0 0 7px currentColor!important;
    }

    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]::before{
        content:""!important;
        position:absolute!important;
        inset:0!important;
        z-index:30!important;
        pointer-events:none!important;
        border:1px solid currentColor!important;
        border-radius:inherit!important;
        box-shadow:
            inset 0 0 5px currentColor,
            inset 0 0 12px color-mix(in srgb,currentColor 62%,transparent)!important;
        opacity:.95!important;
    }

    #large_modal.tlgawy-profile-modal .profile-modern-shell.tlgawy-profile-v17 .rt-profile-cover{
        border-radius:25px 25px 0 0!important;
    }

    /* V64.6.9 inserted a large artificial tail because the backdrop was the
       scroller. With the original inner scroller restored, keep only a tiny safe
       tail so scrolling stops naturally at the end of the actual profile. */
    #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17:after{
        height:max(6px,env(safe-area-inset-bottom))!important;
    }
}

/* Browsers without color-mix still get a strong saved-colour glow. */
@supports not (color:color-mix(in srgb, red 50%, transparent)){
    @media (max-width:800px){
        #large_modal.tlgawy-profile-modal #large_modal_content>.profile-modern-shell.tlgawy-profile-v17[class*="shgrad"]::before{
            box-shadow:inset 0 0 12px currentColor!important;
        }
    }
}

/* V20: staff editor uses its native avatar controls and isolated geometry. */
.tlgawy-admin-profile .profile_top,.tlgawy-admin-profile .profile_top *{box-sizing:border-box!important}
.tlgawy-admin-profile .profile_avatar,.tlgawy-admin-profile .avatar_spin{display:block!important;float:none!important;padding:0!important;position:relative!important;width:116px!important;height:116px!important;min-width:116px!important;min-height:116px!important;max-width:116px!important;max-height:116px!important;margin:0 auto!important;border-radius:50%!important;overflow:visible!important}
.tlgawy-admin-profile img.avatar_profile{display:block!important;position:static!important;width:116px!important;height:116px!important;min-width:116px!important;min-height:116px!important;max-width:116px!important;max-height:116px!important;object-fit:cover!important;border-radius:50%!important;margin:0!important;transform:none!important}
.tlgawy-admin-profile .profile_top .btable_auto{display:block!important;width:100%!important;text-align:center!important}
.tlgawy-admin-profile .profile_tinfo,.tlgawy-admin-profile .pdetails,.tlgawy-admin-profile .pdetails_text{display:block!important;width:100%!important;text-align:center!important}
.tlgawy-admin-profile .avatar_control{position:absolute!important;bottom:0!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;display:flex!important;width:auto!important;z-index:40}
.tlgawy-admin-profile .avatar_button{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important;min-height:30px!important;max-height:30px!important}