/* v1.189 — larger styled cheer-friend guidance and status messages */
.sn-story-card-v3 .sn-passage-shell,
.sn-story-card-v3 .sn-passage-shell-v3 {
  position: relative;
}

#readingCheerFriend.sn-reading-cheerfriend {
  position: absolute;
  z-index: 7;
  right: clamp(12px, 1.9vw, 24px);
  bottom: clamp(10px, 1.7vw, 22px);
  width: clamp(76px, 9.8vw, 110px);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(22px, 8px, 0);
  transition:
    opacity 220ms ease,
    transform 300ms cubic-bezier(.2, .82, .3, 1.08);
  overflow: visible;
}

#readingCheerFriend.sn-reading-cheerfriend[hidden] {
  display: none !important;
}

#readingCheerFriend.sn-reading-cheerfriend.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#readingCheerFriend .sn-reading-cheer-bubble {
  position: absolute;
  box-sizing: border-box;
  right: 6px;
  bottom: calc(100% - 5px);
  width: clamp(150px, 18vw, 198px);
  max-width: 198px;
  padding: 11px 14px;
  border: 1px solid rgba(126, 176, 121, 0.34);
  border-radius: 18px;
  background: rgba(255, 251, 241, 0.97);
  color: #2f5f3d;
  box-shadow:
    0 10px 22px rgba(76, 111, 82, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-family: "Nunito", sans-serif;
  font-size: clamp(0.92rem, 0.35vw + 0.82rem, 1.02rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transform-origin: 78% 100%;
  transition:
    opacity 180ms ease 70ms,
    transform 220ms cubic-bezier(.2, .82, .3, 1.08) 70ms;
}

#readingCheerFriend .sn-reading-cheer-bubble::after {
  content: "";
  position: absolute;
  right: 38px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(126, 176, 121, 0.34);
  border-bottom: 1px solid rgba(126, 176, 121, 0.34);
  background: rgba(255, 251, 241, 0.97);
  transform: rotate(45deg);
  box-shadow: 3px 3px 8px rgba(76, 111, 82, 0.06);
}

#readingCheerFriend.sn-reading-cheerfriend.is-visible .sn-reading-cheer-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#readingCheerFriend .sn-reading-cheer-animal {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(81, 65, 33, 0.18));
  transform-origin: center bottom;
}

#readingCheerFriend.sn-reading-cheerfriend.is-visible .sn-reading-cheer-animal {
  animation:
    snCheerFriendArrive 500ms cubic-bezier(.18, .8, .26, 1.18) both,
    snCheerFriendIdle 2.8s ease-in-out 520ms infinite;
}

@keyframes snCheerFriendArrive {
  0% {
    transform: translateX(16px) rotate(-4deg) scaleX(-1) scale(0.96);
  }
  55% {
    transform: translateX(-2px) rotate(1deg) scaleX(-1) scale(1.01);
  }
  100% {
    transform: translateX(0) rotate(0deg) scaleX(-1) scale(1);
  }
}

@keyframes snCheerFriendIdle {
  0%, 100% {
    transform: translateY(0) scaleX(-1);
  }
  50% {
    transform: translateY(-3px) scaleX(-1);
  }
}

@media (max-width: 1100px) {
  #readingCheerFriend.sn-reading-cheerfriend {
    right: 10px;
    bottom: 10px;
    width: 92px;
  }

  #readingCheerFriend .sn-reading-cheer-bubble {
    right: 2px;
    bottom: calc(100% - 4px);
    width: 172px;
    max-width: 172px;
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  #readingCheerFriend .sn-reading-cheer-bubble::after {
    right: 34px;
  }
}

@media (max-width: 760px) {
  #readingCheerFriend.sn-reading-cheerfriend {
    right: 8px;
    bottom: 8px;
    width: 74px;
  }

  #readingCheerFriend .sn-reading-cheer-bubble {
    right: -2px;
    bottom: calc(100% - 3px);
    width: 156px;
    max-width: 156px;
    padding: 9px 11px;
    font-size: 0.82rem;
  }

  #readingCheerFriend .sn-reading-cheer-bubble::after {
    right: 28px;
    bottom: -7px;
    width: 12px;
    height: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #readingCheerFriend.sn-reading-cheerfriend,
  #readingCheerFriend .sn-reading-cheer-bubble,
  #readingCheerFriend .sn-reading-cheer-animal {
    transition: none !important;
    animation: none !important;
  }

  #readingCheerFriend .sn-reading-cheer-animal {
    transform: scaleX(-1) !important;
  }
}

/* v1.189 — larger, structured cheer copy with safe HTML emphasis. */
#readingCheerFriend .sn-cheer-title,
#readingCheerFriend .sn-cheer-body {
  display: block;
}

#readingCheerFriend .sn-cheer-title {
  color: #245637;
  font-size: 1.1em;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

#readingCheerFriend .sn-cheer-body {
  margin-top: 0.34em;
  color: #416f4d;
  font-size: 0.9em;
  font-weight: 800;
  line-height: 1.28;
}

#readingCheerFriend .sn-cheer-highlight {
  display: inline;
  padding: 0 0.18em;
  border-radius: 0.45em;
  background: rgba(238, 193, 79, 0.22);
  color: #6a4c13;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

html[data-sn-theme="dark"] #readingCheerFriend .sn-reading-cheer-bubble {
  border-color: rgba(172, 222, 163, 0.22);
  background: rgba(26, 46, 35, 0.95);
  color: #f3fff1;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-sn-theme="dark"] #readingCheerFriend .sn-reading-cheer-bubble::after {
  border-right-color: rgba(172, 222, 163, 0.22);
  border-bottom-color: rgba(172, 222, 163, 0.22);
  background: rgba(26, 46, 35, 0.95);
}

html[data-sn-theme="dark"] #readingCheerFriend .sn-cheer-title {
  color: #efffec;
}

html[data-sn-theme="dark"] #readingCheerFriend .sn-cheer-body {
  color: #cbe8cf;
}

html[data-sn-theme="dark"] #readingCheerFriend .sn-cheer-highlight {
  background: rgba(245, 203, 90, 0.18);
  color: #ffe7a3;
}

/* v1.186 — returning-reader greeting uses the cheer friend */
#readingCheerFriend .sn-reading-cheer-bubble.is-welcome {
  width: clamp(196px, 24vw, 258px);
  max-width: 258px;
  padding: 13px 16px;
  font-size: clamp(0.98rem, 0.38vw + 0.87rem, 1.08rem);
  line-height: 1.24;
}

@media (max-width: 1100px) {
  #readingCheerFriend .sn-reading-cheer-bubble.is-welcome {
    width: 214px;
    max-width: 214px;
    font-size: 0.94rem;
  }
}

@media (max-width: 760px) {
  #readingCheerFriend .sn-reading-cheer-bubble.is-welcome {
    width: 174px;
    max-width: 174px;
    padding: 10px 12px;
    font-size: 0.84rem;
  }
}


/* v1.188 — longer transient story guidance uses the same speech bubble. */
#readingCheerFriend .sn-reading-cheer-bubble.is-guidance,
#readingCheerFriend .sn-reading-cheer-bubble.is-status {
  width: clamp(198px, 25vw, 266px);
  max-width: 266px;
  padding: 13px 16px;
  font-size: clamp(0.98rem, 0.38vw + 0.87rem, 1.08rem);
  line-height: 1.26;
}

@media (max-width: 1100px) {
  #readingCheerFriend .sn-reading-cheer-bubble.is-guidance,
  #readingCheerFriend .sn-reading-cheer-bubble.is-status {
    width: 220px;
    max-width: 220px;
    font-size: 0.94rem;
  }
}

@media (max-width: 760px) {
  #readingCheerFriend .sn-reading-cheer-bubble.is-guidance,
  #readingCheerFriend .sn-reading-cheer-bubble.is-status {
    width: 178px;
    max-width: 178px;
    padding: 10px 12px;
    font-size: 0.84rem;
  }
}