#comment-display {
  max-height: 320px;
  overflow-y: auto;  
  font-size: 11px;       /* ukuran teks default */
  line-height: 1.35; 
  
  /* Kunci utama agar tetap rounded saat scroll */
  border-radius: 16px;
  overflow-x: hidden; /* pastikan konten tidak keluar samping */
  position: relative; /* menjaga konteks stacking */
  
  /* Hilangkan border jika ada, atau tambahkan border lembut */
  border: 1px solid #e5e5e5; 
  background: #ffffff;
}

/* Kustomisasi Scrollbar agar tidak merusak visual sudut (Opsional) */
#comment-display::-webkit-scrollbar {
  width: 6px;
}
#comment-display::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 10px;
}
.select-caret-down-wrapper i{
  font-size: 14px;
  color: var(--main-color);
}


/* Kartu utama */
.comment-card {
  background: transparent;  /* karena wrapper sudah putih */
  border-radius: 0;         /* biar tidak dobel radius */
  padding: 14px 16px;
  box-shadow: none;         /* optional: bisa tetap pakai kalau mau */
}


/* Satu blok komentar */
.comment-item {
  padding: 2px 0;
}

/* Baris nama */
.comment-item-name {
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Titik hijau / merah hadir / tidak hadir */
.comment-item-name .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Isi pesan */
.comment-item-message {
  margin-bottom: 4px;
}

/* Jumlah hadir (opsional) */
.comment-item-count {
  font-size: 10px;
  margin-bottom: 2px;
}

/* Waktu */
.comment-item-time {
  font-size: 10px;
  color: #888;
}

.comment-divider {
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 10px 12px;   /* sebelumnya 10px 0, sekarang ada jarak kiri-kanan */
}