/* Presence — the agent presence redesign (docs/design/agent-presence/
   mockup.html). ONE avatar ring (js/components/presence.js) shared by an
   Agent's chat header and the chat sidebar, one colour per state, and the
   account's appearance choices (js/chatappearance.js) read off the root:
     data-mm-sidebar-status  border (default) | dot
     data-mm-sidebar-rows    compact (default) | two
     data-mm-header-bar      on (default) | off
   Reduced motion stops every animation; the colours stay. */

:root, :root[data-theme="dark"] {
  --mm-p-starting: #3fc6d9;
  --mm-prov-anthropic: #d97757; --mm-prov-openai: #e6eaf2; --mm-prov-google: #5b9bff;
  --mm-prov-zai: #9b7bff; --mm-prov-xai: #cfd4dc; --mm-prov-unknown: #7e8798; --mm-prov-ink: #0f131a;
}
:root[data-theme="light"] {
  --mm-p-starting: #0a8196;
  --mm-prov-anthropic: #c96442; --mm-prov-openai: #161b25; --mm-prov-google: #2f6fe0;
  --mm-prov-zai: #7c4dff; --mm-prov-xai: #4b5563; --mm-prov-unknown: #8a93a3; --mm-prov-ink: #ffffff;
}
:root {
  --mm-p-working: var(--accent); --mm-p-ready: var(--ok); --mm-p-waiting: var(--warn);
  --mm-p-needs: var(--danger); --mm-p-asleep: var(--review); --mm-p-offline: var(--text-dim);
  --mm-p-away: var(--warn);
}

/* One colour per state, wherever the state is written. */
[data-presence="working"], .mm-chat-agent-status[data-state="working"] { --pc: var(--mm-p-working); }
[data-presence="ready"], .mm-chat-agent-status[data-state="ready"] { --pc: var(--mm-p-ready); }
[data-presence="waiting"], .mm-chat-agent-status[data-state="waiting"] { --pc: var(--mm-p-waiting); }
[data-presence="needs"], .mm-chat-agent-status[data-state="needs"] { --pc: var(--mm-p-needs); }
[data-presence="starting"], .mm-chat-agent-status[data-state="starting"] { --pc: var(--mm-p-starting); }
[data-presence="asleep"], .mm-chat-agent-status[data-state="asleep"] { --pc: var(--mm-p-asleep); }
[data-presence="offline"], .mm-chat-agent-status[data-state="offline"] { --pc: var(--mm-p-offline); }
[data-presence="away"] { --pc: var(--mm-p-away); }

/* -- the avatar ring --------------------------------------------------------- */
.mm-pav { position: relative; display: inline-grid; place-items: center; flex: none; padding: 4px; border-radius: 32%; }
.mm-pav > .mm-pav-face { position: relative; z-index: 1; transition: filter .3s, opacity .3s; }
.mm-pav-ring, .mm-pav-ping { position: absolute; inset: 0; border-radius: 32%; pointer-events: none; }
.mm-pav-ring {
  padding: 2px; background: var(--pc);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.mm-pav-ping { border: 2px solid var(--pc); opacity: 0; }
.mm-pav-zz { position: absolute; right: -13px; top: -9px; width: 26px; height: 24px; z-index: 2; pointer-events: none; }
.mm-pav-zz b { position: absolute; opacity: 0; color: var(--mm-p-asleep); font-weight: 900; line-height: 1; }
.mm-pav-zz b:nth-child(1) { left: 0; bottom: 0; font-size: 10px; }
.mm-pav-zz b:nth-child(2) { left: 7px; bottom: 7px; font-size: 13px; animation-delay: 1s; }
.mm-pav-zz b:nth-child(3) { left: 15px; bottom: 14px; font-size: 16px; animation-delay: 2s; }

/* working — the border breathes, slow and soft (slower in the list) */
.mm-pav[data-presence="working"] .mm-pav-ring { animation: mm-pav-breathe 2.6s ease-in-out infinite; }
.mm-dm-avatar .mm-pav[data-presence="working"] .mm-pav-ring { animation-duration: 3.4s; }
@keyframes mm-pav-breathe { 0%, 100% { opacity: .55; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 4px var(--pc)); } }
/* waiting on you (amber) and needs you (red) — the same two ripples */
.mm-pav:is([data-presence="waiting"], [data-presence="needs"]) .mm-pav-ring { filter: drop-shadow(0 0 3px var(--pc)); }
.mm-pav:is([data-presence="waiting"], [data-presence="needs"]) .mm-pav-ping { animation: mm-pav-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.mm-pav:is([data-presence="waiting"], [data-presence="needs"]) .mm-pav-ping + .mm-pav-ping { animation-delay: .9s; }
@keyframes mm-pav-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
/* starting / waking — a dashed ring slowly turning */
@property --mm-pav-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mm-pav[data-presence="starting"] .mm-pav-ring {
  background: repeating-conic-gradient(from var(--mm-pav-a, 0deg), var(--pc) 0 18deg, transparent 18deg 36deg);
  animation: mm-pav-orbit 3s linear infinite;
}
@keyframes mm-pav-orbit { to { --mm-pav-a: 360deg; } }
/* asleep — dimmed; z z Z in the open chat, in the list only on row hover */
.mm-pav[data-presence="asleep"] .mm-pav-ring { opacity: .55; }
.mm-pav[data-presence="asleep"] > .mm-pav-face { filter: saturate(.35) brightness(.8); }
.mm-pav[data-presence="asleep"] .mm-pav-zz b { animation: mm-pav-zzz 3s ease-in infinite; }
.mm-dm-avatar .mm-pav-zz { right: -15px; top: -12px; transform: scale(.75); }
.mm-dm-avatar .mm-pav[data-presence="asleep"] .mm-pav-zz b { animation: none; }
.mm-row[data-dm-row]:hover .mm-dm-avatar .mm-pav[data-presence="asleep"] .mm-pav-zz b { animation: mm-pav-zzz 3s ease-in infinite; }
.mm-row[data-dm-row]:hover .mm-dm-avatar .mm-pav[data-presence="asleep"] .mm-pav-zz b:nth-child(2) { animation-delay: 1s; }
.mm-row[data-dm-row]:hover .mm-dm-avatar .mm-pav[data-presence="asleep"] .mm-pav-zz b:nth-child(3) { animation-delay: 2s; }
@keyframes mm-pav-zzz { 0% { opacity: 0; transform: translate(0, 4px) scale(.6); } 25% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; transform: translate(6px, -8px) scale(1.1); } }
/* offline — its computer is off: grey, still, face greyscale */
.mm-pav[data-presence="offline"] .mm-pav-ring { opacity: .5; }
.mm-pav[data-presence="offline"] > .mm-pav-face { filter: grayscale(1); opacity: .6; }
/* people: green Active, amber hollow Away (online, nobody at a device), grey
   Offline (no connection). Away keeps the face — the person is only away. */
.mm-pav.person[data-presence="offline"] > .mm-pav-face { filter: saturate(.5); opacity: .85; }
.mm-pav[data-presence="away"] .mm-pav-ring { opacity: .7; }
.mm-pav[data-presence="away"] > .mm-pav-face { filter: saturate(.8); }

/* "Runs on this Mac": a still laptop badge on the avatar's top-left corner
   (AI tag bottom-right, zzZ top-right), the same in Border and Dot mode. */
.mm-pav-local { display: none; position: absolute; left: -5px; top: -5px; z-index: 4; width: 15px; height: 15px;
  place-items: center; border-radius: 5px; border: 1.5px solid var(--panel); background: var(--panel-2); color: var(--text);
  pointer-events: auto; }
.mm-pav[data-local="true"] > .mm-pav-local { display: grid; }
.mm-pav-local .mm-icon, .mm-pav-local svg { width: 10px; height: 10px; }
.mm-chat-agent-avatar .mm-pav-local { width: 19px; height: 19px; left: -2px; top: -2px; border-color: var(--bg); }
.mm-chat-agent-avatar .mm-pav-local svg { width: 13px; height: 13px; }

/* -- the chat sidebar (views/roster.js) ------------------------------------------ */
.mm-dm-avatar { width: auto; height: auto; border-radius: 9px; }
.mm-dm-avatar > .mm-pav { padding: 3px; }
.mm-row[data-dm-row] { gap: 8px; padding-top: 4px; padding-bottom: 4px; }
.mm-dm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mm-dm-text > .mm-row-label { flex: none; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* The name keeps its width and the role gives way first (#8291: "Ell…
   Project Manager" read as nobody); a name longer than the row still ends in an ellipsis. */
.mm-dm-name { flex: 0 0 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-dm-role { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim); font-size: 12px; font-weight: 400; }
.mm-dm-sub { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: 400; }
:root[data-mm-sidebar-rows="two"] .mm-dm-sub { display: block; }
/* #8293: a row with the latest message keeps its status line hidden — the
   preview is line two, and a working agent's sentence takes it over there. */
:root[data-mm-sidebar-rows="two"] .mm-dm-text.has-preview > .mm-dm-sub { display: none; }
:root[data-mm-sidebar-rows="two"] .mm-row[data-dm-row] { padding-top: 5px; padding-bottom: 5px; }
.mm-dm-word { color: var(--pc); font-weight: 600; }
.mm-dm-doing:not(:empty)::before { content: " · "; color: var(--text-dim); font-weight: 400; }
/* Attention rows get a faint tinted band so they stand out in a long list. */
.mm-row[data-dm-row][data-presence="waiting"]:not(.active):not(:hover) { background: linear-gradient(90deg, var(--warn-soft), transparent 70%); }
.mm-row[data-dm-row][data-presence="needs"]:not(.active):not(:hover) { background: linear-gradient(90deg, var(--danger-soft), transparent 70%); }

/* Border (default): the ring is the status, the dot is not drawn. */
:root:not([data-mm-sidebar-status="dot"]) .mm-row[data-dm-row] > .mm-dm-dot { display: none; }
/* Dot: today's dot left of the avatar in the new colours, and no ring. */
:root[data-mm-sidebar-status="dot"] .mm-dm-avatar > .mm-pav { padding: 0; }
:root[data-mm-sidebar-status="dot"] .mm-dm-avatar .mm-pav :is(.mm-pav-ring, .mm-pav-ping, .mm-pav-zz) { display: none; }
:root[data-mm-sidebar-status="dot"] .mm-dm-avatar .mm-pav > .mm-pav-face { filter: none; opacity: 1; }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence] > .mm-dm-dot:not(.local) { border-color: var(--pc); background: var(--pc); }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence] > .mm-dm-dot.local { color: var(--pc); }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence="offline"] > .mm-dm-dot:not(.local) { background: none; border-color: var(--text-dim); }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence="away"] > .mm-dm-dot:not(.local) { background: none; border-color: var(--pc); }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence="working"] > .mm-dm-dot { animation: mm-dot-glow 2.6s ease-in-out infinite; }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row][data-presence="starting"] > .mm-dm-dot { animation: mm-dot-glow 1.2s ease-in-out infinite; }
:root[data-mm-sidebar-status="dot"] .mm-row[data-dm-row]:is([data-presence="waiting"], [data-presence="needs"]) > .mm-dm-dot:not(.local) { animation: mm-dot-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes mm-dot-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; box-shadow: 0 0 6px var(--pc); } }
@keyframes mm-dot-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 80%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* Working, in the chat lists (DM rows and Team activity): the account's
   "Working animation" choice (data-mm-working). Subtle is the original fade
   above; Sweep (the default, also when the attribute is absent) sends an arc
   round the ring; Breathe tints the picture blue and pulses a glow; Bold is
   a thick bright ring with a strong glow. The ring is a masked outline, so
   the glow and the tint ride the two ping layers, which working never uses
   otherwise. The chat header keeps the subtle fade. */
:is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ping { opacity: 0; border: 0; animation: none; }
:root:not([data-mm-working="subtle"], [data-mm-working="breathe"], [data-mm-working="bold"])
  :is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ring {
  background: conic-gradient(from var(--mm-pav-a, 0deg), color-mix(in srgb, var(--pc) 25%, transparent) 0 55%, var(--pc) 85%,
    color-mix(in srgb, var(--pc) 35%, #fff) 100%);
  opacity: 1; filter: none; animation: mm-pav-orbit 2.4s linear infinite;
}
:root:is([data-mm-working="breathe"], [data-mm-working="bold"])
  :is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ping:not(.mm-pav-ping + .mm-pav-ping) {
  opacity: 1; animation: mm-pav-glow 1.9s ease-in-out infinite;
}
:root[data-mm-working="breathe"] :is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ring {
  animation: mm-pav-strong 1.9s ease-in-out infinite; filter: none;
}
:root[data-mm-working="breathe"] :is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ping + .mm-pav-ping {
  opacity: 1; inset: 3px; z-index: 2; border-radius: 28%; background: color-mix(in srgb, var(--pc) 42%, transparent);
}
:root[data-mm-working="bold"] :is(.mm-dm-avatar, .mm-team-activity-row) .mm-pav[data-presence="working"] .mm-pav-ring {
  padding: 3px; inset: -1px; background: color-mix(in srgb, var(--pc) 70%, #fff); filter: none;
  animation: mm-pav-strong 1.8s ease-in-out infinite;
}
@keyframes mm-pav-strong { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mm-pav-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 9px 2px color-mix(in srgb, var(--pc) 75%, transparent); } }
/* Dot mode: a dot cannot sweep or tint, so every choice but Subtle is the
   strong dot pulse. */
:root[data-mm-sidebar-status="dot"]:not([data-mm-working="subtle"]) :is(.mm-row[data-dm-row], .mm-team-activity-body .mm-team-activity-row)[data-presence="working"] > .mm-dm-dot {
  animation: mm-dot-strong 1.8s ease-in-out infinite;
}
@keyframes mm-dot-strong { 0%, 100% { opacity: .35; box-shadow: none; }
  50% { opacity: 1; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--pc) 80%, transparent); } }

/* Team activity's inline section (mobile) follows the same sidebar choices:
   one line unless "Two lines", and Dot draws today's dot, not the ring. The
   desktop popover keeps its full two-line rows and the ring. */
.mm-team-activity-row > .mm-dm-dot { display: none; }
:root:not([data-mm-sidebar-rows="two"]) .mm-team-activity-body .mm-team-activity-line { display: none; }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-team-activity-row > .mm-dm-dot { display: block; border-color: var(--pc); background: var(--pc); }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-team-activity-row[data-presence="offline"] > .mm-dm-dot { background: none; border-color: var(--text-dim); }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-team-activity-row[data-presence="working"] > .mm-dm-dot { animation: mm-dot-glow 2.6s ease-in-out infinite; }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-team-activity-row[data-presence="starting"] > .mm-dm-dot { animation: mm-dot-glow 1.2s ease-in-out infinite; }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-team-activity-row:is([data-presence="waiting"], [data-presence="needs"]) > .mm-dm-dot { animation: mm-dot-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-pav :is(.mm-pav-ring, .mm-pav-ping, .mm-pav-zz) { display: none; }
:root[data-mm-sidebar-status="dot"] .mm-team-activity-body .mm-pav > .mm-pav-face { filter: none; opacity: 1; }

/* -- an Agent's chat header (components/agentchatheader.js) ---------------------- */
.mm-conv-agent > .mm-pav { flex: none; padding: 4px; }
.mm-chat-agent-avatar .mm-dm-agent-mark { right: -2px; bottom: -1px; z-index: 3; border-color: var(--bg); }
.mm-chat-agent-who { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-chat-agent-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.mm-conv-agent .mm-conv-title { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.mm-chat-agent-role { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-size: 13px; font-weight: 500; }
.mm-chat-agent-role[hidden] { display: none; }
.mm-chat-agent-line { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.mm-chat-agent-status { flex: none; color: var(--pc); font-weight: 600; }
.mm-chat-agent-sep { flex: none; color: var(--text-dim); }
.mm-chat-agent-doing { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* #6607 (design H1): the sentence — "Answering Christian in General · 4 min".
   One line whatever the width, the names a touch heavier. Only a chat's
   name shrinks; when not even a few letters of it fit, the header
   (agentchatheader.js fitDoing → data-fit) drops "in <name>" — or a task's
   "task 6599", which is never cut (.mm-work-whole) — then the elapsed time,
   and only then lets the asker's name be cut. */
.mm-chat-agent-doing[data-work="sentence"] { display: flex; align-items: baseline; }
.mm-chat-agent-doing[data-work="sentence"] > * { flex: none; white-space: pre; }
.mm-chat-agent-doing > :is(.mm-work-asker, .mm-work-place) { overflow: hidden; text-overflow: ellipsis;
  color: var(--text); font-weight: 600; }
.mm-chat-agent-doing[data-work="sentence"] > .mm-work-place.mm-work-drop:not(.mm-work-whole) { flex: 0 1 auto; min-width: 3em; }
.mm-chat-agent-doing:is([data-fit="no-place"], [data-fit="no-since"], [data-fit="squeeze"]) > .mm-work-drop,
.mm-chat-agent-doing:is([data-fit="no-since"], [data-fit="squeeze"]) > .mm-work-since { display: none; }
.mm-chat-agent-doing[data-fit="squeeze"] > .mm-work-asker { flex: 0 1 auto; min-width: 2em; }
.mm-chat-agent-doing > .mm-work-since { color: var(--muted); font-variant-numeric: tabular-nums; }
/* The queue chip: a button that opens the queue popover (components/agentqueue.js). */
.mm-chat-agent-queue { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 99px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 650;
  line-height: 1; cursor: pointer; }
.mm-chat-agent-queue svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.mm-chat-agent-queue:hover { border-color: var(--muted); }
.mm-chat-agent-queue[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mm-chat-agent-queue[aria-expanded="true"] svg { color: currentColor; }
.mm-chat-agent-queue:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-chat-agent-queue-count { font-variant-numeric: tabular-nums; }
.mm-chat-agent-queue[hidden], .mm-chat-warn[hidden], .mm-chat-backup-tag[hidden] { display: none; }
.mm-chat-agent-metrics { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.mm-chat-warn { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 620; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.mm-chat-warn.amber { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.mm-chat-pill { display: flex; align-items: stretch; flex: none; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.mm-chat-pill > * { display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 620; white-space: nowrap; }
.mm-chat-pill > * + * { border-left: 1px solid var(--border); }
.mm-chat-pill > *:hover, .mm-chat-energy[aria-expanded="true"] { background: var(--panel-2); }
.mm-chat-agent-model { cursor: default; border-radius: 0; }
.mm-chat-agent-model:focus-visible, .mm-chat-energy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-chat-agent-model[data-state="unknown"], .mm-chat-agent-model[data-state="last"] { color: var(--muted); }
.mm-chat-model-glyph { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px;
  background: var(--mm-prov-unknown); color: var(--mm-prov-ink); font-size: 10.5px; font-weight: 800; }
.mm-chat-model-glyph[data-provider="anthropic"] { background: var(--mm-prov-anthropic); }
.mm-chat-model-glyph[data-provider="openai"] { background: var(--mm-prov-openai); }
.mm-chat-model-glyph[data-provider="google"] { background: var(--mm-prov-google); }
.mm-chat-model-glyph[data-provider="zai"] { background: var(--mm-prov-zai); }
.mm-chat-model-glyph[data-provider="xai"] { background: var(--mm-prov-xai); }
.mm-chat-backup-tag { padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 4px;
  color: var(--warn); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.mm-chat-energy { cursor: pointer; }
.mm-chat-cap-ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.mm-chat-cap-track { stroke: var(--border); }
.mm-chat-cap-fill { stroke: var(--energy-tone); }
.mm-chat-energy-percent { font-variant-numeric: tabular-nums; }
:root[data-mm-header-bar="off"] .mm-chat-energy-bar { display: none; }
/* The model's hover card: type · provider, exact model, context, effort,
   engine, account and how sure the page is. Text nodes only. */
.mm-model-card { position: fixed; z-index: 1410; max-width: 320px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); box-shadow: var(--elev-2); font-size: 12.5px; line-height: 1.45; pointer-events: none; }
.mm-model-card h4 { margin: 0 0 6px; font-size: 12.5px; }
.mm-model-card h4 span { color: var(--text-dim); font-weight: 500; }
.mm-model-card-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.mm-model-card-kv > span:nth-child(odd) { color: var(--text-dim); }
.mm-model-card-kv > span:nth-child(even) { overflow-wrap: anywhere; }
.mm-model-card p { margin: 6px 0 0; color: var(--muted); }
.mm-model-card p.warn { margin-top: 2px; color: var(--warn); }
/* -- an agent's queue (components/agentqueue.js, #6607 design Q1) ---------------
   A popover under the queue chip: the head stays, the list scrolls inside
   itself, the footer (oldest wait, Clear queue) and the confirm stay put. */
.pop.mm-aq-pop { width: min(380px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 16px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.mm-aq { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
.mm-aq-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 13px 14px 6px; }
.mm-aq-title { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 680; }
.mm-aq-tally { color: var(--muted); font-size: 12px; }
.mm-aq-status { margin: 0; padding: 0 14px; color: var(--muted); font-size: 12px; }
.mm-aq-status:empty { display: none; }
.mm-aq-status:not(:empty) { padding-bottom: 6px; }
.mm-aq-error { margin: 0 10px 6px; padding: 7px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger);
  font-size: 12.5px; line-height: 1.4; }
.mm-aq-error[hidden] { display: none; }
.mm-aq-error .mm-aq-retry { margin-left: 4px; }
.mm-aq-list { list-style: none; margin: 0; padding: 2px 6px 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mm-aq-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 6px 5px 8px; border-radius: 8px; }
.mm-aq-row:hover { background: var(--panel); }
.mm-aq-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-aq-row[data-state="running"] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mm-aq-glyph { display: inline-flex; flex: none; color: var(--muted); }
.mm-aq-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.mm-aq-name, .mm-aq-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-aq-name { color: var(--text); font-size: 13px; font-weight: 620; }
.mm-aq-you { color: var(--muted); font-weight: 400; }
.mm-aq-where { color: var(--muted); font-size: 12px; }
.mm-aq-now { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; }
.mm-aq-wait { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-aq-remove, .mm-aq-remove-gap { flex: none; width: 26px; height: 26px; }
.mm-aq-remove { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer; }
.mm-aq-remove:hover { background: var(--panel-2); color: var(--text); }
.mm-aq-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-aq-remove:disabled { opacity: .45; cursor: default; }
.mm-aq-empty, .mm-aq-more { margin: 0; padding: 10px 14px 12px; color: var(--muted); font-size: 12.5px; }
.mm-aq-empty[hidden], .mm-aq-more[hidden], .mm-aq-foot[hidden], .mm-aq-confirm[hidden], .mm-aq-clear[hidden] { display: none; }
.mm-aq-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px;
  padding: 8px 10px 8px 14px; border-top: 1px solid var(--border-soft); }
.mm-aq-oldest { color: var(--muted); font-size: 12px; }
.mm-aq-clear { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mm-aq-confirm { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border-soft); background: var(--panel); }
.mm-aq-confirm-q { margin: 0 0 4px; color: var(--text); font-size: 13px; font-weight: 650; }
.mm-aq-confirm-note { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.mm-aq-confirm .mm-aq-error { margin: 0 0 10px; }
.mm-aq-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* The "…" menu's queue rows: the label, and the waiting count on the right. */
.pop-item.mm-pop-queue { gap: 16px; }
.mm-pop-hint { flex: none; color: var(--muted); font-size: 12px; }

/* -- an agent's controls (#6607 phase 2, designs M1, R1, R2, S1) ----------------
   The Agent DM's "…" menu is longer than a person's: it gets the height it
   needs, and a FIXED width (M1's) — it hangs from the header's right edge,
   where a shrink-to-fit popover re-measures every time it is moved left, so
   Stop's in-place confirm would make it grow over several resize callbacks
   (WebKit reports that loop). Stop current request confirms in place. */
.pop.mm-conv-agent-menu { width: 264px; min-width: 0; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 16px)); }
.mm-pop-confirm { margin: 2px 2px 4px; padding: 10px 12px; border-radius: 8px; background: var(--panel); }
.mm-pop-confirm-q { margin: 0 0 8px; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.mm-pop-confirm-note { color: var(--muted); font-weight: 400; }
.mm-pop-confirm-error { margin: 0 0 8px; padding: 6px 9px; border-radius: 7px; background: var(--danger-soft); color: var(--danger);
  font-size: 12.5px; line-height: 1.4; }
.mm-pop-confirm-error[hidden] { display: none; }
.mm-pop-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* The queue popover's Stop, on the request in hand. */
.mm-aq-stop { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mm-aq-stop svg { color: var(--danger); }
.mm-aq-stop:hover { border-color: var(--danger); }
.mm-aq-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-aq-stop:disabled { opacity: .45; cursor: default; }
/* The cannot-start strip under the header (S1): the reason in a sentence,
   and Restart for a controller. */
.mm-cs { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 24px; background: var(--danger-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--text); font-size: 13px; line-height: 1.45; }
.mm-cs[hidden], .mm-cs-restart[hidden] { display: none; }
.mm-cs-glyph { flex: none; display: inline-flex; color: var(--danger); }
.mm-cs-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mm-cs-restart { flex: none; }
/* The restart notice above the composer (R2): quiet bordered lines — who
   restarted the agent, then how it is going — never messages. */
.mm-rs-notice { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 6px 14px 0; }
.mm-rs-notice[hidden] { display: none; }
.mm-rs-line { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px 6px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.4; }
.mm-rs-by { padding-right: 12px; }
.mm-rs-glyph { flex: none; display: inline-flex; color: var(--muted); }
.mm-rs-result[data-phase="ready"] .mm-rs-glyph { color: var(--ok); }
.mm-rs-result:is([data-phase="could_not_start"], [data-phase="no_answer"], [data-phase="failed"]) .mm-rs-glyph { color: var(--danger); }
.mm-rs-result[data-phase="open"] .mm-rs-glyph svg { animation: mm-rs-turn 1.6s linear infinite; }
@keyframes mm-rs-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-rs-result[data-phase="open"] .mm-rs-glyph svg { animation: none; } }
.mm-rs-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mm-rs-text b { font-weight: 650; }
.mm-rs-steps, .mm-rs-left { color: var(--muted); }
.mm-rs-left { font-variant-numeric: tabular-nums; }
.mm-rs-time { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mm-rs-dismiss { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.mm-rs-dismiss:hover { background: var(--panel-2); color: var(--text); }
.mm-rs-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-rs-note { margin: 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* The restart dialog (R1). */
.mm-rs.modal-body { gap: 14px; }
.mm-rs-warn { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.mm-rs-warn[hidden], .mm-rs-error[hidden] { display: none; }
.mm-rs-warn svg { flex: none; margin-top: 1px; }
.mm-rs-asleep { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--text); font-size: 13px; }
.mm-rs-asleep svg { flex: none; color: var(--muted); }
.mm-rs-plan { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.mm-rs-plan li { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 13px; line-height: 1.4; }
.mm-rs-plan svg { flex: none; margin-top: 2px; color: var(--ok); }
.mm-rs-clear { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.mm-rs-clear input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent-fill); }
.mm-rs-hint { color: var(--muted); }
.mm-rs-error { margin: 0; padding: 8px 11px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 13px; line-height: 1.45; }
.mm-rs-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* #8430: Start again — why the computer parked it, before the confirm. */
.mm-sa-reason { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 10px; background: var(--warn-soft); }
.mm-sa-lead { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--warn); font-size: 13px; line-height: 1.45; }
.mm-sa-lead svg { flex: none; margin-top: 1px; }
.mm-sa-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 0 26px; font-size: 13px; line-height: 1.4; }
.mm-sa-facts dt { color: var(--muted); }
.mm-sa-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ONE row at every width (Ian, 2026-09-23: the pill must never drop under
   the name). A narrower header sheds detail instead, in this order: the
   role, the model's type word (its glyph stays), the capacity figure (its
   ring stays), the warn chips. The status line ellipsizes throughout. */
@container (max-width: 640px) {
  .mm-chat-agent-role { display: none; }
}
@container (max-width: 520px) {
  .mm-chat-model-type { display: none; }
  .mm-chat-pill > * { padding: 0 8px; }
}
@container (max-width: 420px) {
  .mm-chat-energy-percent, .mm-chat-warn { display: none; }
}

/* -- Settings → Appearance (components/appearancesettings.js) ------------------- */
.mm-appearance-chat { margin-top: 28px; display: grid; gap: 14px; max-width: 640px; }
.mm-appearance-title { margin: 0; font-size: 14px; }
.mm-appearance-text-size { margin-top: 24px; }
.mm-appearance-chat > .mm-settings-hint { margin: -10px 0 0; }
.mm-appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mm-appearance-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.mm-appearance-text small { color: var(--text-dim); font-size: 12px; }
.mm-seg { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.mm-seg-choice { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.mm-seg-choice + .mm-seg-choice { border-left: 1px solid var(--border); }
.mm-seg-choice[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mm-seg-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* -- Settings → This computer → Storage (components/chatstoragesettings.js, #8809) -- */
.mm-storage { display: grid; gap: 14px; max-width: 640px; }
.mm-storage-usage { margin: 0; font-size: 14px; color: var(--text); }
.mm-storage-usage strong { font-variant-numeric: tabular-nums; }
.mm-storage-memory { color: var(--muted); }
.mm-storage-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border-soft); margin-top: -4px; }
.mm-storage-bar > span { display: block; height: 100%; min-width: 0; }
.mm-storage-bar-text, .mm-storage-dot-text { background: var(--accent-fill); }
.mm-storage-bar-media, .mm-storage-dot-media { background: var(--review); }
.mm-storage-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-storage-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mm-storage-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mm-storage-row, .mm-storage-clear { padding-top: 14px; border-top: 1px solid var(--border-soft); }
.mm-storage-confirm { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--danger); border-radius: 9px; background: var(--danger-soft); font-size: 13px; color: var(--text); }
.mm-storage-confirm p { margin: 0; }
.mm-storage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-storage [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mm-pav, .mm-pav *, .mm-row[data-dm-row] > .mm-dm-dot, .mm-team-activity-row > .mm-dm-dot { animation: none !important; }
}