feat(docs): replace telegram-demo.png with HTML/CSS chat mockup

Removes the 164 KB PNG and replaces it with a pure HTML/CSS Telegram
chat widget that renders crisply at any screen density, loads instantly,
and stays in-tree with zero external dependencies.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jkyberneees

docs/index.html

@@ -197,6 +197,50 @@
     .carousel .slide .hd { display: block; color: var(--accent); font-weight: 600; margin-top: 12px; }
     .carousel .slide .bul { display: block; padding-left: 14px; text-indent: -14px; }
 
+    /* ── Telegram chat mockup (slide 7) ── */
+    .tg-wrap { display: flex; justify-content: center; padding: 10px 0 4px; }
+    .tg-phone {
+      width: 320px; background: #0e1621; border-radius: 14px;
+      border: 1px solid #1e3448; overflow: hidden;
+      font-family: var(--font-sans); font-size: 0.8rem;
+      display: flex; flex-direction: column; max-height: 400px;
+    }
+    .tg-hdr {
+      background: #17212b; padding: 9px 14px; display: flex; align-items: center;
+      gap: 10px; border-bottom: 1px solid #0a1929; flex-shrink: 0;
+    }
+    .tg-av {
+      width: 34px; height: 34px; border-radius: 50%; background: #2b5f7e;
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 700; color: #fff; font-size: 0.875rem; flex-shrink: 0;
+    }
+    .tg-hdr-info .tg-bot-name { color: #fff; font-weight: 600; font-size: 0.85rem; }
+    .tg-hdr-info .tg-bot-sub  { color: #8ba9c1; font-size: 0.7rem; }
+    .tg-msgs {
+      flex: 1; overflow-y: auto; padding: 10px 10px 6px;
+      display: flex; flex-direction: column; gap: 5px;
+    }
+    .tg-msg { display: flex; flex-direction: column; max-width: 84%; }
+    .tg-msg.tg-out { align-self: flex-end; align-items: flex-end; }
+    .tg-msg.tg-in  { align-self: flex-start; }
+    .tg-sender { color: #71bafa; font-size: 0.7rem; font-weight: 600; margin-bottom: 2px; padding-left: 2px; }
+    .tg-bbl {
+      padding: 7px 10px; border-radius: 12px; line-height: 1.45; color: #d8e1ea;
+    }
+    .tg-out .tg-bbl { background: #2b5278; border-radius: 12px 12px 4px 12px; }
+    .tg-in  .tg-bbl { background: #182533; border-radius: 12px 12px 12px 4px; }
+    .tg-reply {
+      background: rgba(255,255,255,.06); border-left: 3px solid #71bafa;
+      border-radius: 4px; padding: 3px 7px; margin-bottom: 5px;
+      font-size: 0.68rem; color: #8ba9c1;
+    }
+    .tg-time { font-size: 0.62rem; color: #526a7d; margin-top: 2px; padding: 0 2px; }
+    .tg-code {
+      background: rgba(0,0,0,.35); border-radius: 6px; padding: 5px 8px;
+      font-family: var(--font-mono); font-size: 0.67rem; color: #a8c7fa;
+      margin-top: 4px; white-space: pre-wrap; word-break: break-all; line-height: 1.5;
+    }
+
     /* ── Install steps ── */
     .steps { list-style: none; }
     .steps li {
@@ -326,7 +370,7 @@
   "softwareVersion": "1.2.0",
   "license": "https://github.com/BackendStack21/odek/blob/main/LICENSE",
   "image": "https://odek.21no.de/og-image.png",
-  "screenshot": "https://odek.21no.de/telegram-demo.png",
+  "screenshot": "https://odek.21no.de/og-image.png",
   "sameAs": ["https://github.com/BackendStack21/odek"],
   "offers": {
     "@type": "Offer",
@@ -559,7 +603,52 @@ <h1>odek</h1>
         <!-- Slide 7 — the result -->
         <div class="slide slide-img">
           <span class="info"># 7 · Chat with it →</span><br>
-          <img src="telegram-demo.png" alt="Chatting with the odek Telegram bot — it replies in English and Spanish, with token stats per turn" width="1220" height="1214" loading="lazy">
+          <div class="tg-wrap" aria-label="Chatting with the odek Telegram bot — it replies in English and Spanish, with token stats per turn">
+            <div class="tg-phone">
+              <div class="tg-hdr">
+                <div class="tg-av">k</div>
+                <div class="tg-hdr-info">
+                  <div class="tg-bot-name">k3s</div>
+                  <div class="tg-bot-sub">bot</div>
+                </div>
+              </div>
+              <div class="tg-msgs">
+                <div class="tg-msg tg-out">
+                  <div class="tg-bbl">Hi</div>
+                  <span class="tg-time">13:10 ✓✓</span>
+                </div>
+                <div class="tg-msg tg-in">
+                  <span class="tg-sender">k3s</span>
+                  <div class="tg-bbl"><div class="tg-reply">Hi</div>🤔 Looking into that…</div>
+                  <span class="tg-time">13:10</span>
+                </div>
+                <div class="tg-msg tg-in">
+                  <span class="tg-sender">k3s</span>
+                  <div class="tg-bbl"><div class="tg-reply">Hi</div>🌐 Buenas! Me saludaron en inglés pero puedo responder en inglés o español.</div>
+                  <span class="tg-time">13:10</span>
+                </div>
+                <div class="tg-msg tg-in">
+                  <span class="tg-sender">k3s</span>
+                  <div class="tg-bbl">
+                    <div class="tg-reply">Hi</div>
+                    ¡Hola! 👋<br><br>
+                    Kyberneees — you caught me in a good mood. What's on your mind?<br><br>
+                    Got a problem to crack, a PR to review, a deploy to babysit, or just testing if I'm alive? I'm here to compress hours into minutes.<br><br>
+                    <em>(Also: I speak Spanish just as well, so tira con confianza.)</em>
+                  </div>
+                  <span class="tg-time">13:10</span>
+                </div>
+                <div class="tg-msg tg-in">
+                  <span class="tg-sender">k3s</span>
+                  <div class="tg-bbl">
+                    <div class="tg-reply">Hi</div>
+                    <div class="tg-code">✅ Done · 1 turn · 10095 in / 155 out · cache: 0cr+0rd+0ct · 2s — tools: none</div>
+                  </div>
+                  <span class="tg-time">13:10</span>
+                </div>
+              </div>
+            </div>
+          </div>
           <span class="cap">Same agent, now in your pocket. Risky commands prompt for <strong>Approve / Deny / Trust</strong> right in the chat.</span>
         </div>