<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 880 680" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <defs>
    <!-- Arrow markers -->
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#2563EB">
    </marker>

    <!-- Drop shadow for depth -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2">
      <feOffset dx="1" dy="1" result="offsetblur">
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2">
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic">
      </feMerge>
    </filter>
  </defs>



  <!-- Beautiful gradient definitions for depth -->
  

  <!-- White background with subtle border -->
  <rect x="0" y="0" width="880" height="680" fill="#F9FAFB" stroke="#9CA3AF" stroke-width="2" rx="8">

  <!-- Content container with proper margins -->
  <g transform="translate(40, 40)">
  

  <!-- Title -->
  <text x="300" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Session State Flow</text>

  <!-- Browser Opens -->
  <rect x="200" y="60" width="200" height="50" fill="none" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Browser</text>
  <text x="300" y="100" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Opens</text>

  <!-- Arrow down -->
  <line x1="300" y1="110" x2="300" y2="150" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- CREATE State -->
  <rect x="200" y="150" width="200" height="80" fill="none" stroke="#059669" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="175" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">CREATE</text>
  <text x="300" y="195" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">New UUID</text>
  <text x="300" y="210" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Token Gen</text>

  <!-- Arrow down -->
  <line x1="300" y1="230" x2="300" y2="270" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- ACTIVE State -->
  <rect x="200" y="270" width="200" height="80" fill="none" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="295" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">ACTIVE</text>
  <text x="300" y="315" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Chatting</text>
  <text x="300" y="330" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Messages</text>

  <!-- Arrow down -->
  <line x1="300" y1="350" x2="300" y2="390" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- IDLE State -->
  <rect x="200" y="390" width="200" height="80" fill="none" stroke="#EA580C" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="415" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">IDLE</text>
  <text x="300" y="435" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">No Input</text>
  <text x="300" y="450" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">30min Timer</text>

  <!-- User Returns Loop -->
  <path d="M 400 430 Q 480 360 480 310 Q 480 260 400 310" stroke="#6B7280" stroke-width="2" fill="none" marker-end="url(#arrow)" stroke-dasharray="5,5" opacity="0.7">
  <text x="490" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">User Returns</text>

  <!-- Arrow down -->
  <line x1="300" y1="470" x2="300" y2="510" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- EXPIRE State -->
  <rect x="200" y="510" width="200" height="80" fill="none" stroke="#DC2626" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="535" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">EXPIRE</text>
  <text x="300" y="555" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">7d Anon</text>
  <text x="300" y="570" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Never Auth</text>

  <!-- Retry Loop -->
  <path d="M 200 550 Q 120 400 120 200 Q 120 150 200 190" stroke="#6B7280" stroke-width="2" fill="none" marker-end="url(#arrow)" stroke-dasharray="5,5" opacity="0.7">
  <text x="90" y="360" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Retry</text>

  <!-- Arrow down -->
  <line x1="300" y1="590" x2="300" y2="630" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- CLEANUP State -->
  <rect x="200" y="630" width="200" height="80" fill="none" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="655" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">CLEANUP</text>
  <text x="300" y="675" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Archive</text>
  <text x="300" y="690" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Delete</text>

  <!-- State Duration Labels -->
  <g id="durations" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    <text x="420" y="195" text-anchor="start" filter="url(#textShadow)">Instant</text>
    <text x="420" y="315" text-anchor="start" filter="url(#textShadow)">Active use</text>
    <text x="420" y="435" text-anchor="start" filter="url(#textShadow)">30 minutes</text>
    <text x="420" y="555" text-anchor="start" filter="url(#textShadow)">7 days / Never</text>
    <text x="420" y="675" text-anchor="start" filter="url(#textShadow)">Permanent</text>
  </g>


  </g>

</svg>