/* 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; }
.group-editor-card .theme-motion-setting { display: flex; margin-top: 18px; }
.theme-motion-setting input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--theme-accent, var(--accent-1)); box-shadow: none; flex: 0 0 auto; }
.theme-motion-hint { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--vscode-descriptionForeground, var(--text-secondary)); }
#theme-modal .group-modal-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
html[data-theme="sakura"] { color-scheme: light; }
html[data-theme="storm"] { color-scheme: dark; }
html[data-theme="halloween"] { color-scheme: dark; }
html[data-theme="halloween"], html[data-theme="halloween"] body {
  --bg-primary: #120e1b;
  --bg-secondary: #1b1426;
  --bg-tertiary: #302039;
  --bg-elevated: #251b30;
  --glass-bg: rgba(34, 24, 44, .7);
  --glass-border: rgba(190, 153, 222, .22);
  --glass-border-strong: rgba(246, 154, 69, .55);
  --glass-hover: rgba(178, 154, 239, .12);
  --liquid-shell-bg: linear-gradient(155deg, rgba(36, 24, 46, .92), rgba(19, 14, 29, .88));
  --liquid-plate-bg: linear-gradient(145deg, rgba(43, 29, 52, .96), rgba(27, 20, 38, .96));
  --liquid-control-bg: rgba(39, 28, 49, .86);
  --liquid-specular-shadow: inset 0 1px 0 #e8c6ff12, 0 12px 32px #08050d66;
  --liquid-specular-sm: inset 0 1px 0 #ffd7b212, 0 4px 14px #08050d44;
  --liquid-refraction-filter: blur(10px) saturate(110%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(110%);
  --accent-1: #f69a45;
  --accent-2: #d97d30;
  --accent-3: #b29aef;
  --gradient-accent: linear-gradient(135deg, #f4a14e, #dd8136);
  --gradient-accent-hover: linear-gradient(135deg, #ffb566, #ed9448);
  --text-primary: #f4ecfa;
  --text-secondary: #c6b5d4;
  --text-muted: #b09cc0;
  --bubble-own: linear-gradient(135deg, rgba(78, 43, 37, .76), rgba(53, 32, 48, .72));
  --bubble-own-border: rgba(246, 154, 69, .55);
  --bubble-other: rgba(42, 29, 56, .76);
  --bubble-other-border: rgba(178, 154, 239, .3);
  --color-online: #8bce9d;
  --color-warning: #f6b46c;
  --color-danger: #ff8c9c;
  --theme-accent: #f69a45;
  --theme-own-author: #ffbf85;
  --theme-body-bg: radial-gradient(ellipse at 86% 4%, #36204466, transparent 50%), linear-gradient(165deg, #120e1b, #1c1425);
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: #251b30;
  --liquid-glass-surface: rgba(31, 22, 41, .88);
  --liquid-glass-plate: rgba(37, 27, 48, .96);
  --liquid-glass-control: rgba(39, 28, 49, .86);
  --liquid-glass-border: rgba(190, 153, 222, .22);
  --liquid-glass-border-strong: rgba(246, 154, 69, .55);
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: #f4ecfa;
  --vscode-editor-foreground: #f4ecfa;
  --vscode-editor-background: #120e1b;
  --vscode-descriptionForeground: #c6b5d4;
  --vscode-input-foreground: #f4ecfa;
  --vscode-input-placeholderForeground: #b09cc0;
  --vscode-focusBorder: #f69a45;
  --vscode-textLink-foreground: #ffc089;
  --vscode-textLink-activeForeground: #ffe0bf;
  --vscode-textBlockQuote-border: #b29aef;
  --vscode-button-background: #f69a45;
  --vscode-button-hoverBackground: #ffb566;
  --vscode-button-foreground: #26162a;
  --vscode-list-hoverBackground: #352341;
  --vscode-list-activeSelectionForeground: #ffe0bf;
  --vscode-list-activeSelectionBackground: #483046;
  --vscode-toolbar-hoverBackground: #352341;
  --vscode-badge-background: #f69a45;
  --vscode-badge-foreground: #26162a;
  --vscode-menu-background: #251b30;
  --vscode-dropdown-background: #251b30;
  color: #f4ecfa;
}
/* The two end-of-year themes share layout tokens and keep distinct palettes. */
html[data-theme="christmas"], html[data-theme="christmas"] body {
  --holiday-bg: #0c1b18;
  --holiday-secondary: #172d26;
  --holiday-elevated: #203b31;
  --holiday-border: #94b9a338;
  --holiday-accent: #e9c778;
  --holiday-secondary-accent: #c56979;
  --holiday-text: #f6f0e5;
  --holiday-muted: #bdc9b9;
  --holiday-button: #963f51;
  --holiday-button-hover: #b45165;
  --holiday-button-text: #fff4df;
  --holiday-own: linear-gradient(135deg, #592e3bd6, #3d2734c9);
  --holiday-own-border: #d6ab616e;
  --holiday-other: #1e382ec9;
  --holiday-halo: #c569791a;
}
html[data-theme="newyear"], html[data-theme="newyear"] body {
  --holiday-bg: #0a1323;
  --holiday-secondary: #152238;
  --holiday-elevated: #21324b;
  --holiday-border: #bfc9d833;
  --holiday-accent: #e4c785;
  --holiday-secondary-accent: #bfc9d8;
  --holiday-text: #f3f4f8;
  --holiday-muted: #bbc6d8;
  --holiday-button: #e4c785;
  --holiday-button-hover: #f4dca5;
  --holiday-button-text: #142037;
  --holiday-own: linear-gradient(135deg, #4c402ed6, #342f31c9);
  --holiday-own-border: #e4c78588;
  --holiday-other: #1c2c46c9;
  --holiday-halo: #e4c78514;
}
html:is([data-theme="christmas"], [data-theme="newyear"]),
html:is([data-theme="christmas"], [data-theme="newyear"]) body {
  color-scheme: dark;
  --bg-primary: var(--holiday-bg);
  --bg-secondary: var(--holiday-secondary);
  --bg-tertiary: var(--holiday-elevated);
  --bg-elevated: var(--holiday-elevated);
  --glass-bg: color-mix(in srgb, var(--holiday-secondary) 80%, transparent);
  --glass-border: var(--holiday-border);
  --glass-border-strong: color-mix(in srgb, var(--holiday-accent) 50%, transparent);
  --glass-hover: color-mix(in srgb, var(--holiday-accent) 10%, transparent);
  --liquid-shell-bg: linear-gradient(155deg, var(--holiday-secondary), var(--holiday-bg));
  --liquid-plate-bg: linear-gradient(145deg, var(--holiday-elevated), var(--holiday-secondary));
  --liquid-control-bg: color-mix(in srgb, var(--holiday-secondary) 90%, transparent);
  --liquid-specular-shadow: inset 0 1px 0 #fff3d914, 0 12px 32px #02060c66;
  --liquid-specular-sm: inset 0 1px 0 #fff3d912, 0 4px 14px #02060c44;
  --liquid-refraction-filter: blur(10px) saturate(110%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(110%);
  --accent-1: var(--holiday-accent);
  --accent-2: var(--holiday-button);
  --accent-3: var(--holiday-secondary-accent);
  --gradient-accent: linear-gradient(135deg, var(--holiday-button-hover), var(--holiday-button));
  --gradient-accent-hover: linear-gradient(135deg, var(--holiday-button), var(--holiday-button-hover));
  --text-primary: var(--holiday-text);
  --text-secondary: var(--holiday-muted);
  --text-muted: var(--holiday-muted);
  --bubble-own: var(--holiday-own);
  --bubble-own-border: var(--holiday-own-border);
  --bubble-other: var(--holiday-other);
  --bubble-other-border: var(--holiday-border);
  --color-online: #95d4ae;
  --color-warning: #edc987;
  --color-danger: #f497a6;
  --theme-accent: var(--holiday-accent);
  --theme-own-author: var(--holiday-accent);
  --theme-body-bg: radial-gradient(ellipse at 86% 4%, var(--holiday-halo), transparent 55%), linear-gradient(165deg, var(--holiday-bg), var(--holiday-secondary));
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: var(--holiday-secondary);
  --liquid-glass-surface: color-mix(in srgb, var(--holiday-secondary) 90%, transparent);
  --liquid-glass-plate: var(--holiday-secondary);
  --liquid-glass-control: var(--liquid-control-bg);
  --liquid-glass-border: var(--holiday-border);
  --liquid-glass-border-strong: var(--glass-border-strong);
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: var(--holiday-text);
  --vscode-editor-foreground: var(--holiday-text);
  --vscode-editor-background: var(--holiday-bg);
  --vscode-descriptionForeground: var(--holiday-muted);
  --vscode-input-foreground: var(--holiday-text);
  --vscode-input-placeholderForeground: var(--holiday-muted);
  --vscode-focusBorder: var(--holiday-accent);
  --vscode-textLink-foreground: var(--holiday-accent);
  --vscode-textLink-activeForeground: var(--holiday-text);
  --vscode-textBlockQuote-border: var(--holiday-accent);
  --vscode-button-background: var(--holiday-button);
  --vscode-button-hoverBackground: var(--holiday-button-hover);
  --vscode-button-foreground: var(--holiday-button-text);
  --vscode-list-hoverBackground: var(--holiday-elevated);
  --vscode-list-activeSelectionForeground: var(--holiday-accent);
  --vscode-list-activeSelectionBackground: var(--holiday-elevated);
  --vscode-toolbar-hoverBackground: var(--holiday-elevated);
  --vscode-badge-background: var(--holiday-button);
  --vscode-badge-foreground: var(--holiday-button-text);
  --vscode-menu-background: var(--holiday-secondary);
  --vscode-dropdown-background: var(--holiday-secondary);
  color: var(--holiday-text);
}
html:is([data-theme="christmas"], [data-theme="newyear"]) .chat-screen { background: var(--theme-body-bg); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.chat-bg-orbs, .login-bg-orbs, .liquid-ambient-bg) { display: none; }
html:is([data-theme="christmas"], [data-theme="newyear"]) .message.other { background: var(--bubble-other); border-color: var(--bubble-other-border); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.btn-send, #btn-emoji, #insert-emoji, .sidebar-count) { color: var(--holiday-button-text); background: var(--gradient-accent); border-color: var(--glass-border-strong); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.btn-send, #btn-emoji, #insert-emoji):hover { background: var(--gradient-accent-hover); box-shadow: 0 0 14px color-mix(in srgb, var(--holiday-accent) 20%, transparent); }
html:is([data-theme="christmas"], [data-theme="newyear"]) :is(.message-action, .reaction-pill, .message-more > summary) { color: var(--holiday-text); background: var(--holiday-secondary); border-color: var(--holiday-border); }
html:is([data-theme="christmas"], [data-theme="newyear"]) .reaction-pill.selected { color: var(--holiday-accent); background: var(--holiday-elevated); border-color: var(--holiday-accent); }
html:is([data-theme="christmas"], [data-theme="newyear"]) .message.own > .message-author { color: var(--holiday-accent) !important; }
html:is([data-theme="christmas"], [data-theme="newyear"]) .pinned-messages { background: var(--holiday-secondary); }
html:is([data-theme="christmas"], [data-theme="newyear"]) ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--holiday-accent) 35%, transparent); }
/* Static decoration remains when the animation preference is off. */
html[data-theme="christmas"] :is(#chat-screen, #chat)::before {
  content: ''; position: absolute; top: var(--theme-message-top); left: var(--theme-message-left);
  width: var(--theme-message-width); max-width: calc(100% - var(--theme-message-left)); height: 24px; z-index: -1; pointer-events: none; opacity: .75;
  background: radial-gradient(ellipse at 50% 9px, #e9c778 0 2px, #e9c77822 3px 5px, transparent 7px),
    linear-gradient(transparent 3px, #75937b55 3px 4px, transparent 4px);
  background-size: var(--theme-light-spacing, 65px) 24px, 100% 24px; background-repeat: repeat-x;
}
html[data-theme="newyear"] :is(#chat-screen, #chat)::before,
html[data-theme="newyear"] :is(#chat-screen, #chat)::after {
  content: '✦  ·  ✧'; position: absolute; top: calc(var(--theme-message-top) + 8px); left: calc(var(--theme-message-left) + 12px);
  z-index: -1; pointer-events: none; font: 24px/1.2 Georgia, serif; color: #e4c785; opacity: .45; white-space: pre;
}
html[data-theme="newyear"] :is(#chat-screen, #chat)::after { content: '✧  ·  ✦'; left: auto; right: max(12px, calc(100% - var(--theme-message-left) - var(--theme-message-width) + 12px)); color: #bfc9d8; }
html[data-theme="christmas"] .theme-message-sent { animation: christmasMessageSent 1800ms ease-out; }
html[data-theme="newyear"] .theme-message-sent { animation: newyearMessageSent 1800ms ease-out; }
@keyframes christmasMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 9px #e9c77844) drop-shadow(0 0 4px #c5697944); }
}
@keyframes newyearMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 10px #e4c78555) drop-shadow(0 0 4px #bfc9d833); }
}


html[data-theme="sakura"], html[data-theme="sakura"] body {
  --bg-primary: #fff5f7;
  --bg-secondary: #f8e8ee;
  --bg-tertiary: #f1d6e1;
  --bg-elevated: #fffafc;
  --glass-bg: rgba(255, 250, 252, .52);
  --glass-border: rgba(139, 62, 91, .18);
  --glass-border-strong: rgba(183, 56, 101, .38);
  --glass-hover: rgba(183, 56, 101, .08);
  --liquid-shell-bg: linear-gradient(135deg, rgba(255, 250, 252, .68), rgba(250, 229, 237, .58));
  --liquid-plate-bg: linear-gradient(145deg, rgba(255, 250, 252, .86), rgba(251, 234, 240, .8));
  --liquid-control-bg: rgba(255, 249, 251, .62);
  --liquid-specular-shadow: inset 0 1px 0 #fff, 0 12px 32px #71304b12;
  --liquid-specular-sm: inset 0 1px 0 #fff, 0 3px 10px #71304b0e;
  --liquid-refraction-filter: blur(10px) saturate(110%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(110%);
  --accent-1: #b73865;
  --accent-2: #98294f;
  --accent-3: #c6537d;
  --gradient-accent: linear-gradient(135deg, #b73865, #98294f);
  --gradient-accent-hover: linear-gradient(135deg, #a02d57, #80223f);
  --text-primary: #3e2431;
  --text-secondary: #684655;
  --text-muted: #795967;
  --bubble-own: linear-gradient(135deg, rgba(248, 220, 230, .52), rgba(245, 204, 220, .44));
  --bubble-own-border: #d994ae;
  --bubble-other: rgba(255, 252, 253, .48);
  --bubble-other-border: #e8cbd7;
  --color-online: #23734e;
  --color-warning: #946009;
  --color-danger: #be234d;
  --theme-accent: #b73865;
  --theme-own-author: #7e2445;
  --theme-body-bg: linear-gradient(155deg, #fff5f7, #f8e8ee);
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: #fff9fb;
  --liquid-glass-surface: rgba(255, 250, 252, .48);
  --liquid-glass-plate: rgba(255, 249, 251, .82);
  --liquid-glass-control: rgba(255, 244, 248, .62);
  --liquid-glass-border: #e8cbd7;
  --liquid-glass-border-strong: #cc819e;
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: #3e2431;
  --vscode-editor-foreground: #3e2431;
  --vscode-editor-background: #fff5f7;
  --vscode-descriptionForeground: #795967;
  --vscode-input-foreground: #3e2431;
  --vscode-input-placeholderForeground: #795967;
  --vscode-focusBorder: #b73865;
  --vscode-textLink-foreground: #a12c57;
  --vscode-textLink-activeForeground: #7e2445;
  --vscode-textBlockQuote-border: #f1d6e1;
  --vscode-button-background: #b73865;
  --vscode-button-hoverBackground: #98294f;
  --vscode-button-foreground: #ffffff;
  --vscode-list-hoverBackground: #f8e0e9;
  --vscode-list-activeSelectionForeground: #7e2445;
  --vscode-list-activeSelectionBackground: #f1ccdc;
  --vscode-toolbar-hoverBackground: #f8e0e9;
  --vscode-badge-background: #b73865;
  --vscode-badge-foreground: #ffffff;
  --vscode-menu-background: #fff9fb;
  --vscode-dropdown-background: #fff9fb;
  color: #3e2431;
}
html[data-theme="storm"], html[data-theme="storm"] body {
  --bg-primary: #080f26;
  --bg-secondary: #0d1933;
  --bg-tertiary: #142440;
  --bg-elevated: #142440;
  --glass-bg: rgba(14, 27, 51, .52);
  --glass-border: rgba(138, 180, 225, .2);
  --glass-border-strong: rgba(138, 203, 255, .4);
  --glass-hover: rgba(138, 203, 255, .1);
  --liquid-shell-bg: linear-gradient(135deg, rgba(18, 34, 62, .68), rgba(10, 21, 44, .58));
  --liquid-plate-bg: linear-gradient(145deg, rgba(20, 36, 64, .86), rgba(13, 25, 51, .8));
  --liquid-control-bg: rgba(20, 36, 64, .62);
  --liquid-specular-shadow: inset 0 1px 0 #a5d5ff14, 0 12px 32px #02071550;
  --liquid-specular-sm: inset 0 1px 0 #a5d5ff12, 0 3px 10px #02071530;
  --liquid-refraction-filter: blur(10px) saturate(115%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(115%);
  --accent-1: #8acbff;
  --accent-2: #4484d2;
  --accent-3: #a4b8ff;
  --gradient-accent: linear-gradient(135deg, #295eaa, #394e95);
  --gradient-accent-hover: linear-gradient(135deg, #3470bd, #485da7);
  --text-primary: #e6efff;
  --text-secondary: #adbfdb;
  --text-muted: #93a9c8;
  --bubble-own: linear-gradient(135deg, rgba(25, 52, 91, .52), rgba(28, 45, 81, .44));
  --bubble-own-border: #416996;
  --bubble-other: rgba(17, 32, 57, .48);
  --bubble-other-border: #2c4363;
  --theme-accent: #8acbff;
  --theme-own-author: #d5eaff;
  --theme-body-bg: linear-gradient(155deg, #080f26, #101e38);
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: #111f39;
  --liquid-glass-surface: rgba(17, 32, 57, .48);
  --liquid-glass-plate: rgba(17, 31, 57, .82);
  --liquid-glass-control: rgba(20, 36, 64, .62);
  --liquid-glass-border: #2c4363;
  --liquid-glass-border-strong: #416996;
  --liquid-refraction: blur(10px) saturate(115%);
  --vscode-foreground: #e6efff;
  --vscode-editor-foreground: #e6efff;
  --vscode-editor-background: #080f26;
  --vscode-descriptionForeground: #adbfdb;
  --vscode-input-foreground: #e6efff;
  --vscode-input-placeholderForeground: #93a9c8;
  --vscode-focusBorder: #8acbff;
  --vscode-textLink-foreground: #8acbff;
  --vscode-textLink-activeForeground: #c3e4ff;
  --vscode-textBlockQuote-border: #29476b;
  --vscode-button-background: #295eaa;
  --vscode-button-hoverBackground: #3470bd;
  --vscode-button-foreground: #ffffff;
  --vscode-list-hoverBackground: #19345b;
  --vscode-list-activeSelectionForeground: #e6efff;
  --vscode-list-activeSelectionBackground: #244873;
  --vscode-toolbar-hoverBackground: #19345b;
  --vscode-badge-background: #295eaa;
  --vscode-badge-foreground: #ffffff;
  --vscode-menu-background: #111f39;
  --vscode-dropdown-background: #142440;
  color: #e6efff;
}
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(--liquid-shell-bg); }
html:is([data-theme="sakura"], [data-theme="storm"], [data-theme="halloween"], [data-theme="christmas"], [data-theme="newyear"], [data-theme="sunny"], [data-theme="starry-sky"]) .group-item.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  border-color: var(--glass-border-strong);
  box-shadow: var(--liquid-specular-sm);
}
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(--theme-accent);
  background: var(--liquid-control-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--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(--theme-accent);
  background: color-mix(in srgb, var(--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"]) .bubble-own { box-shadow: var(--liquid-specular-sm); }
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[data-theme="sakura"] :is(.chat-header, .input-bar) { box-shadow: 0 3px 18px #71304b12; }
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, .reply-reference, .message-reply-reference) {
  color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--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, .unread-divider) { color: var(--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(--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(.reply-reference, .message-reply-reference) strong { color: var(--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(.reply-reference, .message-reply-reference) span { color: var(--vscode-descriptionForeground); }
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 { background: var(--liquid-control-bg); border-color: var(--glass-border); }
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-progress { background: color-mix(in srgb, var(--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(#login-form > button, .composer button) { background: var(--vscode-button-background); }
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(#login-form > button, .composer button):hover { background: var(--vscode-button-hoverBackground); }
html[data-theme="sakura"] .message-text,
html[data-theme="sakura"] .message p { color: #3e2431; }
html[data-theme="sakura"] .message:not(.own) > .message-author,
html[data-theme="sakura"] .message-other .message-user { filter: brightness(.65) saturate(1.15); }
html[data-theme="sakura"] :is(.message-action, .reaction-pill, .message-more > summary) { color: #684655; background: #fff4f8; border-color: #e8cbd7; }
html[data-theme="sakura"] .reaction-pill.selected { color: #fff; background: #b73865; border-color: #98294f; }
html[data-theme="sakura"] :is(.message-time, .message-system, .system-message, .message-viewers, .message time) { color: #795967; }
html[data-theme="sakura"] :is(.user-select-list, .user-select-badge) { background: #f8e0e9; color: #7e2445; }
html[data-theme="sakura"] .group-notification-button:hover { color: #7e2445; }
html[data-theme="sakura"] ::-webkit-scrollbar-thumb { background: #b7386540; }
html[data-theme="storm"] ::-webkit-scrollbar-thumb { background: #8acbff40; }
html[data-theme="sakura"] :is(.chat-bg-orbs, .login-bg-orbs, .liquid-ambient-bg),
html[data-theme="storm"] :is(.chat-bg-orbs, .login-bg-orbs, .liquid-ambient-bg) { display: none; }
html[data-theme="sakura"] .theme-message-sent { animation: sakuraMessageSent 1400ms ease-out; }
html[data-theme="storm"] .theme-message-sent { animation: stormMessageSent 1000ms ease-out; }
html[data-theme="halloween"] .theme-message-sent { animation: halloweenMessageSent 1500ms ease-out; }
html[data-theme="halloween"] .chat-screen { background: var(--theme-body-bg); }
html[data-theme="halloween"] :is(.chat-bg-orbs, .login-bg-orbs, .liquid-ambient-bg) { display: none; }
html[data-theme="halloween"] :is(.message.other) { background: var(--bubble-other); border-color: var(--bubble-other-border); }
html[data-theme="halloween"] :is(.btn-send, #btn-emoji, #insert-emoji) { color: #26162a; background: var(--gradient-accent); border-color: #ffc08966; }
html[data-theme="halloween"] :is(.btn-send, #btn-emoji, #insert-emoji):hover { background: var(--gradient-accent-hover); box-shadow: 0 0 16px #f69a4530; }
html[data-theme="halloween"] :is(.message-action, .reaction-pill, .message-more > summary) { color: #e5d8f3; background: #2b2037; border-color: #b29aef44; }
html[data-theme="halloween"] :is(.reaction-pill.selected, .message-reactions .reaction.selected) { color: #ffcd9a; background: #4e302b; border-color: #f69a4588; }
html[data-theme="halloween"] :is(.message-own .message-user, .message.own > .message-author) { color: #ffbf85 !important; }
html[data-theme="halloween"] ::-webkit-scrollbar-thumb { background: #b29aef55; }
/* Static webs stay anchored at the viewport corners and never capture clicks. */
html[data-theme="halloween"] :is(#chat-screen, #chat)::before,
html[data-theme="halloween"] :is(#chat-screen, #chat)::after {
  content: ''; position: absolute; top: var(--theme-message-top); left: var(--theme-message-left); width: 86px; height: 86px;
  z-index: -1; pointer-events: none; opacity: .28;
  background: repeating-radial-gradient(circle at 0 0, transparent 0 16px, #d8beff 17px 18px, transparent 19px 23px),
    repeating-conic-gradient(from 0deg at 0 0, #d8beff 0deg 1deg, transparent 1deg 22.5deg);
  mask-image: linear-gradient(135deg, #000, transparent 76%);
}
html[data-theme="halloween"] :is(#chat-screen, #chat)::after {
  left: auto; right: calc(100% - var(--theme-message-left) - var(--theme-message-width)); transform: scaleX(-1);
}
@keyframes halloweenMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 9px #f69a4555) drop-shadow(0 0 4px #b29aef44); }
}
@keyframes sakuraMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 15px #d96b94c0) drop-shadow(0 0 5px #e9a1bdd0); }
}
@keyframes stormMessageSent {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(0 0 18px #7fbfffc0) drop-shadow(0 0 5px #bfe6ffd0); }
}
/* ─── Sunny & Starry Sky ─────────────────────────────────────────────── */
html[data-theme="sunny"] { color-scheme: light; }
html[data-theme="starry-sky"] { color-scheme: dark; }
html[data-theme="sunny"], html[data-theme="sunny"] body {
  --bg-primary: #fff8eb;
  --bg-secondary: #fbefd9;
  --bg-tertiary: #f5e3c4;
  --bg-elevated: #fffcf5;
  --glass-bg: rgba(255, 252, 245, .66);
  --glass-border: rgba(115, 91, 71, .2);
  --glass-border-strong: rgba(185, 81, 40, .42);
  --glass-hover: rgba(185, 81, 40, .08);
  --liquid-shell-bg: linear-gradient(135deg, rgba(255, 252, 245, .84), rgba(251, 239, 217, .76));
  --liquid-plate-bg: linear-gradient(145deg, rgba(255, 252, 245, .95), rgba(252, 243, 226, .92));
  --liquid-control-bg: rgba(255, 252, 245, .8);
  --liquid-specular-shadow: inset 0 1px 0 #fff, 0 12px 32px #7a4a2014;
  --liquid-specular-sm: inset 0 1px 0 #fff, 0 3px 10px #7a4a2010;
  --liquid-refraction-filter: blur(10px) saturate(110%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(110%);
  --accent-1: #a2461f;
  --accent-2: #963f20;
  --accent-3: #b95128;
  --gradient-accent: linear-gradient(135deg, #b95128, #a9491f);
  --gradient-accent-hover: linear-gradient(135deg, #963f20, #86371b);
  --text-primary: #49382d;
  --text-secondary: #735b47;
  --text-muted: #735b47;
  --bubble-own: linear-gradient(135deg, rgba(255, 226, 191, .48), rgba(255, 218, 176, .36));
  --bubble-own-border: #e9b17c;
  --bubble-other: rgba(255, 252, 245, .38);
  --bubble-other-border: #ead8bd;
  --color-online: #2c7a4b;
  --color-warning: #8f5a07;
  --color-danger: #b3261e;
  /* Text-level accent is darker than the button fill to keep 4.5:1 on cream and peach. */
  --theme-accent: #a2461f;
  --theme-own-author: #8a3a1b;
  --theme-body-bg: linear-gradient(172deg, #fff8eb, #fdf0da);
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: #fffcf5;
  --liquid-glass-surface: rgba(255, 252, 245, .8);
  --liquid-glass-plate: rgba(255, 252, 245, .94);
  --liquid-glass-control: rgba(255, 249, 238, .84);
  --liquid-glass-border: #ead8bd;
  --liquid-glass-border-strong: #d58e63;
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: #49382d;
  --vscode-editor-foreground: #49382d;
  --vscode-editor-background: #fff8eb;
  --vscode-descriptionForeground: #735b47;
  --vscode-input-foreground: #49382d;
  --vscode-input-placeholderForeground: #735b47;
  --vscode-focusBorder: #b95128;
  --vscode-textLink-foreground: #a2461f;
  --vscode-textLink-activeForeground: #7c3317;
  --vscode-textBlockQuote-border: #f4bf58;
  --vscode-button-background: #b95128;
  --vscode-button-hoverBackground: #963f20;
  --vscode-button-foreground: #ffffff;
  --vscode-list-hoverBackground: #fbebd2;
  --vscode-list-activeSelectionForeground: #7c3317;
  --vscode-list-activeSelectionBackground: #f8dcbc;
  --vscode-toolbar-hoverBackground: #fbebd2;
  --vscode-badge-background: #b95128;
  --vscode-badge-foreground: #ffffff;
  --vscode-menu-background: #fffcf5;
  --vscode-dropdown-background: #fffcf5;
  color: #49382d;
}
html[data-theme="starry-sky"], html[data-theme="starry-sky"] body {
  --bg-primary: #090d20;
  --bg-secondary: #141a35;
  --bg-tertiary: #1d2342;
  --bg-elevated: #1d2342;
  --glass-bg: rgba(20, 26, 53, .74);
  --glass-border: rgba(183, 184, 211, .18);
  --glass-border-strong: rgba(196, 181, 253, .5);
  --glass-hover: rgba(196, 181, 253, .1);
  --liquid-shell-bg: linear-gradient(155deg, rgba(20, 26, 53, .9), rgba(9, 13, 32, .86));
  --liquid-plate-bg: linear-gradient(145deg, rgba(29, 35, 66, .96), rgba(20, 26, 53, .96));
  --liquid-control-bg: rgba(20, 26, 53, .86);
  --liquid-specular-shadow: inset 0 1px 0 #e4ddff14, 0 12px 32px #02040e70;
  --liquid-specular-sm: inset 0 1px 0 #e4ddff12, 0 4px 14px #02040e4a;
  --liquid-refraction-filter: blur(10px) saturate(110%);
  --liquid-refraction-subtle-filter: blur(8px) saturate(110%);
  --accent-1: #c4b5fd;
  --accent-2: #a796f2;
  --accent-3: #e2a9d4;
  --gradient-accent: linear-gradient(135deg, #c4b5fd, #b4a3f8);
  --gradient-accent-hover: linear-gradient(135deg, #d5c9ff, #c4b5fd);
  --text-primary: #eaeaf7;
  --text-secondary: #b7b8d3;
  --text-muted: #a9aac8;
  --bubble-own: linear-gradient(135deg, rgba(41, 35, 75, .5), rgba(35, 31, 68, .38));
  --bubble-own-border: rgba(196, 181, 253, .42);
  --bubble-other: rgba(20, 26, 53, .36);
  --bubble-other-border: rgba(183, 184, 211, .2);
  --color-online: #8fd6b0;
  --color-warning: #f0c987;
  --color-danger: #ff9bb0;
  --theme-accent: #c4b5fd;
  --theme-own-author: #ddd3ff;
  --theme-body-bg: radial-gradient(ellipse at 10% 0%, #2a1f5238, transparent 55%), radial-gradient(ellipse at 100% 100%, #3b1f4a30, transparent 55%), linear-gradient(170deg, #090d20, #0e1430);
  --theme-own-bubble: var(--bubble-own);
  --theme-own-border: var(--bubble-own-border);
  --theme-popover-bg: #1d2342;
  --liquid-glass-surface: rgba(20, 26, 53, .84);
  --liquid-glass-plate: rgba(29, 35, 66, .96);
  --liquid-glass-control: rgba(20, 26, 53, .86);
  --liquid-glass-border: rgba(183, 184, 211, .2);
  --liquid-glass-border-strong: rgba(196, 181, 253, .5);
  --liquid-refraction: blur(10px) saturate(110%);
  --vscode-foreground: #eaeaf7;
  --vscode-editor-foreground: #eaeaf7;
  --vscode-editor-background: #090d20;
  --vscode-descriptionForeground: #b7b8d3;
  --vscode-input-foreground: #eaeaf7;
  --vscode-input-placeholderForeground: #a9aac8;
  --vscode-focusBorder: #c4b5fd;
  --vscode-textLink-foreground: #c4b5fd;
  --vscode-textLink-activeForeground: #e4dcff;
  --vscode-textBlockQuote-border: #7856b8;
  /* Lavender buttons carry dark text and icons. */
  --vscode-button-background: #c4b5fd;
  --vscode-button-hoverBackground: #d5c9ff;
  --vscode-button-foreground: #161128;
  --vscode-list-hoverBackground: #232a4f;
  --vscode-list-activeSelectionForeground: #e4dcff;
  --vscode-list-activeSelectionBackground: #2e2a58;
  --vscode-toolbar-hoverBackground: #232a4f;
  --vscode-badge-background: #c4b5fd;
  --vscode-badge-foreground: #161128;
  --vscode-menu-background: #1d2342;
  --vscode-dropdown-background: #1d2342;
  color: #eaeaf7;
}
html:is([data-theme="sunny"], [data-theme="starry-sky"]) .chat-screen { background: var(--theme-body-bg); }
html:is([data-theme="sunny"], [data-theme="starry-sky"]) :is(.chat-bg-orbs, .login-bg-orbs, .liquid-ambient-bg) { display: none; }
html:is([data-theme="sunny"], [data-theme="starry-sky"]) .message.other { background: var(--bubble-other); border-color: var(--bubble-other-border); }
html:is([data-theme="sunny"], [data-theme="starry-sky"]) .message.own > .message-author { color: var(--theme-own-author) !important; }
html:is([data-theme="sunny"], [data-theme="starry-sky"]) .pinned-messages { background: var(--bg-secondary); }

/* Sunny: dark warm text and controls; gold and sky blue stay in the decoration. */
html[data-theme="sunny"] :is(.message-text, .message p) { color: #49382d; }
html[data-theme="sunny"] .message:not(.own) > .message-author,
html[data-theme="sunny"] .message-other .message-user { filter: brightness(.58) saturate(1.2); }
html[data-theme="sunny"] :is(.message-action, .reaction-pill, .message-more > summary) { color: #5e4838; background: #fffaf0; border-color: #ead8bd; }
html[data-theme="sunny"] .message-more[open] > summary { color: #49382d; background: #fbe6cc; border-color: #b95128; }
html[data-theme="sunny"] :is(.reaction-pill.selected, .message-reactions .reaction.selected) { color: #fff; background: #b95128; border-color: #963f20; }
html[data-theme="sunny"] :is(.message-time, .message-system, .system-message, .message-viewers, .message time) { color: #735b47; }
html[data-theme="sunny"] :is(.user-select-list, .user-select-badge) { background: #fbefd9; color: #7c3317; }
html[data-theme="sunny"] :is(.group-notification-button:hover, .modal-close:hover) { color: #7c3317; }
html[data-theme="sunny"] :is(.chat-header, .input-bar) { box-shadow: 0 3px 18px #7a4a2012; }
html[data-theme="sunny"] :is(.message-input, .form-group input)::placeholder { color: #735b47; opacity: 1; }
html[data-theme="sunny"] :is(.btn-send, #btn-emoji, #insert-emoji):hover { background: var(--gradient-accent-hover); box-shadow: 0 0 14px #f4bf5855; }
html[data-theme="sunny"] .code-block { background: #2b221c; border-color: #49382d55; }
html[data-theme="sunny"] ::-webkit-scrollbar-thumb { background: #b9512840; }
html[data-theme="sunny"] :focus-visible { outline-color: #b95128; }

/* Starry Sky: lavender accent, dark text on light controls. */
html[data-theme="starry-sky"] .message:not(.own) > .message-author,
html[data-theme="starry-sky"] .message-other .message-user { filter: brightness(1.22) saturate(1.05); }
html[data-theme="starry-sky"] :is(.btn-send, #btn-emoji, #insert-emoji, .sidebar-count, .btn-enter, .btn-modal-primary,
  .group-unread-badge, .scroll-unread-count, .btn-rec-send, .btn-quick-reply, .logo-icon, .logo-small,
  .btn-create-group:hover, .btn-scroll-bottom:hover, #login-form > button, .composer button) { color: #161128; }
html[data-theme="starry-sky"] :is(.btn-send, #btn-emoji, #insert-emoji) { background: var(--gradient-accent); border-color: #d5c9ff88; }
html[data-theme="starry-sky"] :is(.btn-send, #btn-emoji, #insert-emoji):hover { background: var(--gradient-accent-hover); box-shadow: 0 0 14px #c4b5fd40; }
html[data-theme="starry-sky"] :is(.message-action, .reaction-pill, .message-more > summary) { color: #e3e3f4; background: #1a2040; border-color: #b7b8d333; }
html[data-theme="starry-sky"] .message-more[open] > summary { color: #eaeaf7; background: #2e2a58; border-color: #c4b5fd; }
html[data-theme="starry-sky"] :is(.reaction-pill.selected, .message-reactions .reaction.selected) { color: #161128; background: #c4b5fd; border-color: #d5c9ff; }
html[data-theme="starry-sky"] :is(.message-time, .message-system, .system-message, .message-viewers, .message time) { color: #b7b8d3; }
html[data-theme="starry-sky"] :is(.message-input, .form-group input)::placeholder { color: #a9aac8; opacity: 1; }
html[data-theme="starry-sky"] .code-block { background: #0b0f26; border-color: #b7b8d333; }
html[data-theme="starry-sky"] ::-webkit-scrollbar-thumb { background: #c4b5fd55; }
html[data-theme="starry-sky"] :focus-visible { outline-color: #c4b5fd; }

/* 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: none; position: absolute; top: var(--theme-message-top, 0); left: var(--theme-message-left, 0);
  width: var(--theme-message-width, 100%); height: var(--theme-message-height, 100%);
  z-index: -1; pointer-events: none; overflow: hidden;
  --sun-r: var(--theme-sun-radius, 44px);
  --sun-x: calc(100% - var(--sun-r) * .55);
  --sun-y: calc(var(--sun-r) * .55);
}
.theme-scene::before, .theme-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; }
html:is([data-theme="sunny"], [data-theme="starry-sky"]) .theme-scene { display: block; }
.theme-scene[data-renderer="canvas"]::before,
.theme-scene[data-renderer="canvas"]::after { display: none; }
html[data-theme="sunny"] .theme-scene {
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(244, 191, 88, .3), rgba(244, 191, 88, .12) calc(var(--sun-r) * 2.4), transparent calc(var(--sun-r) * 4.4)),
    linear-gradient(180deg, rgba(169, 220, 232, .42), rgba(169, 220, 232, .16) 120px, transparent 230px);
}
html[data-theme="sunny"] .theme-scene::before {
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), #fff2c9 0, #f9d27a calc(var(--sun-r) * .7), #f4bf58 var(--sun-r), transparent calc(var(--sun-r) + .5px)),
    repeating-conic-gradient(from -2.5deg at var(--sun-x) var(--sun-y), rgba(244, 191, 88, .34) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask-image: radial-gradient(circle at var(--sun-x) var(--sun-y), #000 calc(var(--sun-r) * 1.7), transparent calc(var(--sun-r) * 2.15));
  mask-image: radial-gradient(circle at var(--sun-x) var(--sun-y), #000 calc(var(--sun-r) * 1.7), transparent calc(var(--sun-r) * 2.15));
}
html[data-theme="sunny"] .theme-scene[data-size="wide"] {
  --sunny-cloud-b:
    radial-gradient(circle at calc(50% - 24px) 84px, #fff 0 12px, transparent 12.5px),
    radial-gradient(circle at calc(50% - 8px) 75px, #fff 0 17px, transparent 17.5px),
    radial-gradient(circle at calc(50% + 11px) 79px, #fff 0 14px, transparent 14.5px),
    radial-gradient(circle at calc(50% + 25px) 85px, #fff 0 10px, transparent 10.5px),
    radial-gradient(36px 8px at 50% 90px, #fff 0 95%, transparent),
    radial-gradient(38px 8px at 50% 94px, rgba(169, 220, 232, .6) 0 95%, transparent);
}
html[data-theme="sunny"] .theme-scene::after {
  opacity: .5;
  filter: blur(2px);
  background:
    radial-gradient(circle at calc(14% - 24px) 38px, #fff 0 12px, transparent 12.5px),
    radial-gradient(circle at calc(14% - 8px) 29px, #fff 0 17px, transparent 17.5px),
    radial-gradient(circle at calc(14% + 11px) 33px, #fff 0 14px, transparent 14.5px),
    radial-gradient(circle at calc(14% + 25px) 39px, #fff 0 10px, transparent 10.5px),
    radial-gradient(36px 8px at 14% 44px, #fff 0 95%, transparent),
    radial-gradient(38px 8px at 14% 48px, rgba(169, 220, 232, .6) 0 95%, transparent),
    var(--sunny-cloud-b, linear-gradient(transparent, transparent)),
    radial-gradient(circle at calc(100% - var(--sun-r) * 2.6 - 24px) calc(var(--sun-r) * 1.4 + 4px), #fff 0 11px, transparent 11.5px),
    radial-gradient(circle at calc(100% - var(--sun-r) * 2.6 - 8px) calc(var(--sun-r) * 1.4 - 4px), #fff 0 15px, transparent 15.5px),
    radial-gradient(circle at calc(100% - var(--sun-r) * 2.6 + 10px) calc(var(--sun-r) * 1.4), #fff 0 12px, transparent 12.5px),
    radial-gradient(32px 7px at calc(100% - var(--sun-r) * 2.6) calc(var(--sun-r) * 1.4 + 9px), #fff 0 95%, transparent),
    radial-gradient(34px 7px at calc(100% - var(--sun-r) * 2.6) calc(var(--sun-r) * 1.4 + 13px), rgba(169, 220, 232, .6) 0 95%, transparent);
}
html[data-theme="starry-sky"] .theme-scene {
  background: radial-gradient(ellipse 85% 70% at 50% 115%, rgba(29, 35, 66, .55), transparent 70%);
}
html[data-theme="starry-sky"] .theme-scene::before {
  background:
    radial-gradient(ellipse 46% 40% at 8% 14%, rgba(120, 86, 184, .3), rgba(120, 86, 184, .12) 55%, transparent),
    radial-gradient(ellipse 42% 38% at 94% 86%, rgba(187, 111, 169, .22), rgba(187, 111, 169, .09) 55%, transparent);
}
html[data-theme="starry-sky"] .theme-scene::after {
  background:
    radial-gradient(circle at 18% 30%, #f4f1ff 0 1.6px, rgba(196, 181, 253, .35) 2.4px, transparent 5px),
    radial-gradient(circle at 82% 18%, #f4f1ff 0 1.6px, rgba(196, 181, 253, .35) 2.4px, transparent 5px),
    radial-gradient(circle at 88% 70%, #f4f1ff 0 1.6px, rgba(196, 181, 253, .35) 2.4px, transparent 5px),
    radial-gradient(circle at 11% 62%, #f4f1ff 0 1.6px, rgba(196, 181, 253, .35) 2.4px, transparent 5px),
    radial-gradient(circle at 6% 12%, #d9daf3cc 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 84%, #d9daf3aa 0 1px, transparent 1.8px),
    radial-gradient(circle at 35% 8%, #d9daf3aa 0 .9px, transparent 1.6px),
    radial-gradient(circle at 64% 6%, #d9daf3cc 0 1px, transparent 1.8px),
    radial-gradient(circle at 93% 40%, #d9daf3aa 0 .9px, transparent 1.6px),
    radial-gradient(circle at 72% 92%, #d9daf3cc 0 1px, transparent 1.8px),
    radial-gradient(circle at 46% 95%, #d9daf399 0 .9px, transparent 1.6px),
    radial-gradient(circle at 4% 90%, #d9daf3aa 0 1px, transparent 1.8px),
    radial-gradient(circle at 96% 8%, #d9daf3aa 0 .9px, transparent 1.6px),
    radial-gradient(circle at 14% 46%, #d9daf399 0 .9px, transparent 1.6px),
    radial-gradient(circle at 86% 54%, #d9daf3aa 0 1px, transparent 1.8px),
    radial-gradient(circle at 54% 3%, #d9daf399 0 .8px, transparent 1.5px);
}
html[data-theme="sunny"] .theme-message-sent { animation: sunnyMessageSent 900ms ease-out; }
html[data-theme="starry-sky"] .theme-message-sent { animation: starryMessageSent 900ms ease-out; }
@keyframes sunnyMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 12px #f4bf58b0) drop-shadow(0 0 4px #ffd98ad0); }
}
@keyframes starryMessageSent {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 12px #c4b5fd88) drop-shadow(0 0 4px #e9e3ffaa); }
}
html[data-theme-motion="off"] .theme-message-sent { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .theme-effects:not([data-scene="true"]) { display: none; }
  .theme-message-sent { animation: none !important; }
}