a {
    text-decoration: none !important;
}

/* Container utama */
.message-popup {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    margin-top: 10px;
    z-index: 1050;
    border-radius: 8px;
    overflow: hidden;
    /* Gunakan warna pembolehubah dari app.css anda */
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Header Popup */
.popup-header {
    padding: 12px 15px;
    background-color: var(--bs-body-bg, #ffffff);
    /*background-color: var(--bs-tertiary-bg, #f8f9fa);*/
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}

/* Item Pesan */
.msg-item {
    display: flex;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--bs-body-color, #212529);
    border-bottom: 1px solid var(--bs-border-color, #f0f0f0);
    transition: background 0.2s;
}

/* Hover State - Menyokong Dark/Light */
/* Untuk Mode Terang */
.msg-item:hover {
    background-color: #f0f0f0 !important; /* Abu-abu muda terang */
    color: #000000 !important;
}

/* Untuk Mode Gelap (Jika body memiliki class .dark) */
body.dark .msg-item:hover {
    background-color: #2c3034 !important; /* Abu-abu gelap kebiruan */
    color: #ffffff !important;
}


/* Warna saat item ditekan (Click State) */
.msg-item:active {
    background-color: var(--bs-light-border-subtle, #dae0e5); /* Warna sedikit lebih gelap dari hover */
    transform: scale(0.98); /* Efek sedikit mengecil saat ditekan */
    transition: all 0.1s ease;
}

/* Khusus Mode Gelap (Dark Mode) */
body.dark .msg-item:active {
    background-color: #2c3034; /* Warna abu-abu gelap untuk feedback klik */
}

/* Teks dan Subteks */
.msg-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--bs-heading-color, inherit);
}

.msg-item span {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Mode Tersembunyi */
.message-popup.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
}

/* Penyesuaian khusus jika class .dark aktif */
body.dark .message-popup {
    background-color: #1a1d21; /* Warna gelap konsisten dengan app.css */
    border-color: #33393f;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}