.chat-border {
  border: 4px solid #0000;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(
        var(--angle),
        var(--color-saffron) 27%,
        var(--color-verdigris) 51%,
        var(--color-lavender) 74%
      )
      border-box;
  animation: 3s rotateBackground linear infinite;
}

@keyframes rotateBackground {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/*
 * Scroll-driven fade mask on the message log.
 *
 * Two @property custom properties hold the current fade band sizes and are
 * animated via scroll(self) — no JS required.
 *
 * Top fade:    0px → 48px as scroll goes 0 → 48px from the top
 * Bottom fade: 48px → 0px as scroll goes from (max − 48px) → max
 *
 * When content doesn't overflow the bottom animation is past its end range
 * at rest, so --chat-fade-bottom stays at 0px (no spurious bottom fade).
 */
@property --chat-fade-top {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

@property --chat-fade-bottom {
  syntax: '<length>';
  initial-value: 48px;
  inherits: false;
}

.chat-message-log {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--chat-fade-top),
    black calc(100% - var(--chat-fade-bottom)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--chat-fade-top),
    black calc(100% - var(--chat-fade-bottom)),
    transparent
  );

  animation:
    chat-fade-top-in linear both,
    chat-fade-bottom-out linear both;
  animation-timeline: scroll(self), scroll(self);
  animation-range:
    0px 48px,
    calc(100% - 48px) 100%;
}

@keyframes chat-fade-top-in {
  from {
    --chat-fade-top: 0px;
  }
  to {
    --chat-fade-top: 48px;
  }
}

@keyframes chat-fade-bottom-out {
  from {
    --chat-fade-bottom: 48px;
  }
  to {
    --chat-fade-bottom: 0px;
  }
}
