/* notif-center.css — 通知中心大弹窗(点铃铛就地展开) 2026-09-04 P1 */
#notifCenterModal .modal-dialog { max-width: 1000px; }
#notifCenterModal .modal-content { height: 82vh; border-radius: var(--zq-radius, 12px); }
#notifCenterModal .modal-body { overflow: hidden; }

/* 左侧分类导航 */
.nc-side {
  width: 220px;
  flex: 0 0 220px;
  background: var(--zq-surface, #f7f9fc);
  border-right: 1px solid var(--zq-border, #e6eaf0);
  padding: 12px 10px;
  overflow-y: auto;
}
.nc-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--zq-text-body, #3a4a5a);
  font-size: 14px;
  user-select: none;
  transition: background .15s, color .15s;
}
.nc-cat:hover { background: rgba(37, 99, 175, .08); }
.nc-cat.active {
  background: rgba(37, 99, 175, .14);
  color: var(--zq-primary, #2563af);
  font-weight: 600;
}
.nc-cat .nc-cat-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--zq-text-muted, #9aa7b5);
  background: #fff;
  border: 1px solid var(--zq-border, #e6eaf0);
  border-radius: 12px;
  padding: 0 8px;
}
.nc-cat.active .nc-cat-count { color: var(--zq-primary, #2563af); }
/* ① 未读角标高亮：实心红强调 */
.nc-cat-count.nc-count-hot {
  color: #fff;
  background: #e23b3b;
  border-color: #e23b3b;
  font-weight: 600;
}
/* 待你处理分类：常驻强调, 提示"有需要动手的" */
.nc-cat-todo { font-weight: 600; color: var(--zq-text-title, #1f2d3d); }
.nc-cat-todo .nc-cat-count { color: var(--zq-primary, #2563af); border-color: rgba(37,99,175,.3); }

/* 右侧主体 */
.nc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nc-search-wrap { border-bottom: 1px solid var(--zq-border, #e6eaf0); padding: 10px 12px; }
.nc-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }

/* 通知行 */
.nc-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--zq-border, #eef1f5);
  cursor: pointer;
  transition: background .12s;
}
.nc-item:hover { background: rgba(37, 99, 175, .05); }
.nc-item.unread { background: rgba(37, 99, 175, .04); }
.nc-item .nc-icon { font-size: 1.45rem; line-height: 1.2; flex: 0 0 auto; margin-top: 2px; }
.nc-item .nc-body { flex: 1 1 auto; min-width: 0; }
.nc-item .nc-title-row { display: flex; align-items: center; gap: 8px; }
.nc-item .nc-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--zq-text-body, #4a5a6a);
  white-space: normal;
  word-break: break-word;
}
/* ② 未读：标题加粗 + 深色，与左侧红点呼应 */
.nc-item .nc-title-unread {
  font-weight: 700;
  color: var(--zq-text-title, #1f2d3d);
}
.nc-item.unread .nc-title { color: #16263a; }
.nc-item .nc-content {
  margin-top: 4px;
  font-size: 13px;
  color: var(--zq-text-body, #4a5a6a);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.nc-item .nc-meta { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.nc-item .nc-time { font-size: 11px; color: var(--zq-text-muted, #9aa7b5); }
.nc-item .nc-link-tag { font-size: 11px; color: var(--zq-primary, #2563af); }
/* ② 类型标签: 与 /notifications 全页「规则：xxx」口径一致。
   2026-09-12: 新增 guidance_gap / coordination_gap 后必须显式展示类型,
   否则弹窗里这两类会与「系统通知」混淆(未命中 typeMeta 时 meta() 兜底为 system)。 */
.nc-item .nc-type {
  font-size: 11px; color: var(--zq-text-muted, #9aa7b5);
  background: var(--zq-surface, #f6f8fa);
  border: 1px solid var(--zq-border, #e5e9ef);
  border-radius: 10px; padding: 0 8px; line-height: 18px; white-space: nowrap;
}
/* ② 未读红点：已读项为透明占位（保留对齐），未读项实心红 + 微光晕 */
.nc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; flex: 0 0 auto; margin-top: 6px;
}
.nc-dot-unread {
  background: #e23b3b;
  box-shadow: 0 0 0 3px rgba(226, 59, 59, .12);
}
.nc-empty { text-align: center; color: var(--zq-text-muted, #9aa7b5); padding: 48px 0; }
.nc-empty i { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* ============ 2026-09-12 (P1 主次包) ============ */
/* 行动级: 左侧蓝条强调, 让"需要你做的"一眼可辨(不再渲染「需处理」红标文字) */
.nc-item.nc-action { border-left: 3px solid var(--zq-primary, #2563af); }
.nc-title-row { flex-wrap: wrap; }
/* 知会类折叠按钮 */
.nc-fold-btn {
  display: block; width: 100%; border: none;
  background: var(--zq-surface, #f7f9fc); color: var(--zq-primary, #2563af);
  padding: 8px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--zq-border, #e6eaf0);
}
.nc-fold-btn:hover { background: rgba(37, 99, 175, .08); }
.nc-fold-btn i { margin-right: 2px; }

/* 紧凑模式: 行高减半、正文一行截断, 一屏多看(默认开启) */
#notifCenterModal .nc-list.nc-compact .nc-item { padding: 6px 14px; }
#notifCenterModal .nc-list.nc-compact .nc-icon { font-size: 1.1rem; margin-top: 1px; }
#notifCenterModal .nc-list.nc-compact .nc-title { font-size: 13px; }
#notifCenterModal .nc-list.nc-compact .nc-content {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 2px; line-height: 1.4;
}
#notifCenterModal .nc-list.nc-compact .nc-meta { margin-top: 2px; }
#notifCenterModal .nc-list.nc-compact .nc-type { line-height: 16px; }


/* 移动端：分类栏改为顶部横向 */
@media (max-width: 767.98px) {
  #notifCenterModal .modal-content { height: 90vh; }
  #notifCenterModal .modal-body { flex-direction: column; }
  .nc-side {
    width: 100%; flex: 0 0 auto;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--zq-border, #e6eaf0);
    padding: 8px;
  }
  .nc-cat { margin-bottom: 0; margin-right: 6px; white-space: nowrap; }
  .nc-cat .nc-cat-count { margin-left: 6px; }
}

/* ============ 2026-09-09: 结构化变更通知(统一格式 企业-项目-修改人) ============ */
.nc-structured { font-size: 13px; line-height: 1.6; color: var(--zq-text-body, #4a5a6a); }
.nc-structured .badge { font-weight: 500; font-size: 11px; padding: .25em .55em; }
.nc-structured-op { margin-right: 4px; }
.badge.nc-structured-entity-type {
  margin-right: 4px;
  background: var(--zq-border, #e6eaf0);
  color: var(--zq-text-body, #4a5a6a);
}
.nc-structured-entity { font-weight: 600; color: var(--zq-text-title, #1f2d3d); margin-right: 6px; }
.nc-structured-code { font-size: 12px; }
.nc-changes { font-size: 12.5px; color: var(--zq-text-body, #4a5a6a); }
.nc-change-row { padding: 1px 0; }
.nc-change-row::before { content: '• '; color: var(--zq-text-muted, #9aa7b5); }
.nc-structured-detail { font-size: 12.5px; }
.nc-structured-meta { font-size: 11px; margin-top: 4px; }