/* Stick figures. Photos are printed, so they keep their light colours in dark
   mode; figures without a backdrop draw in the page's ink. */
.figure { display: inline-block; overflow: visible; --figure-ink: var(--ink); --figure-face: var(--surface); }
.figure--photo { --figure-ink: #22252d; --figure-face: #fffdf8; }
.figure__backdrop { fill: #cfe0f5; }

.figure__line { fill: none; stroke: var(--figure-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.figure__line--thin { stroke-width: 2; }
.figure__head, .figure__dress { fill: var(--figure-face); stroke: var(--figure-ink); stroke-width: 3; stroke-linejoin: round; }
.figure__eye { fill: var(--figure-ink); }

/* A real photo, cropped round like the stick figures' photos. */
.portrait { display: inline-block; border-radius: 50%; object-fit: cover; background: #cfe0f5; }

/* A burst of confetti for a resolved conversation or a sent message. */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.confetti span {
  position: absolute;
  bottom: -20px;
  border-radius: 2px;
  background: var(--accent);
  animation: toss var(--duration, 1.4s) cubic-bezier(.2,.7,.3,1) var(--delay, 0s) 1 forwards;
}

.confetti span:nth-child(3n) { background: var(--coral); }
.confetti span:nth-child(3n + 1) { background: var(--amber); }
.confetti span:nth-child(4n) { background: var(--mint); }

@keyframes toss {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--drift, 0), -100vh) rotate(var(--spin, 360deg)); opacity: 0; }
}

.empty {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.empty .figure { width: 100px; height: 100px; margin-bottom: 0.5rem; }
.empty p { margin: 0 auto; }