You are a Senior Frontend Engineer working on a Next.js 16 + React + TypeScript project.

Task:
Fix the Online Lesson Detail page where YouTube videos show a black screen inside the iframe.

Important:
Before editing code, inspect the existing implementation and follow project rules:

1. AGENTS.md
2. docs/AI_DEVELOPMENT_GUIDE.md
3. docs/PROJECT_ARCHITECTURE.md

Scope:
Only fix the YouTube embed issue.
Do not change unrelated UI, layout, API, React Query logic, or business logic.

Requirements:

1. Locate the OnlineLessonDetailPage component.
2. Review the existing getEmbeddableVideoUrl() function.
3. Improve the YouTube URL parser to support:
   - https://www.youtube.com/watch?v=VIDEO_ID
   - https://youtube.com/watch?v=VIDEO_ID
   - https://m.youtube.com/watch?v=VIDEO_ID
   - https://youtu.be/VIDEO_ID
   - https://youtu.be/VIDEO_ID?si=xxxxx
   - https://www.youtube.com/shorts/VIDEO_ID
   - https://www.youtube.com/embed/VIDEO_ID
   - URLs with timestamp parameters such as &t=30s
4. The parser must return:
   https://www.youtube.com/embed/VIDEO_ID
5. If the URL is invalid or not supported, return null.
6. Remove the sandbox attribute from the YouTube iframe.
7. Update iframe attributes to:
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
   allowFullScreen
   referrerPolicy="strict-origin-when-cross-origin"
8. Keep uploaded video rendering unchanged.
9. Keep fallback Card behavior unchanged.
10. Do not use any.
11. Ensure TypeScript and ESLint pass.

After implementation:
Create /docs/ai/report.md with:

- Summary
- Files changed
- Root cause
- Changes made
- Testing checklist
- Risks
- Rollback plan

Testing checklist must include:

- youtube.com/watch URL
- youtu.be URL
- Shorts URL
- Embed URL
- Mobile YouTube URL
- URL with timestamp
- Invalid URL
- Local uploaded video
- Existing fallback button
- Responsive layout

Return a concise summary after completing the changes.