#rubchat-widget {

  --red: #dd0504;
  --dark-red: #960303;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 5;
}

#rubchat-window {
  width: 300px;
  height: 440px;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 0 4px rgb(0 0 0 / .4);
}

#rubchat-messages {
  height: 340px;           /* чтобы не вылезал за пределы окна */
  overflow-y: scroll;      /* теперь тут scroll */
  margin-bottom: 10px;
  background-color: #fffdf9;
}

#rubchat-messages .client-message, #rubchat-messages .manager-message, #rubchat-messages .other-message{
  padding: 0.25em;
  border-radius: 5px;
}
#rubchat-messages .client-message {
  background-color: #f3f3f3;
}
#rubchat-messages .manager-message {
  background-color: #ddecec;
}
#rubchat-messages .other-message {
  background-color: #e0e0e0;
}

#rubchat-messages .rubchat-date-label {
    font-size: 13px;
    font-weight: bold;
    color: #999;
    border-radius: 4px;
    padding: 8px 0 8px 0;
    text-align: center
}

#rubchat-widget .chat-enter{
  height: 100px;
}
#rubchat-widget #rubchat-input {
  border: 1px solid #ccc;
  padding: 0.5em;
  border-radius: 5px;
  width: calc(100% - 0.25em);
}

#rubchat-widget button {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 0.25em;
  border-radius: 5px;
  margin-top: 0.35em;
}
#rubchat-widget button:hover {
  background: #960303;
  color: #fff;
}

#rubchat-widget button.rubchat {
  background: no-repeat center/contain url('/phpshop/modules/rubchat/icons/open_chat_v2.svg');
  background-color: #fff;
  padding: 0.25em;
  border-radius: 5px;
  margin-top: 0.35em;
  width:40px;
  height: 40px;
}

#rubchat-widget button.rubchat:hover {
  background: no-repeat center/contain url('/phpshop/modules/rubchat/icons/open_chat_v2h.svg');
  background-color: #fff;
}

#rubchat-widget button.rubchat.open {
  background: no-repeat center/contain url('/phpshop/modules/rubchat/icons/close_chat_v2.svg');
  background-color: #fff;
}
#rubchat-widget button.rubchat.open:hover {
  background: no-repeat center/contain url('/phpshop/modules/rubchat/icons/close_chat_v2h.svg');
  background-color: #fff;
}

#rubchat-popup {
  position: absolute;
  width: 155px;
  height: 22px;
  display: block;
  right: 0;
  top: -30px;
  background: #fff;
  border: 1px solid var(--dark-red);
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

#rubchat-popup .popup-msg{
  padding: 3px;
}

.popup-msg::before{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left: 7px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--dark-red);
}

.popup-msg::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

.popup-msg.arrow-left::before, .popup-msg.arrow-left::after{ left:5px; transform:none; }
.popup-msg.arrow-right::before, .popup-msg.arrow-right::after{ right:5px; left:auto; transform:none; }

#rubchat-widget button.rubchat.glow {
  background: no-repeat center/contain url('/phpshop/modules/rubchat/icons/open_chat_v2h.svg');
  background-color: #fff;
  animation: rubchat-glow 1.2s infinite alternate;
}

@keyframes rubchat-glow {
  0%   { box-shadow: 0 0 0px 0 var(--red); }
  100% { box-shadow: 0 0 16px 6px var(--dark-red); }
}

#rubchat-widget button.rubchat.shake {
  animation: rubchat-shake 0.5s infinite;
}

@keyframes rubchat-shake {
  0% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(0, 0) rotate(-2deg); }
  20% { transform: translate(0, 0) rotate(1deg); }
  30% { transform: translate(0, 0) rotate(0deg);}
  40% { transform: translate(0, 0) rotate(1deg);}
  50% { transform: translate(0, 0) rotate(-1deg);}
  60% { transform: translate(0, 0) rotate(0deg);}
  70% { transform: translate(0, 0) rotate(-2deg);}
  80% { transform: translate(0, 0) rotate(2deg);}
  90% { transform: translate(0, 0) rotate(0deg);}
  100% { transform: translate(0, 0) rotate(-1deg);}
}