.support-fab-root { position: fixed; bottom: var(--support-fab-offset, 1.5rem); right: var(--support-fab-offset, 1.5rem); display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; z-index: 1080; } .support-fab-root .fab-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 3rem; padding: 0.75rem 1rem; border-radius: 999px; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18); opacity: 0.95; backdrop-filter: blur(2px); transition: transform 0.2s ease, opacity 0.2s ease; } .support-fab-root .fab-trigger:hover, .support-fab-root .fab-trigger:focus-visible { opacity: 1; transform: translateY(-2px); } .support-fab-root .fab-trigger:focus-visible { outline: 2px solid rgba(0, 123, 255, 0.6); outline-offset: 2px; } .support-fab-root .fab-trigger .fab-trigger-text { font-weight: 600; } .support-fab-menu { position: relative; display: none; width: 240px; padding: 1rem; border-radius: 1rem; background: rgba(17, 24, 39, 0.92); color: #fff; box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); } .support-fab-root.is-open .support-fab-menu { display: flex; flex-direction: column; gap: 0.75rem; } .support-fab-menu::before { content: ""; position: absolute; bottom: -8px; right: 32px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); z-index: 0; border-radius: 2px; box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.4); } .support-fab-text { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); } .support-fab-actions { display: flex; flex-direction: column; gap: 0.5rem; } .support-fab-link { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 0.75rem; transition: all 0.3s ease; text-decoration: none; color: #fff; background: none; border: none; width: 100%; text-align: left; font: inherit; cursor: pointer; position: relative; overflow: hidden; } .support-fab-link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.05); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .support-fab-link:hover::before, .support-fab-link:focus-visible::before { opacity: 1; } .support-fab-link .icon { font-size: 1.25rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; flex-shrink: 0; transition: all 0.3s ease; z-index: 1; } .support-fab-link span { flex: 1; font-weight: 500; z-index: 1; position: relative; } /* Telegram Button */ .support-fab-link.support-telegram .icon { background: linear-gradient(135deg, #0088cc 0%, #005580 100%); color: #fff; box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); } .support-fab-link.support-telegram:hover .icon, .support-fab-link.support-telegram:focus-visible .icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 6px 16px rgba(0, 136, 204, 0.5); } /* Form Button */ .support-fab-link.support-form .icon { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); color: #fff; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); } .support-fab-link.support-form:hover .icon, .support-fab-link.support-form:focus-visible .icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 6px 16px rgba(249, 115, 22, 0.5); } /* Rating Button */ .support-fab-link.support-rating .icon { background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); color: #fff; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); } .support-fab-link.support-rating:hover .icon, .support-fab-link.support-rating:focus-visible .icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5); } .support-fab-link:hover, .support-fab-link:focus-visible { transform: translateX(-4px); text-decoration: none; } .support-fab-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 2px; } @media (max-width: 575.98px) { .support-fab-root { bottom: 1rem; right: 1rem; gap: 0.5rem; } .support-fab-root .fab-trigger { padding: 0.65rem 0.85rem; font-size: 0.875rem; } .support-fab-menu { width: min(260px, 80vw); } }