Add podcast playback, Fountain.fm cards, V4V streaming, fix notifications

Podcast feature:
- Podcast discovery via Podcast Index API (trending + search)
- Persistent player bar with play/pause, seek, speed (1x/1.5x/2x), volume
- Audio persists across view navigation, resumes from saved position
- Fountain.fm URL detection in feed with rich playable cards
- "Play in Wrystr" button on inline audio blocks
- V4V streaming sats via NWC (LNURL-pay, 5min accumulation, split payments)
- Share what you're listening to (publish note with confirm)
- Space key toggles play/pause globally

Notification fixes:
- Per-notification read tracking (click to mark read) instead of mark-all-on-open
- Read notifications persist at 50% opacity, unread get accent border
- Always fetches last 7 days, keeps 15 most recent
- Filter out own replies from notifications
- Sidebar badge shows only unread count

src/components/feed/FountainCard.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import type { ContentSegment } from "../../lib/parsing";
+import type { PodcastEpisode } from "../../types/podcast";
+import { resolveFountainEpisode } from "../../lib/podcast";
+import { usePodcastStore } from "../../stores/podcast";
+
+export function FountainCard({ seg }: { seg: ContentSegment }) {
+  const [episode, setEpisode] = useState<PodcastEpisode | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const play = usePodcastStore((s) => s.play);
+
+  useEffect(() => {
+    resolveFountainEpisode(seg.value).then((ep) => {
+      if (ep) setEpisode(ep);
+      else setFailed(true);
+      setLoading(false);
+    });
+  }, [seg.value]);
+
+  if (failed) {
+    // Fallback: render as a regular link
+    return (
+      <a
+        href={seg.value}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
+      >
+        <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
+          <span className="text-blue-400 text-lg font-bold">F</span>
+        </div>
+        <div className="min-w-0">
+          <div className="text-[11px] text-text-muted">Fountain.fm</div>
+          <div className="text-[12px] text-accent truncate">{seg.value}</div>
+        </div>
+      </a>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 animate-pulse">
+        <div className="w-10 h-10 rounded-sm bg-bg shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="h-3 bg-bg rounded w-32 mb-1" />
+          <div className="h-2 bg-bg rounded w-20" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!episode) return null;
+
+  const handlePlay = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (episode.enclosureUrl) {
+      play(episode);
+    }
+  };
+
+  return (
+    <div
+      className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
+      onClick={handlePlay}
+    >
+      {episode.artworkUrl ? (
+        <img
+          src={episode.artworkUrl}
+          alt=""
+          className="w-12 h-12 rounded-sm object-cover shrink-0"
+          loading="lazy"
+          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+        />
+      ) : (
+        <div className="w-12 h-12 rounded-sm bg-blue-500/20 flex items-center justify-center shrink-0">
+          <span className="text-blue-400 text-lg font-bold">F</span>
+        </div>
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="text-[11px] text-text-muted">Fountain.fm</div>
+        <div className="text-[12px] text-text truncate">{episode.title}</div>
+        {episode.showTitle && (
+          <div className="text-[10px] text-text-dim truncate">{episode.showTitle}</div>
+        )}
+      </div>
+      {episode.enclosureUrl && (
+        <button
+          onClick={handlePlay}
+          className="shrink-0 w-8 h-8 rounded-full border border-border flex items-center justify-center hover:bg-accent/10 transition-colors"
+          title="Play in Wrystr"
+        >
+          <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor" className="text-accent ml-0.5">
+            <polygon points="0,0 10,6 0,12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}