/* Notification dropdown — neutral styling, works on both light (client) and dark (dev) themes */

.ndd-wrap{
  width: 340px; max-height: 460px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: #111827;
}

.ndd-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #F3F4F6;
}
.ndd-title{ font-size: 13px; font-weight: 700; color: #111827; }
.ndd-mark{
  font-size: 11px; font-weight: 600; color: #4F46E5;
  background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 5px;
  font-family: inherit;
}
.ndd-mark:hover{ background: #F3F4F6; }

.ndd-list{ flex: 1; overflow-y: auto; max-height: 400px; }
.ndd-loading,
.ndd-empty{
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: #9CA3AF;
}

.ndd-item{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #F9FAFB;
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.ndd-item:hover{ background: #FAFAFA; }
.ndd-item:last-child{ border-bottom: none; }

.ndd-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; margin-top: 5px; flex-shrink: 0;
}
.ndd-item.ndd-unread .ndd-dot{ background: #4F46E5; }

.ndd-content{ flex: 1; min-width: 0; }
.ndd-itemtitle{ font-size: 12px; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 3px; }
.ndd-msg{
  font-size: 11px; color: #6B7280; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ndd-time{ font-size: 10px; color: #9CA3AF; margin-top: 4px; }

.ndd-item.ndd-unread{ background: rgba(99,102,241,0.04); }
.ndd-item.ndd-unread .ndd-itemtitle{ color: #1f2937; }

/* Dark scrollbar inside the list */
.ndd-list::-webkit-scrollbar{ width: 4px; }
.ndd-list::-webkit-scrollbar-thumb{ background: #E5E7EB; border-radius: 2px; }