.right-im {
    position: fixed;
    right: 24px;
    bottom: max(72px, env(safe-area-inset-bottom));
    z-index: 990;
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 4px;
    border: 1px solid #2b3048;
    border-radius: 18px;
    background: rgba(15, 18, 34, .96);
    box-shadow: 0 8px 32px #0006;
    color: #b5b8ca;
}
.right-im__item { position: relative; }
.right-im .right-im__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.right-im__button svg { width: 25px; height: 25px; }
.right-im__icon {
    display: block;
    width: 25px;
    height: 25px;
    background: currentColor;
    -webkit-mask: var(--im-icon) center / contain no-repeat;
    mask: var(--im-icon) center / contain no-repeat;
}
.right-im__icon--weixin { --im-icon: url('/static/img/icon-im-weixin.svg'); }
.right-im__icon--phone { --im-icon: url('/static/img/icon-im-phone.svg'); }
.right-im__item:hover > .right-im__button,
.right-im__item:focus-within > .right-im__button,
.right-im .right-im__button:hover { background: #233342; color: #a4eae4; }
.right-im .right-im__button:focus-visible { outline: 2px solid #a4eae4; outline-offset: 1px; }
.right-im__top {border-top: 1px solid #1b3048 !important; }
.right-im__panel {
    position: absolute;
    right: calc(100% + 18px);
    bottom: 0;
    box-sizing: border-box;
    width: 208px;
    padding: 20px;
    border: 1px solid #2b3048;
    border-radius: 16px;
    background: #101322;
    box-shadow: 0 8px 32px #0006;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
/* Bridge the gap so the pointer can enter the panel. */
.right-im__panel::after { content: ""; position: absolute; left: 100%; top: 0; width: 20px; height: 100%; }
.right-im__panel strong { display: block; margin-bottom: 14px; color: #f4f3fa; font-size: 15px; font-weight: 600; }
.right-im__panel span { display: block; color: #b5b8ca; font-size: 12px; line-height: 1.6; }
.right-im__qr { display: block; width: 160px; height: 160px; margin: 0 auto 12px; border-radius: 8px; background: #fff; }
.right-im__panel--phone { width: 224px; }
.right-im__panel--phone a { display: block; margin: 0 0 10px; color: #a4eae4; font-size: 23px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.right-im__item:hover > .right-im__panel,
.right-im__item:focus-within > .right-im__panel,
.right-im__item.is-open > .right-im__panel { visibility: visible; opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
    .right-im { right: 12px; bottom: max(24px, env(safe-area-inset-bottom)); padding: 4px; border-radius: 14px; }
    .right-im .right-im__button { width: 40px; height: 44px; }
    .right-im__panel { right: calc(100% + 14px); }
}
@media (prefers-reduced-motion: reduce) {
    .right-im__button, .right-im__panel { transition: none; }
}