/* ============ EMBEDDY — virtual companion ============ */
#npc {
  position: fixed; left: 16px; bottom: 16px; z-index: 55;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* ---- character button ---- */
#npc-char {
  position: relative;
  background: none; border: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#npc-char svg { display: block; filter: drop-shadow(0 6px 18px rgba(34, 211, 238, .25)); }
#npc-char:hover svg { filter: drop-shadow(0 6px 24px rgba(232, 121, 249, .4)); }
#npc-hint {
  position: absolute; top: -6px; left: 86px;
  font-size: 7px; color: var(--gold, #facc15); white-space: nowrap;
  background: rgba(16, 26, 46, .92);
  border: 1px solid var(--gold, #facc15);
  border-radius: 8px 8px 8px 0;
  padding: 7px 9px;
  animation: npc-hint-bob 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes npc-hint-bob { 50% { transform: translateY(-5px); } }

/* ---- float / bob ---- */
.npc-float { animation: npc-float 3.2s ease-in-out infinite; }
@keyframes npc-float { 50% { transform: translateY(-7px); } }
#npc.exp-excited .npc-float { animation: npc-bounce .45s ease-in-out infinite; }
@keyframes npc-bounce { 50% { transform: translateY(-14px); } }
.npc-antenna { animation: npc-pulse 1.8s ease-in-out infinite; }
@keyframes npc-pulse { 50% { opacity: .35; } }

/* ---- arms ---- */
.arm { transform-box: fill-box; transform-origin: center 20%; }
#npc.wave .arm-r { animation: npc-wave .55s ease-in-out 3; }
@keyframes npc-wave { 50% { transform: rotate(-55deg) translateY(-6px); } }
#npc.exp-excited .arm-l, #npc.exp-excited .arm-r { animation: npc-arms .45s ease-in-out infinite; }
@keyframes npc-arms { 50% { transform: rotate(25deg); } }
#npc.exp-excited .arm-l { animation-name: npc-arms-l; }
@keyframes npc-arms-l { 50% { transform: rotate(-25deg); } }

/* ---- expression part visibility ---- */
#npc .eyes, #npc .mouth, #npc .cheek, #npc .sweat { display: none; }
#npc.exp-idle  .eyes-normal,
#npc.exp-think .eyes-normal,
#npc.exp-shy   .eyes-normal { display: block; }
#npc.exp-happy   .eyes-happy,
#npc.exp-excited .eyes-happy { display: block; }
#npc.exp-sad  .eyes-sad  { display: block; }
#npc.exp-cool .eyes-cool { display: block; }

#npc.exp-idle .mouth-idle, #npc.exp-cool .mouth-idle { display: block; }
#npc.exp-happy .mouth-happy, #npc.exp-excited .mouth-happy { display: block; }
#npc.exp-sad   .mouth-sad { display: block; }
#npc.exp-think .mouth-o, #npc.exp-shy .mouth-o { display: block; }

#npc.exp-happy .cheek, #npc.exp-excited .cheek, #npc.exp-shy .cheek { display: block; }
#npc.exp-think .sweat { display: block; animation: npc-sweat 1.6s ease-in-out infinite; }
@keyframes npc-sweat { 50% { transform: translateY(4px); opacity: .5; } }

/* eyes: blink + thinking glance */
.eyes-normal { transform-box: fill-box; transform-origin: center; animation: npc-blink 4.4s infinite; }
@keyframes npc-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
#npc.exp-think .eyes-normal { animation: none; transform: translate(5px, -4px); }
#npc.exp-shy .eyes-normal { animation: none; transform: scaleY(.55); }

/* talking mouth overrides everything */
#npc .mouth-talk { transform-box: fill-box; transform-origin: center; }
#npc.talking .mouth { display: none; }
#npc.talking .mouth-talk { display: block; animation: npc-talk .26s ease-in-out infinite alternate; }
@keyframes npc-talk { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ---- dialogue panel ---- */
#npc-panel {
  width: min(400px, calc(100vw - 32px));
  background: rgba(12, 19, 34, .96);
  backdrop-filter: blur(10px);
  border: 2px solid var(--line, #233454);
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(34, 211, 238, .12);
  overflow: hidden;
  display: flex; flex-direction: column;
}
#npc-panel[hidden] { display: none; }
.npc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(232, 121, 249, .12));
  border-bottom: 1px solid var(--line, #233454);
}
.npc-head .npc-title {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; color: var(--cyan, #22d3ee); letter-spacing: 1px;
}
.npc-head .npc-sub { font-size: 11px; color: var(--muted, #93a4c4); margin-top: 4px; }
#npc-close {
  background: none; border: 1px solid var(--line, #233454); border-radius: 8px;
  color: var(--muted, #93a4c4); font-size: 16px; line-height: 1;
  width: 30px; height: 30px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
#npc-close:hover { color: var(--gold, #facc15); border-color: var(--gold, #facc15); }

#npc-log {
  height: min(310px, 42svh);
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #233454 transparent;
}
.npc-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.npc-msg.bot {
  align-self: flex-start;
  background: #15213a;
  border: 1px solid var(--line, #233454);
  border-bottom-left-radius: 4px;
  color: var(--text, #e7eefc);
}
.npc-msg.user {
  align-self: flex-end;
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(34, 211, 238, .4);
  border-bottom-right-radius: 4px;
  color: #c9f4fd;
}
.npc-msg.typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 16px; }
.npc-msg.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan, #22d3ee);
  animation: npc-dot 1.2s ease-in-out infinite;
}
.npc-msg.typing i:nth-child(2) { animation-delay: .18s; }
.npc-msg.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes npc-dot { 30% { transform: translateY(-5px); opacity: .45; } }

#npc-form {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line, #233454);
}
#npc-input {
  flex: 1; min-width: 0;
  background: #0a1120;
  border: 1px solid var(--line, #233454);
  border-radius: 10px;
  color: var(--text, #e7eefc);
  font: inherit; font-size: 14px;
  padding: 11px 13px;
}
#npc-input::placeholder { color: #5b6c8f; }
#npc-input:focus { outline: none; border-color: var(--cyan, #22d3ee); }
#npc-send {
  font-family: "Press Start 2P", monospace; font-size: 8px;
  background: var(--cyan, #22d3ee); color: #06222b;
  border: none; border-radius: 10px;
  padding: 0 16px; cursor: pointer;
  transition: background-color .2s, box-shadow .2s, opacity .2s;
}
#npc-send:hover:not(:disabled) { background: #7eeafc; box-shadow: 0 0 18px rgba(34, 211, 238, .45); }
#npc-send:disabled { opacity: .45; cursor: default; }

@media (max-width: 560px) {
  #npc-char svg { width: 104px; height: 94px; }
  #npc-hint { left: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .npc-float, .npc-antenna, #npc-hint, .eyes-normal,
  #npc.talking .mouth-talk, #npc.exp-think .sweat { animation: none !important; }
}