<!-- Try Out Floating Action Button -->
<div class="try-out-fab-container">
    <button 
        class="try-out-fab" 
        role="button" 
        tabindex="0" 
        aria-label="Open Try It Out"
        aria-expanded="false"
        onclick="TryOutSidebar.openTryOut()"
        data-tooltip="Try out this endpoint"
    >
        <div class="fab-content">
            <span class="fab-icon">🚀</span>
        </div>
        <div class="ripple-container"></div>
        <div class="pulse-ring"></div>
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Ripple effect
    const fab = document.querySelector('.try-out-fab');
    
    fab.addEventListener('click', function(e) {
        const ripple = document.createElement('div');
        ripple.className = 'ripple';
        
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        this.querySelector('.ripple-container').appendChild(ripple);
        
        setTimeout(() => ripple.remove(), 600);
    });

    // Keyboard shortcut
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.code === 'Space') {
            e.preventDefault();
            TryOutSidebar.openTryOut();
            
            // Animate the FAB
            fab.classList.add('keyboard-triggered');
            setTimeout(() => fab.classList.remove('keyboard-triggered'), 200);
        }
    });

    // Show/hide shortcut hint
    let hintTimeout;
    fab.addEventListener('mouseenter', function() {
        clearTimeout(hintTimeout);
        document.querySelector('.shortcut-hint').classList.add('visible');
    });

    fab.addEventListener('mouseleave', function() {
        hintTimeout = setTimeout(() => {
            document.querySelector('.shortcut-hint').classList.remove('visible');
        }, 500);
    });
});
</script>