Chat Panel with Link Preview and Message Composer

<div class="sm:p-8 ring-1 ring-white/5 bg-gradient-to-b from-[#0f1222] to-[#0b0e1a] border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur">
          <!-- Header -->
          <div class="flex items-start gap-4">
            <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/5 ring-1 ring-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-5 w-5 text-indigo-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
            </div>
            <div class="flex-1">
              <h1 class="text-2xl sm:text-3xl font-semibold tracking-tight text-white">Work together, everywhere.</h1>
              <p class="mt-1.5 text-sm sm:text-base text-slate-400">From rollouts to notes, keep your crew aligned at every step.</p>
            </div>
          </div>

          <!-- Preview Panel -->
          <div class="mt-6 overflow-hidden rounded-2xl border border-white/10 bg-white/5 ring-1 ring-white/10">
            <div class="relative">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9e830864-83e8-449e-a1a3-6f2f482ba042_1600w.jpg" alt="Minimal 3D render preview" class="h-40 w-full object-cover opacity-90" style="">
              <div class="pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-indigo-500/10 to-fuchsia-500/10"></div>
            </div>
          </div>

          <!-- Message -->
          <div class="mt-6 flex items-start gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5d61e53b-2050-4b51-93a5-176f90ba5abd_320w.jpg" alt="Lena avatar" class="h-8 w-8 rounded-full ring-1 ring-white/20 object-cover" style="">
            <div class="flex-1">
              <div class="flex items-center gap-2">
                <span class="text-sm font-medium text-white/90">Lena</span>
                <span class="text-xs text-slate-400">1:17 PM</span>
              </div>
              <p class="mt-1 text-sm leading-relaxed text-slate-300">
                Good news — the issue is resolved and the build is live on Nimbus!
              </p>

              <!-- Link embed -->
              <div class="mt-3 rounded-xl border border-white/10 bg-white/5 ring-1 ring-white/10">
                <div class="flex items-center justify-between px-3 py-2">
                  <div class="flex items-center gap-2">
                    <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-indigo-400/20 ring-1 ring-indigo-300/30">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="app-window" class="lucide lucide-app-window h-3.5 w-3.5 text-indigo-200"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M10 4v4"></path><path d="M2 8h20"></path><path d="M6 4v4"></path></svg>
                    </span>
                    <span class="text-xs text-slate-400">deployment.nimbus.app</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <button class="rounded-md p-1.5 text-slate-300/70 hover:bg-white/5 hover:text-slate-200">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="copy" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
                    </button>
                    <button class="rounded-md p-1.5 text-slate-300/70 hover:bg-white/5 hover:text-slate-200">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="external-link" class="lucide lucide-external-link h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>
                    </button>
                  </div>
                </div>
                <div class="border-t border-white/10 px-3 py-3">
                  <h3 class="text-sm font-medium text-white/90 tracking-tight">Launch Kit</h3>
                  <p class="mt-0.5 text-xs text-slate-400">Generated by launch-kit</p>
                </div>
                <div class="border-t border-white/10 px-3 py-2">
                  <div class="flex flex-wrap items-center gap-3 text-xs text-slate-400">
                    <span class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2 py-1 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play-circle" class="lucide lucide-play-circle h-3.5 w-3.5 text-slate-300"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"></path><circle cx="12" cy="12" r="10"></circle></svg>
                      Preview
                    </span>
                    <span class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2 py-1 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" class="lucide lucide-box h-3.5 w-3.5 text-slate-300"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg>
                      Orion
                    </span>
                    <span class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2 py-1 ring-1 ring-white/10">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5d61e53b-2050-4b51-93a5-176f90ba5abd_800w.jpg" alt="Lena tiny avatar" class="h-3.5 w-3.5 rounded-full ring-1 ring-white/20 object-cover" style="">
                      Lena — Frontend hotfix
                    </span>
                  </div>
                </div>
              </div>
              <!-- /Link embed -->
            </div>
          </div>

          <!-- Composer -->
          <div class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-2 ring-1 ring-white/10">
            <div class="flex items-center gap-2">
              <button class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-300/80 hover:bg-white/5 hover:text-slate-200" aria-label="Add attachment">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="paperclip" class="lucide lucide-paperclip h-4.5 w-4.5"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg>
              </button>
              <input type="text" placeholder="Message Jordan Park..." class="flex-1 bg-transparent text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none">
              <button class="hidden sm:inline-flex items-center gap-1 rounded-lg bg-white/5 px-2.5 py-1.5 text-xs text-slate-200 ring-1 ring-white/10 hover:bg-white/10">
                GIF
              </button>
              <button class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-300/80 hover:bg-white/5 hover:text-slate-200" aria-label="Insert emoji">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smile" class="lucide lucide-smile h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" x2="9.01" y1="9" y2="9"></line><line x1="15" x2="15.01" y1="9" y2="9"></line></svg>
              </button>
              <button class="inline-flex h-8 items-center gap-2 rounded-lg bg-indigo-500/90 px-3 text-xs font-medium text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-400/40">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg>
                Send
              </button>
            </div>
          </div>
        </div>