/* Theme presets (User Settings → Appearance). Each preset only sets the design tokens from style.css.
   body[data-theme] picks the light/dark base; body[data-preset] layers a preset on top. */

body[data-preset="amoled"] {
  --bg-rail: #000; --bg-side: #000; --bg-main: #000; --bg-panel: #050505; --bg-float: #000;
  --bg-input: #0d0d0d; --bg-msg-hover: #070707; --bg-card: #0a0a0a; --bg-modal: #050505; --bg-modal-foot: #0d0d0d;
  --border: #1a1a1a; --divider: #141414; --code-bg: #0a0a0a; --scroll: #1f1f1f; --scroll-track: #000;
}
body[data-preset="cyberpunk"] {
  --brand: #ff2bd6; --brand-hover: #d81fb5; --on-brand: #fff; --accent: #00f0ff; --link: #7ffbff;
  --bg-rail: #0b0221; --bg-side: #120434; --bg-main: #170a3d; --bg-panel: #0f0330; --bg-float: #0b0221;
  --bg-input: #22105a; --bg-hover: rgba(255, 43, 214, .12); --bg-active: rgba(255, 43, 214, .24); --bg-msg-hover: #1d0e4b;
  --bg-card: #1b0a47; --bg-modal: #170a3d; --bg-modal-foot: #120434;
  --text: #e9e3ff; --text-strong: #fff; --text-muted: #a99ce0; --text-faint: #7a6cb5; --icon: #00f0ff; --icon-hover: #7ffbff;
  --border: #3a1f87; --divider: rgba(0, 240, 255, .18); --mention-bar: #00f0ff; --mention-bg: rgba(0, 240, 255, .08);
  --mention-pill: rgba(255, 43, 214, .3); --mention-pill-text: #ffc2f3; --code-bg: #0f0330; --scroll: #3a1f87; --scroll-track: #120434;
}
body[data-preset="cyberpunk"] .author, body[data-preset="cyberpunk"] .set-content h2 { text-shadow: 0 0 8px rgba(255, 43, 214, .45); }
body[data-preset="aurora"] {
  --brand: #3ddc97; --brand-hover: #2fb87d; --on-brand: #04140d; --accent: #3ddc97;
  --bg-rail: #0c1320; --bg-side: rgba(18, 28, 46, .92); --bg-main: rgba(20, 30, 50, .88); --bg-panel: #101a2c; --bg-float: #0c1320;
  --bg-input: rgba(40, 56, 86, .8); --bg-msg-hover: rgba(61, 220, 151, .05); --bg-card: #142036; --bg-modal: #142036; --bg-modal-foot: #101a2c;
  --text: #dfe9f5; --text-strong: #fff; --text-muted: #93a7c2; --icon: #a8bfdc; --border: #263752; --divider: rgba(147, 167, 194, .2);
  --code-bg: #101a2c; --scroll: #2b3d5c; --scroll-track: transparent;
}
body[data-preset="aurora"] #app { background: linear-gradient(135deg, #0f2027 0%, #1b3a4b 35%, #3a1c5c 70%, #0f3d3e 100%); background-size: 300% 300%; animation: aurora 30s ease infinite; }
body[data-preset="aurora"].reduce-motion #app { animation: none; }
@keyframes aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
body[data-preset="light"] {
  --bg-rail: #f3f4f6; --bg-side: #fafafa; --bg-main: #fff; --bg-panel: #f3f4f6; --bg-card: #fafafa;
  --border: #eceef1; --divider: #eceef1; --shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
body[data-preset="terminal"] {
  --font: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --brand: #33ff66; --brand-hover: #22cc4f; --on-brand: #000; --accent: #33ff66; --link: #9dff9d; --green: #33ff66;
  --bg-rail: #000; --bg-side: #020a02; --bg-main: #031103; --bg-panel: #000; --bg-float: #000;
  --bg-input: #062406; --bg-hover: rgba(51, 255, 102, .08); --bg-active: rgba(51, 255, 102, .16); --bg-msg-hover: #051805;
  --bg-card: #041404; --bg-modal: #031103; --bg-modal-foot: #020a02;
  --text: #9dff9d; --text-strong: #c8ffc8; --text-muted: #4fbf4f; --text-faint: #2f8f2f; --icon: #33ff66; --icon-hover: #c8ffc8;
  --border: #0d4d0d; --divider: #0d3a0d; --mention-bg: rgba(51, 255, 102, .08); --mention-bar: #33ff66;
  --mention-pill: rgba(51, 255, 102, .2); --mention-pill-text: #c8ffc8; --code-bg: #000; --scroll: #0d4d0d; --scroll-track: #000;
}
body[data-preset="terminal"] .btn { color: #000; }
body[data-preset="ocean"] {
  --brand: #1e90ff; --brand-hover: #1873cc; --on-brand: #fff; --accent: #5ee0ff; --link: #8fd3ff;
  --bg-rail: #061a2e; --bg-side: #0a2540; --bg-main: #0d2e4f; --bg-panel: #08203a; --bg-float: #061a2e;
  --bg-input: #133b63; --bg-hover: rgba(30, 144, 255, .12); --bg-active: rgba(30, 144, 255, .24); --bg-msg-hover: #0f3459;
  --bg-card: #0a2540; --bg-modal: #0d2e4f; --bg-modal-foot: #0a2540;
  --text: #d6e9ff; --text-strong: #fff; --text-muted: #8fb3d9; --text-faint: #5f86ad; --icon: #9cc6f2; --icon-hover: #fff;
  --border: #1b4a77; --divider: rgba(143, 179, 217, .2); --code-bg: #08203a; --scroll: #1b4a77; --scroll-track: #0a2540;
}

/* appearance options */
body.high-contrast { --text: #fff; --text-muted: #d0d3d8; --divider: #6d6f78; --border: #80848e; }
body[data-theme="light"].high-contrast { --text: #000; --text-muted: #2e3338; }
body.underline-links a { text-decoration: underline; }
body.focus-rings :focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px; }
body.no-animations *, body.no-animations *::before, body.no-animations *::after { animation: none !important; transition: none !important; }
body.bubbles .msg-content { background: var(--bg-input); display: inline-block; padding: 6px 12px; border-radius: 14px; max-width: 100%; }
body.bubbles .msg.grouped .msg-content { margin-top: 2px; }
.msg { margin-top: var(--msg-spacing, 17px); }
.msg.grouped { margin-top: 0; }
body.custom-radius :is(.btn, .input, .modal, .popout, .embed, .att-img, .rail-icon:hover, .rail-item.active .rail-icon) { border-radius: var(--radius); }
.sidebar { width: var(--sidebar-width, 240px); }
body.desaturate #app { filter: saturate(var(--saturation, 1)); }

/* safe mode banner (custom CSS disabled for this page load) */
.safe-mode-bar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 300; background: var(--yellow); color: #000; padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.safe-mode-bar button { background: rgba(0, 0, 0, .15); border: 0; border-radius: 4px; padding: 4px 8px; font-weight: 600; }