:root {
  --bubble-bg: rgba(255, 255, 255, 0.97);
  --bubble-text: #352b62;
  --bubble-accent: #8d6bff;
  --bubble-accent-2: #cbaeff;
  --bubble-border: rgba(141, 107, 255, 0.32);

  --redeem-bg: rgba(95, 58, 182, 0.96);
  --redeem-text: #ffffff;
  --redeem-border: rgba(255, 255, 255, 0.24);

  --shadow-soft: 0 16px 40px rgba(29, 14, 64, 0.24);
  --shadow-strong: 0 18px 46px rgba(29, 14, 64, 0.32);

  --avatar-width: 420px;
  --bubble-min-width: 420px;
  --bubble-max-width: 720px;

  --clippy-font: "Comic Sans MS", "Comic Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  --ui-font: "Segoe UI", Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: var(--ui-font);
}

#overlay-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
}

/* ===== Audio unlock overlay ===== */

#audio-unlock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 30, 0.72);
  z-index: 99999;
  pointer-events: auto;
}

#audio-unlock-btn {
  appearance: none;
  border: none;
  background: #8d6bff;
  color: white;
  border-radius: 14px;
  padding: 16px 24px;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--ui-font);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  position: relative;
  z-index: 100000;
}

#audio-unlock-btn:hover {
  filter: brightness(1.05);
}

#audio-unlock-btn:active {
  transform: translateY(1px);
}

/* Only unlock overlay should take clicks */
#pinny-stage,
#pinny-wrap,
#pinny-avatar,
#pinny-image-idle,
#pinny-image-talk,
#chat-bubble,
#redeem-toast {
  pointer-events: none;
}

/* ===== Stage ===== */

#pinny-stage {
  position: absolute;
  right: 28px;
  bottom: 18px;
}

#pinny-wrap {
  position: relative;
  width: var(--avatar-width);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform-origin: bottom right;
}

/* ===== Avatar ===== */

#pinny-avatar {
  position: relative;
  width: var(--avatar-width);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#pinny-avatar::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 60%;
  transform: translateX(-50%);

  width: 75%;
  height: 34px;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.50) 35%,
    rgba(0,0,0,0.25) 65%,
    transparent 100%
  );

  border-radius: 50%;
  filter: blur(10px);
  z-index: -1;
}

#pinny-image-idle,
#pinny-image-talk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  user-select: none;
  -webkit-user-drag: none;
}

#pinny-image-idle {
  opacity: 1;
}

#pinny-image-talk {
  opacity: 0;
}

#pinny-wrap.idle #pinny-image-idle,
#pinny-wrap.thinking #pinny-image-idle {
  opacity: 1;
}

#pinny-wrap.idle #pinny-image-talk,
#pinny-wrap.thinking #pinny-image-talk {
  opacity: 0;
}

#pinny-wrap.talking #pinny-image-idle {
  opacity: 0;
}

#pinny-wrap.talking #pinny-image-talk {
  opacity: 1;
}

#pinny-wrap.idle #pinny-avatar {
  animation: floatIdle 3.2s ease-in-out infinite;
}

#pinny-wrap.talking #pinny-avatar {
  animation: talkBounce 0.45s ease-in-out infinite alternate;
}

#pinny-wrap.thinking #pinny-avatar {
  animation: thinkPulse 1.15s ease-in-out infinite;
}

#pinny-image-idle,
#pinny-image-talk {
  transition: opacity 120ms ease;
}

/* ===== Bubble ===== */

#chat-bubble {
  position: absolute;
  bottom: 100%;
  right: 18px;
  margin-bottom: 14px;

  min-width: var(--bubble-min-width);
  max-width: var(--bubble-max-width);
  min-height: 122px;
  padding: 18px 20px;
  border-radius: 26px;
  background: var(--bubble-bg);
  color: var(--bubble-text);
  border: 3px solid var(--bubble-border);
  box-shadow: var(--shadow-soft);
  transform-origin: bottom right;
  backdrop-filter: blur(4px);
  z-index: 4;
}

#pinny-wrap.idle #chat-bubble.show,
#pinny-wrap.thinking #chat-bubble.show {
  animation: bubbleFloat 3s ease-in-out infinite;
}

#pinny-wrap.talking #chat-bubble.show {
  animation: bubbleTalkBounce 0.65s ease-in-out infinite alternate;
}

#chat-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 72px;
  width: 24px;
  height: 24px;
  background: var(--bubble-bg);
  border-left: 3px solid var(--bubble-border);
  border-bottom: 3px solid var(--bubble-border);
  transform: rotate(-45deg);
}

.bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#chat-user {
  font-family: var(--clippy-font);
  font-size: 20px;
  font-weight: 900;
  color: var(--bubble-accent);
  letter-spacing: 0.01em;
}

#chat-state {
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8e7fc4;
  background: rgba(141, 107, 255, 0.10);
  border: 1px solid rgba(141, 107, 255, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
}

#chat-text {
  font-family: var(--clippy-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.2px;
  white-space: pre-wrap;
  word-break: break-word;
  text-wrap: pretty;
}

#chat-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  height: 18px;
}

#chat-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--bubble-accent-2);
  animation: dotPulse 1s infinite ease-in-out;
}

#chat-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

#chat-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

/* ===== Redeem toast ===== */

#redeem-toast {
  position: absolute;
  top: 34px;
  right: 34px;
  min-width: 280px;
  max-width: 540px;
  padding: 15px 18px;
  border-radius: 18px;
  background: var(--redeem-bg);
  color: var(--redeem-text);
  border: 2px solid var(--redeem-border);
  box-shadow: var(--shadow-strong);
  z-index: 10;
}

.redeem-title {
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.86;
  margin-bottom: 6px;
}

.redeem-body {
  font-family: var(--clippy-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

/* ===== Visibility ===== */

.hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  pointer-events: none;
}

.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#chat-bubble,
#redeem-toast {
  transition: opacity 220ms ease, transform 220ms ease;
}

/* ===== Animations ===== */

@keyframes floatIdle {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

@keyframes talkBounce {
  from { transform: translateY(0px) rotate(-1deg); }
  to { transform: translateY(-6px) rotate(1deg); }
}

@keyframes thinkPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes bubbleFloat {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-3px) scale(1.003); }
  100% { transform: translateY(0px) scale(1); }
}

@keyframes bubbleTalkBounce {
  from { transform: translateY(0px) scale(1); }
  to { transform: translateY(-4px) scale(1.005); }
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ===== OBS-friendly scaling ===== */

@media (max-width: 1600px) {
  :root {
    --avatar-width: 360px;
    --bubble-min-width: 360px;
    --bubble-max-width: 620px;
  }

  #chat-text {
    font-size: 24px;
  }

  #chat-bubble::after {
    right: 62px;
  }
}

@media (max-width: 1280px) {
  :root {
    --avatar-width: 300px;
    --bubble-min-width: 320px;
    --bubble-max-width: 520px;
  }

  #chat-user {
    font-size: 18px;
  }

  #chat-text {
    font-size: 22px;
  }

  .redeem-body {
    font-size: 20px;
  }

  #chat-bubble::after {
    right: 52px;
  }
}