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>

components/cortex/artifacts/artifact-container.tsx

@@ -11,6 +11,7 @@
  */
 
 import { ArtifactTab } from './artifact-tab';
+import { ChevronLeft } from 'lucide-react';
 import { AgendaBlock, type AgendaBlockProps } from './blocks/agenda-block';
 import { DagnotatieBlock } from '../blocks/dagnotitie-block';
 import { ZoekenBlock } from '../blocks/zoeken-block';
@@ -101,25 +102,25 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
     prefill.patient ||
     (prefill.patientName || prefill.patientId
       ? {
-          id: prefill.patientId || '',
-          name: prefill.patientName || '',
-        }
+        id: prefill.patientId || '',
+        name: prefill.patientName || '',
+      }
       : undefined);
 
   // Try to resolve date from label first (more reliable than AI-generated dates)
   const dateLabel = prefill?.datetime?.label || prefill?.dateRange?.label;
   const resolvedDate = resolveDateFromLabel(dateLabel);
-  
+
   const datetimeDate =
     resolvedDate ||  // Prefer calculated date from label
     coerceDate(prefill?.datetime?.date) ||
     (prefill?.datetime?.time ? new Date() : undefined);
-    
+
   const datetime = datetimeDate
     ? {
-        date: datetimeDate,
-        time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '',
-      }
+      date: datetimeDate,
+      time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '',
+    }
     : undefined;
 
   const appointmentType = resolveAppointmentType(prefill?.appointmentType || prefill?.type);
@@ -128,16 +129,16 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
   // Also resolve newDatetime from label
   const newDateLabel = prefill?.newDatetime?.label;
   const resolvedNewDate = resolveDateFromLabel(newDateLabel);
-  
+
   const newDatetimeDate =
     resolvedNewDate ||  // Prefer calculated date from label
     coerceDate(prefill?.newDatetime?.date) ||
     (prefill?.newDatetime?.time ? new Date() : undefined);
   const newDatetime = newDatetimeDate
     ? {
-        date: newDatetimeDate,
-        time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '',
-      }
+      date: newDatetimeDate,
+      time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '',
+    }
     : undefined;
 
   return {
@@ -264,9 +265,26 @@ export function ArtifactContainer({
 
   return (
     <div className="h-full flex flex-col bg-slate-50">
-      {/* Tabs - alleen tonen bij >1 artifact */}
+      {/* Tabs - alleen tonen bij >1 artifact */
+        /* Echter op mobile: ALTIJD een header tonen met back knop als er een artifact open is */
+      }
+
+      {/* Mobile Header: Back button + Title */}
+      <div className="lg:hidden flex items-center p-3 border-b border-slate-200 bg-white sticky top-0 z-10">
+        <button
+          onClick={() => activeArtifact && onCloseArtifact(activeArtifact.id)}
+          className="flex items-center text-slate-600 hover:text-slate-900 mr-3"
+        >
+          <ChevronLeft className="w-5 h-5" />
+          <span className="font-medium">Terug</span>
+        </button>
+        <span className="font-semibold text-slate-800 truncate flex-1">
+          {activeArtifact ? activeArtifact.title : 'Details'}
+        </span>
+      </div>
+
       {artifacts.length > 1 && (
-        <div className="flex bg-white border-b border-slate-200">
+        <div className="hidden lg:flex bg-white border-b border-slate-200">
           {artifacts.map((artifact) => (
             <ArtifactTab
               key={artifact.id}

components/cortex/artifacts/blocks/agenda-block.tsx

@@ -36,7 +36,7 @@ export function AgendaBlock({
 }: AgendaBlockProps) {
     // State for fetched appointments (only used in list mode)
     const [appointments, setAppointments] = useState<CalendarEvent[] | undefined>(initialAppointments);
-    const [dateRange, setDateRange] = useState<{ start: Date; end: Date; label: string } | undefined>(initialDateRange);
+    const [dateRange, setDateRange] = useState<{ start?: Date; end?: Date; label: string } | undefined>(initialDateRange);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [refetchKey, setRefetchKey] = useState(0);

components/cortex/artifacts/blocks/agenda-create-form.tsx

@@ -17,6 +17,8 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
+import { toast } from '@/hooks/use-toast';
+import { ToastAction } from '@/components/ui/toast';
 import { createEncounter } from '@/app/epd/agenda/actions';
 import {
     APPOINTMENT_TYPES,
@@ -153,7 +155,22 @@ export function AgendaCreateForm({ prefillData, onClose }: AgendaCreateFormProps
             });
 
             if (result.success) {
-                onClose?.(); // Close on success
+                const formattedDate = format(startDate, "EEEE d MMMM 'om' HH:mm", { locale: nl });
+                
+                toast({
+                    title: '✓ Afspraak ingepland',
+                    description: `${patientName} — ${formattedDate}`,
+                    action: (
+                        <ToastAction 
+                            altText="Bekijk afspraak"
+                            onClick={() => window.location.href = `/epd/agenda?highlight=${result.data?.id}&date=${date}`}
+                        >
+                            Bekijken
+                        </ToastAction>
+                    ),
+                });
+                
+                onClose?.();
             } else {
                 setError(result.error || 'Er is een fout opgetreden.');
             }

components/cortex/chat/chat-empty-state.tsx

@@ -74,7 +74,7 @@ const cardVariants = {
     y: 0,
     transition: {
       duration: 0.3,
-      ease: 'easeOut',
+      ease: 'easeOut' as const,
     },
   },
 };

components/cortex/command-center/command-center.tsx

@@ -19,6 +19,7 @@
 import { useEffect, useCallback, useRef } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { useCortexStore } from '@/stores/cortex-store';
+import { cn } from '@/lib/utils';
 import { ContextBar } from './context-bar';
 import { OfflineBanner } from './offline-banner';
 import { NudgeToast } from './nudge-toast';
@@ -120,14 +121,20 @@ export function CommandCenter() {
       <ContextBar />
 
       {/* Split-screen container - flex-1 */}
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden relative">
         {/* Chat Panel - 40% (desktop), 100% (mobile) */}
-        <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col">
+        <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col h-full">
           <ChatPanel />
         </div>
 
-        {/* Artifact Area - 60% (desktop), hidden on mobile */}
-        <div className="hidden lg:flex lg:w-[60%] flex-col">
+        {/* Artifact Area - 60% (desktop), overlay on mobile */}
+        <div
+          className={cn(
+            "lg:flex lg:w-[60%] flex-col bg-white transition-transform duration-300 ease-in-out lg:transform-none lg:static absolute inset-0 z-20",
+            // On mobile: hidden by default, visible (slide in) when openArtifacts > 0
+            openArtifacts.length > 0 ? "translate-x-0" : "translate-x-full lg:translate-x-0"
+          )}
+        >
           <ArtifactArea />
         </div>
       </div>