/* ============================================================
   NOTIFICATIONS CENTER  (bell + dropdown panel)
   ------------------------------------------------------------
   Reuses the design tokens from public/style/default/menu.css
   (:root --accent, --surface, --glass, --radius-*, --shadow-*).
   The bell sits in the nav; the panel is position:fixed so its
   DOM location in the persistent menu partial doesn't matter.
   ============================================================ */

/* ---------- Bell trigger (desktop nav) --------------------- */
.nav-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-muted, rgba(232, 232, 236, 0.45));
  cursor: pointer;
  transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s), color var(--transition, 0.2s);
}

.nav-notif:hover {
  background: var(--glass-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--glass-border, rgba(255, 255, 255, 0.07));
  color: var(--text, #e8e8ec);
}

.nav-notif.has-unread {
  color: var(--text, #e8e8ec);
}

.nav-notif .icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--danger, #f75b5b);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface, #131317);
}

/* Without this, the class's `display: inline-flex` overrides the HTML
   `hidden` attribute (equal specificity, author rule wins over the UA
   `[hidden]{display:none}`), so the badge would always show as a red
   "0". This restores the hide-until-unread behaviour. */
.nav-notif-badge[hidden] {
  display: none;
}

/* ---------- Panel ------------------------------------------ */
#notif-panel {
  position: fixed;
  top: 64px;
  right: max(16px, calc((100vw - 1400px) / 2));
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #131317);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.7));
  z-index: 99990;
  overflow: hidden;
  font-family: var(--font-ui, sans-serif);
  color: var(--text, #e8e8ec);
}

#notif-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  #notif-panel:not([hidden]) {
    animation: notif-pop 0.16s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  @keyframes notif-pop {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
}

.notif-head-title {
  font-size: 14px;
  font-weight: 700;
}

.notif-mark-all {
  background: none;
  border: none;
  color: var(--accent, #5b8af7);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-list {
  overflow-y: auto;
  padding: 5px;
  scrollbar-width: thin;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 8px);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--transition, 0.2s);
}

.notif-row:hover {
  background: var(--glass, rgba(255, 255, 255, 0.04));
}

.notif-row.is-unread {
  background: var(--accent-subtle, rgba(91, 138, 247, 0.10));
}

.notif-row-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--glass, rgba(255, 255, 255, 0.04));
  color: var(--text-muted, rgba(232, 232, 236, 0.45));
}

.notif-row-icon.notif-icon-mention {
  color: var(--accent, #5b8af7);
}

.notif-row-icon.notif-icon-dm {
  color: #4ade80;
}

.notif-row-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.notif-row-title {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-row-sub {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--text-muted, rgba(232, 232, 236, 0.45));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-row-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-dim, rgba(232, 232, 236, 0.25));
}

.notif-row-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent, #5b8af7);
}

.notif-empty {
  padding: 38px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, rgba(232, 232, 236, 0.45));
}

/* ---------- Mobile sidebar trigger ------------------------- */
.sidebar-notif {
  position: relative;
}

/* ---------- Hamburger-menu panel = bottom-anchored sheet -----
   The bell lives inside the hamburger sidebar at ≤1024px (the
   site-wide breakpoint where #nav-bar collapses — see menu.css).
   The desktop rule anchors the panel under the top nav bar, which
   isn't present here, so it would float at top-right "in the middle
   of nowhere". Below the breakpoint we instead pin it as a centered
   bottom sheet so it always has a sensible, predictable position no
   matter which trigger opened it. Width is capped + centred so it
   isn't absurdly wide on tablets but goes full-width on phones. */
@media (max-width: 1024px) {
  #notif-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: min(440px, 100%);
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
  }
}

/* ---------- Focus mode on desktop -----------------------------
   Focus mode hides the top #nav-bar and shows the hamburger toggle
   even on wide screens (see `body.focus-mode` rules in menu.css).
   At those widths the desktop panel rule above anchors to where the
   (now-hidden) centred nav bar's right edge would be — hundreds of
   px in from the corner — so the panel appears detached from the
   top-right hamburger the user actually clicked. Here we re-anchor it
   directly beneath that hamburger toggle (#mobile-toggle-wrapper is
   fixed top-right with 14px padding). Scoped to ≥1025px so it never
   overrides the phone/tablet bottom-sheet above. */
@media (min-width: 1025px) {
  body.focus-mode #notif-panel {
    top: 60px;
    right: 14px;
    left: auto;
    bottom: auto;
    margin: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    border-radius: var(--radius-lg, 18px);
  }
}