/* ==========================================================================
   Niwa Chatbot – Notification Badge
   ---------------------------------------------------------------------------
   Small circle on the chathead indicating unread message count.
   Positioned top-right with pop-in animation.
   TOKENS: --niwa-color-error (red dot), --niwa-font-size-xs
   ========================================================================== */

.niwa-chathead__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--niwa-radius-full);
  background: var(--niwa-color-error);
  color: #FFFFFF;
  font-size: var(--niwa-font-size-xs);
  font-weight: var(--niwa-font-weight-bold);
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--niwa-color-surface-raised);
  animation: niwa-pop-in 300ms var(--niwa-animation-bounce) both;
}

/* Hide badge when count is 0 or missing */
.niwa-chathead__badge:empty,
.niwa-chathead__badge[data-count="0"] {
  display: none;
}

/* ── Morph pill badge (defined in morph.css, extended here) ──────────────── */
/* Badge styles for the morph pill are in niwa-morph.css (.niwa-morph__badge)
   and niwa-centerstage.css (.niwa-center__badge). This file covers only
   the legacy chathead badge variant. */