/* ══════════════════════════════════════════════════════════════════
   SUPPORT TAB  (partials/support_tab)

   A tab flush with the right edge, half way down, on the landing page and in
   the member area: "Chat · Support" and the Telegram glyph, opening the
   support bot (the owner's Livegram bot; Admin > Manage Sections > Support
   Chat). Built from the approved mockup (mockup/support-tab-v6, gitignored),
   the owner's reference a vertical Telegram tab. It took the place of the
   floating channel pill: one Telegram widget on a page, not two.

   Telegram's own blue, on purpose: the one thing on the page that is not
   the site's teal, so it reads as Telegram at a glance. Self-contained
   colours, as both layouts load this file and name their tokens differently.

   Under the member area's bottom bar and /plan's sheet and its scrim (44+),
   so it never covers a panel that is open.
   ══════════════════════════════════════════════════════════════════ */

.sp-tab {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 43;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 46px;
    padding: 12px 0 10px;
    border-radius: 18px 0 0 18px;
    color: #FFFFFF;
    text-decoration: none;
    background: linear-gradient(180deg, #3CB4E8, #1E93CC);
    box-shadow: -8px 12px 26px -12px rgba(16, 98, 140, .5);
    transform: translate(0, -50%);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: spIn .6s .8s both cubic-bezier(.2, .9, .3, 1.2);
}

.sp-tab:hover {
    color: #FFFFFF;
    text-decoration: none;
    transform: translate(-5px, -50%);
    box-shadow: -12px 14px 30px -12px rgba(16, 98, 140, .5);
}

.sp-tab:focus-visible { outline: 3px solid #3CB4E8; outline-offset: 3px; }

/* the words read bottom to top, as on a book's spine */
.sp-bubble,
.sp-word {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
}

.sp-bubble {
    position: relative;
    padding: 8px 4px;
    border-radius: 9px;
    color: #1E93CC;
    background: #FFFFFF;
    font: 700 10px/1 Ubuntu, sans-serif;
    letter-spacing: .1em;
}

/* the bubble's tail, toward the word under it */
.sp-bubble::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 3px;
    border: 5px solid transparent;
    border-top: 0;
    border-bottom-color: #FFFFFF;
    transform: skewX(-25deg);
}

.sp-word { font: 700 14px/1 Ubuntu, sans-serif; letter-spacing: .16em; }

/* Chinese stands upright in a vertical line and reads top down */
html[lang|="zh"] .sp-bubble,
html[lang|="zh"] .sp-word { transform: none; letter-spacing: .1em; }
html[lang|="zh"] .sp-bubble::after { top: auto; bottom: -5px; border-top: 5px solid #FFFFFF; border-bottom: 0; }

.sp-ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #1E93CC;
    background: #FFFFFF;
}

.sp-ic svg { width: 16px; height: 16px; margin-left: -2px; fill: currentColor; }

@keyframes spIn {
    from { transform: translate(110%, -50%); }
}

/* a phone: slim enough to sit over a card's padding, never its words */
@media (max-width: 640px) {
    .sp-tab { width: 30px; gap: 7px; padding: 8px 0 6px; border-radius: 12px 0 0 12px; }
    .sp-bubble { padding: 5px 2px; border-radius: 7px; font-size: 8.5px; }
    .sp-bubble::after { left: 2px; border-width: 4px; }
    .sp-word { font-size: 11px; letter-spacing: .1em; }
    .sp-ic { width: 24px; height: 24px; }
    .sp-ic svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-tab { animation: none; transition: none; }
}