Chat Interface Glass Card

<div class="w-full bg-gray-900 py-12 px-4">
  <style>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600'); .glass-bubble { background: linear-gradient(329.05deg, rgba(248, 248, 248, 0.9) 14.97%, rgba(248, 248, 248, 0.3) 84.36%); backdrop-filter: blur(8px); }</style>
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-gray-800
    via-blue-900 to-purple-900 rounded-3xl p-8 relative
    overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-3xl"></div>
    <div class="relative z-10">
      <div class="flex justify-end mb-4 space-x-2">
        <div class="glass-bubble rounded-full w-12 h-12 flex items-center justify-center">
          <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm">M</div>
        </div>
        <div class="glass-bubble rounded-full w-12 h-12 flex items-center justify-center">
          <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm">C</div>
        </div>
      </div>
      <div class="flex items-center mb-6 space-x-3">
        <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg px-4 py-2 text-white font-medium">Fonts & Styling Options</div>
        <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <div class="glass-bubble w-8 h-8 rounded-full"></div>
        <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg px-3 py-1 text-white text-sm">Apply</div>
      </div>
      <div class="flex justify-start mb-6 space-x-2">
        <div class="glass-bubble rounded-2xl px-4 py-3 max-w-[120px] flex items-center justify-center">
          <div class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-xs">A</div>
        </div>
        <div class="glass-bubble rounded-2xl px-4 py-3 max-w-[120px] flex items-center justify-center">
          <div class="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-xs">M</div>
        </div>
      </div>
      <p class="text-gray-400 text-lg font-['Plus_Jakarta_Sans',_sans-serif] leading-relaxed">Chat, edit, and share effortlessly — no files needed anymore.</p>
    </div>
  </div>
</div>