<svg viewBox="0 0 920 460" xmlns="http://www.w3.org/2000/svg" font-family="Inter,system-ui,sans-serif">
  <defs>
    <linearGradient id="bg2" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#F6F8FC"/><stop offset="1" stop-color="#EEF3FE"/>
    </linearGradient>
    <linearGradient id="card" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#DCE6FD"/><stop offset="1" stop-color="#B6CAFB"/>
    </linearGradient>
    <filter id="sh2" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="8" stdDeviation="14" flood-color="#0B1220" flood-opacity="0.12"/>
    </filter>
  </defs>
  <rect width="920" height="460" rx="18" fill="url(#bg2)"/>
  <text x="36" y="44" font-size="13" font-weight="700" letter-spacing="2" fill="#2463EB" font-family="'JetBrains Mono',monospace">// LIVE — AGENT VIEW (UI MOCK)</text>

  <!-- phone card -->
  <g filter="url(#sh2)">
    <rect x="120" y="78" width="270" height="350" rx="26" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="136" y="94" width="238" height="240" rx="16" fill="url(#card)"/>
  <!-- abstract avatar -->
  <circle cx="255" cy="180" r="46" fill="#FFFFFF" opacity="0.55"/>
  <circle cx="255" cy="166" r="18" fill="#2463EB" opacity="0.35"/>
  <path d="M223 214 a32 28 0 0 1 64 0 z" fill="#2463EB" opacity="0.35"/>
  <rect x="160" y="270" width="120" height="14" rx="7" fill="#FFFFFF" opacity="0.7"/>
  <rect x="160" y="294" width="80" height="11" rx="5.5" fill="#FFFFFF" opacity="0.5"/>

  <!-- swipe buttons -->
  <circle cx="190" cy="380" r="26" fill="#FFFFFF" stroke="#E4E9F2"/>
  <path d="M181 371 l18 18 M199 371 l-18 18" stroke="#D11A6B" stroke-width="3" stroke-linecap="round"/>
  <circle cx="320" cy="380" r="26" fill="#16A34A"/>
  <path d="M311 380 l6 7 l13 -15" stroke="#FFFFFF" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>

  <!-- AI HUD overlay panel -->
  <g filter="url(#sh2)">
    <rect x="440" y="96" width="384" height="140" rx="16" fill="#0B1220"/>
  </g>
  <circle cx="468" cy="124" r="6" fill="#16A34A"/>
  <text x="484" y="129" font-size="12" font-weight="700" fill="#16A34A" font-family="'JetBrains Mono',monospace">AI AGENT · LIVE</text>
  <text x="700" y="129" font-size="11" fill="#7C89A6" font-family="'JetBrains Mono',monospace" text-anchor="end" >voice · WebRTC</text>
  <text x="468" y="160" font-size="15" font-weight="600" fill="#F2F5FC">"Looks like a match for your</text>
  <text x="468" y="183" font-size="15" font-weight="600" fill="#F2F5FC">criteria — want me to swipe right?"</text>
  <rect x="468" y="198" width="120" height="22" rx="11" fill="#16A34A" opacity="0.18"/>
  <text x="482" y="213" font-size="11" font-weight="700" fill="#34D399" font-family="'JetBrains Mono',monospace">SCORE 0.82 · LIKE</text>
  <rect x="600" y="198" width="150" height="22" rx="11" fill="#2463EB" opacity="0.2"/>
  <text x="614" y="213" font-size="11" font-weight="700" fill="#5B8DEF" font-family="'JetBrains Mono',monospace">vision: Claude Haiku</text>

  <!-- stats HUD -->
  <g filter="url(#sh2)">
    <rect x="440" y="256" width="384" height="120" rx="16" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <text x="468" y="286" font-size="11" font-weight="700" fill="#6B7693" font-family="'JetBrains Mono',monospace">SESSION STATS</text>
  <text x="468" y="330" font-size="34" font-weight="800" fill="#2463EB">48</text>
  <text x="468" y="352" font-size="12" fill="#6B7693" font-family="'JetBrains Mono',monospace">cards seen</text>
  <text x="600" y="330" font-size="34" font-weight="800" fill="#16A34A">12</text>
  <text x="600" y="352" font-size="12" fill="#6B7693" font-family="'JetBrains Mono',monospace">likes</text>
  <text x="720" y="330" font-size="34" font-weight="800" fill="#0EA5E9">3</text>
  <text x="720" y="352" font-size="12" fill="#6B7693" font-family="'JetBrains Mono',monospace">matches</text>

  <text x="440" y="404" font-size="11.5" fill="#6B7693" font-family="'JetBrains Mono',monospace">Sees the card · scores it against your taste · talks it through · then clicks.</text>
</svg>
