<!--
═══════════════════════════════════════════════════════════════════════════
  AFTERCLOSECARE COMMAND CENTER — v39.9 (FLAGSHIP) · RECONCILED vs QA Playbook v1.0 + Data Policy v1.1 · 2026-06-11
  Premium SMB product for restoration / remodeling contractors.
  Starter Bundle $2,997–$4,997 (Done-Right 30-day implementation included)
  · Growth Retainer $397–$597/mo · Mid-Market $5,000–$10,000 + $500–$800/mo
═══════════════════════════════════════════════════════════════════════════
  PROGRESS NOTES (persistent memory)
  - v38: schedule layer, callbacks, storage guards (base, untouched)
  - v39: AI Agents orchestration hub — Gauge → Shift → Anchor locked order,
    Stability 80+ certification gate, ROI Auditor, Owner/VA view, additive
    state.agents in acc_state_v3 (NO key bumps), n8n primary / VA fallback
  - v39.1 (this file):
    [P1] Legacy "Lifetime License / Lite / OS / Pro" seat card REPLACED with
         premium Plan & Tiers card (locked pricing). Managed Environment
         $34.95/mo retained (current approved add-on).
    [P2] GLOBAL Owner/VA toggle in sidebar footer — gates tier card,
         deployment card, dashboard certification strip, ROI/retainer UI.
    [P3] Dashboard "Implementation & Certification" strip (owner view):
         Done-Right window status per agent, Growth Retainer prompt fires
         ONLY at Stability 80+ certification.
    [P4] Deployment & Client Handoff card in Settings (owner view):
         Netlify/Cloudflare steps, one-click export (client-owned data),
         certification workflow.
    [P5] Premium empty-state hero with Done-Right banner.
    [P6] A11y: toasts now role=status aria-live=polite; aria-labels on
         icon-only controls. Banned-language + legacy-pricing sweep: CLEAN.
  ─────────────────────────────────────────────────────────────────────────
  v39.2 (this file) — DEPTH PASS (all additive, wrappers only):
    [D1] Prominent dashboard ROI Auditor band (owner view) — recovered
         revenue, supplements recaptured, saved cancels, hours saved, hot
         leads — the directive's "ROI Auditor prominent" surfaced on the
         FIRST screen, not buried in the agents tab.
    [D2] Restoration upsell moments (owner view): Punch List → Done-Right
         certification nudge when open items age; Insurance → Growth Retainer
         supplement-recovery framing; Warranty → retention/Anchor tie-in.
    [D3] "Why contractors switch" competitive strip on empty-state hero —
         positions vs JobNimbus/ServiceTitan/Jobber on client-owned data +
         AI depth + no per-seat tax.
    [D4] agentsRoi() extended with supplementsRecaptured (approved supplement
         $ this period) — wrapper, original untouched.
    All v39.2 panels respect the global Owner/VA toggle and gate on isVA().
  ─────────────────────────────────────────────────────────────────────────
  v39.3 (this file) — POLISH PASS (all additive):
    [V1] Intake wizard TIER step (Job Info → Details → Tier → Automations):
         Starter/Growth/Mid-Market selection persists onto the job and sets
         expectations at creation. Order Gauge → Shift → Anchor reinforced.
    [V2] n8n WEBHOOK RECEIVER replaces prompt-based VA sync: window.accIngest()
         inbound contract + postMessage bridge + Real-Time Sync card (LIVE vs
         MANUAL) with webhook URL field, test ping, and copy-paste snippet.
         VA weekly entry remains the fallback. Validates numeric/non-negative.
    [V3] Mobile punch list: scroll-snap, visible thin emerald scrollbar,
         right-edge fade affordance, and a "Swipe to see priority" hint row.
    [V4] Empty-state hero: testimonial-style proof line under the competitive
         strip ($6,800 caught month one · crew uses it on phones).
  ─────────────────────────────────────────────────────────────────────────
  v39.4 (this file) — P0 QA FIXES (CR-01 / CR-07 / CR-29) + Data Policy:
    [T1] Data Policy note above Export All Data: "Your data is yours. Export
         any time. AfterCloseCare does not hold your data hostage."
    [CR-01] (Option C per QA Playbook) Storage warning threshold lowered
         90%→50% + MANDATORY first-run data modal (localStorage explainer +
         weekly-export warning + Back Up Data Now); weekly backup reminder
         badge for returning users (7+ day gap). First-run captured at parse time.
    [CR-29] Anchor purchase cycle configurable in Settings, default 365 days
         (restoration), per QA Playbook conditional guidance; drives at-risk
         tiers; n8n + VA share the value.
    [CR-07] "Guardrail Last Verified" timestamp + Verify Now on the Shift card,
         AND the Growth Retainer prompt now REQUIRES guardrail GREEN (verified
         within 14 days) before it fires — on both the dashboard certification
         strip and the AI Agents Hub banner. Amber guidance shown when certified
         but guardrail stale.
  ─────────────────────────────────────────────────────────────────────────
  v39.4-FINAL — RECONCILED against QA Playbook v1.0 + Data Policy v1.1:
    · CR-01 verified: 50% storage threshold + MANDATORY first-run modal NOW
      carries the Playbook's exact survival line ("Your data is browser-local.
      Install the PWA and run a weekly export to survive any device wipe.").
    · CR-07 verified: Growth Retainer prompt requires guardrail GREEN (≤14d)
      on both surfaces — meets acceptance criteria as written.
    · CR-29 verified: 365-day restoration default + configurable field, PLUS
      a validation warning when cycle < 90 and a restoration job exists.
    · Data Policy note: present verbatim above Export All Data in Settings.
  ───────────────────────────────────────────────────────────────────────────────
  v39.5 — DATA ONBOARDING (vertical-NEUTRAL bulk import):
    [I1] ACCImport engine: quoted-CSV parser (embedded commas/CRLF/BOM), date
         normalization (US + euro DD/MM + single-digit), name reversal
         (Last, First), type/phone/insurance normalization, dedup by
         email+address (jobs) / phone (leads) / email|phone (customers).
    [I2] Three fixed schemas — Jobs, Leads→agents.leads, Customers→agents.retention.
    [I3] Dry-run PREVIEW before commit; CR-01 MANDATORY auto-backup before every
         write; idempotent; per-row error export.
    [I4] Anchor backfill: backdated close/last-contact → tiers vs purchaseCycleDays
         (365); blank last-contact → highest-priority win-back; vertical-aware
         (restoration vs other); customerBook persisted.
    [I5] Downloadable templates; "Data Onboarding" card in Settings (owner-gated);
         job.documents[] ready for Drive/Dropbox URLs.
    Tested vs real 50/30/80-row CSVs: 26 engine + 13 commit assertions pass.
    Importer is vertical-neutral; restoration positioning unchanged in client copy.
  v39.9 — TWO FIXES from live test (Jason imported Jobs file into Customers lane):
    [BUG-1] Wrong-lane detection: importer now identifies when a CSV's columns
            match a different schema (e.g. a Jobs file dropped on the Customers
            lane) and shows an amber warning in the preview before any commit.
    [BUG-2] No-contact customers were vanishing from Anchor's win-back queue
            after the v39.8 close-cycle switch (queue filtered only AT-RISK/LAPSED).
            A customer never followed up with is a PRIME winback regardless of
            close-cycle tier — now included (tag "NO CONTACT"), ordered
            LAPSED → AT-RISK → no-contact → LTV. atRiskCount counts them too.
  v39.8 — ANCHOR TIER BASIS = CLOSE-DATE CYCLE (primary), last-contact secondary:
    Tier now driven by days-since-CLOSE vs purchaseCycleDays (default 365):
    ACTIVE <=1x, COOLING 1-1.5x, AT-RISK 1.5-2x, LAPSED >2x. last_contact is
    SECONDARY info only ("recently touched Xd ago" on the card) and no longer
    masks a lapsed win-back. Win-back save queue now surfaces AT-RISK + LAPSED
    (lapsed first, then LTV desc) instead of only no-contact rows. Fallback to
    last_contact only when close_date is missing. Rationale: restoration is
    lumpy/infrequent (12-36mo) — close-cycle is the true win-back signal.
  v39.7 — IDEMPOTENT LEADS + CUSTOMERS IMPORT (bug found in live backup #4):
    Re-importing the same Leads/Customers file no longer doubles KPIs or stacks
    queue items. Leads dedup by phone|email|name; Customers upsert into
    customerBook by email|phone|name with KPIs/saveQueue REBUILT from the book
    (never additive). Re-import now reports "already on file, nothing new added".
    Jobs were already idempotent. Verified vs the exact double-import in backup #4.
  v39.6 — CR-26: Clear Demo Data now also removes flagged onboarding + ghost
    placeholder jobs (New Client/no contact/no work). Imported (JOB-IMP*/importedAt)
    and real-work jobs PROTECTED. Wizard jobs tagged onboarding:true. Verified vs backup #3.
  BACKLOG (v39.3, logged not built): render memoization, n8n webhook

  receiver replacing prompt sync, intake-wizard tier step, full WCAG pass.
═══════════════════════════════════════════════════════════════════════════
  SELF-AUDIT CHECKLIST (verified at build)
  [x] Full combined script body passes node syntax check
  [x] Zero stale pricing ($67/$297/$497/$797/$997/$1,297) · zero banned terms
  [x] Tier copy verbatim per Market Research & Pricing v1.1
  [x] Gauge → Shift → Anchor order everywhere agents are listed
  [x] All v39.1 additions additive — zero legacy functions modified
      (wrappers only) · acc_state_v3 unchanged
  QA MATRIX (run on live URL before this file replaces v39)
  Q1 incognito boot · Q2 v38/v39-data preservation · Q3 agent order
  Q4 VA sync round-trip · Q5 input rejection · Q6 certification flow
  Q7 retainer gating (owner-only, certified-only) · Q8 ROI derivations
  Q9 toggle persistence (global) · Q10 queue rendering · Q11 per-card
  error fallback · Q12 mobile 380px · Q13 settings tier card owner-only
  Q14 handoff export downloads valid JSON · Q15 toast aria-live announces
═══════════════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AfterCloseCare Command Center — v39.9</title>

  <!-- ═══ PWA Configuration ═══ -->
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#0a0f1c">
  <link rel="apple-touch-icon" href="icons/afterclosecare-192.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="AfterCloseCare">
  <!-- ════════════════════════ -->

  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');
    *, body { font-family: 'DM Sans', system-ui, sans-serif; }
    :root {
      --bg: #0a0f1c;
      --sidebar: #0d1424;
      --card: #111827;
      --card2: rgba(17,24,39,0.85);
      --border: #1e293b;
      --emerald: #10b981;
      --text-dim: rgba(255,255,255,.38);
      --text-mid: rgba(255,255,255,.55);
    }
    body { background: var(--bg); }
    .sidebar-bg { background: var(--sidebar); }
    .card-bg { background: var(--card); border: 1px solid var(--border); }
    .card-bg2 { background: var(--card2); border: 1px solid var(--border); }
    .nav-active { background: rgba(16,185,129,0.1); border-left: 2.5px solid #10b981; color: #e2e8f0; }
    .nav-inactive { color: #64748b; border-left: 2.5px solid transparent; }
    .nav-inactive:hover { background: rgba(255,255,255,.04); color: #94a3b8; }
    .badge-progress { background: rgba(124,45,18,.6); color: #fb923c; }
    .badge-complete { background: rgba(20,83,45,.6); color: #4ade80; }
    .badge-pending { background: rgba(113,63,18,.6); color: #facc15; }
    .badge-review { background: rgba(30,58,95,.6); color: #60a5fa; }
    .badge-submitted { background: rgba(30,58,95,.6); color: #93c5fd; }
    .badge-approved { background: rgba(20,83,45,.6); color: #34d399; }
    .badge-denied { background: rgba(127,29,29,.6); color: #f87171; }
    .modal-bg { background: rgba(0,0,0,.88); backdrop-filter: blur(4px); }
    .glass { background: rgba(13,20,36,.98); border: 1px solid #1e293b; }
    input, select, textarea {
      background: #0f172a !important; border: 1px solid #334155 !important;
      color: #e2e8f0 !important; border-radius: .75rem;
      padding: .65rem 1rem; width: 100%; outline: none;
    }
    input:focus, select:focus, textarea:focus { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16,185,129,.12) !important; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
    .tab-in { animation: tabIn .18s ease; }
    @keyframes tabIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .scanner-glow { background: linear-gradient(135deg, rgba(6,78,59,.35) 0%, rgba(15,23,42,.7) 100%); border: 1px solid rgba(16,185,129,.2); }
    .stat-n { font-family: 'DM Mono', monospace; }
    .risk-ring { transform-origin: center; transform: rotate(-90deg); }
    /* Toast */
    #toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
    .toast { pointer-events: all; min-width: 280px; max-width: 360px; border-radius: .875rem; padding: .875rem 1.1rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,.5); animation: toastIn .22s ease; }
    .toast-success { background: rgba(20,83,45,.95); border: 1px solid rgba(16,185,129,.3); color: #4ade80; }
    .toast-warning { background: rgba(113,63,18,.95); border: 1px solid rgba(245,158,11,.3); color: #fbbf24; }
    .toast-error   { background: rgba(127,29,29,.95); border: 1px solid rgba(239,68,68,.3); color: #f87171; }
    .toast-info    { background: rgba(30,58,95,.95); border: 1px solid rgba(96,165,250,.3); color: #93c5fd; }
    @keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
    @keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(24px); } }
    /* Pulse dot */
    .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: pulse 1.8s infinite; }
    @keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(16,185,129,.4); } 60% { opacity:.7; box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
    /* Mobile sidebar overlay */
    #sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:40; backdrop-filter:blur(2px); }
    #sidebar-overlay.open { display:block; }
    @media (max-width:768px) {
      #sidebar { position:fixed; left:-260px; top:0; bottom:0; z-index:50; transition:left .25s ease; }
      #sidebar.open { left:0; }
    }
    /* Search dropdown */
    #search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#111827; border:1px solid #1e293b; border-radius:.875rem; overflow:hidden; z-index:100; max-height:280px; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.5); }
    /* Activity feed */
    .activity-item { animation: feedSlide .3s ease; }
    @keyframes feedSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
    /* Gauge arc */
    .gauge-track { fill:none; stroke:#1e293b; stroke-width:10; }
    .gauge-fill { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s ease; }
    /* KPI card hover */
    .kpi-card { transition:border-color .2s, transform .15s; }
    .kpi-card:hover { border-color:rgba(16,185,129,.25); transform:translateY(-1px); }
    /* Step indicator */
    .step-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; flex-shrink:0; }
    .step-active { background:rgba(16,185,129,.2); border:2px solid #10b981; color:#10b981; }
    .step-done { background:rgba(16,185,129,.8); color:white; }
    .step-pending { background:#1e293b; border:2px solid #334155; color:#64748b; }
    /* Drip row */
    .drip-row:hover .drip-actions { opacity:1; }
    .drip-actions { opacity:0; transition:opacity .15s; }
    /* Storage banner offset */
    body.storage-warn .flex.h-screen { padding-top:42px; }
    @media (max-width:480px) {
      body.storage-warn .flex.h-screen { padding-top:64px; }
    }
    /* Mobile punch list — native-feeling horizontal scroll */
    .punch-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity; position:relative; }
    .punch-table  { min-width:580px; }
    .punch-table th:nth-child(2), .punch-table td:nth-child(2) { scroll-snap-align:start; }
    /* Thin, visible scrollbar so field users know it scrolls */
    .punch-scroll::-webkit-scrollbar { height:5px; }
    .punch-scroll::-webkit-scrollbar-thumb { background:rgba(16,185,129,0.4); border-radius:3px; }
    .punch-scroll::-webkit-scrollbar-track { background:rgba(148,163,184,0.08); }
    .punch-scroll { scrollbar-width:thin; scrollbar-color:rgba(16,185,129,0.4) rgba(148,163,184,0.08); }
    /* Right-edge fade hints there is more to scroll (mobile only) */
    @media (max-width:768px) {
      .punch-scroll::after { content:''; position:sticky; top:0; right:0; float:right; width:24px; height:100%; margin-left:-24px;
        background:linear-gradient(to right, transparent, var(--card, #0d1424)); pointer-events:none; }
      .punch-swipe-hint { display:flex; align-items:center; gap:6px; justify-content:center; padding:6px 0 2px;
        font-size:10px; color:#64748b; }
    }
    @media (min-width:769px) { .punch-swipe-hint { display:none; } }
    /* Larger tap targets on mobile */
    @media (max-width:768px) {
      .mob-tap { min-height:44px !important; min-width:44px !important; }
      #job-selector-btn { padding:0.75rem 0.875rem; }
      #job-list button  { padding:0.75rem 0.875rem; }
    }
    /* ── v36 Additions ── */
    .punch-check { width:16px; height:16px; border-radius:4px; border:1.5px solid #334155; background:#0f172a; cursor:pointer; flex-shrink:0; transition:all .15s; appearance:none; -webkit-appearance:none; }
    .punch-check:checked { background:#10b981; border-color:#10b981; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:10px 8px; background-repeat:no-repeat; background-position:center; }
    .punch-check:hover:not(:checked) { border-color:#10b981; }
    .punch-done td { opacity:.42; }
    .punch-done .punch-desc { text-decoration:line-through; text-decoration-color:#475569; }
    .scan-ring { position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(16,185,129,.6); animation: scanPulse 2s ease-out infinite; }
    .scan-ring2 { animation-delay:.6s; }
    .scan-ring3 { animation-delay:1.2s; }
    @keyframes scanPulse { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
    .scan-btn-big { background:linear-gradient(135deg,#065f46 0%,#059669 100%); border:1px solid rgba(16,185,129,.35); transition:all .2s ease; }
    .scan-btn-big:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 40px rgba(16,185,129,.3); filter:brightness(1.08); }
    .scan-btn-big:active:not(:disabled) { transform:scale(.97); }
    .scan-btn-big:disabled { opacity:.6; cursor:not-allowed; }
    .scan-result { animation: scanSlide .3s ease; border-left:2px solid transparent; }
    @keyframes scanSlide { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
    .scan-result.risk-high  { border-left-color:#ef4444; }
    .scan-result.risk-med   { border-left-color:#f59e0b; }
    .scan-result.risk-ok    { border-left-color:#10b981; }
    .kpi-bar { height:3px; border-radius:2px; background:#1e293b; overflow:hidden; margin-top:10px; }
    .kpi-bar-fill { height:100%; border-radius:2px; }
    #scan-progress-bar { transition:width .35s ease; }
    .trend-up { color:#10b981; } .trend-dn { color:#ef4444; } .trend-flat { color:#475569; }
    .skeleton { background:linear-gradient(90deg,#1e293b 25%,#263347 50%,#1e293b 75%); background-size:200% 100%; animation:skeleton 1.4s ease infinite; border-radius:8px; }
    @keyframes skeleton { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
    .tab-fade { animation:tabFade .2s ease; }
    @keyframes tabFade { from { opacity:0; } to { opacity:1; } }

    /* ── v38 Schedule Layer ── */
    .sched-group-label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.5rem .75rem .25rem; }
    .sched-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:.875rem; transition:background .12s; cursor:default; }
    .sched-item:hover { background:rgba(255,255,255,.03); }
    .sched-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .sched-overdue  .sched-dot { background:#ef4444; }
    .sched-today    .sched-dot { background:#f59e0b; }
    .sched-tomorrow .sched-dot { background:#fbbf24; }
    .sched-week     .sched-dot { background:#60a5fa; }
    .sched-future   .sched-dot { background:#475569; }
    .sched-overdue  .sched-date-badge { background:rgba(239,68,68,.15);  color:#f87171; }
    .sched-today    .sched-date-badge { background:rgba(245,158,11,.15); color:#fbbf24; }
    .sched-tomorrow .sched-date-badge { background:rgba(251,191,36,.12); color:#fde68a; }
    .sched-week     .sched-date-badge { background:rgba(96,165,250,.12); color:#93c5fd; }
    .sched-future   .sched-date-badge { background:rgba(71,85,105,.2);   color:#64748b; }
    .sched-date-badge { font-family:'DM Mono',monospace; font-size:.65rem; font-weight:600; padding:.2rem .55rem; border-radius:.4rem; flex-shrink:0; }
    .sched-done { opacity:.38; }
    .sched-done .sched-desc { text-decoration:line-through; text-decoration-color:#475569; }
    .cb-check { width:14px; height:14px; border-radius:3px; border:1.5px solid #334155; background:#0f172a; cursor:pointer; flex-shrink:0; appearance:none; -webkit-appearance:none; transition:all .12s; }
    .cb-check:checked { background:#10b981; border-color:#10b981; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:9px 7px; background-repeat:no-repeat; background-position:center; }

    /* v38 Final Polish - mobile minimum tap height on schedule items */
    @media (max-width:768px) { .sched-item { min-height:44px; } }
    /* v38 Final Polish - visually dim disabled date input in completed punch rows */
    input[type="date"]:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
    /* v38 Final Polish - brief green flash when a due date is saved inline */
    @keyframes dateFlash { 0%,100% { border-color:#334155 !important; } 50% { border-color:#10b981 !important; box-shadow:0 0 0 2px rgba(16,185,129,.18) !important; } }
    .date-flash { animation:dateFlash .55s ease; }
  </style>
</head>
<body class="text-slate-200 min-h-screen overflow-hidden">

<!-- ═══════ TOAST CONTAINER ═══════ -->
<div id="toast-container"></div>

<!-- ═══════ STORAGE WARNING BANNER (non-dismissible, shown at ≥50% usage — CR-01) ═══════ -->
<div id="storage-banner" class="hidden" style="
  position:fixed; top:0; left:0; right:0; z-index:9997;
  background:rgba(127,29,29,0.97); border-bottom:1px solid rgba(239,68,68,0.5);
  padding:0.6rem 1.25rem; display:none; align-items:center; gap:0.75rem;
  flex-wrap:wrap; font-size:0.8125rem; color:#fca5a5;
  backdrop-filter:blur(4px);
">
  <i class="fas fa-triangle-exclamation text-red-400 flex-shrink-0"></i>
  <span class="flex-1 font-medium" style="min-width:200px;">
    ⚠️ Local storage filling up. Your data lives in this browser — export a backup now to prevent loss. Optional Managed Environment ($34.95/mo) adds hosted sync.
  </span>
  <button onclick="exportAllData()"
    style="background:rgba(239,68,68,0.25); border:1px solid rgba(239,68,68,0.45); color:#fca5a5;
           padding:0.35rem 0.875rem; border-radius:0.5rem; font-size:0.75rem; font-weight:600;
           cursor:pointer; white-space:nowrap; flex-shrink:0;"
    onmouseover="this.style.background='rgba(239,68,68,0.4)'"
    onmouseout="this.style.background='rgba(239,68,68,0.25)'">
    <i class="fas fa-download text-[10px] mr-1"></i> Export All Data
  </button>
</div>

<!-- ═══════ MOBILE OVERLAY ═══════ -->
<div id="sidebar-overlay" onclick="closeMobileSidebar()"></div>

<div class="flex h-screen overflow-hidden">

  <!-- ═══════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════ -->
  <div id="sidebar" class="w-[220px] sidebar-bg border-r border-slate-800 flex flex-col flex-shrink-0">

    <!-- Logo -->
    <div class="px-5 py-4 border-b border-slate-800 flex items-center gap-3">
      <div class="w-8 h-8 rounded-xl bg-emerald-500 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-house-circle-check text-white text-xs"></i>
      </div>
      <div class="min-w-0">
        <h1 class="text-sm font-semibold text-white leading-tight tracking-tight">AfterCloseCare</h1>
        <p class="text-emerald-400 text-[10px] tracking-wide uppercase">Command Center</p>
      </div>
    </div>

    <!-- Job Selector -->
    <div class="px-3 pt-3 pb-2">
      <div class="text-[9px] uppercase tracking-widest text-slate-600 px-2 mb-1.5">Active Job</div>
      <div id="job-selector-btn" onclick="toggleJobDropdown()" class="cursor-pointer flex items-center gap-2 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded-xl px-3 py-2.5 transition-colors">
        <div id="job-selector-dot" class="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0"></div>
        <span class="text-xs text-slate-300 font-medium truncate flex-1" id="job-selector-label">JOB-001 · Smith</span>
        <i class="fas fa-chevron-down text-slate-500 text-[9px]"></i>
      </div>
      <div id="job-dropdown" class="hidden mt-1.5 bg-[#0d1424] border border-slate-700/50 rounded-xl overflow-hidden shadow-xl z-50">
        <div class="p-2">
          <input type="text" id="job-search" oninput="filterJobs(this.value)" placeholder="Search jobs..." class="!text-xs !py-2 !px-3 !rounded-lg !bg-slate-900 !border-slate-700">
        </div>
        <div id="job-list" class="max-h-48 overflow-y-auto pb-1.5"></div>
      </div>
    </div>

    <!-- Nav -->
    <div class="text-[9px] uppercase tracking-widest text-slate-600 px-5 pt-3 pb-1.5">Main</div>
    <nav class="flex-1 px-2 space-y-0.5 overflow-y-auto" id="sidebar-nav"></nav>

    <!-- User profile bottom -->
    <div class="p-3 border-t border-slate-800 flex items-center gap-2.5">
      <div class="w-7 h-7 rounded-lg bg-emerald-600 flex items-center justify-center text-white text-[10px] font-bold flex-shrink-0">JD</div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium text-slate-300 truncate">Jason D.</p>
        <p class="text-[10px] text-slate-600 truncate">Owner · Ohio</p>
      </div>
      <button id="view-toggle-btn" onclick="toggleViewMode()" aria-label="Toggle Owner / VA view" title="Owner / VA view" class="text-slate-600 hover:text-emerald-400 transition-colors mr-1">
        <i class="fas fa-user-shield text-xs"></i>
      </button>
      <button onclick="switchTab('settings')" aria-label="Open Settings" class="text-slate-600 hover:text-slate-400 transition-colors">
        <i class="fas fa-cog text-xs"></i>
      </button>
    </div>
  </div>

  <!-- ═══════════════════════════════════════════ MAIN AREA ═══════════════════════════════════════════ -->
  <div class="flex-1 flex flex-col overflow-hidden min-w-0">

    <!-- Header -->
    <header class="h-14 bg-[#0d1424] border-b border-slate-800 px-5 flex items-center justify-between flex-shrink-0 gap-4">
      <div class="flex items-center gap-4 min-w-0">
        <!-- Mobile hamburger -->
        <button class="md:hidden text-slate-500 hover:text-white" onclick="openMobileSidebar()">
          <i class="fas fa-bars text-lg"></i>
        </button>
        <h2 class="text-base font-semibold text-white truncate" id="page-title">Command Center</h2>
        <span class="hidden sm:flex items-center gap-1.5 text-slate-500 text-sm">
          <span class="text-emerald-400 font-medium" id="header-job-label">Smith Residence</span>
          <span class="text-slate-700">·</span>
          <span id="header-status-dot" class="text-emerald-400 text-xs font-medium">● Low Risk</span>
        </span>
      </div>
      <div class="flex items-center gap-2 flex-shrink-0">
        <!-- Global search -->
        <div class="relative hidden sm:block">
          <input type="text" id="global-search" onkeyup="handleGlobalSearch(this.value)" onfocus="showSearch()" onblur="hideSearch()" placeholder="Search jobs, clients…" class="!text-xs !py-1.5 !pl-8 !pr-4 !w-48 !rounded-xl !bg-slate-800/60 !border-slate-700">
          <i class="fas fa-search absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500 text-[11px]"></i>
          <div id="search-results" class="hidden"></div>
        </div>
        <!-- Scanner status -->
        <button onclick="switchTab('scanner')" class="hidden sm:flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 rounded-lg hover:bg-emerald-500/15 transition-colors">
          <div class="pulse-dot"></div>
          <span class="text-emerald-400 text-xs font-medium">Scanner Live</span>
        </button>
        <button onclick="openIntakeModal()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-1.5">
          <i class="fas fa-plus text-[10px]"></i>
          <span class="hidden sm:inline">New Job</span>
          <span class="sm:hidden">+</span>
        </button>
      </div>
    </header>

    <!-- Content -->
    <div class="flex-1 overflow-auto p-5 md:p-7" id="main-content"></div>
  </div>
</div>

<!-- ═══════════════════════════════════════════ INTAKE MODAL ═══════════════════════════════════════════ -->
<div id="intake-modal" class="hidden fixed inset-0 modal-bg flex items-center justify-center z-50 p-4">
  <div class="glass w-full max-w-2xl rounded-2xl max-h-[92vh] overflow-auto">
    <!-- Step indicator -->
    <div id="intake-step-bar" class="px-8 pt-7 pb-0"></div>
    <div id="intake-body" class="p-8 pt-5"></div>
  </div>
</div>

<!-- ═══════════════════════════════════════════ PUNCH MODAL ═══════════════════════════════════════════ -->
<div id="punch-modal" class="hidden fixed inset-0 modal-bg flex items-center justify-center z-50 p-4">
  <div class="glass w-full max-w-lg rounded-2xl p-7">
    <div class="flex justify-between items-center mb-5">
      <h3 class="text-lg font-semibold">Add Punch List Item</h3>
      <button onclick="closePunchModal()" class="text-slate-500 hover:text-white w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800"><i class="fas fa-times text-sm"></i></button>
    </div>
    <div class="space-y-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Category</label>
          <select id="p-category" onchange="updateSuggestions()"></select>
        </div>
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Priority</label>
          <select id="p-priority">
            <option value="Medium">Medium</option>
            <option value="High">High</option>
            <option value="Low">Low</option>
            <option value="Critical">Critical</option>
          </select>
        </div>
      </div>
      <div>
        <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Description</label>
        <input type="text" id="p-desc" placeholder="Describe the issue…">
        <div id="p-suggestions" class="flex flex-wrap gap-1.5 mt-2"></div>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Assigned To</label>
          <select id="p-assignee">
            <option>Mike R.</option><option>Jake T.</option><option>Carlos M.</option><option>Sarah K.</option><option>Subcontractor</option>
          </select>
        </div>
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Due Date</label>
          <input type="date" id="p-due">
        </div>
      </div>
      <div class="flex justify-end gap-3 pt-1">
        <button onclick="closePunchModal()" class="px-5 py-2 text-slate-500 hover:text-white text-sm">Cancel</button>
        <button onclick="addPunchItem()" class="bg-emerald-600 hover:bg-emerald-500 px-7 py-2 rounded-xl font-semibold text-sm">Add Item</button>
      </div>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════════════ SUPPLEMENT MODAL ═══════════════════════════════════════════ -->
<div id="supplement-modal" class="hidden fixed inset-0 modal-bg flex items-center justify-center z-50 p-4">
  <div class="glass w-full max-w-lg rounded-2xl p-7">
    <div class="flex justify-between items-center mb-5">
      <h3 class="text-lg font-semibold">New Supplement Request</h3>
      <button onclick="closeSupplementModal()" class="text-slate-500 hover:text-white w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800"><i class="fas fa-times text-sm"></i></button>
    </div>
    <div class="space-y-4">
      <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Line Item Description</label><input type="text" id="s-desc" placeholder="e.g. Moisture barrier underlayment — overlooked in original scope"></div>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Amount $</label><input type="number" id="s-amount" placeholder="0.00"></div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Category</label>
          <select id="s-cat"><option>Materials</option><option>Labor</option><option>Overhead</option><option>Depreciation</option><option>Code Upgrade</option></select>
        </div>
      </div>
      <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Justification Notes</label><textarea id="s-notes" rows="2" placeholder="Why this item was missed or needs reconsideration…"></textarea></div>
      <div class="flex justify-end gap-3 pt-1">
        <button onclick="closeSupplementModal()" class="px-5 py-2 text-slate-500 hover:text-white text-sm">Cancel</button>
        <button onclick="submitSupplement()" class="bg-amber-600 hover:bg-amber-500 px-7 py-2 rounded-xl font-semibold text-sm">Submit Supplement</button>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════ v38: CALLBACK MODAL ══════════════════════════════════════════ -->
<div id="callback-modal" class="hidden fixed inset-0 modal-bg flex items-center justify-center z-50 p-4">
  <div class="glass w-full max-w-md rounded-2xl p-7">
    <div class="flex justify-between items-center mb-5">
      <div class="flex items-center gap-2.5">
        <div class="w-7 h-7 rounded-lg bg-blue-500/15 border border-blue-500/25 flex items-center justify-center">
          <i class="fas fa-calendar-plus text-blue-400 text-xs"></i>
        </div>
        <h3 class="text-base font-semibold">Schedule Callback</h3>
      </div>
      <button onclick="closeCallbackModal()" class="text-slate-500 hover:text-white w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800">
        <i class="fas fa-times text-sm"></i>
      </button>
    </div>
    <div class="space-y-4">
      <div>
        <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Job</label>
        <select id="cb-job"></select>
      </div>
      <div>
        <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Date</label>
        <input type="date" id="cb-date">
      </div>
      <div>
        <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Note <span class="text-slate-700 normal-case tracking-normal">(optional)</span></label>
        <input type="text" id="cb-note" placeholder="e.g. Follow up on tile grout repair, call client re: adjuster…">
      </div>
      <div class="flex justify-end gap-3 pt-1">
        <button onclick="closeCallbackModal()" class="px-5 py-2 text-slate-500 hover:text-white text-sm">Cancel</button>
        <button onclick="addCallback()" class="bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all px-7 py-2 rounded-xl font-semibold text-sm flex items-center gap-2">
          <i class="fas fa-calendar-plus text-xs"></i> Schedule
        </button>
      </div>
    </div>
  </div>
</div>

<script>
// ═══════════════════════════════════════════════════
//   CONSTANTS & TAXONOMY
// ═══════════════════════════════════════════════════

const PUNCH_CATEGORIES = [
  'Flooring','Paint & Finish','Trim & Millwork','Cabinetry',
  'Tile & Grout','Plumbing','Electrical','Drywall',
  'Windows & Doors','HVAC','Roofing','Siding & Exterior','Other'
];

const SUGGESTIONS = {
  'Flooring':['Transition strip loose','Plank gap at threshold','Squeaky board','Edge trim missing','Scratches on install','Glue residue on surface'],
  'Paint & Finish':['Touch up near window','Roller marks on ceiling','Color mismatch','Baseboard paint bleed','Nail hole unfilled','Sheen inconsistency'],
  'Trim & Millwork':['Gap at corner joint','Caulk line incomplete','Trim piece split','Nail pop visible','Miter gap','Crown molding crack'],
  'Cabinetry':['Door hinge adjustment','Drawer slide sticky','Soft close missing','Gap at wall','Door panel loose','Pull misaligned'],
  'Tile & Grout':['Grout crack in corner','Tile lippage issue','Caulk gap at tub','Grout haze','Chipped tile edge','Missing grout fill'],
  'Plumbing':['Slow drain in kitchen','Leak under sink','Faucet drips','P-trap needs tightening','Spray head loose','Shutoff valve stiff'],
  'Electrical':['Outlet not flush','Switch cover cracked','GFCI not tested','Light fixture loose','Dimmer hums','Breaker label missing'],
  'Drywall':['Seam visible under paint','Screw pop near corner','Texture mismatch','Corner bead cracked','Ceiling patch visible','Tape bubble'],
  'Windows & Doors':['Door rubs frame','Latch doesn\'t engage','Weather stripping gap','Window won\'t lock','Screen damaged','Threshold gap'],
  'HVAC':['Vent cover loose','Thermostat offset','Filter not replaced','Duct tape exposed','Airflow weak in room','Drain pan access blocked'],
  'Roofing':['Flashing gap at chimney','Shingle tab lifted','Valley seal needed','Gutter end cap loose','Fascia nail pop','Soffit vent clogged'],
  'Siding & Exterior':['Caulk gap at corner trim','Paint peel on fascia','J-channel loose','Nail hole unsealed','Siding overlap gap','Wrap cut uneven'],
  'Other':['Misc item','Follow-up needed','Client request','Subcontractor callback','Photo documentation needed','Warranty note']
};

const ACTIVITY_TEMPLATES = [
  { icon:'fa-check-circle', color:'text-emerald-400', msg: (j) => `Punch item marked complete on ${j.name.split(' ').slice(0,2).join(' ')}` },
  { icon:'fa-envelope', color:'text-blue-400', msg: (j) => `Survey email sent to ${j.homeowner}` },
  { icon:'fa-shield-alt', color:'text-emerald-400', msg: (j) => `Daily scanner cleared ${j.name.split(' ').slice(0,2).join(' ')} — no issues` },
  { icon:'fa-star', color:'text-yellow-400', msg: (j) => `5-star review received from ${j.homeowner}` },
  { icon:'fa-file-invoice-dollar', color:'text-amber-400', msg: (j) => `Supplement request drafted for ${j.name.split(' ').slice(0,2).join(' ')}` },
  { icon:'fa-calendar-check', color:'text-purple-400', msg: (j) => `Warranty check-in scheduled for ${j.homeowner}` },
  { icon:'fa-bell', color:'text-slate-400', msg: (j) => `Automation: follow-up SMS queued for ${j.homeowner}` },
  { icon:'fa-chart-line', color:'text-emerald-400', msg: (j) => `Risk score updated: ${j.name.split(' ').slice(0,2).join(' ')} at low risk` },
];

const TECHS = ['Mike R.','Jake T.','Carlos M.','Sarah K.'];

// ═══════════════════════════════════════════════════
//   DEFAULT STATE (3 DEMO JOBS)
// ═══════════════════════════════════════════════════

const DEFAULT_STATE = {
  activeJobId: 'JOB-001',
  activeAgents: [],  // v40 modular: [] or all 3 = full (backward-compatible); subset = only those agents shown
  settings: {
    companyName: 'ProCraft Contracting',
    ownerName: 'Jason Daniels',
    email: 'jason@procraft.com',
    phone: '(614) 555-0180',
    warrantyMonths: 12,
    purchaseCycleDays: 365,  // CR-29: Anchor at-risk cycle (restoration default 365)
    autoSurvey: true,
    autoWarranty: true,
    autoSupplement: false,
    reviewPlatform: 'Google',
    timezone: 'America/New_York'
  },
  jobs: [
    {
      id: 'JOB-001',
      name: 'Smith Residence Kitchen Remodel',
      homeowner: 'John Smith',
      phone: '(614) 555-0142',
      email: 'john.smith@email.com',
      address: '1421 Maple Drive, Columbus OH 43201',
      type: 'Kitchen Remodel',
      invoice: 'INV-2026-042',
      po: 'PO-88821',
      date: '2026-05-08',
      tech: 'Mike R.',
      notes: 'Premium client — follow up within 48hrs',
      wonotes: 'Be mindful of new countertops; use felt pads',
      riskScore: 18,
      punchlist: [
        { id:'PL-1', category:'Flooring', desc:'Transition strip loose at doorway', assignee:'Mike R.', due:'2026-05-14', priority:'High', complete:false },
        { id:'PL-2', category:'Paint & Finish', desc:'Touch up above window trim', assignee:'Jake T.', due:'2026-05-14', priority:'Low', complete:true },
        { id:'PL-3', category:'Trim & Millwork', desc:'Gap at corner joint — kitchen/hallway', assignee:'Mike R.', due:'2026-05-15', priority:'Medium', complete:false },
        { id:'PL-4', category:'Cabinetry', desc:'Soft close missing on pantry door', assignee:'Carlos M.', due:'2026-05-16', priority:'Medium', complete:false }
      ],
      surveys: [{ sent:'2026-05-09', responded:true, rating:5, review:'Outstanding work, highly recommend!' }],
      insurance: {
        carrier:'State Farm Insurance', adjuster:'Robert T.', adjusterPhone:'(614) 555-0192',
        claimNum:'SF-2026-448821', claimDate:'2026-04-18', initialPayout:'$14,500',
        supplements: [
          { id:'SUP-1', desc:'Moisture barrier underlayment — overlooked in original scope', amount:2200, category:'Materials', status:'Submitted', date:'2026-05-10', notes:'Required by code update 2025' },
          { id:'SUP-2', desc:'Custom cabinet panels for island — not in original SOW', amount:2600, category:'Labor', status:'Pending', date:'2026-05-12', notes:'Client selected upgrade day-of' }
        ]
      },
      warranty: { months:12, checkins:['2026-11-08','2027-05-08'] },
      communications: [
        { date:'2026-05-08', type:'email', msg:'Job closing confirmation sent to homeowner.' },
        { date:'2026-05-09', type:'sms', msg:'Survey request sent via SMS — 5-star response received.' },
        { date:'2026-05-10', type:'email', msg:'Supplement documentation emailed to adjuster Robert T.' }
      ],
      // v38: scheduled callbacks for this job
      callbacks: [
        { id:'CB-001', date:'2026-05-23', note:'30-day punch list follow-up call with John Smith', done:false },
        { id:'CB-002', date:'2026-06-08', note:'Confirm cabinet soft-close install completed', done:false }
      ]
    },
    {
      id: 'JOB-002',
      name: 'Martinez Water Damage Restoration',
      homeowner: 'Maria Martinez',
      phone: '(614) 555-0267',
      email: 'mmartinez@email.com',
      address: '887 Oak Street, Dublin OH 43016',
      type: 'Water Damage Restoration',
      invoice: 'INV-2026-038',
      po: 'PO-77430',
      date: '2026-05-03',
      tech: 'Carlos M.',
      notes: 'Insurance job — document everything with photos',
      wonotes: 'Adjuster may revisit on May 20',
      riskScore: 64,
      punchlist: [
        { id:'PL-5', category:'Drywall', desc:'Seam visible under new paint — master bath', assignee:'Carlos M.', due:'2026-05-13', priority:'High', complete:false },
        { id:'PL-6', category:'Flooring', desc:'LVP expansion gap missing near south wall', assignee:'Jake T.', due:'2026-05-13', priority:'High', complete:false },
        { id:'PL-7', category:'Plumbing', desc:'P-trap under vanity has slight weep', assignee:'Carlos M.', due:'2026-05-14', priority:'Critical', complete:false },
        { id:'PL-8', category:'Paint & Finish', desc:'Texture mismatch on repaired ceiling section', assignee:'Jake T.', due:'2026-05-15', priority:'Medium', complete:false },
        { id:'PL-9', category:'HVAC', desc:'Vent cover loose in bedroom 2', assignee:'Carlos M.', due:'2026-05-16', priority:'Low', complete:true }
      ],
      surveys: [{ sent:'2026-05-04', responded:false, rating:null, review:null }],
      insurance: {
        carrier:'Nationwide Insurance', adjuster:'Linda P.', adjusterPhone:'(614) 555-0310',
        claimNum:'NW-2026-119943', claimDate:'2026-04-28', initialPayout:'$22,100',
        supplements: [
          { id:'SUP-3', desc:'Hardwood subfloor replacement — additional water damage discovered', amount:4800, category:'Materials', status:'Pending', date:'2026-05-05', notes:'Photos sent to Linda P.' },
          { id:'SUP-4', desc:'Mold remediation — behind drywall in bathroom', amount:3200, category:'Labor', status:'Submitted', date:'2026-05-07', notes:'Third-party mold cert attached' },
          { id:'SUP-5', desc:'Air quality testing post-remediation', amount:650, category:'Overhead', status:'Approved', date:'2026-05-09', notes:'' }
        ]
      },
      warranty: { months:12, checkins:['2026-11-03','2027-05-03'] },
      communications: [
        { date:'2026-05-03', type:'email', msg:'Job closing confirmation sent to Maria Martinez.' },
        { date:'2026-05-04', type:'sms', msg:'Survey request sent via SMS — no response yet.' },
        { date:'2026-05-07', type:'email', msg:'Supplement package sent to adjuster Linda P. at Nationwide.' },
        { date:'2026-05-11', type:'call', msg:'Called homeowner re: adjuster revisit on May 20.' }
      ],
      callbacks: [
        { id:'CB-003', date:'2026-05-22', note:'Adjuster revisit follow-up — confirm payout status with Linda P.', done:false },
        { id:'CB-004', date:'2026-05-13', note:'P-trap repair verification — Carlos to confirm fix complete', done:false }
      ]
    },
    {
      id: 'JOB-003',
      name: 'Patterson Full Home Renovation',
      homeowner: 'David Patterson',
      phone: '(740) 555-0088',
      email: 'dpatterson@email.com',
      address: '3302 Walnut Ridge Ct, Springboro OH 45066',
      type: 'Full Home Renovation',
      invoice: 'INV-2026-029',
      po: 'PO-66102',
      date: '2026-04-22',
      tech: 'Sarah K.',
      notes: 'Large project — multiple phase closeout. Client very detail-oriented.',
      wonotes: 'Do not park on driveway — use street',
      riskScore: 31,
      punchlist: [
        { id:'PL-10', category:'Windows & Doors', desc:'Front door latch doesn\'t fully engage', assignee:'Sarah K.', due:'2026-05-08', priority:'High', complete:true },
        { id:'PL-11', category:'Cabinetry', desc:'Bathroom vanity door hinge needs shim', assignee:'Mike R.', due:'2026-05-10', priority:'Medium', complete:true },
        { id:'PL-12', category:'Tile & Grout', desc:'Grout crack developing at master shower corner', assignee:'Sarah K.', due:'2026-05-14', priority:'High', complete:false },
        { id:'PL-13', category:'Electrical', desc:'Dimmer switch hums in living room', assignee:'Jake T.', due:'2026-05-15', priority:'Low', complete:false },
        { id:'PL-14', category:'Siding & Exterior', desc:'Caulk gap at south corner trim board', assignee:'Carlos M.', due:'2026-05-16', priority:'Medium', complete:false },
        { id:'PL-15', category:'Paint & Finish', desc:'Ceiling touch-up in hallway — spray texture', assignee:'Mike R.', due:'2026-05-17', priority:'Low', complete:false }
      ],
      surveys: [
        { sent:'2026-04-23', responded:true, rating:4, review:'Great work overall. A few minor items being addressed.' },
        { sent:'2026-05-01', responded:true, rating:5, review:'Team came back and knocked out everything. Very happy.' }
      ],
      insurance: null,
      warranty: { months:24, checkins:['2026-10-22','2027-04-22','2027-10-22','2028-04-22'] },
      communications: [
        { date:'2026-04-22', type:'email', msg:'Phase 3 closeout confirmation sent.' },
        { date:'2026-04-23', type:'sms', msg:'Survey request sent — 4-star response received.' },
        { date:'2026-05-01', type:'sms', msg:'Follow-up survey — 5-star response received.' },
        { date:'2026-05-08', type:'email', msg:'Warranty documentation delivered to David Patterson.' }
      ],
      callbacks: [
        { id:'CB-005', date:'2026-05-24', note:'Grout crack inspection — Sarah K. on-site', done:false }
      ]
    }
  ]
};

// ═══════════════════════════════════════════════════
//   STATE
// ═══════════════════════════════════════════════════

const APP_VERSION = 'v42.0';  // stamped into every backup + shown in Data Onboarding header
window.APP_VERSION = APP_VERSION;
const BUILD_STAMP = 'v42.0 · 2026-07-08T11:40:13.701Z · 9c7cd83';  // replaced at build time: version+timestamp+git SHA (one-file-one-version audit)
window.BUILD_STAMP = BUILD_STAMP;
// CR-01: capture first-run + welcome-seen state at parse time, before any write to localStorage.
const ACC_RAW_AT_LOAD = (function(){ try { return localStorage.getItem('acc_state_v3'); } catch(e){ return null; } })();
const ACC_IS_FIRST_RUN = !ACC_RAW_AT_LOAD;
let state;
try { state = JSON.parse(localStorage.getItem('acc_state_v3')) || JSON.parse(JSON.stringify(DEFAULT_STATE)); }
catch(e) { state = JSON.parse(JSON.stringify(DEFAULT_STATE)); }
if (state && !Array.isArray(state.activeAgents)) state.activeAgents = []; // v40 migration

// Guard: if loaded state is missing riskScore (stale old-format data), re-seed to demo defaults
if (!state.jobs?.length || !state.jobs[0]?.riskScore) {
  state = JSON.parse(JSON.stringify(DEFAULT_STATE));
}

// v38 Guard: ensure every job has a callbacks array (backwards compatible with v37 saved data)
state.jobs.forEach(j => { if (!j.callbacks) j.callbacks = []; });

function save() {
  localStorage.setItem('acc_state_v3', JSON.stringify(state));
  checkStorageUsage();
}
function getJob(id) { return state.jobs.find(j => j.id === (id || state.activeJobId)); }
function allJobs() { return state.jobs; }

// ═══════════════════════════════════════════════════
//   STORAGE USAGE (Rule 10)
// ═══════════════════════════════════════════════════

function getLocalStorageBytesUsed() {
  let total = 0;
  try {
    for (const key in localStorage) {
      if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
        total += (key.length + localStorage[key].length) * 2; // UTF-16 = 2 bytes/char
      }
    }
  } catch(e) {}
  return total;
}

function checkStorageUsage() {
  const QUOTA = 5 * 1024 * 1024; // 5 MB — standard browser localStorage limit
  const used  = getLocalStorageBytesUsed();
  const pct   = used / QUOTA;
  const banner = document.getElementById('storage-banner');
  if (!banner) return;

  if (pct >= 0.50) {  // CR-01: lowered to 50% — localStorage-only, early warning before iOS/Safari purge risk
    banner.style.display = 'flex';
    banner.classList.remove('hidden');
    document.body.classList.add('storage-warn');
  } else {
    banner.style.display = 'none';
    banner.classList.add('hidden');
    document.body.classList.remove('storage-warn');
  }
}

function exportAllData() {
  try {
    let data = localStorage.getItem('acc_state_v3') || JSON.stringify(state);
    // v39.8: stamp the running version + export time into the backup so any future
    // backup self-identifies which build produced it (no more version forensics).
    try {
      const obj = JSON.parse(data);
      obj.meta = obj.meta || {};
      obj.meta.appVersion = APP_VERSION;
      obj.meta.exportedAt = new Date().toISOString();
      data = JSON.stringify(obj);
    } catch(e) { /* if parse fails, export raw */ }
    const blob = new Blob([data], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href     = url;
    a.download = 'afterclosecare-backup-' + new Date().toISOString().slice(0,10) + '.json';
    try{ if(window.ACC_EVENTS){ window.ACC_EVENTS.emit('backup.exported',null,{bytes:data.length,trigger:window.__accBackupTrigger||'manual'}); window.__accBackupTrigger=null; } }catch(_){/*shadow*/}
    document.body.appendChild(a);
    a.click();
    setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 200);
    toast('Data exported — keep this file somewhere safe', 'success', 4000);
  } catch(e) {
    toast('Export failed: ' + e.message, 'error');
  }
}

// ═══════════════════════════════════════════════════
//   TOAST SYSTEM
// ═══════════════════════════════════════════════════

function toast(msg, type='success', duration=3200) {
  const icons = { success:'fa-check-circle', warning:'fa-exclamation-triangle', error:'fa-times-circle', info:'fa-info-circle' };
  const el = document.createElement('div');
  el.className = `toast toast-${type}`;
  el.setAttribute('role','status');
  el.setAttribute('aria-live','polite');
  el.innerHTML = `<i class="fas ${icons[type]}"></i><span class="flex-1">${msg}</span><button onclick="this.parentElement.remove()" class="text-current opacity-50 hover:opacity-100 ml-1"><i class="fas fa-times text-xs"></i></button>`;
  document.getElementById('toast-container').appendChild(el);
  setTimeout(() => { el.style.animation = 'toastOut .22s ease forwards'; setTimeout(() => el.remove(), 230); }, duration);
}

// ═══════════════════════════════════════════════════
//   MOBILE SIDEBAR
// ═══════════════════════════════════════════════════

function openMobileSidebar() {
  document.getElementById('sidebar').classList.add('open');
  document.getElementById('sidebar-overlay').classList.add('open');
}
function closeMobileSidebar() {
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('sidebar-overlay').classList.remove('open');
}

// ═══════════════════════════════════════════════════
//   JOB SELECTOR
// ═══════════════════════════════════════════════════

function toggleJobDropdown() {
  const dd = document.getElementById('job-dropdown');
  dd.classList.toggle('hidden');
  if (!dd.classList.contains('hidden')) { renderJobList(''); document.getElementById('job-search').focus(); }
}

function filterJobs(q) { renderJobList(q); }

function renderJobList(q) {
  const jobs = state.jobs.filter(j =>
    !q || j.name.toLowerCase().includes(q.toLowerCase()) || j.homeowner.toLowerCase().includes(q.toLowerCase())
  );
  document.getElementById('job-list').innerHTML = jobs.map(j => {
    const open = j.punchlist.filter(i=>!i.complete).length;
    const risk = j.riskScore;
    const rc = risk < 30 ? 'text-emerald-400' : risk < 60 ? 'text-amber-400' : 'text-red-400';
    return `<button onclick="selectJob('${j.id}')" class="w-full text-left px-3 py-2.5 mx-1 rounded-xl text-xs hover:bg-slate-800 transition-colors flex items-center gap-2.5 ${j.id===state.activeJobId?'bg-slate-800':''}">
      <div class="w-1.5 h-1.5 rounded-full ${j.id===state.activeJobId?'bg-emerald-400':'bg-slate-600'} flex-shrink-0"></div>
      <div class="min-w-0 flex-1">
        <p class="font-medium text-slate-200 truncate">${j.id} · ${j.homeowner}</p>
        <p class="text-slate-500 truncate">${j.type}</p>
      </div>
      <div class="text-right flex-shrink-0">
        <p class="${rc} font-mono font-medium">${risk}</p>
        <p class="text-slate-600">${open} open</p>
      </div>
    </button>`;
  }).join('') || '<p class="text-slate-600 text-xs px-4 py-3">No jobs found</p>';
}

function selectJob(id) {
  state.activeJobId = id;
  save();
  document.getElementById('job-dropdown').classList.add('hidden');
  syncHeaderToJob();
  renderCurrentTab();
}

function syncHeaderToJob() {
  const job = getJob();
  if (!job) return;
  const lastName = job.homeowner.split(' ').slice(1).join(' ') || job.homeowner;
  const shortId  = job.id;
  const rc = riskColor(job.riskScore);

  // Sidebar pill label
  const selectorLabel = document.getElementById('job-selector-label');
  if (selectorLabel) selectorLabel.textContent = `${shortId} · ${lastName}`;

  // Sidebar selector risk dot colour (green/amber/red)
  const selectorDot = document.getElementById('job-selector-dot');
  if (selectorDot) {
    const dotBg = job.riskScore < 30 ? 'bg-emerald-400' : job.riskScore < 60 ? 'bg-amber-400' : 'bg-red-400';
    selectorDot.className = `w-1.5 h-1.5 rounded-full flex-shrink-0 ${dotBg}`;
  }

  // Header breadcrumb job name
  const headerLabel = document.getElementById('header-job-label');
  if (headerLabel) headerLabel.textContent = job.homeowner;

  // Header risk dot — colour + label
  const dot = document.getElementById('header-status-dot');
  if (dot) {
    dot.className = `text-xs font-medium ${rc.text}`;
    dot.textContent = `● ${rc.label}`;
  }
}

// ═══════════════════════════════════════════════════
//   GLOBAL SEARCH
// ═══════════════════════════════════════════════════

let searchTimeout;
function handleGlobalSearch(q) {
  clearTimeout(searchTimeout);
  if (!q.trim()) { document.getElementById('search-results').classList.add('hidden'); return; }
  searchTimeout = setTimeout(() => {
    const results = [];
    state.jobs.forEach(j => {
      if (j.name.toLowerCase().includes(q.toLowerCase()) || j.homeowner.toLowerCase().includes(q.toLowerCase())) {
        results.push({ type:'job', label:`${j.id} · ${j.name}`, sub:j.homeowner, action:`selectJob('${j.id}')` });
      }
      j.punchlist.forEach(p => {
        if (p.desc.toLowerCase().includes(q.toLowerCase())) {
          results.push({ type:'punch', label:p.desc, sub:`${p.category} · ${j.homeowner}`, action:`selectJob('${j.id}'); switchTab('punchlist')` });
        }
      });
    });
    const el = document.getElementById('search-results');
    if (!results.length) { el.classList.add('hidden'); return; }
    el.classList.remove('hidden');
    el.innerHTML = results.slice(0,6).map(r =>
      `<button onclick="${r.action}" class="w-full text-left px-4 py-3 hover:bg-slate-800 flex items-center gap-3 text-xs border-b border-slate-800 last:border-0">
        <i class="fas ${r.type==='job'?'fa-briefcase':'fa-list-check'} text-slate-500 w-3"></i>
        <div><p class="text-slate-200">${r.label}</p><p class="text-slate-500">${r.sub}</p></div>
      </button>`
    ).join('');
  }, 150);
}
function showSearch() {}
function hideSearch() { setTimeout(() => document.getElementById('search-results').classList.add('hidden'), 200); }

// ═══════════════════════════════════════════════════
//   NAVIGATION
// ═══════════════════════════════════════════════════

const TABS = [
  { id:'dashboard',      name:'Dashboard',         icon:'fa-house' },
  { id:'jobs',           name:'All Jobs',           icon:'fa-briefcase' },
  { id:'punchlist',      name:'Punch List',         icon:'fa-list-check' },
  { id:'schedule',       name:'Schedule',           icon:'fa-calendar-days', accent:'text-blue-400' }, // v38
  { id:'scanner',        name:'AI Scanner',         icon:'fa-shield-alt', accent:'text-emerald-400' },
  { id:'agents',         name:'AI Agents',          icon:'fa-robot', accent:'text-violet-400' }, // v39
  { id:'warranty',       name:'Warranty',           icon:'fa-shield-halved' },
  { id:'communications', name:'Communications',     icon:'fa-envelope' },
  { id:'surveys',        name:'Surveys & Reviews',  icon:'fa-star' },
  { id:'insurance',      name:'Insurance',          icon:'fa-file-invoice-dollar' },
  { id:'escalations',    name:'Escalations',        icon:'fa-triangle-exclamation', accent:'text-red-400' },
  { id:'settings',       name:'Settings',           icon:'fa-cog' }
];

let currentTab = 'dashboard';

function renderSidebar(active) {
  // v40: per-agent sub-nav injected under the AI Agents item, gated by activeAgents.
  const __agentNav = [
    { key:'gauge',  name:'Gauge',  sub:'Lead Qualifier',  icon:'fa-filter',  accent:'text-emerald-400' },
    { key:'shift',  name:'Shift',  sub:'Customer Service', icon:'fa-headset', accent:'text-blue-400' },
    { key:'anchor', name:'Anchor', sub:'Retention',        icon:'fa-anchor',  accent:'text-violet-400' }
  ];
  const __aa = Array.isArray(state.activeAgents) ? state.activeAgents : [];
  const __ownedAgents = __agentNav.filter(a => __aa.length === 0 || __aa.includes(a.key));
  document.getElementById('sidebar-nav').innerHTML = TABS.map(t => {
    const isActive = t.id === active;
    const accentClass = !isActive && t.accent ? t.accent : '';
    const mainItem = `<a href="#" onclick="switchTab('${t.id}'); closeMobileSidebar(); return false;"
       class="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium transition-all rounded-xl cursor-pointer ${isActive ? 'nav-active' : 'nav-inactive'} ${accentClass}">
      <i class="fas ${t.icon} w-3.5 text-center"></i>
      <span>${t.name}</span>
      ${getBadge(t.id)}
    </a>`;
    // Inject the agent sub-nav right under the AI Agents tab
    if (t.id === 'agents' && __ownedAgents.length) {
      const subs = __ownedAgents.map(a => {
        const sel = active === 'agents_' + a.key;
        return `<a href="#" onclick="switchAgentFocus('${a.key}'); closeMobileSidebar(); return false;"
           class="flex items-center gap-2 pl-7 pr-3 py-2 text-[11px] font-medium transition-all rounded-xl cursor-pointer ${sel ? 'nav-active' : 'nav-inactive'}">
          <i class="fas ${a.icon} w-3 text-center ${a.accent}"></i>
          <span class="${a.accent}">${a.name}</span>
          <span class="text-slate-600 text-[9px]">— ${a.sub}</span>
          ${getAgentBadge(a.key)}
        </a>`;
      }).join('');
      return mainItem + subs;
    }
    return mainItem;
  }).join('');
}

// v40: queue-count / certified badge for the agent sub-nav items
function getAgentBadge(sidebarKey) {
  try {
    if (typeof ensureAgents === 'function') ensureAgents();
    const defKey = ({ gauge:'leads', shift:'support', anchor:'retention' })[sidebarKey];
    const a = state.agents[defKey];
    if (!a) return '';
    const qKey = ({ gauge:'hotQueue', shift:'escalationQueue', anchor:'saveQueue' })[sidebarKey];
    const q = a[qKey] || [];
    if (q.length > 0) {
      const col = sidebarKey==='gauge' ? 'text-emerald-400 bg-emerald-500/20'
                : sidebarKey==='shift' ? 'text-blue-400 bg-blue-500/20'
                : 'text-violet-400 bg-violet-500/20';
      return `<span class="ml-auto text-[9px] font-bold px-1.5 py-0.5 rounded-md ${col}">${q.length}</span>`;
    }
    if (a.stability >= 80) return `<span class="ml-auto text-[9px] px-1.5 py-0.5 rounded-md text-emerald-400 bg-emerald-500/10">✓</span>`;
  } catch(e) {}
  return '';
}

function getBadge(tabId) {
  if (tabId === 'punchlist') {
    const total = state.jobs.reduce((s,j) => s + j.punchlist.filter(i=>!i.complete).length, 0);
    if (total > 0) return `<span class="ml-auto text-[9px] font-bold px-1.5 py-0.5 rounded-md bg-amber-500/20 text-amber-400">${total}</span>`;
  }
  // v38: schedule badge — count overdue + today items across all jobs
  if (tabId === 'schedule') {
    const today = new Date().toISOString().split('T')[0];
    let urgent = 0;
    state.jobs.forEach(j => {
      j.punchlist.forEach(i => { if (!i.complete && i.due && i.due <= today) urgent++; });
      (j.callbacks||[]).forEach(c => { if (!c.done && c.date <= today) urgent++; });
    });
    if (urgent > 0) return `<span class="ml-auto text-[9px] font-bold px-1.5 py-0.5 rounded-md bg-blue-500/20 text-blue-400">${urgent}</span>`;
  }
  if (tabId === 'insurance') {
    const total = state.jobs.reduce((s,j) => s + (j.insurance?.supplements?.filter(s=>s.status==='Pending').length||0), 0);
    if (total > 0) return `<span class="ml-auto text-[9px] font-bold px-1.5 py-0.5 rounded-md bg-amber-500/20 text-amber-400">${total}</span>`;
  }
  return '';
}

function switchTab(id) {
  // Clear scanner sim whenever we leave the dashboard
  if (id !== 'dashboard') clearInterval(scannerInterval);

  // v40: clicking the main AI Agents tab clears any focused agent
  if (id === 'agents') focusedAgent = null;
  currentTab = id;
  const tab = TABS.find(t => t.id === id);
  if (!tab) return; // guard against bad id
  document.getElementById('page-title').textContent = id === 'dashboard' ? 'Command Center' : tab.name;
  renderSidebar(id);
  syncHeaderToJob(); // always keep header in sync

  const renders = {
    dashboard:      renderDashboard,
    jobs:           renderJobsTab,
    punchlist:      renderPunchList,
    schedule:       renderSchedule,       // v38
    scanner:        renderScanner,
    agents:         renderAgents,         // v39
    warranty:       renderWarranty,
    communications: renderCommunications,
    surveys:        renderSurveys,
    insurance:      renderInsurance,
    escalations:    renderEscalations,
    settings:       renderSettings
  };
  // Brief skeleton for tab feel
  if (id !== 'dashboard') {
    const mc = document.getElementById('main-content');
    if (mc) mc.innerHTML = '<div class="tab-fade max-w-5xl mx-auto space-y-4 p-2"><div class="grid grid-cols-3 gap-4">' + Array(3).fill('<div class="skeleton h-20 rounded-2xl"></div>').join('') + '</div><div class="skeleton h-64 rounded-2xl"></div><div class="skeleton h-40 rounded-2xl"></div></div>';
  }
  setTimeout(() => {
    try { renders[id]?.(); } catch(e) { console.error('Tab render error:', e); }
  }, id === 'dashboard' ? 0 : 60);
}

function renderCurrentTab() { switchTab(currentTab); }

// ═══════════════════════════════════════════════════
//   HELPERS
// ═══════════════════════════════════════════════════

function riskColor(score) {
  if (score < 30) return { text:'text-emerald-400', stroke:'#10b981', label:'Low Risk' };
  if (score < 60) return { text:'text-amber-400', stroke:'#f59e0b', label:'Medium Risk' };
  return { text:'text-red-400', stroke:'#ef4444', label:'High Risk' };
}

function riskGaugeSVG(score, size=80) {
  const r = 32, cx = size/2, cy = size/2;
  const circ = 2 * Math.PI * r;
  const arc = circ * 0.75;
  const offset = arc - (score/100) * arc;
  const rc = riskColor(score);
  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
    <circle cx="${cx}" cy="${cy}" r="${r}" class="gauge-track" stroke-dasharray="${arc} ${circ}" stroke-dashoffset="${-circ*0.125}" transform="rotate(135 ${cx} ${cy})"/>
    <circle cx="${cx}" cy="${cy}" r="${r}" class="gauge-fill" stroke="${rc.stroke}"
      stroke-dasharray="${arc} ${circ}" stroke-dashoffset="${offset + circ*0.125}"
      transform="rotate(135 ${cx} ${cy})"/>
    <text x="${cx}" y="${cy+2}" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="14" font-weight="700" font-family="DM Mono,monospace">${score}</text>
    <text x="${cx}" y="${cy+14}" text-anchor="middle" dominant-baseline="middle" fill="#64748b" font-size="5.5" font-family="DM Sans,sans-serif" letter-spacing="0.5">RISK</text>
  </svg>`;
}

function timeSaved() {
  // Simulate hours saved this month based on jobs
  return state.jobs.length * 4.8 + state.jobs.reduce((s,j)=>s+j.punchlist.filter(i=>i.complete).length,0) * 0.5;
}

function fmtDate(d) {
  if (!d) return '—';
  try { return new Date(d+'T00:00:00').toLocaleDateString('en-US',{month:'short',day:'numeric'}); } catch(e){ return d; }
}

function daysAgo(d) {
  if (!d) return '';
  const diff = Math.floor((Date.now() - new Date(d+'T00:00:00')) / 86400000);
  if (diff === 0) return 'Today';
  if (diff === 1) return 'Yesterday';
  return `${diff}d ago`;
}

// ═══════════════════════════════════════════════════
//   LIVE ACTIVITY FEED (simulated)
// ═══════════════════════════════════════════════════

let activityFeed = [];
function initActivityFeed() {
  const jobs = state.jobs;
  activityFeed = [];
  jobs.forEach(j => {
    j.communications.slice().reverse().forEach(c => {
      activityFeed.push({ icon: c.type==='email'?'fa-envelope':c.type==='sms'?'fa-comment-sms':'fa-phone', color:'text-blue-400', msg: c.msg, time: c.date, job: j.name });
    });
  });
  activityFeed.sort((a,b) => new Date(b.time) - new Date(a.time));
  activityFeed = activityFeed.slice(0,12);
}

function renderFeedItems(feed) {
  if (!document.getElementById('activity-feed')) return;
  const items = (feed || activityFeed).slice(0, 8);
  const html = items.map((item, i) => `
    <div class="activity-item flex items-start gap-3 py-2.5 border-b border-slate-800/50 last:border-0">
      <div class="w-6 h-6 rounded-lg bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5">
        <i class="fas ${item.icon} ${item.color} text-[9px]"></i>
      </div>
      <div class="min-w-0 flex-1">
        <p class="text-xs text-slate-300 leading-snug">${item.msg}</p>
        <p class="text-[10px] text-slate-600 mt-0.5">${item.time}</p>
      </div>
    </div>
  `).join('');
  document.getElementById('activity-feed').innerHTML = html || '<p class="text-xs text-slate-600 text-center py-4">No activity for this job yet.</p>';
}

// Auto-inject a simulated scanner activity every 12 seconds
let scannerInterval;
function startScannerSim() {
  clearInterval(scannerInterval);
  scannerInterval = setInterval(() => {
    const job = state.jobs[Math.floor(Math.random()*state.jobs.length)];
    const tmpl = ACTIVITY_TEMPLATES[Math.floor(Math.random()*ACTIVITY_TEMPLATES.length)];
    activityFeed.unshift({ icon:tmpl.icon, color:tmpl.color, msg:tmpl.msg(job), time:'Just now' });
    activityFeed = activityFeed.slice(0,12);
    renderFeedItems();
    // Update scanner timestamp
    const ts = document.getElementById('scanner-ts');
    if (ts) ts.textContent = 'Last scan: just now';
  }, 12000);
}

// ═══════════════════════════════════════════════════
//   ALL JOBS TAB
// ═══════════════════════════════════════════════════

function renderJobsTab() {
  const jobs = state.jobs;
  const totalOpen  = jobs.reduce((s,j)=>s+j.punchlist.filter(i=>!i.complete).length,0);
  const totalDone  = jobs.reduce((s,j)=>s+j.punchlist.filter(i=>i.complete).length,0);
  const totalSupps = jobs.reduce((s,j)=>s+(j.insurance?.supplements?.filter(p=>p.status==='Pending').length||0),0);

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-5xl mx-auto space-y-5">

    <!-- Top stats row -->
    <div class="grid grid-cols-3 gap-4">
      ${[
        { val:jobs.length,   label:'Active Jobs',      color:'text-white' },
        { val:totalOpen,     label:'Open Punch Items',  color:'text-amber-400' },
        { val:totalSupps,    label:'Pending Suppl.',    color:'text-amber-300' }
      ].map(s=>`<div class="card-bg rounded-xl p-4 text-center">
        <div class="stat-n text-3xl font-bold ${s.color}">${s.val}</div>
        <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">${s.label}</div>
      </div>`).join('')}
    </div>

    <!-- Job cards -->
    <div class="space-y-3">
      ${jobs.map(j => {
        const isActive = j.id === state.activeJobId;
        const open  = j.punchlist.filter(i=>!i.complete).length;
        const done  = j.punchlist.filter(i=>i.complete).length;
        const total = j.punchlist.length;
        const pct   = total ? Math.round(done/total*100) : 100;
        const rc    = riskColor(j.riskScore);
        const supPending = j.insurance?.supplements?.filter(s=>s.status==='Pending').length || 0;
        const supAmt     = j.insurance?.supplements?.filter(s=>s.status==='Pending').reduce((a,s)=>a+s.amount,0) || 0;
        return `
        <div class="card-bg rounded-2xl p-5 ${isActive ? 'border-emerald-500/30' : ''}" style="${isActive?'border-color:rgba(16,185,129,.3)':''}">
          <div class="flex items-start gap-4 flex-wrap">

            <!-- Risk gauge -->
            <div class="flex-shrink-0">${riskGaugeSVG(j.riskScore, 64)}</div>

            <!-- Main info -->
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 flex-wrap mb-1">
                <span class="text-[10px] font-mono text-slate-500">${j.id}</span>
                ${isActive ? `<span class="text-[9px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-md">Active</span>` : ''}
                <span class="text-[9px] px-2 py-0.5 rounded-md bg-slate-800 text-slate-400">${j.type}</span>
              </div>
              <h3 class="font-semibold text-white text-sm leading-tight">${j.name}</h3>
              <p class="text-xs text-slate-500 mt-0.5">${j.homeowner} · ${j.email||'No email'} · ${j.tech}</p>

              <!-- Punch progress bar -->
              <div class="mt-3 flex items-center gap-2">
                <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                  <div class="h-full bg-emerald-500 rounded-full transition-all" style="width:${pct}%"></div>
                </div>
                <span class="text-[10px] text-slate-500 flex-shrink-0">${done}/${total} items done</span>
              </div>

              <!-- Tag row -->
              <div class="flex items-center gap-3 mt-3 flex-wrap">
                ${open > 0
                  ? `<span class="text-[10px] flex items-center gap-1 text-amber-400"><i class="fas fa-list-check text-[9px]"></i> ${open} open items</span>`
                  : `<span class="text-[10px] flex items-center gap-1 text-emerald-400"><i class="fas fa-check text-[9px]"></i> Punch list clear</span>`}
                ${supPending > 0
                  ? `<span class="text-[10px] flex items-center gap-1 text-amber-300"><i class="fas fa-file-invoice-dollar text-[9px]"></i> $${supAmt.toLocaleString()} pending</span>`
                  : ''}
                <span class="text-[10px] flex items-center gap-1 text-slate-500"><i class="fas fa-calendar text-[9px]"></i> Closed ${fmtDate(j.date)}</span>
                <span class="text-[10px] flex items-center gap-1 ${rc.text}"><i class="fas fa-circle text-[7px]"></i> ${rc.label}</span>
              </div>
            </div>

            <!-- Action buttons -->
            <div class="flex flex-col gap-2 flex-shrink-0 self-start">
              ${!isActive ? `
              <button onclick="selectJob('${j.id}')" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap">
                Set Active
              </button>` : `
              <span class="text-xs text-emerald-400 font-medium px-4 py-2 text-center">Current job</span>`}
              <button onclick="selectJob('${j.id}'); switchTab('punchlist')" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-medium whitespace-nowrap text-slate-300">
                Punch List
              </button>
              <button onclick="selectJob('${j.id}'); switchTab('communications')" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-medium whitespace-nowrap text-slate-300">
                Comms
              </button>
            </div>
          </div>
        </div>`;
      }).join('')}
    </div>

    <!-- Add new job CTA -->
    <button onclick="openIntakeModal()" class="w-full card-bg rounded-2xl p-4 border-dashed hover:border-emerald-500/30 transition-colors flex items-center justify-center gap-2 text-sm text-slate-500 hover:text-emerald-400">
      <i class="fas fa-plus text-xs"></i> Add New Job
    </button>
  </div>`;
}


function renderDashboard() {
  const jobs = state.jobs || [];
  const job  = getJob();  // moved up — needed for job-specific sections

  // ── Job-specific activity feed filter ──
  let displayFeed = activityFeed;
  if (job) {
    displayFeed = activityFeed.filter(item =>
      item.job && item.job.toLowerCase().includes(job.homeowner.toLowerCase())
    );
  }

  // ── Empty state guard (no jobs at all) ──
  if (!jobs.length) {
    document.getElementById('main-content').innerHTML = `
      <div class="tab-in max-w-xl mx-auto mt-16 text-center">
        <div class="w-16 h-16 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
          <i class="fas fa-house-circle-check text-emerald-400 text-3xl"></i>
        </div>
        <h2 class="text-xl font-bold text-white mb-2">Welcome to AfterCloseCare</h2>
        <p class="text-slate-400 text-sm mb-3">Your post-close command center — punch lists, supplements, warranties, risk scoring, and your AI agent stack, all in one place you own.</p>
        <p class="text-[11px] text-emerald-400/90 mb-6"><i class="fas fa-shield-halved text-[10px] mr-1"></i>Done-Right 30-day implementation included with your Starter Bundle — we build it live with you and certify it at Stability 80+.</p>
        <div class="grid sm:grid-cols-3 gap-2 mb-6 text-left">
          <div class="bg-slate-800/40 rounded-xl p-3"><i class="fas fa-database text-emerald-400 text-xs mb-1.5"></i><p class="text-[11px] text-slate-300 font-medium">You own your data</p><p class="text-[10px] text-slate-500">Lives in your browser — export any time. No platform lock-in like JobNimbus or ServiceTitan.</p></div>
          <div class="bg-slate-800/40 rounded-xl p-3"><i class="fas fa-robot text-emerald-400 text-xs mb-1.5"></i><p class="text-[11px] text-slate-300 font-medium">AI agents, not just forms</p><p class="text-[10px] text-slate-500">Gauge · Shift · Anchor qualify, answer, and recover revenue — built for restoration, not generic field service.</p></div>
          <div class="bg-slate-800/40 rounded-xl p-3"><i class="fas fa-ban text-emerald-400 text-xs mb-1.5"></i><p class="text-[11px] text-slate-300 font-medium">No per-seat tax</p><p class="text-[10px] text-slate-500">One Starter setup, not $X/user/month forever. Add your whole crew without watching a meter.</p></div>
        </div>
        <div class="flex items-start gap-2.5 mb-6 max-w-lg mx-auto text-left">
          <i class="fas fa-quote-left text-emerald-400/40 text-sm mt-0.5 flex-shrink-0"></i>
          <p class="text-[11px] text-slate-400 italic">"We stopped losing supplements and punch items in email threads. The first month it caught $6,800 we'd have eaten — and the crew actually uses it on their phones." <span class="text-slate-600 not-italic">— restoration contractor, Ohio</span></p>
        </div>
        <button onclick="openIntakeModal()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-8 py-3 rounded-xl font-semibold text-sm">
          <i class="fas fa-plus text-xs mr-1.5"></i>Add Your First Job
        </button>
      </div>`;
    return;
  }

  // ── Portfolio-wide KPI aggregates (top row stays global) ──
  const totalOpen        = jobs.reduce((s,j)=>s+j.punchlist.filter(i=>!i.complete).length,0);
  const totalSupplements = jobs.reduce((s,j)=>s+(j.insurance?.supplements?.filter(p=>p.status==='Pending').length||0),0);
  const supplementAmt    = jobs.reduce((s,j)=>s+(j.insurance?.supplements?.filter(p=>p.status==='Pending').reduce((a,p)=>a+p.amount,0)||0),0);
  const avgRisk          = jobs.length ? Math.round(jobs.reduce((s,j)=>s+j.riskScore,0)/jobs.length) : 0;
  const saved            = timeSaved().toFixed(1);
  const rc               = riskColor(avgRisk);

  // ── Job-specific data for per-job sections ──
  const _today           = new Date();
  const jobPunchOpen     = job ? job.punchlist.filter(i=>!i.complete) : [];
  const jobSupplements   = job?.insurance?.supplements?.filter(p=>p.status==='Pending') || [];
  const jobSupplementAmt = jobSupplements.reduce((a,p)=>a+p.amount,0);
  const jobEscal         = job ? [
    job.riskScore >= 60,
    job.punchlist.some(i=>!i.complete && i.due && new Date(i.due+'T00:00:00') < _today),
    job.surveys.some(s=>!s.responded && s.sent && (_today - new Date(s.sent+'T00:00:00')) > 7*86400000)
  ].filter(Boolean).length : 0;
  const jobRc            = job ? riskColor(job.riskScore) : rc;

  // ── Portfolio survey stats (survey engine widget stays portfolio-wide) ──
  const _allSurveys   = jobs.flatMap(j => j.surveys);
  const _responded    = _allSurveys.filter(s => s.responded);
  const surveyRate    = _allSurveys.length ? Math.round(_responded.length / _allSurveys.length * 100) + '%' : '—';
  const _ratings      = _responded.filter(s => s.rating).map(s => s.rating);
  const avgRatingDisp = _ratings.length ? (_ratings.reduce((a,b)=>a+b,0)/_ratings.length).toFixed(1) + '★' : '—';

  // ── Portfolio escalations (kept for scanner banner context line) ──
  const escalActive = jobs.filter(j => {
    if (j.riskScore >= 60) return true;
    if (j.punchlist.some(i => !i.complete && i.due && new Date(i.due+'T00:00:00') < _today)) return true;
    if (j.surveys.some(s => !s.responded && s.sent && (_today - new Date(s.sent+'T00:00:00')) > 7*86400000)) return true;
    return false;
  });

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in space-y-5 max-w-[1200px] mx-auto">

    <!-- Scanner Banner -->
    <div class="scanner-glow rounded-2xl px-5 py-4 flex items-center justify-between gap-4 flex-wrap">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-xl bg-emerald-500/15 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-shield-alt text-emerald-400"></i>
        </div>
        <div>
          <div class="flex items-center gap-2">
            <h3 class="font-semibold text-white text-sm">ACC Proactive Daily Scanner</h3>
            <span class="text-[9px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-md">95% Automated</span>
          </div>
          <p class="text-slate-500 text-xs mt-0.5" id="scanner-ts">All systems normal · Last scan: moments ago</p>
        </div>
      </div>
      <div class="flex items-center gap-3 flex-wrap">
        <span class="text-xs text-slate-500">${totalOpen} open items across ${jobs.length} jobs</span>
        <button onclick="switchTab('scanner')" class="text-xs bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-4 py-1.5 rounded-lg font-medium flex items-center gap-1.5">
          <i class="fas fa-shield-alt text-[10px]"></i> Open Scanner
        </button>
      </div>
    </div>

    <!-- KPI Cards Row -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
      ${[
        { label:'Active Jobs',       val:jobs.length,                  sub:'Portfolio total',          icon:'fa-briefcase',          color:'text-white',       accent:'#10b981', tab:'jobs',      barPct:Math.min(100,jobs.length*20),      trend:'flat' },
        { label:'Open Punch Items',  val:totalOpen,                    sub:`Across ${jobs.length} jobs`, icon:'fa-list-check',        color:'text-amber-400',   accent:'#f59e0b', tab:'punchlist', barPct:Math.min(100,totalOpen*10),        trend:totalOpen>4?'dn':'up' },
        { label:'Pending Suppl. $',  val:'$'+supplementAmt.toLocaleString(), sub:`${totalSupplements} open`, icon:'fa-file-invoice-dollar', color:'text-amber-300', accent:'#fbbf24', tab:'insurance', barPct:Math.min(100,totalSupplements*25), trend:'up' },
        { label:'Avg Risk Score',    val:avgRisk,                      sub:rc.label,                   icon:'fa-chart-line',          color:rc.text,            accent:avgRisk<30?'#10b981':avgRisk<60?'#f59e0b':'#ef4444', tab:'scanner', barPct:avgRisk, trend:avgRisk>50?'dn':'up' },
        { label:'Hours Saved / Mo',  val:saved+'h',                    sub:'Automation wins',           icon:'fa-clock',              color:'text-emerald-400', accent:'#10b981', tab:'dashboard', barPct:Math.min(100,parseFloat(saved)*5), trend:'up' }
      ].map(k => {
        const rgb = k.accent.replace('#','').match(/.{2}/g).map(h=>parseInt(h,16)).join(',');
        const tIcon = k.trend==='up'?'fa-arrow-trend-up trend-up':k.trend==='dn'?'fa-arrow-trend-down trend-dn':'fa-minus trend-flat';
        return `
        <button onclick="switchTab('${k.tab}')" class="kpi-card card-bg rounded-2xl p-5 cursor-pointer text-left w-full group"
          style="border-color:rgba(${rgb},0.12)"
          onmouseenter="this.style.borderColor='rgba(${rgb},0.35)'"
          onmouseleave="this.style.borderColor='rgba(${rgb},0.12)'">
          <div class="flex items-start justify-between mb-2.5">
            <div class="w-7 h-7 rounded-lg flex items-center justify-center" style="background:rgba(${rgb},0.12)">
              <i class="fas ${k.icon} text-xs" style="color:${k.accent}"></i>
            </div>
            <i class="fas ${tIcon} text-[9px] mt-0.5"></i>
          </div>
          <div class="stat-n text-2xl font-bold ${k.color} leading-none">${k.val}</div>
          <div class="text-[10px] text-slate-600 mt-1 uppercase tracking-wider">${k.label}</div>
          <div class="text-[10px] text-slate-500 mt-0.5">${k.sub}</div>
          <div class="kpi-bar"><div class="kpi-bar-fill" style="width:${k.barPct}%;background:${k.accent};opacity:.65"></div></div>
        </button>`;
      }).join('')}
    </div>

    <!-- Main Grid: Punch Tracker + Activity Feed + Risk -->
    <div class="grid grid-cols-12 gap-5">

      <!-- Punch List Tracker (7 cols) -->
      <div class="col-span-12 lg:col-span-7 card-bg rounded-2xl p-5">
        <div class="flex items-center justify-between mb-4">
          <h3 class="font-semibold text-white text-sm flex items-center gap-2">
            <i class="fas fa-list-check text-amber-400 text-xs"></i> Punch List Tracker
            ${job ? `<span class="text-[9px] text-slate-500 font-normal normal-case">— ${job.homeowner}</span>` : ''}
          </h3>
          <button onclick="switchTab('punchlist')" class="text-[11px] text-emerald-400 hover:text-emerald-300 font-medium">View All →</button>
        </div>
        ${!job ? `<div class="py-8 text-center text-slate-600 text-xs">Select a job from the dropdown to view details.</div>` : `
        <table class="w-full text-xs">
          <thead>
            <tr class="border-b border-slate-800 text-slate-500 text-left">
              <th class="pb-2.5 font-medium">Category</th>
              <th class="pb-2.5 font-medium">Description</th>
              <th class="pb-2.5 font-medium hidden sm:table-cell">Assigned</th>
              <th class="pb-2.5 font-medium">Priority</th>
            </tr>
          </thead>
          <tbody>
            ${jobPunchOpen.length ? jobPunchOpen.slice(0,7).map(i=>`
              <tr class="border-b border-slate-800/40 last:border-0 hover:bg-slate-800/20 transition-colors">
                <td class="py-3"><span class="px-2 py-0.5 bg-slate-800 text-slate-400 rounded-md">${i.category.split(' ')[0]}</span></td>
                <td class="py-3 text-slate-300 truncate max-w-[160px]">${i.desc.length>34?i.desc.substring(0,34)+'…':i.desc}</td>
                <td class="py-3 text-slate-500 hidden sm:table-cell">${i.assignee}</td>
                <td class="py-3"><span class="px-2 py-0.5 rounded-md font-medium ${i.priority==='Critical'?'badge-denied':i.priority==='High'?'badge-progress':'badge-pending'}">${i.priority}</span></td>
              </tr>
            `).join('') : `<tr><td colspan="4" class="py-6 text-center"><i class="fas fa-check-circle text-emerald-400 text-2xl block mb-2"></i><span class="text-slate-600 text-xs">All punch items complete for ${job.homeowner}</span></td></tr>`}
          </tbody>
        </table>`}
      </div>

      <!-- Right Column: Risk + Survey -->
      <div class="col-span-12 lg:col-span-5 space-y-4">

        <!-- Risk Score Engine -->
        <div class="card-bg rounded-2xl p-5">
          <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-white text-sm">Risk Score Engine</h3>
            <span class="text-[10px] text-slate-500">Per active job</span>
          </div>
          <!-- Active job risk gauge (job-specific) -->
          ${job ? `
          <div class="flex flex-col items-center gap-1.5 mb-4">
            ${riskGaugeSVG(job.riskScore, 88)}
            <span class="text-xs text-white font-semibold">${job.homeowner}</span>
            <span class="text-[10px] ${jobRc.text} font-semibold uppercase tracking-wide">${jobRc.label}</span>
          </div>` : `<p class="text-center text-slate-600 text-xs py-6">Select a job from the dropdown to view risk score.</p>`}
          <!-- Portfolio average -->
          <div class="flex items-center gap-4 pt-3 border-t border-slate-800">
            <div class="flex-shrink-0">${riskGaugeSVG(avgRisk, 56)}</div>
            <div class="flex-1 min-w-0">
              <p class="text-xs font-semibold text-white">Portfolio Average</p>
              <p class="text-[10px] ${rc.text} font-medium mt-0.5">${rc.label}</p>
              <p class="text-[9px] text-slate-600 mt-1">Across ${jobs.length} active jobs</p>
            </div>
          </div>
        </div>

        <!-- Survey Engine -->
        <div class="card-bg rounded-2xl p-5">
          <h3 class="font-semibold text-white text-sm mb-3">Survey & Referral Engine</h3>
          <div class="flex items-center gap-5 mb-4">
            <div class="text-center">
              <div class="stat-n text-3xl font-bold text-emerald-400">${surveyRate}</div>
              <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Response Rate</div>
            </div>
            <div class="text-center">
              <div class="stat-n text-3xl font-bold text-white">${jobs.reduce((s,j)=>s+j.surveys.filter(sv=>sv.responded).length,0)}</div>
              <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Total Reviews</div>
            </div>
            <div class="text-center">
              <div class="stat-n text-3xl font-bold text-yellow-400">${avgRatingDisp}</div>
              <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Avg Rating</div>
            </div>
          </div>
          <button onclick="switchTab('surveys')" class="w-full bg-emerald-600 hover:bg-emerald-500 active:scale-[0.98] transition-all py-2.5 rounded-xl font-semibold text-xs">
            <i class="fas fa-paper-plane text-[10px] mr-1.5"></i>Send Review Campaign
          </button>
        </div>
      </div>
    </div>

    <!-- Activity Feed + Insurance + Escalations -->
    <div class="grid grid-cols-12 gap-5">

      <!-- Live Activity Feed -->
      <div class="col-span-12 lg:col-span-8 card-bg rounded-2xl p-5">
        <div class="flex items-center justify-between mb-4">
          <h3 class="font-semibold text-white text-sm flex items-center gap-2">
            <div class="pulse-dot"></div> Live Activity Feed
          </h3>
          <span class="text-[10px] text-slate-500">${job ? job.homeowner + ' · Auto-updating' : 'Portfolio · Auto-updating'}</span>
        </div>
        <div id="activity-feed" class="space-y-0"></div>
      </div>

      <!-- Insurance + Escalations stacked -->
      <div class="col-span-12 lg:col-span-4 space-y-4">
        <div class="card-bg rounded-2xl p-5 flex items-center gap-3.5 cursor-pointer hover:border-amber-500/20 transition-colors" onclick="switchTab('insurance')">
          <div class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center flex-shrink-0">
            <i class="fas fa-file-invoice-dollar text-amber-400"></i>
          </div>
          <div class="min-w-0">
            <h3 class="font-semibold text-white text-sm">Insurance Module</h3>
            <p class="text-amber-400 text-xs mt-0.5">${job ? `${jobSupplements.length} Pending · $${jobSupplementAmt.toLocaleString()}` : 'Select a job to view'}</p>
          </div>
          <i class="fas fa-chevron-right text-slate-600 text-xs ml-auto"></i>
        </div>
        <div class="card-bg rounded-2xl p-5 flex items-center gap-3.5 cursor-pointer hover:border-emerald-500/20 transition-colors" onclick="switchTab('escalations')">
          <div class="w-10 h-10 rounded-xl ${jobEscal > 0 ? 'bg-red-500/10' : 'bg-emerald-500/10'} flex items-center justify-center flex-shrink-0">
            <i class="fas ${jobEscal > 0 ? 'fa-triangle-exclamation text-red-400' : 'fa-check-circle text-emerald-400'}"></i>
          </div>
          <div class="min-w-0">
            <h3 class="font-semibold text-white text-sm">Escalations</h3>
            <p class="${jobEscal > 0 ? 'text-red-400' : 'text-emerald-400'} text-xs mt-0.5">${job ? (jobEscal > 0 ? jobEscal + ' active · Review needed' : '0 active · All clear') : 'Select a job to view'}</p>
          </div>
          <i class="fas fa-chevron-right text-slate-600 text-xs ml-auto"></i>
        </div>
        <!-- Quick Actions -->
        <div class="card-bg rounded-2xl p-5">
          <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Quick Actions</h3>
          <div class="space-y-2">
            ${[
              { icon:'fa-plus',               label:'New Job',         action:"openIntakeModal()",                           hint:'Opens intake wizard' },
              { icon:'fa-list-check',          label:'Add Punch Item',  action:"openPunchModal()",                            hint:'Active job' },
              { icon:'fa-file-invoice-dollar', label:'New Supplement',  action:"openSupplementModal()",                      hint:'Active job' },
              { icon:'fa-paper-plane',         label:'Send Survey',     action:"switchTab('surveys')",                       hint:'Go to Surveys tab' }
            ].map(a=>`
            <button onclick="${a.action}"
              class="w-full text-left flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-slate-800/40 hover:bg-slate-800 active:scale-[0.98] transition-all text-xs text-slate-300 font-medium group">
              <div class="w-5 h-5 rounded-lg bg-emerald-500/10 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500/20 transition-colors">
                <i class="fas ${a.icon} text-emerald-400 text-[9px]"></i>
              </div>
              <span class="flex-1">${a.label}</span>
              <i class="fas fa-arrow-right text-[9px] text-slate-700 group-hover:text-slate-500 transition-colors"></i>
            </button>`).join('')}
          </div>
        </div>
      </div>
    </div>
  </div>`;

  renderFeedItems(displayFeed);
  startScannerSim();
}

// Scanner animation
function runScannerSim() {
  const ts = document.getElementById('scanner-ts');
  if (!ts) return;
  ts.textContent = 'Scanning…';
  let steps = ['Checking punch list due dates…','Reviewing survey responses…','Validating insurance supplements…','Analyzing warranty schedules…','Cross-checking escalation triggers…'];
  let i = 0;
  const int = setInterval(()=>{
    if (i < steps.length) { ts.textContent = steps[i++]; }
    else {
      clearInterval(int);
      ts.textContent = 'All systems normal · Last scan: just now';
      toast('Scanner complete — no issues found across ' + state.jobs.length + ' jobs', 'success');
      const job = state.jobs[Math.floor(Math.random()*state.jobs.length)];
      const tmpl = ACTIVITY_TEMPLATES[2];
      activityFeed.unshift({ icon:tmpl.icon, color:tmpl.color, msg:tmpl.msg(job), time:'Just now' });
      renderFeedItems();
    }
  }, 600);
}

// ═══════════════════════════════════════════════════
//   PUNCH LIST TAB
// ═══════════════════════════════════════════════════

function renderPunchList() {
  const job = getJob();
  const open = job.punchlist.filter(i=>!i.complete).length;
  const done = job.punchlist.filter(i=>i.complete).length;

  // Build category options
  document.getElementById('p-category').innerHTML = PUNCH_CATEGORIES.map(c=>`<option value="${c}">${c}</option>`).join('');
  updateSuggestions();

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-5xl mx-auto space-y-5">

    <!-- Header bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
      <div class="flex items-center gap-3 flex-wrap">
        <div class="card-bg rounded-xl px-4 py-3 text-center min-w-[70px]">
          <div class="stat-n text-2xl font-bold text-amber-400">${open}</div>
          <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Open</div>
        </div>
        <div class="card-bg rounded-xl px-4 py-3 text-center min-w-[70px]">
          <div class="stat-n text-2xl font-bold text-emerald-400">${done}</div>
          <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Done</div>
        </div>
        <div>
          <p class="font-semibold text-white text-sm">${job.name}</p>
          <p class="text-slate-500 text-xs">${job.invoice} · ${job.tech}</p>
        </div>
      </div>
      <div class="flex items-center gap-2 flex-wrap">
        <select id="pl-filter" onchange="applyPunchFilter()" class="!text-xs !py-2.5 !px-3 !w-auto !rounded-xl mob-tap">
          <option value="all">All Items</option>
          <option value="open">Open Only</option>
          <option value="complete">Complete</option>
          ${PUNCH_CATEGORIES.map(c=>`<option value="${c}">${c}</option>`).join('')}
        </select>
        <button onclick="showAISuggestions()" class="mob-tap bg-slate-800 hover:bg-emerald-900/40 border border-slate-700 hover:border-emerald-500/30 active:scale-95 transition-all px-3 py-2.5 rounded-xl text-xs font-medium flex items-center gap-1.5 text-emerald-400">
          <i class="fas fa-wand-magic-sparkles text-[10px]"></i> <span class="hidden sm:inline">AI Suggestions</span>
        </button>
        <button onclick="printPunchList()" title="Print / Export PDF" class="mob-tap bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-3 py-2.5 rounded-xl text-xs font-medium flex items-center gap-1.5 text-slate-400 hover:text-white">
          <i class="fas fa-file-export text-[10px]"></i> <span class="hidden sm:inline">Export</span>
        </button>
        <button onclick="openPunchModal()" class="mob-tap bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center gap-1.5">
          <i class="fas fa-plus text-[10px]"></i> Add Item
        </button>
      </div>
    </div>

    <!-- Table: scroll wrapper for mobile -->
    <div class="punch-swipe-hint"><i class="fas fa-arrows-left-right text-[9px]"></i>Swipe to see priority &amp; actions</div>
    <div class="card-bg rounded-2xl overflow-hidden punch-scroll">
      <table class="w-full text-xs punch-table">
        <thead>
          <tr class="border-b border-slate-800 text-slate-500 text-left">
            <th class="px-4 py-3.5 w-10"></th>
            <th class="px-3 py-3.5 font-medium">Category</th>
            <th class="px-3 py-3.5 font-medium">Description</th>
            <th class="px-3 py-3.5 font-medium hidden sm:table-cell">Assigned</th>
            <th class="px-3 py-3.5 font-medium hidden md:table-cell">Due</th>
            <th class="px-3 py-3.5 font-medium">Priority</th>
            <th class="px-3 py-3.5"></th>
          </tr>
        </thead>
        <tbody id="punch-table-body">
          ${renderPunchRows(job, 'all')}
        </tbody>
      </table>
      ${job.punchlist.length === 0 ? `<div class="text-center py-14 text-slate-600">
        <i class="fas fa-list-check text-3xl mb-2 block"></i>
        <p class="text-sm">No punch list items yet</p>
        <button onclick="openPunchModal()" class="mt-3 text-xs text-emerald-400 hover:underline">Add first item →</button>
      </div>` : ''}
    </div>
  </div>`;
}

function applyPunchFilter() {
  const val = document.getElementById('pl-filter')?.value || 'all';
  const job = getJob();
  const el = document.getElementById('punch-table-body');
  if (el) el.innerHTML = renderPunchRows(job, val);
}

function renderPunchRows(job, filter='all') {
  let items = job.punchlist;
  if (filter === 'open') items = items.filter(i=>!i.complete);
  else if (filter === 'complete') items = items.filter(i=>i.complete);
  else if (filter !== 'all') items = items.filter(i=>i.category===filter);

  const priorityBadge = { Critical:'badge-denied', High:'badge-progress', Medium:'badge-pending', Low:'bg-slate-800 text-slate-500' };

  return items.map((i, idx) => `
    <tr class="border-b border-slate-800/40 last:border-0 hover:bg-slate-800/20 transition-colors ${i.complete?'punch-done':''}">
      <td class="px-4 py-3.5 w-10">
        <input type="checkbox" class="punch-check" ${i.complete?'checked':''} onchange="togglePunch('${i.id}')" title="${i.complete?'Reopen':'Mark complete'}">
      </td>
      <td class="px-3 py-3.5">
        <span class="px-2 py-0.5 bg-slate-800 text-slate-400 rounded-md font-medium text-[10px]">${i.category}</span>
      </td>
      <td class="px-3 py-3.5 text-slate-300 max-w-[180px]">
        <span class="punch-desc truncate block">${i.desc}</span>
        ${i.due && !i.complete && new Date(i.due+'T00:00:00') < new Date() ? '<span class="text-[9px] text-red-400 font-medium">Overdue</span>' : ''}
      </td>
      <td class="px-3 py-3.5 text-slate-500 hidden sm:table-cell">${i.assignee}</td>
      <!-- v38 Scheduling Enhancement - inline due date editor -->
      <td class="px-3 py-3.5 hidden md:table-cell">
        <input type="date"
          value="${i.due||''}"
          onchange="updatePunchDue('${i.id}', this.value)"
          class="!py-1 !px-2 !text-xs !rounded-lg !border-slate-700 !bg-slate-900"
          style="width:130px;"
          title="Edit due date"
          ${i.complete ? 'disabled' : ''}>
      </td>
      <td class="px-3 py-3.5">
        <span class="px-2 py-0.5 rounded-md font-medium text-[10px] ${priorityBadge[i.priority]||'badge-pending'}">${i.priority||'Medium'}</span>
      </td>
      <td class="px-3 py-3.5">
        <div class="flex items-center gap-1">
          <button onclick="deletePunch('${i.id}')" class="text-slate-700 hover:text-red-400 w-7 h-7 flex items-center justify-center rounded-lg hover:bg-slate-800 transition-all" title="Delete">
            <i class="fas fa-trash text-[10px]"></i>
          </button>
          <button onclick="openCallbackModal('${getJob().id}')" class="text-slate-700 hover:text-blue-400 w-7 h-7 flex items-center justify-center rounded-lg hover:bg-slate-800 transition-all" title="Schedule Callback">
            <i class="fas fa-calendar-plus text-[10px]"></i>
          </button>
        </div>
      </td>
    </tr>
  `).join('') || `<tr><td colspan="7" class="text-center py-8 text-slate-600">No items in this filter</td></tr>`;
}

function togglePunch(id) {
  const job = getJob();
  const item = job.punchlist.find(i=>i.id===id);
  if (!item) return;
  item.complete = !item.complete;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit(item.complete?'punch.completed':'punch.reopened',{jobId:job.id,itemId:item.id},{}); }catch(_){/*shadow*/}
  save();
  toast(item.complete ? `Marked complete: ${item.desc.slice(0,40)}` : `Reopened: ${item.desc.slice(0,40)}`, item.complete?'success':'warning');
  renderPunchList();
}

function deletePunch(id) {
  const job = getJob();
  const __delPi = job.punchlist.find(i=>i.id===id);
  job.punchlist = job.punchlist.filter(i=>i.id!==id);
  try{ if(window.ACC_EVENTS && __delPi) window.ACC_EVENTS.emit('punch.deleted',{jobId:job.id,itemId:__delPi.id},{category:__delPi.category||null,desc:__delPi.desc}); }catch(_){/*shadow*/}
  save();
  toast('Punch item removed','info');
  renderPunchList();
}

// v38 Scheduling Enhancement - update punch list item due date inline from table
function updatePunchDue(id, newDate) {
  const job = getJob();
  const item = job.punchlist.find(i => i.id === id);
  if (!item) return;
  const __oldDue = item.due;
  item.due = newDate || null;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('punch.due_changed',{jobId:job.id,itemId:item.id},{oldDue:__oldDue||null,newDue:item.due}); }catch(_){/*shadow*/}
  save();
  toast(newDate ? `Due date updated: ${fmtDate(newDate)}` : 'Due date cleared', 'success', 2400);
  // v38 Final Polish - flash the input green before re-rendering for immediate feedback
  const input = document.querySelector(`input[onchange*="${id}"]`);
  if (input) {
    input.classList.add('date-flash');
    setTimeout(() => renderPunchList(), 580); // let flash complete first
  } else {
    renderPunchList();
  }
  renderSidebar(currentTab); // v38 Final Polish - keep sidebar badge current
}

// ═══════════════════════════════════════════════════
//   v38: SCHEDULE LAYER
// ═══════════════════════════════════════════════════

// Collect all scheduled items across all jobs into a flat array
function getScheduleItems() {
  const today = new Date(); // v38 Final Polish - removed unused todayStr/tomorrowStr/weekStr
  const items = [];

  state.jobs.forEach(j => {
    // 1. Punch list items with due dates (open only in schedule view)
    j.punchlist.forEach(p => {
      if (!p.due) return;
      items.push({
        id:       p.id,
        jobId:    j.id,
        jobName:  j.homeowner,
        date:     p.due,
        label:    p.desc,
        sub:      `${p.category} · ${p.assignee} · ${j.id}`,
        type:     'punch',
        done:     p.complete,
        priority: p.priority
      });
    });

    // 2. Warranty check-in dates (future only)
    (j.warranty?.checkins || []).forEach((d, idx) => {
      items.push({
        id:      `wc-${j.id}-${idx}`,
        jobId:   j.id,
        jobName: j.homeowner,
        date:    d,
        label:   idx === 0 ? '6-Month Warranty Check-in' : (idx === 1 && j.warranty.months <= 12 ? '12-Month Final Warranty' : `Warranty Check-in ${idx+1}`),
        sub:     `Warranty · ${j.id} · Auto follow-up`,
        type:    'warranty',
        done:    new Date(d+'T00:00:00') < today
      });
    });

    // 3. Scheduled callbacks
    (j.callbacks || []).forEach(c => {
      items.push({
        id:      c.id,
        jobId:   j.id,
        jobName: j.homeowner,
        date:    c.date,
        label:   c.note || 'Scheduled Callback',
        sub:     `Callback · ${j.id}`,
        type:    'callback',
        done:    c.done
      });
    });
  });

  // Sort by date ascending
  items.sort((a, b) => a.date.localeCompare(b.date));
  return items;
}

// Classify an item date into a display group
function schedGroup(dateStr) {
  const today     = new Date().toISOString().split('T')[0];
  const tomorrow  = new Date(Date.now() + 86400000).toISOString().split('T')[0];
  const weekEnd   = new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0];
  if (dateStr < today)   return 'overdue';
  if (dateStr === today) return 'today';
  if (dateStr === tomorrow) return 'tomorrow';
  if (dateStr <= weekEnd) return 'week';
  return 'future';
}

function schedGroupMeta(group) {
  const map = {
    overdue:  { label:'⚠ Overdue',    cls:'text-red-400',    bg:'sched-overdue' },
    today:    { label:'Today',         cls:'text-amber-400',  bg:'sched-today' },
    tomorrow: { label:'Tomorrow',      cls:'text-yellow-300', bg:'sched-tomorrow' },
    week:     { label:'This Week',     cls:'text-blue-400',   bg:'sched-week' },
    future:   { label:'Upcoming',      cls:'text-slate-500',  bg:'sched-future' }
  };
  return map[group] || map.future;
}

function typeIcon(type) {
  if (type === 'punch')    return '<i class="fas fa-list-check text-[9px] text-amber-400"></i>';
  if (type === 'warranty') return '<i class="fas fa-shield-halved text-[9px] text-emerald-400"></i>';
  if (type === 'callback') return '<i class="fas fa-phone-volume text-[9px] text-blue-400"></i>';
  return '<i class="fas fa-circle text-[9px] text-slate-500"></i>';
}

// v38 Final Polish - human-readable relative date label for schedule items
function relativeDate(dateStr) {
  if (!dateStr) return '';
  const todayStr    = new Date().toISOString().split('T')[0];
  const tomorrowStr = new Date(Date.now() + 86400000).toISOString().split('T')[0];
  if (dateStr === todayStr)    return 'Today';
  if (dateStr === tomorrowStr) return 'Tomorrow';
  const diffMs = new Date(dateStr + 'T00:00:00') - new Date(todayStr + 'T00:00:00');
  const diffDays = Math.round(diffMs / 86400000);
  if (diffDays < 0)  return `${Math.abs(diffDays)}d overdue`;
  if (diffDays <= 6) return `in ${diffDays}d`;
  if (diffDays <= 13) return 'next week';
  return `in ${Math.round(diffDays / 7)}wk`;
}

function renderSchedule() {
  const items = getScheduleItems();
  const groups = ['overdue','today','tomorrow','week','future'];

  // Bucket items into groups
  const bucketed = {};
  groups.forEach(g => { bucketed[g] = []; });
  items.forEach(item => { bucketed[schedGroup(item.date)].push(item); });

  const overdueCount = bucketed.overdue.filter(i => !i.done).length;
  const todayCount   = bucketed.today.filter(i => !i.done).length;
  const weekCount    = ['tomorrow','week'].flatMap(g => bucketed[g]).filter(i => !i.done).length;

  let html = `
  <div class="tab-in max-w-4xl mx-auto space-y-5">

    <!-- Header row -->
    <div class="flex items-center justify-between flex-wrap gap-3">
      <div>
        <h2 class="text-base font-semibold text-white flex items-center gap-2">
          <i class="fas fa-calendar-days text-blue-400 text-sm"></i> Schedule
        </h2>
        <p class="text-xs text-slate-500 mt-0.5">Callbacks, punch list due dates &amp; warranty check-ins — all jobs</p>
      </div>
      <button onclick="openCallbackModal()" class="bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-1.5">
        <i class="fas fa-calendar-plus text-[10px]"></i> Schedule Callback
      </button>
    </div>

    <!-- KPI strip -->
    <div class="grid grid-cols-3 gap-4">
      ${[
        { val: overdueCount, label:'Overdue',    color: overdueCount > 0 ? 'text-red-400' : 'text-slate-500' },
        { val: todayCount,   label:'Due Today',  color: todayCount   > 0 ? 'text-amber-400' : 'text-slate-500' },
        { val: weekCount,    label:'This Week',  color: 'text-blue-400' }
      ].map(s => `<div class="card-bg rounded-xl p-4 text-center kpi-card">
        <div class="stat-n text-3xl font-bold ${s.color}">${s.val}</div>
        <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">${s.label}</div>
      </div>`).join('')}
    </div>

    <!-- Schedule list -->
    <div class="card-bg rounded-2xl overflow-hidden">`;

  let hasAny = false;
  groups.forEach(group => {
    const groupItems = bucketed[group];
    if (!groupItems.length) return;
    hasAny = true;
    const meta = schedGroupMeta(group);
    html += `<div class="sched-group-label ${meta.cls}">${meta.label}</div>`;
    html += `<div class="px-3 pb-2 space-y-1">`;
    groupItems.forEach(item => {
      const doneCls = item.done ? 'sched-done' : '';
      const checkHtml = item.type === 'callback'
        ? `<input type="checkbox" class="cb-check" ${item.done ? 'checked' : ''} onchange="toggleCallback('${item.jobId}','${item.id}')" title="${item.done ? 'Mark open' : 'Mark done'}">`
        : `<div style="width:14px;height:14px;flex-shrink:0">${item.done ? '<i class="fas fa-check text-emerald-400 text-[9px]"></i>' : ''}</div>`;
      const deleteHtml = item.type === 'callback'
        ? `<button onclick="deleteCallback('${item.jobId}','${item.id}')" class="text-slate-700 hover:text-red-400 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-slate-800 transition-all flex-shrink-0" title="Remove"><i class="fas fa-times text-[9px]"></i></button>`
        : '';
      const navHtml = item.type === 'punch'
        ? `<button onclick="selectJob('${item.jobId}'); switchTab('punchlist')" class="text-slate-700 hover:text-slate-400 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-slate-800 transition-all flex-shrink-0" title="Open Punch List"><i class="fas fa-arrow-right text-[9px]"></i></button>`
        : (item.type === 'warranty'
          ? `<button onclick="selectJob('${item.jobId}'); switchTab('warranty')" class="text-slate-700 hover:text-slate-400 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-slate-800 transition-all flex-shrink-0" title="Open Warranty"><i class="fas fa-arrow-right text-[9px]"></i></button>`
          : '');
      html += `
        <div class="sched-item ${meta.bg} ${doneCls}">
          ${checkHtml}
          <div class="${meta.bg} sched-dot"></div>
          <div class="flex-1 min-w-0">
            <p class="text-xs text-slate-200 sched-desc truncate">${item.label}</p>
            <p class="text-[10px] text-slate-500 mt-0.5 truncate">${item.sub} · ${item.jobName}</p>
          </div>
          <!-- v38 Final Polish - relative date label beside the date badge -->
          <span class="text-[10px] text-slate-600 hidden sm:inline flex-shrink-0">${relativeDate(item.date)}</span>
          <span class="sched-date-badge ${meta.bg}">${fmtDate(item.date)}</span>
          <div class="flex items-center gap-0.5">${typeIcon(item.type)} ${navHtml} ${deleteHtml}</div>
        </div>`;
    });
    html += `</div>`;
  });

  if (!hasAny) {
    html += `<div class="text-center py-16 text-slate-600">
      <i class="fas fa-calendar-check text-3xl mb-3 block text-slate-700"></i>
      <p class="text-sm font-medium text-slate-500">No scheduled items yet</p>
      <p class="text-xs text-slate-600 mt-1">Add due dates to punch list items or schedule a callback above</p>
    </div>`;
  }

  html += `
    </div>

    <!-- Legend -->
    <div class="flex flex-wrap items-center gap-4 px-1">
      ${[
        { icon:'fa-list-check', color:'text-amber-400', label:'Punch List Item' },
        { icon:'fa-shield-halved', color:'text-emerald-400', label:'Warranty Check-in' },
        { icon:'fa-phone-volume', color:'text-blue-400', label:'Scheduled Callback' }
      ].map(l => `<span class="flex items-center gap-1.5 text-[10px] text-slate-500">
        <i class="fas ${l.icon} ${l.color} text-[9px]"></i>${l.label}
      </span>`).join('')}
    </div>
  </div>`;

  document.getElementById('main-content').innerHTML = html;
}

// ── v38: Callback Modal functions ──

function openCallbackModal(jobId) {
  // Populate job selector
  const sel = document.getElementById('cb-job');
  sel.innerHTML = state.jobs.map(j =>
    `<option value="${j.id}" ${j.id === (jobId || state.activeJobId) ? 'selected' : ''}>${j.id} · ${j.homeowner}</option>`
  ).join('');
  // Default date = tomorrow
  const tomorrow = new Date(Date.now() + 86400000).toISOString().split('T')[0];
  document.getElementById('cb-date').value = tomorrow;
  document.getElementById('cb-note').value = '';
  document.getElementById('callback-modal').classList.remove('hidden');
  setTimeout(() => document.getElementById('cb-note').focus(), 80);
}

function closeCallbackModal() {
  document.getElementById('callback-modal').classList.add('hidden');
}

function addCallback() {
  const jobId = document.getElementById('cb-job').value;
  const date  = document.getElementById('cb-date').value;
  const note  = document.getElementById('cb-note').value.trim();
  if (!date) { toast('Please select a date','warning'); return; }
  const job = state.jobs.find(j => j.id === jobId);
  if (!job) return;
  if (!job.callbacks) job.callbacks = [];
  job.callbacks.push({
    id:   'CB-' + Date.now(),
    date,
    note: note || 'Scheduled Callback',
    done: false
  });
  try{ if(window.ACC_EVENTS){ const __cb=job.callbacks[job.callbacks.length-1]; window.ACC_EVENTS.emit('callback.added',{jobId:job.id,itemId:__cb.id},{date:__cb.date,reason:__cb.note}); } }catch(_){/*shadow*/}
  save();
  closeCallbackModal();
  toast(`Callback scheduled for ${fmtDate(date)} · ${job.homeowner}`, 'success');
  renderCurrentTab(); // re-render whatever tab is active (schedule or punchlist)
}

function toggleCallback(jobId, cbId) {
  const job = state.jobs.find(j => j.id === jobId);
  if (!job) return;
  const cb = (job.callbacks || []).find(c => c.id === cbId);
  if (!cb) return;
  cb.done = !cb.done;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('callback.completed',{jobId:job.id,itemId:cb.id},{done:cb.done}); }catch(_){/*shadow*/}
  save();
  renderSchedule();
  renderSidebar(currentTab); // v38 Final Polish - keep sidebar badge in sync
}

function deleteCallback(jobId, cbId) {
  const job = state.jobs.find(j => j.id === jobId);
  if (!job) return;
  const __delCb = (job.callbacks || []).find(c => c.id === cbId);
  job.callbacks = (job.callbacks || []).filter(c => c.id !== cbId);
  try{ if(window.ACC_EVENTS && __delCb) window.ACC_EVENTS.emit('callback.deleted',{jobId:job.id,itemId:__delCb.id},{reason:__delCb.note}); }catch(_){/*shadow*/}
  save();
  toast('Callback removed','info');
  renderSchedule();
  renderSidebar(currentTab); // v38 Final Polish - keep sidebar badge in sync
}

function openPunchModal() {
  document.getElementById('p-category').innerHTML = PUNCH_CATEGORIES.map(c=>`<option value="${c}">${c}</option>`).join('');
  document.getElementById('p-due').value = new Date(Date.now()+3*86400000).toISOString().split('T')[0];
  document.getElementById('punch-modal').classList.remove('hidden');
  updateSuggestions();
}
function closePunchModal() { document.getElementById('punch-modal').classList.add('hidden'); }

function updateSuggestions() {
  const cat = document.getElementById('p-category')?.value;
  const list = SUGGESTIONS[cat] || [];
  const el = document.getElementById('p-suggestions');
  if (el) el.innerHTML = list.map(s=>
    `<button type="button" onclick="document.getElementById('p-desc').value='${s.replace(/'/g,"\\'")}'"
       class="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white text-[10px] rounded-lg transition-colors">${s}</button>`
  ).join('');
}

function addPunchItem() {
  const job = getJob();
  const desc = document.getElementById('p-desc').value.trim();
  if (!desc) { document.getElementById('p-desc').focus(); toast('Please enter a description','warning'); return; }
  job.punchlist.push({
    id: 'PL-'+Date.now(),
    category: document.getElementById('p-category').value,
    priority: document.getElementById('p-priority').value,
    desc,
    assignee: document.getElementById('p-assignee').value,
    due: document.getElementById('p-due').value,
    complete: false
  });
  try{ if(window.ACC_EVENTS){ const __pi=job.punchlist[job.punchlist.length-1]; window.ACC_EVENTS.emit('punch.added',{jobId:job.id,itemId:__pi.id},{category:__pi.category||null,desc:__pi.desc,assignee:__pi.assignee,due:__pi.due||null,priority:__pi.priority,suggested:false}); } }catch(_){/*shadow*/}
  save();
  document.getElementById('p-desc').value = '';
  closePunchModal();
  toast('Punch item added to '+job.homeowner, 'success');
  renderCurrentTab();
}

// ═══════════════════════════════════════════════════
//   WARRANTY TAB
// ═══════════════════════════════════════════════════

function renderWarranty() {
  const job = getJob();
  const w = job.warranty;
  const today = new Date();
  const closeDate = new Date(job.date+'T00:00:00');
  const expiryDate = new Date(closeDate); expiryDate.setMonth(expiryDate.getMonth()+w.months);
  const daysLeft = Math.max(0, Math.round((expiryDate-today)/86400000));
  const pct = Math.max(0, Math.min(100, Math.round((1-(daysLeft/(w.months*30)))*100)));

  // Build milestone rows as plain function (avoids nested template literals)
  function milestoneRow(days, label, desc) {
    const mDate = new Date(closeDate.getTime());
    mDate.setDate(mDate.getDate() + days);
    const past  = mDate < today;
    const soon  = !past && (mDate - today) < 14 * 86400000;
    const dotCls = past ? 'step-done' : soon ? 'step-active' : 'step-pending';
    const iconHtml = past
      ? '<i class="fas fa-check text-[9px]"></i>'
      : '<i class="fas fa-clock text-[9px]"></i>';
    const badgeCls = past ? 'badge-complete' : soon ? 'badge-progress' : 'badge-review';
    const badgeTxt = past ? 'Done' : soon ? 'Coming Soon' : 'Scheduled';
    return (
      '<div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-4 py-3.5">' +
        '<div class="flex items-center gap-3">' +
          '<div class="step-dot ' + dotCls + '">' + iconHtml + '</div>' +
          '<div>' +
            '<p class="text-xs font-semibold text-white">' + label + '</p>' +
            '<p class="text-[10px] text-slate-500 mt-0.5">' + fmtDate(mDate.toISOString().split('T')[0]) + ' · ' + desc + '</p>' +
          '</div>' +
        '</div>' +
        '<span class="' + badgeCls + ' px-3 py-1 rounded-lg text-[10px] font-medium">' + badgeTxt + '</span>' +
      '</div>'
    );
  }

  function checkinRow(d, i) {
    const ci = new Date(d+'T00:00:00');
    const isPast = ci < today;
    const lbl = w.months <= 12
      ? (i === 0 ? '6-Month Warranty Check-in' : '12-Month Final Warranty')
      : ('Check-in ' + (i+1));
    const dotCls  = isPast ? 'step-done' : 'step-active';
    const iconHtml = isPast
      ? '<i class="fas fa-check text-[9px]"></i>'
      : (i+1).toString();
    const badgeCls = isPast ? 'badge-complete' : 'badge-review';
    const badgeTxt = isPast ? 'Completed' : 'Scheduled';
    return (
      '<div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-4 py-3.5">' +
        '<div class="flex items-center gap-3">' +
          '<div class="step-dot ' + dotCls + '">' + iconHtml + '</div>' +
          '<div>' +
            '<p class="text-xs font-medium text-slate-200">' + lbl + '</p>' +
            '<p class="text-[11px] text-slate-500 mt-0.5">' + fmtDate(d) + ' · Auto email + phone follow-up scheduled</p>' +
          '</div>' +
        '</div>' +
        '<span class="' + badgeCls + ' px-3 py-1 rounded-lg text-[10px] font-medium">' + badgeTxt + '</span>' +
      '</div>'
    );
  }

  const milestoneHtml = [
    milestoneRow(30,  '30-Day Check-in',   'Touch-base call + verify punch list resolved'),
    milestoneRow(90,  '90-Day Follow-up',  'Confirm flooring settlement, tile grout, cabinetry'),
    milestoneRow(180, '6-Month Review',    'Warranty inspection + referral ask')
  ].join('');

  const checkinHtml = w.checkins.map((d,i) => checkinRow(d,i)).join('');

  const coverageItems = [
    ['Workmanship','12 months full coverage'],
    ['Materials','Per manufacturer warranty'],
    ['Flooring','12 months for install defects'],
    ['Cabinetry','12 months for hardware/install'],
    ['Tile & Grout','12 months cracking/lippage'],
    ['Plumbing','12 months labor warranty'],
    ['Paint & Finish','90 days touch-up coverage'],
    ['Electrical','12 months per code']
  ].map(([k,v]) =>
    '<div class="flex items-start gap-2.5 bg-slate-800/40 rounded-xl p-3.5">' +
      '<i class="fas fa-check text-emerald-400 text-[10px] mt-0.5 flex-shrink-0"></i>' +
      '<div>' +
        '<p class="text-xs font-medium text-slate-300">' + k + '</p>' +
        '<p class="text-[10px] text-slate-500 mt-0.5">' + v + '</p>' +
      '</div>' +
    '</div>'
  ).join('');

  const kpiHtml = [
    { val: w.months+'mo', label:'Warranty Period',      color:'text-emerald-400' },
    { val: w.checkins.length, label:'Scheduled Check-ins', color:'text-white' },
    { val: daysLeft+'d',  label:'Days Remaining',       color: daysLeft<90 ? 'text-amber-400' : 'text-white' }
  ].map(s =>
    '<div class="card-bg rounded-xl p-4 text-center">' +
      '<div class="stat-n text-3xl font-bold ' + s.color + '">' + s.val + '</div>' +
      '<div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">' + s.label + '</div>' +
    '</div>'
  ).join('');

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-4xl mx-auto space-y-5">

    <div class="grid grid-cols-3 gap-4">${kpiHtml}</div>

    <div class="card-bg rounded-2xl p-6">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-semibold text-white text-sm flex items-center gap-2">
          <i class="fas fa-shield-halved text-emerald-400 text-xs"></i> ${job.name}
        </h3>
        <span class="text-xs text-slate-500">${pct}% elapsed</span>
      </div>
      <div class="w-full h-2 bg-slate-800 rounded-full overflow-hidden mb-5">
        <div class="h-full bg-emerald-500 rounded-full transition-all" style="width:${pct}%"></div>
      </div>

      <h4 class="text-[10px] uppercase tracking-widest text-slate-600 font-medium mb-3">Post-Close Milestones</h4>
      <div class="space-y-2.5 mb-5">${milestoneHtml}</div>

      <h4 class="text-[10px] uppercase tracking-widest text-slate-600 font-medium mb-3 mt-4">Formal Warranty Check-ins</h4>
      <div class="space-y-2.5">${checkinHtml}</div>
    </div>

    <div class="card-bg rounded-2xl p-6">
      <h3 class="font-semibold text-white text-sm mb-4">Coverage Details</h3>
      <div class="grid grid-cols-2 gap-3">${coverageItems}</div>
    </div>
  </div>`;
}

// ═══════════════════════════════════════════════════
//   COMMUNICATIONS TAB
// ═══════════════════════════════════════════════════

function renderCommunications() {
  const job = getJob();

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-4xl mx-auto space-y-5">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="font-semibold text-white text-sm">${job.name}</h3>
        <p class="text-xs text-slate-500 mt-0.5">${job.email} · ${job.phone||'No phone'}</p>
      </div>
      <div class="flex items-center gap-2">
        <button onclick="sendQuickMsg('sms')" class="bg-slate-800 hover:bg-slate-700 px-3.5 py-2 rounded-xl text-xs font-medium flex items-center gap-1.5">
          <i class="fas fa-comment-sms text-emerald-400 text-[10px]"></i> Send SMS
        </button>
        <button onclick="sendQuickMsg('email')" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-3.5 py-2 rounded-xl text-xs font-semibold flex items-center gap-1.5">
          <i class="fas fa-envelope text-[10px]"></i> Send Email
        </button>
      </div>
    </div>

    <!-- Drip Sequence -->
    <div class="card-bg rounded-2xl p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold text-white text-sm">Automated Drip Sequence</h3>
        <span class="badge-complete px-3 py-1 rounded-lg text-[10px] font-medium">Active</span>
      </div>
      <div class="space-y-2.5">
        ${[
          { day:'Day 0', label:'Closing Confirmation Email', type:'email', done:true },
          { day:'Day 1', label:'Survey SMS + Review Request', type:'sms', done:true },
          { day:'Day 7', label:'7-Day Follow-up Email', type:'email', done:false },
          { day:'Day 30', label:'30-Day Check-in SMS', type:'sms', done:false },
          { day:'Day 180', label:'6-Month Warranty Check-in', type:'email', done:false },
          { day:'Day 365', label:'12-Month Warranty Final + Referral Ask', type:'email', done:false }
        ].map(d=>`
          <div class="drip-row flex items-center gap-3 bg-slate-800/30 rounded-xl px-4 py-3 relative">
            <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${d.done?'bg-emerald-500/20':'bg-slate-800'}">
              <i class="fas ${d.done?'fa-check':'fa-clock'} ${d.done?'text-emerald-400':'text-slate-600'} text-[9px]"></i>
            </div>
            <div class="flex-1 min-w-0">
              <span class="text-[9px] text-slate-600 uppercase tracking-wider font-medium">${d.day}</span>
              <p class="text-xs text-slate-300 font-medium">${d.label}</p>
            </div>
            <span class="text-[9px] ${d.type==='email'?'text-blue-400':'text-emerald-400'} flex-shrink-0">
              <i class="fas ${d.type==='email'?'fa-envelope':'fa-comment-sms'} mr-1"></i>${d.type}
            </span>
            <span class="${d.done?'badge-complete':'bg-slate-800 text-slate-500'} px-2 py-0.5 rounded-md text-[9px] font-medium">${d.done?'Sent':'Queued'}</span>
          </div>
        `).join('')}
      </div>
    </div>

    <!-- Log -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4">Communication Log</h3>
      <div class="space-y-0">
        ${job.communications.map(c=>`
          <div class="flex items-start gap-3 py-3 border-b border-slate-800/50 last:border-0">
            <div class="w-7 h-7 rounded-lg bg-slate-800 flex items-center justify-center flex-shrink-0 mt-0.5">
              <i class="fas ${c.type==='email'?'fa-envelope':c.type==='sms'?'fa-comment-sms':'fa-phone'} text-blue-400 text-[10px]"></i>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-xs text-slate-300">${c.msg}</p>
              <p class="text-[10px] text-slate-600 mt-0.5">${c.date} · ${c.type.toUpperCase()}</p>
            </div>
          </div>
        `).join('')}
      </div>
    </div>
  </div>`;
}

function sendQuickMsg(type) {
  const job = getJob();
  const msg = prompt(`${type.toUpperCase()} message to ${job.homeowner}:`);
  if (!msg) return;
  job.communications.push({ date: new Date().toLocaleDateString(), type, msg });
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('comm.logged',{jobId:job.id},{type:type,msg:msg}); }catch(_){/*shadow*/}
  save();
  toast(`${type.toUpperCase()} sent to ${job.homeowner}`, 'success');
  renderCommunications();
}

// ═══════════════════════════════════════════════════
//   SURVEYS TAB
// ═══════════════════════════════════════════════════

function renderSurveys() {
  const job = getJob();
  const responded = job.surveys.filter(s=>s.responded);
  const avgRating = responded.length ? (responded.reduce((s,r)=>s+r.rating,0)/responded.length).toFixed(1) : 'N/A';

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-4xl mx-auto space-y-5">

    <!-- Breadcrumb back button -->
    <button onclick="switchTab('dashboard')" class="flex items-center gap-1.5 text-xs text-slate-500 hover:text-emerald-400 transition-colors group -mb-1">
      <i class="fas fa-arrow-left text-[10px] group-hover:-translate-x-0.5 transition-transform"></i>
      Back to Dashboard
    </button>

    <!-- Stats -->
    <div class="grid grid-cols-3 gap-4">
      ${[
        { val: job.surveys.length, label:'Surveys Sent', color:'text-white' },
        { val: responded.length, label:'Responses', color:'text-emerald-400' },
        { val: avgRating+(avgRating!=='N/A'?'★':''), label:'Avg Rating', color:'text-yellow-400' }
      ].map(s=>`<div class="card-bg rounded-xl p-4 text-center">
        <div class="stat-n text-3xl font-bold ${s.color}">${s.val}</div>
        <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">${s.label}</div>
      </div>`).join('')}
    </div>

    <!-- Send Campaign -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4">Send Review Request</h3>
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Platform</label>
          <select id="s-platform">
            <option>Google Review</option><option>HomeAdvisor</option><option>Houzz</option><option>Yelp</option><option>Facebook</option>
          </select>
        </div>
        <div>
          <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Channel</label>
          <select id="s-channel"><option>SMS</option><option>Email</option><option>Both</option></select>
        </div>
      </div>
      <div class="bg-slate-800/40 rounded-xl p-4 mb-4">
        <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-2">Preview Message</p>
        <p class="text-xs text-slate-300">Hi ${job.homeowner.split(' ')[0]}! Thank you for trusting us with your ${job.type}. We'd love a quick review — it helps our small business enormously. [Review Link] — ${state.settings.companyName}</p>
      </div>
      <button onclick="sendSurvey()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-[0.98] transition-all px-6 py-2.5 rounded-xl font-semibold text-sm">
        <i class="fas fa-paper-plane text-xs mr-1.5"></i>Send Now
      </button>
    </div>

    <!-- Review history -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4">Review History</h3>
      <div class="space-y-3">
        ${job.surveys.map(s=>`
          <div class="bg-slate-800/40 rounded-xl p-4">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center gap-1">
                ${Array.from({length:5}).map((_,i)=>`<i class="fas fa-star text-${i<(s.rating||0)?'yellow':'slate'}-${i<(s.rating||0)?'400':'700'} text-xs"></i>`).join('')}
              </div>
              <span class="${s.responded?'badge-complete':'badge-pending'} px-2.5 py-0.5 rounded-lg text-[9px] font-medium">${s.responded?'Responded':'Awaiting'}</span>
            </div>
            ${s.review?`<p class="text-xs text-slate-300 italic">"${s.review}"</p>`:'<p class="text-xs text-slate-600">No response yet</p>'}
            <p class="text-[10px] text-slate-600 mt-1.5">Sent: ${s.sent}</p>
          </div>
        `).join('') || '<p class="text-slate-600 text-xs text-center py-4">No surveys sent yet</p>'}
      </div>
    </div>
  </div>`;
}

function sendSurvey() {
  const job = getJob();
  job.surveys.push({ sent: new Date().toISOString().split('T')[0], responded: false, rating: null, review: null });
  job.communications.push({ date: new Date().toLocaleDateString(), type: 'sms', msg: `Survey/review request sent to ${job.homeowner}.` });
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('survey.sent',{jobId:job.id},{channel:'sms',platform:(state.settings&&state.settings.reviewPlatform)||null}); }catch(_){/*shadow*/}
  save();
  toast('Survey sent to '+job.homeowner, 'success');
  renderSurveys();
}

// ═══════════════════════════════════════════════════
//   INSURANCE TAB
// ═══════════════════════════════════════════════════

function renderInsurance() {
  const job = getJob();
  const ins = job.insurance;

  if (!ins) {
    document.getElementById('main-content').innerHTML = `
    <div class="tab-in max-w-4xl mx-auto">
      <div class="card-bg rounded-2xl p-12 text-center">
        <div class="w-14 h-14 bg-slate-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-file-invoice-dollar text-slate-500 text-2xl"></i>
        </div>
        <h3 class="font-semibold text-white mb-2">No Insurance Claim on This Job</h3>
        <p class="text-slate-500 text-sm mb-6">This job (${job.name}) is not linked to an insurance claim.</p>
        <button onclick="initInsurance()" class="bg-emerald-600 hover:bg-emerald-500 px-6 py-2.5 rounded-xl font-semibold text-sm">+ Link Insurance Claim</button>
      </div>
    </div>`;
    return;
  }

  const totalPending = ins.supplements.filter(s=>s.status==='Pending').reduce((a,s)=>a+s.amount,0);
  const totalSubmitted = ins.supplements.filter(s=>s.status==='Submitted').reduce((a,s)=>a+s.amount,0);
  const totalApproved = ins.supplements.filter(s=>s.status==='Approved').reduce((a,s)=>a+s.amount,0);

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-5xl mx-auto space-y-5">

    <!-- KPIs -->
    <div class="grid grid-cols-4 gap-4">
      ${[
        { label:'Initial Payout', val:ins.initialPayout, color:'text-white' },
        { label:'Pending Supplements', val:'$'+totalPending.toLocaleString(), color:'text-amber-400' },
        { label:'Submitted', val:'$'+totalSubmitted.toLocaleString(), color:'text-blue-400' },
        { label:'Approved', val:'$'+totalApproved.toLocaleString(), color:'text-emerald-400' }
      ].map(k=>`<div class="card-bg rounded-xl p-4 text-center kpi-card">
        <div class="stat-n text-2xl font-bold ${k.color}">${k.val}</div>
        <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-1">${k.label}</div>
      </div>`).join('')}
    </div>

    <!-- Supplements Table -->
    <div class="card-bg rounded-2xl p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold text-white text-sm">Supplement Pipeline</h3>
        <div class="flex items-center gap-2">
          <button onclick="printSupplementReport()" title="Print / Export PDF" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-3 py-2 rounded-xl text-xs font-medium flex items-center gap-1.5 text-slate-400 hover:text-white">
            <i class="fas fa-file-export text-[10px]"></i> <span class="hidden sm:inline">Export</span>
          </button>
          <button onclick="openSupplementModal()" class="bg-amber-600 hover:bg-amber-500 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-1.5">
            <i class="fas fa-plus text-[10px]"></i> Add Supplement
          </button>
        </div>
      </div>
      <table class="w-full text-xs">
        <thead>
          <tr class="border-b border-slate-800 text-slate-500 text-left">
            <th class="pb-2.5 font-medium">Description</th>
            <th class="pb-2.5 font-medium">Category</th>
            <th class="pb-2.5 font-medium">Amount</th>
            <th class="pb-2.5 font-medium">Status</th>
            <th class="pb-2.5 font-medium"></th>
          </tr>
        </thead>
        <tbody>
          ${ins.supplements.map(s=>{
            const statusBadge = {Pending:'badge-pending',Submitted:'badge-submitted',Approved:'badge-approved',Denied:'badge-denied'}[s.status]||'badge-pending';
            return `<tr class="border-b border-slate-800/40 last:border-0 hover:bg-slate-800/20 transition-colors">
              <td class="py-3.5 text-slate-300 max-w-[200px]">
                <p class="truncate">${s.desc}</p>
                ${s.notes?`<p class="text-slate-600 text-[9px] truncate">${s.notes}</p>`:''}
              </td>
              <td class="py-3.5 text-slate-500">${s.category}</td>
              <td class="py-3.5 stat-n font-semibold text-white">$${s.amount.toLocaleString()}</td>
              <td class="py-3.5"><span class="px-2.5 py-0.5 rounded-md text-[10px] font-medium ${statusBadge}">${s.status}</span></td>
              <td class="py-3.5">
                <select onchange="updateSupplementStatus('${s.id}', this.value)" class="!text-[10px] !py-1 !px-2 !w-auto !rounded-lg">
                  ${['Pending','Submitted','Approved','Denied'].map(st=>`<option ${s.status===st?'selected':''}>${st}</option>`).join('')}
                </select>
              </td>
            </tr>`;
          }).join('')}
        </tbody>
      </table>
    </div>

    <!-- Carrier Info -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4">Insurance Carrier Info</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        ${[
          ['Carrier', ins.carrier],
          ['Adjuster', ins.adjuster],
          ['Adjuster Phone', ins.adjusterPhone],
          ['Claim #', ins.claimNum],
          ['Claim Date', fmtDate(ins.claimDate)],
          ['Initial Payout', ins.initialPayout]
        ].map(([k,v])=>`<div class="bg-slate-800/40 rounded-xl p-3.5">
          <p class="text-[9px] text-slate-600 uppercase tracking-wider mb-1">${k}</p>
          <p class="text-xs text-slate-200 font-medium">${v}</p>
        </div>`).join('')}
      </div>
    </div>
  </div>`;
}

function updateSupplementStatus(id, status) {
  const job = getJob();
  if (!job.insurance) return;
  const sup = job.insurance.supplements.find(s=>s.id===id);
  if (sup) { const __from = sup.status; sup.status = status; try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('supplement.status_changed',{jobId:job.id,itemId:sup.id},{from:__from,to:status,amount:sup.amount,carrier:(job.insurance.carrier||'')}); }catch(_){/*shadow*/} save(); toast(`Supplement ${id} → ${status}`, status==='Approved'?'success':status==='Denied'?'error':'info'); renderInsurance(); }
}

function initInsurance() {
  const job = getJob();
  job.insurance = {
    carrier:'', adjuster:'', adjusterPhone:'', claimNum:'', claimDate:'', initialPayout:'',
    supplements: []
  };
  save();
  toast('Insurance claim linked — fill in carrier details', 'info');
  switchTab('insurance'); // keep sidebar + header in sync
}

function openSupplementModal() { document.getElementById('supplement-modal').classList.remove('hidden'); }
function closeSupplementModal() { document.getElementById('supplement-modal').classList.add('hidden'); }

function submitSupplement() {
  const job = getJob();
  if (!job.insurance) { job.insurance = { carrier:'TBD', adjuster:'TBD', adjusterPhone:'', claimNum:'TBD', claimDate:'', initialPayout:'TBD', supplements:[] }; }
  const desc = document.getElementById('s-desc').value.trim();
  const amount = parseFloat(document.getElementById('s-amount').value)||0;
  if (!desc) { toast('Please enter a description','warning'); return; }
  job.insurance.supplements.push({
    id:'SUP-'+Date.now(), desc, amount, category:document.getElementById('s-cat').value,
    status:'Pending', date:new Date().toISOString().split('T')[0], notes:document.getElementById('s-notes').value
  });
  try{ if(window.ACC_EVENTS){ const __sp=job.insurance.supplements[job.insurance.supplements.length-1]; window.ACC_EVENTS.emit('supplement.added',{jobId:job.id,itemId:__sp.id},{amount:__sp.amount,category:__sp.category,desc:__sp.desc,carrier:(job.insurance.carrier||'')}); } }catch(_){/*shadow*/}
  save();
  closeSupplementModal();
  toast('Supplement added — $'+amount.toLocaleString(),'success');
  document.getElementById('s-desc').value = '';
  document.getElementById('s-amount').value = '';
  document.getElementById('s-notes').value = '';
  switchTab('insurance'); // keep sidebar + header in sync
}

// ═══════════════════════════════════════════════════
//   ESCALATIONS TAB
// ═══════════════════════════════════════════════════


// ═══════════════════════════════════════════════════
//   AI SCANNER TAB (v36)
// ═══════════════════════════════════════════════════

let scanState = { running:false, done:false, results:[], lastRun:null };

function renderScanner() {
  const job = getJob();
  const allJobs = state.jobs;
  const totalOpen = allJobs.reduce((s,j)=>s+j.punchlist.filter(i=>!i.complete).length,0);
  const pendingSupps = allJobs.reduce((s,j)=>s+(j.insurance?.supplements?.filter(x=>x.status==='Pending').length||0),0);
  const highRisk = allJobs.filter(j=>j.riskScore>=60).length;

  const lastRunStr = scanState.lastRun
    ? 'Last scan: ' + new Date(scanState.lastRun).toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'})
    : 'Not yet scanned this session';

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-5xl mx-auto space-y-5">

    <!-- Hero scan card -->
    <div class="scanner-glow rounded-2xl overflow-hidden">
      <div class="px-8 py-10 text-center relative">
        <!-- Decorative rings behind button -->
        <div class="relative inline-flex items-center justify-center mb-8">
          <div class="w-28 h-28 rounded-full bg-emerald-500/8 flex items-center justify-center relative">
            <div class="scan-ring absolute inset-0 rounded-full border-2 border-emerald-500/40" id="sr1"></div>
            <div class="scan-ring scan-ring2 absolute inset-0 rounded-full border-2 border-emerald-500/25" id="sr2"></div>
            <div class="scan-ring scan-ring3 absolute inset-0 rounded-full border-2 border-emerald-500/15" id="sr3"></div>
            <div class="w-16 h-16 rounded-full bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center z-10">
              <i class="fas fa-shield-alt text-emerald-400 text-2xl" id="scan-icon"></i>
            </div>
          </div>
        </div>

        <h2 class="text-xl font-bold text-white mb-2">ACC Proactive AI Scanner</h2>
        <p class="text-slate-400 text-sm mb-2 max-w-md mx-auto">Analyzes all active jobs for punch list overdue dates, supplement gaps, survey response rates, warranty deadlines, and insurance escalation triggers.</p>
        <p class="text-[11px] text-slate-600 mb-8" id="scan-last-run">${lastRunStr}</p>

        <!-- Big scan button -->
        <button id="scan-main-btn" onclick="launchScan()" class="scan-btn-big text-white font-bold text-base px-10 py-4 rounded-2xl inline-flex items-center gap-3">
          <i class="fas fa-rotate text-sm" id="scan-btn-icon"></i>
          <span id="scan-btn-label">Run Full Scan Now</span>
        </button>

        <!-- Progress bar (hidden until scan) -->
        <div id="scan-progress-wrap" class="hidden mt-6 max-w-sm mx-auto">
          <div class="flex justify-between text-[10px] text-slate-500 mb-1.5">
            <span id="scan-step-label">Initializing…</span>
            <span id="scan-pct">0%</span>
          </div>
          <div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
            <div id="scan-progress-bar" class="h-full bg-emerald-500 rounded-full" style="width:0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Pre-scan summary cards -->
    <div class="grid grid-cols-3 gap-4" id="scan-summary-cards">
      ${[
        { val:totalOpen,    label:'Open Punch Items',   color:'text-amber-400',  icon:'fa-list-check',             bg:'bg-amber-500/10' },
        { val:pendingSupps, label:'Pending Supplements',color:'text-amber-300',  icon:'fa-file-invoice-dollar',    bg:'bg-amber-500/10' },
        { val:highRisk,     label:'High-Risk Jobs',     color:highRisk>0?'text-red-400':'text-emerald-400', icon:'fa-triangle-exclamation', bg:highRisk>0?'bg-red-500/10':'bg-emerald-500/10' }
      ].map(c=>`
        <div class="card-bg rounded-2xl p-5 text-center">
          <div class="w-8 h-8 ${c.bg} rounded-xl flex items-center justify-center mx-auto mb-3">
            <i class="fas ${c.icon} ${c.color} text-sm"></i>
          </div>
          <div class="stat-n text-3xl font-bold ${c.color}">${c.val}</div>
          <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">${c.label}</div>
        </div>`).join('')}
    </div>

    <!-- Scan Results (populated after scan) -->
    <div id="scan-results-wrap" class="${scanState.done?'':'hidden'} space-y-3">
      <div class="flex items-center justify-between">
        <h3 class="font-semibold text-white text-sm flex items-center gap-2">
          <i class="fas fa-clipboard-list text-emerald-400 text-xs"></i>
          Scan Results
          <span class="text-[9px] text-slate-500 font-normal" id="scan-results-time"></span>
        </h3>
        <button onclick="exportScanReport()" class="text-[11px] text-slate-500 hover:text-emerald-400 transition-colors flex items-center gap-1">
          <i class="fas fa-download text-[9px]"></i> Export Report
        </button>
      </div>
      <div id="scan-results-list" class="space-y-2"></div>
    </div>

    <!-- Scan History -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4 flex items-center gap-2">
        <i class="fas fa-history text-slate-500 text-xs"></i> What the Scanner Checks
      </h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
        ${[
          ['Punch List Due Dates','Flags overdue items and assigns urgency level'],
          ['Survey Response Rate','Alerts if client has not responded in 7+ days'],
          ['Supplement Pipeline','Identifies stalled or denied supplement requests'],
          ['Warranty Schedules','Checks for missed or upcoming check-in dates'],
          ['Insurance Escalations','Reviews claim status and adjuster contact lag'],
          ['Risk Score Drift','Monitors if job risk has increased since last scan'],
          ['Communication Gaps','Flags jobs with no activity in 5+ days'],
          ['Overdue Callbacks','Surfaces promised follow-ups that are past due']
        ].map(([k,v])=>`
          <div class="flex items-start gap-2.5 bg-slate-800/30 rounded-xl px-3.5 py-3">
            <i class="fas fa-check text-emerald-400 text-[9px] mt-0.5 flex-shrink-0"></i>
            <div>
              <p class="text-xs font-medium text-slate-300">${k}</p>
              <p class="text-[10px] text-slate-600 mt-0.5">${v}</p>
            </div>
          </div>`).join('')}
      </div>
    </div>
  </div>`;

  // Restore results if scan already ran this session
  if (scanState.done && scanState.results.length) {
    renderScanResults();
  }
}

function launchScan() {
  if (scanState.running) return;
  scanState.running = true;
  scanState.done = false;

  const btn = document.getElementById('scan-main-btn');
  const btnLabel = document.getElementById('scan-btn-label');
  const btnIcon = document.getElementById('scan-btn-icon');
  const progressWrap = document.getElementById('scan-progress-wrap');
  const stepLabel = document.getElementById('scan-step-label');
  const pctEl = document.getElementById('scan-pct');
  const bar = document.getElementById('scan-progress-bar');
  const scanIcon = document.getElementById('scan-icon');

  if (btn) btn.disabled = true;
  if (btnLabel) btnLabel.textContent = 'Scanning…';
  if (btnIcon) btnIcon.className = 'fas fa-spinner fa-spin text-sm';
  if (progressWrap) progressWrap.classList.remove('hidden');
  if (scanIcon) scanIcon.className = 'fas fa-shield-alt text-emerald-400 text-2xl fa-beat-fade';

  const steps = [
    { label:'Checking punch list due dates…',    pct:15 },
    { label:'Reviewing survey response rates…',   pct:28 },
    { label:'Validating supplement pipeline…',    pct:42 },
    { label:'Analyzing warranty schedules…',      pct:56 },
    { label:'Cross-referencing insurance claims…',pct:70 },
    { label:'Calculating risk score drift…',      pct:82 },
    { label:'Scanning communication gaps…',       pct:93 },
    { label:'Generating report…',                 pct:100 }
  ];

  let si = 0;
  const iv = setInterval(() => {
    if (si >= steps.length) {
      clearInterval(iv);
      finalizeScan();
      return;
    }
    const step = steps[si++];
    if (stepLabel) stepLabel.textContent = step.label;
    if (pctEl) pctEl.textContent = step.pct + '%';
    if (bar) bar.style.width = step.pct + '%';
  }, 450);
}

function finalizeScan() {
  const today = new Date();
  const results = [];

  state.jobs.forEach(j => {
    // Overdue punch items
    const overdue = j.punchlist.filter(i => !i.complete && i.due && new Date(i.due+'T00:00:00') < today);
    if (overdue.length) {
      results.push({ level:'high', icon:'fa-clock', job:j.homeowner, title:`${overdue.length} punch item${overdue.length>1?'s':''} overdue`, detail:overdue.map(i=>i.desc).slice(0,2).join(' · '), action:"punchlist" });
    }

    // High risk
    if (j.riskScore >= 60) {
      results.push({ level:'high', icon:'fa-triangle-exclamation', job:j.homeowner, title:`High risk score: ${j.riskScore}`, detail:'Review recommended — potential callbacks or claim escalation', action:"escalations" });
    } else if (j.riskScore >= 30) {
      results.push({ level:'med', icon:'fa-chart-line', job:j.homeowner, title:`Medium risk: ${j.riskScore}`, detail:'Monitor punch list progress and supplement status', action:"escalations" });
    } else {
      results.push({ level:'ok', icon:'fa-check-circle', job:j.homeowner, title:`Risk score healthy: ${j.riskScore}`, detail:'All systems normal for this job', action:"dashboard" });
    }

    // Survey non-response
    const noReply = j.surveys.filter(s => !s.responded && s.sent && (today - new Date(s.sent+'T00:00:00')) > 7*86400000);
    if (noReply.length) {
      results.push({ level:'med', icon:'fa-comment-slash', job:j.homeowner, title:'Survey non-response (7+ days)', detail:'Follow-up recommended via SMS or phone', action:"surveys" });
    }

    // Pending supplements
    const pend = j.insurance?.supplements?.filter(s=>s.status==='Pending') || [];
    if (pend.length) {
      const amt = pend.reduce((a,s)=>a+s.amount,0);
      results.push({ level:'med', icon:'fa-file-invoice-dollar', job:j.homeowner, title:`${pend.length} supplement${pend.length>1?'s':''} pending — $${amt.toLocaleString()}`, detail:'Submit to carrier or escalate to adjuster', action:"insurance" });
    }
  });

  // Sort: high → med → ok
  results.sort((a,b) => {
    const order = {high:0,med:1,ok:2};
    return order[a.level] - order[b.level];
  });

  scanState.running = false;
  scanState.done = true;
  scanState.results = results;
  scanState.lastRun = Date.now();

  // Update UI
  const btn = document.getElementById('scan-main-btn');
  const btnLabel = document.getElementById('scan-btn-label');
  const btnIcon = document.getElementById('scan-btn-icon');
  const progressWrap = document.getElementById('scan-progress-wrap');
  const scanIcon = document.getElementById('scan-icon');
  const lastRun = document.getElementById('scan-last-run');
  const resultsWrap = document.getElementById('scan-results-wrap');

  if (btn) btn.disabled = false;
  if (btnLabel) btnLabel.textContent = 'Run Scan Again';
  if (btnIcon) btnIcon.className = 'fas fa-rotate text-sm';
  if (progressWrap) progressWrap.classList.add('hidden');
  if (scanIcon) scanIcon.className = 'fas fa-shield-alt text-emerald-400 text-2xl';
  if (lastRun) lastRun.textContent = 'Last scan: just now';
  if (resultsWrap) resultsWrap.classList.remove('hidden');

  // Update dashboard scanner timestamp
  const ts = document.getElementById('scanner-ts');
  if (ts) ts.textContent = 'All systems checked · Last scan: just now';

  renderScanResults();

  const issues = results.filter(r=>r.level!=='ok').length;
  toast(issues > 0
    ? `Scan complete — ${issues} item${issues>1?'s':''} need attention`
    : 'Scan complete — all jobs clear!',
    issues > 0 ? 'warning' : 'success', 4000);

  // Feed
  const job = state.jobs[Math.floor(Math.random()*state.jobs.length)];
  activityFeed.unshift({ icon:'fa-shield-alt', color:'text-emerald-400', msg:`AI Scanner completed — ${issues} issue${issues!==1?'s':''} detected across ${state.jobs.length} jobs`, time:'Just now' });
  activityFeed = activityFeed.slice(0,12);
}

function renderScanResults() {
  const el = document.getElementById('scan-results-list');
  const timeEl = document.getElementById('scan-results-time');
  if (!el) return;
  if (timeEl && scanState.lastRun) {
    timeEl.textContent = '· ' + new Date(scanState.lastRun).toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'});
  }
  const colorMap = { high:'scan-result risk-high', med:'scan-result risk-med', ok:'scan-result risk-ok' };
  const bgMap    = { high:'bg-red-500/8', med:'bg-amber-500/8', ok:'bg-emerald-500/8' };
  const iconColor= { high:'text-red-400', med:'text-amber-400', ok:'text-emerald-400' };
  const badge    = { high:'badge-denied', med:'badge-pending', ok:'badge-complete' };
  const badgeLabel={ high:'Action Needed', med:'Monitor', ok:'All Clear' };

  el.innerHTML = scanState.results.map(r => `
    <div class="${colorMap[r.level]} ${bgMap[r.level]} rounded-xl px-4 py-3.5 flex items-center gap-3.5">
      <div class="w-8 h-8 rounded-lg ${bgMap[r.level]} border border-slate-800 flex items-center justify-center flex-shrink-0">
        <i class="fas ${r.icon} ${iconColor[r.level]} text-xs"></i>
      </div>
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 mb-0.5">
          <p class="text-xs font-semibold text-white">${r.job}</p>
          <span class="text-[9px] text-slate-600">·</span>
          <span class="px-2 py-0.5 rounded-md text-[9px] font-bold ${badge[r.level]}">${badgeLabel[r.level]}</span>
        </div>
        <p class="text-xs text-slate-300">${r.title}</p>
        <p class="text-[10px] text-slate-500 mt-0.5">${r.detail}</p>
      </div>
      <button onclick="switchTab('${r.action}')" class="text-[10px] text-slate-500 hover:text-emerald-400 transition-colors flex-shrink-0 whitespace-nowrap">
        View <i class="fas fa-arrow-right text-[8px]"></i>
      </button>
    </div>`).join('') || '<p class="text-slate-600 text-xs text-center py-4">No results yet — run a scan first.</p>';
}

function exportScanReport() {
  if (!scanState.done || !scanState.results.length) { toast('Run a scan first','warning'); return; }
  const issues = scanState.results.filter(r=>r.level!=='ok');
  const clear  = scanState.results.filter(r=>r.level==='ok');
  const win = window.open('','_blank');
  win.document.write(`<!DOCTYPE html><html><head><title>ACC Scan Report — ${new Date().toLocaleDateString()}</title>
  <style>body{font-family:system-ui,sans-serif;color:#111;padding:32px;max-width:800px;margin:0 auto}
  h1{font-size:20px;font-weight:700;margin:0 0 4px}p{font-size:13px;color:#6b7280;margin:0 0 20px}
  .card{border-radius:10px;padding:14px 18px;margin-bottom:10px;border-left:3px solid}
  .high{background:#fef2f2;border-color:#dc2626}.med{background:#fffbeb;border-color:#d97706}.ok{background:#f0fdf4;border-color:#059669}
  .job{font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .title{font-size:14px;font-weight:600;margin:2px 0}.detail{font-size:12px;color:#6b7280}
  @media print{button{display:none}}</style></head><body>
  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px">
    <div><h1>AfterCloseCare — AI Scanner Report</h1><p>Generated ${new Date().toLocaleString()} · ${state.jobs.length} jobs scanned</p></div>
    <button onclick="window.print()" style="background:#10b981;color:white;border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600">🖨 Print / Save PDF</button>
  </div>
  <p style="font-weight:600;color:#111;margin-bottom:12px">Issues Requiring Attention (${issues.length})</p>
  ${issues.map(r=>`<div class="card ${r.level}"><div class="job">${r.job}</div><div class="title">${r.title}</div><div class="detail">${r.detail}</div></div>`).join('')}
  ${clear.length?`<p style="font-weight:600;color:#111;margin:20px 0 12px">All Clear (${clear.length})</p>${clear.map(r=>`<div class="card ok"><div class="job">${r.job}</div><div class="title">${r.title}</div></div>`).join('')}`:''}
  </body></html>`);
  win.document.close();
}


// ═══════════════════════════════════════════════════
//   AI PUNCH SUGGESTIONS (v37)
// ═══════════════════════════════════════════════════
function showAISuggestions() {
  const job = getJob();
  const cat = document.getElementById('pl-filter')?.value || 'all';
  const suggestions = [];

  // Generate smart suggestions based on job type and open items
  const openCats = [...new Set(job.punchlist.filter(i=>!i.complete).map(i=>i.category))];
  const types = {
    'Water Damage Restoration': ['Verify moisture readings below 16% before close-out','Document all drying logs for carrier','Confirm mold clearance cert on file','Check subfloor for residual swelling'],
    'Kitchen Remodel':['Confirm all cabinet doors swing freely','Test GFCI outlets at counter level','Check dishwasher drain loop','Verify exhaust fan CFM meets code'],
    'Full Home Renovation':['Schedule final walk-through with client','Confirm permit sign-off from municipality','Verify all light fixtures on dimmer switches','Check attic insulation levels at access hatch'],
    'default':['Review all open punch items with lead tech','Confirm client sign-off on completed items','Schedule 30-day follow-up call','Send final satisfaction survey']
  };
  const jobSuggestions = types[job.type] || types['default'];

  // Open category-specific
  openCats.forEach(c => {
    const catSuggs = (SUGGESTIONS[c] || []).slice(0,3);
    catSuggs.forEach(s => {
      if (!job.punchlist.some(i=>i.desc===s)) suggestions.push({ cat:c, text:s });
    });
  });

  // Job-type suggestions
  jobSuggestions.forEach(s => suggestions.push({ cat:'General', text:s }));

  const modal = document.createElement('div');
  modal.className = 'fixed inset-0 modal-bg flex items-center justify-center z-50 p-4';

  const rowsHtml = suggestions.slice(0,10).map(function(s) {
    const safeDesc = s.text.replace(/'/g, '').replace(/"/g, '').replace(/&/g, 'and');
    const safeCat  = s.cat.replace(/'/g, '').replace(/"/g, '');
    return (
      '<div class="flex items-center gap-3 bg-slate-800/40 rounded-xl px-4 py-3 group">' +
        '<span class="text-[9px] px-2 py-0.5 bg-slate-800 text-slate-500 rounded-md flex-shrink-0">' + s.cat + '</span>' +
        '<p class="text-xs text-slate-300 flex-1">' + s.text + '</p>' +
        '<button data-desc="' + safeDesc + '" data-cat="' + safeCat + '" onclick="handleSuggClick(this)" ' +
          'class="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] text-emerald-400 hover:text-emerald-300 flex-shrink-0 whitespace-nowrap">' +
          '+ Add' +
        '</button>' +
      '</div>'
    );
  }).join('');

  modal.innerHTML =
    '<div class="glass w-full max-w-lg rounded-2xl p-7 max-h-[80vh] overflow-auto">' +
      '<div class="flex justify-between items-center mb-5">' +
        '<div>' +
          '<h3 class="text-lg font-semibold flex items-center gap-2">' +
            '<i class="fas fa-wand-magic-sparkles text-emerald-400 text-sm"></i> AI Punch Suggestions' +
          '</h3>' +
          '<p class="text-[11px] text-slate-500 mt-0.5">' + job.type + ' · ' + job.homeowner + '</p>' +
        '</div>' +
        '<button onclick="this.closest(\'.fixed\').remove()" class="text-slate-500 hover:text-white w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800">' +
          '<i class="fas fa-times text-sm"></i>' +
        '</button>' +
      '</div>' +
      '<div class="space-y-2">' + rowsHtml + '</div>' +
      '<button onclick="this.closest(\'.fixed\').remove()" class="mt-5 w-full bg-slate-800 hover:bg-slate-700 py-2.5 rounded-xl text-sm text-slate-400 transition-colors">' +
        'Close' +
      '</button>' +
    '</div>';
  document.body.appendChild(modal);
  modal.addEventListener('click', e => { if (e.target === modal) modal.remove(); });
}

function handleSuggClick(btn) {
  const desc = btn.getAttribute('data-desc') || '';
  const cat  = btn.getAttribute('data-cat')  || 'Other';
  addSuggestedPunch(desc, cat);
  const modal = btn.closest('.fixed');
  if (modal) modal.remove();
}

function addSuggestedPunch(desc, cat) {
  const job = getJob();
  job.punchlist.push({
    id: 'PL-'+Date.now(),
    category: cat === 'General' ? 'Other' : (cat || 'Other'),
    priority: 'Medium',
    desc,
    assignee: TECHS[0],
    due: new Date(Date.now()+3*86400000).toISOString().split('T')[0],
    complete: false
  });
  try{ if(window.ACC_EVENTS){ const __pi=job.punchlist[job.punchlist.length-1]; window.ACC_EVENTS.emit('punch.added',{jobId:job.id,itemId:__pi.id},{category:__pi.category||null,desc:__pi.desc,assignee:__pi.assignee,due:__pi.due||null,priority:__pi.priority,suggested:true}); } }catch(_){/*shadow*/}
  save();
  toast('Suggestion added to punch list', 'success');
  renderPunchList();
}

function renderEscalations() {
  const today = new Date();
  const triggers = [
    { name:'Low Survey Score', rule:'< 3 stars triggers alert + auto follow-up', status:'Active' },
    { name:'Punch List Overdue', rule:'Item past due by more than 2 days', status:'Active' },
    { name:'Client Non-Response', rule:'No reply to 3 consecutive messages', status:'Active' },
    { name:'Supplement Denied', rule:'Insurance supplement rejection triggers review', status:'Active' },
    { name:'Missed Warranty Check-in', rule:'Warranty call not completed by scheduled date', status:'Active' }
  ];

  // Build live escalation list from real job data
  const liveEscalations = [];
  state.jobs.forEach(j => {
    if (j.riskScore >= 60) {
      liveEscalations.push({ job: j.homeowner, reason: 'High risk score (' + j.riskScore + ') — review required', icon: 'fa-triangle-exclamation', color: 'text-red-400', bg: 'bg-red-500/10' });
    }
    const overdue = j.punchlist.filter(i => !i.complete && i.due && new Date(i.due+'T00:00:00') < today);
    if (overdue.length) {
      liveEscalations.push({ job: j.homeowner, reason: overdue.length + ' punch item(s) past due date', icon: 'fa-clock', color: 'text-amber-400', bg: 'bg-amber-500/10' });
    }
    const noReply = j.surveys.filter(s => !s.responded && s.sent && (today - new Date(s.sent+'T00:00:00')) > 7*86400000);
    if (noReply.length) {
      liveEscalations.push({ job: j.homeowner, reason: 'Survey non-response (7+ days)', icon: 'fa-comment-slash', color: 'text-amber-400', bg: 'bg-amber-500/10' });
    }
    if (j.insurance?.supplements?.some(s => s.status === 'Denied')) {
      liveEscalations.push({ job: j.homeowner, reason: 'Supplement denied by carrier — follow-up needed', icon: 'fa-file-circle-exclamation', color: 'text-red-400', bg: 'bg-red-500/10' });
    }
  });

  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-4xl mx-auto space-y-5">
    <div class="grid grid-cols-3 gap-4">
      ${[
        { val: String(liveEscalations.length), label:'Active Escalations', color: liveEscalations.length > 0 ? 'text-red-400' : 'text-emerald-400' },
        { val:'2', label:'Resolved This Month', color:'text-white' },
        { val:'1.4d', label:'Avg Resolution Time', color:'text-white' }
      ].map(s=>`<div class="card-bg rounded-xl p-4 text-center">
        <div class="stat-n text-3xl font-bold ${s.color}">${s.val}</div>
        <div class="text-[10px] text-slate-500 uppercase tracking-wider mt-1">${s.label}</div>
      </div>`).join('')}
    </div>

    ${liveEscalations.length === 0 ? `
    <div class="card-bg rounded-2xl p-8 text-center">
      <div class="w-14 h-14 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
        <i class="fas fa-check-circle text-emerald-400 text-3xl"></i>
      </div>
      <h3 class="font-semibold text-white text-lg mb-1">All Clear</h3>
      <p class="text-slate-500 text-sm">No active escalations. All jobs are running within normal parameters.</p>
    </div>` : `
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4 flex items-center gap-2">
        <i class="fas fa-triangle-exclamation text-red-400 text-xs"></i>
        Active Escalations (${liveEscalations.length})
      </h3>
      <div class="space-y-2.5">
        ${liveEscalations.map(e => `
          <div class="flex items-center gap-3.5 bg-slate-800/40 rounded-xl px-4 py-3.5">
            <div class="w-8 h-8 rounded-lg ${e.bg} flex items-center justify-center flex-shrink-0">
              <i class="fas ${e.icon} ${e.color} text-xs"></i>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-xs text-white font-medium">${e.job}</p>
              <p class="text-[10px] text-slate-500 mt-0.5">${e.reason}</p>
            </div>
            <button onclick="toast('Escalation flagged for review','info')" class="text-[10px] text-slate-500 hover:text-emerald-400 transition-colors flex-shrink-0">Resolve</button>
          </div>`).join('')}
      </div>
    </div>`}

    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-4">Escalation Triggers (Auto-Monitored)</h3>
      <div class="space-y-2.5">
        ${triggers.map(t=>`
          <div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-4 py-3">
            <div>
              <p class="text-xs text-slate-300 font-medium">${t.name}</p>
              <p class="text-[10px] text-slate-500 mt-0.5">${t.rule}</p>
            </div>
            <span class="badge-complete px-2.5 py-0.5 rounded-lg text-[10px] font-medium">${t.status}</span>
          </div>
        `).join('')}
      </div>
    </div>
  </div>`;
}

// ═══════════════════════════════════════════════════
//   SETTINGS TAB
// ═══════════════════════════════════════════════════

function renderSettings() {
  const s = state.settings;
  document.getElementById('main-content').innerHTML = `
  <div class="tab-in max-w-3xl mx-auto space-y-5">

    <!-- v39.1: Plan & Tiers (premium, owner view) -->
    ${(state.agents && state.agents.meta && state.agents.meta.viewMode === 'va') ? '' : `
    <div class="rounded-2xl p-5" style="background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.18);">
      <div class="flex items-center gap-3 mb-3">
        <div class="w-9 h-9 rounded-xl bg-emerald-500/15 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-gem text-emerald-400 text-sm"></i>
        </div>
        <div>
          <p class="text-sm font-semibold text-white">Your AfterCloseCare Plan</p>
          <p class="text-[10px] text-slate-500">Client-owned system — your data lives in your browser, exportable any time</p>
        </div>
      </div>
      <div class="grid sm:grid-cols-3 gap-3">
        <div class="bg-slate-800/40 rounded-xl p-3">
          <p class="text-xs font-semibold text-emerald-400 mb-1">Starter Bundle</p>
          <p class="text-sm font-bold text-white">$2,997–$4,997 <span class="text-[10px] font-normal text-slate-500">setup</span></p>
          <p class="text-[10px] text-slate-500 mt-1">Includes the Done-Right 30-day implementation — built, monitored, tuned, and certified live in your business</p>
        </div>
        <div class="bg-slate-800/40 rounded-xl p-3">
          <p class="text-xs font-semibold text-emerald-400 mb-1">Growth Retainer</p>
          <p class="text-sm font-bold text-white">+$397–$597<span class="text-[10px] font-normal text-slate-500">/mo</span></p>
          <p class="text-[10px] text-slate-500 mt-1">Ongoing agent optimization on strict deliverable boundaries — opens at Stability 80+ certification</p>
        </div>
        <div class="bg-slate-800/40 rounded-xl p-3">
          <p class="text-xs font-semibold text-emerald-400 mb-1">Mid-Market Full System</p>
          <p class="text-sm font-bold text-white">$5,000–$10,000 <span class="text-[10px] font-normal text-slate-500">+ $500–$800/mo</span></p>
          <p class="text-[10px] text-slate-500 mt-1">Full Gauge · Shift · Anchor stack, vertical integrations, white-glove support</p>
        </div>
      </div>
      <p class="text-[10px] text-slate-500 mt-3">Optional Managed AfterCloseCare Environment: $34.95/mo for hosted team sync. Seats are per person, not per device.</p>
    </div>`}

    <!-- Company -->
    <div class="card-bg rounded-2xl p-6 space-y-4">
      <h3 class="font-semibold text-white text-sm flex items-center gap-2"><i class="fas fa-building text-emerald-400 text-xs"></i> Company Info</h3>
      <div class="grid grid-cols-2 gap-4">
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Company Name</label>
          <input type="text" id="set-company" value="${s.companyName}"></div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Owner Name</label>
          <input type="text" id="set-owner" value="${s.ownerName}"></div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Email</label>
          <input type="email" id="set-email" value="${s.email}"></div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Phone</label>
          <input type="text" id="set-phone" value="${s.phone}"></div>
      </div>
    </div>

    <!-- Automation -->
    <div class="card-bg rounded-2xl p-6 space-y-3">
      <h3 class="font-semibold text-white text-sm flex items-center gap-2"><i class="fas fa-robot text-emerald-400 text-xs"></i> Automation Settings</h3>
      ${[
        { key:'autoSurvey', label:'Auto-send survey after job close', desc:'Triggers 24hr after close date' },
        { key:'autoWarranty', label:'Auto-schedule warranty check-ins', desc:'Creates reminders at 6 and 12 months' },
        { key:'autoSupplement', label:'Auto-draft supplement from punch list', desc:'AI identifies supplementable items' }
      ].map(opt=>`
        <div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-4 py-3.5">
          <div>
            <p class="text-xs font-medium text-slate-300">${opt.label}</p>
            <p class="text-[10px] text-slate-500 mt-0.5">${opt.desc}</p>
          </div>
          <button onclick="toggleSetting('${opt.key}')" class="relative w-10 h-5 rounded-full transition-colors flex-shrink-0 ${s[opt.key]?'bg-emerald-600':'bg-slate-700'}">
            <div class="absolute top-0.5 h-4 w-4 bg-white rounded-full shadow transition-all ${s[opt.key]?'left-5':'left-0.5'}"></div>
          </button>
        </div>
      `).join('')}
    </div>

    <!-- Warranty -->
    <div class="card-bg rounded-2xl p-6 space-y-4">
      <h3 class="font-semibold text-white text-sm flex items-center gap-2"><i class="fas fa-shield-halved text-emerald-400 text-xs"></i> Warranty Defaults</h3>
      <div class="grid grid-cols-2 gap-4">
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Default Warranty (Months)</label>
          <select id="set-warranty">
            ${[6,12,18,24,36].map(m=>`<option ${s.warrantyMonths===m?'selected':''}>${m}</option>`).join('')}
          </select>
        </div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Review Platform</label>
          <select id="set-review">
            ${['Google','HomeAdvisor','Yelp','Houzz','Facebook'].map(p=>`<option ${s.reviewPlatform===p?'selected':''}>${p}</option>`).join('')}
          </select>
        </div>
      </div>
      <div class="border-t border-slate-800 pt-4">
        <label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Anchor Purchase Cycle (days)</label>
        <input type="number" id="set-cycle" min="1" step="1" value="${s.purchaseCycleDays||365}" class="w-full">
        <p class="text-[9px] text-slate-600 mt-1">Restoration default 365. Drives Anchor at-risk tiers: ACTIVE ≤1× · COOLING 1–1.5× · AT-RISK 1.5–2× · LAPSED &gt;2× of cycle.</p>
      </div>
    </div>

    <!-- PWA Install -->
    <div class="card-bg rounded-2xl p-6 space-y-3">
      <h3 class="font-semibold text-white text-sm flex items-center gap-2"><i class="fas fa-mobile-screen-button text-emerald-400 text-xs"></i> Install App</h3>
      <p class="text-[10px] text-slate-500">Add AfterCloseCare to your home screen or desktop. Works on Chrome, Edge, and Android — no app store needed.</p>
      <div class="flex items-center gap-3 flex-wrap">
        <button id="installBtn"
          class="hidden items-center gap-2 bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-6 py-3 rounded-xl font-bold text-sm text-white shadow-lg shadow-emerald-900/40"
          onclick="triggerPWAInstall()">
          <i class="fas fa-download text-xs"></i> Install App — Free
        </button>
        <span id="pwa-installed-msg" class="hidden text-xs text-emerald-400 items-center gap-1.5">
          <i class="fas fa-circle-check"></i> Installed successfully
        </span>
        <span id="pwa-unavailable-msg" class="text-[10px] text-slate-600 italic">
          Go to Settings tab in Chrome or Edge, then tap "Install App"
        </span>
      </div>
      <div class="bg-slate-800/40 rounded-xl p-3.5 mt-1">
        <p class="text-[10px] text-slate-500 leading-relaxed">
          <span class="text-slate-400 font-medium">iOS Safari:</span> Tap the Share button → "Add to Home Screen"<br>
          <span class="text-slate-400 font-medium">Chrome/Edge:</span> Click the install icon in the address bar, or wait for the prompt below
        </p>
      </div>
    </div>

    <!-- Danger zone -->
    <div class="card-bg rounded-2xl p-5 border-red-900/30">
      <h3 class="font-semibold text-white text-sm mb-1 flex items-center gap-2"><i class="fas fa-triangle-exclamation text-red-400 text-xs"></i> Data</h3>
      <p class="text-[10px] text-slate-500 mb-3">Export or clear your data. Reset restores the full demo dataset.</p>
      <div class="flex flex-wrap items-center gap-2.5">
        <button onclick="saveSettings()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-5 py-2.5 rounded-xl font-semibold text-sm">Save Settings</button>
        <button onclick="exportAllData()" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-5 py-2.5 rounded-xl font-semibold text-sm text-slate-300 flex items-center gap-1.5">
          <i class="fas fa-download text-xs text-emerald-400"></i> Export Data
        </button>
        <button onclick="clearDemoData()" class="bg-slate-800 hover:bg-amber-900/40 border border-amber-900/30 hover:border-amber-600/40 active:scale-95 transition-all px-5 py-2.5 rounded-xl font-semibold text-sm text-amber-400">
          <i class="fas fa-broom text-xs mr-1"></i> Clear Demo Data
        </button>
        <button onclick="resetAgentData()" class="bg-slate-800 hover:bg-blue-900/40 border border-blue-900/30 hover:border-blue-600/40 active:scale-95 transition-all px-5 py-2.5 rounded-xl font-semibold text-sm text-blue-300" title="Clear imported lead/customer agent data without touching your jobs">
          <i class="fas fa-rotate text-xs mr-1"></i> Reset Agent Data
        </button>
        <button onclick="resetData()" class="bg-slate-800 hover:bg-red-900/40 border border-red-900/30 hover:border-red-600/40 active:scale-95 transition-all px-5 py-2.5 rounded-xl font-semibold text-sm text-red-400">Reset All Data</button>
      </div>
    </div>
  </div>`;
}

function toggleSetting(key) {
  state.settings[key] = !state.settings[key];
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('settings.changed',null,{field:key,value:state.settings[key]}); }catch(_){/*shadow*/}
  save();
  toast(`${key}: ${state.settings[key]?'Enabled':'Disabled'}`, state.settings[key]?'success':'info');
  renderSettings();
}

function saveSettings() {
  state.settings.companyName = document.getElementById('set-company').value;
  state.settings.ownerName = document.getElementById('set-owner').value;
  state.settings.email = document.getElementById('set-email').value;
  state.settings.phone = document.getElementById('set-phone').value;
  state.settings.warrantyMonths = parseInt(document.getElementById('set-warranty').value);
  { const c = parseInt(document.getElementById('set-cycle')?.value);
    if (Number.isFinite(c) && c > 0) {
      state.settings.purchaseCycleDays = c;
      // CR-29: warn if cycle < 90 while any Restoration/Insurance job exists — Anchor would misfire AT-RISK.
      try {
        const hasResto = (state.jobs||[]).some(j => /restorat|insurance|water|fire|storm|mold/i.test((j.type||'')));
        if (c < 90 && hasResto && typeof toast === 'function')
          toast('Heads up: a ' + c + '-day cycle will flag restoration clients AT-RISK too early. Restoration/insurance typically uses 365–730 days.', 'warning', 6000);
      } catch(e) { /* non-blocking */ }
    } }  // CR-29
  state.settings.reviewPlatform = document.getElementById('set-review').value;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('settings.changed',null,{fields:['companyName','warrantyMonths','purchaseCycleDays','reviewPlatform'],purchaseCycleDays:state.settings.purchaseCycleDays,warrantyMonths:state.settings.warrantyMonths,reviewPlatform:state.settings.reviewPlatform}); }catch(_){/*shadow*/}
  save();
  toast('Settings saved successfully', 'success');
}

function resetData() {
  if (!confirm('Reset all data and restore demo jobs? This cannot be undone.')) return;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('data.reset',null,{jobsAtReset:(state.jobs||[]).length,confirmed:true}); }catch(_){/*shadow*/}
  localStorage.removeItem('acc_state_v3');
  if (window.ACC_EVENTS) { ACC_EVENTS.flush().then(function(){ location.reload(); }).catch(function(){ location.reload(); }); }
  else { location.reload(); }
}

function resetAgentData() {
  // v39.8: clear ONLY the imported agent data (Gauge leads + Anchor customers) so a clean
  // re-import isn't polluted by stale/doubled state from an earlier build. Jobs are untouched.
  if (!confirm('Reset imported agent data?\n\nThis clears Gauge lead counts/queue and Anchor customer backfill so you can re-import cleanly. Your JOBS are NOT touched. A backup is taken first.')) return;
  try {
    if (typeof exportAllData === 'function') exportAllData(); // safety backup
    ensureAgents();
    state.agents.leads = { kpis:{leadsCaptured:0,hotLeads:0,warmLeads:0,consultsBooked:0}, hotQueue:[], importedKeys:{}, stability: state.agents.leads.stability||0, retainer: state.agents.leads.retainer||false, updatedAt:null };
    state.agents.retention = { kpis:{atRiskCount:0,winbacksInFlight:0,recoveredCount:0,recoveredRevenue:0,cancelRequests:0,cancelsSaved:0}, saveQueue:[], customerBook:[], stability: state.agents.retention.stability||0, retainer: state.agents.retention.retainer||false, updatedAt:null };
    if (typeof agentsLog === 'function') agentsLog('Reset Agent Data: Gauge + Anchor cleared for clean re-import. Jobs untouched.');
    save();
    syncHeaderToJob && syncHeaderToJob();
    toast('Agent data reset. Re-import leads and customers for clean counts. Jobs untouched.', 'success', 5000);
    renderSettings();
  } catch(e) { console.error('resetAgentData error', e); toast('Reset failed: '+e.message+' — backup was saved', 'error'); }
}
window.resetAgentData = resetAgentData;

function clearDemoData() {
  const DEMO_IDS = ['JOB-001', 'JOB-002', 'JOB-003'];
  function isGhost(j) {
    const placeholderName = !j.homeowner || /^new client$/i.test((j.homeowner||'').trim());
    const noContact = !((j.phone||'').trim()) && !((j.email||'').trim()) && !((j.address||'').trim());
    const noWork = (!j.punchlist || j.punchlist.length === 0) &&
                   (!j.surveys || j.surveys.length === 0) &&
                   (!j.insurance || !j.insurance.claimNum);
    return placeholderName && noContact && noWork;
  }
  function isRemovable(j) {
    return DEMO_IDS.includes(j.id) || j.demo === true || j.onboarding === true || isGhost(j);
  }
  function isProtected(j) {
    if (String(j.id||'').startsWith('JOB-IMP')) return true;
    if (j.importedAt) return true;
    if ((j.punchlist && j.punchlist.length) ||
        (j.surveys && j.surveys.length) ||
        (j.insurance && j.insurance.claimNum)) return true;
    return false;
  }
  // Demo seed IDs are demo by definition (their seeded punch/insurance is fake) → always removable.
  // Protection applies only to non-demo jobs the owner actually created or imported.
  const targets = state.jobs.filter(j => DEMO_IDS.includes(j.id) || (isRemovable(j) && !isProtected(j)));
  if (targets.length === 0) {
    toast('No demo or placeholder jobs found - already clean', 'info');
    return;
  }
  const demoSeed = targets.filter(j => DEMO_IDS.includes(j.id)).length;
  const ghosts = targets.length - demoSeed;
  const detail = [
    demoSeed ? (demoSeed + ' demo job(s)') : '',
    ghosts ? (ghosts + ' placeholder/onboarding job(s)') : ''
  ].filter(Boolean).join(' + ');
  if (!confirm('Remove ' + detail + ' and start with a clean slate?\n\nImported jobs and any job with real punch-list, survey, or insurance data are protected and will NOT be touched. This cannot be undone.')) return;
  const removeIds = new Set(targets.map(j => j.id));
  const before = state.jobs.length;
  try{ if(window.ACC_EVENTS) state.jobs.filter(j => removeIds.has(j.id)).forEach(function(j){ window.ACC_EVENTS.emit('job.demo_cleared',{jobId:j.id},{reason: j.onboarding ? 'onboarding' : ((typeof isGhost==='function'&&isGhost(j)) ? 'ghost' : 'demo')}); }); }catch(_){/*shadow*/}
  state.jobs = state.jobs.filter(j => !removeIds.has(j.id));
  if (!state.jobs.find(j => j.id === state.activeJobId)) {
    state.activeJobId = state.jobs[0]?.id || null;
  }
  if (typeof agentsLog === 'function') agentsLog('Clear Demo Data: removed ' + (before - state.jobs.length) + ' job(s) (' + detail + '). Imported and real-work jobs protected.');
  save();
  syncHeaderToJob();
  toast('Cleared ' + (before - state.jobs.length) + ' job(s). Imported and real jobs untouched.', 'success', 5000);
  renderSettings();
  renderSidebar(currentTab);
}

// ═══════════════════════════════════════════════════
//   INTAKE MODAL (3-step)
// ═══════════════════════════════════════════════════

let intakeStep = 1;
let intakeData = {};

function openIntakeModal() {
  intakeStep = 1; intakeData = { tier:'starter' };
  document.getElementById('intake-modal').classList.remove('hidden');
  renderIntakeStep();
}
function closeIntakeModal() { document.getElementById('intake-modal').classList.add('hidden'); }

function renderIntakeStep() {
  const stepBar = document.getElementById('intake-step-bar');
  const body = document.getElementById('intake-body');
  stepBar.innerHTML = `
    <div class="flex items-center gap-3 mb-6">
      ${[['1','Job Info'],['2','Details'],['3','Tier'],['4','Automations']].map(([n,l],i)=>{
        const num = parseInt(n);
        const cls = num < intakeStep ? 'step-done' : num === intakeStep ? 'step-active' : 'step-pending';
        return `<div class="flex items-center gap-2 ${i<3?'flex-1':''}">
          <div class="step-dot ${cls}">${num < intakeStep ? '<i class="fas fa-check text-[9px]"></i>' : n}</div>
          <span class="text-xs ${num===intakeStep?'text-white font-medium':'text-slate-600'} hidden sm:inline">${l}</span>
          ${i<3?'<div class="flex-1 h-px bg-slate-800 mx-1"></div>':''}
        </div>`;
      }).join('')}
      <button onclick="closeIntakeModal()" class="ml-auto text-slate-500 hover:text-white w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800">
        <i class="fas fa-times text-sm"></i>
      </button>
    </div>`;

  if (intakeStep === 1) {
    body.innerHTML = `
      <h3 class="text-lg font-semibold text-white mb-5">New Job — Basic Info</h3>
      <div class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Homeowner Name</label><input type="text" id="i-homeowner" placeholder="John Smith" value="${intakeData.homeowner||''}"></div>
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Job Type</label>
            <select id="i-jobtype">
              ${['Kitchen Remodel','Flooring Installation','Bathroom Remodel','Water Damage Restoration','Insurance Restoration','Full Home Renovation','HVAC','Roofing','Siding & Exterior','Other'].map(t=>`<option ${intakeData.type===t?'selected':''}>${t}</option>`).join('')}
            </select>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Phone</label><input type="text" id="i-phone" placeholder="(614) 555-0000" value="${intakeData.phone||''}"></div>
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Email</label><input type="email" id="i-email" placeholder="client@email.com" value="${intakeData.email||''}"></div>
        </div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Address</label><input type="text" id="i-address" placeholder="1421 Maple Drive, Columbus OH" value="${intakeData.address||''}"></div>
        <div class="flex justify-end pt-2">
          <button onclick="intakeNext(1)" class="bg-emerald-600 hover:bg-emerald-500 px-8 py-2.5 rounded-xl font-semibold text-sm">Continue →</button>
        </div>
      </div>`;
  } else if (intakeStep === 2) {
    body.innerHTML = `
      <h3 class="text-lg font-semibold text-white mb-5">Job Details</h3>
      <div class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Invoice #</label><input type="text" id="i-invoice" placeholder="INV-2026-001" value="${intakeData.invoice||''}"></div>
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">PO #</label><input type="text" id="i-po" placeholder="PO-12345" value="${intakeData.po||''}"></div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Completion Date</label><input type="date" id="i-date" value="${intakeData.date||new Date().toISOString().split('T')[0]}"></div>
          <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Assigned Tech</label>
            <select id="i-tech">${TECHS.map(t=>`<option ${intakeData.tech===t?'selected':''}>${t}</option>`).join('')}</select>
          </div>
        </div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Internal Notes</label><textarea id="i-notes" rows="2" placeholder="Office notes only…">${intakeData.notes||''}</textarea></div>
        <div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Work Order Notes (Installer Facing)</label><textarea id="i-wonotes" rows="2" placeholder="Field crew instructions…">${intakeData.wonotes||''}</textarea></div>
        <div class="flex justify-between pt-2">
          <button onclick="intakeStep=1;renderIntakeStep()" class="text-slate-500 hover:text-white text-sm">← Back</button>
          <button onclick="intakeNext(2)" class="bg-emerald-600 hover:bg-emerald-500 px-8 py-2.5 rounded-xl font-semibold text-sm">Continue →</button>
        </div>
      </div>`;
  } else if (intakeStep === 3) {
    const tiers = [
      { key:'starter',   name:'Starter Bundle',        price:'$2,997–$4,997 setup', sub:'Done-Right 30-day implementation included · 2–3 AI agents built, tuned & certified live', agents:'Gauge · Shift · Anchor' },
      { key:'growth',    name:'Growth Retainer',       price:'Setup + $397–$597/mo', sub:'Everything in Starter + ongoing optimization month over month', agents:'Gauge · Shift · Anchor' },
      { key:'midmarket', name:'Mid-Market Full System', price:'$5,000–$10,000 + $500–$800/mo', sub:'Full stack, vertical integrations, white-glove support', agents:'Gauge · Shift · Anchor' }
    ];
    const sel = intakeData.tier || 'starter';
    body.innerHTML = `
      <h3 class="text-lg font-semibold text-white mb-1">Service Tier</h3>
      <p class="text-sm text-slate-500 mb-5">Sets expectations for this job and which AI Automation Assets are wired in. Order is always Gauge → Shift → Anchor.</p>
      <div class="space-y-3 mb-6">
        ${tiers.map(t=>`
          <label class="flex items-start gap-3 rounded-xl px-4 py-3.5 cursor-pointer transition-colors ${sel===t.key?'bg-emerald-500/10 border border-emerald-500/30':'bg-slate-800/40 border border-transparent hover:bg-slate-800/60'}">
            <input type="radio" name="i-tier" value="${t.key}" ${sel===t.key?'checked':''} class="!w-4 !h-4 !p-0 mt-0.5 accent-emerald-500" onchange="intakeData.tier=this.value;renderIntakeStep()">
            <div class="flex-1">
              <div class="flex items-center justify-between gap-2 flex-wrap">
                <span class="text-sm font-semibold text-white">${t.name}</span>
                <span class="text-xs font-semibold text-emerald-400">${t.price}</span>
              </div>
              <p class="text-[11px] text-slate-500 mt-0.5">${t.sub}</p>
              <p class="text-[10px] text-slate-600 mt-1"><i class="fas fa-robot text-[9px] mr-1"></i>${t.agents}</p>
            </div>
          </label>`).join('')}
      </div>
      <div class="flex justify-between pt-1">
        <button onclick="intakeStep=2;renderIntakeStep()" class="text-slate-500 hover:text-white text-sm">← Back</button>
        <button onclick="intakeNext(3)" class="bg-emerald-600 hover:bg-emerald-500 px-8 py-2.5 rounded-xl font-semibold text-sm">Continue →</button>
      </div>`;
  } else {
    body.innerHTML = `
      <h3 class="text-lg font-semibold text-white mb-2">Automation Triggers</h3>
      <p class="text-sm text-slate-500 mb-5">These will fire automatically when the job is created.</p>
      <div class="space-y-3 mb-6">
        ${[
          { id:'auto-survey', label:'Send survey request (24hr after close)', default:true },
          { id:'auto-warranty', label:'Schedule warranty check-ins (6 + 12 month)', default:true },
          { id:'auto-drip', label:'Start 7-day follow-up drip sequence', default:true },
          { id:'auto-risk', label:'Initialize risk score monitoring', default:true }
        ].map(a=>`
          <label class="flex items-center gap-3 bg-slate-800/40 rounded-xl px-4 py-3.5 cursor-pointer hover:bg-slate-800/60 transition-colors">
            <input type="checkbox" id="${a.id}" ${a.default?'checked':''} class="!w-4 !h-4 !p-0 !rounded accent-emerald-500">
            <span class="text-xs text-slate-300">${a.label}</span>
          </label>
        `).join('')}
      </div>
      <div class="bg-emerald-500/8 border border-emerald-500/20 rounded-xl p-4 mb-5">
        <p class="text-xs text-emerald-400 font-medium mb-1">Ready to create:</p>
        <p class="text-xs text-slate-400">${intakeData.homeowner} · ${intakeData.type} · ${intakeData.tech}</p>
        <p class="text-[11px] text-emerald-400/80 mt-1"><i class="fas fa-gem text-[9px] mr-1"></i>Tier: ${({starter:'Starter Bundle',growth:'Growth Retainer',midmarket:'Mid-Market Full System'})[intakeData.tier||'starter']}</p>
      </div>
      <div class="flex justify-between">
        <button onclick="intakeStep=3;renderIntakeStep()" class="text-slate-500 hover:text-white text-sm">← Back</button>
        <button onclick="submitIntake()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-8 py-2.5 rounded-xl font-semibold text-sm">Create Job & Start Automations</button>
      </div>`;
  }
}

function intakeNext(step) {
  if (step === 1) {
    intakeData.homeowner = document.getElementById('i-homeowner').value.trim() || 'New Client';
    intakeData.type = document.getElementById('i-jobtype').value;
    intakeData.phone = document.getElementById('i-phone').value;
    intakeData.email = document.getElementById('i-email').value;
    intakeData.address = document.getElementById('i-address').value;
    intakeStep = 2;
  } else if (step === 2) {
    intakeData.invoice = document.getElementById('i-invoice').value || 'INV-TBD';
    intakeData.po = document.getElementById('i-po').value;
    intakeData.date = document.getElementById('i-date').value;
    intakeData.tech = document.getElementById('i-tech').value;
    intakeData.notes = document.getElementById('i-notes').value;
    intakeData.wonotes = document.getElementById('i-wonotes').value;
    intakeStep = 3;
  } else if (step === 3) {
    const t = document.querySelector('input[name=\"i-tier\"]:checked');
    intakeData.tier = t ? t.value : (intakeData.tier || 'starter');
    intakeStep = 4;
  }
  renderIntakeStep();
}

function submitIntake() {
  const newJob = {
    id: 'JOB-'+state.jobs.length.toString().padStart(3,'0')+Date.now().toString().slice(-3),
    name: `${intakeData.homeowner} ${intakeData.type}`,
    homeowner: intakeData.homeowner,
    phone: intakeData.phone||'',
    email: intakeData.email||'',
    address: intakeData.address||'',
    type: intakeData.type,
    tier: intakeData.tier || 'starter',
    invoice: intakeData.invoice,
    po: intakeData.po||'',
    date: intakeData.date,
    tech: intakeData.tech,
    notes: intakeData.notes||'',
    wonotes: intakeData.wonotes||'',
    riskScore: 15,
    punchlist: [],
    surveys: [],
    insurance: null,
    warranty: { months: state.settings.warrantyMonths, checkins: [] },
    communications: [
      { date: new Date().toLocaleDateString(), type:'email', msg:`Job closing confirmation sent to ${intakeData.homeowner}.` }
    ]
  };
  // Auto warranty checkins
  const close = new Date(intakeData.date+'T00:00:00');
  const half = new Date(close); half.setMonth(half.getMonth()+Math.floor(state.settings.warrantyMonths/2));
  const full = new Date(close); full.setMonth(full.getMonth()+state.settings.warrantyMonths);
  newJob.warranty.checkins = [half.toISOString().split('T')[0], full.toISOString().split('T')[0]];

  newJob.onboarding = true;  // CR-26: tag wizard jobs for ghost cleanup
  state.jobs.push(newJob);
  state.activeJobId = newJob.id;
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('job.created',{jobId:newJob.id},{name:newJob.name,homeowner:newJob.homeowner,type:newJob.type,tier:newJob.tier||null,closeDate:newJob.close||newJob.date||null,onboarding:true}); }catch(_){/*shadow*/}
  save();
  closeIntakeModal();
  syncHeaderToJob();
  toast(`Job created: ${newJob.homeowner} · Automations started`, 'success');
  renderSidebar(currentTab);
  switchTab('dashboard');
}


// ═══════════════════════════════════════════════════
//   EXPORT / PRINT
// ═══════════════════════════════════════════════════

function printPunchList() {
  const job = getJob();
  const rows = job.punchlist.map((i,n) => `
    <tr style="border-bottom:1px solid #e5e7eb">
      <td style="padding:8px 10px;font-size:12px;color:#6b7280">${n+1}</td>
      <td style="padding:8px 10px;font-size:12px;font-weight:600">${i.category}</td>
      <td style="padding:8px 10px;font-size:12px">${i.desc}</td>
      <td style="padding:8px 10px;font-size:12px;color:#6b7280">${i.assignee}</td>
      <td style="padding:8px 10px;font-size:12px;color:#6b7280">${i.due||'—'}</td>
      <td style="padding:8px 10px;font-size:12px;font-weight:600;color:${i.complete?'#059669':i.priority==='Critical'?'#dc2626':i.priority==='High'?'#d97706':'#92400e'}">${i.complete?'Complete':i.priority}</td>
    </tr>`).join('');
  const open = job.punchlist.filter(i=>!i.complete).length;
  const done = job.punchlist.filter(i=>i.complete).length;
  const win = window.open('','_blank');
  win.document.write(`<!DOCTYPE html><html><head><title>Punch List — ${job.name}</title>
  <style>body{font-family:system-ui,sans-serif;color:#111;padding:32px;max-width:900px;margin:0 auto}
  h1{font-size:20px;font-weight:700;margin:0 0 4px}p{font-size:13px;color:#6b7280;margin:0 0 24px}
  .stats{display:flex;gap:24px;margin-bottom:24px}.stat{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 20px;text-align:center}
  .stat .n{font-size:28px;font-weight:700;font-family:monospace}.stat .l{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
  table{width:100%;border-collapse:collapse;font-size:13px}
  thead tr{background:#f3f4f6;border-bottom:2px solid #e5e7eb}
  th{padding:10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
  tr:hover{background:#fafafa}
  @media print{body{padding:16px}button{display:none}}
  </style></head><body>
  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px">
    <div><h1>${job.name}</h1><p>${job.invoice} · Assigned: ${job.tech} · Printed ${new Date().toLocaleDateString()}</p></div>
    <button onclick="window.print()" style="background:#10b981;color:white;border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600">🖨 Print / Save PDF</button>
  </div>
  <div class="stats">
    <div class="stat"><div class="n" style="color:#d97706">${open}</div><div class="l">Open</div></div>
    <div class="stat"><div class="n" style="color:#059669">${done}</div><div class="l">Complete</div></div>
    <div class="stat"><div class="n">${job.punchlist.length}</div><div class="l">Total Items</div></div>
  </div>
  <table><thead><tr><th>#</th><th>Category</th><th>Description</th><th>Assigned</th><th>Due</th><th>Status</th></tr></thead>
  <tbody>${rows}</tbody></table>
  </body></html>`);
  win.document.close();
}

function printSupplementReport() {
  const job = getJob();
  const ins = job.insurance;
  if (!ins) { toast('No insurance data on this job','warning'); return; }
  const totalPending = ins.supplements.filter(s=>s.status==='Pending').reduce((a,s)=>a+s.amount,0);
  const totalAll = ins.supplements.reduce((a,s)=>a+s.amount,0);
  const statusColor = { Pending:'#d97706', Submitted:'#2563eb', Approved:'#059669', Denied:'#dc2626' };
  const rows = ins.supplements.map((s,n) => `
    <tr style="border-bottom:1px solid #e5e7eb">
      <td style="padding:8px 10px;font-size:12px;color:#6b7280">${s.id}</td>
      <td style="padding:8px 10px;font-size:12px">${s.desc}</td>
      <td style="padding:8px 10px;font-size:12px;color:#6b7280">${s.category}</td>
      <td style="padding:8px 10px;font-size:12px;font-weight:700;font-family:monospace">$${s.amount.toLocaleString()}</td>
      <td style="padding:8px 10px;font-size:12px;font-weight:600;color:${statusColor[s.status]||'#374151'}">${s.status}</td>
      <td style="padding:8px 10px;font-size:12px;color:#9ca3af;font-size:11px">${s.notes||'—'}</td>
    </tr>`).join('');
  const win = window.open('','_blank');
  win.document.write(`<!DOCTYPE html><html><head><title>Supplement Report — ${job.name}</title>
  <style>body{font-family:system-ui,sans-serif;color:#111;padding:32px;max-width:960px;margin:0 auto}
  h1{font-size:20px;font-weight:700;margin:0 0 4px}p{font-size:13px;color:#6b7280;margin:0 0 24px}
  .info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
  .info .row{display:flex;flex-direction:column}.info .label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af}.info .val{font-size:13px;font-weight:600}
  .totals{display:flex;gap:20px;margin-bottom:24px}
  .stat{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 20px;text-align:center}
  .stat .n{font-size:24px;font-weight:700;font-family:monospace}.stat .l{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
  table{width:100%;border-collapse:collapse}thead tr{background:#f3f4f6;border-bottom:2px solid #e5e7eb}
  th{padding:10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
  tr:hover{background:#fafafa}
  @media print{body{padding:16px}button{display:none}}
  </style></head><body>
  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px">
    <div><h1>Supplement Report — ${job.name}</h1><p>Claim: ${ins.claimNum} · Carrier: ${ins.carrier} · Printed ${new Date().toLocaleDateString()}</p></div>
    <button onclick="window.print()" style="background:#d97706;color:white;border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600">🖨 Print / Save PDF</button>
  </div>
  <div class="info">
    <div class="row"><span class="label">Insurance Carrier</span><span class="val">${ins.carrier}</span></div>
    <div class="row"><span class="label">Adjuster</span><span class="val">${ins.adjuster} · ${ins.adjusterPhone}</span></div>
    <div class="row"><span class="label">Claim Number</span><span class="val">${ins.claimNum}</span></div>
    <div class="row"><span class="label">Initial Payout</span><span class="val">${ins.initialPayout}</span></div>
  </div>
  <div class="totals">
    <div class="stat"><div class="n">${ins.supplements.length}</div><div class="l">Line Items</div></div>
    <div class="stat"><div class="n" style="color:#d97706">$${totalPending.toLocaleString()}</div><div class="l">Pending</div></div>
    <div class="stat"><div class="n">$${totalAll.toLocaleString()}</div><div class="l">Total Requested</div></div>
  </div>
  <table><thead><tr><th>ID</th><th>Description</th><th>Category</th><th>Amount</th><th>Status</th><th>Notes</th></tr></thead>
  <tbody>${rows}</tbody></table>
  </body></html>`);
  win.document.close();
}

// ═══════════════════════════════════════════════════
//   INIT
// ═══════════════════════════════════════════════════

// Close job dropdown on outside click
document.addEventListener('click', (e) => {
  const dd = document.getElementById('job-dropdown');
  const btn = document.getElementById('job-selector-btn');
  if (!dd.classList.contains('hidden') && !dd.contains(e.target) && !btn.contains(e.target)) {
    dd.classList.add('hidden');
  }
});

// ESC closes any open modal; click on modal backdrop also closes
document.addEventListener('keydown', (e) => {
  if (e.key !== 'Escape') return;
  closeIntakeModal();
  closePunchModal();
  closeSupplementModal();
  closeCallbackModal(); // v38
});

['intake-modal','punch-modal','supplement-modal','callback-modal'].forEach(id => {
  document.getElementById(id)?.addEventListener('click', function(e) {
    if (e.target === this) {
      closeIntakeModal();
      closePunchModal();
      closeSupplementModal();
      closeCallbackModal(); // v38
    }
  });
});


// ═══════════════════════════════════════════════════
//   LOADING SKELETON
// ═══════════════════════════════════════════════════
function showSkeleton(rows=4) {
  document.getElementById('main-content').innerHTML = `
    <div class="tab-fade max-w-5xl mx-auto space-y-4">
      <div class="grid grid-cols-5 gap-4">
        ${Array(5).fill(0).map(()=>'<div class="skeleton h-24 rounded-2xl"></div>').join('')}
      </div>
      <div class="grid grid-cols-12 gap-5">
        <div class="col-span-8 skeleton h-64 rounded-2xl"></div>
        <div class="col-span-4 space-y-4">
          <div class="skeleton h-36 rounded-2xl"></div>
          <div class="skeleton h-24 rounded-2xl"></div>
        </div>
      </div>
    </div>`;
}

// ─── v39 module injected below ───
// ═══════════════════════════════════════════════════
//   v39: AI AGENTS ORCHESTRATION HUB
//   Unified panel for the AI Automation Assets bundle.
//   Order is always Gauge → Shift → Anchor (locked).
//   Storage: additive `state.agents` inside acc_state_v3 — no key bump.
//   Sync: primary = each agent's n8n daily digest; fallback = weekly VA entry here.
// ═══════════════════════════════════════════════════

const AGENT_DEFS = [
  { key:'leads',     label:'Gauge — Lead Qualifier',      accent:'#10b981', icon:'fa-filter',
    kpis:[ ['leadsCaptured','Leads (Month)'], ['hotLeads','Hot Leads'], ['__qualRate','Qualification Rate'], ['consultsBooked','Consults Booked'] ],
    queueKey:'hotQueue',  queueTitle:'HOT Leads Awaiting Contact', queueNote:'call within minutes — the clock is running',
    emptyText:'No HOT leads waiting. Gauge is sorting everything else automatically.' },
  { key:'support',   label:'Shift — Customer Service',    accent:'#3b82f6', icon:'fa-headset',
    kpis:[ ['conversationsHandled','Conversations (Month)'], ['__resRate','Auto-Resolution Rate'], ['jobStatusLookups','Status Lookups Served'], ['__openEsc','Open Escalations'] ],
    queueKey:'escalationQueue', queueTitle:'Open Escalations', queueNote:'a human engages within minutes',
    emptyText:'No open escalations. Shift is handling everything else automatically.' },
  { key:'retention', label:'Anchor — Retention Recovery', accent:'#8b5cf6', icon:'fa-anchor',
    kpis:[ ['atRiskCount','At-Risk Customers'], ['winbacksInFlight','Win-Backs In Flight'], ['__recovered','Recovered (Month)'], ['__saveRate','Cancel Save Rate'] ],
    queueKey:'saveQueue', queueTitle:'Open Save Opportunities', queueNote:'respond same business day',
    emptyText:'No open save opportunities. Anchor is handling everything else automatically.' }
];

const AGENT_KPI_DEFAULTS = {
  leads:     { leadsCaptured:0, hotLeads:0, warmLeads:0, consultsBooked:0 },
  support:   { conversationsHandled:0, autoResolved:0, jobStatusLookups:0, fallback3B:0 },  // CR-07: guardrailVerified tracked on the support agent object (see ensureAgents)
  // CR-29: atRiskCount is derived against state.settings.purchaseCycleDays (default 365 for restoration).
  // Tiers: ACTIVE ≤1× · COOLING 1–1.5× · AT-RISK 1.5–2× · LAPSED >2×. n8n digest computes tiers using this cycle; VA fallback uses the same value.
  retention: { atRiskCount:0, winbacksInFlight:0, recoveredCount:0, recoveredRevenue:0, cancelRequests:0, cancelsSaved:0 }
};

function ensureAgents() {
  if (!state.agents) state.agents = {};
  AGENT_DEFS.forEach(d => {
    const a = state.agents[d.key] = state.agents[d.key] || {};
    a.kpis = Object.assign({}, AGENT_KPI_DEFAULTS[d.key], a.kpis || {});
    if (!Array.isArray(a[d.queueKey])) a[d.queueKey] = [];
    if (typeof a.stability !== 'number') a.stability = 0;      // Day-30 Stability Score (0–100)
    if (typeof a.retainer !== 'boolean') a.retainer = false;   // Growth Retainer active?
    if (!a.updatedAt) a.updatedAt = null;                      // last n8n digest / VA sync
  });
  // CR-07: guardrail verification timestamp for the Shift/support agent
  if (state.agents.support && typeof state.agents.support.guardrailVerified === 'undefined') state.agents.support.guardrailVerified = null;
  const m = state.agents.meta = state.agents.meta || {};
  if (!m.viewMode) m.viewMode = 'owner';                       // 'owner' | 'va'
  if (!Array.isArray(state.agentsLog)) state.agentsLog = [];   // append-only orchestration log
}

function agentsLog(msg) {
  state.agentsLog.push(`[${new Date().toISOString().slice(0,16).replace('T',' ')}] ${msg}`);
  if (state.agentsLog.length > 200) state.agentsLog = state.agentsLog.slice(-200);
}

function agentEsc(s) {
  return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);
}

function agentDerived(key, k, a) {
  switch (key) {
    case '__qualRate':  return a.kpis.leadsCaptured > 0 ? Math.round(((a.kpis.hotLeads + a.kpis.warmLeads) / a.kpis.leadsCaptured) * 100) + '%' : '—';
    case '__resRate':   return a.kpis.conversationsHandled > 0 ? Math.round((a.kpis.autoResolved / a.kpis.conversationsHandled) * 100) + '%' : '—';
    case '__openEsc':   return (a.escalationQueue || []).length;
    case '__recovered': return '$' + Number(a.kpis.recoveredRevenue || 0).toLocaleString() + ' · ' + (a.kpis.recoveredCount || 0);
    case '__saveRate':  return a.kpis.cancelRequests > 0 ? Math.round((a.kpis.cancelsSaved / a.kpis.cancelRequests) * 100) + '%' : '—';
    default:            return a.kpis[key] ?? 0;
  }
}

function agentFreshness(a) {
  if (!a.updatedAt) return { text:'not yet synced', stale:true };
  const days = (Date.now() - new Date(a.updatedAt).getTime()) / 86400000;
  return { text:'synced ' + new Date(a.updatedAt).toLocaleDateString(), stale: days > 8 };
}

function agentStabilityBadge(s) {
  const cert = s >= 80;
  return `<span class="px-2.5 py-1 rounded-lg text-[10px] font-semibold ${cert ? 'bg-emerald-500/15 text-emerald-400' : s > 0 ? 'bg-amber-500/15 text-amber-400' : 'bg-slate-700/40 text-slate-500'}">
    Stability ${s || '—'}${s ? '/100' : ''}${cert ? ' · CERTIFIED' : ''}</span>`;
}

function renderAgentCard(d) {
  try {
    const a = state.agents[d.key];
    const fresh = agentFreshness(a);
    const queue = a[d.queueKey] || [];
    const va = state.agents.meta.viewMode === 'va';
    return `
    <div class="card-bg rounded-2xl p-5">
      <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
        <h3 class="font-semibold text-white text-sm flex items-center gap-2">
          <i class="fas ${d.icon} text-xs" style="color:${d.accent}"></i>${agentEsc(d.label)}
        </h3>
        <div class="flex items-center gap-2">
          ${agentStabilityBadge(a.stability)}
          <span class="text-[10px] ${fresh.stale ? 'text-amber-400' : 'text-slate-600'}">${fresh.text}${fresh.stale ? ' · STALE' : ''}</span>
        </div>
      </div>
      ${d.key === 'support' ? `
      <div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-3 py-2 mb-4 -mt-1">
        <span class="text-[10px] text-slate-400"><i class="fas fa-shield-halved text-[9px] mr-1.5" style="color:${a.guardrailVerified ? '#10b981' : '#f59e0b'}"></i>Guardrail Last Verified: <span class="${a.guardrailVerified ? 'text-slate-300' : 'text-amber-400'}">${a.guardrailVerified ? new Date(a.guardrailVerified).toLocaleDateString() + ' ' + new Date(a.guardrailVerified).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : 'Never — verify before go-live'}</span></span>
        ${va ? `<button onclick="verifyGuardrail()" class="text-[10px] bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-2.5 py-1 rounded-lg font-medium text-slate-300 mob-tap"><i class="fas fa-check text-[8px] mr-1"></i>Verify Now</button>` : ''}
      </div>` : ''}
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
        ${d.kpis.map(([key,label]) => `
          <div class="bg-slate-800/40 rounded-xl p-3">
            <div class="stat-n text-xl font-bold" style="color:${d.accent}">${agentEsc(agentDerived(key, key, a))}</div>
            <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">${agentEsc(label)}</div>
          </div>`).join('')}
      </div>
      <div class="border-t border-slate-800 pt-3">
        <p class="text-[11px] font-semibold text-slate-300 mb-2">${agentEsc(d.queueTitle)} <span class="text-slate-600 font-normal">· ${agentEsc(d.queueNote)}</span></p>
        ${queue.length ? queue.map(item => `
          <div class="flex items-center justify-between bg-slate-800/40 rounded-xl px-3 py-2.5 mb-1.5">
            <div class="min-w-0">
              <p class="text-slate-300 text-xs font-medium truncate">${agentEsc(item.name)}</p>
              <p class="text-slate-500 text-[10px] truncate">${agentEsc(item.note || '')}</p>
            </div>
            <div class="text-right flex-shrink-0 ml-3">
              <span class="px-2 py-0.5 rounded-lg text-[9px] font-semibold" style="background:${d.accent}22;color:${d.accent}">${agentEsc(item.tag)}</span>
              <p class="text-[9px] text-slate-600 mt-0.5">${agentEsc(item.ageHours)}h open</p>
            </div>
          </div>`).join('')
        : `<p class="text-slate-600 text-[11px]">${agentEsc(d.emptyText)}</p>`}
      </div>
      ${va ? `
      <div class="border-t border-slate-800 pt-3 mt-3">
        <button onclick="openAgentSync('${d.key}')" class="text-[11px] bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-3 py-1.5 rounded-lg font-medium text-slate-300">
          <i class="fas fa-rotate text-[9px] mr-1.5"></i>Log Weekly Sync
        </button>
      </div>` : ''}
    </div>`;
  } catch(e) {
    console.error('Agent card render error (' + d.key + '):', e);
    return `<div class="card-bg rounded-2xl p-5"><p class="text-slate-500 text-xs">This agent panel hit a render error — data is safe. Check console and re-sync.</p></div>`;
  }
}

function agentsRoi() {
  const L = state.agents.leads.kpis, S = state.agents.support.kpis, R = state.agents.retention.kpis;
  const recovered = Number(R.recoveredRevenue || 0);
  const savedCancels = Number(R.cancelsSaved || 0);
  const hoursSaved = Math.round(Number(S.autoResolved || 0) * 6 / 60); // ~6 min per auto-resolved conversation
  const hotInPlay = Number(L.hotLeads || 0);
  // v39.2: approved supplement $ recaptured this period (restoration revenue protection)
  let supplementsRecaptured = 0;
  try {
    supplementsRecaptured = state.jobs.reduce((s,j) =>
      s + (j.insurance?.supplements?.filter(p=>p.status==='Approved').reduce((a,p)=>a+(p.amount||0),0) || 0), 0);
  } catch(e) { supplementsRecaptured = 0; }
  return { recovered, savedCancels, hoursSaved, hotInPlay, supplementsRecaptured };
}

function renderAgents() {
  ensureAgents();
  const mc = document.getElementById('main-content');
  if (!mc) return;
  const va = state.agents.meta.viewMode === 'va';
  const roi = agentsRoi();
  // v40 MODULAR: map sidebar keys (gauge/shift/anchor) to AGENT_DEFS keys (leads/support/retention).
  // Empty array OR all three = full suite (backward-compatible). A subset shows only those agents.
  const __KEYMAP = { gauge:'leads', shift:'support', anchor:'retention' };
  const __aa = Array.isArray(state.activeAgents) ? state.activeAgents : [];
  const __ownsKey = defKey => __aa.length === 0 ? true : __aa.some(k => __KEYMAP[k] === defKey);
  const ownedDefs = AGENT_DEFS.filter(d => __ownsKey(d.key));
  const unownedDefs = AGENT_DEFS.filter(d => !__ownsKey(d.key));
  const certified = ownedDefs.filter(d => state.agents[d.key].stability >= 80);
  const __gGreen = guardrailIsGreen();  // CR-07
  const retainerEligible = certified.filter(d => !state.agents[d.key].retainer && __gGreen);

  mc.innerHTML = `
  <div class="tab-fade max-w-6xl mx-auto space-y-5 p-2">

    <!-- Header: bundle frame + view toggle -->
    <div class="flex items-center justify-between flex-wrap gap-3">
      <div>
        <h2 class="text-white font-semibold text-base">AI Automation Assets · Gauge · Shift · Anchor</h2>
        <p class="text-slate-500 text-xs mt-0.5">Unified orchestration hub — every number below syncs from each agent's n8n daily digest (primary) or the weekly review (fallback).</p>
      </div>
      <div class="flex items-center gap-1.5 bg-slate-800/60 rounded-xl p-1">
        <button onclick="setAgentView('owner')" class="px-3 py-1.5 rounded-lg text-[11px] font-medium transition-all ${!va ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:text-slate-200'}">Owner</button>
        <button onclick="setAgentView('va')" class="px-3 py-1.5 rounded-lg text-[11px] font-medium transition-all ${va ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:text-slate-200'}">VA</button>
      </div>
    </div>

    ${!va && retainerEligible.length ? `
    <!-- Growth Retainer trigger: fires only on certification -->
    <div class="rounded-2xl p-4 border border-emerald-500/25 bg-emerald-500/5 flex items-center justify-between flex-wrap gap-3">
      <div class="flex items-center gap-3">
        <i class="fas fa-arrow-trend-up text-emerald-400"></i>
        <div>
          <p class="text-emerald-300 text-xs font-semibold">${retainerEligible.map(d => d.label.split(' — ')[0]).join(' + ')} certified at Stability 80+ — Growth Retainer window is open.</p>
          <p class="text-slate-500 text-[11px] mt-0.5">30 days of verified performance is the moment to lock in ongoing optimization ($397–$597/mo). Present at certification, not before.</p>
        </div>
      </div>
    </div>` : ''}

    <!-- Stability overview + ROI auditor -->
    <div class="grid grid-cols-12 gap-5">
      <div class="col-span-12 ${va ? '' : 'lg:col-span-7'} card-bg rounded-2xl p-5">
        <h3 class="font-semibold text-white text-sm mb-3">Stability Score Overview <span class="text-slate-600 font-normal text-[10px]">· 80+ certifies and closes the Done-Right implementation window</span></h3>
        <div class="grid grid-cols-3 gap-3">
          ${ownedDefs.map(d => {
            const s = state.agents[d.key].stability;
            return `<div class="bg-slate-800/40 rounded-xl p-3 text-center">
              <div class="stat-n text-2xl font-bold" style="color:${s >= 80 ? '#10b981' : s > 0 ? '#f59e0b' : '#475569'}">${s || '—'}</div>
              <div class="text-[9px] text-slate-500 uppercase tracking-wider mt-1">${agentEsc(d.label.split(' — ')[0])}</div>
              <div class="text-[9px] mt-1 ${s >= 80 ? 'text-emerald-400' : 'text-slate-600'}">${s >= 80 ? 'Certified' : s > 0 ? 'In Done-Right window' : 'Pre-launch'}</div>
            </div>`;
          }).join('')}
        </div>
      </div>
      ${!va ? `
      <div class="col-span-12 lg:col-span-5 card-bg rounded-2xl p-5">
        <h3 class="font-semibold text-white text-sm mb-3">ROI Auditor <span class="text-slate-600 font-normal text-[10px]">· current month, from synced agent data</span></h3>
        <div class="grid grid-cols-2 gap-3">
          <div class="bg-slate-800/40 rounded-xl p-3"><div class="stat-n text-xl font-bold text-emerald-400">$${roi.recovered.toLocaleString()}</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Revenue Recovered (Anchor)</div></div>
          <div class="bg-slate-800/40 rounded-xl p-3"><div class="stat-n text-xl font-bold text-emerald-400">${roi.savedCancels}</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Cancellations Saved</div></div>
          <div class="bg-slate-800/40 rounded-xl p-3"><div class="stat-n text-xl font-bold text-blue-400">${roi.hoursSaved}h</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Owner Hours Saved (Shift)</div></div>
          <div class="bg-slate-800/40 rounded-xl p-3"><div class="stat-n text-xl font-bold" style="color:#10b981">${roi.hotInPlay}</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">Hot Leads In Play (Gauge)</div></div>
        </div>
        <p class="text-[9px] text-slate-600 mt-2.5">Hours saved estimated at ~6 min per auto-resolved conversation. Recovered revenue is logged actuals from the Pulse tracker.</p>
      </div>` : ''}
    </div>

    <!-- The three agents — locked order -->
    ${ownedDefs.map(renderAgentCard).join('')}

    <!-- v40: upgrade prompts for agents not in the active package (owner view only) -->
    ${!va && unownedDefs.length ? `
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-1">Expand Your AI Automation Suite</h3>
      <p class="text-[11px] text-slate-500 mb-4">Add agents individually or upgrade to the full Gauge · Shift · Anchor stack.</p>
      <div class="grid md:grid-cols-${Math.min(unownedDefs.length,3)} gap-4">
        ${unownedDefs.map(d => {
          const desc = {
            leads:'Qualify inbound leads in real time. HOT leads routed to you within minutes — before they call the next contractor.',
            support:'Deflect repetitive inbound automatically. Homeowners get answers within minutes; your crew keeps working.',
            retention:'Turn closed jobs into repeat revenue. Backdated win-back queue, close-cycle tiers, and save-flow — automated.'
          }[d.key] || '';
          return `<div class="rounded-2xl p-4" style="border:1px solid ${d.accent}26;background:${d.accent}0d">
            <i class="fas ${d.icon} text-sm mb-2" style="color:${d.accent}"></i>
            <p class="text-sm font-semibold text-white mb-1">${agentEsc(d.label)}</p>
            <p class="text-[11px] text-slate-500 mb-3">${agentEsc(desc)}</p>
            <p class="text-[10px] text-slate-600">Included in Starter Bundle ($2,997–$4,997 setup, Done-Right 30-day implementation included)</p>
          </div>`;
        }).join('')}
      </div>
    </div>` : ''}

    <!-- Orchestration & schedule -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-3 flex items-center gap-2"><div class="pulse-dot"></div>Orchestration & Sync Schedule</h3>
      <div class="space-y-2 text-xs">
        ${[
          ['Gauge n8n', 'Real-time scoring + HOT alerts within minutes · daily 5pm digest → this panel'],
          ['Shift n8n', 'Real-time escalation routing within minutes · daily 5pm digest → this panel'],
          ['Anchor n8n', 'Daily 7am Pulse scan + enrollment · digest → this panel'],
          ['VA weekly review', 'Every Monday: verify all three syncs fresh, update outcomes, clear handled queue items'],
          ['Day-30 reviews', 'Stability scoring per agent runbook · 80+ certifies · enter score in VA view']
        ].map(([k,v]) => `
          <div class="flex items-start justify-between bg-slate-800/40 rounded-xl px-4 py-2.5 gap-3">
            <span class="text-slate-300 font-medium whitespace-nowrap">${k}</span>
            <span class="text-slate-500 text-right">${v}</span>
          </div>`).join('')}
      </div>
    </div>

    <!-- Orchestration log -->
    <div class="card-bg rounded-2xl p-5">
      <h3 class="font-semibold text-white text-sm mb-3">Orchestration Log <span class="text-slate-600 font-normal text-[10px]">· append-only, last 200 events</span></h3>
      ${state.agentsLog.length
        ? `<div class="space-y-1 max-h-48 overflow-y-auto">${state.agentsLog.slice().reverse().map(l => `<p class="text-[10px] text-slate-500 font-mono">${agentEsc(l)}</p>`).join('')}</div>`
        : '<p class="text-slate-600 text-[11px]">No events yet. Syncs, stability entries, and view changes log here.</p>'}
    </div>
  </div>`;
}

// ═══════════════════════════════════════════════════
//   v40: AGENT DEPTH — sidebar focus + deep per-agent views
//   All additive. Core data layer (importer/scanner/stability) untouched.
// ═══════════════════════════════════════════════════

let focusedAgent = null;  // 'gauge' | 'shift' | 'anchor' | null

function switchAgentFocus(sidebarKey) {
  focusedAgent = sidebarKey;
  currentTab = 'agents_' + sidebarKey;
  const titles = { gauge:'Gauge — Lead Qualifier', shift:'Shift — Customer Service', anchor:'Anchor — Retention Recovery' };
  const pt = document.getElementById('page-title'); if (pt) pt.textContent = titles[sidebarKey] || 'AI Agent';
  if (typeof clearInterval === 'function' && typeof scannerInterval !== 'undefined') clearInterval(scannerInterval);
  renderSidebar(currentTab);
  if (typeof syncHeaderToJob === 'function') syncHeaderToJob();
  const mc = document.getElementById('main-content');
  if (mc) mc.innerHTML = '<div class="tab-fade max-w-4xl mx-auto space-y-4 p-2"><div class="grid grid-cols-4 gap-3">' + Array(4).fill('<div class="skeleton h-16 rounded-2xl"></div>').join('') + '</div><div class="skeleton h-56 rounded-2xl"></div><div class="skeleton h-40 rounded-2xl"></div></div>';
  setTimeout(() => { try { renderAgentFocus(sidebarKey); } catch(e) { console.error('Agent focus render error:', e); } }, 40);
}

function renderAgentFocus(sidebarKey) {
  ensureAgents();
  const mc = document.getElementById('main-content');
  if (!mc) return;
  const defKey = ({ gauge:'leads', shift:'support', anchor:'retention' })[sidebarKey];
  const a = state.agents[defKey];
  const d = AGENT_DEFS.find(x => x.key === defKey);
  if (!a || !d) { switchTab('agents'); return; }
  // Polish: if this agent isn't in the active package (e.g. toggled off while focused), fall back to the hub.
  const __aa = Array.isArray(state.activeAgents) ? state.activeAgents : [];
  if (__aa.length && !__aa.includes(sidebarKey)) { switchTab('agents'); return; }
  const va = state.agents.meta.viewMode === 'va';
  const fresh = agentFreshness(a);
  const bodyFn = { anchor:renderAnchorFocus, shift:renderShiftFocus, gauge:renderGaugeFocus };
  const body = bodyFn[sidebarKey] ? bodyFn[sidebarKey](a, va) : '';
  mc.innerHTML = `
  <div class="tab-fade max-w-4xl mx-auto space-y-5 p-2">
    <button onclick="switchTab('agents')" class="flex items-center gap-1.5 text-xs text-slate-500 hover:text-emerald-400 transition-colors group -mb-1">
      <i class="fas fa-chevron-left text-[9px] group-hover:-translate-x-0.5 transition-transform"></i> Back to AI Agents Hub
    </button>
    <div class="flex items-center justify-between flex-wrap gap-3">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-2xl flex items-center justify-center" style="background:${d.accent}22"><i class="fas ${d.icon}" style="color:${d.accent}"></i></div>
        <div>
          <h2 class="text-white font-semibold text-base">${agentEsc(d.label)}</h2>
          <p class="text-slate-500 text-[11px] mt-0.5">${fresh.text}${fresh.stale ? ' · <span class="text-amber-400">STALE — sync needed</span>' : ''}</p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        ${agentStabilityBadge(a.stability)}
        <div class="flex items-center gap-1 bg-slate-800/60 rounded-xl p-1">
          <button onclick="setAgentView('owner')" class="px-3 py-1.5 rounded-lg text-[11px] font-medium transition-all ${!va ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:text-slate-200'}">Owner</button>
          <button onclick="setAgentView('va')" class="px-3 py-1.5 rounded-lg text-[11px] font-medium transition-all ${va ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:text-slate-200'}">VA</button>
        </div>
      </div>
    </div>
    ${body}
  </div>`;
}

// ── ANCHOR (highest priority): tier breakdown + full win-back queue + queue actions ──
function renderAnchorFocus(a, va) {
  const queue = a.saveQueue || [];
  const book = a.customerBook || [];
  const tiers = { ACTIVE:0, COOLING:0, 'AT-RISK':0, LAPSED:0, 'NO CONTACT':0 };
  book.forEach(c => { const t = c.tier || 'NO CONTACT'; tiers[t] = (tiers[t]||0) + 1; });
  const cycle = (state.settings && state.settings.purchaseCycleDays) || 365;
  let h = '<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">';
  h += [
    [a.kpis.atRiskCount||queue.length, 'Win-Back Queue', '#8b5cf6', 'fa-users'],
    [a.kpis.winbacksInFlight||0, 'Win-Backs In Flight', '#a78bfa', 'fa-paper-plane'],
    ['$'+(a.kpis.recoveredRevenue||0).toLocaleString(), 'Recovered (Month)', '#10b981', 'fa-hand-holding-dollar'],
    [a.kpis.cancelsSaved||0, 'Cancels Saved', '#34d399', 'fa-rotate-left']
  ].map(([v,l,c,ic]) => '<div class="card-bg kpi-card rounded-2xl p-4"><i class="fas '+ic+' text-xs mb-2" style="color:'+c+'"></i><div class="text-2xl font-bold" style="color:'+c+'">'+v+'</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">'+l+'</div></div>').join('');
  h += '</div>';
  if (book.length) {
    h += '<div class="card-bg rounded-2xl p-5 mb-5"><h4 class="font-semibold text-white text-sm mb-3">Customer Retention Tiers <span class="text-slate-600 font-normal text-[10px]">· '+book.length+' customers · '+cycle+'-day cycle</span></h4><div class="grid grid-cols-5 gap-2 mb-4">';
    h += [
      ['ACTIVE', tiers.ACTIVE, '#10b981', 'On cycle'],
      ['COOLING', tiers.COOLING, '#f59e0b', '1-1.5x'],
      ['AT-RISK', tiers['AT-RISK'], '#f87171', '1.5-2x'],
      ['LAPSED', tiers.LAPSED, '#ef4444', '2x+'],
      ['NO CONTACT', tiers['NO CONTACT']||0, '#8b5cf6', 'Never touched']
    ].map(([t,n,c,sub]) => '<div class="bg-slate-800/40 rounded-xl p-3 text-center"><div class="text-xl font-bold" style="color:'+c+'">'+n+'</div><div class="text-[9px] text-slate-500 font-semibold uppercase mt-0.5">'+t+'</div><div class="text-[8px] text-slate-700 mt-0.5">'+sub+'</div></div>').join('');
    h += '</div><div class="bg-slate-800/40 rounded-xl px-4 py-2.5"><p class="text-[10px] text-slate-500"><i class="fas fa-info-circle text-violet-400 mr-1.5"></i>Close-cycle primary · last contact shown as secondary context on each win-back card</p></div></div>';
  }
  h += '<div class="card-bg rounded-2xl p-5"><div class="flex items-center justify-between mb-3"><h4 class="font-semibold text-white text-sm">Open Save Opportunities <span class="text-slate-600 font-normal text-[10px]">· respond same business day</span></h4>'+(queue.length?'<span class="text-[10px] text-slate-500">'+queue.length+' open</span>':'')+'</div>';
  if (!va && queue.length) h += '<button onclick="setAgentView(\'va\')" class="w-full mb-3 flex items-center justify-center gap-2 bg-slate-800/40 hover:bg-slate-800/70 border border-slate-700/60 hover:border-violet-500/30 transition-all rounded-xl px-4 py-2.5 text-[11px] text-slate-400 hover:text-violet-300 mob-tap"><i class="fas fa-hand-pointer text-[10px]"></i>Owner view is read-only — switch to VA view to work this queue (mark saved, skip)</button>';
  if (queue.length) {
    h += queue.map((item,i) => {
      const bg = item.tag==='LAPSED'?'rgba(239,68,68,.15)':item.tag==='AT-RISK'?'rgba(248,113,113,.15)':'rgba(139,92,246,.15)';
      const fg = item.tag==='LAPSED'?'#ef4444':item.tag==='AT-RISK'?'#f87171':'#a78bfa';
      return '<div class="flex items-start justify-between bg-slate-800/40 rounded-xl px-3.5 py-3 mb-2"><div class="min-w-0 flex-1"><div class="flex items-center gap-2 mb-0.5"><span class="text-[9px] px-2 py-0.5 rounded-lg font-bold" style="background:'+bg+';color:'+fg+'">'+agentEsc(item.tag)+'</span><p class="text-white text-xs font-medium truncate">'+agentEsc(item.name)+'</p></div><p class="text-slate-500 text-[10px]">'+agentEsc(item.note||'')+'</p></div>'+(va?'<div class="flex-shrink-0 ml-3 flex gap-1.5"><button onclick="markSaveDone('+i+')" class="text-[10px] bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-2.5 py-1.5 rounded-lg font-medium mob-tap">✓ Saved</button><button onclick="dismissSaveItem('+i+')" class="text-[10px] bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-2.5 py-1.5 rounded-lg text-slate-400 mob-tap">Skip</button></div>':'')+'</div>';
    }).join('');
  } else {
    h += '<div class="text-center py-8"><i class="fas fa-anchor text-3xl text-slate-700 mb-3"></i><p class="text-slate-600 text-xs">No open save opportunities — Anchor is monitoring automatically.<br>Import your customer list to populate the win-back queue.</p></div>';
  }
  h += '</div>';
  if (!va) h += '<div class="card-bg rounded-2xl p-4 text-center"><p class="text-[11px] text-slate-500">Weekly performance &amp; Day-30 stability are logged in <button onclick=\'setAgentView(\"va\")\' class="text-violet-400 hover:text-violet-300 font-medium underline-offset-2 hover:underline mob-tap">VA view</button>.</p></div>';
  if (va) {
    h += '<div class="card-bg rounded-2xl p-5"><h4 class="font-semibold text-white text-sm mb-3">Log Weekly Anchor Sync</h4><div class="grid md:grid-cols-3 gap-3 mb-3"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">At-Risk Count</label><input type="number" id="anc-atrisk" min="0" value="'+(a.kpis.atRiskCount||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Win-Backs In Flight</label><input type="number" id="anc-inflight" min="0" value="'+(a.kpis.winbacksInFlight||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Revenue Recovered ($)</label><input type="number" id="anc-recovered" min="0" value="'+(a.kpis.recoveredRevenue||0)+'"></div></div><div class="grid md:grid-cols-2 gap-3 mb-4"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Cancels Saved</label><input type="number" id="anc-saves" min="0" value="'+(a.kpis.cancelsSaved||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Day-30 Stability (0-100)</label><input type="number" id="anc-stability" min="0" max="100" value="'+(a.stability||0)+'"></div></div><button onclick="saveAgentSync(\'retention\',{atRiskCount:+document.getElementById(\'anc-atrisk\').value,winbacksInFlight:+document.getElementById(\'anc-inflight\').value,recoveredRevenue:+document.getElementById(\'anc-recovered\').value,cancelsSaved:+document.getElementById(\'anc-saves\').value},+document.getElementById(\'anc-stability\').value)" class="bg-violet-600 hover:bg-violet-500 active:scale-95 transition-all px-5 py-2.5 rounded-xl text-xs font-semibold mob-tap">Save Anchor Sync</button></div>';
  }
  return h;
}

// ── SHIFT: resolution metrics + guardrail + escalation queue ──
function renderShiftFocus(a, va) {
  const queue = a.escalationQueue || [];
  const resRate = a.kpis.conversationsHandled > 0 ? Math.round(a.kpis.autoResolved / a.kpis.conversationsHandled * 100) : 0;
  let h = '<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">';
  h += [
    [a.kpis.conversationsHandled||0,'Conversations (Month)','#3b82f6','fa-comments'],
    [resRate+'%','Auto-Resolution Rate','#60a5fa','fa-bolt'],
    [a.kpis.jobStatusLookups||0,'Status Lookups','#93c5fd','fa-magnifying-glass'],
    [queue.length,'Open Escalations',queue.length>0?'#f87171':'#93c5fd','fa-triangle-exclamation']
  ].map(([v,l,c,ic]) => '<div class="card-bg kpi-card rounded-2xl p-4"><i class="fas '+ic+' text-xs mb-2" style="color:'+c+'"></i><div class="text-2xl font-bold" style="color:'+c+'">'+v+'</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">'+l+'</div></div>').join('');
  h += '</div>';
  h += '<div class="card-bg rounded-2xl p-4 mb-5 flex items-center justify-between flex-wrap gap-3"><div class="flex items-center gap-3"><i class="fas fa-shield-halved text-sm" style="color:'+(a.guardrailVerified&&guardrailIsGreen()?'#10b981':'#f59e0b')+'"></i><div><p class="text-sm font-semibold text-white">Insurance Language Guardrail</p><p class="text-[11px] text-slate-500 mt-0.5">Shift never interprets policy language. Coverage questions flagged to you within minutes.</p></div></div><div class="text-right"><p class="text-[10px] '+(a.guardrailVerified?'text-slate-400':'text-amber-400')+'">'+(a.guardrailVerified?'Verified '+new Date(a.guardrailVerified).toLocaleDateString():'Never — verify before go-live')+'</p>'+(va?'<button onclick="verifyGuardrail()" class="mt-1.5 text-[10px] bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-3 py-1.5 rounded-lg font-medium text-slate-300 mob-tap"><i class="fas fa-check text-[8px] mr-1"></i>Verify Now</button>':'')+'</div></div>';
  h += '<div class="card-bg rounded-2xl p-5"><h4 class="font-semibold text-white text-sm mb-3">Open Escalations <span class="text-slate-600 font-normal text-[10px]">· a human engages within minutes</span></h4>';
  h += queue.length ? queue.map(item => '<div class="flex items-start justify-between bg-slate-800/40 rounded-xl px-3.5 py-3 mb-2"><div class="min-w-0 flex-1"><p class="text-white text-xs font-medium">'+agentEsc(item.name)+'</p><p class="text-slate-500 text-[10px] mt-0.5">'+agentEsc(item.note||'')+'</p><p class="text-slate-700 text-[9px] mt-0.5">'+item.ageHours+'h open</p></div><span class="px-2 py-0.5 rounded-lg text-[9px] font-semibold ml-3 flex-shrink-0 bg-blue-500/15 text-blue-400">'+agentEsc(item.tag)+'</span></div>').join('') : '<div class="text-center py-8"><i class="fas fa-headset text-3xl text-slate-700 mb-3"></i><p class="text-slate-600 text-xs">No open escalations — Shift is handling everything automatically.</p></div>';
  h += '</div>';
  if (!va) h += '<div class="card-bg rounded-2xl p-4 text-center"><p class="text-[11px] text-slate-500">Weekly performance &amp; Day-30 stability are logged in <button onclick=\'setAgentView(\"va\")\' class="text-blue-400 hover:text-blue-300 font-medium underline-offset-2 hover:underline mob-tap">VA view</button>.</p></div>';
  if (va) h += '<div class="card-bg rounded-2xl p-5"><h4 class="font-semibold text-white text-sm mb-3">Log Weekly Shift Sync</h4><div class="grid md:grid-cols-2 gap-3 mb-3"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Conversations Handled</label><input type="number" id="shf-conv" min="0" value="'+(a.kpis.conversationsHandled||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Auto-Resolved</label><input type="number" id="shf-auto" min="0" value="'+(a.kpis.autoResolved||0)+'"></div></div><div class="grid md:grid-cols-2 gap-3 mb-4"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Status Lookups Served</label><input type="number" id="shf-look" min="0" value="'+(a.kpis.jobStatusLookups||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Day-30 Stability (0-100)</label><input type="number" id="shf-stab" min="0" max="100" value="'+(a.stability||0)+'"></div></div><button onclick="saveAgentSync(\'support\',{conversationsHandled:+document.getElementById(\'shf-conv\').value,autoResolved:+document.getElementById(\'shf-auto\').value,jobStatusLookups:+document.getElementById(\'shf-look\').value},+document.getElementById(\'shf-stab\').value)" class="bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all px-5 py-2.5 rounded-xl text-xs font-semibold mob-tap">Save Shift Sync</button></div>';
  return h;
}

// ── GAUGE: lead funnel + HOT queue ──
function renderGaugeFocus(a, va) {
  const queue = a.hotQueue || [];
  const qualRate = a.kpis.leadsCaptured > 0 ? Math.round(a.kpis.hotLeads / a.kpis.leadsCaptured * 100) : 0;
  let h = '<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">';
  h += [
    [a.kpis.leadsCaptured||0,'Leads (Month)','#10b981','fa-users'],
    [a.kpis.hotLeads||0,'HOT Leads','#f87171','fa-fire'],
    [qualRate+'%','Qualification Rate','#34d399','fa-filter'],
    [a.kpis.consultsBooked||0,'Consults Booked','#6ee7b7','fa-calendar-check']
  ].map(([v,l,c,ic]) => '<div class="card-bg kpi-card rounded-2xl p-4"><i class="fas '+ic+' text-xs mb-2" style="color:'+c+'"></i><div class="text-2xl font-bold" style="color:'+c+'">'+v+'</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">'+l+'</div></div>').join('');
  h += '</div>';
  h += '<div class="grid grid-cols-3 gap-3 mb-5">';
  h += [
    [a.kpis.hotLeads||0,'HOT (75+)','#ef4444'],
    [a.kpis.warmLeads||0,'WARM (45-74)','#f59e0b'],
    [Math.max(0,(a.kpis.leadsCaptured||0)-(a.kpis.hotLeads||0)-(a.kpis.warmLeads||0)),'COLD / NURTURE','#60a5fa']
  ].map(([n,l,c]) => '<div class="card-bg rounded-2xl p-3 text-center"><div class="text-xl font-bold" style="color:'+c+'">'+n+'</div><div class="text-[9px] text-slate-500 uppercase tracking-wider mt-0.5">'+l+'</div></div>').join('');
  h += '</div>';
  h += '<div class="card-bg rounded-2xl p-5"><h4 class="font-semibold text-white text-sm mb-3">HOT Leads Awaiting Contact <span class="text-slate-600 font-normal text-[10px]">· call within minutes</span></h4>';
  h += queue.length ? queue.map(item => '<div class="flex items-start justify-between bg-slate-800/40 rounded-xl px-3.5 py-3 mb-2"><div class="min-w-0 flex-1"><p class="text-white text-xs font-medium">'+agentEsc(item.name)+'</p><p class="text-slate-500 text-[10px] mt-0.5">'+agentEsc(item.note||'')+'</p></div><div class="flex-shrink-0 ml-3 text-right"><span class="px-2 py-0.5 rounded-lg text-[9px] font-semibold bg-emerald-500/15 text-emerald-400">'+agentEsc(item.tag)+'</span><p class="text-[9px] text-slate-600 mt-0.5">'+item.ageHours+'h open</p></div></div>').join('') : '<div class="text-center py-8"><i class="fas fa-filter text-3xl text-slate-700 mb-3"></i><p class="text-slate-600 text-xs">No HOT leads waiting — Gauge is sorting everything automatically.</p></div>';
  h += '</div>';
  if (!va) h += '<div class="card-bg rounded-2xl p-4 text-center"><p class="text-[11px] text-slate-500">Weekly performance &amp; Day-30 stability are logged in <button onclick=\'setAgentView(\"va\")\' class="text-emerald-400 hover:text-emerald-300 font-medium underline-offset-2 hover:underline mob-tap">VA view</button>.</p></div>';
  if (va) h += '<div class="card-bg rounded-2xl p-5"><h4 class="font-semibold text-white text-sm mb-3">Log Weekly Gauge Sync</h4><div class="grid md:grid-cols-2 gap-3 mb-3"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Leads Captured</label><input type="number" id="gau-cap" min="0" value="'+(a.kpis.leadsCaptured||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">HOT Leads</label><input type="number" id="gau-hot" min="0" value="'+(a.kpis.hotLeads||0)+'"></div></div><div class="grid md:grid-cols-2 gap-3 mb-4"><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">WARM Leads</label><input type="number" id="gau-warm" min="0" value="'+(a.kpis.warmLeads||0)+'"></div><div><label class="block text-[10px] text-slate-500 mb-1.5 uppercase tracking-wider">Day-30 Stability (0-100)</label><input type="number" id="gau-stab" min="0" max="100" value="'+(a.stability||0)+'"></div></div><button onclick="saveAgentSync(\'leads\',{leadsCaptured:+document.getElementById(\'gau-cap\').value,hotLeads:+document.getElementById(\'gau-hot\').value,warmLeads:+document.getElementById(\'gau-warm\').value},+document.getElementById(\'gau-stab\').value)" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-5 py-2.5 rounded-xl text-xs font-semibold mob-tap">Save Gauge Sync</button></div>';
  return h;
}

// ── Queue actions (Anchor) — operate on saveQueue, log + persist ──
function markSaveDone(idx) {
  try {
    ensureAgents();
    const q = state.agents.retention.saveQueue || [];
    if (idx >= q.length) return;
    const __sq = q[idx]; const name = __sq.name; q.splice(idx, 1);
    state.agents.retention.kpis.cancelsSaved = (state.agents.retention.kpis.cancelsSaved||0) + 1;
    try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('agent.save_done',{agent:'retention'},{name:__sq.name,tag:__sq.tag||null}); }catch(_){/*shadow*/}
    agentsLog('Anchor: save marked complete — ' + name);
    save(); renderAgentFocus('anchor');
    toast('Marked saved — great recovery!', 'success');
  } catch(e) { console.error('markSaveDone error', e); }
}

function dismissSaveItem(idx) {
  try {
    ensureAgents();
    const q = state.agents.retention.saveQueue || [];
    if (idx >= q.length) return;
    const __sq = q[idx]; const name = q.splice(idx, 1)[0].name;
    agentsLog('Anchor: save item dismissed — ' + name);
    try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('agent.save_dismissed',{agent:'retention'},{name:__sq.name,tag:__sq.tag||null}); }catch(_){/*shadow*/}
    save(); renderAgentFocus('anchor');
  } catch(e) { console.error('dismissSaveItem error', e); }
}

// ── VA sync entry from a focus view (KPIs + stability) ──
function saveAgentSync(key, kpis, stability) {
  try {
    ensureAgents();
    const a = state.agents[key];
    Object.assign(a.kpis, kpis);
    if (typeof stability === 'number' && stability >= 0 && stability <= 100) {
      const was = a.stability >= 80;
      a.stability = stability;
      if (!was && stability >= 80) agentsLog(key.toUpperCase() + ' CERTIFIED at Stability ' + stability + ' — Growth Retainer window open');
    }
    a.updatedAt = new Date().toISOString();
    agentsLog('Agent sync saved: ' + key + ' — Stability ' + (stability||a.stability));
    save();
    const sidebarKey = ({ leads:'gauge', support:'shift', retention:'anchor' })[key];
    renderAgentFocus(sidebarKey);
    toast('Sync saved — updated', 'success');
  } catch(e) { console.error('saveAgentSync error', e); }
}


function setAgentView(mode) {
  ensureAgents();
  state.agents.meta.viewMode = mode;
  agentsLog('View switched to ' + mode.toUpperCase());
  save();
  renderAgents();
}

// VA weekly sync — minimal, prompt-driven, zero new modal surface area
function openAgentSync(key) {
  ensureAgents();
  const a = state.agents[key];
  const fields = Object.keys(AGENT_KPI_DEFAULTS[key]);
  for (const f of fields) {
    const v = prompt(`${key.toUpperCase()} · ${f} (current: ${a.kpis[f]})`, a.kpis[f]);
    if (v === null) { agentsLog(`Sync for ${key} cancelled mid-entry — no changes saved`); return; }
    const n = Number(v);
    if (!Number.isFinite(n) || n < 0) { alert('Numbers only — sync cancelled, nothing saved.'); agentsLog(`Sync for ${key} rejected: invalid value for ${f}`); return; }
    a.kpis[f] = n;
  }
  const s = prompt(`${key.toUpperCase()} · Stability Score 0–100 (current: ${a.stability}; 80+ certifies)`, a.stability);
  if (s !== null) {
    const sn = Number(s);
    if (Number.isFinite(sn) && sn >= 0 && sn <= 100) {
      const wasCertified = a.stability >= 80;
      a.stability = sn;
      if (!wasCertified && sn >= 80) agentsLog(`${key.toUpperCase()} CERTIFIED at Stability ${sn} — Growth Retainer window open`);
    }
  }
  a.updatedAt = new Date().toISOString();
  agentsLog(`Weekly sync logged for ${key}`);
  save();
  renderAgents();
}

ensureAgents(); // additive defaults on load — safe for all existing saved states


// ═══════════════════════════════════════════════════
//   v39.1: FLAGSHIP LAYER — global view toggle · certification strip · handoff card
//   All additive. Wrappers only — no legacy function bodies modified.
// ═══════════════════════════════════════════════════

function isVA() { try { ensureAgents(); return state.agents.meta.viewMode === 'va'; } catch(e) { return false; } }

function toggleViewMode() {
  ensureAgents();
  const next = isVA() ? 'owner' : 'va';
  state.agents.meta.viewMode = next;
  agentsLog('View switched to ' + next.toUpperCase() + ' (global toggle)');
  save();
  toast(next === 'va' ? 'VA view — pricing, ROI, and retainer panels hidden' : 'Owner view — full visibility restored', 'info', 3000);
  renderCurrentTab();
}

function certificationStrip() {
  try {
    ensureAgents();
    if (isVA()) return '';
    const rows = AGENT_DEFS.map(d => {
      const a = state.agents[d.key];
      const cert = a.stability >= 80;
      return { name: d.label.split(' — ')[0], cert, s: a.stability, retainer: a.retainer };
    });
    const certified = rows.filter(r => r.cert);
    const gGreen = guardrailIsGreen();  // CR-07: retainer prompt requires guardrail GREEN
    const eligible = certified.filter(r => !r.retainer && gGreen);
    return `
    <div class="card-bg rounded-2xl p-4 mt-5">
      <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
        <p class="text-sm font-semibold text-white"><i class="fas fa-shield-halved text-emerald-400 text-xs mr-2"></i>Done-Right Implementation & Certification</p>
        <button onclick="switchTab('agents')" class="text-[11px] text-emerald-400 hover:text-emerald-300 font-medium">AI Agents Hub →</button>
      </div>
      <div class="flex flex-wrap gap-2">
        ${rows.map(r => `<span class="px-2.5 py-1 rounded-lg text-[10px] font-semibold ${r.cert ? 'bg-emerald-500/15 text-emerald-400' : r.s > 0 ? 'bg-amber-500/15 text-amber-400' : 'bg-slate-700/40 text-slate-500'}">${r.name} · ${r.cert ? 'CERTIFIED ' + r.s : r.s > 0 ? 'In window · ' + r.s + '/100' : 'Pre-launch'}</span>`).join('')}
      </div>
      ${eligible.length ? `<p class="text-[11px] text-emerald-300 mt-3"><i class="fas fa-arrow-trend-up text-[10px] mr-1.5"></i>${eligible.map(r=>r.name).join(' + ')} certified — the Growth Retainer window ($397–$597/mo ongoing optimization) is open. Present it now, while 30 days of verified performance is on the screen.</p>` : (certified.length && !gGreen ? `<p class="text-[11px] text-amber-400 mt-3"><i class="fas fa-shield-halved text-[10px] mr-1.5"></i>Agents are certified, but the Shift guardrail must be re-verified (within 14 days) before the Growth Retainer prompt opens. Verify it in the AI Agents Hub.</p>` : '')}
    </div>`;
  } catch(e) { console.error('Certification strip error:', e); return ''; }
}

function handoffCard() {
  try {
    if (isVA()) return '';
    return `
    <div class="card-bg rounded-2xl p-5">
      <p class="text-sm font-semibold text-white mb-1"><i class="fas fa-rocket text-emerald-400 text-xs mr-2"></i>Deployment & Client Handoff</p>
      <p class="text-[11px] text-slate-500 mb-4">This system is fully client-owned: all data lives in this browser (localStorage), exportable below. n8n sync is optional and additive.</p>
      <div class="grid md:grid-cols-2 gap-4 mb-4">
        <div class="bg-slate-800/40 rounded-xl p-4">
          <p class="text-xs font-semibold text-slate-300 mb-2">Netlify (afterclosecare-app.netlify.app)</p>
          <ol class="text-[11px] text-slate-500 space-y-1 list-decimal list-inside">
            <li>Zip this file renamed to <span class="font-mono text-slate-400">index.html</span> at the zip ROOT — never in a subfolder</li>
            <li>Site → Deploys tab → drag the zip onto the Deploys drop zone</li>
            <li>Hard-refresh the live URL on desktop + phone, then run the QA matrix</li>
          </ol>
        </div>
        <div class="bg-slate-800/40 rounded-xl p-4">
          <p class="text-xs font-semibold text-slate-300 mb-2">Cloudflare Pages</p>
          <ol class="text-[11px] text-slate-500 space-y-1 list-decimal list-inside">
            <li>Same <span class="font-mono text-slate-400">index.html</span>-at-root zip rule</li>
            <li>Pages → project → Create deployment → upload zip</li>
            <li>Verify on the live domain — never trust previews</li>
          </ol>
        </div>
      </div>
      <div class="bg-slate-800/40 rounded-xl p-4 mb-4">
        <p class="text-xs font-semibold text-slate-300 mb-2">Certification Workflow (the handoff gate)</p>
        <p class="text-[11px] text-slate-500">Go-live QA passes → Done-Right 30-day window opens → agents sync weekly (n8n primary, VA fallback) → Day-30 Stability review per agent → <span class="text-emerald-400 font-medium">80+ certifies</span>, closes the window, and opens the Growth Retainer conversation. Certification status lives on the Dashboard strip and the AI Agents Hub.</p>
      </div>
      <p class="text-[11px] text-slate-400 mb-3 flex items-start gap-2"><i class="fas fa-lock text-emerald-400 text-[10px] mt-0.5 flex-shrink-0"></i><span>Your data is yours. Export any time. AfterCloseCare does not hold your data hostage.</span></p>
      <button onclick="exportAllData()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-5 py-2.5 rounded-xl text-xs font-semibold" aria-label="Export all data as JSON backup">
        <i class="fas fa-download text-[10px] mr-1.5"></i>Export All Data (client-owned backup)
      </button>
    </div>`;
  } catch(e) { console.error('Handoff card error:', e); return ''; }
}

// Wrappers — append, never modify
const __v391_renderDashboard = renderDashboard;
renderDashboard = function() {
  __v391_renderDashboard();
  try {
    const mc = document.getElementById('main-content');
    if (mc && mc.firstElementChild) mc.firstElementChild.insertAdjacentHTML('beforeend', certificationStrip());
  } catch(e) { console.error('Dashboard strip injection error:', e); }
};

const __v391_renderSettings = renderSettings;
renderSettings = function() {
  __v391_renderSettings();
  try {
    const mc = document.getElementById('main-content');
    if (mc && mc.firstElementChild) mc.firstElementChild.insertAdjacentHTML('beforeend', handoffCard());
  } catch(e) { console.error('Handoff card injection error:', e); }
};


// ═══════════════════════════════════════════════════
//   v39.2: DEPTH LAYER — prominent ROI Auditor + restoration upsell moments
//   Additive wrappers. isVA() gates every owner-only panel. No legacy edits.
// ═══════════════════════════════════════════════════

function dashboardRoiBand() {
  try {
    if (typeof isVA === 'function' && isVA()) return '';
    ensureAgents();
    const r = agentsRoi();
    const cards = [
      ['fa-hand-holding-dollar','#10b981','$' + Number(r.recovered).toLocaleString(), 'Revenue Recovered', 'Anchor win-backs + saves'],
      ['fa-file-invoice-dollar','#34d399','$' + Number(r.supplementsRecaptured).toLocaleString(), 'Supplements Recaptured', 'Approved this period'],
      ['fa-rotate-left','#60a5fa', r.savedCancels, 'Cancellations Saved', 'Anchor save flow'],
      ['fa-clock','#a78bfa', r.hoursSaved + 'h', 'Owner Hours Saved', 'Shift auto-resolution'],
      ['fa-fire','#f87171', r.hotInPlay, 'Hot Leads In Play', 'Gauge, awaiting contact'],
    ];
    return `
    <div class="card-bg rounded-2xl p-5 mb-5" style="border:1px solid rgba(16,185,129,0.2)">
      <div class="flex items-center justify-between flex-wrap gap-2 mb-4">
        <p class="text-sm font-semibold text-white"><i class="fas fa-chart-line text-emerald-400 text-xs mr-2"></i>ROI Auditor <span class="text-[10px] text-slate-500 font-normal">· what your AI Automation Assets returned this period</span></p>
        <button onclick="switchTab('agents')" class="text-[11px] text-emerald-400 hover:text-emerald-300 font-medium">Full breakdown →</button>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
        ${cards.map(([ic,col,val,lab,sub]) => `
          <div class="bg-slate-800/40 rounded-xl p-3.5">
            <i class="fas ${ic} text-xs mb-2" style="color:${col}"></i>
            <div class="stat-n text-xl font-bold" style="color:${col}">${val}</div>
            <div class="text-[10px] text-slate-400 font-medium mt-0.5">${lab}</div>
            <div class="text-[9px] text-slate-600 mt-0.5">${sub}</div>
          </div>`).join('')}
      </div>
    </div>`;
  } catch(e) { console.error('ROI band error:', e); return ''; }
}

function upsellNudge(kind) {
  try {
    if (typeof isVA === 'function' && isVA()) return '';
    ensureAgents();
    const certifiedCount = AGENT_DEFS.filter(d => state.agents[d.key].stability >= 80).length;
    const copy = {
      punch: ['fa-shield-halved', 'Punch lists are where post-close jobs stall — and where reviews are won or lost. The Done-Right implementation tunes your Shift agent to chase open items automatically and certifies the workflow at Stability 80+.', certifiedCount < 3],
      insurance: ['fa-file-invoice-dollar', 'Every supplement you don\'t chase is margin left on the table. The Growth Retainer ($397–$597/mo) keeps your agents tuned to surface and follow supplement opportunities month over month — opens at certification.', certifiedCount >= 1],
      warranty: ['fa-anchor', 'Warranty follow-through is retention. Anchor turns your warranty check-ins into win-backs and referrals automatically — recovering revenue from jobs you already closed.', true],
    }[kind];
    if (!copy || !copy[2]) return '';
    return `
    <div class="rounded-2xl p-4 mt-5 flex items-start gap-3" style="background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.18)">
      <i class="fas ${copy[0]} text-emerald-400 text-sm mt-0.5 flex-shrink-0"></i>
      <div class="flex-1">
        <p class="text-[11px] text-slate-300">${copy[1]}</p>
        <button onclick="switchTab('agents')" class="text-[11px] text-emerald-400 hover:text-emerald-300 font-medium mt-1.5">Open AI Agents Hub →</button>
      </div>
    </div>`;
  } catch(e) { console.error('Upsell nudge error:', e); return ''; }
}

// Inject ROI band at TOP of dashboard content (prominent), after the v39.1 cert strip wrapper runs
const __v392_renderDashboard = renderDashboard;
renderDashboard = function() {
  __v392_renderDashboard();
  try {
    const mc = document.getElementById('main-content');
    const host = mc && mc.firstElementChild;
    if (host && !host.querySelector('[data-roi-band]')) {
      const band = document.createElement('div');
      band.setAttribute('data-roi-band','1');
      band.innerHTML = dashboardRoiBand();
      if (band.firstElementChild) host.insertBefore(band.firstElementChild, host.firstElementChild);
    }
  } catch(e) { console.error('ROI band injection error:', e); }
};

function __wrapUpsell(fnName, kind) {
  if (typeof window[fnName] !== 'function') return;
  const orig = window[fnName];
  window[fnName] = function() {
    orig.apply(this, arguments);
    try {
      const mc = document.getElementById('main-content');
      if (mc && mc.firstElementChild) mc.firstElementChild.insertAdjacentHTML('beforeend', upsellNudge(kind));
    } catch(e) { console.error('Upsell wrap error ('+kind+'):', e); }
  };
}
__wrapUpsell('renderPunchlist','punch');
__wrapUpsell('renderInsurance','insurance');
__wrapUpsell('renderWarranty','warranty');


// CR-07: guardrail is GREEN only if the Shift guardrail was verified within the last 14 days.
function guardrailIsGreen() {
  try {
    ensureAgents();
    const v = state.agents.support && state.agents.support.guardrailVerified;
    if (!v) return false;
    const days = (Date.now() - new Date(v).getTime()) / 86400000;
    return days <= 14;
  } catch(e) { return false; }
}
window.guardrailIsGreen = guardrailIsGreen;

// CR-07: stamp the Shift guardrail verification time (VA/owner action).
function verifyGuardrail() {
  try {
    ensureAgents();
    state.agents.support.guardrailVerified = new Date().toISOString();
    try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('agent.guardrail_verified',{agent:'support'},{verifiedAt:state.agents.support.guardrailVerified}); }catch(_){/*shadow*/}
    agentsLog('Shift guardrail verified (insurance-language + name-match checks confirmed)');
    save();
    if (typeof toast === 'function') toast('Shift guardrail verified — timestamp updated', 'success');
    if (typeof renderCurrentTab === 'function') renderCurrentTab();
  } catch(e) { console.error('verifyGuardrail error:', e); }
}
window.verifyGuardrail = verifyGuardrail;

// ═══════════════════════════════════════════════════
//   v39.3: n8n WEBHOOK RECEIVER — real-time agent sync (replaces prompt-based VA sync)
//   One-schema contract. n8n posts to the page; VA weekly entry remains the fallback.
// ═══════════════════════════════════════════════════

const ACC_AGENT_KEYS = ['leads','support','retention'];

// Inbound contract entry point. n8n (or any integration) calls this with:
//   { agent:'leads'|'support'|'retention', kpis:{...}, queue:[...], stability:0-100 }
// Returns {ok:true} or {ok:false, error}. Never throws to the caller.
function accIngest(payload) {
  try {
    ensureAgents();
    if (!payload || typeof payload !== 'object') return { ok:false, error:'empty payload' };
    const key = payload.agent;
    if (!ACC_AGENT_KEYS.includes(key)) return { ok:false, error:'unknown agent: ' + key };
    const a = state.agents[key];
    if (payload.kpis && typeof payload.kpis === 'object') {
      for (const [k,v] of Object.entries(payload.kpis)) {
        const n = Number(v);
        if (Number.isFinite(n) && n >= 0) a.kpis[k] = n;   // validate: numeric, non-negative
      }
    }
    // queue: accept the agent's own queue key or a generic "queue"
    const qk = key==='leads'?'hotQueue':key==='support'?'escalationQueue':'saveQueue';
    const incomingQ = Array.isArray(payload.queue) ? payload.queue : (Array.isArray(payload[qk]) ? payload[qk] : null);
    if (incomingQ) {
      a[qk] = incomingQ.filter(it => it && typeof it==='object').map(it => ({
        name:String(it.name||'').slice(0,120), tag:String(it.tag||'').slice(0,40),
        ageHours:Number(it.ageHours)||0, note:String(it.note||'').slice(0,200)
      }));
    }
    if (typeof payload.stability === 'number' && payload.stability>=0 && payload.stability<=100) {
      const was = a.stability >= 80;
      a.stability = payload.stability;
      if (!was && a.stability>=80) agentsLog(key.toUpperCase()+' CERTIFIED at Stability '+a.stability+' — Growth Retainer window open');
    }
    a.updatedAt = new Date().toISOString();
    a.syncSource = 'n8n';
    agentsLog('Real-time ingest: '+key+' (n8n webhook)');
    save();
    if (typeof renderCurrentTab === 'function') renderCurrentTab();
    return { ok:true, agent:key, updatedAt:a.updatedAt };
  } catch(e) {
    console.error('accIngest error:', e);
    try { agentsLog('Ingest REJECTED: '+(e.message||'error')); save(); } catch(_) {}
    return { ok:false, error:e.message||'ingest failed' };
  }
}
window.accIngest = accIngest;

// postMessage bridge: an n8n-driven parent/iframe can push payloads with zero prompts.
// Security: only accept same-origin messages or messages explicitly tagged for ACC.
window.addEventListener('message', function(ev){
  try {
    const d = ev.data;
    if (d && d.__acc === 'ingest' && d.payload) accIngest(d.payload);
  } catch(e) { /* ignore malformed */ }
});

// Optional OUTBOUND test ping — confirms the client's n8n webhook URL is reachable.
function accTestWebhook() {
  ensureAgents();
  const url = (state.settings && state.settings.n8nWebhook || '').trim();
  if (!url) { toast('Add your n8n webhook URL in the field first', 'warning'); return; }
  toast('Pinging n8n webhook…', 'info', 2000);
  try {
    fetch(url, { method:'POST', mode:'no-cors', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ __acc:'ping', from:'command-center', ts:Date.now() }) })
      .then(()=> toast('Ping sent — check your n8n execution log to confirm receipt', 'success', 4000))
      .catch(()=> toast('Ping could not be sent — verify the URL and CORS settings', 'error', 4000));
  } catch(e) { toast('Ping failed: '+e.message, 'error'); }
}
window.accTestWebhook = accTestWebhook;

function saveWebhookUrl(v) {
  ensureAgents();
  state.settings = state.settings || {};
  state.settings.n8nWebhook = (v||'').trim();
  try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('settings.changed',null,{field:'n8nWebhook',set:!!state.settings.n8nWebhook}); }catch(_){/*shadow*/}
  save();
  agentsLog('n8n webhook URL ' + (state.settings.n8nWebhook ? 'set' : 'cleared'));
}

function realtimeSyncCard() {
  try {
    if (typeof isVA === 'function' && isVA()) return '';
    ensureAgents();
    const url = (state.settings && state.settings.n8nWebhook) || '';
    const anyLive = ACC_AGENT_KEYS.some(k => state.agents[k].syncSource === 'n8n');
    const mode = url || anyLive ? 'LIVE' : 'MANUAL';
    return `
    <div class="card-bg rounded-2xl p-5 mt-5">
      <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
        <p class="text-sm font-semibold text-white"><i class="fas fa-bolt text-emerald-400 text-xs mr-2"></i>Real-Time Sync</p>
        <span class="px-2.5 py-1 rounded-lg text-[10px] font-semibold ${mode==='LIVE'?'bg-emerald-500/15 text-emerald-400':'bg-amber-500/15 text-amber-400'}">${mode==='LIVE'?'LIVE · n8n webhook':'MANUAL · VA weekly fallback'}</span>
      </div>
      <p class="text-[11px] text-slate-500 mb-3">Connect n8n for hands-off, real-time agent updates. Your agents' daily digests post straight into this dashboard — no weekly prompt entry. Manual VA sync stays available as the fallback.</p>
      <div class="flex gap-2 mb-3">
        <input type="text" id="n8n-webhook-url" value="${url.replace(/"/g,'&quot;')}" placeholder="https://your-n8n.cloud/webhook/acc-sync"
          onchange="saveWebhookUrl(this.value)" class="flex-1 text-xs" aria-label="n8n webhook URL">
        <button onclick="accTestWebhook()" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-medium text-slate-300 whitespace-nowrap">Test Ping</button>
      </div>
      <details class="text-[11px] text-slate-500">
        <summary class="cursor-pointer hover:text-slate-300">How n8n pushes updates (copy snippet)</summary>
        <pre class="mt-2 bg-slate-900/60 rounded-lg p-3 overflow-x-auto text-[10px] text-slate-400 leading-relaxed">// In your n8n HTTP Request / Code node, post to the open dashboard tab:
window.accIngest({
  agent: "leads",            // "leads" | "support" | "retention"
  kpis:  { hotLeads: 4, leadsCaptured: 40, warmLeads: 14, consultsBooked: 11 },
  queue: [{ name:"Water loss — Maple St", tag:"HOT 88", ageHours:0.4, note:"adjuster assigned" }],
  stability: 85              // 80+ certifies, opens Growth Retainer
});
// Or postMessage from a parent/iframe:
target.postMessage({ __acc:"ingest", payload:{ agent:"support", kpis:{ conversationsHandled:120, autoResolved:96 } } }, "*");</pre>
      </details>
    </div>`;
  } catch(e) { console.error('Realtime card error:', e); return ''; }
}

// Inject the Real-Time Sync card into the AI Agents tab (additive wrapper)
const __v393_renderAgents = renderAgents;
renderAgents = function() {
  __v393_renderAgents();
  try {
    const mc = document.getElementById('main-content');
    if (mc && mc.firstElementChild) mc.firstElementChild.insertAdjacentHTML('beforeend', realtimeSyncCard());
  } catch(e) { console.error('Realtime card injection error:', e); }
};


// ═══════════════════════════════════════════════════
//   v39.4: CR-01 FIRST-RUN DATA MODAL + weekly backup reminder
// ═══════════════════════════════════════════════════

function backupDataNow() {
  try {
    if (typeof exportAllData === 'function') exportAllData();
    ensureAgents();
    state.settings = state.settings || {};
    state.settings.lastBackupAt = new Date().toISOString();
    save();
    renderBackupReminderBadge();
  } catch(e) { console.error('backupDataNow error:', e); }
}
window.backupDataNow = backupDataNow;

function dismissFirstRun() {
  try {
    ensureAgents();
    state.settings = state.settings || {};
    state.settings.welcomeSeen = true;
    try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('firstrun.acknowledged',null,{acknowledgedAt:new Date().toISOString()}); }catch(_){/*shadow*/}
    save();
    const el = document.getElementById('first-run-modal');
    if (el) el.remove();
  } catch(e) { console.error('dismissFirstRun error:', e); }
}
window.dismissFirstRun = dismissFirstRun;

function showFirstRunModal() {
  try {
    // show only for genuine first-run users who haven't seen it
    if (!ACC_IS_FIRST_RUN) return;
    if (state.settings && state.settings.welcomeSeen) return;
    if (document.getElementById('first-run-modal')) return;
    const html = `
    <div id="first-run-modal" class="fixed inset-0 z-[9990] flex items-center justify-center p-4" style="background:rgba(2,6,15,0.82);backdrop-filter:blur(4px)" role="dialog" aria-modal="true" aria-labelledby="fr-title">
      <div class="glass w-full max-w-lg rounded-2xl p-7 max-h-[92vh] overflow-auto">
        <div class="w-12 h-12 rounded-2xl bg-emerald-500/15 flex items-center justify-center mb-4">
          <i class="fas fa-database text-emerald-400"></i>
        </div>
        <h2 id="fr-title" class="text-lg font-semibold text-white mb-2">Welcome — and one important thing about your data</h2>
        <p class="text-sm text-slate-400 mb-4">AfterCloseCare is <span class="text-slate-200 font-medium">fully client-owned</span>. Everything you enter — jobs, punch lists, supplements, warranties — is stored privately in <span class="text-slate-200 font-medium">this browser</span> on this device. We never hold it on our servers, and we never hold it hostage.</p>
        <div class="bg-amber-500/8 border border-amber-500/25 rounded-xl p-4 mb-4">
          <p class="text-xs text-amber-300 font-semibold mb-1"><i class="fas fa-triangle-exclamation text-[10px] mr-1.5"></i>Because it lives in your browser, back it up weekly.</p>
          <p class="text-[11px] text-slate-400">Clearing browser data, switching devices, or some private-mode sessions can wipe local storage. <span class="text-slate-200">Your data is browser-local. Install the PWA and run a weekly export to survive any device wipe.</span> It takes five seconds.</p>
        </div>
        <p class="text-[11px] text-slate-500 mb-5">You can export any time from <span class="text-slate-300">Settings → Deployment &amp; Client Handoff</span>, or right now:</p>
        <div class="flex flex-col sm:flex-row gap-3">
          <button onclick="backupDataNow()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-5 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 mob-tap">
            <i class="fas fa-download text-xs"></i>Back Up Data Now
          </button>
          <button onclick="dismissFirstRun()" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-5 py-3 rounded-xl text-sm font-medium text-slate-300 mob-tap">
            Got it — continue
          </button>
        </div>
      </div>
    </div>`;
    document.body.insertAdjacentHTML('beforeend', html);
  } catch(e) { console.error('showFirstRunModal error:', e); }
}

// Weekly backup reminder badge — shows in-app if no export in 7+ days (existing users too).
function renderBackupReminderBadge() {
  try {
    const existing = document.getElementById('backup-reminder');
    if (existing) existing.remove();
    ensureAgents();
    const last = state.settings && state.settings.lastBackupAt;
    const days = last ? (Date.now() - new Date(last).getTime()) / 86400000 : Infinity;
    if (days < 7) return; // recent backup — no nag
    const msg = last
      ? `It\'s been ${Math.floor(days)} days since your last backup.`
      : `You haven\'t exported a backup yet.`;
    const bar = `
    <div id="backup-reminder" class="fixed bottom-4 right-4 z-[9980] max-w-xs" role="status" aria-live="polite">
      <div class="glass rounded-2xl p-4 shadow-xl border border-amber-500/25">
        <div class="flex items-start gap-3">
          <i class="fas fa-clock-rotate-left text-amber-400 text-sm mt-0.5"></i>
          <div class="flex-1">
            <p class="text-xs text-slate-200 font-medium mb-1">Weekly backup reminder</p>
            <p class="text-[11px] text-slate-500 mb-2.5">${msg} Your data lives in this browser — keep a safe copy.</p>
            <div class="flex gap-2">
              <button onclick="backupDataNow()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-3 py-1.5 rounded-lg text-[11px] font-semibold mob-tap">Back Up Now</button>
              <button onclick="document.getElementById('backup-reminder').remove()" class="text-[11px] text-slate-500 hover:text-slate-300 px-2 mob-tap">Later</button>
            </div>
          </div>
        </div>
      </div>
    </div>`;
    document.body.insertAdjacentHTML('beforeend', bar);
  } catch(e) { console.error('backup reminder error:', e); }
}

// Fire on load: first-run modal for new users, weekly reminder for returning users.
setTimeout(function(){
  try {
    if (ACC_IS_FIRST_RUN && !(state.settings && state.settings.welcomeSeen)) showFirstRunModal();
    else renderBackupReminderBadge();
  } catch(e) { console.error('first-run/reminder init error:', e); }
}, 600);

// ═══ v39.5 IMPORT ENGINE (vertical-neutral) ═══
/* ═══════════════════════════════════════════════════════════════
   acc-import-engine.js — v39.5 Data Onboarding (vertical-NEUTRAL)
   ───────────────────────────────────────────────────────────────
   Forgiving parser → fixed schema → validate → PREVIEW → auto-backup → commit → log.
   Additive to acc_state_v3. No key bump. Writes jobs[], agents.leads, agents.retention.
   Pure functions below are unit-tested headless; the CC wrapper calls them.
   ═══════════════════════════════════════════════════════════════ */
(function(global){
  'use strict';

  // ---- RFC4180-ish CSV parser: handles quotes, embedded commas, CRLF, escaped quotes ----
  function parseCSV(text){
    const rows=[]; let row=[], field='', i=0, inQ=false;
    text = String(text).replace(/^\uFEFF/,''); // strip BOM
    while(i<text.length){
      const c=text[i];
      if(inQ){
        if(c==='"'){ if(text[i+1]==='"'){ field+='"'; i+=2; continue; } inQ=false; i++; continue; }
        field+=c; i++; continue;
      }
      if(c==='"'){ inQ=true; i++; continue; }
      if(c===','){ row.push(field); field=''; i++; continue; }
      if(c==='\r'){ i++; continue; }
      if(c==='\n'){ row.push(field); rows.push(row); row=[]; field=''; i++; continue; }
      field+=c; i++;
    }
    if(field.length||row.length){ row.push(field); rows.push(row); }
    return rows.filter(r=>r.length && !(r.length===1 && r[0].trim()===''));
  }

  function toObjects(text){
    const rows=parseCSV(text);
    if(!rows.length) return {headers:[], rows:[]};
    const headers=rows[0].map(h=>h.trim().toLowerCase());
    const out=[];
    for(let r=1;r<rows.length;r++){
      const o={}; headers.forEach((h,idx)=> o[h]=(rows[r][idx]??'').trim());
      out.push(o);
    }
    return {headers, rows:out};
  }

  // ---- header alias resolution: forgiving input, strict internal schema ----
  function pick(obj, aliases){
    for(const a of aliases){ if(a in obj && obj[a]!=='') return obj[a]; }
    for(const a of aliases){ if(a in obj) return obj[a]; } // allow blank if key exists
    return '';
  }

  // ---- date normalization → ISO yyyy-mm-dd. Detects euro (DD/MM) when day>12. ----
  function normDate(s){
    if(!s) return '';
    s=String(s).trim();
    let m=s.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/); // already ISO
    if(m) return `${m[1]}-${String(m[2]).padStart(2,'0')}-${String(m[3]).padStart(2,'0')}`;
    m=s.match(/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2,4})$/);
    if(!m) return ''; // unparseable → blank (validation will flag)
    let a=+m[1], b=+m[2], y=+m[3];
    if(y<100) y+=2000;
    let mo, d;
    if(a>12 && b<=12){ d=a; mo=b; }        // clearly DD/MM (euro)
    else if(b>12 && a<=12){ mo=a; d=b; }    // clearly MM/DD (US)
    else { mo=a; d=b; }                     // ambiguous → default US (MM/DD)
    if(mo<1||mo>12||d<1||d>31) return '';
    return `${y}-${String(mo).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  }

  function normPhone(s){ return String(s||'').replace(/[^\d]/g,''); }
  function titleCase(s){ return String(s||'').toLowerCase().replace(/\b\w/g,c=>c.toUpperCase()); }
  function normName(s){
    s=String(s||'').trim();
    if(!s) return '';
    if(s.includes(',')){ const [last,first]=s.split(',').map(x=>x.trim()); return titleCase((first+' '+last).trim()); }
    return titleCase(s);
  }
  function normEmail(s){ return String(s||'').trim().toLowerCase(); }
  function normType(s){
    const t=String(s||'').trim().toLowerCase().replace(/\s+/g,' ');
    const map={
      'lawn maint':'Lawn Maintenance','lawn maintenance':'Lawn Maintenance',
      'water damage':'Water Damage','fire restoration':'Fire Restoration',
      'storm damage':'Storm Damage','mold remediation':'Mold Remediation',
      'basement waterproofing':'Basement Waterproofing','kitchen remodel':'Kitchen Remodel',
      'kitchen remo':'Kitchen Remodel','bathroom renovation':'Bathroom Renovation',
      'roof repair':'Roof Repair','roof replacement':'Roof Replacement',
      'siding replacement':'Siding Replacement','deck build':'Deck Build','deck repair':'Deck Repair',
      'hvac':'HVAC','hvac repair':'HVAC Repair','hvac maintenance':'HVAC Maintenance',
      'landscaping':'Landscaping','irrigation':'Irrigation','restoration':'Restoration','remodel':'Remodel'
    };
    return map[t] || titleCase(t);
  }
  function numOrNull(s){ const n=parseFloat(String(s||'').replace(/[^0-9.\-]/g,'')); return Number.isFinite(n)?n:null; }
  function insuranceState(s){
    const t=String(s||'').trim().toLowerCase();
    if(t==='yes'||t==='y'||t==='true') return 'Yes';
    if(t==='no'||t==='n'||t==='false') return 'No';
    if(t.includes('not')||t.includes('unsure')||t.includes('maybe')) return 'Not Sure';
    return s? 'Not Sure':'';
  }

  // restoration vertical detection (for Anchor sequence selection — display only)
  function isRestoration(type){
    return /restorat|water|fire|storm|mold|insurance|basement waterproof/i.test(String(type||''));
  }

  // ---- SCHEMAS: forgiving aliases → fixed internal record ----
  const SCHEMAS = {
    jobs: {
      label:'Jobs',
      headers:['job_id','name','homeowner','phone','email','address','type','invoice','po','close_date','tech','notes','risk_score'],
      key: r => (r.email || normPhone(r.phone) || r.address.toLowerCase()) + '|' + r.address.toLowerCase(),
      map(o){
        return {
          srcId: pick(o,['job_id','id','jobid']),
          name:  pick(o,['name','job_name','job']) || (normType(pick(o,['type']))+' — '+pick(o,['address'])),
          homeowner: normName(pick(o,['homeowner','client','customer','owner'])),
          phone: normPhone(pick(o,['phone','phone_number','tel'])),
          email: normEmail(pick(o,['email','e-mail'])),
          address: pick(o,['address','addr','location','property']),
          type: normType(pick(o,['type','job_type','category'])),
          invoice: pick(o,['invoice','invoice_no','inv']),
          po: pick(o,['po','po_no','purchase_order']),
          close_date: normDate(pick(o,['close_date','closed','completion_date','date_closed','completed'])),
          tech: titleCase(pick(o,['tech','assigned','technician','crew'])),
          notes: pick(o,['notes','note','description']),
          risk_score: numOrNull(pick(o,['risk_score','risk','score'])) ?? 15,
        };
      },
      validate(r){
        const errs=[];
        if(!r.address) errs.push('missing address');
        if(!r.email && !r.phone) errs.push('no email or phone');
        if(!r.close_date) errs.push('missing/invalid close_date');
        return errs;
      },
      flags(r){
        const f=[];
        if(r.risk_score>=25) f.push('HIGH RISK');
        if(!r.email) f.push('no email');
        if(!r.phone) f.push('no phone');
        return f;
      }
    },

    leads: {
      label:'Leads',
      headers:['lead_id','name','phone','email','address','source','score','insurance','notes','created_date'],
      key: r => normPhone(r.phone) || r.email || r.name.toLowerCase(),
      map(o){
        const score=numOrNull(pick(o,['score','lead_score','gauge_score']));
        return {
          srcId: pick(o,['lead_id','id','leadid']),
          name: normName(pick(o,['name','lead_name','contact'])),
          phone: normPhone(pick(o,['phone','phone_number','tel'])),
          email: normEmail(pick(o,['email','e-mail'])),
          address: pick(o,['address','addr','location']),
          source: pick(o,['source','lead_source','channel']) || 'Import',
          score: score ?? 0,
          insurance: insuranceState(pick(o,['insurance','has_insurance','claim'])),
          notes: pick(o,['notes','note']),
          created_date: normDate(pick(o,['created_date','date','created','created_at'])),
          tier: (score>=80?'HOT':score>=60?'WARM':score>0?'COLD':'UNSCORED')
        };
      },
      validate(r){
        const errs=[];
        if(!r.name) errs.push('missing name');
        if(!r.phone && !r.email) errs.push('no phone or email');
        return errs;
      },
      flags(r){
        const f=[];
        if(r.tier==='HOT') f.push('HOT');
        if(!r.address) f.push('no address');
        return f;
      }
    },

    customers: {
      label:'Customers',
      headers:['customer_id','name','phone','email','last_contact_date','close_date','ltv','job_type','status'],
      key: r => r.email || normPhone(r.phone) || r.name.toLowerCase(),
      map(o){
        const type=normType(pick(o,['job_type','type','category']));
        return {
          srcId: pick(o,['customer_id','id','custid']),
          name: normName(pick(o,['name','customer','client'])),
          phone: normPhone(pick(o,['phone','phone_number','tel'])),
          email: normEmail(pick(o,['email','e-mail'])),
          last_contact_date: normDate(pick(o,['last_contact_date','last_contact','last_touch'])),
          close_date: normDate(pick(o,['close_date','closed','completion_date'])),
          ltv: numOrNull(pick(o,['ltv','lifetime_value','value','total'])),
          job_type: type,
          status: titleCase(pick(o,['status','state'])) || 'Active',
          restoration: isRestoration(type)
        };
      },
      validate(r){
        const errs=[];
        if(!r.name) errs.push('missing name');
        if(!r.close_date) errs.push('missing/invalid close_date');
        return errs;
      },
      flags(r){
        const f=[];
        if(!r.last_contact_date) f.push('NO CONTACT ON RECORD');
        if(r.ltv===null) f.push('no LTV');
        return f;
      }
    }
  };

  // ---- Anchor tier from close/last-contact vs cycle (days) ----
  function anchorTier(rec, cycleDays){
    cycleDays = cycleDays||365;
    // PRIMARY DRIVER (v39.8): days since CLOSE vs purchase cycle. Restoration/remodeling is
    // lumpy and infrequent (12-36mo) — a job that closed 18-24mo ago is a prime win-back
    // regardless of a stray recent touch. last_contact is SECONDARY info only (surfaced on the card).
    if(!rec.close_date){
      // No close date: fall back to last_contact if present, else flag as needing review.
      if(rec.last_contact_date){
        const d=Math.floor((Date.now()-new Date(rec.last_contact_date+'T00:00:00').getTime())/86400000);
        const lc = d<=cycleDays?'COOLING':d<=cycleDays*2?'AT-RISK':'LAPSED';
        return {tier:lc, days:d, basis:'last_contact', reason:'no close date on record'};
      }
      return {tier:'AT-RISK', days:null, basis:'none', reason:'no close or contact date'};
    }
    const days=Math.floor((Date.now()-new Date(rec.close_date+'T00:00:00').getTime())/86400000);
    let tier;
    if(days<=cycleDays) tier='ACTIVE';
    else if(days<=cycleDays*1.5) tier='COOLING';
    else if(days<=cycleDays*2) tier='AT-RISK';
    else tier='LAPSED';
    // secondary: how recently were they touched (info only, does not change tier)
    let lastTouchDays=null;
    if(rec.last_contact_date){
      lastTouchDays=Math.floor((Date.now()-new Date(rec.last_contact_date+'T00:00:00').getTime())/86400000);
    }
    return {tier, days, basis:'close_cycle', lastTouchDays, reason:''};
  }

  // ---- Build a preview (dry run): parse → map → validate → dedupe → counts. NO writes. ----
  // v39.9: signature columns that strongly identify each schema (for wrong-lane detection)
  const SCHEMA_SIGNATURE = {
    jobs:      ['job_id','invoice','po','risk_score','tech','punchlist'],
    leads:     ['lead_id','source','score','insurance','created_date'],
    customers: ['customer_id','last_contact_date','ltv','status']
  };
  function detectSchema(headers){
    const h = headers.map(x=>x.toLowerCase());
    let best=null, bestScore=0;
    for(const [name,sig] of Object.entries(SCHEMA_SIGNATURE)){
      const score = sig.filter(c=>h.includes(c)).length;
      if(score>bestScore){ bestScore=score; best=name; }
    }
    return {best, score:bestScore};
  }

  function buildPreview(text, schemaName, opts){
    opts=opts||{};
    const schema=SCHEMAS[schemaName];
    if(!schema) return {error:'unknown schema: '+schemaName};
    const {headers, rows}=toObjects(text);
    // v39.9: warn if the file looks like a different schema than the lane chosen.
    const det = detectSchema(headers);
    let schemaWarning = null;
    if(det.best && det.best !== schemaName && det.score >= 2){
      const mineScore = (SCHEMA_SIGNATURE[schemaName]||[]).filter(c=>headers.map(x=>x.toLowerCase()).includes(c)).length;
      if(det.score > mineScore){
        schemaWarning = 'This file looks like a '+SCHEMAS[det.best].label+' file (columns: '+
          SCHEMA_SIGNATURE[det.best].filter(c=>headers.map(x=>x.toLowerCase()).includes(c)).join(', ')+
          '), but you chose the '+schema.label+' lane. Importing here will map it incorrectly. Use the '+SCHEMAS[det.best].label+' lane instead, or Cancel.';
      }
    }
    const seen=new Map(); const out=[]; const errors=[]; let dupes=0;
    rows.forEach((o,idx)=>{
      const rec=schema.map(o);
      const errs=schema.validate(rec);
      if(errs.length){ errors.push({row:idx+2, srcId:rec.srcId||'(row '+(idx+2)+')', errs}); return; }
      const k=schema.key(rec);
      if(seen.has(k)){ dupes++; seen.get(k)._dupOf=rec.srcId; return; } // last-wins could be added; we keep first
      rec._flags=schema.flags(rec);
      if(schemaName==='customers'){ const t=anchorTier(rec, opts.cycleDays); rec._tier=t.tier; rec._days=t.days; rec._lastTouchDays=t.lastTouchDays; rec._basis=t.basis; }
      seen.set(k,rec); out.push(rec);
    });
    return {
      schema:schemaName, label:schema.label, headers,
      totalRows:rows.length, willImport:out.length, skippedDupes:dupes, skippedErrors:errors.length,
      records:out, errors, schemaWarning,
      summary: summarize(schemaName, out)
    };
  }

  function summarize(schemaName, recs){
    if(schemaName==='jobs'){
      const high=recs.filter(r=>r.risk_score>=25).length;
      const types={}; recs.forEach(r=>types[r.type]=(types[r.type]||0)+1);
      return {high_risk:high, types};
    }
    if(schemaName==='leads'){
      const t={HOT:0,WARM:0,COLD:0,UNSCORED:0}; recs.forEach(r=>t[r.tier]++);
      return {tiers:t};
    }
    if(schemaName==='customers'){
      const t={ACTIVE:0,COOLING:0,'AT-RISK':0,LAPSED:0}; recs.forEach(r=>t[r._tier]++);
      const noContact=recs.filter(r=>!r.last_contact_date).length;
      const resto=recs.filter(r=>r.restoration).length;
      return {anchor_tiers:t, no_contact:noContact, restoration:resto, nonRestoration:recs.length-resto};
    }
    return {};
  }

  global.ACCImport = { parseCSV, toObjects, normDate, normName, normType, normPhone, insuranceState, anchorTier, buildPreview, SCHEMAS };
})(typeof window!=='undefined'?window:globalThis);


// ═══════════════════════════════════════════════════
//   v39.5: DATA ONBOARDING — CSV import (preview → backup → commit)
//   Uses ACCImport engine. Additive. Owner-gated. Writes jobs[] / agents.leads / agents.retention.
// ═══════════════════════════════════════════════════

var __accImportPreview = null;  // holds the last dry-run for the active schema

function accImportTemplate(schema) {
  const S = ACCImport.SCHEMAS[schema];
  if (!S) return;
  const example = {
    jobs:      'J001,Water Damage - 4412 Elm,"Richards, Tom",614-882-3301,trichards@email.com,"4412 Elm St, Columbus OH 43215",Water Damage,14250.00,PO-2201,03/14/2025,Marcus Webb,Category 2 loss,12',
    leads:     'L001,Tom Bradford,614-882-0011,tbradford@gmail.com,"910 Eastland Ave, Columbus OH 43203",Meta,88,Yes,Water damage call,06/01/2025',
    customers: 'C001,"Richards, Tom",614-882-3301,trichards@email.com,06/10/2025,03/14/2025,14250,Restoration,Active'
  }[schema];
  const csv = S.headers.join(',') + '\n' + example + '\n';
  try {
    const blob = new Blob([csv], { type:'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'acc-' + schema + '-template.csv';
    document.body.appendChild(a); a.click();
    setTimeout(()=>{ URL.revokeObjectURL(url); a.remove(); }, 200);
    toast('Template downloaded — match your columns to this and re-import', 'success', 4000);
  } catch(e) { toast('Template download failed: '+e.message, 'error'); }
}
window.accImportTemplate = accImportTemplate;

function accImportFile(schema, inputEl) {
  try {
    const file = inputEl.files && inputEl.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(ev) {
      try {
        ensureAgents();
        const cycle = (state.settings && state.settings.purchaseCycleDays) || 365;
        const pv = ACCImport.buildPreview(String(ev.target.result), schema, { cycleDays: cycle });
        if (pv.error) { toast('Import error: '+pv.error, 'error'); return; }
        __accImportPreview = pv;
        renderImportPreview(pv);
      } catch(e) { console.error('parse error', e); toast('Could not parse file: '+e.message, 'error'); }
    };
    reader.readAsText(file);
  } catch(e) { toast('File read failed: '+e.message, 'error'); }
}
window.accImportFile = accImportFile;

function renderImportPreview(pv) {
  const host = document.getElementById('import-preview');
  if (!host) return;
  const s = pv.summary || {};
  let summaryHtml = '';
  if (pv.schema === 'jobs') {
    summaryHtml = `<span class="text-amber-400">${s.high_risk||0} high-risk</span> · ${Object.keys(s.types||{}).length} job types`;
  } else if (pv.schema === 'leads') {
    const t = s.tiers||{};
    summaryHtml = `<span style="color:#ef4444">${t.HOT||0} HOT</span> · ${t.WARM||0} WARM · ${t.COLD||0} COLD · ${t.UNSCORED||0} unscored`;
  } else if (pv.schema === 'customers') {
    const t = s.anchor_tiers||{};
    summaryHtml = `Anchor tiers — ${t.ACTIVE||0} active · ${t.COOLING||0} cooling · <span class="text-amber-400">${t['AT-RISK']||0} at-risk</span> · <span style="color:#ef4444">${t.LAPSED||0} lapsed</span> · ${s.no_contact||0} no-contact · ${s.restoration||0} restoration / ${s.nonRestoration||0} other`;
  }
  const errRows = (pv.errors||[]).slice(0,6).map(e=>`<div class="text-[10px] text-red-400">Row ${e.row} (${e.srcId}): ${e.errs.join(', ')}</div>`).join('');
  host.innerHTML = `
    <div class="bg-slate-800/40 rounded-xl p-4 mt-3">
      <p class="text-xs font-semibold text-white mb-2">${pv.label} — preview (nothing saved yet)</p>
      ${pv.schemaWarning ? `<div class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 mb-3"><p class="text-[11px] text-amber-300"><i class="fas fa-triangle-exclamation text-[10px] mr-1.5"></i>${pv.schemaWarning}</p></div>` : ''}
      <div class="grid grid-cols-3 gap-2 mb-3">
        <div class="bg-slate-900/50 rounded-lg p-2.5 text-center"><div class="text-lg font-bold text-emerald-400">${pv.willImport}</div><div class="text-[9px] text-slate-500 uppercase">Will import</div></div>
        <div class="bg-slate-900/50 rounded-lg p-2.5 text-center"><div class="text-lg font-bold text-slate-400">${pv.skippedDupes}</div><div class="text-[9px] text-slate-500 uppercase">Dupes skipped</div></div>
        <div class="bg-slate-900/50 rounded-lg p-2.5 text-center"><div class="text-lg font-bold ${pv.skippedErrors?'text-red-400':'text-slate-400'}">${pv.skippedErrors}</div><div class="text-[9px] text-slate-500 uppercase">Errors skipped</div></div>
      </div>
      <p class="text-[11px] text-slate-400 mb-2">${summaryHtml}</p>
      ${errRows ? `<div class="bg-red-500/5 border border-red-500/15 rounded-lg p-2 mb-3">${errRows}${pv.errors.length>6?`<div class="text-[10px] text-slate-500 mt-1">+${pv.errors.length-6} more — download the error report after import</div>`:''}</div>` : ''}
      <div class="flex gap-2 flex-wrap">
        <button onclick="accCommitImport()" class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-semibold mob-tap"><i class="fas fa-check text-[10px] mr-1.5"></i>Back Up &amp; Import ${pv.willImport}</button>
        ${pv.skippedErrors ? `<button onclick="accDownloadErrors()" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-4 py-2 rounded-xl text-xs font-medium text-slate-300 mob-tap"><i class="fas fa-download text-[10px] mr-1.5"></i>Error rows (${pv.skippedErrors})</button>` : ''}
        <button onclick="__accImportPreview=null;renderCurrentTab()" class="text-slate-500 hover:text-slate-300 text-xs px-2 mob-tap">Cancel</button>
      </div>
    </div>`;
}

function accDownloadErrors() {
  if (!__accImportPreview || !__accImportPreview.errors.length) return;
  const rows = [['source_id','row','reasons']].concat(__accImportPreview.errors.map(e=>[e.srcId, e.row, '"'+e.errs.join('; ')+'"']));
  const csv = rows.map(r=>r.join(',')).join('\n');
  try {
    const blob = new Blob([csv], {type:'text/csv'}); const url=URL.createObjectURL(blob);
    const a=document.createElement('a'); a.href=url; a.download='acc-import-errors.csv';
    document.body.appendChild(a); a.click(); setTimeout(()=>{URL.revokeObjectURL(url);a.remove();},200);
  } catch(e) { toast('Error export failed','error'); }
}
window.accDownloadErrors = accDownloadErrors;

function accCommitImport() {
  const pv = __accImportPreview;
  if (!pv || !pv.willImport) { toast('Nothing to import', 'warning'); return; }
  try {
    ensureAgents();
    // CR-01: MANDATORY auto-backup immediately before any write.
    if (typeof exportAllData === 'function') exportAllData();

    let added = 0;
    if (pv.schema === 'jobs') {
      const existing = new Map((state.jobs||[]).map(j=>[(j.email||'')+'|'+(j.address||'').toLowerCase(), j]));
      pv.records.forEach(r => {
        const key = (r.email||'')+'|'+(r.address||'').toLowerCase();
        const job = {
          id: 'JOB-IMP-'+(r.srcId||Math.random().toString(36).slice(2,7)),
          name: r.name, homeowner: r.homeowner, phone: r.phone, email: r.email,
          address: r.address, type: r.type, invoice: r.invoice, po: r.po,
          date: r.close_date, tech: r.tech, notes: r.notes, wonotes:'',
          riskScore: r.risk_score, punchlist: [], surveys: [], insurance: null,
          warranty: { months: state.settings.warrantyMonths, checkins: [] },
          communications: [], documents: [], importedAt: new Date().toISOString()
        };
        if (existing.has(key)) { Object.assign(existing.get(key), { notes: job.notes||existing.get(key).notes }); }
        else { state.jobs.push(job); added++; }
      });
    } else if (pv.schema === 'leads') {
      const a = state.agents.leads;
      // IDEMPOTENT (v39.7): track imported lead keys so re-importing the same file updates, not doubles.
      a.importedKeys = a.importedKeys || {};
      a.hotQueue = a.hotQueue || [];
      const leadKey = r => (r.phone||'') + '|' + (r.email||'') + '|' + (r.name||'').toLowerCase();
      pv.records.forEach(r => {
        const k = leadKey(r);
        if (a.importedKeys[k]) return; // already imported this lead — skip (no double-count)
        a.importedKeys[k] = true;
        a.kpis.leadsCaptured = (a.kpis.leadsCaptured||0) + 1;
        if (r.tier==='HOT')  a.kpis.hotLeads  = (a.kpis.hotLeads||0)  + 1;
        if (r.tier==='WARM') a.kpis.warmLeads = (a.kpis.warmLeads||0) + 1;
        if (r.tier==='HOT') a.hotQueue.push({ name:r.name, tag:'HOT '+r.score, ageHours:0, note:(r.insurance==='Yes'?'insurance · ':'')+(r.notes||r.source) });
        added++;
      });
      a.updatedAt = new Date().toISOString(); a.syncSource='import';
    } else if (pv.schema === 'customers') {
      const a = state.agents.retention;
      // IDEMPOTENT (v39.7): upsert into customerBook by key; rebuild KPIs/queue FROM the book (never additively).
      a.customerBook = a.customerBook || [];
      const custKey = c => (c.email||'') + '|' + (c.phone||'') + '|' + (c.name||'').toLowerCase();
      const bookIndex = {};
      a.customerBook.forEach((c,i) => { bookIndex[custKey(c)] = i; });
      pv.records.forEach(r => {
        const entry = { name:r.name, email:r.email, phone:r.phone, ltv:r.ltv, close:r.close_date,
          lastContact:r.last_contact_date, lastTouchDays:r._lastTouchDays, tier:r._tier, type:r.job_type, restoration:r.restoration };
        const k = custKey(entry);
        if (k in bookIndex) { a.customerBook[bookIndex[k]] = entry; }   // update existing
        else { bookIndex[k] = a.customerBook.length; a.customerBook.push(entry); added++; }
      });
      a.customerBook = a.customerBook.slice(-2000);
      // Rebuild derived state from the book so counts are always correct regardless of re-imports.
      // v39.9: a win-back opportunity is AT-RISK, LAPSED, OR any customer with NO contact on
      // record (never followed up = prime winback, regardless of close-cycle tier).
      const isWinback = c => c.tier==='AT-RISK' || c.tier==='LAPSED' || !c.lastContact;
      a.kpis.atRiskCount = a.customerBook.filter(isWinback).length;
      // Order: LAPSED → AT-RISK → no-contact (ACTIVE/COOLING but never touched), then LTV desc.
      const rank = c => c.tier==='LAPSED'?0 : c.tier==='AT-RISK'?1 : !c.lastContact?2 : 3;
      a.saveQueue = a.customerBook
        .filter(isWinback)
        .sort((x,y) => rank(x)-rank(y) || ((y.ltv||0)-(x.ltv||0)))
        .slice(0,25)
        .map(c => {
          // PRIMARY: months since close. SECONDARY: last touch (info only).
          const closeMo = c.close ? Math.round((Date.now()-new Date(c.close+'T00:00:00').getTime())/2629800000) : null;
          const touch = (c.lastTouchDays!=null)
            ? ('touched '+c.lastTouchDays+'d ago')
            : (c.lastContact ? 'last contact on file' : 'NO CONTACT on record');
          const primary = closeMo!=null ? ('closed ~'+closeMo+'mo ago') : 'no close date';
          // tag: show NEW-LEAD-style label for no-contact-but-not-lapsed so the queue reads clearly
          const tag = (c.tier==='AT-RISK'||c.tier==='LAPSED') ? c.tier : 'NO CONTACT';
          return {
            name:c.name, tag, ageHours:0,
            note:(c.restoration?'restoration':'non-resto')+' · '+primary+' · '+touch+' · LTV '+(c.ltv!=null?'$'+c.ltv:'unknown')
          };
        });
      a.updatedAt = new Date().toISOString(); a.syncSource='import';
    }

    const alreadyHad = pv.willImport - added;
    agentsLog('Data import: '+pv.label+' — '+added+' new'+(alreadyHad>0?(' ('+alreadyHad+' already imported, skipped)'):'')+' ('+pv.skippedDupes+' dupes, '+pv.skippedErrors+' errors skipped). Auto-backup taken pre-commit.');
    save();
    __accImportPreview = null;
    if (added === 0 && alreadyHad > 0) toast(pv.label+': all '+alreadyHad+' records were already imported — nothing new added (no duplicates created).', 'info', 5000);
    else toast(pv.label+' imported: '+added+' new record(s)'+(alreadyHad>0?(', '+alreadyHad+' already on file'):'')+'. Backup downloaded first.', 'success', 5000);
    renderCurrentTab();
  } catch(e) {
    console.error('commit error', e);
    toast('Import failed: '+e.message+' — your backup was already saved', 'error', 6000);
  }
}
window.accCommitImport = accCommitImport;

function dataOnboardingCard() {
  try {
    if (typeof isVA === 'function' && isVA()) return '';
    const btn = (sch,label,icon) => `
      <div class="bg-slate-800/40 rounded-xl p-4">
        <p class="text-xs font-semibold text-slate-300 mb-1"><i class="fas ${icon} text-emerald-400 text-[10px] mr-1.5"></i>${label}</p>
        <p class="text-[10px] text-slate-500 mb-2.5">CSV → ${sch==='jobs'?'Jobs + punch foundation':sch==='leads'?'Gauge lead queue':'Anchor retention backfill'}</p>
        <div class="flex gap-2 flex-wrap">
          <label class="bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition-all px-3 py-1.5 rounded-lg text-[11px] font-semibold cursor-pointer mob-tap">
            <i class="fas fa-upload text-[9px] mr-1"></i>Import CSV
            <input type="file" accept=".csv,text/csv" class="hidden" onchange="accImportFile('${sch}', this)">
          </label>
          <button onclick="accImportTemplate('${sch}')" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-3 py-1.5 rounded-lg text-[11px] font-medium text-slate-300 mob-tap"><i class="fas fa-file-csv text-[9px] mr-1"></i>Template</button>
        </div>
      </div>`;
    return `
    <div class="card-bg rounded-2xl p-5">
      <p class="text-sm font-semibold text-white mb-1"><i class="fas fa-file-import text-emerald-400 text-xs mr-2"></i>Data Onboarding <span class="text-[10px] font-normal text-slate-600 ml-1">${(typeof APP_VERSION!=='undefined'?APP_VERSION:'')}${(typeof BUILD_STAMP!=='undefined'&&BUILD_STAMP.indexOf('__')!==0?' · '+BUILD_STAMP:'')}</span></p>
      <p class="text-[11px] text-slate-500 mb-4">Bulk-import your existing data. Every import shows a preview first, takes an automatic backup before saving, and skips duplicates and bad rows. Files stay client-owned. Documents attach as Drive/Dropbox links on each job.</p>
      <div class="grid md:grid-cols-3 gap-3">
        ${btn('jobs','Jobs','fa-briefcase')}
        ${btn('leads','Leads → Gauge','fa-filter')}
        ${btn('customers','Customers → Anchor','fa-anchor')}
      </div>
      <div id="import-preview"></div>
    </div>`;
  } catch(e) { console.error('onboarding card error', e); return ''; }
}

// wrap renderSettings to append the onboarding card (after the handoff card)
const __v395_renderSettings = renderSettings;
renderSettings = function() {
  __v395_renderSettings();
  try {
    const mc = document.getElementById('main-content');
    if (mc && mc.firstElementChild) mc.firstElementChild.insertAdjacentHTML('beforeend', dataOnboardingCard());
  } catch(e) { console.error('onboarding card injection error', e); }
};

// ═══ v41.0: acc-event-core.js — EMBEDDED VERBATIM (AgentContract v2, surface-neutral) ═══
/* ═══════════════════════════════════════════════════════════════
   acc-event-core.js — v1.1 · AgentContract v2 EVENT LAYER (surface-NEUTRAL)
   v1.1: +outcome.recorded (vocabulary addendum) · sync hasIdem(idem)->seq ·
         onWrite callback · atomic genesis (addMeta mutex + self-heal) ·
         post-ready synchronous seq assignment (gap-free, single counter)
   ───────────────────────────────────────────────────────────────
   Append-only event log core shared by every ACC surface (main Command
   Center, client Command Center, future ClaimCore surfaces).
   The vocabulary lives HERE and only here — surfaces register their own
   surface-specific types but never redefine core types locally.

   Design rules (locked):
   - emit() NEVER throws and NEVER blocks the caller. Fire-and-forget:
     synchronous enqueue, async serialized persist.
   - seq is assigned inside the serialized writer → gap-free, monotonic,
     even across racing emits. Derived at open() from the last stored
     event, so no separate counter can drift.
   - Unknown event types are REJECTED (contract discipline), logged to
     console, never stored.
   - Duplicate idem keys are dropped at write time (idempotency).
   - Storage adapters: idbAdapter (browser IndexedDB, DB "acc_events")
     and memoryAdapter (headless tests / private-mode fallback).
   - acc_state_v3 is NEVER touched by this module. Shadow plane only.
   ═══════════════════════════════════════════════════════════════ */
(function (global) {
  'use strict';

  var ENVELOPE_V = 1;
  var DB_NAME = 'acc_events';
  var DB_VERSION = 1;
  var SNAPSHOT_EVERY = 2000; // performance aid for future fold(), not a storage limit

  // ── CORE vocabulary — AgentContract v2 (shared across all surfaces) ──
  var CORE_EVENTS = [
    // lifecycle / system
    'genesis.snapshot', 'state.snapshot', 'data.reset',
    // jobs
    'job.created', 'job.imported',
    // punch list
    'punch.added', 'punch.completed', 'punch.reopened', 'punch.deleted', 'punch.due_changed',
    // surveys / communications
    'survey.sent', 'comm.logged',
    // insurance
    'supplement.added', 'supplement.status_changed',
    // callbacks / warranty
    'callback.added', 'callback.completed', 'callback.deleted',
    // scanner
    'risk.scored',
    // agents (Gauge → Shift → Anchor; keys leads/support/retention)
    'agent.synced', 'agent.certified', 'agent.guardrail_verified',
    'agent.save_done', 'agent.save_dismissed', 'agent.data_reset',
    // import lanes
    'lead.imported', 'customer.imported', 'import.committed',
    // settings / meta
    'settings.changed', 'backup.exported',
    // outcome telemetry (addendum v1.1 — the learning signal: human decision + result)
    'outcome.recorded'
  ];

  var VALID_ACTORS = ['owner', 'va', 'system', 'webhook', 'import'];
  var VALID_SOURCES = ['ui', 'webhook', 'import', 'scanner', 'migration', 'sim', 'system'];

  function uuid() {
    try {
      if (global.crypto && typeof global.crypto.randomUUID === 'function') return global.crypto.randomUUID();
    } catch (e) { /* fall through */ }
    // RFC4122-ish fallback (headless / very old engines)
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  /* ─────────────────────────────────────────────
     MEMORY ADAPTER — headless tests + private-mode fallback.
     Same async promise surface as the IDB adapter.
     ───────────────────────────────────────────── */
  function memoryAdapter() {
    var events = [];
    var meta = {};
    var idems = {};
    return {
      kind: 'memory',
      open: function () { return Promise.resolve(); },
      append: function (evt) {
        events.push(evt);
        if (evt.idem) idems[evt.idem] = evt.seq;
        return Promise.resolve();
      },
      count: function () { return Promise.resolve(events.length); },
      last: function () { return Promise.resolve(events.length ? events[events.length - 1] : null); },
      lastSeq: function () { return Promise.resolve(events.length ? events[events.length - 1].seq : 0); },
      all: function () { return Promise.resolve(events.slice()); },
      allIdems: function () { return Promise.resolve(Object.keys(idems).map(function (k) { return { idem: k, seq: idems[k] }; })); },
      getMeta: function (k) { return Promise.resolve(Object.prototype.hasOwnProperty.call(meta, k) ? meta[k] : null); },
      setMeta: function (k, v) { meta[k] = v; return Promise.resolve(); },
      addMeta: function (k, v) { // atomic: rejects if key exists (genesis mutex)
        if (Object.prototype.hasOwnProperty.call(meta, k)) return Promise.reject(new Error('ConstraintError: ' + k + ' exists'));
        meta[k] = v; return Promise.resolve();
      },
      putSnapshot: function (evt) { return Promise.resolve(); } // snapshots ride in events[] for memory
    };
  }

  /* ─────────────────────────────────────────────
     INDEXEDDB ADAPTER — browser persistence.
     DB acc_events · stores: events (keyPath seq),
     meta (keyPath k), snapshots (keyPath seq), idems (keyPath idem).
     Returns null when IndexedDB is unavailable (caller falls back
     to memoryAdapter → app unaffected, log is session-only).
     ───────────────────────────────────────────── */
  function idbAdapter() {
    var idb = null;
    try { idb = global.indexedDB; } catch (e) { idb = null; }
    if (!idb) return null;

    var db = null;

    function req(r) {
      return new Promise(function (resolve, reject) {
        r.onsuccess = function () { resolve(r.result); };
        r.onerror = function () { reject(r.error); };
      });
    }
    function store(name, mode) {
      return db.transaction(name, mode || 'readonly').objectStore(name);
    }

    return {
      kind: 'idb',
      open: function () {
        return new Promise(function (resolve, reject) {
          var r = idb.open(DB_NAME, DB_VERSION);
          r.onupgradeneeded = function (ev) {
            var d = ev.target.result;
            if (!d.objectStoreNames.contains('events')) d.createObjectStore('events', { keyPath: 'seq' });
            if (!d.objectStoreNames.contains('meta')) d.createObjectStore('meta', { keyPath: 'k' });
            if (!d.objectStoreNames.contains('snapshots')) d.createObjectStore('snapshots', { keyPath: 'seq' });
            if (!d.objectStoreNames.contains('idems')) d.createObjectStore('idems', { keyPath: 'idem' });
          };
          r.onsuccess = function () { db = r.result; resolve(); };
          r.onerror = function () { reject(r.error); };
          r.onblocked = function () { reject(new Error('acc_events open blocked')); };
        });
      },
      append: function (evt) {
        return new Promise(function (resolve, reject) {
          var names = evt.idem ? ['events', 'idems'] : ['events'];
          var tx = db.transaction(names, 'readwrite');
          tx.objectStore('events').put(evt);
          if (evt.idem) tx.objectStore('idems').put({ idem: evt.idem, seq: evt.seq });
          tx.oncomplete = function () { resolve(); };
          tx.onerror = function () { reject(tx.error); };
        });
      },
      count: function () { return req(store('events').count()); },
      last: function () {
        return new Promise(function (resolve, reject) {
          var r = store('events').openCursor(null, 'prev');
          r.onsuccess = function () { resolve(r.result ? r.result.value : null); };
          r.onerror = function () { reject(r.error); };
        });
      },
      lastSeq: function () {
        return this.last().then(function (e) { return e ? e.seq : 0; });
      },
      all: function () { return req(store('events').getAll()); },
      allIdems: function () { return req(store('idems').getAll()); },
      getMeta: function (k) {
        return req(store('meta').get(k)).then(function (row) { return row ? row.v : null; });
      },
      setMeta: function (k, v) {
        return new Promise(function (resolve, reject) {
          var tx = db.transaction('meta', 'readwrite');
          tx.objectStore('meta').put({ k: k, v: v });
          tx.oncomplete = function () { resolve(); };
          tx.onerror = function () { reject(tx.error); };
        });
      },
      addMeta: function (k, v) { // atomic mutex: add() throws ConstraintError if key exists
        return new Promise(function (resolve, reject) {
          var tx = db.transaction('meta', 'readwrite');
          tx.objectStore('meta').add({ k: k, v: v });
          tx.oncomplete = function () { resolve(); };
          tx.onerror = function () { reject(tx.error); };
          tx.onabort = function () { reject(tx.error || new Error('ConstraintError')); };
        });
      },
      putSnapshot: function (evt) {
        return new Promise(function (resolve, reject) {
          var tx = db.transaction('snapshots', 'readwrite');
          tx.objectStore('snapshots').put(evt);
          tx.oncomplete = function () { resolve(); };
          tx.onerror = function () { reject(tx.error); };
        });
      }
    };
  }

  /* ─────────────────────────────────────────────
     EVENT LOG FACTORY
     opts: { adapter, appVersion, getActor(), getOperator(), getView(), now() }
     ───────────────────────────────────────────── */
  function createEventLog(opts) {
    opts = opts || {};
    var adapter = opts.adapter || memoryAdapter();
    var appVersion = String(opts.appVersion || 'unknown');
    var getActor = typeof opts.getActor === 'function' ? opts.getActor : function () { return 'system'; };
    var getOperator = typeof opts.getOperator === 'function' ? opts.getOperator : function () { return ''; };
    var getView = typeof opts.getView === 'function' ? opts.getView : function () { return ''; };
    var now = typeof opts.now === 'function' ? opts.now : function () { return new Date().toISOString(); };

    var surfaceTypes = {};            // surface-registered event types
    var knownIdems = {};              // in-memory dedup map: idem -> seq, loaded at ready
    var seqCounter = 0;               // authoritative single counter (gap-free)
    var readyDone = false;            // true once open + initial queue flushed -> sync seq path
    var chain = null;                 // serialized writer promise chain
    var readyP = null;
    var stats = { emitted: 0, dropped_unknown: 0, dropped_dup: 0, write_errors: 0 };

    function isKnown(type) {
      return CORE_EVENTS.indexOf(type) !== -1 || surfaceTypes[type] === true;
    }

    function ready() {
      if (readyP) return readyP;
      readyP = adapter.open()
        .then(function () { return adapter.lastSeq(); })
        .then(function (s) { seqCounter = s || 0; return adapter.allIdems(); })
        .then(function (rows) {
          (rows || []).forEach(function (r) {
            if (r && typeof r === 'object') knownIdems[r.idem] = r.seq;
            else if (r) knownIdems[r] = 0; // legacy key-only rows
          });
          return true;
        })
        .catch(function (e) {
          try { console.error('ACC event log open failed — falling back to memory adapter:', e); } catch (_) {}
          adapter = memoryAdapter();
          seqCounter = 0;
          return adapter.open().then(function () { return false; });
        });
      // writer chain starts only after ready; readyDone flips after the initial
      // pre-ready queue drains, enabling the synchronous seq path for all later emits.
      chain = readyP.then(function (r) { readyDone = true; return r; });
      return readyP;
    }

    function writeOne(env, onWrite) {
      // runs inside the serialized chain. seq assigned here ONLY if the emit
      // happened pre-readyDone (post-ready emits carry a sync-assigned seq).
      if (env.idem && knownIdems[env.idem] !== undefined && env.seq === 0) {
        stats.dropped_dup++;
        try { console.info('ACC event dropped (duplicate idem): ' + env.type + ' / ' + env.idem); } catch (_) {}
        if (onWrite) { try { onWrite({ written: false, duplicate: true, seq: knownIdems[env.idem] || null }); } catch (_) {} }
        return Promise.resolve(null);
      }
      if (env.seq === 0) { seqCounter += 1; env.seq = seqCounter; }
      if (env.idem) knownIdems[env.idem] = env.seq;
      var p = adapter.append(env).then(function () {
        if (onWrite) { try { onWrite({ written: true, duplicate: false, seq: env.seq }); } catch (_) {} }
        if (env.type === 'genesis.snapshot' || env.type === 'state.snapshot') {
          return adapter.putSnapshot(env).catch(function () { /* snapshot store is an optimization only */ });
        }
      });
      return p.catch(function (e) {
        stats.write_errors++;
        try { console.error('ACC event write failed (state unaffected):', env.type, e); } catch (_) {}
        if (onWrite) { try { onWrite({ written: false, duplicate: false, seq: null, error: true }); } catch (_) {} }
        return null;
      });
    }

    /* hasIdem(idem) -> seq | null. SYNCHRONOUS duplicate check against the
       in-memory map. Reliable after ready; pre-ready returns null (the write-
       time backstop in writeOne still prevents any double-write — the caller's
       response is optimistic for that millisecond window, the log is not). */
    function hasIdem(idem) {
      if (!idem) return null;
      var s = knownIdems[String(idem)];
      return s === undefined ? null : (s || null);
    }

    /* emit(type, ref, data, extra)
       extra: { idem, source, actor }  — all optional
       Returns the envelope (seq filled after flush) or null if rejected.
       NEVER throws. NEVER blocks. */
    function emit(type, ref, data, extra) {
      try {
        extra = extra || {};
        if (!isKnown(type)) {
          stats.dropped_unknown++;
          try { console.error('ACC event REJECTED (unknown type — register surface types first): ' + type); } catch (_) {}
          return null;
        }
        var actor = extra.actor || getActor() || 'system';
        if (VALID_ACTORS.indexOf(actor) === -1) actor = 'system';
        var source = extra.source || 'ui';
        if (VALID_SOURCES.indexOf(source) === -1) source = 'ui';
        var env = {
          id: 'EVT-' + uuid(),
          seq: 0, // pre-ready: assigned in the serialized writer; post-ready: sync below
          ts: now(),
          v: ENVELOPE_V,
          type: type,
          actor: actor,
          operator: String(getOperator() || ''),
          view: String(getView() || ''),
          source: source,
          idem: extra.idem ? String(extra.idem) : null,
          ref: {
            jobId: (ref && ref.jobId) || null,
            itemId: (ref && ref.itemId) || null,
            agent: (ref && ref.agent) || null
          },
          data: data || {},
          app: appVersion
        };
        // Post-ready: synchronous duplicate drop + synchronous seq assignment.
        // Single-threaded JS + single counter + FIFO chain = gap-free, order-consistent.
        if (readyDone && env.idem && knownIdems[env.idem] !== undefined) {
          stats.dropped_dup++;
          try { console.info('ACC event dropped (duplicate idem, sync): ' + env.type + ' / ' + env.idem); } catch (_) {}
          if (extra.onWrite) { try { extra.onWrite({ written: false, duplicate: true, seq: knownIdems[env.idem] || null }); } catch (_) {} }
          return null;
        }
        if (readyDone) {
          seqCounter += 1;
          env.seq = seqCounter;
          if (env.idem) knownIdems[env.idem] = env.seq;
        }
        stats.emitted++;
        var cb = extra.onWrite || null;
        ready(); // ensure chain exists
        chain = chain.then(function () { return writeOne(env, cb); });
        chain = chain.catch(function () { return null; }); // chain must never die
        return env;
      } catch (e) {
        try { console.error('ACC emit error (swallowed — state unaffected):', e); } catch (_) {}
        return null;
      }
    }

    /* genesis(rawStateString, parsedState)
       Idempotent: fires only when the log is empty AND no genesisAt marker.
       Captures acc_state_v3 VERBATIM (raw string preferred) per spec. */
    function genesis(rawStateString, parsedState) {
      function writeGenesis() {
        var stateObj = null;
        try { stateObj = rawStateString ? JSON.parse(rawStateString) : (parsedState || null); }
        catch (e) { stateObj = parsedState || null; }
        var env = emit('genesis.snapshot', null, {
          state: stateObj,
          capturedRaw: !!rawStateString,
          appVersion: appVersion
        }, { source: 'migration', actor: 'system' });
        if (!env) return Promise.resolve(false);
        return flush().then(function () { return true; });
      }
      return ready().then(function () {
        return adapter.count();
      }).then(function (count) {
        if (count > 0) return false; // log already has history — never re-genesis
        // ATOMIC MUTEX: addMeta throws if genesisAt already exists. Across
        // simultaneous tabs exactly one claim succeeds; losers catch and skip.
        return adapter.addMeta('genesisAt', now()).then(
          function () { return writeGenesis(); },
          function () {
            // Marker exists. SELF-HEAL — but only for a genuinely crashed prior
            // claim, never for a concurrent tab mid-flush: wait past the
            // winner's write window, then re-count. Crash case: count stays 0
            // after the wait -> heal. Live-race case: winner's flush lands in
            // ms -> count > 0 -> skip. This keeps the mutex meaningful.
            return new Promise(function (res) { setTimeout(res, 400); }).then(function () {
              return adapter.count();
            }).then(function (c2) {
              if (c2 === 0) { try { console.warn('ACC genesis self-heal: marker present, log empty — writing genesis'); } catch (_) {} return writeGenesis(); }
              return false;
            });
          }
        );
      }).catch(function (e) {
        try { console.error('ACC genesis error (swallowed):', e); } catch (_) {}
        return false;
      });
    }

    function flush() {
      ready();
      return chain.then(function () { return true; }).catch(function () { return true; });
    }

    function count() { return ready().then(function () { return adapter.count(); }); }
    function last() { return ready().then(function () { return adapter.last(); }); }
    function all() { return ready().then(function () { return adapter.all(); }); }

    /* exportBundle(state) → { meta, state, events }
       Sim-sourced events are INCLUDED (replay parity requires them —
       the simulated scanner mutates real riskScore state) but are
       counted separately in meta and flagged by their source field.
       Client-facing audit views (v42) exclude source==='sim'. */
    function exportBundle(currentState) {
      return flush().then(function () { return adapter.all(); }).then(function (events) {
        var sim = 0;
        events.forEach(function (e) { if (e.source === 'sim') sim++; });
        return {
          meta: {
            appVersion: appVersion,
            exportedAt: now(),
            envelopeV: ENVELOPE_V,
            eventCount: events.length,
            simEventCount: sim,
            adapter: adapter.kind
          },
          state: currentState || null,
          events: events
        };
      });
    }

    function registerSurfaceTypes(types) {
      (types || []).forEach(function (t) {
        if (CORE_EVENTS.indexOf(t) !== -1) {
          try { console.warn('ACC surface type ignored (already core): ' + t); } catch (_) {}
          return;
        }
        surfaceTypes[t] = true;
      });
    }

    return {
      emit: emit,
      hasIdem: hasIdem,
      genesis: genesis,
      flush: flush,
      ready: ready,
      count: count,
      last: last,
      all: all,
      exportBundle: exportBundle,
      registerSurfaceTypes: registerSurfaceTypes,
      getStats: function () { return JSON.parse(JSON.stringify(stats)); },
      adapterKind: function () { return adapter.kind; },
      ENVELOPE_V: ENVELOPE_V,
      CORE_EVENTS: CORE_EVENTS.slice(),
      SNAPSHOT_EVERY: SNAPSHOT_EVERY
    };
  }

  global.ACCEvents = {
    createEventLog: createEventLog,
    memoryAdapter: memoryAdapter,
    idbAdapter: idbAdapter,
    CORE_EVENTS: CORE_EVENTS.slice(),
    ENVELOPE_V: ENVELOPE_V,
    DB_NAME: DB_NAME
  };
})(typeof window !== 'undefined' ? window : globalThis);

// ═══════════════════════════════════════════════════
//   v41.0: EVENT LOG — SHADOW AUDIT PLANE (AgentContract v2)
//   acc-event-core.js is embedded verbatim ABOVE this block; this is
//   the main-CC surface wiring ONLY. acc_state_v3 is untouched — the
//   log is a shadow plane in IndexedDB (database "acc_events").
//   Rollback: republish the prior deploy; older builds never open the
//   database. v41.0 scope: emit core + genesis.snapshot + Settings
//   card + operator stamp. NO mutations instrumented yet (v41.1).
// ═══════════════════════════════════════════════════

const ACC_EVENTS = (function(){
  try {
    const adapter = (ACCEvents.idbAdapter && ACCEvents.idbAdapter()) || ACCEvents.memoryAdapter();
    const log = ACCEvents.createEventLog({
      adapter: adapter,
      appVersion: APP_VERSION,
      getActor: function(){ try { return isVA() ? 'va' : 'owner'; } catch(e){ return 'owner'; } },
      getOperator: function(){ try { return (state.settings && state.settings.operator) || ''; } catch(e){ return ''; } },
      getView: function(){ try { return (state.agents && state.agents.meta && state.agents.meta.viewMode) || 'owner'; } catch(e){ return 'owner'; } }
    });
    // Surface-specific vocabulary (main CC only — other surfaces register their own set)
    log.registerSurfaceTypes(['job.demo_cleared','firstrun.acknowledged']);
    return log;
  } catch(e) { console.error('v41 event log init failed — app unaffected:', e); return null; }
})();
window.ACC_EVENTS = ACC_EVENTS;

// Reduce browser eviction risk for the IndexedDB log (pairs with the PWA-install survival guidance)
try { if (navigator.storage && navigator.storage.persist) navigator.storage.persist().catch(function(){}); } catch(e) {}

// Genesis: capture acc_state_v3 VERBATIM (raw string at load) exactly once, idempotent across refreshes.
if (ACC_EVENTS) {
  ACC_EVENTS.genesis(typeof ACC_RAW_AT_LOAD !== 'undefined' ? ACC_RAW_AT_LOAD : null, state).then(function(fired){
    if (fired) console.log('ACC event log: genesis.snapshot written (seq 1, adapter: ' + ACC_EVENTS.adapterKind() + ')');
  }).catch(function(){});
}

// ── Settings card: Event Log (owner-gated — mirrors the Data Onboarding card pattern) ──
function eventLogCard() {
  try {
    if (typeof isVA === 'function' && isVA()) return '';
    if (!ACC_EVENTS) return '';
    const op = (state.settings && state.settings.operator) || '';
    const sessionOnly = ACC_EVENTS.adapterKind() !== 'idb';
    return `
    <div class="card-bg rounded-2xl p-5">
      <p class="text-sm font-semibold text-white mb-1"><i class="fas fa-scroll text-emerald-400 text-xs mr-2"></i>Event Log <span class="text-[10px] font-normal text-slate-600 ml-1">${APP_VERSION} · shadow audit plane</span> ${sessionOnly ? '<span class="text-[9px] font-semibold text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded px-1.5 py-0.5 ml-2">Memory — session only</span>' : '<span class="text-[9px] font-semibold text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded px-1.5 py-0.5 ml-2">IndexedDB — durable</span>'}</p>
      <p class="text-[11px] text-slate-500 mb-4">Every change to your data is being recorded as an append-only audit trail on this device — client-owned, exportable at any time. This runs alongside your normal data and changes nothing about how the app works.</p>
      ${sessionOnly ? `<div class="bg-amber-500/10 border border-amber-500/20 rounded-xl px-4 py-2.5 mb-3"><p class="text-[11px] text-amber-400"><i class="fas fa-triangle-exclamation text-[9px] mr-1.5"></i>Private browsing detected — the audit log is session-only on this device. Your data itself is unaffected.</p></div>` : ''}
      <div class="grid md:grid-cols-3 gap-3 mb-4">
        <div class="bg-slate-800/40 rounded-xl p-4">
          <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Events recorded</p>
          <p class="text-lg font-bold text-white" id="ev-count" style="font-family:'DM Mono',monospace">—</p>
        </div>
        <div class="bg-slate-800/40 rounded-xl p-4">
          <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Last event</p>
          <p class="text-[11px] text-slate-300 break-all" id="ev-last">—</p>
        </div>
        <div class="bg-slate-800/40 rounded-xl p-4">
          <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Operator initials</p>
          <input id="ev-operator" value="${String(op).replace(/"/g,'&quot;')}" maxlength="6" placeholder="e.g. CN"
            onchange="saveOperatorInitials(this.value)"
            class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-white w-24 focus:border-emerald-500 outline-none">
          <p class="text-[9px] text-slate-600 mt-1.5">Stamped on every event from this device</p>
        </div>
      </div>
      <p class="text-[9px] text-slate-600 mb-3" id="ev-stats" style="font-family:'DM Mono',monospace">—</p>
      <button onclick="exportEventLog()" class="bg-slate-800 hover:bg-slate-700 active:scale-95 transition-all px-4 py-2 rounded-lg text-[11px] font-semibold text-slate-200 mob-tap"><i class="fas fa-download text-[9px] mr-1.5"></i>Export Events</button>
    </div>`;
  } catch(e) { console.error('event log card error', e); return ''; }
}

function refreshEventLogCard() {
  if (!ACC_EVENTS) return;
  Promise.all([ACC_EVENTS.count(), ACC_EVENTS.last()]).then(function(res){
    const c = document.getElementById('ev-count');
    const l = document.getElementById('ev-last');
    if (c) c.textContent = String(res[0]);
    if (l) l.textContent = res[1] ? (res[1].type + ' · ' + String(res[1].ts).slice(0,16).replace('T',' ')) : 'none yet';
    try {
      const st = ACC_EVENTS.getStats();
      const se = document.getElementById('ev-stats');
      if (se) se.textContent = 'health: ' + st.emitted + ' emitted · ' + st.dropped_dup + ' dup-dropped · ' + st.dropped_unknown + ' rejected · ' + st.write_errors + ' write errors';
    } catch(_) {}
  }).catch(function(){});
}

function saveOperatorInitials(v) {
  try {
    if (!state.settings) state.settings = {};
    state.settings.operator = String(v||'').trim().toUpperCase().slice(0,6);
    try{ if(window.ACC_EVENTS) window.ACC_EVENTS.emit('settings.changed',null,{field:'operator',value:state.settings.operator}); }catch(_){/*shadow*/}
    save();
    toast('Operator initials saved — stamped on all future events', 'success');
  } catch(e) { console.error('operator save error', e); }
}

function exportEventLog() {
  if (!ACC_EVENTS) return;
  let cur = null;
  try { cur = JSON.parse(localStorage.getItem('acc_state_v3') || 'null'); } catch(e) { cur = state; }
  ACC_EVENTS.exportBundle(cur).then(function(bundle){
    const blob = new Blob([JSON.stringify(bundle)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href     = url;
    a.download = 'acc-events-' + new Date().toISOString().slice(0,10) + '.json';
    document.body.appendChild(a); a.click();
    setTimeout(function(){ document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
    toast('Event log exported — ' + bundle.meta.eventCount + ' events', 'success');
  }).catch(function(e){ console.error('event export failed', e); toast('Event export failed', 'error'); });
}

// Append the Event Log card after the Data Onboarding card (stacked wrapper — same v39.5 pattern)
const __v41_renderSettings = renderSettings;
renderSettings = function() {
  __v41_renderSettings();
  try {
    const mc = document.getElementById('main-content');
    if (mc && mc.firstElementChild) {
      mc.firstElementChild.insertAdjacentHTML('beforeend', eventLogCard());
      refreshEventLogCard();
    }
  } catch(e) { console.error('event log card injection error', e); }
};
// ═══ end v41.0 EVENT LOG block ═══

// ═══════════════════════════════════════════════════
//   v41.1: INSTRUMENTATION WRAPPERS + OUTCOME TELEMETRY
//   Stacked-wrapper pattern (v39.5 lineage). Zero legacy edits in this
//   block — pre/post state diffs derive the event data. Sanctioned legacy
//   edits this build (documented): resetData flush-before-reload,
//   updateSupplementStatus inline capture. Everything else additive.
// ═══════════════════════════════════════════════════

function __accHash(s){ let h=5381; s=String(s); for(let i=0;i<s.length;i++){ h=((h<<5)+h+s.charCodeAt(i))>>>0; } return h.toString(36); }
window.__accBackupTrigger = null;

// ── agent.synced + agent.certified from BOTH manual sync paths ──
function __accEmitAgentSync(key, preStab, preKpis, syncSource){
  try{
    if(!window.ACC_EVENTS) return;
    const a = state.agents[key]; if(!a) return;
    const diff = {};
    Object.keys(a.kpis||{}).forEach(function(k){ if(a.kpis[k] !== preKpis[k]) diff[k] = a.kpis[k]; });
    const qk = key==='leads'?'hotQueue':key==='support'?'escalationQueue':'saveQueue';
    window.ACC_EVENTS.emit('agent.synced',{agent:key},{kpis:diff,stability:a.stability,queueLen:(a[qk]||[]).length,syncSource:syncSource});
    if(preStab < 80 && a.stability >= 80){
      window.ACC_EVENTS.emit('agent.certified',{agent:key},{stability:a.stability,priorStability:preStab});
    }
  }catch(_){/*shadow*/}
}

const __v41_saveAgentSync = saveAgentSync;
saveAgentSync = function(key, kpis, stability){
  let preStab = 0, preKpis = {}, preUpd = null;
  try{ ensureAgents(); const a=state.agents[key]; if(a){ preStab=a.stability; preKpis=Object.assign({},a.kpis); preUpd=a.updatedAt; } }catch(_){}
  __v41_saveAgentSync(key, kpis, stability);
  try{ const a=state.agents[key]; if(a && a.updatedAt !== preUpd) __accEmitAgentSync(key, preStab, preKpis, 'va'); }catch(_){/*shadow*/}
};

const __v41_openAgentSync = openAgentSync;
openAgentSync = function(key){
  let preStab = 0, preKpis = {}, preUpd = null;
  try{ ensureAgents(); const a=state.agents[key]; if(a){ preStab=a.stability; preKpis=Object.assign({},a.kpis); preUpd=a.updatedAt; } }catch(_){}
  __v41_openAgentSync(key);
  try{ const a=state.agents[key]; if(a && a.updatedAt !== preUpd) __accEmitAgentSync(key, preStab, preKpis, 'va'); }catch(_){/*shadow*/}
};

// ── accIngest: idempotent response shape {ok, duplicate, seq} + events ──
// Duplicate digests are NOT re-applied (parity-safe; a retry is not fresh data).
const __v41_accIngest = accIngest;
accIngest = function(payload){
  try{
    if(!payload || typeof payload !== 'object') return { ok:false, duplicate:false, error:'empty payload' };
    const key = payload.agent;
    const idem = payload.idem
      ? String(payload.idem)
      : 'ingest|'+key+'|'+__accHash(JSON.stringify(payload.kpis||{})+'|'+(payload.stability!==undefined?payload.stability:'')+'|'+new Date().toISOString().slice(0,13));
    if(window.ACC_EVENTS){
      const dupSeq = window.ACC_EVENTS.hasIdem(idem);
      if(dupSeq){
        try{ agentsLog('Real-time ingest: '+key+' — duplicate digest, already on file (seq '+dupSeq+'), nothing re-applied'); save(); }catch(_){}
        return { ok:true, duplicate:true, seq:dupSeq };
      }
    }
    let preStab = 0, preKpis = {};
    try{ ensureAgents(); const a=state.agents[key]; if(a){ preStab=a.stability; preKpis=Object.assign({},a.kpis); } }catch(_){}
    const res = __v41_accIngest(payload);
    if(res && res.ok && window.ACC_EVENTS){
      const a = state.agents[key];
      const diff = {}; Object.keys(a.kpis||{}).forEach(function(k){ if(a.kpis[k] !== preKpis[k]) diff[k]=a.kpis[k]; });
      const qk = key==='leads'?'hotQueue':key==='support'?'escalationQueue':'saveQueue';
      const env = window.ACC_EVENTS.emit('agent.synced',{agent:key},{kpis:diff,stability:a.stability,queueLen:(a[qk]||[]).length,syncSource:'n8n'},{source:'webhook',actor:'webhook',idem:idem});
      if(preStab < 80 && a.stability >= 80) window.ACC_EVENTS.emit('agent.certified',{agent:key},{stability:a.stability,priorStability:preStab},{source:'webhook',actor:'webhook'});
      return { ok:true, duplicate:false, seq:(env&&env.seq)||null, agent:key, updatedAt:res.updatedAt };
    }
    return res ? Object.assign({duplicate:false}, res) : { ok:false, duplicate:false, error:'ingest failed' };
  }catch(e){ console.error('v41.1 ingest wrapper error:', e); try{ return __v41_accIngest(payload); }catch(_){ return { ok:false, duplicate:false, error:e.message||'ingest failed' }; } }
};
window.accIngest = accIngest;

// ── agent.data_reset — resetAgentData wrapper ──
const __v41_resetAgentData = resetAgentData;
resetAgentData = function(){
  let preLeads = 0, preCust = 0, jobsN = 0;
  try{ ensureAgents(); preLeads = Object.keys(state.agents.leads.importedKeys||{}).length || (state.agents.leads.kpis.leadsCaptured||0); preCust = (state.agents.retention.customerBook||[]).length; jobsN = (state.jobs||[]).length; }catch(_){}
  __v41_resetAgentData();
  try{
    if(window.ACC_EVENTS){
      const cleared = !(state.agents.retention.customerBook||[]).length && !Object.keys(state.agents.leads.importedKeys||{}).length;
      if(cleared && (preLeads || preCust)){
        window.ACC_EVENTS.emit('agent.data_reset',{agent:'leads'},{leadsCleared:preLeads,jobsPreserved:jobsN});
        window.ACC_EVENTS.emit('agent.data_reset',{agent:'retention'},{customersCleared:preCust,jobsPreserved:jobsN});
      }
    }
  }catch(_){/*shadow*/}
};

// ── import telemetry: per-record + summary, derived from pre/post diff ──
function __accImportTelemetry(pv, pre){
  try{
    if(!window.ACC_EVENTS || !pv) return;
    const fp = __accHash((pv.headers||[]).join(',')+'|'+pv.totalRows);
    let newCount = 0;
    if(pv.schema === 'jobs'){
      (state.jobs||[]).forEach(function(j){
        if(String(j.id).indexOf('JOB-IMP-')===0 && !pre.jobIds[j.id]){
          newCount++;
          window.ACC_EVENTS.emit('job.imported',{jobId:j.id},{srcId:(j.id||'').replace('JOB-IMP-',''),importBatch:fp,type:j.type,riskScore:j.riskScore,insurance:!!j.insurance},{source:'import',actor:'import',idem:'import|jobs|'+fp+'|'+j.id});
        }
      });
    } else if(pv.schema === 'leads'){
      const lk = function(r){ return (r.phone||'')+'|'+(r.email||'')+'|'+(r.name||'').toLowerCase(); };
      (pv.records||[]).forEach(function(r){
        const k = lk(r);
        if(!pre.leadKeys[k] && state.agents.leads.importedKeys && state.agents.leads.importedKeys[k]){
          newCount++;
          window.ACC_EVENTS.emit('lead.imported',{itemId:r.srcId||k},{tier:r.tier,score:r.score,source:r.source,importBatch:fp},{source:'import',actor:'import',idem:'import|leads|'+k});
        }
      });
    } else if(pv.schema === 'customers'){
      const ck = function(c){ return (c.email||'')+'|'+(c.phone||'')+'|'+(c.name||'').toLowerCase(); };
      const bookNow = {}; (state.agents.retention.customerBook||[]).forEach(function(c){ bookNow[ck(c)] = c; });
      (pv.records||[]).forEach(function(r){
        const k = (r.email||'')+'|'+(r.phone||'')+'|'+(r.name||'').toLowerCase();
        if(!pre.custKeys[k] && bookNow[k]){
          newCount++;
          window.ACC_EVENTS.emit('customer.imported',{itemId:r.srcId||k},{anchorTier:r._tier||null,basis:r._basis||null,ltv:r.ltv!==undefined?r.ltv:null,importBatch:fp},{source:'import',actor:'import',idem:'import|customers|'+k});
        }
      });
    }
    window.ACC_EVENTS.emit('import.committed',null,{lane:pv.schema,fileFingerprint:fp,totalRows:pv.totalRows,newCount:newCount,dupes:pv.skippedDupes,errors:pv.skippedErrors,schemaWarned:!!pv.schemaWarning},{source:'import',actor:'import'});
  }catch(e){ console.error('import telemetry error (state unaffected):', e); }
}
window.__accImportTelemetry = __accImportTelemetry;

const __v41_accCommitImport = accCommitImport;
accCommitImport = function(){
  const pv = __accImportPreview;
  const pre = { jobIds:{}, leadKeys:{}, custKeys:{} };
  try{
    ensureAgents();
    (state.jobs||[]).forEach(function(j){ pre.jobIds[j.id] = true; });
    Object.keys((state.agents.leads||{}).importedKeys||{}).forEach(function(k){ pre.leadKeys[k] = true; });
    const ck = function(c){ return (c.email||'')+'|'+(c.phone||'')+'|'+(c.name||'').toLowerCase(); };
    ((state.agents.retention||{}).customerBook||[]).forEach(function(c){ pre.custKeys[ck(c)] = true; });
  }catch(_){}
  window.__accBackupTrigger = 'pre-import';
  __v41_accCommitImport();
  try{ if(pv && __accImportPreview === null) __accImportTelemetry(pv, pre); }catch(_){/*shadow*/}
};
window.accCommitImport = accCommitImport;

// ── backup trigger hint for the reminder path ──
const __v41_backupDataNow = backupDataNow;
backupDataNow = function(){
  window.__accBackupTrigger = 'reminder';
  __v41_backupDataNow();
};
window.backupDataNow = backupDataNow;

// ── accLogOutcome: OUTCOME TELEMETRY receiver (vocabulary addendum) ──
// The learning-signal ingest for Hermes Router / n8n / VA review flows.
// Mirrors accIngest: validate → sync idem check → emit → {ok, duplicate, seq}.
function accLogOutcome(payload){
  try{
    if(!window.ACC_EVENTS) return { ok:false, duplicate:false, error:'event log unavailable' };
    if(!payload || typeof payload !== 'object') return { ok:false, duplicate:false, error:'empty payload' };
    const hd = String(payload.humanDecision||payload.human_decision||'').toLowerCase();
    if(['approve','edit','reject'].indexOf(hd) === -1) return { ok:false, duplicate:false, error:'humanDecision must be approve | edit | reject' };
    const agent = payload.agent || null;
    if(agent && ACC_AGENT_KEYS.indexOf(agent) === -1) return { ok:false, duplicate:false, error:'unknown agent: '+agent };
    const data = {
      humanDecision: hd,
      reasonCode: payload.reasonCode || payload.reason_code || null,
      editSummary: String(payload.editSummary || payload.edit_summary || '').slice(0,400),
      downstreamResult: String(payload.downstreamResult || payload.downstream_result || '').slice(0,400),
      timeProxyMinutes: Number.isFinite(Number(payload.timeProxyMinutes ?? payload.human_time_proxy_minutes)) ? Number(payload.timeProxyMinutes ?? payload.human_time_proxy_minutes) : null,
      model: payload.model || null,
      routerRun: payload.routerRun || payload.router_run || null,
      note: String(payload.note||'').slice(0,200)
    };
    const idem = payload.idem ? String(payload.idem)
      : 'out|'+(agent||'none')+'|'+__accHash(JSON.stringify(data)+'|'+new Date().toISOString().slice(0,13));
    const dupSeq = window.ACC_EVENTS.hasIdem(idem);
    if(dupSeq) return { ok:true, duplicate:true, seq:dupSeq };
    const env = window.ACC_EVENTS.emit('outcome.recorded',{agent:agent,jobId:payload.jobId||payload.job_id||null},data,{source:'webhook',actor:'webhook',idem:idem});
    if(!env) return { ok:false, duplicate:false, error:'emit rejected' };
    try{ if(typeof agentsLog==='function'){ agentsLog('Outcome recorded'+(agent?(' ('+agent+')'):'')+': '+hd+(data.routerRun?(' — '+data.routerRun):'')); save(); } }catch(_){}
    return { ok:true, duplicate:false, seq:env.seq||null };
  }catch(e){ console.error('accLogOutcome error:', e); return { ok:false, duplicate:false, error:e.message||'outcome failed' }; }
}
window.accLogOutcome = accLogOutcome;

// postMessage bridge for outcomes (additive listener, mirrors the ingest bridge)
window.addEventListener('message', function(ev){
  try{
    const d = ev.data;
    if(d && d.__acc === 'outcome' && d.payload) accLogOutcome(d.payload);
  }catch(_){}
});
// ═══ end v41.1 INSTRUMENTATION block ═══


initActivityFeed(); // seed feed once from localStorage — not on every renderDashboard call
syncHeaderToJob();
renderSidebar('dashboard');
renderDashboard();
checkStorageUsage(); // Rule 10 — check on every page load

// Welcome toast
setTimeout(() => toast('Welcome back! ' + state.jobs.length + ' active jobs · Click Scanner to run a full scan', 'info', 4500), 800);

// ═══════════════════════════════════════════════════
// ── v37 PWA Install Logic ──
// ═══════════════════════════════════════════════════
let _pwaPrompt = null;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  _pwaPrompt = e;
  document.querySelectorAll('#installBtn').forEach(btn => {
    btn.classList.remove('hidden');
    btn.classList.add('flex');
  });
  document.querySelectorAll('#pwa-unavailable-msg').forEach(el => el.classList.add('hidden'));
});

window.addEventListener('appinstalled', () => {
  _pwaPrompt = null;
  document.querySelectorAll('#installBtn').forEach(btn => btn.classList.add('hidden'));
  document.querySelectorAll('#pwa-installed-msg').forEach(el => {
    el.classList.remove('hidden');
    el.classList.add('flex');
  });
  toast('✅ AfterCloseCare installed on your device!', 'success', 5000);
});

function triggerPWAInstall() {
  if (!_pwaPrompt) return;
  _pwaPrompt.prompt();
  _pwaPrompt.userChoice.then(result => {
    if (result.outcome === 'accepted') {
      toast('Installing AfterCloseCare…', 'info', 3000);
    }
    _pwaPrompt = null;
  });
}

// ── v38 PWA: Blob-based Service Worker (no external sw.js needed) ──
if ('serviceWorker' in navigator) {
  const swSrc = [
    "const CACHE='acc-v38-final';",  // v38 Final Polish
    "const SHELL=['./'];",
    "self.addEventListener('install',e=>{",
    "  e.waitUntil(caches.open(CACHE).then(c=>c.addAll(SHELL)).then(()=>self.skipWaiting()));",
    "});",
    "self.addEventListener('activate',e=>{",
    "  e.waitUntil(caches.keys().then(ks=>Promise.all(ks.filter(k=>k!==CACHE).map(k=>caches.delete(k)))).then(()=>self.clients.claim()));",
    "});",
    "self.addEventListener('fetch',e=>{",
    "  if(e.request.method!=='GET')return;",
    "  const u=new URL(e.request.url);",
    "  if(u.hostname.includes('cdn.')||u.hostname.includes('fonts.'))return;",
    "  e.respondWith(caches.match(e.request).then(r=>r||fetch(e.request).then(res=>{",
    "    if(res&&res.status===200&&res.type==='basic'){",
    "      caches.open(CACHE).then(c=>c.put(e.request,res.clone()));",
    "    }",
    "    return res;",
    "  }).catch(()=>e.request.mode==='navigate'?caches.match('./'):undefined)));",
    "});"
  ].join('\n');
  try {
    const blob = new Blob([swSrc], { type: 'application/javascript' });
    const url  = URL.createObjectURL(blob);
    window.addEventListener('load', () => {
      navigator.serviceWorker.register(url)
        .then(() => console.log('ACC SW v37 registered'))
        .catch(() => {/* silent — some hosts block blob SW, app works without it */});
    });
  } catch(_) { /* noop */ }
}
// ════════════════════════════════════════════════════
</script>
</body>
</html>