body { font-size: 16px; height: 100vh; overflow: hidden; }
/* 將 Bootstrap 主色改為粉色 */
:root { 
  --bs-primary: #ff69b4; 
  --bs-primary-rgb: 255, 105, 180; 
  /* 詳情頁布局變數：頂部標題高度與底部列高度 */
  --detail-header-h: 72px; 
  --bottom-bar-h: 56px; 
}
.chat-list { height: calc(100vh - var(--detail-header-h) - var(--bottom-bar-h) - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-top: 4px; display: flex; flex-direction: column; justify-content: flex-end; }
.chat-dark { background: #f0f0f0; color: #000; }
.chat-item { padding: .25rem 0; display: flex; }
.chat-item.me { justify-content: flex-end; }
.chat-item.other { justify-content: flex-start; }
.bubble { max-width: 75%; border-radius: 12px; padding: .5rem .75rem; position: relative; }
.bubble-left { background: #ffffff; color: #000; }
.bubble-right { background: #d4edda; color: #000; }
.bubble-content { word-wrap: break-word; font-size: 18px; line-height: 1.6; }
.timestamp { font-size: 12px; opacity: .8; margin-top: .25rem; text-align: right; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 發言者名稱 */
.sender-left { font-size: 12px; color: #555; margin: 0 0 .25rem .25rem; text-align: left; }
.sender-right { font-size: 12px; color: #333; margin: 0 .25rem .25rem 0; text-align: right; }

/* 圖片檢視浮層 */
.image-viewer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 1050; }
.image-viewer-toolbar { position: fixed; top: 12px; left: 12px; }
.image-viewer-img { max-width: 90vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

/* 固定在畫面底部的留言列 */
.message-bottom-bar { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); background: #f8f9fa; border-top: 1px solid #dee2e6; padding: 8px 12px; z-index: 1030; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
.message-bottom-spacer { height: 0; }

/* 參考圖片風格的圖示按鈕 */
.image-btn.btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 38px; padding: 0; border: 1px solid #adb5bd; background: #e9ecef; color: #495057; }
.image-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* 讓詳情頁內容更貼近置底列：移除容器底部內距 */
main.container { padding-bottom: 0 !important; }
.sticky-top-safe { position: sticky; top: calc(env(safe-area-inset-top, 0px)); z-index: 1020; }
.detail-header { background: #fff; min-height: var(--detail-header-h); }

/* 確認完成標籤：藍底白字 (覆蓋主色設定) */
.badge-confirm {
  background-color: #0d6efd !important;
  color: #fff !important;
}