.chat-btn {
  bottom: 5rem;
  right: 4rem;
  position: fixed;
  z-index: 10000;
}

.chat-btn-main {
  position: absolute;
  bottom: 0px;
  right: 0px;
  transform: translateX(50%) translateY(50%);

  width: 4.5rem;
  height: 4.5rem;
  border: 0.5rem solid white /*rgb(55 156 254 / 10%)*/;
  border-radius: 50%;
  background-color: #379CFE;

  cursor: pointer;
  transition: 0.3s;
}
:has(#chat-btn-state:checked) .chat-btn-main {
  width: 3rem;
  height: 3rem;
  border: 0;
  transform: translateX(50%) translateY(50%) rotate(90deg);
}
#chat-btn-chat-img, #chat-btn-cancel-img {
  font-size: 1.5rem;
  color: white;
}
:not(:has(#chat-btn-state:checked)) #chat-btn-chat-img {
  display: block;
}
:not(:has(#chat-btn-state:checked)) #chat-btn-cancel-img {
  display: none;
}
:has(#chat-btn-state:checked) #chat-btn-chat-img {
  display: none;
}
:has(#chat-btn-state:checked) #chat-btn-cancel-img {
  display: block;
}

@keyframes btn-main-blink-border {
  from {
    min-width: 3.5rem;
    min-height: 3.5rem;
    opacity: 1;
  }
  50% {
    min-width: 7.5rem;
    min-height: 7.5rem;
    opacity: 0;
  }
  to {
    min-width: 7.5rem;
    min-height: 7.5rem;
    opacity: 0;
  }
}
:not(:has(#chat-btn-state:checked)) .chat-btn-main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  border: 1px solid #379CFE;
  border-radius: 50%;
  animation: btn-main-blink-border 2s infinite;
}

.chat-btn-panel {
  position: absolute;
  bottom: 3rem;
  right: 0rem;
  transform: translateX(50%);

  display: flex;
  flex-direction: column;

  height: 0rem;
  overflow: hidden;
  opacity: 0;
  transition: 0s;
}
:has(#chat-btn-state:checked) .chat-btn-panel {
  height: 12rem;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.7s, height 0.2s;
}

.chat-btn-msgr {
  position: relative;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.chat-btn-msgr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.5rem;
  transform: translateX(-100%) translateY(-50%);
  color: black;
  background-color: white;
  border-radius: 10px;
  padding: 4px 8px 4px 8px;
  font-size: 0.8rem;
  opacity: 0;
  transition: 0s;
}
.chat-btn-msgr:hover {
  box-shadow: 0px 0px 10px gray;
}
.chat-btn-msgr:hover::before {
  opacity: 1;
  transition: 1s ease-out;
}

/* Whatsapp button */

.chat-btn-whatsapp {
  font-size: 1.5rem;
  color: white;
  background-color: rgb(0, 184, 0);
}
.chat-btn-whatsapp::before {
  content: "WhatsApp";
}
.chat-btn-whatsapp:hover {
  color: white;
}

/* Telegram button*/

.chat-btn-telegram {
  font-size: 3rem;
  color: cornflowerblue;
  background-color: white;
}
.chat-btn-telegram::before {
  content: "Telegram";
}
.chat-btn-telegram:hover {
  color: cornflowerblue;
}

/* MAX button */

.chat-btn-max {
  font-size: 2.5rem;
  color: white;
  background-image: radial-gradient(136.12% 140.74% at 99.77% 99.04%, rgb(141, 40, 200) 0%, rgb(124, 66, 250) 20%, rgb(0, 122, 255) 80%, rgb(96, 156, 235) 100%)
}
.chat-btn-max::before {
  content: "МАКС";
}
.chat-btn-max:hover {
  color: cornflowerblue;
}

/* main button */

.chat-btn-main, .chat-btn-msgr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-btn-shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
  pointer-events: none;
  transition: 0.75s;
  z-index: -1;
}
:has(#chat-btn-state:checked) .chat-btn-shadow {
  opacity: 0.5;
  pointer-events: all;
  transition: 0.75s 0.1s;
}

.bi.bi-max::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20class%3D%22bi%20bi-max%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M512.0947266%2C308.1917419c-99.421875-5.2137451-177.0074768%2C63.7746277-194.1162109%2C171.7529297c-14.1681519%2C89.4194031%2C10.9517212%2C198.377655%2C32.4380493%2C203.8618469c9.1132812%2C2.3260498%2C31.0438538-14.447998%2C46.9994507-29.4939575c2.9996643-2.8286133%2C7.5354309-3.3046265%2C11.0531616-1.1536255c24.8721313%2C15.2089233%2C53.0321655%2C26.6383667%2C84.07724%2C28.2663574c102.068512%2C5.352417%2C192.52005-74.5308838%2C197.8663025-176.6076965C695.7590332%2C402.7408142%2C614.163208%2C313.5441895%2C512.0947266%2C308.1917419z%20M345.6054993%2C826.5784302c-3.8494568-2.7254639-9.1531067-1.9857788-12.3791809%2C1.4550171c-43.119812%2C45.9900513-153.4740906%2C78.2501221-158.5290833%2C15.4796143c0-49.1799927-11.0461426-90.6229248-23.2081757-136.2524414c-14.8953705-55.8845825-31.4645691-118.0489502-31.4645691-208.3983765c0-215.4476624%2C176.6943207-377.4747925%2C386.1940918-377.4747925S879.975708%2C291.3253784%2C879.975708%2C500.9545898S710.4901733%2C876.3369751%2C508.2009583%2C876.3369751C436.4336243%2C876.3369751%2C401.6072693%2C866.2283936%2C345.6054993%2C826.5784302z%22/%3E%3C/svg%3E"); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* опционально: vertical-align для выравнивания */
  vertical-align: -.125em;
}