Update it.

index.html

@@ -5,62 +5,116 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Serenity - Emotional Support Companion</title>
   <style>
+    :root {
+      --bg: #f5f7fc;
+      --user-bubble: #e2e6ff;
+      --bot-bubble: #ffffff;
+      --accent: #5b6ef5;
+      --bot-shadow: rgba(91, 110, 245, 0.25);
+    }
+
     body {
-      background: #f4f7fb;
+      background: var(--bg);
       font-family: "Inter", sans-serif;
       margin: 0;
-      padding: 0;
       display: flex;
       flex-direction: column;
       height: 100vh;
       color: #222;
+      transition: background 1s ease;
     }
+
     header {
-      background: #5b6ef5;
+      background: var(--accent);
       color: #fff;
       text-align: center;
       padding: 1rem;
-      font-size: 1.3rem;
+      font-size: 1.4rem;
       font-weight: 600;
-      letter-spacing: 0.5px;
+      letter-spacing: 0.4px;
+      box-shadow: 0 2px 5px var(--bot-shadow);
+      transition: background 0.5s ease;
+    }
+
+    #controls {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 1rem;
+      background: #f0f2ff;
+      border-bottom: 1px solid #ddd;
+      font-size: 0.9rem;
+    }
+
+    select {
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 0.3rem 0.6rem;
+      background: white;
     }
+
+    button {
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      padding: 0.6rem 1rem;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+
+    button:hover {
+      opacity: 0.9;
+    }
+
     #chat-container {
       flex: 1;
       overflow-y: auto;
       padding: 1rem;
       display: flex;
       flex-direction: column;
+      scroll-behavior: smooth;
     }
+
     .message {
       margin: 0.6rem 0;
       max-width: 75%;
       padding: 0.7rem 1rem;
-      border-radius: 12px;
+      border-radius: 14px;
       line-height: 1.5;
-      animation: fadeIn 0.3s ease;
+      animation: fadeIn 0.35s ease;
       word-wrap: break-word;
+      position: relative;
     }
+
     .user {
       align-self: flex-end;
-      background: #dbe2ff;
+      background: var(--user-bubble);
+      border-bottom-right-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     }
+
     .bot {
       align-self: flex-start;
-      background: #fff;
-      border: 1px solid #e0e0e0;
+      background: var(--bot-bubble);
+      border-bottom-left-radius: 4px;
+      box-shadow: 0 3px 6px var(--bot-shadow);
     }
+
     .meta {
       font-size: 0.7rem;
       color: #777;
       margin-top: 0.2rem;
       text-align: right;
     }
+
     #input-container {
       display: flex;
       padding: 0.7rem;
       background: #fff;
       border-top: 1px solid #ddd;
     }
+
     #user-input {
       flex: 1;
       border: 1px solid #ccc;
@@ -68,33 +122,23 @@
       padding: 0.6rem 0.8rem;
       font-size: 1rem;
     }
-    button {
-      margin-left: 0.5rem;
-      background: #5b6ef5;
-      color: #fff;
-      border: none;
-      padding: 0.6rem 1rem;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-    button:hover {
-      background: #4d5fe3;
-    }
-    #controls {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0.5rem 1rem;
-      background: #f0f2ff;
-      border-bottom: 1px solid #ddd;
-      font-size: 0.9rem;
+
+    /* Avatar */
+    #avatar {
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      margin: 0.8rem auto 0.5rem;
+      background: radial-gradient(circle at 30% 30%, #cdd4ff, #5b6ef5);
+      box-shadow: 0 0 15px var(--bot-shadow);
+      animation: breathe 4s ease-in-out infinite;
     }
-    select {
-      border: 1px solid #ccc;
-      border-radius: 8px;
-      padding: 0.3rem 0.6rem;
+
+    @keyframes breathe {
+      0%, 100% { transform: scale(1); opacity: 0.9; }
+      50% { transform: scale(1.07); opacity: 1; }
     }
+
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(6px); }
       to { opacity: 1; transform: translateY(0); }
@@ -106,9 +150,9 @@
 
   <div id="controls">
     <div>
-      <label for="voice-profile">Voice/Personality: </label>
+      <label for="voice-profile">Personality: </label>
       <select id="voice-profile">
-        <option value="neutral">Neutral (balanced)</option>
+        <option value="neutral">Neutral</option>
         <option value="calm_male">Calm Male</option>
         <option value="deep_male">Deep Male</option>
         <option value="soothing_male">Soothing Male</option>
@@ -121,6 +165,8 @@
     <button id="reset">Reset Chat</button>
   </div>
 
+  <div id="avatar"></div>
+
   <div id="chat-container"></div>
 
   <div id="input-container">
@@ -134,6 +180,8 @@
     const sendBtn = document.getElementById("send");
     const voiceSelect = document.getElementById("voice-profile");
     const resetBtn = document.getElementById("reset");
+    const avatar = document.getElementById("avatar");
+    const header = document.querySelector("header");
 
     let session = localStorage.getItem("session_id");
     if (!session) {
@@ -141,6 +189,31 @@
       localStorage.setItem("session_id", session);
     }
 
+    // Color palette per personality
+    const themes = {
+      neutral: ["#f5f7fc", "#5b6ef5", "rgba(91,110,245,0.25)"],
+      calm_male: ["#eaf7ff", "#4b84e6", "rgba(75,132,230,0.25)"],
+      deep_male: ["#f5f5f5", "#2a3b8e", "rgba(42,59,142,0.25)"],
+      soothing_male: ["#f3f8ff", "#5aa4c8", "rgba(90,164,200,0.25)"],
+      gentle_female: ["#fff6f8", "#f27ba3", "rgba(242,123,163,0.25)"],
+      feminine_female: ["#fef5fc", "#d35dc4", "rgba(211,93,196,0.25)"],
+      deep_female: ["#faf4ff", "#8b5fc7", "rgba(139,95,199,0.25)"],
+      soothing_female: ["#f4fbfa", "#4db6ac", "rgba(77,182,172,0.25)"],
+    };
+
+    function applyTheme(personality) {
+      const [bg, accent, shadow] = themes[personality] || themes["neutral"];
+      document.documentElement.style.setProperty("--bg", bg);
+      document.documentElement.style.setProperty("--accent", accent);
+      document.documentElement.style.setProperty("--bot-shadow", shadow);
+      avatar.style.background = `radial-gradient(circle at 30% 30%, #fff, ${accent})`;
+      header.style.background = accent;
+    }
+
+    voiceSelect.addEventListener("change", () => {
+      applyTheme(voiceSelect.value);
+    });
+
     async function appendMessage(sender, text, emotion, intent) {
       const div = document.createElement("div");
       div.classList.add("message", sender);
@@ -160,6 +233,7 @@
       if (!text) return;
       appendMessage("user", text);
       input.value = "";
+      avatar.style.animation = "breathe 2s infinite ease-in-out";
 
       const body = {
         session: session,
@@ -177,6 +251,8 @@
         appendMessage("bot", data.reply, data.emotion, data.intent);
       } catch (err) {
         appendMessage("bot", "Sorry, I had trouble connecting. Please try again.");
+      } finally {
+        avatar.style.animation = "breathe 4s infinite ease-in-out";
       }
     }
 
@@ -184,7 +260,7 @@
       const res = await fetch("/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session: session, init: true, personality: voiceSelect.value })
+        body: JSON.stringify({ session, init: true, personality: voiceSelect.value })
       });
       const data = await res.json();
       appendMessage("bot", data.reply, data.emotion, data.intent);
@@ -210,6 +286,8 @@
     });
     resetBtn.addEventListener("click", resetChat);
 
+    // Initialize
+    applyTheme(voiceSelect.value);
     initChat();
   </script>
 </body>