Team Chat Panel with Sidebar & Message Input

<div class="relative overflow-hidden sm:rounded-[40px] bg-white/5 border-white/5 border rounded-2xl backdrop-blur-lg">
          

          <div class="relative sm:p-8 md:p-10 pt-6 pr-6 pb-6 pl-6">
  <div class="max-w-6xl mr-auto ml-auto">
    <div class="relative overflow-hidden text-left bg-zinc-950/85 border-white/10 border rounded-2xl shadow-2xl backdrop-blur-xl ring-1 ring-emerald-500/10">
      <!-- Header -->
      <div class="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-black/40">
        <div class="flex items-center gap-4">
          <div class="relative">
            <span class="inline-flex h-10 w-10 items-center justify-center bg-zinc-900 rounded-full border border-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="circle-slash" class="lucide lucide-circle-slash lucide-user w-[18px] h-[18px]" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(212, 212, 216);"><circle cx="12" cy="12" r="10" class=""></circle><line x1="9" x2="15" y1="15" y2="9" class=""></line></svg>
            </span>
            <span class="absolute -top-1 -right-1 w-3.5 h-3.5 bg-emerald-400 rounded-full border-2 border-zinc-950 shadow-sm"></span>
          </div>
          <div>
            <p class="text-sm font-semibold text-white tracking-tight">Product Team</p>
            <p class="text-xs font-medium text-zinc-500">12 members • 3 online</p>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <span class="inline-flex items-center gap-2 rounded-lg bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-300 ring-1 ring-emerald-500/20">
            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="circle" class="lucide lucide-circle w-[10px] h-[10px] text-emerald-400"><circle cx="12" cy="12" r="10" class=""></circle></svg>
            Active
          </span>
          <button class="hidden sm:inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/5 border border-white/10 text-zinc-400 hover:text-white hover:border-white/20">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
          </button>
          <button class="hidden sm:inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/5 border border-white/10 text-zinc-400 hover:text-white hover:border-white/20">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
          </button>
        </div>
      </div>

      <!-- Layout -->
      <div class="grid md:grid-cols-3 gap-0 h-96">
        <!-- Sidebar -->
        <div class="bg-zinc-950/70 border-white/10 border-r pt-6 pr-5 pb-6 pl-5">
          <div class="space-y-6">
            <div class="">
              <p class="text-xs font-semibold text-zinc-500 mb-3 tracking-wide uppercase">Channels</p>
              <div class="space-y-1">
                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-white/5 text-sm font-medium text-white border border-white/10">
                  <span class="w-2 h-2 bg-emerald-400 rounded-full shadow-sm"></span>
                  general
                  <span class="ml-auto text-xs text-zinc-400 bg-white/5 px-1.5 py-0.5 rounded border border-white/10">12</span>
                </div>
                <div class="flex gap-3 text-sm text-zinc-400 rounded-lg pt-2.5 pr-3 pb-2.5 pl-3 items-center hover:bg-white/5 hover:text-white border border-transparent hover:border-white/10 transition-colors cursor-pointer">
                  <span class="w-2 h-2 bg-zinc-600 rounded-full"></span>
                  product-updates
                  <span class="ml-auto text-xs text-zinc-500">3</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-400 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10 transition-colors cursor-pointer">
                  <span class="w-2 h-2 bg-zinc-600 rounded-full"></span>
                  design
                  <span class="ml-auto text-xs text-zinc-500">8</span>
                </div>
              </div>
            </div>
            <div class="">
              <p class="text-xs font-semibold text-zinc-500 mb-3 tracking-wide uppercase">Direct Messages</p>
              <div class="space-y-1">
                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-400 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10 transition-colors cursor-pointer">
                  <div class="relative">
                    <div class="w-5 h-5 bg-zinc-700 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f31d4832-3ccc-4ffa-9dc4-260e7c39cc4a_320w.jpg)] bg-cover rounded-full shadow-sm"></div>
                    <div class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-emerald-400 rounded-full border-2 border-zinc-950"></div>
                  </div>
                  Sarah Chen
                </div>
                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-400 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10 transition-colors cursor-pointer">
                  <div class="w-5 h-5 bg-zinc-700 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/480fa0bd-ee9a-4aa1-8f7a-5307cc4541f5_320w.jpg)] bg-cover rounded-full shadow-sm"></div>
                  Alex Park
                </div>
                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-400 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10 transition-colors cursor-pointer">
                  <div class="w-5 h-5 bg-zinc-700 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b6d79211-32f1-430e-96b3-9b4d857c1482_320w.jpg)] bg-cover rounded-full shadow-sm"></div>
                  Mike Johnson
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Messages -->
        <div class="md:col-span-2 flex flex-col">
          <div class="flex-1 overflow-y-auto pt-6 pr-6 pb-6 pl-6 space-y-6">
            <!-- Message 1 -->
            <div class="flex items-start gap-4 group">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f31d4832-3ccc-4ffa-9dc4-260e7c39cc4a_320w.jpg" alt="Sarah Chen" class="w-9 h-9 object-cover border-white/10 border rounded-full">
              <div class="flex-1 min-w-0">
                <div class="flex gap-3 mb-1 items-baseline">
                  <span class="text-sm font-semibold text-white">Sarah Chen</span>
                  <span class="text-xs text-zinc-500 font-medium">2:34 PM</span>
                </div>
                <div class="rounded-lg border border-white/10 bg-white/5 p-3">
                  <p class="leading-relaxed text-sm text-zinc-300">Great work on the new onboarding flow! The conversion rates look promising 🚀</p>
                </div>
                <div class="flex items-center gap-4 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">Reply</button>
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">React</button>
                </div>
              </div>
            </div>

            <!-- Message 2 -->
            <div class="flex items-start gap-4 group">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/480fa0bd-ee9a-4aa1-8f7a-5307cc4541f5_320w.jpg" alt="Alex Park" class="w-9 h-9 object-cover border-white/10 border rounded-full">
              <div class="flex-1 min-w-0">
                <div class="flex items-baseline gap-3 mb-1">
                  <span class="text-sm font-semibold text-white">Alex Park</span>
                  <span class="text-xs text-zinc-500 font-medium">2:35 PM</span>
                </div>
                <div class="rounded-lg border border-white/10 bg-white/5 p-3">
                  <p class="leading-relaxed text-sm text-zinc-300">Thanks! Should we schedule a review session for next week?</p>
                </div>
                <div class="flex items-center gap-4 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">Reply</button>
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">React</button>
                </div>
              </div>
            </div>

            <!-- Message 3 with File -->
            <div class="flex items-start gap-4 group">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b6d79211-32f1-430e-96b3-9b4d857c1482_320w.jpg" alt="Mike Johnson" class="w-9 h-9 object-cover border-white/10 border rounded-full">
              <div class="flex-1 min-w-0">
                <div class="flex items-baseline gap-3 mb-1">
                  <span class="text-sm font-semibold text-white">Mike Johnson</span>
                  <span class="text-xs text-zinc-500 font-medium">2:36 PM</span>
                </div>
                <p class="leading-relaxed text-sm text-zinc-300 mb-3">I've attached the updated wireframes for review</p>
                <div class="p-4 rounded-xl border border-emerald-500/20 bg-white/5 max-w-sm hover:bg-white/7 transition-colors cursor-pointer">
                  <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                        <path d="m14 2 6 6" class=""></path>
                      </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium text-white">wireframes-v2.figma</p>
                      <p class="text-xs text-zinc-500">2.4 MB • Just now</p>
                    </div>
                    <button class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 flex items-center justify-center transition-colors">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-300">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                        <polyline points="7,10 12,15 17,10" class=""></polyline>
                        <line x1="12" y1="15" x2="12" y2="3" class=""></line>
                      </svg>
                    </button>
                  </div>
                </div>
                <div class="flex items-center gap-4 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">Reply</button>
                  <button class="text-xs text-zinc-500 hover:text-emerald-400 transition-colors">React</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Input -->
          <div class="p-6 border-t border-white/10 bg-zinc-950/50">
            <div class="flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 focus-within:border-white/20 hover:border-white/20 transition-all">
              <button class="p-1 rounded-lg hover:bg-white/10 text-zinc-400 hover:text-white transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="paperclip" class="lucide lucide-paperclip"><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" class=""></path></svg>
              </button>
              <input type="text" placeholder="Type a message…" class="flex-1 bg-transparent text-sm placeholder:text-zinc-500 focus:outline-none font-medium text-zinc-200">
              <div class="flex items-center gap-2">
                <button class="p-1.5 rounded-lg hover:bg-white/10 text-zinc-400 hover:text-white transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mic" class="lucide lucide-mic"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg>
                </button>
                <button class="inline-flex items-center justify-center h-9 w-9 rounded-lg bg-emerald-500 hover:bg-emerald-400 shadow-sm">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send text-emerald-950"><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" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                </button>
              </div>
            </div>
            <div class="flex items-center justify-between mt-3">
              <div class="flex items-center gap-2 text-xs text-zinc-500">
                <div class="w-2 h-2 bg-emerald-400 rounded-full"></div>
                <span>3 people are typing…</span>
              </div>
              <div class="text-xs text-zinc-500">
                Press Enter to send
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
        </div>