feat: add docs chat widget UI components (E3)

- Add useDocsChat hook with message state, streaming, error handling
- Add ChatMessages component with auto-scroll and streaming cursor
- Add ChatInput component with Enter/Shift+Enter support
- Add DocsChatWidget floating container with amber styling
- Add AI integration specs (PRD, FO, bouwplan)

Implements Epic 3 of AI Documentatie Assistent feature.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/docs-chat/docs-chat-widget.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useState } from 'react'
+import { Sparkles, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+import { ChatInput } from './chat-input'
+import { ChatMessages } from './chat-messages'
+import { useDocsChat } from './use-docs-chat'
+
+/**
+ * Floating chat widget for documentation assistant
+ *
+ * UI Specs (uit FO):
+ * - Trigger button: 56x56px, amber gradient, Sparkles icon, fixed bottom-6 right-6
+ * - Panel: 384px breed, max 80vh, slide-in animatie
+ */
+export function DocsChatWidget() {
+  const [isOpen, setIsOpen] = useState(false)
+  const { messages, isLoading, isStreaming, error, sendMessage, clearError } = useDocsChat()
+
+  return (
+    <>
+      {/* Floating trigger button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className={cn(
+          'fixed bottom-6 right-6 z-50',
+          'w-14 h-14 rounded-full',
+          'bg-gradient-to-br from-amber-400 to-amber-600',
+          'text-white shadow-lg',
+          'flex items-center justify-center',
+          'hover:from-amber-500 hover:to-amber-700',
+          'hover:scale-105 hover:shadow-xl',
+          'transition-all duration-200',
+          'focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2',
+          isOpen && 'scale-0 opacity-0'
+        )}
+        aria-label="Open documentatie assistent"
+      >
+        <Sparkles className="w-6 h-6" />
+      </button>
+
+      {/* Chat panel */}
+      <div
+        className={cn(
+          'fixed bottom-6 right-6 z-50',
+          'w-96 max-h-[80vh]',
+          'bg-white rounded-2xl shadow-2xl',
+          'flex flex-col overflow-hidden',
+          'border border-slate-200',
+          'transition-all duration-300 ease-out',
+          isOpen
+            ? 'opacity-100 translate-y-0 scale-100'
+            : 'opacity-0 translate-y-4 scale-95 pointer-events-none'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-slate-200 bg-gradient-to-r from-amber-50 to-amber-100/50">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
+              <Sparkles className="w-4 h-4 text-white" />
+            </div>
+            <div>
+              <h2 className="font-semibold text-slate-900 text-sm">
+                Documentatie Assistent
+              </h2>
+              <p className="text-xs text-slate-500">
+                Stel vragen over het EPD
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => setIsOpen(false)}
+            className={cn(
+              'w-8 h-8 rounded-lg',
+              'flex items-center justify-center',
+              'text-slate-400 hover:text-slate-600',
+              'hover:bg-slate-100',
+              'transition-colors duration-150'
+            )}
+            aria-label="Sluit chat"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Error banner */}
+        {error && (
+          <div className="px-4 py-2 bg-red-50 border-b border-red-100 flex items-center justify-between">
+            <p className="text-sm text-red-600">{error}</p>
+            <button
+              type="button"
+              onClick={clearError}
+              className="text-red-400 hover:text-red-600 text-xs"
+            >
+              Sluiten
+            </button>
+          </div>
+        )}
+
+        {/* Messages */}
+        <ChatMessages messages={messages} isStreaming={isStreaming} />
+
+        {/* Input */}
+        <ChatInput
+          onSend={sendMessage}
+          disabled={isLoading || isStreaming}
+        />
+      </div>
+    </>
+  )
+}