/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 5a: центр повідомлень /messages (NotificationsB.dc.html
   — «стрічка дзвіночка»: знижки, нагадування, адмін-розсилки, фільтр статусу
   стеження). Розмітка й логіка (read/delete/read_all/delete_all, скасування
   watch) не змінені — лише вигляд, через .messages-page й перевизначення
   CSS-змінних, які .msg-*/.page-* уже читають (--card-bg, --border, --text,
   --accent…). «Лише непрочитані» — клієнтський фільтр уже відрендерених
   рядків (messages.erb), без нових запитів.
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .messages-page {
  --card: rgba(255, 255, 255, .035);
  --card-bg: rgba(255, 255, 255, .035);
  --card-hover: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .18);
  --text: var(--vn-text);
  --text-2: var(--vn-muted);
  --text-muted: var(--vn-muted);
  --primary: var(--vn-pink);
  --primary-soft: rgba(255, 79, 163, .14);
  --on-primary: var(--vn-ink);
  --r-sm: 10px;
  --font: var(--vn-font-body), sans-serif;
  width: 100%; box-sizing: border-box; font-family: var(--vn-font-body), sans-serif;
}

html.vn:not([data-section="admin"]) .messages-page .page-title {
  font-family: var(--vn-font-display), sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--vn-text) 40%, var(--vn-pink), var(--vn-orange), var(--vn-cyan));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bHue 8s ease-in-out infinite;
}

html.vn:not([data-section="admin"]) .messages-page .msg-watches,
html.vn:not([data-section="admin"]) .messages-page .msg-row {
  border-radius: var(--vn-radius-card);
  transition: border-color .25s, transform .2s;
}
html.vn:not([data-section="admin"]) .messages-page .msg-row:hover { border-color: rgba(255, 255, 255, .18); }
html.vn:not([data-section="admin"]) .messages-page .msg-row--unread {
  border-color: rgba(255, 79, 163, .4) !important;
  background: rgba(255, 79, 163, .06) !important;
}

html.vn:not([data-section="admin"]) .messages-page .msg-row__icon {
  width: 36px; height: 36px; flex: none; border-radius: 12px; font-size: 17px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .06);
}
/* Icon tile colour by kind — same emoji, tinted background per notification type. */
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="discount_alert"] .msg-row__icon,
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="donate_favorite_added"] .msg-row__icon { background: rgba(255, 159, 69, .18); }
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="favorite_added"] .msg-row__icon { background: rgba(255, 226, 122, .18); }
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="online_alert"] .msg-row__icon,
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="queue_alert"] .msg-row__icon,
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="watch_added"] .msg-row__icon { background: rgba(46, 230, 214, .18); }
html.vn:not([data-section="admin"]) .messages-page .msg-row[data-kind="admin_message"] .msg-row__icon { background: rgba(185, 140, 255, .18); }

html.vn:not([data-section="admin"]) .messages-page .msg-actions__btn,
html.vn:not([data-section="admin"]) .messages-page .msg-watches__cancel,
html.vn:not([data-section="admin"]) .messages-page .msg-row__read {
  border-radius: var(--vn-radius-pill);
}
html.vn:not([data-section="admin"]) .messages-page #msg-unread-toggle[aria-pressed="true"],
html.vn:not([data-section="admin"]) .messages-page .msg-settings-link {
  background: var(--vn-grad-brand); color: var(--vn-ink); border-color: transparent; font-weight: 800;
}

/* "Лише непрочитані" (client-side filter, no network calls). */
html.vn:not([data-section="admin"]) .messages-page .msg-list--unread-only .msg-row:not([data-unread="true"]) { display: none; }