/* ===== Notifications dropdown =====
   position: fixed (not absolute) and rendered as a root-level sibling of
   <header> so it escapes the header's stacking context (z-index 100) and
   layers above the DM sidebar (z-index 150). */
.notif-dropdown {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-top) - 4px);
  right: 92px;
  width: min(360px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  z-index: 250;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-dropdown.hidden { display: none; }
.notif-dropdown-header {
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}
.notif-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.notif-empty.hidden { display: none; }
/* 022: HUMAN notification rows (task-notify.js) — ride the shared dropdown
   shell; tn-* is only the row content. */
.tn-item { display: block; }
.tn-line { display: flex; align-items: baseline; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); min-width: 0; }
.tn-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #f0a020; align-self: center; }
.tn-actor { color: var(--text-primary); font-weight: 600; }
.tn-title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tn-age { flex: 0 0 auto; margin-left: auto; color: var(--text-muted); font-size: 0.7rem; }
.tn-snippet { margin-top: 3px; padding-left: 13px; color: var(--text-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-item.tn-unread { background: rgba(240,160,32,0.05); }
.tn-readall { float: right; font-size: 0.68rem; color: var(--text-muted); background: transparent; border: 1px solid var(--fleet-hair); border-radius: 5px; padding: 1px 7px; cursor: pointer; }
.tn-readall:hover { color: var(--text-primary); border-color: var(--text-muted); }
/* 022: transient board notice (deep-link not-available degrade). */
.tasks-toast { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--fleet-hair); border-radius: 7px; background: var(--fleet-panel); color: var(--text-secondary); font-size: 0.8rem; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: flex-start;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item:active { background: var(--glass-hover); }
.notif-item:last-child { border-bottom: none; }
.notif-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
}
.notif-item-icon img,
.notif-item-icon svg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.notif-item-count {
  background: var(--accent-red);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.notif-item-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item-preview strong {
  color: var(--text);
  font-weight: 500;
}
.notif-item-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 4px;
}

@media (max-width: 600px) {
  .notif-dropdown {
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* === Mention autocomplete dropdown === */
.dm-compose { position: relative; }
/* "New message" chip — floats centered above the composer while the reader is
   scrolled up (no more snap-to-bottom). Glass pill per the app's token system
   (vars adapt light+dark); generous touch target for mobile. Absolute against
   .dm-compose's position:relative, so it rides both form factors' layouts. */
.dm-new-msg-chip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.dm-new-msg-chip:hover { background: var(--glass-hover); }
.dm-mention-dropdown {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  max-height: 220px;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 4px 0;
}
.dm-mention-dropdown.hidden { display: none; }
.dm-mention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
}
.dm-mention-row.is-highlight { background: rgba(255, 255, 255, 0.08); }
.dm-mention-username {
  font-weight: 500;
  color: var(--text-primary);
}
.dm-mention-room {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}
.dm-mention-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}
.dm-mention-badge-eval {
  color: #ffb86b;
  background: rgba(255, 184, 107, 0.12);
}
.dm-mention-badge-coder {
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.12);
}

/* === #done convergence indicator (room sidebar) === */
.dm-converged-pip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-radius: 6px;
  vertical-align: middle;
  font-weight: 600;
}

/* === Content Calendar (V1 — YT Full + YT Clips) === */
.cal-header { gap: 8px; flex-wrap: wrap; }
.cal-header h2 { flex: 1; text-align: center; font-size: 1.1rem; min-width: 120px; }
.cal-nav { padding: 4px 8px; }
.cal-today-btn { padding: 6px 12px; font-size: 0.8rem; }
.cal-mode-toggle { display: flex; gap: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; overflow: hidden; }
.cal-mode-btn { background: none; border: none; color: var(--text-muted); padding: 6px 10px; font-size: 0.8rem; cursor: pointer; font-family: inherit; }
.cal-mode-btn.active { background: var(--accent-red); color: #fff; }
.cal-body { flex: 1; overflow-y: auto; padding: 0 8px 16px; }
.cal-error, .cal-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

/* Month grid */
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 4px 6px; }
.cal-weekday { text-align: center; font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 4px; }
.cal-cell { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 6px; padding: 4px; min-height: 76px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-cell-empty { background: transparent; border-color: transparent; }
.cal-cell-today { border-color: var(--accent-red); background: rgba(255, 107, 107, 0.08); }
.cal-cell-date { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.cal-cell-today .cal-cell-date { color: var(--accent-red); }
.cal-cell-more { font-size: 0.6rem; color: var(--text-muted); font-style: italic; }

/* Calendar chips (in-cell) */
.cal-chip { display: flex; flex-direction: column; gap: 1px; padding: 3px 4px; border-radius: 4px; font-size: 0.62rem; cursor: pointer; border-left: 3px solid; background: rgba(255,255,255,0.06); overflow: hidden; }
.cal-chip:active { opacity: 0.7; }
.cal-chip-platform { font-weight: 700; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
.cal-chip-time { font-size: 0.55rem; opacity: 0.7; }
.cal-chip-title { font-size: 0.62rem; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Upcoming list */
.cal-list { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.cal-list-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; cursor: pointer; font-size: 0.85rem; }
.cal-list-row:active { opacity: 0.8; }
.cal-list-platform { font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Channel-based color: green for YouTube Full (podcast channel), red for YouTube Clips. */
.cal-platform-full { background: rgba(76, 175, 80, 0.18); color: #6ad06f; border-color: #6ad06f; }
.cal-platform-clip { background: rgba(244, 67, 54, 0.20); color: #ff8a80; border-color: #ff8a80; }
.cal-platform-episode { background: rgba(112, 161, 255, 0.18); color: #9ec1ff; border-color: #70a1ff; }
.cal-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layers dropdown */
.cal-layers { position: relative; }
.cal-layers-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px;
  padding: 6px; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(8px);
}
.cal-layers-menu.open { display: block; }
.cal-layer-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; color: var(--text); }
.cal-layer-opt:hover { background: rgba(255,255,255,0.06); }
.cal-layer-opt input { accent-color: var(--accent-red); }
.cal-list-when { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

/* Status pills + chip colors (5 native Episode Content Status values) */
.cal-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.cal-status-published { background: rgba(76, 175, 80, 0.18); color: #6ad06f; border-color: #6ad06f; }
.cal-status-scheduled { background: rgba(33, 150, 243, 0.18); color: #6cb6ff; border-color: #6cb6ff; }
.cal-status-uploaded  { background: rgba(0, 188, 212, 0.18); color: #6fd6e5; border-color: #6fd6e5; }
.cal-status-pending   { background: rgba(254, 202, 87, 0.18); color: var(--accent-yellow); border-color: var(--accent-yellow); }
.cal-status-failed    { background: rgba(244, 67, 54, 0.20); color: #ff8a80; border-color: #ff8a80; }
.cal-status-unknown   { background: var(--glass-bg); color: var(--text-muted); border-color: var(--glass-border); }

/* Drilldown */
.cal-drill { width: 94%; max-width: none; max-height: 92%; overflow-y: auto; padding: 20px; }
.cal-drill-thumb { width: 100%; max-height: 340px; border-radius: 8px; margin-bottom: 12px; aspect-ratio: 16/9; object-fit: cover; }
/* Analytics block inside the drilldown — cached snapshot, no revenue. */
.cal-drill-analytics { margin-bottom: 14px; }
.cal-drill-analytics-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
.cal-drill-analytics-stamp { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.cal-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cal-metric { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; padding: 10px 12px; }
.cal-metric-val { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.cal-metric-label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; }
.cal-drill-analytics-loading, .cal-drill-analytics-empty { font-size: 0.82rem; color: var(--text-muted); padding: 6px 0; }
.cal-drill-header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cal-drill-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.cal-drill-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; }
.cal-drill-meta strong { color: var(--text-primary); margin-right: 6px; }
.cal-drill-notes { font-size: 0.8rem; color: var(--text-muted); padding: 10px; background: var(--glass-bg); border-radius: 6px; margin-bottom: 12px; white-space: pre-wrap; }
.cal-drill-cta { text-decoration: none; display: inline-block; }

/* Presence V1.A: greyed-out state when user has the item open in a drilldown. */
.cal-chip-focused { opacity: 0.4; outline: 2px solid var(--accent-yellow); }

/* Calendar drilldown scoped to calendar pane only (V1.A.1 fix).
   The base .modal-overlay is position:fixed inset:0 which covers the
   entire viewport including the DM sidebar. For the Calendar drilldown
   we want it scoped to just the calendar view container so the DM stays
   interactive and the right-pane chat is uninterrupted. */
#view-calendar { position: relative; overflow: hidden; }
.cal-drill-overlay { position: absolute; }

/* Discuss toggle in drilldown bottom-left (V1.A.3). Small button that
   fires a wake at the worker pane so they react proactively. */
.modal-buttons { display: flex; gap: 8px; align-items: center; }
.cal-drill-discuss { margin-right: auto; background: var(--glass-bg); color: var(--text-primary); border: 1px solid var(--glass-border); border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; font-family: inherit; }
.cal-drill-discuss:hover { background: var(--accent-yellow-bg, rgba(254,202,87,0.15)); border-color: var(--accent-yellow); }
.cal-drill-discuss:disabled { opacity: 0.6; cursor: wait; }

/* === #general — Slack-style human-only shared thread (full main-pane view) === */
/* Nav button: text "#" glyph sized to sit on the same optical line as the
   sibling SVG icons; unread badge pinned to the glyph's top-right. */
/* .nav-btn-tasks rides along: any nav button carrying a .nav-badge needs the
   positioned anchor (the Tasks board reuses this exact badge pattern). */
.nav-btn-general,
.nav-btn-tasks { position: relative; }
/* Channel row with no room for a member to land in — inert, visibly dimmed. */
.channel-row-inert { pointer-events: none; opacity: 0.55; }
/* Activity feed — reuses the dm-convo row anatomy; the @ chip marks rows
   whose last message mentions you (those sort to the top). */
.activity-list { padding-top: 8px; }
.activity-mention-chip {
  background: var(--accent-yellow);
  color: #14141c;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.activity-sender { color: var(--text-secondary); font-weight: 600; }
/* Dashboard stub — real scoreboard lands in a later phase. */
.dashboard-placeholder {
  color: var(--text-muted);
  text-align: center;
  padding: 48px 16px;
}
.nav-hash { font-size: 22px; line-height: 26px; height: 26px; font-weight: 700; }
.nav-badge {
  position: absolute;
  top: 0;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Thread fills the full view width at every size — the main pane already
   yields space dynamically when the Messages panel opens, so no
   reading-column cap (Jase, preview feedback 2026-07-02). */
.general-thread { padding: 4px 24px 12px; gap: 0; }
.general-compose { padding-left: 24px; padding-right: 24px; }
.general-header { padding-bottom: 8px; }
.general-header .general-hash { color: var(--text-muted); margin-right: 2px; }
.general-empty { color: var(--text-muted); text-align: center; padding: 40px 16px; }
@media (max-width: 768px) {
  .general-thread { padding: 4px 16px 12px; }
  .general-compose { padding-left: 12px; padding-right: 12px; }
}

/* Slack-style rows (phase 2): uniform left alignment — avatar column, name +
   clock time on one line, content below. No bubbles. */
.gen-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  position: relative;
}
.gen-msg-row:hover { background: rgba(255, 255, 255, 0.04); }
.gen-msg-row.gen-msg-cont { padding-top: 1px; padding-bottom: 1px; }
.gen-msg-avatar { width: 36px; flex-shrink: 0; padding-top: 2px; }
/* Grouped continuation: spacer column; the message's own time surfaces on row hover. */
.gen-msg-cont .gen-msg-avatar { padding-top: 0; }
.gen-msg-hovertime {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  opacity: 0;
  text-align: right;
  padding-top: 3px;
  white-space: nowrap;
}
.gen-msg-row:hover .gen-msg-hovertime { opacity: 0.8; }
.gen-msg-main { flex: 1; min-width: 0; }
/* Read receipt under my own last #general post — left-aligned within the
   message column (Slack style). "Seen by" muted; "Not seen" laggers dimmer. */
.general-receipt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  font-size: 0.68rem;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}
.general-receipt-seen { color: var(--text-muted); opacity: 0.85; }
.general-receipt-lag { color: var(--text-muted); opacity: 0.55; }
.gen-msg-header { display: flex; align-items: baseline; gap: 8px; }
.gen-msg-sender { font-size: 0.9rem; font-weight: 700; -webkit-user-select: text; user-select: text; }
.gen-msg-time { font-size: 0.7rem; color: var(--text-muted); }
.gen-msg-body {
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
/* Chain-link push action — far right, hover-revealed on desktop; hidden on
   mobile v1 (the DM panel it pushes into doesn't exist there). */
.gen-msg-link {
  position: absolute;
  top: 4px;
  right: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-muted);
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
  padding: 0;
}
.gen-msg-row:hover .gen-msg-link { opacity: 1; }
.gen-msg-link:hover { color: var(--accent-red); }
@media (max-width: 768px) {
  .gen-msg-link { display: none; }
}

/* Link-preview cards under a message (data from /api/unfurl). */
.gen-msg-cards { display: flex; flex-direction: column; gap: 6px; }
.gen-msg-cards:not(:empty) { margin-top: 6px; }
.gen-unfurl-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 520px;
  padding: 8px 10px;
  border-left: 3px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: var(--text-primary);
}
.gen-unfurl-card:hover { background: rgba(255, 255, 255, 0.07); }
.gen-card-thumb {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.gen-card-text { min-width: 0; }
.gen-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gen-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gen-card-domain { font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; margin-top: 4px; }
.gen-unfurl-image { display: block; max-width: 360px; }
.gen-card-img-solo { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; }

/* Push-result toast — bottom-center of the view, above the composer. */
.gen-toast {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(20, 20, 32, 0.95);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 20;
}
.gen-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gen-toast-error { border-color: var(--accent-red); }
#view-general { position: relative; }

/* #general drop-zone affordance — same visual language as the DM panel's
   dm-drop-active (attach parity, 2026-07-02). */
#view-general.gen-drop-active {
  outline: 2px dashed var(--accent-yellow);
  outline-offset: -2px;
  background: rgba(254, 202, 87, 0.05);
}

/* @mention tokens in #general (humans only — bot summoning parked for V2).
   The viewer's own name gets the stronger highlight: v1's notification is
   your name jumping out of the scrollback. */
.gen-mention { color: var(--accent-yellow); font-weight: 700; }
.gen-mention-me {
  color: #fff;
  background: rgba(254, 202, 87, 0.28);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 700;
}

/* Multi-select New-Message picker (group DMs, 2026-07-02, UX-corrected):
   row-body tap opens the 1:1 immediately (old one-tap behavior); the
   checkbox is its own hit-target and flips the modal into group mode. */
.dm-pick-user { position: relative; }
.dm-pick-checkbox {
  margin-left: auto;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 14px;
  font-weight: 700;
}
.dm-pick-checkbox::after { content: '✓'; }
.dm-pick-checkbox:hover { border-color: var(--accent-yellow); }
.dm-pick-user.is-selected { background: rgba(254, 202, 87, 0.1); border-color: var(--accent-yellow); }
.dm-pick-user.is-selected .dm-pick-checkbox {
  background: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #14141c;
}

/* Group-DM facepile — overlapped member photos (Slack-style). The dark ring
   makes each circle read as separate against its neighbor. */
.dm-facepile { display: inline-flex; align-items: center; line-height: 0; }
.dm-facepile-item {
  display: inline-flex;
  border-radius: 50%;
  border: 2px solid #0a0a14;
  margin-left: -9px; /* ~35% overlap at row size */
  position: relative;
}
.dm-facepile-item:first-child { margin-left: 0; }
.dm-facepile-more {
  margin-left: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: normal;
}
.dm-convo-avatar-group { display: flex; align-items: center; min-width: 26px; }
/* Thread header: smaller pile, tighter overlap, sits before the name. */
.dm-facepile-header { margin-right: 8px; display: inline-flex; vertical-align: middle; }
.dm-facepile-header .dm-facepile-item { margin-left: -7px; }
.dm-facepile-header .dm-facepile-item:first-child { margin-left: 0; }

/* === Scoreboard (#view-dashboard) — Fleet design system: Campione display,
   Choplin text, maroon surface, status-color language. REUSES the shared
   --fleet-* tokens; the --sb-* names are thin aliases so the render markup is
   untouched — a reskin, not a rebuild. === */
#view-dashboard { overflow-y: auto; }
.sb-wrap {
  /* alias the scoreboard's local names onto the shared fleet tokens (reuse, not fork) */
  --sb-panel: var(--fleet-panel); --sb-panel-2: var(--fleet-panel-2);
  --sb-line: var(--fleet-hair);
  --sb-ink: var(--text-primary); --sb-muted: var(--text-secondary); --sb-dim: var(--text-muted);
  --sb-accent: var(--fleet-your-move); --sb-accent-glow: rgba(254,202,87,.4);
  --sb-lime: var(--fleet-working); --sb-behind: var(--fleet-your-move);
  padding: 20px 24px 40px; color: var(--sb-ink); font-family: var(--fleet-text); min-height: 100%;
  /* same maroon surface + scanline as the FLEET board */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 500px at 15% -10%, rgba(120,26,26,0.55), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(60,18,18,0.6), transparent 55%),
    linear-gradient(180deg, #2a1616 0%, #1f1111 100%);
}
.sb-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--sb-line); }
.sb-header .brand { display: flex; align-items: center; gap: 14px; }
.sb-header .mark { width: 11px; height: 32px; background: var(--sb-accent); box-shadow: 0 0 16px var(--sb-accent-glow); transform: skewX(-12deg); border-radius: 1px; }
.sb-header h1 { font-family: var(--fleet-ink); font-weight: 900; font-size: 22px; letter-spacing: 4px; text-transform: uppercase; }
.sb-header .sub { color: var(--sb-dim); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; margin-top: 2px; }
.sb-header .hgroup { display: flex; align-items: center; gap: 24px; }
.sb-header .bench { text-align: right; border-right: 1px solid var(--sb-line); padding-right: 24px; }
.sb-header .bench .k { font-size: 10px; letter-spacing: 3px; color: var(--sb-dim); text-transform: uppercase; }
.sb-header .bench .v { font-family: var(--fleet-text); font-size: 12px; color: var(--sb-muted); margin-top: 3px; }
.sb-header .bench .v b { color: var(--sb-lime); }
.sb-header .month { text-align: right; }
.sb-header .month .m { font-family: var(--fleet-ink); font-weight: 900; font-size: 30px; letter-spacing: 1px; line-height: .9; text-transform: uppercase; }
.sb-header .month .y { color: var(--sb-accent); font-size: 12px; letter-spacing: 6px; }
.sb-grid { display: grid; grid-template-columns: minmax(270px, 330px) minmax(300px, 1fr) minmax(270px, 330px); gap: 18px; padding-top: 18px; }
@media (max-width: 980px) { .sb-grid { grid-template-columns: 1fr; } }
.sb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sb-wrap .coltitle { font-family: var(--fleet-ink); font-weight: 900; font-size: 12px; letter-spacing: 3px; color: var(--text-primary); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.sb-wrap .coltitle::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }
.sb-card { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--sb-line); border-radius: 12px; padding: 15px 18px; position: relative; overflow: hidden; }
.sb-card.hero { padding: 20px 20px 16px; }
.sb-card.hero .lab { font-family: var(--fleet-ink); font-weight: 500; font-size: 13px; letter-spacing: 3px; color: var(--sb-muted); text-transform: uppercase; }
.sb-card.hero .rule { color: var(--sb-accent); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
.sb-card.hero .big { font-family: var(--fleet-ink); font-weight: 900; font-size: clamp(60px, 8vw, 104px); line-height: .84; letter-spacing: -1px; margin: 8px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.sb-card.hero .big .of { color: var(--sb-dim); font-size: .5em; }
.sb-wrap .pips { display: flex; gap: 6px; margin-top: 12px; }
.sb-wrap .pip { flex: 1; height: 10px; border-radius: 3px; background: rgba(0,0,0,0.3); border: 1px solid var(--sb-line); }
.sb-wrap .pip.on { background: var(--sb-lime); border-color: var(--sb-lime); box-shadow: 0 0 10px rgba(46,213,115,.5); }
.sb-card.hero .foot { margin-top: 12px; font-size: 12px; color: var(--sb-muted); letter-spacing: .5px; }
.sb-card.hero .foot b { color: var(--sb-ink); }
.sb-card.tile { display: flex; align-items: center; justify-content: space-between; }
.sb-card.tile .l .k { font-family: var(--fleet-ink); font-weight: 500; font-size: 12px; letter-spacing: 2px; color: var(--sb-muted); text-transform: uppercase; }
.sb-card.tile .l .pace { font-family: var(--fleet-text); font-size: 11px; color: var(--sb-dim); margin-top: 4px; }
.sb-card.tile .v { font-family: var(--fleet-ink); font-weight: 900; font-size: 40px; line-height: .9; display: flex; align-items: baseline; gap: 4px; }
.sb-card.tile .v .of { color: var(--sb-dim); font-size: 20px; }
.sb-card.bars { display: flex; flex-direction: column; gap: 15px; }
.sb-wrap .subhead { font-family: var(--fleet-text); font-size: 11px; letter-spacing: 2px; color: var(--sb-accent); text-transform: uppercase; font-weight: 600; margin-bottom: 1px; }
.sb-wrap .bar .top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 7px; }
.sb-wrap .bar .name { font-family: var(--fleet-ink); font-weight: 500; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.sb-wrap .bar .name .ic { font-family: var(--fleet-text); font-size: 10px; color: var(--sb-dim); letter-spacing: 1px; border: 1px solid var(--sb-line); padding: 1px 5px; border-radius: 4px; }
.sb-wrap .bar .val { font-family: var(--fleet-text); font-weight: 600; font-size: 13px; color: var(--sb-ink); text-align: right; }
.sb-wrap .bar .val .t { color: var(--sb-dim); }
.sb-wrap .bar .val .wt { display: block; font-size: 10px; color: var(--sb-muted); margin-top: 2px; font-weight: 400; }
.sb-wrap .track { position: relative; height: 13px; background: rgba(0,0,0,0.32); border-radius: 7px; overflow: hidden; border: 1px solid var(--sb-line); }
/* Heat scale — how far COMPLETION sits behind today's PACE. The tier class sets
   --heat / --heat-glow; the fill AND the metric's number both wear it, so the
   board reads temperature: green on pace → yellow → orange → red far off.
   SHARED (f426c411): defined un-scoped so the task-card countdown (.tasks-cd)
   consumes the same scale — one heat vocabulary across the PWA. The classes
   only set custom properties; scoreboard consumers below stay .sb-wrap-scoped. */
.heat-green  { --heat: #2ed573; --heat-glow: rgba(46,213,115,.42); }
.heat-yellow { --heat: #feca57; --heat-glow: rgba(254,202,87,.42); }
.heat-orange { --heat: #ff9f43; --heat-glow: rgba(255,159,67,.42); }
.heat-red    { --heat: #ff6b6b; --heat-glow: rgba(255,107,107,.42); }
.sb-wrap .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, var(--heat-glow, rgba(46,213,115,.42)), var(--heat, #2ed573)); box-shadow: 0 0 12px var(--heat-glow, rgba(46,213,115,.42)); }
/* numbers/verdicts carrying a tier class take the tier color; dimmed children
   (/ target, watch subline) keep their own explicit colors. */
.sb-wrap .val.heat-green, .sb-wrap .val.heat-yellow, .sb-wrap .val.heat-orange, .sb-wrap .val.heat-red,
.sb-wrap .big[class*="heat-"], .sb-wrap .tile .v[class*="heat-"], .sb-wrap .follow .v[class*="heat-"],
.sb-wrap .verdict { color: var(--heat); }
.sb-wrap .pace-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sb-ink); opacity: .6; }
.sb-wrap .bar .pct { font-family: var(--fleet-text); font-size: 10px; color: var(--sb-muted); margin-top: 5px; display: flex; justify-content: space-between; }
.sb-card.follow { background: linear-gradient(180deg, rgba(254,202,87,0.08), rgba(255,255,255,0.015)); border-color: rgba(254,202,87,0.25); }
.sb-card.follow .k { font-family: var(--fleet-ink); font-weight: 500; font-size: 12px; letter-spacing: 2px; color: var(--sb-muted); text-transform: uppercase; }
.sb-card.follow .v { font-family: var(--fleet-ink); font-weight: 900; font-size: 44px; line-height: .9; margin-top: 5px; color: var(--sb-accent); display: flex; align-items: baseline; gap: 4px; }
.sb-card.follow .v .of { color: var(--sb-dim); font-size: 22px; }
.sb-card.follow .meta { font-family: var(--fleet-text); font-size: 11px; color: var(--sb-muted); margin-top: 5px; }
/* Month-pace bar — content-width, directly below the header (Jase): divides
   identity from data, the eye crosses it on the way down to the columns. Green
   fill = % of month elapsed; the per-bar │ pace-marks sit at the same fraction. */
.sb-monthbar { position: relative; margin: 18px 0 0; }
.sb-monthbar-track { height: 5px; background: rgba(0,0,0,0.4); position: relative; overflow: hidden; border-radius: 3px; }
.sb-monthbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(46,213,115,.55), var(--fleet-working)); box-shadow: 0 0 12px rgba(46,213,115,.5); }
.sb-monthbar-label { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0 0; font-family: var(--fleet-text); font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--sb-muted); }
.sb-monthbar-label b { color: var(--text-primary); font-weight: 600; }
.sb-foot { font-family: var(--fleet-text); font-size: 10px; color: var(--sb-dim); letter-spacing: .3px; margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-chip { border: 1px solid var(--sb-line); border-radius: 4px; padding: 1px 6px; color: var(--sb-muted); }