.chat-float{
  position:fixed; right:18px; bottom:92px; z-index:56;
  width:56px; height:56px; padding:0; border:3px solid #fff; border-radius:50%;
  background:linear-gradient(135deg,#1266dc,#31dcd1); color:#fff;
  display:grid; place-items:center; font-size:1.42rem; line-height:1;
  box-shadow:0 14px 34px rgba(7,26,58,.28); cursor:pointer;
}
.chat-widget{
  position:fixed; right:18px; bottom:158px; z-index:70;
  width:min(390px,calc(100vw - 28px));
  max-height:min(620px,calc(100vh - 190px));
  display:none; flex-direction:column; background:#fff;
  border:1px solid #d9e6f2; border-radius:24px; overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.28); color:#10213d;
}
.chat-widget.open{display:flex}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 17px; background:linear-gradient(135deg,#071a3a,#1266dc); color:#fff;
}
.chat-head strong,.chat-head span{display:block}
.chat-head strong{font-size:1.05rem}
.chat-head span{font-size:.78rem;color:#d9ebff;margin-top:3px}
.chat-head i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#45ef9d;margin-right:6px}
.chat-head button{
  border:0;background:rgba(255,255,255,.12);color:#fff;
  width:38px;height:38px;border-radius:12px;font-size:1.5rem;cursor:pointer
}
.chat-welcome{padding:20px;display:grid;gap:12px}
.chat-welcome p{margin:0;color:#6c7e95;line-height:1.5}
.chat-welcome label{display:grid;gap:7px;font-size:.82rem;font-weight:800}
.chat-welcome input{
  border:1px solid #d9e6f2;border-radius:14px;padding:13px 14px;font:inherit;min-width:0
}
.chat-welcome button{
  border:0;border-radius:999px;padding:13px 16px;
  background:linear-gradient(90deg,#1266dc,#31dcd1);color:#fff;font-weight:900;cursor:pointer
}
.chat-conversation{display:flex;flex-direction:column;min-height:350px;max-height:520px}
.chat-messages{
  flex:1;overflow:auto;padding:15px;background:#f4f8fc;
  display:flex;flex-direction:column;gap:10px
}
.chat-msg{
  max-width:86%;padding:10px 12px;border-radius:16px;
  font-size:.92rem;line-height:1.4;word-break:break-word
}
.chat-msg small{display:block;margin-top:5px;font-size:.69rem;opacity:.7}
.chat-msg.listener{
  align-self:flex-end;background:linear-gradient(135deg,#1266dc,#1aa9df);
  color:#fff;border-bottom-right-radius:5px
}
.chat-msg.admin{
  align-self:flex-start;background:#fff;color:#173154;
  border:1px solid #dce7f2;border-bottom-left-radius:5px
}
.chat-msg.system{
  align-self:center;background:#e8f8f1;color:#12784b;
  text-align:center;font-size:.8rem
}
.chat-form{
  display:grid;grid-template-columns:1fr 48px;gap:8px;
  padding:10px;background:#fff;border-top:1px solid #e3ebf3
}
.chat-form textarea{
  resize:none;border:1px solid #d7e4ef;border-radius:14px;
  padding:11px 12px;font:inherit;min-width:0;outline:none
}
.chat-form textarea:focus{
  border-color:#7eb5ec;box-shadow:0 0 0 3px rgba(18,102,220,.08)
}
.chat-form button{
  border:0;border-radius:14px;background:linear-gradient(135deg,#1266dc,#31dcd1);
  color:#fff;font-size:1.2rem;cursor:pointer
}
.chat-note{padding:0 12px 10px;color:#8190a4;background:#fff}
.chat-loading{padding:25px;text-align:center;color:#7a8ca4}

@media(max-width:560px){
  .chat-float{right:15px;bottom:88px;width:54px;height:54px}
  .chat-widget{
    right:7px;bottom:150px;width:calc(100vw - 14px);
    max-height:calc(100vh - 170px);border-radius:20px
  }
  .chat-conversation{min-height:320px;max-height:calc(100vh - 270px)}
}