/* ============================================
   Activity inbox — the in-app read path for notification_queue.

   Built on the canonical tokens (style.css :root). No new colour values:
   the unread badge uses --primary-500 (the app teal) and the unread rail
   uses the same, so the surface reads as part of the app rather than as a
   bolted-on notification centre.
   ============================================ */

/* --- Unread count on the ⋮ menu row -------------------------------------
   Overrides the base .menu-item-badge, which is a grey 0.6-opacity "Pro"
   style label. An unread COUNT is not a label: it has to read at a glance
   and it has to survive the menu-item hover state. */
.menu-item-badge#activity-unread-badge {
    background: var(--primary-500, #14b8a6);
    color: #fff;
    opacity: 1;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 2px 6px;
    justify-content: center;
    border-radius: 999px;
}

/* Unread notifications, nothing waiting on you: a dot, not a number. */
.menu-item-badge#activity-unread-badge.is-dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}

body.dark-mode .menu-item-badge#activity-unread-badge {
    background: var(--primary-500, #14b8a6);
    color: #fff;
}

/* --- Modal ------------------------------------------------------------- */
.activity-modal-content {
    max-width: 520px;
    width: 100%;
}

.activity-modal-content .modal-body {
    padding: 0;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.activity-list {
    display: flex;
    flex-direction: column;
}

/* --- One notification -------------------------------------------------- */
.activity-item {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
    align-items: flex-start;
}

.activity-item:last-child {
    border-bottom: none;
}

/* Unread carries a left rail plus a faint wash. Two signals rather than one
   because the wash alone fails at low contrast-ratio display settings and the
   rail alone is easy to miss when the list is short. */
.activity-item.is-unread {
    border-left: 3px solid var(--primary-500, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
    padding-left: 17px;
}

.activity-item-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    font-size: 13px;
}

.activity-item.is-unread .activity-item-icon {
    background: rgba(20, 184, 166, 0.12);
    color: var(--primary-600, #0d9488);
}

.activity-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.activity-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-800, #1e293b);
    margin-bottom: 2px;
}

.activity-item-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--slate-600, #475569);
    /* Bodies are server-composed and can run long; wrap rather than clip so
       nothing is silently truncated out of a notification the user is
       reading precisely BECAUSE they missed it the first time. */
    overflow-wrap: anywhere;
}

/* 11px note, matching the .ts-stat idiom used across Insights and Fairness. */
.activity-item-time {
    font-size: 11px;
    color: var(--slate-400, #94a3b8);
    margin-top: 4px;
}

/* --- Empty state ------------------------------------------------------- */
.activity-empty {
    padding: 44px 24px;
    text-align: center;
    color: var(--slate-500, #64748b);
}

.activity-empty i {
    font-size: 26px;
    color: var(--slate-300, #cbd5e1);
    margin-bottom: 12px;
    display: block;
}

.activity-empty p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    max-width: 34ch;
    margin-inline: auto;
}

/* --- Mark all read ----------------------------------------------------- */
#activity-mark-all-read {
    font-size: 12px;
    color: var(--primary-600, #0d9488);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm, 4px);
}

#activity-mark-all-read:hover {
    background: rgba(20, 184, 166, 0.08);
}

/* --- Dark mode --------------------------------------------------------- */
body.dark-mode .activity-item {
    border-bottom-color: var(--slate-700, #334155);
}

body.dark-mode .activity-item.is-unread {
    background: rgba(20, 184, 166, 0.10);
}

body.dark-mode .activity-item-icon {
    background: var(--slate-700, #334155);
    color: var(--slate-300, #cbd5e1);
}

body.dark-mode .activity-item-title {
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .activity-item-text {
    color: var(--slate-300, #cbd5e1);
}

body.dark-mode .activity-item-time {
    color: var(--slate-500, #64748b);
}

/* --- Touch ------------------------------------------------------------- */
/* ⚠️`pointer: coarse` is a DEVICE capability, not a screen size — it also
   matches touchscreen laptops. Only spacing and hit area change here, so a
   false positive costs nothing visual. */
@media (pointer: coarse) {
    .activity-item {
        padding: 16px 20px;
    }

    #activity-mark-all-read {
        min-height: 44px;
        padding: 10px 12px;
    }
}

@media (max-width: 600px) {
    .activity-modal-content .modal-body {
        max-height: 70vh;
    }
}

/* ── Temporary-group invitation actions (consent, 2026-09-02) ───────────────
   The invitee answers here. Accept creates their participant row; Decline
   records the answer. A resolved invitation shows its outcome instead. */
.activity-item-actions { display: flex; gap: 8px; margin: 8px 0 4px; }
.activity-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--surface, #fff); color: var(--text-primary, #111827);
}
.activity-act--accept { background: var(--primary-600, #0d9488); border-color: var(--primary-600, #0d9488); color: #fff; }
.activity-act--accept:hover:not(:disabled) { background: var(--primary-700, #0f766e); }
.activity-act--decline:hover:not(:disabled) { border-color: var(--text-tertiary, #9ca3af); }
.activity-act:disabled { opacity: .55; cursor: default; }
.activity-act:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
.activity-item-outcome { margin: 6px 0 2px; font-size: 12px; color: var(--text-secondary, #6b7280); }
body.dark-mode .activity-act { background: var(--surface-elevated, #1f2937); border-color: var(--border-color, #374151); color: var(--text-primary, #f3f4f6); }
body.dark-mode .activity-act--accept { background: var(--primary-600, #0d9488); color: #fff; }

/* ── Recent activity inside the Review Center's Requests tab (2026-09-06) ──
   The feed's rows keep the .activity-item vocabulary above; this is only the
   section chrome and the card treatment that makes the rows sit inside the
   Review Center like its other sections (.review-section, .rc-sent-invites)
   rather than as a bare modal list dropped into a tab. */
.rc-activity {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-200, #e2e8f0);
}
.rc-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rc-activity-header .review-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.rc-activity-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    text-align: center;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-600, #475569);
}
.rc-activity-mark-read {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-600, #0d9488);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm, 4px);
    white-space: nowrap;
}
.rc-activity-mark-read:hover { background: rgba(20, 184, 166, 0.08); }
.rc-activity-hint {
    margin: 4px 0 10px;
    font-size: 12px;
    color: var(--slate-500, #64748b);
}
.rc-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rc-activity-list .activity-item {
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--surface, #fff);
}
.rc-activity-list .activity-item:last-child { border-bottom: 1px solid var(--slate-200, #e2e8f0); }
.rc-activity-list .activity-item.is-unread {
    border-left: 3px solid var(--primary-500, #14b8a6);
    padding-left: 12px;
    background: rgba(20, 184, 166, 0.05);
}
.rc-activity-list .activity-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
}
.rc-activity-list .activity-empty { padding: 20px 12px; }
.rc-activity-list .activity-empty i { font-size: 20px; margin-bottom: 8px; }
body.dark-mode .rc-activity { border-top-color: var(--slate-700, #334155); }
body.dark-mode .rc-activity-count { background: var(--slate-700, #334155); color: var(--slate-300, #cbd5e1); }
body.dark-mode .rc-activity-list .activity-item {
    background: var(--surface-elevated, #1f2937);
    border-color: var(--slate-700, #334155);
}
body.dark-mode .rc-activity-list .activity-item:last-child { border-bottom-color: var(--slate-700, #334155); }
@media (pointer: coarse) {
    .rc-activity-mark-read { min-height: 44px; padding: 10px 12px; }
}

/* ── THE FEED FOLLOWS THE GROUP (2026-09-07) ──────────────────────────────
   On Overview the feed is sectioned per group: "Your account" first, groups
   with items that need the viewer next, temporary groups last and collapsed.
   In a selected group the list is flat and one quiet line says what is
   waiting elsewhere. Sections are native <details> so they need no script to
   fold, and they start collapsed after the first to keep the Requests tab
   short. */
.activity-group {
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: 6px;
}
.activity-group:first-child { border-top: none; margin-top: 0; }
.activity-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  user-select: none;
}
.activity-group-head::-webkit-details-marker { display: none; }
.activity-group-head::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-secondary, #64748b);
  border-bottom: 1.5px solid var(--text-secondary, #64748b);
  transform: rotate(-45deg);
  margin-right: 2px;
  transition: transform 0.15s ease;
}
.activity-group[open] > .activity-group-head::before { transform: rotate(45deg); }
.activity-group-dot {
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--primary-500, #14b8a6);
  flex-shrink: 0;
}
.activity-group--account .activity-group-dot { background: var(--text-secondary, #64748b); }
.activity-group--temp .activity-group-dot { background: var(--status-flex, #fbbf24); }
.activity-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-group-temp {
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-secondary, #64748b);
  margin-left: 4px;
}
.activity-group-meta {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}
.activity-group-meta.has-unread { color: var(--primary-600, #0d9488); }
.activity-group-body { padding-left: 4px; }
.activity-elsewhere {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 8px 2px 2px;
  border-top: 1px dashed var(--border-color, #e5e7eb);
  font-size: 12px; color: var(--text-secondary, #64748b);
}
.activity-elsewhere-all {
  font: inherit; font-weight: 600;
  color: var(--primary-600, #0d9488);
  background: none; border: none; padding: 4px 0; cursor: pointer;
}
.activity-elsewhere-all:hover { text-decoration: underline; }
.activity-elsewhere-all:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; border-radius: 4px; }
body.dark-mode .activity-group { border-top-color: var(--border-color, #334155); }
body.dark-mode .activity-elsewhere { border-top-color: var(--border-color, #334155); }