/* 消息通知页与导航铃铛（风格对齐 friends/space 页） */

/* 导航铃铛 */
.bell-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  font-size: 19px;
  text-decoration: none;
  transition: transform .15s;
}
.bell-link:hover { transform: translateY(-1px); }
.bell-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* 通知页布局 */
.nf-layout { display: block; max-width: 760px; }
.nf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 16px;
}
.nf-head h1 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.nf-head-ops { display: inline-flex; align-items: center; gap: 12px; }
.nf-head-n { font-size: 13px; color: var(--ink-soft); }
.nf-readall {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.nf-readall:hover { background: #e9f3fb; }

.nf-list { display: flex; flex-direction: column; gap: 8px; }
.nf-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 13px 44px 13px 14px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nf-item:hover { background: #f4f9fe; border-color: #cfe3f5; }
.nf-item.unread { background: #f2f8ff; border-color: #cfe3f5; }
.nf-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.nf-avatar--sys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f8;
  font-size: 18px;
}
.nf-main-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  min-width: 0;
}
.nf-main-text small { color: var(--ink-soft); font-size: 12px; }
.nf-excerpt {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}
.nf-dot {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5484d;
}

@media (max-width: 640px) {
  .nf-head { margin-top: 16px; }
  .nf-excerpt { max-width: 200px; }
}