/* =========================================================
   FantasyTennis World Chat - fixed scroll version
   修正：聊天訊息增加時不會把輸入框往下推，訊息區固定高度並出現捲軸
   放置位置：src/main/webapp/css/chat.css
   ========================================================= */

.chat-panel{
    height:620px;
    min-height:620px;
    max-height:620px;
    display:flex;
    flex-direction:column;
    gap:12px;
    box-sizing:border-box;
    font-family:"Microsoft JhengHei", Arial, sans-serif;
    overflow:hidden;
}

/* ---------- Top bar ---------- */

.chat-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex:0 0 auto;
}

.chat-title-block{
    min-width:0;
}

.chat-title-row{
    display:flex;
    align-items:center;
    gap:9px;
}

.chat-title-icon{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,179,107,.15);
    border:1px solid rgba(255,179,107,.28);
    box-shadow:0 0 18px rgba(255,179,107,.12);
}

.chat-topbar h3,
.chat-panel h3{
    margin:0;
    color:#ffb36b;
    font-size:22px;
    font-weight:900;
    letter-spacing:.5px;
}

.chat-subtitle{
    margin:6px 0 0;
    color:rgba(255,255,255,.72);
    font-size:13px;
}

.clear-chat-btn{
    flex:0 0 auto;
    height:36px;
    padding:0 13px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#8e2525,#ff6868);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    font-family:"Microsoft JhengHei", Arial, sans-serif;
    box-shadow:0 8px 18px rgba(0,0,0,.24);
}

.clear-chat-btn:hover{
    filter:brightness(1.08);
}

/* ---------- Online users ---------- */

.web-online-box{
    flex:0 0 auto;
    padding:12px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.web-online-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
}

.web-online-heading{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffd27a;
    font-weight:900;
    font-size:14px;
}

.online-pulse{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#4bea85;
    box-shadow:0 0 0 0 rgba(75,234,133,.75);
    animation:onlinePulse 1.8s infinite;
}

@keyframes onlinePulse{
    0%{ box-shadow:0 0 0 0 rgba(75,234,133,.75); }
    70%{ box-shadow:0 0 0 8px rgba(75,234,133,0); }
    100%{ box-shadow:0 0 0 0 rgba(75,234,133,0); }
}

.web-online-count-wrap{
    display:flex;
    align-items:baseline;
    gap:4px;
    color:rgba(255,255,255,.68);
    font-size:12px;
}

#webOnlineCount{
    color:#ffd27a;
    font-size:19px;
    font-weight:950;
}

.web-online-list{
    max-height:78px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-right:3px;
}

.web-online-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar{
    width:8px;
}

.web-online-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track{
    background:transparent;
}

.web-online-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(255,255,255,.28);
}

.online-user{
    height:30px;
    display:grid;
    grid-template-columns:14px minmax(0,1fr) auto auto;
    align-items:center;
    gap:7px;
    padding:0 8px;
    border-radius:11px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.075);
    color:#fff;
    min-width:0;
}

.online-user:hover{
    background:rgba(255,255,255,.105);
    border-color:rgba(255,210,122,.24);
}

.online-user.self{
    background:rgba(255,179,107,.15);
    border-color:rgba(255,179,107,.35);
}

.online-user-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#4bea85;
    box-shadow:0 0 8px rgba(75,234,133,.7);
}

.online-user-name{
    min-width:0;
    color:#fff;
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.online-badge{
    height:19px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
}

.online-badge.gm{
    color:#fff;
    background:linear-gradient(135deg,#7b4dff,#d26bff);
    box-shadow:0 0 10px rgba(171,101,255,.25);
}

.online-badge.muted{
    color:#3a1500;
    background:#ffd27a;
}

.online-icon-btn{
    width:25px;
    height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:9px;
    background:rgba(255,255,255,.12);
    color:#fff;
    cursor:pointer;
    font-size:13px;
    line-height:1;
}

.online-icon-btn:hover{
    background:rgba(255,210,122,.25);
}

.online-icon-btn.unmute{
    background:rgba(80,232,120,.18);
}

.web-online-empty{
    color:rgba(255,255,255,.62);
    text-align:center;
    font-size:13px;
    padding:8px 0;
}

/* ---------- Messages fixed scroll area ---------- */

.chat-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:14px;
    box-sizing:border-box;
    border-radius:18px;
    background:rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.10);
}

.chat-message{
    margin-bottom:11px;
    color:#fff;
    line-height:1.45;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.chat-message:last-child{
    margin-bottom:0;
}

.chat-msg-meta{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:3px;
}

.chat-time{
    color:rgba(255,255,255,.46);
    font-size:11px;
    font-weight:700;
}

.chat-name{
    color:#ffb36b;
    font-weight:950;
    font-size:13px;
}

.chat-name.gm-clickable{
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
}

.chat-name.gm-clickable:hover{
    color:#ffdf99;
}

.chat-content{
    display:block;
    padding-left:2px;
    color:rgba(255,255,255,.94);
    font-size:14px;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.chat-system-card,
.system-message{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(168,255,114,.10);
    border:1px solid rgba(168,255,114,.18);
    color:#a8ff72;
    font-size:13px;
    font-weight:800;
    margin-bottom:8px;
}

.system-dot{
    width:18px;
    height:18px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(168,255,114,.18);
    color:#caff9f;
    font-size:12px;
    font-weight:950;
}

/* ---------- Compose / Input fixed bottom ---------- */

.chat-compose{
	position: relative;
    flex:0 0 56px;
    height:56px;
    min-height:56px;
    max-height:56px;
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:8px;
    box-sizing:border-box;
    overflow:visible;
    border-radius:16px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.10);
}

.chat-compose input{
    flex:1 1 auto;
    width:0;
    min-width:0;
    height:40px;
    min-height:40px;
    max-height:40px;
    line-height:40px;
    padding:0 13px;
    border:none;
    border-radius:12px;
    outline:none;
    background:rgba(255,255,255,.90);
    color:#222;
    font-size:14px;
    font-family:"Microsoft JhengHei", Arial, sans-serif;
    box-sizing:border-box;
    resize:none;
}

.chat-compose input:focus{
    box-shadow:0 0 0 3px rgba(255,179,107,.22);
}

.chat-compose button{
    flex:0 0 80px;
    width:80px;
    height:40px;
    min-height:40px;
    max-height:40px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#d9793d,#ffb36b);
    color:#201100;
    cursor:pointer;
    font-weight:950;
    font-size:14px;
    font-family:"Microsoft JhengHei", Arial, sans-serif;
    box-sizing:border-box;
}

.chat-compose button:hover{
    filter:brightness(1.06);
}

.chat-compose button:disabled,
.chat-compose input:disabled{
    opacity:.62;
    cursor:not-allowed;
}

.chat-login-hint{
    margin:0;
    text-align:center;
    color:rgba(255,255,255,.76);
    font-size:13px;
}

/* ---------- GM menu ---------- */

.gm-player-menu{
    position:fixed;
    z-index:9999;
    width:182px;
    padding:8px;
    border-radius:14px;
    background:rgba(0,0,0,.94);
    border:1px solid rgba(255,179,107,.42);
    box-shadow:0 12px 34px rgba(0,0,0,.68);
}

.gm-player-menu-title{
    padding:8px 10px;
    margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.11);
    color:#ffb36b;
    font-weight:950;
}

.gm-player-menu button{
    width:100%;
    display:block;
    margin:2px 0;
    padding:9px 10px;
    border:none;
    border-radius:9px;
    text-align:left;
    background:transparent;
    color:#fff;
    cursor:pointer;
    font-weight:850;
    font-family:"Microsoft JhengHei", Arial, sans-serif;
}

.gm-player-menu button:hover{
    background:rgba(255,179,107,.18);
    color:#ffb36b;
}

.gm-player-menu-cancel{
    color:#aaa !important;
}

/* ===== 聊天室未讀紅點 ===== */

.chat-unread-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    margin-left:8px;
    border-radius:999px;
    background:#ff4d5a;
    color:#fff;
    font-size:12px;
    font-weight:bold;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){
    .chat-panel{
        height:560px;
        max-height:560px;
    }

    .chat-topbar{
        flex-direction:column;
    }

    .clear-chat-btn{
        align-self:flex-end;
    }

    .web-online-list{
        max-height:72px;
    }
}

@media(max-width:520px){
    .chat-panel{
        height:540px;
        max-height:540px;
        gap:10px;
    }

    .chat-topbar h3,
    .chat-panel h3{
        font-size:20px;
    }

    .web-online-box{
        padding:10px;
    }

    .web-online-list{
        max-height:68px;
    }

    .online-user{
        height:29px;
        grid-template-columns:12px minmax(0,1fr) auto auto;
        gap:5px;
        padding:0 7px;
    }

    .online-user-name{
        font-size:12px;
    }

    .chat-messages{
        padding:12px;
    }

    .chat-compose{
        flex-basis:54px;
        height:54px;
        min-height:54px;
        max-height:54px;
        padding:7px;
        gap:7px;
    }

    .chat-compose input{
        height:40px;
        min-height:40px;
        max-height:40px;
        line-height:40px;
        font-size:14px;
    }

    .chat-compose button{
        flex-basis:68px;
        width:68px;
        height:40px;
        min-height:40px;
        max-height:40px;
        font-size:13px;
    }

}
/* ==========================================================
   Sticker
   ========================================================== */

.sticker-btn{
    flex:0 0 42px !important;
    width:42px !important;
    height:40px;
    padding:0;
    font-size:22px !important;
    border:none;
    border-radius:12px;
    cursor:pointer;
    background:linear-gradient(135deg,#ffd36b,#ffb347);
    color:#222;
}

.sticker-btn:hover{
    filter:brightness(1.08);
}

.sticker-panel{

    display:none;

    position:absolute;

    left:0;

    bottom:calc(100% + 8px);

    width:364px;

    max-width:calc(100vw - 40px);

    max-height:280px;

    overflow-y:auto;

    padding:10px;

    box-sizing:border-box;

    border-radius:14px;

    background:rgba(25,25,25,.97);

    border:1px solid rgba(255,179,107,.35);

    box-shadow:0 12px 30px rgba(0,0,0,.55);

    grid-template-columns:repeat(5,60px);

    gap:8px;

    justify-content:center;

    z-index:9999;

}

.sticker-panel.show{

    display:grid;

}

.sticker-item{

    width:60px;

    height:60px;

    border-radius:10px;

    cursor:pointer;

    object-fit:contain;

    transition:.18s;

    user-select:none;

}

.sticker-item:hover{

    transform:scale(1.12);

    background:rgba(255,255,255,.08);

}

.chat-sticker{
    width:82px;
    max-width:72px;
    height:auto;
    display:block;
    margin-top:4px;
    object-fit:contain;
}

@media(max-width:520px){

    .sticker-panel{

        width:286px;

        grid-template-columns:repeat(4,60px);

    }

}