/* ARIA portrait — shared across all FutureOps surfaces */

img[data-aria-portrait],
img.aria-photo,
img.aria-hero-photo,
img.pitch-photo,
img.ag-photo,
img.wm-photo,
img.aria-mini-photo,
img.aria-panel-avatar,
img.aria-fab-photo,
img.aria-circle-photo {
  object-fit: cover;
  background: #0d1a1a;
}

/* Full office scene (desk + dashboard behind ARIA) */
img.aria-crop-scene,
.aria-photo,
.aria-hero-photo,
.pitch-photo,
.ag-photo,
.wm-photo,
.aria-mini-photo {
  object-position: center center;
}

/* Face crop for small avatars */
img.aria-crop-face,
img.aria-panel-avatar,
img.aria-fab-photo,
img.aria-circle-photo,
img.aria-setup-photo {
  object-position: 50% 14%;
}

img.aria-panel-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 184, 178, 0.35);
}

.aria-fab-btn {
  padding: 0;
  overflow: hidden;
  position: relative;
}

img.aria-fab-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.aria-avatar img.aria-circle-photo,
img.aria-circle-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.35);
}

.aria-avatar-wrap img.aria-setup-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(0, 184, 178, 0.4);
  flex-shrink: 0;
}

/* Presenter / hero — landscape scene frame (matches official ARIA art) */
.aria-portrait-wrap { width: min(100%, 380px); }
.aria-portrait-frame.aria-has-scene,
.aria-hero-frame.aria-has-scene,
.pitch-portrait-frame.aria-has-scene {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 220px;
}

.aria-portrait-frame.aria-has-scene .aria-photo,
.aria-hero-frame.aria-has-scene .aria-hero-photo,
.pitch-portrait-frame.aria-has-scene .pitch-photo {
  animation: none !important;
  transform: none !important;
  filter: none;
  transition: filter 0.4s ease;
}

/* Scene stays frozen; only the face-anchor region animates */
.aria-portrait-frame.aria-has-scene.speaking .aria-photo,
.aria-portrait-frame.aria-has-scene.thinking .aria-photo,
.aria-hero-frame.aria-has-scene.speaking .aria-hero-photo,
.pitch-portrait-frame.aria-has-scene.speaking .pitch-photo,
.pitch-portrait-frame.aria-has-scene.pitch-frame-active .pitch-photo {
  animation: none !important;
  transform: none !important;
}

.aria-portrait-frame.aria-has-scene.em-positive.speaking .aria-photo { filter: brightness(1.03); }
.aria-portrait-frame.aria-has-scene.em-concerned.speaking .aria-photo { filter: brightness(0.98); }
.aria-portrait-frame.aria-has-scene.em-urgent.speaking .aria-photo { filter: contrast(1.02); }
.aria-portrait-frame.aria-has-scene.em-analytical.speaking .aria-photo { filter: saturate(0.97); }

/* ── Face anchor — overlays positioned on ARIA's face only ─────────── */
.aria-portrait-frame.aria-has-scene,
.aria-hero-frame.aria-has-scene,
.pitch-portrait-frame.aria-has-scene {
  --fa-x: 33%;
  --fa-y: 8%;
  --fa-w: 34%;
  --fa-h: 46%;
  --mouth-x: 42%;
  --mouth-y: 39%;
  --mouth-w: 15%;
  --mouth-h: 6%;
}

.aria-face-anchor {
  position: absolute;
  left: var(--fa-x);
  top: var(--fa-y);
  width: var(--fa-w);
  height: var(--fa-h);
  pointer-events: none;
  z-index: 5;
}

/* Real mouth pixels — frame-locked window, background stays still */
.aria-mouth-live {
  position: absolute;
  left: var(--mouth-x);
  top: var(--mouth-y);
  width: var(--mouth-w);
  height: var(--mouth-h);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 6;
  border-radius: 40% / 50%;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 40%, #000 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 50% 40%, #000 65%, transparent 100%);
}

.aria-portrait-frame.speaking .aria-mouth-live,
.pitch-portrait-frame.speaking .aria-mouth-live,
.pitch-portrait-frame.pitch-frame-active .aria-mouth-live {
  opacity: 1;
}

.aria-mouth-live .aria-mouth-img {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  max-width: none;
  width: 667%;
  height: 1667%;
  left: -280%;
  top: -650%;
  transform-origin: 50% 20%;
}

.aria-portrait-frame.speaking .aria-mouth-live .aria-mouth-img,
.pitch-portrait-frame.speaking .aria-mouth-live .aria-mouth-img,
.pitch-portrait-frame.pitch-frame-active .aria-mouth-live .aria-mouth-img {
  animation: ariaMouthSpeak 0.1s ease-in-out infinite alternate;
}

.aria-mouth-live.flap .aria-mouth-img {
  animation: ariaMouthFlap 0.09s ease-in-out infinite alternate;
}

.aria-mouth-live.flap-wide .aria-mouth-img {
  animation: ariaMouthWide 0.12s ease-out forwards;
}

@keyframes ariaMouthSpeak {
  0% { transform: scaleY(1) translateY(0); }
  100% { transform: scaleY(1.05) translateY(-1.5%); }
}

@keyframes ariaMouthFlap {
  0% { transform: scaleY(0.98); }
  100% { transform: scaleY(1.08); }
}

@keyframes ariaMouthWide {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(1.1); }
}

/* Eye lids — inside face anchor only */
.aria-face-anchor .aria-eye-lid {
  position: absolute;
  top: 34%;
  width: 36%;
  height: 0;
  overflow: hidden;
  transition: height 0.07s ease-out;
}

.aria-face-anchor .aria-eye-lid::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 130%;
  background: linear-gradient(180deg,
    rgba(30, 22, 28, 0) 0%,
    rgba(30, 22, 28, 0.55) 48%,
    rgba(30, 22, 28, 0.62) 52%,
    rgba(30, 22, 28, 0) 100%
  );
}

.aria-face-anchor .aria-eye-lid.blink { height: 22%; }
.aria-face-anchor .aria-eye-left { left: 4%; }
.aria-face-anchor .aria-eye-right { right: 4%; left: auto; }

/* Brows — subtle shift, no solid blocks */
.aria-face-anchor .aria-brow {
  position: absolute;
  top: 22%;
  width: 34%;
  height: 8%;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.15s ease-out;
  background: radial-gradient(ellipse 90% 60% at 50% 100%, rgba(35, 25, 30, 0.22) 0%, transparent 72%);
}

.aria-portrait-frame.speaking .aria-face-anchor .aria-brow,
.pitch-portrait-frame.speaking .aria-face-anchor .aria-brow,
.pitch-portrait-frame.pitch-frame-active .aria-face-anchor .aria-brow {
  opacity: 1;
}

.aria-face-anchor .aria-brow-left { left: 6%; transform-origin: 85% 100%; }
.aria-face-anchor .aria-brow-right { right: 6%; left: auto; transform-origin: 15% 100%; }

.em-positive.speaking .aria-face-anchor .aria-brow-left { animation: ariaBrowRaiseL 2.5s ease-in-out infinite; }
.em-positive.speaking .aria-face-anchor .aria-brow-right { animation: ariaBrowRaiseR 2.5s ease-in-out infinite; }
.em-concerned.speaking .aria-face-anchor .aria-brow-left,
.em-urgent.speaking .aria-face-anchor .aria-brow-left { animation: ariaBrowFurrowL 2.4s ease-in-out infinite; }
.em-concerned.speaking .aria-face-anchor .aria-brow-right,
.em-urgent.speaking .aria-face-anchor .aria-brow-right { animation: ariaBrowFurrowR 2.4s ease-in-out infinite; }
.em-analytical.speaking .aria-face-anchor .aria-brow-left { animation: ariaBrowFocusL 3s ease-in-out infinite; }
.em-analytical.speaking .aria-face-anchor .aria-brow-right { animation: ariaBrowFocusR 3.2s ease-in-out infinite; }
.em-neutral.speaking .aria-face-anchor .aria-brow-left,
.em-neutral.speaking .aria-face-anchor .aria-brow-right { animation: ariaBrowNeutral 3.6s ease-in-out infinite; }

.aria-face-anchor .aria-brow-left.emphasis { transform: translateY(-12%) rotate(-4deg); animation: none !important; }
.aria-face-anchor .aria-brow-right.emphasis { transform: translateY(-12%) rotate(4deg); animation: none !important; }

.aria-portrait-frame.thinking .aria-face-anchor .aria-brow { opacity: 0.7; animation: ariaBrowThink 1.6s ease-in-out infinite alternate; }

/* Legacy painted lips/eyes on full frame — hidden for scene portraits */
.aria-portrait-frame.aria-has-scene > .aria-lips,
.aria-portrait-frame.aria-has-scene > .aria-face-overlays,
.pitch-portrait-frame.aria-has-scene > .aria-lips {
  display: none !important;
}

/* Hand clips disabled — caused background regions to shift */
.aria-hand-clips { display: none !important; }

/* Non-scene portraits (legacy) — keep simple overlay fallback */
.aria-face-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.aria-portrait-frame:not(.aria-has-scene),
.aria-hero-frame:not(.aria-has-scene),
.pitch-portrait-frame:not(.aria-has-scene) {
  --af-eye-top: 22%;
  --af-eye-h: 10%;
  --af-eye-left-x: 30%;
  --af-eye-right-x: 52%;
  --af-brow-top: 16.5%;
  --af-lip-top: 36%;
}

.aria-lips {
  position: absolute;
  left: 50%;
  top: var(--af-lip-top, 36%);
  width: 10%;
  height: 2.6%;
  transform: translateX(-50%) scaleY(0.3);
  background: linear-gradient(180deg, rgba(65, 42, 50, 0.35) 0%, rgba(52, 34, 40, 0.55) 100%);
  border-radius: 46% / 58%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.aria-lips.active { opacity: 0.82; }

.aria-portrait-frame:not(.aria-has-scene).speaking .aria-lips.active {
  animation: ariaLipFlap var(--lip-speed, 0.1s) ease-in-out infinite alternate;
}

@keyframes ariaLipFlap {
  0% { transform: translateX(-50%) scaleY(0.22) scaleX(0.96); }
  100% { transform: translateX(-50%) scaleY(0.95) scaleX(1.04); }
}

.aria-eye-lid {
  position: absolute;
  top: var(--af-eye-top, 22%);
  width: 15%;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  transition: height 0.06s ease-out;
}

.aria-eye-lid::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140%;
  background: linear-gradient(180deg, rgba(38, 28, 48, 0) 0%, rgba(38, 28, 48, 0.82) 44%, rgba(38, 28, 48, 0.9) 56%, rgba(38, 28, 48, 0) 100%);
}

.aria-eye-lid.blink { height: var(--af-eye-h, 10%); }
.aria-eye-left { left: var(--af-eye-left-x, 30%); }
.aria-eye-right { left: var(--af-eye-right-x, 52%); }

.aria-brow {
  position: absolute;
  top: var(--af-brow-top, 16.5%);
  width: 12%;
  height: 2.4%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(ellipse 95% 85% at 50% 100%, rgba(40, 28, 36, 0.5) 0%, transparent 70%);
  border-radius: 42% 42% 0 0;
}

.aria-portrait-frame:not(.aria-has-scene).speaking .aria-brow { opacity: 1; }
.aria-brow-left { left: 31%; transform-origin: 88% 100%; }
.aria-brow-right { left: 57%; transform-origin: 12% 100%; }

@keyframes ariaBrowRaiseL {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-16%) rotate(-5deg); }
}

@keyframes ariaBrowRaiseR {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-16%) rotate(5deg); }
}

@keyframes ariaBrowFurrowL {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10%) rotate(7deg); }
}

@keyframes ariaBrowFurrowR {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10%) rotate(-7deg); }
}

@keyframes ariaBrowFocusL {
  0%, 100% { transform: translateY(-4%) rotate(-2deg); }
  50% { transform: translateY(-10%) rotate(-4deg); }
}

@keyframes ariaBrowFocusR {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6%) rotate(3deg); }
}

@keyframes ariaBrowNeutral {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}

@keyframes ariaBrowThink {
  0% { transform: translateY(2%) rotate(3deg); }
  100% { transform: translateY(-4%) rotate(-2deg); }
}

/* Mini / non-scene speaking bob only (no full scene) */
.aria-mini-portrait.speaking .aria-mini-photo {
  animation: ariaSpeakBob 0.45s ease-in-out infinite alternate;
}

@keyframes ariaSpeakBob {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.012) translateY(-0.4%); }
}

.aria-portrait-frame:not(.aria-has-scene).thinking .aria-photo {
  animation: ariaThinkPulse 1.2s ease-in-out infinite alternate;
  filter: saturate(0.88) brightness(0.94);
}

@keyframes ariaThinkPulse {
  0% { filter: saturate(0.88) brightness(0.94); }
  100% { filter: saturate(0.95) brightness(1); }
}

.aria-portrait-frame.em-positive.speaking .aria-photo { filter: brightness(1.06) saturate(1.05); }
.aria-portrait-frame.em-concerned.speaking .aria-photo { filter: sepia(0.12) saturate(1.05) brightness(0.98); }
.aria-portrait-frame.em-urgent.speaking .aria-photo { filter: saturate(1.15) contrast(1.04) brightness(1.02); }
.aria-portrait-frame.em-analytical.speaking .aria-photo { filter: saturate(0.92) hue-rotate(-8deg) brightness(1.02); }

.aria-portrait-frame.aria-has-scene .aria-nameplate,
.aria-hero-frame.aria-has-scene .aria-hero-plate,
.pitch-portrait-frame.aria-has-scene .pitch-plate {
  display: none;
}

.aria-mini-portrait.aria-has-scene {
  width: 160px;
  height: 120px;
  aspect-ratio: 4 / 3;
}