.wxc{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  font-family:'Comfortaa', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
}

.wxc-bubble{
  position:relative;
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  background:var(--acc);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(252,38,56,.34);
  transition:transform .22s cubic-bezier(.3,.8,.3,1), box-shadow .22s ease;
}

.wxc-bubble:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(252,38,56,.40);
}

.wxc-bubble svg{width:25px;height:25px}

.wxc-badge{
  position:absolute;
  top:1px;
  right:1px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--acc);
}

.wxc-panel{
  position:absolute;
  right:0;
  bottom:0;
  width:384px;
  height:min(640px, calc(100vh - 96px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--bg);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  animation:wxc-in .24s cubic-bezier(.3,.85,.3,1);
}

@keyframes wxc-in{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}

.wxc-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 16px 16px 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}

.wxc-mark{
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--acc);
  display:flex;
  align-items:center;
  justify-content:center;
}

.wxc-mark img{
  width:20px;
  height:20px;
  filter:brightness(0) invert(1);
}

.wxc-head-in{flex:1;min-width:0}

.wxc-head-in b{
  display:block;
  font-size:14px;
  color:var(--ink);
  letter-spacing:-.01em;
}

.wxc-head-in span{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  color:var(--ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wxc-x{
  width:32px;
  height:32px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .16s ease, color .16s ease;
}

.wxc-x:hover{background:var(--opt-hover);color:var(--ink)}
.wxc-x svg{width:16px;height:16px}

.wxc-start{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 24px 32px;
  text-align:center;
}

.wxc-start h4{
  margin:0 0 8px;
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--ink);
}

.wxc-start p{
  margin:0 0 24px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-2);
}

.wxc-start form{text-align:left}

.wxc-start input{
  width:100%;
  height:46px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  outline:0;
  transition:border-color .18s ease;
}

.wxc-start input:focus{
  border-color:transparent;
  background:#fff;
}

[data-theme="dark"] .wxc-start input:focus{background:rgba(233,235,240,.08)}

.wxc-start input::placeholder{color:var(--ink-2);font-weight:700}

.wxc-err{
  margin:9px 2px 0 !important;
  min-height:15px;
  font-size:11.5px !important;
  line-height:1.4 !important;
  color:var(--acc) !important;
  text-align:left;
}

.wxc-go{
  width:100%;
  height:46px;
  margin-top:10px;
  border:0;
  border-radius:13px;
  background:var(--acc);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:filter .18s ease;
}

.wxc-go:hover{filter:brightness(1.07)}

.wxc-room{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.wxc-msgs{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.wxc-hint{
  align-self:center;
  max-width:80%;
  margin-bottom:4px;
  font-size:11px;
  line-height:1.5;
  color:var(--ink-2);
  text-align:center;
}

.wxc-msg{
  max-width:80%;
  padding:10px 14px;
  border-radius:16px;
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  animation:wxc-pop .2s ease;
}

@keyframes wxc-pop{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.wxc-msg.is-me{
  align-self:flex-end;
  background:var(--acc);
  color:#fff;
  border-bottom-right-radius:6px;
}

.wxc-msg.is-them{
  align-self:flex-start;
  border:1px solid var(--line);
  color:var(--ink);
  border-bottom-left-radius:6px;
}

.wxc-time{
  margin-top:5px;
  font-size:9.5px;
  opacity:.62;
}

.wxc-send{
  display:flex;
  align-items:flex-end;
  gap:9px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  flex-shrink:0;
}

.wxc-send textarea{
  flex:1;
  min-width:0;
  resize:none;
  max-height:108px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.45;
  color:var(--ink);
  outline:0;
  transition:border-color .18s ease;
}

.wxc-send textarea:focus{
  border-color:transparent;
  background:#fff;
}

[data-theme="dark"] .wxc-send textarea:focus{background:rgba(233,235,240,.08)}

.wxc-send textarea::placeholder{color:var(--ink-2);font-weight:700}

.wxc-send button{
  width:44px;
  height:44px;
  flex-shrink:0;
  border:0;
  border-radius:13px;
  background:var(--acc);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:filter .18s ease;
}

.wxc-send button:hover{filter:brightness(1.07)}
.wxc-send button svg{width:18px;height:18px}

body.wxc-lock{overflow:hidden}

@media (max-width: 560px){
  .wxc{right:16px;bottom:16px}
  .wxc-bubble{width:54px;height:54px}

  .wxc-panel{
    position:fixed;
    inset:0;
    width:auto;
    height:auto;
    border:0;
    border-radius:0;
    animation:none;
  }

  .wxc-head{padding-top:calc(16px + env(safe-area-inset-top))}
}