.h5-chat{
  margin:25px 0;
  background:#101b2d;
  border:1px solid #2d415d;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 15px 45px #071b3833;
  color:#eef5ff;
  font-family:system-ui,Arial,sans-serif;
}
.h5-chat *{box-sizing:border-box}
.h5-chat-head{
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:linear-gradient(110deg,#103553,#16608a,#102740);
}
.h5-chat-title{
  font-size:21px;
  font-weight:850;
}
.h5-chat-subtitle{
  margin-top:4px;
  color:#c5dced;
  font-size:12px;
}
.h5-live{
  background:#16c784;
  padding:8px 13px;
  color:#062719;
  border-radius:30px;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}
.h5-chat-config{
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:12px;
  padding:17px;
  border-bottom:1px solid #30415a;
}
.h5-chat label{
  display:grid;
  gap:7px;
  font-size:12px;
  color:#aec7e1;
}
.h5-chat input[type=text]{
  background:#1d2e46;
  border:1px solid #38516e;
  padding:12px;
  border-radius:10px;
  color:white;
  outline:none;
  max-width:100%;
}
.h5-chat input:focus{
  border-color:#1dd7aa;
  box-shadow:0 0 0 3px #1dd7aa22;
}
.h5-chat input[type=color]{
  height:43px;
  width:55px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.h5-chat button{
  background:#16c784;
  border:0;
  color:#062d1d;
  font-weight:800;
  border-radius:10px;
  padding:12px 17px;
  cursor:pointer;
  transition:transform .2s,filter .2s;
}
.h5-chat button:hover{
  filter:brightness(1.12);
  transform:translateY(-2px);
}
.h5-chat button:disabled{
  opacity:.5;
  cursor:wait;
}
.h5-chat-preview{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-weight:800;
}
.h5-avatar{
  --avatar-color:#16c784;
  width:43px;
  height:43px;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--avatar-color);
  color:white;
  font-size:23px;
  font-weight:900;
  text-shadow:0 2px 5px #0005;
  box-shadow:0 0 17px var(--avatar-color);
  animation:h5-letter 2.6s ease-in-out infinite;
}
@keyframes h5-letter{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-5px) rotate(4deg)}
}
.h5-chat-messages{
  height:410px;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  scroll-behavior:smooth;
}
.h5-chat-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.h5-chat-content{
  flex:1;
  min-width:0;
}
.h5-chat-meta{
  display:flex;
  align-items:center;
  gap:10px;
}
.h5-chat-name{
  font-size:14px;
  font-weight:900;
}
.h5-chat-time{
  color:#829cba;
  font-size:11px;
}
.h5-chat-bubble{
  display:inline-block;
  max-width:100%;
  background:#20344d;
  margin-top:5px;
  padding:12px 15px;
  border-radius:4px 15px 15px 15px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.5;
  color:#eaf4ff;
}
.h5-chat-bottom{
  padding:15px;
  border-top:1px solid #30415a;
}
.h5-emojis{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.h5-emojis button{
  padding:7px 10px;
  background:#263c58;
  color:white;
  font-size:19px;
}
.h5-send{
  display:flex;
  gap:10px;
}
.h5-send input{flex:1;min-width:0}
.h5-chat-status{
  font-size:12px;
  color:#9dbbdb;
  margin-top:10px;
}
@media(max-width:640px){
  .h5-chat-head{padding:14px}
  .h5-chat-config{align-items:center}
  .h5-chat-preview{margin-left:0}
  .h5-send button{padding:10px}
}
@media(prefers-reduced-motion:reduce){
  .h5-avatar{animation:none}
}