/* === 基础布局 === */
/* 確保 detail-container 初始完全隱藏 - 總體規則 */
#detail-container:not(.visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important; /* 完全移除從文檔流中 */
}

/* 當有 visible 類時才顯示 */
#detail-container.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important; /* 恢復為flex佈局 */
}

#detail-container {
    height: 100%;
    width: 100% !important;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden !important;
    background-color: #F5F5F5;
    position: relative; /* 桌面版使用 relative，為子元素提供穩定的定位上下文 */
    border: 1px solid #E9EAEB;
    border-radius: 24px;
    box-sizing: border-box;
    z-index: 10;
    transition: none !important;
    transform: none !important;
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

/* 容器內所有元素禁用過渡效果，但保留必要的動畫 */
#detail-container *,
#detail-container *.visible {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* 允許圖片相關的必要動畫和過渡效果 */
#detail-container .comment-images-grid .image-container,
#detail-container .comment-images-grid .image-container img,
#detail-container .comment-images-grid .image-container::before {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* 允許圖片容器的懸停效果 */
#detail-container .comment-images-grid .image-container:hover {
    transform: scale(1.02) !important;
    transition: transform 0.2s ease !important;
}

/* 允許加載動畫 */
#detail-container .comment-images-grid .image-container::before {
    animation: spin 1s linear infinite !important;
}

/* 允許評論項目的淡入動畫 */
#detail-container .comment-item {
    animation: fadeIn 0.5s ease-out !important;
}

/* 內容容器 - 根據 Figma 設計調整間距 */
.discussion-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden !important;
    background-color: #F5F5F5;
    width: 100% !important;
    box-sizing: border-box;
    gap: 24px; /* Figma 設計中的內容間距 */
    padding-top: 64px; /* Figma 桌面版設計：64px header + 32px 間距 */
    padding-left: 16px; /* Figma 設計的左右padding */
    padding-right: 16px;
    padding-bottom: 160px; /* 桌面版為固定底部留言框留出足夠空間 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative; /* 為子元素的 z-index 提供定位上下文 */
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

/* 固定寬度的標題欄 - 根據 Figma 64px 高度調整 */
.sticky-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #F5F5F5;
    padding: 12px 16px; /* 根據 Figma 設計調整 padding */
    border-bottom: 1px solid #E9EAEB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    height: 64px; /* Figma 設計的精確高度 */
    min-height: 64px;
    max-height: 64px;
    box-sizing: border-box;
}

.sticky-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5555555555555556em; /* Figma 設計的精確行高 */
    color: #181D27; /* Figma 設計的精確顏色 */
    width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === 評論容器和項目 === */
#comments-container {
    width: 100%;
    box-sizing: border-box;
    position: relative; /* 為評論項目的 z-index 提供定位上下文 */
    overflow: visible !important; /* 確保菜單不會被裁剪 */
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

/* 帖子詳情容器 - 根據 Figma 桌面版設計調整間距 */
#post-detail-container {
    padding: 0; /* 移除額外的 padding，父容器已有間距 */
    margin-bottom: 24px; /* 與評論區域的間距 */
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* 評論項目 - 根據Figma設計：調整間距和佈局 */
.comment-item {
    position: relative;
    overflow: visible !important;
    margin-bottom: 24px; /* Figma 設計中評論間的間距 - 桌面版使用 24px */
    border-radius: 0px;
    transition: all 0.3s ease;
    max-width: 100%;
    animation: fadeIn 0.5s ease-out !important;
    transform-origin: top center;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    box-sizing: border-box;
    z-index: 1; /* 評論項目使用基礎 z-index */
}

/* 當評論項目被激活（菜單打開）時，提升其 z-index */
.comment-item.menu-active {
    z-index: 1000 !important;
}

.comment-item.reply-comment {
    margin-left: 0px;
    padding-left: 48px; /* 40px 頭像 + 12px 間距 */
    position: relative;
    border-radius: 8px;
    margin: 16px 0 16px 0; /* 回覆評論較小的間距 */
}

/* 淡入動畫 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 當鼠標懸停於評論時的微妙背景變化 */
.comment-item:hover {
    background-color: rgba(245, 245, 245, 0.3);
}

/* 評論主體佈局 - Avatar + Content水平排列，根據 Figma 12px 間距 */
.comment-item > .flex {
    display: flex;
    flex-direction: row;
    gap: 12px; /* Figma 設計中頭像到內容的間距 */
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 評論內容區域 - 根據 Figma 設計調整 */
.comment-item .comment-body-wrapper {
    flex: 1;
    overflow: visible !important; /* 確保菜單不會被裁剪 */
    max-width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    z-index: 1; /* 使用較低的 z-index */
}

/* 評論頭部佈局 - 根據 Figma 設計：用戶信息在左，菜單按鈕在右 */
.comment-item .flex.justify-between.items-center {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 根據 Figma 設計使用 flex-end */
    gap: 8px;
    position: relative;
    z-index: 2; /* 中等層級 */
    align-self: stretch;
    min-height: auto; /* 移除固定高度 */
    margin-bottom: 1px; /* 根據 Figma 設計添加小間距 */
    width: 100%;
    overflow: visible !important; /* 確保菜單不會被裁剪 */
}

/* 左側用戶信息區域 - 限制寬度防止擠壓菜單 */
.comment-item .flex.justify-between.items-center > div:first-child {
    flex: 1;
    min-width: 0; /* 允許內容收縮 */
    max-width: calc(100% - 32px); /* 為菜單按鈕預留空間 */
    overflow: hidden;
    padding-right: 8px; /* 減少右側間距 */
    z-index: 11;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* 根據 Figma 設計保持在同一行 */
}

/* 用戶名稱 - 根據 Figma 設計精確調整 */
.comment-item .username {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4285714285714286em; /* Figma 設計的精確行高 */
    color: #414651; /* Figma 設計的精確顏色 */
    max-width: 120px; /* 限制用戶名最大寬度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 時間戳 - 根據 Figma 設計精確調整 */
.comment-item .created-at {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5em; /* Figma 設計的精確行高 */
    color: #535862; /* Figma 設計的精確顏色 */
    flex-shrink: 0;
    white-space: nowrap;
}

/* 原PO標示樣式 - 簡潔現代設計 */
.original-poster-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.4em;
    flex-shrink: 0;
    margin-left: 6px;
    margin-right: 2px;
    transition: all 0.2s ease;
}

/* .original-poster-badge:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
} */

/* 回覆指示器 - 根據 Figma 設計調整顏色 */
.reply-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(156, 163, 175, 0.1);
    border-radius: 4px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5em;
    color: #535862; /* 調整為與時間戳一致的顏色 */
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* 右側菜單按鈕區域 - 固定寬度確保可點擊 */
.comment-item .flex.justify-between.items-center > .relative {
    flex-shrink: 0 !important;
    width: 24px !important; /* 增加到 24px 確保足夠的點擊區域 */
    height: 24px !important;
    position: relative !important; /* 改為相對定位 */
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 3 !important; /* 較高層級 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto; /* 確保始終在右側 */
}

/* 評論內容文字 - 根據 Figma 設計精確調整 */
.comment-content {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em; /* Figma 設計的精確行高 */
    color: #181D27; /* Figma 設計的精確顏色 */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important; /* 強制長單詞換行 */
    margin: 0;
    padding: 0;
    max-width: 100%;
    hyphens: auto; /* 支持自動斷字 */
}

/* 內容中的標籤鏈接樣式 - 根據 Figma 設計，移除外框 */
#post-detail-container .tag-mention,
#post-detail-container .post-tags a {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none; /* 移除邊框 */
}

#post-detail-container .tag-mention:hover,
#post-detail-container .post-tags a:hover {
    background-color: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    color: #2563EB;
}

#post-detail-container .tag-mention i,
#post-detail-container .post-tags a i {
    margin-right: 4px;
    font-size: 12px;
}

/* === 軟刪除評論樣式 === */
.comment-item.deleted {
    opacity: 1;
    margin-bottom: 16px;
    
}

.comment-item.deleted .user-avatar {
    background-color: #F5F5F5;
    border: 1px solid #E9EAEB;
    opacity: 1;
    filter: none;
}

/* 隱藏被刪除評論的元素 */
.comment-item.deleted .username,
.comment-item.deleted .created-at,
.comment-item.deleted .flex.justify-between.items-center > div:first-child,
.comment-item.deleted .comment-menu-trigger,
.comment-item.deleted .flex.justify-between.items-center > .relative,
.comment-item.deleted .heart-button,
.comment-item.deleted .reply-button,
.comment-item.deleted .comment-item .flex.items-center,
.comment-item.deleted .comment-images-grid,
.comment-item.deleted .comment-images {
    display: none !important;
}

.deleted-message {
    background-color: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 8px;
    padding: 12px;
    color: #414651;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    font-style: italic;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* 刪除評論中的原PO標示樣式 */
.deleted-message .original-poster-badge {
    background: rgba(59, 130, 246, 0.08);
    color: rgba(59, 130, 246, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.15);
    opacity: 0.8;
    font-size: 10px;
    padding: 1px 4px;
    margin: 0;
    flex-shrink: 0;
}

.comment-item.deleted .comment-body-wrapper {
    gap: 0;
    margin-top: 0;
    padding-top: 0;
}

.comment-item.deleted .comment-bubble {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* === 評論圖片區域 === */
.comment-images-grid {
    position: relative;
    z-index: 1;
    margin: 8px 0;
    padding: 0;
    overflow: visible;
    border-radius: 12px;
    max-width: 100%;
    width: 100%;
}

/* 圖片滑動容器 - 限制寬度 */
.comment-images-grid .image-grid,
.comment-images-grid .scrollable-image-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    margin-bottom: -4px;
    max-width: 100%;
    width: 100%;
}

.comment-images-grid .image-grid::-webkit-scrollbar,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar {
    height: 4px;
    background: transparent;
}

.comment-images-grid .image-grid::-webkit-scrollbar-track,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-track {
    background: rgba(229, 231, 235, 0.6);
    border-radius: 2px;
    margin: 0 4px;
}

.comment-images-grid .image-grid::-webkit-scrollbar-thumb,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.5) 0%, rgba(168, 85, 247, 0.3) 100%);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.comment-images-grid .image-grid::-webkit-scrollbar-thumb:hover,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.7) 0%, rgba(168, 85, 247, 0.5) 100%);
    box-shadow: 0 1px 4px rgba(168, 85, 247, 0.3);
}

.comment-images-grid .image-container {
    position: relative;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    animation: revert !important;
    height: 120px;
    min-width: 120px;
    max-width: 200px;
    background-color: #f5f5f5;
}

.comment-images-grid .image-container:hover {
    transform: scale(1.02);
}

/* 圖片加載狀態 */
.comment-images-grid .image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite !important;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* 當圖片加載完成後隱藏加載動畫 */
.comment-images-grid .image-container.loaded::before {
    opacity: 0;
    pointer-events: none;
}

/* 確保圖片在加載完成前不顯示 */
.comment-images-grid .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    animation: revert !important;
    opacity: 0;
}

/* 圖片加載完成後顯示 */
.comment-images-grid .image-container.loaded img {
    opacity: 1;
}

.comment-images-grid .image-container.loaded img:hover {
    opacity: 0.9;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 圖片數量指示器 */
.comment-images-grid .image-count-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

/* === 評論互動按鈕 === */
.comment-item .heart-button,
.comment-item .reply-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #535862; /* Figma 設計的精確顏色 */
    border: none;
    background: none;
    cursor: pointer;
}

.comment-item .heart-button:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.comment-item .reply-button:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.comment-item .heart-button.active {
    color: #ef4444;
}

.comment-item .heart-button.active i {
    animation: heartBeat 0.3s ease;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* === 評論菜單樣式 === */
.comment-menu-trigger {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
    color: #A4A7AE; /* Figma 設計的精確顏色 */
    padding: 0;
    position: relative;
    z-index: 4 !important; /* 確保按鈕在較高層級 */
}

.comment-menu-trigger:hover {
    background-color: rgba(164, 167, 174, 0.1);
}

.comment-menu-trigger i {
    font-size: 14px;
    color: #A4A7AE; /* Figma 設計的精確顏色 */
    pointer-events: none; /* 確保點擊事件傳遞到按鈕 */
}

/* 評論菜單下拉選單 */
.comment-action-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 10000 !important; /* 最高層級，確保覆蓋所有其他元素 */
    min-width: 160px;
    overflow: hidden;
    pointer-events: auto; /* 確保菜單可以接收點擊事件 */
    /* 創建新的堆疊上下文，確保菜單內容在正確層級 */
    isolation: isolate;
}

.comment-action-menu ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    position: relative;
    z-index: 1;
}

.comment-action-menu li {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.comment-action-menu li:hover {
    background-color: #f9fafb;
}

.comment-action-menu li.text-red-600:hover {
    background-color: #fef2f2;
}

/* === 分隔線樣式 === */
.elegant-divider {
    border-top: 1px solid #E9EAEB;
    height: 0;
    margin: 24px 0; /* 與整體設計保持一致的間距 */
    padding: 0;
    overflow: visible;
}

/* === 響應式設計 === */
@media (max-width: 640px) {
    .comment-item {
        margin-bottom: 16px; /* 手機版使用較小的間距 */
    }
    
    .comment-item.reply-comment {
        margin: 12px 0 12px 0;
        padding-left: 52px; /* 保持一致的縮排 */
    }
    .comment-item.deleted {
        margin-bottom: 16px; /* 與普通評論保持一致 */
        padding-right: 8px;
    }
    
    /* 手機端評論內容區域 */
    .comment-item .comment-body-wrapper {
        max-width: calc(100% - 28px);
    }
    
    /* 手機端用戶信息區域 */
    .comment-item .flex.justify-between.items-center > div:first-child {
        max-width: calc(100% - 28px);
        padding-right: 6px;
        flex-wrap: nowrap;
        gap: 6px;
    }
    
    /* 手機端用戶名稱 - 根據 Figma 設計調整 */
    .comment-item .username {
        max-width: 80px;
        font-size: 14px; /* 保持與桌面版一致 */
        font-weight: 500;
        color: #414651; /* 保持與桌面版一致的顏色 */
    }
    
    /* 手機端時間戳 - 根據 Figma 設計調整 */
    .comment-item .created-at {
        font-size: 12px; /* 保持與桌面版一致 */
        font-weight: 400;
        color: #535862; /* 保持與桌面版一致的顏色 */
    }
    
    /* 手機端回覆指示器 - 根據 Figma 設計調整 */
    .reply-indicator {
        font-size: 11px; /* 手機版稍微縮小 */
        gap: 3px;
        flex-shrink: 0;
        max-width: 80px;
        color: #535862; /* 保持與桌面版一致的顏色 */
    }
    
    .reply-indicator i {
        font-size: 10px;
        width: 10px;
        height: 10px;
        color: #A4A7AE; /* 保持與桌面版一致的圖標顏色 */
    }
    
    /* 手機端菜單按鈕 */
    .comment-menu-trigger {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        color: #A4A7AE; /* 保持與桌面版一致的顏色 */
        z-index: 10000 !important; /* 確保在手機版也有足夠高的 z-index */
    }
    
    .comment-item .flex.justify-between.items-center > .relative {
        width: 24px !important;
        height: 24px !important;
        z-index: 10000 !important; /* 確保手機版菜單容器也有足夠高的 z-index */
    }
    
    /* 手機端圖片容器 */
    .comment-images-grid .scrollable-image-row {
        padding-right: 16px;
    }
    
    .comment-images-grid .scrollable-image-row .image-container {
        height: 100px;
        min-width: 100px !important;
        max-width: 150px;
    }
    
    /* 手機端評論內容文字 - 根據 Figma 設計調整 */
    .comment-content {
        font-size: 15px; /* 手機版稍微縮小但保持可讀性 */
        line-height: 1.4em;
        color: #181D27; /* 保持與桌面版一致的顏色 */
        font-weight: 400;
    }
    
    /* 手機端互動按鈕 - 根據 Figma 設計調整 */
    .comment-item .heart-button,
    .comment-item .reply-button {
        gap: 2px;
        color: #535862; /* 保持與桌面版一致的顏色 */
    }
    
    .comment-item .flex.items-center.mt-2 {
        margin-top: 4px;
    }
    
    /* 手機端標題 - 根據 Figma 設計調整 */
    .sticky-header {
        padding: 12px 12px; /* 手機版減少左右 padding */
        height: 64px !important; /* 保持 Figma 設計的高度 */
        min-height: 64px !important;
        max-height: 64px !important;
    }
    
    .sticky-header h2 {
        font-size: 18px; /* 保持與桌面版一致 */
        font-weight: 600;
        color: #181D27; /* 保持與桌面版一致的顏色 */
    }
    
    .discussion-container {
        padding: 0 16px 120px; /* 手機版調整 padding，根據 Figma 設計減少底部間距 */
    }
    
    .comment-input-area {
        padding: 16px; /* 根據 Figma 手機版設計 */
    }
    
    .comment-input-area .enhanced-input {
        padding: 10px 12px;
    }
    
    .comment-input-area .message-input {
        font-size: 14px;
        color: #181D27; /* 保持與評論內容一致的顏色 */
    }
    
    .comment-input-area .message-input::placeholder {
        color: #717680; /* 根據 Figma 設計的佔位符顏色 */
    }
}

/* === 桌面版留言框設置 === */
@media (min-width: 801px) {
    /* 確保桌面版 detail-container 有正確的定位上下文 */
    #detail-container {
        position: relative !important; /* 桌面版使用 relative 提供穩定的定位上下文 */
    }

    /* 確保桌面版留言框只在visible時顯示並固定在底部 */
    #detail-container.visible .comment-input-area,
    #detail-container.visible > .discussion-container > .comment-input-area {
        position: absolute !important; /* 桌面版：相對於 detail-container */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #F5F5F5 !important;
        border-top: 1px solid #E9EAEB !important;
        border-radius: 0 0 24px 24px !important; /* 跟隨 detail-container 的圓角 */
        padding: 16px !important;
        z-index: 10001 !important; /* 比評論菜單更高的z-index，確保覆蓋所有元素 */
        min-height: 84px !important;
        max-height: 50vh !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        pointer-events: auto !important; /* 確保可以接收事件 */
    }

    /* 桌面版討論容器設置 - 確保不會影響留言框定位 */
    #detail-container.visible .discussion-container {
        position: static !important; /* 改為 static，避免創建新的定位上下文 */
        padding-bottom: 160px !important; /* 桌面版為留言框留出空間 */
        overflow-y: auto !important; /* 確保內容可以滾動 */
        overflow-x: hidden !important;
        height: calc(100% - 160px) !important; /* 減去留言框高度 */
        padding-top: 64px !important; /* header 高度 + 間距 */
        margin: 0 !important;
        flex: 1 !important; /* 讓討論容器占據剩餘空間 */
        box-sizing: border-box !important;
    }

    /* 桌面版確保留言框內元素有正確的層級 */
    #detail-container.visible .comment-input-area * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* === 交互元素 === */
.close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #A4A7AE;
    background-color: transparent;
    padding: 10px;
}

.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 載入提示 */
.loading-animation {
    text-align: center;
    padding: 20px 0;
}

/* === 診所引用樣式 === */
.clinic-reference {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* border: 1px solid rgba(0, 0, 0, 0.3); */
    border-radius: 8px;
    padding: 6px 4px 6px 12px;
}

.clinic-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.clinic-info {
    flex: 1;
    min-width: 0;
}

.clinic-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clinic-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4285714285714286em;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clinic-type {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5em;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clinic-link {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
    text-decoration: none;
}

.clinic-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 分隔線 */
.elegant-divider {
    border-top: 1px solid #E9EAEB;
    height: 0;
    margin: 24px 0; /* 與整體設計保持一致的間距 */
    padding: 0;
    overflow: visible;
}

/* === 圖片滑動功能樣式 === */
.scrollable-image-row {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.scrollable-image-row.active-drag {
    cursor: grabbing;
}

.scrollable-image-row::-webkit-scrollbar {
    height: 4px;
}

.scrollable-image-row::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.scrollable-image-row::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.scrollable-image-row::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 滑動指示器 - 改進邏輯，只在真正可滑動時顯示 */
.scrollable-image-row[data-scrollable="true"]::after {
    content: "← 滑動查看更多 →";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #666;
    opacity: 0.7;
    pointer-events: none;
    white-space: nowrap;
}

/* 當在最左側時，只顯示向右滑動的提示 */
.scrollable-image-row[data-scrollable="true"][data-scroll-left="0"]::after {
    content: "滑動查看更多 →";
}

/* 當在最右側時，只顯示向左滑動的提示 */
.scrollable-image-row[data-scrollable="true"][data-scroll-right="end"]::after {
    content: "← 滑動查看更多";
}

/* 當滑動到末尾或內容不可滑動時，隱藏提示 */
.scrollable-image-row[data-scrollable="false"]::after,
.scrollable-image-row[data-scroll-left="scrolled"][data-scroll-right="end"]::after {
    content: "";
    display: none;
}

/* === 用戶頭像和信息樣式 === */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 28px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
    flex-shrink: 0;
}

/* 回覆指示器圖標 - 根據 Figma 設計調整 */
.reply-indicator svg {
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.reply-indicator:hover svg {
    opacity: 1;
}

/* 評論氣泡和內容 */
.comment-bubble {
    position: relative;
    z-index: 5;
    margin-top: 0px;
    background-color: transparent;
    border-radius: 0px;
    padding: 0px;
    border: none;
    transition: none;
    max-width: 100%;
    box-sizing: border-box;
}

/* === 回復功能樣式 === */
.comment-input-area .enhanced-input.replying {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.comment-input-area form.replying {
    background-color: rgba(59, 130, 246, 0.02);
    border-radius: 8px;
    padding: 16px;
    margin: -16px;
}

.cancel-reply-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cancel-reply-button:hover {
    background-color: #E5E7EB;
    color: #374151;
    border-color: #D1D5DB;
}

.cancel-reply-button i {
    font-size: 11px;
}

/* 回復狀態下的消息輸入框樣式 */
.comment-input-area form.replying .message-input::placeholder {
    color: #3B82F6;
    font-style: italic;
}

/* 手機版 detail-container 高度修正 - 根據 Figma 960px 設計 */
@media (max-width: 800px) {
    #detail-container {
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0px !important;
        position: fixed !important; /* 手機版使用 fixed 定位 */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        z-index: 1009 !important; /* 確保低於留言框的 z-index */
        background-color: #F5F5F5 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* 確保內容區域根據 Figma 設計正確計算高度（手機版） */
    #detail-container .discussion-container {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        padding-top: 80px !important; /* Figma 手機版設計：64px header + 32px 間距 */
        padding-left: 16px !important; /* Figma 設計的左右間距 */
        padding-right: 16px !important;
        padding-bottom: 132px !important; /* 為固定在屏幕底部的留言框留出空間 */
        background-color: #F5F5F5 !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        position: static !important; /* 手機版也使用 static */
    }

    /* 手機版評論項目間距 - 根據 Figma 設計調整 */
    #detail-container .comment-item {
        margin-bottom: 16px !important; /* Figma 手機版設計中的評論間距 */
    }

    #detail-container .comment-item.reply-comment {
        margin: 16px 0 16px 0 !important; /* 回覆評論間距 */
        padding-left: 52px !important; /* 40px 頭像 + 12px 間距 */
    }

    /* 手機版頭部區域 - 嚴格按照 Figma 64px 高度 */
    #detail-container .sticky-header {
        position: absolute !important; /* 改回 absolute，相對於 detail-container */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important; /* Figma 設計的精確高度 */
        min-height: 64px !important;
        max-height: 64px !important;
        z-index: 1015 !important;
        padding: 12px 16px !important; /* Figma 設計的內邊距 */
        background-color: #F5F5F5 !important;
        border-bottom: 1px solid #E9EAEB !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 手機版評論容器 - 根據 Figma 設計 */
    #detail-container #comments-container {
        padding: 0 !important; /* 因為父容器已有 padding */
    }

    /* 手機版留言框只在visible時固定在整個屏幕底部 */
    #detail-container.visible .comment-input-area,
    #detail-container.visible > .discussion-container > .comment-input-area {
        position: fixed !important; /* 手機版：固定在整個屏幕底部 */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important; /* 使用視窗寬度 */
        min-height: 84px !important;
        max-height: 50vh !important;
        height: auto !important;
        background: #F5F5F5 !important;
        border-top: 1px solid #E9EAEB !important;
        border-radius: 0 !important; /* 手機版全屏，移除圓角 */
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05) !important; /* 添加陰影增強層次感 */
        z-index: 10001 !important; /* 確保在所有元素之上，包括評論菜單 */
        padding: 16px !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
    }

    /* 手機版確保留言框不會被其他元素覆蓋 */
    #detail-container.visible .comment-input-area * {
        position: relative !important;
        z-index: 1 !important;
    }

    /* 手機版診所引用區域 - 根據 Figma 設計調整間距 */
    #detail-container .clinic-reference {
        margin: 0 0 16px 0 !important; /* 與評論項目保持一致的底部間距 */
    }

    /* 手機版帖子詳情容器 - 根據 Figma 設計調整間距 */
    #detail-container #post-detail-container {
        padding: 0 !important; /* 移除額外的 padding，父容器已有間距 */
        margin-bottom: 24px !important; /* 與評論區域的間距 */
    }

    /* 手機版分隔線 - 根據 Figma 設計調整間距 */
    #detail-container .elegant-divider {
        margin: 24px 0 !important; /* 與整體設計保持一致的間距 */
    }

    /* iOS Safari 特殊處理 */
    @supports (-webkit-appearance: none) {
        #detail-container {
            height: 100vh !important;
            height: -webkit-fill-available !important;
            max-height: 100vh !important;
            max-height: -webkit-fill-available !important;
        }
    }
}

/* 手機版圖片預覽區域 - 根據 Figma 設計調整間距 */
#detail-container.visible .comment-input-area #comment-image-preview-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Figma 設計的圖片間距 */
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#detail-container.visible .comment-input-area .comment-preview-image {
    height: 80px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #E9EAEB !important;
    flex-shrink: 0 !important;
}

/* 手機版輸入框容器 - 根據 Figma 設計 */
#detail-container.visible .comment-input-area .enhanced-input {
    flex-shrink: 0 !important;
    min-height: 44px !important; /* Figma 設計的最小高度 */
    max-height: none !important;
    border-radius: 8px !important; /* Figma 設計的圓角 */
    border: 1px solid #D5D7DA !important; /* Figma 設計的邊框顏色 */
    padding: 12px 14px !important; /* Figma 設計的內邊距 */
}

/* === 留言輸入區域基本樣式 === */
.comment-input-area .enhanced-input {
    border: 2px solid #BE9F34;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #181D27;
    border-radius: 8px;
    padding: 12px 14px;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.comment-input-area .enhanced-input:focus-within {
    outline: none;
    border-color: #BE9F34;
}

.comment-input-area .message-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    color: #181D27;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.comment-input-area .message-input::placeholder {
    color: #717680;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
}

.comment-input-area .message-input:focus { 
    outline: none;
    box-shadow: none;
}

/* 操作按鈕區域 */
.comment-input-area .message-input-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.comment-input-area .image-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A4A7AE;
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    transition: background-color 0.2s ease;
}

.comment-input-area .image-upload-btn:hover {
    background-color: rgba(164, 167, 174, 0.1);
}

.comment-input-area .image-upload-btn i {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* 評論按鈕 */
.comment-submit-btn,
.comment-input-area .submit-button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4285714285714286em;
    color: #835E25;
    background-color: transparent;
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.2s ease;
}

.comment-submit-btn:hover,
.comment-input-area .submit-button:hover {
    background-color: rgba(131, 94, 37, 0.1);
}

.comment-submit-btn:disabled,
.comment-input-area .submit-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === 優美的滾動條樣式 === */

/* 主要的討論容器滾動條 */
.discussion-container {
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

.discussion-container::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.discussion-container::-webkit-scrollbar-track {
    background: rgba(245, 245, 245, 0.1);
    border-radius: 4px;
    margin: 4px 0;
}

.discussion-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(139, 139, 139, 0.4) 0%, rgba(139, 139, 139, 0.2) 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    min-height: 20px;
}

.discussion-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.6) 0%, rgba(99, 102, 241, 0.4) 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    transform: scaleX(1.2);
}

.discussion-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.8) 0%, rgba(99, 102, 241, 0.6) 100%);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3);
}

/* Detail container 整體滾動條 */
#detail-container {
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

#detail-container::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

#detail-container::-webkit-scrollbar-track {
    background: rgba(233, 234, 235, 0.3);
    border-radius: 4px;
}

#detail-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(139, 139, 139, 0.4) 0%, rgba(139, 139, 139, 0.2) 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

#detail-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.6) 0%, rgba(99, 102, 241, 0.4) 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* 評論容器滾動條 */
#comments-container {
    /* Firefox 滾動條樣式 */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
}

#comments-container::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

#comments-container::-webkit-scrollbar-track {
    background: rgba(245, 245, 245, 0.5);
    border-radius: 3px;
}

#comments-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(165, 180, 252, 0.6) 0%, rgba(165, 180, 252, 0.3) 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
}

#comments-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.7) 0%, rgba(99, 102, 241, 0.4) 100%);
    box-shadow: 0 1px 6px rgba(99, 102, 241, 0.3);
}

/* 圖片滾動區域的滾動條改進 */
.comment-images-grid .image-grid::-webkit-scrollbar,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar {
    height: 4px;
    background: transparent;
}

.comment-images-grid .image-grid::-webkit-scrollbar-track,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-track {
    background: rgba(229, 231, 235, 0.6);
    border-radius: 2px;
    margin: 0 4px;
}

.comment-images-grid .image-grid::-webkit-scrollbar-thumb,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.5) 0%, rgba(168, 85, 247, 0.3) 100%);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.comment-images-grid .image-grid::-webkit-scrollbar-thumb:hover,
.comment-images-grid .scrollable-image-row::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.7) 0%, rgba(168, 85, 247, 0.5) 100%);
    box-shadow: 0 1px 4px rgba(168, 85, 247, 0.3);
}

/* 手機版滾動條優化 */
@media (max-width: 800px) {
    .discussion-container::-webkit-scrollbar {
        width: 4px;
    }
    
    .discussion-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(139, 139, 139, 0.3) 0%, rgba(139, 139, 139, 0.1) 100%);
        border-radius: 2px;
        border: none;
    }
    
    .discussion-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0.2) 100%);
        transform: none;
        box-shadow: none;
    }
    
    #detail-container::-webkit-scrollbar {
        width: 3px;
    }
    
    #detail-container::-webkit-scrollbar-thumb {
        background: rgba(139, 139, 139, 0.2);
        border-radius: 2px;
        border: none;
    }
    
    #comments-container::-webkit-scrollbar {
        width: 3px;
    }
    
    #comments-container::-webkit-scrollbar-thumb {
        background: rgba(165, 180, 252, 0.4);
        border-radius: 2px;
    }
}

/* 深色模式下的滾動條樣式 */
@media (prefers-color-scheme: dark) {
    .discussion-container {
        scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
    }
    
    .discussion-container::-webkit-scrollbar-track {
        background: rgba(55, 65, 81, 0.3);
    }
    
    .discussion-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(156, 163, 175, 0.5) 0%, rgba(156, 163, 175, 0.3) 100%);
        border: 1px solid rgba(55, 65, 81, 0.3);
    }
    
    .discussion-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(129, 140, 248, 0.6) 0%, rgba(129, 140, 248, 0.4) 100%);
        box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
    }
    
    #detail-container::-webkit-scrollbar-track {
        background: rgba(31, 41, 55, 0.4);
    }
    
    #detail-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(156, 163, 175, 0.5) 0%, rgba(156, 163, 175, 0.3) 100%);
        border: 1px solid rgba(55, 65, 81, 0.3);
    }
    
    #detail-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(129, 140, 248, 0.6) 0%, rgba(129, 140, 248, 0.4) 100%);
    }
}