
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AgencyOS — COMMAND INTERFACE</title>
    <script>
      window.tailwind = window.tailwind || {};
      window.tailwind.config = {
        theme: {
          extend: {
            colors: {
              slate: {
                50:  "#e8eef2",
                100: "#c8d2db",
                200: "#a0a8b0",
                300: "#7a8490",
                400: "#5a6470",
                500: "#3e4a56",
                600: "#2a3139",
                700: "#1f272e",
                800: "#1a1f23",
                900: "#111418",
                950: "#0a0e0f"
              },
              amber: {
                400: "#ffb74d",
                500: "#ff9800",
                600: "#e65c00"
              },
              cyan: {
                400: "#00d9ff",
                500: "#00b8d9"
              },
              green: {
                400: "#00d96f",
                500: "#00b85e"
              },
              red: {
                400: "#ff4444",
                500: "#cc0000"
              },
              purple: {
                400: "#c084fc",
                500: "#a855f7"
              },
              indigo: {
                400: "#818cf8",
                500: "#6366f1",
                600: "#4f46e5"
              }
            },
            // Phase D1 — Design tokens exposed as Tailwind utilities.
            fontFamily: {
              display: ["'Space Grotesk'", "system-ui", "sans-serif"],
              sans: ["'Inter Tight'", "system-ui", "sans-serif"],
              mono: ["'JetBrains Mono'", "ui-monospace", "monospace"]
            },
            transitionTimingFunction: {
              "out-quart": "cubic-bezier(0.16, 1, 0.3, 1)",
              "in-quart":  "cubic-bezier(0.5, 0, 0.75, 0)"
            },
            boxShadow: {
              elev1: "0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(30,41,59,0.7)",
              elev2: "0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px #334155",
              elev3: "0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(30,41,59,0.7)",
              glow:  "0 0 0 3px rgba(99,102,241,0.35)"
            }
          }
        }
      };
      tailwind.config = window.tailwind.config;
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Phase D1 — AgencyOS design fonts: Space Grotesk (display), Inter Tight (UI), JetBrains Mono (mono).
         IBM Plex Mono kept for legacy CRT body fallback — JARVIS map/hud surfaces still call it explicitly. -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
    <style>
      :root {
        color-scheme: dark;

        /* ── Legacy CRT palette (tactical map/JARVIS HUD — DO NOT REMOVE) ── */
        --bg-primary:   #0a0e0f;
        --bg-secondary: #111418;
        --bg-tertiary:  #1a1f23;
        --border:       #2a3139;
        --text-primary: #e8eef2;
        --text-secondary: #a0a8b0;
        --amber:  #ff9800;
        --cyan:   #00d9ff;
        --green:  #00d96f;
        --red:    #ff4444;
        --purple: #a855f7;

        /* ── v2 parallel palette (Greg Isenberg aesthetic, components/v2/**) ── */
        --v2-bg:           oklch(0.16 0.012 240);
        --v2-bg-elevated:  oklch(0.20 0.014 240);
        --v2-border:       oklch(0.30 0.014 240);
        --v2-text:         oklch(0.92 0.010 240);
        --v2-text-muted:   oklch(0.65 0.014 240);
        --v2-accent:       oklch(0.72 0.17 155);
        --v2-accent-soft:  oklch(0.86 0.10 155);
        --v2-violet:       oklch(0.72 0.16 290);
        --v2-pink:         oklch(0.72 0.16 350);
        --v2-sky:          oklch(0.74 0.13 235);
        --v2-amber:        oklch(0.78 0.14 78);
        --v2-red:          oklch(0.62 0.21 25);

        /* ── Phase D — AgencyOS Design Tokens (Attio + Linear DNA) ──
           Adopted from Claude Design AgencyOS.html (2026-05-14).
           NEW surfaces (Sidebar, Topbar, CRM, LeadDrawer, Workflows,
           SmartLists, Calls, Settings shell) MUST use these. Old CRT
           palette stays for the JARVIS map HUD and legacy tactical
           views until they're rebuilt. */
        --bg-base:       #0A0E1A;
        --bg-elevated:   #111827;
        --bg-overlay:    #1E293B;
        --bg-input:      rgba(15, 23, 42, 0.6);
        --border-subtle: rgba(30, 41, 59, 0.7);
        --border-strong: #334155;

        --accent-500:    #6366F1;
        --accent-400:    #818CF8;
        --accent-300:    #A5B4FC;
        --accent-glow:   rgba(99, 102, 241, 0.35);

        --ok:   #10B981;
        --warn: #F59E0B;
        --err:  #EF4444;
        --info: #38BDF8;

        --text-d-primary:  #F1F5F9;
        --text-d-body:     #CBD5E1;
        --text-d-muted:    #64748B;
        --text-d-faint:    #475569;
        --text-d-disabled: #334155;

        --stage-new:       #64748B;
        --stage-contacted: #6366F1;
        --stage-replied:   #38BDF8;
        --stage-booked:    #F59E0B;
        --stage-proposal:  #8B5CF6;
        --stage-won:       #10B981;
        --stage-lost:      #EF4444;

        --font-display: 'Space Grotesk', system-ui, sans-serif;
        --font-ui:      'Inter Tight', system-ui, sans-serif;
        --font-mono:    'JetBrains Mono', ui-monospace, monospace;

        --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
      }

      * { box-sizing: border-box; }

      body {
        font-family: var(--font-ui);
        background: var(--bg-base);
        color: var(--text-d-body);
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "cv11", "ss01";
      }

      /* ── Phase D — Design system utility classes ────────────────── */
      .font-display { font-family: var(--font-display); }
      .font-ui      { font-family: var(--font-ui); }
      .font-mono    { font-family: var(--font-mono); }

      /* Typography utilities */
      .text-h1     { font-size: 32px; line-height: 40px; font-weight: 900; letter-spacing: -0.02em; }
      .text-h2     { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
      .text-h3     { font-size: 16px; line-height: 22px; font-weight: 700; }
      .text-xs-tag { font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; }
      .text-micro  { font-size: 9px;  line-height: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.22em; }

      /* Text colour utilities (avoid colliding with Tailwind text-*) */
      .text-d-primary  { color: var(--text-d-primary); }
      .text-d-body     { color: var(--text-d-body); }
      .text-d-muted    { color: var(--text-d-muted); }
      .text-d-faint    { color: var(--text-d-faint); }
      .text-accent     { color: var(--accent-500); }
      .text-ok         { color: var(--ok); }
      .text-warn       { color: var(--warn); }
      .text-err        { color: var(--err); }
      .text-info       { color: var(--info); }

      /* Cards */
      .card {
        background: var(--bg-elevated);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        transition: box-shadow 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart);
      }
      .card-clickable {
        cursor: pointer;
      }
      .card-clickable:hover {
        background: rgba(17, 24, 39, 0.8);
        box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px var(--border-strong);
      }

      /* Buttons */
      .btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px;
        font-family: var(--font-ui);
        font-size: 13px; font-weight: 700;
        border-radius: 8px; border: 1px solid transparent;
        cursor: pointer; user-select: none;
        transition: background 100ms var(--ease-out-quart), color 100ms var(--ease-out-quart), border-color 100ms var(--ease-out-quart);
      }
      .btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

      .btn-primary { background: var(--accent-500); color: white; }
      .btn-primary:hover:not(:disabled) { background: var(--accent-400); }

      .btn-secondary {
        background: rgba(30, 41, 59, 0.6);
        color: var(--text-d-body);
        border-color: var(--border-subtle);
      }
      .btn-secondary:hover:not(:disabled) { background: var(--bg-overlay); border-color: var(--border-strong); }

      .btn-ghost {
        background: transparent;
        color: var(--text-d-muted);
      }
      .btn-ghost:hover:not(:disabled) { background: rgba(30,41,59,0.4); color: var(--text-d-body); }

      .btn-destructive {
        background: rgba(127, 29, 29, 0.6);
        color: #FCA5A5;
        border-color: rgba(153, 27, 27, 0.4);
      }
      .btn-destructive:hover:not(:disabled) { background: rgba(127, 29, 29, 0.9); }

      .btn-micro {
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
      }

      /* Inputs */
      .input, .input-textarea, .input-select {
        width: 100%;
        background: var(--bg-input);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 8px 12px;
        color: var(--text-d-primary);
        font-family: var(--font-ui);
        font-size: 13px;
        line-height: 1.5;
        transition: border-color 120ms var(--ease-out-quart), box-shadow 120ms var(--ease-out-quart);
      }
      .input::placeholder, .input-textarea::placeholder { color: var(--text-d-faint); }
      .input:focus, .input-textarea:focus, .input-select:focus {
        outline: none;
        border-color: var(--accent-500);
        box-shadow: 0 0 0 3px var(--accent-glow);
      }
      .input-textarea { min-height: 80px; resize: vertical; }

      /* Chips */
      .chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 11px; font-weight: 600;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      .chip-ok    { background: rgba(16,185,129,0.15);  color: #6EE7B7; border-color: rgba(4,120,87,0.4); }
      .chip-warn  { background: rgba(245,158,11,0.15);  color: #FCD34D; border-color: rgba(180,83,9,0.4); }
      .chip-err   { background: rgba(239,68,68,0.15);   color: #FCA5A5; border-color: rgba(185,28,28,0.4); }
      .chip-info  { background: rgba(56,189,248,0.15);  color: #7DD3FC; border-color: rgba(3,105,161,0.4); }
      .chip-accent{ background: rgba(99,102,241,0.15);  color: #A5B4FC; border-color: rgba(67,56,202,0.4); }
      .chip-muted { background: var(--bg-overlay);      color: var(--text-d-muted); }

      .pill {
        display: inline-flex; align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px; font-weight: 900;
        text-transform: uppercase; letter-spacing: 0.16em;
      }

      /* Stage chips — CRM pipeline */
      .stage-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px; font-weight: 600;
        background: rgba(30, 41, 59, 0.6);
        border: 1px solid var(--border-subtle);
      }
      .stage-chip::before {
        content: ''; width: 6px; height: 6px; border-radius: 50%;
        background: currentColor;
      }
      .stage-new       { color: var(--stage-new); }
      .stage-contacted { color: var(--stage-contacted); }
      .stage-replied   { color: var(--stage-replied); }
      .stage-booked    { color: var(--stage-booked); }
      .stage-proposal  { color: var(--stage-proposal); }
      .stage-won       { color: var(--stage-won); }
      .stage-lost      { color: var(--stage-lost); }

      /* Stage column dot (kanban headers) */
      .stage-dot {
        width: 8px; height: 8px; border-radius: 50%;
        display: inline-block;
      }

      /* Live pulse (sidebar footer / status indicators) */
      @keyframes live-pulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.4; }
      }
      .live-pulse {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--ok);
        animation: live-pulse 2s ease-in-out infinite;
      }

      /* Skeleton shimmer */
      @keyframes skeleton-shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
      }
      .skeleton-shimmer {
        background: linear-gradient(90deg, rgba(30,41,59,0.4) 0px, rgba(51,65,85,0.5) 40px, rgba(30,41,59,0.4) 80px);
        background-size: 200px 100%;
        animation: skeleton-shimmer 1.5s linear infinite;
        border-radius: 8px;
      }

      /* Drawer slide-in (Phase D — replaces inline transitions) */
      @keyframes drawer-slide-in {
        0%   { transform: translateX(100%); }
        100% { transform: translateX(0); }
      }
      @keyframes drawer-backdrop-in {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }
      .drawer-slide  { animation: drawer-slide-in 240ms var(--ease-out-quart); }
      .drawer-backdrop { animation: drawer-backdrop-in 200ms var(--ease-out-quart); }

      /* Modal scale */
      @keyframes modal-scale-in {
        0%   { opacity: 0; transform: scale(0.95); }
        100% { opacity: 1; transform: scale(1); }
      }
      .modal-scale { animation: modal-scale-in 200ms var(--ease-out-quart); }

      /* Toast slide */
      @keyframes toast-slide-in {
        0%   { opacity: 0; transform: translateX(20px); }
        100% { opacity: 1; transform: translateX(0); }
      }
      .toast-slide { animation: toast-slide-in 300ms var(--ease-out-quart); }

      /* Page transition (each page enter) */
      @keyframes page-enter {
        0%   { opacity: 0; transform: translateY(4px); }
        100% { opacity: 1; transform: translateY(0); }
      }
      .page-enter { animation: page-enter 320ms var(--ease-out-quart); }

      /* Sidebar item */
      .sidebar-item {
        display: flex; align-items: center; gap: 10px;
        height: 36px; padding: 0 12px;
        border-radius: 8px;
        color: var(--text-d-muted);
        cursor: pointer;
        position: relative;
        transition: background 100ms var(--ease-out-quart), color 100ms var(--ease-out-quart);
      }
      .sidebar-item:hover { background: rgba(30,41,59,0.4); color: var(--text-d-body); }
      .sidebar-item.active {
        background: var(--bg-elevated);
        color: var(--text-d-primary);
      }
      .sidebar-item.active::before {
        content: '';
        position: absolute; left: 0; top: 8px; bottom: 8px;
        width: 3px; border-radius: 0 2px 2px 0;
        background: var(--accent-500);
      }

      /* Confidence bar (lead drawer) */
      .confidence-bar {
        height: 4px;
        background: var(--bg-overlay);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
      }
      .confidence-bar > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--err) 0%, var(--warn) 50%, var(--ok) 100%);
        transition: width 240ms var(--ease-out-quart);
      }

      /* Kbd badge (⌘K spotlight) */
      .kbd {
        display: inline-flex; align-items: center;
        padding: 1px 6px;
        border-radius: 4px;
        background: rgba(15,23,42,0.6);
        border: 1px solid var(--border-subtle);
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--text-d-muted);
      }

      /* Avatar */
      .avatar {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: var(--bg-overlay);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; color: var(--text-d-primary);
        flex-shrink: 0;
      }

      /* Focus ring helper */
      .focus-ring:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--accent-glow);
        border-radius: 8px;
      }

      /* Phase D scrollbar — narrower + subtler for design surfaces */
      .scrollbar-subtle::-webkit-scrollbar { width: 6px; height: 6px; }
      .scrollbar-subtle::-webkit-scrollbar-track { background: transparent; }
      .scrollbar-subtle::-webkit-scrollbar-thumb { background: rgba(30,41,59,0.6); border-radius: 3px; }
      .scrollbar-subtle::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

      /* Subtle CRT scan-line overlay — Phase D: opt-in only via `<body data-crt>`.
         The map / JARVIS HUD set this attribute when active; the new design
         surfaces leave it off so the overlay doesn't muddy hairline borders. */
      body[data-crt]::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(0, 217, 255, 0.008) 2px,
          rgba(0, 217, 255, 0.008) 4px
        );
      }

      @keyframes pulse-glow {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.35; }
      }
      .pulse-dot { animation: pulse-glow 2s ease-in-out infinite; }

      /* JARVIS speaking bars */
      @keyframes jarvis-bar {
        0%   { height: 4px; }
        100% { height: 14px; }
      }

      /* Scrollbar */
      ::-webkit-scrollbar { width: 4px; height: 4px; }
      ::-webkit-scrollbar-track { background: #111418; }
      ::-webkit-scrollbar-thumb { background: #2a3139; border-radius: 2px; }
      ::-webkit-scrollbar-thumb:hover { background: #3e4a56; }

      /* Leaflet dark overrides */
      .leaflet-container { background: #0a0e0f !important; }
      .leaflet-control-attribution { display: none !important; }
      .leaflet-control-zoom { border: 1px solid var(--border) !important; border-radius: 4px !important; overflow: hidden; }
      .leaflet-control-zoom a { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
      .leaflet-control-zoom a:hover { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }

      /* Pulsing map markers */
      @keyframes marker-pulse {
        0% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(2.2); opacity: 0; }
        100% { transform: scale(1); opacity: 0; }
      }
      .map-marker-ring {
        position: absolute; border-radius: 50%;
        animation: marker-pulse 2.5s ease-out infinite;
        pointer-events: none;
      }

      /* Map scan line */
      @keyframes map-scan {
        0% { top: -2px; }
        100% { top: 100%; }
      }
      .map-scan-line {
        position: absolute; left: 0; right: 0; height: 2px; z-index: 1000;
        background: linear-gradient(90deg, transparent, rgba(0,217,255,0.12), transparent);
        animation: map-scan 8s linear infinite; pointer-events: none;
      }

      /* Iron Man JARVIS HUD — mode transition overlay (2026-04-21) */
      @keyframes mode-radial-wipe {
        0%   { transform: scale(0.1); opacity: 0; }
        40%  { transform: scale(1.05); opacity: 0.95; }
        60%  { transform: scale(1.15); opacity: 0.8; }
        100% { transform: scale(1.25); opacity: 0; }
      }
      @keyframes mode-hud-scan {
        0%   { transform: translateY(-60vh); opacity: 0; }
        30%  { opacity: 0.9; }
        100% { transform: translateY(60vh); opacity: 0; }
      }
      @keyframes mode-label-in {
        0%   { opacity: 0; letter-spacing: 0.1em; transform: translateY(14px); }
        35%  { opacity: 1; letter-spacing: 0.4em; transform: translateY(0); }
        80%  { opacity: 1; letter-spacing: 0.4em; transform: translateY(0); }
        100% { opacity: 0; letter-spacing: 0.55em; transform: translateY(-4px); }
      }
      @keyframes mode-overlay-fade {
        0%   { opacity: 0; }
        12%  { opacity: 1; }
        88%  { opacity: 1; }
        100% { opacity: 0; }
      }
      @keyframes mode-orb-glow {
        0%, 100% { filter: drop-shadow(0 0 8px currentColor); }
        50%      { filter: drop-shadow(0 0 20px currentColor); }
      }
      .mode-orb-pulse { animation: mode-orb-glow 2.4s ease-in-out infinite; }

      /* Tutorial overlay — spotlight pulse + tooltip slide-in (2026-04-26) */
      @keyframes tutorial-pulse {
        0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45), 0 0 32px 8px rgba(99, 102, 241, 0.35); }
        50%      { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.6), 0 0 48px 12px rgba(99, 102, 241, 0.5); }
      }
      @keyframes tutorial-slide-in {
        0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      /* Center-step tooltip should preserve its centering transform. */
      [role="dialog"][style*="translate(-50%"] {
        animation-name: tutorial-slide-in-center !important;
      }
      @keyframes tutorial-slide-in-center {
        0%   { opacity: 0; transform: translate(-50%, -42%) scale(0.96); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }

      /* Cluster overrides */
      .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
        background-color: rgba(0,217,255,0.12) !important;
      }
      .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
        background-color: rgba(0,217,255,0.35) !important;
        color: var(--text-primary) !important;
        font-family: 'IBM Plex Mono', monospace !important;
        font-weight: 700 !important; font-size: 11px !important;
      }

      /* Leaflet popup dark */
      .leaflet-popup-content-wrapper { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-radius: 4px !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; }
      .leaflet-popup-tip { background: var(--bg-secondary) !important; }
      .leaflet-popup-close-button { color: var(--text-secondary) !important; }
    </style>
    <script type="module" crossorigin src="/assets/index-B-3BatYp.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-CSCOup90.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-genai-CSRnzdR-.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DEwABamE.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
