/* Restore the approved three call controls; scope to the active camera UI. */
body[data-call-controls="true"] #app .controls,
body[data-call-controls="true"] #app .controls.active {
  display:grid;
  grid-template-columns:repeat(3,74px);
  grid-template-rows:auto auto;
  grid-auto-rows:auto;
  justify-content:center;
  align-content:end;
  align-items:start;
  gap:8px 14px;
}
body[data-call-controls="true"] #app .controls > .phase,
body[data-call-controls="true"] #app .controls > .notice,
body[data-call-controls="true"] #app .controls > .camera-status-note {
  grid-column:1 / -1;
  grid-row:auto;
  width:100%;
  text-align:center;
}
body[data-call-controls="true"] #app .controls > #primary-action,
body[data-call-controls="true"] #app .controls > #camera-toggle,
body[data-call-controls="true"] #app .controls > #hangup {
  grid-column:auto;
  grid-row:auto;
  justify-self:center;
  margin:0;
}
/* The circle is a surface; only its inner 24px glyph is masked. */
body[data-call-controls="true"] #app .controls #primary-action .primary-icon {
  display:grid!important;
  mask:none!important;
  -webkit-mask:none!important;
  margin:0;
}
body[data-call-controls="true"] #app .controls #primary-action .primary-icon::before {
  content:"";
  display:block;
  width:24px;
  height:24px;
  background:currentColor;
  mask:url("microphone-icon.svg") center / contain no-repeat;
  -webkit-mask:url("microphone-icon.svg") center / contain no-repeat;
}
body[data-call-controls="true"] #app .controls #primary-action[aria-pressed="true"] .primary-icon::before {
  mask-image:url("microphone-off-icon.svg");
  -webkit-mask-image:url("microphone-off-icon.svg");
}
/* The portrait must retain its full frame, including eyes and forehead. */
#app #stage .selfie-r70-layer {
  object-fit:contain;
  object-position:center;
}

/* Portrait phones have enough height for the approved close selfie framing.
   Align the source to its top so the eyes never fall above the stage.
   Short landscape layouts keep the full portrait with contain. */
@media(max-width:767px) and (min-height:620px) and (orientation:portrait) {
  #app #stage .selfie-r70-layer {object-fit:cover;object-position:center top;}
}