/* ─── Chip Component — Soft UI Pill ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px; /* Pill shape */
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  background: var(--surface);
  box-shadow: var(--nm-flat);
  color: var(--text-body);
  border: 1px solid rgba(0,0,0,0.02);
}

/* Success Chip — Brand Tinted NM */
.chip--success {
  background: var(--success);
  color: var(--text-on-brand);
  box-shadow: 4px 4px 8px rgba(var(--success-rgb), 0.2), 
              -4px -4px 8px rgba(var(--success-rgb), 0.1);
}

/* Danger Chip — Brand Tinted NM */
.chip--danger {
  background: var(--danger);
  color: var(--text-on-brand);
  box-shadow: 4px 4px 8px rgba(var(--danger-rgb), 0.2), 
              -4px -4px 8px rgba(var(--danger-rgb), 0.1);
}

/* Warning & Pending — Accent Tinted NM */
.chip--warning,
.chip--pending {
  background: var(--accent);
  color: var(--text-on-brand);
  box-shadow: 4px 4px 8px rgba(var(--accent-rgb), 0.2), 
              -4px -4px 8px rgba(var(--accent-rgb), 0.1);
}

/* Role badge — Subtle Inset NM */
.chip--role {
  background: var(--surface);
  box-shadow: var(--nm-inset);
  color: var(--primary);
  text-transform: none;
  font-size: .8rem;
  padding: 3px 10px;
}

/* Mobile responsive appbar chips */
#appBar .chip { display: none; }

@media (min-width: 600px) {
  #appBar .chip { display: inline-flex; }
}