/* =====================================================================
   Notifications: nav bell, badge and the panel (FeedNotifications.js)
   ===================================================================== */

/* =====================================================================
   Panel visibility (alongside the other feed views)
   ===================================================================== */

feed-section:not([data-active-view="notifications"]) > feed-panel[data-view="notifications"] {
  display: none;
}

feed-section[data-active-view="notifications"] > feed-panel:not([data-view="notifications"]) {
  display: none;
}

feed-section[data-active-view="notifications"] > feed-panel[data-view="notifications"] {
  display: block;
}

/* =====================================================================
   Nav bell (same box as the icon font's glyphs)
   ===================================================================== */

.nav-bell {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* =====================================================================
   Panel
   ===================================================================== */

feed-notifications {
  display: block;
  padding-bottom: 32px;
}

.notif-title {
  margin: 4px 16px 10px;
  color: var(--text-main, #16181b);
  font-size: 1.25rem;
  font-weight: 700;
}

.notif-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle, #edebe6);
}

.notif-empty {
  max-width: 34ch;
  margin: 48px auto;
  padding: 0 16px;
  color: var(--text-muted, #656f77);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* =====================================================================
   Rows
   ===================================================================== */

.notif-row {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle, #edebe6);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.notif-row:hover {
  background-color: var(--surface-hover, #f7f6f2);
}

.notif-row:focus-visible {
  outline: 2px solid var(--accent, #4f46e5);
  outline-offset: -2px;
}

/* New since the last visit: a soft tint and a dot */
.notif-row.is-unread {
  background-color: rgba(79, 70, 229, 0.05);
}

.notif-row.is-unread::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4f46e5);
}

.notif-row.is-unread:hover {
  background-color: rgba(79, 70, 229, 0.08);
}

/* Type icon */
.notif-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
}

.notif-icon-post_liked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.1 4.3 2.4.7-1.3 2.2-2.4 4.3-2.4 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

.notif-icon-followed {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2 20c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5z'/%3E%3Cpath d='M19 7v6M16 10h6' stroke='%234f46e5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.notif-icon-post_commented,
.notif-icon-comment_replied {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}

.notif-icon-mentioned {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.notif-icon-comment_removed {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656f77' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M9 9l6 4M15 9l-6 4'/%3E%3C/svg%3E");
}

.notif-icon-group_added {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Ccircle cx='16.5' cy='9' r='3'/%3E%3Cpath d='M1.5 20c0-3.6 3-5.8 6.5-5.8s6.5 2.2 6.5 5.8zM15 20c0-2.1-.7-3.8-1.8-5 .7-.3 1.5-.4 2.3-.4 3.1 0 5.5 2 5.5 5.4z'/%3E%3C/svg%3E");
}

.notif-icon-new_signin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.notif-icon-app_posted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6M15 2v6'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E");
}

/* Body */
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.notif-avatars {
  display: flex;
  gap: 4px;
}

.notif-avatar {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle, #edebe6);
  border-radius: 50%;
  object-fit: cover;
  background: #f7f6f2;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-avatar:hover {
  transform: scale(1.08);
}

.notif-text {
  margin: 0;
  color: var(--text-main, #16181b);
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.notif-text strong {
  font-weight: 700;
}

.notif-hint {
  display: block;
  margin-top: 2px;
  color: var(--text-muted, #656f77);
  font-size: 0.82rem;
}

.notif-snippet {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted, #656f77);
  font-size: 0.9rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-time {
  color: var(--text-muted, #8e98a0);
  font-size: 0.78rem;
}

/* =====================================================================
   More rows
   ===================================================================== */

.notif-more {
  display: flex;
  justify-content: center;
  min-height: 1px;
}

.notif-more.is-loading {
  padding: 18px 0;
}

.notif-more.is-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle, #edebe6);
  border-top-color: var(--accent, #4f46e5);
  border-radius: 50%;
  animation: notifSpin 0.8s linear infinite;
}

@keyframes notifSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .notif-row { padding: 12px; gap: 10px; }
  .notif-icon { width: 24px; height: 24px; background-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-row,
  .notif-avatar { transition: none; }
  .notif-more.is-loading::after { animation-duration: 2s; }
}