{{-- MOBILE INTERACTIVE ONBOARDING TUTORIAL & 4S IDLE NUDGE --}}
<div id="panelMobileTutorial" class="mobile-tutorial-overlay d-none" aria-hidden="true">
    {{-- Spotlight Focus Ring --}}
    <div id="mobileTutorialSpotlight" class="mobile-tutorial-spotlight">
        <div class="mobile-tutorial-pulse-ring" id="mobileTutorialPulse"></div>
    </div>

    {{-- Guiding Animated Arrow --}}
    <div id="mobileTutorialArrow" class="mobile-tutorial-arrow mobile-tutorial-arrow--down">
        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 4L24 38" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
            <path d="M12 26L24 38L36 26" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>

    {{-- Description & Navigation Card --}}
    <div id="mobileTutorialCard" class="mobile-tutorial-card">
        <div class="mobile-tutorial-card__header">
            <span class="mobile-tutorial-card__step-badge" id="mobileTutorialStepBadge">1 / 4</span>
            <button type="button" class="mobile-tutorial-card__close" id="mobileTutorialBtnSkip" aria-label="Skip">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="mobile-tutorial-card__body">
            <h4 class="mobile-tutorial-card__title" id="mobileTutorialTitle">Let's Talk About Your Chart</h4>
            <p class="mobile-tutorial-card__desc" id="mobileTutorialDesc">Explore your birth chart, planetary positions, and astrological inquiries grounded strictly in verified chart data.</p>
        </div>

        <div class="mobile-tutorial-card__footer">
            <div class="mobile-tutorial-dots" id="mobileTutorialDots">
                <span class="mobile-tutorial-dot active"></span>
                <span class="mobile-tutorial-dot"></span>
                <span class="mobile-tutorial-dot"></span>
                <span class="mobile-tutorial-dot"></span>
            </div>

            <div class="mobile-tutorial-actions">
                <button type="button" class="btn btn-sm mobile-tutorial-btn-prev d-none" id="mobileTutorialBtnPrev">
                    <i class="fa-solid fa-arrow-left me-1"></i> Back
                </button>
                <button type="button" class="btn btn-sm mobile-tutorial-btn-next" id="mobileTutorialBtnNext">
                    <span id="mobileTutorialNextText">Next</span>
                    <i class="fa-solid fa-arrow-right ms-1" id="mobileTutorialNextIcon"></i>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- 4-SECOND IDLE NUDGE TEXT & ANIMATED DASHED HAND-DRAWN ARROW --}}
<div id="mobileChatIdleNudge" class="mobile-chat-idle-nudge d-none" aria-hidden="true">
    {{-- 1. Hand-drawn text at top of arrow curve --}}
    <div class="mobile-chat-idle-nudge__text">let's talk</div>

    {{-- 2. Animated dashed arrow pointing downward to chat FAB --}}
    <div class="mobile-chat-idle-nudge__arrow">
        <svg viewBox="0 0 60 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="nudge-dashed-path" 
                  d="M18 4 C 54 22, 52 58, 30 78" 
                  stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 5"/>
            <path d="M20 66 L 30 80 L 42 68" 
                  transform="rotate(20 30 80)"
                  stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
</div>

<script>
(function initMobileAppTutorialAndIdleNudge() {
    if (window.innerWidth >= 992) return;

    const STORAGE_KEY = 'astro_mobile_tour_v9_en';
    const STORAGE_KEY_NUDGE = 'astro_mobile_nudge_seen_en';
    const overlay = document.getElementById('panelMobileTutorial');
    const spotlight = document.getElementById('mobileTutorialSpotlight');
    const pulseRing = document.getElementById('mobileTutorialPulse');
    const arrow = document.getElementById('mobileTutorialArrow');
    const card = document.getElementById('mobileTutorialCard');
    const stepBadge = document.getElementById('mobileTutorialStepBadge');
    const titleEl = document.getElementById('mobileTutorialTitle');
    const descEl = document.getElementById('mobileTutorialDesc');
    const dotsEl = document.getElementById('mobileTutorialDots');
    const btnSkip = document.getElementById('mobileTutorialBtnSkip');
    const btnPrev = document.getElementById('mobileTutorialBtnPrev');
    const btnNext = document.getElementById('mobileTutorialBtnNext');
    const nextText = document.getElementById('mobileTutorialNextText');
    const fabEl = document.getElementById('panelMobileAiFab');
    const bottomDockEl = document.querySelector('.panel-mobile-bottom-dock');
    const idleNudgeEl = document.getElementById('mobileChatIdleNudge');

    const steps = [
        {
            target: '#panelMobileAiFab',
            title: "Let's Talk About Your Chart",
            desc: 'Explore your birth chart, planetary positions, and astrological inquiries grounded strictly in verified chart data.',
            arrowDir: 'down',
            isSpecial: true,
            padding: 8,
            borderRadius: '50%'
        },
        {
            target: '#btnCommentModalMobile',
            title: 'Get Interpretation',
            desc: 'Easily access comprehensive readings, psychological insights, and downloadable PDF reports for your chart.',
            arrowDir: 'up',
            isSpecial: false,
            padding: 6,
            borderRadius: '12px'
        },
        {
            target: '#mobileNewChartBtn',
            title: 'Open New Chart',
            desc: 'Click here to calculate and explore new charts: natal charts, multi-dashboard comparisons, and relationship synastry.',
            arrowDir: 'up',
            isSpecial: false,
            padding: 6,
            borderRadius: '12px'
        },
        {
            target: '.panel-mobile-bottom-dock__item[data-bs-target="#chartsDrawer"]',
            title: 'Chart Settings',
            desc: 'Manage house systems, active transit dates, progression keys, and visual display preferences from here.',
            arrowDir: 'down',
            isSpecial: false,
            padding: 6,
            borderRadius: '16px'
        }
    ];

    let currentStep = 0;
    let isTutorialActive = false;

    function getTargetElement(selector) {
        if (!selector) return null;
        return document.querySelector(selector);
    }

    function clearElevations() {
        document.querySelectorAll('.mobile-tutorial-elevated-target').forEach(function(el) {
            el.classList.remove('mobile-tutorial-elevated-target');
        });
        if (bottomDockEl) {
            bottomDockEl.classList.remove('mobile-tutorial-elevated-dock');
        }
    }

    function renderStep(idx) {
        if (!overlay || idx < 0 || idx >= steps.length) return;
        currentStep = idx;
        clearElevations();

        const step = steps[idx];
        const targetEl = getTargetElement(step.target);

        stepBadge.textContent = (idx + 1) + ' / ' + steps.length;
        titleEl.textContent = step.title;
        descEl.textContent = step.desc;

        if (idx === 0) {
            document.body.classList.add('mobile-tutorial-step-0');
            card.classList.add('mobile-tutorial-card--special');
            pulseRing.classList.remove('d-none');
            if (targetEl) targetEl.classList.add('mobile-tutorial-elevated-target');
            if (bottomDockEl) bottomDockEl.classList.add('mobile-tutorial-elevated-dock');
        } else {
            document.body.classList.remove('mobile-tutorial-step-0');
            card.classList.remove('mobile-tutorial-card--special');
            pulseRing.classList.add('d-none');
        }

        const dots = dotsEl.querySelectorAll('.mobile-tutorial-dot');
        dots.forEach((dot, dIdx) => {
            dot.classList.toggle('active', dIdx === idx);
        });

        if (idx === 0) {
            btnPrev.classList.add('d-none');
        } else {
            btnPrev.classList.remove('d-none');
        }

        if (idx === steps.length - 1) {
            nextText.textContent = 'Start';
        } else {
            nextText.textContent = 'Next';
        }

        if (targetEl && targetEl.offsetParent !== null) {
            const rect = targetEl.getBoundingClientRect();
            const pad = step.padding || 6;
            const top = rect.top - pad;
            const left = rect.left - pad;
            const width = rect.width + (pad * 2);
            const height = rect.height + (pad * 2);

            spotlight.style.top = top + 'px';
            spotlight.style.left = left + 'px';
            spotlight.style.width = width + 'px';
            spotlight.style.height = height + 'px';
            spotlight.style.borderRadius = step.borderRadius || '12px';

            const centerX = rect.left + (rect.width / 2);
            const centerY = rect.top + (rect.height / 2);

            arrow.className = 'mobile-tutorial-arrow mobile-tutorial-arrow--' + step.arrowDir;
            if (step.isSpecial) arrow.classList.add('mobile-tutorial-arrow--special');

            if (step.arrowDir === 'down') {
                arrow.style.left = (centerX - 24) + 'px';
                arrow.style.top = (rect.top - 46) + 'px';
                arrow.style.bottom = 'auto';

                card.style.top = 'auto';
                card.style.bottom = (window.innerHeight - rect.top + 50) + 'px';
            } else {
                arrow.style.left = (centerX - 24) + 'px';
                arrow.style.top = (rect.bottom + 2) + 'px';
                arrow.style.bottom = 'auto';

                card.style.top = (rect.bottom + 52) + 'px';
                card.style.bottom = 'auto';
            }

            const cardRect = card.getBoundingClientRect();
            if (cardRect.top < 60) {
                card.style.top = '65px';
                card.style.bottom = 'auto';
            }
        }
    }

    function startTutorial() {
        if (!overlay) return;
        isTutorialActive = true;
        hideIdleNudge();
        overlay.classList.remove('d-none');
        overlay.style.display = 'block';
        document.body.classList.add('mobile-tutorial-open');
        renderStep(0);
    }

    function completeTutorial() {
        if (!overlay) return;
        isTutorialActive = false;
        clearElevations();
        overlay.classList.add('d-none');
        overlay.style.display = 'none';
        document.body.classList.remove('mobile-tutorial-open');
        document.body.classList.remove('mobile-tutorial-step-0');
        try {
            localStorage.setItem(STORAGE_KEY, '1');
            localStorage.setItem(STORAGE_KEY_NUDGE, '1');
        } catch(e) {}
        markNudgeAsSeen();
    }

    function openAiChatDirect() {
        markNudgeAsSeen();
        if (isTutorialActive) {
            completeTutorial();
        }
        setTimeout(function() {
            if (window.aiAssistant) {
                if (!window.aiAssistant.chatUI.isOpen) {
                    window.aiAssistant.handleToggleChat();
                }
            } else {
                const triggerBtn = document.getElementById('aiAssistantBtn') || document.getElementById('aiAssistantRightTabBtn');
                triggerBtn?.click();
            }
        }, 10);
    }

    if (spotlight) {
        spotlight.addEventListener('click', function(e) {
            if (currentStep === 0) {
                e.preventDefault();
                e.stopPropagation();
                openAiChatDirect();
            }
        });
        spotlight.addEventListener('touchend', function(e) {
            if (currentStep === 0) {
                e.preventDefault();
                e.stopPropagation();
                openAiChatDirect();
            }
        });
    }

    if (fabEl) {
        fabEl.addEventListener('click', function(e) {
            markNudgeAsSeen();
            if (isTutorialActive && currentStep === 0) {
                e.preventDefault();
                e.stopPropagation();
                openAiChatDirect();
            }
        }, true);

        fabEl.addEventListener('touchend', function(e) {
            markNudgeAsSeen();
            if (isTutorialActive && currentStep === 0) {
                e.preventDefault();
                e.stopPropagation();
                openAiChatDirect();
            }
        }, true);
    }

    if (btnNext) {
        btnNext.addEventListener('click', function() {
            if (currentStep < steps.length - 1) {
                renderStep(currentStep + 1);
            } else {
                completeTutorial();
            }
        });
    }

    if (btnPrev) {
        btnPrev.addEventListener('click', function() {
            if (currentStep > 0) {
                renderStep(currentStep - 1);
            }
        });
    }

    if (btnSkip) {
        btnSkip.addEventListener('click', function() {
            completeTutorial();
        });
    }

    let idleTimer = null;
    let autoHideTimer = null;
    let nudgeShowCount = 0;
    let isNudgeExhausted = !!localStorage.getItem(STORAGE_KEY_NUDGE);

    const IDLE_DELAY_MS = 4000;
    const VISIBLE_DURATION_MS = 3000;
    const MAX_NUDGE_SHOWS = 3;

    function isAiChatOpen() {
        const assistantContainer = document.getElementById('aiAssistantContainer');
        const chatWindow = document.getElementById('aiChatWindow');
        return !!(assistantContainer?.classList.contains('ai-open') || chatWindow?.classList.contains('show'));
    }

    function isNudgeVisible() {
        return !!(idleNudgeEl && !idleNudgeEl.classList.contains('d-none'));
    }

    function markNudgeAsSeen() {
        isNudgeExhausted = true;
        try {
            localStorage.setItem(STORAGE_KEY_NUDGE, '1');
        } catch(e) {}
        hideIdleNudge();
        if (idleTimer) {
            clearTimeout(idleTimer);
            idleTimer = null;
        }
    }

    function hideIdleNudge() {
        if (autoHideTimer) {
            clearTimeout(autoHideTimer);
            autoHideTimer = null;
        }
        if (idleNudgeEl) {
            idleNudgeEl.classList.add('d-none');
        }
    }

    function showIdleNudge() {
        if (!idleNudgeEl) return;
        if (isNudgeExhausted || nudgeShowCount >= MAX_NUDGE_SHOWS) return;
        if (isTutorialActive) return;
        if (isAiChatOpen()) return;
        if (window.innerWidth >= 992) return;

        if (document.querySelector('.modal.show, .offcanvas.show')) {
            if (idleTimer) clearTimeout(idleTimer);
            idleTimer = setTimeout(showIdleNudge, IDLE_DELAY_MS);
            return;
        }

        nudgeShowCount++;
        idleNudgeEl.classList.remove('d-none');

        if (autoHideTimer) clearTimeout(autoHideTimer);
        autoHideTimer = setTimeout(function() {
            hideIdleNudge();
            if (nudgeShowCount >= MAX_NUDGE_SHOWS) {
                markNudgeAsSeen();
            } else {
                if (idleTimer) clearTimeout(idleTimer);
                idleTimer = setTimeout(showIdleNudge, IDLE_DELAY_MS);
            }
        }, VISIBLE_DURATION_MS);
    }

    function handleUserActivity() {
        if (isNudgeExhausted || nudgeShowCount >= MAX_NUDGE_SHOWS) {
            hideIdleNudge();
            if (idleTimer) {
                clearTimeout(idleTimer);
                idleTimer = null;
            }
            return;
        }

        if (isNudgeVisible()) {
            hideIdleNudge();
        }

        if (idleTimer) clearTimeout(idleTimer);
        if (isTutorialActive || isAiChatOpen() || window.innerWidth >= 992) return;

        idleTimer = setTimeout(showIdleNudge, IDLE_DELAY_MS);
    }

    if (idleNudgeEl) {
        idleNudgeEl.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            openAiChatDirect();
        });
        idleNudgeEl.addEventListener('touchend', function(e) {
            e.preventDefault();
            e.stopPropagation();
            openAiChatDirect();
        });
    }

    document.addEventListener('click', function(e) {
        if (e.target.closest('#panelMobileAiFab, #mobileChatIdleNudge, #aiAssistantBtn, #aiAssistantRightTabBtn, .ai-assistant-btn')) {
            markNudgeAsSeen();
        }
    }, true);

    const userEvents = ['touchstart', 'touchmove', 'scroll', 'keydown', 'mousedown', 'pointerdown'];
    userEvents.forEach(function(evt) {
        window.addEventListener(evt, function() {
            handleUserActivity();
        }, { passive: true });
    });

    window.addEventListener('load', function() {
        if (!localStorage.getItem(STORAGE_KEY)) {
            setTimeout(startTutorial, 750);
        } else {
            handleUserActivity();
        }
    });

    window.addEventListener('resize', function() {
        if (isTutorialActive) {
            renderStep(currentStep);
        }
    });

    window.restartMobileTutorial = function() {
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem(STORAGE_KEY_NUDGE);
        startTutorial();
    };
})();
</script>