/* Private master portrait overlay. The source image is served only by the
   same-origin backend and is never bundled into Git or the PWA cache. */
.avatar-master {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  user-select: none;
  filter: saturate(.94) contrast(1.02);
  box-shadow: none;
  animation: none;
}

.avatar-placeholder {
  display: block;
  position: absolute;
  inset: 0;
}

.avatar-expression {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
}

.avatar.master-loaded .avatar-expression { display: block; }

.avatar-eyelids {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.avatar-eyelids .eye-patch {
  position: absolute;
  top: 24%;
  width: 16%;
  height: 5.5%;
  overflow: hidden;
  opacity: 0;
  border-radius: 42%;
  -webkit-mask-image: radial-gradient(ellipse, #000 44%, #000c 58%, transparent 76%);
  mask-image: radial-gradient(ellipse, #000 44%, #000c 58%, transparent 76%);
  animation: portrait-blink 6.4s ease-in-out infinite;
}

.avatar-eyelids .eye-patch.left { left: 28%; }
.avatar-eyelids .eye-patch.right { left: 49%; }

.avatar-eyelids .eye-patch img {
  position: absolute;
  width: 625%;
  height: 1818.182%;
  top: -436.364%;
  max-width: none;
  user-select: none;
}

.avatar-eyelids .eye-patch.left img { left: -175%; }
.avatar-eyelids .eye-patch.right img { left: -306.25%; }

.avatar.master-loaded {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100dvh * 2 / 3));
  height: min(100dvh, calc(100vw * 3 / 2));
  max-height: none;
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  margin: 0;
  filter: none;
  animation: none !important;
}

.avatar.master-loaded .avatar-master { display: block; }
.avatar.master-loaded .avatar-placeholder { display: none; }
.avatar.master-loaded .avatar-eyelids { display: flex; }

.avatar-mouth {
  display: none;
  position: absolute;
  z-index: 8;
  left: 37.8%;
  top: 36.9%;
  width: 19%;
  height: 7.5%;
  overflow: hidden;
  border-radius: 48%;
  pointer-events: none;
  /* Keep the lips crisp in the centre, then feather the sampled skin into the
     master portrait over a broad band so the rectangular crop cannot show. */
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 52%, #000 18%, #000e 28%, #000a 43%, #0005 59%, #0001 76%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 52%, #000 18%, #000e 28%, #000a 43%, #0005 59%, #0001 76%, transparent 96%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: none !important;
}

.avatar.master-loaded .avatar-mouth { display: block; }

.avatar-mouth > img {
  position: absolute;
  width: 526.316%;
  height: 1333.333%;
  left: -198.947%;
  top: -492%;
  max-width: none;
  opacity: 0;
  transition: opacity 90ms ease-in-out;
  transform: none !important;
  animation: none !important;
  user-select: none;
}

.avatar[data-state="speaking"][data-mouth="open"] .avatar-mouth > img[data-mouth="open"],
.avatar[data-state="speaking"][data-mouth="ee"] .avatar-mouth > img[data-mouth="ee"],
.avatar[data-state="speaking"][data-mouth="oh"] .avatar-mouth > img[data-mouth="oh"],
.avatar[data-state="speaking"][data-mouth="ah"] .avatar-mouth > img[data-mouth="ah"] { opacity: 1; }

.avatar:not([data-state="speaking"]) .avatar-mouth > img { opacity: 0; }

.avatar.master-loaded[data-state="listening"] {
  animation: none !important;
}

.primary-actions.click-only { grid-template-columns: 1fr; }

@keyframes portrait-blink {
  0%, 46.8%, 50%, 100% { opacity: 0; }
  48.1%, 48.8% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar.master-loaded,
  .avatar-master,
  .avatar-eyelids .eye-patch { animation: none !important; }
}