/* 2026-10-16 video in calls (call-video.js): her own picture in a small glass
   window top right, like FaceTime's self view; a camera button between mute and
   hang up, filled with the accent while the camera is on. */
.ian-call-selfview{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 70px);right:18px;z-index:2;
  width:104px;height:138px;border-radius:20px;overflow:hidden;display:none;
  border:1px solid color-mix(in srgb,#fff 48%,transparent);
  background:color-mix(in srgb,var(--card) 62%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 64%,transparent),0 12px 30px color-mix(in srgb,var(--text) 16%,transparent);
}
.ian-call-overlay.video-on .ian-call-selfview{display:block}
.ian-call-selfview video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.ian-call-overlay.video-back .ian-call-selfview video{transform:none}
.ian-call-selfview button{
  position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;padding:0;color:#fff;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ian-call-control.video{
  color:var(--text);border:1px solid color-mix(in srgb,#fff 48%,transparent);
  background-color:color-mix(in srgb,var(--card) 76%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 44%,transparent),transparent 72%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),0 10px 26px color-mix(in srgb,var(--text) 12%,transparent);
}
.ian-call-control.video.on{
  color:#fff;border-color:color-mix(in srgb,#fff 32%,transparent);
  background-color:var(--accent);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.34),rgba(255,255,255,.06) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 10px 24px color-mix(in srgb,var(--accent) 32%,transparent);
}
/* three round buttons still fit a 375-px phone */
.ian-call-controls:has(.ian-call-control.video){gap:30px}