/* Notification dropdown — shared component.
   Extracted from components.css (CSS split, CLAUDE.md §12).
   Consumed by frontend/js/components/notifications.js. */
@layer components {

/* ── Notification dropdown ────────────────────────────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}

/* #btn-notifications anchors .notif-panel's position:absolute. #topbar
   itself needs no rule here for the same purpose — layout.css's own
   `#topbar { position: sticky; ... }` already establishes that positioning
   context (any position other than static does); an earlier `#topbar {
   position: relative }` override lived here for it instead, which — since
   this file's @layer components is declared after layout.css's @layer
   layout (base.css) — silently won every cascade tie against that sticky
   value and kept the real topbar from ever actually pinning while
   scrolling, app-wide. It is also #notif-badge's positioning context. */
#btn-notifications { position: relative; }

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
}

.notif-title { font-weight: 600; font-size: var(--text-sm); }

.notif-mark-all {
  font-size: var(--text-sm);
  color: var(--primary);
  padding: 0;
}

.notif-list {
  max-height: 380px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
  background: var(--p-50); /* unread tint — "new," not "something's wrong" */
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-sunk); }
.notif-item.notif-read { background: var(--surface); }

.notif-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

.notif-body { flex: 1; min-width: 0; }

.notif-text {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text);
}

.notif-time {
  font-size: 0.72rem;
  margin-top: 2px;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}

.notif-empty {
  padding: var(--space-6);
  text-align: center;
}

.notif-loading {
  padding: var(--space-4);
  text-align: center;
}

/* Birthday welcome fireworks. A staged set of rising comets, two-ring bursts,
   and a soft sky glow makes the moment unmistakably celebratory without ever
   intercepting input or covering the simultaneous welcome toast. */
.birthday-fireworks {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(1.18);
}

.birthday-fireworks::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(251, 191, 36, .18), transparent 17%),
    radial-gradient(circle at 77% 18%, rgba(96, 165, 250, .2), transparent 19%),
    radial-gradient(circle at 48% 45%, rgba(192, 132, 252, .16), transparent 22%),
    radial-gradient(circle at 24% 70%, rgba(52, 211, 153, .14), transparent 18%);
  opacity: 0;
  animation: birthday-firework-sky-glow 4.9s ease-out both;
}

.birthday-firework {
  --firework-delay: .55s;
  --firework-distance: -124px;
  --firework-inner-distance: -76px;
  --firework-launch-distance: 42vh;
  position: absolute;
  width: 8px;
  height: 8px;
  color: #fbbf24;
}
.birthday-firework--1 { top: 23%; left: 17%; --firework-delay: .55s; --firework-distance: -130px; --firework-inner-distance: -78px; color: #fbbf24; }
.birthday-firework--2 { top: 18%; left: 78%; --firework-delay: 1.02s; --firework-distance: -148px; --firework-inner-distance: -92px; color: #60a5fa; }
.birthday-firework--3 { top: 45%; left: 49%; --firework-delay: 1.55s; --firework-distance: -166px; --firework-inner-distance: -102px; color: #c084fc; }
.birthday-firework--4 { top: 58%; left: 84%; --firework-delay: 2.08s; --firework-distance: -118px; --firework-inner-distance: -72px; color: #fb7185; }
.birthday-firework--5 { top: 69%; left: 22%; --firework-delay: 2.54s; --firework-distance: -140px; --firework-inner-distance: -86px; color: #34d399; }
.birthday-firework--6 { top: 29%; left: 56%; --firework-delay: 3.02s; --firework-distance: -108px; --firework-inner-distance: -66px; color: #f97316; }
.birthday-firework--7 { top: 74%; left: 63%; --firework-delay: 3.48s; --firework-distance: -128px; --firework-inner-distance: -78px; color: #fbbf24; }

.birthday-firework::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 4px currentColor, 0 0 24px 10px currentColor;
  opacity: 0;
  animation: birthday-firework-flash .58s ease-out var(--firework-delay) both;
}

.birthday-firework::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 76px;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, #fff, currentColor 26%, transparent 100%);
  box-shadow: 0 0 8px currentColor;
  opacity: 0;
  animation: birthday-firework-launch .62s cubic-bezier(.2, .72, .34, 1) calc(var(--firework-delay) - .5s) both;
}

.birthday-firework-spark {
  --firework-angle: 0deg;
  --spark-distance: var(--firework-distance);
  position: absolute;
  left: 1px;
  top: -9px;
  width: 5px;
  height: 21px;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, #fff 0 12%, currentColor 34% 70%, transparent);
  box-shadow: 0 0 11px 2px currentColor;
  opacity: 0;
  transform-origin: 50% 13px;
  animation: birthday-firework-spark 1.82s cubic-bezier(.14, .68, .22, 1) var(--firework-delay) both;
}
.birthday-firework-spark:nth-child(even) { --spark-distance: var(--firework-inner-distance); animation-duration: 1.48s; }
.birthday-firework-spark:nth-child(1)  { --firework-angle: 0deg; }
.birthday-firework-spark:nth-child(2)  { --firework-angle: 20deg; }
.birthday-firework-spark:nth-child(3)  { --firework-angle: 40deg; }
.birthday-firework-spark:nth-child(4)  { --firework-angle: 60deg; }
.birthday-firework-spark:nth-child(5)  { --firework-angle: 80deg; }
.birthday-firework-spark:nth-child(6)  { --firework-angle: 100deg; }
.birthday-firework-spark:nth-child(7)  { --firework-angle: 120deg; }
.birthday-firework-spark:nth-child(8)  { --firework-angle: 140deg; }
.birthday-firework-spark:nth-child(9)  { --firework-angle: 160deg; }
.birthday-firework-spark:nth-child(10) { --firework-angle: 180deg; }
.birthday-firework-spark:nth-child(11) { --firework-angle: 200deg; }
.birthday-firework-spark:nth-child(12) { --firework-angle: 220deg; }
.birthday-firework-spark:nth-child(13) { --firework-angle: 240deg; }
.birthday-firework-spark:nth-child(14) { --firework-angle: 260deg; }
.birthday-firework-spark:nth-child(15) { --firework-angle: 280deg; }
.birthday-firework-spark:nth-child(16) { --firework-angle: 300deg; }
.birthday-firework-spark:nth-child(17) { --firework-angle: 320deg; }
.birthday-firework-spark:nth-child(18) { --firework-angle: 340deg; }
.birthday-firework-spark:nth-child(6n + 1) { color: #fbbf24; }
.birthday-firework-spark:nth-child(6n + 2) { color: #fb7185; }
.birthday-firework-spark:nth-child(6n + 3) { color: #60a5fa; }
.birthday-firework-spark:nth-child(6n + 4) { color: #34d399; }
.birthday-firework-spark:nth-child(6n + 5) { color: #c084fc; }
.birthday-firework-spark:nth-child(6n)     { color: #f97316; }

@keyframes birthday-firework-sky-glow {
  0%, 7% { opacity: 0; }
  18%    { opacity: .82; }
  38%    { opacity: .28; }
  57%    { opacity: .68; }
  78%    { opacity: .24; }
  100%   { opacity: 0; }
}

@keyframes birthday-firework-launch {
  0%   { opacity: 0; transform: translate(-50%, var(--firework-launch-distance)) scaleY(.18); }
  12%  { opacity: .9; }
  82%  { opacity: 1; transform: translate(-50%, 8px) scaleY(.9); }
  100% { opacity: 0; transform: translate(-50%, 0) scaleY(.25); }
}

@keyframes birthday-firework-flash {
  0%   { opacity: 0; transform: scale(.1); }
  24%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

@keyframes birthday-firework-spark {
  0%   { opacity: 0; transform: rotate(var(--firework-angle)) translateY(0) scaleY(.25); }
  8%   { opacity: 1; }
  58%  { opacity: 1; transform: rotate(var(--firework-angle)) translateY(var(--spark-distance)) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--firework-angle)) translateY(var(--spark-distance)) scale(.12); }
}

@media (max-width: 600px) {
  .birthday-firework {
    --firework-distance: -82px;
    --firework-inner-distance: -50px;
    --firework-launch-distance: 34vh;
  }
  .birthday-firework--2, .birthday-firework--3, .birthday-firework--5 { --firework-distance: -96px; --firework-inner-distance: -58px; }
  .birthday-firework--1 { left: 16%; }
  .birthday-firework--2 { left: 80%; }
  .birthday-firework--4 { left: 86%; }
  .birthday-firework--5 { left: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-fireworks { display: none; }
}

} /* @layer components */