/* Круглые кнопки мессенджеров MAX + Telegram для сайтов Project23.
   Обе кнопки круглые, самолётик Telegram летает сам.
   Без зависимостей: чистый CSS, 0 КБ JS. */

.msg-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.msg-btn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s;
  -webkit-tap-highlight-color: transparent;
}
.msg-btn:hover { transform: scale(1.09); }
.msg-btn:active { transform: scale(0.96); }

/* ====== MAX ====== */
.msg-btn--max {
  background: linear-gradient(135deg, #38c3f8 0%, #5b3df5 55%, #a62be0 100%);
  background-size: 200% 200%;
  box-shadow: 0 6px 20px rgba(91, 61, 245, 0.42);
  animation: max-gradient 7s ease infinite;
}
.msg-btn--max:hover { box-shadow: 0 10px 28px rgba(91, 61, 245, 0.6); animation-duration: 2.5s; }
.msg-btn--max img { width: 34px; height: 34px; display: block; border-radius: 9px; }

@keyframes max-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ====== Telegram ====== */
.msg-btn--tg {
  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 6px 20px rgba(34, 158, 217, 0.45);
  overflow: hidden;              /* самолётик летает внутри круга */
}
.msg-btn--tg:hover { box-shadow: 0 10px 28px rgba(34, 158, 217, 0.62); }

/* Пульсирующее кольцо — кнопка зовёт, даже когда на неё не смотрят. */
.msg-btn--tg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(42, 171, 238, 0.65);
  animation: tg-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes tg-pulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Самолётик: своё «небо» фиксированного размера, чтобы круг не дёргался. */
.msg-plane { position: relative; width: 30px; height: 30px; }
.msg-plane svg {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  fill: #fff;
  /* Летает сам: большую часть цикла стоит ровно, потом делает пролёт.
     Пауза нужна, чтобы иконка успевала читаться как «Telegram». */
  animation: plane-fly 3.6s ease-in-out infinite;
}
/* Под курсором — летает чаще, без пауз. */
.msg-btn--tg:hover .msg-plane svg { animation: plane-fly-fast 1.1s ease-in-out infinite; }

@keyframes plane-fly {
  0%, 48%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  56%      { transform: translate(3px, -3px) rotate(-8deg); opacity: 1; }   /* замах назад */
  74%      { transform: translate(15px, -13px) rotate(18deg); opacity: 0; } /* улетел */
  75%      { transform: translate(-14px, 12px) rotate(18deg); opacity: 0; } /* зашёл снизу слева */
  100%     { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes plane-fly-fast {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  45%  { transform: translate(15px, -13px) rotate(18deg); opacity: 0; }
  46%  { transform: translate(-14px, 12px) rotate(18deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* Подпись при наведении — круглая кнопка должна объяснять себя. */
.msg-btn::before {
  content: attr(data-hint);
  position: absolute;
  right: 72px;
  white-space: nowrap;
  background: #0f1720;
  color: #fff;
  font: 600 0.82rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 9px 13px;
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.msg-btn:hover::before { opacity: 1; }

/* ====== телефон ====== */
@media (max-width: 600px) {
  .msg-widget { right: 14px; bottom: 14px; gap: 12px; }
  .msg-btn { width: 56px; height: 56px; }
  .msg-btn--max img { width: 30px; height: 30px; }
  .msg-plane, .msg-plane svg { width: 27px; height: 27px; }
  .msg-btn::before { display: none; }   /* на тач-экране наведения нет */
}

/* ====== настройка «меньше анимации» ====== */
@media (prefers-reduced-motion: reduce) {
  .msg-btn--max,
  .msg-btn--tg::after,
  .msg-plane svg,
  .msg-btn--tg:hover .msg-plane svg { animation: none !important; }
  .msg-btn:hover { transform: none; }
}