/* inbox.css
   The inbox: a panel that slides in from the right (see ui/inbox-panel.js),
   listing players sent to you or by you, plus the trigger and its unread
   badge in the nav bar.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

/* ── Nav trigger + badge ──────────────────────────────────────────────
   Sits to the right of the checkmark-author menu (ui/nav.js's checkMenu) for
   a full account, and in that same slot on its own for a partial one —
   sending and receiving isn't full-only, so the trigger always renders.

   A labelled chip at the checkmark trigger's own height, not the plain 30px
   icon-btn circle the theme toggle uses — this is a destination worth a
   second look, not one more setting toggle, so it earns the word "Inbox"
   and the room to show it. */
.inbox-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--label); cursor: pointer;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 650;
  font-family: var(--font); transition: background 0.14s, border-color 0.14s;
}
.inbox-trigger:hover { background: var(--surface); border-color: var(--border); }
.inbox-trigger svg { width: 16px; height: 16px; color: var(--accent-deep); flex-shrink: 0; }
:root[data-theme="dark"] .inbox-trigger svg { color: var(--accent); }

/* Fixed width/height (not min-width plus padding) so single digits sit in a
   true circle rather than a wide pill whose rounded ends read as off-centre
   — "9+" still clears easily at this font-size. */
.inbox-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; box-sizing: border-box;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  font-size: 10px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Author-level rules beat the browser's own [hidden] UA rule regardless of
   source order, so the badge's own display has to yield to it explicitly —
   otherwise a hidden badge with zero unread would still paint. */
.inbox-badge[hidden] { display: none; }

/* ── Overlay + slide-in panel ──────────────────────────────────────────
   The backdrop fades while the panel itself slides — two separate
   properties on two separate elements, both driven by one .is-open class
   added a frame after mount (see openInboxPanel), the same two-step every
   other entrance in this app uses to turn a mount into a motion. */
.inbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 10, 20, 0);
  display: flex; justify-content: flex-end;
  transition: background 0.24s var(--ease-out);
}
.inbox-overlay.is-open { background: rgba(10, 10, 20, 0.42); }

.inbox-panel {
  width: min(420px, 100vw); height: 100%; flex-shrink: 0;
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s var(--ease-out);
}
.inbox-overlay.is-open .inbox-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .inbox-overlay, .inbox-panel { transition: none; }
}

.inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--border-2); flex-shrink: 0;
}
.inbox-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.inbox-title svg { width: 18px; height: 18px; color: var(--accent-deep); }
:root[data-theme="dark"] .inbox-title svg { color: var(--accent); }

.inbox-tabs { margin: 14px 18px 0; flex-shrink: 0; }

.inbox-list { flex: 1; overflow-y: auto; padding: 10px 12px 18px; }
.inbox-rows { display: flex; flex-direction: column; gap: 4px; }

/* ── One share, one row ────────────────────────────────────────────── */
.inbox-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 8px 10px 10px; border-radius: var(--r-md);
  transition: background 0.13s;
}
.inbox-row:hover { background: var(--surface-2); }

/* Unread gets a soft accent wash and a solid name, the same visual weight a
   grade wash gives a board card — the one thing worth distinguishing in a
   list a coach is scanning top to bottom. */
.inbox-row.is-unread { background: var(--accent-light); }
.inbox-row.is-unread:hover { filter: brightness(0.98); }
.inbox-row.is-unread .inbox-row-name { font-weight: 720; }

/* Escalated gets a rail down the left rather than a background wash — it has
   to read *on top of* the unread wash when both apply (a fresh, escalated
   share), not compete with it for the same visual channel. The tag itself is
   what actually names it; the rail is what still catches the eye once a
   coach has scrolled past the top of the list. */
.inbox-row.is-escalated { border-left: 3px solid var(--red); }
.inbox-escalate-tag { gap: 4px; }
.inbox-escalate-tag svg { width: 10px; height: 10px; }

.inbox-row-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  color: inherit; text-decoration: none;
}
.inbox-row-main .face { --face-size: 36px; margin-top: 1px; }
.inbox-row-body { flex: 1; min-width: 0; }
.inbox-row-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.inbox-row-name { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; }
.inbox-row-meta {
  font-size: 11.5px; color: var(--label-2); margin-top: 2px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.inbox-row-status { font-weight: 600; }

/* The note itself, set off from the meta line like a small quoted card —
   it's the actual content of the message, so it earns its own surface
   rather than reading as one more line of metadata. */
.inbox-row-note {
  margin-top: 6px; padding: 8px 10px; background: var(--surface-2);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--label);
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word;
}
.inbox-row.is-unread .inbox-row-note { background: color-mix(in srgb, var(--surface) 55%, var(--accent-light)); }

.inbox-row-del { flex-shrink: 0; margin-top: 2px; }