/* FlowGenIQ notification center (bell + dropdown) */
.fgq-notif { position: relative; display: inline-flex; align-items: center; }

.fgq-notif-bell {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-color, #2d3748);
  color: var(--text-secondary, #9ca3af);
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.fgq-notif-bell:hover { color: #a5b4fc; border-color: #6366f1; background: rgba(99,102,241,.08); }
.fgq-notif-bell.has-unread { color: #a5b4fc; }
.fgq-notif-bell.ring { animation: fgqBellRing .8s ease; }
@keyframes fgqBellRing {
  0%,100% { transform: rotate(0); }
  15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}

.fgq-notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ef4444; color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; box-shadow: 0 0 0 2px var(--bg-primary, #0f1117);
}

.fgq-notif-panel {
  position: absolute; top: 48px; left: 0; right: auto;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--bg-secondary, #171b26);
  border: 1px solid var(--border-color, #2d3748);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  z-index: 100001;
  overflow: hidden;
  animation: fgqPanelIn .14s ease;
}
/* On narrow screens, pin the panel just inside the viewport so it never hides
   behind the sidebar or overflows off-screen. */
@media (max-width: 640px) {
  .fgq-notif-panel {
    position: fixed; top: 64px; left: 12px; right: 12px;
    width: auto; max-width: none;
  }
}
@keyframes fgqPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.fgq-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-color, #2d3748);
  font-weight: 700; color: var(--text-primary, #f9fafb); font-size: 14px;
}
.fgq-notif-head-actions { display: flex; align-items: center; gap: 8px; }
.fgq-notif-markall, .fgq-notif-pushbtn {
  background: transparent; border: none; cursor: pointer;
  color: #818cf8; font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 6px;
}
.fgq-notif-markall:hover, .fgq-notif-pushbtn:hover { background: rgba(99,102,241,.12); }
.fgq-notif-pushbtn { color: #34d399; }

.fgq-notif-list { max-height: 60vh; overflow-y: auto; }
.fgq-notif-empty { padding: 40px 16px; text-align: center; color: var(--text-secondary, #9ca3af); font-size: 13px; }

.fgq-notif-item {
  display: flex; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--border-color, #232838);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: background .12s;
}
.fgq-notif-item:hover { background: rgba(99,102,241,.06); }
.fgq-notif-item.unread { background: rgba(99,102,241,.09); }
.fgq-notif-item.unread:hover { background: rgba(99,102,241,.14); }

.fgq-notif-ico {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: rgba(99,102,241,.15); color: #a5b4fc;
}
.fgq-notif-ico.p-high { background: rgba(245,158,11,.15); color: #fbbf24; }
.fgq-notif-ico.p-critical { background: rgba(239,68,68,.15); color: #f87171; }

.fgq-notif-body { flex: 1 1 auto; min-width: 0; }
.fgq-notif-title { font-weight: 600; font-size: 13.5px; color: var(--text-primary, #f9fafb); margin-bottom: 2px; }
.fgq-notif-text { font-size: 12.5px; color: var(--text-secondary, #9ca3af); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fgq-notif-time { font-size: 11px; color: #6b7280; margin-top: 4px; }
.fgq-notif-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #6366f1; align-self: center; }
.fgq-notif-item:not(.unread) .fgq-notif-dot { background: transparent; }

/* Light theme tweaks */
body.light-theme .fgq-notif-badge { box-shadow: 0 0 0 2px #fff; }