feat(web): per-video chat over the stored transcript (ADR-027)

A deeper-dive chat entered from the summary view: ask questions about a video
against its already-stored transcript (ADR-021), no caption fetch, ever.

Safety by construction — the load-bearing property. The chat handlers reach the
chat.Service only after reading the SHARED stored transcript via Store.GetTranscript
(a pure DB read); the service holds no VideoSource. So an enabled chat cannot
trigger a caption fetch, touch the rate gate, or reach YouTube. A video with no
stored transcript gets an honest "not available" — no fetch, no model call. The
key web test wires the summarize/fetch collaborators as tripwires that fail the
test if chat ever routes into them, and asserts the model answered from the
stored text.

Model defaults to the summary's own model and is switchable among the ADR-022
chain (phi4-mini → gemma4-26b → mistral-small); switching re-runs against the
same transcript — deliberate model-comparison instrumentation. The cloud model
is absent from the switcher when TAPIR_CLOUD_FALLBACK_MODEL="" (the local-first /
NDA lever), honoured the same way the summarizer honours it. Reuses the existing
LiteLLM gateway client (a chat is a different call, not a new integration) and
the TAPIR_MAX_TRANSCRIPT_CHARS truncation, surfacing an honest bounded-context
note when a long transcript is cut.

Ephemeral v1: the multi-turn conversation rides in hidden request fields; no
table, no migration, nothing persisted. Entry is RLS-scoped through
GetSummaryByVideo, so chat is reachable only from the user's own summary view.
Show-source verification and on-demand fetch are deferred (ADR-027).

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

internal/web/view.go

@@ -184,6 +184,12 @@ func statusURL(videoID string) templ.SafeURL {
 	return templ.SafeURL("/v/" + videoID + "/status")
 }
 
+// chatURL builds the per-video chat path (GET renders the page, POST answers) —
+// the deeper-dive over the stored transcript (ADR-027).
+func chatURL(videoID string) templ.SafeURL {
+	return templ.SafeURL("/v/" + videoID + "/chat")
+}
+
 // Charmbracelet-inspired palette for the summarizing animation (TapirSpinner) —
 // a charm purple box, pink tapir, mint snout/eyes/progress. Kept as named consts
 // so the inline span colours and the CSS track/fill share one source of truth.
@@ -725,6 +731,28 @@ a.btn, a.btn:visited { color: var(--accent-fg); }
 .detail ul { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
 .detail li { margin-bottom: var(--s1); }
 
+/* deeper-dive chat (ADR-027) */
+.dig-deeper { margin: var(--s3) 0 0; }
+.chat .chat-scope { margin: 0 0 var(--s4); font-size: .9rem; }
+.chat-panel { display: flex; flex-direction: column; gap: var(--s3); }
+.chat-log { display: flex; flex-direction: column; gap: var(--s3); }
+.chat-turn { border-radius: var(--radius); padding: var(--s2) var(--s3); }
+.chat-turn p { margin: 0; }
+.chat-q { background: var(--accent-weak); color: var(--fg); align-self: flex-end; max-width: 85%; }
+.chat-a { background: var(--card); border: 1px solid var(--line); }
+.chat-a .body { white-space: pre-wrap; line-height: 1.6; }
+.chat-note { margin: 0; font-size: .82rem; font-style: italic; }
+.chat-error { margin: 0; color: #8a1c10; font-size: .9rem; }
+@media (prefers-color-scheme: dark) { .chat-error { color: #f3b5ae; } }
+.chat-form { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0 0; }
+.chat-model { flex-direction: column; display: flex; gap: var(--s1); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); align-items: flex-start; }
+.chat-model select { font: inherit; text-transform: none; letter-spacing: 0; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); }
+.chat-model-hint { text-transform: none; letter-spacing: 0; font-size: .78rem; }
+.chat-form textarea { font: inherit; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); resize: vertical; }
+.chat-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
+.chat-form .btn { align-self: flex-start; }
+.chat-thinking { font-style: italic; }
+
 /* action toggles — watched|skipped form one segmented control (they are mutually
    exclusive), "saved" sits apart as an independent toggle */
 .actions { display: flex; gap: var(--s3); margin: var(--s4) 0; flex-wrap: wrap; align-items: center; }