/* Notifications bell (All / Live / Games / Social / Updates tabs), tracked games, notification type switches.
   Kept out of styles.css on purpose (public/discover.js bell, public/tracks.js). */

/* ---------- bell panel ---------- */
.bell-panel { width: 380px; max-height: min(520px, 78vh); display: flex; flex-direction: column; overflow: hidden; }
.bell-panel .nb-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; border-bottom: 0; }
.nb-head b { font-size: 15px; }
.nb-head-acts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nb-head-acts .linkbtn, .nb-head-acts a { font-size: 12px; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.nb-head-acts .linkbtn:hover, .nb-head-acts a:hover { color: var(--text); }
.bell-tabs.nb-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.bell-tabs.nb-tabs::-webkit-scrollbar { display: none; }
.bell-tabs.nb-tabs button { flex: 1 0 auto; display: block; text-align: center; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 8px 9px; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bell-tabs.nb-tabs button:hover { color: var(--text); }
.bell-tabs.nb-tabs button.on { color: var(--text); border-bottom-color: var(--accent); background: none; }
.nb-count { display: inline-block; text-align: center; line-height: 17px; min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 5px; border-radius: 99px; background: var(--panel2); color: var(--text); font-size: 11px; font-weight: 600; }
.nb-tabs button.on .nb-count { background: var(--accent2); color: var(--on-accent); }
.nb-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.nb-off { margin: 0; padding: 8px 14px; background: var(--panel2); border-bottom: 1px solid var(--line); color: var(--muted); }
.bell-item.nb-item { flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.nb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--line); }
.nb-item.unread .nb-dot { background: var(--accent); }
.nb-item.unread.nb-live .nb-dot { background: var(--none); }
.nb-item.unread.nb-games .nb-dot { background: var(--strong); }
.nb-item.unread.nb-updates .nb-dot { background: var(--long); }
.nb-text { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.nb-meta { font-size: 12px; }
.bell-item.nb-item.unread { background: rgba(232, 116, 59, 0.07); }

@media (max-width: 760px) {
  .bell-panel { position: fixed; left: 8px; right: 8px; width: auto; top: 56px; max-height: calc(100vh - 140px); }
  .bell-tabs.nb-tabs button { padding: 8px 6px 9px; font-size: 12.5px; }
}

/* ---------- Track button ---------- */
.trk-btn.on { color: var(--strong); border-color: #2ecc7166; background: #2ecc7114; }

/* ---------- Position Tracker: tracked games strip ---------- */
.trk-box { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.trk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trk-head .linkbtn { margin-left: auto; font-size: 13px; }
.trk-chips { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.trk-chip { position: relative; flex: 0 0 auto; max-width: 240px; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 28px 7px 10px; border-radius: var(--r-md); background: var(--panel2); border-left: 3px solid var(--ghost); }
.trk-chip.trk-good { border-left-color: var(--strong); }
.trk-chip.trk-ok { border-left-color: var(--long); }
.trk-chip.trk-low { border-left-color: var(--none); }
.trk-name { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-name:hover { text-decoration: underline; }
.trk-row { color: var(--muted); white-space: nowrap; }
.trk-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: var(--r-lg); background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.trk-x:hover { background: var(--line); color: var(--text); }
.trk-empty { margin: 6px 0 0; }

/* ---------- Settings: tracked list + notification types ---------- */
.trk-sub { margin: 14px 0 6px; font-size: 14px; }
.trk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); min-width: 0; }
.trk-li-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.trk-li-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.trk-li-name .pill { background: var(--line); color: var(--muted); align-self: flex-start; margin: 2px 0; }
.trk-list li .btn { flex: none; }
.nc-list { display: flex; flex-direction: column; gap: 8px; }
.nc-row { min-width: 0; }
.nc-help { margin: 2px 0 0 48px; }
@media (max-width: 760px) { .nc-help { margin-left: 0; } }