Display AI recommendation reason in modal

Passes aiReason from the BookDate page into AudiobookDetailsModal and updates the modal to accept an optional aiReason prop (string | null). When provided, the modal renders a titled section "Why This Was Recommended" with styled content above the details grid. This includes prop/interface changes and a default value to preserve existing behavior when no reason is available.

src/app/bookdate/page.tsx

@@ -415,6 +415,7 @@ export default function BookDatePage() {
             isAvailable={currentRec.isAvailable}
             requestedByUsername={currentRec.requestedByUsername}
             hideRequestActions
+            aiReason={currentRec.aiReason}
           />
         ) : null;
       })()}

src/components/audiobooks/AudiobookDetailsModal.tsx

@@ -34,6 +34,7 @@ interface AudiobookDetailsModalProps {
   requestedByUsername?: string | null;
   hideRequestActions?: boolean;
   hasReportedIssue?: boolean;
+  aiReason?: string | null;
 }
 
 // Status helper
@@ -74,6 +75,7 @@ export function AudiobookDetailsModal({
   requestedByUsername = null,
   hideRequestActions = false,
   hasReportedIssue = false,
+  aiReason = null,
 }: AudiobookDetailsModalProps) {
   const { user } = useAuth();
   const { squareCovers } = usePreferences();
@@ -455,6 +457,20 @@ export function AudiobookDetailsModal({
                 </div>
               )}
 
+              {/* AI Recommendation Reasoning */}
+              {aiReason && (
+                <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
+                  <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+                    Why This Was Recommended
+                  </h3>
+                  <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
+                    <p className="text-sm text-blue-700 dark:text-blue-300 leading-relaxed">
+                      {aiReason}
+                    </p>
+                  </div>
+                </div>
+              )}
+
               {/* Details Grid */}
               <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700/50">
                 <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">