/* =========================================================
   HOME CHAT CSS (REVISED FINAL)
   - Fix Info Room: composer/input/emote/kirim benar-benar hilang
   - Tidak bergantung class "body.info-mode" yang tidak dipakai di HTML kamu
   - Mengandalkan #livechatCard.infoMode (sesuai struktur index.php kamu)
   ========================================================= */

/* =========================
   LIVE CHAT CONTAINER
   ========================= */
#livechatCard { }

#chatBody{
  margin-top:10px;
  height:550px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(17,28,51,.35);
}

/* =========================
   CHAT MESSAGE
   ========================= */
.chatMsgItem{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.20);
  border-radius:12px;
  margin-bottom:8px;
  position:relative;
}

.chatMeta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.chatUser{
  font-weight:900;
  color:var(--text);
}

.chatText{
  font-size:13px;
  line-height:1.45;
  color:#dfe7ff;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* =========================
   CHAT ASSET (STICKER / EMOTE)
   ========================= */
.chatAssetImg{
  display:block;
  max-width:160px;
  width:auto;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  margin-top:6px;
}

/* =========================
   CHAT TOOLS (ADMIN)
   ========================= */
.chatTools{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:6px;
  z-index:5;
}

.chatToolBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px;
  padding:4px 8px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.chatToolBtn.delete:hover{ background:rgba(255,77,77,.18); }
.chatToolBtn.dm:hover{ background:rgba(58,160,255,.18); }
.chatToolBtn.ban:hover{ background:rgba(255,180,120,.18); }

/* =========================
   ROLE BADGE & ROLE COLOR
   ========================= */
.chatRoleBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.chatMsgItem.roleAdmin .chatUser{ color:#60a5fa; }
.chatMsgItem.roleMaster .chatUser{ color:#fbbf24; }
.chatMsgItem.roleBot .chatUser{ color:#22c55e; }

/* =========================
   INFO MODE (READ ONLY)
   ========================= */
.infoModeHint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:rgba(231,236,255,.92);
  font-weight:900;
  display:none;
}

#livechatCard.infoMode .infoModeHint{ display:block; }

#livechatCard.infoMode .chatMsgItem{
  background: rgba(58,160,255,.08);
  border-color: rgba(58,160,255,.18);
}

#livechatCard.infoMode .chatText{
  font-size:16px;
  line-height:1.55;
  font-weight:900;
  color:#fff;
  letter-spacing:.2px;
}

#livechatCard.infoMode .chatMeta{
  font-size:13px;
  color:rgba(231,236,255,.85);
}

#livechatCard.infoMode .chatUser{ font-weight:1000; }

/* ====== HARD HIDE COMPOSER IN INFO MODE (FINAL) ======
   Ini yang memastikan kolom pesan + emote + kirim hilang total
*/
#livechatCard.infoMode #chatForm,
#livechatCard.infoMode #chatPickerPanel,
#livechatCard.infoMode #btnOpenPicker,
#livechatCard.infoMode #chatSendBtn,
#livechatCard.infoMode #chatMsg,
#livechatCard.infoMode #chatName{
  display:none !important;
}

/* fallback jika ada wrapper tambahan (kalau kamu pakai #chatComposer nanti) */
#livechatCard.infoMode #chatComposer{
  display:none !important;
}

/* =========================
   CHAT FORM
   ========================= */
#chatForm{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
  flex-wrap:wrap;
}

#chatName,
#chatMsg{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,18,38,.8);
  color:var(--text);
  outline:none;
}

#chatName{ width:120px; }

#chatMsg{
  flex:1 1 auto;
  min-width:0;
}

#chatSendBtn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(37,212,166,.18);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

#chatRoom{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,18,38,.8);
  color:var(--text);
}

#chatToggle{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(58,160,255,.18);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

/* =========================
   PICKER BUTTON
   ========================= */
.chatPickBtn{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
}

.chatPickBtn:hover{ background:rgba(255,255,255,.10); }
.chatPickBtn.active{ background:rgba(58,160,255,.18); }

/* =========================
   PICKER PANEL
   ========================= */
#chatPickerPanel{
  display:none;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(11,18,38,.80);
  padding:10px;
}

.pickerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.pickerTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.pickerTab{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}

.pickerTab.active{
  background:rgba(58,160,255,.22);
  border-color:rgba(58,160,255,.30);
}

.pickerClose{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}

.pickerGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:8px;
}

.pickerItem{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:64px;
  text-align:center;
}

.pickerItem:hover{ background:rgba(255,255,255,.06); }

.pickerItem img{
  width:40px;
  height:40px;
  border-radius:12px;
  object-fit:cover;
  display:block;
}

.pickerEmoji{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

.pickerLabel{
  font-size:11px;
  color:rgba(168,179,207,.95);
  line-height:1.2;
  word-break:break-word;
}

.pickerEmpty{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  color:rgba(168,179,207,.9);
  background:rgba(0,0,0,.12);
}

/* =========================
   BRAND TAG (CHAT TEXT)
   ========================= */
.brandTag{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  font-weight:1000;
  color:#fff;
  line-height:1.3;
  border:1px solid rgba(255,255,255,.12);
  margin-left:6px;
  text-decoration:none;
}

.brandTag.klikslots{
  background: linear-gradient(90deg, #FF9933 0%, #FFCC66 100%);
}

.brandTag.nusagg{
  background: linear-gradient(90deg, #FF4A1A 0%, #FF7A3A 100%);
}

.brandTag.surgagg{
  background: linear-gradient(90deg, #7A2FFF 0%, #9A4DFF 100%);
}

.brandTag:hover{ filter: brightness(1.06); }

/* =========================
   RESPONSIVE CHAT
   ========================= */
@media (max-width: 760px){
  #chatBody{ height:500px; }
  #chatName{ width:90px; }
  .pickerGrid{
    grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
    gap:8px;
  }
  .pickerItem{ min-height:62px; }
  .pickerEmoji{
    width:38px;
    height:38px;
    font-size:23px;
  }
  .pickerItem img{
    width:38px;
    height:38px;
  }
}
/* GANTI BADGE BOT JADI "WITHDRAW" */
.chatMsgItem.roleBot .chatRoleBadge{
  background: linear-gradient(90deg,#22c55e,#16a34a);
  border-color: rgba(34,197,94,.6);
  color:#fff;
  font-weight:1000;
}

.chatMsgItem.roleBot .chatRoleBadge::after{
  content:"Withdraw";
}
.chatMsgItem.roleBot .chatRoleBadge{
  font-size:0;
}
.chatMsgItem.roleBot .chatRoleBadge::after{
  font-size:11px;
}
/* FALLBACK: kalau class infoMode belum ke-set, hide composer ketika room=informasi
   butuh JS kecil untuk pasang body.room-info (lihat bawah) */
body.room-info #chatForm,
body.room-info #chatPickerPanel,
body.room-info #btnOpenPicker,
body.room-info #chatSendBtn{
  display:none !important;
}