Update index.html

Author: Hariprashad-Ravikumar

index.html

@@ -103,46 +103,62 @@
   .badge-wrapper .badge-base {
     display: inline-block;
   }
-    chat-launcher {
+  #chat-launcher {
   position: fixed;
   bottom: 20px;
   right: 20px;
-  background: #2c3e50;
+  background: #001f3f; /* dark navy */
   color: white;
   padding: 12px 16px;
   border-radius: 30px;
   cursor: pointer;
   z-index: 1000;
   font-family: sans-serif;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.4); /* soft blue glow */
+  transition: background 0.3s;
 }
 
-chatbox {
+#chat-launcher:hover {
+  background: #003366;
+}
+
+#chatbox {
   position: fixed;
   bottom: 80px;
   right: 20px;
   width: 360px;
   height: 500px;
-  border: 1px solid #ccc;
+  border: none;
   background: white;
   display: none;
   flex-direction: column;
   z-index: 1001;
-  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
-  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
+  border-radius: 12px;
   overflow: hidden;
 }
 
-chatbox-header {
-  background: #2c3e50;
+#chatbox-header {
+  background: #001f3f;
   color: white;
-  padding: 10px;
+  padding: 10px 15px;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-family: sans-serif;
 }
+#chat-launcher:hover {
+  background: #003366;
+  box-shadow: 0 0 12px rgba(0, 102, 255, 0.6);
+}
+    #chatbox {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+#chatbox iframe {
+  height: calc(100% - 48px);
+}
+
 
   </style>
 </head>
@@ -206,12 +222,12 @@ <h1>Hariprashad Ravikumar</h1>
   </main>
 
 <!-- Floating Chat Button -->
-<div id="chat-launcher" onclick="toggleChatbox()">💬 Chat with HariBot</div>
+<div id="chat-launcher" onclick="toggleChatbox()">💬 Chat with My AI Hari-Bot</div>
 
 <!-- Chat iframe box (hidden by default) -->
 <div id="chatbox">
   <div id="chatbox-header">
-    <span>HariBot 🤖</span>
+    <span>Hari-Bot 🤖 (AI)</span>
     <button onclick="toggleChatbox()">✕</button>
   </div>
   <iframe src="https://hari-chatbot.onrender.com"