/* Theme 🎄 Noite de Natal (christmas): its tokens, then 2 rule(s) that decorate or still
   target components without a token. Material: frosted. */
@layer themes {
/* The two end-of-year themes share layout tokens and keep distinct palettes. */
html[data-theme="christmas"],
html[data-theme="christmas"] body {
  --ref-christmas-chat-screen-before-bg: radial-gradient(ellipse at 50% 9px, #e9c778 0 2px, #e9c77822 3px 5px, transparent 7px),
    linear-gradient(transparent 3px, #75937b55 3px 4px, transparent 4px);
  --comp-message-sent-glow: drop-shadow(0 0 9px #e9c77844) drop-shadow(0 0 4px #c5697944);
  --comp-message-sent-duration: 1800ms;
  --ref-holiday-bg: #0c1b18;
  --ref-holiday-secondary: #172d26;
  --ref-holiday-elevated: #203b31;
  --ref-holiday-border: #94b9a338;
  --ref-holiday-accent: #e9c778;
  --ref-holiday-secondary-accent: #c56979;
  --ref-holiday-text: #f6f0e5;
  --ref-holiday-muted: #bdc9b9;
  --ref-holiday-button: #963f51;
  --ref-holiday-button-hover: #b45165;
  --ref-holiday-button-text: #fff4df;
  --ref-holiday-own: linear-gradient(135deg, #592e3bd6, #3d2734c9);
  --ref-holiday-own-border: #d6ab616e;
  --ref-holiday-other: #1e382ec9;
  --ref-holiday-halo: #c569791a;
}
/* Static decoration remains when the animation preference is off. */
html[data-theme="christmas"] :is(#chat-screen, #chat)::before {
  content: ''; position: absolute; top: var(--comp-atmosphere-top); left: var(--comp-atmosphere-left);
  width: var(--comp-atmosphere-width); max-width: calc(100% - var(--comp-atmosphere-left)); height: 24px; z-index: -1; pointer-events: none; opacity: .75;
  background: var(--ref-christmas-chat-screen-before-bg);
  background-size: var(--comp-atmosphere-light-spacing, 65px) 24px, 100% 24px; background-repeat: repeat-x;
}
}