/* 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. */ :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 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 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%; } /* -- 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). */ #mm-shell { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; } /* -- 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(--panel); border-bottom: 1px solid var(--border); user-select: none; -webkit-user-select: none; } .mm-tb-pad { width: 0; flex: none; } /* Desktop shell (#3339): data-shell on → 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 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; } .mm-tb-space { flex: 1; min-width: 16px; } .mm-tb-app { flex: none; font-size: 12px; color: var(--text-dim); } #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, approved Activity artboard; #3779 on the rail; #3985 the artboard's DOT restored) ------------------------------------ */ /* The Notifications destination is a plain .mm-rail-btn (the rail block below owns its box, its hover, its position and its .active) — the id rules only say what the bell ADDS. Since #3985 that is one thing: a dot on the corner while an unread row belongs to no workspace, so it can be counted on no other icon. `.on` and the `.cnt` slot went with the count. The dot is a state, not a number: the view says what it is. */ #mm-bell.dot { color: var(--text); } #mm-bell .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); box-sizing: border-box; } #mm-bell .dot[hidden] { display: none; } /* -- the workspace switcher (#3737, direction A; #3779 the rail's tile) ----- */ /* The button is the rail's workspace tile (RailConcept.dc.html): the 32px tile with the count of what needs you ELSEWHERE on its corner (the open workspace is the bell's business) and an up-down chevron under it. */ .mm-ws-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 3px 1px; box-sizing: border-box; border: 0; border-radius: 10px; background: none; color: var(--text-dim); font: inherit; cursor: pointer; } .mm-ws-btn:hover { background: var(--panel-2); color: var(--text); } .mm-ws-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mm-ws-cnt { position: absolute; top: -2px; right: -2px; 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; box-sizing: border-box; box-shadow: 0 0 0 2px var(--panel); } .mm-ws-cnt[hidden] { display: none; } .mm-ws-caret { flex: none; color: var(--text-dim); display: inline-flex; } /* 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 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; } .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); } .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: 8px; padding: 10px 12px; width: 280px; } .mm-invite-label { font-size: 12px; font-weight: 600; color: var(--text); } .mm-invite-row { display: flex; gap: 6px; } .mm-invite-row .mm-invite-email { flex: 1; min-width: 0; } .mm-invite-role { flex: none; max-width: 130px; } .mm-invite-hint { font-size: 11.5px; line-height: 1.35; color: var(--text-dim); } /* -- 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 reserved top under the traffic lights — desktop only, .mm-rail-top] · tile · rule · destinations · rule · the admin group (the cog its last button, #3783) · space · the person. 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::after { content: ""; position: absolute; top: var(--mm-rail-top-h, 0px); right: 0; bottom: 0; width: 1px; background: var(--border); pointer-events: none; } /* The reserved top (#3801): an EMPTY element — the only thing the shell can mark as a drag surface (never a button) — under the lights, so nothing sits beneath them; -10px eats the rail's own top padding and 40 + the 8px gap puts the tile at 48px from the window's top, where it was (38 + 10); the rule is notched from 38px, the strip's height. The web build has no lights: display: none, not height: 0 — the gap would leave an 8px phantom. Every shell stamps data-shell, so an OLD shell reserves too (it just cannot drag by it). */ .mm-rail-top { display: none; } :root[data-shell="my-maestro"] #mm-rail { --mm-rail-top-h: 38px; } :root[data-shell="my-maestro"] .mm-rail-top { display: block; flex: none; width: 100%; height: 40px; margin-top: -10px; user-select: none; -webkit-user-select: none; } /* Native full screen (#3850): the lights hide, so the band collapses — the reserved top goes display: none (the web build's shape: the rail's own 10px padding puts the tile at the top) and the right rule runs from 0. The shell stamps data-shell-fullscreen on while the window is full screen and removes it on exit (fullscreen.rs, through the hook shell_init.js installs); the page calls nothing, and an old shell never stamps it, so the band stays. */ :root[data-shell="my-maestro"][data-shell-fullscreen] #mm-rail { --mm-rail-top-h: 0px; } :root[data-shell="my-maestro"][data-shell-fullscreen] .mm-rail-top { display: none; } #mm-rail #mm-workspace { flex: none; display: inline-flex; } .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; } #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-workspace:empty + .mm-rail-sep, #mm-rail-dest[hidden] ~ .mm-rail-sep { display: none; } /* 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 list pane (#3779, #3780 — one pane per rail id): 248px per the artboard, hidden — the width going to #mm-chat — when no pane is registered for the active rail id. */ #mm-pane { grid-column: 2; grid-row: 2; width: 248px; 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; 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. */ .pop.mm-user-menu { min-width: 248px; max-width: 300px; } .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%; } .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; } .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); } .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; } /* Persona rows (#3852): the roles pinned above the list — icon · name · a live dot when a session of the role is running · a dim note on a filing persona when the workspace has no Intake board. A hairline under the group separates the roles from the sessions they start. */ .mm-personas { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .mm-row.mm-persona-row { align-items: center; padding-top: 5px; padding-bottom: 5px; } .mm-persona-icon { flex: none; width: 18px; text-align: center; font-size: 13px; line-height: 1; } .mm-persona-row .mm-row-label { font-weight: 550; } .mm-persona-sub { flex: none; font-size: 10.5px; color: var(--text-dim); } .mm-personas-note { padding: 4px 10px; font-size: 11.5px; color: var(--text-dim); } .mm-persona-brief-text { white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.5; max-height: 50vh; overflow: auto; padding: 10px 12px; margin: 8px 0 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; } /* 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; } /* One line per session (#3642): dot · task badge · subject · waiting badge · the hover actions. The tooltip carries the rest. */ /* (.mm-row, declared below, also sets these — the compound selector wins.) */ .mm-row.mm-session-row { align-items: center; padding-top: 5px; padding-bottom: 5px; } .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, neutral 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.4; letter-spacing: 0; color: var(--text-dim); background: var(--panel-2); border: 0; border-radius: 4px; padding: 1px 5px; cursor: pointer; } .mm-session-task:hover { color: var(--text); } .mm-session-task.done { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } /* "waiting" — only while a permission is parked; the warn token the dot uses. */ .mm-session-waiting-badge { flex: none; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--warn, #b45309); border: 1px solid var(--warn, #b45309); border-radius: 999px; padding: 0 6px; } /* "working" (#3718) — the SAME slot, while the host says the turn is running and nothing is parked. The waiting badge's metrics, deliberately not its voice: dim, no border, no uppercase, normal weight. A turn running is the ordinary case, and the dot beside it already carries the colour; only a permission needs to shout. */ .mm-session-working-badge { flex: none; font-size: 10px; font-weight: 400; letter-spacing: .04em; color: var(--text-dim); border-radius: 999px; padding: 0 6px; } .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) ------------------------------------------------ .mm-dmp-agent is shared: the picker badges an agent member with it, and so does the sidebar's Direct-messages row (#3618 follow-up) — one badge, so an agent reads the same wherever it appears. */ .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