<?php
declare(strict_types=1);
if (!defined('ABSPATH')) exit;
// $avatar_url is exposed by Widget.php
?>

<!-- Floating icon (always visible) -->
<div id="lolacore-widget-trigger">
    <img src="<?php echo esc_url($avatar_url); ?>" alt="Lola" class="lolacore-avatar" />
</div>

<!-- Chat panel (toggle visibility) -->
<div id="lolacore-widget-panel" class="lolacore-hidden">
    <!-- Header / drag handle -->
    <div class="lolacore-chat-header" id="lolacore-drag-handle">
        <div class="lolacore-header-left">
            <img src="<?php echo esc_url($avatar_url); ?>" alt="Lola" class="lolacore-header-avatar" />
            <span class="lolacore-header-title">Lola</span>
            <span class="lolacore-header-status">● ONLINE</span>
        </div>
        <div class="lolacore-header-right">
            <button id="lolacore-btn-minimize" class="lolacore-icon-btn" title="Minimize">—</button>
            <button id="lolacore-btn-close"    class="lolacore-icon-btn" title="New session">×</button>
        </div>
    </div>

    <!-- Onboarding scan status (shown only on first open) -->
    <div id="lolacore-onboarding-status" class="lolacore-hidden">
        <span id="lolacore-onboarding-text">Analyzing your site…</span>
        <div class="lolacore-progress-bar"><div class="lolacore-progress-fill"></div></div>
    </div>

    <!-- Messages area (scrollable) -->
    <div id="lolacore-messages" class="lolacore-chat-body">
        <!-- Messages rendered dynamically by JS -->
    </div>

    <!-- Input area -->
    <div class="lolacore-chat-footer" id="lolacore-chat-footer">
        <textarea id="lolacore-input" placeholder="Write to Lola..." rows="1"></textarea>
        <button id="lolacore-send">
            <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2"
                 fill="none" stroke-linecap="round" stroke-linejoin="round">
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
        </button>
    </div>

    <!-- Status bar: AJAX thinking indicator -->
    <div id="lolacore-status" class="lolacore-hidden">
        <span class="lolacore-typing-indicator">Lola is thinking…</span>
    </div>
    
    <!-- Disclaimer -->
    <div class="lolacore-chat-disclaimer" style="font-size: 11px; color: #64748b; text-align: center; padding: 4px 8px 8px; background: #ffffff; border-radius: 0 0 12px 12px;">
        Lola is an AI and can make mistakes. Please review actions before confirming.
    </div>
</div>
