/**
 * Visuals & Logo Builder – AI-assisted logo, social media en branding
 * Chat gebruikt subagent=visuals (programmeerbaar in ai-subagents-manager)
 * www.itlive.nl/visuals en https://examples.itlive.nl/visuals
 */
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: 0');

$host = $_SERVER['HTTP_HOST'] ?? 'localhost';
$scheme = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? 'https' : 'http';
$portal_host = in_array(strtolower($host), ['www.itlive.nl', 'itlive.nl'], true) ? 'portal.itlive.nl' : $host;
// Op itlive.nl: portal API eerst zodat AI-chat altijd werkt
$use_portal_api_first = in_array(strtolower($host), ['www.itlive.nl', 'itlive.nl'], true);
$api_base = $use_portal_api_first ? ($scheme . '://' . $portal_host . '/admin/api') : ($scheme . '://' . $host . '/admin/api');
$sitechat_url = $scheme . '://' . $portal_host . '/sitechat/';
$maak_url = $scheme . '://' . ($host === 'portal.itlive.nl' ? 'www.itlive.nl' : $host) . '/maak-iets-geweldigs/';
$idee_url = 'https://itlive.nl/idee/';
$initial_q = isset($_GET['q']) ? trim((string)$_GET['q']) : '';
$base_url = $scheme . '://' . $host;
$portal_base = $scheme . '://' . $portal_host;
$kvk_proxy_url = $portal_base . '/klant/api/kvk-lookup-proxy.php';
if (is_file(__DIR__ . '/../includes/ai-fallback-messages.php')) {
    require_once __DIR__ . '/../includes/ai-fallback-messages.php';
}
$ai_fallback_visuals = function_exists('ai_fallback_generic') ? ai_fallback_generic('default') : 'Genereren mislukt. Probeer het later opnieuw.';
?>    <meta name="description" content="Flyers, social posts en logo's met AI. Vul product en doelgroep in, kies flyer of banner – direct genereren en als PDF downloaden. Chat met de AI of gebruik de Marketing-tab.">    <style>
        :root {
            --v-bg-dark: #1e1b4b;
            --v-bg-mid: #312e81;
            --v-bg-light: #4c1d95;
            --v-accent: #a78bfa;
            --v-accent-strong: #8b5cf6;
            --v-accent-muted: rgba(167, 139, 250, 0.25);
            --v-accent-border: rgba(167, 139, 250, 0.35);
            --v-text: #e2e8f0;
            --v-text-muted: #94a3b8;
            --v-surface: rgba(30, 27, 75, 0.9);
            --v-surface-panel: rgba(55, 48, 163, 0.35);
            --v-radius: 12px;
            --v-radius-lg: 16px;
            --v-space: 1rem;
            --v-space-sm: 0.75rem;
            --v-shadow: 0 8px 32px rgba(0,0,0,0.25);
            --v-shadow-card: 0 4px 20px rgba(0,0,0,0.15);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(180deg, var(--v-bg-dark) 0%, var(--v-bg-mid) 25%, var(--v-bg-light) 50%, #5b21b6 75%, #6d28d9 100%);
            min-height: 100vh;
            color: var(--v-text);
            line-height: 1.5;
        }
        body { display: flex; flex-direction: column; min-height: 100vh; }
        .header {
            display: flex; align-items: center; justify-content: space-between;
            padding: var(--v-space-sm) 1.5rem;
            background: rgba(30, 27, 75, 0.97);
            border-bottom: 1px solid var(--v-accent-border);
            flex-wrap: wrap; gap: var(--v-space-sm);
            flex-shrink: 0;
            backdrop-filter: blur(12px);
        }
        .header-logo { font-weight: 800; font-size: 1.25rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
        .header-logo:hover { color: var(--v-accent); }
        .header-nav { display: flex; gap: 1.5rem; align-items: center; }
        .header-nav a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; transition: color 0.2s; }
        .header-nav a:hover { color: #fff; }
        .main { width: 100%; max-width: 100%; margin: 0; padding: var(--v-space) 1.5rem; flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .hero {
            text-align: center; margin-bottom: 1.25rem; flex-shrink: 0;
            padding: 0.5rem 0;
        }
        .hero h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); margin-bottom: 0.6rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
        .hero p { color: var(--v-accent); font-size: 1.05rem; line-height: 1.65; max-width: 52ch; margin: 0 auto; }
        .visuals-layout { display: flex; gap: 1.5rem; align-items: stretch; flex: 1; min-height: 0; flex-wrap: nowrap; width: 100%; }
        .visuals-chat { flex: 1; min-width: 320px; min-height: 0; display: flex; flex-direction: column; }
        .visuals-werkruimte {
            flex: 1; min-width: 420px; max-width: 55%;
            background: var(--v-surface-panel);
            border: 1px solid var(--v-accent-border);
            border-radius: var(--v-radius-lg);
            overflow: hidden;
            box-shadow: var(--v-shadow);
            display: flex; flex-direction: column; min-height: 320px;
            backdrop-filter: blur(8px);
        }
        @media (max-width: 1024px) { .visuals-layout { flex-wrap: wrap; } .visuals-werkruimte { max-width: 100%; min-width: 100%; } }
        @media (max-width: 900px) { .visuals-werkruimte { min-width: 100%; min-height: 320px; } .visuals-chat { min-width: 100%; } }
        .visuals-werkruimte-head { padding: var(--v-space) var(--v-space) 0; }
        .visuals-werkruimte-section { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; padding: 0 0.25rem; }
        .visuals-werkruimte-tabs {
            display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.65rem var(--v-space);
            border-bottom: 1px solid var(--v-accent-border);
            background: rgba(15, 23, 42, 0.4);
            border-radius: var(--v-radius) var(--v-radius) 0 0;
        }
        .visuals-werkruimte-tabs button {
            flex: 1; min-width: 0; padding: 0.65rem 0.85rem; background: transparent; border: 1px solid transparent;
            color: var(--v-text-muted); font-weight: 600; font-size: 0.85rem; cursor: pointer;
            transition: color 0.2s, background 0.2s, border-color 0.2s; border-radius: 10px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .visuals-werkruimte-tabs button:hover { color: var(--v-accent); background: var(--v-accent-muted); border-color: var(--v-accent-border); }
        .visuals-werkruimte-tabs button.active { color: #fff; background: rgba(167, 139, 250, 0.35); border-color: var(--v-accent); }
        @media (min-width: 420px) { .visuals-werkruimte-tabs button { min-width: 4.5em; } }
        .visuals-werkruimte-panel { display: none; flex: 1; flex-direction: column; padding: var(--v-space); min-height: 280px; overflow-y: auto; }
        .visuals-werkruimte-panel.active { display: flex; }
        .visuals-draw-toolbar {
            display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;
        }
        .visuals-draw-toolbar input[type="color"] {
            width: 38px; height: 38px; padding: 3px; border: 2px solid var(--v-accent-border);
            border-radius: 10px; cursor: pointer; background: var(--v-surface);
        }
        .visuals-draw-toolbar button {
            padding: 0.55rem 0.9rem; border-radius: 10px; border: 1px solid var(--v-accent-border);
            background: var(--v-surface); color: var(--v-text); font-size: 0.85rem; font-weight: 500;
            cursor: pointer; transition: all 0.2s;
        }
        .visuals-draw-toolbar button:hover { background: var(--v-accent-muted); color: #fff; }
        .visuals-draw-toolbar button.active { background: rgba(167,139,250,0.4); border-color: var(--v-accent); color: #fff; }
        .visuals-canvas-wrap { flex: 1; min-height: 260px; background: #1e1b4b; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .visuals-canvas-wrap canvas { display: block; cursor: crosshair; border-radius: 8px; max-width: 100%; max-height: 100%; touch-action: none; }
        .visuals-ai-panel {
            display: flex; flex-direction: column; gap: 1rem;
        }
        .visuals-ai-panel label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--v-text); }
        .visuals-ai-panel input[type="text"],
        .visuals-ai-panel input[type="number"],
        .visuals-ai-panel select {
            padding: 0.7rem 1rem; border-radius: 10px; border: 2px solid var(--v-accent-border);
            background: var(--v-surface); color: #fff; font-size: 0.95rem; width: 100%;
            transition: border-color 0.2s;
        }
        .visuals-ai-panel input:focus, .visuals-ai-panel select:focus { outline: none; border-color: var(--v-accent); }
        .visuals-ai-panel input::placeholder { color: var(--v-text-muted); }
        .visuals-ai-panel button.gen {
            padding: 0.8rem 1.25rem; border-radius: 10px;
            background: linear-gradient(135deg, var(--v-accent-strong), var(--v-accent));
            color: #fff; border: none; font-weight: 600; cursor: pointer; font-size: 1rem;
            transition: opacity 0.2s, transform 0.1s;
        }
        .visuals-ai-panel button.gen:hover { opacity: 0.95; transform: translateY(-1px); }
        .visuals-ai-placeholder {
            padding: 1rem; background: var(--v-accent-muted); border-radius: var(--v-radius);
            font-size: 0.88rem; color: var(--v-accent); line-height: 1.55; border: 1px solid var(--v-accent-border);
        }
        .chat-box {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: var(--v-radius-lg);
            overflow: hidden;
            box-shadow: var(--v-shadow-card);
            display: flex; flex-direction: column; flex: 1; min-height: 0;
        }
        .chat-messages {
            min-height: 280px; max-height: min(70vh, 600px);
            overflow-y: auto; padding: 1.25rem 1.5rem;
            -webkit-overflow-scrolling: touch;
            background: #f7f7f8;
            flex: 1;
        }
        .chat-msg {
            margin-bottom: 1rem; padding: 1rem 1.35rem;
            border-radius: 18px; font-size: 0.95rem; line-height: 1.65;
            max-width: 85%; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }
        .chat-msg.user {
            background: #2d3748; color: #e2e8f0; margin-left: auto;
            border: none; font-weight: 450;
        }
        .chat-msg.assistant {
            background: #fff; color: #374151; margin-right: auto;
            border: 1px solid #e5e7eb;
        }
        .chat-msg.assistant strong, .chat-msg.assistant b { font-weight: 600; color: #111827; }
        .chat-msg.assistant em, .chat-msg.assistant i { font-style: italic; }
        /* Links in AI-antwoord altijd als knop: duidelijk klikbaar, contrast, hover */
        .chat-msg.assistant a {
            display: inline-block;
            padding: 8px 16px;
            margin: 4px 8px 4px 0;
            border-radius: 10px;
            background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
            color: #4338ca !important;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            border: 1px solid rgba(99, 102, 241, 0.35);
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
        }
        .chat-msg.assistant a:hover {
            background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
            color: #3730a3 !important;
            text-decoration: none;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
        }
        .chat-msg.assistant a:focus {
            outline: 2px solid #6366f1;
            outline-offset: 2px;
        }
        /* Actieknoppen onder AI-antwoord (quick replies) */
        .chat-msg-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid #e5e7eb;
        }
        .chat-msg-actions .chat-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            border: none;
            cursor: pointer;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
            transition: all 0.2s;
        }
        .chat-msg-actions .chat-action-btn:hover {
            background: #e0e7ff;
            border-color: #a78bfa;
            color: #4338ca;
        }
        .chat-msg-actions .chat-action-btn.primary {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
            color: #fff;
            border-color: transparent;
        }
        .chat-msg-actions .chat-action-btn.primary:hover {
            opacity: 0.95;
            transform: translateY(-1px);
        }
        .chat-msg-image-card { margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; background: #f8fafc; max-width: 100%; width: 100%; }
        @media (min-width: 500px) { .chat-msg-image-card { max-width: 520px; } }
        .chat-msg-image-card img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: #fff; }
        @media (min-width: 500px) { .chat-msg-image-card img { max-height: 420px; } }
        .chat-msg-image-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #e2e8f0; }
        .chat-msg-image-actions a, .chat-msg-image-actions button { padding: 8px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; background: #e0e7ff; color: #4338ca; }
        .chat-msg-image-actions a:hover, .chat-msg-image-actions button:hover { background: #c7d2fe; color: #3730a3; }
        .chat-msg-image-actions .btn-download { background: #0f172a; color: #fff !important; }
        .chat-msg-image-actions .btn-download:hover { background: #334155; color: #fff !important; }
        .chat-msg-image-actions .btn-verbeter { background: #6d28d9; color: #fff !important; }
        .chat-msg-image-actions .btn-verbeter:hover { background: #5b21b6; color: #fff !important; }
        .chat-typing { display: flex; gap: 4px; padding: 1rem; background: #f8fafc; }
        .chat-typing span { width: 8px; height: 8px; background: #8b5cf6; border-radius: 50%; animation: bounce 1.4s ease-in-out infinite both; }
        .chat-typing span:nth-child(1){animation-delay:-.32s;}
        .chat-typing span:nth-child(2){animation-delay:-.16s;}
        @keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
        .chat-input-row { display: flex; gap: 0.75rem; padding: 1rem; border-top: 1px solid #e2e8f0; background: #fff; }
        .chat-input { flex: 1; padding: 0.9rem 1.15rem; border-radius: 12px; border: 2px solid #e2e8f0; background: #fff; color: #1e293b; font-size: 1rem; transition: border-color 0.2s; }
        .chat-input:focus { outline: none; border-color: var(--v-accent-strong); }
        .chat-input::placeholder { color: #64748b; }
        .chat-send { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--v-accent-strong), var(--v-accent)); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; }
        .chat-send:hover:not(:disabled) { opacity: 0.92; }
        .chat-send:disabled { opacity: 0.6; cursor: not-allowed; }
        /* Diensten-overzicht: tegels met icoon + titel + korte zin */
        .chat-services-overview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 0.65rem;
            margin-bottom: 1rem;
            padding: 0 1rem 1rem;
            background: #fff;
        }
        .chat-service-tile {
            display: flex; flex-direction: column; align-items: center; text-align: center;
            padding: 1rem 0.75rem; border-radius: var(--v-radius);
            background: #f8fafc; border: 1px solid #e2e8f0; color: #334155;
            cursor: pointer; transition: all 0.2s ease; text-decoration: none;
        }
        .chat-service-tile:hover {
            background: #e0e7ff; border-color: var(--v-accent); color: #4338ca;
            transform: translateY(-2px); box-shadow: var(--v-shadow-card);
        }
        .chat-service-tile:focus { outline: 2px solid var(--v-accent-strong); outline-offset: 2px; }
        .chat-service-tile .tile-icon { font-size: 1.85rem; margin-bottom: 0.4rem; line-height: 1; }
        .chat-service-tile .tile-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; }
        .chat-service-tile .tile-desc { font-size: 0.72rem; color: #64748b; line-height: 1.35; }
        .chips {
            display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; padding: 0 1rem 1rem; background: #fff;
        }
        .chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 0.55rem 1.1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500;
            background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
            cursor: pointer; transition: all 0.2s ease;
        }
        .chip:hover { background: #e0e7ff; border-color: var(--v-accent); color: #4338ca; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15); }
        .chip:focus { outline: 2px solid var(--v-accent-strong); outline-offset: 2px; }
        .flowchart-after-response { display: none; padding: 1rem; margin: 0 1rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--v-radius); }
        .flowchart-after-response.visible { display: block; }
        .flowchart-after-response h3 { font-size: 1.05rem; color: #334155; margin-bottom: 0.5rem; font-weight: 700; }
        .flowchart-after-response textarea { width: 100%; min-height: 88px; padding: 0.75rem; border-radius: 10px; border: 2px solid #e2e8f0; background: #fff; color: #1e293b; font-size: 0.9rem; resize: vertical; }
        .flowchart-after-response textarea:focus { outline: none; border-color: var(--v-accent); }
        .flowchart-after-response .btn-flowchart { margin-top: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 10px; background: linear-gradient(135deg, var(--v-accent-strong), var(--v-accent)); color: #fff; border: none; font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: opacity 0.2s; }
        .flowchart-after-response .btn-flowchart:hover { opacity: 0.95; }
        .flowchart-after-response .btn-flowchart-vul { margin-top: 0.5rem; padding: 0.6rem 1rem; border-radius: 10px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
        .flowchart-after-response .btn-flowchart-vul:hover { background: #e0e7ff; border-color: var(--v-accent); color: #4338ca; }
        .pipeline-buttons .gen { margin-bottom: 0.25rem; }
        .links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--v-accent-border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
        .links a { color: var(--v-accent); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
        .links a:hover { color: #fff; text-decoration: underline; }
        .visuals-style-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
        .visuals-style-opt {
            padding: 0.5rem 0.85rem; border-radius: 10px; border: 2px solid var(--v-accent-border);
            background: var(--v-surface); color: var(--v-text); font-size: 0.85rem; font-weight: 500;
            cursor: pointer; transition: all 0.2s;
        }
        .visuals-style-opt:hover { border-color: var(--v-accent); background: var(--v-accent-muted); }
        .visuals-style-opt.selected { border-color: var(--v-accent); background: rgba(167,139,250,0.4); color: #fff; }
        .creaties-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; padding: 0.5rem 0; max-height: 360px; overflow-y: auto; }
        .creatie-card {
            background: rgba(30,27,75,0.65); border: 1px solid var(--v-accent-border); border-radius: var(--v-radius);
            overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .creatie-card:hover { transform: translateY(-2px); box-shadow: var(--v-shadow-card); }
        .creatie-type-badge { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.5rem; text-align: center; color: #e2e8f0; }
        .creatie-type-badge.logo { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .creatie-type-badge.icon { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
        .creatie-type-badge.banner { background: linear-gradient(135deg, #f59e0b, #ef4444); }
        .creatie-type-badge.flowchart { background: linear-gradient(135deg, #10b981, #059669); }
        .creatie-card-img-wrap { padding: 0.5rem; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; min-height: 100px; }
        .creatie-card-img-wrap img { max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 6px; }
        .creatie-actions { display: flex; gap: 0.35rem; padding: 0.5rem; flex-wrap: wrap; }
        .creatie-actions a, .creatie-actions button { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-align: center; text-decoration: none; border: none; cursor: pointer; background: rgba(167,139,250,0.25); color: #e2e8f0; }
        .creatie-actions a:hover, .creatie-actions button:hover { background: rgba(167,139,250,0.45); color: #fff; }
        .creaties-empty { padding: 2rem 1rem; text-align: center; color: var(--v-text-muted); font-size: 0.9rem; line-height: 1.5; }
        .studio-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
        .studio-header h3 { font-size: 1.05rem; margin: 0; color: var(--v-text); font-weight: 700; }
        .studio-header .studio-actions { display: flex; gap: 0.5rem; }
        .studio-header .studio-actions button {
            padding: 0.5rem 0.85rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500;
            border: 1px solid var(--v-accent-border); background: var(--v-surface); color: var(--v-accent);
            cursor: pointer; transition: all 0.2s;
        }
        .studio-header .studio-actions button:hover { background: var(--v-accent-muted); color: #fff; }
        .studio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; min-height: 160px; max-height: 320px; overflow-y: auto; padding: 0.25rem 0; }
        .studio-grid .studio-cell { background: rgba(15,23,42,0.6); border: 1px dashed var(--v-accent-border); border-radius: var(--v-radius); display: flex; align-items: center; justify-content: center; min-height: 140px; overflow: hidden; position: relative; }
        .studio-grid .studio-cell.has-image { border-style: solid; padding: 0.5rem; }
        .studio-grid .studio-cell.has-image img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 8px; display: block; }
        .studio-grid .studio-cell .studio-cell-actions { position: absolute; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; gap: 0.35rem; justify-content: center; flex-wrap: wrap; opacity: 0.9; }
        .studio-grid .studio-cell .studio-cell-actions a, .studio-grid .studio-cell .studio-cell-actions button { padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.7rem; background: rgba(30,27,75,0.95); color: #e2e8f0; border: 1px solid rgba(167,139,250,0.4); text-decoration: none; cursor: pointer; }
        .studio-grid .studio-cell .studio-cell-actions a:hover, .studio-grid .studio-cell .studio-cell-actions button:hover { background: rgba(167,139,250,0.3); color: #fff; }
        .studio-grid .studio-cell { position: relative; }
        .studio-placeholder { color: #64748b; font-size: 0.85rem; text-align: center; padding: 1rem; }
        .studio-prompt-bar { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--v-accent-border); }
        .studio-prompt-bar input {
            width: 100%; padding: 0.7rem 1rem; border-radius: 10px; border: 2px solid var(--v-accent-border);
            background: var(--v-surface); color: #fff; font-size: 0.95rem; margin-bottom: 0.5rem;
        }
        .studio-prompt-bar input:focus { outline: none; border-color: var(--v-accent); }
        .studio-prompt-bar input::placeholder { color: var(--v-text-muted); }
        .studio-prompt-bar .studio-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
        .studio-prompt-bar .studio-opts select { padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--v-accent-border); background: var(--v-surface); color: #fff; font-size: 0.85rem; }
        .studio-prompt-bar button.gen { width: 100%; padding: 0.75rem; border-radius: 10px; background: linear-gradient(135deg, var(--v-accent-strong), var(--v-accent)); color: #fff; border: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: opacity 0.2s; }
        .studio-prompt-bar button.gen:hover { opacity: 0.95; }
        .pipeline-gen:disabled { opacity: 0.7; cursor: wait; }
        @media (min-width: 901px) { .chat-messages { max-height: min(72vh, 640px); } }
        .visuals-ai-panel label { word-break: keep-all; }
        /* Pipeline (Marketing) panel: duidelijke knoppen */
        #panelPipeline .gen { border-radius: 10px; font-weight: 600; transition: opacity 0.2s, transform 0.1s; }
        #panelPipeline .gen:hover { transform: translateY(-1px); }
    </style>
    <header class="header">
        <a href="" class="header-logo">⬅ Maak iets geweldigs</a>
        <nav class="header-nav">
            <a href="">SiteChat (website)</a>
            <a href="">Overzicht</a>
        </nav>
    </header>
    <main class="main">
        <div class="hero">
            <h1>🎨 Visuals & Logo</h1>
            <p>Alles voor <strong>flyers</strong>, <strong>social posts</strong> en <strong>logo&apos;s</strong> op één plek. Gebruik de tab <strong>Marketing</strong> (rechts) om product en doelgroep in te vullen en in één klik een flyer, Instagram-post of logo te genereren – resultaat in de chat met Download en PDF. Of kies hieronder een chip en chat met de AI; daarna rechts type en parameters invullen en genereren. Verbeteren kan met &quot;Verbeter&quot; bij elke afbeelding.</p>
        </div>
        <div class="visuals-layout">
            <div class="visuals-chat">
                <div class="chat-box">
                    <div class="chat-messages" id="chatMessages" role="log"></div>
                    <div class="chat-services-overview" id="chatServicesOverview" aria-label="Diensten: klik om te starten">
                        <button type="button" class="chat-service-tile" data-msg="Ik wil een nieuw logo voor mijn bedrijf" data-tab="">
                            <span class="tile-icon" aria-hidden="true">🖼️</span>
                            <span class="tile-title">Logo</span>
                            <span class="tile-desc">Logo of icoon voor je bedrijf</span>
                        </button>
                        <button type="button" class="chat-service-tile" data-tab="pipeline" data-type="flyer">
                            <span class="tile-icon" aria-hidden="true">📄</span>
                            <span class="tile-title">Flyer A4</span>
                            <span class="tile-desc">Flyer voor print of digitaal</span>
                        </button>
                        <button type="button" class="chat-service-tile" data-tab="pipeline" data-type="banner">
                            <span class="tile-icon" aria-hidden="true">📱</span>
                            <span class="tile-title">Social post</span>
                            <span class="tile-desc">Instagram, LinkedIn, Facebook</span>
                        </button>
                        <button type="button" class="chat-service-tile" data-msg="Huisstijl en branding uitwerken" data-tab="">
                            <span class="tile-icon" aria-hidden="true">🎨</span>
                            <span class="tile-title">Huisstijl</span>
                            <span class="tile-desc">Kleuren, lettertype, stijl</span>
                        </button>
                        <button type="button" class="chat-service-tile" data-msg="Ik wil een schets of moodboard maken" data-tab="tekenen">
                            <span class="tile-icon" aria-hidden="true">✏️</span>
                            <span class="tile-title">Schets</span>
                            <span class="tile-desc">Teken of laat AI schetsen</span>
                        </button>
                    </div>
                    <div class="chips" id="chips">
                        <button type="button" class="chip" data-msg="Ik wil een nieuw logo voor mijn bedrijf">🖼️ Nieuw logo</button>
                        <button type="button" class="chip" data-msg="Social media content en posts voor Instagram">📱 Social media</button>
                        <button type="button" class="chip" data-tab="pipeline" id="chipFlyer">📄 Flyer A4 maken</button>
                        <button type="button" class="chip" data-tab="pipeline" id="chipSocialPost">📱 Social post (Instagram/FB)</button>
                        <button type="button" class="chip" data-msg="Huisstijl en branding uitwerken">🎨 Huisstijl</button>
                        <button type="button" class="chip" data-msg="Briefing voor een designer">✍️ Designer briefing</button>
                        <button type="button" class="chip" data-msg="Ik wil een schets of moodboard maken" id="chipSchets">✏️ Maak een schets</button>
                        <button type="button" class="chip" data-tab="ai-afbeelding" id="chipGenImage">🖼️ Genereer afbeelding (rechts)</button>
                        <button type="button" class="chip" data-tab="images-studio" id="chipImagesStudio">🎬 Images Studio (grid + bewerken)</button>
                    </div>
                    <div class="flowchart-after-response" id="flowchartAfterResponse" aria-hidden="true">
                        <h3>📊 Flowchart maken</h3>
                        <p style="font-size:0.85rem;color:#64748b;margin-bottom:0.5rem;">Bewerk de stappen (één per regel); de AI maakt er een diagram van. Vul uit het gesprek of type zelf.</p>
                        <textarea id="flowchartSteps" placeholder="Aanvraag&#10;Goedkeuring&#10;Oplevering&#10;Facturatie" rows="4"></textarea>
                        <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem;">
                            <button type="button" class="btn-flowchart" id="btnGenFlowchart">Genereer flowchart</button>
                            <button type="button" class="btn-flowchart-vul" id="btnFlowchartVulUit" aria-label="Vul flowchart-stappen in op basis van het gesprek">Vul uit gesprek</button>
                        </div>
                        <div id="flowchartPreview" style="display:none;margin-top:1rem;padding-top:1rem;border-top:1px solid #e2e8f0;"></div>
                    </div>
                    <div id="editInChatHint" style="display:none; padding: 0.5rem 1rem; background: #e0e7ff; border: 1px solid #a78bfa; border-radius: 8px; margin: 0 1rem 0.5rem; font-size: 0.9rem; color: #4338ca;">✏️ Bewerk in chat: typ hieronder wat je wilt aanpassen en klik op →</div>
                    <div class="chat-input-row">
                        <input type="text" class="chat-input" id="chatInput" placeholder="Bijv. flyer voor Slaapwel Relaxed, logo bakkerij, social post voor actie…" autocomplete="off">
                        <button type="button" class="chat-send" id="chatSend" title="Verstuur">→</button>
                    </div>
                </div>
            </div>
            <aside class="visuals-werkruimte" aria-label="Werkruimte: tekenen en AI-afbeelding">
                <div class="visuals-werkruimte-head">
                    <div class="visuals-werkruimte-section" aria-hidden="true">Werkruimte</div>
                    <div class="visuals-werkruimte-tabs" role="tablist">
                        <button type="button" class="active" data-tab="tekenen" aria-selected="true">✏️ Tekenen</button>
                        <button type="button" data-tab="pipeline" aria-selected="false">📱 Marketing</button>
                        <button type="button" data-tab="ai-afbeelding" aria-selected="false">🖼️ AI afbeelding</button>
                        <button type="button" data-tab="images-studio" aria-selected="false">🎬 Studio</button>
                        <button type="button" data-tab="mijn-creaties" aria-selected="false">📁 Creaties</button>
                    </div>
                </div>
                <div id="panelTekenen" class="visuals-werkruimte-panel active">
                    <div class="visuals-draw-toolbar">
                        <input type="color" id="drawColor" value="#a78bfa" title="Kleur" aria-label="Penkleur">
                        <button type="button" id="drawPen" title="Pen">✏️ Pen</button>
                        <button type="button" id="drawEraser" title="Gum">🧹 Gum</button>
                        <button type="button" id="drawClear" title="Wis alles">🗑 Wis</button>
                        <button type="button" id="drawDownload" title="Download als PNG">💾 Download</button>
                    </div>
                    <div class="ai-tekent-wrap" style="margin-bottom:0.5rem;">
                        <label for="aiTekentInput" style="font-size:0.85rem;color:#c4b5fd;">🤖 AI tekent</label>
                        <div style="display:flex;gap:0.35rem;margin-top:4px;">
                            <input type="text" id="aiTekentInput" placeholder="Bijv. huis, boom, zon" style="flex:1;padding:0.5rem 0.6rem;border-radius:8px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;font-size:0.9rem;">
                            <button type="button" id="aiTekentBtn" style="padding:0.5rem 0.75rem;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#a78bfa);color:#fff;border:none;font-weight:600;cursor:pointer;font-size:0.85rem;white-space:nowrap;">Laat AI tekenen</button>
                        </div>
                        <p style="font-size:0.75rem;color:#94a3b8;margin:4px 0 0;">AI maakt een schets op het canvas; daarna kun je eroverheen tekenen.</p>
                    </div>
                    <div class="visuals-canvas-wrap">
                        <canvas id="drawCanvas" width="340" height="240"></canvas>
                    </div>
                </div>
                <div id="panelAiAfbeelding" class="visuals-werkruimte-panel">
                    <div class="visuals-ai-panel">
                        <label for="aiImageType" style="display:block;margin-bottom:4px;font-weight:600;font-size:0.9rem;">Type</label>
                        <select id="aiImageType" style="width:100%;padding:8px 10px;border-radius:8px;border:2px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;margin-bottom:10px;">
                            <option value="logo">Logo</option>
                            <option value="icon">Icoon</option>
                            <option value="banner">Social / banner</option>
                            <option value="flowchart">Flowchart / diagram</option>
                        </select>

                        <div id="aiExtraLogo" class="ai-extra-fields" style="display:none;">
                            <label for="aiLogoBedrijf" style="font-size:0.9rem;">Bedrijfsnaam</label>
                            <input type="text" id="aiLogoBedrijf" placeholder="bijv. Bakkerij de Molen" aria-label="Bedrijfsnaam voor het logo" style="width:100%;margin-bottom:6px;">
                            <p style="margin:0 0 8px 0;font-size:0.85rem;color:#c4b5fd;">
                                <input type="text" id="aiLogoKvk" placeholder="KVK 8 cijfers" maxlength="8" pattern="[0-9]*" inputmode="numeric" aria-label="KVK-nummer om bedrijfsnaam op te halen" style="width:90px;padding:4px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;margin-right:6px;">
                                <button type="button" class="btn-flowchart-vul" id="btnLogoKvkHaal" style="font-size:0.85rem;" aria-label="Haal bedrijfsnaam op uit Handelsregister">Haal op (KVK)</button>
                            </p>
                            <label for="aiLogoBranche" style="font-size:0.9rem;">Branche</label>
                            <select id="aiLogoBranche" style="width:100%;padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;margin-bottom:8px;">
                                <option value="">— kies —</option>
                                <option value="bakkerij">Bakkerij</option>
                                <option value="IT / tech">IT / tech</option>
                                <option value="horeca">Horeca</option>
                                <option value="retail">Retail</option>
                                <option value="zorg">Zorg</option>
                                <option value="bouw">Bouw</option>
                                <option value="financiën">Financiën</option>
                                <option value="creatief">Creatief</option>
                                <option value="overig">Overig</option>
                            </select>
                            <p style="margin:0 0 8px 0;"><button type="button" class="btn-flowchart-vul" id="btnLogoVulUit" style="font-size:0.85rem;" aria-label="Vul bedrijfsnaam, branche en beschrijving in op basis van het gesprek">Vul uit gesprek</button></p>
                            <label style="font-size:0.9rem;">Stijl logo</label>
                            <div class="visuals-style-grid" id="aiLogoStyle" style="display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px 0;">
                                <button type="button" class="visuals-style-opt selected" data-style="modern">Modern</button>
                                <button type="button" class="visuals-style-opt" data-style="minimal">Minimal</button>
                                <button type="button" class="visuals-style-opt" data-style="vintage">Vintage</button>
                                <button type="button" class="visuals-style-opt" data-style="3d">3D</button>
                                <button type="button" class="visuals-style-opt" data-style="handdrawn">Handgetekend</button>
                            </div>
                            <label for="aiLogoColor" style="font-size:0.9rem;">Kleur (optioneel)</label>
                            <input type="text" id="aiLogoColor" placeholder="#0d9488" style="width:100%;max-width:120px;margin-bottom:10px;">
                        </div>

                        <div id="aiExtraIcon" class="ai-extra-fields" style="display:none;">
                            <label for="aiIconSubject" style="font-size:0.9rem;">Onderwerp icoon</label>
                            <input type="text" id="aiIconSubject" placeholder="bijv. contactformulier, klantenservice, brood" style="width:100%;margin-bottom:8px;">
                            <p style="margin:0 0 8px 0;"><button type="button" class="btn-flowchart-vul" id="btnIconVulUit" style="font-size:0.85rem;" aria-label="Vul onderwerp icoon in op basis van het gesprek">Vul uit gesprek</button></p>
                            <label style="font-size:0.9rem;">Stijl icoon</label>
                            <div class="visuals-style-grid" id="aiIconStyle" style="display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px 0;">
                                <button type="button" class="visuals-style-opt selected" data-style="flat">Flat</button>
                                <button type="button" class="visuals-style-opt" data-style="minimal">Minimal</button>
                                <button type="button" class="visuals-style-opt" data-style="outline">Outline</button>
                            </div>
                            <label for="aiIconColor" style="font-size:0.9rem;">Kleur (optioneel)</label>
                            <input type="text" id="aiIconColor" placeholder="#a78bfa" style="width:100%;max-width:120px;margin-bottom:10px;">
                        </div>

                        <div id="aiExtraBanner" class="ai-extra-fields" style="display:none;">
                            <label for="aiBannerPlatform" style="font-size:0.9rem;">Platform</label>
                            <select id="aiBannerPlatform" style="width:100%;padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;margin-bottom:8px;">
                                <option value="Instagram">Instagram</option>
                                <option value="Facebook">Facebook</option>
                                <option value="LinkedIn">LinkedIn</option>
                                <option value="TikTok">TikTok</option>
                            </select>
                            <label for="aiBannerFormat" style="font-size:0.9rem;">Formaat</label>
                            <select id="aiBannerFormat" style="width:100%;padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;margin-bottom:10px;">
                                <option value="1:1">1:1 vierkant</option>
                                <option value="4:5">4:5</option>
                                <option value="9:16">9:16 story</option>
                            </select>
                        </div>

                        <div id="aiExtraFlowchart" class="ai-extra-fields" style="display:none;">
                            <p style="font-size:0.85rem;color:#c4b5fd;margin-bottom:8px;">Beschrijf je flowchart of diagram. De AI maakt er een afbeelding van.</p>
                        </div>

                        <label for="aiImagePrompt" style="display:block;margin-bottom:4px;font-weight:600;font-size:0.9rem;">Beschrijving / vrije tekst</label>
                        <input type="text" id="aiImagePrompt" placeholder="Bijv. minimalistisch, bruin en wit… (logo) of onderwerp (icoon) of inhoud (banner/diagram)" aria-label="Beschrijving voor AI-afbeelding">
                        <div style="display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;align-items:center;">
                            <div>
                                <label for="aiImageProvider" style="font-size:0.85rem;">Provider</label>
                                <select id="aiImageProvider" style="padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;min-width:100px;">
                                    <option value="auto" selected>Automatisch (aanbevolen)</option>
                                    <option value="openai">OpenAI</option>
                                    <option value="fal">fal.ai</option>
                                    <option value="replicate">Replicate</option>
                                    <option value="imagine">Imagine</option>
                                </select>
                            </div>
                            <div>
                                <label for="aiImageSize" style="font-size:0.85rem;">Formaat</label>
                                <select id="aiImageSize" style="padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;">
                                    <option value="1024x1024">1024×1024</option>
                                    <option value="1024x1792">1024×1792</option>
                                    <option value="1792x1024">1792×1024</option>
                                </select>
                            </div>
                            <div>
                                <label for="aiImageQuality" style="font-size:0.85rem;">Kwaliteit</label>
                                <select id="aiImageQuality" style="padding:6px 8px;border-radius:6px;border:1px solid rgba(167,139,250,0.3);background:rgba(30,27,75,0.9);color:#fff;">
                                    <option value="standard">Standaard</option>
                                    <option value="hd">HD</option>
                                </select>
                            </div>
                        </div>
                        <label style="display:block;margin-bottom:4px;font-weight:600;font-size:0.9rem;"><input type="checkbox" id="aiImageEnhance" checked> Prompt verbeteren met AI</label>
                        <button type="button" class="gen" id="aiImageGenBtn" style="width:100%;margin-top:8px;" aria-label="Genereer afbeelding met AI">🖼️ Genereer afbeelding</button>
                        <div class="visuals-ai-placeholder" id="aiImagePlaceholder" style="margin-top:12px;">
                            Beschrijf je idee hierboven en kies type en formaat. Bij <strong>Automatisch</strong> kiest het systeem zelf een werkende provider. Klik op <strong>Genereer afbeelding</strong> – het resultaat verschijnt hier en in de chat. Daarna kun je <strong>Verbeter met feedback</strong> gebruiken.<br><br>
                            <strong>Betere kwaliteit:</strong> kies <strong>Kwaliteit: HD</strong>, wees concreet in je beschrijving (stijl, kleuren, sfeer) en gebruik na de eerste generatie <strong>Verbeter</strong> met feedback (bijv. &quot;meer contrast, professioneler, grotere tekst&quot;).
                        </div>
                        <div id="aiImageResult" style="display:none; margin-top:12px;"></div>
                        <div id="aiImageRefineWrap" style="display:none; margin-top:12px;">
                            <label for="aiImageFeedback" style="font-size:0.9rem;font-weight:600;">Verbeter met feedback</label>
                            <input type="text" id="aiImageFeedback" placeholder="Bijv. meer contrast, andere kleur, strakker…" style="width:100%;margin-top:6px;">
                            <button type="button" class="gen" id="aiImageRefineBtn" style="margin-top:8px;background:rgba(167,139,250,0.4);">✨ Opnieuw genereren met feedback</button>
                        </div>
                    </div>
                </div>
                <div id="panelPipeline" class="visuals-werkruimte-panel">
                    <p style="font-size:0.9rem;color:#c4b5fd;margin-bottom:0.5rem;">Vul hieronder product en doelgroep in (of klik <strong>Vul uit gesprek</strong> als je al in de chat hebt verteld waar het over gaat). Kies daarna wat je wilt maken – het resultaat verschijnt in de chat met Download en PDF.</p>
                    <div class="visuals-ai-panel">
                        <label for="pipelineProduct" style="font-size:0.9rem;font-weight:600;">Product / dienst</label>
                        <input type="text" id="pipelineProduct" placeholder="bijv. Zonne-isolatie, Bakkerij de Molen" aria-label="Product of dienst" style="width:100%;margin-bottom:8px;">
                        <label for="pipelineRegio" style="font-size:0.9rem;font-weight:600;">Regio / doelgroep</label>
                        <input type="text" id="pipelineRegio" placeholder="bijv. Breda, MKB Nederland" aria-label="Regio of doelgroep" style="width:100%;margin-bottom:10px;">
                        <p style="margin:0 0 12px 0;"><button type="button" class="btn-flowchart-vul" id="btnPipelineVulUit" style="font-size:0.85rem;">Vul uit gesprek</button></p>
                        <p style="font-size:0.8rem;color:#94a3b8;margin-bottom:8px;">Kies een type – genereren duurt een paar seconden.</p>
                        <div class="pipeline-buttons" style="display:flex;flex-direction:column;gap:8px;">
                            <button type="button" class="gen pipeline-gen" data-type="flyer" data-size="1792x1024" style="width:100%;">📄 Flyer (A4 landschap)</button>
                            <button type="button" class="gen pipeline-gen" data-type="banner" data-platform="Instagram" data-size="1024x1024" style="width:100%;">📷 Instagram post (1:1)</button>
                            <button type="button" class="gen pipeline-gen" data-type="banner" data-platform="LinkedIn" data-size="1792x1024" style="width:100%;">💼 LinkedIn / Facebook banner</button>
                            <button type="button" class="gen pipeline-gen" data-type="logo" data-size="1024x1024" style="width:100%;">🖼️ Logo</button>
                        </div>
                    </div>
                </div>
                <div id="panelImagesStudio" class="visuals-werkruimte-panel">
                    <div class="studio-header">
                        <h3>🎬 Images Studio</h3>
                        <div class="studio-actions">
                            <button type="button" id="studioClear" title="Wis alle beelden">Wis</button>
                            <button type="button" id="studioHistory" data-tab="mijn-creaties" title="Bekijk alle creaties">History</button>
                        </div>
                    </div>
                    <div id="studioGrid" class="studio-grid"></div>
                    <div class="studio-prompt-bar">
                        <input type="text" id="studioPrompt" placeholder="Describe what you want to see…" autocomplete="off">
                        <div class="studio-opts">
                            <select id="studioProvider"><option value="auto" selected>Auto (aanbevolen)</option><option value="openai">OpenAI</option><option value="fal">fal.ai</option><option value="replicate">Replicate</option></select>
                            <select id="studioSize"><option value="1024x1024">1:1</option><option value="1792x1024">Landschap</option><option value="1024x1792">Portret</option></select>
                        </div>
                        <button type="button" class="gen" id="studioGenBtn">Genereer afbeelding</button>
                    </div>
                </div>
                <div id="panelMijnCreaties" class="visuals-werkruimte-panel">
                    <p style="font-size:0.9rem;color:#c4b5fd;margin-bottom:0.75rem;">Logo&apos;s, iconen, banners en flowcharts die je deze sessie hebt gegenereerd.</p>
                    <div id="creatiesGallery" class="creaties-gallery"></div>
                    <p id="creatiesEmpty" class="creaties-empty">Genereer een logo, icoon, banner of flowchart – hij verschijnt hier.</p>
                </div>
            </aside>
        </div>
        <div class="links">
            <a href="">→ SiteChat (website/webshop)</a>
            <a href="">→ Maak iets geweldigs</a>
            <a href="https://www.itlive.nl/webapp/">→ Webapp Builder</a>
        </div>
    </main>
    <footer class="page-footer" style="margin-top:3rem;padding:2rem 1.5rem;background:rgba(30,27,75,0.5);border-top:1px solid rgba(167,139,250,0.2);color:#c4b5fd;font-size:0.9rem;">
        <div style="max-width:720px;margin:0 auto;">
            <div style="display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.5rem;">
                <div>
                    <strong style="color:#e2e8f0;">IT Live</strong>
                    <p style="margin:0.35rem 0 0;opacity:0.9;">SaaS · Websites · Apps · Social &amp; SEO · Agency</p>
                </div>
                <div>
                    <strong style="color:#e2e8f0;">Contact</strong>
                    <p style="margin:0.35rem 0 0;">✉️ info@itlive.nl · 📞 0850604017 · 💬 WhatsApp</p>
                </div>
                <div>
                    <strong style="color:#e2e8f0;">Snelle links</strong>
                    <p style="margin:0.35rem 0 0;display:flex;flex-wrap:wrap;gap:0.5rem;">
                        <a href="/" style="color:#c4b5fd;">Home</a>
                        <a href="" style="color:#c4b5fd;">Idee</a>
                        <a href="/website-quickscan/" style="color:#c4b5fd;">Website Quickscan</a>
                        <a href="" style="color:#c4b5fd;">Maak iets geweldigs</a>
                        <a href="" style="color:#c4b5fd;">SiteChat</a>
                        <a href="/customer_portal/" style="color:#c4b5fd;">Klantportaal</a>
                        <a href="/sitemap" style="color:#c4b5fd;">Sitemap</a>
                    </p>
                </div>
            </div>
            <div style="padding-top:1rem;border-top:1px solid rgba(167,139,250,0.15);display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;justify-content:space-between;">
                <span>© 2026 IT Live. Alle rechten voorbehouden.</span>
                <nav aria-label="Juridisch">
                    <a href="/privacy" style="color:#c4b5fd;">Privacy</a>
                    <span style="opacity:0.6;margin:0 0.35rem;">·</span>
                    <a href="/algemene-voorwaarden" style="color:#c4b5fd;">Voorwaarden</a>
                    <span style="opacity:0.6;margin:0 0.35rem;">·</span>
                    <a href="/cookiebeleid" style="color:#c4b5fd;">Cookies</a>
                    <span style="opacity:0.6;margin:0 0.35rem;">·</span>
                    <a href="/sitemap" style="color:#c4b5fd;">Sitemap</a>
                </nav>
            </div>
        </div>
    </footer>
    <script>
    (function(){
        var apiBase = null;
        var portalApiBase = ":\/\/\/admin\/api";
        var imagesStudioApiBase = ":\/\/\/api\/images";
        var kvkProxyUrl = null;
        var initialQ = null;
        var AI_FALLBACK_VISUALS = "Genereren mislukt. Probeer het later opnieuw.";
        var msgs = document.getElementById('chatMessages');
        var input = document.getElementById('chatInput');
        var sendBtn = document.getElementById('chatSend');
        function convId(){ var x=localStorage.getItem('visuals_conv_id'); if(!x){x='visuals_'+Date.now()+'_'+Math.random().toString(36).slice(2);localStorage.setItem('visuals_conv_id',x);} return x; }
        var conversationHistory = [];
        var assistantReplyCount = 0;
        function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
        function allowSafeHtml(html){
            var out = String(html).replace(/\n/g,'<br>');
            out = out.replace(/(https?:\/\/[^\s<>"]+)/g,'<a href="$1" target="_blank" rel="noopener">$1</a>');
            out = out.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
            out = out.replace(/&lt;(strong|b|em|i)\s*\/?&gt;/gi,'<$1>').replace(/&lt;\/(strong|b|em|i)&gt;/gi,'</$1>').replace(/&lt;br\s*\/?&gt;/gi,'<br>');
            out = out.replace(/&lt;a\s+href=&quot;((?:[^&]|&amp;)*)&quot;\s*&gt;/gi, function(_, h){ return '<a href="'+h.replace(/&amp;/g,'&')+'" target="_blank" rel="noopener">'; }).replace(/&lt;\/a&gt;/gi,'</a>');
            return out;
        }
        function addMsg(role, text, imageUrl){
            if(!msgs)return;
            var d=document.createElement('div');
            d.className='chat-msg '+role;
            var html = allowSafeHtml(text);
            if(imageUrl){
                var printUrl = (typeof window !== 'undefined' ? window.location.origin : '') + '/visuals/flyer-print.php?image_url=' + encodeURIComponent(imageUrl);
                html+='<div class="chat-msg-image-card"><img src="'+esc(imageUrl)+'" alt="Afbeelding"><div class="chat-msg-image-actions"><a href="'+esc(imageUrl)+'" download target="_blank" rel="noopener" class="btn-download">💾 Download</a><a href="'+esc(printUrl)+'" target="_blank" rel="noopener" class="btn-download">📄 PDF</a><button type="button" class="btn-verbeter" data-imgurl="'+esc(imageUrl)+'">✨ Verbeter</button></div></div>';
            }
            d.innerHTML=html;
            /* Actieknoppen onder elk AI-antwoord (quick replies) – behalve bij afbeelding (heeft eigen knoppen) */
            if(role==='assistant'&&!imageUrl){
                var actions=document.createElement('div');
                actions.className='chat-msg-actions';
                actions.setAttribute('aria-label','Vervolgacties');
                actions.innerHTML='<button type="button" class="chat-action-btn primary" data-action="vul-marketing">📋 Vul uit gesprek (Marketing)</button><button type="button" class="chat-action-btn" data-action="tab-pipeline">📱 Naar Marketing-tab</button><button type="button" class="chat-action-btn" data-action="tab-ai-afbeelding">🖼️ Naar AI afbeelding</button>';
                actions.querySelectorAll('.chat-action-btn').forEach(function(btn){
                    btn.addEventListener('click',function(){
                        var act=btn.getAttribute('data-action');
                        if(act==='vul-marketing'){ switchToTab('pipeline'); fillPipelineFromConversation(false); }
                        else if(act==='tab-pipeline'){ switchToTab('pipeline'); var prod=document.getElementById('pipelineProduct'); if(prod)prod.focus(); }
                        else if(act==='tab-ai-afbeelding'){ switchToTab('ai-afbeelding'); var p=document.getElementById('aiImagePrompt'); if(p)p.focus(); }
                    });
                });
                d.appendChild(actions);
            }
            msgs.appendChild(d);
            if(imageUrl){
                var btnVerbeter=d.querySelector('.btn-verbeter');
                if(btnVerbeter) btnVerbeter.addEventListener('click',function(){ switchToTab('ai-afbeelding'); var rw=document.getElementById('aiImageRefineWrap'); var fb=document.getElementById('aiImageFeedback'); if(rw){ rw.style.display='block'; } if(fb){ fb.focus(); fb.placeholder='Bijv. meer contrast, andere kleur…'; } });
            }
            msgs.scrollTop=msgs.scrollHeight;
            if(role==='assistant'){ assistantReplyCount++; var fc=document.getElementById('flowchartAfterResponse'); if(fc&&assistantReplyCount>=1){ fc.classList.add('visible'); fc.setAttribute('aria-hidden','false'); } }
        }
        function addTyping(){ var d=document.createElement('div'); d.className='chat-msg assistant chat-typing'; d.id='typing'; d.innerHTML='<span></span><span></span><span></span>'; msgs.appendChild(d); msgs.scrollTop=msgs.scrollHeight; }
        function removeTyping(){ var t=document.getElementById('typing'); if(t)t.remove(); }
        function doChat(baseUrl, message){
            return fetch(baseUrl+'/universal-ai-chat.php',{
                method:'POST',headers:{'Content-Type':'application/json'},
                body:JSON.stringify({message:message,tenant:'itlive',subagent:'visuals',conversation_id:convId(),conversation:conversationHistory.slice(-20)})
            }).then(function(r){if(!r.ok)throw new Error(r.status); return r.json();});
        }
        function send(){
            var msg=(input&&input.value)?input.value.trim():'';
            if(!msg)return;
            if(editInChatImageId && editInChatSessionId){
                document.getElementById('chips').style.display='none';
                var so=document.getElementById('chatServicesOverview'); if(so)so.style.display='none';
                addMsg('user', 'Bewerk afbeelding: ' + msg);
                if(input) input.value = '';
                if(sendBtn) sendBtn.disabled = true;
                addTyping();
                fetch(imagesStudioApiBase + '/edit.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image_id: editInChatImageId, edit_prompt: msg, session_id: editInChatSessionId })
                }).then(function(r){ return r.json(); }).then(function(data){
                    if(sendBtn) sendBtn.disabled = false;
                    removeTyping();
                    if(data.image && data.image.url){
                        imagesStudioImages.push(data.image);
                        renderImagesStudioGrid();
                        addMsg('assistant', 'Afbeelding aangepast.', data.image.url);
                        conversationHistory.push({ role: 'assistant', content: 'Afbeelding aangepast.', image_url: data.image.url });
                    } else {
                        addMsg('assistant', (data && data.error) ? data.error : 'Bewerken mislukt.');
                    }
                    editInChatImageId = null;
                    editInChatSessionId = null;
                    var hint = document.getElementById('editInChatHint');
                    if(hint) hint.style.display = 'none';
                }).catch(function(){
                    if(sendBtn) sendBtn.disabled = false;
                    removeTyping();
                    addMsg('assistant', (typeof AI_FALLBACK_VISUALS !== 'undefined' ? AI_FALLBACK_VISUALS : 'Verbinding mislukt. Probeer opnieuw.'));
                    editInChatImageId = null;
                    editInChatSessionId = null;
                });
                return;
            }
            document.getElementById('chips').style.display='none';
            var so=document.getElementById('chatServicesOverview'); if(so)so.style.display='none';
            addMsg('user',msg);
            if(input)input.value='';
            if(sendBtn)sendBtn.disabled=true;
            addTyping();
            doChat(apiBase, msg).then(function(data){
                removeTyping();
                if(sendBtn)sendBtn.disabled=false;
                var reply = (data.success&&data.response) ? data.response : (data.message||(typeof AI_FALLBACK_VISUALS !== 'undefined' ? AI_FALLBACK_VISUALS : 'Er ging iets mis. Probeer opnieuw.'));
                addMsg('assistant',reply);
                conversationHistory.push({role:'user',content:msg});
                conversationHistory.push({role:'assistant',content:reply});
                if(input)input.focus();
            }).catch(function(){
                return doChat(portalApiBase, msg).then(function(data){
                    removeTyping();
                    if(sendBtn)sendBtn.disabled=false;
                    var reply = (data.success&&data.response) ? data.response : (data.message||(typeof AI_FALLBACK_VISUALS !== 'undefined' ? AI_FALLBACK_VISUALS : 'Er ging iets mis. Probeer opnieuw.'));
                    addMsg('assistant',reply);
                    conversationHistory.push({role:'user',content:msg});
                    conversationHistory.push({role:'assistant',content:reply});
                    if(input)input.focus();
                });
            }).catch(function(err){
                removeTyping();
                if(sendBtn)sendBtn.disabled=false;
                addMsg('assistant','Verbinding mislukt. Controleer je internet of probeer later. Je kunt ook direct naar <a href="">SiteChat</a> of <a href="">Maak iets geweldigs</a>.');
                if(input)input.focus();
            });
        }
        if(sendBtn)sendBtn.addEventListener('click',send);
        if(input)input.addEventListener('keydown',function(e){if(e.key==='Enter'){e.preventDefault();send();}});
        document.querySelectorAll('.chip').forEach(function(b){b.addEventListener('click',function(){var m=b.getAttribute('data-msg');var tab=b.getAttribute('data-tab');if(tab){ switchToTab(tab); if(tab==='ai-afbeelding'){ var p=document.getElementById('aiImagePrompt'); if(p) p.focus(); } else if(tab==='images-studio'){ var sp=document.getElementById('studioPrompt'); if(sp) sp.focus(); } else if(tab==='pipeline'){ var prod=document.getElementById('pipelineProduct'); if(prod) prod.focus(); } return; } if(m&&input){ input.value=m; if(b.id==='chipSchets'){ switchToTab('tekenen'); } else { send(); } }});});
        document.querySelectorAll('.chat-service-tile').forEach(function(tile){
            tile.addEventListener('click',function(){
                var m=tile.getAttribute('data-msg');
                var tab=tile.getAttribute('data-tab');
                if(tab){
                    switchToTab(tab);
                    if(tab==='tekenen'){ if(input){ input.value=m||'Maak een schets'; send(); } }
                    else if(tab==='pipeline'){ var prod=document.getElementById('pipelineProduct'); if(prod)prod.focus(); }
                    return;
                }
                if(m&&input){ input.value=m; send(); }
            });
        });
        if(initialQ){input.value=initialQ;document.getElementById('chips').style.display='none';var so=document.getElementById('chatServicesOverview');if(so)so.style.display='none';setTimeout(send,300);}
        else addMsg('assistant','👋 Hallo! Ik help je met <strong>flyers</strong>, <strong>social posts</strong> en <strong>logo\'s</strong>. Snelste route: klik rechts op de tab <strong>Marketing</strong>, vul product en doelgroep in en kies een knop (flyer, Instagram, LinkedIn, logo) – het resultaat verschijnt hier met Download en PDF. Of kies hierboven een chip (bijv. Flyer A4 maken, Social post) en vertel wat je wilt; daarna kun je rechts de velden laten invullen met <strong>Vul uit gesprek</strong> en genereren. Bij elke afbeelding kun je <strong>Verbeter</strong> gebruiken om aanpassingen te doen.');

        function fillLogoFromConversation(silent){
            var allText = conversationHistory.map(function(m){ return (m.content || '').replace(/<[^>]+>/g,' '); }).join(' ');
            var lower = allText.toLowerCase();
            var brancheEl = document.getElementById('aiLogoBranche');
            var bedrijfEl = document.getElementById('aiLogoBedrijf');
            var promptEl = document.getElementById('aiImagePrompt');
            var brancheMap = [
                ['bakkerij', /bakkerij|bakker|brood|gebak|deeg/],
                ['horeca', /horeca|restaurant|caf[eé]|hotel|bar/],
                ['retail', /retail|winkel|shop|verkoop/],
                ['zorg', /zorg|kliniek|arts|verpleging/],
                ['bouw', /bouw|aannemer|architect/],
                ['financiën', /financie[eë]l|bank|verzekering|accountant/],
                ['creatief', /creatief|design|studio|reclame/],
                ['IT / tech', /it\s*\/\s*tech|tech|software|ict|website/]
            ];
            var foundBranche = '';
            for(var b = 0; b < brancheMap.length; b++){ if(brancheMap[b][1].test(lower)){ foundBranche = brancheMap[b][0]; break; } }
            if(foundBranche && brancheEl){ brancheEl.value = foundBranche; }
            var bedrijfMatch = allText.match(/(?:bedrijfsnaam|mijn bedrijf|het bedrijf|bedrijf heet)\s*(?:is|:)?\s*([A-Za-z0-9\s\u00c0-\u024f\u2019\'-]{2,40})/i);
            if(bedrijfMatch && bedrijfEl){ bedrijfEl.value = bedrijfMatch[1].trim().slice(0, 80); }
            else {
                for(var i = conversationHistory.length - 1; i >= 0; i--){
                    if(conversationHistory[i].role !== 'user') continue;
                    var u = (conversationHistory[i].content || '').trim();
                    if(u.length >= 2 && u.length <= 50 && /^[A-Za-z\u00c0-\u024f]/.test(u) && !/^(ja|nee|doen|maak|genereer|ok|graag)$/i.test(u)){ if(bedrijfEl) bedrijfEl.value = u.slice(0, 80); break; }
                }
            }
            var lastLogo = '';
            for(var k = conversationHistory.length - 1; k >= 0; k--){
                if(conversationHistory[k].role !== 'assistant') continue;
                var c = (conversationHistory[k].content || '').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim();
                if(/logo|letter|concept|brood|deeg|vorm|kleur|stijl/i.test(c)){ lastLogo = c.slice(0, 200); break; }
            }
            if(lastLogo && promptEl){ promptEl.value = lastLogo; }
            else if(foundBranche && promptEl && !promptEl.value){ promptEl.value = 'logo voor ' + foundBranche + ', warm en professioneel'; }
            if(!silent) addMsg('assistant', 'Velden zijn ingevuld op basis van het gesprek. Pas aan indien nodig en klik op Genereer afbeelding.');
            var focusEl = document.getElementById('aiLogoBedrijf');
            if(focusEl && focusEl.value) focusEl = document.getElementById('aiImagePrompt');
            if(focusEl) setTimeout(function(){ focusEl.focus(); }, 100);
        }
        function fillPipelineFromConversation(silent){
            var allText = conversationHistory.map(function(m){ return (m.content || '').replace(/<[^>]+>/g,' '); }).join(' ');
            var prodEl = document.getElementById('pipelineProduct');
            var regEl = document.getElementById('pipelineRegio');
            var productMatch = allText.match(/(?:product|dienst|bedrijf|onderwerp)\s*(?:is|:)?\s*([A-Za-z0-9\s\u00c0-\u024f\u2019\'-]{2,50})/i);
            if(productMatch && prodEl){ prodEl.value = productMatch[1].trim().slice(0, 80); }
            var regioMatch = allText.match(/(?:regio|doelgroep|gebied)\s*(?:is|:)?\s*([A-Za-z0-9\s\u00c0-\u024f\u2019\'-]{2,50})/i);
            if(regioMatch && regEl){ regEl.value = regioMatch[1].trim().slice(0, 80); }
            if(!prodEl.value.trim()){
                for(var i = conversationHistory.length - 1; i >= 0; i--){
                    if(conversationHistory[i].role !== 'user') continue;
                    var u = (conversationHistory[i].content || '').trim();
                    if(u.length >= 2 && u.length <= 60 && !/^(ja|nee|doen|maak|genereer|ok|graag)$/i.test(u)){ prodEl.value = u.slice(0, 80); break; }
                }
            }
            if(!silent) addMsg('assistant', 'Marketingvelden ingevuld uit het gesprek. Kies hierna een knop om te genereren.');
        }
        function switchToTab(tabId){
            document.querySelectorAll('.visuals-werkruimte-tabs button').forEach(function(btn){ btn.classList.toggle('active', btn.getAttribute('data-tab')===tabId); btn.setAttribute('aria-selected', btn.getAttribute('data-tab')===tabId ? 'true' : 'false'); });
            document.querySelectorAll('.visuals-werkruimte-panel').forEach(function(p){ p.classList.toggle('active', (tabId==='tekenen'&&p.id==='panelTekenen')||(tabId==='ai-afbeelding'&&p.id==='panelAiAfbeelding')||(tabId==='pipeline'&&p.id==='panelPipeline')||(tabId==='images-studio'&&p.id==='panelImagesStudio')||(tabId==='mijn-creaties'&&p.id==='panelMijnCreaties')); });
            if(tabId === 'ai-afbeelding' && conversationHistory.length > 0){
                var typeEl = document.getElementById('aiImageType');
                var bedrijfEl = document.getElementById('aiLogoBedrijf');
                var brancheEl = document.getElementById('aiLogoBranche');
                if(typeEl && typeEl.value === 'logo' && (!bedrijfEl || !bedrijfEl.value.trim()) && (!brancheEl || !brancheEl.value)) fillLogoFromConversation(true);
            }
            if(tabId === 'pipeline' && conversationHistory.length > 0){
                var prod = document.getElementById('pipelineProduct');
                var reg = document.getElementById('pipelineRegio');
                if(prod && !prod.value.trim()) fillPipelineFromConversation(true);
            }
        }
        document.querySelectorAll('.visuals-werkruimte-tabs button').forEach(function(btn){ btn.addEventListener('click',function(){ switchToTab(btn.getAttribute('data-tab')); }); });

        var btnPipelineVul = document.getElementById('btnPipelineVulUit');
        if(btnPipelineVul) btnPipelineVul.addEventListener('click', function(){ fillPipelineFromConversation(false); });

        function enablePipelineButtons(){ document.querySelectorAll('.pipeline-gen').forEach(function(b){ b.disabled = false; var orig = b.getAttribute('data-original-text'); if(orig) b.textContent = orig; }); }
        document.querySelectorAll('.pipeline-gen').forEach(function(btn){
            if(!btn.getAttribute('data-original-text')) btn.setAttribute('data-original-text', btn.textContent);
            btn.addEventListener('click', function(){
                var typ = btn.getAttribute('data-type');
                var sz = btn.getAttribute('data-size') || '1024x1024';
                var platform = btn.getAttribute('data-platform');
                var prod = (document.getElementById('pipelineProduct') && document.getElementById('pipelineProduct').value) || '';
                var reg = (document.getElementById('pipelineRegio') && document.getElementById('pipelineRegio').value) || '';
                var typeEl = document.getElementById('aiImageType');
                var sizeEl = document.getElementById('aiImageSize');
                if(typeEl) typeEl.value = typ;
                showExtraForType(typ);
                if(sizeEl) sizeEl.value = sz;
                if(typ === 'banner' && platform){
                    var plEl = document.getElementById('aiBannerPlatform');
                    if(plEl) plEl.value = platform;
                }
                var prompt = (prod || reg) ? (prod + (reg ? ', ' + reg : '') + ' – ') : '';
                if(typ === 'flyer') prompt += 'Professional flyer design A4 landscape, modern and clear, suitable for print and social';
                else if(typ === 'banner') prompt += 'Social media banner, professional and eye-catching, ' + (platform || '');
                else if(typ === 'logo') prompt += 'Logo, modern and professional, suitable for brand';
                if(!prompt){ addMsg('assistant', 'Vul eerst Product/dienst in bij Marketing, of klik op Vul uit gesprek.'); return; }
                var promptInput = document.getElementById('aiImagePrompt');
                if(promptInput) promptInput.value = prompt;
                if(document.getElementById('aiLogoBedrijf') && prod) document.getElementById('aiLogoBedrijf').value = prod.slice(0, 80);
                document.querySelectorAll('.pipeline-gen').forEach(function(b){ b.disabled = true; b.textContent = 'Bezig…'; });
                var p = doGenerateImage(prompt);
                if(p && typeof p.then === 'function') p.finally(enablePipelineButtons); else enablePipelineButtons();
            });
        });

        var canvas=document.getElementById('drawCanvas'); var ctx=canvas&&canvas.getContext('2d'); var drawing=false; var mode='pen'; var lineWidth=3; var eraserSize=20;
        if(ctx){ ctx.fillStyle='#1e1b4b'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.strokeStyle='#a78bfa'; ctx.lineWidth=lineWidth; ctx.lineCap='round';
            function getXY(e){ var r=canvas.getBoundingClientRect(); var scaleX=canvas.width/r.width; var scaleY=canvas.height/r.height; if(e.touches){ e=e.touches[0]; } return { x:(e.clientX-r.left)*scaleX, y:(e.clientY-r.top)*scaleY }; }
            function start(e){ e.preventDefault(); drawing=true; var p=getXY(e); ctx.beginPath(); ctx.moveTo(p.x,p.y); }
            function move(e){ e.preventDefault(); if(!drawing)return; var p=getXY(e); if(mode==='eraser'){ ctx.globalCompositeOperation='destination-out'; ctx.lineWidth=eraserSize; ctx.strokeStyle='rgba(0,0,0,1)'; } else { ctx.globalCompositeOperation='source-over'; ctx.lineWidth=lineWidth; ctx.strokeStyle=document.getElementById('drawColor').value; } ctx.lineTo(p.x,p.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(p.x,p.y); }
            function end(e){ e.preventDefault(); drawing=false; ctx.beginPath(); ctx.globalCompositeOperation='source-over'; ctx.strokeStyle=document.getElementById('drawColor').value; ctx.lineWidth=lineWidth; }
            canvas.addEventListener('mousedown',start); canvas.addEventListener('mousemove',move); canvas.addEventListener('mouseup',end); canvas.addEventListener('mouseleave',end);
            canvas.addEventListener('touchstart',start,{passive:false}); canvas.addEventListener('touchmove',move,{passive:false}); canvas.addEventListener('touchend',end,{passive:false});
            document.getElementById('drawPen').classList.add('active');
            document.getElementById('drawPen').addEventListener('click',function(){ mode='pen'; document.getElementById('drawPen').classList.add('active'); document.getElementById('drawEraser').classList.remove('active'); });
            document.getElementById('drawEraser').addEventListener('click',function(){ mode='eraser'; document.getElementById('drawEraser').classList.add('active'); document.getElementById('drawPen').classList.remove('active'); });
            document.getElementById('drawClear').addEventListener('click',function(){ ctx.fillStyle='#1e1b4b'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.strokeStyle=document.getElementById('drawColor').value; });
            document.getElementById('drawDownload').addEventListener('click',function(){ var a=document.createElement('a'); a.download='visuals-schets-'+Date.now()+'.png'; a.href=canvas.toDataURL('image/png'); a.click(); });
        }
        var aiTekentBtn = document.getElementById('aiTekentBtn');
        var aiTekentInput = document.getElementById('aiTekentInput');
        if(aiTekentBtn && aiTekentInput){
            aiTekentBtn.addEventListener('click', function(){
                var desc = (aiTekentInput.value || '').trim();
                if(!desc){ addMsg('assistant', 'Typ wat de AI moet tekenen (bijv. huis, boom, zon).'); return; }
                aiTekentBtn.disabled = true;
                addMsg('user', 'AI tekent: ' + desc);
                addTyping();
                var prompt = 'Simple hand-drawn sketch, line art, minimal, clean lines: ' + desc;
                fetch(portalApiBase + '/image-generate.php', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-AI-Visuals-Public': 'itlive-public-ai-visuals-2025' }, body: JSON.stringify({ provider: 'auto', prompt: prompt, size: '1024x1024', quality: 'standard', enhance_prompt: false }) }).then(function(r){ return r.json(); }).then(function(data){
                    removeTyping();
                    aiTekentBtn.disabled = false;
                    if(data.success && data.image_url){
                        var c = document.getElementById('drawCanvas');
                        var ctx = c && c.getContext('2d');
                        if(ctx){
                            var img = new Image();
                            img.crossOrigin = 'anonymous';
                            img.onload = function(){ ctx.fillStyle = '#1e1b4b'; ctx.fillRect(0,0,c.width,c.height); var s = Math.min(c.width/img.width,c.height/img.height); var w=img.width*s, h=img.height*s, x=(c.width-w)/2, y=(c.height-h)/2; ctx.drawImage(img,x,y,w,h); addMsg('assistant', 'AI-schets op het canvas. Teken eroverheen met pen of gum.'); };
                            img.onerror = function(){ addMsg('assistant', 'Laden mislukt. Open de afbeelding in een nieuw tabblad om te downloaden.'); };
                            img.src = data.image_url;
                        } else { addMsg('assistant', 'Afbeelding gegenereerd. Ga naar AI afbeelding of Mijn creaties.'); }
                    } else { var err = (data && data.error) ? data.error : 'AI tekenen mislukt.'; if (/Admin|Image providers|fal\.ai|Replicate/i.test(err)) addMsg('assistant', err); else addMsg('assistant', err + ' Tip: Admin → AI Providers → Image generators: fal.ai of Replicate (kosteloos/goedkoop), OpenAI (betaald).'); }
                }).catch(function(){ removeTyping(); aiTekentBtn.disabled = false; addMsg('assistant', 'Verbinding mislukt.'); });
            });
            aiTekentInput.addEventListener('keydown', function(e){ if(e.key === 'Enter'){ e.preventDefault(); aiTekentBtn.click(); } });
        }
        var lastPrompt = '';
        var lastImageUrl = '';
        var lastPromptUsed = '';
        var selectedLogoStyle = 'modern';
        var selectedIconStyle = 'flat';
        var sessionCreaties = [];
        var typeLabels = { logo: 'Logo', icon: 'Icoon', banner: 'Banner', flowchart: 'Flowchart' };
        var imagesStudioSessionId = (function(){ var s = localStorage.getItem('visuals_images_studio_session'); if(!s){ s = 'sess_' + Date.now() + '_' + Math.random().toString(36).slice(2,10); localStorage.setItem('visuals_images_studio_session', s); } return s; })();
        var imagesStudioImages = [];
        var imagesStudioEditSelectedId = null;
        var editInChatImageId = null;
        var editInChatSessionId = null;
        function renderCreaties(){
            var gallery = document.getElementById('creatiesGallery');
            var emptyEl = document.getElementById('creatiesEmpty');
            var list = sessionCreaties || [];
            if(!gallery) return;
            if(list.length === 0){ gallery.innerHTML = ''; if(emptyEl) emptyEl.style.display = 'block'; return; }
            if(emptyEl) emptyEl.style.display = 'none';
            gallery.innerHTML = list.map(function(c, i){
                var type = (c.type || 'logo').toLowerCase();
                var label = typeLabels[type] || type;
                var badgeClass = 'creatie-type-badge ' + (type === 'flowchart' ? 'flowchart' : type);
                return '<div class="creatie-card" data-index="'+i+'">' +
                    '<span class="'+badgeClass+'">'+esc(label)+'</span>' +
                    '<div class="creatie-card-img-wrap"><img src="'+esc(c.url)+'" alt="'+esc(label)+'"></div>' +
                    '<div class="creatie-actions">' +
                    '<a href="'+esc(c.url)+'" download="visuals-'+type+'-'+i+'.png" target="_blank" rel="noopener" title="Download">💾</a>' +
                    '<button type="button" class="creatie-verbeter" data-index="'+i+'" title="Verbeter met feedback">✨</button>' +
                    '</div></div>';
            }).join('');
            gallery.querySelectorAll('.creatie-verbeter').forEach(function(btn){
                btn.addEventListener('click', function(){
                    var idx = parseInt(btn.getAttribute('data-index'), 10);
                    var c = list[idx];
                    if(!c) return;
                    if(typeEl) typeEl.value = c.type || 'logo';
                    showExtraForType(c.type || 'logo');
                    setPromptPlaceholder();
                    var promptInput = document.getElementById('aiImagePrompt');
                    if(promptInput) promptInput.value = c.prompt || '';
                    var fb = document.getElementById('aiImageFeedback');
                    if(fb){ fb.value = ''; fb.placeholder = 'Bijv. meer contrast, andere kleur…'; }
                    switchToTab('ai-afbeelding');
                    if(fb) setTimeout(function(){ fb.focus(); }, 100);
                });
            });
        }
        renderCreaties();

        function renderImagesStudioGrid(){
            var grid = document.getElementById('studioGrid');
            if(!grid) return;
            var list = imagesStudioImages || [];
            if(list.length === 0){
                grid.innerHTML = '<div class="studio-placeholder" style="grid-column:1/-1;">Genereer een afbeelding of laad History.</div>';
                return;
            }
            grid.innerHTML = list.map(function(img){
                var url = img.url || '';
                var promptShort = (img.prompt || '').slice(0, 60);
                if(promptShort.length < (img.prompt || '').length) promptShort += '…';
                return '<div class="studio-cell has-image" data-id="'+esc(img.id)+'">' +
                    (url ? '<img src="'+esc(url)+'" alt="">' : '') +
                    '<div class="studio-cell-actions">' +
                    '<a href="'+esc(url)+'" download target="_blank" rel="noopener" title="Download">💾</a>' +
                    '<button type="button" class="studio-btn-edit" data-id="'+esc(img.id)+'" title="Bewerk met nieuwe beschrijving">Bewerk</button>' +
                    '<button type="button" class="studio-btn-variations" data-id="'+esc(img.id)+'" title="Maak variaties">Variaties</button>' +
                    '<button type="button" class="studio-btn-edit-in-chat" data-id="'+esc(img.id)+'" title="Bewerk in chat">Bewerk in chat</button>' +
                    '</div></div>';
            }).join('');
            grid.querySelectorAll('.studio-btn-edit').forEach(function(btn){
                btn.addEventListener('click', function(){
                    var id = btn.getAttribute('data-id');
                    if(!id) return;
                    imagesStudioEditSelectedId = id;
                    var promptEl = document.getElementById('studioPrompt');
                    if(promptEl){ promptEl.placeholder = 'Beschrijf wat je wilt aanpassen…'; promptEl.value = ''; promptEl.focus(); }
                });
            });
            grid.querySelectorAll('.studio-btn-variations').forEach(function(btn){
                btn.addEventListener('click', function(){
                    var id = btn.getAttribute('data-id');
                    if(!id) return;
                    btn.disabled = true;
                    fetch(imagesStudioApiBase + '/variations.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ image_id: id, n: 4, session_id: imagesStudioSessionId })
                    }).then(function(r){ return r.json(); }).then(function(data){
                        btn.disabled = false;
                        if(data.images && data.images.length){ imagesStudioImages = imagesStudioImages.concat(data.images); renderImagesStudioGrid(); addMsg('assistant', data.images.length + ' variaties toegevoegd aan de grid.'); }
                        else addMsg('assistant', (data && data.error) ? data.error : 'Variaties mislukt.');
                    }).catch(function(){ btn.disabled = false; addMsg('assistant', 'Verbinding mislukt.'); });
                });
            });
            grid.querySelectorAll('.studio-btn-edit-in-chat').forEach(function(btn){
                btn.addEventListener('click', function(){
                    var id = btn.getAttribute('data-id');
                    if(!id) return;
                    editInChatImageId = id;
                    editInChatSessionId = imagesStudioSessionId;
                    var hint = document.getElementById('editInChatHint');
                    if(hint) hint.style.display = 'block';
                    if(input){ input.placeholder = 'Bijv. maak achtergrond donkerder, anime stijl…'; input.focus(); }
                });
            });
        }
        function loadImagesStudioSession(){
            fetch(imagesStudioApiBase + '/session.php?session_id=' + encodeURIComponent(imagesStudioSessionId)).then(function(r){ return r.json(); }).then(function(data){
                if(data.images && data.images.length){ imagesStudioImages = data.images; renderImagesStudioGrid(); addMsg('assistant', 'Images Studio history geladen (' + data.images.length + ' beelden).'); }
                else { imagesStudioImages = []; renderImagesStudioGrid(); addMsg('assistant', 'Nog geen beelden in deze sessie.'); }
            }).catch(function(){ addMsg('assistant', 'History laden mislukt.'); });
        }
        document.getElementById('studioGenBtn').addEventListener('click', function(){
            var promptEl = document.getElementById('studioPrompt');
            var prompt = (promptEl && promptEl.value) ? promptEl.value.trim() : '';
            if(imagesStudioEditSelectedId){
                if(!prompt){ addMsg('assistant', 'Typ wat je wilt aanpassen en klik op Genereer afbeelding.'); return; }
                var editBtn = document.getElementById('studioGenBtn');
                if(editBtn) editBtn.disabled = true;
                fetch(imagesStudioApiBase + '/edit.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image_id: imagesStudioEditSelectedId, edit_prompt: prompt, session_id: imagesStudioSessionId })
                }).then(function(r){ return r.json(); }).then(function(data){
                    if(editBtn) editBtn.disabled = false;
                    imagesStudioEditSelectedId = null;
                    if(promptEl) promptEl.placeholder = 'Describe what you want to see…';
                    if(data.image && data.image.url){ imagesStudioImages.push(data.image); renderImagesStudioGrid(); addMsg('assistant', 'Afbeelding aangepast.', data.image.url); }
                    else addMsg('assistant', (data && data.error) ? data.error : 'Bewerken mislukt.');
                }).catch(function(){ if(editBtn) editBtn.disabled = false; imagesStudioEditSelectedId = null; addMsg('assistant', 'Verbinding mislukt.'); });
                return;
            }
            if(!prompt){ addMsg('assistant', 'Vul een beschrijving in bij Images Studio (bijv. modern IT logo, blauw en wit).'); return; }
            var btn = document.getElementById('studioGenBtn');
            if(btn) btn.disabled = true;
            var provider = (document.getElementById('studioProvider') && document.getElementById('studioProvider').value) || 'auto';
            var size = (document.getElementById('studioSize') && document.getElementById('studioSize').value) || '1024x1024';
            fetch(imagesStudioApiBase + '/generate.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ prompt: prompt, n: 1, session_id: imagesStudioSessionId, provider: provider, size: size })
            }).then(function(r){ return r.json(); }).then(function(data){
                if(btn) btn.disabled = false;
                if(promptEl) promptEl.value = '';
                if(data.images && data.images.length){ imagesStudioImages = imagesStudioImages.concat(data.images); renderImagesStudioGrid(); addMsg('assistant', 'Afbeelding gegenereerd.', data.images[0].url); }
                else addMsg('assistant', (data && data.error) ? data.error : 'Genereren mislukt.');
            }).catch(function(){ if(btn) btn.disabled = false; addMsg('assistant', 'Verbinding mislukt.'); });
        });
        document.getElementById('studioClear').addEventListener('click', function(){
            imagesStudioImages = [];
            imagesStudioEditSelectedId = null;
            renderImagesStudioGrid();
            var promptEl = document.getElementById('studioPrompt');
            if(promptEl){ promptEl.placeholder = 'Describe what you want to see…'; promptEl.value = ''; }
            addMsg('assistant', 'Images Studio grid gewist (sessie blijft bestaan voor History).');
        });
        document.getElementById('studioHistory').addEventListener('click', function(){
            switchToTab('images-studio');
            loadImagesStudioSession();
        });
        document.getElementById('studioPrompt').addEventListener('keydown', function(e){
            if(e.key === 'Enter'){ e.preventDefault(); document.getElementById('studioGenBtn').click(); }
        });
        renderImagesStudioGrid();

        function showExtraForType(type){
            ['aiExtraLogo','aiExtraIcon','aiExtraBanner','aiExtraFlowchart'].forEach(function(id){ var el=document.getElementById(id); if(el) el.style.display='none'; });
            var show = type==='logo'?'aiExtraLogo':(type==='icon'?'aiExtraIcon':(type==='banner'?'aiExtraBanner':(type==='flowchart'?'aiExtraFlowchart':null)));
            if(show){ var el=document.getElementById(show); if(el) el.style.display='block'; }
        }
        var typeEl = document.getElementById('aiImageType');
        var promptPlaceholders = { logo: 'Bijv. minimalistisch, bruin en wit…', icon: 'Optioneel extra (onderwerp staat hierboven)', banner: 'Bijv. actie-aanbieding, warme kleuren…', flowchart: 'Bijv. proces: aanvraag → goedkeuring → oplevering' };
        function setPromptPlaceholder(){ var p=document.getElementById('aiImagePrompt'); if(p) p.placeholder = promptPlaceholders[typeEl.value] || promptPlaceholders.logo; }
        if(typeEl){ typeEl.addEventListener('change', function(){ showExtraForType(typeEl.value); setPromptPlaceholder(); }); showExtraForType(typeEl.value); setPromptPlaceholder(); }

        document.querySelectorAll('#aiLogoStyle .visuals-style-opt').forEach(function(b){ b.addEventListener('click',function(){ document.querySelectorAll('#aiLogoStyle .visuals-style-opt').forEach(function(o){o.classList.remove('selected');}); b.classList.add('selected'); selectedLogoStyle = b.getAttribute('data-style')||'modern'; }); });
        document.querySelectorAll('#aiIconStyle .visuals-style-opt').forEach(function(b){ b.addEventListener('click',function(){ document.querySelectorAll('#aiIconStyle .visuals-style-opt').forEach(function(o){o.classList.remove('selected');}); b.classList.add('selected'); selectedIconStyle = b.getAttribute('data-style')||'flat'; }); });

        var logoStylePrompts = { modern: 'Professional modern logo, clean geometric shapes, vector style, transparent background', minimal: 'Minimalist logo, simple and elegant, few elements, transparent background', vintage: 'Vintage style logo, classic typography feel, warm tones, transparent background', '3d': '3D futuristic logo, depth and dimension, sleek, transparent background', handdrawn: 'Hand-drawn style logo, organic lines, creative and friendly, transparent background' };
        var iconStylePrompts = { flat: 'Flat line-art icon, minimalist, transparent background, vector style', minimal: 'Minimalist filled icon, solid simple shapes, transparent background', outline: 'Outline icon, thin lines only, transparent background, simple and clear' };

        function buildFullPrompt(desc){
            var type = (typeEl && typeEl.value) || 'logo';
            desc = (desc || '').trim();
            if (type === 'logo') {
                var bedrijf = (document.getElementById('aiLogoBedrijf')&&document.getElementById('aiLogoBedrijf').value)||''; bedrijf=bedrijf.trim();
                var branche = (document.getElementById('aiLogoBranche')&&document.getElementById('aiLogoBranche').value)||'';
                var text = desc || (bedrijf ? 'Logo voor ' + bedrijf + (branche ? ', branche: ' + branche : '') : (branche ? 'Logo, branche: ' + branche : ''));
                if (!text) return '';
                var color = (document.getElementById('aiLogoColor')&&document.getElementById('aiLogoColor').value)||''; color = color.trim().replace(/^#/,'');
                var colorPart = color ? ', primary color #' + color : '';
                return 'Logo design: ' + text + ', style: ' + (logoStylePrompts[selectedLogoStyle] || logoStylePrompts.modern) + colorPart + ', high quality, suitable for brand';
            }
            if (type === 'icon') {
                var subject = (document.getElementById('aiIconSubject')&&document.getElementById('aiIconSubject').value)||''; subject = subject.trim() || desc || 'icon';
                var color = (document.getElementById('aiIconColor')&&document.getElementById('aiIconColor').value)||''; color = color.trim().replace(/^#/,'');
                var colorPart = color ? ', single color #' + color : '';
                var tpl = { flat: 'Flat line-art icon of ', minimal: 'Minimalist filled icon of ', outline: 'Outline icon of ' };
                var pre = tpl[selectedIconStyle] || tpl.flat;
                return pre + subject + ', minimalist, transparent background, vector style' + colorPart + ', clean edges, no shadows';
            }
            if (type === 'banner') {
                var platform = (document.getElementById('aiBannerPlatform')&&document.getElementById('aiBannerPlatform').value)||'Instagram';
                var format = (document.getElementById('aiBannerFormat')&&document.getElementById('aiBannerFormat').value)||'1:1';
                var text = desc || 'Social media post';
                return 'Social media banner for ' + platform + ', format ' + format + ', professional design: ' + text;
            }
            if (type === 'flowchart') {
                // Image models cannot render text reliably – ask only for shapes/arrows; steps shown as legend below
                return (desc ? 'Professional flowchart diagram: abstract shapes only. Use colored boxes or circles connected by arrows in a clear flow (left to right or top to bottom). Do NOT draw or write any text, words or labels inside the image – only geometric shapes and arrows. Modern flat design, clean light background, 3-6 nodes. Concept: ' + desc : '');
            }
            return desc || '';
        }
        function doGenerateImage(overridePrompt){
            var promptInput = document.getElementById('aiImagePrompt');
            var prompt = overridePrompt || buildFullPrompt((promptInput && promptInput.value) || '');
            var type = (typeEl && typeEl.value) || 'logo';
            if(!prompt){
                if (type === 'logo') addMsg('assistant','Vul bedrijfsnaam en/of branche in, of een beschrijving hieronder. Tip: klik op <strong>Vul uit gesprek</strong> om velden uit het gesprek in te vullen.');
                else if (type === 'icon') addMsg('assistant','Vul het onderwerp van het icoon in (bijv. contactformulier, klantenservice), of klik op Vul uit gesprek bij icoon.');
                else if (type === 'banner' || type === 'flowchart') addMsg('assistant','Vul een beschrijving in bij AI afbeelding.');
                else addMsg('assistant','Vul eerst een beschrijving in bij AI afbeelding.');
                return Promise.reject();
            }
            var provider = (document.getElementById('aiImageProvider')&&document.getElementById('aiImageProvider').value)||'auto';
            var size = (document.getElementById('aiImageSize')&&document.getElementById('aiImageSize').value)||'1024x1024';
            var quality = (document.getElementById('aiImageQuality')&&document.getElementById('aiImageQuality').value)||'standard';
            var enhance = !(document.getElementById('aiImageEnhance')&&!document.getElementById('aiImageEnhance').checked);
            var btn = document.getElementById('aiImageGenBtn');
            var resultEl = document.getElementById('aiImageResult');
            var placeholderEl = document.getElementById('aiImagePlaceholder');
            var refineWrap = document.getElementById('aiImageRefineWrap');
            if(btn) btn.disabled = true;
            if(placeholderEl) placeholderEl.style.display = 'none';
            addMsg('user', overridePrompt ? 'Verbeter: ' + (document.getElementById('aiImageFeedback')&&document.getElementById('aiImageFeedback').value) : prompt);
            addTyping();
            return fetch(portalApiBase + '/image-generate.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-AI-Visuals-Public': 'itlive-public-ai-visuals-2025' },
                body: JSON.stringify({ provider: provider, prompt: prompt, size: size, quality: quality, enhance_prompt: enhance })
            }).then(function(r){
                if(!r.ok && r.headers.get('Content-Type')&&r.headers.get('Content-Type').indexOf('json')===-1) return r.text().then(function(t){ throw new Error(r.status + ': ' + (t||r.statusText).slice(0,200)); });
                return r.json();
            }).then(function(data){
                removeTyping();
                if(btn) btn.disabled = false;
                if(data.success && data.image_url){
                    lastPrompt = prompt;
                    lastImageUrl = data.image_url;
                    lastPromptUsed = data.prompt_used || prompt;
                    var currentType = (typeEl && typeEl.value) ? typeEl.value : 'logo';
                    sessionCreaties.push({ type: currentType, url: data.image_url, prompt: prompt });
                    renderCreaties();
                    var providerLabel = (data.provider === 'openai') ? 'OpenAI' : (data.provider === 'fal') ? 'fal.ai' : (data.provider === 'replicate') ? 'Replicate' : (data.provider === 'imagine') ? 'Imagine' : '';
                    var successText = 'Afbeelding gegenereerd.' + (providerLabel ? ' (met ' + providerLabel + ')' : '') + (data.prompt_used ? ' Gebruikte prompt: ' + data.prompt_used : '');
                    addMsg('assistant', successText, data.image_url);
                    conversationHistory.push({ role: 'user', content: prompt });
                    conversationHistory.push({ role: 'assistant', content: 'Afbeelding gegenereerd.', image_url: data.image_url });
                    if(resultEl){ resultEl.style.display = 'block'; var legendHtml = (currentType === 'flowchart' && window._lastFlowchartSteps && window._lastFlowchartSteps.length) ? '<p style="margin-top:10px;font-size:0.9rem;color:#e2e8f0;font-weight:600;">Stappen (tekst hoort bij de vakken van links naar rechts): ' + window._lastFlowchartSteps.join(' → ') + '</p>' : ''; resultEl.innerHTML = '<span class="creatie-type-badge '+(currentType==='flowchart'?'flowchart':currentType)+'" style="display:inline-block;margin-bottom:6px;">'+(typeLabels[currentType]||currentType)+'</span><br><img src="'+esc(data.image_url)+'" alt="Resultaat" style="max-width:100%;border-radius:8px;">'+legendHtml+'<p style="margin-top:8px;font-size:0.85rem;color:#c4b5fd;"><a href="'+esc(data.image_url)+'" target="_blank" rel="noopener">Open in nieuw tabblad</a> · <a href="'+esc(data.image_url)+'" download="visuals-'+currentType+'-'+Date.now()+'.png">Download</a></p>'; }
                    if(refineWrap){ refineWrap.style.display = 'block'; }
                    if(document.getElementById('aiImageFeedback')) document.getElementById('aiImageFeedback').value = '';
                    if(currentType === 'flowchart'){
                        var fp = document.getElementById('flowchartPreview');
                        var stepLegend = (window._lastFlowchartSteps && window._lastFlowchartSteps.length) ? '<p style="margin-top:8px;font-size:0.85rem;color:#334155;font-weight:600;">Stappen: ' + window._lastFlowchartSteps.join(' → ') + '</p>' : '';
                        if(fp){ fp.style.display = 'block'; fp.innerHTML = '<img src="'+esc(data.image_url)+'" alt="Flowchart" style="max-width:100%;border-radius:8px;margin-top:8px;">'+stepLegend+'<p style="margin-top:6px;font-size:0.8rem;"><a href="'+esc(data.image_url)+'" target="_blank" rel="noopener">Open</a> · <a href="'+esc(data.image_url)+'" download="flowchart-'+Date.now()+'.png">Download</a></p>'; }
                    }
                } else {
                    var errMsg = (data && data.error) ? data.error : (typeof AI_FALLBACK_VISUALS !== 'undefined' ? AI_FALLBACK_VISUALS : 'Genereren mislukt. Probeer het later opnieuw.');
                    var tip = '';
                    if (/key|provider|Niet ingelogd|API|credits|geen.*provider|Geen image/i.test(errMsg)) tip = ' Geen werkende image provider. Laat een beheerder onder Admin Portal → Image providers minimaal één geldige API-key instellen (OpenAI, fal.ai of Replicate).';
                    addMsg('assistant', errMsg + tip);
                }
            }).catch(function(err){
                removeTyping();
                if(btn) btn.disabled = false;
                var msg = (err && err.message) ? err.message : 'Verbinding mislukt.';
                if (msg.indexOf('Failed to fetch') !== -1 || msg.indexOf('NetworkError') !== -1) msg = 'Geen verbinding met de server. Controleer of je op itlive.nl/visuals bent; de beeldgenerator staat op portal.itlive.nl – als je een blokkade ziet, neem contact op.';
                addMsg('assistant', msg);
            });
        }
        document.getElementById('aiImageGenBtn').addEventListener('click', function(){ doGenerateImage(); });
        document.getElementById('aiImageRefineBtn').addEventListener('click', function(){
            var fb = (document.getElementById('aiImageFeedback') && document.getElementById('aiImageFeedback').value) || '';
            if(!fb){ addMsg('assistant', 'Vul bij Verbeter met feedback in wat je wilt aanpassen (bijv. meer contrast, andere kleur).'); return; }
            var newPrompt = (lastPromptUsed || lastPrompt || '') + '. Aanpassing: ' + fb;
            doGenerateImage(newPrompt);
        });
        var flowchartStepsEl = document.getElementById('flowchartSteps');
        var btnGenFlowchart = document.getElementById('btnGenFlowchart');
        var btnFlowchartVul = document.getElementById('btnFlowchartVulUit');
        if(btnFlowchartVul && flowchartStepsEl){
            btnFlowchartVul.addEventListener('click', function(){
                var parts = [];
                for(var i = conversationHistory.length - 1; i >= 0 && parts.length < 12; i--){
                    if(conversationHistory[i].role !== 'assistant') continue;
                    var t = (conversationHistory[i].content || '').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim();
                    if(!t) continue;
                    var lines = t.split(/\n|\.\s*|\u2022\s*|[-–—]\s*|\d+\.\s*|stap\s*\d+\s*[:\.]\s*/gi).map(function(s){ return s.replace(/^stap\s*\d+\s*[:\.]\s*/gi,'').trim(); }).filter(function(s){ return s.length > 1 && s.length < 80; });
                    for(var j = lines.length - 1; j >= 0 && parts.length < 12; j--) if(lines[j]) parts.unshift(lines[j]);
                }
                var text = parts.length ? parts.slice(0,10).join('\n') : '';
                flowchartStepsEl.value = text || flowchartStepsEl.value;
                if(!text) addMsg('assistant', 'Nog geen stappen uit het gesprek. Stel een vraag of beschrijf een proces; daarna kun je opnieuw op \u201eVul uit gesprek\u201d klikken.');
                else setTimeout(function(){ flowchartStepsEl.focus(); }, 80);
            });
        }
        var btnLogoVulUit = document.getElementById('btnLogoVulUit');
        if(btnLogoVulUit) btnLogoVulUit.addEventListener('click', function(){ fillLogoFromConversation(false); var el = document.getElementById('aiLogoBedrijf'); if(el) setTimeout(function(){ el.focus(); }, 80); });
        var btnLogoKvkHaal = document.getElementById('btnLogoKvkHaal');
        var aiLogoKvk = document.getElementById('aiLogoKvk');
        var aiLogoBedrijf = document.getElementById('aiLogoBedrijf');
        if(btnLogoKvkHaal && aiLogoKvk && aiLogoBedrijf){
            btnLogoKvkHaal.addEventListener('click', function(){
                var kvk = (aiLogoKvk.value || '').replace(/\D/g,'').slice(0,8);
                if(kvk.length !== 8){ addMsg('assistant', 'Vul een geldig KVK-nummer in (8 cijfers).'); return; }
                btnLogoKvkHaal.disabled = true;
                btnLogoKvkHaal.textContent = 'Ophalen…';
                fetch(kvkProxyUrl + '?kvk=' + encodeURIComponent(kvk), { method: 'GET', credentials: 'omit' }).then(function(r){ return r.json(); }).then(function(data){
                    btnLogoKvkHaal.disabled = false;
                    btnLogoKvkHaal.textContent = 'Haal op (KVK)';
                    if(data && data.ok && (data.bedrijfsnaam || data.naam)){ aiLogoBedrijf.value = (data.bedrijfsnaam || data.naam || '').trim().slice(0, 120); addMsg('assistant', 'Bedrijfsnaam ingevuld uit het Handelsregister.'); aiLogoBedrijf.focus(); }
                    else if(data && data.zoekResultaten && data.zoekResultaten.length > 0){ var first = data.zoekResultaten[0]; aiLogoBedrijf.value = (first.bedrijfsnaam || first.naam || '').trim().slice(0, 120); addMsg('assistant', 'Eerste resultaat ingevuld. Bij meerdere opties: zoek op domeinpagina of vul handmatig aan.'); aiLogoBedrijf.focus(); }
                    else addMsg('assistant', (data && data.error) ? data.error : 'Geen bedrijfsgegevens gevonden voor dit KVK-nummer.');
                }).catch(function(){
                    btnLogoKvkHaal.disabled = false;
                    btnLogoKvkHaal.textContent = 'Haal op (KVK)';
                    addMsg('assistant', 'Ophalen mislukt. Controleer je verbinding of probeer later. De KVK-API staat op portal.itlive.nl.');
                });
            });
        }
        var btnIconVulUit = document.getElementById('btnIconVulUit');
        if(btnIconVulUit){
            btnIconVulUit.addEventListener('click', function(){
                var subjectEl = document.getElementById('aiIconSubject');
                var promptEl = document.getElementById('aiImagePrompt');
                var found = '';
                for(var i = conversationHistory.length - 1; i >= 0; i--){
                    var c = (conversationHistory[i].content || '').replace(/<[^>]+>/g,' ').trim();
                    if(!c) continue;
                    if(conversationHistory[i].role === 'assistant' && /icoon|pictogram|icon|symbool|onderwerp/i.test(c)){
                        var m = c.match(/(?:icoon|pictogram|symbool)\s+(?:van|voor|:)?\s*([A-Za-z\u00c0-\u024f0-9\s\-]{2,30})/i) || c.match(/([A-Za-z\u00c0-\u024f]{4,25})/);
                        if(m && m[1]){ found = m[1].trim().slice(0, 40); break; }
                    }
                    if(conversationHistory[i].role === 'user' && c.length >= 2 && c.length <= 40 && !/^(ja|nee|doen|maak|genereer|ok|graag)$/i.test(c)){ found = c.slice(0, 40); break; }
                }
                if(found && subjectEl){ subjectEl.value = found; }
                if(found && promptEl && !promptEl.value){ promptEl.value = 'icoon ' + found; }
                addMsg('assistant', found ? 'Onderwerp icoon ingevuld uit het gesprek. Pas aan indien nodig en genereer.' : 'Nog geen onderwerp in het gesprek. Type wat voor icoon je wilt (bijv. contactformulier, brood).');
                if(found && subjectEl) setTimeout(function(){ subjectEl.focus(); }, 100);
            });
        }
        if(btnGenFlowchart && typeEl){
            btnGenFlowchart.addEventListener('click', function(){
                var raw = (flowchartStepsEl && flowchartStepsEl.value) ? flowchartStepsEl.value.trim() : '';
                var steps = raw.split(/\n/).map(function(s){ return s.trim(); }).filter(Boolean);
                var desc = steps.length ? ('proces: ' + steps.join(' -> ')) : 'proces: aanvraag -> goedkeuring -> oplevering';
                typeEl.value = 'flowchart';
                showExtraForType('flowchart');
                setPromptPlaceholder();
                var promptInput = document.getElementById('aiImagePrompt');
                if(promptInput) promptInput.value = desc;
                switchToTab('ai-afbeelding');
                window._lastFlowchartSteps = steps.length ? steps : ['Aanvraag','Goedkeuring','Oplevering','Facturatie'];
                doGenerateImage(desc);
            });
        }
    })();
    </script>
</body>
</html>