/* My Maestro chat surface (items #3355, #3433). Loaded ONLY by this entry,
   after the workspaces stylesheet — which is why the token blocks below work:
   they re-value the portal's custom properties page-scoped, mapping the
   approved Chat artboard's mission-control palette onto the token names every
   rule here and every shared component (popovers, modals, toasts, avatars)
   already reads. Dark is the artboard and the default; light is a faithful
   translation. The light block MUST enumerate every token the dark block
   sets — a token defined only on bare :root bleeds into light, because the
   portal's light block cannot override a token it does not define. */

@import url("./people.css");

/* Account-scoped reading spacing; native type and natural tracking in both modes. */
:root {
  --mm-chat-leading: 1.45;
  --mm-chat-group-gap: 16px;
  --mm-chat-message-gap: 6px;
  --mm-chat-paragraph-gap: 8px;
}
:root[data-mm-chat-spacing="comfortable"] {
  --mm-chat-leading: 1.625;
  --mm-chat-group-gap: 28px;
  --mm-chat-message-gap: 10px;
  --mm-chat-paragraph-gap: 16px;
}
.mm-msgs, .mm-composer { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

:root, :root[data-theme="dark"] {
  --bg: #0a0d11;
  --panel: #0d1117;
  --panel-2: #161b22;
  --border: #1f2630;
  --border-soft: #1a212b;
  --text: #e6ecf3;
  --muted: #c3ccd7;
  --text-dim: #8a96a6;
  --accent: #6b9aff;
  --accent-ink: #8fb2ff;
  /* Artboard fill: #6b9aff carries near-black ink (contrast ~7:1). The
     light block flips to the portal's dark fill — see app.css:74-79. */
  --accent-fill: #6b9aff;
  --on-accent: #0a0d11;
  --accent-soft: rgba(107, 154, 255, .13);
  --focus: rgba(107, 154, 255, .5);
  --ok: #4cc98a;
  --warn: #e5b84f;
  --danger: #ff7285;
  --mm-card: #11161d;
  /* The band (Ian, 2026-09-12): the title bar is ONE dark surface across
     the whole window in both themes — the strip and the rail's corner
     under the traffic lights — so its children read the band inks below,
     never the page's. Dark: a step lighter than --panel with a visible
     edge, or the band vanishes into the panels. */
  --mm-brand-strip: #141c2b;
  --mm-brand-edge: #26304a;
  --mm-band-ink: #ffffff;
  --mm-band-muted: rgba(255, 255, 255, .72);
  --mm-band-field: rgba(255, 255, 255, .08);
  --mm-band-field-edge: rgba(255, 255, 255, .18);
  --mm-band-hover: rgba(255, 255, 255, .12);
  /* The band's amber (approval requests, N1): the band is dark in BOTH
     themes, so its caution ink is the dark theme's --warn in both. */
  --mm-band-warn: #e5b84f;
  --mm-band-warn-soft: rgba(229, 184, 79, .16);
  /* The tile's saturation and lightness (#3737, floor #3846): white bold
     initials clear 3:1 on every hue of the wheel in this theme — 62 computes
     it from these numbers; twinned with app.css's --ws-tile-s/l. The hue is
     the workspace's own, set inline. */
  --mm-tile-s: 45%;
  --mm-tile-l: 41%;
}
:root[data-theme="light"] {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --border: #d9dee6;
  --border-soft: #e4e8ee;
  --text: #141a22;
  --muted: #4c5665;
  --text-dim: #8a93a3;
  --accent: #2e63e7;
  --accent-ink: #2451c7;
  --accent-fill: #2e63e7;
  --on-accent: #ffffff;
  --accent-soft: rgba(46, 99, 231, .12);
  --focus: rgba(46, 99, 231, .45);
  --ok: #1f9d63;
  --warn: #9a6a03;
  --danger: #c22f45;
  --mm-card: #ffffff;
  /* Light: the band stays dark (the old dark strip's navy) with no edge —
     against white panels it needs none. Same inks. */
  --mm-brand-strip: #101a2a;
  --mm-brand-edge: #101a2a;
  --mm-band-ink: #ffffff;
  --mm-band-muted: rgba(255, 255, 255, .72);
  --mm-band-field: rgba(255, 255, 255, .08);
  --mm-band-field-edge: rgba(255, 255, 255, .18);
  --mm-band-hover: rgba(255, 255, 255, .12);
  --mm-band-warn: #e5b84f;
  --mm-band-warn-soft: rgba(229, 184, 79, .16);
  /* Light theme: the same 3:1 floor over white initials (#3846), twinned
     with app.css's light block. */
  --mm-tile-s: 55%;
  --mm-tile-l: 38%;
}

/* Hidden bodies are never mounted: the blur decorates neutral placeholder text. */
.mm-moderated {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); max-width: 100%; min-width: 0;
}
.mm-moderated-placeholder {
  filter: blur(5px); user-select: none; pointer-events: none;
  color: var(--text-dim); margin-bottom: 10px;
}
.mm-moderated-warning { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--warn); }
.mm-moderated-warning > span { flex: 1 1 180px; overflow-wrap: anywhere; }
.mm-moderated-show {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer;
}
.mm-moderated-show:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mm-send-failure { display: block; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }

/* -- layout (#3801) --------------------------------------------------------- */
/* ONE grid: the rail is column 1 for the WHOLE height (the artboard's
   full-height rail), the titlebar strip is row 1 across the list pane and
   the conversation, the pane column 2 and the conversation column 3 in
   row 2. #mm-body is display: contents so its children are this grid's
   items while the markup order stays #mm-top → #mm-body → rail · pane ·
   chat: the strip is the FIRST [data-shell-drag] in document order, which
   is all a shell older than #3801 marks, so it keeps dragging by the strip.
   A hidden #mm-top (pre-auth) collapses row 1; a hidden #mm-pane collapses
   column 2 (the strip spans it, and a span across the 1fr column does not
   size the auto one).
   #4998 adds a FOURTH auto column for the Team focus panel, sized by the
   panel's own width (264px open, 48px folded) and collapsed to nothing
   whenever #mm-focus is hidden — which is every route but a conversation,
   every workspace without a Team, and every person who turned it off. */
#mm-shell {
  display: grid;
  grid-template-columns: 56px auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}
#mm-focus { grid-column: 4; grid-row: 2; }
#mm-focus[hidden] { display: none; }

/* -- titlebar (#3433, artboard) --------------------------------------------- */
/* 38px chrome row: [traffic-light pad] [space] [search] [space] [app name],
   row 1 of the grid beside the rail (#3801).
   The shell marks it draggable (data-shell-drag / the #mm-top id for old
   builds); interactive children still click — drag regions are
   target-checked, so the flanking .mm-tb-space runs are the drag surface. */
#mm-top {
  grid-column: 2 / -1; grid-row: 1;
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; flex: none;
  background: var(--mm-brand-strip); border-bottom: 1px solid var(--mm-brand-edge);
  user-select: none; -webkit-user-select: none;
}
.mm-tb-pad { width: 0; flex: none; }
/* Desktop shell (#3339): data-shell on <html> → make room for the macOS
   traffic lights (the window chrome draws them over this row) — in the
   pop-outs, whose #mm-top has no rail beside it. In index.html the rail's
   reserved top holds the lights (#3801, .mm-rail-top below), so the strip's
   pad goes to 0 — keyed on the #mm-body sibling, which item.html and
   session.html lack, so they keep 68px; where :has() is unsupported the
   pad stays 68 (a right-shifted search, never an overlap). */
:root[data-shell="my-maestro"] .mm-tb-pad { width: 68px; }
:root[data-shell="my-maestro"] #mm-top:has(+ #mm-body) .mm-tb-pad { width: 0; }
/* Native full screen (#3850): the lights hide, so the pop-outs' pad goes
   to 0 too — width, not display, so the strip keeps the web build's flex
   layout. The shell stamps data-shell-fullscreen on <html> while the
   window is full screen and removes it on exit; an old shell never stamps
   it, so the pad stays. */
:root[data-shell="my-maestro"][data-shell-fullscreen] .mm-tb-pad { width: 0; }
/* Windows (#5974) draws no traffic lights: its caption buttons sit in the
   native title bar above the page, so the pop-outs' pad goes to 0. macOS
   keeps it for the lights and Linux for window_frame.js's buttons; a shell
   that states no platform keeps it too. */
:root[data-shell="my-maestro"][data-shell-platform="windows"] .mm-tb-pad { width: 0; }
/* The pop-outs (#5974): item.html and session.html have only #mm-top and
   <main>, and the main window's 4-column grid above dropped <main> into
   the 56px rail column, leaving row 2 black. One column for them. After
   the base #mm-top rule on purpose (58_test_mymaestro_rail reads the first
   one). */
#mm-shell.mm-popout { grid-template-columns: minmax(0, 1fr); }
.mm-popout > #mm-top { grid-column: 1; }
.mm-popout > main { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; }
.mm-tb-space { flex: 1; min-width: 16px; }
/* Every strip is the band (2026-09-12) — index.html's, with the place
   label at its left (#mm-location, #8296: "Maestro / Chats / # general";
   the workspace switcher's slot until then — "My Maestro" is the window
   title's, the menu bar's and the Dock's), and the pop-outs', with their
   title and the app name — so its children take the band inks, never the
   page's: the place white with its trail muted, the app name and the bell
   and session hub muted white (translucent hover), the search a
   translucent field. The switcher opens from the rail's tile (#3737). */
.mm-tb-app { flex: none; font-size: 12px; color: var(--mm-band-muted); }
/* The place label (#8296): a plain span, never a drag surface — the
   flanking .mm-tb-space runs stay the drag. It shrinks before the search,
   ellipsing its last segment; the segments are joined by a muted " / ". */
#mm-top .mm-location {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline;
  overflow: hidden; white-space: nowrap;
  color: var(--mm-band-ink); font-size: 13px; font-weight: 600;
}
.mm-location > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: none; }
.mm-location > span:last-child { flex: 0 1 auto; }
.mm-location > span + span { color: var(--mm-band-muted); font-weight: 500; }
.mm-location > span + span::before { content: " / "; white-space: pre; }
#mm-top #mm-search { background: var(--mm-band-field); border-color: var(--mm-band-field-edge); color: var(--mm-band-muted); }
#mm-top #mm-search:hover { background: var(--mm-band-hover); border-color: var(--mm-band-field-edge); }
#mm-top .mm-bell-btn, #mm-top .mm-session-hub-btn { color: var(--mm-band-muted); }
#mm-top .mm-bell-btn:hover, #mm-top .mm-bell-btn[aria-expanded="true"],
#mm-top .mm-session-hub-btn:hover, #mm-top .mm-session-hub-btn[aria-expanded="true"] { background: var(--mm-band-hover); color: var(--mm-band-ink); }
/* The Team focus panel's toggle (#4998), the band's last control — its own
   rule rather than a third selector on the one above, which 58's ink pin
   reads byte for byte. `hidden` needs saying: inline-flex outranks the user
   agent's [hidden] display:none. */
#mm-focus-toggle {
  flex: none; width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--mm-band-muted);
  font: inherit; cursor: pointer;
}
#mm-focus-toggle[hidden] { display: none; }
#mm-focus-toggle:hover, #mm-focus-toggle[aria-pressed="true"] { background: var(--mm-band-hover); color: var(--mm-band-ink); }
#mm-session-hub { flex: none; }
.mm-session-hub-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 5px; padding: 5px 7px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mm-session-hub-btn:hover, .mm-session-hub-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--text); }
.mm-session-hub-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.mm-session-hub-pop { width: min(430px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 0; }
.mm-session-hub-head { padding: 13px 14px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
.mm-session-hub-list { max-height: min(440px, 65vh); overflow-y: auto; }
.mm-session-hub-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.mm-session-hub-row[href]:hover { background: var(--panel-2); }
.mm-session-hub-row[aria-disabled="true"] { cursor: default; }
.mm-session-hub-copy { min-width: 0; }
.mm-session-hub-name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-session-hub-meta, .mm-session-hub-age { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.mm-session-hub-meta { overflow-wrap: anywhere; }
.mm-session-hub-facts { flex: none; text-align: right; }
.mm-session-hub-state { font-size: 11px; color: var(--muted); }
.mm-session-hub-state.waiting { color: var(--warn); }
.mm-session-hub-state.working { color: var(--accent-ink); }
.mm-session-hub-empty { padding: 20px 14px; color: var(--muted); font-size: 12px; }
.mm-jump-workspace-scope { color: var(--muted); font-size: 11px; padding: 6px 2px; }
/* Messages (Pins until #8296): one workspace label above compact rows. Its
   quiet filter is local to this pane. */
.mm-pins-pane > .mm-roster-head.mm-pins-head {
  display: flex; align-items: center; gap: 7px; padding: 10px 8px 16px;
  font-size: 14px;
}
.mm-pins-pane > .mm-roster-head.mm-pins-head > .mm-roster-head-label { margin: 0; }
.mm-pins-scope {
  min-width: 0; max-width: 64%; margin-left: auto; padding: 5px 2px;
  border: 0; border-radius: 4px; background: var(--panel); color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 400; cursor: pointer;
  text-overflow: ellipsis;
}
.mm-pins-scope:hover { background: var(--panel-2); color: var(--text); }
/* Messages' one "Pinned" group (#8296), above the per-workspace groups. */
.mm-pins-group-head {
  margin: 0 10px 8px; color: var(--text-dim); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.mm-pins-group-head[hidden] { display: none; }
.mm-pins-group + .mm-pins-group { margin-top: 14px; }
.mm-pins-workspace {
  margin: 0 10px 5px; color: var(--muted); font-size: 11.5px; font-weight: 500;
  line-height: 1.5; overflow-wrap: anywhere;
}
.mm-global-pin { display: flex; align-items: center; gap: 2px; }
.mm-global-pin .mm-pin-content { flex: 1; min-width: 0; }
/* The Pins pane's own row (#3802): a tighter row in a wrapper that takes the
   hover and the selection. Messages' flat list (.mm-pins-flat) keeps the
   Chats row — its size, its own hover and its inset selection (one chat
   style). :where() keeps these at the specificity they always had. */
:where(.mm-pins-pane) .mm-global-pin { margin: 2px 0; border-radius: 6px; }
:where(.mm-pins-pane) .mm-global-pin:hover { background: var(--panel-2); }
:where(.mm-pins-pane) .mm-global-pin:has(.mm-row.active) { background: var(--accent-soft); }
:where(.mm-pins-pane) .mm-global-pin .mm-row { min-height: 36px; padding: 6px 4px 6px 10px; border-radius: 6px; gap: 8px; font-size: 13px; }
:where(.mm-pins-pane) .mm-global-pin .mm-row.active, :where(.mm-pins-pane) .mm-global-pin .mm-row:hover { background: transparent; }
:where(.mm-pins-pane) .mm-global-pin .mm-row.active .mm-row-glyph { color: var(--accent-ink); }
.mm-pin-unpin {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 30px; margin-right: 3px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.mm-pin-unpin svg { opacity: .65; }
.mm-pin-unpin:hover, .mm-pin-unpin:focus-visible { color: var(--text); background: var(--panel-2); }
.mm-global-pin:hover .mm-pin-unpin svg, .mm-pin-unpin:focus-visible svg { opacity: 1; }
.mm-pin-unpin:disabled { cursor: wait; opacity: .45; }
.mm-global-pin .mm-roster-sec, .mm-global-pin .mm-sessions-list { margin: 0; padding: 0; border: 0; }
.mm-global-pin-unavailable { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 12px; font-size: 12px; color: var(--muted); }
.mm-global-pin-unavailable > span { flex-basis: 100%; }
.mm-pin-action { border: 0; border-radius: 4px; background: var(--panel-2); color: var(--muted); padding: 3px 6px; font: inherit; font-size: 11px; cursor: pointer; }
.mm-pin-action:hover { color: var(--text); }
.mm-pins-pane > .mm-pins-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 8px 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.mm-pins-pane > .mm-pins-undo[hidden] { display: none; }
.mm-pins-undo > span { min-width: 0; overflow-wrap: anywhere; }
.mm-pins-undo .mm-pin-action { flex: none; background: transparent; color: var(--accent-ink); }
@media (pointer: coarse) {
  :where(.mm-pins-pane) .mm-global-pin .mm-row, .mm-pins-scope { min-height: 44px; }
  .mm-pin-unpin { width: 44px; height: 44px; }
  .mm-pins-undo .mm-pin-action { min-height: 44px; }
}
#mm-rail-global { display: flex; flex-direction: column; align-items: center; flex: none; }
/* The open workspace's tile (#8296, C1): beside Messages, above the
   destinations — fixed, never inside the rail's one scroller. */
#mm-rail-ws { display: flex; flex-direction: column; align-items: center; flex: none; }
@media (max-width: 650px) {
  #mm-top { padding: 0 6px; gap: 4px; }
  #mm-top .mm-tb-space { min-width: 0; }
  #mm-top #mm-search { min-width: 28px; padding: 4px 6px; }
  /* Narrow: the destination drops out of the place; the workspace and the
     conversation stay, the last one ellipsed. */
  .mm-location > .mm-location-mid { display: none; }
  .mm-session-hub-btn { padding: 5px 3px; font-size: 11px; }
}
#mm-search {
  display: inline-flex; align-items: center; gap: 8px;
  width: min(300px, 40vw);
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text-dim);
  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
}
#mm-search:hover { border-color: var(--accent); }
#mm-search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- the bell (#3732; moved to the title bar 2026-09-11 — Ian: the rows it
      lists are cross-workspace by construction (js/activity.js), unlike
      every rail destination, which is this one workspace's) ---------------- */
#mm-bell { flex: none; }
.mm-bell-btn {
  position: relative; width: 30px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; cursor: pointer;
}
.mm-bell-btn:hover, .mm-bell-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--text); }
/* A real count (needsTotal) — not the rail's old dot — since the bell no
   longer sits beside icons that already count these same rows. */
.mm-bell-badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  box-sizing: border-box; box-shadow: 0 0 0 2px var(--panel);
}
.mm-bell-badge[hidden] { display: none; }
.mm-bell-pop {
  width: min(430px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 0;
  max-height: min(80vh, 680px); display: flex; flex-direction: column;
  background: var(--mm-card); border-radius: 12px; overflow: hidden;
}
.mm-bell-content { display: flex; flex-direction: column; min-height: 0; }
.mm-bell-count { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.mm-bell-markall { margin-left: auto; }
.mm-bell-pop [hidden] { display: none !important; }
.mm-bell-pop .mm-act-list { gap: 0; }
.mm-bell-pop .mm-act-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 42px 16px; text-align: center;
}
.mm-bell-pop .mm-act-empty > svg { color: var(--accent-ink); }
.mm-bell-pop .mm-act-empty > strong { font-size: 14px; font-weight: 500; color: var(--text); }
.mm-bell-pop-head {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 20px;
  font-size: 15px; font-weight: 500;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.mm-bell-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 5px; display: flex; flex-direction: column; gap: 6px; }
.mm-bell-status { flex: none; min-height: 20px; padding: 2px 20px 0; box-sizing: border-box; font-size: 11px; line-height: 18px; color: var(--text-dim); }
.mm-bell-seeall {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 9px 14px; box-sizing: border-box;
  font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none;
  border-top: 1px solid var(--border);
}
.mm-bell-seeall:hover { background: var(--panel-2); color: var(--accent-ink); }
.mm-notify-row { position: relative; display: flex; align-items: center; border-radius: 7px; padding-right: 7px; min-width: 0; }
.mm-notify-row + .mm-notify-row::before { content: ""; position: absolute; left: 51px; right: 10px; top: 0; border-top: 1px solid var(--border-soft); }
.mm-notify-row:hover, .mm-notify-row:focus-within { background: var(--panel-2); }
.mm-notify-open {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  padding: 13px 8px 13px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none;
}
button.mm-notify-open, a.mm-notify-open { cursor: pointer; }
.mm-notify-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; background: var(--panel-2); color: var(--muted);
}
.mm-notify-icon.accent { background: var(--accent-soft); color: var(--accent-ink); }
.mm-notify-unread { position: absolute; left: -4px; top: -3px; width: 6px; height: 6px; border: 2px solid var(--mm-card); border-radius: 50%; background: var(--accent-fill); }
.mm-notify-copy { min-width: 0; flex: 1; }
.mm-notify-line { display: flex; align-items: baseline; gap: 9px; }
.mm-notify-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; font-weight: 500; }
.mm-notify-time { flex: none; margin-left: auto; color: var(--text-dim); font-size: 11px; line-height: 16px; white-space: nowrap; }
.mm-notify-sub { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; line-height: 18px; }
.mm-notify-action {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.mm-notify-action:hover { background: var(--accent-soft); color: var(--accent-ink); }
.mm-notify-action:focus-visible, .mm-notify-open:focus-visible, .mm-bell-seeall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
@media (pointer: coarse) {
  .mm-notify-action { width: 44px; height: 44px; }
  .mm-notify-open { min-height: 64px; box-sizing: border-box; }
}
@media (max-width: 370px) {
  .mm-notify-open { gap: 8px; padding-left: 7px; }
  .mm-notify-icon { width: 27px; flex-basis: 27px; }
  .mm-bell-pop-head { padding-left: 17px; }
}

/* -- the workspace switcher (#3737, direction A; #3779 the rail's tile;
   the band's chip 2026-09-12; the rail's tile again since #8296, C1/C3) -- */
/* The button is the rail's workspace tile: a .mm-rail-btn holding the 32px
   tile, with the count of what needs you ELSEWHERE on its corner (the open
   workspace is the bell's business) — the destinations' .cnt corner, ringed
   in the rail's colour. Its name is a .mm-rail-label, shown only where the
   rail shows labels (the expanded classic rail, Focus). */
.mm-ws-tile-btn { color: var(--text); }
.mm-ws-tile-btn:hover { background: var(--panel-2); }
.mm-ws-cnt {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 10.5px; font-weight: 650; line-height: 16px; text-align: center;
  box-sizing: border-box; box-shadow: 0 0 0 2px var(--panel);
}
.mm-ws-cnt[hidden] { display: none; }
/* People chat QA (the canvas's C1): a dot, the count in the tile's name. */
.mm-ws-cnt.dot { top: 1px; right: 1px; min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; }
/* The tile: initials over an id-derived hue; the saturation and lightness
   are the two tokens above, per theme. */
.mm-ws-tile {
  flex: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; letter-spacing: .02em;
  background: hsl(var(--tile-h) var(--mm-tile-s) var(--mm-tile-l));
}
.mm-ws-tile.s20 { width: 20px; height: 20px; font-size: 9.5px; }
.mm-ws-tile.s22 { width: 22px; height: 22px; font-size: 10.5px; }
.mm-ws-tile.s32 { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
/* The rail's tile (#8296) is ringed, like the canvas's C1 tile. */
.mm-ws-tile-btn .mm-ws-tile { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--border); }
.mm-ws-tile-btn[aria-expanded="true"] .mm-ws-tile, .mm-ws-tile-btn:focus-visible .mm-ws-tile { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
/* The fold row (#3779): "All N workspaces" behind a dashed tile. */
.mm-ws-fold { color: var(--text-dim); }
.mm-ws-fold .mm-ws-fold-tile {
  background: none; border: 1px dashed var(--border); color: var(--text-dim);
  box-sizing: border-box; font-weight: 500;
}
/* The menu: its own width and ceiling (the shared .pop caps every other menu
   at 340px, which nine rows plus heads and footer outgrow). */
.pop.mm-ws-pop {
  width: 300px; max-width: min(340px, calc(100vw - 24px));
  max-height: min(72vh, calc(100vh - 16px));
}
/* A row: tile · name · the check (current) or the needs chips. Its own
   class, not .pop-item — the tile replaces the radio ring. In reorder mode
   the row is a div holding the grip button. */
.mm-ws-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 7px 10px 7px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-sizing: border-box;
}
.mm-ws-row:hover, .mm-ws-row:focus-visible { background: var(--panel); }
.mm-ws-row.current { background: var(--panel); }
.mm-ws-row.current .mm-ws-rowname, .mm-ws-row.has-needs .mm-ws-rowname { font-weight: 600; }
div.mm-ws-row { cursor: default; }
.mm-ws-row.dragging {
  background: var(--panel); box-shadow: 0 6px 18px var(--shadow);
  position: relative; z-index: 2;
}
.mm-ws-rowname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name and, under it, the needs in words (#8296, C3). */
.mm-ws-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-ws-rowtext > .mm-ws-rowname { flex: none; }
.mm-ws-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-ws-sub[hidden] { display: none; }
/* ⌘1–⌘9 (#8296): the desktop app's shortcut, beside the chips. */
.mm-ws-key { flex: none; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mm-ws-rowwrap > .mm-ws-row .mm-ws-key { margin-right: 2px; }
/* The filter (#8296), past FOLD_AT workspaces. */
.mm-ws-filterwrap { padding: 4px 4px 6px; }
.mm-ws-filter { width: 100%; box-sizing: border-box; min-height: 32px; font-size: 13px; }
.mm-ws-nomatch { padding: 8px 10px; }
.mm-ws-check { flex: none; color: var(--accent-ink); display: inline-flex; }
.mm-ws-chips { flex: none; display: inline-flex; gap: 4px; }
/* A chip per kind: amber = a session waiting on you, blue = the rest. */
.mm-chip {
  display: inline-flex; align-items: center; gap: 3px; height: 18px;
  padding: 0 6px 0 5px; border-radius: 9px;
  background: var(--accent-fill); color: var(--on-accent);
  font-size: 11px; font-weight: 650; line-height: 18px;
}
.mm-chip.sessions { background: var(--warn); }
.mm-ws-grip {
  flex: none; border: 0; background: none; color: var(--text-dim);
  cursor: grab; display: inline-flex; padding: 2px; border-radius: 4px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.mm-ws-grip:focus-visible { outline: 2px solid var(--accent); }
/* Favorites: the star is the row's SIBLING in a layout-only wrapper (a
   button may not contain interactive content), laid over the row's right
   padding; hidden until the row is hovered or the star focused, and always
   shown — filled — once it is on. The wrapper carries the hover so the
   row's highlight does not blink out as the pointer reaches the star. */
.mm-ws-rowwrap { position: relative; display: flex; }
.mm-ws-rowwrap > .mm-ws-row { padding-right: 34px; }
.mm-ws-rowwrap:hover > .mm-ws-row { background: var(--panel); }
.mm-ws-fav {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; padding: 3px; border: 0; border-radius: 6px;
  background: none; color: var(--text-dim); cursor: pointer; opacity: 0;
}
.mm-ws-rowwrap:hover .mm-ws-fav, .mm-ws-fav:focus-visible, .mm-ws-fav.on { opacity: 1; }
.mm-ws-fav:hover { color: var(--text); background: var(--panel-2); }
.mm-ws-fav:focus-visible { outline: 2px solid var(--accent); }
.mm-ws-fav.on { color: var(--accent-ink); }
.mm-ws-fav.on .mm-glyph-star { fill: currentColor; }
.mm-ws-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; }
.mm-ws-foot { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 10px; }
.mm-ws-footctl { display: inline-flex; gap: 2px; }
.mm-ws-sortlabel { font-size: 11.5px; color: var(--text-dim); }
.mm-ws-sortbtn, .mm-ws-done {
  border: 0; background: none; border-radius: 6px; padding: 4px 6px;
  color: var(--accent-ink); font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; gap: 5px; align-items: center;
}
.mm-ws-sortbtn:hover, .mm-ws-done:hover { background: var(--panel); }
.mm-ws-sortpanel { padding: 2px 0; }
/* The sort options keep .pop-item's box and the radio ring (app.css). */
.mm-ws-sortopt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 8px; padding: 9px 12px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.mm-ws-sortopt:hover, .mm-ws-sortopt:focus-visible { background: var(--panel); }
.mm-ws-sortopt::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 1px solid var(--border); border-radius: 50%; box-sizing: border-box;
}
.mm-ws-sortopt[aria-checked="true"]::before { border: 4px solid var(--accent); }
.mm-ws-sortopt[aria-checked="true"] { color: var(--accent-ink); }

/* -- the invite form (#3359; opened from the Members page since #3781) ------ */
/* The workspace cog's own rules left with #3783: the cog is a static
   .mm-rail-btn destination in #mm-rail-dest (the Workspace settings page),
   and the #3651 menu behind it is gone. */
.mm-invite-form { display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 20px; }
.mm-invite-intro, .mm-invite-hint { margin: 0; color: var(--text-dim); line-height: 1.5; }
.mm-invite-intro { font-size: 13px; }
.mm-invite-hint { font-size: 12px; }
.mm-invite-field, .mm-invite-label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-invite-label { font-size: 13px; font-weight: 600; color: var(--text); }
.mm-invite-form .text { width: 100%; min-height: 42px; font-size: 14px; font-weight: 400; }
.mm-invite-role { padding: 9px 12px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.mm-invite-role:focus { border-color: var(--accent); }
.mm-invite-form .psg { min-width: 0; }
/* In-flow results cannot be clipped by the modal's scroll boundary or cover
   the role/actions. The whole form remains usable in short mobile windows. */
.mm-invite-form .psg-list { position: static; margin-top: 6px; max-height: 220px; }
.mm-invite-form .psg-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 9px; font-weight: 400; }
.mm-invite-form .psg-opt > :first-child { grid-row: span 2; }
.mm-invite-form .psg-name { overflow: hidden; text-overflow: ellipsis; }
.mm-invite-form .psg-email { grid-column: 2; }
.mm-invite-error { font-size: 13px; color: var(--danger); line-height: 1.45; }
.mm-invite-form .modal-actions { margin-top: 0; }
.mm-invite-form .btn { min-height: 40px; min-width: 80px; }

/* -- body: rail + list pane + conversation ---------------------------------- */
/* display: contents (#3801): the wrapper stays in the markup — document
   order is the old-shell contract above — while its children are
   #mm-shell's grid items. Nothing in js reads #mm-body. */
#mm-body { display: contents; }

/* -- the rail (#3779, RailConcept.dc.html; full height since #3801) -------- */
/* 56px, the window's full height as the artboard draws it: [the band's
   corner, .mm-rail-top — under the traffic lights on the desktop] · Pins
   · rule · destinations · rule · the admin group (the cog its last button,
   #3783) · space · the person — the workspace tile moved up into the band
   2026-09-12. The right rule is a ::after from --mm-rail-top-h
   down (0 on the web): at AppKit's fixed 20pt pitch the zoom light leans
   ≈4px past a 56px rail, and the strip's own same-colour 16px padding takes
   the lean, so the border is notched out of the band rather than the rail
   widened (Ian's call, 2026-09-07). Tokens only; the pop-outs have no
   #mm-rail, so none of this matches their DOM. */
#mm-rail {
  grid-column: 1; grid-row: 1 / -1; position: relative;
  width: 56px; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 10px 0 8px; box-sizing: border-box; min-height: 0;
  background: var(--panel);
  --mm-rail-top-h: 38px;
}
#mm-rail::after {
  content: ""; position: absolute; top: var(--mm-rail-top-h, 0px); right: 0; bottom: 0;
  width: 1px; background: var(--border); pointer-events: none;
}
/* The band's corner (#3801 reserved it; Ian, 2026-09-12, painted it): an
   EMPTY element — the only thing the shell can mark as a drag surface
   (never a button) — that paints the band's fill and edge, 38px like the
   strip, on EVERY build: under the shell the traffic lights sit on it, on
   the web and in native full screen (#3850 — the shell stamps
   data-shell-fullscreen while the lights are hidden, and the page no
   longer collapses anything under it) it is simply the band's first
   56px, so no build shows a panel-coloured notch beside a dark strip.
   -10px eats the rail's own top padding; 38 + the 2px margin + the 8px
   gap puts the first button at 48px from the window's top, and the right
   rule is notched from 38px (#mm-rail above). Pre-boot, while #mm-top is
   hidden and row 1 collapsed, the corner goes transparent — not
   display: none, under the shell it is still the only drag surface — and
   the rule runs from 0. */
.mm-rail-top {
  display: block; flex: none; width: 100%; height: 38px; margin: -10px 0 2px;
  background: var(--mm-brand-strip); border-bottom: 1px solid var(--mm-brand-edge);
  user-select: none; -webkit-user-select: none;
}
#mm-top[hidden] + #mm-body .mm-rail-top { background: none; border-color: transparent; }
#mm-top[hidden] + #mm-body #mm-rail { --mm-rail-top-h: 0px; }
.mm-rail-sep { flex: none; width: 28px; height: 1px; background: var(--border); }
.mm-rail-grow { flex: 1; }
#mm-rail-dest { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* A short window (#5494: fifteen destinations need ~790px): the destinations
   scroll inside the rail instead of pushing Capacity, Settings and the person
   off the bottom. Stretched to the rail's width with a little padding so a
   focus ring is never clipped; the scrollbar stays hidden (wheel and
   keyboard focus still scroll it). */
#mm-rail-dest {
  flex-shrink: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  align-self: stretch; padding: 2px 0; scrollbar-width: none;
}
#mm-rail-dest::-webkit-scrollbar { display: none; }
#mm-rail-dest[hidden] { display: none; }
/* The second rule sits INSIDE the destinations (#3781): between the
   workspace destinations and the workspace-admin group (#3782's Local
   Folders, Members, and since #3783 the cog — a static destination like
   the rest), at the rail's 8px rhythm. */
#mm-rail-dest .mm-rail-sep { margin: 4px 0; }
/* No workspace: the destinations (the cog among them) hide, and so do the
   rules around them — the person stays. */
#mm-rail-global[hidden] + .mm-rail-sep, #mm-rail-dest[hidden] ~ .mm-rail-sep { display: none; }
/* On Messages (#8296) the open workspace's destinations dim but stay
   clickable — a click goes to that destination in the open workspace.
   Never aria-disabled (#3642). This computer's own things do not dim. */
#mm-rail[data-away="messages"] #mm-rail-dest .mm-rail-btn:not([data-rail=sessions]):not([data-rail=capacity]):not(:hover):not(:focus-visible),
#mm-rail[data-away="messages"] #mm-rail-dest .mm-classic-tools-trigger:not(:hover):not(:focus-visible) { opacity: .45; }
/* A destination: a 40px square with the 20-grid glyph, dim
   until hovered, accent-soft while its view is mounted (.active,
   aria-current="page"). A plain tab stop: no roving keys. */
.mm-rail-btn {
  position: relative; width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--text-dim);
  font: inherit; cursor: pointer;
}
.mm-rail-btn:hover { background: var(--panel-2); color: var(--text); }
.mm-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-rail-btn.active { background: var(--accent-soft); color: var(--accent-ink); }
.mm-rail-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
/* A destination's count — Chats' unread, Tasks' directed rows (#3985) — on
   the top-right corner, hidden at zero. */
.mm-rail-btn .cnt {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px;
  background: var(--accent-fill); color: var(--on-accent);
  font-size: 10.5px; font-weight: 650; line-height: 16px; text-align: center;
  box-sizing: border-box;
}
.mm-rail-btn .cnt[hidden] { display: none; }
/* The Chats count while the last unread read FAILED (#4022): hollow — a
   ring, dim text — so a number that may be stale never reads as live. */
.mm-rail-btn.stale .cnt { background: none; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border); }
/* Critical at zero (#5094): muted, never removed. A destination that comes
   and goes shifts every icon below it under the pointer, so the button
   holds its place and says "nothing here" by going quiet instead. It
   brightens on hover and focus like any other, so it is never mistaken for
   a disabled control — and `quiet` is dropped the moment the count is
   above zero. */
.mm-rail-btn.quiet { opacity: .45; }
.mm-rail-btn.quiet:hover, .mm-rail-btn.quiet:focus-visible { opacity: 1; }
/* …and the Critical count is the danger colour, not the accent: this badge
   means incident, not unread. */
.mm-rail-btn[data-rail="critical"] .cnt {
  background: var(--danger-fill); color: var(--on-danger);
}

/* The list pane (#3779, #3780 — one pane per rail id): 340px since the
   Signal-sized chat lists (Ian, 2026-10-15; 248px per the artboard before),
   hidden — the width going to #mm-chat — when no pane is registered for the
   active rail id. A narrow window keeps 248px, and below 720px 210px (both
   at the end of this sheet and in the narrow-screens block). */
#mm-pane {
  grid-column: 2; grid-row: 2;
  width: 340px; flex: none; display: flex; flex-direction: column;
  min-height: 0;
  background: var(--panel); border-right: 1px solid var(--border);
}
#mm-pane[hidden] { display: none; }
/* ONE scroller (#3642): the mounted pane's body scrolls as a whole — the
   flat sessions list, the chats list, or the Pins pane's one list (#3802). */
#mm-pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 8px 16px;
}
/* A pane's body (#3780): its containers stack; the pane's FIRST head is the
   artboard's pane title — the list's word, not a section's small caps. */
.mm-pane-body { display: block; }
.mm-pane-body > * { display: block; }
.mm-roster-head.mm-pane-head {
  font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 650;
  color: var(--text); padding: 8px 10px 8px 0;
}
.mm-roster-head.mm-pane-head .mm-roster-chevron { color: var(--text); }
/* A pane head without a chevron (Sessions, D4): the bare label takes the
   chevron's 16px gutter, so it lines up with the rows like every other head. */
.mm-roster-head.mm-pane-head > .mm-roster-head-label { margin-left: 16px; }
.mm-roster-head.mm-pane-head .mm-roster-count { font-size: 11px; font-weight: 500; }
/* -- the person (#3643, #3777, #3779) -------------------------------------- */
/* The rail's bottom avatar: the user menu component's chip, avatar-only
   here — its name and email lines collapse (the button's title says them),
   the caret's glyph goes, and the caret's ONE status dot (amber = update
   pending, red = live updates down) sits on the avatar's corner. No
   always-on presence dot: a dot means something (#3643). */
#user-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mm-foot-btn {
  position: relative; width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--text); font: inherit; cursor: pointer;
}
.mm-foot-btn:hover, .mm-foot-btn:focus-visible { background: var(--panel-2); }
.mm-foot-btn .avatar { border-radius: 50%; }
.mm-foot-lines { display: none; }
.mm-foot-caret { position: absolute; inset: 0; font-size: 0; color: transparent; pointer-events: none; }
.mm-foot-status { position: absolute; top: 4px; right: 4px; display: inline-flex; }
.mm-foot-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--panel); }
.mm-foot-dot.warn { background: var(--warn); }
.mm-foot-dot.danger { background: var(--danger); }

/* The user menu (#3643, #3777 — components/usermenu.js): the person's
   header, the Engines & accounts bridge row, and the rows that used to sit
   in the footer. Scoped under .pop — the menu is a popover, and nothing of
   it lives in the sidebar. */
/* Its own ceiling, like .mm-ws-pop: the shared 340px .pop cap hid Sign
   out (the last row) below a scroll once the legal and account rows grew. */
.pop.mm-user-menu { min-width: 248px; max-width: 300px; max-height: calc(100vh - 16px); }
.pop .mm-menu-who { padding: 6px 10px 8px; }
.pop .mm-menu-who-name { font-weight: 600; }
.pop .mm-menu-who-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .mm-menu-head { padding: 4px 10px 2px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.pop .mm-menu-bridge-slot[hidden], .pop .mm-menu-machine[hidden], .pop .mm-menu-live[hidden], .pop .mm-menu-update[hidden] { display: none; }
/* The bridge row (#3777): one dot per account — ok / warn / dim, the same
   sign-in fact the chip reads — capped at five, then the count. */
.pop .mm-menu-bridge { display: flex; align-items: center; gap: 8px; width: 100%; }
/* "Set yourself as away" (Active / Away): a green dot, hollow amber while away. */
.pop .mm-menu-away { display: flex; align-items: center; gap: 8px; width: 100%; }
.mm-menu-away-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.mm-menu-away-dot.away { background: transparent; border: 1.5px solid var(--warn); }
.mm-menu-away-note { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.pop .mm-menu-bridge .mm-machine-name { flex: 1; }
.pop .mm-menu-dots { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.pop .mm-menu-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--ok); }
.pop .mm-menu-dot.warn { background: var(--warn); }
.pop .mm-menu-dot.dim { background: var(--text-dim); opacity: .5; }
.pop .mm-menu-count { flex: none; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pop .mm-menu-more { flex: none; font-size: 12px; color: var(--text-dim); }
.pop .mm-machine-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-size: 12.5px; color: var(--text);
}
.pop .mm-machine-row .mm-machine-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pop .mm-machine-presence { flex: none; font-size: 11px; font-weight: 650; color: var(--text-dim); }
.pop .mm-machine-presence.on { color: var(--ok); }
.pop .mm-theme-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.pop .mm-theme-row .mm-machine-name { flex: 1; }
/* "Delete account…" (#5106): an ordinary row until you are on it. The
   confirmation dialog carries the weight — a permanently red row next to
   Sign out only teaches people to stop reading this menu. */
.pop .mm-menu-delete { width: 100%; text-align: left; }
.pop .mm-menu-delete:hover, .pop .mm-menu-delete:focus-visible { color: var(--danger); }
.pop .mm-theme-mode { flex: none; font-size: 11.5px; color: var(--text-dim); }
/* In-app update row (item 3341): a stacked block (text, optional detail,
   two buttons) rather than a single line, because it carries actions. It
   sits after the benign rows so focus never lands on it first. */
.pop .mm-update-row {
  display: flex; flex-direction: column; gap: 6px; padding: 6px 10px;
  font-size: 12px; color: var(--text);
}
/* At rest (#3777): one row, "Check for updates…" with the installed
   version dim on the right — the version left the This Mac row. */
.pop .mm-update-check { display: flex; align-items: center; gap: 8px; width: 100%; }
.pop .mm-update-check .mm-machine-name { flex: 1; }
.pop .mm-update-version { flex: none; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pop .mm-update-text { font-weight: 650; }
.pop .mm-update-detail { font-size: 11px; color: var(--text-dim); }
.pop .mm-update-detail.warn { color: var(--muted); }
.pop .mm-update-actions { display: flex; gap: 6px; }
.pop .mm-update-btn {
  flex: none; font: inherit; font-size: 11px; font-weight: 650;
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text);
}
.pop .mm-update-btn:hover { background: var(--panel-2); }
.pop .mm-update-btn.primary {
  border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent);
}
.pop .mm-update-btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.pop .mm-update-btn:disabled { opacity: .55; cursor: default; }

/* -- an account's plan-limit meters (#3643, #3777, components/usage.js) ---- */
/* `limitStack`: one bar row per reported limit — or the one dim line.
   Drawn on the Engines & accounts page's cards (css/accounts.css sizes
   the stack there); the rows' own rules stay here beside the rest of the
   entry's shared pieces. */
.mm-acct-meters { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-acct-row { margin: 0; }
.mm-acct-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.mm-acct-label { flex: 0 0 auto; min-width: 44px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-acct-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.mm-acct-bar-fill { display: block; height: 100%; background: var(--accent-fill); }
.mm-acct-bar.warn .mm-acct-bar-fill { background: var(--warn); }
.mm-acct-bar.danger .mm-acct-bar-fill { background: var(--danger); }
.mm-acct-pct { flex: none; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.mm-acct-reset { margin-top: 1px; font-size: 11px; color: var(--text-dim); }
.mm-acct-row.expired .mm-acct-bar, .mm-acct-row.stale .mm-acct-bar { opacity: .45; }
.mm-acct-row.stale .mm-acct-pct { color: var(--text-dim); }
.mm-acct-empty { font-size: 11px; color: var(--text-dim); }
/* 2026-09-12: a read that FAILED says so in the warning colour — it is
   not "not yet", it is something to re-check. */
.mm-acct-empty.failed { color: var(--warn); }
.mm-roster-sec { margin-top: 14px; }
.mm-roster-sec:first-child { margin-top: 0; }
/* A section head's LABEL sits on the rows' left edge (the scroller's 8px +
   a row's 10px): the chevron hangs in that gutter through a negative margin
   instead of pushing the label 20px further in than the rows it heads. */
.mm-roster-head {
  display: flex; align-items: center;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 4px 10px 6px 0; margin-left: -6px;
}
.mm-roster-add {
  margin-left: auto; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.mm-roster-add:hover { background: var(--panel-2); color: var(--text); }

/* -- section collapse + the Sessions list (#3519) ---------------------------- */
/* The first section in each of a pane's containers keeps the section gap:
   only the very first section of the pane sits flush under the top. The
   Pins pane (#3802) opts out below: its two containers are ONE list. */
.mm-pane-body > :not([hidden]) ~ * .mm-roster-sec:first-child { margin-top: 14px; }
.mm-roster-head-label { flex: none; }
/* The toggle is the chevron plus the section's word — one button, so the
   whole label is the click target; the glyph keeps its 16px gutter box. */
.mm-roster-chevron {
  flex: none; height: 18px; margin-right: 0; padding: 0 4px 0 0;
  display: inline-flex; align-items: center;
  border: 0; border-radius: 4px; background: none; color: var(--text-dim);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  line-height: 1; cursor: pointer;
}
/* The chevron is drawn (two borders, rotated) so it centres on the label's
   x-height; pointing down when open, right when collapsed. */
.mm-roster-chevron-glyph {
  flex: none; width: 16px; height: 16px; position: relative;
}
.mm-roster-chevron-glyph::before {
  content: ""; position: absolute; left: 5px; top: 4px;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.mm-roster-chevron.collapsed .mm-roster-chevron-glyph::before {
  left: 3px; top: 5px; transform: rotate(-45deg);
}
.mm-roster-chevron:hover { background: var(--panel-2); color: var(--text); }
.mm-roster-count {
  flex: none; margin-left: 6px; letter-spacing: 0; color: var(--text-dim);
}
.mm-sessions-waiting {
  flex: none; margin-left: 6px; letter-spacing: 0; text-transform: none;
  color: var(--warn, #b45309); font-size: 11px;
}
/* #3343: requests waiting for this person to accept, on the block head — the
   same rule as "waiting for you": a collapsed block still says so. */
.mm-sessions-requests {
  flex: none; margin-left: 6px; letter-spacing: 0; text-transform: none;
  border: 1px solid var(--accent); border-radius: 999px;
  background: none; color: var(--accent);
  font-size: 11px; padding: 0 7px; cursor: pointer;
}
.mm-sessions-requests:hover { background: var(--accent-fill); color: var(--on-accent); }
.mm-sessions-list { display: flex; flex-direction: column; gap: 1px; }
/* The pane's door to a new session (2026-09-10): a labelled row at the top
   of the list in the accent ink — the plus is drawn (two bars) so it sits on
   the row's icon column, and ⌘N rides the right edge in the mono face. */
.mm-row.mm-new-session { color: var(--accent-ink); font-weight: 600; padding: 7px 10px; margin-bottom: 4px; }
.mm-row.mm-new-session:hover { background: var(--panel-2); }
.mm-new-session-plus { flex: none; width: 18px; height: 18px; position: relative; }
.mm-new-session-plus::before, .mm-new-session-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
}
.mm-new-session-plus::before { width: 12px; height: 1.8px; transform: translate(-50%, -50%); }
.mm-new-session-plus::after { width: 1.8px; height: 12px; transform: translate(-50%, -50%); }
.mm-new-session-kbd {
  flex: none; font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim);
}
/* The two reveals at the foot of the block (#3642): Earlier (terminal rows
   older than a day) and, below it, Archived — what the landing's Recent list
   used to hold. One shape. */
.mm-sessions-earlier,
.mm-sessions-archived-toggle {
  margin: 6px 0 2px; padding: 4px 10px; text-align: left;
  border: 0; background: none; color: var(--text-dim);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.mm-sessions-earlier:hover,
.mm-sessions-archived-toggle:hover { color: var(--text); }
.mm-session-row.archived { opacity: .7; }
/* The quiet row (2026-09-10): ONE line of subject, ONE dim meta line under
   it — state dot and word · verb · #id · age — with colour only where it
   means something: amber when a person is needed, the accent ink on an
   outcome nobody has seen (the subject goes bold too), the danger token on
   a failure. No inset bars, no tinted card: the open session's row is the
   plain --panel-2 the Chats pane uses. What the card used to spell out
   (Unseen, workflow, account, age) the tooltip still says. */
.mm-row.mm-session-row { position: relative; align-items: center; padding: 6px 10px; }
.mm-row.mm-session-row.active { background: var(--panel-2); color: var(--text); }
/* #5593: a Lead's worker row, grouped under the Lead's — one step in. */
.mm-row.mm-session-row.mm-session-worker { padding-left: 22px; }
.mm-session-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-session-row .mm-row-label { font-size: 13px; line-height: 1.35; font-weight: 500; }
.mm-session-row.unseen .mm-row-label { font-weight: 650; }
.mm-session-meta {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11px; line-height: 1.3; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.mm-session-meta.waiting { color: var(--warn, #b45309); }
.mm-session-meta.unseen { color: var(--accent-ink); }
.mm-session-meta.failed { color: var(--danger, #b91c1c); }
.mm-session-meta.waiting .mm-session-state,
.mm-session-meta.unseen .mm-session-state { font-weight: 650; }
/* Middle dots between the meta's words, never after the signal. */
.mm-session-meta > .mm-session-state ~ *::before { content: "·"; margin-right: 6px; color: var(--text-dim); font-weight: 400; }
.mm-session-verb, .mm-session-age { flex: none; }
.mm-session-state { flex: none; }
/* The hover actions sit on the row's right edge over the meta's tail; the
   panel-2 ground masks what they cover, so they never read as overlap. */
.mm-session-row .mm-session-acts {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 1px; border-radius: 6px; background: var(--panel-2);
}
.mm-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.mm-session-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
}
.mm-session-dot.live { background: var(--accent-fill); }
.mm-session-dot.waiting { background: var(--warn, #b45309); }
.mm-session-dot.idle { background: var(--text-dim); }
.mm-session-dot.exited { background: var(--border); }
.mm-session-dot.failed { background: var(--danger, #b91c1c); }
/* The task badge: the item id in mono, in the meta line's own colour until
   the item's stage ROLE is done — then the ok token with a check. A button:
   it opens the drawer. */
.mm-session-task {
  flex: none; font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; line-height: 1.3; letter-spacing: 0;
  color: var(--text-dim); background: none;
  border: 0; border-radius: 4px; padding: 0; cursor: pointer;
}
.mm-session-task:hover { color: var(--text); text-decoration: underline; }
.mm-session-task.done { color: var(--ok); }
/* State is always written in words; the signal is a 7 px dot in the meta's
   colour — filled when a person is needed or an outcome is unseen, hollow
   for an ended session that was seen, dim for idle — and a spinner only
   while the host is working. */
.mm-session-signal { flex: none; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: currentColor; }
.mm-session-signal.working {
  width: 10px; height: 10px; background: none;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor; border-right-color: currentColor;
  animation: mm-session-spin .85s linear infinite;
}
.mm-session-meta.working { color: var(--accent-ink); }
.mm-session-signal.ended { background: none; border: 1.5px solid currentColor; }
.mm-session-signal.ended.unseen { background: currentColor; }
.mm-session-signal.idle, .mm-session-signal.starting, .mm-session-signal.unknown { opacity: .55; }
@keyframes mm-session-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-session-signal.working { animation: none; } }
.mm-session-acts { flex: none; display: flex; gap: 2px; opacity: 0; }
.mm-session-row:hover .mm-session-acts,
.mm-session-row:focus-within .mm-session-acts { opacity: 1; }
.mm-session-archive {
  width: 18px; height: 18px; border: 0; border-radius: 5px;
  background: none; color: var(--text-dim); font: inherit; font-size: 12px;
  line-height: 1; cursor: pointer;
}
.mm-session-archive:hover { background: var(--panel-2); color: var(--text); }
/* A chat row's ⋯ (#3642: Pin / Unpin), revealed on hover like the session
   row's actions — the same ⋯ in the Chats list and the Pins pane (#3802),
   whose head carries no + because a pin is made here. */
.mm-row-more {
  flex: none; width: 18px; height: 18px; border: 0; border-radius: 5px;
  background: none; color: var(--text-dim); font: inherit; font-size: 12px;
  line-height: 1; cursor: pointer; opacity: 0;
}
.mm-row:hover .mm-row-more, .mm-row:focus-within .mm-row-more { opacity: 1; }
.mm-row-more:hover { background: var(--panel-2); color: var(--text); }

/* -- DM member picker (#3359) ------------------------------------------------
   Picker/member badges have room for a word; sidebar DMs mark the avatar. */
.mm-dmp { display: flex; flex-direction: column; gap: 6px; padding: 8px; width: 260px; }
.mm-dmp-filter { width: 100%; }
.mm-dmp-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 280px; overflow-y: auto; min-height: 0;
}
.mm-dmp-row { border-radius: 8px; }
.mm-dmp-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-dmp-pending { display: block; font-size: 10.5px; color: var(--text-dim); }
.mm-dmp-agent {
  flex: none; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); padding: 1px 6px;
}

/* -- room picker (#3851) ------------------------------------------------------
   The DM picker's list classes carry the rows; a row is a <label> around its
   checkbox so the whole line toggles. */
.mm-roompicker .mm-dmp-list { max-height: 240px; }
.mm-roompicker-row { cursor: pointer; }
.mm-roompicker-check { flex: none; margin: 0; }
/* The privacy switch (#4027, create mode): a checkbox row under the name
   and its one-line hint in --text-dim. */
.mm-roompicker-public {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.mm-roompicker-public-check { flex: none; margin: 0; }
.mm-roompicker-hint { margin: 3px 0 0 24px; font-size: 12px; color: var(--text-dim); }

/* -- whose Mac sees the room (#4232) -----------------------------------------
   A persona agent may be picked into a private room and DMed now, and it
   runs on its owner's machine. The room picker says so in a status line
   under the list; the DM picker, which has no pick step, says it over a
   "Message anyway" button. */
.mm-roompicker-warn,
.mm-dmp-warn { margin-top: 8px; font-size: 12px; color: var(--warn); }
.mm-dmp-warn { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.mm-conv-details-runby { margin-left: 6px; font-size: 11px; color: var(--text-dim); }

/* #4290: two DM picker views inside the shared popover's height ceiling.
   Only the roster OR the notice scrolls; search and actions stay visible.
   Roompicker shares mm-dmp classes, so every override stays local here. */
.mm-dmp-pop {
  display: flex; flex-direction: column; width: 288px;
  min-width: 0; min-height: 0; max-width: calc(100vw - 24px); overflow: hidden;
}
.mm-dmp-pop .mm-dmp {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; overflow: hidden;
}
.mm-dmp-pop .mm-dmp-filter { flex: none; min-width: 0; }
.mm-dmp-pop .mm-dmp-list { flex: 0 1 auto; min-width: 0; overflow-x: hidden; }
.mm-dmp-pop .mm-dmp-row { flex: none; }
.mm-dmp-pop .mm-dmp-name { white-space: normal; overflow-wrap: anywhere; }
.mm-dmp-pop .mm-dmp-warn {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  margin: 0; padding: 0; gap: 12px; overflow: hidden;
}
.mm-dmp-pop .mm-dmp-notice {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow-y: auto; overflow-wrap: anywhere; padding: 4px 0;
}
.mm-dmp-pop .mm-dmp-actions { display: flex; flex: none; flex-wrap: wrap; gap: 6px; }
.mm-dmp-pop .mm-dmp-actions .btn { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* -- channel browser (#4027, components/channelbrowser.js) --------------------
   The public rooms the caller is not in, one .mm-row each (the glyph, the
   name over its "N members · topic" line, a Join button on the right). The
   rows are not buttons — the Join is the control — so they take no hover. */
.mm-browse-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.mm-browse-row { cursor: default; align-items: center; }
.mm-browse-row:hover { background: none; }
.mm-browse-row .mm-row-label { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.mm-browse-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-browse-meta { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-browse-status { font-size: 11.5px; color: var(--danger, #e2445c); }
.mm-browse-status:empty { display: none; }
.mm-browse-join { flex: none; font-size: 12px; padding: 3px 10px; }
/* The group room's ⋯ in the conversation header, styled like its pin. */
.mm-conv-more {
  flex: none; width: 22px; height: 22px; margin-left: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.mm-conv-more:hover { background: var(--panel-2); color: var(--text); }
.pop-item.mm-pop-danger { color: var(--danger, #e2445c); }
.pop-item.mm-pop-danger.armed { font-weight: 600; }

/* -- new-workspace dialog (#3359) ------------------------------------------- */
.mm-ws-create { display: flex; gap: 8px; align-items: center; }
.mm-ws-create .text { flex: 1; min-width: 0; }
.mm-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer;
}
.mm-row:hover { background: var(--panel-2); }
.mm-row.active { background: var(--accent-soft); color: var(--accent-ink); }
.mm-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* DM tools float above the row, leaving the entire trailing width for names.
   Opacity (not display/visibility) lets keyboard focus reveal the controls. */
.mm-row[data-dm-row] { position: relative; }
.mm-row[data-dm-row]:hover, .mm-row[data-dm-row]:focus-within { z-index: 2; }
.mm-dm-navigate { padding: 0; border: 0; background: none; text-align: left; }
.mm-dm-avatar {
  position: relative; flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: none; border-radius: 6px;
}
.mm-dm-agent-mark {
  display: block; position: absolute; right: -4px; bottom: -3px;
  padding: 1px 2px; border: 1.5px solid var(--panel); border-radius: 4px;
  background: var(--accent-fill); color: var(--on-accent);
  font-size: 7px; font-weight: 750; line-height: 9px; letter-spacing: -.2px;
}
/* Every agent keeps this marker, over either a decoded photo or initials. */
.mm-dm-actions {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel); color: var(--muted);
  box-shadow: 0 3px 12px #0002;
}
.mm-row > .mm-dm-actions {
  position: absolute; right: 4px; bottom: calc(100% - 5px);
  opacity: 0; pointer-events: none;
}
.mm-row[data-actions-below="true"] > .mm-dm-actions { bottom: auto; top: calc(100% - 5px); }
.mm-row:focus-within > .mm-dm-actions { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .mm-row:hover > .mm-dm-actions { opacity: 1; pointer-events: auto; }
}
.mm-dm-action {
  display: grid; place-items: center; width: 28px; height: 26px;
  padding: 0; border: 0; border-radius: 5px; background: none; color: inherit;
}
.mm-dm-action:hover { background: var(--panel-2); color: var(--text); }
.mm-dm-action[aria-pressed="true"] { color: var(--accent-ink); }
.mm-dm-action:disabled { opacity: .45; cursor: wait; }
.mm-dm-avatar:focus-visible, .mm-dm-action:focus-visible, .mm-dm-navigate:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.pop.mm-dm-actions-pop { padding: 0; min-width: 0; border: 0; background: none; box-shadow: none; }
.mm-dm-actions-pop .mm-dm-action { width: 44px; height: 44px; }
@media (pointer: coarse) {
  .mm-row[data-dm-row] { min-height: 44px; }
  .mm-dm-avatar::before { content: ""; position: absolute; inset: -11px; }
}
/* The room glyph (#4027, js/roomglyph.js): `#` or the lock in one 14px
   slot before the name, in --text-dim, so a private room reads as one at a
   glance — in the Chats list, the Pins pane's rows, the channel browser and
   the conversation header (where it takes the title's size). */
.mm-row-glyph {
  flex: none; width: 14px; text-align: center; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-row-glyph-lock svg { width: 12px; height: 12px; stroke: currentColor; }
.mm-conv-head .mm-row-glyph { width: auto; font-size: 15px; font-weight: 700; margin-right: -4px; }
.mm-conv-head .mm-row-glyph-lock svg { width: 14px; height: 14px; }
/* Browse rooms… (#4027): the last row of the rooms block, a door rather
   than a room, so its label reads dim like the sub-labels around it. */
.mm-roster-browse .mm-row-label { color: var(--text-dim); font-size: 13px; }
.mm-roster-browse:hover .mm-row-label { color: var(--text); }
.mm-row .mm-badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 11px; font-weight: 650; line-height: 18px; text-align: center;
}
.mm-roster-empty { padding: 4px 10px 6px; color: var(--text-dim); font-size: 12.5px; }
.mm-dm-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--text-dim); background: none;
}
.mm-dm-dot.on { border-color: var(--ok); background: var(--ok); }
.mm-dm-dot.working { border-color: var(--accent-ink); background: var(--accent-ink); }
.mm-dm-dot.local {
  width: 16px; height: 16px; margin: 0 -4px; border: 0; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--text-dim);
}
.mm-dm-dot.local.on { color: var(--ok); }
.mm-dm-dot.local.working { color: var(--accent-ink); }
@keyframes mm-dm-working { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  .mm-dm-dot.working { animation: mm-dm-working 2.8s ease-in-out infinite; }
}

/* -- the Chats pane's chrome (#4023, mockup): the search row first, two
   sub-labels INSIDE the one list (plain divs — not sections, no chevron),
   read rows in --muted and unread rows in --text at 650 with the blue
   pill, and the machine-status footer last (hidden without a bridge).
   Scoped to the two hosts that paint roomRow / dmRow — the Sessions pane's
   rows keep their own colour. ------------------------------------------- */
.mm-pane-search {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 8px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
  color: var(--text-dim);
}
.mm-pane-search:focus-within { border-color: var(--accent); }
.mm-pane-search svg { flex: none; }
.mm-pane-search-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 12.5px; color: var(--text); padding: 2px 0;
}
.mm-pane-search-input::placeholder { color: var(--text-dim); }
.mm-pane-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mm-pane-search-hint {
  flex: none; font: inherit; font-size: 10.5px; line-height: 1; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px;
}
.mm-chat-sort {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.mm-chat-sort:hover, .mm-chat-sort[aria-expanded="true"] {
  background: var(--panel); color: var(--text);
}
.mm-chat-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The search row sits first in the pane body, so the list would take the
   "second container" gap (.mm-pane-body > :not([hidden]) ~ *) — it is the
   list's own header row, not a second container. */
.mm-chats-pane > .mm-pane-search ~ .mm-chats .mm-roster-sec:first-child { margin-top: 0; }
.mm-chats-sub {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 8px 10px 4px;
}
/* The read/unread treatment applies to every conversation list that paints
   these rows: the Chats pane, the scoped Pins list, and (#4582, once unread
   is live for every workspace's pinned rows) the global Pins pane's rows,
   which sit under .mm-global-pin > .mm-pin-content rather than a list —
   and Messages' people rows (.mm-msgs-people, one chat style). */
.mm-chats .mm-row, .mm-pins-chats .mm-row, .mm-global-pin .mm-row, .mm-msgs-people .mm-row { color: var(--muted); }
.mm-chats .mm-row.unread, .mm-pins-chats .mm-row.unread, .mm-global-pin .mm-row.unread, .mm-msgs-people .mm-row.unread { color: var(--text); }
.mm-chats .mm-row.unread .mm-row-label, .mm-pins-chats .mm-row.unread .mm-row-label,
.mm-global-pin .mm-row.unread .mm-row-label, .mm-msgs-people .mm-row.unread .mm-row-label { font-weight: 650; }
.mm-chats .mm-row.active, .mm-pins-chats .mm-row.active, .mm-global-pin .mm-row.active, .mm-msgs-people .mm-row.active { color: var(--accent-ink); }
/* The latest message (#8293, canvas R1): line one the name and the time,
   line two the preview — one line, cut with an ellipsis. Built only for a
   row whose list row carries `last_message`, so an older server's rows
   keep their one line. */
.mm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mm-row-top > .mm-row-label, .mm-row-top > .mm-task-line { flex: 1 1 auto; min-width: 0; }
.mm-row-time { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.mm-row-time:empty { display: none; }
/* The preview is ONE paragraph of up to two lines (Ian, 2026-10-15): the
   "You:"/sender prefix, an icon and the text flow inline from the left edge
   and wrap together; the read tick sits at the right of the first line,
   outside the text (the muted bell is beside the name, .mm-row-muted-wrap). */
.mm-row-preview {
  position: relative; display: block; min-width: 0;
  font-size: 12px; line-height: 15px; font-weight: 400; color: var(--text-dim);
}
.mm-row-preview:has(> .mm-row-tick) { padding-right: 20px; }
.mm-row-preview:empty { display: none; }
.mm-row-preview-clamp > svg { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.mm-row-preview-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
.mm-row-preview-text { display: inline; }
.mm-row-prefix { display: inline; font-weight: 600; color: var(--text); }
.mm-row-prefix.draft { color: var(--warn, #e5b84f); }
.mm-row-preview.italic .mm-row-preview-text { font-style: italic; }
.mm-row-preview.typing { color: var(--accent-ink); }
.mm-row-tick.sent { color: var(--text-dim); }
.mm-row-tick.read { color: var(--accent); }
.mm-row-muted { color: var(--text-dim); }
.mm-row-preview > .mm-row-tick { position: absolute; right: 0; top: 1px; }
/* Light theme: a read row's preview in the theme's dim text (#8a93a3 on white,
   about 3:1) read as disabled (Ian, 2026-10-17, #8293). Use the secondary text
   colour instead, as teamfocus.css does, by overriding the variable rather
   than the colour: a colour rule would tie with the unread rule below and beat
   the typing line's accent. Unread stays --text; dark is unchanged. */
:root[data-theme="light"] .mm-row-preview { --text-dim: var(--muted); }
.mm-row.unread .mm-row-preview { color: var(--text); }
.mm-row.unread .mm-row-time { color: var(--accent-ink); }
.mm-row.muted .mm-badge { background: var(--panel-2); color: var(--text); }
.mm-task-text.has-preview > .mm-task-sub { display: none; }
.mm-dm-text .mm-row-top > .mm-row-label { flex: 1 1 auto; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* The name sits on its line with the time, as a room row's does: the name
   button's -6px hit band (people.css) gets back the 6px padding that
   `.mm-dm-navigate { padding: 0 }` above takes, and it is baseline-aligned
   instead of stretched — it was pulled 6px up out of the line, leaving the
   time between the two lines and a band over the preview. The preview
   follows with a room row's 2px gap (.mm-row-text). One chat style. */
.mm-dm-text .mm-row-top > .mm-dm-navigate { align-self: baseline; padding: 6px 0; }
.mm-dm-text.has-preview { gap: 1px; }
/* Chats owns its scroll area; team activity stays reachable at the bottom. */
.mm-pane-body.mm-chats-pane { display: flex; flex-direction: column; min-height: 100%; }
.mm-chats-pane > .mm-chats { flex: 1; }
/* The inline section follows the list directly; only a pinned footer needs the stretch. */
.mm-chats-pane:has(> .mm-team-activity-section) > .mm-chats { flex: none; }
.mm-pane-foot {
  position: sticky; bottom: 0; z-index: 2; flex: none;
  margin-top: 12px; border-top: 1px solid var(--border-soft); background: var(--panel);
}
.mm-pane-foot[hidden] { display: none; }
.mm-team-activity-toggle { width: 100%; padding: 12px 10px; border: 0; border-radius: 5px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.mm-team-activity-toggle:hover, .mm-team-activity-toggle[aria-expanded="true"] { background: var(--bg); }
.mm-team-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; }
.mm-team-activity-toggle[aria-expanded="true"] .mm-icon { transform: rotate(180deg); }
.mm-team-activity-count { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.mm-team-activity-toggle.needs-attention .mm-team-activity-heading { color: var(--danger); }
.mm-team-activity-part { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; white-space: nowrap; }
.mm-team-activity-part > i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex: none; }
.mm-team-activity-part[data-presence="needs"] { color: var(--pc); font-weight: 600; }
/* Mobile: an ordinary section below the direct messages, rows in place. */
.mm-team-activity-section { margin-top: 10px; padding: 0 0 16px; }
.mm-team-activity-section[hidden] { display: none; }
.mm-team-activity-inline .mm-team-activity-toggle { padding: 8px 10px; }
.mm-team-activity-inline .mm-team-activity-toggle:hover, .mm-team-activity-inline .mm-team-activity-toggle[aria-expanded="true"] { background: none; }
.mm-team-activity-inline .mm-team-activity-heading { justify-content: flex-start; gap: 0; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.mm-team-activity-inline .mm-team-activity-heading > .mm-icon { margin-left: auto; }
.mm-team-activity-inline .mm-team-activity-toggle[aria-expanded="true"] .mm-team-activity-count { display: none; }
.mm-team-activity-inline .mm-team-activity-toggle .mm-icon { transform: rotate(90deg); }
.mm-team-activity-inline .mm-team-activity-toggle[aria-expanded="true"] .mm-icon { transform: rotate(180deg); }
.mm-team-activity-body { padding: 0 8px; }
.mm-team-activity-body[hidden] { display: none; }
.mm-team-activity-body .mm-team-activity-list { max-height: none; overflow: visible; }
.mm-team-activity-body .mm-team-activity-note:empty { display: none; }
.mm-team-activity-body .mm-team-activity-row > .mm-pav { padding: 3px; }
.mm-team-activity-body .mm-team-activity-chat { border: 0; background: none; }
/* A row is its agent's chat, like a DM row: it opens it, highlights while it
   is open, and carries the chat's unread count (the heading sums them while
   the rows are hidden). */
.mm-team-activity-body .mm-team-activity-row { cursor: pointer; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; }
.mm-team-activity-body .mm-team-activity-row:hover { background: var(--panel-2); }
.mm-team-activity-body .mm-team-activity-row.active { background: var(--accent-soft); }
.mm-team-activity-body .mm-team-activity-row.active .mm-team-activity-name { color: var(--accent-ink); }
.mm-team-activity-body .mm-team-activity-name { font-weight: 500; }
.mm-team-activity-body .mm-team-activity-row.unread .mm-team-activity-name { font-weight: 700; }
.mm-team-activity-row .mm-badge, .mm-team-activity-unread { flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 11px; font-weight: 650; line-height: 18px; text-align: center; letter-spacing: 0; text-transform: none; }
.mm-team-activity-row .mm-badge[hidden], .mm-team-activity-unread[hidden] { display: none; }
.mm-team-activity-unread { margin-left: 6px; }
.pop.mm-team-activity-pop { width: 330px; max-width: calc(100vw - 24px); padding: 14px; }
.mm-team-activity-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mm-team-activity-refresh { background: none; border: 0; color: var(--accent-ink); font: inherit; font-size: 12px; cursor: pointer; padding: 5px; }
.mm-team-activity-note { color: var(--muted); font-size: 12px; margin: 5px 0 10px; }
.mm-team-activity-list { max-height: min(440px, 60vh); overflow-y: auto; }
.mm-team-activity-row { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 8px; border-radius: 8px; }
.mm-team-activity-row + .mm-team-activity-row { margin-top: 2px; }
.mm-team-activity-row[data-presence="waiting"] { background: linear-gradient(90deg, var(--warn-soft), transparent 75%); }
.mm-team-activity-row[data-presence="needs"] { background: linear-gradient(90deg, var(--danger-soft), transparent 75%); }
.mm-team-activity-row > .mm-pav { padding: 3px; }
.mm-team-activity-row .mm-dm-agent-mark { z-index: 3; }
.mm-team-activity-person { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mm-team-activity-who, .mm-team-activity-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.mm-team-activity-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 620; }
.mm-team-activity-role { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-size: 12px; }
.mm-team-activity-state { flex: none; color: var(--pc); font-size: 12px; font-weight: 600; }
.mm-team-activity-work { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.mm-team-activity-work::before { content: "· "; color: var(--text-dim); }
.mm-team-activity-chat { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); cursor: pointer; }
.mm-team-activity-chat:disabled { opacity: .45; cursor: default; }
.mm-team-activity-toggle:focus-visible, .mm-team-activity-chat:focus-visible, .mm-team-activity-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .mm-team-activity-chat, .mm-team-activity-refresh { min-width: 44px; min-height: 44px; } }

/* -- conversation ----------------------------------------------------------- */
#mm-chat {
  grid-column: 3; grid-row: 2; min-height: 0;
  flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg);
}

.mm-conv-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 24px; border-bottom: 1px solid var(--border);
  background: var(--bg); font-size: 15px; font-weight: 700;
}
.mm-conv-title { flex: none; color: var(--text); }
/* The pin beside the title (#3642): the header's door to the same pin
   store the sidebar's ⋯ writes. */
.mm-conv-pin, .mm-conv-mute {
  flex: none; width: 22px; height: 22px; margin-left: -4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.mm-conv-pin:hover, .mm-conv-mute:hover { background: var(--panel-2); color: var(--text); }
.mm-conv-pin.on { color: var(--accent); }
.mm-conv-pin.on .mm-icon-pin path:first-child { fill: currentColor; }
/* Both controls use the chrome's stroke icons. A slash identifies muted;
   the active accent also makes the toggle state visible. */
.mm-conv-mute.on { color: var(--accent); }
.mm-conv-head .mm-conv-sub { font-weight: 400; color: var(--text-dim); font-size: 12.5px; }
/* Agent direct chats: the presence avatar, name + role, status line, the
   model | capacity pill and the capacity bar — css/presence.css draws the
   presence parts. Scoped to the desktop opt-in; rooms, humans and the
   mobile host keep theirs. */
.mm-conv-agent { position:relative; height:auto; min-height:66px; flex-wrap:nowrap; gap:6px 10px; padding-top:10px; padding-bottom:10px; padding-left:16px; container-type:inline-size; }
.mm-chat-energy-bar { position:absolute; bottom:-1px; left:0; width:100%; height:14px; padding:10px 0 0; border:0; background:none; cursor:pointer; }
.mm-chat-energy-track { display:block; height:3px; background:var(--border); }
.mm-chat-energy-track > span { display:block; height:100%; background:var(--energy-tone); }
.mm-chat-energy-bar[data-empty="true"]::after { content:""; position:absolute; left:0; bottom:0; width:4px; height:3px; background:var(--energy-tone); }
.mm-chat-energy-bar[data-energy-level="stale"] .mm-chat-energy-track > span { opacity:.6; }
.mm-conv-agent :is(.mm-conv-pin,.mm-conv-mute,.mm-conv-info,.mm-conv-more,.mm-search-pill) { display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:34px; margin:0; padding:0; border:0; border-radius:6px; background:none; color:var(--text-dim); cursor:pointer; }
.mm-conv-agent :is(.mm-conv-pin,.mm-conv-mute).on { color:var(--accent); background:var(--panel-2); }
.mm-conv-agent :is(.mm-conv-pin,.mm-conv-mute,.mm-conv-info,.mm-conv-more,.mm-search-pill):hover { background:var(--panel-2); color:var(--text); }
.mm-conv-agent .mm-conv-pills { flex:none; margin-left:0; }
.mm-conv-agent .mm-search-pill span { display:none; }
.mm-chat-energy-pop { position:fixed; }
.mm-chat-energy-close { position:absolute; top:8px; right:8px; width:28px; height:28px; border:0; border-radius:5px; background:none; color:var(--muted); cursor:pointer; font-size:20px; }
.mm-chat-energy-pop .mm-agent-usage-body h3 { padding-right:24px; }
@container (max-width:420px) {
  .mm-conv-agent :is(.mm-conv-pin,.mm-conv-mute,.mm-conv-info,.mm-conv-more,.mm-search-pill) { width:24px; }
}
@media (max-width:600px) {
  .mm-conv-agent { padding-left:12px; padding-right:12px; gap:6px; }
}
/* Member avatar stack, right-aligned, overlapping per the artboard. */
.mm-conv-stack { margin-left: auto; display: flex; align-items: center; }
.mm-conv-stack .avatar { box-shadow: 0 0 0 2px var(--bg); }
.mm-conv-stack .avatar + .avatar { margin-left: -6px; }
/* The header's slots (#4023): an EMPTY topic span (#4010 fills it — no
   "Add a topic" text here), a right-aligned pills row (#4008 / #4013 add
   pills; empty paints nothing), and the stack's "+N" overflow tile. */
.mm-conv-topic {
  flex: 0 1 auto; font-weight: 400; font-size: 13px; color: var(--text-dim);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-conv-topic:empty { display: none; }
/* The topic as an editor's button (#4010): the text itself is the control —
   no box until hovered — and the empty prompt reads as a prompt. */
button.mm-conv-topic {
  font: inherit; font-weight: 400; font-size: 13px; line-height: 1.2;
  border: 0; border-radius: 6px; padding: 2px 4px; margin: 0 -4px;
  background: none; color: var(--text-dim); cursor: pointer; text-align: left;
}
button.mm-conv-topic:hover, button.mm-conv-topic:focus-visible { color: var(--text); background: var(--panel-2); }
button.mm-conv-topic.empty { font-style: italic; }
/* The inline topic field the button swaps to: the same metrics, boxed. */
.mm-conv-topic-input {
  flex: 0 1 auto; width: 100%; max-width: 360px; min-width: 120px;
  font: inherit; font-weight: 400; font-size: 13px; line-height: 1.2;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2); color: var(--text);
}
.mm-conv-topic-input:focus { outline: none; border-color: var(--accent); }
/* The subline as the door to the room details (#4010): a button reset that
   keeps .mm-conv-sub's look, underlined on hover so it reads as a door. */
.mm-conv-details-btn {
  flex: none; white-space: nowrap;
  font: inherit; border: 0; border-radius: 4px; padding: 0; margin: 0;
  background: none; cursor: pointer; text-align: left;
}
.mm-conv-details-btn:hover, .mm-conv-details-btn:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* The room details popover: description, the edit row, then the members. */
.pop.mm-conv-details { width: 300px; max-width: min(300px, calc(100vw - 24px)); }
.mm-conv-details-desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45; padding: 6px 10px; color: var(--text); }
.mm-conv-details-desc.empty { color: var(--text-dim); font-style: italic; }
.mm-conv-details-members { padding: 2px 0 4px; }
.mm-conv-details-head { padding: 4px 10px 2px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.mm-conv-details-member { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12.5px; color: var(--text); }
.mm-conv-details-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A people group's photo in its details (2026-10-16): the big round face —
   for a member a button, wearing a small picture badge — and Choose photo /
   Remove photo beneath it once pressed. */
.mm-conv-details-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 4px; }
.mm-conv-details-photo .avatar { border-radius: 50%; }
.mm-conv-details-photo-face {
  position: relative; display: inline-grid; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; line-height: 0;
}
.mm-conv-details-photo-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mm-conv-details-photo-face:disabled { cursor: progress; opacity: .6; }
.mm-conv-details-photo-badge {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel);
  background: var(--panel-2); color: var(--text);
}
.mm-conv-details-photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mm-conv-details-photo-act { min-height: 30px; padding: 3px 12px; font-size: 12.5px; }
.mm-conv-details-photo-status { font-size: 12px; color: var(--text-dim); }
/* The header's face while a photo change saves. */
.mm-conv-group-face.busy { opacity: .55; transition: opacity .15s ease; }
/* The Notifications section of the room details (#4016): three radio rows in
   the members list's metrics, the current one lit and bulleted, with the
   standing keywords under it. */
.mm-conv-notify { padding: 2px 0 4px; }
.mm-conv-notify-opt {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; line-height: 1.4;
  padding: 4px 10px 4px 22px; margin: 0; border: 0; border-radius: 4px;
  background: none; color: var(--text-dim); cursor: pointer; position: relative;
}
.mm-conv-notify-opt:hover, .mm-conv-notify-opt:focus-visible { background: var(--panel-2); color: var(--text); }
.mm-conv-notify-opt.on { color: var(--text); font-weight: 600; }
.mm-conv-notify-opt.on::before { content: "•"; position: absolute; left: 10px; }
.mm-conv-notify-kw {
  padding: 0 10px 4px 22px; font-size: 11.5px; color: var(--text-dim);
  overflow-wrap: anywhere;
}
/* The description dialog's textarea (components/roompicker.js). */
.mm-room-desc { resize: vertical; min-height: 96px; font: inherit; font-size: 13.5px; line-height: 1.45; }
/* The keyword-alerts dialog's input (#4016) and its hint under it. */
.mm-room-keywords { font: inherit; font-size: 13.5px; }
.mm-room-keywords-hint { margin-left: 0; }
.mm-conv-pills { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mm-conv-pills:empty { display: none; }
.mm-conv-pills:not(:empty) + .mm-conv-stack { margin-left: 0; }
.mm-conv-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px;
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.mm-conv-pill:hover { border-color: var(--accent); color: var(--text); }
.mm-conv-stack-more {
  flex: none; width: 22px; height: 22px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 26%; background: var(--panel-2); color: var(--text-dim);
  font-size: 10.5px; font-weight: 650; box-shadow: 0 0 0 2px var(--bg);
}

.mm-msgs { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 6px 24px 20px; }

/* Artboard avatars are rounded rectangles, not circles — bare selector on
   purpose: popovers and modals mount on document.body, outside #mm-shell,
   and this stylesheet only ever loads on this entry. */
.avatar { border-radius: 26%; }
.mm-msgs-state { padding: 24px; color: var(--text-dim); font-size: 13px; text-align: center; }
/* #8291 review: the no-workspace state's way to Messages. */
.mm-msgs-state-link { display: block; margin: 0 auto; padding: 6px 12px; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 13px; text-align: center; cursor: pointer; text-decoration: none; }
.mm-msgs-state-link:hover { text-decoration: underline; }
.mm-agent-intro {
  box-sizing: border-box;
  align-self: center;
  width: min(520px, calc(100% - 32px));
  max-width: calc(100vw - 32px);
  margin: auto;
  padding: 28px 24px;
}
.mm-agent-intro-role {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.mm-agent-intro-copy {
  margin: 8px auto 16px;
  width: 100%;
  max-width: min(46ch, calc(100vw - 80px));
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.mm-agent-starter {
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.mm-agent-starter:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mm-agent-starter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Two quietly chatting bubbles. The request owns their lifetime; motion never
   delays content. */
.mm-chat-loading {
  flex: 1; min-height: 240px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 32px 16px;
  color: var(--text-dim); text-align: center;
}
.mm-chat-loading[hidden] { display: none; }
.mm-chat-loading-art { position: relative; width: 220px; height: 154px; flex: none; }
.mm-chat-loading-bubble {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 144px; height: 94px; border: 2px solid var(--text-dim);
  border-radius: 30px; background: var(--bg);
  animation: mm-chat-loading-bob 3.6s ease-in-out infinite;
}
.mm-chat-loading-bubble::after {
  content: ""; position: absolute; bottom: -10px; left: 26px;
  width: 18px; height: 18px; background: inherit;
  border-left: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: skewY(-35deg);
}
.mm-chat-loading-back { top: 2px; right: 0; opacity: .24; animation-delay: -1.8s; }
.mm-chat-loading-back::after { left: auto; right: 26px; transform: skewY(35deg); border-left: 0; border-right: 2px solid var(--text-dim); }
.mm-chat-loading-front { left: 0; top: 48px; opacity: .65; }
.mm-chat-loading-dots { display: flex; gap: 12px; }
.mm-chat-loading-dots i {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: currentColor;
  animation: mm-chat-loading-dot 1.8s ease-in-out infinite;
}
.mm-chat-loading-dots i:nth-child(2) { animation-delay: .18s; }
.mm-chat-loading-dots i:nth-child(3) { animation-delay: .36s; }
.mm-chat-loading-label { color: var(--muted); font-size: 13px; line-height: 1.5; }
.mm-chat-skeleton { padding: 12px 10px; width: 100%; min-width: 0; }
.mm-chat-skeleton-label {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.mm-chat-skeleton-row { display: flex; align-items: center; gap: 12px; height: 62px; }
.mm-chat-skeleton-avatar, .mm-chat-skeleton-line {
  display: block; background: var(--border); border-radius: 5px; filter: blur(.6px);
  animation: mm-chat-skeleton-pulse 2.4s ease-in-out infinite;
}
.mm-chat-skeleton-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.mm-chat-skeleton-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.mm-chat-skeleton-line { width: 78%; height: 10px; }
.mm-chat-skeleton-short { width: 48%; height: 7px; }
.mm-chat-skeleton-row:nth-child(even) .mm-chat-skeleton-line { width: 62%; animation-delay: .18s; }
.mm-chat-skeleton-row:nth-child(even) .mm-chat-skeleton-short { width: 36%; }
.mm-global-pin-unavailable > .mm-chat-skeleton { padding: 0; }
.mm-global-pin-unavailable .mm-chat-skeleton-row { height: 40px; }
@keyframes mm-chat-loading-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mm-chat-loading-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes mm-chat-skeleton-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .mm-chat-loading-bubble, .mm-chat-loading-dots i,
  .mm-chat-skeleton-avatar, .mm-chat-skeleton-line { animation: none; }
}

/* Date dividers (#3433, artboard): line — label — line, in flow. */
.mm-day {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 6px;
  pointer-events: none;
}
.mm-day::before, .mm-day::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.mm-day span {
  flex: none; color: var(--text-dim); font-size: 11.5px; font-weight: 600;
}

/* The current reading day floats below the header without changing the
   scroller's height. It must not capture message taps or text selection. */
.mm-date-overlay { position: relative; flex: none; height: 0; z-index: 3; pointer-events: none; }
.mm-date-badge {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 5px 12px; border-radius: 18px;
  border: 1px solid var(--border); color: var(--text); background: var(--panel);
  font-size: 13px; font-weight: 550; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 1px 5px rgb(0 0 0 / .08);
}
.mm-date-badge[hidden] { display: none; }
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .mm-date-badge { background: rgba(24,29,37,.64); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  :root[data-theme="light"] .mm-date-badge { background: rgba(250,251,253,.72); }
}
@media (prefers-reduced-transparency: reduce) {
  .mm-date-badge, :root[data-theme="light"] .mm-date-badge {
    background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Unread divider (#4006): the day divider's shape in --danger, in flow. */
.mm-new {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 6px;
  pointer-events: none;
}
.mm-new::before, .mm-new::after {
  content: ""; flex: 1; height: 1px; background: var(--danger);
}
.mm-new span {
  flex: none; color: var(--danger); font-size: 11.5px; font-weight: 700;
}

/* Jump to latest (#4006): the list's sticky, zero-height last child — the
   button hangs above the scrollport's bottom edge while you are scrolled
   up, and the [hidden] rule beats the flex display when the pill is off. */
.mm-jump {
  position: sticky; bottom: 0; height: 0; display: flex; align-items: flex-start; justify-content: flex-end;
  overflow: visible; pointer-events: none;
}
.mm-jump[hidden] { display: none; }
.mm-jump-btn {
  pointer-events: auto; transform: translateY(calc(-100% - 8px));
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 36px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--accent-ink);
  font: inherit; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer;
}
.mm-jump-btn:hover { background: var(--panel-2); }

/* The jump to a message (#4007): the bar between the header and the list
   while older pages load, and the target's ~2 s wash once it is found —
   --accent-soft, the same tint the portal's selected states use. */
.mm-jump-bar {
  flex: none; padding: 4px 24px; font-size: 12px; color: var(--text-dim);
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.mm-jump-bar[hidden] { display: none; }
.mm-msg.mm-msg-target {
  background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft);
  border-radius: 6px; transition: background .6s, box-shadow .6s;
}

/* Pinned messages (#4008): the bar under the header (the latest pin as a
   button that jumps to it, then "View all"), the header's count pill, and
   the pins list popover — a row per pin: the message (a button) and Unpin
   (the .mm-edit-btn look). Hidden while nothing is pinned. */
.mm-pinned-bar {
  flex: none; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 24px; font-size: 12.5px; color: var(--text);
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.mm-pinned-bar[hidden] { display: none; }
.mm-pinned-glyph { flex: none; display: inline-flex; color: var(--accent); }
.mm-pinned-latest {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px;
  font: inherit; border: 0; padding: 0; margin: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
}
.mm-pinned-latest:hover .mm-pinned-text, .mm-pinned-latest:focus-visible .mm-pinned-text { color: var(--text); }
.mm-pinned-author { flex: none; font-weight: 600; }
.mm-pinned-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.mm-pinned-all {
  flex: none; font: inherit; font-size: 12px; font-weight: 600; border: 0; padding: 0;
  background: none; color: var(--accent-ink); cursor: pointer;
}
.mm-pinned-all:hover, .mm-pinned-all:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mm-pinned-pill { cursor: pointer; }
.pop.mm-pinned-pop { min-width: 320px; max-width: min(440px, calc(100vw - 24px)); padding: 4px; }
.mm-pinned-row { display: flex; align-items: flex-start; gap: 6px; padding: 2px 4px; }
.mm-pinned-row + .mm-pinned-row { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }
.mm-pinned-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font: inherit; font-size: 12.5px; border: 0; border-radius: 6px; padding: 4px 6px; margin: 0;
  background: none; color: var(--text); text-align: left; cursor: pointer;
}
.mm-pinned-open:hover, .mm-pinned-open:focus-visible { background: var(--panel-2); }
.mm-pinned-open .mm-pinned-text { display: block; }
.mm-pinned-row-meta { font-size: 11px; color: var(--text-dim); }
.mm-pinned-unpin {
  flex: none; background: none; border: none; border-radius: 6px; padding: 3px 7px;
  font: inherit; font-size: 11.5px; line-height: 1.2; color: var(--text-dim); cursor: pointer;
}
.mm-pinned-unpin:hover { background: var(--panel-2); color: var(--text); }
.mm-pinned-unpin:disabled { opacity: .5; cursor: default; }
.mm-pinned-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-dim); font-style: italic; }

/* Replies (#4241): the staged row at the head of the composer box, and
   the reference row above a reply's author line — a button (16 px avatar
   · name · excerpt) joined to the group's own avatar by an L-shaped
   connector. Geometry, in .mm-g-body coordinates: the 28 px avatar's
   centre is x = -24 (28 + 10 gap); the row is 18 px tall + 4 px below =
   the 22 px the avatar drops; the row's box starts at x = -6 so its 16 px
   avatar sits flush with the author name, which puts the connector's
   2 px leg at row x = -19..-17 (centred on -18 = -24 + 6) from the row's
   mid-height (y 8..10) down to the group avatar's top (y 22). The pseudo
   is CONTENT-box (app.css's `*` reset does not reach ::before), so the
   2 px border-top + 12 px height end exactly at y 22. */
.mm-reply-bar {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding-bottom: 4px; border-bottom: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text-dim);
}
.mm-reply-bar[hidden] { display: none; }
.mm-reply-bar-glyph { flex: none; display: inline-flex; color: var(--accent); }
.mm-reply-bar-label, .mm-reply-bar-sep { flex: none; }
.mm-reply-bar-name { flex: none; font-weight: 600; color: var(--text); }
.mm-reply-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-reply-bar-clear {
  flex: none; margin-left: auto; width: 22px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 6px;
  background: none; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer;
}
.mm-reply-bar-clear:hover { background: var(--panel-2); color: var(--text); }
.mm-group.mm-group-reply > .avatar { margin-top: 22px; }
.mm-reply-ref {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 18px; max-width: 100%; min-width: 0; margin: 0 0 4px -6px; padding: 0 6px;
  border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12px; line-height: 18px; color: var(--text-dim);
  text-align: left; cursor: pointer;
}
.mm-reply-ref::before {
  content: ""; position: absolute; left: -19px; top: 8px; width: 19px; height: 12px;
  border-top: 2px solid var(--border); border-left: 2px solid var(--border);
  border-top-left-radius: 6px; pointer-events: none;
}
.mm-reply-ref:hover, .mm-reply-ref:focus-visible { background: var(--panel); }
.mm-reply-ref .avatar { flex: none; }
.mm-reply-ref-name { flex: none; font-weight: 600; color: var(--text); }
.mm-reply-ref-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-reply-ref.unavailable { font-style: italic; cursor: default; }
.mm-reply-ref.unavailable::before { display: none; }
.mm-reply-ref.unavailable:hover { background: none; }

/* Author groups: avatar + name/time once, follow-up bodies indented. */
.mm-group { display: flex; gap: 10px; margin-top: var(--mm-chat-group-gap); }
.mm-group .mm-g-body { flex: 1; min-width: 0; }
.mm-g-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.mm-g-author { font-size: 14px; font-weight: 500; color: var(--text); }
.mm-g-time { border: 0; padding: 0; background: none; font: inherit; font-size: 11px; color: var(--text-dim); cursor: pointer; }
.mm-g-time:hover { color: var(--text); }
.mm-g-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.mm-agent-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: var(--ok); background: rgba(76, 201, 138, .13);
  border-radius: 4px; padding: 1px 6px;
}
.mm-msg {
  position: relative;
  font-size: 16px; line-height: var(--mm-chat-leading); letter-spacing: normal; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-width: calc(62ch + 16px); box-sizing: border-box;
  margin: 0 -8px; padding: 2px 8px; border-radius: 6px;
}
.mm-g-body > .mm-msg + .mm-msg { margin-top: var(--mm-chat-message-gap); }
.mm-msg-time {
  position: absolute; top: 5px; left: -31px; width: 31px; opacity: 0;
  border: 0; padding: 0; background: var(--bg); color: var(--text-dim);
  font: inherit; font-size: 11px; line-height: 20px;
  letter-spacing: normal; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.mm-msg:hover > .mm-msg-time, .mm-msg:focus-within > .mm-msg-time { opacity: 1; }
.mm-msg-time:hover { color: var(--text); }
.mm-msg-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.mm-msg-time-detail { padding: 8px 12px; font-size: 12px; }
/* Interaction reveals the controls without changing the message surface. */

/* -- message markdown (chatmd.js): chat rules — a newline is a <br>, a
   blank line a paragraph, a heading a bold line. white-space: pre-wrap is
   inherited from .mm-msg, so runs of spaces survive; <pre> keeps its own. */
.mm-md-p, .mm-md-quote, .mm-md-list, .mm-md-codeblock { margin: 0 0 var(--mm-chat-paragraph-gap); }
.mm-md > :last-child { margin-bottom: 0; }
.mm-md-list { padding-left: 20px; }
.mm-md-list li { margin: 1px 0; }
.mm-md-quote {
  padding: 1px 10px; border-left: 3px solid var(--border); color: var(--muted);
}
.mm-md-code {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; letter-spacing: normal; background: var(--panel-2); border-radius: 4px; padding: 0 3px;
}
/* Code blocks (item 4255): the wrapper owns the box, the pre owns the
   scroll, the head strip — a SIBLING of the pre, so it never scrolls with a
   long line and never enters a drag-selection — owns the language label
   (the canonical lowercase name, exactly what a person types back into a
   fence). Tokens only: both palettes value every colour read here. The
   label carries margin-right: auto so a control appended after it lands
   hard right. */
.mm-md-codeblock {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
/* A long block stops at 320px and scrolls inside itself; the head strip is
   the pre's sibling, so the label and Copy stay put. The scroll ends at the
   block's edge instead of carrying on into the transcript. */
.mm-md-pre {
  margin: 0; padding: 8px 10px; overflow-x: auto; overflow-y: auto; max-height: 320px;
  overscroll-behavior: contain; letter-spacing: normal;
}
.mm-md-pre code {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.mm-md-pre-head {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  border-bottom: 1px solid var(--border); user-select: none;
  font-family: var(--sans); font-size: 11px; line-height: 18px; color: var(--muted);
}
.mm-md-lang { margin-right: auto; }
/* The block's Copy control (#4256): an icon button at the strip's right end
   (margin-left: auto lands it there when no label precedes it), always
   visible — Claude Code's precedent — --muted at rest (3:1+ on --panel-2 in
   both palettes; --text-dim is 2.7:1 in light), --panel + --text on hover.
   Its own class: .mm-tool:hover's ground IS the block's ground, and the
   strip's tools are collected by that class. */
.mm-md-copy {
  margin-left: auto; width: 24px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 6px;
  background: none; color: var(--muted); padding: 0; cursor: pointer;
}
.mm-md-copy:hover { background: var(--panel); color: var(--text); }
/* The five token kinds chatcode.js emits, on the spans only — --muted clears
   3:1 on --panel-2 in both palettes, --text-dim (2.7:1 in light) is kept
   for the one kind that reads as an aside. */
.mm-tk-comment { color: var(--text-dim); font-style: italic; }
.mm-tk-string  { color: var(--ok); }
.mm-tk-number  { color: var(--warn); }
.mm-tk-keyword { color: var(--accent-ink); }
.mm-tk-key     { color: var(--review); }
/* Scroll the wrapper; a block-displayed table loses native semantics in WebKit. */
.mm-md .mm-md-table {
  max-width: 100%; min-width: 0; overflow-x: auto; margin: 0 0 6px;
  white-space: normal;
}
.mm-md .mm-md-table table { border-collapse: collapse; font: inherit; color: var(--text); }
.mm-md .mm-md-table th, .mm-md .mm-md-table td {
  padding: 6px 10px; border: 1px solid var(--border); vertical-align: top;
  min-width: 80px;
}
.mm-md .mm-md-table th { background: var(--panel-2); font-weight: 600; }
/* A long link must not set the preferred width of an entire column. */
.mm-md .mm-md-table .mm-md-link {
  display: inline-block; max-width: 60ch; vertical-align: top;
}
.mm-md .mm-md-table .mm-task-ref { align-items: center; }
.mm-md .mm-md-table code { white-space: pre; }
.mm-md .mm-md-align-left { text-align: left; }
.mm-md .mm-md-align-center { text-align: center; }
.mm-md .mm-md-align-right { text-align: right; }
.mm-md-link {
  color: var(--accent-ink); text-decoration: underline;
  text-decoration-color: var(--accent); overflow-wrap: anywhere;
}
.mm-md-link:hover { text-decoration-color: var(--accent-ink); }
.mm-md del { color: var(--text-dim); }
/* -- reactions (#3356): chips below the body ---------------------------------
   The picker opens from the hover strip's react tool (#4023, below) — the
   inline "☺+" button that sat where a reaction lands is gone. */
.mm-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 3px 0 1px; white-space: normal; }
.mm-react-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 26px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); color: var(--text);
  font: inherit; line-height: 1; padding: 3px 9px;
  cursor: pointer;
}
/* #5935: sized apart so the emoji reads at a glance; 1.15 keeps color
   emoji from clipping at the bottom. Halfway between the original 11.5px
   and 22px, after Ian found 22px too big. */
.mm-react-emoji { font-size: 17px; line-height: 1.15; }
.mm-react-count { font-size: 13px; font-weight: 600; }
.mm-react-chip:hover { border-color: var(--accent); }
.mm-react-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-react-chip.mine {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-ink);
}
/* Touch: the chip is drawn 32px tall, and an invisible ::after reaches 6px
   past it so the tap area stays 44px. The gaps keep neighbours' tap areas
   apart (4+4 across, 6+6 between rows). */
@media (pointer: coarse) {
  .mm-reacts { column-gap: 8px; row-gap: 12px; }
  .mm-react-chip { position: relative; min-height: 32px; min-width: 36px; }
  .mm-react-chip::after { content: ""; position: absolute; inset: -6px -4px; }
  .mm-react-emoji { font-size: 18px; }
  .mm-react-count { font-size: 14px; }
}
/* -- the message action strip (#4023; the 2026-09-09 Edit / Delete text
   buttons became this): icon buttons overlapping the bottom-right edge on
   --panel with --elev-1 — react on other people's messages, edit and
   delete on your own (conversation.js's TOOL_ORDER / TOOLS table; each
   button carries data-tool=<id>). The editor's Save / Cancel are
   .mm-edit-btn, the old text rule. .armed is the delete tool awaiting its
   second click. ----------------------------------------------------------- */
.mm-msg-tools {
  position: absolute; top: calc(100% - 12px); right: 8px; display: none; gap: 2px;
  padding: 2px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--elev-1); z-index: 1;
}
html:not([data-mm-message-actions="click"]) .mm-msg:hover > .mm-msg-tools,
.mm-msg:focus-within > .mm-msg-tools,
html[data-mm-message-actions="click"] .mm-msg.mm-actions-open > .mm-msg-tools { display: inline-flex; }
.mm-tool {
  width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  padding: 0; cursor: pointer;
}
.mm-tool:hover { background: var(--panel-2); color: var(--text); }
.mm-tool.danger:hover, .mm-tool.armed { color: var(--danger); }
/* The pin tool lit while the message is pinned (#4008). */
.mm-tool.on[data-tool="pin"] { color: var(--accent); }
.mm-edit-btn {
  background: none; border: none; border-radius: 6px; padding: 3px 7px;
  font: inherit; font-size: 11.5px; line-height: 1.2; color: var(--text-dim);
  cursor: pointer;
}
.mm-edit-btn:hover { background: var(--panel-2); color: var(--text); }
.mm-edit-btn.primary { color: var(--accent-ink); }
.mm-edited { margin-left: 4px; font-size: 11px; color: var(--text-dim); }
.mm-edit { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.mm-edit-area {
  width: 100%; box-sizing: border-box; min-height: 34px; max-height: 200px;
  font: inherit; font-size: 13.5px; line-height: 1.45; padding: 6px 8px;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--panel); color: var(--text); resize: none;
}
.mm-edit-actions { display: flex; align-items: center; gap: 4px; }
.mm-edit-hint { margin-left: 6px; font-size: 11px; color: var(--text-dim); }
.mm-edit-error { color: var(--danger); font-size: 12px; line-height: 1.4; }
.mm-edit-error[hidden] { display: none; }
.mm-edit-btn:disabled { opacity: .5; cursor: wait; }
/* Clickable reaction rosters reuse the shared popover's placement and Escape. */
.mm-reaction-details { width: 240px; max-width: calc(100vw - 24px); }
.mm-reaction-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; }
.mm-reaction-title { font-size: 15px; font-weight: 600; }
.mm-reaction-close { border: 0; background: none; color: var(--muted); font: inherit; font-size: 20px; width: 28px; height: 28px; cursor: pointer; }
.mm-reaction-people { list-style: none; margin: 0; padding: 0 8px; max-height: 240px; overflow-y: auto; }
.mm-reaction-person { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; }
.mm-reaction-name { min-width: 0; overflow-wrap: anywhere; }
.mm-reaction-you { margin-left: auto; color: var(--muted); font-size: 11px; }
.mm-reaction-empty { color: var(--muted); padding: 8px 0; font-size: 12px; }
/* -- read receipts (#3356): "Seen" + avatar stack under the anchor message,
   left-aligned with the body so a lone avatar reads as a receipt. ---------- */
.mm-seen {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0; margin-top: 2px; white-space: normal;
}
.mm-seen-label { margin-right: 4px; font-size: 10px; color: var(--text-dim); }
.mm-seen .avatar { box-shadow: 0 0 0 1.5px var(--bg); }
.mm-seen .avatar.initials, .mm-seen .avatar.agent {
  white-space: nowrap; overflow-wrap: normal; line-height: 1; letter-spacing: 0;
}
.mm-seen .avatar + .avatar { margin-left: 3px; }
.mm-seen-more { margin-left: 3px; font-size: 10px; color: var(--text-dim); }

/* Send states and recovery actions for a local failed attempt. */
.mm-msg.mm-sending { opacity: .85; }
.mm-send-status { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
@keyframes mm-message-sending { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .mm-msg.mm-sending { animation: mm-message-sending 1.8s ease-in-out infinite; }
}
.mm-msg.mm-failed { color: var(--danger); }
.mm-failed-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.mm-retry, .mm-failed-action {
  border: 0; background: none; padding: 3px 0; cursor: pointer;
  color: var(--danger); font: inherit; font-size: 12px; text-decoration: underline;
}

.mm-new-day-pad { height: 2px; }

/* The typing line floats over the list's bottom padding, like the date
   overlay (#5972): it never changes the list's height, because a resize
   scrolled the list and closed task previews. It fades and slides in, and
   vanishes at once when typing stops (Ian, 2026-09-29). */
.mm-typing {
  flex: none; height: 20px; margin-top: -20px; padding: 0 24px;
  position: relative; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: 11.5px; font-style: italic;
  overflow: hidden; white-space: nowrap;
  /* The chat's own colour: invisible over the empty padding, a soft veil
     where the line overlaps a message. */
  background: linear-gradient(to bottom, transparent, var(--bg) 45%);
}
.mm-typing:not(:empty) { transition: opacity .15s ease, transform .15s ease; }
.mm-typing:empty { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .mm-typing:not(:empty) { transition: none; } }
.mm-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.mm-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim);
  animation: mm-typedot 1.2s infinite;
}
.mm-typing-dots span:nth-child(2) { animation-delay: .2s; }
.mm-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes mm-typedot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* -- file messages (#3357): bubble, inline preview, caption ------------------ */
/* Any file but an image or a video: one compact row, as wide as its name. */
.mm-file {
  display: flex; flex-direction: column; width: fit-content; min-width: 200px; max-width: min(420px, 100%);
  box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px;
  background: var(--mm-card); margin: 3px 0 1px;
  white-space: normal; overflow: hidden;
}
.mm-file-info { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 6px 8px 12px; }
.mm-file.is-openable .mm-file-info { cursor: pointer; }
.mm-file.is-openable .mm-file-info:hover { background: var(--panel-2); }
/* An image or a video: the preview is the message, the download beside it. */
.mm-file.media {
  flex-direction: row; align-items: flex-start; gap: 4px; width: auto; min-width: 0; max-width: 100%;
  border: 0; border-radius: 0; background: none; overflow: visible;
}
.mm-file-icon { flex: none; display: inline-flex; color: var(--text-dim); }
.mm-file-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mm-file-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--text);
}
.mm-file-meta { flex: none; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.mm-file-dl {
  flex: none; width: 30px; height: 30px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.mm-file-dl:hover { background: var(--panel-2); color: var(--text); }
.mm-file-open {
  padding: 0; border: 0; background: transparent; text-align: left;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.mm-file-open:hover { color: var(--accent-ink); text-decoration: underline; }
.mm-file-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-markdown-modal { max-height: min(78dvh, 860px); }
.mm-markdown-modal .modal-head h3 { overflow-wrap: anywhere; }
.mm-markdown-body { line-height: 1.7; }
.mm-markdown-content { overflow-wrap: anywhere; }
.mm-markdown-content > :first-child { margin-top: 0; }
.mm-markdown-actions { align-items: center; justify-content: space-between; }
.mm-file-preview {
  position: relative; display: grid; place-items: center; flex: 0 1 auto;
  min-width: 160px; min-height: 120px; max-width: min(360px, calc(100% - 34px));
  padding: 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); color: var(--text); cursor: zoom-in; overflow: hidden;
}
.mm-file-preview.video { cursor: pointer; }
.mm-file-img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; object-fit: contain;
}
.mm-file-preview:has(.mm-file-img) { min-height: 0; }
.mm-file.media > .mm-file-dl { margin-top: 2px; }
.mm-file-preview-hint {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 5px; background: rgba(12, 16, 24, .78);
  color: #fff; font-size: 11px; font-weight: 500; line-height: 1.3;
}
.mm-file-preview:has(.mm-file-img) .mm-file-preview-hint {
  position: absolute; bottom: 10px; right: 10px;
}
.mm-file-preview:hover .mm-file-preview-hint { background: rgba(12, 16, 24, .94); }
/* Over a picture the "View image" hint waits for a pointer or focus, so it
   never covers what the picture says; a video keeps its play badge. */
.mm-file-preview:not(.video):has(.mm-file-img) .mm-file-preview-hint { opacity: 0; transition: opacity .12s; }
.mm-file-preview:not(.video):has(.mm-file-img):hover .mm-file-preview-hint,
.mm-file-preview:not(.video):has(.mm-file-img):focus-visible .mm-file-preview-hint { opacity: 1; }
.mm-file-preview[aria-busy="true"] { cursor: progress; opacity: .65; }
.mm-file-preview:focus-visible, .mm-file-dl:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -3px;
}
.mm-file-caption { padding-top: 1px; }

/* Chat attachments share the portal lightbox; only their chrome is styled here. */
.mm-media-lightbox {
  /* #5939: the padding carries the phone's safe-area insets; on desktop they are 0. */
  padding: calc(84px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: rgba(8, 11, 17, .94);
}
.mm-media-lightbox .lightbox-img { max-width: 100%; max-height: 100%; border-radius: 4px; }
.mm-media-toolbar {
  position: absolute; inset: 0 0 auto 0; height: calc(64px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) calc(92px + env(safe-area-inset-right)) 12px calc(20px + env(safe-area-inset-left));
  background: rgba(8, 11, 17, .94); /* a zoomed image slides under it */
  display: flex; align-items: center; gap: 16px; box-sizing: border-box;
}
.mm-media-title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mm-media-toolbar .mm-file-name { color: #f3f5f8; font-size: 13px; }
.mm-media-toolbar .mm-file-meta { color: #aab3c2; }
.mm-media-toolbar .mm-file-dl { color: #f3f5f8; }
.mm-media-toolbar .mm-file-dl:hover { background: rgba(255, 255, 255, .12); }
.mm-media-lightbox .lightbox-close {
  z-index: 1; /* above the toolbar, which comes later in the overlay */
  top: calc(16px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right));
  display: grid; place-items: center; padding: 0; border-radius: 6px;
  background: transparent; border: 0;
}
.mm-media-lightbox .lightbox-close:hover { background: rgba(255, 255, 255, .12); }
/* The 44px touch ✕ (app.css) stays centred on the toolbar's row, inset + 32. */
@media (pointer: coarse) { .mm-media-lightbox .lightbox-close { top: calc(10px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .mm-media-lightbox { animation: none; } }

/* Drop target highlight while files hover the conversation. */
.mm-dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }

/* -- composer (#4023, mockup): ONE bordered box on --bg inside the --panel
   wrap — the textarea, then an action row (attach · mention · share, each
   button data-act=<id>; #4024 adds emoji) with the solid Send at its end. */
.mm-composer-wrap {
  flex: none; border-top: 1px solid var(--border-soft);
  background: var(--panel);
}
.mm-composer {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 14px 12px; padding: 8px 10px 6px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.mm-composer:focus-within { border-color: var(--accent); }
.mm-composer-recipients {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 1px 2px 5px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 11.5px;
}
.mm-composer-recipients[hidden] { display: none; }
.mm-recipient {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 8px; background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 11.5px; white-space: normal; overflow-wrap: anywhere;
}
button.mm-recipient { cursor: pointer; }
.mm-recipient.linked { border-color: var(--accent); color: var(--accent); }
.mm-recipient.unresolved { border-style: dashed; color: var(--text-dim); }
.mm-recipient-action {
  border: 0; padding: 2px 4px; background: none; color: var(--accent);
  font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer;
}
.mm-recipient-action:hover { color: var(--text); }
.mm-recipient-action.plain { margin-left: auto; }
.mm-composer-actions { display: flex; align-items: center; gap: 2px; }
.mm-composer-grow { flex: 1; }
/* The formatting toolbar (#4015): the FIRST child of the box, above the
   textarea, collapsed behind the action row's format toggle. */
.mm-fmt-bar {
  display: flex; align-items: center; gap: 2px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border-soft);
}
.mm-fmt-bar[hidden] { display: none; }
.mm-fmt-btn {
  flex: none; width: 26px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  padding: 0; cursor: pointer;
}
.mm-fmt-btn:hover { background: var(--panel-2); color: var(--text); }
.mm-comp-btn[aria-pressed="true"] { color: var(--accent); }
.mm-attach-input { display: none; }

/* Attachment chips (#3357): name/size, progress, cancel or retry. */
.mm-attach-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0;
}
.mm-attach-row:empty { display: none; }
.mm-attach-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); font-size: 12px; color: var(--text);
  padding: 4px 8px 4px 10px;
}
.mm-attach-chip.mm-chip-failed { border-color: var(--danger); flex-wrap: wrap; border-radius: 12px; }
/* A rejection must be readable in full (#3430): the server names the allowed
   types, and a nowrap pill was cutting that list off mid-sentence. */
.mm-chip-failed .mm-chip-status {
  flex: 1 1 100%; order: 9; white-space: normal; overflow-wrap: anywhere;
}
.mm-chip-name {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-chip-size { flex: none; font-size: 11px; color: var(--text-dim); }
.mm-chip-track {
  flex: none; width: 70px; height: 4px; border-radius: 2px;
  background: var(--border-soft); overflow: hidden;
}
.mm-chip-bar {
  height: 100%; width: 0%; background: var(--accent-fill);
  transition: width .15s ease;
}
.mm-chip-status { flex: none; font-size: 11px; color: var(--text-dim); }
.mm-chip-failed .mm-chip-status { color: var(--danger); }
.mm-chip-btn {
  flex: none; border: 0; border-radius: 999px; background: none;
  color: var(--text-dim); font: inherit; font-size: 11px; line-height: 1;
  padding: 3px 6px; cursor: pointer;
}
.mm-chip-btn:hover { background: var(--panel); color: var(--text); }
.mm-chip-failed .mm-chip-btn { color: var(--danger); text-decoration: underline; }
.mm-composer textarea {
  width: 100%; box-sizing: border-box; resize: none; min-height: 30px; max-height: 160px;
  border: 0; background: none; color: var(--text); outline: none;
  font: inherit; font-size: 16px; line-height: var(--mm-chat-leading); letter-spacing: normal; padding: 4px 2px;
}
/* The ``` code box (components/fencebox.js). The field wraps the textarea;
   while the text holds a fence (.mm-fence-on) the textarea's ink goes
   transparent and the mirror behind it paints the same text — the fence as
   a box, the body in chatcode.js's colours. Mirror and textarea MUST wrap
   identically: same font, line height, content width and scrollbar gutter.
   The mirror (and the chip layer, which shares its coordinates) stands 6px
   wider each side with 6px more padding, so the box can reach past the text
   without clipping and the content box still matches the textarea's. */
.mm-fence-field { position: relative; }
.mm-fence-field textarea { display: block; scrollbar-gutter: stable; }
.mm-fence-mirror, .mm-fence-layer {
  position: absolute; top: 0; bottom: 0; left: -6px; right: -6px;
  overflow: hidden; pointer-events: none;
}
.mm-fence-mirror {
  z-index: 0; box-sizing: border-box; padding: 4px 8px; scrollbar-gutter: stable;
  font-size: 16px; line-height: var(--mm-chat-leading); letter-spacing: normal; color: var(--text);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 8;
  visibility: hidden;
}
.mm-fence-field textarea { position: relative; z-index: 1; }
.mm-fence-layer { z-index: 2; }
.mm-fence-on .mm-fence-mirror { visibility: visible; }
.mm-fence-on textarea { color: transparent; caret-color: var(--text); }
.mm-fence-on textarea::selection { background: var(--focus); color: transparent; }
.mm-fence-box {
  display: block; margin: 0 -6px; padding: 0 6px; border-radius: 8px;
  background: var(--panel-2); box-shadow: 0 0 0 1px var(--border);
}
.mm-fence-line { display: block; color: transparent; }
.mm-fence-open { margin: 0 -6px; padding: 0 6px; box-shadow: inset 0 -1px 0 var(--border); }
.mm-fence-body { display: block; }
.mm-fence-chip {
  position: absolute; margin: 0 0 0 4px; height: 18px; padding: 0 6px 0 4px;
  display: inline-flex; align-items: center; gap: 4px; pointer-events: auto;
  border: 0; border-radius: 5px; background: none; color: var(--muted);
  font: inherit; font-size: 11px; line-height: 18px; cursor: pointer;
}
.mm-fence-chip:hover, .mm-fence-chip.on { background: var(--accent-soft); color: var(--accent-ink); }
.mm-fence-hint {
  position: absolute; right: 18px; font-size: 11px; line-height: 18px; color: var(--text-dim);
}
.mm-fence-pick {
  position: absolute; z-index: 5; width: 220px; padding: 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.mm-fence-pick[hidden] { display: none; }
.mm-fence-pick-q {
  padding: 5px 8px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text-dim);
}
.mm-fence-pick-q b { color: var(--text); font-weight: 500; }
.mm-fence-pick-list { max-height: 220px; overflow-y: auto; }
.mm-fence-pick-row {
  display: flex; justify-content: space-between; align-items: baseline; width: 100%;
  padding: 5px 8px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.mm-fence-pick-row small { color: var(--text-dim); font-size: 11px; }
.mm-fence-pick-row.sel { background: var(--accent-soft); color: var(--accent-ink); }
.mm-fence-pick-foot {
  padding: 5px 8px 2px; margin-top: 4px; border-top: 1px solid var(--border-soft);
  font-size: 11px; color: var(--text-dim);
}
.mm-comp-btn {
  flex: none; width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--text-dim);
  padding: 0; cursor: pointer;
}
.mm-comp-btn:hover { background: var(--panel-2); color: var(--text); }
.mm-send-btn {
  flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: var(--accent-fill);
  color: var(--on-accent); cursor: pointer;
}
.mm-send-btn:hover { filter: brightness(1.08); }
.mm-send-btn:disabled { opacity: .45; cursor: default; }

/* -- share cards (#3358) ----------------------------------------------------- */
.mm-card {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 480px; margin-top: 4px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--mm-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.mm-card-loading { flex-direction: row; align-items: center; gap: 8px; }
.mm-card-absent .mm-card-title { color: var(--text-dim); font-weight: 500; }
.mm-card-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mm-card-id { flex: none; font-size: 11.5px; color: var(--text-dim); }
.mm-card-title {
  font-size: 13px; font-weight: 650; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-card-archived {
  flex: none; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.mm-card-meta { font-size: 12px; color: var(--muted); }
.mm-card-hint { font-size: 12px; color: var(--text-dim); }
.mm-card-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
  background: var(--panel);
}
.mm-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--border);
}
.mm-card-plan { font-size: 11.5px; color: var(--text-dim); }
.mm-card-open {
  align-self: flex-start; font-size: 12px; font-weight: 650;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 12px;
}
.mm-card-open:hover { border-color: var(--accent); }
.mm-card-chip .mm-chip-name { font-weight: 600; }

/* Standalone shares retain the two-line task card. Inline /# links use
   the same typography and link treatment as #id references above. */
.mm-task-ref {
  display: inline-flex; align-items: center; gap: 12px; vertical-align: middle;
  width: 420px; max-width: 100%; box-sizing: border-box; padding: 13px 15px;
  min-height: 70px; margin: 5px 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--mm-card); color: var(--text); text-decoration: none;
  cursor: pointer; font-size: 13px; line-height: 1.5;
}
.mm-md a.mm-task-ref { color: var(--text); text-decoration: none; }
.mm-task-ref[href]:hover { background: var(--panel-2); border-color: var(--accent); }
.mm-task-ref[href]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mm-task-symbol { display: inline-flex; flex: none; color: var(--muted); }
.mm-task-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mm-task-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mm-task-ref .mm-task-id { flex: none; font: inherit; color: inherit; }
.mm-task-status { overflow-wrap: anywhere; }
.mm-task-ref .mm-task-title { min-width: 0; font-size: 13px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mm-task-chevron { flex: none; font-size: 19px; line-height: 1; color: var(--text-dim); }
.mm-task-unavailable { cursor: default; color: var(--text-dim); }
.mm-task-unavailable .mm-task-title { color: var(--text-dim); font-weight: 400; }
@media (max-width: 480px) {
  .mm-task-ref { padding: 12px; gap: 10px; }
}

/* Inline-only: typed identity sits on the surrounding text's baseline.
   The full title and stage live in the shared hover preview. */
.mm-md a.mm-task-ref.mm-task-inline {
  width: auto; max-width: min(100%, 40ch, calc(100vw - 64px)); min-height: 0; margin: 0;
  gap: .25em;
}
/* A percentage max-width is indefinite during table column sizing. Use
   a definite cap there so an inline label cannot reserve its uncut width. */
.mm-md .mm-md-table a.mm-task-inline {
  max-width: min(40ch, calc(100vw - 64px));
}
.mm-task-inline .mm-task-workspace { color: inherit; font-weight: inherit; }
.mm-task-inline .mm-task-workspace,
.mm-task-ref.mm-task-inline .mm-task-title {
  display: block; min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; overflow-wrap: normal;
  font-family: inherit; font-size: inherit; line-height: inherit;
}

.mm-md .ref-kind-icon { display: inline-block; width: .85em; height: .85em; margin-right: .22em; vertical-align: -.08em; }
.mm-md .ref-kind-icon.critical { color: var(--danger); }
/* Compact inline badges fit the prose line without inflating its leading.
   A quiet tint and inset edge replace the underline; focus stays explicit. */
.mm-md a.item-ref,
.mm-md a.mm-task-ref.mm-task-inline,
.mm-md .item-ref-locked {
  display: inline-flex; align-items: baseline; vertical-align: baseline;
  font: inherit; font-size: .875em; font-weight: 600; line-height: 1.35;
  letter-spacing: 0; white-space: nowrap;
  padding: .08em .38em; border: 0; border-radius: 5px;
  color: var(--work-ref-ink, var(--accent-ink));
  background: color-mix(in srgb, currentColor 8%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent);
  text-decoration: none;
}
.mm-md a.item-ref[href]:hover,
.mm-md a.mm-task-ref.mm-task-inline[href]:hover {
  color: var(--work-ref-ink, var(--accent-ink));
  background: color-mix(in srgb, currentColor 12%, var(--panel));
  text-decoration: none;
}
.mm-md a.item-ref:focus-visible,
.mm-md .item-ref-locked:focus-visible,
.mm-md a.mm-task-inline[href]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mm-md a.item-ref,
.mm-md .item-ref-locked { max-width: min(100%, 40ch); }
/* A task the reader may not open (#6413): the same badge, muted, and not a link. */
.mm-md .item-ref-locked { cursor: default; }
.mm-md .item-ref-locked,
.mm-md a.mm-task-inline.mm-task-unavailable { --work-ref-ink: var(--muted); }
/* The workspace a task from elsewhere lives in, before its label. */
.mm-md .item-ref-place {
  display: inline-block; min-width: 0; max-width: 14ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; margin-right: .38em;
  font-weight: 500; color: var(--muted);
}

/* Workflow roles use theme ink; plan teal is distinct from review purple. */
.mm-md [data-work-tone="unknown"],
.mm-md [data-work-tone="locked"],
.mm-md [data-work-tone="inbox"],
.mm-md [data-work-tone="parked"],
.mm-md [data-work-tone="archived"] { --work-ref-ink: var(--muted); }
.mm-md [data-work-tone="accepted"],
.mm-md [data-work-tone="scoped"],
.mm-md [data-work-tone="building"] { --work-ref-ink: var(--accent-ink); }
.mm-md [data-work-tone="planned"] { --work-ref-ink: var(--warn); }
.mm-md [data-work-tone="review"] { --work-ref-ink: var(--review); }
.mm-md [data-work-tone="rejected"] { --work-ref-ink: var(--danger); }
.mm-md [data-work-tone="done"] { --work-ref-ink: var(--ok); }
.mm-md [data-work-tone="plan"] { --work-ref-ink: #59d4cd; }
:root[data-theme="light"] .mm-md [data-work-tone="planned"] { --work-ref-ink: #8a5e00; }
:root[data-theme="light"] .mm-md [data-work-tone="done"] { --work-ref-ink: #137a4e; }
:root[data-theme="light"] .mm-md [data-work-tone="plan"] { --work-ref-ink: #0e7478; }

/* -- work picker (#3358) ----------------------------------------------------- */
.mm-wp { display: flex; flex-direction: column; gap: 6px; padding: 10px; width: min(320px, calc(100vw - 40px)); }
.mm-wp-input { width: 100%; }
.mm-wp-status { font-size: 11.5px; color: var(--text-dim); padding: 0 2px; }
.mm-wp-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.mm-wp-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; border-radius: 8px; background: none; color: var(--text);
  font: inherit; padding: 6px 8px; cursor: pointer;
}
.mm-wp-row:hover { background: var(--panel-2); }
.mm-wp-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mm-wp-title {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-wp-place {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-wp-stage {
  flex: none; font-size: 10.5px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.mm-wp-id { flex: none; font-size: 11px; color: var(--text-dim); }
/* -- titlebar search id row (#3468): the resolved hit, the absent placeholder -- */
.mm-wp-hit { border: 1px solid var(--border); }
.mm-wp-absent { cursor: default; color: var(--text-dim); }
.mm-wp-absent:hover { background: none; }
.mm-wp-archived {
  flex: none; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.mm-wp-row .mm-pill { flex: none; font-size: 10.5px; padding: 1px 7px; }

/* -- search overlay (#4013): the titlebar search widened to messages, files
   and people. The body is .mm-jump-search — NOT .mm-jump, which is #4006's
   Jump-to-latest pill (sticky, zero height, no pointer events) and had
   been styling the search body since that pill landed. The .pop clamp is
   lifted for snippets; the list scrolls inside the pop's own ceiling. -- */
.pop.mm-jump-pop {
  max-width: min(560px, calc(100vw - 24px));
  max-height: min(70vh, calc(100vh - 16px));
}
.mm-jump-search { width: min(520px, calc(100vw - 40px)); }
.mm-jump-search .mm-wp-list { max-height: min(56vh, calc(100vh - 120px)); }
.mm-jump-scope-row { display: flex; }
.mm-jump-scope-row[hidden] { display: none; }
.mm-jump-scope {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); cursor: pointer;
}
.mm-jump-scope:hover { border-color: var(--accent); }
.mm-jump-group { display: flex; flex-direction: column; }
.mm-jump-group + .mm-jump-group { margin-top: 4px; }
.mm-jump-sec {
  padding: 6px 8px 2px; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
}
.mm-jump-msg, .mm-jump-file { align-items: flex-start; }
.mm-jump-snip {
  font-size: 12.5px; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-jump-snip mark, .mm-jump-file-name mark {
  background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px;
}
.mm-jump-meta {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-jump-file-icon { flex: none; display: inline-flex; color: var(--text-dim); margin-top: 2px; }
.mm-jump-agent {
  flex: none; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-ink);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.mm-jump-more { justify-content: center; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.mm-jump-more:disabled { color: var(--text-dim); cursor: default; }
.mm-wp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* -- narrow screens: roster collapses to a strip-toggle layout --------------- */
@media (max-width: 720px) {
  #mm-pane { width: 210px; } /* the rail stays 56px */
  #mm-search { width: min(220px, 46vw); }
  /* #4998: below the width where the pane itself shrinks there is no room
     for the focus panel in either state — the column, the strip and the
     band's toggle all go, and nothing about the remembered choice changes. */
  #mm-focus, #mm-focus-toggle { display: none; }
}

/* -- mentions and agent requests (#3343) ------------------------------------ */
/* A mention is a NODE, never markup, and its name is resolved per viewer from
   the roster — the message's metadata carries only {kind, user}. The state
   pill beside an agent mention is how the requester learns the outcome
   without any agent posting into the room. */
.mm-mention {
  border-radius: 4px; padding: 0 3px;
  background: var(--panel-2); color: var(--text);
  font-weight: 600; white-space: nowrap;
}
.mm-mention.agent { color: var(--accent); }
.mm-mention-req { display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; gap: 4px; }
.mm-mention-state {
  margin-left: 6px; border-radius: 999px; padding: 0 7px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text-dim); font-size: 11px; white-space: nowrap;
}
.mm-mention-state.state-accepted, .mm-mention-state.state-started {
  border-color: var(--accent); color: var(--accent);
}
.mm-mention-state.state-finished { border-color: var(--ok); color: var(--ok); }
/* #4360: an agent's answer links to the ask it answers. */
.mm-reply-context {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.mm-mention-sendnow {
  border: 0; background: none; padding: 2px 5px; color: var(--accent);
  font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.mm-mention-sendnow:disabled { opacity: .55; cursor: wait; }
.mm-queue-action, .mm-queue-unavailable {
  width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: middle;
  border: 0; border-radius: 6px; padding: 0; background: none; color: var(--text-dim);
}
.mm-queue-action { cursor: pointer; }
.mm-queue-action:hover { color: var(--text); background: var(--panel-2); }
.mm-queue-action.danger:hover, .mm-queue-action.armed { color: var(--danger); }
.mm-queue-action:focus-visible, .mm-queue-unavailable:focus-visible, .mm-mention-sendnow:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mm-queue-action:disabled, .mm-queue-unavailable { opacity: .5; }
.mm-queue-unavailable { cursor: help; }
@media (pointer: coarse) {
  .mm-queue-action, .mm-queue-unavailable { width: 44px; height: 44px; flex-basis: 44px; }
  .mm-mention-sendnow { min-height: 44px; }
  .mm-edit-btn { min-width: 44px; min-height: 44px; }
}
.mm-agent-update-pending { opacity: .8; }
.mm-mention-answers {
  display: inline-block; margin-top: 5px; border-radius: 999px; padding: 0 7px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text-dim); font-size: 11px; white-space: nowrap; text-decoration: none;
}
.mm-mention-answers:hover { border-color: var(--accent); color: var(--accent); }
.mm-mention-state.state-declined, .mm-mention-state.state-cancelled {
  color: var(--text-dim);
}
.mm-mention-withdraw, .mm-mention-retry {
  border: none; background: none; padding: 0;
  color: var(--text-dim); font-size: 11px; text-decoration: underline;
  cursor: pointer;
}
.mm-mention-withdraw:hover, .mm-mention-retry:hover { color: var(--text); }
.mm-mention-withdraw[disabled], .mm-mention-retry[disabled] { opacity: .5; cursor: default; }
/* Grouped teammates (#4331): identity and availability remain separate facts. */
.pop.mm-mention-pop {
  width: 420px; min-width: 0; max-width: calc(100vw - 24px);
  max-height: min(490px, calc(100vh - 24px)); padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
}
.mm-mention-heading {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.mm-mention-heading-at { color: var(--accent); font-size: 17px; line-height: 1; }
.mm-mention-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 6px; }
.mm-mention-section + .mm-mention-section { margin-top: 5px; border-top: 1px solid var(--border); }
.mm-mention-pop .mm-mention-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px 5px; color: var(--muted);
  font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
}
.mm-mention-group-count { font-variant-numeric: tabular-nums; font-weight: 400; }
.mm-mention-option {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px;
  border: 0; border-radius: 7px; padding: 8px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
  font: inherit;
}
.mm-mention-option:hover, .mm-mention-option[aria-selected="true"] { background: var(--accent-soft); }
.mm-mention-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-mention-avatar { position: relative; display: flex; flex: none; width: 36px; height: 36px; }
.mm-mention-avatar .avatar { object-fit: cover; border-radius: 50%; }
.mm-mention-avatar.is-agent .avatar { border-radius: 10px; }
.mm-mention-avatar-badge {
  position: absolute; right: -3px; bottom: -3px; border: 2px solid var(--panel);
  padding: 1px 3px; border-radius: 4px; background: var(--accent); color: var(--panel);
  font-size: 8px; font-weight: 800; line-height: 11px;
}
.mm-mention-avatar > .avatar:not(.image-ready) + .mm-mention-avatar-badge { display: none; }
.mm-mention-identity { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.mm-mention-name, .mm-mention-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-mention-name { font-size: 13px; font-weight: 600; }
.mm-mention-self { font-weight: 400; color: var(--muted); }
.mm-mention-detail { font-size: 11px; line-height: 1.3; color: var(--muted); }
.mm-mention-availability {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.mm-mention-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mm-mention-availability.is-ready, .mm-mention-availability.is-online { color: var(--ok); }
.mm-mention-availability.is-working { color: var(--accent); }
.mm-mention-availability.is-offline .mm-mention-dot,
.mm-mention-availability.is-unknown .mm-mention-dot,
.mm-mention-availability.is-request .mm-mention-dot { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
[data-theme="light"] .mm-mention-availability.is-ready,
[data-theme="light"] .mm-mention-availability.is-online { color: #26784f; }
.mm-mention-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: none;
  padding: 9px 14px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted);
}
.mm-mention-keys { display: flex; gap: 10px; }
.mm-mention-keys > span { display: inline-flex; align-items: center; gap: 4px; }
.mm-mention-keys kbd { font: inherit; color: var(--text); }
.mm-mention-empty { display: flex; flex-direction: column; gap: 5px; padding: 22px 8px; color: var(--muted); font-size: 12px; }
.mm-mention-empty strong { color: var(--text); font-weight: 600; }
@media (max-width: 380px) {
  .mm-mention-option { gap: 8px; padding-inline: 6px; }
  .mm-mention-name { font-size: 12px; }
  .mm-mention-detail { font-size: 10px; }
  .mm-mention-availability { font-size: 10px; }
}
/* The composer's `/` command menu (#4015) — the @ menu's shape. */
.pop.mm-slash-pop { min-width: 240px; }
.mm-slash-row { display: inline-flex; align-items: center; gap: 10px; }
.mm-slash-cmd { color: var(--accent); font-size: 12px; }

/* -- agent status cards (#3343 step 9) --------------------------------------
   The message an agent identity posts when a run starts and when it ends.
   Deliberately quieter than a share card: it is a status line with a task
   link under it, not an object somebody shared. */
.mm-agentcard {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 460px; margin: 2px 0;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--mm-card);
}
.mm-agentcard-loading { border-left-color: var(--border); }
.mm-agentcard.state-finished { border-left-color: var(--ok); }
.mm-agentcard-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mm-agentcard-kicker {
  flex: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.mm-agentcard-state { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.mm-agentcard.state-finished .mm-agentcard-state { color: var(--ok); }
.mm-agentcard-hint { font-size: 12px; color: var(--text-dim); }
.mm-agentcard-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 12px; color: var(--muted);
}
.mm-agentcard-fact { white-space: nowrap; }
.mm-agentcard .mm-card { margin: 2px 0 0; }

/* -- result cards (#3345) ---------------------------------------------------- */
/* The event half of a session result: commits, a test run, a stage move. The
   left edge takes the EVIDENCE colour, so the honesty of the card is legible
   before a word of it is read. */
.mm-result {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 460px; margin: 2px 0;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--ok);
  background: var(--mm-card);
}
.mm-result:has(.mm-result-failed) { border-left-color: var(--danger); }
.mm-result:has(.mm-result-unverified) { border-left-color: var(--warn); }
.mm-result-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mm-result-kicker {
  flex: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.mm-result-headline {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  min-width: 0; overflow-wrap: anywhere;
}
.mm-result-badge {
  flex: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid currentColor; color: var(--ok);
}
.mm-result-badge.mm-result-failed { color: var(--danger); }
.mm-result-badge.mm-result-unverified { color: var(--warn); }
.mm-result-commits { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mm-result-commit { display: flex; gap: 8px; min-width: 0; font-size: 12px; }
.mm-result-sha { flex: none; font-family: var(--mono, ui-monospace, monospace); color: var(--text-dim); }
.mm-result-subject { color: var(--muted); overflow-wrap: anywhere; }
.mm-result-more { font-size: 12px; color: var(--text-dim); }
.mm-result-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 12px; color: var(--muted);
}
.mm-result-fact { overflow-wrap: anywhere; }
.mm-result .mm-card { margin: 2px 0 0; }

/* -- Activity view (#3732, approved Activity artboard) ----------------------- */
/* Needs you / Finished: card rows, a 28px icon box coloured by the kind, a
   title line, a facts line whose first word is the workspace chip. Tokens
   are the page's own — light mode needs nothing new. */
.mm-activity { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* -- Telemetry view (#3785): the portal's .wm-history panel mounted whole
   (wp-mission.css / wp-activity.css ship its rules through app.css); this
   root owns the scroll like .mmc, and the row's door is a BUTTON (the
   reader opens over the feed), so it takes the anchor's look. -------- */
.mm-telemetry {
  flex: 1; min-height: 0; overflow-y: auto; padding: 32px 36px 48px;
  font-family: var(--sans);
}
.mm-telemetry .wm-history { max-width: 1240px; margin: 0 auto; }
.mm-telemetry .wm-history-heading h2 { font-size: 19px; font-weight: 700; }
.mm-telemetry .afeed-meta {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; max-width: 100%;
  font-size: 11.5px; font-family: var(--mono); color: var(--muted);
}
.mm-telemetry .afeed-meta:hover { color: var(--accent); text-decoration: underline; }

/* -- Pins (#3802): the pane and the landing ---------------------------------
   The pane is ONE list: the pinned chat rows (roster.js renderPinned, rows
   only) stack straight onto the pinned session rows (sessionsnav.js's
   pinsOnly section) — no section gap between the two containers, which is
   the one place the gap rule above must not apply. The landing (.mm-pins)
   is the Telemetry idiom: a scrolling root at the page width, the heading
   at the page's size. Tokens only. ------------------------------------ */
.mm-pins-pane > .mm-pins-chats { display: flex; flex-direction: column; gap: 1px; }
.mm-pane-body.mm-pins-pane > * .mm-roster-sec:first-child { margin-top: 0; }
.mm-pins-pane > .mm-pins-chats:not([hidden]) + .mm-pins-sessions:not([hidden]) { margin-top: 1px; }
.mm-pins {
  flex: 1; min-height: 0; overflow-y: auto; padding: 32px 36px 48px;
  font-family: var(--sans);
}
.mm-pins h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--text); }
.mm-pins p { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.mm-act-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px; border-bottom: 1px solid var(--border);
}
.mm-act-title-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.mm-act-markall {
  margin-left: auto; border: 0; background: none; padding: 4px 8px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--text-dim); cursor: pointer;
}
.mm-act-markall:hover { background: var(--panel-2); color: var(--text); }
.mm-act-markall[hidden] { display: none; }
.mm-act {
  flex: 1; min-height: 0; overflow: auto; padding: 8px 20px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.mm-act-sec { display: flex; flex-direction: column; }
.mm-act-sec-head {
  display: flex; align-items: center;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 6px 0 4px;
}
.mm-act-n { margin-left: 6px; letter-spacing: 0; }
.mm-act-list { display: flex; flex-direction: column; gap: 6px; }
.mm-act-empty { padding: 6px 0; font-size: 12.5px; color: var(--text-dim); }
.mm-act-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--border-soft); background: var(--mm-card);
}
.mm-act-row.seen { opacity: .6; border-color: transparent; background: none; }
.mm-act-icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--text-dim); font-size: 13px; font-weight: 700;
}
.mm-act-icon.warn { color: var(--warn); background: rgba(229, 184, 79, .12); }
.mm-act-icon.ok { color: var(--ok); background: rgba(76, 201, 138, .12); }
.mm-act-icon.accent { color: var(--accent-ink); background: var(--accent-soft); }
.mm-act-icon.danger { color: var(--danger); background: rgba(255, 114, 133, .12); }
.mm-act-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-act-title {
  font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-act-title .mm-session-task { margin-right: 6px; vertical-align: 1px; cursor: default; }
.mm-act-sub {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 11.5px; color: var(--text-dim);
}
.mm-act-sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-wschip {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 7px; line-height: 16px;
}
.mm-wschip.here { color: var(--text-dim); border-style: dashed; }
.mm-act-btn {
  flex: none; font: inherit; font-size: 11.5px; font-weight: 650; padding: 4px 10px;
  border-radius: 6px; border: 1px solid var(--border); background: none;
  color: var(--text); text-decoration: none; cursor: pointer;
}
.mm-act-btn:hover { background: var(--panel-2); }
.mm-act-btn.primary { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
.mm-act-btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* -- persona-agent asks (#4084) --------------------------------------------- */
/* The same pill as an invocation's, with the ask's own state words: waiting
   states dim, on-her-Mac states accent, answered ok, everything terminal
   and unhappy stays dim. */
.mm-mention-state.state-pending_approval, .mm-mention-state.state-queued { color: var(--text-dim); }
.mm-mention-state.state-delivered, .mm-mention-state.state-running {
  border-color: var(--accent); color: var(--accent);
}
.mm-mention-state.state-answered { border-color: var(--ok); color: var(--ok); }
.mm-mention-state.state-refused, .mm-mention-state.state-withdrawn,
.mm-mention-state.state-failed, .mm-mention-state.state-over_quota,
.mm-mention-state.state-expired { color: var(--text-dim); }
.mm-bell-pop .mm-act-history { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.mm-bell-pop .mm-act-approval-wrap { min-width: 0; }
.mm-bell-pop .mm-agent-approval { overflow-wrap: anywhere; }

/* People follow the agent conversation without a functional composer. */
.mm-composer-observer {
  padding: 14px 16px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* Window spacers use measured logical row extents. Padding avoids collapsing
   margins at a materialized edge, so a row has one stable contribution. */
.mm-windowed > .mm-group { margin-top: 0; padding-top: 28px; }
.mm-windowed > .mm-group-continuation { padding-top: 10px; }
.mm-group-continuation > .avatar { visibility: hidden; }
.mm-windowed > .mm-day, .mm-windowed > .mm-new { margin: 0; padding: 12px 0 6px; }
.mm-windowed .mm-msg { min-height: 24px; box-sizing: border-box; }
.mm-chat-spacer { flex: none; min-height: 0; pointer-events: none; }
.mm-jump-bar button { font: inherit; margin-left: 8px; cursor: pointer; }

/* A release is a rail action; the dialog always rechecks its version. */
.mm-app-update { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; }
.mm-app-update[hidden] { display: none; }
.mm-app-update:not(:disabled) { animation: mm-update-fade 3s ease-in-out infinite; }
.mm-app-update:hover, .mm-app-update:focus-visible { animation: none; opacity: 1; }
@keyframes mm-update-fade { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .mm-app-update:not(:disabled) { animation: none; }
}
.mm-app-update:hover { background: var(--panel-2); }
.mm-app-update:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mm-app-update:disabled { opacity: .6; cursor: default; }
.mm-update-dialog { padding: 22px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.mm-update-dialog-version { font-size: 24px; font-weight: 650; color: var(--text); }
.mm-update-dialog-notes { margin: 18px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.mm-update-dialog-notes summary { cursor: pointer; font-weight: 600; }
.mm-update-dialog-notes > div { white-space: pre-wrap; max-height: 200px; overflow: auto; margin-top: 10px; font-size: 12px; }
.mm-update-dialog-note { color: var(--muted); }
.mm-update-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* Chat questions: one readable question and one deliberate reply path. */
/* An agent's question to a person — a chat question (questioncard.js) or a
   task question (boardquestioncard.js) — reads inline in the author's group:
   no box, one quiet "Question for you" line, answers that send on one tap,
   Reply through the composer, and the detail folded into Related work and
   context. */
.mm-qcard { display:flex; flex-direction:column; gap:8px; box-sizing:border-box; width:100%; max-width:640px; min-width:0; margin:2px 0 0; white-space:normal; overflow-wrap:anywhere; }
.mm-qcard-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; min-width:0; }
.mm-qcard-kicker { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--accent-ink); }
.mm-qcard-kicker::before { content:"?"; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1.4px solid currentColor; font-size:9.5px; font-weight:700; line-height:1; box-sizing:border-box; }
.mm-qcard-state { font-size:12px; line-height:1.5; color:var(--text-dim); }
.mm-qcard.state-escalated .mm-qcard-state { color:var(--warn); }
.mm-qcard-q { font-size:14px; font-weight:400; line-height:1.6; }
.mm-qcard.state-withdrawn .mm-qcard-q { color:var(--muted); }
.mm-qcard .mm-md > :first-child { margin-top:0; }
.mm-qcard .mm-md > :last-child { margin-bottom:0; }
.mm-qcard-why { font-size:13px; color:var(--muted); line-height:1.6; }
.mm-qcard-choices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.mm-qcard-choice { display:inline-flex; align-items:center; min-width:0; min-height:32px; padding:5px 14px; border-radius:16px; border:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; font-size:13px; font-weight:500; line-height:1.35; text-align:left; cursor:pointer; }
.mm-qcard-choice:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-soft); }
.mm-qcard-choice.is-recommended { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.mm-qcard-choice.is-recommended:hover:not(:disabled) { background:color-mix(in srgb, var(--accent) 22%, transparent); }
.mm-qcard-choice:disabled { cursor:default; opacity:.6; }
.mm-qcard-replybtn { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 8px; border:0; border-radius:8px; background:none; color:var(--text-dim); font:inherit; font-size:13px; cursor:pointer; }
.mm-qcard-replybtn svg { width:15px; height:15px; }
.mm-qcard-replybtn:first-child { margin-left:-8px; }
.mm-qcard-replybtn:hover:not(:disabled) { color:var(--text); background:var(--panel-2); }
.mm-qcard-replybtn:disabled { opacity:.6; cursor:default; }
.mm-qcard-answer { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; font-size:13px; line-height:1.6; color:var(--text-dim); }
.mm-qcard-answer-author { font-size:13px; font-weight:400; color:var(--text-dim); }
.mm-qcard-answer-text { color:var(--text); }
.mm-qcard-context summary { font-size:12px; color:var(--text-dim); cursor:pointer; }
.mm-qcard-context[open] { padding-left:10px; border-left:2px solid var(--border); }
.mm-qcard-context[open] > summary { margin-left:-10px; }
.mm-qcard-context[open] > :not(summary) { margin-top:8px; }
.mm-qcard-task { display:inline-block; font-size:13px; color:var(--accent-ink); }
.mm-qcard-hints { margin:0; font-size:13px; line-height:1.5; }
.mm-qcard-hints dt { font-weight:500; color:var(--text); }
.mm-qcard-hints dd { margin:1px 0 6px; color:var(--text-dim); }
.mm-qcard-default { font-size:12px; line-height:1.6; color:var(--text-dim); }
.mm-qcard-error { font-size:12px; line-height:1.5; color:var(--danger); }
.mm-qcard-retry { align-self:flex-start; padding:5px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.mm-qcard-choice:focus-visible, .mm-qcard-replybtn:focus-visible, .mm-qcard-context summary:focus-visible, .mm-qcard-retry:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* A phone: answers stack as full-width rows, easy to hit with a thumb. */
@media (max-width: 650px) {
  .mm-qcard-choices { flex-direction:column; align-items:stretch; }
  .mm-qcard-choice { justify-content:flex-start; min-height:44px; padding:10px 14px; border-radius:12px; font-size:14px; }
  .mm-qcard-replybtn { align-self:flex-start; min-height:40px; margin-left:-8px; }
}

/* Server-recorded assistant relay; the author remains the signed-in human. */
.mm-msg-via { display: block; font-size: 11px; line-height: 1.5; color: var(--text-dim); margin-top: 3px; }

/* A single, non-blocking specialist-DM signpost (#5121). */
.mm-contact-nudge { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 10px 20px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 12px; line-height: 1.6; }
.mm-contact-nudge[hidden], .mm-contact-link[hidden] { display: none; }
.mm-contact-link { padding: 0; border: 0; background: transparent; color: var(--accent-ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mm-contact-link:hover { color: var(--text); }
.mm-contact-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Report / Block / Blocked people (#5462). */
.mm-report, .mm-block-confirm, .mm-blocked { display: flex; flex-direction: column; gap: 12px; }
.mm-report-lead, .mm-blocked-lead { margin: 0; color: var(--text-dim); }
.mm-report-reasons { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-report-reasons legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.mm-report-reason { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; cursor: pointer; min-height: 40px; }
.mm-report-reason:hover { background: var(--panel-2); }
.mm-report-reason input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-report-note-label { font-weight: 600; }
.mm-report-note { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.mm-report-error, .mm-block-error { color: var(--danger); min-height: 1em; font-size: 13px; }
.mm-report-error:empty, .mm-block-error:empty { display: none; }
.mm-report-buttons, .mm-block-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.mm-block-effects { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mm-blocked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mm-blocked-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.mm-blocked-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mm-blocked-status:empty { display: none; }
.mm-legal-link { display: block; text-decoration: none; color: inherit; }
/* A viewer's own hide (blocked / reported) is not a warning: body text. */
.mm-moderated-warning.mm-viewer-hide { color: var(--text); }
.mm-composer-blocked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mm-composer-blocked > .btn { width: auto; flex: none; }

/* Agent chat consent notice and settings (#5482). */
/* The app never scrolls as a document (Ian, 2026-09-26: on a short Linux
   window the whole app scrolled and took the title band with it). The shell
   is exactly the window; a view taller than its area scrolls inside #mm-chat,
   and a rail with more buttons than height scrolls in place. */
html:has(#mm-shell), html:has(#mm-shell) body { height: 100%; overflow: hidden; }
html:has(#mm-shell) #mm-shell { overflow: hidden; }
#mm-shell #mm-chat { overflow: auto; }
#mm-shell #mm-rail { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
#mm-shell #mm-rail::-webkit-scrollbar { display: none; }

/* -- approval requests (C1 card · S3/N1 popovers · N1 pill) ------------------
   One structured ask (request_approval), drawn from tokens only: the amber
   caution channel (--warn / --warn-soft) marks "a person must decide", the
   accent is the Approve button and the send-back note, grey is "the plan
   changed since the ask". */
.mm-apcard { box-sizing:border-box; width:100%; max-width:560px; min-width:0; margin:8px 0 4px; border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:10px; background:var(--mm-card); white-space:normal; overflow-wrap:anywhere; }
.mm-apcard > .mm-apcard-body { padding:14px 16px 14px; }
.mm-apcard.is-loading { opacity:.85; }
.mm-apcard.state-changed { border-left-color:var(--text-dim); }
.mm-apcard-body { display:flex; flex-direction:column; gap:8px; min-width:0; }
.mm-apcard-head { display:flex; align-items:center; gap:8px; min-width:0; }
.mm-apcard-kicker { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; color:var(--warn); }
.mm-apcard.state-changed .mm-apcard-kicker { color:var(--text-dim); }
.mm-apcard-meta { margin-left:auto; font-size:12px; color:var(--text-dim); white-space:nowrap; }
.mm-apcard-title { font-size:15px; line-height:1.45; font-weight:650; color:var(--text); }
.mm-apcard-id { font-weight:500; color:var(--text-dim); }
.mm-apcard-summary { margin:0; font-size:13px; line-height:1.55; color:var(--muted); }
.mm-apcard-changed { margin:0; font-size:12.5px; line-height:1.5; color:var(--warn); } /* #7963 */
/* #8638: readable problem, outcome and proposed solution. */
.mm-apcard-solution { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.mm-apcard-section-label { margin:0; font-size:11px; font-weight:650; color:var(--muted); }
.mm-apcard-solution-text { margin:0; font-size:13.5px; line-height:1.5; color:var(--text); overflow-wrap:anywhere;
  white-space:pre-wrap; }
.mm-apcard-nosolution { margin:0; font-size:13px; font-weight:600; color:var(--warn); }
.mm-apcard-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; }
.mm-apcard-grow { flex:1; }
.mm-apcard-btn { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 14px; border:1px solid var(--border); border-radius:7px; background:var(--panel-2); color:var(--text); font:inherit; font-size:13px; font-weight:550; text-decoration:none; cursor:pointer; }
.mm-apcard-btn:hover:not(:disabled) { border-color:var(--text-dim); }
.mm-apcard-btn.primary { border-color:var(--accent-fill); background:var(--accent-fill); color:var(--on-accent); }
.mm-apcard-btn.primary:hover:not(:disabled) { filter:brightness(1.08); border-color:var(--accent-fill); }
.mm-apcard-btn.ghost { border-color:transparent; background:transparent; }
.mm-apcard-btn.small { min-height:26px; padding:0 11px; font-size:12px; }
.mm-apcard-btn:disabled { opacity:.6; cursor:default; }
.mm-apcard-wait { font-size:12px; color:var(--text-dim); }
.mm-apcard-error { margin:0; font-size:12px; line-height:1.5; color:var(--danger); }
.mm-apcard.is-collapsed { display:flex; align-items:center; gap:10px; padding:10px 14px; border-left:1px solid var(--border); font-size:13px; color:var(--muted); }
.mm-apcard.is-collapsed.state-approved .mm-apcard-mark { color:var(--ok); }
.mm-apcard.is-collapsed.state-sent_back .mm-apcard-mark { color:var(--accent-ink); }
.mm-apcard.is-collapsed.state-closed .mm-apcard-mark { color:var(--text-dim); }
.mm-apcard-mark { flex:none; display:inline-flex; }
.mm-apcard-line { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-apcard-who { color:var(--text); }
.mm-apcard-sep, .mm-apcard-time { color:var(--text-dim); }
.mm-apcard-time { flex:none; font-size:12px; }
.mm-apcard-stack { max-width:560px; }
.mm-apcard-stack > .mm-apcard { margin-bottom:0; }
.mm-apcard-reason { margin:4px 0 6px 16px; font-size:12.5px; line-height:1.5; color:var(--text-dim); }
.mm-apcard-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Approval asks belong inline with chat; the complete brief opens in Review. */
.mm-apcard.is-inline { max-width:640px; margin:2px 0 0; border:0; border-radius:0; background:transparent; }
.mm-apcard.is-inline > .mm-apcard-body { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:0 9px; padding:2px 0; }
.mm-apcard.is-inline .mm-apcard-mark { color:var(--warn); }
.mm-apcard.is-inline.state-changed .mm-apcard-mark { color:var(--text-dim); }
.mm-apcard-copy { flex:1; min-width:0; }
.mm-apcard-inline-actions { grid-column:2; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mm-apcard.is-inline .mm-apcard-title { font-size:15px; font-weight:500; line-height:1.5; }
.mm-apcard-preview { margin:3px 0 0; font-size:14px; line-height:1.5; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-apcard-review { flex:none; min-height:32px; padding:5px 14px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font:inherit; font-size:13px; font-weight:500; line-height:1.35; cursor:pointer; }
.mm-apcard-review:hover { background:var(--panel-2); border-color:var(--accent); }
.mm-apcard-review:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mm-apcard-approve { display:inline-flex; align-items:center; gap:5px; color:var(--text); }
.mm-apcard-review:disabled { opacity:.6; cursor:default; }
.mm-apcard-review:disabled:hover { background:var(--panel); border-color:var(--border); }
@media (pointer:coarse) { .mm-apcard-review { min-height:44px; min-width:44px; } }

/* The floating popover N1 opens (approvalcard.openApprovalPopover). */
.mm-appop { position:fixed; z-index:1400; box-sizing:border-box; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 36px var(--shadow, rgba(0,0,0,.35)); }
.mm-appop:focus { outline:none; }
.mm-appop-needs { width:380px; }
.mm-needs-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--warn); }
.mm-needs-head strong { font-size:13.5px; color:var(--text); }
.mm-needs-sub { font-size:12px; color:var(--text-dim); }
.mm-needs-all { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:9px 14px; border-bottom:1px solid var(--border-soft); }
.mm-needs-all-said { flex:1; min-width:0; font-size:12.5px; color:var(--text); }
.mm-needs-summary { margin:0; padding:9px 14px; border-bottom:1px solid var(--border-soft); font-size:12.5px; font-weight:550; color:var(--text); }
.mm-needs-summary:focus { outline:none; }
.mm-needs-summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.mm-needs-list { max-height:min(460px, 70vh); overflow-y:auto; }
.mm-needs-row { display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border-soft); }
.mm-needs-row:last-child { border-bottom:0; }
.mm-needs-face { flex:none; padding-top:1px; }
.mm-needs-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mm-needs-title { font-size:13px; font-weight:550; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-needs-id { font-weight:500; color:var(--text-dim); }
.mm-needs-meta { font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-needs-who { font-size:11.5px; color:var(--text-dim); } /* #6433 */
.mm-needs-changed { font-size:11.5px; color:var(--warn); } /* #7963 */
.mm-needs-actions { display:flex; gap:6px; margin-top:5px; }
.mm-needs-empty { margin:0; padding:18px 14px; font-size:12.5px; color:var(--text-dim); }

/* N1: the band's "N need you" pill, before the session hub; hidden at zero. */
#mm-needs-you { flex:none; }
#mm-needs-you[hidden] { display:none; }
.mm-needs-btn { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border:1px solid var(--mm-band-warn); border-radius:999px; background:var(--mm-band-warn-soft); color:var(--mm-band-warn); font:inherit; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; }
.mm-needs-btn:hover, .mm-needs-btn[aria-expanded="true"] { background:rgba(229, 184, 79, .26); }
.mm-needs-btn:focus-visible { outline:2px solid var(--mm-band-warn); outline-offset:2px; }

/* -- task threads (#7202, canvas T1 / A3) ---------------------------------------
   The task glyph on an accent-soft square: in the Chats row (26 px), the
   compact head (28 px) and the full head (40 px). */
.mm-row-glyph.mm-row-glyph-task {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.mm-row-glyph-task svg { stroke: currentColor; }
.mm-row-glyph-task.is-large { width: 40px; height: 40px; border-radius: 10px; }
.mm-task-text { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.mm-task-line, .mm-task-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-task-line { font-size: 13px; font-weight: 600; color: var(--text); }
.mm-task-sub { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.mm-row.active .mm-task-line { color: var(--accent-ink); }
/* The Chats list's Leave on a task row: a small word button after the
   unread badge, never over it. A pointer that can hover sees it on hover or
   focus (the ⋯'s rule); touch has no hover, so it always shows there. */
.mm-row-leave {
  flex: none; height: 20px; padding: 0 6px; border: 1px solid var(--border);
  border-radius: 6px; background: none; color: var(--text-dim);
  font: inherit; font-size: 11px; line-height: 18px; cursor: pointer;
}
.mm-row-leave:hover { background: var(--panel-2); color: var(--text); }
.mm-row-leave:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-row-leave:disabled { opacity: .45; cursor: wait; }
@media (hover: hover) and (pointer: fine) {
  .mm-row-leave { display: none; }
  .mm-row:hover .mm-row-leave, .mm-row:focus-within .mm-row-leave { display: inline-block; }
  /* In the 248 px pane Leave and ⋯ together cost the title its room, so the
     unread badge steps aside while Leave is showing: the count is for a row
     at rest, the pointer is already on this one. */
  .mm-row:hover .mm-row-leave ~ .mm-badge, .mm-row:focus-within .mm-row-leave ~ .mm-badge,
  .mm-row:hover .mm-badge:has(~ .mm-row-leave), .mm-row:focus-within .mm-badge:has(~ .mm-row-leave) { display: none; }
}
@media (pointer: coarse) { .mm-row-leave { height: 32px; padding: 0 10px; } }

/* The head (T1): glyph · title over "With <Lead>, Lead Engineer · state ·
   plan v<n>" · Open the brief · Approve · ⋯ */
.mm-conv-head.mm-conv-task { height: 64px; padding: 0 20px; gap: 10px; }
.mm-task-head { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mm-task-head-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-task-head-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-task-head.is-compact .mm-task-head-title { font-size: 14px; }
.mm-task-head-sub {
  font-size: 12.5px; font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-task-lead { color: var(--text); font-weight: 600; }
.mm-task-head-changed { font-size: 12px; color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #7963 */
.mm-task-state.tone-warn { color: var(--warn); font-weight: 650; }
.mm-task-state.tone-danger { color: var(--danger); font-weight: 650; }
.mm-task-head-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.mm-task-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.mm-task-btn:hover:not(:disabled) { border-color: var(--accent); }
.mm-task-btn.primary { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); }
.mm-task-btn:disabled { opacity: .6; cursor: wait; }
.mm-task-btn:focus-visible, .mm-task-icon:focus-visible, .mm-taskline-review:focus-visible,
.mm-briefcard-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-conv-task .mm-conv-more { flex: none; }

/* The pane head (A3): the Lead's avatar · "Talking it through with <Lead>" /
   "Also under Chats · Task <id>" · open in Chats. */
.mm-task-head.is-pane { flex-direction: column; align-items: stretch; gap: 8px; }
.mm-task-pane-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-task-pane-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.mm-task-pane-sub { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.mm-task-icon {
  flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-dim); cursor: pointer;
}
.mm-task-icon:hover { background: var(--panel-2); color: var(--text); }
.mm-task-disclosure {
  display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; max-width: 640px;
  font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text-dim);
}
.mm-task-disclosure svg { flex: none; margin-top: 2px; }
.mm-task-head.is-pane .mm-task-disclosure { margin: 0; }

/* Decision and plan lines: a group of their own at the text column. */
.mm-group-line .mm-g-avatar-gap { flex: none; width: 28px; }
.mm-taskline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
.mm-taskline-icon { flex: none; display: inline-flex; color: var(--text-dim); }
.mm-taskline.is-approved .mm-taskline-icon { color: var(--ok); }
.mm-taskline.is-sent-back .mm-taskline-icon { color: var(--danger); }
.mm-taskline.is-plan-changed .mm-taskline-icon { color: var(--accent-ink); }
.mm-taskline-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.mm-taskline-time { flex: none; font-size: 12px; color: var(--text-dim); }
.mm-taskline-review {
  flex: none; height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 7px;
  background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* The opening card: Problem · Outcome two-up, then Open the brief. */
.mm-briefcard {
  margin-top: 4px; max-width: 640px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
.mm-briefcard.is-loading { font-size: 13px; color: var(--text-dim); }
.mm-briefcard-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-briefcard-facts.is-single { grid-template-columns: minmax(0, 1fr); }
.mm-briefcard-fact { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mm-briefcard-label { font-weight: 650; }
.mm-briefcard-fact.tone-problem .mm-briefcard-label { color: var(--danger); }
.mm-briefcard-fact.tone-outcome .mm-briefcard-label { color: var(--ok); }
.mm-briefcard-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); min-width: 0; }
.mm-briefcard-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-briefcard-open {
  flex: none; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 650; cursor: pointer;
}
.mm-briefcard-open:hover { color: var(--accent-ink); text-decoration: underline; }

/* The approval reader's pane (A3): the head slot over the conversation. */
.ar-thread .mm-thread-pane-head { flex: none; }
.ar-thread .mm-thread-pane-head .mm-conv-head {
  height: auto; min-height: 52px; padding: 12px 16px; background: transparent; font-size: 13.5px; align-items: flex-start;
}
.ar-thread .mm-thread-pane-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* The pane is narrow, as the work dock is: messages take their full line. */
.ar-thread .mm-thread-pane-body .mm-msgs { padding: 8px 16px 20px; }
.ar-thread .mm-thread-pane-body .mm-msg { padding-right: 8px; }
.ar-thread .mm-thread-pane-body .mm-typing { background: linear-gradient(to bottom, transparent, var(--panel) 45%); }
.ar-thread .mm-thread-pane-body .mm-composer { margin: 10px 16px 14px; min-width: 0; }
.ar-thread .mm-thread-pane-body .mm-conv-pills, .ar-thread .mm-thread-pane-body .mm-composer-tools { flex-wrap: wrap; }
.mm-thread-pane-status { margin: 16px; font-size: 13px; color: var(--text-dim); }
/* The pane has no floating reading-day badge (canvas A3): the thread is
   short and the reader beside it already dates the decision. */
.ar-thread .mm-thread-pane-body .mm-date-badge { display: none; }
.mm-thread-pane-status.is-refused { color: var(--text); }

/* Phone and narrow: the head's buttons move to ⋯ (compact shape). */
@media (max-width: 720px) {
  .mm-conv-head.mm-conv-task { height: auto; min-height: 52px; padding: 8px 12px; }
  .mm-briefcard-facts { grid-template-columns: minmax(0, 1fr); }
}

/* -- Messages (#8291, the "People chat" canvas's C1, N1, R1) ---------------
   One chat style (2026-10-15): the pane wears the Chats pane's chrome — the
   eyebrow, the search row with its filter popover, Chats' sub-labels — and
   its rows are the Chats rows (#8293), sized by the account's sidebar
   choices like every list's. The pane body forces `display: block` on its
   children, so every hideable piece restates [hidden]. ------------------- */
.mm-pane-body.mm-messages-pane { display: flex; flex-direction: column; min-height: 100%; }
.mm-messages-pane > [hidden], .mm-messages-pane [hidden] { display: none !important; }
/* A sub-label (.mm-chats-sub) that may carry New message's "+". */
.mm-messages-pane > .mm-msgs-sec { display: flex; align-items: center; }
.mm-msgs-note { padding: 18px 10px; color: var(--text-dim); font-size: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mm-msgs-cta, .mm-msgs-retry {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.mm-msgs-cta:hover, .mm-msgs-retry:hover { border-color: var(--accent); }
/* The workspace a pinned row lives in (C1's `.ws` tag): the one element a
   Messages row has that a Chats row does not, so it is compact (inside the
   name's line, shorter than it) and gives way first — down to its first
   letter — before an agent's role and then the name are cut (its huge
   shrink factor leaves the name a sub-pixel share until the tag is at its
   floor); never more than 40% of the line nor 120px, one line, its whole
   name in the title (Ian, 2026-10-15: "Juniper Research"). */
.mm-ws-tag {
  flex: 0 10000 auto; min-width: 24px; max-width: min(40%, 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--muted); font-size: 10px; font-weight: 600; line-height: 14px;
}
.mm-messages-pane .mm-pin-unpin { opacity: 0; }
.mm-messages-pane .mm-global-pin:hover .mm-pin-unpin, .mm-messages-pane .mm-pin-unpin:focus-visible { opacity: 1; }
.mm-msgs-pill { flex: none; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--border); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mm-msgs-pill.in { border-color: var(--accent); color: var(--accent-ink); }

/* -- Chats = Rooms + Agents (#8291, C1b) ---------------------------------- */
/* The pane's eyebrow: the workspace's name over Chats, "Messages" over
   Messages (one chat style). */
:is(.mm-chats-pane, .mm-messages-pane) > .mm-pane-eyebrow { padding: 4px 10px 0; font-size: 11.5px; color: var(--text-dim); }
.mm-chats-pane > .mm-pane-eyebrow[hidden] { display: none; }
.mm-row.mm-agents-fold { color: var(--text-dim); font-size: 12.5px; padding: 8px 10px; }
.mm-row.mm-agents-fold:hover { color: var(--text); }

/* -- the conversation between two people (#8291, C1 and P2) ---------------
   Its messages read as any room's (one chat style, 2026-10-15). Its header
   is its own: the face with presence, the name with the pin and the bell
   beside it, and one line — "Active now · You both work in …". ---------- */
.mm-conv-head.mm-conv-pair { gap: 12px; min-height: 62px; }
.mm-conv-pair-avatar { position: relative; flex: none; display: inline-grid; }
.mm-conv-pair-avatar .avatar { width: 40px !important; height: 40px !important; font-size: 13px !important; border-radius: 50%; }
.mm-conv-pres { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bg); background: var(--ok); display: none; }
.mm-conv-pair-avatar[data-presence="active"] .mm-conv-pres { display: block; }
.mm-conv-pair-avatar[data-presence="away"] .mm-conv-pres { display: block; background: var(--warn); }
.mm-conv-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-conv-id > .mm-conv-title, .mm-conv-id-top > .mm-conv-title { font-size: 15px; font-weight: 700; }
.mm-conv-id-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mm-conv-id-top > .mm-conv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-conv-pair-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-conv-pin-text {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; width: auto !important;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.mm-conv-pin-text:hover { color: var(--text); border-color: var(--accent); }
.mm-conv-pin-text.on { color: var(--accent-ink); border-color: var(--accent); }

/* -- New message (#8291, N1; P3 is the phone's sheet) ---------------------- */
.mm-nm-card { --modal-w: 540px; }
.mm-nm { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 14px; overflow: hidden !important; }
.modal-card > .mm-nm:not(.mm-nm-sheet) { flex: 1 1 auto; }
.mm-nm-to {
  flex: none; display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 8px 6px; padding: 0 12px;
  border: 1px solid var(--accent); border-radius: 9px; background: var(--bg);
}
.mm-nm-to-label { color: var(--text-dim); }
.mm-nm-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 14px; }
.mm-nm-input::placeholder { color: var(--text-dim); }
.mm-nm-lists { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mm-nm-cap { padding: 12px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.mm-nm-pick, .mm-nm-action {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; width: 100%;
  border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.mm-nm-pick:hover, .mm-nm-pick:focus-visible, .mm-nm-pick.active, .mm-nm-action:hover { background: var(--accent-soft); outline: none; }
.mm-nm-pick:disabled { opacity: .55; cursor: wait; }
.mm-nm-pick .avatar { border-radius: 50%; }
.mm-nm-action { min-height: 40px; margin: 8px 0 2px; border: 1px solid var(--border); background: var(--panel-2); }
.mm-nm-action-icon { display: grid; place-items: center; color: var(--accent-ink); }
.mm-nm-text { display: flex; flex-direction: column; min-width: 0; }
.mm-nm-action .mm-nm-text { flex-direction: row; align-items: baseline; gap: 10px; }
.mm-nm-name { font-size: 14px; font-weight: 600; }
.mm-nm-ws { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-nm-more, .mm-nm-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; }
.mm-nm-retry { border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; padding: 3px 9px; }
.mm-nm-request {
  margin: 12px 0 0; padding: 14px; border-radius: 10px; border: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.mm-nm-request[hidden] { display: none; }
.mm-nm-request-head { font-size: 13.5px; font-weight: 600; }
.mm-nm-request-copy { font-size: 12.5px; color: var(--text-dim); }
.mm-nm-foot { flex: none; padding: 12px 8px 0; font-size: 12px; color: var(--text-dim); }
.mm-nm-request { flex: none; }
.mm-nm-sheet-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(4, 6, 9, .62); display: flex; align-items: flex-end; }
.mm-nm-sheet-card {
  width: 100%; height: calc(100% - 46px); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
  background: var(--panel); border-radius: 14px 14px 0 0;
}
.mm-nm-sheet-head { display: flex; align-items: center; padding: 14px 8px 8px 16px; }
.mm-nm-sheet-head h2 { flex: 1; margin: 0; text-align: center; font-size: 17px; }
.mm-nm-cancel { height: 44px; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 16px; padding: 0; }
.mm-nm-sheet-gap { width: 60px; }
.mm-nm.mm-nm-sheet { max-height: none; flex: 1; min-height: 0; padding: 0 0 12px; }
.mm-nm-sheet .mm-nm-to { margin: 4px 16px 8px; border: 0; border-radius: 10px; background: var(--panel-2); font-size: 16px; }
.mm-nm-sheet .mm-nm-pick, .mm-nm-sheet .mm-nm-action { min-height: 60px; padding: 0 16px; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); margin: 0; background: none; }
.mm-nm-sheet .mm-nm-action .mm-nm-action-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); }
.mm-nm-sheet .mm-nm-action .mm-nm-name { color: var(--accent-ink); }
.mm-nm-sheet .mm-nm-action .mm-nm-text { flex-direction: column; gap: 0; }
.mm-nm-sheet .mm-nm-name { font-size: 16px; }
.mm-nm-sheet .mm-nm-ws { font-size: 13px; }
.mm-nm-sheet .mm-nm-cap { padding: 16px 16px 6px; font-size: 12px; }
.mm-nm-sheet .mm-nm-foot { padding: 12px 16px 0; }
/* Flat: one list, no gap between the workspaces it spans. */
.mm-pins-flat .mm-pins-group + .mm-pins-group { margin-top: 0; }
.mm-pins-flat > .mm-pins-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 8px 0; font-size: 11.5px; color: var(--muted); }
.mm-pins-flat > .mm-pins-undo[hidden] { display: none; }
/* A pinned session's Unpin floats over its row's corner on hover instead of
   taking width, so the row keeps the Chats row's width. */
.mm-messages-pane .mm-global-pin { position: relative; }
.mm-messages-pane .mm-global-pin > .mm-pin-unpin { position: absolute; right: 4px; top: 4px; }
/* A row with its own ⋯ (a room's: Pin / Unpin, as in Chats) needs no second
   Unpin over it; a session's pin keeps the overlay. */
.mm-messages-pane .mm-global-pin:has(.mm-row-more) > .mm-pin-unpin { display: none; }
/* R1: a muted conversation keeps its count, grey, and never reads as unread. */
.mm-messages-pane .mm-row.muted.unread .mm-row-time { color: var(--text-dim); }
.mm-messages-pane .mm-row.muted.unread .mm-row-preview { color: var(--muted); }
.mm-messages-pane .mm-row.muted.unread :is(.mm-row-label, .mm-dm-name) { font-weight: 600; }

/* -- group chats between people (#6458) -----------------------------------
   The header's glyph is people, not a channel's # or a lock. */
.mm-row-glyph-group svg { width: 12px; height: 12px; stroke: currentColor; }
.mm-conv-head .mm-row-glyph-group svg { width: 15px; height: 15px; }
/* A start / add / leave / rename line: one centred, muted sentence with no
   avatar, no name and no message tools — the room's own events. */
.mm-group-line .mm-msg-groupline { flex: 1; }
.mm-groupline {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); text-align: center;
}
.mm-groupline-icon { flex: none; display: inline-flex; }
.mm-groupline-text { min-width: 0; overflow-wrap: anywhere; }
.mm-groupline-time { flex: none; font-size: 11.5px; opacity: .8; }
.mm-group-line:has(.mm-msg-groupline) .mm-g-avatar-gap { display: none; }
/* The group picker (js/components/grouppicker.js): the room picker's rows
   over people, a count against the cap and the picks as chips. */
.mm-gp-card { --modal-w: 460px; }
.mm-gp { display: flex; flex-direction: column; gap: 6px; }
.mm-gp-label { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.mm-gp-count { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mm-gp-count.over { color: var(--danger); font-weight: 600; }
.mm-gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-gp-chips[hidden] { display: none; }
.mm-gp-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft);
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.mm-gp-chip-x { margin-left: 6px; color: var(--text-dim); }
/* A section head inside a menu (a group's Notifications). */
.pop .mm-conv-menu-head { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.mm-gp .mm-gp-list { max-height: 300px; }
.mm-gp-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 8px; }
.mm-gp-row:hover { background: var(--panel-2); }
.mm-gp-row .avatar { border-radius: 50%; }
.mm-gp-text { display: flex; flex-direction: column; min-width: 0; }
.mm-gp-person { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-gp-ws { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-gp-foot { font-size: 12px; color: var(--text-dim); }
.mm-gp .mm-nm-cap { padding: 10px 8px 2px; }
/* The phone's sheet (P3's shape): Cancel, the title, the action. */
.mm-gp-sheet { flex: 1; min-height: 0; padding: 0 16px 12px; overflow: hidden; }
.mm-gp-sheet .mm-gp-list { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mm-gp-sheet .mm-gp-row { min-height: 56px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--border); }
.mm-gp-sheet .mm-gp-person { font-size: 16px; }
.mm-gp-sheet .mm-gp-name, .mm-gp-sheet .mm-gp-filter { font-size: 16px; }
.mm-gp-sheet-head h2 { flex: 1; }
.mm-gp-sheet-submit {
  min-width: 60px; height: 44px; border: 0; background: none; color: var(--accent-ink);
  font: inherit; font-size: 16px; font-weight: 600; text-align: right; padding: 0 8px 0 0;
}
.mm-gp-sheet-submit:disabled { color: var(--text-dim); font-weight: 400; }

/* -- people chat QA (Plan #6455) ------------------------------------------
   The QA pass's client fixes, held together so the canvas they answer to is
   one read away. */
/* A person's face (js/personface.js): round, in one of six colours from
   their id when there is no picture — the canvas's C1/R1 palette. An agent
   keeps the shared square. */
.avatar.mm-face { border-radius: 50%; }
.avatar.mm-face:not(.image-ready) { border: 0; }
.avatar.mm-face[data-face="0"]:not(.image-ready) { background: #2b3a55; color: #cfe0ff; }
.avatar.mm-face[data-face="1"]:not(.image-ready) { background: #2f4a3c; color: #c9f0d9; }
.avatar.mm-face[data-face="2"]:not(.image-ready) { background: #3a2f4f; color: #e2d4ff; }
.avatar.mm-face[data-face="3"]:not(.image-ready) { background: #3d2a2a; color: #f5d0d0; }
.avatar.mm-face[data-face="4"]:not(.image-ready) { background: #4a3526; color: #f3dcc4; }
.avatar.mm-face[data-face="5"]:not(.image-ready) { background: #26434a; color: #c6ecf0; }
:root[data-theme="light"] .avatar.mm-face[data-face="0"]:not(.image-ready) { background: #d9e4f8; color: #24407a; }
:root[data-theme="light"] .avatar.mm-face[data-face="1"]:not(.image-ready) { background: #d4ecdd; color: #22553a; }
:root[data-theme="light"] .avatar.mm-face[data-face="2"]:not(.image-ready) { background: #e5ddf6; color: #4a3577; }
:root[data-theme="light"] .avatar.mm-face[data-face="3"]:not(.image-ready) { background: #f5dada; color: #7a2e2e; }
:root[data-theme="light"] .avatar.mm-face[data-face="4"]:not(.image-ready) { background: #f3e2cf; color: #6d441f; }
:root[data-theme="light"] .avatar.mm-face[data-face="5"]:not(.image-ready) { background: #d3eaee; color: #1f5860; }
/* A request's face is the shared face (views/contactrequest.js requestFace). */
.mm-messages-pane .mm-msgs-request.active { background: var(--accent-soft); }
/* A conversation opening from Messages (people chat QA): its head at once,
   from the list's row, and its history loading beneath — never the empty
   Messages pane while the server answers. */
.mm-conv-pending { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mm-conv-pending > .mm-chat-loading { flex: 1; }
/* The header's people: whole faces, ringed, nothing cut at the edge. */
.mm-conv-stack { flex: none; padding: 2px; }
.mm-conv-stack .mm-person-trigger + .mm-person-trigger { margin-left: -4px; }
/* A conversation that cannot open: one sentence and the way back. */
.mm-conv-unavailable { margin: 72px auto; max-width: 420px; padding: 0 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
.mm-conv-unavailable p { margin: 0 0 12px; color: var(--text); font-size: 15px; }
/* "You blocked Chloe. [Unblock]" — one bar, the sentence and its way out. */
.mm-composer.mm-composer-blocked { flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
/* "You can't reply to this conversation" in place of the composer. */
.mm-composer-readonly { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
/* Block and report: the dialog's controls in the app's own colours. */
.mm-report-reason input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--muted); border-radius: 50%; background: var(--bg); display: grid; place-items: center; cursor: pointer;
}
.mm-report-reason input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); transform: scale(0); transition: transform .12s; }
.mm-report-reason input[type="radio"]:checked { border-color: var(--accent-fill); }
.mm-report-reason input[type="radio"]:checked::before { transform: scale(1); }
.mm-report-note {
  min-height: 72px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13.5px; line-height: 1.45;
}
.mm-report-note::placeholder { color: var(--text-dim); }
.mm-report-note:focus { outline: none; border-color: var(--accent); }
/* A workspace room's header at 1280 (people chat QA): its pills never wrap,
   and a narrow header keeps the pin and Search as icons. */
.mm-conv-head:not(.mm-conv-agent) { container-type: inline-size; }
.mm-conv-pill, .mm-conv-details-btn { white-space: nowrap; }
@container (max-width: 1080px) {
  .mm-conv-head:not(.mm-conv-people) :is(.mm-conv-pin-text, .mm-search-pill) span { display: none; }
  .mm-conv-head:not(.mm-conv-people) .mm-conv-pin-text { width: 30px !important; padding: 0; justify-content: center; }
}
/* New message: about five people above the request box until an email is
   typed — the box is one line and its form until then. */
.mm-nm-request.compact { padding: 10px 14px; gap: 8px; }

/* Chat lists, Signal-sized (Ian, 2026-10-15): a wider list (#mm-pane 340px),
   a 40px face column for every row kind so names line up, a 15px name line
   and a 13px two-line preview tight under it. Messages and a workspace's
   Chats share these rows. */
#mm-pane :is(.mm-chats-pane, .mm-messages-pane) .mm-row:not(.mm-agents-fold) { font-size: 15px; gap: 8px; padding: 8px 10px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-dm-avatar { width: 40px; height: 40px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-glyph { width: 40px; font-size: 18px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-glyph-lock svg { width: 16px; height: 16px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-glyph.mm-row-glyph-task { width: 40px; height: 40px; border-radius: 10px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-glyph-task svg { width: 18px; height: 18px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-preview { font-size: 13px; line-height: 17px; }
:is(.mm-chats-pane, .mm-messages-pane) .mm-row-time { font-size: 12px; }

/* A person's face inside the presence ring (.mm-pav, presence.css: 32%
   corners) is a rounded square on the same curve, never a circle in a
   square — rows, requests and the conversation header alike. Rooms and
   group chats wear round faces with no ring; agents keep their square. */
.mm-pav.person > .mm-pav-face, .mm-pav.person > .mm-pav-face img { border-radius: 28%; }
/* The phone's people lists (people chat: iOS matches desktop, 2026-10-16) —
   New message's and New group's sheets, and the members in a room's or a
   group's details — wear the same ringed face; groups stay round. */
:is(.mm-nm-sheet .mm-nm-pick, .mm-gp-sheet .mm-gp-row, .mm-conv-details-member) > .mm-pav { padding: 3px; }

.mm-room-face { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.mm-room-face > .mm-face { border-radius: 50%; }
.mm-room-face-lock {
  position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center;
  width: 15px; height: 15px; border: 1.5px solid var(--panel); border-radius: 50%;
  background: var(--panel-2); color: var(--text-dim);
}
/* A group chat's two-heads badge (#8558): the lock's corner and disc, in the
   AI mark's colours (.mm-dm-agent-mark), so both badges read as one system.
   The header sits on --bg, so its outline matches there, as the AI mark's
   does in an agent's header (presence.css). */
.mm-group-mark {
  position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center;
  width: 15px; height: 15px; border: 1.5px solid var(--panel); border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent);
}
.mm-conv-head .mm-group-mark { border-color: var(--bg); }
:is(.mm-chats-pane, .mm-messages-pane) .mm-msgs-request .mm-dm-avatar { width: 40px; height: 40px; }

/* A quiet time beside each author group; individual times reveal on hover
   or keyboard focus and retain the exact-time dialog. */

/* The pane's top line (Ian, 2026-10-15): the pane's name, and at the right
   the compose button — New message in Messages, Start a conversation in a
   workspace's Chats — in place of a "+" on a section head. */
:is(.mm-chats-pane, .mm-messages-pane) > .mm-pane-eyebrow { display: flex; align-items: center; gap: 8px; }
.mm-pane-eyebrow-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-pane-compose {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer;
}
.mm-pane-compose svg { width: 19px; height: 19px; }
.mm-pane-compose:hover { background: var(--panel-2); }
.mm-pane-compose:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-pane-compose[hidden] { display: none; }
/* "Chats 4" with its chevron at the right, aligned with the rows. */
.mm-roster-head.mm-pane-head { margin-left: 0; padding: 8px 10px; gap: 6px; }
.mm-roster-head.mm-pane-head > .mm-pane-head-title { margin-left: 0; }
.mm-roster-head.mm-pane-head > .mm-roster-chevron { margin-left: auto; }
.mm-roster-head.mm-pane-head > .mm-roster-chevron > .mm-roster-head-label { display: none; }
/* Muted: a small bell beside the name. */
.mm-row-top > .mm-row-muted-wrap { flex: none; display: inline-flex; align-self: center; color: var(--text-dim); }
.mm-row-top:has(> .mm-row-muted-wrap) > :is(.mm-row-label, .mm-task-line) { flex: 0 1 auto; }

/* People conversations' header actions (Ian, 2026-10-15): the pin, the bell
   and ⋯ together at the far right, icon-sized. */
.mm-conv-head > .mm-conv-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.mm-conv-actions > :is(.mm-conv-pin, .mm-conv-mute, .mm-conv-more) {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer;
}
.mm-conv-actions > :is(.mm-conv-pin, .mm-conv-mute, .mm-conv-more):hover { background: var(--panel-2); color: var(--text); }
.mm-conv-actions > .mm-conv-pin.on, .mm-conv-actions > .mm-conv-mute.on { color: var(--accent-ink); }
.mm-conv-group-face > .mm-face { border-radius: 50%; }
.mm-conv-group .mm-conv-details-btn { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.mm-conv-group .mm-conv-details-btn:hover { color: var(--text); text-decoration: underline; }

/* A workspace room's header (Ian, 2026-10-15) takes the people headers'
   layout: the room's face (its lock in the corner when private), the name
   over ONE line — the topic, then who is in it (opens the members) — and
   search, pin, bell and ⋯ together at the right. */
.mm-conv-room-face { position: relative; }
.mm-conv-sub-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.mm-conv-sub-line > .mm-conv-topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; font-style: normal; }
.mm-conv-sub-line > .mm-conv-details-btn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.mm-conv-sub-line > .mm-conv-details-btn:hover { color: var(--text); text-decoration: underline; }
.mm-conv-actions .mm-conv-pills { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.mm-conv-actions .mm-search-pill {
  display: inline-grid; place-items: center; width: 32px; height: 32px; min-width: 0; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--text-dim);
}
.mm-conv-actions .mm-search-pill:hover { background: var(--panel-2); color: var(--text); }
.mm-conv-actions .mm-search-pill > span { display: none; }
/* The phone's compact room header (people chat: iOS matches desktop,
   2026-10-16): the same face and name, over one line cut to the width; name
   and line are one button that opens the room's details. */
.mm-conv-id.mm-conv-id-details {
  padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.mm-conv-id-details > .mm-conv-sub-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A narrow window keeps the list's old 248px — the 340px list is for room
   to spare: at the 980px desktop minimum it would leave the conversation
   584px, and an agent's header cuts its asker's name below that — and below
   720px the pane is 210px, as before. */
@media (min-width: 721px) and (max-width: 1100px) {
  #mm-pane { width: 248px; }
}

/* Compact account menu (#8857). Healthy diagnostics live in the footer. */
.pop.mm-user-menu { background: var(--panel); width: 302px; min-width: 0; max-width: calc(100vw - 20px); border-radius: 12px; padding: 7px; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 40px var(--shadow); }
.pop .mm-menu-identity { display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px 9px; }
.mm-menu-identity .avatar { border-radius: 50%; flex: none; margin-top: 2px; }
.mm-menu-identity-main { min-width: 0; flex: 1; }
.pop .mm-menu-who-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pop .mm-menu-who-sub { color: var(--muted); font-size: 11.5px; }
.mm-menu-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 7px; }
.mm-menu-plan { border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font: inherit; font-size: 10.5px; border-radius: 4px; padding: 1px 6px; cursor: pointer; }
.mm-menu-edit { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 11px; cursor: pointer; }
.pop .mm-menu-away { width: auto; max-width: calc(100% - 16px); min-height: 0; margin: 0 8px 10px; padding: 5px 8px; background: var(--panel-2); border-radius: 5px; font-size: 11.5px; }
.pop .mm-menu-away-note { display: none; }
.pop.mm-user-menu .pop-item { min-height: 36px; padding: 8px 10px; font-size: 13px; line-height: 20px; border-radius: 6px; }
.pop.mm-user-menu .pop-item:hover, .pop.mm-user-menu .pop-item:focus-visible { background: var(--panel-2); }
.pop.mm-user-menu .mm-menu-away:hover, .pop.mm-user-menu .mm-menu-away:focus-visible { background: var(--accent-soft); }
.pop.mm-user-menu .pop-item:focus-visible { outline-offset: -2px; }
.pop.mm-user-menu .pop-sep { margin: 5px 3px; }
.pop .mm-menu-action { display: flex; gap: 11px; align-items: center; width: 100%; }
.pop.mm-user-menu .mm-menu-action { justify-content: flex-start; }
.pop.mm-user-menu .mm-menu-action > span:first-of-type { flex: 1; min-width: 0; }
.mm-menu-action > svg, .pop .mm-menu-bridge > svg { width: 16px; height: 16px; flex: none; color: var(--muted); stroke-width: 1.7; }
.pop .mm-menu-dots, .pop .mm-menu-more { display: none; }
.pop .mm-menu-bridge { gap: 11px; }
.pop .mm-menu-count { font-size: 11px; color: var(--muted); }
.mm-menu-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding: 9px 10px 3px; margin-top: 5px; }
.mm-menu-footer button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 10.5px; cursor: pointer; padding: 3px 0; }
.mm-menu-computer { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mm-menu-computer svg { width: 12px; height: 12px; }
.mm-menu-computer .mm-menu-away-dot { width: 6px; height: 6px; }
.mm-menu-action-meta { margin-left: auto; color: var(--muted); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-menu-action-meta.needs-attention { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 4px; padding: 2px 5px; }
.mm-menu-footer button:hover, .mm-menu-edit:hover { color: var(--accent-ink); text-decoration: underline; }
.mm-menu-plan:hover { border-color: var(--accent-ink); }
.mm-menu-dialog .pop-item { display: flex; gap: 10px; width: 100%; text-align: left; color: var(--text); font: inherit; font-size: 13px; text-decoration: none; border: 0; background: none; padding: 12px 8px; border-radius: 5px; cursor: pointer; }
.mm-menu-dialog .pop-item:hover { background: var(--panel-2); }
.mm-user-menu button:focus-visible, .mm-menu-dialog :is(button,a):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media(pointer: coarse) { .pop.mm-user-menu .pop-item, .mm-menu-dialog .pop-item { min-height: 44px; } .mm-menu-footer button, .mm-menu-edit { min-height: 34px; } }

.pop .mm-menu-away.has-error { flex-wrap: wrap; }
.pop .mm-menu-away.has-error .mm-menu-away-note { display: block; flex-basis: 100%; margin-left: 17px; color: var(--danger); }