/* ═══════════════════════════════════════════════════════════════════
   notify.css — the notifications bell/inbox additions (P8-notify)
   ═══════════════════════════════════════════════════════════════════
   DELIBERATELY SMALL. style.css already carries the bell button, the
   badge, the flyout frame, and the row grid (they shipped with v1's
   markup and survived into v2 unwired) — this file adds ONLY what the
   wired surface needs on top:

     · the read-state dot placeholder (keeps the 4-column row grid
       aligned whether or not a row is unread),
     · the "no destination" row variant, so a row that cannot open
       anything does not pretend to be a link,
     · the preferences panel + footer built in TS by
       src/app/notifications/index.ts,
     · the student's assignment-thread bits (unread divider + the
       assignment-panel teaser) — same tab surface as the teacher's,
       so it needs marks for "new since you last looked", nothing more.

   Tokens only (var(--ink), var(--red), …) — no literal colors, so
   light/dark and the contrast checker both hold.
   ══════════════════════════════════════════════════════════════════ */

/* ── Row state ─────────────────────────────────────────────────── */

/* The unread dot occupies its grid column even when read, so titles
   and the dismiss button do not shift as rows are read. */
.notification-row-dot.is-read { visibility: hidden; }

/* A group with no v2 destination: readable, dismissible, honest. It
   still marks read on click, so the cursor stays a pointer only for
   the rows that go somewhere. */
.notification-row.is-flat { cursor: default; }
.notification-row.is-flat .notification-row-when { font-style: italic; }

/* Keyboard reachability — the row is role="button" + tabindex=0. */
.notification-row:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* ── Flyout footer + preferences ───────────────────────────────── */

.notify-foot {
  display: flex;
  justify-content: flex-start;
  padding: 8px 12px;
  border-top: 1px solid var(--hair);
}
.notify-foot .ghost-btn { font-size: 11.5px; padding: 4px 8px; }

/* Sits between the list and the footer by DOM order (index.ts appends
   the panel, then the footer) — no flex `order` games. */
.notify-prefs {
  border-top: 1px solid var(--hair);
  padding: 10px 12px 4px;
  max-height: 46vh;
  overflow-y: auto;
}
.notify-prefs .settings-hint { margin: 0 0 8px; }

.notify-pref-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--hair);
  cursor: pointer;
}
.notify-pref-row:first-of-type { border-top: 0; }
.notify-pref-row input { margin-top: 2px; }
.notify-pref-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.notify-pref-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.notify-pref-hint  { font-size: 11.5px; color: var(--ink-muted); line-height: 1.35; }

/* ── Student assignment thread (right pane, Messages tab) ──────── */

/* "New since you last opened this thread" — a divider, not a badge
   on every row: the student wants to know where to start reading. */
.subtab-thread-new {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
.subtab-thread-new::before,
.subtab-thread-new::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--red) 40%, transparent);
}

/* The assignment panel's pointer at the thread — a section like every
   other section in student/assignment/, not a second thread view. */
.ai-msg-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ai-msg-count {
  font-size: 12.5px;
  color: var(--ink-2);
}
.ai-msg-count .ai-msg-new {
  display: inline-block;
  margin-left: 6px;
  background: var(--red);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: 1px;
}