/* Clip only the special-effect layer: avatar frames and badges stay outside. */
body.soft-ui.fluent .mic-strip .vm[data-mic-effect], #bpModal .vm[data-mic-effect], #bpModal .bp-mini-vm[data-mic-effect] {
  position: relative; isolation: isolate; background: var(--mf-background); color: #f5f1ee;
  border-color: var(--mf-edge); box-shadow: inset 0 0 0 1px #ffffff0b, 0 0 12px color-mix(in srgb, var(--mf-edge) 17%, transparent);
}
[data-mic-effect] > .mf-flow-layer {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none;
}
.mf-flow-layer > canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mf-flow-layer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 45% 40%, #0c10156b, transparent 78%); }
body.soft-ui.fluent .mic-strip .vm[data-mic-effect] .vm-nick:not(.nick-color), #bpModal [data-mic-effect] .bp-stage-name:not(.nick-color), #bpModal [data-mic-effect] .bm-nick {
  color: #f5f1ee; text-shadow: 0 1px 5px #000;
}
#bpModal .bp-frame-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#bpModal .bp-frame-controls button { min-height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 5px 9px; font: inherit; font-size: 12px; }
#bpModal .bp-frame-controls button[aria-pressed="true"] { border-color: #a594c4; background: #9271d329; }
#bpModal .bp-frame-status { font-size: 12px; color: var(--muted); }
[data-mic-effect="mf-flow-sun"], [data-mic-effect="mf-flow-moon"], [data-mic-effect="mf-flow-star"], [data-mic-effect="mf-flow-cosmos"] {
  transition: border-color .25s ease, box-shadow .25s ease;
}
[data-mic-material="true"][data-mic-boost="true"],
body.soft-ui.fluent .mic-strip .vm[data-mic-material="true"][data-mic-boost="true"],
#bpModal [data-mic-material="true"][data-mic-boost="true"] {
  border-color: color-mix(in srgb, var(--mf-edge) 55%, #fff);
  box-shadow: inset 0 0 0 1px #ffffff36, inset 0 0 24px color-mix(in srgb, var(--mf-edge) 26%, transparent), 0 0 21px color-mix(in srgb, var(--mf-edge) 48%, transparent);
}
[data-mic-effect="mf-flow-sun"] > .mf-flow-layer::after,
[data-mic-effect="mf-flow-moon"] > .mf-flow-layer::after,
[data-mic-effect="mf-flow-star"] > .mf-flow-layer::after,
[data-mic-effect="mf-flow-cosmos"] > .mf-flow-layer::after {
  background: linear-gradient(90deg, #05071124, transparent 55%);
}