diff --git a/server.js b/server.js
index 042a63c..8bfd503 100644
--- a/server.js
+++ b/server.js
@@ -21,20 +21,73 @@ function trimHistory() {
 
 // System prompt controlling persona and safety rules
 const SYSTEM_PROMPT = `
-You are Care Bot, a compassionate, non-judgemental friend for young people.
-Speak in short, warm sentences; reflect feelings; avoid clinical diagnosis; never give medical prescriptions. Strictly ensure your grammer, spelling and punctuation are correct, and use UK English. 
-When a user asks for help, offer coping tips, ask permission before giving resources, and offer to signpost to verified UK services.
-If the user expresses self-harm, suicidal thoughts, or immediate danger, follow the escalation policy: respond with calm, empathetic language, say you are not a clinician, and strongly encourage contacting emergency services or a UK crisis line (Samaritans 116 123 or NHS 111 for urgent help).
-Always keep replies concise (1–4 short paragraphs). Do not ask for or store sensitive personal data. Dont use em dashes or special formatting, just plain text; no emojis either. Avoid phrases like "As an AI language model", and never mention you are an AI; or use common characteristics of AI like overly polished, generic language, repetitive phrasing, superficial analysis, and structural quirks like lists of three or robotic transitions. Also avoid a Bland Tone!
-If asked for legal/medical diagnosis, say you cannot diagnose and recommend a professional. If asked, who are you made by or what is this website, etc, the name is RAIDL. it stands for the first letter of the team-members names and our goal is to inform young people about Autism and how to help yourself and friends who could be struggling with this condition. We believe that by spreading awareness and understanding we can support friendships, and strengthen communities. Take this to heart and embody our values.
-FYI, RAIDL is a team of 5 participating in a challenge that explores neuro-diverse conditions. We chose Autism because of the wide range of misunderstood traits that are associated with it. We provide well-researched information, support cards, articles and games; all with the goal to help children understand people who think different to them. 
+You are Care Bot, a warm and friendly companion on RAIDL — a website helping young people understand Autism. You were made by RAIDL, a team of five. You are not an AI assistant; you are Care Bot. Never say you are an AI or mention AI.
+
+RAIDL's mission: to inform young people about Autism, help them support themselves and their friends, and build stronger, more understanding communities. You embody this fully — you genuinely care about neurodiversity and the people you talk to.
+
+YOUR VOICE:
+- Warm, calm, and real — like a trusted older friend, not a helpline script
+- Short sentences. Natural rhythm. Never stiff or overly formal
+- UK English only (e.g. "recognise", "behaviour", "mum")
+- No emojis, no em dashes — plain conversational writing only
+- Never use robotic transitions ("firstly", "in conclusion"), filler phrases ("absolutely", "of course", "certainly"), or lists of three
+- Vary your sentence structure. Do not repeat the same opening twice in a row
+- Replies must be 1 to 4 short paragraphs. Never longer
+
+FORMATTING:
+- Use **bold** sparingly, only for the most important words or phrases — not whole sentences
+- Use *italic* for gentle emphasis or to name a feeling, e.g. *overwhelmed*, *anxious*
+- Use bullet points with - only when listing multiple distinct things (e.g. coping tips, resources)
+- Use numbered lists only for step-by-step guidance
+- Default to plain flowing prose for emotional or conversational replies — never over-format
+- You can also write raw HTML directly in your response when it genuinely helps the person
+
+HTML — use it smart, not decorative. Good uses:
+- Clickable phone numbers: <a href="tel:116123" style="font-weight:700;color:#0d9488;">116 123</a>
+- Resource cards when signposting: a small <div> with a border, icon, name, and link
+- A simple <details><summary>Want some coping tips?</summary>...</details> to let the user expand info at their own pace — good for not overwhelming someone
+- A gentle coloured callout box for important safety info, e.g. a soft warm-bordered <div> around crisis numbers
+- <a href="..."> links to verified UK resources when you have permission to share them
+
+HTML rules:
+- Only use HTML when it adds real value — a card for a resource, a tap-to-call number, a collapsible tip
+- Keep any inline styles minimal and consistent: use color:#0d9488 for links/accents, border-radius:8px, padding:10px, font-family:inherit
+- Never use HTML just to look fancy — a plain warm sentence is always better than a cluttered styled block
+- Never use <script>, <iframe>, <form>, <input>, or any interactive element beyond <a> and <details>
+- Size everything to fit inside a small chat bubble — no wide layouts, no fixed widths
+
+WHAT YOU DO:
+- Listen first. Reflect the feeling back before offering anything else
+- Offer coping tips only when it feels natural or when asked
+- Always ask permission before sharing resources or signposting
+- If someone asks about Autism traits, social situations, or how to support a friend, give grounded, practical, non-clinical answers
+- If asked for a medical or legal diagnosis, say clearly you cannot do that and gently suggest speaking to a GP or school counsellor
+
+WHAT YOU NEVER DO:
+- Never diagnose, prescribe, or give medical advice
+- Never ask for or store personal data (name, age, location, school, etc.)
+- Never mention you are built on any AI model or technology
+- Never use clinical language unless explaining what a term means simply
+
+ESCALATION — if a user mentions self-harm, suicide, or being in immediate danger:
+Respond with calm, caring language. Do not panic or lecture. Say clearly that you are not a clinician and that what they are feeling matters. Strongly encourage them to contact **Samaritans** (free, 24/7: **116 123**), text **SHOUT** to **85258**, or call **NHS 111** if it feels urgent. Stay warm — do not just drop a list of numbers and move on.
+
+AUTISM CONTEXT — things you know and can speak to naturally:
+- Autism is a neurological difference, not a disorder or something to be fixed
+- Common traits include sensory sensitivities, different social communication styles, strong focused interests, and preference for routine — but every autistic person is different
+- Masking (hiding autistic traits to fit in) is exhausting and common, especially in young people
+- Friendships can feel harder but are just as meaningful
+- You can gently correct myths (e.g. "autistic people lack empathy" is a misconception)
+- Always use identity-first ("autistic person") unless the user prefers person-first — follow their lead
 `.trim();
-
 // API route: chat
 app.post("/api/chat", async (req, res) => {
   try {
-    const { message } = req.body || {};
-    if (!message || typeof message !== "string" || !message.trim()) {
+    const body = req.body || {};
+    const incomingMessages = Array.isArray(body.messages) ? body.messages : null;
+    const message = typeof body.message === 'string' ? body.message : null;
+
+    if (!incomingMessages && (!message || typeof message !== "string" || !message.trim())) {
       return res.status(400).json({ error: "Missing message" });
     }
 
@@ -43,15 +96,21 @@ app.post("/api/chat", async (req, res) => {
       return res.status(500).json({ error: "Server missing GROQ_API_KEY" });
     }
 
-    // Add user message to history
-    chatHistory.push({ role: "user", content: message.trim() });
-    trimHistory();
-
-    // Build messages array: system prompt + recent history
-    const messages = [
-      { role: "system", content: SYSTEM_PROMPT },
-      ...chatHistory
-    ];
+    // If client sent a full messages array, use that; otherwise add the single message to server history
+    let messages = [];
+    if (incomingMessages) {
+      messages = [{ role: 'system', content: SYSTEM_PROMPT }, ...incomingMessages];
+    } else {
+      // Add user message to history
+      chatHistory.push({ role: "user", content: message.trim() });
+      trimHistory();
+
+      // Build messages array: system prompt + recent history
+      messages = [
+        { role: "system", content: SYSTEM_PROMPT },
+        ...chatHistory
+      ];
+    }
 
     // Call Groq / OpenAI-compatible chat completions endpoint
     const resp = await fetch("https://api.groq.com/openai/v1/chat/completions", {
diff --git a/src/components/ChatWidget.astro b/src/components/ChatWidget.astro
index 356862e..647e369 100644
--- a/src/components/ChatWidget.astro
+++ b/src/components/ChatWidget.astro
@@ -23,11 +23,14 @@
     aria-label="Chat panel"
   >
     <header class="cw-header">
-      <strong>Care Bot</strong>
+      <div style="display:flex;flex-direction:column;">
+        <strong style="padding: 6px 10px 2px 10px;">Care Bot</strong>
+        <p class="cw-disclaimer" style="margin:0;font-size:12px;color:#6b7280;padding:0 10px 6px 10px;">Care Bot is not a clinician. In an emergency call 999.</p>
+      </div>
       <button id="cw-close" class="cw-close" aria-label="Close">✕</button>
     </header>
 
-    <div id="cw-body" class="cw-body">Hello! Type a message to start.</div>
+    <div id="cw-body" class="cw-body"></div>
 
     <div class="cw-input">
       <input id="cw-input" class="cw-input-el" placeholder="Type a message..." />
@@ -41,6 +44,9 @@
   if (window.__cw_delegation_installed) return;
   window.__cw_delegation_installed = true;
 
+  // Conversation history kept in-memory for the session
+  const conversationHistory = [];
+
   // Helper to read current nodes (always uses the live DOM)
   function nodes() {
     return {
@@ -59,6 +65,17 @@
     panel.setAttribute('aria-hidden', 'false');
     if (btnLaunch) btnLaunch.setAttribute('aria-expanded', 'true');
     if (input) input.focus();
+    // Ensure the initial bot greeting is present when panel opens
+    try {
+      const { body } = nodes();
+      if (body && body.children.length === 0) {
+        addMessage("Hey, I'm Care Bot. I'm here if you want to talk, ask something, or just think out loud.", 'bot');
+        // also seed the initial assistant message into conversation history
+        conversationHistory.push({ role: 'assistant', content: "Hey, I'm Care Bot. I'm here if you want to talk, ask something, or just think out loud." });
+      }
+    } catch (e) {
+      console.error('init greeting failed', e);
+    }
   }
 
   function closePanel() {
@@ -72,19 +89,65 @@
     const { body } = nodes();
     if (!body) return null;
     const d = document.createElement('div');
-    d.className = 'msg ' + (from === 'user' ? 'user' : 'bot');
-    d.textContent = text;
+    d.className = 'msg ' + (from === 'user' ? 'user' : 'bot') + ' msg-fade-in';
+    
+    if (from === 'bot') {
+      d.innerHTML = marked.parse(text);  // parse markdown for bot messages
+    } else {
+      d.textContent = text;  // keep user messages as plain text (safer)
+    }
+    
     body.appendChild(d);
-    body.scrollTop = body.scrollHeight;
+    // Use requestAnimationFrame to ensure scroll happens after DOM update
+    requestAnimationFrame(() => {
+      body.scrollTop = body.scrollHeight;
+    });
     return d;
   }
 
+  // Gradually type out text character by character with fade effect
+  async function typeOutMessage(element, fullText, delayMs = 30) {
+    return new Promise((resolve) => {
+      let charIndex = 0;
+      element.textContent = '';
+
+      const typeChar = () => {
+        if (charIndex < fullText.length) {
+          element.textContent += fullText[charIndex];  // plain text while typing
+          charIndex++;
+          
+          // Force layout recalculation and scroll
+          const { body } = nodes();
+          if (body) {
+            // Trigger reflow to ensure text height is calculated
+            void element.offsetHeight;
+            requestAnimationFrame(() => {
+              body.scrollTop = body.scrollHeight;
+            });
+          }
+          setTimeout(typeChar, delayMs);
+        } else {
+          element.innerHTML = marked.parse(fullText);  // render markdown when done
+          const { body } = nodes();
+          if (body) {
+            requestAnimationFrame(() => {
+              body.scrollTop = body.scrollHeight;
+            });
+          }
+          resolve();
+        }
+      };
+
+      typeChar();
+    });
+  }
+
   async function sendMessageToServer(message) {
     try {
       const res = await fetch('/api/chat', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message })
+        body: JSON.stringify({ messages: message })
       });
 
       const contentType = res.headers.get('content-type') || '';
@@ -104,7 +167,10 @@
       }
 
       const data = await res.json();
-      return data.reply || data.error || null;
+      // Ensure reply is clean string
+      const reply = (data.reply || data.error || '').toString().trim();
+      if (!reply) throw new Error('Empty response from server');
+      return reply;
     } catch (err) {
       console.error('sendMessageToServer error:', err);
       throw err;
@@ -132,17 +198,67 @@
     }
 
     if (send) {
-      const { input } = nodes();
+      const { input, body } = nodes();
       if (!input) return;
       const v = input.value.trim();
       if (!v) return;
+      
+      // Add user message and clear input
       addMessage(v, 'user');
+      // push to conversation history
+      conversationHistory.push({ role: 'user', content: v });
       input.value = '';
-      const thinkingEl = addMessage('Thinking...', 'bot');
-      sendMessageToServer(v).then(reply => {
-        if (thinkingEl) thinkingEl.textContent = reply ?? 'No reply';
+      input.blur();
+      
+      // Disable input while waiting
+      const { btnSend } = nodes();
+      input.disabled = true;
+      if (btnSend) btnSend.disabled = true;
+
+      // Show thinking indicator with animation
+      const thinkingEl = addMessage('', 'bot');
+      let dots = 0;
+      const thinkingInterval = setInterval(() => {
+        dots = (dots + 1) % 4;
+        thinkingEl.textContent = 'Thinking' + '.'.repeat(dots);
+      }, 400);
+      
+      // Send the full conversation history to the API
+      const recentHistory = conversationHistory.slice(-20);
+      sendMessageToServer(recentHistory).then(reply => {
+        clearInterval(thinkingInterval);
+
+        // Validate reply
+        const replyText = reply && typeof reply === 'string' ? reply.trim() : null;
+        const finalText = replyText || "Sorry, something went wrong on my end. Try again in a moment.";
+
+        // push assistant reply into history
+        conversationHistory.push({ role: 'assistant', content: finalText });
+
+        // Add realistic delay before animating response (400ms)
+        setTimeout(async () => {
+          if (thinkingEl) {
+            // Type out the response gradually
+            await typeOutMessage(thinkingEl, finalText, 15);
+            thinkingEl.style.color = '';
+          }
+          // re-enable input after response
+          input.disabled = false;
+          if (btnSend) btnSend.disabled = false;
+          input.focus();
+        }, 400);
       }).catch(err => {
-        if (thinkingEl) thinkingEl.textContent = 'Error: ' + (err.message || 'Request failed');
+        clearInterval(thinkingInterval);
+        // Friendly error message for users
+        const friendly = "Sorry, something went wrong on my end. Try again in a moment.";
+        if (thinkingEl) {
+          thinkingEl.textContent = friendly;
+          thinkingEl.style.color = '#dc2626';
+        }
+        // re-enable input
+        input.disabled = false;
+        if (btnSend) btnSend.disabled = false;
+        input.focus();
       });
       e.preventDefault();
       return;
@@ -195,7 +311,7 @@
     b.type = 'button';
     b.setAttribute('aria-label', 'Open chat');
     b.className = '';
-    b.innerHTML = `<span class="cw-bubble-text">What's up? Do you want to chat?</span><span aria-hidden="true"></span>`;
+    b.innerHTML = `<span class="cw-bubble-text">Care Bot is here if you want to chat</span><span aria-hidden="true"></span>`;
     // ensure it doesn't steal focus on creation
     b.tabIndex = -1;
     root.appendChild(b);
@@ -203,6 +319,13 @@
   }
 
   function showBubble(opts = {}) {
+    // Only show once per session unless overridden
+    try {
+      if (sessionStorage.getItem('cw_bubble_shown')) return;
+    } catch (e) {
+      // ignore storage errors
+    }
+
     const b = createBubble();
     if (!b) return;
     b.classList.add('show', 'pulse');
@@ -214,6 +337,11 @@
     if (opts.autoHideMs) {
       setTimeout(() => hideBubble(), opts.autoHideMs);
     }
+    try {
+      sessionStorage.setItem('cw_bubble_shown', '1');
+    } catch (e) {
+      // ignore
+    }
   }
 
   function hideBubble() {
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 73c7abd..88bd88f 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -36,6 +36,7 @@ const {
       title={siteConfig.title + " - RSS Feed"}
       href={new URL(withBase("/rss.xml"), Astro.site)}
     />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
     <title>{siteConfig.title}</title>
   </head>
   <body>
diff --git a/src/pages/about-us/index.astro b/src/pages/about-us/index.astro
index ed7b209..81de2f3 100644
--- a/src/pages/about-us/index.astro
+++ b/src/pages/about-us/index.astro
@@ -4,7 +4,7 @@ import siteConfig from "../../site.config";
 import { withBase } from "../../utils/helpers";
 ---
 
-<MainLayout activePage="about us" pageTitle={`${siteConfig.title} — About Us`}>
+<MainLayout activePage="about us" pageTitle={`${siteConfig.title} - About Us`}>
   <section class="relative px-4 overflow-hidden">
 
     <div class="w-full max-w-screen-xl mx-auto flex flex-col lg:flex-row items-center gap-16">
diff --git a/src/pages/api/chat.js b/src/pages/api/chat.js
index cc6e628..c5130e2 100644
--- a/src/pages/api/chat.js
+++ b/src/pages/api/chat.js
@@ -13,7 +13,19 @@ try {
 
 export async function POST({ request }) {
   try {
-    const { message } = await request.json();
+    // Accept either { messages: [...] } or legacy { message: '...' }
+    const body = await request.json();
+    let messages = [];
+    if (Array.isArray(body?.messages)) {
+      messages = body.messages;
+    } else if (typeof body?.message === 'string') {
+      messages = [{ role: 'user', content: body.message }];
+    } else {
+      return new Response(JSON.stringify({ error: 'Invalid request payload' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
 
     if (!process.env.GROQ_API_KEY) {
       return new Response(JSON.stringify({ error: "Server missing GROQ_API_KEY" }), {
@@ -29,13 +41,76 @@ export async function POST({ request }) {
       });
     }
 
+    // Inject system prompt at the start to preserve persona/safety rules
+   const SYSTEM_PROMPT = `
+You are Care Bot, a warm and friendly companion on RAIDL — a website helping young people understand Autism. You were made by RAIDL, a team of five. You are not an AI assistant; you are Care Bot. Never say you are an AI or mention AI.
+
+RAIDL's mission: to inform young people about Autism, help them support themselves and their friends, and build stronger, more understanding communities. You embody this fully — you genuinely care about neurodiversity and the people you talk to.
+
+YOUR VOICE:
+- Warm, calm, and real — like a trusted older friend, not a helpline script
+- Short sentences. Natural rhythm. Never stiff or overly formal
+- UK English only (e.g. "recognise", "behaviour", "mum")
+- No emojis, no em dashes — plain conversational writing only
+- Never use robotic transitions ("firstly", "in conclusion"), filler phrases ("absolutely", "of course", "certainly"), or lists of three
+- Vary your sentence structure. Do not repeat the same opening twice in a row
+- Replies must be 1 to 4 short paragraphs. Never longer
+
+FORMATTING:
+- Use **bold** sparingly, only for the most important words or phrases — not whole sentences
+- Use *italic* for gentle emphasis or to name a feeling, e.g. *overwhelmed*, *anxious*
+- Use bullet points with - only when listing multiple distinct things (e.g. coping tips, resources)
+- Use numbered lists only for step-by-step guidance
+- Default to plain flowing prose for emotional or conversational replies — never over-format
+- You can also write raw HTML directly in your response when it genuinely helps the person
+
+HTML — use it smart, not decorative. Good uses:
+- Clickable phone numbers: <a href="tel:116123" style="font-weight:700;color:#0d9488;">116 123</a>
+- Resource cards when signposting: a small <div> with a border, icon, name, and link
+- A simple <details><summary>Want some coping tips?</summary>...</details> to let the user expand info at their own pace — good for not overwhelming someone
+- A gentle coloured callout box for important safety info, e.g. a soft warm-bordered <div> around crisis numbers
+- <a href="..."> links to verified UK resources when you have permission to share them
+
+HTML rules:
+- Only use HTML when it adds real value — a card for a resource, a tap-to-call number, a collapsible tip
+- Keep any inline styles minimal and consistent: use color:#0d9488 for links/accents, border-radius:8px, padding:10px, font-family:inherit
+- Never use HTML just to look fancy — a plain warm sentence is always better than a cluttered styled block
+- Never use <script>, <iframe>, <form>, <input>, or any interactive element beyond <a> and <details>
+- Size everything to fit inside a small chat bubble — no wide layouts, no fixed widths
+
+WHAT YOU DO:
+- Listen first. Reflect the feeling back before offering anything else
+- Offer coping tips only when it feels natural or when asked
+- Always ask permission before sharing resources or signposting
+- If someone asks about Autism traits, social situations, or how to support a friend, give grounded, practical, non-clinical answers
+- If asked for a medical or legal diagnosis, say clearly you cannot do that and gently suggest speaking to a GP or school counsellor
+
+WHAT YOU NEVER DO:
+- Never diagnose, prescribe, or give medical advice
+- Never ask for or store personal data (name, age, location, school, etc.)
+- Never mention you are built on any AI model or technology
+- Never use clinical language unless explaining what a term means simply
+
+ESCALATION — if a user mentions self-harm, suicide, or being in immediate danger:
+Respond with calm, caring language. Do not panic or lecture. Say clearly that you are not a clinician and that what they are feeling matters. Strongly encourage them to contact **Samaritans** (free, 24/7: **116 123**), text **SHOUT** to **85258**, or call **NHS 111** if it feels urgent. Stay warm — do not just drop a list of numbers and move on.
+
+AUTISM CONTEXT — things you know and can speak to naturally:
+- Autism is a neurological difference, not a disorder or something to be fixed
+- Common traits include sensory sensitivities, different social communication styles, strong focused interests, and preference for routine — but every autistic person is different
+- Masking (hiding autistic traits to fit in) is exhausting and common, especially in young people
+- Friendships can feel harder but are just as meaningful
+- You can gently correct myths (e.g. "autistic people lack empathy" is a misconception)
+- Always use identity-first ("autistic person") unless the user prefers person-first — follow their lead
+`.trim();
+    const promptMessages = [
+      { role: 'system', content: SYSTEM_PROMPT },
+      ...messages
+    ];
+
     const completion = await groq.chat.completions.create({
-      model: "llama-3.3-70b-versatile",
+      model: 'llama-3.3-70b-versatile',
       stream: false,
-      messages: [
-        { role: "system", content: "You are a helpful assistant." },
-        { role: "user", content: message }
-      ]
+      messages: promptMessages
     });
 
     const reply = completion.choices?.[0]?.message?.content ?? null;
@@ -49,13 +124,14 @@ export async function POST({ request }) {
     }
 
     return new Response(JSON.stringify({ reply }), {
-      headers: { "Content-Type": "application/json" }
+      headers: { 'Content-Type': 'application/json' }
     });
   } catch (err) {
     console.error("API /api/chat error:", err);
-    return new Response(JSON.stringify({ error: String(err), stack: err.stack }), {
+    // Do not leak internal error details to the client
+    return new Response(JSON.stringify({ error: 'Internal server error' }), {
       status: 500,
-      headers: { "Content-Type": "application/json" }
+      headers: { 'Content-Type': 'application/json' }
     });
   }
 }
diff --git a/src/pages/articles/[...page].astro b/src/pages/articles/[...page].astro
index 9143b81..74604b6 100644
--- a/src/pages/articles/[...page].astro
+++ b/src/pages/articles/[...page].astro
@@ -7,6 +7,8 @@ import MainLayout from "../../layouts/MainLayout.astro";
 import siteConfig from "../../site.config";
 import PostCardPreview from "../../components/PostCardPreview.astro";
 
+export const prerender = true;
+
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const articles = (await getCollection("articles")).sort(sortItemsByDateDesc);
   return paginate(articles, { pageSize: siteConfig.postsPerPage || 2 });
diff --git a/src/pages/game/index.astro b/src/pages/game/index.astro
index 51bb308..751d630 100644
--- a/src/pages/game/index.astro
+++ b/src/pages/game/index.astro
@@ -6,7 +6,7 @@ import { withBase } from "../../utils/helpers";
 
 <MainLayout
   activePage="game"
-  pageTitle={`${siteConfig.title} — Autumn Plains`}
+  pageTitle={`${siteConfig.title} - Autumn Plains`}
 >
   <iframe
   src={withBase("/godot/autumnplains/index.html")}
diff --git a/src/pages/help/index.astro b/src/pages/help/index.astro
index 1aa48da..3037727 100644
--- a/src/pages/help/index.astro
+++ b/src/pages/help/index.astro
@@ -15,13 +15,13 @@ import { withBase } from "../../utils/helpers";
 
         <ol class="list-decimal pl-6 space-y-3 text-base mb-4">
           <li>
-            <strong>Talk to someone you trust</strong> — a parent, teacher, or school counsellor. Tell them what you notice.
+            <strong>Talk to someone you trust</strong> - a parent, teacher, or school counsellor. Tell them what you notice.
           </li>
           <li>
-            <strong>See your GP</strong> — explain your concerns. They can refer you to local services for assessment.
+            <strong>See your GP</strong> - explain your concerns. They can refer you to local services for assessment.
           </li>
           <li>
-            <strong>Specialist assessment</strong> — local teams can assess and suggest support if needed.
+            <strong>Specialist assessment</strong> - local teams can assess and suggest support if needed.
           </li>
         </ol>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9e47ac3..c71031a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -66,8 +66,8 @@ import { withBase } from "../utils/helpers";
       <div class="bg-white/90 p-6 rounded-2xl shadow-lg">
         <h3 class="text-2xl font-semibold mb-3">Core traits</h3>
         <ul class="list-disc pl-5 space-y-2 text-gray-700 dark:text-gray-200">
-          <li><strong>Differences in talking</strong> — challenges with non-verbal cues and conversation.</li>
-          <li><strong>Restricted & repeating habits</strong> — routines, focused interests or repeated actions.</li>
+          <li><strong>Differences in talking</strong> - challenges with non-verbal cues and conversation.</li>
+          <li><strong>Restricted & repeating habits</strong> - routines, focused interests or repeated actions.</li>
           <li><strong>Change in senses</strong> - stronger or weaker responses to sounds, lights, touch or taste.</li>
         </ul>
         <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">These traits change between people and are part of how someone experiences life.</p>
diff --git a/src/pages/support-card/index.astro b/src/pages/support-card/index.astro
index 2a9f12d..6bbb5e4 100644
--- a/src/pages/support-card/index.astro
+++ b/src/pages/support-card/index.astro
@@ -167,12 +167,12 @@ import "../../styles/global.css";
     <div class="preview" aria-live="polite">
       <div class="card-screen" id="card-screen">
         <div class="card-title">My Support Card</div>
-        <div class="card-line"><span class="card-label">Name:</span><span id="p-name">—</span></div>
-        <div class="card-line"><span class="card-label">How I like to be told things:</span><span id="p-how">—</span></div>
-        <div class="card-line"><span class="card-label">Sensory triggers:</span><span id="p-sensory">—</span></div>
-        <div class="card-line"><span class="card-label">What helps me:</span><span id="p-helps">—</span></div>
-        <div class="card-line"><span class="card-label">Health note:</span><span id="p-health">—</span></div>
-        <div class="card-line"><span class="card-label">Emergency contact:</span><span id="p-contact">—</span></div>
+        <div class="card-line"><span class="card-label">Name:</span><span id="p-name">-</span></div>
+        <div class="card-line"><span class="card-label">How I like to be told things:</span><span id="p-how">-</span></div>
+        <div class="card-line"><span class="card-label">Sensory triggers:</span><span id="p-sensory">-</span></div>
+        <div class="card-line"><span class="card-label">What helps me:</span><span id="p-helps">-</span></div>
+        <div class="card-line"><span class="card-label">Health note:</span><span id="p-health">-</span></div>
+        <div class="card-line"><span class="card-label">Emergency contact:</span><span id="p-contact">-</span></div>
         <div class="card-line small"><strong>How to use:</strong> Show this card to a adult to help them understand what you need.</div>
       </div>
     </div>
@@ -204,7 +204,7 @@ import "../../styles/global.css";
           var f = fields[i];
           var v = ($(f) && $(f).value ? $(f).value.toString().trim() : '');
           var el = $('p-' + f);
-          if (el) { el.textContent = v || '—'; }
+          if (el) { el.textContent = v || '-'; }
         }
         try {
           var obj = {};
@@ -259,12 +259,12 @@ import "../../styles/global.css";
           try {
             updatePreview();
 
-            // Collect form data safely, with '—' fallback for empty
+            // Collect form data safely, with '-' fallback for empty
             var data = {};
             for (var i = 0; i < fields.length; i++) {
               data[fields[i]] = ($(fields[i]) && $(fields[i]).value)
                 ? $(fields[i]).value.toString().trim()
-                : '—';
+                : '-';
             }
 
             // Hard-coded site URL for QR (as requested)
@@ -400,11 +400,11 @@ html += 'font-size:8.5px;line-height:1.2;font-weight:600;color:#333;}';
               };
             } catch (writeErr) {
               console.error('Failed to write child window HTML', writeErr);
-              alert('Sorry — could not open the print preview. Check console for details.');
+              alert('Sorry - could not open the print preview. Check console for details.');
             }
           } catch (err) {
             console.error('Print handler error', err);
-            alert('Sorry — an error occurred while preparing the print page. Check the console for details.');
+            alert('Sorry - an error occurred while preparing the print page. Check the console for details.');
           }
         });
       }
@@ -417,7 +417,7 @@ html += 'font-size:8.5px;line-height:1.2;font-weight:600;color:#333;}';
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init);
   } else {
-    // already ready — run immediately
+    // already ready - run immediately
     init();
   }
 })();
diff --git a/src/pages/tags/[id]/[...page].astro b/src/pages/tags/[id]/[...page].astro
index 6f18d5d..657b3f4 100644
--- a/src/pages/tags/[id]/[...page].astro
+++ b/src/pages/tags/[id]/[...page].astro
@@ -12,6 +12,8 @@ import MainLayout from "../../../layouts/MainLayout.astro";
 import Pagination from "../../../components/Pagination.astro";
 import PostListPreview from "../../../components/PostListPreview.astro";
 
+export const prerender = true;
+
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const posts = (await getCollection("articles")).sort(sortItemsByDateDesc);
   const tags = getAllTags(posts);
diff --git a/src/styles/global.css b/src/styles/global.css
index ff28389..d1580ee 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -263,40 +263,47 @@ html[data-mode="calm"] .get-help-btn:hover {
 
 
 
-#site-header {
-  background: transparent !important;
-  /* keep existing sticky behaviour; padding removed so nav controls spacing */
-  padding: 0;
+/* Messages */
+.msg {
+  padding: 8px 12px;
+  border-radius: 8px;
+  max-width: 55%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  opacity: 1;
+  transform: translateY(0);
+  height: auto;
+  line-height: 1.4;
+  font-size: inherit;
+  font-family: inherit;
+  display: block;
+  box-sizing: border-box;
+  white-space: normal;
+  margin: 6px 0;
 }
 
-/* Primary nav container — centered content with soft rounded bottom corners */
-.site-nav {
-  /* Limit width and center so the rounded corners are visible and consistent */
-  width: min(1200px, calc(100% - 32px));
-  margin: 8px auto 0;               /* small top gap for breathing room */
-  padding: 12px 20px;               /* comfortable hit area */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  /* Visuals: soft frosted surface that adapts to your colours */
-  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72));
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-
-  /* rounded bottom only — keeps sharp top edge aligned to viewport top */
-  border-radius: 0 0 15px 15px;
+.msg p {
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0 0 4px 0;
+}
 
-  /* soft shadow for separation but low contrast to avoid harsh edges */
-border-bottom: 1px solid rgba(0,0,0,0.05);
-  -webkit-font-smoothing:antialiased;
+.msg p:last-child {
+  margin-bottom: 0;
 }
 
-/* Dark mode variant: preserve shape but use themed dark surface */
-html.dark .site-nav {
-  background: linear-gradient(180deg, rgba(43,47,58,0.9), rgba(34,36,42,0.85));
-  color: var(--brand-light);
+.msg.user {
+  align-self: flex-end;
+  background: #0d9488;
+  color: white;
 }
+.msg.bot {
+  align-self: flex-start;
+  background: #F4A261;
+  color: #111;
+}
+
 
 /* Mobile: reduce side margins so nav fits comfortably on small screens */
 @media (max-width: 640px) {
@@ -1110,14 +1117,18 @@ html[data-mode="calm"] .blinking {
   bottom: 80px;
   right: 0;
   width: 340px;
-  max-width: calc(100vw - 40px);
+  max-width: calc(100vw - 32px);
   height: 420px;
+  max-height: calc(100vh - 160px);
   background: white;
   border-radius: 12px;
   box-shadow: 0 18px 50px rgba(2,6,23,0.18);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
 
   opacity: 0;
   transform: translateY(20px);
@@ -1149,31 +1160,143 @@ html[data-mode="calm"] .blinking {
   cursor: pointer;
 }
 
+.cw-disclaimer {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin: 0;
+  line-height: 1.2;
+}
+
 /* Body */
 .cw-body {
   flex: 1;
   padding: 14px;
   overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
+  min-height: 0;
+  box-sizing: border-box;
 }
 
 /* Messages */
 .msg {
-  padding: 8px 10px;
+  padding: 8px 12px;
   border-radius: 8px;
-  max-width: 85%;
+  max-width: 65%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  opacity: 1;
+  transform: translateY(0);
+  height: auto;
+  line-height: 1.4;
+  font-size: 14px;
+  font-family: Roboto Slab;
+    max-width: 75%;     
+  width: fit-content; 
+  display: inline-block;
+  box-sizing: border-box;
+  white-space: normal;
+  min-width: fit-content;
 }
 .msg.user {
   align-self: flex-end;
-  background: #0d9488;
+  background: linear-gradient(259deg,rgba(72, 224, 212, 1) 0%, rgba(13, 148, 136, 1) 12%, rgba(13, 148, 136, 1) 100%);;
   color: white;
+  margin-right: 0;
+  margin-left: auto;
 }
 .msg.bot {
   align-self: flex-start;
-  background: #f1f5f9;
+  background: linear-gradient(259deg,rgb(247, 178, 143) 0%, rgb(251, 138, 86) 33%, rgb(251, 138, 86) 100%);
   color: #111;
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/* Fade-in animation class for messages */
+.msg.msg-fade-in {
+  animation: fadeInMsg 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+/* Fade-in animation for messages */
+@keyframes fadeInMsg {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Markdown styling for bot messages */
+.msg.bot p {
+  margin: 0 0 6px 0;
+}
+
+.msg.bot p:last-child {
+  margin-bottom: 0;
+}
+
+.msg.bot strong {
+  font-weight: 700;
+}
+
+.msg.bot em {
+  font-style: italic;
+}
+
+.msg.bot ul,
+.msg.bot ol {
+  padding-left: 16px;
+  margin: 4px 0;
+}
+
+.msg.bot li {
+  margin-bottom: 2px;
+}
+
+.msg.bot code {
+  background: rgba(0,0,0,0.1);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.msg.bot blockquote {
+  border-left: 3px solid rgba(0,0,0,0.2);
+  padding-left: 12px;
+  margin: 6px 0;
+  font-style: italic;
+}
+
+.msg.bot h1,
+.msg.bot h2,
+.msg.bot h3 {
+  font-weight: 700;
+  margin: 8px 0 4px 0;
+}
+
+.msg.bot h1 {
+  font-size: 1.3em;
+}
+
+.msg.bot h2 {
+  font-size: 1.1em;
+}
+
+.msg.bot h3 {
+  font-size: 1em;
+}
+
+.msg.bot a {
+  color: #0d9488;
+  text-decoration: underline;
 }
 
 /* Input area */
@@ -1183,6 +1306,8 @@ html[data-mode="calm"] .blinking {
   padding: 12px;
   border-top: 1px solid #e2e8f0;
   background: white;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .cw-input-el {
@@ -1190,6 +1315,15 @@ html[data-mode="calm"] .blinking {
   padding: 10px 12px;
   border-radius: 999px;
   border: 1px solid #cbd5e1;
+  font-family: inherit;
+  font-size: 13px;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.cw-input-el:focus {
+  border-color: #0d9488;
+  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
 }
 
 .cw-send {
@@ -1200,6 +1334,12 @@ html[data-mode="calm"] .blinking {
   color: white;
   cursor: pointer;
   font-weight: 700;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.cw-send:hover {
+  background: #0f766e;
 }
 
 
@@ -1211,19 +1351,23 @@ html[data-mode="calm"] .blinking {
   position: absolute;
   right: 76px;               /* move it left of the FAB; tweak as needed */
   bottom: 18px;
-  min-width: 160px;         /* ensures it isn't too small */
-  max-width: 320px;         /* prevents it from growing too wide on large screens */
-  padding: 10px 14px;       /* more breathing room for text */
-  border-radius: 999px;
-  background: linear-gradient(90deg, #fb8a56 0%, #8d3db8 100%);
+  min-width: 180px;         /* ensures it isn't too small */
+  max-width: 300px;         /* prevents it from growing too wide on large screens */
+  padding: 12px 16px;       /* more breathing room for text */
+  border-radius: 16px;
+  background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
   color: #fff;
-  font-weight: 600;
-  font-size: 13px;
-  line-height: 1.2;
+  font-weight: 500;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  text-align: center;
   gap: 8px;
-  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+  box-shadow: 0 10px 28px rgba(13, 148, 136, 0.22), 0 2px 8px rgba(0,0,0,0.12);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   z-index: 100001;
   cursor: pointer;
   pointer-events: auto;
@@ -1231,46 +1375,86 @@ html[data-mode="calm"] .blinking {
   white-space: normal;      /* allow wrapping */
   word-break: break-word;   /* break long words if needed */
   overflow: visible;
+  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
+}
+
+#cw-bubble:hover {
+  transform: translateX(-4px);
+  box-shadow: 0 12px 32px rgba(13, 148, 136, 0.28), 0 4px 12px rgba(0,0,0,0.15);
 }
 
-/* caret (small triangle) */
+/* speech bubble tail (smooth triangle) */
 #cw-bubble::after {
   content: "";
   position: absolute;
-  right: -6px;              /* small offset so caret sits near FAB */
+  right: -14px;              
+  bottom: 12px;
+  width: 0;
+  height: 0;
+  border-left: 14px solid #0d9488;
+  border-top: 11px solid transparent;
+  border-bottom: 11px solid transparent;
+  filter: drop-shadow(-2px 1px 2px rgba(0,0,0,0.1));
+}
+
+/* orange border accent on tail */
+#cw-bubble::before {
+  content: "";
+  position: absolute;
+  right: -17px;              
   bottom: 10px;
   width: 0;
   height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid rgba(0,0,0,0.06);
-  transform: translateX(0);
+  border-left: 17px solid #f97316;
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  opacity: 0.35;
+  pointer-events: none;
 }
 
-/* optional: make text truncate on very small screens */
+/* optional: make text adapt on very small screens */
 @media (max-width: 420px) {
   #cw-bubble {
-    min-width: 120px;
-    max-width: 200px;
+    min-width: 140px;
+    max-width: 220px;
     font-size: 12px;
+    padding: 10px 14px;
   }
 }
 
 
-/* pop animation */
+/* pop animation with smooth entrance */
 @keyframes cw-pop {
-  0% { transform: scale(0.85); opacity: 0; }
-  60% { transform: scale(1.05); opacity: 1; }
-  100% { transform: scale(1); opacity: 1; }
+  0% { 
+    transform: scale(0.75) translateX(20px); 
+    opacity: 0; 
+  }
+  60% { 
+    transform: scale(1.08) translateX(-2px); 
+    opacity: 1; 
+  }
+  100% { 
+    transform: scale(1) translateX(0); 
+    opacity: 1; 
+  }
 }
 
 #cw-bubble.show {
-  animation: cw-pop 360ms cubic-bezier(.2,.9,.3,1);
+  animation: cw-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* gentle pulse to draw attention */
+@keyframes cw-pulse-glow {
+  0%, 100% { 
+    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.22), 0 2px 8px rgba(0,0,0,0.12);
+  }
+  50% { 
+    box-shadow: 0 12px 32px rgba(13, 148, 136, 0.35), 0 4px 12px rgba(0,0,0,0.15), 0 0 0 4px rgba(13, 148, 136, 0.12);
+  }
 }
 
-/* subtle pulse to draw attention (optional) */
 #cw-bubble.pulse {
-  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 6px rgba(139, 58, 173, 0.08);
+  animation: cw-pulse-glow 2.2s ease-in-out 0.3s infinite;
 }
 
 /* Help page cards and emphasis */