style: full comic book aesthetic with newsprint dot grid, chunky ink borders, speech bubbles, and zero purple

index.html

@@ -6,55 +6,48 @@
   <title>PhoneLLM + Pipecat XKCD Voice Agent</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,700&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@600;700&display=swap" rel="stylesheet">
   <style>
     :root {
-      /* Soft Pastel Color Palette */
-      --bg-gradient-1: #fbf9fe;
-      --bg-gradient-2: #f4f0fb;
-      --bg-gradient-3: #edf2fb;
-      --card-bg: rgba(255, 255, 255, 0.85);
-      --card-raised: #ffffff;
-      --border-pastel: #e2daf0;
-      --border-soft: #ede6f6;
+      /* Comic / Newsprint Pastel Palette (Zero Purple) */
+      --bg-paper: #fbf7ee;
+      --bg-dots: rgba(0, 0, 0, 0.04);
+      --ink: #1e1e24;
       
-      --pastel-lavender: #8b5cf6;
-      --pastel-lavender-soft: #ede9fe;
-      --pastel-lavender-border: #ddd6fe;
+      --comic-yellow: #fef08a;
+      --comic-yellow-border: #eab308;
       
-      --pastel-mint: #059669;
-      --pastel-mint-soft: #d1fae5;
-      --pastel-mint-border: #a7f3d0;
+      --comic-cyan: #bae6fd;
+      --comic-cyan-border: #0284c7;
       
-      --pastel-peach: #ea580c;
-      --pastel-peach-soft: #ffedd5;
-      --pastel-peach-border: #fed7aa;
+      --comic-mint: #bbf7d0;
+      --comic-mint-border: #16a34a;
       
-      --pastel-rose: #e11d48;
-      --pastel-rose-soft: #ffe4e6;
-      --pastel-rose-border: #fecdd3;
-      
-      --pastel-sky: #0284c7;
-      --pastel-sky-soft: #e0f2fe;
-      --pastel-sky-border: #bae6fd;
+      --comic-coral: #fed7aa;
+      --comic-coral-border: #ea580c;
+
+      --comic-pink: #fecdd3;
+      --comic-pink-border: #e11d48;
 
-      --text-main: #2e2640;
-      --text-muted: #6b6280;
-      --shadow-pastel: 0 12px 34px -8px rgba(139, 92, 246, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.04);
-      --shadow-card: 0 20px 40px -12px rgba(112, 90, 160, 0.14), 0 2px 10px rgba(0, 0, 0, 0.03);
+      --card-paper: #ffffff;
+      --shadow-hard: 5px 5px 0px var(--ink);
+      --shadow-hard-sm: 3px 3px 0px var(--ink);
+      --shadow-hard-btn: 4px 4px 0px var(--ink);
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
     
     body {
-      background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
-      color: var(--text-main);
-      font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
+      background-color: var(--bg-paper);
+      background-image: radial-gradient(var(--bg-dots) 1.5px, transparent 1.5px);
+      background-size: 16px 16px;
+      color: var(--ink);
+      font-family: 'Comic Neue', cursive, sans-serif;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 28px 16px 48px;
+      padding: 24px 16px 48px;
     }
 
     header {
@@ -65,61 +58,52 @@
 
     .badge-row {
       display: flex;
-      gap: 10px;
+      gap: 12px;
       justify-content: center;
-      margin-bottom: 14px;
+      margin-bottom: 12px;
       flex-wrap: wrap;
     }
 
     .badge {
-      background: var(--pastel-lavender-soft);
-      border: 1px solid var(--pastel-lavender-border);
-      color: #6d28d9;
-      padding: 5px 14px;
-      border-radius: 9999px;
-      font-size: 0.8rem;
+      background: var(--comic-yellow);
+      border: 2px solid var(--ink);
+      color: var(--ink);
+      padding: 4px 14px;
+      border-radius: 8px;
+      font-size: 0.85rem;
       font-family: 'JetBrains Mono', monospace;
-      font-weight: 600;
+      font-weight: 700;
       text-decoration: none;
-      transition: all 0.2s ease;
-      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.06);
+      box-shadow: var(--shadow-hard-sm);
+      transition: transform 0.15s ease, box-shadow 0.15s ease;
+      display: inline-block;
     }
     .badge:hover {
-      transform: translateY(-1px);
-      background: #e4dcfa;
-    }
-
-    .badge.mint {
-      background: var(--pastel-mint-soft);
-      border-color: var(--pastel-mint-border);
-      color: #047857;
+      transform: translate(-1px, -1px);
+      box-shadow: 4px 4px 0px var(--ink);
     }
-    .badge.mint:hover { background: #c2f5dc; }
 
-    .badge.peach {
-      background: var(--pastel-peach-soft);
-      border-color: var(--pastel-peach-border);
-      color: #c2410c;
-    }
-    .badge.peach:hover { background: #fde0be; }
+    .badge.cyan { background: var(--comic-cyan); }
+    .badge.coral { background: var(--comic-coral); }
+    .badge.mint { background: var(--comic-mint); }
 
     h1 {
-      font-size: clamp(2rem, 4.5vw, 2.75rem);
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #db2777 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      margin-bottom: 8px;
+      font-size: clamp(2.2rem, 5vw, 3.2rem);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--ink);
+      text-transform: uppercase;
+      text-shadow: 2px 2px 0px var(--comic-yellow), 4px 4px 0px var(--ink);
+      margin-bottom: 6px;
     }
 
     p.sub {
-      color: var(--text-muted);
-      font-size: 1rem;
-      font-weight: 500;
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: #4b5563;
     }
 
-    /* Layout Grid */
+    /* Comic Layout Grid */
     .main-grid {
       display: grid;
       grid-template-columns: 1fr;
@@ -131,108 +115,111 @@
       .main-grid { grid-template-columns: 1.15fr 1fr; }
     }
 
+    /* Comic Book Panels */
     .panel {
-      background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      border: 1px solid var(--border-pastel);
-      border-radius: 24px;
+      background: var(--card-paper);
+      border: 3px solid var(--ink);
+      border-radius: 16px;
       padding: 24px;
       display: flex;
       flex-direction: column;
-      box-shadow: var(--shadow-card);
+      box-shadow: var(--shadow-hard);
       position: relative;
     }
 
-    /* Controls Bar */
-    .controls-bar {
+    .panel-header-strip {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #ffffff;
-      border: 1px solid var(--border-soft);
-      padding: 8px 14px;
-      border-radius: 14px;
+      border-bottom: 2px dashed var(--ink);
+      padding-bottom: 12px;
       margin-bottom: 16px;
-      font-size: 0.82rem;
-      color: var(--text-muted);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.85rem;
+      font-weight: 700;
       flex-wrap: wrap;
       gap: 8px;
     }
-    .controls-bar select {
-      background: var(--pastel-lavender-soft);
-      border: 1px solid var(--pastel-lavender-border);
-      color: #5b21b6;
-      font-size: 0.8rem;
-      font-weight: 600;
+
+    .panel-header-strip select {
+      background: var(--comic-cyan);
+      border: 2px solid var(--ink);
+      color: var(--ink);
+      font-family: 'Comic Neue', cursive;
+      font-size: 0.95rem;
+      font-weight: 700;
       padding: 4px 8px;
       border-radius: 8px;
       outline: none;
       cursor: pointer;
+      box-shadow: 2px 2px 0px var(--ink);
     }
 
-    /* Voice Orb */
+    /* Comic Mic Orb */
     .orb-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 14px 0 10px;
-      gap: 14px;
+      padding: 12px 0;
+      gap: 12px;
     }
 
     .voice-orb {
-      width: 110px;
-      height: 110px;
+      width: 100px;
+      height: 100px;
       border-radius: 50%;
-      background: radial-gradient(circle at 35% 35%, #c4b5fd 0%, #a78bfa 40%, #7c3aed 100%);
-      box-shadow: 0 10px 30px rgba(124, 58, 237, 0.35), 0 0 0 6px rgba(167, 139, 250, 0.25);
+      background: var(--comic-yellow);
+      border: 3px solid var(--ink);
+      box-shadow: var(--shadow-hard);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
       position: relative;
     }
     .voice-orb:hover {
-      transform: scale(1.06);
-      box-shadow: 0 14px 38px rgba(124, 58, 237, 0.45), 0 0 0 8px rgba(167, 139, 250, 0.35);
+      transform: translate(-2px, -2px) scale(1.04);
+      box-shadow: 7px 7px 0px var(--ink);
     }
     .voice-orb.listening {
-      transform: scale(1.14);
-      background: radial-gradient(circle at 35% 35%, #6ee7b7 0%, #34d399 40%, #059669 100%);
-      box-shadow: 0 14px 45px rgba(16, 185, 129, 0.5), 0 0 0 10px rgba(52, 211, 153, 0.35);
-      animation: pastelPulse 1.5s infinite alternate ease-in-out;
+      background: var(--comic-mint);
+      transform: scale(1.1);
+      box-shadow: 6px 6px 0px var(--ink);
+      animation: comicPulse 1s infinite alternate ease-in-out;
     }
     .voice-orb.speaking {
-      background: radial-gradient(circle at 35% 35%, #fbcfe8 0%, #f472b6 40%, #db2777 100%);
-      box-shadow: 0 14px 45px rgba(219, 39, 119, 0.45), 0 0 0 10px rgba(244, 114, 182, 0.35);
-      animation: speakingPulse 1.2s infinite alternate ease-in-out;
+      background: var(--comic-coral);
+      transform: scale(1.08);
+      box-shadow: 6px 6px 0px var(--ink);
+      animation: comicTalk 0.8s infinite alternate ease-in-out;
     }
 
-    @keyframes pastelPulse {
-      0% { transform: scale(1.08); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), 0 0 0 6px rgba(52, 211, 153, 0.3); }
-      100% { transform: scale(1.18); box-shadow: 0 18px 50px rgba(16, 185, 129, 0.6), 0 0 0 12px rgba(52, 211, 153, 0.4); }
+    @keyframes comicPulse {
+      0% { transform: scale(1.05) rotate(-2deg); }
+      100% { transform: scale(1.14) rotate(2deg); }
     }
-    @keyframes speakingPulse {
-      0% { transform: scale(1.05); box-shadow: 0 10px 30px rgba(219, 39, 119, 0.35), 0 0 0 6px rgba(244, 114, 182, 0.25); }
-      100% { transform: scale(1.12); box-shadow: 0 16px 45px rgba(219, 39, 119, 0.55), 0 0 0 12px rgba(244, 114, 182, 0.4); }
+    @keyframes comicTalk {
+      0% { transform: scale(1.04) translateY(-2px); }
+      100% { transform: scale(1.1) translateY(2px); }
     }
 
-    .mic-icon { width: 44px; height: 44px; fill: white; pointer-events: none; }
+    .mic-icon { width: 44px; height: 44px; fill: var(--ink); pointer-events: none; }
     
     .status-badge {
-      font-size: 0.84rem;
-      color: #5b21b6;
-      font-family: 'JetBrains Mono', monospace;
-      font-weight: 600;
-      background: #ffffff;
-      border: 1px solid var(--border-soft);
-      padding: 5px 14px;
+      font-size: 0.95rem;
+      color: var(--ink);
+      font-family: 'Comic Neue', cursive;
+      font-weight: 700;
+      background: var(--bg-paper);
+      border: 2px solid var(--ink);
+      padding: 4px 14px;
       border-radius: 9999px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+      box-shadow: 2px 2px 0px var(--ink);
     }
 
-    /* Pastel Action Chips */
+    /* Comic Prompt Chips */
     .chips-row {
       display: flex;
       gap: 8px;
@@ -241,24 +228,24 @@
     }
     .chip {
       background: #ffffff;
-      border: 1px solid var(--border-pastel);
-      color: var(--text-main);
-      font-size: 0.8rem;
-      font-weight: 600;
-      padding: 6px 13px;
-      border-radius: 9999px;
+      border: 2px solid var(--ink);
+      color: var(--ink);
+      font-size: 0.9rem;
+      font-family: 'Comic Neue', cursive;
+      font-weight: 700;
+      padding: 6px 12px;
+      border-radius: 10px;
       cursor: pointer;
-      transition: all 0.2s ease;
-      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
+      box-shadow: var(--shadow-hard-sm);
+      transition: all 0.15s ease;
     }
     .chip:hover {
-      background: var(--pastel-lavender-soft);
-      border-color: var(--pastel-lavender-border);
-      color: #6d28d9;
-      transform: translateY(-1px);
+      background: var(--comic-yellow);
+      transform: translate(-1px, -1px);
+      box-shadow: 4px 4px 0px var(--ink);
     }
 
-    /* Chat Messages Box */
+    /* Speech Bubble Chat */
     .chat-box {
       flex: 1;
       min-height: 240px;
@@ -266,51 +253,52 @@
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      gap: 12px;
-      padding-right: 6px;
+      gap: 14px;
+      padding: 10px 8px 10px 2px;
       margin: 8px 0 16px;
     }
-    .chat-box::-webkit-scrollbar { width: 5px; }
-    .chat-box::-webkit-scrollbar-thumb { background: #ddd6fe; border-radius: 4px; }
+    .chat-box::-webkit-scrollbar { width: 6px; }
+    .chat-box::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }
 
     .msg {
-      padding: 12px 16px;
-      border-radius: 16px;
-      font-size: 0.92rem;
-      line-height: 1.5;
+      padding: 12px 18px;
+      border: 2px solid var(--ink);
+      font-size: 1.05rem;
+      line-height: 1.4;
       max-width: 88%;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+      position: relative;
+      border-radius: 14px;
+      box-shadow: var(--shadow-hard-sm);
+      font-weight: 700;
     }
     .msg.user {
       align-self: flex-end;
-      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
-      color: #ffffff;
-      border-bottom-right-radius: 4px;
+      background: var(--comic-yellow);
+      border-bottom-right-radius: 2px;
     }
     .msg.agent {
       align-self: flex-start;
       background: #ffffff;
-      border: 1px solid var(--border-soft);
-      color: var(--text-main);
-      border-bottom-left-radius: 4px;
+      border-bottom-left-radius: 2px;
     }
 
     .tool-call-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      font-size: 0.74rem;
+      font-size: 0.8rem;
       font-family: 'JetBrains Mono', monospace;
-      font-weight: 600;
-      color: #b45309;
-      background: #fef3c7;
-      border: 1px solid #fde68a;
-      padding: 3px 10px;
+      font-weight: 700;
+      color: #065f46;
+      background: var(--comic-mint);
+      border: 1.5px solid var(--ink);
+      padding: 2px 8px;
       border-radius: 6px;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
+      box-shadow: 2px 2px 0px var(--ink);
     }
 
-    /* Input area */
+    /* Input Strip */
     .input-row {
       display: flex;
       gap: 10px;
@@ -319,38 +307,40 @@
     input[type="text"] {
       flex: 1;
       background: #ffffff;
-      border: 1px solid var(--border-pastel);
-      color: var(--text-main);
+      border: 2px solid var(--ink);
+      color: var(--ink);
       padding: 12px 16px;
-      border-radius: 14px;
+      border-radius: 12px;
       outline: none;
-      font-family: inherit;
-      font-size: 0.92rem;
-      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
-      transition: border-color 0.2s ease;
+      font-family: 'Comic Neue', cursive;
+      font-size: 1.05rem;
+      font-weight: 700;
+      box-shadow: var(--shadow-hard-sm);
     }
     input[type="text"]:focus {
-      border-color: var(--pastel-lavender);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+      background: #fefce8;
     }
     button.btn-send {
-      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-      color: white;
-      border: none;
+      background: var(--comic-coral);
+      border: 2px solid var(--ink);
+      color: var(--ink);
       padding: 0 22px;
-      border-radius: 14px;
+      border-radius: 12px;
+      font-family: 'Comic Neue', cursive;
       font-weight: 700;
-      font-size: 0.92rem;
+      font-size: 1.1rem;
       cursor: pointer;
-      transition: all 0.2s ease;
-      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
+      box-shadow: var(--shadow-hard-btn);
+      transition: all 0.15s ease;
     }
     button.btn-send:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
+      transform: translate(-1px, -1px);
+      box-shadow: 5px 5px 0px var(--ink);
+      background: #f97316;
+      color: white;
     }
 
-    /* Right Comic Display Card */
+    /* Right Comic Display Panel */
     .comic-card {
       display: flex;
       flex-direction: column;
@@ -360,43 +350,50 @@
       justify-content: center;
     }
     .comic-placeholder {
-      color: var(--text-muted);
-      font-size: 0.95rem;
+      color: #6b7280;
+      font-size: 1.15rem;
+      font-weight: 700;
       padding: 48px 20px;
     }
     .comic-title {
-      font-size: 1.35rem;
-      font-weight: 800;
-      color: #3b0764;
-      margin-bottom: 10px;
+      font-size: 1.45rem;
+      font-weight: 700;
+      color: var(--ink);
+      margin-bottom: 12px;
+      background: var(--comic-yellow);
+      border: 2px solid var(--ink);
+      padding: 6px 16px;
+      border-radius: 8px;
+      box-shadow: var(--shadow-hard-sm);
+      display: inline-block;
     }
     .comic-img-wrap {
       background: #ffffff;
-      padding: 16px;
-      border-radius: 16px;
+      padding: 14px;
+      border: 3px solid var(--ink);
+      border-radius: 12px;
       margin: 12px 0;
       max-width: 100%;
-      border: 1px solid var(--border-soft);
-      box-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
+      box-shadow: var(--shadow-hard);
     }
     .comic-img {
       max-width: 100%;
       max-height: 290px;
       object-fit: contain;
       display: block;
-      border-radius: 6px;
     }
     .comic-alt {
-      font-size: 0.86rem;
-      color: #4c1d95;
-      background: var(--pastel-lavender-soft);
-      border-left: 4px solid var(--pastel-lavender);
+      font-size: 0.95rem;
+      color: var(--ink);
+      background: #fef3c7;
+      border: 2px solid var(--ink);
       padding: 12px 16px;
-      border-radius: 0 12px 12px 0;
+      border-radius: 10px;
       text-align: left;
-      margin-top: 10px;
-      line-height: 1.5;
-      font-weight: 500;
+      margin-top: 12px;
+      line-height: 1.45;
+      font-weight: 700;
+      box-shadow: var(--shadow-hard-sm);
     }
   </style>
 </head>
@@ -404,20 +401,20 @@
   <header>
     <div class="badge-row">
       <a class="badge" href="https://huggingface.co/pipecat-ai/phonellm-alpha-1" target="_blank">🎙️ PhoneLLM Alpha 1</a>
-      <span class="badge mint">⚡ Pipecat Voice Engine</span>
-      <a class="badge peach" href="https://xkcd.hemanth.deno.net/" target="_blank">🌐 xkcd.hemanth.deno.net</a>
+      <span class="badge mint">⚡ Pipecat Engine</span>
+      <a class="badge cyan" href="https://xkcd.hemanth.deno.net/" target="_blank">🌐 xkcd.hemanth.deno.net</a>
     </div>
-    <h1>PhoneLLM XKCD Voice Agent</h1>
-    <p class="sub">Soft pastel voice interface with high-fidelity on-device neural speech & live XKCD topic search.</p>
+    <h1>XKCD Comic Voice Agent</h1>
+    <p class="sub">Talk or type naturally. PhoneLLM finds the strip and reads the punchline!</p>
   </header>
 
   <main class="main-grid">
-    <!-- Left Voice & Conversation Panel -->
+    <!-- Left Voice & Speech Bubble Panel -->
     <div class="panel">
-      <div class="controls-bar">
-        <span>🔊 <strong>On-Device Voice:</strong></span>
+      <div class="panel-header-strip">
+        <span>🔊 <strong>ON-DEVICE VOICE:</strong></span>
         <select id="voice-select">
-          <option value="default">Loading high-quality neural voices...</option>
+          <option value="default">Loading neural voices...</option>
         </select>
       </div>
 
@@ -425,7 +422,7 @@
         <div id="voice-orb" class="voice-orb" title="Click to Speak / Stop">
           <svg class="mic-icon" viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
         </div>
-        <span id="status-badge" class="status-badge">Tap mic orb or select a prompt below</span>
+        <span id="status-badge" class="status-badge">Tap mic orb or click a prompt!</span>
       </div>
 
       <div class="chips-row">
@@ -440,16 +437,15 @@
 
       <div class="input-row">
         <input id="user-input" type="text" placeholder="Speak or type (e.g. 'Show me a comic on Python')..." />
-        <button id="send-btn" class="btn-send">Send</button>
+        <button id="send-btn" class="btn-send">SEND 💥</button>
       </div>
     </div>
 
-    <!-- Right Live XKCD Display Panel -->
+    <!-- Right Live Comic Frame -->
     <div class="panel">
       <div id="comic-card" class="comic-card">
         <div class="comic-placeholder">
-          <svg width="54" height="54" fill="none" stroke="#a78bfa" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:12px;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-          <p>Ask the agent for an XKCD comic to render it live here.</p>
+          <p>🗯️ Ask for an XKCD comic to see the panel drawn here!</p>
         </div>
       </div>
     </div>
@@ -556,11 +552,11 @@
 
       utterance.onend = () => {
         orb.classList.remove('speaking');
-        statusBadge.textContent = "Ready";
+        statusBadge.textContent = "Ready!";
       };
       utterance.onerror = () => {
         orb.classList.remove('speaking');
-        statusBadge.textContent = "Ready";
+        statusBadge.textContent = "Ready!";
       };
 
       window.speechSynthesis.speak(utterance);
@@ -654,7 +650,7 @@
       if (toolName) {
         const toolPill = document.createElement('div');
         toolPill.className = 'tool-call-pill';
-        toolPill.innerHTML = `<span>⚡ Tool Call:</span> <span>${toolName}</span>`;
+        toolPill.innerHTML = `<span>⚡ TOOL:</span> <span>${toolName}</span>`;
         msg.appendChild(toolPill);
       }
 
@@ -669,11 +665,11 @@
     function renderComic(comic) {
       if (!comic || comic.error) return;
       comicCard.innerHTML = `
-        <h2 class="comic-title">#${comic.num}: ${comic.title} (${comic.year || ''})</h2>
+        <div class="comic-title">#${comic.num}: ${comic.title} (${comic.year || ''})</div>
         <div class="comic-img-wrap">
           <img class="comic-img" src="${comic.img}" alt="${comic.alt || ''}" />
         </div>
-        <div class="comic-alt"><strong>Alt Text Punchline:</strong> ${comic.alt || 'No alt text'}</div>
+        <div class="comic-alt"><strong>🗯️ PUNCHLINE:</strong> ${comic.alt || 'No alt text'}</div>
       `;
     }
 
@@ -700,7 +696,7 @@
         isListening = true;
         orb.classList.remove('speaking');
         orb.classList.add('listening');
-        statusBadge.textContent = "🎙️ Listening to your voice...";
+        statusBadge.textContent = "🎙️ Listening to you...";
       };
 
       recognition.onresult = (event) => {
@@ -711,7 +707,7 @@
       recognition.onend = () => {
         isListening = false;
         orb.classList.remove('listening');
-        statusBadge.textContent = "⚡ Processing audio...";
+        statusBadge.textContent = "⚡ Processing...";
       };
 
       recognition.onerror = () => {
@@ -737,7 +733,7 @@
 
     // Initial greeting
     setTimeout(() => {
-      addMessage("Hello! I am your Pipecat voice assistant powered by PhoneLLM Alpha 1. Try asking: 'Show me a comic on Python' or 'What is Little Bobby Tables?'", "agent");
+      addMessage("🗯️ Hey! I am your XKCD voice bot powered by PhoneLLM Alpha 1. Ask me for comics on Python, Git, SQL, or say 'Random'!", "agent");
     }, 400);
   </script>
 </body>