/* Theme 🎃 Noite das Abóboras (halloween): its tokens, then 13 rule(s) that decorate or still
   target components without a token. Material: frosted. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html[data-theme="halloween"],
html[data-theme="halloween"] body {
  --ref-halloween-btn-send-color: #26162a;
  --ref-halloween-btn-send-border: #ffc08966;
  --ref-halloween-btn-send-hover-shadow: 0 0 16px #f69a4530;
  --ref-halloween-message-action-color: #e5d8f3;
  --ref-halloween-message-action-bg: #2b2037;
  --ref-halloween-message-action-border: #b29aef44;
  --ref-halloween-reaction-pill-selected-color: #ffcd9a;
  --ref-halloween-reaction-pill-selected-bg: #4e302b;
  --ref-halloween-reaction-pill-selected-border: #f69a4588;
  --ref-halloween-message-own-message-user-color: #ffbf85;
  --ref-halloween-webkit-scrollbar-thumb-bg: #b29aef55;
  --ref-halloween-chat-screen-before-bg: 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);
  --ref-halloween-chat-screen-before-mask: linear-gradient(135deg, #000, transparent 76%);
  --comp-message-sent-glow: drop-shadow(0 0 9px #f69a4555) drop-shadow(0 0 4px #b29aef44);
  --comp-message-sent-duration: 1500ms;
  --comp-chat-screen-background: var(--ref-theme-body-bg);
}
html[data-theme="halloween"] { color-scheme: dark; }
html[data-theme="halloween"],
html[data-theme="halloween"] body {
  --sys-bg-base: #120e1b;
  --comp-panel-on-accent: var(--sys-bg-base);
  --sys-bg-raised: #1b1426;
  --sys-bg-high: #302039;
  --sys-bg-overlay: #251b30;
  --sys-surface: rgba(34, 24, 44, .7);
  --sys-border: rgba(190, 153, 222, .22);
  --sys-border-strong: rgba(246, 154, 69, .55);
  --sys-surface-hover: rgba(178, 154, 239, .12);
  --sys-surface-shell: linear-gradient(155deg, rgba(36, 24, 46, .92), rgba(19, 14, 29, .88));
  --sys-surface-plate: linear-gradient(145deg, rgba(43, 29, 52, .96), rgba(27, 20, 38, .96));
  --sys-surface-control: rgba(39, 28, 49, .86);
  --sys-elevation-2: inset 0 1px 0 #e8c6ff12, 0 12px 32px #08050d66;
  --sys-elevation-1: inset 0 1px 0 #ffd7b212, 0 4px 14px #08050d44;
  --sys-refraction: blur(10px) saturate(110%);
  --sys-refraction-subtle: blur(8px) saturate(110%);
  --sys-accent: #f69a45;
  --sys-accent-strong: #d97d30;
  --sys-accent-alt: #b29aef;
  --sys-accent-gradient: linear-gradient(135deg, #f4a14e, #dd8136);
  --sys-accent-gradient-hover: linear-gradient(135deg, #ffb566, #ed9448);
  --sys-on-surface: #f4ecfa;
  --sys-on-surface-variant: #c6b5d4;
  --sys-on-surface-muted: #b09cc0;
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(78, 43, 37, .76), rgba(53, 32, 48, .72));
  --comp-bubble-own-border: rgba(246, 154, 69, .55);
  --comp-bubble-other-bg: rgba(42, 29, 56, .76);
  --comp-bubble-other-border: rgba(178, 154, 239, .3);
  --sys-status-online: #8bce9d;
  --sys-status-warning: #f6b46c;
  --sys-status-danger: #ff8c9c;
  --ref-theme-accent: #f69a45;
  --ref-theme-own-author: #ffbf85;
  --ref-theme-body-bg: radial-gradient(ellipse at 86% 4%, #36204466, transparent 50%), linear-gradient(165deg, #120e1b, #1c1425);
  --ref-theme-own-bubble: var(--comp-bubble-own-bg);
  --ref-theme-own-border: var(--comp-bubble-own-border);
  --ref-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;
  --comp-message-text-link: #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: var(--sys-on-surface);
}
html[data-theme="halloween"] :is(.chat-bg-orbs, .login-bg-orbs) { display: none; }
html[data-theme="halloween"] :is(.message.other) { background: var(--comp-bubble-other-bg); border-color: var(--comp-bubble-other-border); }
html[data-theme="halloween"] :is(.btn-send, #emoji) { color: var(--ref-halloween-btn-send-color); background: var(--sys-accent-gradient); border-color: var(--ref-halloween-btn-send-border); }
html[data-theme="halloween"] :is(.btn-send, #emoji):hover { background: var(--sys-accent-gradient-hover); box-shadow: var(--ref-halloween-btn-send-hover-shadow); }
html[data-theme="halloween"] :is(.message-action, .reaction-pill, .message-more > summary) { color: var(--ref-halloween-message-action-color); background: var(--ref-halloween-message-action-bg); border-color: var(--ref-halloween-message-action-border); }
html[data-theme="halloween"] :is(.reaction-pill.selected, .message-reactions .reaction.selected) { color: var(--ref-halloween-reaction-pill-selected-color); background: var(--ref-halloween-reaction-pill-selected-bg); border-color: var(--ref-halloween-reaction-pill-selected-border); }
html[data-theme="halloween"] :is(.message-own .message-user, .message.own > .message-author) { color: var(--ref-halloween-message-own-message-user-color) !important; }
html[data-theme="halloween"] ::-webkit-scrollbar-thumb { background: var(--ref-halloween-webkit-scrollbar-thumb-bg); }
/* 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(--comp-atmosphere-top); left: var(--comp-atmosphere-left); width: 86px; height: 86px;
  z-index: -1; pointer-events: none; opacity: .28;
  background: var(--ref-halloween-chat-screen-before-bg);
  mask-image: var(--ref-halloween-chat-screen-before-mask);
}
html[data-theme="halloween"] :is(#chat-screen, #chat)::after {
  left: auto; right: calc(100% - var(--comp-atmosphere-left) - var(--comp-atmosphere-width)); transform: scaleX(-1);
}
}