/* GayStash — notifications. The panel is rendered by JS (per-user, uncacheable);
   the full page server-renders. Both use the same row. */

/* .bell moved to modern.css — it is part of the topbar partial, so it is on
   every page, and 13 of them do not load this sheet. */

/* ── the panel ──────────────────────────────────────────────────── */
.notif{
  position:absolute;right:14px;top:58px;z-index:40;
  width:min(94vw,392px);max-height:min(72vh,620px);
  display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-lg);
  border:1px solid var(--line-2);overflow:hidden;
}
.notif-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px}
.notif-head h2{font-size:16px;flex:1}
.lnk{font-size:13px;font-weight:700;color:var(--accent);background:none;padding:0}
.lnk:hover{color:var(--accent-hi)}
.notif-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.notif-tabs::-webkit-scrollbar{display:none}
.notif-tabs .pill{height:29px;padding:0 11px;font-size:12.5px}
.notif-list{overflow-y:auto;flex:1;min-height:0}
.notif-foot{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-top:1px solid var(--line);
}
.notif-foot a{font-size:13px;font-weight:700;color:var(--text-2)}
.notif-foot a:hover{color:var(--text)}
.notif-foot a+a{margin-left:auto}

/* ── one notification, used by the panel and the page ───────────── */
.nrow{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 11px;align-items:start;
  padding:13px 16px;border-top:1px solid var(--line);
  transition:background .14s var(--ease);
}
.nrow:first-child{border-top:0}
.nrow:hover{background:var(--surface-2)}

/* ── unread ─────────────────────────────────────────────────────
   Two markers, doing two different jobs.

   The tint is the aggregate read: when the panel opens you want to know
   how much is new before you read a word, and a block of shaded rows
   answers that at a glance in a way a column of dots never does.

   The dot is the per-row read, and it is insurance — a 5.5% tint is the
   first thing to disappear on a phone in daylight or on a cheap panel,
   and unread is not a state worth losing to the weather.

   What both replace: an 8px grid column that existed on every row whether
   or not it had a dot in it. It parked a stray mark in a gutter, and it
   cost every row 19px of text width — enough that "beno77 and 11 others
   liked GAY BOY SEX PART (42)" wrapped to two lines with it and fits on
   one without. */
.nrow.un{background:rgba(255,47,110,.055)}
.nrow.un:hover{background:rgba(255,47,110,.1)}
/* on the face, so the mark belongs to whoever sent it rather than
   floating beside them */
.nrow .av,.nrow-ic{position:relative}
.nrow.un .av::after,.nrow.un .nrow-ic::after{
  content:"";position:absolute;right:-1px;top:-1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2.5px var(--surface);
}
.nrow.un .nrow-say{color:var(--text)}
.nrow-say{font-size:14px;font-weight:500;line-height:1.4;color:var(--text-2)}
.nrow-say b{color:var(--text);font-weight:700}
.nrow-t{
  display:block;padding-top:3px;
  font-size:12px;font-weight:600;color:var(--text-3);
}
.nrow .av{width:34px;height:34px;font-size:13px;grid-row:span 2}
/* system events get a mark rather than a face, because nobody sent them */
.nrow-ic{
  width:34px;height:34px;border-radius:50%;grid-row:span 2;flex:none;
  background:var(--surface-3);color:var(--text-3);display:grid;place-items:center;
}
.nrow-ic .icon{width:16px;height:16px}
.nrow.warn .nrow-ic{color:var(--warn)}

/* what was actually added — the reason the notification is worth opening */
.nrow-thumbs{grid-column:2;display:flex;gap:6px;padding-top:9px}
.nrow-thumbs a{flex:1;min-width:0;max-width:96px}
.nth{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden}
.nth .dur{right:3px;bottom:3px;font-size:9.5px;padding:1px 4px;border-radius:4px}

.nrow-none{padding:34px 16px;text-align:center;font-size:14px;font-weight:500;color:var(--text-3)}

@media (max-width:559px){
  /* on a phone the panel is a sheet, not a dropdown */
  .notif{right:8px;left:8px;width:auto;top:56px;max-height:78vh}
}
@media (min-width:1000px){
  .notif{right:22px;top:62px}
}