/* Rules shared by the atmosphere themes (sakura, storm, halloween, christmas, newyear, sunny e starry-sky): their common tokens and the
   component rules that have no token yet. Each theme file sets its own palette. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
/* The sidebar stays a rule: on narrow screens .cloud-chat .sidebar in legacy sets an
   opaque background that only a theme rule overrides. */
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) .sidebar { background: var(--sys-surface-shell); }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]),
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) body {
  /* Secondary text of the atmosphere themes (reply metadata, theme dialog hint). */
  --ref-theme-meta: var(--sys-on-surface-variant);
  --comp-group-item-active-color: var(--sys-on-surface);
  --comp-group-item-active-background: color-mix(in srgb, var(--ref-theme-accent) 12%, transparent);
  --comp-group-item-active-border-color: var(--sys-border-strong);
  --comp-group-item-active-box-shadow: var(--sys-elevation-1);
  --comp-bubble-own-box-shadow: var(--sys-elevation-1);
  --comp-poll-option-background: var(--sys-surface-control);
  --comp-poll-option-progress-background: color-mix(in srgb, var(--ref-theme-accent) 16%, transparent);
}
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-input:focus, .form-group input:focus) {
  border-color: var(--ref-theme-accent);
  background: var(--sys-surface-control);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ref-theme-accent) 15%, transparent);
}
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.theme-option-card.is-selected, .theme-option-card.selected) {
  border-color: var(--ref-theme-accent);
  background: color-mix(in srgb, var(--ref-theme-accent) 10%, transparent);
}
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-bubble, .message.own, .message.other) {
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
}
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-mention, .message-reply-reference) {
  color: var(--ref-theme-accent);
  background: color-mix(in srgb, var(--ref-theme-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--ref-theme-accent) 25%, transparent);
}
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-link, .message-file) { color: var(--ref-theme-accent); }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) .message-own .message-user { color: var(--ref-theme-own-author) !important; }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-reply-reference) strong { color: var(--ref-theme-own-author); }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) :is(.message-reply-reference) span { color: var(--ref-theme-meta); }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) .poll-option { border-color: var(--sys-border); }
}