/* ═══════════════════════════════════════════════════════════════
   messageCenter.css — global Messages (bell, modal, dock pill)
   Loaded by MessageCenter via cssUrl('messageCenter.css').
   ═══════════════════════════════════════════════════════════════ */
:root {
  --mc-bg: #0b1220; --mc-panel: #0f172a; --mc-panel-2: #111c33;
  --mc-border: rgba(255,255,255,.12); --mc-text: #e5edf7; --mc-muted: #94a3b8;
}

/* ── bell (TabBar, right corner) ───────────────────────────── */
.mc-bell {
  position: relative; margin-left: auto; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--mc-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
}
.mc-bell:hover, .mc-bell.on { background: rgba(255,255,255,.06); color: var(--mc-text); }

/* ── labelled pill variant: "Global Messages" ────────────────────
   Coloured by --mc-accent, which MessageBell sets from the caller's
   getRoleAccent() — the same colour the AvatarRing next to it uses, so IT,
   management, supervisors and execute each get their own. The 36px height
   matches AvatarRing size={36} in the TabBar row so the two sit level.
   Only applies when a label is passed: the bare bells are untouched. */
.mc-bell-pill {
  --mc-accent: #a78bfa;                /* fallback when no accent is passed */
  width: auto;
  height: 36px;
  gap: 8px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  box-sizing: border-box;
  border-color: var(--mc-accent);
  /* 8% wash + 19% border is the same treatment the profile dropdown icons use
     (MAP_ACCENT + "15" / "30" in ProfileMap.jsx), so the pill reads as part of
     the same family instead of shouting. `color` stays the accent because the
     bell glyph strokes with currentColor — only the label goes white. */
  background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
  color: var(--mc-accent);
  white-space: nowrap;
}
.mc-bell-pill:hover, .mc-bell-pill.on {
  background: color-mix(in srgb, var(--mc-accent) 16%, transparent);
  color: var(--mc-accent);
}
/* the same near-white as .profile-accordion-label (--ph-text) */
.mc-bell-label { font: 600 0.84rem/1 inherit; font-family: inherit; color: #f0f0f5; }
/* the glyph gets its own circle at the right end, matching Job Messages */
.mc-bell-ico {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mc-accent) 19%, transparent);
  background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
}
.mc-bell-ico svg { display: block; }
.mc-bell-pill .mc-bell-badge {
  top: -4px; right: -5px;
  background: var(--mc-accent);
  box-shadow: 0 0 0 2px var(--mc-bg, #0f172a);
}
/* the outer TabBar row is tight on a phone — drop to the glyph alone */
@media (max-width: 720px) {
  .mc-bell-label { display: none; }
  .mc-bell-pill { padding: 0 3px; gap: 0; }
  /* .mc-bell-pill.mc-bell-home is 0,2,0 and would keep its 14px left padding
     here, leaving the glyph off-centre once the label is hidden */
  .mc-bell-pill.mc-bell-home { padding: 0 3px; }
}
.mc-bell-badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; color: #0b1220; font: 700 10.5px/17px system-ui; text-align: center;
  box-shadow: 0 0 0 2px var(--mc-bg);
}

/* ── overlay + modal ───────────────────────────────────────── */
.mc-overlay {
  position: fixed; inset: 0; z-index: 10060;
  background: rgba(2,6,23,.62); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mc-modal {
  width: min(960px, 100%); height: min(680px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--mc-panel) 0%, var(--mc-bg) 100%);
  border: 1px solid var(--mc-border); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--mc-accent, #22d3ee) 18%, transparent);
  color: var(--mc-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.mc-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--mc-border);
}
.mc-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.mc-head-tabs { display: inline-flex; gap: 6px; justify-self: center; }
.mc-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--mc-muted); font: 600 13px system-ui; cursor: pointer; }
.mc-tab.on { background: rgba(255,255,255,.05); }
.mc-head-btns { justify-self: end; display: inline-flex; gap: 4px; }
.mc-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--mc-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mc-icon-btn:hover { background: rgba(255,255,255,.07); color: var(--mc-text); }
.mc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.mc-badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; color: #0b1220; font: 700 11.5px/20px system-ui; text-align: center; }
.mc-muted { color: var(--mc-muted); font-size: 12.5px; }
.mc-link { background: none; border: 0; color: var(--mc-muted); font: 500 12.5px system-ui; cursor: pointer; text-decoration: underline; }

.mc-btn { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.04); color: var(--mc-text); font: 600 13px system-ui; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mc-btn-solid { border-color: transparent; color: #0b1220; }
.mc-btn:disabled { opacity: .45; cursor: default; }

.mc-search, .mc-title-input, .mc-reply textarea, .mc-composer textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mc-border);
  background: rgba(255,255,255,.04); color: var(--mc-text); font: 14px system-ui; outline: none; resize: none;
}
.mc-search:focus, .mc-title-input:focus, .mc-reply textarea:focus, .mc-composer textarea:focus { border-color: var(--mc-accent, #22d3ee); }

.mc-skeleton { height: 120px; margin: 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: mc-shimmer 1.2s infinite; }
@keyframes mc-shimmer { to { background-position: -200% 0; } }
.mc-empty { padding: 40px 20px; text-align: center; color: var(--mc-muted); }
.mc-empty.small { padding: 20px; }
.mc-empty-title { color: var(--mc-text); font-weight: 700; margin-bottom: 6px; }
/* house rule: toasts come from the top, not the bottom (see .ca-toast) */
.mc-toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: 12px; background: #7f1d1d; color: #fee2e2; font-size: 13px; cursor: pointer; }

/* ── inbox ─────────────────────────────────────────────────── */
.mc-inbox { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mc-toolbar { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mc-border); }
.mc-threads-head { padding: 12px 24px 4px; font-size: 12px; color: var(--mc-muted); text-transform: uppercase; letter-spacing: .06em; }
.mc-threads { overflow-y: auto; padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mc-thread {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; color: inherit;
  border: 1px solid rgba(255,255,255,.55); border-left: 4px solid rgba(255,255,255,.55);   /* white edge separates records */
  background: rgba(255,255,255,.035); transition: background .15s, transform .15s, border-color .15s;
}
.mc-thread:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); border-color: rgba(255,255,255,.85); }
.mc-thread.mc-unread { background: rgba(255,255,255,.06); }     /* left edge takes the accent colour inline */
.mc-thread.mc-seen { border-left-color: rgba(255,255,255,.55); }
.mc-thread.mc-seen .mc-thread-name, .mc-thread.mc-seen .mc-thread-last { color: #b6c2d2; }
.mc-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-thread-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mc-thread-title { font-weight: 700; font-size: 15px; }
.mc-unread .mc-thread-title { color: var(--mc-accent, #22d3ee); }
.mc-thread-name { font-weight: 600; font-size: 13px; color: #cbd5e1; }
.mc-thread-count { color: var(--mc-muted); font-weight: 500; }
.mc-thread-role { color: var(--mc-muted); font-size: 12px; font-weight: 500; }
.mc-thread-when { color: var(--mc-muted); font-size: 11.5px; white-space: nowrap; }
.mc-thread-last { color: #e2e8f0; font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-thread-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.mc-thread-foot .mc-thread-open { margin-left: auto; }
.mc-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 11px/16px system-ui; letter-spacing: .02em; }
.mc-pill-new { color: #0b1220; }
.mc-pill-seen { color: var(--mc-muted); background: rgba(255,255,255,.07); font-weight: 600; }
.mc-thread-open { color: var(--mc-muted); font-size: 12px; }
.mc-unread .mc-thread-open { color: var(--mc-accent, #22d3ee); font-weight: 600; }
.mc-avatar { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid; font-weight: 700; letter-spacing: .02em; overflow: hidden; }
.mc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 1; }
.mc-avatar-txt { position: relative; }
.mc-avatar-group .mc-avatar-txt { display: none; }
.mc-bubble-row { display: flex; align-items: flex-end; gap: 8px; }
/* owner's group view: inline reply + details under a recipient's bubble */
.mc-bubble-block { display: flex; flex-direction: column; gap: 6px; }
.mc-bubble-actions { display: flex; gap: 6px; margin-top: 6px; }
.mc-mini { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.04); color: var(--mc-muted); font: 600 11.5px system-ui; cursor: pointer; }
.mc-mini:hover { background: rgba(255,255,255,.09); color: var(--mc-text); }
.mc-mini-solid { font-weight: 700; }
.mc-mini-solid:hover { filter: brightness(1.1); color: #0b1220; }
.mc-inline { margin: 0 0 4px 34px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.03); max-width: min(78%, 560px); }
.mc-inline-hint { color: var(--mc-muted); font-size: 12px; margin-bottom: 6px; }
.mc-inline-hint b { color: var(--mc-text); }
.mc-inline-row { display: flex; gap: 8px; align-items: flex-end; }
.mc-inline-row textarea { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.04); color: var(--mc-text); font: 14px system-ui; resize: none; outline: none; }
.mc-inline-row textarea:focus { border-color: var(--mc-accent, #22d3ee); }
.mc-info-card { margin: 0 0 4px 34px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mc-border); background: var(--mc-panel-2); display: flex; align-items: center; gap: 12px; max-width: min(78%, 560px); }
.mc-info-main { flex: 1; min-width: 0; }
.mc-info-name { font-weight: 700; }
.mc-info-line { color: var(--mc-muted); font-size: 12.5px; }

/* ── thread ────────────────────────────────────────────────── */
.mc-threadview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mc-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--mc-border); }
.mc-thread-who { min-width: 0; }
.mc-thread-who .mc-thread-title { font-size: 15px; }
.mc-thread-who b { color: var(--mc-text); font-weight: 600; }
.mc-bubbles { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mc-bubble-row.mine { justify-content: flex-end; }
.mc-bubble { max-width: min(78%, 560px); padding: 9px 12px; border-radius: 14px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.05); }
.mine .mc-bubble { border-bottom-right-radius: 4px; }
.mc-bubble-row:not(.mine) .mc-bubble { border-bottom-left-radius: 4px; }
.mc-bubble-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; }
.mc-bubble-meta { margin-top: 4px; color: var(--mc-muted); font-size: 11px; text-align: right; }
.mc-audience { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--mc-muted); font-size: 11px; }
.mc-reply-hint { padding: 10px 24px 0; border-top: 1px solid var(--mc-border); color: var(--mc-muted); font-size: 12.5px; }
.mc-reply-hint b { color: var(--mc-text); }
.mc-reply { display: flex; gap: 10px; align-items: flex-end; padding: 8px 14px 10px; }

/* ── compose ───────────────────────────────────────────────── */
.mc-compose { display: flex; min-height: 0; flex: 1; }
.mc-rail { width: 132px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-right: 1px solid var(--mc-border); }
.mc-rail-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--mc-muted); font: 700 13px system-ui; cursor: pointer; text-align: left; }
.mc-rail-btn:hover { background: rgba(255,255,255,.04); color: var(--mc-text); }
.mc-rail-count { font: 600 11px system-ui; color: var(--mc-muted); background: rgba(255,255,255,.07); padding: 1px 7px; border-radius: 999px; }
.mc-compose-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 8px; }
.mc-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.03); color: var(--mc-muted); font: 600 12.5px system-ui; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mc-chip.on { background: rgba(255,255,255,.06); }
.mc-chip-n { font-size: 11px; opacity: .75; }
.mc-pickbar { display: flex; gap: 8px; padding: 0 14px 8px; }
.mc-selectall { flex-shrink: 0; }
.mc-tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 14px 8px; }
.mc-token { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.06); font: 500 12.5px system-ui; }
.mc-token button { border: 0; background: transparent; color: var(--mc-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px; }
.mc-token-more { color: var(--mc-muted); }
.mc-people { flex: 1; min-height: 120px; overflow-y: auto; padding: 0 8px; }
.mc-person { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 8px; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.mc-person:hover { background: rgba(255,255,255,.04); }
.mc-person.on { background: rgba(255,255,255,.05); }
.mc-person:disabled { cursor: default; }
.mc-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--mc-muted); display: inline-flex; align-items: center; justify-content: center; }
.mc-person-main { min-width: 0; display: flex; flex-direction: column; }
.mc-person-name { font-weight: 600; font-size: 13.5px; }
.mc-person-role { color: var(--mc-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-composer { border-top: 1px solid var(--mc-border); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.mc-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-composer-btns { display: flex; gap: 8px; }

/* ── dock pill (minimised) ─────────────────────────────────── */
.mc-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 10055;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid; background: var(--mc-panel-2); color: var(--mc-text);
  font: 600 13px system-ui; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.mc-dock-up { color: var(--mc-muted); }
.mc-dock-bump { animation: mc-bump 0.5s ease-out 2; }
.mc-dock-bump .mc-badge { animation: mc-badge-pop 0.5s ease-out 2; }
@keyframes mc-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes mc-badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 1024px) { .mc-dock { bottom: calc(76px + env(safe-area-inset-bottom)); } }   /* clear FooterNav */

/* ── phones / iPads ────────────────────────────────────────── */
@media (max-width: 720px) {
  .mc-overlay { padding: 0; align-items: stretch; }
  .mc-modal { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .mc-head { grid-template-columns: auto 1fr auto; }
  .mc-head-tabs { justify-self: start; }
  .mc-title-text { display: none; }
  .mc-compose { flex-direction: column; }
  .mc-rail { width: auto; flex-direction: row; padding: 10px 12px 0; border-right: 0; }
  .mc-rail-btn { flex: 1; justify-content: center; padding: 8px 6px; }
  .mc-bubble { max-width: 88%; }
}

/* ── arrival toast: drops from the top centre, holds ~5 s, fades ── */
.mc-arrive {
  position: fixed; top: 14px; left: 50%; z-index: 10070;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px);
  padding: 10px 16px 10px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
  background: #16a34a; color: #f0fdf4; text-align: left; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  animation: mc-arrive 5.6s cubic-bezier(.2,.8,.2,1) forwards;
}
.mc-arrive-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #bbf7d0; box-shadow: 0 0 0 4px rgba(187,247,208,0.25); }
.mc-arrive-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 500 13px/1.3 system-ui; }
.mc-arrive-text strong { font-weight: 700; }
.mc-arrive-sub { color: #dcfce7; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mc-arrive {
  0%   { transform: translate(-50%, -140%); opacity: 0; }
  7%   { transform: translate(-50%, 0);     opacity: 1; }
  88%  { transform: translate(-50%, 0);     opacity: 1; }
  100% { transform: translate(-50%, -20%);  opacity: 0; }
}
/* Reduce Motion: no drop/fade, but the toast must still be visible for its 5 s —
   `animation-duration: 0.01s` with `forwards` would leave it parked on the 100%
   frame (opacity 0), i.e. invisible for the whole time it is mounted. */
@media (prefers-reduced-motion: reduce) {
  .mc-arrive { animation: none; transform: translate(-50%, 0); opacity: 1; }
}

/* bell beside the ProfileHome avatar: same ring look, centred on the 64px avatar line */
.mc-bell-home { margin-left: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); display: grid; place-items: center; }
/* the profile header uses the labelled pill, so restore the pill's geometry
   over mc-bell-home's circle while keeping its margin-left: 0 */
.mc-bell-pill.mc-bell-home {
  width: auto;
  height: 36px;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 3px 4px 3px 14px;
  display: inline-flex;
  /* NB: declared AFTER display, and no `place-items: initial` — that reset
     align-items back to normal and left the label and glyph off-centre. */
  align-items: center;
  border-color: var(--mc-accent);
  background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
}
.mc-bell-pill.mc-bell-home:hover { background: color-mix(in srgb, var(--mc-accent) 16%, transparent); }
/* phone: the glyph-only treatment from the 720px block above never won here — both selectors are
   0,2,0 and this rule comes later — so the home pill kept its 14px label padding and the bell sat
   off-centre. Declared after the rule it has to beat. */
@media (max-width: 720px) { .mc-bell-pill.mc-bell-home { padding: 0 3px; gap: 0; } }

/* a little air above the pill, and off the right edge of the tab row */
.mc-bell-tab { margin-top: 6px; margin-right: 10px; }
.mc-bell-home:hover { background: rgba(255,255,255,0.09); }