/* =====================================================
   Icodess AWS – Base Design
===================================================== */

body.icodess-desing-aws .ul-icodess-wrapper{
    background:none;
}

body.icodess-desing-aws .ul-top-cards{
    background:#f4f7fa;
    border-radius:0 0 15px 15px;
}

body.icodess-desing-aws .ul-greeting-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    background:linear-gradient(#d8e2eb,#fff);
    border-bottom:1px solid rgba(191,201,210,.5);
}

body.icodess-desing-aws .ul-greeting-left{
    display:flex;
    align-items:center;
    gap:10px;
}

body.icodess-desing-aws .ul-avatar{
    position:relative;
    width:45px;
    height:45px;
}

body.icodess-desing-aws .ul-avatar img{
    width:100%;
    height:100%;
    border-radius:15px;
    object-fit:cover;
    border:2px solid #fff;
    box-shadow:0 5px 8px rgba(0,0,0,.16);
    cursor:pointer;
    transition:transform .18s ease;
}

body.icodess-desing-aws .ul-rank{
    position:absolute;
    top:-5px;
    right:-5px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    border:1px solid #ffc107;
    display:flex;
    align-items:center;
    justify-content:center;
}

body.icodess-desing-aws .ul-rank img{
    width:14px;
}

body.icodess-desing-aws .ul-greet-info{
    max-width:120px;
}

body.icodess-desing-aws .ul-name{
    font-size:15px;
    font-weight:700;
    color:#1F2044;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.icodess-desing-aws .ul-text{
    font-family:'aref-ruqaa';
    font-size:17px;
    color:#555;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.icodess-desing-aws .ul-greeting-right img{
    width:25px;
    height:auto;
    cursor:pointer;
}

body.icodess-desing-aws .ul-users-head{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    background:linear-gradient(#fff,#d8e2eb);
    font-weight:600;
    font-size:14px;
    color:#3b71ad;
    border-radius:12px;
}

body.icodess-desing-aws .ul-users-head img{
    width:18px;
}

body.icodess-desing-aws .ul-count{
    margin-right:auto;
    background:#ff9800;
    color:#fff;
    padding:3px 8px;
    border-radius:10px;
    font-size:13px;
    transition:transform .2s ease;
}

/* =====================================================
   Premium Chat App Animations
===================================================== */

/* User item animation */
body.icodess-desing-aws .userlist_item,
body.icodess-desing-aws .ul-user{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
    animation:userFadeIn .35s ease both;
}

/* Fade + Slide */
@keyframes userFadeIn{
    from{
        opacity:0;
        transform:translateY(4px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Hover lift (App style) */
body.icodess-desing-aws .userlist_item:hover,
body.icodess-desing-aws .ul-user:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* Avatar micro motion */
body.icodess-desing-aws .userlist_item:hover img,
body.icodess-desing-aws .ul-avatar:hover img{
    transform:scale(1.03);
}

/* Online breathing effect */
body.icodess-desing-aws .userlist_item.online,
body.icodess-desing-aws .ul-user.online{
    animation:onlinePulse 4s ease-in-out infinite;
}

@keyframes onlinePulse{
    0%{
        box-shadow:0 0 0 rgba(0,0,0,0);
    }
    50%{
        box-shadow:0 0 10px rgba(0,0,0,.06);
    }
    100%{
        box-shadow:0 0 0 rgba(0,0,0,0);
    }
}

/* Counter update motion */
body.icodess-desing-aws .ul-count.updated{
    transform:scale(1.1);
}