/* === 基础布局 === */
#detail-container:not(.visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important; /* 完全移除從文檔流中 */
}

#detail-container.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important; /* 恢復為flex佈局 */
}

#detail-container {
    height: 100%;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent this container from scrolling */
    background-color: #F5F5F5;
    position: relative;
    border: 1px solid #E9EAEB;
    border-radius: 24px;
    box-sizing: border-box;
    z-index: 10;
}

/* 容器內所有元素禁用過渡效果，但保留必要的動畫 */
#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; /* Grow to fill available space */
    overflow-y: auto; /* This container will scroll */
    overflow-x: hidden !important;
    background-color: #F5F5F5;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 16px; /* Simplified padding */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 139, 139, 0.3) transparent;
    display: flex; /* Use flex for content spacing */
    flex-direction: column; /* Stack content vertically */
}

/* 固定寬度的標題欄 - 根據 Figma 64px 高度調整 */
.sticky-header {
    position: static; /* Let it be part of the flex flow */
    flex-shrink: 0; /* Prevent from shrinking */
    z-index: 100 !important;
    background-color: #F5F5F5;
    padding: 12px 16px;
    border-bottom: 1px solid #E9EAEB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    height: auto;
    min-height: 64px;
    box-sizing: border-box;
}

.sticky-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5em; /* 調整行高以適應多行 */
    color: #181D27; /* Figma 設計的精確顏色 */
    width: calc(100% - 40px);
    white-space: normal; /* 允許換行 */
    overflow: visible; /* 確保內容可見 */
    text-overflow: clip; /* 移除省略號 */
    word-break: break-word; /* 避免長單詞溢出 */
}

/* === 評論容器和項目 === */
#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-top: 12px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 根據 Figma 設計統一內文大小 */
    line-height: 1.5em; /* 根據 Figma 設計統一內文行高 */
    color: #181D27; /* 根據 Figma 設計統一內文顏色 */
}

#post-detail-container p {
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 1em; /* 為段落添加間距 */
}

/* 評論項目 - 根據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: 32px; /* 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: 8px; /* 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;
    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);
     
    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;
}

.user-avatar.deleted-avatar {
    background-color: #e5e7eb; /* A light gray */
    color: #6b7280; /* A darker gray for the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Make the icon larger */
}

/* 隱藏被刪除評論的元素 */
.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: 12px;
    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: 12px 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: #F9F9F9;
    border: 1px solid #e5e7eb;
}

.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;
    cursor: pointer;
}

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

.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,
.post-action-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px; /* Figma: 6px */
    z-index: 10000 !important; /* 最高層級，確保覆蓋所有其他元素 */
    min-width: 140px; /* Match post menu */
    overflow: hidden;
    pointer-events: auto; /* 確保菜單可以接收點擊事件 */
    /* 創建新的堆疊上下文，確保菜單內容在正確層級 */
    isolation: isolate;
}

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

.comment-action-menu li,
.post-action-menu li {
    padding: 8px 12px; /* Match post menu */
    margin: 1px 6px; /* Match post menu */
    border-radius: 6px; /* Match post menu */
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 14px;
    font-weight: 600; /* Match post menu */
    font-family: 'Inter', sans-serif; /* Match post menu */
    color: #414651; /* Match post menu */
    display: flex;
    align-items: center;
    gap: 8px; /* Match post menu */
    position: relative;
    z-index: 1;
}

.comment-action-menu li:hover,
.post-action-menu li:hover {
    background-color: #f8f9fa; /* Match post menu hover */
}

.comment-action-menu li.text-red-600,
.comment-action-menu li.danger,
.post-action-menu li.text-red-600,
.post-action-menu li.danger {
    color: #B42318; /* Match post menu delete/report */
}

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

.comment-action-menu li svg,
.post-action-menu li svg {
    width: 16px;
    height: 16px;
}

.comment-action-menu li svg path,
.post-action-menu li svg path {
    stroke: #A4A7AE; /* Default icon color */
    transition: stroke 0.15s ease;
}

.comment-action-menu li:hover svg path,
.post-action-menu li:hover svg path {
    stroke: #414651; /* Hover icon color */
}

.comment-action-menu li.danger svg path,
.post-action-menu li.danger svg path {
    stroke: #F97066; /* Danger icon color */
}

.comment-action-menu li.danger:hover svg path,
.post-action-menu li.danger:hover svg path {
    stroke: #B42318; /* Danger hover icon color */
}

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

/* === 響應式設計 === */

/* Base styles are for desktop > 768px */
.comment-input-area {
    flex-shrink: 0; /* Prevent form from shrinking */
    background-color: #F5F5F5 !important;
    border-top: 1px solid #E9EAEB !important;
    border-radius: 0 0 24px 24px !important;
    padding: 16px !important;
    z-index: 100 !important;
}

/* Remove conflicting/redundant rules */
/*
#detail-container.visible .comment-input-area,
#detail-container.visible > .discussion-container > .comment-input-area,
#detail-container.visible .discussion-container {
    all: unset;
}
*/

/* Remove the broken media query block */
/* @media (max-width: 1024px) { ... } */

/* Small screens (tablets and phones) */
@media (max-width: 768px) {
    #detail-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 1009 !important;
    }

    .discussion-container {
        padding-bottom: 132px !important; /* Space for the fixed comment form */
    }

    #detail-container .sticky-header {
        /* On mobile, the header scrolls with content */
        position: static !important;
    }

    .comment-input-area {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        width: 100% !important; /* Ensure it is full-width */
        box-sizing: border-box !important; /* Ensure padding is included in the width */
        border-radius: 0 !important;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
        z-index: 10001 !important;
    }

    @supports (-webkit-appearance: none) {
        #detail-container {
            height: -webkit-fill-available !important;
        }
    }
}

/* === 交互元素 === */
.close-btn {
    width: 36px;
    height: 36px;
    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);
     
    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;
    background-color: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 12px;
    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;
}
/*  */

/* 手機版圖片預覽區域 - 根據 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);
}

.post-menu-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

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

/* === 圖片懶載入樣式 === */
img[data-src] {
    background-color: #f3f4f6;
    background-image: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

img[data-src]::before {
    content: '📷';
    font-size: 24px;
    color: #9ca3af;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* 載入中狀態 */
img.loading {
    background-image: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1s ease-in-out infinite;
    opacity: 0.8;
}

img.loading::before {
    content: '⏳';
    animation: pulse 1s ease-in-out infinite;
}

/* 載入完成狀態 */
img.loaded {
    background: none;
    animation: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

img.loaded::before {
    display: none;
}

/* 載入錯誤狀態 */
img.error {
    background-color: #fef2f2;
    background-image: none;
    animation: none;
    border: 1px solid #fecaca;
}

img.error::before {
    content: '❌';
    color: #ef4444;
}

/* 閃爍動畫 */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 脈衝動畫 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 優化圖片容器載入狀態 */
.comment-images-grid .image-container img[data-src] {
    min-height: 120px;
    width: 100%;
}

.comment-images-grid .image-container.loading {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* 圖片載入優化 - 避免佈局位移 */
.comment-images-grid .image-container {
    position: relative;
    min-height: 120px; /* 確保容器有最小高度 */
}

/* 圖片容器過渡效果 */
.comment-images-grid .image-container img {
    transition: opacity 0.3s ease-in-out, transform 0.2s ease;
}

/* 圖片載入完成時的淡入效果 */
.comment-images-grid .image-container img.loaded {
    animation: fadeInImage 0.5s ease-in-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 提升圖片容器的整體性能 */
.comment-images-grid .image-container {
    will-change: transform; /* 優化GPU加速 */
    backface-visibility: hidden; /* 避免閃爍 */
}

/* 圖片錯誤狀態的重試按鈕 */
.comment-images-grid .image-container.error::after {
    content: '點擊重試';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.comment-images-grid .image-container.error:hover::after {
    background: rgba(0, 0, 0, 0.9);
}