<!--
  SNS Prospect Hunter — index.html
  v2.6.0 — 2026-09-24
  Changelog:
    v2.6.0 — 2026-09-24
    - New outreach email design. The hero is now the prospect's own PageSpeed
      number (psi_performance) with a bar showing them against Google's 90
      "good" threshold, instead of their business name in 28px. Falls back to
      the old name hero when no audit score exists.
    - NOTE on the mockup: it led with a load time in seconds. audit-site does
      not produce one — only psi_performance (0-100) — so the hero uses the
      score. No invented metrics.
    - Findings render as a metric column + sentence. A bullet written as
      "LABEL — sentence" splits on the first em dash; bullets without one
      render as a plain row, so older drafts still display correctly.
    - CTA replaced. The demo-library button ("View your demo") contradicted
      copy that offers to send an audit, and sent every prospect the same
      generic link. It now reads "Send me the full list" as a mailto: reply
      to stitchandsnare@gmail.com, matching what the copy actually asks for.
    - Added a plain-text unsubscribe line to the footer (CAN-SPAM).
    - buildHtmlEmail() takes an optional third arg, the audit row. Guarded on
      audit.lead_id === lead.id so a stale currentAudit can never print
      another business's score.
    - previewDraftEmail() fetches that lead's latest audit before building,
      since currentAudit isn't populated from the Drafts tab.

    v2.5.0 — 2026-09-11
    - Fixed sent drafts staying in the Drafts queue. v2.3.0 only closed out a
      draft when the send started from the Drafts tab (via pendingDraftId).
      Sending the same draft from the lead drawer — the normal Find Email →
      Run Audit → Draft Email → Preview & Send path — left the row pending
      forever, so it reappeared in Drafts after being sent.
    - sendViaGmail() now marks every pending draft on that lead as sent,
      whichever surface the send came from, and updates leadDrafts in memory
      so the drawer's draft history reflects it without reopening.
    - restoreLatestDraft() no longer falls back to a non-pending draft. A
      sent message can't silently refill the compose box on reopen, which is
      what v2.2.0 claimed but didn't actually do.
    - Test sends still never mark anything sent.

    v2.4.0 — 2026-09-11
    - Fixed the hair-trigger swipe-to-close on the lead drawer. The old
      handler compared touchstart to touchend anywhere in the drawer and
      closed on any 80px downward travel — so scrolling the body back toward
      the top (finger moves down) read as a dismiss. That was the bug.
    - Close gesture now only arms when the drawer body is already at
      scrollTop 0, or when the drag starts on the handle. Mid-scroll drags
      can no longer dismiss.
    - Gesture must be vertical (dy > 2x |dx|) and either travel 120px or
      flick faster than 0.5 px/ms. Threshold raised from 80px.
    - Drawer now follows the finger while dragging and springs back if the
      gesture is abandoned, so the dismiss is visible before it commits.
    - Drag is cancelled outright on multi-touch or when it starts inside a
      textarea, input or select.

    v2.3.0 — 2026-09-11
    - Drafts tab sends from the app instead of handing off to Gmail compose.
      "Open in Gmail" replaced with "Preview & Send", which runs the draft
      through buildHtmlEmail() and opens the same preview modal used in the
      lead drawer — same branded template, same 🧪 Test, same Gmail API send.
    - Added pendingDraftId. When a send originates from the Drafts tab,
      sendViaGmail() also flips that draft to sent and refreshes the list, so
      the queue clears itself rather than needing a manual Mark sent.
    - loadDrafts() now caches full lead rows (select *) in draftLeadMap, since
      the send path needs the whole record for updateStatus().
    - previewHtmlEmail() clears pendingDraftId so a drawer send is never
      misattributed to a draft.
    - Mark sent kept for drafts sent outside the app; Copy and Discard kept.

    v2.2.0 — 2026-09-11
    - Drafts now persist into the lead drawer. openDrawer() loads that lead's
      outreach_drafts history alongside its audit, so reopening a lead brings
      back what was written instead of an empty textarea.
    - The most recent pending draft auto-fills the email body and subject on
      open. Earlier drafts list under the Site Agent panel with their date and
      status; click one to load it back into the body.
    - Draft history survives page reloads and device changes — it reads from
      Supabase every time the drawer opens, nothing is held in memory only.
    - draftLeadEmail() prepends the new draft to that history so it appears
      without reopening the lead.
    - Added leadDrafts state (reset on drawer open) + loadLeadDrafts(),
      useDraft(), and .draft-hist CSS.

    v2.1.0 — 2026-09-11
    - Drafts tab built out. loadDrafts() reads pending rows from
      outreach_drafts, pairs them with their lead, and renders subject, body
      and recipient with Open in Gmail / Copy / Mark sent / Discard.
    - Leads are fetched by id list rather than a PostgREST embed, so this
      works whether or not outreach_drafts.lead_id has a declared FK.
    - Mark sent sets the draft to sent, moves the lead to Contacted, stamps
      contacted_at, and logs to sns_activity.
    - Added the drafts pip: nav dot shows when pending drafts exist, updated
      at init, after drafting, and after any draft action.
    - draftLeadEmail() now refreshes the pip so a new draft registers
      immediately instead of silently landing in the table.
    - Added .dcard CSS.

    v2.0.0 — 2026-09-11
    - MERGED Search + Audit into one "Find" tab. Both ran the same Places
      query and differed only by an inverted websiteUri filter, so the split
      forced a re-search to cross between them. One search now returns
      everything and a segmented control filters client-side:
      No website (incl. weak presence) / Has website / All.
    - section-audit and runAudit() removed entirely. runFind() replaces
      runSearch(). The duplicated audit-* parameter panel (keyword tabs,
      location presets, radius, review tier) is gone — one panel drives both.
    - Result card redesigned. Lead signal moved from a badge to a colored
      left edge + mono line under the name; saved leads show a purple edge.
      Emoji meta icons dropped. Speed score is a number, not a pill. Google
      lookup is now an icon button. Cards are structurally identical whether
      or not the business has a site.
    - Checkbox + score column render only on has-site rows. Selecting any
      row raises a sticky action bar with Run audit.
    - Nav is now Find / Pipeline / Drafts / Templates on both desktop and
      mobile. Drafts is a STUB — outreach_drafts has a pending queue with no
      UI; wiring it is the next version, not this one.
    - auditSelected() kept as-is: it indexes auditPlaces and writes to
      score-N / audit-progress*, all of which still exist in the Find tab.
    - No changes to placesSearch, PageSpeed, scrape, draft, pipeline, email,
      OAuth, or send logic.

    v1.6.0 — 2026-09-11
    - Mobile/standalone floating nav lifted off the bottom edge:
      bottom 20px -> 34px, so it clears the iOS home indicator and the
      Safari toolbar in browser mode instead of sitting under them.
    - Nav icons enlarged 21px -> 25px, bar height 66px -> 74px, tap target
      54px -> 60px, label 8.5px -> 9px. Bar radius 23px -> 26px to keep the
      pill proportion at the taller height.
    - Pip dot scaled with the icons (7px -> 8px).
    - main / drawer / toast offsets all derive from --nav-h and the new
      --nav-gap, so nothing needed hardcoding.
    - No changes to JS, search, audit, draft, or send logic.

    v1.5.0 — 2026-09-11
    - HTML email now renders bullet lines. Any body line starting with -, *,
      • or "1." becomes a bulleted finding row; consecutive bullets group into
      one block. Plain-text body is unchanged, so Copy and Gmail compose still
      read correctly.
    - Added a hidden preheader pulled from the first bullet (or first line),
      so the inbox preview shows a specific finding instead of the greeting.
    - Tightened email chrome: business-name hero 38px -> 28px, header padding
      40/40/30 -> 30/36/20, body padding 32 -> 22. Roughly 60px less scroll
      before the first line of copy.
    - Added buildEmailBlocks() to parse the body into paragraphs and lists.
    - No changes to send, OAuth, subject encoding, or draft logic.

    v1.4.1 — 2026-09-11
    - Reverted theme-color to #393994. v1.3.0 changed it to #4848b8 to match
      the landing-page asset kit, but #393994 is the established SNS purple
      used across the email header, portal badge and manifest — keep them
      in sync.

    v1.4.0 — 2026-09-11
    - Audit tab: "+ Pipeline" now renders on every result card immediately,
      so a lead can be saved without running PageSpeed first. Previously the
      button was only injected by auditSelected(), and only when a score came
      back under 90 — which also meant 90+ sites could never be added at all.
    - auditSelected() now updates the existing button's lead payload with the
      PageSpeed note instead of rebuilding the card and injecting a button.
      The checkbox is no longer wiped after scoring, so a site can be
      re-audited without re-running the search.
    - Added buildAuditLeadData() so the render path and the post-score path
      construct the lead payload from one place.
    - No changes to search, scrape, draft, pipeline, or send logic.

    v1.3.0 — 2026-09-11
    - Swapped in the new Stitch & Snare snare-drum icon set. Head icon links
      rebuilt against ./icons/ (relative — the app lives at a repo subpath,
      so the absolute /icons/ paths from the asset kit would 404).
    - Header logo now uses the local ./icons/icon-96.png mark instead of the
      externally hosted WordPress wordmark; removes an off-site dependency.
    - theme-color updated to #4848b8 to match the new kit.
    - Requires the updated manifest.json + ./icons/ upload (see notes).
    - No changes to search, audit, scrape, pipeline, or send logic.

    v1.2.0 — 2026-09-11
    - Site Agent: added "Find Email" button. Calls dynamic-responder v2.0.0
      with {type:'scrape'} to pull contact addresses off the lead's website
      server-side (CORS-safe), auto-fills the best match into the lead's
      email field, and saves to Supabase.
    - Alternate addresses render as clickable rows under the agent panel;
      clicking one swaps it in and saves.
    - Added emailCandidates state (reset on drawer open) + findLeadEmail()
      and pickEmail() helpers.
    - Added .email-cand CSS.
    - No changes to search, audit, PageSpeed, pipeline, or send logic.

    v1.1 — 2026-08-01
    - Search tab no longer excludes businesses whose only "website" is a
      weak-presence page (Facebook, Instagram, Yelp, Blismo, Linktree).
      These now appear in results with an amber "WEAK: <PLATFORM>" badge
      instead of being silently filtered out alongside real websites.
    - Added getWeakSiteInfo() helper + WEAK_SITE_DOMAINS list.
    - Added .weak-site-badge CSS.
    - Weak-site leads pushed to Pipeline now carry the FB/Yelp/etc URL in
      the notes field automatically.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./icons/icon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="./icons/icon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="./icons/icon-192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="./icons/icon-180.png" sizes="180x180">
<link rel="manifest" href="./manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Prospect Hunter">
<meta name="apple-mobile-web-app-title" content="Prospect">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#393994">
<title>SNS Prospect Hunter</title>
<script>
(function() {
  var PW = 'Snare2026$';
  var KEY = 'sns_auth';
  if (sessionStorage.getItem(KEY) === PW) return;
  var style = document.createElement('style');
  style.textContent = '#sns-gate{position:fixed;inset:0;z-index:99999;background:#f0f2f7;background-image:radial-gradient(ellipse at 20% 20%,rgba(57,57,148,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(77,77,184,.04) 0%,transparent 60%);display:flex;align-items:center;justify-content:center;font-family:\'DM Sans\',sans-serif}'
  + '#sns-gate-box{background:rgba(255,255,255,.95);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(57,57,148,.12);border-radius:16px;padding:40px 36px;width:90%;max-width:360px;box-shadow:0 8px 40px rgba(57,57,148,.15);text-align:center}'
  + '#sns-gate-box img{height:40px;width:auto;margin:0 auto 16px;display:block}'
  + '#sns-gate-box p{font-family:\'DM Mono\',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(26,26,46,.45);margin-bottom:22px}'
  + '#sns-gate-input{width:100%;background:#fff;border:1px solid rgba(57,57,148,.15);border-radius:8px;padding:12px 14px;font-size:15px;color:#1a1a2e;outline:none;margin-bottom:12px;box-sizing:border-box;text-align:center;letter-spacing:2px;transition:border-color .18s,box-shadow .18s;font-family:\'DM Sans\',sans-serif}'
  + '#sns-gate-input:focus{border-color:#393994;box-shadow:0 0 0 3px rgba(57,57,148,.1)}'
  + '#sns-gate-input.sns-error{border-color:#e0314b;box-shadow:0 0 0 3px rgba(224,49,75,.1)}'
  + '#sns-gate-btn{width:100%;background:#393994;color:#fff;border:none;border-radius:7px;padding:12px;font-family:\'DM Sans\',sans-serif;font-size:14px;font-weight:500;cursor:pointer}'
  + '#sns-gate-btn:hover{background:#4d4db8}'
  + '#sns-gate-err{font-family:\'DM Mono\',monospace;font-size:10px;color:#e0314b;margin-top:10px;display:none}';
  document.head.appendChild(style);
  function mount() {
    var gate = document.createElement('div');
    gate.id = 'sns-gate';
    gate.innerHTML = '<div id="sns-gate-box">'
      + '<img src="https://stitchandsnare.com/wp-content/uploads/2025/05/cropped-Logo-stitch-and-snare.png" alt="SNS">'
      + '<p>Prospect Hunter &mdash; Private Access</p>'
      + '<input id="sns-gate-input" type="password" placeholder="Password" autocomplete="current-password">'
      + '<button id="sns-gate-btn">Unlock</button>'
      + '<div id="sns-gate-err">Incorrect password</div>'
      + '</div>';
    document.body.appendChild(gate);
    function attempt() {
      var val = document.getElementById('sns-gate-input').value;
      if (val === PW) {
        sessionStorage.setItem(KEY, PW);
        gate.remove();
      } else {
        var inp = document.getElementById('sns-gate-input');
        inp.classList.add('sns-error');
        document.getElementById('sns-gate-err').style.display = 'block';
        inp.value = '';
        setTimeout(function(){ inp.classList.remove('sns-error'); }, 1200);
      }
    }
    document.getElementById('sns-gate-btn').addEventListener('click', attempt);
    document.getElementById('sns-gate-input').addEventListener('keydown', function(e){ if(e.key==='Enter') attempt(); });
    document.getElementById('sns-gate-input').focus();
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mount);
  } else {
    mount();
  }
})();
</script>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<style>
  :root {
    --bg: #e9ebf2;
    --surface: rgba(255,255,255,0.85);
    --surface-hover: rgba(255,255,255,0.95);
    --surface-solid: #ffffff;
    --purple: #393994;
    --purple-bright: #4d4db8;
    --purple-dim: rgba(57,57,148,0.08);
    --purple-border: rgba(57,57,148,0.15);
    --green: #00b87a;
    --red: #e0314b;
    --amber: #d97706;
    --blue: #2563eb;
    --text: #1a1a2e;
    --text-mid: #393994;
    --text-dim: rgba(26,26,46,0.45);
    --border: rgba(57,57,148,0.12);
    --shadow: 0 2px 16px rgba(57,57,148,0.08);
    --shadow-lg: 0 8px 40px rgba(57,57,148,0.12);
    --radius: 18px;
    --radius-sm: 13px;
    --glass: rgba(255,255,255,0.8);
    --glass-edge: rgba(255,255,255,0.85);
    --glass-shadow: 0 8px 26px rgba(26,26,46,0.06);
    --nav-h: 74px;
    --nav-gap: 34px;
    --transition: 0.18s ease;
    --bottom-nav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    background-image: radial-gradient(ellipse at 20% 0%, rgba(57,57,148,0.10) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(77,77,184,0.08) 0%, transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    overscroll-behavior: none;
  }

  /* ── HEADER ── */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
  }
  .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .logo img { height: 36px; width: auto; display: block; }
  .logo-divider { width: 1px; height: 24px; background: var(--border); }
  .logo-tool { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }

  /* Desktop nav tabs (hidden on mobile) */
  .nav-tabs { display: none; gap: 4px; background: var(--purple-dim); padding: 4px; border-radius: 10px; border: 1px solid var(--purple-border); }
  .nav-tab { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; padding: 7px 16px; border-radius: 7px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; transition: var(--transition); letter-spacing: 0.3px; }
  .nav-tab.active { background: var(--purple); color: #fff; box-shadow: 0 2px 8px rgba(57,57,148,0.25); }
  .nav-tab:hover:not(.active) { color: var(--purple); background: rgba(57,57,148,0.06); }

  .header-status { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(0,184,122,0.5); flex-shrink: 0; }

  /* ── FLOATING GLASS NAV (all breakpoints) ── */
  .bottom-nav {
    display: block;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(var(--nav-gap) + var(--safe-bottom));
    z-index: 150;
    height: var(--nav-h);
    border-radius: 26px;
    background: rgba(255,255,255,0.68);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 16px 44px rgba(26,26,46,0.18),
                0 2px 6px rgba(26,26,46,0.06),
                inset 0 1px 0 rgba(255,255,255,0.9);
  }
  .bottom-nav-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: var(--nav-h);
    padding: 0 6px;
  }
  .bnav-btn {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: rgba(26,26,46,0.4);
    cursor: pointer;
    transition: color var(--transition), transform var(--transition);
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .bnav-btn:active { transform: scale(0.94); }
  .bnav-btn.active { color: var(--purple); }
  .bnav-icon { position: relative; display: flex; line-height: 1; }
  .bnav-icon svg { width: 25px; height: 25px; }
  .bnav-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
  }
  .bnav-btn.active .bnav-label { font-weight: 500; }
  .bnav-pip {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    border: 1.5px solid #fff;
    display: none;
  }
  .bnav-pip.show { display: block; }
  @media (min-width: 641px) {
    .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: 420px; }
  }

  /* ── FIND: SEGMENT FILTER ── */
  .find-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .seg { display: inline-flex; background: rgba(57,57,148,0.06); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
  .seg button { border: none; background: transparent; cursor: pointer; padding: 8px 15px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-dim); transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; }
  .seg button:hover { color: var(--text); }
  .seg button.on { background: #fff; color: var(--purple); box-shadow: var(--shadow); }
  .seg .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.75; }
  .find-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); }

  .selbar { display: none; align-items: center; justify-content: space-between; gap: 12px; background: var(--purple); color: #fff; border-radius: var(--radius-sm); padding: 11px 16px; margin-bottom: 14px; box-shadow: var(--shadow-lg); position: sticky; top: 10px; z-index: 40; }
  .selbar.show { display: flex; }
  .selbar-label { font-size: 13px; font-weight: 500; }
  .selbar .btn { background: rgba(255,255,255,0.16); color: #fff; }
  .selbar .btn:hover { background: rgba(255,255,255,0.26); }

  /* ── FIND: RESULT CARD ── */
  .fcard { position: relative; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.8); border: 1px solid var(--glass-edge); border-left: 3px solid var(--sig, var(--border)); border-radius: 20px; padding: 14px 16px 14px 15px; box-shadow: var(--shadow); transition: var(--transition); }
  .fcard:hover { background: var(--surface-hover); border-color: var(--purple-border); border-left-color: var(--sig, var(--border)); box-shadow: var(--shadow-lg); }
  .fcard.picked { background: rgba(57,57,148,0.04); }
  .fpick { flex-shrink: 0; width: 19px; height: 19px; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--purple-border); background: #fff; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
  .fpick.on { background: var(--purple); border-color: var(--purple); }
  .fpick svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
  .fpick.on svg { opacity: 1; }
  .fpick-spacer { width: 19px; flex-shrink: 0; }
  .fbody { flex: 1; min-width: 0; }
  .fname { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.25; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fsignal { font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--sig-text, var(--text-dim)); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fsignal .mark { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .fmeta { font-size: 12px; color: var(--text-dim); display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
  .fmeta .sep { opacity: 0.4; }
  .fmeta .stars { color: var(--text); font-weight: 500; }
  .fmeta .stars b { color: #f59e0b; font-weight: 500; }
  .fside { flex-shrink: 0; display: flex; align-items: center; gap: 9px; }
  .fscore { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 500; line-height: 1; text-align: center; min-width: 52px; }
  .fscore small { display: block; font-size: 9px; margin-top: 3px; opacity: 0.75; }
  .fscore.poor { color: var(--red); } .fscore.mid { color: var(--amber); }
  .fscore.good { color: var(--green); } .fscore.none { color: var(--text-dim); }
  .icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); text-decoration: none; }
  .icon-btn:hover { color: var(--purple); border-color: var(--purple-border); }
  .icon-btn svg { width: 15px; height: 15px; }

  /* ── DRAFTS ── */
  .dcard { background: rgba(255,255,255,0.8); border: 1px solid var(--glass-edge); border-left: 3px solid var(--purple); border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 10px; }
  .dcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .dcard-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
  .dcard-to { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); margin-top: 3px; }
  .dcard-to.missing { color: var(--red); }
  .dcard-age { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); white-space: nowrap; }
  .dcard-subject { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
  .dcard-body { font-size: 13px; line-height: 1.65; color: var(--text); white-space: pre-wrap; background: rgba(57,57,148,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
  .dcard-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ── MAIN ── */
  main { padding: 28px 28px calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 20px); max-width: 1400px; margin: 0 auto; }
  .section { display: none; }
  .section.active { display: block; }

  /* ── SEARCH / AUDIT GRID ── */
  .search-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }

  /* ── PANEL ── */
  .panel { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-edge); border-radius: var(--radius); padding: 20px; box-shadow: var(--glass-shadow); }
  .panel-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--purple); margin-bottom: 18px; opacity: 0.7; }

  /* ── FIELDS ── */
  .field { margin-bottom: 14px; }
  .field label { display: block; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
  .field input, .field select { width: 100%; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: var(--transition); }
  .field input:focus, .field select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(57,57,148,0.1); }
  .field select option { background: #fff; }

  /* ── BUTTONS ── */
  .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--radius-sm); border: none; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); }
  .btn-primary { background: var(--purple); color: #fff; width: 100%; justify-content: center; margin-top: 6px; min-height: 46px; box-shadow: 0 6px 18px rgba(57,57,148,0.26); }
  .btn-primary:hover { background: var(--purple-bright); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(57,57,148,0.3); }
  .btn-primary:active { transform: translateY(0); }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-ghost { background: var(--surface-solid); color: var(--text-dim); border: 1px solid var(--border); font-size: 12px; padding: 7px 12px; }
  .btn-ghost:hover { color: var(--purple); border-color: var(--purple-border); background: var(--purple-dim); }
  .btn-green { background: rgba(0,184,122,0.08); color: var(--green); border: 1px solid rgba(0,184,122,0.2); font-size: 12px; padding: 6px 12px; }
  .btn-green:hover { background: rgba(0,184,122,0.15); }
  .btn-gmail { background: #fff; color: #444; border: 1px solid #ddd; font-size: 12px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; cursor: pointer; transition: var(--transition); font-family: 'DM Sans', sans-serif; font-weight: 500; }
  .btn-gmail:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-dim); }
  .btn-preview { background: var(--purple-dim); color: var(--purple); border: 1px solid var(--purple-border); font-size: 12px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; cursor: pointer; transition: var(--transition); font-family: 'DM Sans', sans-serif; font-weight: 500; }
  .btn-preview:hover { background: rgba(57,57,148,0.15); }

  /* ── RESULTS ── */
  .results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .results-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); }
  .results-count span { color: var(--green); font-weight: 500; }
  .results-list { display: flex; flex-direction: column; gap: 8px; }
  .result-card { background: rgba(255,255,255,0.8); border: 1px solid var(--glass-edge); border-radius: 20px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: var(--transition); box-shadow: var(--shadow); }
  .result-card:hover { background: var(--surface-hover); border-color: var(--purple-border); box-shadow: var(--shadow-lg); }
  .result-card.in-pipeline { border-color: rgba(57,57,148,0.2); background: rgba(57,57,148,0.02); }
  .result-info { flex: 1; min-width: 0; }
  .result-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .result-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
  .result-meta span { display: flex; align-items: center; gap: 4px; }
  .no-website-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; background: rgba(0,229,160,0.1); color: var(--green); border: 1px solid rgba(0,229,160,0.2); white-space: nowrap; }
  .weak-site-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; background: rgba(217,119,6,0.1); color: var(--amber); border: 1px solid rgba(217,119,6,0.2); white-space: nowrap; }

  .pipeline-status-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
  .pipeline-status-badge.status-New { background: rgba(37,99,235,0.1); color: var(--blue); border: 1px solid rgba(37,99,235,0.2); }
  .pipeline-status-badge.status-Contacted { background: rgba(217,119,6,0.1); color: var(--amber); border: 1px solid rgba(217,119,6,0.2); }
  .pipeline-status-badge.status-Followed-Up { background: rgba(77,77,184,0.1); color: var(--purple-bright); border: 1px solid rgba(77,77,184,0.2); }
  .pipeline-status-badge.status-Converted { background: rgba(0,184,122,0.1); color: var(--green); border: 1px solid rgba(0,184,122,0.2); }
  .pipeline-status-badge.status-Dead { background: rgba(26,26,46,0.06); color: var(--text-dim); border: 1px solid rgba(26,26,46,0.1); }

  .review-badge { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 4px; background: rgba(57,57,148,0.08); color: var(--purple); border: 1px solid rgba(57,57,148,0.18); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .review-badge .star { color: #f59e0b; }
  .tier-select-wrap { position: relative; }
  .tier-select-wrap select { padding-left: 28px; }
  .tier-select-wrap::before { content: '⭐'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; pointer-events: none; z-index: 1; }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }
  .empty-state .icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
  .empty-state p { font-size: 13px; }

  /* ── AUDIT ── */
  .score-badge { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; white-space: nowrap; text-align: center; min-width: 64px; }
  .score-poor    { background: rgba(255,68,102,0.15); color: var(--red); border: 1px solid rgba(255,68,102,0.3); }
  .score-needs   { background: rgba(255,179,71,0.15); color: var(--amber); border: 1px solid rgba(255,179,71,0.3); }
  .score-good    { background: rgba(0,229,160,0.1); color: var(--green); border: 1px solid rgba(0,229,160,0.2); }
  .score-loading { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
  .site-url { font-size:11px; color: var(--text-dim); font-family: 'DM Mono', monospace; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
  .audit-progress { margin-bottom: 14px; padding: 12px 14px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 8px; }
  .audit-progress-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); margin-bottom: 8px; }
  .audit-progress-track { background: var(--bg); border-radius: 4px; height: 4px; overflow: hidden; }
  .audit-progress-bar { height: 100%; background: var(--green); width: 0%; transition: width 0.3s ease; box-shadow: 0 0 6px var(--green); }
  .audit-info-box { margin-top: 14px; padding: 12px; background: var(--purple-dim); border: 1px solid var(--purple-border); border-radius: 8px; }
  .audit-info-box-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--purple); letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase; }
  .audit-info-box p { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

  /* ── FOLLOW-UP ── */
  .due-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.3px; }
  .due-badge.overdue { background: rgba(224,49,75,0.12); color: var(--red); border: 1px solid rgba(224,49,75,0.25); }
  .due-badge.due-soon { background: rgba(217,119,6,0.12); color: var(--amber); border: 1px solid rgba(217,119,6,0.25); }
  .due-badge.ok { background: rgba(0,184,122,0.08); color: var(--green); border: 1px solid rgba(0,184,122,0.2); }

  /* ── PIPELINE ── */
  .mobile-status-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mobile-status-chips::-webkit-scrollbar { display: none; }
  .mobile-status-chip { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; border: 1px solid var(--purple-border); background: rgba(255,255,255,0.75); color: rgba(26,26,46,0.62); cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; }
  .mobile-status-chip.active { background: var(--purple); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(57,57,148,0.26); }
  .pipeline-filter-btn { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-dim); cursor: pointer; transition: var(--transition); letter-spacing: 0.3px; }
  .pipeline-filter-btn.active { background: var(--amber); color: #fff; border-color: var(--amber); box-shadow: 0 2px 8px rgba(217,119,6,0.2); }
  .pipeline-filter-btn:hover:not(.active) { border-color: var(--amber); color: var(--amber); }
  .pipeline-search-wrap { position: relative; margin-bottom: 16px; }
  .pipeline-search-wrap input { width: 100%; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px 9px 34px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: var(--transition); }
  .pipeline-search-wrap input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(57,57,148,0.1); }
  .pipeline-search-wrap input::placeholder { color: var(--text-dim); }
  .pipeline-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }

  /* COLLAPSE */
  .pipeline-col.collapsed .col-cards { display: none; }
  .pipeline-col.collapsed { opacity: 0.6; }
  .col-toggle { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 10px; padding: 0 2px; transition: var(--transition); line-height: 1; }
  .col-toggle:hover { color: var(--purple); }
  .pipeline-col.collapsed .col-toggle { transform: rotate(-90deg); }

  .pipeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .pipeline-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--text); }
  .pipeline-cols { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; max-width: 560px; margin: 0 auto; }
  .pipeline-col { background: transparent; border: none; border-radius: var(--radius); overflow: visible; box-shadow: none; }
  .col-header { padding: 2px 4px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: none; }
  .col-label { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
  .col-count { font-family: 'DM Mono', monospace; font-size: 11px; background: var(--purple-dim); padding: 2px 7px; border-radius: 10px; color: var(--text-dim); }
  .col-new .col-label { color: var(--blue); }
  .col-contacted .col-label { color: var(--amber); }
  .col-followed .col-label { color: var(--purple-bright); }
  .col-converted .col-label { color: var(--green); }
  .col-dead .col-label { color: var(--text-dim); }
  .col-cards { padding: 0; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
  .lead-card { background: rgba(255,255,255,0.82); border: 1px solid var(--glass-edge); border-radius: 18px; padding: 14px; cursor: pointer; transition: var(--transition); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 9px; }
  .lead-card:hover { border-color: var(--purple); background: var(--purple-dim); box-shadow: var(--shadow); }
  .lead-card-name { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .lead-card-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
  .lead-card-actions { display: flex; gap: 5px; }

  /* ── STAGE ADVANCE ── */
  .stage-row { display: flex; gap: 7px; }
  .stage-btn { min-height: 44px; border-radius: var(--radius-sm); border: none; background: rgba(57,57,148,0.09); color: var(--purple); font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 1.2px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: var(--transition); }
  .stage-btn:active { transform: scale(0.98); }
  .stage-btn.icon-only { width: 46px; flex: 0 0 46px; }
  .stage-btn.grow { flex: 1; }
  .stage-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .swipe-hint { text-align: center; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.4px; color: rgba(26,26,46,0.3); margin-top: 14px; text-transform: uppercase; }
  .col-empty { padding: 30px 16px; border-radius: 18px; border: 1px dashed rgba(57,57,148,0.18); text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.4px; color: rgba(26,26,46,0.35); }

  /* ── DRAWER (desktop default) ── */
  .drawer-overlay { position: fixed; inset: 0; background: rgba(10,10,25,0.7); backdrop-filter: blur(4px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .drawer-overlay.open { opacity: 1; pointer-events: all; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; background: rgba(255,255,255,0.97); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border-left: 1px solid var(--border); z-index: 201; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow: hidden; box-shadow: -8px 0 40px rgba(57,57,148,0.1); }
  .drawer.open { transform: translateX(0); }
  .drawer-header { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .drawer-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 4px; }
  .drawer-sub { font-size: 12px; color: var(--text-dim); }
  .drawer-close { background: var(--surface-solid); border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: var(--transition); }
  .drawer-close:hover { color: var(--text); }
  .drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; -webkit-overflow-scrolling: touch; }
  .drawer-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }

  /* ── INFO GRID ── */
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .info-item { background: var(--purple-dim); border: 1px solid var(--purple-border); border-radius: 8px; padding: 10px 12px; }
  .info-label { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
  .info-value { font-size: 13px; color: var(--text); }
  .status-select-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px; background: var(--purple-dim); border: 1px solid var(--purple-border); border-radius: 7px; }
  .status-select-row label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
  .status-select-row select { flex: 1; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 5px; padding: 6px 10px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; }
  .template-picker { margin-bottom: 14px; }
  .email-textarea { width: 100%; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 7px; padding: 12px; color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.6; resize: vertical; min-height: 200px; outline: none; transition: var(--transition); }
  .email-textarea:focus { border-color: var(--purple-bright); }
  .section-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
  .activity-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .activity-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--text-dim); padding: 8px 0; border-bottom: 1px solid var(--border); }
  .activity-item:last-child { border-bottom: none; }
  .activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-top: 4px; flex-shrink: 0; }
  .activity-time { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); margin-top: 2px; }

  /* ── TEMPLATES ── */
  .templates-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
  .template-list { display: flex; flex-direction: column; gap: 6px; }
  .template-item { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-solid); cursor: pointer; transition: var(--transition); box-shadow: 0 1px 4px rgba(57,57,148,0.05); }
  .template-item:hover, .template-item.active { border-color: var(--purple); background: var(--purple-dim); }
  .template-item-name { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
  .template-item-preview { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .template-editor { background: var(--surface); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
  .template-field { margin-bottom: 14px; }
  .template-field label { display: block; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .template-field input, .template-field textarea { width: 100%; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.6; outline: none; resize: vertical; transition: var(--transition); }
  .template-field input:focus, .template-field textarea:focus { border-color: var(--purple-bright); }
  .template-field textarea { min-height: 240px; }
  .merge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .merge-tag { font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(57,57,148,0.2); color: var(--purple-bright); border: 1px solid rgba(57,57,148,0.3); cursor: pointer; transition: var(--transition); }
  .merge-tag:hover { background: rgba(57,57,148,0.35); }

  /* ── EMAIL MODAL ── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(10,10,25,0.8); backdrop-filter: blur(6px); z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal { background: #fff; border-radius: 16px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(57,57,148,0.2); }
  .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .modal-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
  .modal-close { background: var(--surface-solid); border: 1px solid var(--border); color: var(--text-dim); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); }
  .modal-close:hover { color: var(--text); }
  .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  .send-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-family: 'DM Mono', monospace; padding: 6px 12px; border-radius: 6px; }
  .send-status.sending { background: var(--purple-dim); color: var(--purple); }
  .send-status.success { background: rgba(0,184,122,0.1); color: var(--green); }
  .send-status.error { background: rgba(224,49,75,0.1); color: var(--red); }

  /* ── KEYWORD UI ── */
  .kw-groups { margin-top: 10px; }
  .kw-tab-bar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
  .kw-tab { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-dim); cursor: pointer; transition: var(--transition); letter-spacing: 0.3px; white-space: nowrap; }
  .kw-tab.active { background: var(--purple); color: #fff; border-color: var(--purple); }
  .kw-tab:hover:not(.active) { border-color: var(--purple-border); color: var(--purple); background: var(--purple-dim); }
  .kw-group-panel { display: none; }
  .kw-group-panel.active { display: block; }
  .kw-show-more { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--purple); background: none; border: none; cursor: pointer; padding: 4px 0; margin-top: 4px; display: block; }
  .kw-show-more:hover { text-decoration: underline; }
  .kw-extra { display: none; }
  .kw-extra.open { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
  .kw-group-label { font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 5px; }
  .kw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .kw-tag { font-family: 'DM Sans', sans-serif; font-size: 11px; padding: 4px 9px; border-radius: 5px; background: var(--purple-dim); border: 1px solid var(--purple-border); color: var(--purple); cursor: pointer; transition: var(--transition); user-select: none; }
  .kw-tag:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
  .kw-tag.active { background: var(--purple); color: #fff; border-color: var(--purple); }

  /* ── SEARCH PANEL ACCORDION (mobile) ── */
  .search-panel-toggle {
    display: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .search-panel-toggle-icon { transition: transform 0.2s ease; font-size: 12px; color: var(--text-dim); }
  .search-panel-toggle.open .search-panel-toggle-icon { transform: rotate(180deg); }
  .search-panel-collapsible { overflow: hidden; transition: max-height 0.3s ease; }

  /* ── TOAST ── */
  .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; font-size: 13px; color: var(--text); opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 999; white-space: nowrap; box-shadow: var(--shadow-lg); }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── SPINNER ── */
  .spinner { width: 18px; height: 18px; border: 2px solid rgba(57,57,148,0.2); border-top-color: var(--purple); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--purple-border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--purple); }

  @media (max-width: 900px) {
    .search-grid { grid-template-columns: 1fr; }
    .pipeline-cols { grid-template-columns: repeat(2, 1fr); }
    .templates-grid { grid-template-columns: 1fr; }
    .drawer { width: 100%; }
    .modal { max-width: 100%; }
  }

  @media (max-width: 640px) {
    header { padding: 10px 16px; gap: 8px; }
    .logo img { height: 30px; }
    .logo-tool { display: none; }
    .logo-divider { display: none; }
    .nav-tabs { display: none; }
    .header-status span:last-child { display: none; }
    .bottom-nav { display: block; }
    main { padding: 14px 12px; padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 16px); }
    .toast { bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 12px); font-size: 12px; padding: 8px 14px; max-width: 90vw; white-space: normal; text-align: center; }
    .search-panel-toggle { display: flex; }
    .search-panel-collapsible.collapsed { max-height: 0; }
    .search-panel-collapsible.expanded { max-height: 2000px; }
    .fcard { flex-wrap: wrap; }
    .fbody { flex: 1 1 100%; order: 2; }
    .fpick { order: 1; }
    .fpick-spacer { display: none; }
    .fside { order: 3; flex: 1 1 100%; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 11px; margin-top: 2px; }
    .fname { white-space: normal; }
    .result-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
    .result-card > div:last-child { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
    .result-name { font-size: 13px; white-space: normal; }
    .result-meta { flex-direction: column; gap: 4px; }
    .pipeline-cols { grid-template-columns: 1fr; gap: 10px; }
    .pipeline-title { font-size: 18px; }
    .pipeline-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pipeline-header > div:first-child { flex-wrap: wrap; gap: 8px; }
    .mobile-status-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .mobile-status-chips::-webkit-scrollbar { display: none; }
    .mobile-status-chip { flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface-solid); color: var(--text-dim); cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; white-space: nowrap; }
    .mobile-status-chip.active { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 0 2px 8px rgba(57,57,148,0.25); }
    .lead-card { padding: 14px; }
    .lead-card-name { font-size: 13px; }
    .lead-card-actions .btn { min-height: 36px; font-size: 12px; }
    .lead-card-actions { gap: 6px; }
    .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92vh; border-left: none; border-top: 1px solid var(--border); border-radius: 26px 26px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom)); }
    .drawer.open { transform: translateY(0); }
    .drawer-handle { display: flex; justify-content: center; padding: 12px 0 6px; flex-shrink: 0; }
    .drawer-handle::before { content: ''; width: 36px; height: 4px; background: var(--border); border-radius: 2px; }
    .drawer-header { padding: 12px 18px 14px; }
    .drawer-body { padding: 14px 18px; }
    .drawer-footer { padding: 10px 18px calc(8px + var(--safe-bottom)); gap: 6px; }
    .drawer { padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 12px); }
    .drawer-footer .btn { font-size: 12px; padding: 10px 14px; }
    .btn-preview { width: 100%; justify-content: center; margin-bottom: 2px; }
    .info-grid { grid-template-columns: 1fr; }
    .info-item[style*="grid-column"] { grid-column: 1 !important; }
    .email-textarea { font-size: 14px; min-height: 160px; }
    .modal { border-radius: 20px 20px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 92vh; margin: 0; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-footer { flex-wrap: wrap; justify-content: stretch; }
    .modal-footer .btn { flex: 1; justify-content: center; min-width: 0; }
    #email-preview-frame { height: 340px; }
    .templates-grid { grid-template-columns: 1fr; }
    .template-item { padding: 12px; }
    .field input, .field select { font-size: 16px; padding: 12px; }
    .btn-primary { padding: 14px 16px; font-size: 15px; min-height: 48px; }
    .btn-green, .btn-ghost { min-height: 40px; }
    .audit-progress { padding: 10px 12px; }
    .score-badge { font-size: 11px; padding: 4px 8px; min-width: 52px; }
    .col-header { padding: 12px 14px; }
    .col-cards { padding: 8px; }
  }
  /* ── AGENT PANEL ── */
  .agent-panel { background: var(--surface-solid); border: 1px solid var(--purple-border); border-radius: 8px; padding: 14px; margin-bottom: 20px; }
  .agent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .agent-title { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--purple); text-transform: uppercase; letter-spacing: 0.5px; }
  .agent-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .agent-url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .agent-url-row input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text); outline: none; min-width: 0; }
  .agent-url-row input:focus { border-color: var(--purple); }
  .opp-pill { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
  .opp-high { background: rgba(0,184,122,0.12); color: var(--green); border: 1px solid rgba(0,184,122,0.25); }
  .opp-mid  { background: rgba(217,119,6,0.12); color: var(--amber); border: 1px solid rgba(217,119,6,0.25); }
  .opp-low  { background: rgba(26,26,46,0.06); color: var(--text-dim); border: 1px solid rgba(26,26,46,0.1); }
  .finding-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
  .finding-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text); line-height: 1.5; }
  .finding-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); margin-top: 6px; flex-shrink: 0; }
  .agent-empty { font-size: 12px; color: var(--text-dim); }
  .email-cand { display: block; width: 100%; text-align: left; background: transparent; border: none; border-top: 1px solid var(--purple-border); padding: 7px 0; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); cursor: pointer; }
  .email-cand:hover { color: var(--text); }
  .draft-hist { display: block; width: 100%; text-align: left; background: transparent; border: none; border-top: 1px solid var(--purple-border); padding: 8px 0; cursor: pointer; }
  .draft-hist:hover .draft-hist-sub { color: var(--text); }
  .draft-hist-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: var(--transition); }
  .draft-hist-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-dim); opacity: 0.7; margin-top: 2px; }
  .email-cand span { color: var(--text-dim); opacity: 0.6; margin-left: 6px; }

  /* ── STANDALONE (installed app) ── */
  @media (display-mode: standalone), (display-mode: fullscreen) {
    header { padding-top: calc(14px + var(--safe-top)); }
    body { overscroll-behavior-y: contain; }
    .btn, .nav-tab, .bnav-btn, .kw-tag, .lead-card,
    .mobile-status-chip, .template-item {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
  }

  /* ── UPDATE BAR ── */
  .update-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + 12px);
    z-index: 998;
    background: var(--purple);
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(57,57,148,0.35);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
  }
  .update-bar.show { display: flex; }
  .update-bar button {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
  }
  @media (min-width: 641px) {
    .update-bar { bottom: 20px; left: auto; right: 20px; max-width: 340px; }
  }
</style>
</head>
<body>
<header>
  <a class="logo" href="#">
    <img src="./icons/icon-96.png" alt="Stitch &amp; Snare" />
    <div class="logo-divider"></div>
    <span class="logo-tool">Prospect Hunter</span>
  </a>
  <nav class="nav-tabs">
    <button class="nav-tab active" onclick="switchTab('search', this)">Find</button>
    <button class="nav-tab" onclick="switchTab('pipeline', this)">Pipeline</button>
    <button class="nav-tab" onclick="switchTab('drafts', this)">Drafts</button>
    <button class="nav-tab" onclick="switchTab('templates', this)">Templates</button>
  </nav>
  <div class="header-status">
    <span class="status-dot"></span>
    <span id="status-label">Connected</span>
  </div>
</header>

<!-- BOTTOM NAV (mobile) -->
<nav class="bottom-nav">
  <div class="bottom-nav-inner">
    <button class="bnav-btn active" id="bnav-search" onclick="switchTabMobile('search', this)">
      <span class="bnav-icon"><svg fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.9-3.9"></path></svg></span>
      <span class="bnav-label">Find</span>
    </button>
    <button class="bnav-btn" id="bnav-pipeline" onclick="switchTabMobile('pipeline', this)">
      <span class="bnav-icon"><svg fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><rect x="3" y="4" width="6" height="16" rx="1.6"></rect><rect x="12" y="4" width="6" height="10" rx="1.6"></rect><path d="M21 4v6"></path></svg><span class="bnav-pip" id="bnav-pip-pipeline"></span></span>
      <span class="bnav-label">Pipeline</span>
    </button>
    <button class="bnav-btn" id="bnav-drafts" onclick="switchTabMobile('drafts', this)">
      <span class="bnav-icon"><svg fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><path d="M4 5h16v11H7l-3 3V5Z"></path><path d="M8 9h8M8 12.5h5"></path></svg><span class="bnav-pip" id="bnav-pip-drafts"></span></span>
      <span class="bnav-label">Drafts</span>
    </button>
    <button class="bnav-btn" id="bnav-templates" onclick="switchTabMobile('templates', this)">
      <span class="bnav-icon"><svg fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2.4"></rect><path d="m3.6 6.5 8.4 6 8.4-6"></path></svg></span>
      <span class="bnav-label">Templates</span>
    </button>
  </div>
</nav>

<main>
  <!-- SEARCH -->
  <section id="section-search" class="section active">
    <div class="search-grid">
      <div>
        <button class="search-panel-toggle open" id="search-toggle" onclick="toggleSearchPanel('search')">
          <span>🔍 Search Parameters</span>
          <span class="search-panel-toggle-icon">▼</span>
        </button>
        <div class="search-panel-collapsible expanded" id="search-collapsible">
          <div class="panel">
            <div class="panel-title">Search Parameters</div>
            <div class="field">
              <label>Keyword / Business Type</label>
              <input type="text" id="search-keyword" placeholder="e.g. plumber, salon, gym" />
              <div class="kw-groups">
                <div class="kw-tab-bar"><button class="kw-tab active" onclick="switchKwTab('search','Trades',this)">Trades</button><button class="kw-tab" onclick="switchKwTab('search','Health-and-Beauty',this)">Health & Beauty</button><button class="kw-tab" onclick="switchKwTab('search','Food-and-Local',this)">Food & Local</button><button class="kw-tab" onclick="switchKwTab('search','Local-Services',this)">Local Services</button><button class="kw-tab" onclick="switchKwTab('search','Marine-and-Outdoor',this)">Marine & Outdoor</button><button class="kw-tab" onclick="switchKwTab('search','Auto-and-Events',this)">Auto & Events</button><button class="kw-tab" onclick="switchKwTab('search','Home-and-Design',this)">Home & Design</button></div>
                <div class="kw-group-panel active" id="kwpanel-search-Trades">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','plumber')">Plumber</span><span class="kw-tag" onclick="setKeyword('search','electrician')">Electrician</span><span class="kw-tag" onclick="setKeyword('search','roofer')">Roofer</span><span class="kw-tag" onclick="setKeyword('search','handyman')">Handyman</span><span class="kw-tag" onclick="setKeyword('search','painter')">Painter</span><span class="kw-tag" onclick="setKeyword('search','landscaper')">Landscaper</span><span class="kw-tag" onclick="setKeyword('search','pressure washing')">Pressure Washing</span><span class="kw-tag" onclick="setKeyword('search','pool service')">Pool Service</span><span class="kw-tag" onclick="setKeyword('search','ac repair')">AC Repair</span><span class="kw-tag" onclick="setKeyword('search','fence company')">Fence Company</span></div>
                  <div class="kw-extra" id="kwextra-search-Trades"><span class="kw-tag" onclick="setKeyword('search','general contractor')">General Contractor</span><span class="kw-tag" onclick="setKeyword('search','concrete')">Concrete</span><span class="kw-tag" onclick="setKeyword('search','flooring')">Flooring</span><span class="kw-tag" onclick="setKeyword('search','tree service')">Tree Service</span><span class="kw-tag" onclick="setKeyword('search','irrigation')">Irrigation</span><span class="kw-tag" onclick="setKeyword('search','pest control')">Pest Control</span><span class="kw-tag" onclick="setKeyword('search','gutters')">Gutters</span><span class="kw-tag" onclick="setKeyword('search','drywall')">Drywall</span><span class="kw-tag" onclick="setKeyword('search','septic')">Septic</span><span class="kw-tag" onclick="setKeyword('search','generator')">Generator</span><span class="kw-tag" onclick="setKeyword('search','garage door')">Garage Door</span><span class="kw-tag" onclick="setKeyword('search','window cleaning')">Window Cleaning</span><span class="kw-tag" onclick="setKeyword('search','appliance repair')">Appliance Repair</span><span class="kw-tag" onclick="setKeyword('search','masonry')">Masonry</span><span class="kw-tag" onclick="setKeyword('search','tile & grout')">Tile & Grout</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Trades',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Health-and-Beauty">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','nail salon')">Nail Salon</span><span class="kw-tag" onclick="setKeyword('search','barbershop')">Barbershop</span><span class="kw-tag" onclick="setKeyword('search','hair salon')">Hair Salon</span><span class="kw-tag" onclick="setKeyword('search','massage')">Massage</span><span class="kw-tag" onclick="setKeyword('search','esthetician')">Esthetician</span><span class="kw-tag" onclick="setKeyword('search','tattoo shop')">Tattoo Shop</span><span class="kw-tag" onclick="setKeyword('search','personal trainer')">Personal Trainer</span><span class="kw-tag" onclick="setKeyword('search','med spa')">Med Spa</span></div>
                  <div class="kw-extra" id="kwextra-search-Health-and-Beauty"><span class="kw-tag" onclick="setKeyword('search','chiropractic')">Chiropractic</span><span class="kw-tag" onclick="setKeyword('search','acupuncture')">Acupuncture</span><span class="kw-tag" onclick="setKeyword('search','yoga studio')">Yoga Studio</span><span class="kw-tag" onclick="setKeyword('search','tanning salon')">Tanning Salon</span><span class="kw-tag" onclick="setKeyword('search','nutritionist')">Nutritionist</span><span class="kw-tag" onclick="setKeyword('search','life coach')">Life Coach</span><span class="kw-tag" onclick="setKeyword('search','physical therapist')">Physical Therapist</span><span class="kw-tag" onclick="setKeyword('search','occupational therapist')">Occupational Therapist</span><span class="kw-tag" onclick="setKeyword('search','speech therapist')">Speech Therapist</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Health-and-Beauty',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Food-and-Local">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','food truck')">Food Truck</span><span class="kw-tag" onclick="setKeyword('search','catering')">Catering</span><span class="kw-tag" onclick="setKeyword('search','bakery')">Bakery</span><span class="kw-tag" onclick="setKeyword('search','meal prep')">Meal Prep</span><span class="kw-tag" onclick="setKeyword('search','coffee shop')">Coffee Shop</span></div>
                  <div class="kw-extra" id="kwextra-search-Food-and-Local"><span class="kw-tag" onclick="setKeyword('search','personal chef')">Personal Chef</span><span class="kw-tag" onclick="setKeyword('search','food delivery')">Food Delivery</span><span class="kw-tag" onclick="setKeyword('search','private chef')">Private Chef</span><span class="kw-tag" onclick="setKeyword('search','meal kit')">Meal Kit</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Food-and-Local',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Local-Services">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','pet groomer')">Pet Groomer</span><span class="kw-tag" onclick="setKeyword('search','cleaning service')">Cleaning Service</span><span class="kw-tag" onclick="setKeyword('search','junk removal')">Junk Removal</span><span class="kw-tag" onclick="setKeyword('search','auto detailing')">Auto Detailing</span><span class="kw-tag" onclick="setKeyword('search','wedding photographer')">Wedding Photographer</span><span class="kw-tag" onclick="setKeyword('search','moving company')">Moving Company</span></div>
                  <div class="kw-extra" id="kwextra-search-Local-Services"><span class="kw-tag" onclick="setKeyword('search','photographer')">Photographer</span><span class="kw-tag" onclick="setKeyword('search','videographer')">Videographer</span><span class="kw-tag" onclick="setKeyword('search','locksmith')">Locksmith</span><span class="kw-tag" onclick="setKeyword('search','dog trainer')">Dog Trainer</span><span class="kw-tag" onclick="setKeyword('search','dog walker')">Dog Walker</span><span class="kw-tag" onclick="setKeyword('search','childcare')">Childcare</span><span class="kw-tag" onclick="setKeyword('search','tutoring')">Tutoring</span><span class="kw-tag" onclick="setKeyword('search','notary')">Notary</span><span class="kw-tag" onclick="setKeyword('search','bookkeeper')">Bookkeeper</span><span class="kw-tag" onclick="setKeyword('search','mobile notary')">Mobile Notary</span><span class="kw-tag" onclick="setKeyword('search','process server')">Process Server</span><span class="kw-tag" onclick="setKeyword('search','commercial cleaning')">Commercial Cleaning</span><span class="kw-tag" onclick="setKeyword('search','courier')">Courier</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Local-Services',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Marine-and-Outdoor">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','boat detailing')">Boat Detailing</span><span class="kw-tag" onclick="setKeyword('search','charter fishing')">Charter Fishing</span><span class="kw-tag" onclick="setKeyword('search','marine repair')">Marine Repair</span><span class="kw-tag" onclick="setKeyword('search','lawn care')">Lawn Care</span><span class="kw-tag" onclick="setKeyword('search','golf cart repair')">Golf Cart Repair</span></div>
                  <div class="kw-extra" id="kwextra-search-Marine-and-Outdoor"><span class="kw-tag" onclick="setKeyword('search','rv repair')">RV Repair</span><span class="kw-tag" onclick="setKeyword('search','kayak rental')">Kayak Rental</span><span class="kw-tag" onclick="setKeyword('search','tour guide')">Tour Guide</span><span class="kw-tag" onclick="setKeyword('search','boat charter')">Boat Charter</span><span class="kw-tag" onclick="setKeyword('search','vacation rental')">Vacation Rental</span><span class="kw-tag" onclick="setKeyword('search','dock repair')">Dock Repair</span><span class="kw-tag" onclick="setKeyword('search','marine mechanic')">Marine Mechanic</span><span class="kw-tag" onclick="setKeyword('search','paddleboard rental')">Paddleboard Rental</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Marine-and-Outdoor',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Auto-and-Events">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','mobile mechanic')">Mobile Mechanic</span><span class="kw-tag" onclick="setKeyword('search','auto detailing')">Auto Detailing</span><span class="kw-tag" onclick="setKeyword('search','dj')">DJ</span><span class="kw-tag" onclick="setKeyword('search','event planner')">Event Planner</span><span class="kw-tag" onclick="setKeyword('search','photo booth rental')">Photo Booth Rental</span></div>
                  <div class="kw-extra" id="kwextra-search-Auto-and-Events"><span class="kw-tag" onclick="setKeyword('search','florist')">Florist</span><span class="kw-tag" onclick="setKeyword('search','face painter')">Face Painter</span><span class="kw-tag" onclick="setKeyword('search','party entertainer')">Party Entertainer</span><span class="kw-tag" onclick="setKeyword('search','wedding venue')">Wedding Venue</span><span class="kw-tag" onclick="setKeyword('search','limo service')">Limo Service</span><span class="kw-tag" onclick="setKeyword('search','towing service')">Towing Service</span><span class="kw-tag" onclick="setKeyword('search','auto glass repair')">Auto Glass Repair</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Auto-and-Events',this)">+ Show more</button>
                </div>
                <div class="kw-group-panel" id="kwpanel-search-Home-and-Design">
                  <div class="kw-tags"><span class="kw-tag" onclick="setKeyword('search','interior designer')">Interior Designer</span><span class="kw-tag" onclick="setKeyword('search','home staging')">Home Staging</span><span class="kw-tag" onclick="setKeyword('search','home inspector')">Home Inspector</span><span class="kw-tag" onclick="setKeyword('search','closet organizer')">Closet Organizer</span><span class="kw-tag" onclick="setKeyword('search','handyman')">Handyman</span></div>
                  <div class="kw-extra" id="kwextra-search-Home-and-Design"><span class="kw-tag" onclick="setKeyword('search','kitchen remodel')">Kitchen Remodel</span><span class="kw-tag" onclick="setKeyword('search','bath remodel')">Bath Remodel</span><span class="kw-tag" onclick="setKeyword('search','painting contractor')">Painting Contractor</span><span class="kw-tag" onclick="setKeyword('search','wallpaper installation')">Wallpaper Installation</span><span class="kw-tag" onclick="setKeyword('search','furniture assembly')">Furniture Assembly</span><span class="kw-tag" onclick="setKeyword('search','smart home installation')">Smart Home Installation</span></div>
                  <button class="kw-show-more" onclick="toggleKwMore('search','Home-and-Design',this)">+ Show more</button>
                </div>
              </div>
            </div>
            <div class="field">
              <label>Location</label>
              <select id="search-location-preset" onchange="handleLocationPreset()">
                <option value="">— Select Location —</option>
                <optgroup label="── Core Market ──"><option value="St. Augustine, FL">St. Augustine, FL</option><option value="St. Johns County, FL">St. Johns County, FL</option><option value="Jacksonville, FL">Jacksonville, FL</option><option value="Ponte Vedra, FL">Ponte Vedra, FL</option><option value="Palm Coast, FL">Palm Coast, FL</option></optgroup>
                <optgroup label="── 0–50 Miles ──"><option value="Duval County, FL">Duval County, FL</option><option value="Flagler County, FL">Flagler County, FL</option><option value="Putnam County, FL">Putnam County, FL</option><option value="Fernandina Beach, FL">Fernandina Beach, FL</option><option value="Orange Park, FL">Orange Park, FL</option><option value="Palatka, FL">Palatka, FL</option><option value="Bunnell, FL">Bunnell, FL</option></optgroup>
                <optgroup label="── 50–100 Miles ──"><option value="Clay County, FL">Clay County, FL</option><option value="Nassau County, FL">Nassau County, FL</option><option value="Alachua County, FL">Alachua County, FL</option><option value="Marion County, FL">Marion County, FL</option><option value="Volusia County, FL">Volusia County, FL</option><option value="Gainesville, FL">Gainesville, FL</option><option value="Ocala, FL">Ocala, FL</option><option value="Daytona Beach, FL">Daytona Beach, FL</option><option value="Ormond Beach, FL">Ormond Beach, FL</option><option value="Green Cove Springs, FL">Green Cove Springs, FL</option></optgroup>
                <optgroup label="── 100–150 Miles ──"><option value="Baker County, FL">Baker County, FL</option><option value="Columbia County, FL">Columbia County, FL</option><option value="Citrus County, FL">Citrus County, FL</option><option value="Lake County, FL">Lake County, FL</option><option value="Seminole County, FL">Seminole County, FL</option><option value="Orange County, FL">Orange County, FL</option><option value="Osceola County, FL">Osceola County, FL</option><option value="Brevard County, FL">Brevard County, FL</option><option value="Orlando, FL">Orlando, FL</option><option value="Sanford, FL">Sanford, FL</option><option value="Leesburg, FL">Leesburg, FL</option><option value="Lake City, FL">Lake City, FL</option><option value="Inverness, FL">Inverness, FL</option><option value="Melbourne, FL">Melbourne, FL</option></optgroup>
                <optgroup label="── 150–200 Miles ──"><option value="Hillsborough County, FL">Hillsborough County, FL</option><option value="Polk County, FL">Polk County, FL</option><option value="Indian River County, FL">Indian River County, FL</option><option value="Suwannee County, FL">Suwannee County, FL</option><option value="Bradford County, FL">Bradford County, FL</option><option value="Union County, FL">Union County, FL</option><option value="Tampa, FL">Tampa, FL</option><option value="Lakeland, FL">Lakeland, FL</option><option value="Vero Beach, FL">Vero Beach, FL</option><option value="Live Oak, FL">Live Oak, FL</option></optgroup>
                <option value="custom">✏️ Custom…</option>
              </select>
            </div>
            <div class="field" id="custom-location-wrap" style="display:none"><label>Custom Location</label><input type="text" id="search-location-custom" placeholder="City, State" /></div>
            <div class="field"><label>Radius</label><select id="search-radius"><option value="5000">5 miles</option><option value="10000" selected>10 miles</option><option value="20000">20 miles</option><option value="40000">40 miles</option></select></div>
            <div class="field"><label>Review Count</label><div class="tier-select-wrap"><select id="search-review-tier"><option value="any">Any — no filter</option><option value="starter">Starter — 10+ reviews</option><option value="sweet">Sweet Spot — 25–150 reviews</option><option value="established">Established — 150+ reviews</option></select></div></div>
            <button class="btn btn-primary" id="search-btn" onclick="runFind()"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>Search</button>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="find-bar">
          <div class="seg" id="find-seg">
            <button class="on" data-f="nosite" onclick="setFindFilter('nosite', this)"><i class="dot" style="color:var(--green)"></i>No website</button>
            <button data-f="hassite" onclick="setFindFilter('hassite', this)"><i class="dot" style="color:var(--amber)"></i>Has website</button>
            <button data-f="all" onclick="setFindFilter('all', this)">All</button>
          </div>
          <span class="find-count" id="find-count">No search yet</span>
        </div>
        <div class="selbar" id="selbar">
          <span class="selbar-label" id="selbar-label">0 selected</span>
          <button class="btn" id="audit-selected-btn" onclick="auditSelected()">Run audit</button>
        </div>
        <div id="audit-progress" class="audit-progress" style="display:none"><div class="audit-progress-label" id="audit-progress-label">Auditing…</div><div class="audit-progress-track"><div class="audit-progress-bar" id="audit-progress-bar"></div></div></div>
        <div id="results-list" class="results-list"><div class="empty-state"><div class="icon">🔍</div><p>Run a search to find prospects</p></div></div>
      </div>
    </div>
  </section>

  <!-- DRAFTS (stub) -->
  <section id="section-drafts" class="section">
    <div class="panel">
      <div class="results-header">
        <div class="panel-title" style="margin:0">Pending Drafts</div>
        <div class="results-count"><span id="drafts-count">0</span> awaiting review</div>
      </div>
      <div id="drafts-list"><div class="empty-state"><div class="spinner"></div></div></div>
    </div>
  </section>

  <!-- PIPELINE -->
  <section id="section-pipeline" class="section">
    <div class="pipeline-header">
      <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
        <div class="pipeline-title">Pipeline</div>
        <button class="pipeline-filter-btn" id="due-filter-btn" onclick="toggleDueFilter(this)">&#x1F514; Due Today</button>
        <button class="pipeline-filter-btn" id="auto-dead-btn" onclick="runAutoDead()" style="border-color:rgba(224,49,75,0.3);color:var(--red);">&#x1F5D1; Auto-Dead</button>
      </div>
      <button class="btn btn-ghost" onclick="exportCSV()"><svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Export</button>
    </div>
    <div class="pipeline-search-wrap">
      <svg class="pipeline-search-icon" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <input type="text" id="pipeline-search" placeholder="Search leads by name or city…" oninput="renderPipeline()" />
    </div>
    <div class="mobile-status-chips" id="mobile-status-chips"></div>
    <div class="pipeline-cols">
      <div class="pipeline-col col-new" id="pcol-col-new"><div class="col-header" onclick="toggleCol('col-new')" style="cursor:pointer"><span class="col-label">New</span><div style="display:flex;align-items:center;gap:6px"><span class="col-count" id="count-New">0</span><button class="col-toggle" onclick="event.stopPropagation();toggleCol('col-new')">&#x25BE;</button></div></div><div class="col-cards" id="col-New"></div></div>
      <div class="pipeline-col col-contacted" id="pcol-col-contacted"><div class="col-header" onclick="toggleCol('col-contacted')" style="cursor:pointer"><span class="col-label">Contacted</span><div style="display:flex;align-items:center;gap:6px"><span class="col-count" id="count-Contacted">0</span><button class="col-toggle" onclick="event.stopPropagation();toggleCol('col-contacted')">&#x25BE;</button></div></div><div class="col-cards" id="col-Contacted"></div></div>
      <div class="pipeline-col col-followed" id="pcol-col-followed"><div class="col-header" onclick="toggleCol('col-followed')" style="cursor:pointer"><span class="col-label">Followed Up</span><div style="display:flex;align-items:center;gap:6px"><span class="col-count" id="count-Followed Up">0</span><button class="col-toggle" onclick="event.stopPropagation();toggleCol('col-followed')">&#x25BE;</button></div></div><div class="col-cards" id="col-Followed Up"></div></div>
      <div class="pipeline-col col-converted" id="pcol-col-converted"><div class="col-header" onclick="toggleCol('col-converted')" style="cursor:pointer"><span class="col-label">Converted</span><div style="display:flex;align-items:center;gap:6px"><span class="col-count" id="count-Converted">0</span><button class="col-toggle" onclick="event.stopPropagation();toggleCol('col-converted')">&#x25BE;</button></div></div><div class="col-cards" id="col-Converted"></div></div>
      <div class="pipeline-col col-dead" id="pcol-col-dead"><div class="col-header" onclick="toggleCol('col-dead')" style="cursor:pointer"><span class="col-label">Dead</span><div style="display:flex;align-items:center;gap:6px"><span class="col-count" id="count-Dead">0</span><button class="col-toggle" onclick="event.stopPropagation();toggleCol('col-dead')">&#x25BE;</button></div></div><div class="col-cards" id="col-Dead"></div></div>
    </div>
    <div class="swipe-hint">Use the arrows to move a lead through stages</div>
  </section>

  <!-- TEMPLATES -->
  <section id="section-templates" class="section">
    <div class="templates-grid">
      <div><div class="panel-title">Templates</div><div class="template-list" id="template-list"></div><button class="btn btn-ghost" style="width:100%;margin-top:10px;justify-content:center" onclick="newTemplate()">+ New Template</button></div>
      <div class="template-editor" id="template-editor"><div class="empty-state"><div class="icon">✉️</div><p>Select a template to edit</p></div></div>
    </div>
  </section>
</main>

<!-- EMAIL PREVIEW MODAL -->
<div class="modal-overlay" id="email-modal-overlay">
  <div class="modal">
    <div class="modal-header"><div class="modal-title">📧 Email Preview</div><button class="modal-close" onclick="closeEmailModal()">✕</button></div>
    <div class="modal-body" id="email-modal-body"></div>
    <div class="modal-footer"><span id="send-status-label"></span><button class="btn btn-ghost" onclick="closeEmailModal()">Cancel</button><button class="btn btn-ghost" id="modal-test-btn" onclick="sendTestEmail()" style="color:var(--purple);border-color:var(--purple-border);">🧪 Test</button><button class="btn btn-gmail" id="modal-send-btn" onclick="sendViaGmail()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6z" fill="#EA4335" opacity=".2"/><path d="M22 6L12 13 2 6" stroke="#EA4335" stroke-width="2" stroke-linecap="round"/></svg>Send</button></div>
  </div>
</div>

<div class="drawer-overlay" id="drawer-overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
  <div class="drawer-handle"></div>
  <div class="drawer-header"><div><div class="drawer-title" id="drawer-title">—</div><div class="drawer-sub" id="drawer-sub">—</div></div><button class="drawer-close" onclick="closeDrawer()">✕</button></div>
  <div class="drawer-body" id="drawer-body"></div>
  <div class="drawer-footer" id="drawer-footer"></div>
</div>
<div class="toast" id="toast"></div>
<div class="update-bar" id="update-bar">
  <span>New version available</span>
  <button onclick="applyUpdate()">Reload</button>
</div>

<script>
const GMAIL_CLIENT_ID = '150291799697-noh2k44u8cbrta3kf218dqbp72ca3jhr.apps.googleusercontent.com';
const GMAIL_SCOPE = 'https://www.googleapis.com/auth/gmail.send';
let gmailToken = null;

async function getGmailToken() {
  return new Promise((resolve, reject) => {
    if (gmailToken && gmailToken.expires > Date.now()) { resolve(gmailToken.token); return; }
    const client = google.accounts.oauth2.initTokenClient({
      client_id: GMAIL_CLIENT_ID, scope: GMAIL_SCOPE,
      callback: (resp) => {
        if (resp.error) { reject(resp.error); return; }
        gmailToken = { token: resp.access_token, expires: Date.now() + (resp.expires_in * 1000) - 60000 };
        resolve(resp.access_token);
      }
    });
    client.requestAccessToken({ prompt: gmailToken ? '' : 'consent' });
  });
}

async function sendGmailMessage(to, subject, htmlBody) {
  const token = await getGmailToken();
  const email = [`To: ${to}`,`From: stitchandsnare@gmail.com`,`Subject: =?UTF-8?B?${btoa(unescape(encodeURIComponent(subject)))}?=`,`MIME-Version: 1.0`,`Content-Type: text/html; charset=UTF-8`,``,htmlBody].join('\r\n');
  const encoded = btoa(unescape(encodeURIComponent(email))).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
  const resp = await fetch('https://gmail.googleapis.com/gmail/v1/users/me/messages/send', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ raw: encoded }) });
  if (!resp.ok) { const err = await resp.json(); throw new Error(err.error?.message || 'Gmail send failed'); }
  return await resp.json();
}

const SUPABASE_URL  = 'https://kbabcvfxlfobczwybedy.supabase.co';
const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtiYWJjdmZ4bGZvYmN6d3liZWR5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU1MDUxMTEsImV4cCI6MjA5MTA4MTExMX0.mr7CCtfkN1IYrFyiqjb_boDgodwGjPeW8g1KADjPfqY';
const EDGE_FN_URL   = 'https://kbabcvfxlfobczwybedy.supabase.co/functions/v1/dynamic-responder';
const PSI_KEY       = 'AIzaSyAGmtWwxvPfYsapyZWUsU_uND-CHAxg7Go';
const EDGE_BASE     = 'https://kbabcvfxlfobczwybedy.supabase.co/functions/v1';
const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON);

let leads = [], templates = [], activity = [], currentLead = null, activeTemplateId = null;
let pendingEmailHtml = '', pendingEmailSubject = '';
let currentAudit = null, aiDraftSubject = '', emailCandidates = [], leadDrafts = [];
let mobileActiveStatus = 'New';

function findInPipeline(name) {
  if (!name) return null;
  return leads.find(l => l.business_name.toLowerCase().trim() === name.toLowerCase().trim()) || null;
}
function pipelineStatusBadge(status) {
  const cssStatus = status.replace(/\s+/g, '-');
  return `<span class="pipeline-status-badge status-${cssStatus}">✓ ${status}</span>`;
}

// Domains that Google Places sometimes returns as `websiteUri` even though
// the business has no real website — these are directory/social pages, not
// a site. Treat them as no-website prospects (highest-intent: they've
// already invested in a profile, just never built a real site).
const WEAK_SITE_DOMAINS = [
  { match: 'facebook.com', label: 'FACEBOOK' },
  { match: 'fb.com', label: 'FACEBOOK' },
  { match: 'instagram.com', label: 'INSTAGRAM' },
  { match: 'yelp.com', label: 'YELP' },
  { match: 'blismo.com', label: 'BLISMO' },
  { match: 'linktr.ee', label: 'LINKTREE' }
];
function getWeakSiteInfo(url) {
  if (!url) return null;
  try {
    const host = new URL(url).hostname.replace(/^www\./, '');
    const hit = WEAK_SITE_DOMAINS.find(d => host === d.match || host.endsWith('.' + d.match));
    return hit ? { label: hit.label, url } : null;
  } catch (e) {
    return null;
  }
}
function hostOf(url) {
  if (!url) return null;
  try { return new URL(url).hostname.replace(/^www\./, '').toLowerCase(); } catch (e) { return null; }
}
function getReviewTier(selectId) { return document.getElementById(selectId)?.value || 'any'; }
function passesReviewTier(place, tier) {
  const count = place.userRatingCount || 0;
  if (tier === 'any') return true;
  if (tier === 'starter') return count >= 10;
  if (tier === 'sweet') return count >= 25 && count <= 150;
  if (tier === 'established') return count >= 150;
  return true;
}
function buildReviewBadge(place) {
  const count = place.userRatingCount;
  const rating = place.rating;
  if (!count && !rating) return '';
  const starStr = rating ? `<span class="star">⭐</span>${rating.toFixed(1)}` : '';
  const countStr = count ? `${count.toLocaleString()} reviews` : '';
  return `<span class="review-badge">${[starStr, countStr].filter(Boolean).join(' · ')}</span>`;
}

function switchTab(tab, el) {
  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
  document.getElementById('section-' + tab).classList.add('active');
  if (el) el.classList.add('active');
  if (tab === 'pipeline') loadPipeline();
  if (tab === 'templates') loadTemplates();
  if (tab === 'drafts') loadDrafts();
}

function switchTabMobile(tab, btn) {
  document.querySelectorAll('.nav-tab').forEach((t, i) => {
    const tabs = ['search','pipeline','drafts','templates'];
    t.classList.toggle('active', tabs[i] === tab);
  });
  document.querySelectorAll('.bnav-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  switchTab(tab, null);
}

function toggleSearchPanel(prefix) {
  const collapsible = document.getElementById(prefix + '-collapsible');
  const toggle = document.getElementById(prefix + '-toggle');
  const expanded = collapsible.classList.contains('expanded');
  collapsible.classList.toggle('expanded', !expanded);
  collapsible.classList.toggle('collapsed', expanded);
  toggle.classList.toggle('open', !expanded);
}

function collapseSearchPanel(prefix) {
  const isMobile = window.innerWidth <= 640;
  if (!isMobile) return;
  const collapsible = document.getElementById(prefix + '-collapsible');
  const toggle = document.getElementById(prefix + '-toggle');
  if (collapsible && collapsible.classList.contains('expanded')) {
    collapsible.classList.remove('expanded');
    collapsible.classList.add('collapsed');
    toggle.classList.remove('open');
  }
}

function switchKwTab(prefix, groupName, btn) {
  document.querySelectorAll(`#section-${prefix} .kw-tab`).forEach(t => t.classList.remove('active'));
  document.querySelectorAll(`#section-${prefix} .kw-group-panel`).forEach(p => p.classList.remove('active'));
  btn.classList.add('active');
  const panel = document.getElementById(`kwpanel-${prefix}-${groupName}`);
  if (panel) panel.classList.add('active');
}
function toggleKwMore(prefix, groupName, btn) {
  const extra = document.getElementById(`kwextra-${prefix}-${groupName}`);
  if (!extra) return;
  extra.classList.toggle('open');
  btn.textContent = extra.classList.contains('open') ? '− Show less' : '+ Show more';
}
function setKeyword(tab, kw) {
  document.getElementById('search-keyword').value = kw;
  document.querySelectorAll(`#section-${tab} .kw-tag`).forEach(t => t.classList.remove('active'));
  if (event?.target) event.target.classList.add('active');
}

function handleLocationPreset() {
  document.getElementById('custom-location-wrap').style.display = document.getElementById('search-location-preset').value === 'custom' ? 'block' : 'none';
}
function getLocation() {
  const preset = document.getElementById('search-location-preset').value;
  return (preset && preset !== 'custom') ? preset : document.getElementById('search-location-custom').value.trim();
}
function handleAuditLocationPreset() {
  document.getElementById('audit-custom-location-wrap').style.display = document.getElementById('audit-location-preset').value === 'custom' ? 'block' : 'none';
}
function getAuditLocation() {
  const preset = document.getElementById('audit-location-preset').value;
  return (preset && preset !== 'custom') ? preset : document.getElementById('audit-location-custom').value.trim();
}

async function geocode(locationStr) {
  const r = await fetch(EDGE_FN_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPABASE_ANON}` }, body: JSON.stringify({ type: 'geocode', payload: { address: locationStr } }) });
  const d = await r.json();
  if (d.status !== 'OK' || !d.results.length) throw new Error('Location not found');
  return { lat: d.results[0].geometry.location.lat, lng: d.results[0].geometry.location.lng };
}

async function placesSearch(keyword, location, radius) {
  const { lat, lng } = await geocode(location);
  const r = await fetch(EDGE_FN_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPABASE_ANON}` }, body: JSON.stringify({ type: 'places', payload: { textQuery: `${keyword} in ${location}`, locationBias: { circle: { center: { latitude: lat, longitude: lng }, radius } }, maxResultCount: 20 } }) });
  const data = await r.json();
  if (!r.ok) throw new Error(data.error?.message || 'Places API error');
  return data.places || [];
}

let findPlaces = [];
let auditPlaces = [];
let findFilter = 'nosite';

function buildAuditLeadData(p, score) {
  const reviewNote = p.userRatingCount
    ? ` · ⭐${p.rating ? p.rating.toFixed(1) + ' ' : ''}(${p.userRatingCount} reviews)`
    : '';
  const scoreNote = (typeof score === 'number') ? `PageSpeed: ${score}/100 — ` : '';
  return {
    business_name: p.displayName?.text || '',
    address: p.formattedAddress || '',
    phone: p.nationalPhoneNumber || '',
    category: p.primaryTypeDisplayName?.text || '',
    city: p._location,
    lead_type: 'has_site',
    website_url: p.websiteUri || null,
    domain: hostOf(p.websiteUri),
    notes: `${scoreNote}${p.websiteUri}${reviewNote}`
  };
}

function buildNoSiteLeadData(p) {
  const weak = getWeakSiteInfo(p.websiteUri);
  return {
    business_name: p.displayName?.text || '',
    address: p.formattedAddress || '',
    phone: p.nationalPhoneNumber || '',
    email: '',
    category: p.primaryTypeDisplayName?.text || '',
    city: p._location,
    lead_type: 'no_site',
    notes: weak ? `Weak presence only (${weak.label}): ${weak.url}` : ''
  };
}

function kindOf(p) {
  if (!p.websiteUri) return 'nosite';
  return getWeakSiteInfo(p.websiteUri) ? 'weak' : 'hassite';
}

function visibleFindPlaces() {
  if (findFilter === 'all') return findPlaces;
  if (findFilter === 'nosite') return findPlaces.filter(p => p._kind !== 'hassite');
  return findPlaces.filter(p => p._kind === 'hassite');
}

function scoreClassFor(score) {
  if (score === null || score === undefined) return 'none';
  return score < 50 ? 'poor' : score < 90 ? 'mid' : 'good';
}

function renderFindResults() {
  const list = document.getElementById('results-list');
  const rows = visibleFindPlaces();
  const counter = document.getElementById('find-count');

  if (!findPlaces.length) {
    counter.textContent = 'No search yet';
    return;
  }
  counter.textContent = `${rows.length} of ${findPlaces.length} shown`;

  if (!rows.length) {
    list.innerHTML = '<div class="empty-state"><p>Nothing in this filter. Try another, or widen the radius.</p></div>';
    syncSelbar();
    return;
  }

  list.innerHTML = '';
  rows.forEach(p => {
    const i = p._idx;
    const existing = findInPipeline(p.displayName?.text);
    const hasSite = p._kind === 'hassite';
    const sigColor = existing ? 'var(--purple)'
      : p._kind === 'nosite' ? 'var(--green)'
      : p._kind === 'weak' ? 'var(--amber)' : 'var(--purple-bright)';
    const sigTextColor = p._kind === 'nosite' ? 'var(--green)'
      : p._kind === 'weak' ? 'var(--amber)' : 'var(--purple-bright)';
    const weak = getWeakSiteInfo(p.websiteUri);
    const sigText = p._kind === 'nosite' ? 'No website'
      : p._kind === 'weak' ? `${weak.label.toLowerCase()} only`
      : hostOf(p.websiteUri);

    const rating = p.rating ? `<span class="stars"><b>★</b> ${p.rating.toFixed(1)}${p.userRatingCount ? ` <span style="color:var(--text-dim);font-weight:400">(${p.userRatingCount.toLocaleString()})</span>` : ''}</span>` : '';
    const city = p._location ? `<span>${escHtml(p._location)}</span>` : '';
    const phone = p.nationalPhoneNumber ? `<span>${escHtml(p.nationalPhoneNumber)}</span>` : '';
    const meta = [rating, city, phone].filter(Boolean).join('<span class="sep">·</span>');
    const gUrl = `https://www.google.com/search?q=${encodeURIComponent((p.displayName?.text || '') + ' ' + (p._location || ''))}`;

    const card = document.createElement('div');
    card.className = 'fcard';
    card.style.setProperty('--sig', sigColor);
    card.dataset.idx = i;
    card.innerHTML = `
      ${hasSite && !existing
        ? `<label class="fpick" data-pick="${i}"><input type="checkbox" class="audit-check" data-idx="${i}" hidden><svg fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7"/></svg></label>`
        : '<div class="fpick-spacer"></div>'}
      <div class="fbody">
        <div class="fname">${escHtml(p.displayName?.text || '—')}</div>
        <div class="fsignal" style="--sig-text:${sigTextColor}"><i class="mark"></i>${escHtml(sigText || '—')}</div>
        <div class="fmeta">${meta}</div>
      </div>
      <div class="fside">
        ${hasSite ? `<div class="fscore none" id="score-${i}">—<small>speed</small></div>` : ''}
        <a class="icon-btn" href="${gUrl}" target="_blank" rel="noopener" title="Search Google"><svg fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.9-3.9"/></svg></a>
        ${existing ? pipelineStatusBadge(existing.status) : '<button class="btn btn-green">Save</button>'}
      </div>`;

    if (!existing) {
      const sb = card.querySelector('.btn-green');
      sb.dataset.lead = JSON.stringify(hasSite ? buildAuditLeadData(p, null) : buildNoSiteLeadData(p));
      sb.onclick = function() { addFromCard(this); };
    }
    list.appendChild(card);
  });
  syncSelbar();
}

function syncSelbar() {
  const n = document.querySelectorAll('.audit-check:checked').length;
  const bar = document.getElementById('selbar');
  bar.classList.toggle('show', n > 0);
  document.getElementById('selbar-label').textContent = `${n} selected`;
}

document.addEventListener('change', e => {
  if (!e.target.classList || !e.target.classList.contains('audit-check')) return;
  const label = e.target.closest('.fpick');
  if (label) label.classList.toggle('on', e.target.checked);
  const card = e.target.closest('.fcard');
  if (card) card.classList.toggle('picked', e.target.checked);
  syncSelbar();
});

function setFindFilter(f, btn) {
  findFilter = f;
  document.querySelectorAll('#find-seg button').forEach(b => b.classList.toggle('on', b === btn));
  renderFindResults();
}

async function runFind() {
  const keyword = document.getElementById('search-keyword').value.trim();
  const location = getLocation();
  const radius = parseInt(document.getElementById('search-radius').value);
  const tier = getReviewTier('search-review-tier');
  if (!keyword || !location) { toast('Enter a keyword and location'); return; }

  const btn = document.getElementById('search-btn');
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Searching…';
  const list = document.getElementById('results-list');
  list.innerHTML = '<div class="empty-state"><div class="spinner"></div></div>';
  document.getElementById('audit-progress').style.display = 'none';
  findPlaces = []; auditPlaces = []; syncSelbar();

  try {
    const raw = await placesSearch(keyword, location, radius);
    const places = raw.filter(p => passesReviewTier(p, tier));
    if (!places.length) {
      document.getElementById('find-count').textContent = '0 results';
      list.innerHTML = `<div class="empty-state"><div class="icon">🔍</div><p>${raw.length ? `No results match the selected review tier — ${raw.length} found before filtering` : 'Nothing found. Try a different keyword or a wider radius.'}</p></div>`;
      collapseSearchPanel('search');
      return;
    }
    findPlaces = places.map((p, i) => ({ ...p, _idx: i, _location: location, _kind: kindOf(p) }));
    auditPlaces = findPlaces;
    renderFindResults();
    collapseSearchPanel('search');
  } catch(e) {
    list.innerHTML = `<div class="empty-state"><div class="icon">⚠️</div><p>${escHtml(e.message)}</p></div>`;
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg> Search';
  }
}

let drafts = [];
let draftLeadMap = {};
let pendingDraftId = null;

function draftAge(ts) {
  if (!ts) return '';
  const d = Math.floor((Date.now() - new Date(ts).getTime()) / 86400000);
  return d === 0 ? 'today' : d === 1 ? '1 day ago' : `${d} days ago`;
}

async function updateDraftsPip() {
  const { count, error } = await sb.from('outreach_drafts')
    .select('id', { count: 'exact', head: true }).eq('status', 'pending');
  const pip = document.getElementById('bnav-pip-drafts');
  if (pip && !error) pip.classList.toggle('show', (count || 0) > 0);
}

async function loadDrafts() {
  const list = document.getElementById('drafts-list');
  list.innerHTML = '<div class="empty-state"><div class="spinner"></div></div>';

  const { data: rows, error } = await sb.from('outreach_drafts')
    .select('*').eq('status', 'pending').order('created_at', { ascending: false }).limit(50);

  if (error) {
    list.innerHTML = `<div class="empty-state"><div class="icon">⚠️</div><p>${escHtml(error.message)}</p></div>`;
    return;
  }

  drafts = rows || [];
  draftLeadMap = {};
  document.getElementById('drafts-count').textContent = drafts.length;

  if (!drafts.length) {
    list.innerHTML = '<div class="empty-state"><div class="icon">✉️</div><p>No pending drafts. Run Draft Email on an audited lead to create one.</p></div>';
    updateDraftsPip();
    return;
  }

  const ids = [...new Set(drafts.map(d => d.lead_id).filter(Boolean))];
  const leadMap = draftLeadMap;
  if (ids.length) {
    const { data: ls } = await sb.from('sns_leads').select('*').in('id', ids);
    (ls || []).forEach(l => { leadMap[l.id] = l; });
  }

  list.innerHTML = drafts.map(d => {
    const l = leadMap[d.lead_id] || {};
    const to = l.email || '';
    return `
      <div class="dcard">
        <div class="dcard-head">
          <div>
            <div class="dcard-name">${escHtml(l.business_name || 'Unknown lead')}</div>
            <div class="dcard-to ${to ? '' : 'missing'}">${to ? escHtml(to) : 'no email on lead'}</div>
          </div>
          <div class="dcard-age">${draftAge(d.created_at)}</div>
        </div>
        <div class="dcard-subject">${escHtml(d.subject || '(no subject)')}</div>
        <div class="dcard-body">${escHtml(d.body || '')}</div>
        <div class="dcard-actions">
          <button class="btn btn-primary" onclick="previewDraftEmail('${d.id}')">Preview &amp; Send</button>
          <button class="btn btn-ghost" onclick="copyDraft('${d.id}')">Copy</button>
          <button class="btn btn-green" onclick="markDraftSent('${d.id}')">Mark sent</button>
          <button class="btn btn-ghost" onclick="discardDraft('${d.id}')">Discard</button>
        </div>
      </div>`;
  }).join('');

  updateDraftsPip();
}

async function previewDraftEmail(id) {
  const d = drafts.find(x => x.id === id);
  if (!d) return;
  const lead = draftLeadMap[d.lead_id];
  if (!lead) { toast('Lead not found for this draft'); return; }
  if (!d.body) { toast('Draft has no body'); return; }

  currentLead = lead;
  pendingDraftId = d.id;

  // currentAudit isn't populated from this tab — fetch the lead's own audit so
  // the score hero can never show another business's number.
  const { data: auds } = await sb.from('audits')
    .select('*').eq('lead_id', d.lead_id)
    .order('created_at', { ascending: false }).limit(1);
  currentAudit = (auds && auds.length) ? auds[0] : null;

  pendingEmailHtml = buildHtmlEmail(lead, d.body, currentAudit);
  pendingEmailSubject = d.subject || `A note for ${lead.business_name}`;

  document.getElementById('email-modal-body').innerHTML = `<div style="padding:16px 22px;border-bottom:1px solid var(--border);background:var(--purple-dim);"><div style="font-family:'DM Mono',monospace;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Subject</div><div style="font-size:14px;font-weight:600;color:var(--text);">${escHtml(pendingEmailSubject)}</div></div><iframe id="email-preview-frame" srcdoc="${escHtml(pendingEmailHtml)}" style="width:100%;height:520px;border:none;display:block;" sandbox="allow-same-origin"></iframe>`;
  document.getElementById('send-status-label').innerHTML = '';
  document.getElementById('email-modal-overlay').classList.add('open');
}

function copyDraft(id) {
  const d = drafts.find(x => x.id === id);
  if (!d) return;
  navigator.clipboard.writeText(`${d.subject || ''}\n\n${d.body || ''}`.trim())
    .then(() => toast('Copied')).catch(() => toast('Copy failed'));
}

async function markDraftSent(id) {
  const d = drafts.find(x => x.id === id);
  if (!d) return;
  const { error } = await sb.from('outreach_drafts').update({ status: 'sent' }).eq('id', id);
  if (error) { toast('Error updating draft'); return; }
  if (d.lead_id) {
    await sb.from('sns_leads')
      .update({ status: 'Contacted', contacted_at: new Date().toISOString() }).eq('id', d.lead_id);
    await sb.from('sns_activity')
      .insert({ lead_id: d.lead_id, action: 'AI draft sent manually', template_used: 'audit-outreach-v2' });
  }
  toast('Marked sent — lead moved to Contacted');
  loadDrafts();
}

async function discardDraft(id) {
  if (!confirm('Discard this draft?')) return;
  const { error } = await sb.from('outreach_drafts').update({ status: 'discarded' }).eq('id', id);
  if (error) { toast('Error discarding draft'); return; }
  toast('Discarded');
  loadDrafts();
}

async function auditSelected() {
  const checked = [...document.querySelectorAll('.audit-check:checked')];
  if (!checked.length) { toast('Select at least one business to audit'); return; }
  const btn = document.getElementById('audit-selected-btn');
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span>';
  document.getElementById('audit-progress').style.display = 'block';
  let done = 0;
  for (const cb of checked) {
    const idx = parseInt(cb.dataset.idx);
    const p = auditPlaces[idx];
    const scoreEl = document.getElementById('score-' + idx);
    document.getElementById('audit-progress-label').textContent = `Auditing ${done + 1} of ${checked.length}: ${p.displayName?.text}`;
    document.getElementById('audit-progress-bar').style.width = ((done / checked.length) * 100) + '%';
    let score = null;
    try {
      const psiR = await fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(p.websiteUri)}&strategy=mobile&key=${PSI_KEY}&fields=lighthouseResult.categories.performance.score`);
      const psiData = await psiR.json();
      score = Math.round((psiData.lighthouseResult?.categories?.performance?.score || 0) * 100);
    } catch(e) { score = null; }
    done++;
    scoreEl.className = `fscore ${scoreClassFor(score)}`;
    scoreEl.innerHTML = `${score === null ? '—' : score}<small>speed</small>`;
    if (score !== null) {
      const pBtn = scoreEl.closest('.fside')?.querySelector('.btn-green');
      if (pBtn) pBtn.dataset.lead = JSON.stringify(buildAuditLeadData(p, score));
    }
  }
  document.getElementById('audit-progress-bar').style.width = '100%';
  document.getElementById('audit-progress-label').textContent = `Done — ${done} site${done !== 1 ? 's' : ''} audited`;
  btn.disabled = false; btn.innerHTML = 'Run audit';
  toast(`${done} sites audited`);
}

function addFromCard(btn) {
  try { addToPipeline(JSON.parse(btn.dataset.lead)); } catch(e) { toast('Error reading lead data'); }
}

async function addToPipeline(data) {
  const existing = leads.find(l => l.business_name === data.business_name && l.address === data.address);
  if (existing) { toast('Already in pipeline'); return; }
  const { data: inserted, error } = await sb.from('sns_leads').insert([{ ...data, status: 'New' }]).select().single();
  if (error) { toast('Error saving lead'); return; }
  leads.push(inserted);
  toast(`${data.business_name} added`);
  await logActivity(inserted.id, 'Added to pipeline');
  updatePipelinePip();
}

async function loadPipeline() {
  const { data, error } = await sb.from('sns_leads').select('*').order('created_at', { ascending: false });
  if (error) { console.error(error); return; }
  leads = data || [];
  renderPipeline();
  updatePipelinePip();
}

function updatePipelinePip() {
  const hasDue = leads.some(l => { const fs = getFollowUpStatus(l); return fs && (fs.cls === 'due-soon' || fs.cls === 'overdue'); });
  const pip = document.getElementById('bnav-pip-pipeline');
  if (pip) pip.classList.toggle('show', hasDue);
}

const STATUSES = ['New', 'Contacted', 'Followed Up', 'Converted', 'Dead'];
const STATUS_ICONS = { 'New': '🆕', 'Contacted': '📬', 'Followed Up': '🔁', 'Converted': '✅', 'Dead': '🪦' };
let showDueOnly = false;

function toggleDueFilter(btn) { showDueOnly = !showDueOnly; btn.classList.toggle('active', showDueOnly); renderPipeline(); }
function daysSince(d) { if (!d) return null; return Math.floor((Date.now() - new Date(d).getTime()) / 86400000); }
function getFollowUpStatus(lead) {
  if (lead.status === 'Contacted') {
    const days = daysSince(lead.contacted_at || lead.created_at);
    if (days === null) return null;
    if (days >= 6) return { cls: 'overdue', label: days + 'd — overdue' };
    if (days >= 4) return { cls: 'due-soon', label: days + 'd — follow up now' };
    return { cls: 'ok', label: days + 'd since contact' };
  }
  if (lead.status === 'Followed Up') {
    const days = daysSince(lead.followed_up_at || lead.created_at);
    if (days === null) return null;
    if (days >= 7) return { cls: 'overdue', label: days + 'd — consider closing' };
    return { cls: 'ok', label: days + 'd since follow up' };
  }
  return null;
}

function toggleCol(cls) {
  const col = document.getElementById('pcol-' + cls);
  if (col) col.classList.toggle('collapsed');
}

async function runAutoDead() {
  const btn = document.getElementById('auto-dead-btn');
  const toKill = leads.filter(l => {
    if (l.status === 'Contacted') return daysSince(l.contacted_at || l.created_at) >= 14;
    if (l.status === 'Followed Up') return daysSince(l.followed_up_at || l.created_at) >= 10;
    return false;
  });
  if (!toKill.length) { toast('No stale leads to archive'); return; }
  if (!confirm('Move ' + toKill.length + ' stale lead' + (toKill.length !== 1 ? 's' : '') + ' to Dead?')) return;
  btn.disabled = true; btn.textContent = 'Running…';
  const ids = toKill.map(l => l.id);
  const { error } = await sb.from('sns_leads').update({ status: 'Dead' }).in('id', ids);
  if (error) { toast('Error updating leads'); btn.disabled = false; btn.innerHTML = '&#x1F5D1; Auto-Dead'; return; }
  leads = leads.map(l => ids.includes(l.id) ? { ...l, status: 'Dead' } : l);
  renderPipeline(); updatePipelinePip();
  btn.disabled = false; btn.innerHTML = '&#x1F5D1; Auto-Dead';
  toast(toKill.length + ' lead' + (toKill.length !== 1 ? 's' : '') + ' archived');
}

function renderMobileStatusChips() {
  const container = document.getElementById('mobile-status-chips');
  if (!container) return;
  const allChip = document.createElement('button');
  allChip.className = 'mobile-status-chip' + (mobileActiveStatus === null ? ' active' : '');
  allChip.textContent = 'All';
  allChip.onclick = () => { mobileActiveStatus = null; renderPipeline(); };
  container.innerHTML = '';
  container.appendChild(allChip);
  STATUSES.forEach(s => {
    const count = leads.filter(l => l.status === s).length;
    const chip = document.createElement('button');
    chip.className = 'mobile-status-chip' + (mobileActiveStatus === s ? ' active' : '');
    chip.textContent = `${STATUS_ICONS[s]} ${s} (${count})`;
    chip.onclick = () => { mobileActiveStatus = s; renderPipeline(); };
    container.appendChild(chip);
  });
}

function renderPipeline() {
  renderMobileStatusChips();
  const searchQ = (document.getElementById('pipeline-search')?.value || '').toLowerCase().trim();
  const isMobile = true; // single-stage view at every breakpoint
  STATUSES.forEach(s => {
    const col = document.getElementById('col-' + s);
    const count = document.getElementById('count-' + s);
    const colWrap = document.getElementById('pcol-col-' + s.toLowerCase().replace(/\s+/g, '-'));
    const filtered = leads.filter(l => l.status === s);
    count.textContent = filtered.length;
    if (isMobile && mobileActiveStatus !== null && mobileActiveStatus !== s) {
      if (colWrap) colWrap.style.display = 'none';
      return;
    } else {
      if (colWrap) colWrap.style.display = '';
    }
    col.innerHTML = '';
    let displayLeads = filtered;
    if (searchQ) displayLeads = displayLeads.filter(l => l.business_name.toLowerCase().includes(searchQ) || (l.city || '').toLowerCase().includes(searchQ));
    if (showDueOnly) displayLeads = displayLeads.filter(l => { const fs = getFollowUpStatus(l); return fs && (fs.cls === 'due-soon' || fs.cls === 'overdue'); });
    if (!displayLeads.length) { col.innerHTML = '<div class="col-empty">' + (searchQ || showDueOnly ? 'NO MATCHES' : 'NOTHING HERE YET') + '</div>'; return; }
    displayLeads.forEach(lead => {
      const card = document.createElement('div');
      card.className = 'lead-card';
      const fs = getFollowUpStatus(lead);
      const dueBadge = fs ? `<div class="due-badge ${fs.cls}" style="margin-bottom:6px">${fs.label}</div>` : '';
      const si = STATUSES.indexOf(lead.status);
      const prevOk = si > 0, nextOk = si < STATUSES.length - 1;
      card.innerHTML = `${dueBadge}<div class="lead-card-name">${lead.business_name}</div><div class="lead-card-meta">${lead.city || lead.address || '—'}</div><div class="stage-row"><button class="stage-btn icon-only" ${prevOk ? '' : 'disabled'} onclick="event.stopPropagation();moveStage('${lead.id}',-1)" aria-label="Previous stage"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"></path></svg></button><button class="stage-btn grow" onclick="event.stopPropagation();openDrawer('${lead.id}')">OPEN</button><button class="stage-btn icon-only" ${nextOk ? '' : 'disabled'} onclick="event.stopPropagation();moveStage('${lead.id}',1)" aria-label="Next stage"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"></path></svg></button></div>`;
      col.appendChild(card);
    });
  });
}

async function moveStage(id, dir) {
  const lead = leads.find(l => l.id === id);
  if (!lead) return;
  const i = STATUSES.indexOf(lead.status);
  const next = STATUSES[Math.max(0, Math.min(STATUSES.length - 1, i + dir))];
  if (!next || next === lead.status) return;

  const now = new Date().toISOString();
  const update = { status: next };
  if (next === 'Contacted') update.contacted_at = now;
  if (next === 'Followed Up') update.followed_up_at = now;

  const { error } = await sb.from('sns_leads').update(update).eq('id', id);
  if (error) { toast('Error updating stage'); return; }

  leads = leads.map(l => l.id === id ? { ...l, ...update } : l);
  renderPipeline(); updatePipelinePip();
  logActivity(id, 'Status changed to ' + next);
  toast(lead.business_name + ' → ' + next);
}

async function openDrawer(id) {
  currentLead = leads.find(l => l.id === id);
  if (!currentLead) return;
  document.getElementById('drawer-title').textContent = currentLead.business_name;
  const _fs = getFollowUpStatus(currentLead);
  document.getElementById('drawer-sub').textContent = _fs ? (currentLead.address || '—') + ' · ' + _fs.label : currentLead.address || '—';
  document.getElementById('drawer-overlay').classList.add('open');
  document.getElementById('drawer').classList.add('open');
  document.body.style.overflow = 'hidden';
  const { data: acts } = await sb.from('sns_activity').select('*').eq('lead_id', id).order('created_at', { ascending: false });
  activity = acts || [];
  const { data: auds } = await sb.from('audits').select('*').eq('lead_id', id).order('created_at', { ascending: false }).limit(1);
  currentAudit = (auds && auds.length) ? auds[0] : null;
  aiDraftSubject = '';
  emailCandidates = [];
  await loadLeadDrafts(id);
  await ensureTemplates();
  renderDrawer();
  restoreLatestDraft();
}

function renderDrawer() {
  const l = currentLead;
  const actHtml = activity.length ? activity.map(a => `<div class="activity-item"><span class="activity-dot"></span><div><div>${a.action}</div><div class="activity-time">${new Date(a.created_at).toLocaleString()}</div></div></div>`).join('') : '<div style="color:var(--text-dim);font-size:12px">No activity yet</div>';
  const templateOptions = templates.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
  document.getElementById('drawer-body').innerHTML = `
    <div class="info-grid">
      <div class="info-item"><div class="info-label">Phone</div><div class="info-value">${l.phone || '—'}</div></div>
      <div class="info-item"><div class="info-label">Category</div><div class="info-value">${l.category || '—'}</div></div>
      <div class="info-item" style="grid-column:1/-1"><div class="info-label">Address</div><div class="info-value">${l.address || '—'}</div></div>
      <div class="info-item" style="grid-column:1/-1"><div class="info-label">Email</div><input type="email" value="${l.email || ''}" placeholder="prospect@email.com" style="width:100%;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);font-family:'DM Sans',sans-serif;padding:0;" onchange="updateEmail(this.value)" /></div>
      ${l.notes ? `<div class="info-item" style="grid-column:1/-1"><div class="info-label">Notes</div><div class="info-value" style="font-family:'DM Mono',monospace;font-size:11px;color:var(--amber)">${l.notes}</div></div>` : ''}
    </div>
    <div class="agent-panel" id="agent-panel">${renderAgentPanel()}</div>
    <div class="status-select-row"><label>Status</label><select id="lead-status" onchange="updateStatus(this.value)">${STATUSES.map(s => `<option ${l.status === s ? 'selected' : ''} value="${s}">${s}</option>`).join('')}</select></div>
    <div class="section-label" style="margin-bottom:8px">Email Template</div>
    <div class="template-picker field"><select id="template-picker" onchange="applyTemplate(this.value)"><option value="">— Select template —</option>${templateOptions}</select></div>
    <div class="section-label">Email Body (plain text)</div>
    <textarea class="email-textarea" id="email-body" placeholder="Select a template or write your message…"></textarea>
    <div style="margin-top:20px"><div class="section-label">Activity Log</div><div class="activity-list">${actHtml}</div></div>`;
  document.getElementById('drawer-footer').innerHTML = `
    <button class="btn btn-preview" onclick="previewHtmlEmail()"><svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>Preview & Send</button>
    <button class="btn btn-ghost" onclick="copyEmail()">Copy</button>
    <button class="btn btn-ghost" onclick="openMailto()">Gmail</button>
    <button class="btn btn-ghost" style="color:var(--red);border-color:rgba(255,68,102,0.3)" onclick="deleteLead('${l.id}')">Delete</button>`;
}

function oppClass(score) {
  if (score >= 50) return 'opp-high';
  if (score >= 25) return 'opp-mid';
  return 'opp-low';
}

function renderAgentPanel() {
  const l = currentLead;
  const a = currentAudit;
  const url = l.website_url || '';
  const scorePill = (a && typeof a.opportunity_score === 'number' && !a.error)
    ? `<span class="opp-pill ${oppClass(a.opportunity_score)}">OPP ${a.opportunity_score}</span>` : '';

  let body;
  if (!a) {
    body = '<div class="agent-empty">No audit yet.</div>';
  } else if (a.error) {
    body = `<div class="agent-empty">Audit failed: ${escHtml(a.error)}</div>`;
  } else {
    const f = Array.isArray(a.findings) ? a.findings.slice().sort((x, y) => y.weight - x.weight) : [];
    const meta = [
      a._partial ? 'just now' : null,
      a.is_wordpress ? 'WordPress' : null,
      (typeof a.psi_performance === 'number') ? `PSI ${a.psi_performance}` : null
    ].filter(Boolean).join(' · ');
    body = (meta ? `<div class="agent-empty" style="margin-bottom:6px">${meta}</div>` : '')
      + (f.length
          ? `<div class="finding-list">${f.map(x => `<div class="finding-item"><span class="finding-dot"></span><span>${escHtml(x.label)}</span></div>`).join('')}</div>`
          : '<div class="agent-empty">No issues found.</div>');
  }

  const alts = emailCandidates.filter(c => c.email !== (l.email || '').toLowerCase());
  const candHtml = alts.length
    ? `<div style="margin-top:10px">${alts.map(c => `<button class="email-cand" onclick="pickEmail('${escHtml(c.email)}')">${escHtml(c.email)}<span>${c.source}</span></button>`).join('')}</div>`
    : '';

  const histHtml = leadDrafts.length
    ? `<div style="margin-top:12px"><div class="agent-empty" style="margin-bottom:2px">Draft history</div>${leadDrafts.map(d => `<button class="draft-hist" onclick="useDraft('${d.id}')"><div class="draft-hist-sub">${escHtml(d.subject || '(no subject)')}</div><div class="draft-hist-meta">${new Date(d.created_at).toLocaleDateString()} · ${escHtml(d.status || 'pending')}</div></button>`).join('')}</div>`
    : '';

  return `<div class="agent-head"><span class="agent-title">Site Agent</span>${scorePill}</div>
    <div class="agent-url-row">
      <input type="url" id="agent-url" value="${escHtml(url)}" placeholder="https://theirsite.com" onchange="saveWebsiteUrl(this.value)">
    </div>
    <div class="agent-actions">
      <button class="btn btn-ghost" id="agent-audit-btn" onclick="runLeadAudit()">Run Audit</button>
      <button class="btn btn-ghost" id="agent-email-btn" onclick="findLeadEmail()">Find Email</button>
      <button class="btn btn-ghost" id="agent-draft-btn" onclick="draftLeadEmail()">Draft Email</button>
    </div>
    <div style="margin-top:10px">${body}</div>
    ${candHtml}
    ${histHtml}`;
}

function refreshAgentPanel() {
  const el = document.getElementById('agent-panel');
  if (el) el.innerHTML = renderAgentPanel();
}

async function saveWebsiteUrl(url) {
  const clean = (url || '').trim();
  const update = { website_url: clean || null, domain: hostOf(clean) };
  const { error } = await sb.from('sns_leads').update(update).eq('id', currentLead.id);
  if (error) { toast('Error saving URL'); return; }
  currentLead = { ...currentLead, ...update };
  leads = leads.map(l => l.id === currentLead.id ? { ...l, ...update } : l);
  toast('Website saved');
}

async function callEdge(fn, payload) {
  const r = await fetch(`${EDGE_BASE}/${fn}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'apikey': SUPABASE_ANON, 'Authorization': `Bearer ${SUPABASE_ANON}` },
    body: JSON.stringify(payload)
  });
  const data = await r.json();
  if (!r.ok) throw new Error(data.error || `${fn} failed (${r.status})`);
  return data;
}

async function runLeadAudit() {
  if (!currentLead) return;
  if (!currentLead.website_url) { toast('Add a website URL first'); return; }
  const btn = document.getElementById('agent-audit-btn');
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Auditing…';
  try {
    const data = await callEdge('audit-site', { lead_id: currentLead.id });
    const res = (data.results && data.results[0]) || {};
    if (!res.ok) { toast('Audit failed: ' + (res.reason || 'unknown')); }
    const { data: auds, error: readErr } = await sb.from('audits').select('*').eq('lead_id', currentLead.id).order('created_at', { ascending: false }).limit(1);
    if (auds && auds.length) {
      currentAudit = auds[0];
    } else if (res.ok) {
      // Read blocked or lagging — show what the function just returned
      // rather than claiming there is no audit.
      currentAudit = { opportunity_score: res.opportunity_score, findings: res.findings || [], is_wordpress: null, psi_performance: null, _partial: true };
      if (readErr) console.warn('[agent] audit read blocked:', readErr.message);
    } else {
      currentAudit = null;
    }
    refreshAgentPanel();
    if (res.ok) toast(`Audit done — score ${res.opportunity_score}`);
  } catch (e) {
    toast('Audit error — ' + e.message);
  } finally {
    const b = document.getElementById('agent-audit-btn');
    if (b) { b.disabled = false; b.innerHTML = 'Run Audit'; }
  }
}

async function loadLeadDrafts(leadId) {
  const { data, error } = await sb.from('outreach_drafts')
    .select('id,subject,body,status,created_at')
    .eq('lead_id', leadId)
    .order('created_at', { ascending: false })
    .limit(10);
  leadDrafts = error ? [] : (data || []);
}

function restoreLatestDraft() {
  const latest = leadDrafts.find(d => d.status === 'pending');
  if (!latest) return;
  const ta = document.getElementById('email-body');
  if (ta && !ta.value.trim()) ta.value = latest.body || '';
  aiDraftSubject = latest.subject || '';
}

function useDraft(id) {
  const d = leadDrafts.find(x => x.id === id);
  if (!d) return;
  const ta = document.getElementById('email-body');
  if (ta) ta.value = d.body || '';
  aiDraftSubject = d.subject || '';
  const picker = document.getElementById('template-picker');
  if (picker) picker.value = '';
  toast('Draft loaded');
}

async function findLeadEmail() {
  if (!currentLead) return;
  const url = (currentLead.website_url || '').trim();
  if (!url) { toast('Add a website URL first'); return; }
  const btn = document.getElementById('agent-email-btn');
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Searching…';
  try {
    const data = await callEdge('dynamic-responder', { type: 'scrape', payload: { url } });
    emailCandidates = Array.isArray(data.emails) ? data.emails : [];
    if (!data.best) {
      refreshAgentPanel();
      toast(data.reachable === false ? 'Site unreachable' : 'No email found on site');
      return;
    }
    if (currentLead.email) {
      refreshAgentPanel();
      toast(`Found ${emailCandidates.length} — lead already has an email`);
      return;
    }
    await pickEmail(data.best);
  } catch (e) {
    toast('Lookup error — ' + e.message);
  } finally {
    const b = document.getElementById('agent-email-btn');
    if (b) { b.disabled = false; b.innerHTML = 'Find Email'; }
  }
}

async function pickEmail(email) {
  if (!currentLead) return;
  const { error } = await sb.from('sns_leads').update({ email }).eq('id', currentLead.id);
  if (error) { toast('Error saving email'); return; }
  currentLead.email = email;
  leads = leads.map(l => l.id === currentLead.id ? { ...l, email } : l);
  const input = document.querySelector('#drawer-body input[type="email"]');
  if (input) input.value = email;
  refreshAgentPanel();
  toast('Email saved — ' + email);
}

async function draftLeadEmail() {
  if (!currentLead) return;
  const btn = document.getElementById('agent-draft-btn');
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Drafting…';
  try {
    const data = await callEdge('draft-outreach', { lead_id: currentLead.id });
    const res = (data.results && data.results[0]) || {};
    if (!res.ok) { toast('Draft failed: ' + (res.reason || 'unknown')); return; }
    const ta = document.getElementById('email-body');
    if (ta) ta.value = res.body || '';
    aiDraftSubject = res.subject || '';
    const picker = document.getElementById('template-picker');
    if (picker) picker.value = '';
    if (res.email && !currentLead.email) {
      currentLead.email = res.email;
      leads = leads.map(l => l.id === currentLead.id ? { ...l, email: res.email } : l);
    }
    if (res.draft_id) {
      leadDrafts.unshift({ id: res.draft_id, subject: res.subject || '', body: res.body || '', status: 'pending', created_at: new Date().toISOString() });
      refreshAgentPanel();
    }
    toast('Draft ready — saved to Drafts');
    updateDraftsPip();
  } catch (e) {
    toast('Draft error — ' + e.message);
  } finally {
    const b = document.getElementById('agent-draft-btn');
    if (b) { b.disabled = false; b.innerHTML = 'Draft Email'; }
  }
}

async function updateStatus(status) {
  const now = new Date().toISOString();
  const update = { status };
  if (status === 'Contacted') update.contacted_at = now;
  if (status === 'Followed Up') update.followed_up_at = now;
  const { error } = await sb.from('sns_leads').update(update).eq('id', currentLead.id);
  if (error) { toast('Error updating status'); return; }
  currentLead = { ...currentLead, ...update };
  leads = leads.map(l => l.id === currentLead.id ? { ...l, ...update } : l);
  renderPipeline(); updatePipelinePip();
  await logActivity(currentLead.id, 'Status changed to ' + status);
  toast('Moved to ' + status);
}

function applyTemplate(id) {
  if (!id) return;
  const t = templates.find(t => t.id === id || t.id === parseInt(id));
  if (!t) return;
  document.getElementById('email-body').value = t.body.replace(/{{business_name}}/g, currentLead.business_name).replace(/{{category}}/g, currentLead.category || '').replace(/{{city}}/g, currentLead.city || '').replace(/{{address}}/g, currentLead.address || '').replace(/{{phone}}/g, currentLead.phone || '');
}

function copyEmail() {
  const text = document.getElementById('email-body').value;
  if (!text) { toast('No email body to copy'); return; }
  navigator.clipboard.writeText(text).then(() => toast('Copied'));
  logActivity(currentLead.id, 'Email copied'); updateStatus('Contacted');
}

function openMailto() {
  const text = document.getElementById('email-body').value;
  const picker = document.getElementById('template-picker');
  const subjectText = picker?.selectedIndex > 0 ? templates.find(t => t.id == picker.value)?.subject || "Let's Talk" : "Let's Talk About Your Online Presence";
  window.open(`https://mail.google.com/mail/?view=cm&su=${encodeURIComponent(subjectText)}&body=${encodeURIComponent(text)}`, '_blank');
  logActivity(currentLead.id, 'Email opened in Gmail');
}

async function deleteLead(id) {
  if (!confirm('Delete this lead?')) return;
  await sb.from('sns_leads').delete().eq('id', id);
  leads = leads.filter(l => l.id !== id);
  closeDrawer(); renderPipeline(); updatePipelinePip(); toast('Lead deleted');
}

function closeDrawer() {
  document.getElementById('drawer-overlay').classList.remove('open');
  document.getElementById('drawer').classList.remove('open');
  document.body.style.overflow = '';
  currentLead = null;
}

function getCategoryTheme(category) {
  const cat = (category || '').toLowerCase();
  const label = /plumb|electr|roof|handyman|paint|landscap|pressure|pool|ac|hvac|fence|construct|contractor/.test(cat) ? 'Trades' : /nail|barber|hair|salon|massage|esthetician|tattoo|trainer|spa|beauty|skin|grooming/.test(cat) ? 'Health & Beauty' : /food|truck|cater|bak|meal|restaurant|cafe|coffee/.test(cat) ? 'Food & Local' : /groom|pet|clean|junk|detail|auto|photo|wedding/.test(cat) ? 'Local Services' : 'Local Business';
  return { accent: '#393994', accent2: '#4d4db8', label, headerBg: 'linear-gradient(135deg, #393994 0%, #4d4db8 100%)' };
}

function buildEmailBlocks(bodyText) {
  const out = [];
  let bullets = [];
  const flush = () => { if (bullets.length) { out.push({ type: 'ul', items: bullets }); bullets = []; } };
  (bodyText || '').split('\n').forEach(line => {
    const t = line.trim();
    const m = t.match(/^(?:[-*\u2022\u2013]|\d+[.)])\s+(.+)$/);
    if (m) { bullets.push(m[1].trim()); return; }
    flush();
    out.push(t === '' ? { type: 'gap' } : { type: 'p', text: t });
  });
  flush();
  return out;
}

function buildHtmlEmail(lead, bodyText, audit) {
  const PFONT = "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif";
  const blocks = buildEmailBlocks(bodyText);
  const lines = blocks.map(b => {
    if (b.type === 'gap') return '<div style="height:6px;line-height:6px;">&nbsp;</div>';
    if (b.type === 'p') return `<p style="margin:0 0 12px 0;color:#1a1a2e;font-size:15px;line-height:1.7;font-family:${PFONT};">${escHtml(b.text)}</p>`;
    return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0 14px 0;">${b.items.map(it => {
      const m = it.match(/^(.{1,14}?)\s+[\u2014\u2013]\s+(.+)$/);
      if (m) {
        return `<tr><td width="70" valign="top" style="padding:0 14px 16px 0;"><div style="font-family:Courier New,monospace;font-size:18px;font-weight:bold;color:#393994;line-height:1;">${escHtml(m[1])}</div></td><td valign="top" style="padding:0 0 16px 0;"><p style="margin:0;color:#1a1a2e;font-size:14.5px;line-height:1.6;font-family:${PFONT};">${escHtml(m[2])}</p></td></tr>`;
      }
      return `<tr><td width="18" valign="top" style="padding:0 0 12px 0;"><div style="width:6px;height:6px;border-radius:50%;background:#393994;margin-top:7px;"></div></td><td valign="top" style="padding:0 0 12px 0;"><p style="margin:0;color:#1a1a2e;font-size:14.5px;line-height:1.6;font-family:${PFONT};">${escHtml(it)}</p></td></tr>`;
    }).join('')}</table>`;
  }).join('');
  const firstUl = blocks.find(b => b.type === 'ul');
  const firstP = blocks.find(b => b.type === 'p');
  let preRaw = (firstUl ? firstUl.items[0] : (firstP ? firstP.text : '')) || '';
  const preSplit = preRaw.match(/^.{1,14}?\s+[\u2014\u2013]\s+(.+)$/);
  if (preSplit) preRaw = preSplit[1];
  const preheader = preRaw.length > 100 ? preRaw.slice(0, 99).trim() + '\u2026' : preRaw;
  const preHtml = preheader
    ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;mso-hide:all;font-size:1px;line-height:1px;color:#ffffff;">${escHtml(preheader)}${'&#847;&zwnj;&nbsp;'.repeat(40)}</div>`
    : '';
  const city = (lead.city || '').toUpperCase();
  const name = escHtml(lead.business_name);

  // Only trust an audit that actually belongs to this lead.
  const a = (audit && audit.lead_id === lead.id && !audit.error) ? audit : null;
  const psi = (a && typeof a.psi_performance === 'number') ? a.psi_performance : null;
  const host = (lead.website_url || '').replace(/^https?:\/\//i, '').replace(/^www\./i, '').replace(/\/.*$/, '');

  let heroHtml;
  if (psi !== null) {
    const band = psi < 50 ? '#e0314b' : psi < 90 ? '#d97706' : '#00b87a';
    const pct = Math.max(4, Math.min(psi, 100));
    heroHtml = `<tr><td style="background:#ffffff;padding:20px 36px 0;">
      <table width="100%" cellpadding="0" cellspacing="0"><tr>
        <td valign="bottom" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:60px;line-height:0.85;font-weight:800;color:${band};letter-spacing:-3px;">${psi}<span style="font-size:24px;letter-spacing:-1px;color:#9095a8;">/100</span></td>
        <td valign="bottom" style="padding-left:16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.4;color:#1a1a2e;">mobile speed score<br><span style="color:#6b6f80;font-size:13px;">${host ? escHtml(host) : name}</span></td>
      </tr></table>
      <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:18px;"><tr>
        <td width="${pct}%" style="height:7px;background:${band};border-radius:4px 0 0 4px;font-size:0;line-height:0;">&nbsp;</td>
        <td width="${100 - pct}%" style="height:7px;background:#e6e8f0;border-radius:0 4px 4px 0;font-size:0;line-height:0;">&nbsp;</td>
      </tr></table>
      <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:6px;"><tr>
        <td style="font-family:Courier New,monospace;font-size:10px;color:#9095a8;">YOU &middot; ${psi}</td>
        <td align="right" style="font-family:Courier New,monospace;font-size:10px;color:#9095a8;">GOOGLE'S "GOOD" &middot; 90</td>
      </tr></table></td></tr>`;
  } else {
    heroHtml = `<tr><td style="background:#ffffff;padding:6px 36px 0;">
      <p style="margin:0 0 6px 0;font-size:28px;font-weight:700;color:#1a1a2e;line-height:1.1;letter-spacing:-1px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">${name}</p>
      ${city ? `<p style="margin:0;font-family:Courier New,monospace;font-size:11px;color:#aaa;letter-spacing:1.5px;">${city}</p>` : ''}</td></tr>`;
  }

  const replyHref = 'mailto:stitchandsnare@gmail.com?subject=' + encodeURIComponent('Yes — send the full list for ' + (lead.business_name || ''));

  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><style>@media (prefers-color-scheme: dark){.ew{background-color:#0f0f1a!important}.ec{background-color:#1c1c30!important;border-color:#2a2a4a!important}.body{background-color:#1c1c30!important}.body p{color:#e0e0f0!important}.hero{background-color:#1c1c30!important}.sig{background-color:#1c1c30!important}.sig-name{color:#e0e0f0!important}.ft{background-color:#0f0f1a!important;border-color:#2a2a4a!important}.ft p,.ft a{color:#444!important}.divl{border-color:#2a2a4a!important}}</style></head><body style="margin:0;padding:0;background:#f0f0f5;">${preHtml}<table class="ew" width="100%" cellpadding="0" cellspacing="0" style="background:#f0f0f5;padding:32px 16px;"><tr><td align="center"><table class="ec" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;background:#ffffff;border-radius:16px;overflow:hidden;border:1px solid #eaeaf2;">
<tr><td class="hero" style="background:#ffffff;padding:26px 36px 0;"><p style="margin:0;font-family:Courier New,monospace;font-size:10px;font-weight:bold;color:#393994;letter-spacing:2.5px;text-transform:uppercase;">Stitch &amp; Snare</p></td></tr>
${heroHtml}
<tr><td style="background:#ffffff;padding:24px 36px 0;"><div class="divl" style="height:1px;background:#eaeaf2;font-size:0;line-height:0;">&nbsp;</div></td></tr>
<tr><td class="body" style="background:#ffffff;padding:20px 36px 4px;">${lines}</td></tr>
<tr><td style="background:#ffffff;padding:12px 36px 30px;"><table cellpadding="0" cellspacing="0"><tr><td style="background:#393994;border-radius:9px;"><a href="${replyHref}" style="display:block;padding:14px 26px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14.5px;font-weight:600;color:#ffffff;text-decoration:none;">Send me the full list &nbsp;&#8594;</a></td></tr></table><p style="margin:10px 0 0 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12.5px;color:#9095a8;">Or just hit reply &mdash; it comes straight to me.</p></td></tr>
<tr><td style="padding:0 40px;"><hr class="divl" style="border:none;border-top:1px solid #eaeaf2;margin:0;"></td></tr>
<tr><td class="sig" style="background:#ffffff;padding:22px 40px;"><table cellpadding="0" cellspacing="0"><tr><td style="padding-right:14px;vertical-align:middle;"><img src="https://stitchandsnare.com/wp-content/uploads/2025/05/cropped-Logo-stitch-and-snare.png" alt="SNS" width="38" height="38" style="border-radius:8px;display:block;"></td><td style="vertical-align:middle;"><p class="sig-name" style="margin:0 0 2px 0;font-size:13px;font-weight:600;color:#1a1a2e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">Steve Sparacino</p><p style="margin:0;font-family:Courier New,monospace;font-size:10px;color:#393994;letter-spacing:0.3px;"><a href="https://stitchandsnare.com" style="color:#393994;text-decoration:none;">stitchandsnare.com</a></p></td></tr></table></td></tr>
<tr><td class="ft" style="background:#f8f8fc;padding:12px 40px;border-top:1px solid #eaeaf2;"><p style="margin:0;font-family:Courier New,monospace;font-size:10px;color:#ccc;text-align:center;letter-spacing:0.5px;">Stitch &amp; Snare, LLC &middot; St. Augustine, FL${city ? ' &middot; sent to a business in ' + city : ''}<br><a href="mailto:stitchandsnare@gmail.com?subject=Unsubscribe" style="color:#ccc;text-decoration:none;">Don't contact me again</a></p></td></tr>
</table></td></tr></table></body></html>`;
}

function previewHtmlEmail() {
  const bodyText = document.getElementById('email-body')?.value;
  if (!bodyText) { toast('Write or select a template first'); return; }
  const pickerEl = document.getElementById('template-picker');
  const templateId = pickerEl?.value;
  const subject = templateId
    ? (templates.find(t => t.id == templateId)?.subject || '').replace(/{{business_name}}/g, currentLead.business_name).replace(/{{category}}/g, currentLead.category || '').replace(/{{city}}/g, currentLead.city || '')
    : (aiDraftSubject || `A note for ${currentLead.business_name}`);
  pendingDraftId = null;
  pendingEmailHtml = buildHtmlEmail(currentLead, bodyText, currentAudit);
  pendingEmailSubject = subject;
  document.getElementById('email-modal-body').innerHTML = `<div style="padding:16px 22px;border-bottom:1px solid var(--border);background:var(--purple-dim);"><div style="font-family:'DM Mono',monospace;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Subject</div><div style="font-size:14px;font-weight:600;color:var(--text);">${escHtml(subject)}</div></div><iframe id="email-preview-frame" srcdoc="${escHtml(pendingEmailHtml)}" style="width:100%;height:520px;border:none;display:block;" sandbox="allow-same-origin"></iframe>`;
  document.getElementById('send-status-label').innerHTML = '';
  document.getElementById('email-modal-overlay').classList.add('open');
}

function closeEmailModal() { document.getElementById('email-modal-overlay').classList.remove('open'); }

async function sendViaGmail() {
  if (!pendingEmailHtml || !currentLead) return;
  const btn = document.getElementById('modal-send-btn');
  const statusEl = document.getElementById('send-status-label');
  const toEmail = currentLead.email || prompt(`Email address for ${currentLead.business_name}?`);
  if (!toEmail || !toEmail.includes('@')) { toast('Valid email required'); return; }
  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span>';
  statusEl.innerHTML = '<span class="send-status sending"><span class="spinner"></span> Sending…</span>';
  try {
    await sendGmailMessage(toEmail, pendingEmailSubject, pendingEmailHtml);
    await logActivity(currentLead.id, `HTML email sent to ${toEmail}: "${pendingEmailSubject}"`, 'HTML Email');
    await updateStatus('Contacted');
    await closeOutDrafts(currentLead.id);
    statusEl.innerHTML = `<span class="send-status success">✓ Sent to ${toEmail}</span>`;
    toast(`Sent to ${toEmail}`);
  } catch(e) { statusEl.innerHTML = `<span class="send-status error">⚠ ${e.message}</span>`; toast('Send failed — ' + e.message); }
  finally { btn.disabled = false; btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6z" fill="#EA4335" opacity=".2"/><path d="M22 6L12 13 2 6" stroke="#EA4335" stroke-width="2" stroke-linecap="round"/></svg> Send`; }
}

// A send retires every pending draft for that lead, no matter which surface
// the send came from — the Drafts tab or the lead drawer.
async function closeOutDrafts(leadId) {
  const ids = new Set();
  if (pendingDraftId) ids.add(pendingDraftId);
  pendingDraftId = null;

  if (leadId) {
    const { data } = await sb.from('outreach_drafts')
      .select('id').eq('lead_id', leadId).eq('status', 'pending');
    (data || []).forEach(r => ids.add(r.id));
  }

  if (ids.size) {
    const list = [...ids];
    const { error } = await sb.from('outreach_drafts').update({ status: 'sent' }).in('id', list);
    if (error) { toast('Sent, but draft status failed to update'); return; }
    leadDrafts = leadDrafts.map(d => ids.has(d.id) ? { ...d, status: 'sent' } : d);
    refreshAgentPanel();
  }

  updateDraftsPip();
  const section = document.getElementById('section-drafts');
  if (section && section.classList.contains('active')) loadDrafts();
}

async function sendTestEmail() {
  if (!pendingEmailHtml || !currentLead) return;
  const btn = document.getElementById('modal-test-btn');
  const statusEl = document.getElementById('send-status-label');
  btn.disabled = true; btn.textContent = '…';
  statusEl.innerHTML = '<span class="send-status sending"><span class="spinner"></span> Sending test…</span>';
  try {
    await sendGmailMessage('stitchandsnare@gmail.com', '[TEST] ' + pendingEmailSubject, pendingEmailHtml);
    statusEl.innerHTML = '<span class="send-status success">✓ Test sent to inbox</span>';
    toast('Test sent');
  } catch(e) { statusEl.innerHTML = `<span class="send-status error">⚠ ${e.message}</span>`; toast('Send failed — ' + e.message); }
  finally { btn.disabled = false; btn.textContent = '🧪 Test'; }
}

async function updateEmail(email) {
  const { error } = await sb.from('sns_leads').update({ email }).eq('id', currentLead.id);
  if (error) { toast('Error saving email'); return; }
  currentLead.email = email;
  leads = leads.map(l => l.id === currentLead.id ? { ...l, email } : l);
  toast('Email saved');
}

async function logActivity(lead_id, action, template_used = null) {
  await sb.from('sns_activity').insert([{ lead_id, action, template_used }]);
}

const DEFAULT_TEMPLATES = [
  { name: 'Cold Intro', subject: 'I built a free demo site for {{business_name}}', body: `Hi there,\n\nMy name is Steve — Katie and I run Stitch & Snare, a web design studio right here in St. Augustine.\n\nWe came across {{business_name}} and noticed you don't have a website yet. With the reputation you've built on Google, a website would put that front and center for every new customer searching for {{category}} in {{city}}.\n\nWe went ahead and built you a free demo so you can see exactly what it could look like:\n\n👉 [DEMO URL]\n\nNo strings attached — it's yours to look at. If you like it and want to talk next steps, we'd love to connect.\n\nSteve Sparacino\nStitch & Snare\nstitchandsnare.com` },
  { name: 'Follow Up', subject: 'Following Up — {{business_name}}', body: `Hi again,\n\nJust following up on my last message about the demo site we built for {{business_name}}.\n\nI know things get busy — no worries at all. The demo is still live whenever you'd like to take a look.\n\nSteve\nstitchandsnare.com` },
  { name: 'Performance Pitch', subject: 'Your website could be costing you customers', body: `Hi there,\n\nMy name is Steve — Katie and I run Stitch & Snare, a web design studio in St. Augustine.\n\nI ran a quick audit on {{business_name}}'s website and noticed it's scoring poorly on Google's performance metrics. Slow sites rank lower in search results and lose visitors before they even see your content.\n\nWe specialize in speed optimization and local SEO for small businesses in {{city}}. Happy to put together a free audit report — no commitment needed.\n\nSteve Sparacino\nStitch & Snare\nstitchandsnare.com` },
  { name: 'Short & Direct', subject: 'Quick question — {{business_name}}', body: `Hi,\n\nWe build and manage websites for local businesses in {{city}}. Quick question — are you happy with how your current site is performing on Google?\n\nIf not, we can help. Happy to send a free quote.\n\nSteve — stitchandsnare.com` }
];

async function ensureTemplates() {
  const { data } = await sb.from('sns_templates').select('*').order('created_at');
  if (data && data.length) { templates = data; return; }
  const { data: seeded } = await sb.from('sns_templates').insert(DEFAULT_TEMPLATES).select();
  templates = seeded || [];
}

async function loadTemplates() { await ensureTemplates(); renderTemplateList(); }

function renderTemplateList() {
  const list = document.getElementById('template-list');
  list.innerHTML = '';
  templates.forEach(t => {
    const item = document.createElement('div');
    item.className = 'template-item' + (activeTemplateId === t.id ? ' active' : '');
    item.onclick = () => editTemplate(t.id);
    item.innerHTML = `<div class="template-item-name">${t.name}</div><div class="template-item-preview">${t.subject}</div>`;
    list.appendChild(item);
  });
}

function editTemplate(id) {
  activeTemplateId = id;
  const t = templates.find(t => t.id === id);
  renderTemplateList();
  document.getElementById('template-editor').innerHTML = `
    <div class="template-field"><label>Template Name</label><input type="text" id="t-name" value="${escHtml(t.name)}" /></div>
    <div class="template-field"><label>Subject Line</label><input type="text" id="t-subject" value="${escHtml(t.subject)}" /></div>
    <div class="template-field"><label>Body</label><textarea id="t-body">${escHtml(t.body)}</textarea></div>
    <div style="margin-bottom:14px"><div class="section-label">Merge Tags</div><div class="merge-tags">${['{{business_name}}','{{category}}','{{city}}','{{address}}','{{phone}}'].map(tag => `<span class="merge-tag" onclick="insertTag('${tag}')">${tag}</span>`).join('')}</div></div>
    <div style="display:flex;gap:8px"><button class="btn btn-primary" style="flex:1" onclick="saveTemplate('${id}')">Save Template</button><button class="btn btn-ghost" style="color:var(--red);border-color:rgba(255,68,102,0.3)" onclick="deleteTemplate('${id}')">Delete</button></div>`;
}

function insertTag(tag) {
  const ta = document.getElementById('t-body');
  if (!ta) return;
  const start = ta.selectionStart;
  ta.value = ta.value.slice(0, start) + tag + ta.value.slice(ta.selectionEnd);
  ta.focus();
}

async function saveTemplate(id) {
  const name = document.getElementById('t-name').value.trim();
  const subject = document.getElementById('t-subject').value.trim();
  const body = document.getElementById('t-body').value;
  const { error } = await sb.from('sns_templates').update({ name, subject, body }).eq('id', id);
  if (error) { toast('Error saving template'); return; }
  templates = templates.map(t => t.id === id ? { ...t, name, subject, body } : t);
  renderTemplateList(); toast('Template saved');
}

async function deleteTemplate(id) {
  if (!confirm('Delete this template?')) return;
  await sb.from('sns_templates').delete().eq('id', id);
  templates = templates.filter(t => t.id !== id);
  activeTemplateId = null; renderTemplateList();
  document.getElementById('template-editor').innerHTML = '<div class="empty-state"><div class="icon">✉️</div><p>Select a template to edit</p></div>';
  toast('Template deleted');
}

async function newTemplate() {
  const { data, error } = await sb.from('sns_templates').insert([{ name: 'New Template', subject: '', body: '' }]).select().single();
  if (error) { toast('Error creating template'); return; }
  templates.push(data); renderTemplateList(); editTemplate(data.id);
}

function exportCSV() {
  if (!leads.length) { toast('No leads to export'); return; }
  const headers = ['Business Name', 'Address', 'Phone', 'Category', 'City', 'Status', 'Notes', 'Added'];
  const rows = leads.map(l => [l.business_name, l.address, l.phone, l.category, l.city, l.status, l.notes, new Date(l.created_at).toLocaleDateString()].map(v => `"${(v||'').replace(/"/g,'""')}"`));
  const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
  a.download = `sns-leads-${new Date().toISOString().slice(0,10)}.csv`;
  a.click(); toast('CSV exported');
}

function toast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg; t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2500);
}
function escHtml(str) { return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

(function() {
  const drawer = document.getElementById('drawer');
  const body = document.getElementById('drawer-body');

  const CLOSE_DISTANCE = 120;   // px of travel needed for a slow drag
  const FLICK_VELOCITY = 0.5;   // px/ms — a fast flick closes earlier
  const FLICK_DISTANCE = 45;    // minimum travel even for a flick
  const ARM_SLOP = 8;           // ignore jitter before deciding direction

  let startY = 0, startX = 0, startT = 0;
  let armed = false, dragging = false, decided = false;

  function reset(animate) {
    drawer.style.transition = animate ? 'transform 0.22s ease' : '';
    drawer.style.transform = '';
    if (animate) setTimeout(() => { drawer.style.transition = ''; }, 240);
    armed = dragging = decided = false;
  }

  drawer.addEventListener('touchstart', e => {
    if (e.touches.length !== 1) { reset(false); return; }
    // never hijack a drag that begins in a form control
    if (e.target.closest('textarea, input, select, .email-textarea')) { armed = false; return; }
    const onHandle = !!e.target.closest('.drawer-handle');
    // only arm at the very top of the scroll area, or on the handle itself
    armed = onHandle || !body || body.scrollTop <= 0;
    decided = false; dragging = false;
    startY = e.touches[0].clientY;
    startX = e.touches[0].clientX;
    startT = Date.now();
  }, { passive: true });

  drawer.addEventListener('touchmove', e => {
    if (!armed || e.touches.length !== 1) return;
    const dy = e.touches[0].clientY - startY;
    const dx = e.touches[0].clientX - startX;

    if (!decided) {
      if (Math.abs(dy) < ARM_SLOP && Math.abs(dx) < ARM_SLOP) return;
      // horizontal, or upward, or the body started scrolling — not a dismiss
      if (dy <= 0 || Math.abs(dy) < Math.abs(dx) * 2 || (body && body.scrollTop > 0)) {
        armed = false; return;
      }
      decided = true; dragging = true;
      drawer.style.transition = 'none';
    }

    if (dragging && dy > 0) {
      // slight resistance so it doesn't feel weightless
      drawer.style.transform = `translateY(${dy * 0.85}px)`;
    }
  }, { passive: true });

  drawer.addEventListener('touchend', e => {
    if (!armed || !dragging) { reset(false); return; }
    const dy = e.changedTouches[0].clientY - startY;
    const dx = e.changedTouches[0].clientX - startX;
    const dt = Math.max(Date.now() - startT, 1);
    const v = dy / dt;

    const vertical = dy > 0 && Math.abs(dy) > Math.abs(dx) * 2;
    const far = dy > CLOSE_DISTANCE;
    const flicked = v > FLICK_VELOCITY && dy > FLICK_DISTANCE;

    if (vertical && (far || flicked)) {
      reset(false);
      closeDrawer();
    } else {
      reset(true);
    }
  }, { passive: true });

  drawer.addEventListener('touchcancel', () => reset(true), { passive: true });
})();

(async () => {
  const { data, error } = await sb.from('sns_leads').select('*').order('created_at', { ascending: false });
  if (error) {
    document.getElementById('status-label').textContent = 'DB Error';
    document.querySelector('.status-dot').style.background = 'var(--red)';
  } else {
    leads = data || [];
    updatePipelinePip();
  }
  updateDraftsPip();
})();
/* ── PWA: service worker registration + update flow ── */
let swWaiting = null;
let swReloading = false;

function applyUpdate() {
  if (swWaiting) {
    swWaiting.postMessage('SKIP_WAITING');
  } else {
    location.reload();
  }
}

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const reg = await navigator.serviceWorker.register('./sw.js');

      if (reg.waiting && navigator.serviceWorker.controller) {
        swWaiting = reg.waiting;
        document.getElementById('update-bar').classList.add('show');
      }

      reg.addEventListener('updatefound', () => {
        const nw = reg.installing;
        if (!nw) return;
        nw.addEventListener('statechange', () => {
          if (nw.state === 'installed' && navigator.serviceWorker.controller) {
            swWaiting = nw;
            document.getElementById('update-bar').classList.add('show');
          }
        });
      });

      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') reg.update();
      });
    } catch (e) {
      console.warn('[sw] registration failed:', e);
    }
  });

  navigator.serviceWorker.addEventListener('controllerchange', () => {
    if (swReloading) return;
    swReloading = true;
    location.reload();
  });
}
</script>
</body>
</html>