/* Nell mark: official look from NLOS-Style 0.14.0 (src/styles.css and Nell.tsx)
   and Brand Package 3.5 product colors. Keyframes are copied as shipped.
   Personality comes from how the gold spark moves. A face appears only for hello. */

:root {
  --nell-square: #0E7490;
  --nell-spark: #B07A1A;
  --nl-color-nell-glint: #FFFFFF;
}
html[data-theme="dark"] {
  --nell-square: #22D3EE;
  --nell-spark: #F5BB61;
}

.nell-mark {
  display: inline-block;
  flex: none;
  line-height: 0;
}
.nell-mark[data-nl-nell-size="sm"] { width: 16px; height: 16px; }
.nell-mark[data-nl-nell-size="md"] { width: 24px; height: 24px; }
.nell-mark[data-nl-nell-size="lg"] { width: 40px; height: 40px; }
.nell-mark[data-nl-nell-size="xl"] { width: 64px; height: 64px; }
.nell-mark--hero { width: 112px; height: 112px; }
.nell-mark__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nell-mark-stage {
  display: grid;
  place-items: center;
  padding: 8px 12px 0;
}

[data-nl-nell] rect,
[data-nl-nell] [data-eyes],
[data-nl-nell] [data-eye] { transform-box: fill-box; transform-origin: center; }
[data-nl-nell] rect { fill: var(--nell-square); }
[data-nl-nell] rect[data-q="4"] {
  fill: var(--nell-spark);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nell-spark) 85%, transparent));
}
[data-nl-nell] [data-eyes] { opacity: 0; }
[data-nl-nell] [data-eye] circle { fill: var(--nell-square); }
[data-nl-nell] [data-eye] [data-glint] { fill: var(--nl-color-nell-glint); }
[data-nl-nell] [data-smile] {
  opacity: 0;
  fill: none;
  stroke: var(--nell-spark);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-nl-nell="idle"] rect[data-q="4"] { animation: nl-nell-blink 4s 1; }
[data-nl-nell="hello"]:not([data-nl-nell-size="sm"]) rect { animation: nl-nell-hello-squares 3.4s ease-in-out 1; }
[data-nl-nell="hello"]:not([data-nl-nell-size="sm"]) [data-eyes] { animation: nl-nell-hello-eyes 3.4s ease-in-out 1; }
[data-nl-nell="hello"]:not([data-nl-nell-size="sm"]) [data-eye] { animation: nl-nell-hello-blink 3.4s ease-in-out 1; }
[data-nl-nell="hello"]:not([data-nl-nell-size="sm"]) [data-look] { animation: nl-nell-hello-glance 3.4s ease-in-out 1; }
[data-nl-nell="hello"]:not([data-nl-nell-size="sm"]) [data-smile] { animation: nl-nell-hello-smile 3.4s ease-in-out 1; }
[data-nl-nell="hello"][data-nl-nell-size="sm"] rect[data-q="4"] { animation: nl-nell-blink 1.2s ease-in-out 1; }
[data-nl-nell="listening"] rect { animation: nl-nell-pulse 0.8s ease-in-out infinite; }
[data-nl-nell="listening"] rect[data-q="2"] { animation-delay: 0.2s; }
[data-nl-nell="listening"] rect[data-q="3"] { animation-delay: 0.4s; }
[data-nl-nell="listening"] rect[data-q="4"] { animation-delay: 0.6s; }
[data-nl-nell="thinking"] rect { animation: nl-nell-ripple 1.6s ease-in-out infinite; }
[data-nl-nell="thinking"] rect[data-q="2"] { animation-delay: 0.2s; }
[data-nl-nell="thinking"] rect[data-q="3"] { animation-delay: 0.4s; }
[data-nl-nell="thinking"] rect[data-q="4"] { animation-delay: 0.6s; }
[data-nl-nell="writing"] rect:not([data-q="4"]) { opacity: 0.35; }
[data-nl-nell="writing"] rect[data-q="4"] { animation: nl-nell-walk 2s steps(1) infinite; }
[data-nl-nell="done"] rect[data-q="1"] { animation: nl-nell-nod-1 1.6s ease-in-out 1; }
[data-nl-nell="done"] rect[data-q="2"] { animation: nl-nell-nod-2 1.6s ease-in-out 1; }
[data-nl-nell="done"] rect[data-q="3"] { animation: nl-nell-nod-3 1.6s ease-in-out 1; }
[data-nl-nell="done"] rect[data-q="4"] { animation: nl-nell-nod-4 1.6s ease-in-out 1; }
[data-nl-nell="needs-you"] rect[data-q="4"] { animation: nl-nell-step-hold 0.9s ease-in-out 1 forwards; }
[data-nl-nell="cant"] rect[data-q="1"] { animation: nl-nell-shrug-left 2.4s ease-in-out 2; }
[data-nl-nell="cant"] rect[data-q="2"] { animation: nl-nell-shrug-right 2.4s ease-in-out 2; }
[data-nl-nell="cant"] rect[data-q="4"] { animation: nl-nell-dim 2.4s ease-in-out 2; }

@keyframes nl-nell-blink { 0%, 80%, 100% { opacity: 1; } 88% { opacity: 0.35; } }
@keyframes nl-nell-hello-squares { 0%, 10%, 90%, 100% { transform: none; opacity: 1; } 24%, 76% { transform: scale(0.2); opacity: 0; } }
@keyframes nl-nell-hello-eyes { 0%, 14%, 86%, 100% { transform: scale(0); opacity: 0; } 26%, 74% { transform: scale(1); opacity: 1; } }
@keyframes nl-nell-hello-blink { 0%, 38%, 46%, 100% { transform: scaleY(1); } 42% { transform: scaleY(0.1); } }
@keyframes nl-nell-hello-glance { 0%, 50%, 66%, 100% { transform: translate(0, 0); } 55%, 61% { transform: translate(0.9px, -0.75px); } }
@keyframes nl-nell-hello-smile { 0%, 20%, 82%, 100% { stroke-dashoffset: 1; opacity: 0; } 22% { opacity: 1; } 34%, 70% { stroke-dashoffset: 0; opacity: 1; } 80% { opacity: 1; } }
@keyframes nl-nell-ripple { 0%, 60%, 100% { transform: scale(0.7); } 30% { transform: scale(1.08); } }
@keyframes nl-nell-pulse { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1.15); } }
@keyframes nl-nell-walk { 0%, 100% { transform: none; } 25% { transform: translate(-125%, 0); } 50% { transform: translate(-125%, -125%); } 75% { transform: translate(0, -125%); } }
@keyframes nl-nell-nod-1 { 0%, 30%, 100% { transform: none; } 50%, 70% { transform: translate(18.75%, 18.75%); } }
@keyframes nl-nell-nod-2 { 0%, 30%, 100% { transform: none; } 50%, 70% { transform: translate(-18.75%, 18.75%); } }
@keyframes nl-nell-nod-3 { 0%, 30%, 100% { transform: none; } 50%, 70% { transform: translate(18.75%, -18.75%); } }
@keyframes nl-nell-nod-4 { 0%, 30%, 100% { transform: none; } 50%, 70% { transform: translate(-18.75%, -18.75%); } }
@keyframes nl-nell-step-hold { to { transform: translate(56%, 25%) rotate(14deg); } }
@keyframes nl-nell-shrug-left { 0%, 20%, 80%, 100% { transform: none; } 40%, 60% { transform: translate(-25%, -18.75%); } }
@keyframes nl-nell-shrug-right { 0%, 20%, 80%, 100% { transform: none; } 40%, 60% { transform: translate(25%, -18.75%); } }
@keyframes nl-nell-dim { 0%, 20%, 80%, 100% { opacity: 1; } 40%, 60% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  /* Nell holds still in every state; the state is in words (aria-label, or the status beside it). */
  [data-nl-nell], [data-nl-nell] * { animation: none !important; }
}

.nell-status {
  margin: .35rem 0 0;
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  color: var(--nell-square);
}
.ai-mark {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
}
.ai-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--nell-spark);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nell-spark) 70%, transparent);
  flex: none;
}
.ai-word { font-weight: 800; color: inherit; }

.chat__bar .nell-mark,
.mock__bar .nell-mark { margin-right: .15rem; }