/* x-cloak 숨김 처리 */
[x-cloak] {
  display: none !important;
}

/* 위젯 전체 스타일 */
.latest-comments {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 심플한 헤더 스타일 */
.latest-comments header {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.latest-comments header h6 {
  font-size: 0.95rem;
  color: var(--bs-body-color);
}

.latest-comments header .btn-link {
  color: var(--bs-link-color);
  font-size: 0.85rem;
}

.latest-comments header .btn-link:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline !important;
}

.latest-comments .comment-list-container {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bs-body-tertiary);
  border: 1px solid var(--bs-border-color);
}

/* 댓글 아이템 호버 효과 */
.latest-comments .comment-item {
  background-color: transparent;
  border-bottom: 1px solid var(--bs-border-color) !important;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.latest-comments .comment-item:hover {
  background-color: var(--bs-primary-bg-subtle);
  transform: translateX(2px);
}

.latest-comments .comment-item:last-child {
  border-bottom: none !important;
}

/* 프로필 이미지 호버 효과 */
.latest-comments .comment-item:hover img {
  transform: scale(1.05);
}

.latest-comments .comment-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  object-fit: cover;
}

/* 스크롤바 스타일링 */
.latest-comments .comment-list-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--bs-primary-rgb), 0.2) transparent;
}

.latest-comments .comment-list-container::-webkit-scrollbar {
  width: 4px;
}

.latest-comments .comment-list-container::-webkit-scrollbar-track {
  background: transparent;
}

.latest-comments .comment-list-container::-webkit-scrollbar-thumb {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  border-radius: 10px;
}

.latest-comments .comment-list-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* 기본 아바타 스타일 */
.latest-comments img[src^="data:image/svg"] {
  background-color: var(--bs-secondary-bg);
}