Message List

<section
  class="ws-chat-widget flex max-w-sm flex-col rounded-2xl border"
  style="
    --ws-chat-widget-bg: oklch(0.99 0.005 75);
    --ws-chat-widget-text: oklch(0.25 0.01 75);
    --ws-chat-widget-text-soft: oklch(0.45 0.01 75);
    --ws-chat-widget-text-muted: oklch(0.6 0.01 75);
    --ws-chat-widget-border: oklch(0.9 0.01 75);
    --ws-chat-widget-accent: oklch(0.55 0.12 75);
    --ws-chat-widget-accent-soft: oklch(0.92 0.04 75);
    --ws-chat-widget-accent-text: oklch(0.99 0.005 75);
    --ws-chat-widget-muted-bg: oklch(0.96 0.005 75);
    background: var(--ws-chat-widget-bg);
    color: var(--ws-chat-widget-text);
    border-color: var(--ws-chat-widget-border);
  "
  aria-label="Conversations"
>
  <!-- Header -->
  <header class="flex items-center justify-between border-b px-4 py-3" style="border-color: var(--ws-chat-widget-border)">
    <h2 class="text-base font-semibold">Messages</h2>
    <span
      class="inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold"
      style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
      aria-label="3 unread messages"
    >3</span>
  </header>

  <!-- Conversation List -->
  <ul class="flex flex-col divide-y" style="--tw-divide-color: var(--ws-chat-widget-border)" role="list">
    <!-- Conversation 1 — unread -->
    <li class="flex items-center gap-3 px-4 py-3" style="background: var(--ws-chat-widget-muted-bg)">
      <div
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
        style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
        aria-hidden="true"
      >A</div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-semibold">Anna Kovacs</span>
          <time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">2 min</time>
        </div>
        <div class="flex items-center justify-between gap-2">
          <span class="truncate text-xs" style="color: var(--ws-chat-widget-text-soft)">Can we schedule a call for tomorrow?</span>
          <span
            class="flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full px-1 text-[10px] font-bold"
            style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
            aria-label="2 unread"
          >2</span>
        </div>
      </div>
    </li>

    <!-- Conversation 2 — unread -->
    <li class="flex items-center gap-3 px-4 py-3" style="background: var(--ws-chat-widget-muted-bg)">
      <div
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
        style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
        aria-hidden="true"
      >M</div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-semibold">Marcus Chen</span>
          <time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">15 min</time>
        </div>
        <div class="flex items-center justify-between gap-2">
          <span class="truncate text-xs" style="color: var(--ws-chat-widget-text-soft)">The deployment looks good, just one fix</span>
          <span
            class="flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full px-1 text-[10px] font-bold"
            style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
            aria-label="1 unread"
          >1</span>
        </div>
      </div>
    </li>

    <!-- Conversation 3 — typing -->
    <li class="flex items-center gap-3 px-4 py-3">
      <div
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
        style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
        aria-hidden="true"
      >L</div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">Lisa Park</span>
          <time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">32 min</time>
        </div>
        <span class="text-xs italic" style="color: var(--ws-chat-widget-accent)">typing…</span>
      </div>
    </li>

    <!-- Conversation 4 -->
    <li class="flex items-center gap-3 px-4 py-3">
      <div
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
        style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
        aria-hidden="true"
      >D</div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">David Ramirez</span>
          <time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">2 hr</time>
        </div>
        <span class="truncate text-xs" style="color: var(--ws-chat-widget-text-muted)">Thanks, that works perfectly!</span>
      </div>
    </li>

    <!-- Conversation 5 -->
    <li class="flex items-center gap-3 px-4 py-3">
      <div
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
        style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
        aria-hidden="true"
      >E</div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">Elena Voss</span>
          <time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">Yesterday</time>
        </div>
        <span class="truncate text-xs" style="color: var(--ws-chat-widget-text-muted)">See you at the meeting on Friday</span>
      </div>
    </li>
  </ul>
</section>