Glass Chat Support Card

<div class="flex flex-col bg-white/10 backdrop-blur-xl rounded-2xl p-6 ring-1 ring-white/20 transition hover:-translate-y-1 hover:shadow-2xl shadow-lg max-h-[600px] text-white">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { font-family: 'Inter', 'Helvetica Neue', sans-serif; }
  </style>
  <div class="mb-4 flex items-center gap-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-md bg-white/10 backdrop-blur-md ring-1 ring-white/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
      </svg>
    </div>
    <p class="text-sm font-medium text-white/70">Nova Assist</p>
  </div>
  <h2 class="mb-6 text-2xl md:text-3xl font-semibold leading-tight tracking-tight">Round-the-Clock Chat Support</h2>
  <div class="flex flex-col gap-4 mb-6 bg-white/5 rounded-xl p-4 ring-1 ring-white/15 max-h-[300px] overflow-y-auto">
    <div id="chatMessages" class="flex flex-col space-y-2">
      <div class="self-start max-w-[75%] bg-white/10 rounded-xl px-4 py-2 text-white/90 font-medium text-sm leading-relaxed shadow-sm">Hello! How can I help you today?</div>
      <div class="self-end max-w-[75%] bg-emerald-500/30 rounded-xl px-4 py-2 text-emerald-400 font-medium text-sm leading-relaxed shadow-sm">I need assistance with my account.</div>
      <div class="self-start max-w-[75%] bg-white/10 rounded-xl px-4 py-2 text-white/90 font-medium text-sm leading-relaxed shadow-sm">Sure! What seems to be the problem?</div>
      <div class="self-end max-w-[75%] bg-emerald-500/30 rounded-xl px-4 py-2 text-emerald-400 font-medium text-sm leading-relaxed shadow-sm">I'm unable to reset my password.</div>
      <div class="self-start max-w-[75%] bg-white/10 rounded-xl px-4 py-2 text-white/90 font-medium text-sm leading-relaxed shadow-sm">I'll send you a password reset link shortly.</div>
    </div>
  </div>
  <form class="flex items-center gap-3" id="chatForm">
    <input id="chatInput" placeholder="Type your message…" class="flex-grow rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-white/20 px-4 py-2 text-sm font-medium text-white/80 placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-400">
    <button type="submit" class="flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow-md hover:bg-emerald-600 transition focus:outline-none focus:ring-2 focus:ring-emerald-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
        <path d="m22 2-7 20-4-9-9-4Z"></path>
        <path d="M22 2 11 13"></path>
      </svg>
    </button>
  </form>
  <script>
    document.getElementById('chatForm').addEventListener('submit', function(e) {e.preventDefault();const input = document.getElementById('chatInput');const message = input.value.trim();if (message) {const messagesContainer = document.getElementById('chatMessages');const userMessage = document.createElement('div');userMessage.className = 'self-end max-w-[75%] bg-emerald-500/30 rounded-xl px-4 py-2 text-emerald-400 font-medium text-sm leading-relaxed shadow-sm';userMessage.textContent = message;messagesContainer.appendChild(userMessage);input.value = '';messagesContainer.scrollTop = messagesContainer.scrollHeight;setTimeout(() => {const botMessage = document.createElement('div');botMessage.className = 'self-start max-w-[75%] bg-white/10 rounded-xl px-4 py-2 text-white/90 font-medium text-sm leading-relaxed shadow-sm';botMessage.textContent = 'Thanks for your message! Our team will get back to you shortly.';messagesContainer.appendChild(botMessage);messagesContainer.scrollTop = messagesContainer.scrollHeight;}, 1000);}});
  </script>
</div>