/* 导航通知图标与面板样式 */
.nav-notify-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  margin-right: 14px; /* 与用户名保持更舒适的间隔（图标在左，用户名在右） */
  padding: 6px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}
.nav-notify-btn:hover { background: rgba(0,0,0,0.06); }
.notify-icon { display: block; }
.notify-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e11d48; /* 红点 */
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* 面板：相对用户菜单容器定位，保证贴近用户名左侧的图标 */
.nav-notify-panel {
  position: absolute;
  right: 0; /* 贴齐容器右侧，使面板靠近图标 */
  top: calc(100% + 8px);
  width: 340px;
  max-height: 420px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  display: block;
}
.nav-notify-panel[hidden] { display: none !important; }

/* 让右侧区域内用户菜单水平排列，图标与用户名同一行 */
.user-menu-wrapper {
  position: relative;            /* 为面板提供定位上下文 */
  display: flex;                 /* 水平排列 */
  align-items: center;           /* 垂直居中 */
  gap: 12px;                     /* 基础间距（图标与用户名之间仍由图标的 margin-right 控制更精细） */
}

/* 用户名按钮为内联弹性布局，头像与用户名同一行 */
.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;                      /* 头像与用户名之间的间距 */
}

/* 可选：头像与用户名的微调，避免与图标过近 */
.user-menu-toggle .user-avatar { margin-right: 4px; }

/* 保持原 .nav-right 的定位不强依赖，避免冲突 */
/* .nav-right { position: relative; } 由主题其他样式控制，如需可启用 */

/* 列表与内容 */
.panel-header, .panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}
.panel-footer { border-top: 1px solid #f1f5f9; border-bottom: none; }

/* 查看全部通知按钮样式优化 */
.panel-footer .view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;           /* 右对齐 */
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  color: #2563eb;              /* 主题蓝 */
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.panel-footer .view-all:hover {
  background: #eff6ff;         /* 浅蓝悬停背景 */
  color: #1d4ed8;
}
.panel-footer .view-all:active {
  background: #dbeafe;
}
.panel-footer .view-all-icon {
  font-size: 16px;
  line-height: 1;
  transform: translateY(1px);
}

/* 移动端优化：增大可点区域 */
@media (max-width: 768px) {
  .panel-footer .view-all {
    padding: 8px 12px;
    border-radius: 10px;
  }
}
.panel-header span { font-weight: 600; }
.refresh-btn {
  border: none; background: transparent; cursor: pointer; color: #64748b; border-radius: 6px; padding: 4px 6px;
}
.refresh-btn:hover { background: #f1f5f9; color: #0f172a; }
.panel-content {
  max-height: 320px;
  overflow: auto;
}
.notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notify-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f8fafc;
}
.notify-item:hover { background: #f8fafc; }
.notify-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin: 8px auto 0;
  background: #94a3b8;
}
.notify-item.unread .dot { background: #e11d48; }
.notify-title {
  margin: 0; font-size: 14px; font-weight: 600; color: #0f172a;
}
.notify-meta {
  margin-top: 4px; font-size: 12px; color: #64748b;
}
.panel-empty, .panel-loading {
  padding: 14px; text-align: center; color: #64748b;
}

/* 移动端适配：面板宽度与定位 */
@media (max-width: 768px) {
  .nav-notify-panel {
    right: 8px;
    width: min(92vw, 360px);
    max-height: 70vh;
  }
  .user-menu-wrapper {
    gap: 10px;                   /* 移动端适当减小整体间距 */
  }
  .nav-notify-btn {
    margin-right: 12px;          /* 移动端图标与用户名间距略缩小 */
  }
}