/* Defaults of the values the atmosphere engine writes on each area. */
@layer tokens {
:root {
  --comp-atmosphere-left: 0px;
  --comp-atmosphere-top: 0px;
  --comp-atmosphere-width: 100%;
  --comp-atmosphere-height: 100%;
  --comp-atmosphere-light-spacing: 65px;
  --comp-atmosphere-sun-radius: 44px;
  --comp-scene-sun-r: var(--comp-atmosphere-sun-radius);
  --comp-scene-sun-x: calc(100% - var(--comp-scene-sun-r) * .55);
  --comp-scene-sun-y: calc(var(--comp-scene-sun-r) * .55);
  --comp-message-sent-glow: none;
  --comp-message-sent-duration: 0s;
}
}

@layer legacy {
/* Shared atmosphere; the canvas never participates in scrolling or hit testing. */
.theme-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.theme-effects[hidden] { display: none; }
.theme-motion-setting { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: inherit; cursor: pointer; }

.theme-motion-setting input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--ref-theme-accent, var(--sys-accent)); box-shadow: none; flex: 0 0 auto; }
.theme-motion-hint { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--ref-theme-meta, var(--sys-on-surface-variant)); }
#theme-modal .group-modal-card { max-height: calc(100dvh - 40px); overflow-y: auto; }

/* Decorative scene layer managed by TimeOnAtmosphere: positioned on the message
   viewport, behind bubbles, never hit-testable. ::before/::after hold the static
   composition and give way to the canvas while animations run. */
.theme-scene {
  display: var(--comp-theme-scene-display, none); position: absolute; top: var(--comp-atmosphere-top, 0); left: var(--comp-atmosphere-left, 0);
  width: var(--comp-atmosphere-width, 100%); height: var(--comp-atmosphere-height, 100%);
  z-index: -1; pointer-events: none; overflow: hidden;
  --comp-scene-sun-r: var(--comp-atmosphere-sun-radius, 44px);
  --comp-scene-sun-x: calc(100% - var(--comp-scene-sun-r) * .55);
  --comp-scene-sun-y: calc(var(--comp-scene-sun-r) * .55);
}
.theme-scene::before, .theme-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; }
.theme-scene[data-renderer="canvas"]::before,
.theme-scene[data-renderer="canvas"]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .theme-effects:not([data-scene="true"]) { display: none; }
  .theme-message-sent { animation: none !important; }
}
}

/* Glow of a sent message (or a finished task, a published post, a won round).
   Each theme with an effect sets --comp-message-sent-glow and its duration. */
@layer effects {
@keyframes themeMessageSent {
  0%, 100% { filter: none; }
  35% { filter: var(--comp-message-sent-glow); }
}
.theme-message-sent { animation: themeMessageSent var(--comp-message-sent-duration) ease-out; }
html[data-theme-motion="off"] .theme-message-sent { animation: none; }
}