feat(ai-chatbot): Replace suggestion chip emojis with modern outline SVG vector icons

public/AI ChatBot/chatbot.html

@@ -8,6 +8,23 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <style>
+    .suggestion-chip {
+      display: inline-flex !important;
+      align-items: center;
+      gap: 6px;
+      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .suggestion-chip:hover {
+      transform: translateY(-2px) scale(1.02);
+    }
+    .chip-icon-svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+      flex-shrink: 0;
+    }
+  </style>
 </head>
 <body>
 <a href="/" class="project-back-button" style="position:fixed;left:18px;top:18px;padding:8px 12px;border-radius:8px;background:linear-gradient(90deg, rgba(124,99,255,0.14), rgba(79,141,255,0.10));color:#fff;text-decoration:none;z-index:9999;font-weight:700;font-family:Inter, system-ui, sans-serif;box-shadow:0 8px 20px rgba(12,18,40,0.35);">← Back to Home</a>
@@ -97,10 +114,10 @@ <h2 id="modal-title">Connect to Gemini</h2>
             <h2>How can I help you today?</h2>
             <p>Start a conversation with Gemini AI. You can ask questions, analyze images, write code, and more.</p>
             <div class="suggestions">
-              <button class="suggestion-chip" data-text="Explain quantum computing in simple terms">⚛️ Explain quantum computing</button>
-              <button class="suggestion-chip" data-text="Write a Python function to sort a list of dictionaries by a key">🐍 Python sorting function</button>
-              <button class="suggestion-chip" data-text="What are the best practices for writing clean code?">✨ Clean code best practices</button>
-              <button class="suggestion-chip" data-text="Help me brainstorm names for a tech startup">💡 Brainstorm startup names</button>
+              <button class="suggestion-chip" data-text="Explain quantum computing in simple terms"><svg class="chip-icon-svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg> Explain quantum computing</button>
+              <button class="suggestion-chip" data-text="Write a Python function to sort a list of dictionaries by a key"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg> Python sorting function</button>
+              <button class="suggestion-chip" data-text="What are the best practices for writing clean code?"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M12 2l2.4 4.8 4.8 2.4-4.8 2.4-2.4 4.8-2.4-4.8-4.8-2.4 4.8-2.4L12 2zm0 13l1.2 2.4 2.4 1.2-2.4 1.2-2.4 1.2-1.2 2.4-1.2-2.4-2.4-1.2 2.4-1.2L12 15z"/></svg> Clean code best practices</button>
+              <button class="suggestion-chip" data-text="Help me brainstorm names for a tech startup"><svg class="chip-icon-svg" viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg> Brainstorm startup names</button>
             </div>
           </div>
         </div>