/* Lane B owns this file. Everything below styles what lives *inside* the four flair slots;
   the slots themselves and the page layout are Lane A's. */

/* ---- voice: the mute toggle and the "she is talking" pulse ------------------------ */
.flair-mute {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3em 0.9em;
  cursor: pointer;
  opacity: 0.85;
}
.flair-mute:hover,
.flair-mute:focus-visible {
  opacity: 1;
}
.flair-mute.is-muted {
  text-decoration: line-through;
  opacity: 0.6;
}
.flair-voice-live {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.5em;
  border-radius: 50%;
  background: #c94f43;
  vertical-align: middle;
  animation: flair-pulse 0.9s ease-in-out infinite;
}
.flair-voice-live[hidden] {
  display: none;
}
@keyframes flair-pulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* ---- receipt: one small control per message ------------------------------------- */
.flair-receipts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.flair-receipt-btn {
  appearance: none;
  border: 1px dashed currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25em 0.7em;
  cursor: pointer;
  opacity: 0.8;
}
.flair-receipt-btn:hover,
.flair-receipt-btn:focus-visible {
  opacity: 1;
  border-style: solid;
}
.flair-receipt-btn[disabled] {
  cursor: default;
  opacity: 0.4;
}

/* ---- wall of shame -------------------------------------------------------------- */
.flair-wall-title {
  margin: 0 0 0.2em;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flair-wall-sub {
  margin: 0 0 0.8em;
  font-size: 0.8rem;
  opacity: 0.7;
}
.flair-wall-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.flair-burn {
  padding: 0.6em 0.8em;
  border-left: 3px solid #c9a86a;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 6px 6px 0;
  animation: flair-drop 0.35s ease-out;
}
.flair-burn-text {
  display: block;
  font-style: italic;
  line-height: 1.35;
}
.flair-burn-text::before,
.flair-burn-text::after {
  content: "";
}
.flair-burn-meta {
  display: block;
  margin-top: 0.3em;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.flair-tier-1 {
  border-left-color: #d79a9a;
}
.flair-tier-2 {
  border-left-color: #d0705f;
}
.flair-tier-3 {
  border-left-color: #b8402f;
}
.flair-tier-4 {
  border-left-color: #8d1f14;
  background: rgba(201, 79, 67, 0.12);
}
.flair-tier-5 {
  border-left-color: #27333f;
  background: rgba(39, 51, 63, 0.12);
}
@keyframes flair-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}