/* Header brand avatar: border + shadow pulse; initials embolden in sync */
.tm-brand-avatar-pulse-wrap {
  display: inline-flex;
}

.tm-brand-avatar-pulse-target {
  border-style: solid !important;
  animation: tm-brand-avatar-chrome-pulse 4.2s ease-in-out infinite;
}

.tm-brand-avatar-pulse-target > * {
  animation: tm-brand-avatar-text-pulse 4.2s ease-in-out infinite;
}

@keyframes tm-brand-avatar-chrome-pulse {
  0%,
  100% {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 30%, transparent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--mantine-color-black) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 12%, transparent);
  }

  50% {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 92%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mantine-color-black) 48%, transparent),
      0 0 22px color-mix(in srgb, var(--mantine-color-orange-5) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 45%, transparent);
  }
}

@keyframes tm-brand-avatar-text-pulse {
  0%,
  100% {
    font-weight: 600;
    letter-spacing: normal;
  }

  50% {
    font-weight: 900;
    letter-spacing: 0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-brand-avatar-pulse-target {
    animation: none;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 35%, transparent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--mantine-color-black) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 18%, transparent);
  }

  .tm-brand-avatar-pulse-target > * {
    animation: none;
    font-weight: 700;
    letter-spacing: normal;
  }
}

/* Rectangular surfaces: lift, glow, and wobble in one loop; timing gated in JS. */
[data-tm-attention="jingle"] {
  transform-origin: 50% 100%;
}

[data-tm-attention="jingle"].tm-attention-jingle--active {
  animation: tm-rect-attention-jingle-cycle 5s ease-in-out infinite;
}

/*
 * Dense glass surfaces: same motion as the rect jingle; border-color + extra shadow layers
 * animate on top of the base drop shadow (first box-shadow layer is fixed).
 */
.tm-frosted-paper[data-tm-attention="jingle"].tm-attention-jingle--active,
.tm-attention-modal-paper[data-tm-attention="jingle"].tm-attention-jingle--active {
  animation: tm-frosted-paper-jingle-cycle 5s ease-in-out infinite;
}

[data-tm-attention="jingle"].tm-attention-jingle--active.tm-attention-jingle--user-hold {
  animation-play-state: paused;
}

@keyframes tm-rect-attention-jingle-cycle {
  0%,
  45%,
  100% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 30%, transparent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--mantine-color-black) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 12%, transparent);
    transform: translateY(0) rotate(0deg) scale(1);
  }

  6% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 45%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mantine-color-black) 42%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 22%, transparent);
    transform: translateY(-10px) rotate(0deg) scale(1.02);
  }

  14% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(0deg) scale(1.03);
  }

  20% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(-5deg) scale(1.03);
  }

  24% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(5.5deg) scale(1.03);
  }

  28% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 70%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mantine-color-black) 44%, transparent),
      0 0 16px color-mix(in srgb, var(--mantine-color-orange-5) 26%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 32%, transparent);
    transform: translateY(-12px) rotate(-3.5deg) scale(1.025);
  }

  32% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 55%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--mantine-color-black) 42%, transparent),
      0 0 12px color-mix(in srgb, var(--mantine-color-orange-5) 20%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 26%, transparent);
    transform: translateY(-8px) rotate(2.5deg) scale(1.015);
  }

  38% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mantine-color-black) 40%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 18%, transparent);
    transform: translateY(-3px) rotate(-1deg) scale(1.005);
  }
}

@keyframes tm-frosted-paper-jingle-cycle {
  0%,
  45%,
  100% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 30%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 1px 6px color-mix(in srgb, var(--mantine-color-black) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 12%, transparent);
    transform: translateY(0) rotate(0deg) scale(1);
  }

  6% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 45%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 2px 10px color-mix(in srgb, var(--mantine-color-black) 42%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 22%, transparent);
    transform: translateY(-10px) rotate(0deg) scale(1.02);
  }

  14% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(0deg) scale(1.03);
  }

  20% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(-5deg) scale(1.03);
  }

  24% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 88%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 6px 18px color-mix(in srgb, var(--mantine-color-black) 46%, transparent),
      0 0 24px color-mix(in srgb, var(--mantine-color-orange-5) 34%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    transform: translateY(-14px) rotate(5.5deg) scale(1.03);
  }

  28% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 70%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 4px 14px color-mix(in srgb, var(--mantine-color-black) 44%, transparent),
      0 0 16px color-mix(in srgb, var(--mantine-color-orange-5) 26%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 32%, transparent);
    transform: translateY(-12px) rotate(-3.5deg) scale(1.025);
  }

  32% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 55%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 3px 12px color-mix(in srgb, var(--mantine-color-black) 42%, transparent),
      0 0 12px color-mix(in srgb, var(--mantine-color-orange-5) 20%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 26%, transparent);
    transform: translateY(-8px) rotate(2.5deg) scale(1.015);
  }

  38% {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 40%, transparent);
    box-shadow: light-dark(0 10px 28px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.4)),
      0 2px 8px color-mix(in srgb, var(--mantine-color-black) 40%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 18%, transparent);
    transform: translateY(-3px) rotate(-1deg) scale(1.005);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tm-attention="jingle"].tm-attention-jingle--active {
    animation: none !important;
    transform: none;
  }

  [data-tm-attention="jingle"].tm-attention-jingle--active:not(.tm-frosted-paper):not(.tm-attention-modal-paper) {
    border-color: color-mix(in srgb, var(--mantine-color-orange-5) 35%, transparent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--mantine-color-black) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--mantine-color-orange-5) 18%, transparent);
  }
}

[data-tm-bg="topo"].tm-topo-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.27;
  background-image: url("/assets/images/backgrounds/topo-contours-light.webp");
  background-size: 2156.25px auto;
  background-position: 0 0;
  background-repeat: repeat;
}

[data-mantine-color-scheme="dark"] [data-tm-bg="topo"].tm-topo-background {
  opacity: 0.32;
  background-image: url("/assets/images/backgrounds/topo-contours-dark.webp");
}

[data-tm-bg="topo"][data-tm-motion="standing"].tm-topo-background {
  animation: tm-bg-drift 48s linear infinite;
}

@keyframes tm-bg-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1006.25px -402.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tm-bg="topo"][data-tm-motion="standing"].tm-topo-background {
    animation: none;
  }
}

/* Live chat Markdown: wrapper has no vertical padding; strip default paragraph margins */
.tm-live-chat-message-md {
  margin: 0;
  padding: 0;
}

.tm-live-chat-message-md p {
  margin: 0;
}

.tm-live-chat-message-md p + p {
  margin-top: 0.35rem;
}

.tm-live-chat-message-md ul,
.tm-live-chat-message-md ol {
  margin: 0.35rem 0 0.15rem 1.15rem;
  padding: 0;
}

.tm-live-chat-message-md :first-child {
  margin-top: 0;
}

.tm-live-chat-message-md :last-child {
  margin-bottom: 0;
}