/* One unframed line; showing or clearing feedback never moves the jaw. */
.brushing-feedback {
  display: grid;
  margin: 4px 0;
  pointer-events: none;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}
.feedback-message {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 1.4em;
  color: #e6fffa;
  white-space: nowrap;
  opacity: 0;
}
.feedback-message > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#feedbackSecondary {
  flex-shrink: 0;
  max-width: 50%;
}
#feedbackSecondary:empty {
  display: none;
}
.feedback-message.visible {
  opacity: 1;
}
.feedback-message.is-guidance {
  color: #ffedb7;
}
.coach-card.profile-view .brushing-feedback {
  display: none;
}
#diamondCelebration.visible {
  border-color: #c4a1ff;
  box-shadow:
    0 0 0 2px #ba8aff,
    0 0 14px #9865ed66;
  animation: diamondCounterGlow 900ms ease-out;
}
@keyframes diamondCounterGlow {
  from {
    box-shadow:
      0 0 0 2px #e0caff,
      0 0 18px #9865ed99;
  }
  to {
    box-shadow:
      0 0 0 2px #ba8aff,
      0 0 14px #9865ed66;
  }
}
@media (prefers-reduced-motion: reduce) {
  #diamondCelebration.visible {
    animation: none;
  }
}

/* A separate layer keeps ordinary collection pulses from restarting the streak. */
#coinCounter {
  position: relative;
}
#goldCoinCelebration {
  position: absolute;
  inset: -2px;
  border: 1px solid #ffdf81;
  border-radius: inherit;
  box-shadow: 0 0 9px #f7bf4566;
  pointer-events: none;
  opacity: 0;
}
#goldCoinCelebration.visible {
  opacity: 1;
  animation: goldCoinHalo 900ms ease-out;
}
#goldCoinCelebration i {
  position: absolute;
  color: #ffe6a1;
  font: normal 10px/1 sans-serif;
  opacity: 0;
}
#goldCoinCelebration i:nth-child(1) {
  left: 5px;
  top: -4px;
  --spark-y: -4px;
}
#goldCoinCelebration i:nth-child(2) {
  right: 4px;
  top: -3px;
  --spark-y: -3px;
}
#goldCoinCelebration i:nth-child(3) {
  left: 10px;
  bottom: -3px;
  --spark-y: 3px;
}
#goldCoinCelebration i:nth-child(4) {
  right: 9px;
  bottom: -4px;
  --spark-y: 4px;
}
#goldCoinCelebration.visible i {
  animation: goldCoinSparkle 900ms ease-out;
}
@keyframes goldCoinHalo {
  0%,
  100% {
    opacity: 0;
  }
  20%,
  65% {
    opacity: 1;
  }
}
@keyframes goldCoinSparkle {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--spark-y)) scale(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  #goldCoinCelebration.visible,
  #goldCoinCelebration.visible i {
    animation: none;
  }
}