---
/**
 * Animated AI Agent workflow diagram.
 * Shows: AI Agent -> MCP Server (73 tools) -> bunqueue Engine -> Workers / HTTP Handlers
 * Floating speech bubble quotes fade in/out. Animated dots on all connectors.
 */
---

<div class="aw-wrap">
  <!-- Floating speech bubbles -->
  <div class="aw-bubbles">
    <div class="aw-bubble aw-b1">"Schedule cleanup at 3 AM"</div>
    <div class="aw-bubble aw-b2">"Register HTTP handler on meteo"</div>
    <div class="aw-bubble aw-b3">"Retry all failed jobs"</div>
  </div>

  <!-- Desktop horizontal layout -->
  <div class="aw-flow">
    <!-- Node 1: AI Agent -->
    <div class="aw-node aw-n1">
      <div class="aw-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2a4 4 0 0 1 4 4c0 1.95-1.4 3.58-3.25 3.93"/>
          <path d="M12 2a4 4 0 0 0-4 4c0 1.95 1.4 3.58 3.25 3.93"/>
          <circle cx="12" cy="14" r="4"/>
          <path d="M19 22v-2a4 4 0 0 0-3-3.87"/>
          <path d="M5 22v-2a4 4 0 0 1 3-3.87"/>
        </svg>
      </div>
      <span class="aw-label">AI Agent</span>
      <span class="aw-sublabel">Claude, Cursor, Windsurf</span>
    </div>

    <!-- Connector 1 -->
    <div class="aw-hconn">
      <div class="aw-hline"></div>
      <div class="aw-harrow"></div>
      <div class="aw-hdot aw-hd1"></div>
    </div>

    <!-- Node 2: MCP Server -->
    <div class="aw-node aw-n2 aw-hero">
      <div class="aw-glow"></div>
      <div class="aw-icon aw-icon-pink">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
          <line x1="8" y1="21" x2="16" y2="21"/>
          <line x1="12" y1="17" x2="12" y2="21"/>
        </svg>
      </div>
      <span class="aw-label">MCP Server</span>
      <span class="aw-sublabel">73 tools</span>
    </div>

    <!-- Connector 2 -->
    <div class="aw-hconn">
      <div class="aw-hline"></div>
      <div class="aw-harrow"></div>
      <div class="aw-hdot aw-hd2"></div>
    </div>

    <!-- Node 3: bunqueue Engine -->
    <div class="aw-node aw-n3">
      <div class="aw-icon aw-icon-blue">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
          <rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
          <line x1="6" y1="6" x2="6.01" y2="6"/>
          <line x1="6" y1="18" x2="6.01" y2="18"/>
        </svg>
      </div>
      <span class="aw-label">bunqueue Engine</span>
    </div>
  </div>

  <!-- Vertical connector from bunqueue Engine to Workers -->
  <div class="aw-vconn-section">
    <div class="aw-vconn">
      <div class="aw-vline"></div>
      <div class="aw-vdot aw-vd1"></div>
    </div>

    <!-- Node 4: Workers / HTTP Handlers -->
    <div class="aw-node aw-n4">
      <div class="aw-icon aw-icon-green">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
      </div>
      <span class="aw-label">Workers / HTTP Handlers</span>
    </div>
  </div>

  <!-- Mobile vertical layout -->
  <div class="aw-mobile">
    <div class="aw-mrow">
      <div class="aw-micon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2a4 4 0 0 1 4 4c0 1.95-1.4 3.58-3.25 3.93"/>
          <path d="M12 2a4 4 0 0 0-4 4c0 1.95 1.4 3.58 3.25 3.93"/>
          <circle cx="12" cy="14" r="4"/>
          <path d="M19 22v-2a4 4 0 0 0-3-3.87"/>
          <path d="M5 22v-2a4 4 0 0 1 3-3.87"/>
        </svg>
      </div>
      <div><span class="aw-mlabel">AI Agent</span><span class="aw-msub">Claude, Cursor, Windsurf</span></div>
    </div>
    <div class="aw-mvconn"><div class="aw-mvline"></div><div class="aw-mvdot aw-mvd1"></div></div>
    <div class="aw-mrow aw-mhero">
      <div class="aw-micon aw-micon-pink">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
        </svg>
      </div>
      <div><span class="aw-mlabel">MCP Server</span><span class="aw-msub">73 tools</span></div>
    </div>
    <div class="aw-mvconn"><div class="aw-mvline"></div><div class="aw-mvdot aw-mvd2"></div></div>
    <div class="aw-mrow">
      <div class="aw-micon aw-micon-blue">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
          <line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
        </svg>
      </div>
      <div><span class="aw-mlabel">bunqueue Engine</span></div>
    </div>
    <div class="aw-mvconn"><div class="aw-mvline"></div><div class="aw-mvdot aw-mvd3"></div></div>
    <div class="aw-mrow">
      <div class="aw-micon aw-micon-green">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4"/>
        </svg>
      </div>
      <div><span class="aw-mlabel">Workers / HTTP Handlers</span></div>
    </div>
  </div>
</div>

<style>
  .aw-wrap {
    position: relative;
    margin: 1.5rem 0;
    padding: 2rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--sl-color-hairline);
    background: var(--sl-color-bg-sidebar);
    overflow: hidden;
  }

  :root[data-theme='dark'] .aw-wrap {
    background: rgba(12, 12, 15, 0.8);
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* === Floating speech bubbles === */
  .aw-bubbles {
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
    z-index: 2;
  }

  .aw-bubble {
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-style: italic;
    color: var(--sl-color-gray-3);
    background: var(--sl-color-bg);
    border: 1px solid var(--sl-color-hairline);
    white-space: nowrap;
    opacity: 0;
    animation: awBubbleCycle 10.5s ease-in-out infinite;
  }

  :root[data-theme='dark'] .aw-bubble {
    background: rgba(24, 24, 27, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .aw-b1 { animation-delay: 0s; }
  .aw-b2 { animation-delay: 3.5s; }
  .aw-b3 { animation-delay: 7s; }

  @keyframes awBubbleCycle {
    0%, 5% { opacity: 0; transform: translateY(4px); }
    10%, 28% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-4px); }
  }

  /* === Desktop horizontal flow === */
  .aw-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 1.5rem;
  }

  .aw-mobile { display: none; }

  /* Nodes */
  .aw-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    animation: awAppear 0.5s ease-out both;
  }

  .aw-n1 { animation-delay: 0s; }
  .aw-n2 { animation-delay: 0.15s; }
  .aw-n3 { animation-delay: 0.3s; }
  .aw-n4 { animation-delay: 0.45s; }

  @keyframes awAppear {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Icons */
  .aw-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sl-color-hairline);
    background: var(--sl-color-bg);
    color: var(--sl-color-gray-3);
  }

  :root[data-theme='dark'] .aw-icon {
    background: rgba(17, 17, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .aw-icon-pink {
    color: #ec4899;
    border-color: rgba(236, 72, 153, 0.4);
    animation: awPulse 3s ease-in-out infinite;
  }

  :root[data-theme='dark'] .aw-icon-pink {
    color: #f9a8d4;
    border-color: rgba(249, 168, 212, 0.4);
  }

  @keyframes awPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(236, 72, 153, 0.15); }
    50% { box-shadow: 0 0 22px rgba(236, 72, 153, 0.35); }
  }

  .aw-icon-blue {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
  }

  :root[data-theme='dark'] .aw-icon-blue {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.3);
  }

  .aw-icon-green {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
  }

  :root[data-theme='dark'] .aw-icon-green {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
  }

  /* Hero glow */
  .aw-hero { position: relative; }

  .aw-glow {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 18px;
    background: radial-gradient(ellipse, rgba(236, 72, 153, 0.12) 0%, transparent 70%);
    animation: awGlow 3s ease-in-out infinite;
    pointer-events: none;
  }

  :root[data-theme='dark'] .aw-glow {
    background: radial-gradient(ellipse, rgba(249, 168, 212, 0.1) 0%, transparent 70%);
  }

  @keyframes awGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
  }

  /* Labels */
  .aw-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sl-color-text);
    text-align: center;
    white-space: nowrap;
  }

  .aw-sublabel {
    font-size: 0.65rem;
    color: var(--sl-color-gray-3);
    text-align: center;
  }

  /* === Horizontal connectors === */
  .aw-hconn {
    position: relative;
    width: 48px;
    height: 46px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .aw-hline {
    width: 100%;
    height: 2px;
    background: var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .aw-hline {
    background: rgba(255, 255, 255, 0.1);
  }

  .aw-harrow {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .aw-harrow {
    border-left-color: rgba(255, 255, 255, 0.1);
  }

  .aw-hdot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ec4899;
    top: 50%;
    transform: translateY(-50%);
    left: -3px;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
    animation: awHdot 3.5s ease-in-out infinite;
  }

  :root[data-theme='dark'] .aw-hdot {
    background: #f9a8d4;
    box-shadow: 0 0 10px rgba(249, 168, 212, 0.6);
  }

  .aw-hd1 { animation-delay: 0s; }
  .aw-hd2 { animation-delay: 0.7s; }

  @keyframes awHdot {
    0% { left: -3px; opacity: 0; }
    8% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% - 3px); opacity: 0; }
  }

  /* === Vertical connector section === */
  .aw-vconn-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .aw-vconn {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
  }

  .aw-vline {
    width: 2px;
    height: 100%;
    background: var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .aw-vline {
    background: rgba(255, 255, 255, 0.1);
  }

  .aw-vdot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ec4899;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
    animation: awVdot 3.5s ease-in-out infinite;
  }

  :root[data-theme='dark'] .aw-vdot {
    background: #f9a8d4;
    box-shadow: 0 0 10px rgba(249, 168, 212, 0.6);
  }

  .aw-vd1 { animation-delay: 1.4s; }

  @keyframes awVdot {
    0% { top: -3px; opacity: 0; }
    8% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: calc(100% - 3px); opacity: 0; }
  }

  /* === Mobile vertical layout === */
  .aw-mrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
  }

  .aw-mhero {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(236, 72, 153, 0.04);
    border: 1px solid rgba(236, 72, 153, 0.1);
  }

  :root[data-theme='dark'] .aw-mhero {
    background: rgba(249, 168, 212, 0.04);
    border-color: rgba(249, 168, 212, 0.1);
  }

  .aw-micon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sl-color-hairline);
    background: var(--sl-color-bg);
    color: var(--sl-color-gray-3);
  }

  :root[data-theme='dark'] .aw-micon {
    background: rgba(17, 17, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .aw-micon-pink { color: #ec4899; border-color: rgba(236, 72, 153, 0.4); }
  :root[data-theme='dark'] .aw-micon-pink { color: #f9a8d4; border-color: rgba(249, 168, 212, 0.4); }
  .aw-micon-blue { color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }
  :root[data-theme='dark'] .aw-micon-blue { color: #93c5fd; border-color: rgba(147, 197, 253, 0.3); }
  .aw-micon-green { color: #22c55e; border-color: rgba(34, 197, 94, 0.3); }
  :root[data-theme='dark'] .aw-micon-green { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }

  .aw-mlabel {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sl-color-text);
    display: block;
  }

  .aw-msub {
    font-size: 0.72rem;
    color: var(--sl-color-gray-3);
    display: block;
  }

  .aw-mvconn {
    position: relative;
    height: 24px;
    width: 38px;
    display: flex;
    justify-content: center;
  }

  .aw-mvline {
    width: 2px;
    height: 100%;
    background: var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .aw-mvline {
    background: rgba(255, 255, 255, 0.1);
  }

  .aw-mvdot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ec4899;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    box-shadow: 0 0 6px rgba(236, 72, 153, 0.4);
    animation: awMvdot 3.5s ease-in-out infinite;
  }

  :root[data-theme='dark'] .aw-mvdot {
    background: #f9a8d4;
    box-shadow: 0 0 8px rgba(249, 168, 212, 0.5);
  }

  .aw-mvd1 { animation-delay: 0s; }
  .aw-mvd2 { animation-delay: 0.7s; }
  .aw-mvd3 { animation-delay: 1.4s; }

  @keyframes awMvdot {
    0% { top: -3px; opacity: 0; }
    8% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: calc(100% - 3px); opacity: 0; }
  }

  /* Responsive */
  @media (max-width: 700px) {
    .aw-flow { display: none; }
    .aw-vconn-section { display: none; }
    .aw-bubbles { display: none; }
    .aw-mobile { display: flex; flex-direction: column; }
    .aw-wrap { padding: 1.25rem 1rem; }
  }
</style>
