/* OMEGA_BOT_CSS_V6 — original face + eye-matched mouth lipsync */
@property --omega-mh {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@property --omega-mw {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.avatar-wrap.avatar--omega {
  overflow: visible !important;
  border-radius: 50% !important;
  background: transparent !important;
  container-type: size;
  --avatar-png-offset-x: 0% !important;
  --avatar-png-offset-y: 0% !important;
}
.avatar-wrap.avatar--omega .jarvis-svg,
.avatar-wrap.avatar--omega .avatar-png,
.avatar-wrap.avatar--omega .avatar-glow {
  display: none !important;
}
.avatar-wrap.avatar--omega .omega-bot {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 20;
  font-size: clamp(5px, 7.5cqmin, 14px);
  transform: none;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.face-area .avatar-wrap.avatar--omega,
.home-avatar .avatar-wrap.avatar--omega {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.face-area .avatar-wrap.avatar--omega .omega-bot,
.home-avatar .avatar-wrap.avatar--omega .omega-bot {
  z-index: 7;
}

.avatar-wrap.avatar--omega .omega-bot *,
.avatar-wrap.avatar--omega .omega-bot *:after,
.avatar-wrap.avatar--omega .omega-bot *:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* —— ORIGINAL .outer-face —— */
.avatar-wrap.avatar--omega .outer-face {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
  perspective: 600px;
  background: #eceff1;
  box-shadow: inset 0 -0.4em 2em #333;
  padding: 1.7em 1em 1em;
  border-radius: 70% / 90% 90% 55% 55%;
  animation: omega-float 2s infinite both;
  margin: 0 auto;
  border: 0;
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 92%;
  overflow: visible;
}
@keyframes omega-float {
  from, to { transform: translateY(0) rotateY(0); }
  50% { transform: translateY(1px) rotateY(0); }
}
/* Whole head turns — never rotate the black label alone (that clips the screen) */
.avatar-wrap.avatar--omega .outer-face:has(.inner-face:checked) {
  animation: omega-nod 4s 0.6s ease infinite both;
}
@keyframes omega-nod {
  0%, 100% { transform: translateY(0) rotateY(0); }
  15% { transform: translateY(1px) rotateY(0); }
  35% { transform: translateY(0) rotateY(-10deg); }
  55% { transform: translateY(0) rotateY(0); }
  75% { transform: translateY(0) rotateY(10deg); }
}

.avatar-wrap.avatar--omega .inner-face {
  display: none !important;
  position: absolute;
  left: -9999px;
}

/* Awake: glow on screen — nod is on whole head (avoids visor clip) */
.avatar-wrap.avatar--omega .inner-face:checked + label {
  box-shadow: inset 0 -2em 4em 0 black;
}

.avatar-wrap.avatar--omega .inner-face:checked + label:after,
.avatar-wrap.avatar--omega .inner-face:checked + label:before {
  background:
    repeating-linear-gradient(rgba(0, 0, 0, 0.2) 3px, rgba(221, 221, 221, 0.2) 6px),
    radial-gradient(#2196f3, #00b0ff, #000);
  box-shadow: 0 0 2em 0 #2196f3, inset 0 0 black;
  top: 1.8em;
  transition: all 0.5s ease;
  animation: omega-blink 5s ease infinite both;
  transform: rotateX(0);
}
@keyframes omega-blink {
  from, to { transform: rotateX(0); }
  50% { transform: rotateX(40deg); }
}

/* —— ORIGINAL label / eyes —— */
.avatar-wrap.avatar--omega .outer-face > label {
  position: relative;
  background: black;
  border-radius: 110% 110% 100% 100%;
  height: calc(4em * 1.3);
  width: calc(4em * 2);
  padding-top: 0.4em;
  transition: all 0.5s ease;
  overflow: hidden;
  transform: none !important;
  animation: none !important;
  display: block;
  cursor: pointer;
  margin: 0 auto;
}
.avatar-wrap.avatar--omega .outer-face > label:after,
.avatar-wrap.avatar--omega .outer-face > label:before {
  border-radius: 50%;
  content: "";
  position: absolute;
  height: calc(4em / 2);
  width: calc(4em / 2);
  top: calc(4em * 0.7);
  transition: all 0.6s 0.3s ease;
  transform: rotateX(40deg);
  background:
    repeating-linear-gradient(rgba(0, 0, 0, 0.1) 4px, rgba(221, 221, 221, 0.1) 8px),
    radial-gradient(#2196f3, #000),
    linear-gradient(to bottom, black, rgba(0, 0, 0, 0)),
    linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 4em black, inset 0 1em 0.4em black;
  z-index: 1;
}
.avatar-wrap.avatar--omega .outer-face > label:after {
  left: 1.5em;
}
.avatar-wrap.avatar--omega .outer-face > label:before {
  left: calc(4em + 0.3em);
}

/* Mouth: same palette / scan / glow as eyes, centered under them */
.avatar-wrap.avatar--omega .omega-mouth {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 1.35em;
  height: 0.32em;
  border-radius: 0 0 0.4em 0.4em;
  background:
    repeating-linear-gradient(
      rgba(0, 0, 0, 0.2) 2px,
      rgba(221, 221, 221, 0.2) 4px
    ),
    radial-gradient(#2196f3, #00b0ff, #000);
  box-shadow: 0 0 1.2em 0 #2196f3, inset 0 0 black;
  filter: drop-shadow(0 0 0.35em #00b0ff);
  transform: translate(-50%, 0) scale(var(--omega-mw, 1), var(--omega-mh, 0.35));
  transform-origin: 50% 0%;
  z-index: 3;
  opacity: 0.55;
  pointer-events: none;
}
.avatar-wrap.avatar--omega .outer-face:not(:has(.inner-face:checked)) .omega-mouth {
  --omega-mh: 0.22;
  --omega-mw: 0.85;
  opacity: 0.4;
  animation: none;
  filter: drop-shadow(0 0 0.15em #2196f3);
}
.avatar-wrap.avatar--omega .inner-face:checked + label .omega-mouth {
  opacity: 1;
  animation: omega-mouth-lipsync 1.2s ease-in infinite;
}
@keyframes omega-mouth-lipsync {
  from, 30%, 70%, to {
    --omega-mh: 1;
    --omega-mw: 1;
  }
  20% { --omega-mh: 0.5; }
  60% { --omega-mw: 0.7; }
}
/* Fallback scale lipsync if @property animation weak */
@supports not (background: paint(something)) {
  .avatar-wrap.avatar--omega .inner-face:checked + label .omega-mouth {
    animation: omega-mouth-scale 1.2s ease-in infinite;
  }
}
@keyframes omega-mouth-scale {
  from, 30%, 70%, to { transform: translate(-50%, 0) scale(1, 1); }
  20% { transform: translate(-50%, 0) scale(1, 0.5); }
  60% { transform: translate(-50%, 0) scale(0.7, 1); }
}
.avatar-wrap.avatar--omega.state--speaking .omega-mouth {
  opacity: 1 !important;
  animation: omega-mouth-scale 0.42s ease-in-out infinite !important;
}

@supports not (font-size: 1cqmin) {
  .avatar-wrap.avatar--omega .omega-bot { font-size: 7%; }
}