/* ── General chat room panel ─────────────────────────────────────────────── */
#chatPop{
    padding:0;
    position:fixed;
    right:72px;
    top:0;
    left:auto;
    width:360px;
    max-width:360px;
    background:rgba(0,0,0,.8);
    text-align:left;
    #chatRoomBox{
        display:flex;
        flex-direction:column;
        max-height:80vh
    }
}
/* ── In-game floating chatbox ────────────────────────────────────────────── */
.chatbox{
    position:fixed;
    width:360px;
    height:60px;
    z-index:9999;
    background:rgba(0,0,0,0);
    box-shadow:0 .3em 1em rgba(0,0,0,0);
    border-radius:0 16px 16px 16px;
    display:none;
    flex-direction:column;
    text-align:left;
    transition:height .4s,background .4s,box-shadow .4s;
    &[data-open='1']{ display:flex; padding:8px; background:rgba(0,0,0,.7); box-shadow:0 .3em 1em rgba(0,0,0,.5) }
    .chttab{
        flex:0 0 auto;
        display:flex;
        align-items:center;
        height:44px;
        padding:0 8px 0 0;
        .drag{ flex:1 1 0; height:100%; cursor:move }
        [data-tab=chat]{
            display:flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            cursor:pointer;
            border-radius:8px;
            color:#fff;
            opacity:.85;
            &:hover{ opacity:1; background:rgba(255,255,255,.15) }
            svg{ width:20px; height:20px }
            b{ font-size:11pt; font-weight:600 }
        }
    }
}
/* ── Shared message area (.chs) ──────────────────────────────────────────── */
#chatPop .chs,
.chatbox .chs{
    flex:1 1 0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:scroll;
    display:flex;
    flex-direction:column;
    &::before{ content:''; flex:1 1 0; min-height:0 }
    &::-webkit-scrollbar{ width:20px }
    &::-webkit-scrollbar-track{ background:transparent }
    &::-webkit-scrollbar-thumb{ background-color:rgba(255,255,255,.4); border-radius:20px }
    p{
        position:relative;
        width:100%;
        margin:0;
        padding:11px 9px 8px 12px;
        line-height:110%;
        font-size:12pt;
        color:#fff;
        box-shadow:-1px 1px 0 1px rgba(255,255,255,.1) inset,1px -1px 0 1px rgba(0,0,0,.1) inset;
        cursor:pointer;
        &.csys{ cursor:default; opacity:.7; font-style:italic }
        &.ckick{ background:#600 !important }
        &.cinvite{ background:#060 !important }
        s{
            display:block;
            font-size:9pt;
            line-height:1;
            color:rgba(255,255,255,.8);
            img{ height:12px; margin:0 5px 0 0; vertical-align:middle }
            u{ float:right; padding:0 0 0 8px; opacity:.5; text-decoration:none; font-size:8pt }
        }
        span{ display:inline-block; margin:4px 0 0; font-size:11pt }
        hr{ opacity:.2 }
    }
}
#chatPop .chs{ padding:0 12px; flex:1 1 auto; overflow-y:auto }
.chatbox .chs{ padding:12px }
/* ── Shared input area (.chi) ────────────────────────────────────────────── */
#chatPop .chi,
.chatbox .chi{
    flex:0 0 auto;
    textarea{
        display:block;
        width:100%;
        padding:8px 12px;
        height:42px;
        font-size:10pt;
        background:rgba(255,255,255,.5);
        resize:none;
        outline-width:0;
        border-radius:6px;
        &:focus{ height:80px; background:rgba(255,255,255,1) }
    }
    [type='button']{ width:100%; opacity:.8; &:hover{ opacity:1 } }
}
#chatPop .chi{
    padding:10px 12px;
    border-top:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.2);
    [type='button']{ margin-top:6px }
}
.chatbox .chi{
    overflow:hidden;
    max-height:0;
    opacity:0;
    padding:0 11px;
    transition:max-height .35s ease,opacity .3s,padding .35s;
    &:hover textarea{ background:rgba(255,255,255,1) }
}
.chatbox:hover .chi{ max-height:120px; opacity:1; padding:11px }
/* ── Invite search results ───────────────────────────────────────────────── */
#chatInvResults{
    margin-top:8px;
    max-height:200px;
    overflow-y:auto;
    a{
        display:flex;
        align-items:center;
        gap:8px;
        padding:6px 8px;
        cursor:pointer;
        border-radius:4px;
        &:hover{ background:rgba(255,255,255,.15) }
        img{ height:14px }
    }
}