<?php
/**
 * Fullscreen InVision Prototype Player Template for WordPress
 * Streamlined Feedback Mode by Default (Ultra-Slim 44px Top Bar)
 * Brand Identity: Bowden Works
 */
if (!defined('ABSPATH')) exit;

if (!defined('DONOTCACHEPAGE')) {
    define('DONOTCACHEPAGE', true);
}
nocache_headers();

$current_user = wp_get_current_user();
$is_logged_in = is_user_logged_in();
$is_designer = ($is_logged_in && (current_user_can('manage_options') || current_user_can('edit_posts')));

$queried_obj = get_queried_object();
$is_singular_project = (is_singular('proto_project') || ($queried_obj instanceof WP_Post && $queried_obj->post_type === 'proto_project'));
$current_project_id = 0;
if ($is_singular_project && $queried_obj instanceof WP_Post) {
    $current_project_id = (int)$queried_obj->ID;
} elseif (isset($_GET['project_id']) || isset($_GET['project'])) {
    $current_project_id = (int)($_GET['project_id'] ?? $_GET['project']);
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proto Preview — Visual Feedback & Prototype Player</title>
  
  <!-- Favicon -->
  <link rel="icon" type="image/jpeg" href="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg">
  <link rel="apple-touch-icon" href="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg">
  
  <!-- Search Engine Crawl & Index Prevention (Strict Noindex) -->
  <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
  <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet">
  <meta name="bingbot" content="noindex, nofollow, noarchive, nosnippet">

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Google Fonts: EB Garamond & Radio Canada -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Radio+Canada:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
  
  <!-- Custom Styles -->
  <link rel="stylesheet" href="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'assets/css/proto-preview.css'); ?>">

  <script>
    window.protoPreviewSettings = {
      root: '<?php echo esc_url_raw(rest_url('proto-preview/v1/')); ?>',
      nonce: '<?php echo wp_create_nonce('wp_rest'); ?>',
      adminUrl: '<?php echo esc_url(admin_url('edit.php?post_type=proto_project')); ?>',
      playerUrl: '<?php echo esc_url(home_url('/?proto_preview=1')); ?>',
      currentProjectId: <?php echo (int)$current_project_id; ?>,
      isSingularView: <?php echo $is_singular_project ? 'true' : 'false'; ?>,
      isLoggedIn: <?php echo $is_logged_in ? 'true' : 'false'; ?>,
      isDesigner: <?php echo $is_designer ? 'true' : 'false'; ?>,
      currentUser: {
        id: <?php echo (int)($current_user->ID ?: 0); ?>,
        name: '<?php echo esc_js($current_user->display_name ?: ''); ?>',
        email: '<?php echo esc_js($current_user->user_email ?: ''); ?>',
        role: '<?php echo $is_designer ? 'designer' : ($is_logged_in ? 'client' : 'guest'); ?>',
        avatar: '<?php echo esc_url($current_user->ID ? get_avatar_url($current_user->ID) : ''); ?>'
      }
    };
    window.protoPreviewData = {
      rest_url: window.protoPreviewSettings.root.replace(/\/+$/, ''),
      nonce: window.protoPreviewSettings.nonce
    };
  </script>
</head>
<body class="bg-[#edf2f6] text-[#2D3748] h-screen w-screen flex flex-col antialiased overflow-hidden select-none">

  <!-- =========================================================================
       1. ULTRA-SLIM TOP NAVIGATION BAR (44px)
       ========================================================================= -->
  <header id="top-navigation-header" class="relative h-11 bg-white/95 backdrop-blur-md border-b border-[#e2d9d2] px-3 flex items-center justify-between z-40 shrink-0 shadow-sm transition-transform duration-300">
    
    <!-- LEFT: Brand & Unified Breadcrumb Navigator (Project / Screen / Option) -->
    <div class="flex items-center gap-1.5 min-w-0">
      
      <!-- Brand Logo Badge -->
      <?php if ($is_designer) : ?>
        <a href="<?php echo esc_url(admin_url('edit.php?post_type=proto_project')); ?>" class="flex items-center shrink-0 hover:opacity-85 transition p-1" title="Go to WordPress Projects List">
          <img src="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg" alt="Bowden Works" class="w-6 h-6 rounded-md object-cover border border-[#b02b2b]/30 shadow-xs" />
        </a>
      <?php else : ?>
        <div class="flex items-center shrink-0 p-1">
          <img src="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg" alt="Bowden Works" class="w-6 h-6 rounded-md object-cover border border-[#b02b2b]/30 shadow-xs" />
        </div>
      <?php endif; ?>

      <div class="h-4 w-[1px] bg-slate-200 shrink-0 mx-1"></div>

      <!-- BREADCRUMB 1: PROJECT (Click opens Full-Page Project Overview Matrix) -->
      <div class="relative shrink-0 flex items-center bg-slate-50 hover:bg-slate-100 rounded-md border border-slate-200/80 p-0.5 transition">
        <button id="overview-breadcrumb-btn" onclick="window.app.toggleProjectOverview()" class="flex items-center gap-1.5 px-2 py-0.5 rounded text-left cursor-pointer group transition" title="Toggle Full-Page Project Overview (Hotkey: O)">
          <i data-lucide="grid" class="w-3.5 h-3.5 text-[#b02b2b] group-hover:scale-110 transition-transform"></i>
          <span id="current-project-title" class="text-xs font-bold text-slate-800 max-w-[100px] sm:max-w-[140px] truncate group-hover:text-[#b02b2b]">Project</span>
          <span class="text-[9px] px-1 py-0.2 rounded bg-white text-slate-500 font-bold border border-slate-200/80 group-hover:bg-[#fbeeed] group-hover:text-[#b02b2b] transition">Overview</span>
        </button>

        <?php if ($is_designer) : ?>
          <button onclick="window.app.toggleDropdown('project-dropdown-menu')" class="p-1 rounded text-slate-400 hover:text-slate-700 transition cursor-pointer" title="Switch Client Project">
            <i data-lucide="chevron-down" class="w-3 h-3"></i>
          </button>

          <div id="project-dropdown-menu" class="hidden absolute top-full left-0 mt-1.5 w-72 bg-white rounded-2xl shadow-2xl border border-slate-200 p-2 z-50 animate-in fade-in zoom-in-95 duration-150">
            <div class="px-3 py-1.5 border-b border-slate-100 mb-1 flex items-center justify-between">
              <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Client Projects</span>
              <a href="<?php echo esc_url(admin_url('post-new.php?post_type=proto_project')); ?>" class="text-[10px] font-bold text-[#b02b2b] hover:underline">+ New Project</a>
            </div>
            <div id="project-dropdown-items" class="space-y-1 max-h-60 overflow-y-auto"></div>
          </div>
        <?php endif; ?>
      </div>

      <span class="text-slate-300 text-xs font-mono">/</span>

      <!-- BREADCRUMB 2: SCREEN / FLOW -->
      <div class="relative shrink-0">
        <button onclick="window.app.toggleDropdown('page-dropdown-menu')" class="flex items-center gap-1 px-2 py-1 rounded-md hover:bg-slate-100 transition text-left cursor-pointer" title="Switch Screen Flow (Hotkey: [ or ])">
          <i data-lucide="layout" class="w-3.5 h-3.5 text-slate-500"></i>
          <span id="current-page-title" class="text-xs font-bold text-slate-800 max-w-[90px] sm:max-w-[130px] truncate">Homepage</span>
          <i data-lucide="chevron-down" class="w-3 h-3 text-slate-400"></i>
        </button>

        <div id="page-dropdown-menu" class="hidden absolute top-full left-0 mt-1.5 w-72 bg-white rounded-2xl shadow-2xl border border-slate-200 p-2 z-50 animate-in fade-in zoom-in-95 duration-150">
          <div class="px-3 py-1.5 border-b border-slate-100 mb-1 flex items-center justify-between">
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Screen Flows</span>
            <span class="text-[10px] text-slate-400 font-mono">[ / ] to step</span>
          </div>
          <div id="page-dropdown-items" class="space-y-1 max-h-60 overflow-y-auto"></div>
        </div>
      </div>

      <span class="text-slate-300 text-xs font-mono">/</span>

      <!-- BREADCRUMB 3: VARIATION OPTION WITH TOP BAR LEFT/RIGHT ARROWS -->
      <div class="relative shrink-0 flex items-center bg-slate-50 hover:bg-slate-100/80 rounded-md border border-slate-200/80 p-0.5 transition shadow-2xs z-20">
        
        <!-- Left Arrow Button on Top Bar (Always active in Comment & Play modes) -->
        <button onclick="window.app.navigateAdjacentOption(-1)" class="p-1 rounded text-slate-500 hover:text-slate-900 hover:bg-white transition cursor-pointer" title="Previous Option / Screen (Hotkey: [ or ←)">
          <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
        </button>

        <!-- Option Dropdown Trigger -->
        <button onclick="window.app.toggleDropdown('layout-dropdown-menu')" class="flex items-center gap-1.5 px-2 py-0.5 rounded bg-[#fbeeed] border border-[#b02b2b]/30 hover:border-[#b02b2b] text-left cursor-pointer transition">
          <span id="current-layout-badge" class="px-1.5 py-0.2 rounded bg-white text-[#b02b2b] font-extrabold text-[10px] shadow-xs">Opt 1</span>
          <span id="current-layout-title" class="text-xs font-bold text-slate-900 max-w-[80px] sm:max-w-[130px] truncate">Modern SaaS</span>
          <i data-lucide="chevron-down" class="w-3 h-3 text-[#b02b2b]"></i>
        </button>

        <!-- Right Arrow Button on Top Bar (Always active in Comment & Play modes) -->
        <button onclick="window.app.navigateAdjacentOption(1)" class="p-1 rounded text-slate-500 hover:text-slate-900 hover:bg-white transition cursor-pointer" title="Next Option / Screen (Hotkey: ] or →)">
          <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
        </button>

        <div id="layout-dropdown-menu" class="hidden absolute top-full left-0 mt-1.5 w-80 bg-white rounded-2xl shadow-2xl border border-slate-200 p-2 z-50 animate-in fade-in zoom-in-95 duration-150">
          <div class="px-3 py-1.5 border-b border-slate-100 flex items-center justify-between mb-1">
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Screen Variations</span>
            <button onclick="window.app.openModal('upload-layout-modal')" class="text-[10px] font-bold text-[#b02b2b] hover:underline">+ Add Option</button>
          </div>
          <div id="layout-switcher-dropdown-items" class="space-y-1 max-h-72 overflow-y-auto"></div>
        </div>
      </div>

    </div>

    <!-- CENTER: Segmented Mode Switcher (Centered Exactly in Top Bar) -->
    <div class="absolute left-1/2 -translate-x-1/2 flex items-center bg-slate-100 p-0.5 rounded-lg border border-slate-200/80 shadow-inner z-10">
      <button id="btn-mode-comment" onclick="window.app.setMode('comment')" class="px-3 py-1 rounded-md text-[11px] font-bold bg-[#b02b2b] text-white transition flex items-center gap-1.5 shadow-xs cursor-pointer" title="Comment & Story Mode (Hotkey: C) — View pins, feedback discussions, and design story notes">
        <i data-lucide="message-square-plus" class="w-3.5 h-3.5"></i>
        <span>Comments & Stories</span>
        <span id="comments-count-badge" class="hidden">0</span>
      </button>

      <button id="btn-mode-preview" onclick="window.app.setMode('play')" class="px-3 py-1 rounded-md text-[11px] font-semibold text-slate-700 hover:text-slate-950 hover:bg-slate-200/80 transition flex items-center gap-1.5 cursor-pointer" title="Play Mode (Hotkey: P) — Hides pins for clean interactive demo">
        <i data-lucide="play" class="w-3 h-3 text-slate-600"></i>
        <span>Play</span>
      </button>
    </div>

    <!-- RIGHT: Compact Viewport Dropdown, Comments Drawer, User & Fullscreen Collapse -->
    <div class="flex items-center gap-2 shrink-0">
      
      <!-- DEV / STAGING URL BUTTON (Visible when current screen has dev_url) -->
      <a id="topbar-dev-url-link" href="#" target="_blank" rel="noopener" class="hidden px-2.5 py-1 rounded-md text-[11px] font-bold bg-sky-50 text-sky-800 border border-sky-200 hover:bg-sky-100 transition items-center gap-1 shadow-2xs group" title="Open live development / staging site for this screen">
        <i data-lucide="external-link" class="w-3 h-3 text-sky-600 group-hover:scale-110 transition-transform"></i>
        <span>Staging Site</span>
      </a>

      <!-- 1. DEVICE VIEWPORT COMPACT DROPDOWN -->
      <div class="relative shrink-0">
        <button onclick="window.app.toggleDropdown('viewport-dropdown-menu')" class="p-1.5 rounded-md hover:bg-slate-100 text-slate-600 border border-slate-200/80 transition flex items-center gap-1 cursor-pointer" title="Simulate Screen Viewport">
          <i id="viewport-current-icon" data-lucide="monitor" class="w-3.5 h-3.5 text-slate-700"></i>
          <i data-lucide="chevron-down" class="w-2.5 h-2.5 text-slate-400"></i>
        </button>

        <div id="viewport-dropdown-menu" class="hidden absolute top-full right-0 mt-1.5 w-44 bg-white rounded-xl shadow-2xl border border-slate-200 p-1.5 z-50 animate-in fade-in zoom-in-95 duration-150">
          <div class="px-2 py-1 text-[10px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100 mb-1">Device Frame</div>
          <button data-viewport="desktop" class="viewport-btn w-full text-left px-2 py-1.5 rounded-lg text-xs font-semibold hover:bg-slate-100 flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-1.5"><i data-lucide="monitor" class="w-3.5 h-3.5"></i> Desktop</span>
            <span class="text-[10px] text-slate-400">100%</span>
          </button>
          <button data-viewport="laptop" class="viewport-btn w-full text-left px-2 py-1.5 rounded-lg text-xs font-semibold hover:bg-slate-100 flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-1.5"><i data-lucide="laptop" class="w-3.5 h-3.5"></i> Laptop</span>
            <span class="text-[10px] text-slate-400">1280px</span>
          </button>
          <button data-viewport="tablet" class="viewport-btn w-full text-left px-2 py-1.5 rounded-lg text-xs font-semibold hover:bg-slate-100 flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-1.5"><i data-lucide="tablet" class="w-3.5 h-3.5"></i> Tablet</span>
            <span class="text-[10px] text-slate-400">768px</span>
          </button>
          <button data-viewport="mobile" class="viewport-btn w-full text-left px-2 py-1.5 rounded-lg text-xs font-semibold hover:bg-slate-100 flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-1.5"><i data-lucide="smartphone" class="w-3.5 h-3.5"></i> Mobile</span>
            <span class="text-[10px] text-slate-400">390px</span>
          </button>
        </div>
      </div>

      <!-- 2. COMMENTS WINDOW TOGGLE -->
      <button id="btn-toggle-comments-drawer" class="p-1.5 rounded-md text-slate-600 hover:bg-slate-100 border border-slate-200/80 transition cursor-pointer relative" title="View Feedback Discussions Window">
        <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
        <span id="top-bar-comments-count-badge" class="hidden absolute -top-1.5 -right-1.5 bg-[#b02b2b] text-white text-[9px] font-extrabold px-1 rounded-full shadow-xs">0</span>
      </button>

      <!-- 3. REVIEWER AVATAR / ICON -->
      <div id="user-profile-badge" class="flex items-center p-0.5 rounded-full" title="<?php echo $is_logged_in ? esc_attr($current_user->display_name) : 'Guest Reviewer'; ?>">
        <?php if ($is_logged_in && !empty($current_user->user_email)) : ?>
          <img id="current-user-avatar" src="<?php echo esc_url(get_avatar_url($current_user->ID)); ?>" class="w-6 h-6 rounded-full object-cover border border-white shadow-xs" alt="<?php echo esc_attr($current_user->display_name); ?>" />
        <?php else : ?>
          <div id="guest-user-icon" class="w-6 h-6 rounded-full bg-slate-100 text-slate-600 flex items-center justify-center border border-slate-300 shadow-xs" title="Guest Reviewer">
            <i data-lucide="user" class="w-3.5 h-3.5 stroke-[2]"></i>
          </div>
          <img id="current-user-avatar" class="hidden w-6 h-6 rounded-full object-cover border border-white shadow-xs" alt="Reviewer" />
        <?php endif; ?>
      </div>

      <!-- 4. COLLAPSIBLE DISTRACTION-FREE TOGGLE -->
      <button id="btn-toggle-header-collapse" onclick="window.app.toggleHeaderCollapse()" class="p-1.5 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-800 transition cursor-pointer" title="Toggle Distraction-Free Player Mode (Hotkey: F)">
        <i data-lucide="minimize-2" class="w-3.5 h-3.5"></i>
      </button>

    </div>
  </header>

  <!-- =========================================================================
       2. FLOATING TOP NOTCH (Appears when Header is Collapsed)
       ========================================================================= -->
  <div id="floating-collapsed-notch" class="hidden fixed top-2 left-1/2 -translate-x-1/2 z-40 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-lg border border-slate-200/80 flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-200">
    <span class="text-[11px] font-bold text-slate-800" id="notch-screen-name">Homepage</span>
    <div class="h-3.5 w-[1px] bg-slate-200"></div>
    <div class="flex items-center gap-1">
      <button onclick="window.app.setMode('comment')" class="px-2 py-0.5 rounded text-[10px] font-bold bg-[#b02b2b] text-white">Comment</button>
      <button onclick="window.app.setMode('play')" class="px-2 py-0.5 rounded text-[10px] font-semibold text-slate-600 hover:bg-slate-100">Play</button>
    </div>
    <div class="h-3.5 w-[1px] bg-slate-200"></div>
    <button onclick="window.app.toggleHeaderCollapse()" class="p-1 text-slate-400 hover:text-slate-700 cursor-pointer" title="Expand Full Top Bar">
      <i data-lucide="maximize-2" class="w-3 h-3"></i>
    </button>
  </div>

  <!-- =========================================================================
       3. MAIN WORKSPACE CONTAINER (Overview Matrix / Canvas Player + Feedback Sidebar)
       ========================================================================= -->
  <div id="main-workspace-container" class="relative flex-1 flex flex-row overflow-hidden w-full h-full min-h-0">
    
    <!-- 1. FULL-PAGE PROJECT OVERVIEW MATRIX (Spacious Standalone Page View) -->
    <div id="project-overview-page" class="hidden flex-1 flex flex-col overflow-y-auto bg-[#edf2f6] h-full min-w-0 animate-in fade-in duration-200">
      
      <!-- STICKY TOP HEADER & PROGRESS SUMMARY CONTAINER -->
      <div id="overview-sticky-header" class="sticky top-0 z-30 bg-white border-b border-[#e2d9d2] shadow-xs">
        
        <!-- Hero / Project Header Banner -->
        <div class="px-6 sm:px-10 py-3.5 border-b border-slate-100/90">
          <div class="max-w-[1920px] mx-auto flex flex-wrap items-center justify-between gap-4">
            
            <!-- Left: Brand Logo, Project Identity & Subtitle -->
            <div class="flex items-center gap-3.5 min-w-0">
              <?php if ($is_designer) : ?>
                <a href="<?php echo esc_url(admin_url('edit.php?post_type=proto_project')); ?>" class="flex items-center shrink-0 hover:opacity-85 transition p-0.5" title="Go to WordPress Projects List">
                  <img src="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg" alt="Bowden Works" class="w-8 h-8 rounded-xl object-cover border border-[#b02b2b]/30 shadow-xs" />
                </a>
              <?php else : ?>
                <div class="flex items-center shrink-0 p-0.5">
                  <img src="https://bowdenworks.com/wp-content/uploads/2023/07/bowdenworks_square.jpg" alt="Bowden Works" class="w-8 h-8 rounded-xl object-cover border border-[#b02b2b]/30 shadow-xs" />
                </div>
              <?php endif; ?>

              <div class="h-6 w-[1px] bg-slate-200 shrink-0"></div>

              <div class="flex items-center gap-2.5 min-w-0">
                <div>
                  <div class="flex items-center gap-2 flex-wrap">
                    <div class="relative flex items-center gap-1">
                      <h1 id="overview-project-title" class="text-base sm:text-lg font-black text-slate-900 tracking-tight truncate">Project Overview</h1>
                      
                      <?php if ($is_designer) : ?>
                        <!-- Switcher for Designers/Admins Only -->
                        <button type="button" onclick="window.app.toggleDropdown('overview-project-dropdown-menu')" class="p-0.5 rounded hover:bg-slate-100 text-slate-400 hover:text-slate-700 cursor-pointer" title="Switch Client Project">
                          <i data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
                        </button>

                        <div id="overview-project-dropdown-menu" class="hidden absolute top-full left-0 mt-1.5 w-72 bg-white rounded-2xl shadow-2xl border border-slate-200 p-2 z-50 animate-in fade-in zoom-in-95 duration-150">
                          <div class="px-3 py-1.5 border-b border-slate-100 mb-1 flex items-center justify-between">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Client Projects</span>
                            <a href="<?php echo esc_url(admin_url('post-new.php?post_type=proto_project')); ?>" class="text-[10px] font-bold text-[#b02b2b] hover:underline">+ New Project</a>
                          </div>
                          <div id="overview-project-dropdown-items" class="space-y-1 max-h-60 overflow-y-auto"></div>
                        </div>
                      <?php endif; ?>
                    </div>
                  </div>
                  <p id="overview-project-meta" class="text-[11px] text-slate-500 font-medium truncate">Client Prototype Matrix • All Screen Flows & Design Options</p>
                </div>
              </div>
            </div>

            <!-- Center / Right: Stakeholders & Switchers (Designer) + Search, Avatar & Launch Preview (All) -->
            <div class="flex flex-wrap items-center gap-3">
              <?php if ($is_designer) : ?>
                <!-- Interactive Stakeholders Facepile Dropdown Container -->
                <div class="relative" id="overview-stakeholders-wrapper">
                  <div id="overview-team-avatars"></div>
                  
                  <!-- Detailed Stakeholders Popover Menu -->
                  <div id="overview-stakeholders-popover" class="hidden absolute top-full right-0 sm:left-0 mt-2 w-80 sm:w-96 bg-white rounded-2xl shadow-2xl border border-slate-200 p-4 z-50 animate-in fade-in zoom-in-95 duration-150">
                    <div id="overview-stakeholders-popover-content"></div>
                  </div>
                </div>

                <!-- View Mode Switcher: Matrix Grid vs. Sitemap Tree vs. List View (for Designers) -->
                <div class="flex items-center bg-slate-100 p-1 rounded-xl border border-slate-200 shadow-2xs">
                  <button type="button" id="btn-overview-mode-matrix" onclick="window.app.setOverviewViewMode('matrix')" class="px-3 py-1.5 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition cursor-pointer bg-white text-slate-900 shadow-xs border border-slate-200/80" title="Screen Cards Matrix Grid">
                    <i data-lucide="layout-grid" class="w-3.5 h-3.5 text-[#b02b2b]"></i>
                    <span>Matrix</span>
                  </button>
                  <button type="button" id="btn-overview-mode-sitemap" onclick="window.app.setOverviewViewMode('sitemap')" class="px-3 py-1.5 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition cursor-pointer text-slate-600 hover:text-slate-900" title="Information Architecture & Sitemap Tree">
                    <i data-lucide="git-fork" class="w-3.5 h-3.5"></i>
                    <span>Sitemap Tree</span>
                  </button>
                  <button type="button" id="btn-overview-mode-list" onclick="window.app.setOverviewViewMode('list')" class="px-3 py-1.5 rounded-lg text-xs font-extrabold flex items-center gap-1.5 transition cursor-pointer text-slate-600 hover:text-slate-900" title="Spreadsheet & Progress Tracker List">
                    <i data-lucide="table" class="w-3.5 h-3.5"></i>
                    <span>List View</span>
                  </button>
                </div>
              <?php endif; ?>

              <!-- Search Filter Box -->
              <div class="relative">
                <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
                <input type="text" id="overview-search-input" oninput="window.app.filterOverviewScreens(this.value)" placeholder="Search screens & options..." class="w-44 sm:w-56 text-xs bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-3.5 py-2 focus:bg-white focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition shadow-2xs" />
              </div>

              <!-- User Profile Avatar in Overview Header -->
              <div class="flex items-center p-0.5 rounded-full" title="<?php echo $is_logged_in ? esc_attr($current_user->display_name) : 'Guest Reviewer'; ?>">
                <?php if ($is_logged_in && !empty($current_user->user_email)) : ?>
                  <img src="<?php echo esc_url(get_avatar_url($current_user->ID)); ?>" class="w-7 h-7 rounded-full object-cover border border-slate-200 shadow-xs" alt="<?php echo esc_attr($current_user->display_name); ?>" />
                <?php else : ?>
                  <div class="w-7 h-7 rounded-full bg-slate-100 text-slate-600 flex items-center justify-center border border-slate-300 shadow-xs" title="Guest Reviewer">
                    <i data-lucide="user" class="w-3.5 h-3.5 stroke-[2]"></i>
                  </div>
                <?php endif; ?>
              </div>

              <!-- Launch Preview Button -->
              <button onclick="window.app.toggleProjectOverview(false)" class="px-4 py-2 rounded-xl text-xs font-bold text-white bg-slate-900 hover:bg-[#b02b2b] transition flex items-center gap-1.5 cursor-pointer shadow-2xs" title="Launch Interactive Prototype Preview">
                <i data-lucide="play" class="w-3.5 h-3.5 text-[#e27d7d]"></i>
                <span>Launch Preview</span>
              </button>
            </div>

          </div>
        </div>

        <!-- Project Progress & Completion Summary Banner -->
        <div id="overview-progress-summary-banner" class="bg-white/95 backdrop-blur-xs px-6 sm:px-10 py-2.5 flex flex-wrap items-center justify-between gap-4 shadow-2xs">
          <div class="hidden items-center gap-4 flex-1 min-w-[280px]">
            <div class="flex items-center gap-2">
              <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Overall Progress:</span>
              <span id="overview-progress-percent" class="text-sm font-black text-slate-900">0%</span>
            </div>
            <!-- Dynamic Progress Bar -->
            <div class="flex-1 max-w-xs h-2.5 bg-slate-100 rounded-full overflow-hidden border border-slate-200/80 p-0.5">
              <div id="overview-progress-bar-fill" class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500" style="width: 0%;"></div>
            </div>
          </div>

          <!-- Status Counters Pill Badges (Continuous-Tense Delivery Pipeline & Filter Chips) -->
          <div class="flex items-center gap-2 flex-wrap text-xs w-full" id="overview-status-filter-chips">
            <button type="button" onclick="window.app.setStatusFilter('all')" class="status-filter-chip flex items-center gap-1.5 bg-slate-900 text-white border border-slate-900 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer shadow-2xs" data-status="all">
              <span>All Stages</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('building_prototype')" class="status-filter-chip flex items-center gap-1.5 bg-slate-100 text-slate-700 hover:bg-slate-200 border border-slate-200 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="building_prototype" title="Filter to screens where design team is actively creating wireframes / prototype">
              <span class="w-2 h-2 rounded-full bg-slate-400"></span>
              <span id="count-status-prototype">0 Building Prototype</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('waiting_approval')" class="status-filter-chip flex items-center gap-1.5 bg-purple-50 text-purple-800 hover:bg-purple-100 border border-purple-200/80 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="waiting_approval" title="Filter to screens submitted to client; waiting for design sign-off">
              <span class="w-2 h-2 rounded-full bg-purple-500"></span>
              <span id="count-status-approval">0 Waiting for Approval</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('building_page')" class="status-filter-chip flex items-center gap-1.5 bg-amber-50 text-amber-800 hover:bg-amber-100 border border-amber-200/80 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="building_page" title="Filter to screens where developer is actively building page in WordPress">
              <span class="w-2 h-2 rounded-full bg-amber-500"></span>
              <span id="count-status-building">0 Building Page</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('waiting_review')" class="status-filter-chip flex items-center gap-1.5 bg-sky-50 text-sky-800 hover:bg-sky-100 border border-sky-200/80 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="waiting_review" title="Filter to screens built in staging ready for QA & client review">
              <span class="w-2 h-2 rounded-full bg-sky-500"></span>
              <span id="count-status-review">0 Waiting for Review</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('done')" class="status-filter-chip flex items-center gap-1.5 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 border border-emerald-200/80 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="done" title="Filter to finalized and approved screens">
              <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
              <span id="count-status-done">0 Done</span>
            </button>
            <button type="button" onclick="window.app.setStatusFilter('later')" class="status-filter-chip flex items-center gap-1.5 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 border border-zinc-200 px-2.5 py-1 rounded-lg font-bold transition cursor-pointer" data-status="later" title="Filter to deferred / backlogged screens">
              <span class="w-2 h-2 rounded-full bg-zinc-400"></span>
              <span id="count-status-later">0 Later</span>
            </button>
          </div>
        </div>

      </div>

      <!-- Full-Width Workspace Container -->
      <div class="flex-1 max-w-[1920px] w-full mx-auto p-6 sm:p-10">
        <!-- 1. Screen Matrix Grid View -->
        <div id="overview-screens-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 sm:gap-8"></div>
        
        <!-- 2. Interactive Sitemap Architecture Tree View -->
        <div id="overview-sitemap-tree" class="hidden flex flex-col gap-12 max-w-7xl mx-auto"></div>

        <!-- 3. Spreadsheet / List View -->
        <div id="overview-screens-list" class="hidden w-full bg-white rounded-2xl border border-slate-200/90 shadow-sm overflow-hidden"></div>
      </div>

    </div>

    <!-- 2. MAIN PREVIEW CANVAS AREA (Takes 75% when discussion is open, 100% when closed) -->
    <main id="preview-canvas-container" class="group/canvas relative flex-1 bg-slate-200/70 overflow-hidden flex items-center justify-center p-0 lg:p-2 transition-all duration-300 min-w-0">
      
      <!-- Left Navigation Overlay Arrow -->
      <button id="btn-canvas-prev" onclick="window.app.navigateAdjacentOption(-1)" class="group absolute left-3 md:left-5 top-1/2 -translate-y-1/2 z-40 pointer-events-auto flex items-center justify-center w-11 h-11 md:w-12 md:h-12 rounded-full bg-slate-900/35 hover:bg-slate-900/90 text-white backdrop-blur-md border border-white/25 shadow-2xl transition-all duration-200 cursor-pointer hover:scale-110 active:scale-95 opacity-30 hover:opacity-100 group-hover/canvas:opacity-75" title="Previous Option / Screen (Hotkey: [ or ←)">
        <i data-lucide="chevron-left" class="w-6 h-6 stroke-[2.5] transform group-hover:-translate-x-0.5 transition-transform"></i>
      </button>

      <!-- Viewport Wrapper Frame -->
      <div id="preview-wrapper" class="viewport-container viewport-desktop w-full h-full bg-white shadow-2xl relative mx-auto flex flex-col overflow-hidden">
        
        <!-- Live Prototype Iframe -->
        <iframe id="preview-frame" class="w-full h-full border-0 bg-white" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

        <!-- Visual Pin Comment & Story Layer (Hidden in Play Mode, Visible in Comment Mode) -->
        <div id="comment-pins-layer" class="absolute inset-0 pointer-events-none z-30"></div>

      </div>

      <!-- Right Navigation Overlay Arrow -->
      <button id="btn-canvas-next" onclick="window.app.navigateAdjacentOption(1)" class="group absolute right-3 md:right-5 top-1/2 -translate-y-1/2 z-40 pointer-events-auto flex items-center justify-center w-11 h-11 md:w-12 md:h-12 rounded-full bg-slate-900/35 hover:bg-slate-900/90 text-white backdrop-blur-md border border-white/25 shadow-2xl transition-all duration-200 cursor-pointer hover:scale-110 active:scale-95 opacity-30 hover:opacity-100 group-hover/canvas:opacity-75" title="Next Option / Screen (Hotkey: ] or →)">
        <i data-lucide="chevron-right" class="w-6 h-6 stroke-[2.5] transform group-hover:translate-x-0.5 transition-transform"></i>
      </button>

    </main>

    <!-- 3. DEDICATED FEEDBACK DISCUSSION SIDE PANE (25% Width, min-w-[320px] max-w-[460px]) -->
    <aside id="feedback-discussion-window" class="hidden w-full sm:w-[340px] md:w-[25%] md:min-w-[320px] md:max-w-[460px] bg-white border-l border-slate-200 shadow-xl flex flex-col transition-all duration-300 h-full shrink-0 z-30 animate-in slide-in-from-right duration-200">
      
      <!-- Window Title Bar -->
      <div class="px-4 py-3.5 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-slate-50 via-white to-slate-50 shrink-0">
        <div class="flex items-center gap-2.5 min-w-0">
          <div class="w-8 h-8 rounded-xl bg-[#fbeeed] text-[#b02b2b] flex items-center justify-center font-bold text-xs shadow-xs border border-[#b02b2b]/20 shrink-0">
            <i data-lucide="message-square" class="w-4 h-4"></i>
          </div>
          <div class="min-w-0">
            <div class="flex items-center gap-1.5 flex-wrap">
              <h2 class="text-xs font-extrabold text-slate-900 truncate">Feedback Discussions</h2>
              <span id="discussion-screen-badge" class="text-[9px] font-mono font-semibold px-2 py-0.2 rounded-full bg-slate-100 text-slate-600 border border-slate-200">Screen 1</span>
            </div>
            <p class="text-[10px] text-slate-400 truncate">Feedback pins & threaded reviews</p>
          </div>
        </div>

        <div class="flex items-center gap-1.5 shrink-0">
          <!-- Summary Badges -->
          <span id="discussion-open-pill" class="text-[9px] font-extrabold px-2 py-0.5 rounded-full bg-[#fbeeed] text-[#b02b2b] border border-[#b02b2b]/20">0 Open</span>
          <span id="discussion-resolved-pill" class="text-[9px] font-extrabold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">0 Resolved</span>

          <button onclick="window.app.toggleCommentsWindow(false)" class="p-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition cursor-pointer ml-1" title="Close Side Window (Esc)">
            <i data-lucide="x" class="w-4 h-4"></i>
          </button>
        </div>
      </div>

      <!-- Window Toolbar: Filter Tabs & Live Search -->
      <div class="px-3.5 py-2 bg-slate-50/90 border-b border-slate-200/80 flex flex-col gap-2 shrink-0">
        <!-- Filter Tabs -->
        <div class="flex items-center gap-1 bg-slate-200/70 p-0.5 rounded-xl">
          <button onclick="window.commentEngine.setFilter('all')" id="filter-tab-all" class="comment-filter-btn flex-1 py-1 rounded-lg text-xs font-bold transition cursor-pointer bg-white text-slate-900 shadow-xs text-center flex items-center justify-center gap-1">
            <span>All</span>
            <span id="count-badge-all" class="text-[9px] px-1.5 py-0.2 rounded-full bg-slate-100 text-slate-600 font-bold">0</span>
          </button>
          <button onclick="window.commentEngine.setFilter('story')" id="filter-tab-story" class="comment-filter-btn flex-1 py-1 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition cursor-pointer text-center flex items-center justify-center gap-1">
            <span class="text-amber-800 font-bold">📖 Story</span>
            <span id="count-badge-story" class="text-[9px] px-1.5 py-0.2 rounded-full bg-amber-100 text-amber-900 font-bold">0</span>
          </button>
          <button onclick="window.commentEngine.setFilter('open')" id="filter-tab-open" class="comment-filter-btn flex-1 py-1 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition cursor-pointer text-center flex items-center justify-center gap-1">
            <span class="text-[#b02b2b] font-bold">● Open</span>
            <span id="count-badge-open" class="text-[9px] px-1.5 py-0.2 rounded-full bg-[#fbeeed] text-[#b02b2b] font-bold">0</span>
          </button>
          <button onclick="window.commentEngine.setFilter('resolved')" id="filter-tab-resolved" class="comment-filter-btn flex-1 py-1 rounded-lg text-xs font-semibold text-slate-600 hover:text-slate-900 transition cursor-pointer text-center flex items-center justify-center gap-1">
            <span class="text-emerald-700 font-bold">✓ Resolved</span>
            <span id="count-badge-resolved" class="text-[9px] px-1.5 py-0.2 rounded-full bg-emerald-100 text-emerald-800 font-bold">0</span>
          </button>
        </div>

        <!-- Search Input -->
        <div class="relative w-full">
          <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i>
          <input type="text" id="discussion-search-input" oninput="window.commentEngine.handleSearchInput(this.value)" placeholder="Search discussions & replies..." class="w-full text-xs bg-white border border-slate-200 rounded-xl pl-8 pr-3 py-1.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>
      </div>

      <!-- Discussions Stream List -->
      <div id="sidebar-comments-list" class="flex-1 overflow-y-auto p-3.5 space-y-3 bg-slate-50/40"></div>

      <!-- Window Footer -->
      <div class="px-3.5 py-2.5 border-t border-slate-100 bg-white flex items-center justify-between text-xs text-slate-500 shrink-0">
        <span class="text-[10px] text-slate-400">Click <b>"Jump to Pin"</b> to locate on canvas</span>
        <button onclick="window.app.toggleCommentsWindow(false)" class="px-3 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs transition cursor-pointer">
          Close
        </button>
      </div>

    </aside>

  </div>

  <!-- =========================================================================
       6. MODALS
       ========================================================================= -->

  <!-- GUEST REVIEWER ONBOARDING MODAL ("Non-User Mode") -->
  <div id="guest-onboarding-modal" class="hidden fixed inset-0 bg-slate-900/70 backdrop-blur-md z-60 flex items-center justify-center p-4 animate-in fade-in duration-200">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200/90 w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
      
      <!-- Modal Header -->
      <div class="p-6 text-center border-b border-slate-100 bg-gradient-to-b from-[#fbeeed]/70 to-white">
        <div class="w-12 h-12 rounded-2xl bg-[#fbeeed] text-[#b02b2b] flex items-center justify-center mx-auto mb-3 shadow-xs border border-[#b02b2b]/20">
          <i data-lucide="user-check" class="w-6 h-6"></i>
        </div>
        <h3 class="text-xl font-extrabold text-slate-900">Welcome to Review</h3>
        <p class="text-xs text-slate-500 mt-1 max-w-xs mx-auto">Please enter your name and email to leave pinpoint visual feedback and receive notification updates.</p>
      </div>

      <!-- Modal Form -->
      <form id="guest-identity-form" onsubmit="window.app.saveGuestIdentity(event)" class="p-6 space-y-4">
        
        <div id="guest-modal-alert" class="hidden p-3 rounded-xl bg-amber-50 border border-amber-200 text-xs text-amber-900 flex items-center gap-2">
          <i data-lucide="alert-circle" class="w-4 h-4 text-amber-600 shrink-0"></i>
          <span id="guest-modal-alert-text">Please enter your details to post your feedback pin.</span>
        </div>

        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Your Full Name <span class="text-[#b02b2b]">*</span></label>
          <input type="text" id="guest-input-name" placeholder="e.g. Alex Morgan" required class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>

        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Your Email Address <span class="text-[#b02b2b]">*</span></label>
          <input type="email" id="guest-input-email" placeholder="e.g. alex@company.com" required class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
          <p class="text-[10px] text-slate-400 mt-1">Used to notify you when teammates reply to your feedback.</p>
        </div>

        <div class="pt-2 space-y-2">
          <button type="submit" class="w-full py-2.5 rounded-xl bg-[#b02b2b] hover:bg-[#872e21] text-white font-bold text-xs shadow-md transition flex items-center justify-center gap-1.5 cursor-pointer">
            <span>Join & Enable Comments</span>
            <span>➔</span>
          </button>
          
          <button type="button" onclick="window.app.dismissGuestModal()" class="w-full py-2 rounded-xl text-xs font-semibold text-slate-500 hover:text-slate-800 hover:bg-slate-100 transition cursor-pointer">
            Just Browse for Now (Skip)
          </button>
        </div>
      </form>

    </div>
  </div>

  <!-- ADD / UPLOAD LAYOUT VARIATION MODAL -->
  <div id="upload-layout-modal" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-[#fbeeed] text-[#b02b2b] flex items-center justify-center">
            <i data-lucide="image-plus" class="w-4 h-4"></i>
          </div>
          <div>
            <h3 class="text-sm font-bold text-slate-900">Add Design Option / Mockup</h3>
            <p class="text-[11px] text-slate-500">Attach an image design mockup (PNG, JPG, WebP) or HTML file.</p>
          </div>
        </div>
        <button onclick="window.app.closeModal('upload-layout-modal')" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 cursor-pointer">
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <form id="form-upload-layout" class="space-y-4" onsubmit="window.app.handleUploadLayout(event)">
        
        <!-- Upload Source Box (Drag & Drop or File Pick) -->
        <div>
          <label class="block text-[11px] font-bold text-slate-700 mb-1.5 uppercase tracking-wider">Design Mockup Image / File</label>
          
          <!-- Dropzone Container -->
          <div id="upload-dropzone" onclick="document.getElementById('upload-layout-file').click()" ondragover="event.preventDefault(); this.classList.add('border-[#b02b2b]', 'bg-[#fbeeed]/40');" ondragleave="this.classList.remove('border-[#b02b2b]', 'bg-[#fbeeed]/40');" ondrop="event.preventDefault(); this.classList.remove('border-[#b02b2b]', 'bg-[#fbeeed]/40'); window.app.handleFileDrop(event);" class="border-2 border-dashed border-slate-300 hover:border-[#b02b2b] rounded-2xl p-4 bg-slate-50 hover:bg-[#fbeeed]/20 transition text-center cursor-pointer group">
            <input type="file" id="upload-layout-file" accept="image/png,image/jpeg,image/webp,image/svg+xml,.html,.htm" class="hidden" onchange="window.app.handleFileSelect(event)">
            <div class="flex flex-col items-center justify-center gap-1.5 py-2">
              <div class="w-10 h-10 rounded-2xl bg-white shadow-xs border border-slate-200 flex items-center justify-center text-slate-500 group-hover:text-[#b02b2b] group-hover:scale-105 transition">
                <i data-lucide="upload-cloud" class="w-5 h-5"></i>
              </div>
              <p class="text-xs font-bold text-slate-700 mt-1">Click to upload or drag & drop design image</p>
              <p class="text-[10px] text-slate-400">PNG, JPG, WebP, SVG, or HTML prototypes</p>
            </div>
          </div>

          <!-- Preview of Selected Uploaded File -->
          <div id="upload-preview-container" class="hidden border border-slate-200 rounded-2xl p-3 bg-slate-50 relative flex items-center gap-3">
            <img id="upload-preview-img" src="" class="hidden w-16 h-16 object-cover object-top rounded-xl border border-slate-200 shadow-2xs shrink-0" />
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <span class="text-[10px] font-bold text-emerald-700 bg-emerald-100 px-1.5 py-0.2 rounded">Ready to Upload</span>
              </div>
              <p id="upload-file-info" class="text-xs font-bold text-slate-800 truncate mt-0.5">mockup.png</p>
              <button type="button" onclick="window.app.clearSelectedUploadFile()" class="text-[10px] text-rose-600 hover:underline font-bold mt-0.5">Remove & Choose Different File</button>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-[11px] font-bold text-slate-700 mb-1">Option Name</label>
            <input type="text" id="upload-layout-name" required placeholder="e.g. Option C (Dark Theme)" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
          </div>

          <div>
            <label class="block text-[11px] font-bold text-slate-700 mb-1">Badge / Tag</label>
            <input type="text" id="upload-layout-badge" placeholder="e.g. Figma Export" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
          </div>
        </div>

        <!-- Optional Direct Source URL Field -->
        <div>
          <div class="flex items-center justify-between mb-1">
            <label class="block text-[11px] font-bold text-slate-700">Or Direct URL / Source File Path</label>
            <span class="text-[10px] text-slate-400">Optional</span>
          </div>
          <input type="text" id="upload-layout-template" placeholder="e.g. https://domain.com/mockup.png or layouts/saas-v1.html" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-mono text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#b02b2b]">
        </div>

        <div class="pt-2 flex items-center justify-end gap-2 border-t border-slate-100">
          <button type="button" onclick="window.app.closeModal('upload-layout-modal')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-[#b02b2b] hover:bg-[#872e21] shadow-md transition flex items-center gap-1.5 cursor-pointer">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            <span>Add Option</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- ADD SCREEN / PAGE FLOW MODAL -->
  <div id="modal-add-screen" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-[#fbeeed] text-[#b02b2b] flex items-center justify-center">
            <i data-lucide="plus-circle" class="w-4 h-4"></i>
          </div>
          <div>
            <h3 class="text-sm font-bold text-slate-900">Add New Screen / Page Flow</h3>
            <p class="text-[11px] text-slate-500">Add a new page entry to the architecture and delivery tracker.</p>
          </div>
        </div>
        <button onclick="window.app.closeModal('modal-add-screen')" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 cursor-pointer">
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <form id="form-add-screen" class="space-y-3.5" onsubmit="window.app.handleCreateScreen(event)">
        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">Screen / Page Name <span class="text-[#b02b2b]">*</span></label>
          <input type="text" id="new-screen-name" placeholder="e.g. Commercial Real Estate" required oninput="window.app.autoFillNewScreenSlug(this.value)" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">URL Slug</label>
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-mono">/</span>
              <input type="text" id="new-screen-slug" placeholder="commercial-real-estate" class="w-full text-xs font-mono bg-slate-50 border border-slate-200 rounded-xl pl-6 pr-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
            </div>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Architecture Parent</label>
            <select id="new-screen-parent" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="">None (Primary / Root Page)</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Workflow Phase</label>
            <select id="new-screen-status" class="w-full text-xs font-bold bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="building_prototype">🎨 Building Prototype</option>
              <option value="waiting_approval">⏳ Waiting for Approval</option>
              <option value="building_page">⚡ Building Page</option>
              <option value="waiting_review">🔍 Waiting for Review</option>
              <option value="done">✅ Done</option>
              <option value="later">⏸️ Later</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Audience Scope</label>
            <select id="new-screen-visibility" class="w-full text-xs font-bold bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="client">👁️ Client-Facing (Shared with Client)</option>
              <option value="internal">🔒 Internal Only (Team Draft / Working)</option>
            </select>
          </div>
        </div>

        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">Dev / Staging URL (Optional)</label>
          <input type="url" id="new-screen-dev-url" placeholder="https://staging.site.com/..." class="w-full text-xs font-mono bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>

        <!-- Master Checkpoint Toggle -->
        <div class="p-3 rounded-2xl bg-slate-50 border border-slate-200 flex items-center justify-between gap-3">
          <div>
            <label for="new-screen-checkpoint" class="text-xs font-bold text-slate-800 flex items-center gap-1.5 cursor-pointer">
              <span>🌟 Mark as Master Checkpoint</span>
            </label>
            <p class="text-[10.5px] text-slate-500">Key design baseline milestone for this project.</p>
          </div>
          <input type="checkbox" id="new-screen-checkpoint" class="w-4 h-4 rounded border-slate-300 text-amber-600 focus:ring-amber-500 cursor-pointer" />
        </div>

        <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
          <button type="button" onclick="window.app.closeModal('modal-add-screen')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2 rounded-xl bg-[#b02b2b] hover:bg-[#872e21] text-white font-bold text-xs shadow-md transition flex items-center gap-1.5 cursor-pointer">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            <span>Add Screen Entry</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- EDIT SCREEN / PAGE FLOW MODAL -->
  <div id="modal-edit-screen" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-800 flex items-center justify-center border border-amber-200">
            <i data-lucide="edit-3" class="w-4 h-4 text-amber-700"></i>
          </div>
          <div>
            <h3 class="text-sm font-bold text-slate-900">Edit Screen / Page Flow</h3>
            <p class="text-[11px] text-slate-500">Update title, slug, audience visibility, architecture, or dev URL.</p>
          </div>
        </div>
        <button onclick="window.app.closeModal('modal-edit-screen')" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 cursor-pointer">
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <form id="form-edit-screen" class="space-y-3.5" onsubmit="window.app.handleUpdateScreen(event)">
        <input type="hidden" id="edit-screen-id" value="" />

        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">Screen / Page Name <span class="text-[#b02b2b]">*</span></label>
          <input type="text" id="edit-screen-name" placeholder="e.g. Commercial Real Estate" required class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">URL Slug</label>
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-mono">/</span>
              <input type="text" id="edit-screen-slug" placeholder="commercial-real-estate" class="w-full text-xs font-mono bg-slate-50 border border-slate-200 rounded-xl pl-6 pr-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
            </div>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Architecture Parent</label>
            <select id="edit-screen-parent" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="">None (Primary / Root Page)</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Workflow Phase</label>
            <select id="edit-screen-status" class="w-full text-xs font-bold bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="building_prototype">🎨 Building Prototype</option>
              <option value="waiting_approval">⏳ Waiting for Approval</option>
              <option value="building_page">⚡ Building Page</option>
              <option value="waiting_review">🔍 Waiting for Review</option>
              <option value="done">✅ Done</option>
              <option value="later">⏸️ Later</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-bold text-slate-700 mb-1">Audience Scope</label>
            <select id="edit-screen-visibility" class="w-full text-xs font-bold bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <option value="client">👁️ Client-Facing (Shared with Client)</option>
              <option value="internal">🔒 Internal Only (Team Draft / Working)</option>
            </select>
          </div>
        </div>

        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1">Dev / Staging URL</label>
          <input type="url" id="edit-screen-dev-url" placeholder="https://staging.site.com/..." class="w-full text-xs font-mono bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
        </div>

        <!-- Master Checkpoint Toggle in Edit Modal -->
        <div class="p-3 rounded-2xl bg-amber-50/60 border border-amber-200/80 flex items-center justify-between gap-3">
          <div>
            <label for="edit-screen-checkpoint" class="text-xs font-bold text-slate-800 flex items-center gap-1.5 cursor-pointer">
              <span>🌟 Master Checkpoint</span>
              <span class="px-1.5 py-0.2 rounded text-[9.5px] font-bold bg-amber-100 text-amber-800">Milestone</span>
            </label>
            <p class="text-[10.5px] text-slate-500">Design baseline milestone that sets global styles before inner pages start.</p>
          </div>
          <input type="checkbox" id="edit-screen-checkpoint" class="w-4 h-4 rounded border-slate-300 text-amber-600 focus:ring-amber-500 cursor-pointer" />
        </div>

        <div class="pt-3 flex items-center justify-between gap-2 border-t border-slate-100">
          <button type="button" onclick="window.app.handleDeleteScreenFromEditModal()" class="px-3 py-2 rounded-xl text-xs font-semibold text-rose-600 hover:bg-rose-50 transition flex items-center gap-1 cursor-pointer">
            <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
            <span>Delete Screen</span>
          </button>
          <div class="flex items-center gap-2">
            <button type="button" onclick="window.app.closeModal('modal-edit-screen')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
              Cancel
            </button>
            <button type="submit" class="px-5 py-2 rounded-xl bg-slate-900 hover:bg-[#b02b2b] text-white font-bold text-xs shadow-md transition flex items-center gap-1.5 cursor-pointer">
              <i data-lucide="check" class="w-3.5 h-3.5"></i>
              <span>Save Changes</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- BULK EDIT SCREENS MODAL -->
  <div id="modal-bulk-edit-screen" class="hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl border border-slate-200 max-w-lg w-full p-6 animate-in fade-in zoom-in-95 duration-200">
      <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
        <div class="flex items-center gap-2.5">
          <div class="w-8 h-8 rounded-xl bg-purple-50 text-purple-800 flex items-center justify-center border border-purple-200">
            <i data-lucide="layers" class="w-4 h-4 text-purple-700"></i>
          </div>
          <div>
            <h3 class="text-sm font-bold text-slate-900">Bulk Edit Screens</h3>
            <p class="text-[11px] text-slate-500">Apply batch changes across <span id="bulk-modal-count" class="font-bold text-purple-700">0</span> selected screens.</p>
          </div>
        </div>
        <button onclick="window.app.closeModal('modal-bulk-edit-screen')" class="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 cursor-pointer">
          <i data-lucide="x" class="w-4 h-4"></i>
        </button>
      </div>

      <form id="form-bulk-edit-screen" class="space-y-4" onsubmit="window.app.handleApplyBulkEdit(event)">
        <!-- Audience Visibility Batch Action -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-1.5">
          <label class="block text-xs font-black uppercase tracking-wider text-slate-600">Audience Scope & Client Visibility</label>
          <select id="bulk-visibility-action" class="w-full text-xs font-bold bg-white border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
            <option value="no_change">-- Keep Current Visibility (No Change) --</option>
            <option value="set_client">👁️ Make Client-Facing (Publish & Share with Client)</option>
            <option value="set_internal">🔒 Make Internal Only (Hide from Clients, Team Draft)</option>
          </select>
        </div>

        <!-- Architecture / Parent Action -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-2.5">
          <label class="block text-xs font-black uppercase tracking-wider text-slate-600">Parent Architecture</label>
          
          <select id="bulk-parent-action" onchange="window.app.toggleBulkParentSelect(this.value)" class="w-full text-xs font-bold bg-white border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
            <option value="no_change">-- Keep Current Parent (No Change) --</option>
            <option value="remove_parent">⭐️ Make Root / Primary (Remove Parent)</option>
            <option value="set_parent">↳ Nest Under Specific Parent Screen</option>
            <option value="set_footer">📄 Move to Footer / Legal Pages</option>
          </select>

          <div id="bulk-parent-target-wrap" class="hidden pt-1">
            <label class="block text-[11px] font-bold text-slate-500 mb-1">Target Parent Screen:</label>
            <select id="bulk-parent-target" class="w-full text-xs bg-white border border-slate-200 rounded-xl px-3 py-2 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
              <!-- Populated via JS -->
            </select>
          </div>
        </div>

        <!-- Workflow Phase Action -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-1.5">
          <label class="block text-xs font-black uppercase tracking-wider text-slate-600">Workflow & Delivery Phase</label>
          <select id="bulk-status-action" class="w-full text-xs font-bold bg-white border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
            <option value="no_change">-- Keep Current Phase (No Change) --</option>
            <option value="building_prototype">🎨 Building Prototype</option>
            <option value="waiting_approval">⏳ Waiting for Approval</option>
            <option value="building_page">⚡ Building Page</option>
            <option value="waiting_review">🔍 Waiting for Review</option>
            <option value="done">✅ Done</option>
            <option value="later">⏸️ Later</option>
          </select>
        </div>

        <!-- Dev URL Batch Action -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-2">
          <label class="block text-xs font-black uppercase tracking-wider text-slate-600">Dev / Staging URL</label>
          <select id="bulk-dev-url-action" onchange="window.app.toggleBulkDevUrlInput(this.value)" class="w-full text-xs font-bold bg-white border border-slate-200 rounded-xl px-3 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition cursor-pointer">
            <option value="no_change">-- Keep Current Dev URLs (No Change) --</option>
            <option value="prefix">🌐 Apply Base Staging Domain + /slug/</option>
            <option value="set">🔗 Set Exact URL for All</option>
            <option value="clear">🗑️ Clear Dev URLs</option>
          </select>

          <div id="bulk-dev-url-input-wrap" class="hidden pt-1">
            <input type="url" id="bulk-dev-url-value" placeholder="e.g. https://leaguelaw.demoing.info/" class="w-full text-xs font-mono bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 focus:ring-2 focus:ring-[#b02b2b]/20 focus:border-[#b02b2b] focus:outline-none transition" />
            <p id="bulk-dev-url-hint" class="text-[10px] text-slate-400 mt-1">Appends each screen's slug automatically (e.g. /car-accident-claims/).</p>
          </div>
        </div>

        <div class="pt-3 flex items-center justify-end gap-2 border-t border-slate-100">
          <button type="button" onclick="window.app.closeModal('modal-bulk-edit-screen')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100 transition cursor-pointer">
            Cancel
          </button>
          <button type="submit" class="px-5 py-2 rounded-xl bg-slate-900 hover:bg-[#b02b2b] text-white font-bold text-xs shadow-md transition flex items-center gap-1.5 cursor-pointer">
            <i data-lucide="check-check" class="w-3.5 h-3.5"></i>
            <span>Apply to Selected Screens</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- =========================================================================
       7. SCRIPTS
       ========================================================================= -->
  <script src="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'assets/js/proto-preview-api.js'); ?>"></script>
  <script src="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'assets/js/comment-engine.js'); ?>"></script>
  <script src="<?php echo esc_url(PROTO_PREVIEW_PLUGIN_URL . 'assets/js/proto-preview-player.js'); ?>"></script>
</body>
</html>
