feat: 即時預約聊天室（realtime booking chat）

## 新增功能
- 會員與教練在 confirmed 預約期間可互傳文字與圖片訊息
- Presence Channel 顯示對方在線狀態（即時加入/離線）
- 已讀回執：對方讀取訊息後即時更新
- 預約完成（completed）後訊息封存唯讀
- 圖片上傳使用 intervention/image 處理（移除 EXIF、限制尺寸、強制重新編碼）

## 通知系統
- 收到新訊息時 Bell Icon 即時更新（NotificationCreated via private channel）
- 預約列表卡片顯示未讀角標（GET /api/bookings/messages/unread-counts 批次查詢）
- 瀏覽器分頁在背景時推送 Web Notification

## 基礎建設
- 引入 Laravel Reverb 作為自架 WebSocket 伺服器
- docker-compose 新增 reverb service（連接 proxy_net，供 NPM 代理）
- 前端安裝 laravel-echo + pusher-js，初始化 Echo plugin
- Dockerfile 補 GD JPEG/WebP/FreeType 支援

## 清理
- 移除 test_broadcast.php 與 resources/js/echo.js（Blade 殘留）
- 移除 /ping、/testpost 測試路由
- channels.php 改用 class-based 授權語法，移除 debug log
- BookingChat.vue otherType 提取為 computed 消除重複
- docker-entrypoint.sh 健康檢查改用 env var 取代硬編碼密碼

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/MyBookingsView.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { getMyBookings, cancelBooking } from '../api/bookingApi'
+import BookingChat from '../components/BookingChat.vue'
+import { useBookingUnreadCounts } from '../composables/useBookingUnreadCounts'
+import api from '../api/axios'
 
 const bookings = ref([])
 const loading  = ref(true)
 const error    = ref('')
 const expanded = ref(new Set())
 
+const { counts: unreadCounts, clearCount, startPolling } = useBookingUnreadCounts(api)
+
 const STATUS_LABEL = {
   pending:            { text: '待教練確認', color: 'bg-yellow-100 text-yellow-700', hint: '等待教練確認中，確認後才完成預約' },
   confirmed:          { text: '預約成功',   color: 'bg-green-100 text-green-700',   hint: '教練已確認，請準時出席' },
@@ -26,6 +31,7 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
+  startPolling()
 })
 
 function toggle(id) {
@@ -84,6 +90,16 @@ function formatDate(dateStr) {
             </p>
           </div>
           <div class="flex items-center gap-3 shrink-0">
+            <!-- 未讀訊息角標 -->
+            <span
+              v-if="(unreadCounts[b.id] ?? 0) > 0"
+              class="flex items-center gap-1 bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full leading-none"
+            >
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+              </svg>
+              {{ unreadCounts[b.id] }}
+            </span>
             <span class="text-xs px-3 py-1 rounded-full font-medium" :class="STATUS_LABEL[b.status]?.color">
               {{ STATUS_LABEL[b.status]?.text || b.status }}
             </span>
@@ -141,6 +157,15 @@ function formatDate(dateStr) {
             </div>
           </div>
 
+          <!-- 即時訊息（confirmed / completed） -->
+          <BookingChat
+            v-if="b.status === 'confirmed' || b.status === 'completed'"
+            :bookingId="b.id"
+            :bookingStatus="b.status"
+            currentUserType="member"
+            @read="clearCount(b.id)"
+          />
+
           <!-- 操作按鈕列 -->
           <div class="flex items-center justify-between pt-1">
             <RouterLink