/* ==========================================================================
   notifications.css — the bell dropdown and the notifications page
   (notifications.php renders the same markup for both)

   Always loaded, like the other component sheets, because notifications.php
   emits this markup whether or not the modern layer is on. Tokens carry
   literal fallbacks.
   ========================================================================== */

.cs-notif-list { display: flex; flex-direction: column; }

.cs-notif {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 2px;
  border-top: 1px solid var(--cs-line, rgba(15, 15, 25, 0.07));
  color: inherit !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.cs-notif:first-child { border-top: 0; }

.cs-notif-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cs-surface-3, #eeeef2);
}
.cs-notif-avatar.is-empty { display: block; }

.cs-notif-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-notif-title {
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--cs-ink-2, #3a3a44);
  overflow-wrap: anywhere;
}
.cs-notif.is-unread .cs-notif-title { font-weight: 640; color: var(--cs-ink, #0b0b10); }

/* The message was wrapped in quotes and italics; it is a quotation by position */
.cs-notif-text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--cs-muted, #6b6b76);
  overflow-wrap: anywhere;
}

/* Was "(20 hour(s) ago)" in italic parentheses at 30% opacity */
.cs-notif-time {
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-faint, #9a9aa5);
}

.cs-notif-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--cs-accent, #2f6fed);
}

.cs-notif-empty {
  padding: 22px 2px;
  text-align: center;
  font-size: 14px;
  color: var(--cs-faint, #9a9aa5);
}

/* Was a full-width blue uppercase slab under the list */
.cs-notif-all {
  display: block;
  margin-top: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--cs-line, rgba(15, 15, 25, 0.07));
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-accent, #2f6fed) !important;
  text-decoration: none !important;
}
.cs-notif-all:hover { color: var(--cs-ink, #0b0b10) !important; }

/* The dropdown itself */
#notificationsmodal { padding: 6px 18px 12px !important; border-radius: 0 0 24px 24px !important; }

/* ---------- Dark theme ---------- */

body.theme-dark .cs-notif { border-top-color: rgba(255, 255, 255, 0.08); }
body.theme-dark .cs-notif-title { color: #d5d7dd; }
body.theme-dark .cs-notif.is-unread .cs-notif-title { color: #f4f5f7; }
body.theme-dark .cs-notif-avatar,
body.theme-dark .cs-notif-avatar.is-empty { background: #2b2f36; }
body.theme-dark .cs-notif-all { border-top-color: rgba(255, 255, 255, 0.08); }