/* ══════════════════════════════════════════════════════════════════
   FLOATING TELEGRAM BUTTON  (partials/telegram_float)

   One button, one definition. The landing page and the member area draw
   the same partial, and for a while they styled it two different ways --
   a pill out front, two bare discs inside -- which read as two unrelated
   widgets rather than one thing the site does. Everything about how it
   LOOKS lives here and is loaded by both layouts, the way toast.css is.

   Where it SITS is the one thing that differs, because the corners differ:
   landing.css and member.css each set position, offsets and z-index, and
   the member area lifts it clear of the phone's bottom bar.

   Self-contained colours on purpose: the two stylesheets name their
   tokens differently, and a shared file cannot rely on either.

   With two links the pill holds both, divided. One glyph serves them: the
   second link is another label on the same button, not a second button.
   ══════════════════════════════════════════════════════════════════ */

.tg-float {
    /* the brand's own button, not a stock blue widget: a forest pill with a
       gold light that sweeps it, the glyph on a mint disc */
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 7px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 46%),
        linear-gradient(135deg, #1F855A 0%, #0E4630 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 30px -12px rgba(14, 70, 48, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tg-float:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 34px -12px rgba(14, 70, 48, .85);
}

/* a gold light sweeps across, then rests off-screen -- the only motion */
.tg-float::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 34%;
    background: linear-gradient(105deg, transparent, rgba(242, 201, 138, .55), transparent);
    transform: skewX(-18deg);
    animation: tgSweep 4.6s ease-in-out infinite;
}

@keyframes tgSweep {
    0%        { left: -45%; }
    42%, 100% { left: 135%; }
}

.tg-go {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 12px 0 0;
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s ease;
}

.tg-go:hover { text-decoration: none; }
.tg-go:focus-visible { outline: 2px solid #E8B268; outline-offset: 2px; }

.tg-two .tg-go { padding: 0 14px 0 0; }

.tg-two .tg-go + .tg-go {
    padding: 4px 14px;
    margin-left: 3px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.tg-two .tg-go + .tg-go .tg-float-ic { display: none; }
.tg-two .tg-go:hover { background: rgba(255, 255, 255, .11); }

.tg-float-ic {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #0E4630;
    background: linear-gradient(160deg, #EAFBF1, #B9E9CE);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 6px rgba(10, 40, 25, .35);
}

.tg-float-ic svg { margin-left: -2px; fill: currentColor; }

.tg-float-txt {
    position: relative;
    z-index: 1;
    display: grid;
    line-height: 1.25;
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.tg-float-txt small {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F2C98A;
}

/* On a phone the labels go and the pill shrinks to the glyph -- which is the
   group's, the link a person can actually write in. A channel cannot answer,
   so it is not what the one button left should open. */
@media (max-width: 767px) {
    .tg-float { padding: 6px; }
    .tg-float-txt { display: none; }
    .tg-go, .tg-two .tg-go { padding: 0; }
    .tg-two .tg-go + .tg-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-float { transition: none; }
    .tg-float::before { animation: none; opacity: 0; }
}