.floating-support { position: fixed; right: 20px; bottom: 24px; z-index: 1040; font-family: inherit; }
.floating-support__toggle {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
    border: 0; border-radius: 50%; background: #c7a867; color: #fff; cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,.22); padding: 0;
}
.floating-support__close { display: none; font-size: 36px; line-height: 1; }
.floating-support.is-open .floating-support__toggle svg { display: none; }
.floating-support.is-open .floating-support__close { display: block; }
.floating-support__panel {
    position: absolute; bottom: 100%; right: 0; width: 310px; max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 180px); overflow-y: auto; padding: 14px;
    border: 1px solid #333; border-radius: 16px; background: #0a0a0a; color: #f4f4f4;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.floating-support__panel[hidden] { display: none !important; }
.floating-support__heading { font-size: 14px; font-weight: 700; padding: 4px 2px 12px; }
.floating-support__channel {
    display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px;
    color: #f4f4f4; text-decoration: none; font-size: 14px;
}
.floating-support__channel img { display: block; width: 34px; height: 34px; object-fit: contain; }
.floating-support__channel:hover { background: #242018; color: #c7a867; }
.floating-support__toggle:focus-visible, .floating-support__channel:focus-visible { outline: 3px solid #c7a867; outline-offset: 3px; }
@media (max-width: 767px) {
    .floating-support { right: 14px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
    .floating-support__toggle { width: 54px; height: 54px; }
    .floating-support__panel { max-height: calc(100dvh - 210px - env(safe-area-inset-bottom, 0px)); }
}

.floating-support__header { padding: 8px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid #333; }
.floating-support__header .floating-support__heading { display: block; font-size: 19px; padding: 0; color: #c7a867; }
.floating-support__header p { margin: 6px 0 0; font-size: 13px; color: #bdbdbd; }
.floating-support__text { display: grid; gap: 4px; min-width: 0; }
.floating-support__text strong { font-size: 14px; font-weight: 700; }
.floating-support__text small { font-size: 11px; color: #bdbdbd; line-height: 1.8; }
.floating-support__arrow { margin-right: auto; color: #a38a55; font-size: 24px; }

.floating-support { animation: floating-support-enter 1.8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes floating-support-enter {
    from { transform: translateY(220px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.floating-support__hint {
    position: absolute; right: 0; bottom: calc(100% + 14px);
    width: 260px; max-width: calc(100vw - 28px); padding: 12px 16px;
    border: 1px solid #383329; border-radius: 12px; background: #0a0a0a;
    color: #f4f4f4; font-size: 13px; line-height: 1.9;
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
    animation: floating-support-hint-enter .35s ease-out both;
}
.floating-support__hint[hidden] { display: none !important; }
.floating-support__hint::after {
    content: ''; position: absolute; right: 22px; bottom: -6px;
    width: 10px; height: 10px; background: #0a0a0a;
    border-right: 1px solid #383329; border-bottom: 1px solid #383329;
    transform: rotate(45deg);
}
@keyframes floating-support-hint-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .floating-support, .floating-support__hint { animation: none; }
}

.floating-support__hint.is-hiding { animation: floating-support-hint-exit .5s ease-in both; }
@keyframes floating-support-hint-exit {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .floating-support__hint.is-hiding { animation: none; }
}