<div class="chatarea">
    <div class="heading">
        <div class="text">
            <h4>Sohbet</h4>
            <p>RokitoChat v1.0</p>
        </div>
        <div class="close">
            x
        </div>
    </div>
    <div class="search">
        <input type="text" class="searchara" placeholder="Kullanıcı veya mesaj ara..">
    </div>
    <div class="list">
        <ul>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=113057" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #FF6600;">Bip</div>
                    <p>Moderatör</p>
                </div>
                <div class="msgsy norr">
                    3
                </div>
            </li>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=110667" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #8153e8;">nivusoft</div>
                    <p>nivusoft.com</p>
                </div>
                <div class="msgsy norr">
                    2
                </div>
            </li>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=3713" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #eb4235;">Coşkun Çetin</div>
                    <p>Administrator</p>
                </div>
                <div class="msgsy">
                    2
                </div>
            </li>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=129862" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #009900;">kullaniciadi</div>
                    <p>yaşanmamış sayalım</p>
                </div>
                <div class="msgsy">
                    1
                </div>
            </li>
        </ul>
    </div>
    <div class="friedns">
        <div class="text">
            <h4>Arkadaşlarım</h4>
            <p>Konuşabileceğin Kullanıcılar</p>
        </div>
        <div class="icon">
            <i class="fa fa-bars"></i>
        </div>
    </div>
    <div class="list">
        <ul>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=78557&avatartime=" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #8153e8;">MikailBaykal</div>
                    <p>Siteadi.com</p>
                </div>
            </li>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=20100" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #FF6600;">Erhan</div>
                    <p>Davay Davay</p>
                </div>
            </li>
            <li>
                <div class="img">
                    <div class="statu active"></div>
                    <img src="https://cdn.r10.net/image.php?u=96542" alt="">
                </div>
                <div class="detail">
                    <div class="nickname" style="color: #119b72;">BilalBayar</div>
                    <p>mesajalani</p>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="activemesj">
    <div class="top">
        <div class="left">
            <div class="name">
                <div class="img">
                    <img src="https://cdn.r10.net/image.php?u=113057" alt="">
                </div>
                <div class="dets">
                    <div style="color: #FF6600;">Bip</div>
                    <span>Moderatör</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="close">
                x
            </div>
        </div>
    </div>
    <div class="content">
        <div class="mgstxt">
            Moderatörlüğünüz hayırlı olsun..
        </div>
    </div>
    <div class="bottom">
        <input type="text" placeholder="Mesajınızı Yazın">
        <div class="sendbtn">
            <i class="icon-paperplane"></i>
        </div>
    </div>
</div>
<style>

    .chatarea {
        z-index: 99999999;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 430px;
        background: #fff;
        box-shadow: 0 5px 30px #32344824;
        padding: 20px;
    }
    .chatarea .list ul li {
        list-style: none;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #00000005;
    }
    .chatarea .list ul li:nth-last-child(1){
        border-bottom: inherit;
    }
    .chatarea .list ul li .img img {
        width: 45px;
    }
    .chatarea .heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 14px;
        border-bottom: 1px solid #00000010;
    }

    .chatarea .heading .text h4 {
        font-size: 20px;
        margin-bottom: 0;
    }

    .chatarea .heading .text p {
        font-size: 14px;
        opacity: .4;
        margin-bottom: 0;
    }
    .friedns {
        margin-top: 35px;
    }

    .friedns h4 {
        font-size: 20px;
        font-weight: bold;
        color: #5e617b;
        margin-bottom: 0;
    }

    .friedns p {
        margin: 0;
        opacity: .5;
    }

    .friedns {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #00000010;
    }
    input.searchara {
        border: none;
        background: #f7f7f7;
        padding: 12px 18px;
        width: 100%;
        border-radius: 3px;
    }
    input.searchara::placeholder {
        color: #c6c7d2;
        font-weight: 300;
    }

    .search {
        width: 100%;
        margin-bottom: 15px;
        padding-bottom: 14px;
    }
    .chatarea .heading .close {
        width: 30px;
        height: 30px;
        background: #f0f1f3;
        color: #7c7d8c;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        opacity: 1;
        text-shadow: none;
    }

    .chatarea .list ul {
        padding: 0;
    }

    .chatarea .list ul li .detail p {
        margin: 0;
        opacity: .7;
    }

    .chatarea .list ul li .detail .nickname {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: -6px;
    }

    .chatarea .list ul li .detail {
        margin-left: 12px;
    }

    .chatarea .list ul li .img img {
        border-radius: 50%;
    }
    .msgsy {
        margin-left: auto;
        width: 35px;
        height: 25px;
        color: #7c7d8c;
        background: #f0f1f3;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 32px;
    }
    .msgsy.norr {
        color: #ffffff;
        background: #ff5722;
    }
    .chatarea .list ul li .img {
        position: relative;
    }

    .chatarea .list ul li .img .statu {
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border: 3px solid #fff;
        background: #4caf50;
        border-radius: 11px;
    }
    .friedns {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .friedns .icon {
        font-size: 26px;
        opacity: .2;
    }
    .activemesj {
    position: fixed;
    right: 20px;
    bottom: 0;
    background: #fff;
    padding: 15px;
    width: 355px;
    border-radius: 15px 15px 0 0;
}

.activemesj .top .left .img img {
    width: 40px;
    border-radius: 50%;
}

.activemesj .top .left .name {
    display: flex;
    align-items: center;
}

.activemesj .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00000006;
}

.activemesj .top .left .name .dets {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.activemesj .top .left .name .dets span {
    margin-top: -7px;
    font-weight: 300;
    opacity: .7;
}
.activemesj .top .right .close {
    width: 30px;
    height: 30px;
    background: #f4f5f7;
    color: #7c7d8c;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    opacity: 1;
    text-shadow: none;
}
.activemesj .content {
    min-height: 240px;
    padding: 10px;
}

.activemesj .content .mgstxt {
    max-width: 250px;
    text-align: right;
    margin-left: auto;
    background: #8b8fa7;
    padding: 7px 25px;
    color: #fff;
    border-radius: 30px;
}

.bottom {
    padding-top: 15px;
    border-top: 1px solid #00000006;
    display: flex;
    align-items: center;
}

.bottom input {
    flex: 1;
    border: none;
}

.bottom .sendbtn {
    font-size: 16px;
    color: #fff;
    background: #53566f;
    width: 45px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    box-shadow: 0 3px 15px #53566f40;
}
</style>