/* ==========================================================
   Floating Telegram button (tgfab.js) — bottom right on every page.
   Sits under the cookie card (z 95) and the contact drawer (z 120).
   ========================================================== */
.tgfab {
  --ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed; z-index: 90;
  right: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lift: 0px; /* set by tgfab.js to rise above the page's own bottom-right buttons */
  opacity: 0; transform: translateY(calc(20px - var(--lift))) scale(.9); pointer-events: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.tgfab.is-on { opacity: 1; transform: translateY(calc(-1 * var(--lift))); pointer-events: auto; }
body.talk-lock .tgfab { opacity: 0; transform: translateY(calc(20px - var(--lift))) scale(.9); pointer-events: none; }

/* the round button */
.tgfab__btn {
  position: relative; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #111; color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .1);
  transition: background-color .25s, transform .5s var(--ease);
}
.tgfab__btn:hover { background: #2a2a2b; transform: translateY(-4px); }
.tgfab__btn:active { transform: scale(.94); }
.tgfab__btn:focus-visible { outline: 2px solid #ff4a24; outline-offset: 3px; }
.tgfab__btn svg { width: 24px; height: 24px; margin-left: -2px; transition: transform .5s var(--ease); }
.tgfab__btn:hover svg { transform: translate(2px, -2px) rotate(-8deg); }
/* soft pulse ring */
.tgfab__btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .35);
  animation: tgfabRing 2.8s var(--ease) infinite;
}
@keyframes tgfabRing { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
/* "online" dot */
.tgfab__btn i {
  position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #ff4a24; border: 2px solid #fff;
}

/* the little popup bubble */
.tgfab__tip {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 16px;
  background: #fff; color: #111; border: 1px solid #ececec; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .05);
  text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateX(14px) scale(.96); transform-origin: right center; pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.tgfab.has-tip .tgfab__tip { opacity: 1; transform: none; pointer-events: auto; }
.tgfab__tip::after { /* tail pointing to the button */
  content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px;
  background: #fff; border: 1px solid #ececec; border-left: 0; border-bottom: 0;
  transform: translateY(-50%) rotate(45deg);
}
.tgfab__txt { display: grid; gap: 2px; }
.tgfab__txt b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tgfab__txt span { font-size: 12px; color: #8a8a8a; }
.tgfab__x {
  flex: none; width: 26px; height: 26px; margin-left: 2px; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: none; color: #8a8a8a; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tgfab__x:hover { background: rgba(17, 17, 17, .07); color: #111; }

@media (max-width: 820px) {
  .tgfab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .tgfab__btn { width: 52px; height: 52px; }
  .tgfab__btn svg { width: 21px; height: 21px; }
  .tgfab__txt b { font-size: 13px; }
  .tgfab__tip { padding: 10px 10px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tgfab, .tgfab__tip, .tgfab__btn, .tgfab__btn svg { transition: none; }
  .tgfab__btn::before { animation: none; display: none; }
}