/* ============================================================
   Telegram-робот — плавающая кнопка с псевдо-3D анимациями.
   ============================================================ */

.tg_robot {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 96px;
    height: 96px;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    display: block;
    perspective: 700px;
    transform-style: preserve-3d;
}

/* Halo — пульсирующая аура */
.tg_robot__halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(40, 145, 240, 0.45) 0%,
        rgba(40, 145, 240, 0.18) 35%,
        rgba(40, 145, 240, 0) 70%);
    animation: tgrobot_pulse 2.8s ease-out infinite;
    pointer-events: none;
    z-index: 0;
}
.tg_robot__halo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: tgrobot_pulse 2.8s ease-out infinite 1.4s;
}
@keyframes tgrobot_pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    80%  { opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Тень под роботом — отдельный «контактный» круг, дышит вместе с idle */
.tg_robot__shadow {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 70%;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    transform: translateX(-50%);
    animation: tgrobot_shadow 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes tgrobot_shadow {
    0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1); opacity: 0.65; }
    50%      { transform: translateX(-50%) scaleX(0.78) scaleY(0.6); opacity: 0.35; }
}

/* Wrapper для tilt (JS меняет rotateX/rotateY) */
.tg_robot__tilt {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

/* Сам робот */
.tg_robot__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: tgrobot_float 4.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 12px rgba(40, 145, 240, 0.35))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
    will-change: transform;
    transform-origin: 50% 100%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
}

@keyframes tgrobot_float {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    25% {
        transform: translateY(-4px) rotate(-1deg);
    }
    50% {
        transform: translateY(-9px) rotate(3deg);
    }
    75% {
        transform: translateY(-4px) rotate(1deg);
    }
}

/* Hover — робот реагирует, аура усиливается */
.tg_robot:hover .tg_robot__img {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.08);
    filter: drop-shadow(0 12px 22px rgba(40, 145, 240, 0.55))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.tg_robot:hover .tg_robot__halo {
    animation-duration: 1.4s;
}

/* Active — короткое сжатие */
.tg_robot:active .tg_robot__img {
    transform: scale(0.94);
    transition-duration: 0.08s;
}

/* Speech bubble — над головой робота, хвостик к голове */
.tg_robot__bubble {
    position: absolute;
    right: 4px;
    bottom: calc(100% - 4px);
    background: #fff;
    color: #1d1d1d;
    padding: 10px 16px;
    border-radius: 18px 18px 4px 18px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transform-origin: 90% 100%;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tg_robot__bubble::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: -6px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
}
.tg_robot.is-bubble-visible .tg_robot__bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Mobile */
@media (max-width: 720px) {
    .tg_robot {
        right: 14px;
        bottom: 14px;
        width: 72px;
        height: 72px;
    }
    .tg_robot__bubble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tg_robot__img,
    .tg_robot__halo,
    .tg_robot__halo::after,
    .tg_robot__shadow {
        animation: none !important;
    }
}