* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
}

/* 舊版 .navbar/.nav-toggle 規則已由 layout.php 內的 Tailwind header 取代，
   #nav-toggle/#nav-menu 的開合顯示邏輯改在 layout.php 的 <style> 區塊處理 */

/* post-card：卡片樣式，class 名稱刻意避開 Tailwind 內建的 "list-item" display utility，
   避免撞名讓卡片被強制套用 display: list-item（出現項目符號） */
.post-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}
.post-card .meta { color: #444559; font-size: 0.85rem; margin-left: 0.6rem; font-family: "JetBrains Mono", monospace; }
.post-card strong { color: #1a1b25; font-size: 1rem; }
.post-card p { color: #1a1b25; margin: 0.6rem 0 0; line-height: 1.6; }

.post-images { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.post-images img { max-width: 260px; max-height: 260px; border-radius: 12px; border: 1px solid #e2e1ef; object-fit: cover; }

/* discussion-image-preview / dm-image-preview 兩個 image-picker.js 掛載點共用同一套 .pending-image 樣式 */
#discussion-image-preview, #dm-image-preview { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.pending-image { position: relative; }
.pending-image img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; border: 1px solid #e2e1ef; display: block; }
.pending-image .remove-image {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ba1a1a; color: #fff; border: none;
  cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0;
}

/* 聊天/私訊訊息氣泡 — chat.js、messages.js、avatar.js、View::avatarHtml() 都是靠這些
   class 名稱生成 DOM（WebSocket 即時推播 與 PHP 初載渲染 共用同一套 class），
   改版時只能調整這裡的樣式數值，不能改 class 名稱，否則即時訊息會跟頁面內容長得不一樣 */
.chat-row { display: flex; align-items: flex-end; gap: 0.6rem; margin-bottom: 1rem; }
.chat-row.own { justify-content: flex-end; }
.chat-row.other { justify-content: flex-start; }

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 102, 136, 0.2);
}
.chat-row.own .chat-avatar { display: none; }

/* 全站在線亮燈：離線是灰點（見 View::avatarHtml()/avatar.js 給的 bg-outline-variant 底色），
   .online 是額外疊加的 class，用比 utility class 更高的選擇器特異度覆蓋底色，改成綠色閃爍 */
@keyframes presence-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 4px 2px rgba(34, 197, 94, 0.5); }
}
.presence-dot.online {
  background: #22c55e;
  animation: presence-blink 1.4s ease-in-out infinite;
}

.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 72%; }
.chat-row.own .chat-bubble-wrap { align-items: flex-end; }
.chat-row.other .chat-bubble-wrap { align-items: flex-start; }

.chat-author { font-size: 0.75rem; font-weight: 600; color: #444559; margin-bottom: 0.25rem; font-family: "JetBrains Mono", monospace; letter-spacing: 0.02em; }

.chat-bubble {
  padding: 0.65rem 1rem;
  border-radius: 18px;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
}
.chat-row.other .chat-bubble { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: #1a1b25; border: 1px solid rgba(255, 255, 255, 1); border-bottom-left-radius: 4px; }
.chat-row.own .chat-bubble { background: #006688; color: #fff; border-bottom-right-radius: 4px; }

.chat-time { font-size: 0.7rem; color: #75758b; margin-top: 0.25rem; }

.toast-notification {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-left: 4px solid #006688;
  box-shadow: 0 8px 24px rgba(0, 102, 136, 0.15);
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  max-width: 320px;
  z-index: 100;
  animation: fade-in 0.2s ease-out;
}
.toast-notification strong { display: block; margin-bottom: 0.25rem; color: #1a1b25; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.checkbox-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; border: 1px solid #c5c4dd; padding: 0.6rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.5); }
.checkbox-list label { font-weight: 400; display: flex; align-items: center; gap: 0.4rem; color: #444559; }

/* 全站 input[type=file] 統一美化（頭像、封面圖、討論區/私訊附圖、資源檔案上傳共用） */
input[type="file"] {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.85rem;
  color: #444559;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #c5c4dd;
  border-radius: 999px;
  padding: 0.3rem 1rem 0.3rem 0.3rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[type="file"]:hover { border-color: #006688; background: rgba(255, 255, 255, 0.85); }
input[type="file"]:focus-visible { outline: 2px solid #006688; outline-offset: 2px; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: #006688;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover { opacity: 0.88; }