/* ============================================================
   Plotrixx — notif-bell-modal.css  (v3 — No-Flash Fix)

   FIX v3: Uses a [data-ready] attribute to hide the modal
   before Firestore data loads, WITHOUT touching display at all.

   Why this approach (not display:none in JS):
     The CSS already toggles display:none ↔ display:flex via
     .nbm-open. If JS also sets style="display:none" inline,
     inline styles beat class styles — so adding .nbm-open
     would never work; the modal would refuse to open.

   The correct fix is visibility:hidden + pointer-events:none
   ONLY while the modal lacks [data-ready]. This keeps it out
   of visual paint entirely (no flash) but doesn't interfere
   with the display toggle at all.

   In notif-bell-modal.js, the modal HTML is built WITHOUT any
   inline style, and the first onSnapshot callback calls:
     modal.dataset.ready = "true";
   That single attribute flip makes the modal fully operational.
   ============================================================ */

/* ── Bell button ─────────────────────────────────────────── */
.nav-bell-btn {
  position: relative;
  width: 38px;
  height: 38px;
  background: var(--gold-subtle, rgba(212,168,67,0.12));
  border: 1px solid rgba(212,168,67,0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background var(--transition, 0.2s), transform 0.18s;
  flex-shrink: 0;
}
.nav-bell-btn:hover {
  background: rgba(212,168,67,0.22);
  transform: scale(1.07);
}

/* Unread count badge on bell */
.nav-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #e85f2a;
  border-radius: 9px;
  border: 2px solid var(--surface, #fff);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  font-family: var(--sans, sans-serif);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.nav-bell-badge[data-count="0"],
.nav-bell-badge.hidden {
  display: none;
}

/* ── Modal shell ─────────────────────────────────────────── */
.notif-bell-modal {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 370px;
  max-height: 500px;
  background: var(--card, #fff);
  border: 0.5px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  display: none;              /* closed by default — JS adds .nbm-open to show */
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  transform-origin: top right;
}

/*
  NO-FLASH GATE:
  Before Firestore loads, the modal has no [data-ready] attribute.
  We force visibility:hidden + pointer-events:none in that state.
  This means even if .nbm-open somehow gets added too early,
  the user sees nothing — no text flooding the screen.

  Once onSnapshot fires, JS sets modal.dataset.ready = "true"
  and this rule no longer applies. The normal open/close cycle
  (display:none ↔ display:flex via .nbm-open) then works as before.
*/
.notif-bell-modal:not([data-ready]) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.notif-bell-modal.nbm-open {
  display: flex;
  animation: nbmSlideIn 0.2s cubic-bezier(0.34,1.4,0.64,1) forwards;
}

@keyframes nbmSlideIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Modal header ────────────────────────────────────────── */
.nbm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px 12px;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,0.08));
  flex-shrink: 0;
}
.nbm-header-left h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #1a1208);
  margin: 0 0 2px;
}
.nbm-header-left span {
  font-size: 11px;
  color: var(--ink3, #a0916a);
  font-family: var(--sans, sans-serif);
}
.nbm-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nbm-mark-read {
  font-size: 11px;
  font-family: var(--sans, sans-serif);
  color: var(--gold, #d4a843);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
}
.nbm-mark-read:hover { background: var(--gold-subtle, rgba(212,168,67,0.12)); }
.nbm-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0.5px solid var(--border, rgba(0,0,0,0.1));
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink3, #a0916a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.nbm-close:hover {
  background: var(--hover, rgba(212,168,67,0.07));
  color: var(--ink, #1a1208);
}

/* ── Filter chips ────────────────────────────────────────── */
.nbm-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,0.08));
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nbm-chips::-webkit-scrollbar { display: none; }

.nbm-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border2, rgba(0,0,0,0.1));
  font-size: 11px;
  font-family: var(--sans, sans-serif);
  font-weight: 500;
  color: var(--ink2, #6b5e3a);
  background: var(--card, #fff);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nbm-chip:hover {
  border-color: var(--gold, #d4a843);
  color: var(--gold, #d4a843);
}
.nbm-chip.active {
  background: var(--gold-subtle, rgba(212,168,67,0.12));
  border-color: var(--gold, #d4a843);
  color: #9a6f00;
  font-weight: 600;
}
html.light-theme .nbm-chip.active { color: #7a5200; }

/* ── Scrollable list ─────────────────────────────────────── */
.nbm-scroll {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,67,0.25) transparent;
}
.nbm-scroll::-webkit-scrollbar { width: 4px; }
.nbm-scroll::-webkit-scrollbar-thumb {
  background: rgba(212,168,67,0.3);
  border-radius: 4px;
}

/* Time section labels */
.nbm-time-label {
  font-size: 10px;
  font-family: var(--sans, sans-serif);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3, #a0916a);
  padding: 10px 18px 4px;
}

/* Individual notification row */
.nbm-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 0.5px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.nbm-row:hover { background: var(--hover, rgba(212,168,67,0.06)); }
.nbm-row.nbm-unread { background: rgba(212,168,67,0.04); }

/* Icon circle */
.nbm-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.nbm-icon-collab   { background: rgba(251,191,36,0.14); }
.nbm-icon-novel    { background: rgba(99,153,34,0.12); }
.nbm-icon-audio    { background: rgba(56,131,221,0.1); }
.nbm-icon-app      { background: rgba(232,95,42,0.1); }
.nbm-icon-ticket   { background: rgba(83,74,183,0.1); }
.nbm-icon-contract { background: rgba(160,120,40,0.1); }
.nbm-icon-sub      { background: rgba(212,168,67,0.12); }
.nbm-icon-system   { background: rgba(160,145,106,0.1); }

/* Text content */
.nbm-body { flex: 1; min-width: 0; }
.nbm-text {
  font-size: 12.5px;
  font-family: var(--sans, sans-serif);
  color: var(--ink, #1a1208);
  line-height: 1.45;
}
.nbm-text strong { font-weight: 600; }
.nbm-meta {
  font-size: 11px;
  font-family: var(--sans, sans-serif);
  color: var(--ink3, #a0916a);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nbm-tag {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.nbm-tag-collab   { background: rgba(251,191,36,0.14); color: #7a5800; }
.nbm-tag-novel    { background: rgba(99,153,34,0.12);  color: #2d5c08; }
.nbm-tag-audio    { background: rgba(56,131,221,0.1);  color: #0c447c; }
.nbm-tag-app      { background: rgba(232,95,42,0.1);   color: #993c1d; }
.nbm-tag-ticket   { background: rgba(83,74,183,0.1);   color: #3c3489; }
.nbm-tag-contract { background: rgba(160,120,40,0.1);  color: #7a5200; }
.nbm-tag-sub      { background: rgba(212,168,67,0.12); color: #8a6200; }

/* Unread orange dot */
.nbm-dot {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e85f2a;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────── */
.nbm-empty {
  padding: 44px 20px;
  text-align: center;
}
.nbm-empty-icon { font-size: 30px; opacity: 0.3; margin-bottom: 8px; }
.nbm-empty p {
  font-size: 12px;
  font-family: var(--sans, sans-serif);
  color: var(--ink3, #a0916a);
  margin: 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.nbm-footer {
  padding: 10px 18px;
  border-top: 0.5px solid var(--border, rgba(0,0,0,0.08));
  flex-shrink: 0;
  text-align: center;
}
.nbm-view-all {
  display: inline-block;
  font-size: 12px;
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  color: var(--gold, #d4a843);
  text-decoration: none;
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid rgba(212,168,67,0.35);
  background: var(--gold-subtle, rgba(212,168,67,0.1));
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.nbm-view-all:hover {
  background: rgba(212,168,67,0.2);
  border-color: var(--gold, #d4a843);
}

/* ── Wrapper that the bell sits inside (for position:relative) */
.nav-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   MOBILE BELL — replaces the hardcoded 🔔 link in
   .mobile-header-icons with a working bell + modal.
   The modal drops down from the top of the viewport instead
   of from the bell button (which may be off-screen once the
   panel is full-width).
   ══════════════════════════════════════════════════════════ */

/* Hide the hardcoded bell link on mobile once JS has injected
   the real bell into #mobileBellWrap */
#mobileBellWrap.nbm-ready ~ a[href="Notifications.html"],
.mobile-bell-link-hidden {
  display: none !important;
}

/* Mobile bell wrap sits inside .mobile-header-icons */
#mobileBellWrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* On mobile the modal anchors to the top of the screen so it
   never gets clipped by the narrow header bar */
@media (max-width: 900px) {
  #mobileBellWrap .notif-bell-modal {
    position: fixed;
    top: 60px;          /* clear the mobile header height */
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 80px);
    transform-origin: top center;
    z-index: 2000;
  }

  /* Bell button slightly smaller to fit the compact header */
  #mobileBellWrap .nav-bell-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
}

/* Fallback width fix for very small screens on desktop wrap too */
@media (max-width: 480px) {
  .nav-bell-wrap .notif-bell-modal {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 80px);
  }
}