@layer components {
  .chat-bubble {
    @apply bg-surface-less text-content border-line mx-1 mb-2 flex min-w-[100px] cursor-auto flex-col gap-1 rounded-2xl border-solid p-2 text-left lg:max-w-2xl;
    border-width: var(--border-thin);
  }

  .chat-bubble--user {
    @apply border-primary;
  }
}

[data-fl-theme="clay"] .chat-bubble {
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}