/* Dashboard activity feed: the bell's dropdown and live rows
   (dashboard-activity.js). Only linked on the dashboard page. */

.mission-notify { position: relative; justify-self: center; }

/* styles.css lays the badge out as a grid, which would override [hidden]. */
.mission-notification > span[hidden] { display: none; }
.mission-notification[aria-expanded="true"] { border-color: rgba(164, 101, 255, 0.45); background: rgba(139, 67, 246, 0.14); }

.mission-activity-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  z-index: 80;
  width: min(330px, calc(100vw - 24px));
  padding: 12px 12px 8px;
  border: 1px solid rgba(165, 106, 255, 0.24);
  border-radius: 10px;
  background: #080611;
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.55);
}
.mission-activity-popover[hidden] { display: none; }
.mission-activity-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mission-activity-popover > header b { display: block; color: #f1eafb; font-size: 11px; }
.mission-activity-popover > header small { display: block; margin-top: 2px; color: rgba(207, 198, 220, 0.5); font-size: 8px; }
.mission-activity-popover .mission-activity-list { max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.mission-activity-popover > footer { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mission-activity-popover > footer a { display: block; padding: 6px; color: #d9b8ff; border-radius: 6px; text-align: center; font-size: 9px; }
.mission-activity-popover > footer a:hover { background: rgba(136, 63, 241, 0.16); }

.mission-activity-row { border-radius: 6px; }
.mission-activity-row:focus-visible { outline-offset: 1px; }
.mission-activity-row.is-new { animation: mission-activity-arrive 1.8s ease-out; }

.mission-live-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #40df89;
  box-shadow: 0 0 0 0 rgba(64, 223, 137, 0.5);
  animation: mission-live-pulse 2.4s ease-out infinite;
}

@keyframes mission-activity-arrive {
  from { background: rgba(141, 60, 255, 0.28); }
  to { background: transparent; }
}
@keyframes mission-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(64, 223, 137, 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(64, 223, 137, 0); }
}

/* On phones the dropdown spans the sticky top bar, which it is positioned in. */
@media (max-width: 660px) {
  .mission-notify { position: static; }
  .mission-activity-popover { top: calc(100% + 6px); right: 10px; left: 10px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-activity-row.is-new,
  .mission-live-dot { animation: none; }
}

@media (forced-colors: active) {
  .mission-activity-popover { border: 1px solid CanvasText; }
  .mission-notification > span { forced-color-adjust: none; }
}