/* 留言串相關的補充樣式：① 卡片上的留言預覽可顯示到 3 行 ② 留言串視窗跟著卡片顏色（站長 2026-11-09）

   ── ② 留言串視窗跟著卡片顏色 ──
   卡片有設顏色（.br-pastel＋style 裡的 --br-wave／--pc-*）時，開啟留言串會把同一組變數與 class 複製到 .br-thread-box（bridge-thread-color.js），
   這裡把它的底色、文字、按鈕換成跟展開視窗（.br-modal-box.br-pastel）一樣的粉彩配色；沒設顏色的卡片維持原本的深色。
   獨立一個檔案：bridge.css 本機有別的對話尚未上線的改動，不能整檔上傳。 */
.br-thread-box.br-pastel {
  background: var(--br-wave); border-color: var(--br-card-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;      /* 粉彩底是實色，不用模糊（桌機深色版的半透明規則會被這條蓋掉） */
}
.br-thread-box.br-pastel .br-thread-foot { background: var(--br-wave); }
.br-thread-box.br-pastel .br-thread-write { background: rgba(255, 255, 255, 0.62); border: 1px solid var(--pc-strong); color: var(--pc-ink); }
.br-thread-box.br-pastel .br-thread-write:hover { background: rgba(255, 255, 255, 0.92); }
.br-thread-box.br-pastel .br-th-owner { background: rgba(255, 255, 255, 0.55); color: var(--pc-ink); }
.br-thread-box.br-pastel .br-th-replies { border-left-color: var(--pc-strong); }
.br-thread-box.br-pastel .br-th-reply-btn,
.br-thread-box.br-pastel .br-th-more,
.br-thread-box.br-pastel .br-th-cancel { border-color: var(--pc-strong); color: var(--pc-ink); }
.br-thread-box.br-pastel .br-th-reply-btn:hover,
.br-thread-box.br-pastel .br-th-more:hover:not(:disabled),
.br-thread-box.br-pastel .br-th-cancel:hover { background: rgba(255, 255, 255, 0.6); }
.br-thread-box.br-pastel .br-rx-btn { background: rgba(255, 255, 255, 0.5); border-color: var(--pc-strong); color: var(--pc-dim); }
.br-thread-box.br-pastel .br-rx-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.85); color: var(--pc-ink); }
.br-thread-box.br-pastel .br-rx-btn.is-on { background: rgba(255, 186, 90, 0.38); border-color: #e8890c; color: var(--pc-ink); }
.br-thread-box.br-pastel .br-name-input,
.br-thread-box.br-pastel .br-th-form textarea { background: rgba(255, 255, 255, 0.65); border-color: var(--pc-strong); color: var(--pc-text); color-scheme: light; }
.br-thread-box.br-pastel .br-name-input:focus,
.br-thread-box.br-pastel .br-th-form textarea:focus { background: #fff; border-color: var(--pc-ink2); }
.br-thread-box.br-pastel .br-name-input::placeholder,
.br-thread-box.br-pastel .br-th-form textarea::placeholder { color: var(--pc-dim); opacity: 0.8; }
/* 回覆的錯誤提示（例如「請寫下想說的話」）：bridge.css 的淡粉紅字＋半透明紅底是給深色底用的，在粉彩底上幾乎看不見（站長 2026-11-09） */
.br-thread-box.br-pastel .br-form-error { color: #b42318; background: rgba(255, 255, 255, 0.75); }
.br-thread-box.br-pastel .br-th-send { background: var(--pc-ink); color: #fff; }
.br-thread-box.br-pastel .br-th-send:hover { background: var(--pc-ink2); }

/* ── ① 卡片／展開視窗上的「最新一則留言」預覽：原本被 bridge.css 壓成單行加省略號，桌機其實還有空間，改成最多 3 行（伺服器給最多 120 字，見 PetBridgeService::withLatestMessage）──
   只限桌機（≥768px，與 bridge.css 的手機斷點一致）：手機一屏塞滿卡片，版面不夠，維持單行（站長 2026-11-09）。圖示對齊第一行，而不是垂直置中 */
@media (min-width: 768px) {
  .br-peek-text { align-items: flex-start; }
  .br-peek-text .material-icons { margin-top: 0.18rem; }
  .br-peek-text [data-peek-text] {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    white-space: normal; overflow: hidden; word-break: break-word; text-overflow: ellipsis;
  }
}