.chat-panel{
  margin-top:24px;
  background:#111923;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  overflow:hidden;
}

.chat-head{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.chat-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  font-weight:900;
}

.chat-sub{
  color:#7f8b9a;
  font-size:12px;
  margin-top:4px;
}

.chat-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.chat-unread{
  display:none;
  min-width:25px;
  height:25px;
  padding:0 7px;
  place-items:center;
  background:#ef3d32;
  color:white;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.chat-unread.show{
  display:grid;
}

.chat-chevron{
  color:#8995a5;
  font-size:18px;
}

.chat-body{
  display:none;
  border-top:1px solid rgba(255,255,255,.07);
}

.chat-panel.open .chat-body{
  display:block;
}

.chat-messages{
  height:330px;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:11px;
  background:#0b1119;
}

.chat-empty{
  margin:auto;
  color:#687585;
  text-align:center;
  line-height:1.5;
}

.chat-message{
  max-width:82%;
  align-self:flex-start;
}

.chat-message.mine{
  align-self:flex-end;
}

.chat-message-meta{
  display:flex;
  gap:7px;
  align-items:center;
  margin:0 5px 4px;
  color:#7e8a99;
  font-size:11px;
}

.chat-message.mine .chat-message-meta{
  justify-content:flex-end;
}

.chat-name{
  font-weight:900;
  color:#aeb9c7;
}

.chat-bubble{
  background:#18222f;
  border:1px solid #293543;
  border-radius:14px 14px 14px 4px;
  padding:10px 13px;
  color:#e4e9ef;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.45;
}

.chat-message.mine .chat-bubble{
  background:rgba(239,61,50,.14);
  border-color:rgba(239,61,50,.38);
  border-radius:14px 14px 4px 14px;
}

.chat-delete{
  border:0;
  background:none;
  color:#677382;
  padding:0;
  font-size:11px;
  cursor:pointer;
}

.chat-compose{
  padding:13px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  background:#111923;
}

.chat-input-wrap{
  position:relative;
}

.chat-input{
  width:100%;
  min-height:48px;
  max-height:120px;
  resize:vertical;
  border:1px solid #303c4b;
  background:#0b1119;
  color:#fff;
  border-radius:11px;
  padding:12px 48px 12px 13px;
  font-size:16px;
  font-family:inherit;
}

.chat-count{
  position:absolute;
  right:10px;
  bottom:8px;
  color:#5f6b79;
  font-size:10px;
}

.chat-send{
  align-self:end;
  min-height:48px;
  border:0;
  border-radius:11px;
  padding:0 20px;
  background:#ef3d32;
  color:white;
  font-weight:900;
  cursor:pointer;
}

.chat-send:disabled{
  opacity:.45;
}

.chat-error{
  display:none;
  padding:9px 14px;
  background:rgba(239,61,50,.1);
  color:#ff928a;
  border-top:1px solid rgba(239,61,50,.22);
  font-size:12px;
}

.chat-error.show{
  display:block;
}

@media(max-width:600px){
  .chat-messages{
    height:290px;
  }

  .chat-message{
    max-width:92%;
  }

  .chat-compose{
    grid-template-columns:1fr;
  }

  .chat-send{
    width:100%;
  }
}