/* ==========================================================
   VIDEURO — PERSISTENT POST OWNER
   ========================================================== */


/* Main owner component */

#crx-stories .vdp-post-owner{
    position:relative !important;
    z-index:80 !important;

    width:100% !important;
    max-width:100% !important;

    margin:14px 0 11px !important;

    padding:0 !important;

    overflow:visible !important;
}


/* Clickable user strip */

#crx-stories .vdp-post-owner-main{
    width:fit-content !important;
    max-width:100% !important;

    display:flex !important;
    align-items:center !important;

    gap:10px !important;

    padding:7px 11px 7px 7px !important;

    border-radius:12px !important;

    border:
        1px solid
        rgba(255,255,255,.09) !important;

    background:
        rgba(255,255,255,.035) !important;

    color:inherit !important;

    text-decoration:none !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


#crx-stories
.vdp-post-owner-main:hover{
    background:
        rgba(255,255,255,.075) !important;

    border-color:
        rgba(143,219,199,.28) !important;

    transform:
        translateY(-1px) !important;
}


/* Avatar */

#crx-stories
.vdp-post-owner-avatar{
    position:relative !important;

    width:36px !important;
    height:36px !important;
    min-width:36px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    border-radius:50% !important;

    border:
        2px solid
        rgba(255,255,255,.18) !important;

    box-shadow:
        0 0 0 2px
        rgba(128,207,187,.08) !important;

    background:
        linear-gradient(
            135deg,
            #736bff,
            #d86fb2,
            #ef7c7c
        ) !important;

    color:#fff !important;

    font-size:11px !important;
    font-weight:800 !important;
}


#crx-stories
.vdp-post-owner-avatar img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* Owner text */

#crx-stories
.vdp-post-owner-text{
    min-width:0 !important;

    display:grid !important;

    grid-template-columns:
        max-content
        minmax(0,max-content) !important;

    column-gap:6px !important;
    row-gap:2px !important;

    align-items:center !important;
}


#crx-stories
.vdp-post-owner-text small{
    grid-column:1 / -1 !important;

    display:block !important;

    margin:0 !important;

    color:
        rgba(255,255,255,.47) !important;

    font-size:8px !important;
    line-height:1 !important;

    font-weight:700 !important;

    letter-spacing:.10em !important;
    text-transform:uppercase !important;
}


#crx-stories
.vdp-post-owner-text strong{
    color:#fff !important;

    font-size:11px !important;
    line-height:1.2 !important;

    font-weight:750 !important;

    white-space:nowrap !important;
}


#crx-stories
.vdp-post-owner-text em{
    color:#86d7c1 !important;

    font-size:10px !important;
    line-height:1.2 !important;

    font-weight:600 !important;
    font-style:normal !important;

    white-space:nowrap !important;
}


/* Small profile indicator */

#crx-stories
.vdp-post-owner-main::after{
    content:"↗" !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:19px !important;
    height:19px !important;

    margin-left:2px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.07) !important;

    color:
        rgba(255,255,255,.67) !important;

    font-size:9px !important;
}


/* ==========================================================
   HOVER PROFILE
   ========================================================== */

#crx-stories
.vdp-owner-hover{
    position:absolute !important;

    left:0 !important;
    bottom:calc(100% + 11px) !important;

    z-index:999999 !important;

    width:300px !important;
    max-width:
        calc(100vw - 32px) !important;

    padding:17px !important;

    border-radius:17px !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;

    background:
        linear-gradient(
            145deg,
            rgba(21,30,38,.99),
            rgba(12,20,27,.99)
        ) !important;

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.50) !important;

    backdrop-filter:
        blur(20px) !important;

    opacity:0 !important;
    visibility:hidden !important;

    transform:
        translateY(8px)
        scale(.985) !important;

    transform-origin:
        bottom left !important;

    pointer-events:none !important;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease !important;
}


#crx-stories
.vdp-post-owner:hover
.vdp-owner-hover,

#crx-stories
.vdp-post-owner:focus-within
.vdp-owner-hover{
    opacity:1 !important;
    visibility:visible !important;

    transform:
        translateY(0)
        scale(1) !important;

    pointer-events:auto !important;
}


/* Little arrow */

#crx-stories
.vdp-owner-hover::after{
    content:"" !important;

    position:absolute !important;

    left:23px !important;
    top:100% !important;

    border-left:
        7px solid transparent !important;

    border-right:
        7px solid transparent !important;

    border-top:
        7px solid #101820 !important;
}


/* Hover profile header */

#crx-stories
.vdp-owner-hover-top{
    display:flex !important;
    align-items:center !important;

    gap:11px !important;
}


#crx-stories
.vdp-owner-hover-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    border-radius:50% !important;

    border:
        2px solid
        rgba(255,255,255,.18) !important;

    background:
        linear-gradient(
            135deg,
            #736bff,
            #df70a7
        ) !important;

    color:#fff !important;

    font-size:14px !important;
    font-weight:800 !important;
}


#crx-stories
.vdp-owner-hover-avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


#crx-stories
.vdp-owner-hover strong{
    display:block !important;

    color:#fff !important;

    font-size:14px !important;
    line-height:1.25 !important;

    font-weight:750 !important;
}


#crx-stories
.vdp-owner-hover small{
    display:block !important;

    margin-top:3px !important;

    color:#87d7c1 !important;

    font-size:10px !important;
    line-height:1.2 !important;
}


/* Location */

#crx-stories
.vdp-owner-hover-location{
    margin-top:12px !important;

    padding-top:11px !important;

    border-top:
        1px solid
        rgba(255,255,255,.08) !important;

    color:
        rgba(255,255,255,.56) !important;

    font-size:10px !important;
    line-height:1.4 !important;
}


/* Bio */

#crx-stories
.vdp-owner-hover p{
    margin:9px 0 0 !important;

    color:
        rgba(255,255,255,.76) !important;

    font-size:10px !important;
    line-height:1.55 !important;
}


/* Profile link */

#crx-stories
.vdp-owner-hover > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin-top:14px !important;

    padding:10px 12px !important;

    border-radius:10px !important;

    background:
        rgba(133,216,193,.10) !important;

    border:
        1px solid
        rgba(133,216,193,.18) !important;

    color:#91dbc7 !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:750 !important;

    text-decoration:none !important;
}


/* ==========================================================
   IMPORTANT — NEVER CLIP OWNER HOVER
   ========================================================== */

#crx-stories,
#crx-stories article,
#crx-stories .video-card,
#crx-stories .videuro-video-card,
#crx-stories [class*="story-card"],
#crx-stories [class*="video-card"]{
    overflow:visible !important;
}


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html[data-theme="light"]
#crx-stories
.vdp-post-owner-main{
    background:
        rgba(12,26,21,.035) !important;

    border-color:
        rgba(12,26,21,.10) !important;
}


html[data-theme="light"]
#crx-stories
.vdp-post-owner-main:hover{
    background:
        rgba(12,26,21,.065) !important;

    border-color:
        rgba(23,112,91,.22) !important;
}


html[data-theme="light"]
#crx-stories
.vdp-post-owner-text small{
    color:#6e7975 !important;
}


html[data-theme="light"]
#crx-stories
.vdp-post-owner-text strong{
    color:#0d1915 !important;
}


html[data-theme="light"]
#crx-stories
.vdp-post-owner-text em{
    color:#18745d !important;
}


html[data-theme="light"]
#crx-stories
.vdp-post-owner-main::after{
    color:#36504a !important;

    background:
        rgba(12,26,21,.055) !important;
}


/*
 * Hover stays dark in light mode too.
 * Easier to read and visually consistent.
 */


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

    #crx-stories
    .vdp-owner-hover{
        width:min(
            285px,
            calc(100vw - 30px)
        ) !important;
    }

    #crx-stories
    .vdp-post-owner-main{
        padding-right:9px !important;
    }
}