/* 全域容器與排版 */
.weiyu-front-container { max-width: 760px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #334155; line-height: 1.6; }

/* 標題動畫與樣式 */
@keyframes weiyuFadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.weiyu-page-header { text-align: center; margin-bottom: 40px; animation: weiyuFadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.weiyu-main-title { font-size: 36px; font-weight: 800; margin: 0 0 8px 0; letter-spacing: 2px; color: #F1DDBC; background: linear-gradient(135deg, #F1DDBC 0%, #e6c89a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.weiyu-sub-title { font-size: 13px; color: #94a3b8; font-weight: 600; letter-spacing: 4px; margin: 0; text-transform: uppercase; }

/* 發佈卡片 */
.weiyu-front-container .publish-card { background: #ffffff; padding: 28px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f5f9; margin-bottom: 40px; transition: 0.3s; }
.weiyu-front-container .publish-card:focus-within { box-shadow: 0 15px 40px rgba(113, 226, 209, 0.1); border-color: #e2e8f0; }
.weiyu-front-container textarea { width: 100%; background: #f8fafc; border: 2px solid transparent; border-radius: 12px; padding: 16px; font-size: 16px; transition: 0.3s; box-sizing: border-box; resize: vertical; margin-bottom: 0; color: #1e293b; }
.weiyu-front-container textarea:focus { background: #ffffff; border-color: #71E2D1; outline: none; box-shadow: 0 0 0 4px rgba(113, 226, 209, 0.15); }
/* ==========================================
   可見性標籤 & 行內編輯器
   ========================================== */
.weiyu-visibility-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.weiyu-inline-editor { display: none; }

/* ==========================================
   卡片互動區 (點讚與分享)
   ========================================== */
.weiyu-card-footer {
    display: flex; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed #f1f5f9;
}
.weiyu-action-btn {
    background: transparent; border: none; color: #94a3b8; font-size: 14px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 20px; transition: all 0.3s ease;
}
.weiyu-action-btn:hover { background: #f8fafc; color: #64748b; }
.weiyu-action-btn.weiyu-like-btn:hover { color: #ef4444; background: #fee2e2; }
.weiyu-action-btn.weiyu-share-btn:hover { color: #3b82f6; background: #eff6ff; }
.weiyu-like-btn.liked { color: #ef4444; pointer-events: auto !important; cursor: pointer !important; }

/* 點讚愛心跳動動畫 */
@keyframes weiyuHeartBeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.weiyu-like-btn.animating i { animation: weiyuHeartBeat 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: #ef4444; }
/* 心情選擇器 (PC) */
.weiyu-front-container .mood-selector { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.weiyu-front-container .mood-option { cursor: pointer; position: relative; margin: 0; }
.weiyu-front-container .mood-option input { position: absolute; opacity: 0; cursor: pointer; }
.weiyu-front-container .mood-btn { padding: 8px 16px; border-radius: 30px; background: #f1f5f9; font-size: 14px; font-weight: 500; transition: 0.25s; display: flex; align-items: center; gap: 6px; border: 2px solid transparent; color: #64748b; cursor: pointer; }
.weiyu-front-container .mood-option:hover .mood-btn { transform: translateY(-2px); }
/* 心情選中狀態視覺反饋 */
.weiyu-front-container .mood-option input:checked + .mood-btn {
    border-color: var(--mood-fg, #71E2D1);
    background: var(--mood-bg, #d4f5ec);
    color: var(--mood-fg, #71E2D1);
    box-shadow: 0 4px 12px rgba(113, 226, 209, 0.25);
    transform: scale(1.02);
}
/* 注意: 选中状态样式由PHP动态生成,在class-frontend.php中 */

/* 底部操作區 */
.weiyu-front-container .action-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.weiyu-front-container .upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #f8fafc; border-radius: 12px; cursor: pointer; font-size: 14px; color: #475569; font-weight: 500; transition: 0.3s; border: 1px solid #e2e8f0; }
.weiyu-front-container .upload-btn:hover { background: #f1f5f9; color: #0e8a76; border-color: #cbd5e1; }
.weiyu-front-container .btn-send { background: linear-gradient(135deg, #71E2D1 0%, #5fcfc0 100%); color: #0e3d36; border: none; padding: 12px 30px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 15px; box-shadow: 0 4px 15px rgba(113, 226, 209, 0.35); }
.weiyu-front-container .btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(113, 226, 209, 0.5); }

/* 列表卡片 */
@keyframes weiyuFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 卡片基础样式：同时覆盖 SSR (.weiyu-front-container) 与 SPA 详情页 (.weiyu-detail-post)
   —— 使用 :where() 让特异性为 0，SSR 旧规则保留同等优先级继续生效。 */
:where(.weiyu-front-container, .weiyu-detail-post) .item-card,
.item-card {
    background: #ffffff; border-radius: 20px; padding: 28px; margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #f1f5f9;
    transition: 0.3s; position: relative; opacity: 0;
    animation: weiyuFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
:where(.weiyu-front-container, .weiyu-detail-post) .item-card:hover,
.item-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(0,0,0,0.06); border-color: #e2e8f0; }

/* --- 列表卡片头部与元数据 (修复手机端覆盖问题) --- */
:where(.weiyu-front-container, .weiyu-detail-post) .item-header,
.item-header {
    display: flex;
    justify-content: flex-start; /* 改：去掉 space-between，改用子元素 margin-left:auto 推時間 */
    align-items: center; /* 改：flex-start → center，讓 mood/vis/time/admin 全部視覺垂直居中 */
    margin-bottom: 16px;
    position: relative;
}
:where(.weiyu-front-container, .weiyu-detail-post) .item-meta,
.item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
:where(.weiyu-front-container, .weiyu-detail-post) .weiyu-time,
.weiyu-time { font-size: 14px; color: #94a3b8; font-weight: 500; margin-left: auto; padding-right: 0; }
:where(.weiyu-front-container, .weiyu-detail-post) .mood-tag,
.mood-tag { font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; letter-spacing: 0.5px; }

/* --- 移动端完美触控删除按钮 --- */
:where(.weiyu-front-container, .weiyu-detail-post) .btn-del-front,
.btn-del-front {
    color: #cbd5e1;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 12px;
    border-radius: 8px;
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 20;
    cursor: pointer;
}
:where(.weiyu-front-container, .weiyu-detail-post) .btn-del-front:hover,
.btn-del-front:hover { color: #ef4444; background: #fee2e2; }

/* 狀態提示 */
.weiyu-notice { padding: 16px 24px; border-radius: 12px; margin-bottom: 24px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; opacity: 1; transition: opacity 0.5s ease; }
.weiyu-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.weiyu-deleted { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ==========================================
   微語前端靜態樣式 (圖片、錯誤提示、@提及下拉選單)
   ========================================== */

/* 圖片樣式 */
:where(.weiyu-front-container, .weiyu-detail-post) .item-image,
.item-image { margin-top: 16px; overflow: hidden; border-radius: 12px; }
:where(.weiyu-front-container, .weiyu-detail-post) .item-image img,
.item-image img { width: 100%; max-width: 100%; max-height: 450px; border-radius: 12px; object-fit: cover; display: block; }

/* 錯誤提示 */
.weiyu-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* @提及自動補全選單 */
.weiyu-mention-dropdown { position: absolute; z-index: 100; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); max-height: 200px; overflow-y: auto; width: 220px; display: none; margin-top: 5px; }
.weiyu-mention-item { padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #f1f5f9; }
.weiyu-mention-item:last-child { border-bottom: none; }
.weiyu-mention-item:hover { background: #f8fafc; }
.weiyu-mention-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* 加載更多按鈕 */
/* 無限滾動哨兵：不可見但必須佔據佈局，否則 IntersectionObserver 不會觸發 */
#weiyu-infinite-sentinel { width: 100%; height: 1px; margin: 0; padding: 0; pointer-events: none; visibility: hidden; }
.weiyu-load-more-btn { display: block; width: 100%; max-width: 200px; margin: 30px auto 10px; padding: 12px 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 30px; color: #64748b; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.3s; text-align: center; }
.weiyu-load-more-btn:hover { background: #f1f5f9; color: #0e8a76; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.weiyu-load-more-btn:disabled { opacity: 0.7; cursor: not-allowed; background: #f1f5f9; }
.weiyu-end-msg { text-align: center; color: #94a3b8; font-size: 14px; margin-top: 30px; display: none; }

/* 全文搜尋欄 */
#weiyu-search-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0 18px; height: 48px; background: rgba(255,255,255,0.7); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(203,213,225,0.7); border-radius: 30px; box-shadow: 0 4px 20px rgba(15,23,42,0.05); transition: border-color 0.3s, box-shadow 0.3s; }
#weiyu-search-bar:focus-within { border-color: #71E2D1; box-shadow: 0 4px 24px rgba(113,226,209,0.25); }
#weiyu-search-bar > i.fa-magnifying-glass { color: #94a3b8; font-size: 16px; flex: none; }
#weiyu-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; color: #334155; height: 100%; }
#weiyu-search-input::placeholder { color: #94a3b8; }
#weiyu-search-clear { flex: none; width: 28px; height: 28px; border: none; border-radius: 50%; background: #e2e8f0; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background 0.2s, color 0.2s; }
#weiyu-search-clear:hover { background: #cbd5e1; color: #334155; }

/* 返回頂部 */
.weiyu-back-to-top { position: fixed; bottom: 40px; right: 40px; width: 48px; height: 48px; background: linear-gradient(135deg, #8AC4E2 0%, #B5DBE5 50%, #D3EED9 100%); color: #0e3d36; border: none; border-radius: 50%; box-shadow: 0 6px 20px rgba(138, 196, 226, 0.4); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.9); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 9999; }
.weiyu-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.weiyu-back-to-top:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(138, 196, 226, 0.55); }

/* 手機端響應式對稱優化 */
@media (max-width: 768px) { 
    .weiyu-back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; font-size: 16px; } 
    .weiyu-front-container .mood-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .weiyu-front-container .mood-btn { justify-content: center; }
}
/* --- 圖片預覽區樣式 --- */
.weiyu-preview-wrapper { 
    display: none; /* 預設隱藏 */
    position: relative; 
    margin: 15px 0; 
    max-width: 200px; 
}
.weiyu-preview-wrapper.active { 
    display: block; 
    animation: weiyuFadeInUp 0.3s ease forwards; 
}
.weiyu-preview-wrapper img { 
    width: 100%; 
    height: auto; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    object-fit: cover; 
    border: 3px solid #f8fafc; 
}
.weiyu-remove-img-btn { 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    background: #ef4444; 
    color: white; 
    border: none; 
    border-radius: 50%; 
    width: 28px; 
    height: 28px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); 
    transition: all 0.3s ease; 
    font-size: 14px; 
}
.weiyu-remove-img-btn:hover { 
    background: #dc2626; 
    transform: scale(1.1); 
}

/* --- 按鈕載入中 (Disabled) 狀態樣式 --- */
.weiyu-front-container .btn-send:disabled { 
    background: #94a3b8; /* 變成灰色 */
    cursor: not-allowed; 
    box-shadow: none; 
    transform: none; 
}
/* ==========================================
   發佈按鈕精緻動畫與互動回饋
   ========================================== */

/* 基礎狀態：加入絲滑的過渡動畫和基礎陰影 */
.weiyu-submit-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(113, 226, 209, 0.25), 0 2px 4px -1px rgba(113, 226, 209, 0.15) !important;
    position: relative;
    overflow: hidden;
}

/* 懸停狀態 (未被禁用時)：微微上浮、陰影擴散、按鈕提亮 */
.weiyu-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(113, 226, 209, 0.35), 0 4px 6px -2px rgba(113, 226, 209, 0.2) !important;
    filter: brightness(1.05);
}

/* 點擊按壓狀態 (未被禁用時)：真實的物理下沉感 */
.weiyu-submit-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 4px -1px rgba(113, 226, 209, 0.25) !important;
    filter: brightness(0.95);
}

/* 禁用狀態：失去陰影與浮動，游標變為禁止符號 */
.weiyu-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: translateY(0) !important;
}
/* 去除可見性單選框點擊/選中時的醜陋黑框與陰影 */
.weiyu-visibility-options input[type="radio"] {
    outline: none !important;
    box-shadow: none !important;
}

.weiyu-visibility-options input[type="radio"]:focus,
.weiyu-visibility-options input[type="radio"]:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================
   前台沉浸式編輯 (Inline Editing)
   ========================================== */
/* 右上角管理按鈕群 */
:where(.weiyu-front-container, .weiyu-detail-post) .weiyu-admin-actions,
.weiyu-admin-actions { position: absolute; top: -8px; right: -8px; display: flex; gap: 4px; z-index: 20; }
:where(.weiyu-front-container, .weiyu-detail-post) .btn-del-front,
:where(.weiyu-front-container, .weiyu-detail-post) .btn-edit-front,
.btn-del-front, .btn-edit-front { color: #cbd5e1; font-size: 15px; transition: all 0.3s ease; padding: 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:where(.weiyu-front-container, .weiyu-detail-post) .btn-edit-front:hover,
.btn-edit-front:hover { color: #3b82f6; background: #eff6ff; }
:where(.weiyu-front-container, .weiyu-detail-post) .btn-del-front:hover,
.btn-del-front:hover { color: #ef4444; background: #fee2e2; }

/* 編輯器本體 */
.weiyu-inline-editor { margin-top: 5px; animation: weiyuFadeInUp 0.3s ease forwards; }
.weiyu-edit-textarea { width: 100%; min-height: 80px; padding: 12px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 15px; resize: vertical; margin-bottom: 12px; color: #334155; background: #f8fafc; transition: all 0.3s ease; font-family: inherit; line-height: 1.6; }
.weiyu-edit-textarea:focus { border-color: #71E2D1; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(113, 226, 209, 0.15); }

/* 保存與取消按鈕 */
.weiyu-edit-actions { display: flex; justify-content: flex-end; gap: 10px; }
.weiyu-edit-cancel { padding: 8px 16px; background: #f1f5f9; color: #64748b; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.2s; }
.weiyu-edit-cancel:hover { background: #e2e8f0; color: #334155; }
.weiyu-edit-save { padding: 8px 16px; background: linear-gradient(135deg, #71E2D1 0%, #5fcfc0 100%); color: #0e3d36; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.2s; box-shadow: 0 4px 10px rgba(113, 226, 209, 0.3); }
.weiyu-edit-save:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(113, 226, 209, 0.45); }
.weiyu-edit-save:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* ==========================================
   UI 修正包 (解決按鈕重疊)
   ========================================== */

/* 1. 修正編輯與刪除按鈕重疊 (解除舊版的絕對定位) */
:where(.weiyu-front-container, .weiyu-detail-post) .weiyu-admin-actions .btn-del-front,
.weiyu-admin-actions .btn-del-front {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}

/* 確保按鈕群組容器的背景為透明，並正確排列 */
:where(.weiyu-front-container, .weiyu-detail-post) .weiyu-admin-actions,
.weiyu-admin-actions {
    position: static; /* 改：absolute → static 參與 flex 流，自動 align-items:center 垂直居中 */
    align-self: center; /* 改：明確垂直居中（即使 align-items 被覆寫也保險） */
    margin-left: 12px; /* 改：time 推到右後，admin 緊跟 time 後 + 12px 間隔（模擬 SPA 容器 gap:12px，符合用戶期望的合理視覺距離） */
    display: flex;
    gap: 2px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.8); /* 保留：微透明底色防擋字 */
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 2px;
}
/* ==========================================
   評論區塊樣式
   ========================================== */
.weiyu-comments-section { background: #f8fafc; border-radius: 12px; padding: 16px; margin-top: 15px; border: 1px solid #e2e8f0; animation: weiyuFadeInUp 0.3s ease; }
.weiyu-comment-item { display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.weiyu-comment-item:last-child { margin-bottom: 0; }
.weiyu-comment-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.weiyu-comment-body { background: #ffffff; padding: 8px 12px; border-radius: 0 12px 12px 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); width: 100%; }
.weiyu-comment-author { font-weight: 600; color: #475569; margin-right: 8px; font-size: 13px; }
.weiyu-comment-text { color: #334155; line-height: 1.5; }

.weiyu-new-comment-hint { background: #eef2ff; color: #4f46e5; font-size: 13px; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; text-align: center; cursor: pointer; }
.weiyu-new-comment-hint a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.weiyu-new-comment-hint a:hover { text-decoration: underline; }

/* 評論輸入框 */
.weiyu-comment-input-area { display: flex; gap: 10px; align-items: center; margin-top: 15px; border-top: 1px dashed #cbd5e1; padding-top: 15px; }
.weiyu-comment-input-area img { width: 28px; height: 28px; border-radius: 50%; }
.weiyu-comment-input { flex-grow: 1; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 20px; font-size: 13px; outline: none; transition: 0.3s; }
.weiyu-comment-input:focus { border-color: #71E2D1; box-shadow: 0 0 0 3px rgba(113, 226, 209, 0.18); }
.weiyu-comment-submit { background: #71E2D1; color: #0e3d36; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.weiyu-comment-submit:hover { background: #5fcfc0; transform: scale(1.05); }
.weiyu-action-btn.weiyu-comment-toggle:hover { color: #0e3d36; background: rgba(113, 226, 209, 0.18); }
.weiyu-reply-btn { background: transparent; border: none; color: #94a3b8; font-size: 12px; cursor: pointer; transition: 0.2s; padding: 0; }
.weiyu-reply-btn:hover { color: #0e3d36; }
/* ==========================================
   九宮格多圖相簿與預覽樣式
   ========================================== */
.weiyu-image-gallery { display: grid; gap: 8px; margin-top: 16px; border-radius: 12px; overflow: hidden; }
.weiyu-image-gallery.weiyu-grid-1 { grid-template-columns: 1fr; }
.weiyu-image-gallery.weiyu-grid-2 { grid-template-columns: repeat(2, 1fr); }
.weiyu-image-gallery.weiyu-grid-3 { grid-template-columns: repeat(3, 1fr); }

.weiyu-image-gallery .item-image { margin-top: 0; border-radius: 0; overflow: hidden; }
.weiyu-image-gallery .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 保持比例裁剪，不拉伸变形 */
    border-radius: 4px;
    display: block;
}

/* 多图网格：2张、4张时使用正方形 */
.weiyu-image-gallery.weiyu-grid-2 .item-image { aspect-ratio: 1 / 1; }
.weiyu-image-gallery.weiyu-grid-3 .item-image { aspect-ratio: 1 / 1; }

/* 单图时保持原始比例与限制最高 */

/* ==========================================
   密碼保護微語解鎖區域
   ========================================== */
.weiyu-locked-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px dashed #cbd5e1;
}

.weiyu-locked-box i {
    font-size: 24px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.weiyu-locked-box p {
    color: #64748b;
    margin: 0 0 15px 0;
    font-size: 14px;
}

.weiyu-unlock-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

.weiyu-unlock-input-group input[type="password"] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    outline: none;
    transition: 0.3s;
}

.weiyu-unlock-input-group input[type="password"]:focus {
    border-color: #71E2D1;
    box-shadow: 0 0 0 3px rgba(113, 226, 209, 0.15);
}

.weiyu-unlock-btn {
    background: linear-gradient(135deg, #71E2D1 0%, #5fcfc0 100%);
    color: #0e3d36;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
}

.weiyu-unlock-btn:hover {
    background: linear-gradient(135deg, #5fcfc0 0%, #4cb5a8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(113, 226, 209, 0.45);
}

.weiyu-unlock-btn:active {
    transform: translateY(0);
}

/* 響應式設計 */
@media (max-width: 768px) {
    .weiyu-unlock-input-group {
        max-width: 100%;
    }

    .weiyu-unlock-input-group input[type="password"],
    .weiyu-unlock-btn {
        max-width: 100%;
    }
}
.weiyu-image-gallery.weiyu-grid-1 .item-image img { aspect-ratio: auto; max-height: 450px; border-radius: 12px; }

/* 發佈框多圖預覽網格 */
.weiyu-preview-wrapper.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 100%; }
.weiyu-preview-wrapper.is-grid .preview-item { position: relative; aspect-ratio: 1 / 1; }
.weiyu-preview-wrapper.is-grid .preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: none; }

/* 微信朋友圈風格的添加圖片按鈕 */
.weiyu-preview-wrapper.is-grid .preview-add-btn {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.weiyu-preview-wrapper.is-grid .preview-add-btn:hover {
    background: #f1f5f9;
    border-color: #71E2D1;
}

.weiyu-preview-wrapper.is-grid .preview-add-btn .add-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.weiyu-preview-wrapper.is-grid .preview-add-btn .add-icon-wrapper i {
    font-size: 32px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.weiyu-preview-wrapper.is-grid .preview-add-btn:hover .add-icon-wrapper i {
    color: #0e8a76;
    transform: scale(1.1);
}

.weiyu-preview-wrapper.is-grid .preview-add-btn .add-text {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    transition: all 0.3s ease;
}

.weiyu-preview-wrapper.is-grid .preview-add-btn:hover .add-text {
    color: #0e8a76;
}
/* ==========================================
   極致 UX：骨架屏 (Skeleton Screen) 載入動畫
   ========================================== */
@keyframes weiyuShimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.weiyu-skeleton-card {
    background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px;
    border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.weiyu-skeleton-header, .weiyu-skeleton-text, .weiyu-skeleton-img {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: weiyuShimmer;
    animation-timing-function: linear;
    border-radius: 4px;
}

.weiyu-skeleton-header { width: 150px; height: 40px; margin-bottom: 20px; border-radius: 20px; }
.weiyu-skeleton-text { width: 100%; height: 16px; margin-bottom: 10px; }
.weiyu-skeleton-text.short { width: 60%; margin-bottom: 0; }
.weiyu-skeleton-img { width: 100%; height: 150px; margin-top: 15px; border-radius: 8px; }

/* ==========================================
   Extracted from card.php inline styles
   ========================================== */

/* Author info in card footer */
.weiyu-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.weiyu-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.weiyu-author-name {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* Actions group in card footer */
.weiyu-actions-group {
    display: flex;
    gap: 12px;
}

/* Comment header row */
.weiyu-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

/* Replies list */
.weiyu-replies-list {
    margin-left: 38px;
    margin-top: 8px;
    border-left: 2px solid #e2e8f0;
    padding-left: 12px;
}
.weiyu-reply-item {
    margin-bottom: 8px;
}
.weiyu-reply-avatar {
    width: 20px;
    height: 20px;
}
.weiyu-reply-body {
    padding: 6px 10px;
    font-size: 13px;
}

/* Replying-to indicator */
.weiyu-replying-to {
    display: none;
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    margin-left: 38px;
}
.cancel-reply-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    margin-left: 5px;
}

/* Login hint for comments */
.weiyu-login-hint {
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    margin-top: 10px;
}

/* Hashtag and mention links (extracted from PHP inline styles) */
.weiyu-hashtag {
    color: #0e8a76;
    text-decoration: none;
    font-weight: 500;
}
.weiyu-mention {
    color: #3b82f6;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    margin: 0 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Private content placeholder */
.weiyu-private-notice {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
}