<?php
/**
 * Responsive Design - Footer Helper
 * Include this before closing </body> tag to add chat widget and JS
 * 
 * Usage before closing </body>:
 * <?php include 'path/to/responsive-footer-helper.php'; ?>
 */
?>

<!-- Ensure chat widget CSS is available even if head helper was not included -->
<?php
$footer_script_path = dirname($_SERVER['SCRIPT_NAME']);
$footer_is_root = $footer_script_path === '/' || $footer_script_path === '';
$footer_asset_base = $footer_is_root ? '/interior/' : $footer_script_path . '/';
?>
<?php if (file_exists(__DIR__ . '/../assets/css/responsive-chat.css')): ?>
    <link rel="stylesheet" href="<?php echo $footer_asset_base; ?>assets/css/responsive-chat.css">
<?php endif; ?>

<!-- Critical fallback styles so the widget never enters normal page flow -->
<style>
    .chat-widget-container {
        position: fixed !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
        bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
        z-index: 99999 !important;
        pointer-events: none !important;
        width: auto !important;
        height: auto !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
    }

    .chat-widget-container > * {
        pointer-events: auto !important;
    }

    .chat-widget-container .chat-icon-button {
        position: relative !important;
        margin: 0 !important;
    }

    .chat-widget-container .chat-box {
        position: fixed !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
        bottom: calc(max(16px, env(safe-area-inset-bottom, 16px)) + 76px) !important;
        left: auto !important;
        top: auto !important;
        width: min(380px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: min(520px, calc(100vh - 108px)) !important;
        box-sizing: border-box !important;
    }

    @media (min-width: 1200px) {
        .chat-widget-container .chat-box {
            width: min(400px, calc(100vw - 40px)) !important;
            max-height: min(560px, calc(100vh - 116px)) !important;
        }
    }

    @media (max-width: 480px) {
        .chat-widget-container {
            right: 12px !important;
            bottom: 12px !important;
            max-width: calc(100vw - 24px) !important;
            max-height: calc(100vh - 24px) !important;
        }

        .chat-widget-container .chat-box {
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            top: 0 !important;
            width: 100vw !important;
            max-width: 100vw !important;
            max-height: 100vh !important;
        }
    }
</style>

<!-- Live Chat Widget -->
<?php if (file_exists(__DIR__ . '/chat-widget.html')): ?>
    <?php include __DIR__ . '/chat-widget.html'; ?>
<?php endif; ?>

<!-- Responsive Chat JavaScript - AI Integration -->
<?php if (file_exists(__DIR__ . '/../assets/js/responsive-chat-ai.js')): ?>
    <script src="<?php echo dirname($_SERVER['SCRIPT_NAME']) !== '/' ? dirname($_SERVER['SCRIPT_NAME']) : '/interior'; ?>/assets/js/responsive-chat-ai.js"></script>
<?php endif; ?>

<!-- Alternative inline script if file not found -->
<?php if (!file_exists(__DIR__ . '/../assets/js/responsive-chat-ai.js')): ?>
    <script>
        // Fallback message if responsive chat AI JS is not found
        console.warn('Responsive chat AI JS file not found. Chat widget may not be functional.');
    </script>
<?php endif; ?>
