body{
    position:relative;
}
/* icon */
.mail-icon{
    position:fixed;
    right:15px;
    bottom:15px;

    font-size:28px;
    background:#000;
    padding:12px;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 15px #ff9500;
    color:#ffb703;

    z-index:80000; /* สูงสุดในเว็บ */
    pointer-events:auto;
}

/* notify */
#notify{
    position:absolute;
    top:-5px;
    right:-5px;
    background:red;
    color:#fff;
    font-size:12px;
    padding:2px 6px;
    border-radius:50%;
    display:none;
    z-index:999997;
}

/* popup */
.friend-popup{
    position:fixed;right:10px;bottom:70px;
    width:320px;max-width:95%;
    height:420px;background:#000;
    border-radius:12px;box-shadow:0 0 20px #ff9500;
    display:none;overflow:hidden;
    z-index:2000;
}

/* search */
.search{
    height:50px;padding:10px;border:0;width:100%;
    background:#111;color:#fff;
}

/* list */
.list{
    height:calc(100% - 50px);
    overflow-y:auto;
}
.list::-webkit-scrollbar{display:none}

/* friend */
.friend{
    display:flex;gap:10px;padding:12px;
    border-bottom:1px solid #222;
    z-index:3000;
}

.avatar{
    width:42px;height:42px;border-radius:50%;
    border:2px solid #ff9500;
}

.on{color:#00ff7f}
.off{color:#888}

/* chat */
.chat{
    position:fixed;right:0;bottom:0;
    width:320px;max-width:100%;height:100%;
    background:#000;display:none;z-index:99999;
    z-index:999999;
}


.chat-head{
    color: #ffffff;
    padding:12px;border-bottom:1px solid #222;
    display:flex;gap:10px;
}

.back{cursor:pointer}

.chat-body{
    height:calc(100% - 120px);
    overflow-y:auto;padding:10px;
}

.chat-input{display:flex}
.chat-input input{
    flex:1;border:0;padding:12px;
    background:#111;color:#fff;
}
.chat-input button{
    background:#ff9500;border:0;padding:12px;
}

@media(max-width:600px){
    .friend-popup{width:100%;height:100%;bottom:0;right:0;border-radius:0}
    .chat{width:100%}
}
.unread-badge{
    background:red;
    color:white;
    font-size:11px;
    padding:2px 6px;
    border-radius:12px;
    margin-left:6px;
}
.mark{
    display:block;
    font-size:10px;
    color:#ccc;
    text-align:right;
    margin-top:2px;
    background: #000000;
}