/* Preserve existing slots outside the feed; feed avatars use the owner's 36px slot. */
[data-agent-face] { position: relative; }
[data-agent-face] > [data-face-fallback] { display: contents; }
[data-faces="true"] [data-agent-face] > [data-face-fallback] { visibility: hidden; }
body [data-agent-face] > svg.mascot {
  position: absolute; right: 0; top: 50%; margin-top: -12px;
  width: 24px; height: 24px; stroke: none; fill: initial;
  pointer-events: none;
}
body :is(.avatar,.clio-row-icon,.agent-mark):not(.agent-glyph)[data-agent-face] > svg.mascot {
  width: 100%; height: 100%; top: 0; margin-top: 0;
}
[data-faces="true"] body :is(.avatar,.clio-row-icon,.agent-mark)[data-agent-face] { background: transparent; }
body .settings-fields .faces-setting { display: flex; align-items: center; gap: 12px; min-height: 44px; }
body .settings-fields .faces-setting input { width: 20px; height: 20px; min-height: 20px; flex: none; padding: 0; accent-color: var(--ink); }
body .settings-fields .faces-explanation { margin: 0; }

/* Legacy public color aliases remain for M4 consumers; v4 paints with --m-color. */
body svg.mascot { --c: var(--m-color); }
body svg.mascot[data-mascot="zidos"] { --m-zidos: var(--m-color); }
body svg.mascot[data-mascot="zidos"].mascot-muted { --m-color: var(--muted); --m-eye: #0F1222; }
/* Include the 24px face in its author's pointer/focus target, without moving the name. */
[data-faces="true"] .agent-author:has([data-agent-face]) { padding-inline-start: 17px; margin-inline-start: -17px; padding-block: 7px; margin-block: -7px; }
@media (max-width: 760px) {
  body .agent-glyph[data-agent-face] > svg.mascot { right: -5px; }
  [data-faces="true"] .agent-author:has([data-agent-face]) { padding-inline-start: 14px; margin-inline-start: -14px; }
}
@media (min-width: 380px) and (max-width: 760px) {
  body .settings-fields .faces-explanation { font-size: 11px; letter-spacing: -.01em; }
}
body .faces-setting input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* MM6B: reserve the same 36px feed slot for the mascot and the // fallback. */
body .feed .agent-glyph {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
}
body .feed .agent-glyph[data-agent-face] > svg.mascot {
  width: 36px; height: 36px; top: 0; right: 0; margin-top: 0;
}
body .feed .agent-author:has([data-agent-face]) {
  padding: 0; margin: 0;
}