/* Hoastie avatar. The cap mark is the original hoastnow render, not a redraw.
   Stage colors are the character's studio grounds. Chat uses data-theme=transparent
   so the figure sits on the surrounding surface. */
.hoastie {
  --hoastie-size: 2.5rem;
  position: relative;
  width: var(--hoastie-size);
  height: var(--hoastie-size);
  display: inline-block;
  flex-shrink: 0;
  background: #F3EEE8;
  border-radius: 28px;
  overflow: hidden;
  line-height: 0;
}
.hoastie.size-launcher { --hoastie-size: 2.75rem; }
.hoastie.size-header { --hoastie-size: 2rem; }
.hoastie.size-message { --hoastie-size: 3rem; }
.hoastie.size-welcome { --hoastie-size: 6.75rem; }
.hoastie.size-contact { --hoastie-size: 5.5rem; }
.hoastie[data-theme="dark"] { background: #1A1A1A; }
.hoastie[data-theme="transparent"] { background: transparent; border-radius: 0; }
.hoastie .stage,
.hoastie .rig,
.hoastie img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hoastie img { object-fit: contain; pointer-events: none; user-select: none; }
.hoastie .rig { transform-origin: 50% 84.77%; }
.hoastie .eyes { transform-origin: 50% 55.08%; }
.hoastie .mouth { opacity: 0; }
.hoastie .shadow { opacity: 0.34; }
.hoastie[data-theme="dark"] .shadow { opacity: 0.62; }
.hoastie[data-theme="transparent"] .shadow { opacity: 0.3; }

.hoastie[data-state="idle"] .mouth.smile { opacity: 1; }
.hoastie[data-state="speaking"] .mouth.smile { animation: hoastie-speak-smile 2.5s linear infinite; }
.hoastie[data-state="speaking"] .mouth.sm { animation: hoastie-speak-sm 2.5s linear infinite; }
.hoastie[data-state="speaking"] .mouth.o { animation: hoastie-speak-o 2.5s linear infinite; }
.hoastie[data-state="thinking"] .mouth.flat { opacity: 1; }
.hoastie[data-state="happy"] .mouth.wide { opacity: 1; }

.hoastie[data-state="idle"] .rig { animation: hoastie-breath 2.5s ease-in-out infinite; }
.hoastie[data-state="idle"] .eyes { animation: hoastie-blink 2.5s linear infinite; }
.hoastie[data-state="speaking"] .rig { animation: hoastie-bob 2.5s linear infinite; }
.hoastie[data-state="thinking"] .rig { animation: hoastie-sway 3s ease-in-out infinite; }
.hoastie[data-state="thinking"] .eyes {
  transform-origin: 50% calc(55.08% + -4.4%);
  animation: hoastie-look 3s linear infinite;
}
.hoastie[data-state="happy"] .rig { animation: hoastie-bounce 2s linear infinite; }
.hoastie[data-state="happy"] .shadow { animation: hoastie-shadow 2s linear infinite; }

.hoastie.is-still .rig,
.hoastie.is-still .eyes,
.hoastie.is-still .mouth,
.hoastie.is-still .shadow { animation: none !important; }
.hoastie.is-still[data-state="speaking"] .mouth.o { opacity: 1; }
.hoastie.is-still[data-state="speaking"] .mouth.smile { opacity: 0; }
.hoastie.is-still[data-state="thinking"] .eyes { transform: translateY(-4.4%); }

/* Authenticated chrome is charcoal. A light contact shadow disappears there. */
html[data-theme="dark"] .body-app .hoastie[data-theme="transparent"] .shadow { opacity: 0.55; }

.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 0.7rem;
}
.thinking-dots span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--text-secondary);
  animation: thinking-dot 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@keyframes hoastie-breath {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-2.8%) scale(0.982, 1.038); }
}
@keyframes hoastie-blink {
  0%, 56%, 78%, 100% { transform: scaleY(1); }
  67% { transform: scaleY(0.06); }
}
@keyframes hoastie-bob {
  0%, 8%, 34%, 44%, 72%, 82%, 100% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(-4.6%) scale(0.99, 1.02); }
  24%, 62% { transform: translateY(-3.6%) scale(0.988, 1.024); }
  56% { transform: translateY(-4%) scale(0.989, 1.022); }
}
@keyframes hoastie-speak-smile {
  0%, 8%, 34%, 44%, 72%, 82%, 100% { opacity: 1; }
  15%, 24%, 52%, 62%, 92% { opacity: 0; }
}
@keyframes hoastie-speak-sm {
  0%, 8%, 24%, 44%, 62%, 82%, 100% { opacity: 0; }
  15%, 92% { opacity: 1; }
  34%, 72% { opacity: 0.28; }
}
@keyframes hoastie-speak-o {
  0%, 15%, 34%, 44%, 72%, 92%, 100% { opacity: 0; }
  24%, 62% { opacity: 1; }
  52% { opacity: 0.9; }
}
@keyframes hoastie-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2.6deg); }
  75% { transform: rotate(-2.6deg); }
}
@keyframes hoastie-look {
  0%, 46%, 58%, 100% { transform: translateY(-4.4%) scaleY(1); }
  52% { transform: translateY(-4.4%) scaleY(0.06); }
}
@keyframes hoastie-bounce {
  0%, 50%, 100% { transform: translateY(0) scale(1.04, 0.93); }
  12% { transform: translateY(-9%) scale(0.976, 1.042); }
  25% { transform: translateY(0) scale(1.032, 0.94); }
  37% { transform: translateY(-5.4%) scale(0.984, 1.03); }
}
@keyframes hoastie-shadow {
  0%, 50%, 100% { transform: scaleX(1.08); }
  12% { transform: scaleX(0.82); opacity: 0.14; }
  37% { transform: scaleX(0.9); opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
  .hoastie .rig,
  .hoastie .eyes,
  .hoastie .mouth,
  .hoastie .shadow { animation: none !important; }
  .hoastie[data-state="speaking"] .mouth.o { opacity: 1; }
  .hoastie[data-state="speaking"] .mouth.smile { opacity: 0; }
  .hoastie[data-state="thinking"] .eyes { transform: translateY(-4.4%); }
  .thinking-dots span { animation: none; opacity: 0.7; }
}