/* Notifications bell + panel.

   Loaded by BOTH shells (index.html and css/admin.css), so it depends on
   nothing but variables.css. That is why the panel chrome below restates
   the geometry of .edit-popover (css/edit-mode.css) instead of extending
   it: edit-mode.css is linked only from index.html, and the admin panel
   would inherit a naked dialog. The two are meant to look identical;
   if one moves, move the other.

   The bell sits in two very different hosts — a floating pill cluster on
   the public site and a nav column in the admin — so .notif-bell carries
   only the shared chrome and the --public / --admin variants do the rest. */

/* ---------- Bell ---------- */

.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(36, 26, 28, 0.7);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.5rem 0.85rem;
  transition: all var(--transition-fast);
}
.notif-bell svg { width: 13px; height: 13px; }
.notif-bell:hover {
  background: rgba(36, 26, 28, 0.9);
  border-color: var(--color-red);
  color: var(--color-text);
}

/* Unread is the one state that has to read from across the room. */
.notif-bell.has-unread {
  border-color: var(--color-red-bright);
  color: var(--color-text);
  box-shadow: 0 0 14px var(--color-red-glow);
}

.notif-bell__count {
  min-width: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-red-bright);
  color: #fff;
  font-size: 0.58rem;
  line-height: 1.35rem;
  height: 1.15rem;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Public variant matches the pills it sits beside in the admin cluster;
   the cluster's own backdrop-filter rule does not reach a third child, so
   it is restated here. */
.notif-bell--public {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Admin variant is a full-width row in the sidebar column rather than a
   floating pill. */
.notif-slot { display: block; }
.notif-bell--admin {
  width: 100%;
  justify-content: flex-start;
  border-radius: 4px;
  padding: 0.55rem 0.75rem;
}
.notif-bell--admin .notif-bell__count { margin-left: auto; }

/* The topbar exists only under 720px (css/admin/layout.css), so its slot
   and the sidebar slot are mutually exclusive and never both show. */
.notif-slot--topbar { display: none; margin-left: auto; }
.notif-slot--sidebar { padding: 0 1rem 0.75rem; }
@media (max-width: 720px) {
  .notif-slot--topbar { display: block; }
  .notif-slot--sidebar { display: none; }
  .notif-slot--topbar .notif-bell--admin { width: auto; border-radius: 999px; }
  /* Bell is in the topbar now, so the panel drops from it instead. */
  .notif-panel--admin {
    top: 3.5rem;
    bottom: auto;
    right: 1rem;
    left: auto;
  }
}

/* The nav dot has been decorative since the admin shell was built. This
   is its first real job: something is waiting in that section. */
.admin-nav__item.has-unread .admin-nav__item-dot {
  opacity: 1;
  background: var(--color-red-bright);
  box-shadow: 0 0 6px var(--color-red-glow);
}

/* ---------- Panel ---------- */

.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
}

/* The panel anchors to whichever corner its bell is in. The base rule
   deliberately picks NO corner: the public bell floats bottom-right in the
   admin cluster and the admin bell sits in the left sidebar column, so a
   shared anchor would always be wrong for one of them. (.edit-popover
   drops from the top because its trigger, the status badge, is up there.) */
.notif-panel {
  position: fixed;
  width: 400px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
  background: rgba(20, 14, 16, 0.96);
  border: 1px solid var(--color-red);
  border-radius: 10px;
  box-shadow: 0 0 30px var(--color-red-glow), 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  z-index: 201;
  box-sizing: border-box;
}
.notif-panel *,
.notif-panel *::before,
.notif-panel *::after { box-sizing: border-box; }

/* Rises from the floating cluster. 5rem clears the cluster itself, which
   sits at bottom 1.5rem and stands about one pill tall. */
.notif-panel--public {
  bottom: 5rem;
  right: 1.5rem;
}

/* The admin bell lives at the foot of the sidebar, so the panel comes up
   the left edge beside it. */
.notif-panel--admin {
  bottom: 1.5rem;
  left: 1.5rem;
}

.notif-panel__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.notif-panel__title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  margin: 0;
  margin-right: auto;
}
.notif-panel__mark {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.notif-panel__mark:hover:not(:disabled) {
  border-color: var(--color-red);
  color: var(--color-text);
}
.notif-panel__mark:disabled { opacity: 0.35; cursor: default; }
.notif-panel__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color var(--transition-fast);
}
.notif-panel__close:hover { color: var(--color-text); }

.notif-panel__body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 0;
}

.notif-panel__empty,
.notif-panel__note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin: 0;
  padding: 1rem 0.9rem;
  text-align: center;
}
.notif-panel__note {
  padding: 0.5rem 0.9rem 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
}

.notif-panel__foot {
  display: block;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  text-decoration: none;
  text-align: center;
}
.notif-panel__foot:hover { color: var(--color-text); }

/* ---------- Items ---------- */

.notif-list { list-style: none; margin: 0; padding: 0; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(139, 0, 0, 0.1); }

.notif-item__icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
}
.notif-item__icon svg { width: 14px; height: 14px; display: block; }
.notif-item--love .notif-item__icon { color: var(--color-red-bright); }

.notif-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.notif-item__text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-body-text);
}
.notif-item__text strong { color: var(--color-text); font-weight: 500; }

.notif-item__excerpt {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.notif-item__time {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--color-date);
}

.notif-item__chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* Mobile: the cluster stacks and drops its labels (css/edit-mode.css),
   so the bell has to do the same or it becomes the odd one out. The
   count badge stays at every size — it is the whole point. */
@media (max-width: 480px) {
  .notif-bell--public .notif-bell__label { display: none; }
  .notif-bell--public { padding: 0.55rem; }
  /* The cluster stacks vertically along the bottom-left on phones
     (css/edit-mode.css), so a full-width sheet rising from the bottom
     would sit on top of it. Drop from the top instead and leave the
     cluster clear. */
  .notif-panel {
    top: 1rem;
    bottom: auto;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-height: 70vh;
  }
}