/* ── Red dot notification indicator ── */

.notif-red-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  pointer-events: none;
  z-index: 5;
  flex-shrink: 0;
  animation: notifDotPulse 2.5s ease-in-out infinite;
}

/*
 * Default: absolute badge in top-right corner.
 * The JS sets position:relative on the parent if needed.
 */
.notif-red-dot {
  position: absolute;
  top: 6px;
  right: 6px;
}

/*
 * Flex-row parents: dot flows inline at the end.
 * Advisor nav links, session cards, hub session rows, CTA buttons.
 */
a[data-notif-target] > .notif-red-dot,
div[data-notif-target][style*="flex"] > .notif-red-dot,
.advisor-nav-item > .notif-red-dot,
.advisor-session-card > .notif-red-dot,
.hub-session-row > .notif-red-dot,
.ss-cta-btn > .notif-red-dot {
  position: static;
  margin-left: auto;
}

/* Student sidebar nav-item <li>: dot beside the link text */
.nav-item[data-notif-target] > .notif-red-dot {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

@keyframes notifDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

.notif-red-dot.notif-dot-exiting {
  animation: notifDotExit .3s ease forwards;
}

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