/* ===========================
   LIFFY TikTok Feed
=========================== */

.feed-post{
    position:relative;
    z-index: 1;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#000;

    scroll-snap-align:start;
    scroll-snap-stop:always;

    transition:.3s;
}

.feed-post-glow{
    display:none;
}

.feed-content{
    position:relative;
    width:100%;
    height:100%;
}

.feed-media{
    width:100%;
    height:100%;
    display:block;
    object-fit: contain;
    background: #000;
}


.feed-overlay{
    position:absolute;
    left:16px;
    right:80px;
    bottom:90px;

    padding:12px 0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.15),
        rgba(0,0,0,.75)
    );

    color:#fff;
    z-index:10;
}

.feed-category{
display:inline-block;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);
padding:5px 14px;
border-radius:20px;
font-size:12px;
margin-bottom:8px;
}

 .feed-author{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:15px;
    color:#fff;
    cursor:pointer;
}

.feed-avatar{

width:48px;

height:48px;

border-radius:50%;

border:3px solid #fff;

object-fit:cover;

}

.feed-author strong{

font-size:17px;

font-weight:700;

}

.feed-title{
margin-top:8px;
font-size:22px;
font-weight:700;
line-height:1.3;
color:#fff;
}

.feed-description{
margin-top:6px;
font-size:14px;
line-height:1.45;
color:#f5f5f5;
padding-right:65px;
padding-bottom:4px;
word-break:break-word;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.feed-description.expanded{

display:block;

overflow:visible;

}

.more-btn{
margin-top:4px;
background:none;
border:none;
color:#6aa7ff;
font-weight:700;
font-size:13px;
padding:2px 0;
cursor:pointer;
}

.feed-actions{
position:absolute;
right:14px;
bottom:120px;

display:flex;
flex-direction:column;
align-items:center;
gap:18px;

z-index:30;
}

.action-btn{

background:transparent;

border:none;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

cursor:pointer;

padding:0;

color:#fff;

transition:.2s;

}

#followBtn{

width:52px;

height:52px;

border-radius:50%;

background:#ff2d75;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

box-shadow:0 5px 18px rgba(255,45,117,.4);

}

.action-btn:hover{

transform:scale(1.08);

}

.action-icon{
font-size:30px;
line-height:1;
}

.action-btn span:last-child{

margin-top:4px;

font-size:12px;

font-weight:700;

color:#fff;

text-shadow:0 2px 6px rgba(0,0,0,.6);

}

.save-action{

margin-top:10px;

}

#comments{

position:relative;

z-index:40;

}

.feed-post h2{

display:none;

}

.feed-post p:not(.feed-description){

margin:0;

}

.feed-post img{

display:block;

}

.feed-post video{

display:block;

}



.feed-post:hover{
    transform:none;
}

.feed-loading,
.empty-feed{

text-align:center;

padding:40px;

font-size:18px;

}

#hacksContainer{
position:relative;
width:100%;
height:100vh;
overflow-y:auto;
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
padding:0;
margin:0;
-webkit-overflow-scrolling:touch;
background:#000;
z-index:1;
}

@media(max-width:768px){

.feed-post{
width:100%;
height:100vh;
margin:0;
border-radius:0;
}

.feed-media,
.feed-content video{

height:100vh;

}

.feed-actions{

right:12px;

top:50%;

transform:translateY(-50%);

}

.feed-description{

padding-right:75px;

font-size:14px;

}

.feed-author{

bottom:95px;

}

}

/* ===== Text Posts ===== */

.text-post{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    box-sizing:border-box;
}

.text-post-content{
    text-align:center;
    color:#fff;
    width:100%;
}

.text-post-title{
    font-size:34px;
    font-weight:800;
    margin-bottom:25px;
    line-height:1.3;
}

.text-post-description{
    font-size:22px;
    line-height:1.7;
    white-space:pre-wrap;
    word-break:break-word;
}