/* Theme Sunny (sunny): its tokens, then 19 rule(s) that decorate or still
   target components without a token. Material: paper. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html[data-theme="sunny"],
html[data-theme="sunny"] body {
  --ref-sunny-cloud-underside: rgba(169, 220, 232, .6);
  --ref-sunny-cloud: #fff;
  --ref-sunny-message-text-color: #49382d;
  --ref-sunny-message-action-color: #5e4838;
  --ref-sunny-message-action-bg: #fffaf0;
  --ref-sunny-message-action-border: #ead8bd;
  --ref-sunny-reaction-pill-selected-color: #fff;
  --ref-sunny-reaction-pill-selected-bg: #b95128;
  --ref-sunny-reaction-pill-selected-border: #963f20;
  --ref-sunny-message-time-color: #735b47;
  --ref-sunny-modal-close-hover-color: #7c3317;
  --ref-sunny-chat-header-shadow: 0 3px 18px #7a4a2012;
  --ref-sunny-message-input-placeholder-color: #735b47;
  --ref-sunny-btn-send-hover-shadow: 0 0 14px #f4bf5855;
  --ref-sunny-code-block-border: #49382d55;
  --ref-sunny-webkit-scrollbar-thumb-bg: #b9512840;
  --ref-sunny-focus-visible-outline: #b95128;
  --ref-sunny-theme-scene-bg-1: rgba(244, 191, 88, .3);
  --ref-sunny-theme-scene-bg-2: rgba(244, 191, 88, .12);
  --ref-sunny-theme-scene-bg-3: rgba(169, 220, 232, .42);
  --ref-sunny-theme-scene-bg-4: rgba(169, 220, 232, .16);
  --ref-sunny-theme-scene-before-bg-1: #fff2c9;
  --ref-sunny-theme-scene-before-bg-2: #f9d27a;
  --ref-sunny-theme-scene-before-bg-3: #f4bf58;
  --ref-sunny-theme-scene-before-bg-4: rgba(244, 191, 88, .34);
  --ref-sunny-theme-scene-before-mask-1: #000;
  --ref-sunny-cloud-b-wide: 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);
  --comp-message-sent-glow: drop-shadow(0 0 12px #f4bf58b0) drop-shadow(0 0 4px #ffd98ad0);
  --comp-message-sent-duration: 900ms;
  --comp-message-more-open-summary-color: #49382d;
  --comp-message-more-open-summary-background: #fbe6cc;
  --comp-message-more-open-summary-border-color: #b95128;
  --comp-code-block-background: #2b221c;
}
/* ─── Sunny & Starry Sky ─────────────────────────────────────────────── */
html[data-theme="sunny"] { color-scheme: light; }
html[data-theme="sunny"],
html[data-theme="sunny"] body {
  --sys-bg-base: #fff8eb;
  --sys-bg-raised: #fbefd9;
  --sys-bg-high: #f5e3c4;
  --sys-bg-overlay: #fffcf5;
  --sys-surface: rgba(255, 252, 245, .66);
  --sys-border: rgba(115, 91, 71, .2);
  --sys-border-strong: rgba(185, 81, 40, .42);
  --sys-surface-hover: rgba(185, 81, 40, .08);
  --sys-surface-shell: linear-gradient(135deg, rgba(255, 252, 245, .84), rgba(251, 239, 217, .76));
  --sys-surface-plate: linear-gradient(145deg, rgba(255, 252, 245, .95), rgba(252, 243, 226, .92));
  --sys-surface-control: rgba(255, 252, 245, .8);
  --sys-elevation-2: inset 0 1px 0 #fff, 0 12px 32px #7a4a2014;
  --sys-elevation-1: inset 0 1px 0 #fff, 0 3px 10px #7a4a2010;
  --sys-refraction: blur(10px) saturate(110%);
  --sys-refraction-subtle: blur(8px) saturate(110%);
  --sys-accent: #a2461f;
  --sys-accent-strong: #963f20;
  --sys-accent-alt: #b95128;
  --sys-accent-gradient: linear-gradient(135deg, #b95128, #a9491f);
  --sys-accent-gradient-hover: linear-gradient(135deg, #963f20, #86371b);
  --sys-on-surface: #49382d;
  --sys-on-surface-variant: #735b47;
  --sys-on-surface-muted: #735b47;
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(255, 226, 191, .48), rgba(255, 218, 176, .36));
  --comp-bubble-own-border: #e9b17c;
  --comp-bubble-other-bg: rgba(255, 252, 245, .38);
  --comp-bubble-other-border: #ead8bd;
  --sys-status-online: #2c7a4b;
  --sys-status-warning: #8f5a07;
  --sys-status-danger: #b3261e;
  /* Text-level accent is darker than the button fill to keep 4.5:1 on cream and peach. */
  --ref-theme-accent: #a2461f;
  --ref-theme-own-author: #8a3a1b;
  --ref-theme-body-bg: linear-gradient(172deg, #fff8eb, #fdf0da);
  --ref-theme-own-bubble: var(--comp-bubble-own-bg);
  --ref-theme-own-border: var(--comp-bubble-own-border);
  --ref-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;
  --comp-message-text-link: #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: var(--sys-on-surface);
}
/* Sunny: dark warm text and controls; gold and sky blue stay in the decoration. */
html[data-theme="sunny"] :is(.message-text, .message p) { color: var(--ref-sunny-message-text-color); }
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: var(--ref-sunny-message-action-color); background: var(--ref-sunny-message-action-bg); border-color: var(--ref-sunny-message-action-border); }
html[data-theme="sunny"] :is(.reaction-pill.selected, .message-reactions .reaction.selected) { color: var(--ref-sunny-reaction-pill-selected-color); background: var(--ref-sunny-reaction-pill-selected-bg); border-color: var(--ref-sunny-reaction-pill-selected-border); }
html[data-theme="sunny"] :is(.message-time, .message-system, .message-viewers, .message time) { color: var(--ref-sunny-message-time-color); }
html[data-theme="sunny"] :is(.modal-close:hover) { color: var(--ref-sunny-modal-close-hover-color); }
html[data-theme="sunny"] :is(.chat-header, .input-bar) { box-shadow: var(--ref-sunny-chat-header-shadow); }
html[data-theme="sunny"] :is(.message-input, .form-group input)::placeholder { color: var(--ref-sunny-message-input-placeholder-color); opacity: 1; }
html[data-theme="sunny"] :is(.btn-send):hover { background: var(--sys-accent-gradient-hover); box-shadow: var(--ref-sunny-btn-send-hover-shadow); }
html[data-theme="sunny"] .code-block { border-color: var(--ref-sunny-code-block-border); }
html[data-theme="sunny"] ::-webkit-scrollbar-thumb { background: var(--ref-sunny-webkit-scrollbar-thumb-bg); }
html[data-theme="sunny"] :focus-visible { outline-color: var(--ref-sunny-focus-visible-outline); }
html[data-theme="sunny"] .theme-scene {
  background:
    radial-gradient(circle at var(--comp-scene-sun-x) var(--comp-scene-sun-y), var(--ref-sunny-theme-scene-bg-1), var(--ref-sunny-theme-scene-bg-2) calc(var(--comp-scene-sun-r) * 2.4), transparent calc(var(--comp-scene-sun-r) * 4.4)),
    linear-gradient(180deg, var(--ref-sunny-theme-scene-bg-3), var(--ref-sunny-theme-scene-bg-4) 120px, transparent 230px);
}
html[data-theme="sunny"] .theme-scene::before {
  background:
    radial-gradient(circle at var(--comp-scene-sun-x) var(--comp-scene-sun-y), var(--ref-sunny-theme-scene-before-bg-1) 0, var(--ref-sunny-theme-scene-before-bg-2) calc(var(--comp-scene-sun-r) * .7), var(--ref-sunny-theme-scene-before-bg-3) var(--comp-scene-sun-r), transparent calc(var(--comp-scene-sun-r) + .5px)),
    repeating-conic-gradient(from -2.5deg at var(--comp-scene-sun-x) var(--comp-scene-sun-y), var(--ref-sunny-theme-scene-before-bg-4) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask-image: radial-gradient(circle at var(--comp-scene-sun-x) var(--comp-scene-sun-y), var(--ref-sunny-theme-scene-before-mask-1) calc(var(--comp-scene-sun-r) * 1.7), transparent calc(var(--comp-scene-sun-r) * 2.15));
  mask-image: radial-gradient(circle at var(--comp-scene-sun-x) var(--comp-scene-sun-y), var(--ref-sunny-theme-scene-before-mask-1) calc(var(--comp-scene-sun-r) * 1.7), transparent calc(var(--comp-scene-sun-r) * 2.15));
}
html[data-theme="sunny"] .theme-scene[data-size="wide"] {
  --ref-sunny-cloud-b:
    var(--ref-sunny-cloud-b-wide);
}
html[data-theme="sunny"] .theme-scene::after {
  opacity: .5;
  filter: blur(2px);
  background:
    radial-gradient(circle at calc(14% - 24px) 38px, var(--ref-sunny-cloud) 0 12px, transparent 12.5px),
    radial-gradient(circle at calc(14% - 8px) 29px, var(--ref-sunny-cloud) 0 17px, transparent 17.5px),
    radial-gradient(circle at calc(14% + 11px) 33px, var(--ref-sunny-cloud) 0 14px, transparent 14.5px),
    radial-gradient(circle at calc(14% + 25px) 39px, var(--ref-sunny-cloud) 0 10px, transparent 10.5px),
    radial-gradient(36px 8px at 14% 44px, var(--ref-sunny-cloud) 0 95%, transparent),
    radial-gradient(38px 8px at 14% 48px, var(--ref-sunny-cloud-underside) 0 95%, transparent),
    var(--ref-sunny-cloud-b, linear-gradient(transparent, transparent)),
    radial-gradient(circle at calc(100% - var(--comp-scene-sun-r) * 2.6 - 24px) calc(var(--comp-scene-sun-r) * 1.4 + 4px), var(--ref-sunny-cloud) 0 11px, transparent 11.5px),
    radial-gradient(circle at calc(100% - var(--comp-scene-sun-r) * 2.6 - 8px) calc(var(--comp-scene-sun-r) * 1.4 - 4px), var(--ref-sunny-cloud) 0 15px, transparent 15.5px),
    radial-gradient(circle at calc(100% - var(--comp-scene-sun-r) * 2.6 + 10px) calc(var(--comp-scene-sun-r) * 1.4), var(--ref-sunny-cloud) 0 12px, transparent 12.5px),
    radial-gradient(32px 7px at calc(100% - var(--comp-scene-sun-r) * 2.6) calc(var(--comp-scene-sun-r) * 1.4 + 9px), var(--ref-sunny-cloud) 0 95%, transparent),
    radial-gradient(34px 7px at calc(100% - var(--comp-scene-sun-r) * 2.6) calc(var(--comp-scene-sun-r) * 1.4 + 13px), var(--ref-sunny-cloud-underside) 0 95%, transparent);
}
}