/* icon */
    .mail{
        position:fixed;bottom:20px;right:20px;
        width:55px;height:55px;
        background:#ff9800;color:#000;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:24px;
        cursor:pointer;
        box-shadow:0 0 15px #ff9800;
        z-index:999997;
    }

    .show{display:block}

    /* friend */
    .friend{
        padding:10px;
        border-bottom:1px solid #333;
        display:flex;
        align-items:center;
    }
    .friend:hover{background:#333}

    .avatar{
        width:42px;height:42px;
        border-radius:50%;
        border:2px solid #ff9800;
        margin-right:10px;
        object-fit:cover;
    }
    .info{flex:1}
    .name{font-weight:bold}
    .status{font-size:12px;color:#aaa}

    .onDot{
        width:8px;height:8px;
        background:#00ff9c;border-radius:50%;
    }
    .offDot{
        width:8px;height:8px;
        background:#666;border-radius:50%;
    }
    #friendBox{
        position:fixed;
        bottom:85px;
        right:20px;
        width:300px;
        background:#1a1a1a;
        border:2px solid #ffc107;
        border-radius:12px;
        display:none;
        z-index:999998;
    }

    #friendList{
        max-height:300px;     /* ความสูงกล่อง */
        overflow-y:auto;     /* เปิด scroll */
    }

    /* scrollbar สวย */
    #friendList::-webkit-scrollbar{
        width:6px;
    }
    #friendList::-webkit-scrollbar-thumb{
        background:#ff9800;
        border-radius:10px;
    }
    #chatBox{
        position:fixed;
        bottom:85px;
        right:30px;
        width:300px;
        background:#111;
        border:2px solid #ff9800;
        border-radius:12px;
        display:none;
        z-index:999999;
    }

    #chatBody{
        height:250px;
        overflow-y:auto;
        padding:10px;
    }
    .chatInput{
        display:flex;
    }
    .chatInput input{
        flex:1;
        padding:6px;
    }
    .chatInput button{
        background:#ff9800;
        border:0;
    }
    /* ของเรา */
    .me{text-align:right;margin:6px}
    .you{text-align:left;margin:6px}

    .me span{
        background:#ff9800;color:#000;
        padding:8px 12px;
        border-radius:15px 15px 0 15px;
        display:inline-block;
        max-width:75%;
    }

    .you span{
        background:#222;color:#fff;
        padding:8px 12px;
        border-radius:15px 15px 15px 0;
        display:inline-block;
        max-width:75%;
    }

    /* เวลา + seen */
    .time{
        font-size:10px;color:#aaa;
        margin-top:2px;
    }
    .me .time{
        text-align:right;
    }

    .you span{
        display:inline-block;
        background:#333;
        color:#fff;
        padding:8px 12px;
        border-radius:15px 15px 15px 0;
        max-width:75%;
    }


    .mail{
        position:fixed;bottom:20px;right:20px;
        width:55px;height:55px;
        background:#ff9800;border-radius:50%;
        display:flex;justify-content:center;
        align-items:center;font-size:24px
    }
    /* MAIL */
    .mail{
        position:fixed;
        bottom:20px;right:20px;
        background:#ff9800;
        color:#000;
        width:50px;height:50px;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:50%;
        font-size:22px;
        cursor:pointer;
        box-shadow:0 0 20px #ff980080;
        z-index: 99999;
    }
    #friendBox{
        position:fixed;
        bottom:80px;right:20px;
        width:280px;
        height:420px;
        background:#111;
        border-radius:18px;
        display:none;
        box-shadow:0 0 25px #ff980040;
        overflow:hidden;
    }
    #friendBox .header{
        background:linear-gradient(90deg,#ff9800,#ff5722);
        padding:10px;
        font-weight:bold;
    }
    /* search */
    .search{
        width:100%;
        padding:8px;
        border:none;
        outline:none;
        background:#000;
        color:#fff;
    }
    .friend{
        display:flex;
        align-items:center;
        padding:10px;
        cursor:pointer;
        border-bottom:1px solid #222;
    }
    .friend:hover{background:#1c1c1c}
    .avatar{
        width:40px;height:40px;
        border-radius:50%;
        margin-right:10px;
    }

    .name{font-weight:bold}
    .preview{
        font-size:12px;
        color:#aaa;
    }

    /* CHAT BOX */
    /* HEADER */
    #chatHeader{
        background:linear-gradient(90deg,#ff9800,#ff5722);
        padding:10px;
        display:flex;
        justify-content:space-between;
        cursor:pointer;
    }
    /* BODY */
    #chatStatus{
        font-size:11px;
    }

    #closeChat{
        cursor:pointer;
        font-size:20px;
        margin-left:8px;
    }
    /* wifi icon */
    .wifi{
        font-size:16px;
        margin-right:8px;
    }
    .online{color:#0f0}
    .offline{color:#f00}

    /* loader */
    .loader{
        width:14px;height:14px;
        border:2px solid #fff;
        border-top:2px solid transparent;
        border-radius:50%;
        animation:spin 1s linear infinite;
        display:none;
    }

    @keyframes spin{
        0%{transform:rotate(0)}
        100%{transform:rotate(360deg)}
    }
    .input{display:flex}
    .input input{flex:1}

    @media(min-width:768px){
        #chatBox{
            margin-left: 40px;
            height:420px;
            bottom:80px;right:20px;
        }
    }

    .preview{
        font-size:12px;color:#aaa;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    /* INPUT */
    .input{
        display:flex;
        gap:5px;
        padding:8px;
        background:#000;
    }

    .input input{
        flex:1;
        background:#222;
        border:none;
        color:#fff;
        padding:6px;
        border-radius:10px;
    }

    .input button{
        background:#ff9800;
        border:none;
        padding:6px 10px;
        border-radius:8px;
    }
    .notify{
        position:fixed;
        top:20px;right:20px;
        background:#222;
        color:#fff;
        padding:12px 18px;
        border-radius:12px;
        box-shadow:0 0 15px #ff9800;
        animation:slide .5s;
    }

    @keyframes slide{
        from{transform:translateX(100px);opacity:0}
        to{transform:translateX(0);opacity:1}
    }