#chatBox{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(320px,80vw);
  max-width:80vw;
  padding:5px 7px;
  box-sizing:border-box;
  background:linear-gradient(to top,rgba(0,0,0,0.35),rgba(20,30,45,0.22),rgba(0,0,0,0));
  border:none;
  z-index:30;
  pointer-events:auto;
}

#chatMessages{
  height:40px;
  margin-bottom:2px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  font-size:10px;
  line-height:12px;
  transition:height .18s ease;
}

#chatBox.expanded #chatMessages{
  height:108px;
  overflow-y:auto;
}

#chatTabs{
  display:flex;
  gap:3px;
  margin-bottom:2px;
  height:20px;
}

#chatTabs button{
  flex:1;
  height:20px;
  border:none;
  border-radius:3px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:9px;
  padding:0;
  cursor:pointer;
}

#chatTabs button.active{background:rgba(70,140,220,0.75);}

#chatForm{display:flex;gap:4px;}

#chatInput{
  flex:1;
  min-width:0;
  height:20px;
  padding:0 8px;
  border:none;
  border-radius:5px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:10px;
  outline:none;
}

#chatInput::placeholder{color:rgba(255,255,255,.65);}

#chatForm button{
  width:52px;
  height:20px;
  border:none;
  border-radius:5px;
  background:rgba(70,140,220,.75);
  color:#fff;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.chatLine{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
  animation:chatRise .18s ease forwards;
}

@keyframes chatRise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.chatLine + .chatLine{margin-top:1px;}
.chatTime{opacity:.65;margin-right:4px;color:rgba(210,235,255,.75);}
.chatName{font-weight:700;margin-right:4px;cursor:pointer;}
.chatText{color:rgba(255,255,255,.95);}
.chatBadge{display:inline-block;margin-right:4px;font-size:9px;font-weight:800;letter-spacing:.3px;}

.fade1{opacity:1;}.fade2{opacity:.75;}.fade3{opacity:.45;}.fade4{opacity:.25;}.fade5,.fade6,.fade7{display:none;}

.chatBadge.admin,.chatName.admin{color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,1);}
.chatBadge.gm,.chatName.gm{color:#ff2a2a;text-shadow:0 0 8px rgba(255,0,0,1);}
.chatType-private .chatText,.chatType-private .chatName{color:#7dbbff;}
.chatBadge.private{color:#79b8ff;text-shadow:0 0 7px rgba(80,150,255,.75);}
.chatType-friend .chatText,.chatType-friend .chatName{color:#ff7adf;}
.chatBadge.friend{color:#ff7adf;text-shadow:0 0 7px rgba(255,122,223,.75);}
.chatType-geral .chatText,.chatType-geral .chatName{color:#fff;}
.chatBadge.geral{color:#fff;}
.chatType-local .chatText,.chatType-local .chatName{color:#fff;}
.chatBadge.local{color:#fff;}
.chatType-global .chatText,.chatType-global .chatName{color:#ffd95a;}
.chatBadge.global{color:#ffd95a;text-shadow:0 0 7px rgba(255,217,90,.75);}
.chatType-guild .chatText,.chatType-guild .chatName{color:#00d9ff;text-shadow:0 0 8px rgba(0,217,255,.9);}
.chatBadge.guild{color:#00d9ff;text-shadow:0 0 8px rgba(0,217,255,.9);}
.chatType-party .chatText,.chatType-party .chatName{color:#48ff78;text-shadow:0 0 6px rgba(72,255,120,.7);}
.chatBadge.party{color:#48ff78;text-shadow:0 0 6px rgba(72,255,120,.7);}
.chatName.system,.chatLine.system .chatText,.chatType-system .chatText{color:#ffd77a;}
.chatName.me{filter:brightness(1.15);}

#chatMessages::-webkit-scrollbar{width:6px;}
#chatMessages::-webkit-scrollbar-thumb{background:rgba(120,190,255,.55);border-radius:4px;}

body.landscape #chatBox{left:50%;transform:translateX(-50%);width:min(320px,60vw);}
body.portrait #chatBox{left:50%;transform:translateX(-50%);}