/* codex/css/notif-bell.css
   Shared notification bell (js/notif-bell.js), used on BOTH the Codex topbar and the
   Trilha header, so it lives in its own file linked by both pages. Ported from the
   approved sino mock (backstage/mocks/codex-forum/sino.html, S2): badge in the button's
   top-right CORNER, grouped dropdown. All colours via theme tokens. Prefix: cdx-bell-. */

.cdx-bell-wrap { position: relative; display: inline-flex; }
.cdx-bell-btn svg { width: 19px; height: 19px; }

/* Badge: top-right corner of the button, not over the glyph. Ringed in the surface
   colour so it reads as a separate chip. */
.cdx-bell-badge {
  position: absolute; top: 0; right: 0; transform: translate(38%, -38%);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--error); color: #fff; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.cdx-bell-badge[hidden] { display: none; }

.cdx-bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 54px -18px rgba(0,0,0,.35); overflow: hidden; z-index: 200;
}
.cdx-bell-panel[hidden] { display: none; }
.cdx-bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid var(--border);
}
.cdx-bell-title { font-size: .92rem; font-weight: 800; color: var(--text-primary); }
.cdx-bell-mark {
  font-size: .74rem; font-weight: 700; color: var(--primary-dark);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.cdx-bell-list { max-height: min(60vh, 460px); overflow-y: auto; }
.cdx-bell-empty { padding: 1.4rem 1rem; text-align: center; font-size: .82rem; color: var(--text-secondary); }
.cdx-bell-group {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem 1rem; background: var(--background);
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary);
}
.cdx-bell-gcount {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--primary); color: #fff; font-size: .66rem; font-weight: 800;
}
.cdx-bell-notif {
  display: flex; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  cursor: pointer; text-decoration: none;
}
.cdx-bell-notif:hover { background: rgba(20,184,166,.06); }
.cdx-bell-notif--unread { background: rgba(20,184,166,.05); }
.cdx-bell-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: .42rem; flex-shrink: 0; }
.cdx-bell-notif:not(.cdx-bell-notif--unread) .cdx-bell-dot { background: var(--border); }
.cdx-bell-nbody { flex: 1; min-width: 0; display: block; }
.cdx-bell-ntext { display: block; font-size: .85rem; color: var(--text-primary); line-height: 1.45; }
.cdx-bell-nmeta { display: block; font-size: .72rem; color: var(--text-secondary); margin-top: .2rem; }

/* ── Notification preferences (student): initials + gear button + popover ──
   Shares the panel idiom with the bell. Lives here because it's part of the
   notification surface. cdx-ns- prefix. */
.cdx-ns-wrap { position: relative; display: inline-flex; }
.cdx-ns-btn { display: inline-flex; align-items: center; gap: .35rem; }
.cdx-ns-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .02em;
}
.cdx-ns-gear { display: inline-flex; }
.cdx-ns-gear svg { width: 15px; height: 15px; }

.cdx-ns-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 270px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 54px -18px rgba(0,0,0,.35); overflow: hidden; z-index: 200;
}
.cdx-ns-panel[hidden] { display: none; }
.cdx-ns-head {
  padding: .8rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary);
}
.cdx-ns-opts { padding: .35rem .4rem; display: flex; flex-direction: column; }
.cdx-ns-opt {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 9px;
  font-size: .86rem; color: var(--text-primary); cursor: pointer;
}
.cdx-ns-opt:hover { background: rgba(20,184,166,.06); }
.cdx-ns-opt input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.cdx-ns-opt--off { opacity: .5; cursor: default; }
.cdx-ns-opt--off:hover { background: none; }

/* On the Trilha header, public-header.css hides inner <span>s of .ph-action-btn at
   <=560px (icon-only mode). The settings button IS made of spans (initials + gear),
   so keep them visible. Specificity beats the icon-only rule. */
pensoia-header .ph-action-btn .cdx-ns-initials,
pensoia-header .ph-action-btn .cdx-ns-gear { display: inline-flex; }