feat: outbound call UI — immediate call card, auto-answer SIP bridge

- ClickToCallButton sets callState='ringing-out' immediately on click
- ActiveCallCard shows "Calling..." state for outbound
- SIP manager auto-answers incoming SIP when outbound is pending (Kookoo bridge)
- CallPrepCard shows lead context while dialing
- On error, resets state cleanly

Flow: Click Call → UI shows call card → Kookoo dials customer →
customer answers → SIP bridges → auto-answer → active call → disposition

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/call-desk/active-call-card.tsx

@@ -105,7 +105,33 @@ export const ActiveCallCard = ({ lead, callerPhone }: ActiveCallCardProps) => {
         setCallerNumber(null);
     };
 
-    // Ringing state
+    // Outbound ringing — agent initiated the call
+    if (callState === 'ringing-out') {
+        return (
+            <div className="rounded-xl bg-brand-primary p-4">
+                <div className="flex items-center gap-3">
+                    <div className="relative">
+                        <div className="absolute inset-0 animate-pulse rounded-full bg-brand-solid opacity-20" />
+                        <div className="relative flex size-10 items-center justify-center rounded-full bg-brand-solid">
+                            <FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
+                        </div>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <p className="text-xs font-bold uppercase tracking-wider text-brand-secondary">Calling...</p>
+                        <p className="text-lg font-bold text-primary">{fullName || phoneDisplay}</p>
+                        {fullName && <p className="text-sm text-secondary">{phoneDisplay}</p>}
+                    </div>
+                </div>
+                <div className="mt-3 flex gap-2">
+                    <Button size="sm" color="primary-destructive" onClick={() => { hangup(); handleReset(); }}>
+                        Cancel
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    // Inbound ringing
     if (callState === 'ringing-in') {
         return (
             <div className="rounded-xl bg-brand-primary p-4">