/*
 * Badges — mood indicator, notification counts, unread dots, chips.
 * Colour always accompanies text or an icon, never alone.
 */

/* ---- Mood ---- */

.mood {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-comment);
  white-space: nowrap;
}

.mood--sm {
  font-size: var(--text-xs);
}

.mood--lg {
  font-size: var(--text-md);
}

.mood__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background-color: var(--color-comment);
  flex-shrink: 0;
}

.mood[data-mood="active"] .mood__dot      { background-color: var(--color-green); box-shadow: var(--glow-green); }
.mood[data-mood="meeting"] .mood__dot     { background-color: var(--color-orange); }
.mood[data-mood="out_sick"] .mood__dot    { background-color: var(--color-red); }
.mood[data-mood="vacationing"] .mood__dot { background-color: var(--color-cyan); }
.mood[data-mood="custom"] .mood__dot      { background-color: var(--color-purple); }

/* Predefined and custom moods show an emoji (Twemoji) in place of the dot. */
.mood__emoji {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1;
}

.mood {
  max-width: 100%;
}

.mood__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Notification count ---- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-night);
  background-color: var(--color-pink);
  border-radius: 9px;
}

.badge:empty,
.badge[data-count="0"] {
  display: none;
}

/* ---- Unread dot ---- */

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background-color: var(--color-pink);
  box-shadow: var(--glow-pink);
  flex-shrink: 0;
}

/* ---- Chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  border-radius: var(--radius-subtle);
  color: var(--color-comment);
  background-color: var(--color-deep-night);
}

.chip--muted   { color: var(--color-comment); }
.chip--warning { color: var(--color-orange); background-color: rgba(255, 202, 128, 0.1); }
.chip--danger  { color: var(--color-red); background-color: rgba(255, 149, 128, 0.1); }
.chip--info    { color: var(--color-cyan); background-color: rgba(128, 255, 234, 0.1); }

/* Meet: a dot when something is unread but nobody mentioned the member. */
.badge.meet-badge--dot {
  width: 8px;
  min-width: 0;
  height: 8px;
  padding: 0;
}