feat(ui): mobile responsiveness audit + type fixes

Mobile Responsiveness:
- Viewport meta tags toegevoegd in layout.tsx
- EPD header: patient details verborgen op mobiel, zoekbalk responsive
- Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen
- Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen
- Patiëntenlijst: compact icoon-only button op mobiel
- Verpleegrapportage: verticale flow i.p.v. twee-koloms layout
- Cortex: artifact overlay met slide-in animatie op mobiel
- Cortex: "Terug" knop toegevoegd aan artifact panels
- Toast feedback bij succesvolle afspraak creatie

Code Quality Fixes (KISS/DRY):
- Resize listener vervangen door bestaande useMediaQuery hook
- Dubbele flex class opgeschoond in epd-header.tsx
- userScalable: false verwijderd (accessibility)

Type Fixes:
- actions.ts: status literal type met 'as const'
- agenda-block.tsx: dateRange start/end optioneel
- chat-empty-state.tsx: framer-motion ease type
- cortex-store.ts: ChatEntities.dateRange consistent met Zod schema

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

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

app/epd/agenda/actions.ts

@@ -124,7 +124,7 @@ export async function createEncounter(params: CreateEncounterParams) {
     class_code: params.classCode,
     class_display: params.classDisplay,
     notes: params.notes,
-    status: 'planned',
+    status: 'planned' as const,
   };
 
   console.log('[createEncounter] Insert data:', insertData);

app/epd/agenda/components/agenda-toolbar.tsx

@@ -21,10 +21,10 @@ interface AgendaToolbarProps {
   onNewAppointment: () => void;
 }
 
-const VIEW_OPTIONS: { value: CalendarView; label: string }[] = [
+const VIEW_OPTIONS: { value: CalendarView; label: string; className?: string }[] = [
   { value: 'timeGridDay', label: 'Dag' },
-  { value: 'timeGridWeek', label: 'Week' },
-  { value: 'timeGridWorkWeek', label: 'Werkweek' },
+  { value: 'timeGridWeek', label: 'Week', className: 'hidden md:block' },
+  { value: 'timeGridWorkWeek', label: 'Werkweek', className: 'hidden md:block' },
 ];
 
 export function AgendaToolbar({
@@ -60,7 +60,7 @@ export function AgendaToolbar({
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 mb-4">
+    <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-4">
       {/* Left: Title and Date */}
       <div className="flex items-center gap-4">
         <h1 className="text-2xl font-bold text-slate-900">Agenda</h1>
@@ -104,11 +104,10 @@ export function AgendaToolbar({
             <button
               key={option.value}
               onClick={() => onViewChange(option.value)}
-              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                currentView === option.value
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${currentView === option.value
                   ? 'bg-white text-slate-900 shadow-sm'
                   : 'text-slate-600 hover:text-slate-900'
-              }`}
+                } ${option.className || ''}`}
             >
               {option.label}
             </button>
@@ -116,9 +115,10 @@ export function AgendaToolbar({
         </div>
 
         {/* New Appointment Button */}
-        <Button onClick={onNewAppointment} className="gap-2">
+        <Button onClick={onNewAppointment} className="gap-2 w-full md:w-auto">
           <Plus className="h-4 w-4" />
-          Nieuwe Afspraak
+          <span className="hidden md:inline">Nieuwe Afspraak</span>
+          <span className="md:hidden">Nieuw</span>
         </Button>
       </div>
     </div>

app/epd/agenda/components/agenda-view.tsx

@@ -10,6 +10,7 @@ import React, { useState, useCallback, useRef, useTransition, useEffect } from '
 import dynamic from 'next/dynamic';
 import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
 import { toast } from '@/hooks/use-toast';
+import { useMediaQuery } from '@/hooks/use-media-query';
 
 // Lazy load FullCalendar component (~150KB+ savings)
 const AgendaCalendar = dynamic(
@@ -62,6 +63,14 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
   const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null);
   const [isRescheduling, setIsRescheduling] = useState(false);
 
+  // Auto-switch to day view on mobile
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  useEffect(() => {
+    if (isMobile) {
+      setCurrentView('timeGridDay');
+    }
+  }, [isMobile]);
+
   const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null);
 
   // Auto-open appointment modal when navigating from a report
@@ -118,7 +127,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
 
   // Handle date range change from calendar
   const handleDateChange = useCallback((start: Date, end: Date) => {
-    setCurrentDate((prev) => 
+    setCurrentDate((prev) =>
       prev.toDateString() === start.toDateString() ? prev : start
     );
     fetchEvents(start, end);
@@ -246,7 +255,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
 
       <div className="flex flex-1 gap-4 min-h-0">
         {/* Mini calendar sidebar */}
-        <div className="w-64 flex-shrink-0">
+        <div className="w-64 flex-shrink-0 hidden md:block">
           <MiniCalendar
             selectedDate={currentDate}
             onDateSelect={handleMiniCalendarDateSelect}