@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/styles/brand-gold.css

@@ -0,0 +1,471 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&display=swap");
+
+:root {
+  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "JetBrains Mono", "Cascadia Code", "Courier New", monospace;
+
+  --jet-black: #050506;
+  --rich-black: #0a0a0c;
+  --charcoal: #121214;
+
+  --deep-gold: #d8a000;
+  --classic-gold: #f0b90b;
+  --highlight-gold: #f3ba2f;
+  --champagne-gold: #f5f7fa;
+  --burnished-gold: #e9b52c;
+
+  --dark-silver: #313136;
+  --steel: #8a8a94;
+  --bright-silver: #b9b9c2;
+  --chrome-highlight: #f5f5f5;
+  --gunmetal: #232329;
+
+  --gold-glow: rgba(240, 185, 11, 0.16);
+  --soft-white-glow: rgba(255, 255, 255, 0.08);
+  --inner-shadow: rgba(0, 0, 0, 0.6);
+
+  --accent: var(--classic-gold);
+  --accent-rgb: 240, 185, 11;
+  --accent-hover: var(--highlight-gold);
+  --accent-muted: var(--deep-gold);
+  --accent-subtle: rgba(240, 185, 11, 0.12);
+  --accent-foreground: var(--jet-black);
+  --primary: var(--classic-gold);
+  --primary-foreground: var(--jet-black);
+  --ring: var(--highlight-gold);
+  --border-hover: var(--classic-gold);
+  --warn: var(--classic-gold);
+  --warn-muted: rgba(240, 185, 11, 0.7);
+  --warn-subtle: rgba(240, 185, 11, 0.14);
+  --focus: rgba(240, 185, 11, 0.18);
+  --focus-ring: 0 0 0 2px rgba(240, 185, 11, 0.34);
+  --link-color: var(--classic-gold);
+  --link-hover-color: var(--highlight-gold);
+}
+
+.onboarding-screen {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100dvh;
+  overflow: hidden;
+  overscroll-behavior: none;
+  background: var(--jet-black);
+  --text: #ededed;
+  --muted: #a1a1aa;
+  --border: rgba(71, 77, 87, 0.26);
+  --card: rgba(10, 10, 12, 0.84);
+  --ok: #3fa37c;
+  --ok-muted: rgba(63, 163, 124, 0.3);
+  --ok-subtle: rgba(63, 163, 124, 0.12);
+  --accent: var(--classic-gold);
+  --accent-foreground: var(--jet-black);
+  /* Onboarding panels sit over a permanently dark VRM scene. Keep their chrome
+   * in the dark variant even when the surrounding UI theme is light.
+   */
+  --onboarding-text-strong: rgba(240, 238, 250, 0.95);
+  --onboarding-text-primary: rgba(236, 234, 243, 0.94);
+  --onboarding-text-subtle: rgba(220, 218, 228, 0.86);
+  --onboarding-text-muted: rgba(203, 201, 214, 0.82);
+  --onboarding-text-faint: rgba(182, 180, 196, 0.72);
+  --onboarding-text-stroke: rgba(4, 8, 14, 0.78);
+  --onboarding-text-shadow-strong:
+    0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 14px rgba(3, 5, 10, 0.62),
+    0 0 24px rgba(3, 5, 10, 0.24);
+  --onboarding-text-shadow-primary: 0 1px 5px rgba(3, 5, 10, 0.34);
+  --onboarding-text-shadow-muted: 0 1px 4px rgba(3, 5, 10, 0.28);
+  --onboarding-card-bg: rgba(10, 10, 12, 0.56);
+  --onboarding-card-bg-hover: rgba(18, 18, 21, 0.64);
+  --onboarding-card-border: rgba(255, 255, 255, 0.11);
+  --onboarding-card-border-strong: rgba(240, 185, 11, 0.32);
+  --onboarding-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+  --onboarding-recommended-bg: rgba(240, 185, 11, 0.16);
+  --onboarding-recommended-bg-hover: rgba(240, 185, 11, 0.22);
+  --onboarding-recommended-border: rgba(240, 185, 11, 0.28);
+  --onboarding-recommended-border-strong: rgba(240, 185, 11, 0.44);
+  --onboarding-accent-bg: rgba(240, 185, 11, 0.18);
+  --onboarding-accent-bg-hover: rgba(240, 185, 11, 0.24);
+  --onboarding-accent-border: rgba(240, 185, 11, 0.3);
+  --onboarding-accent-border-hover: rgba(240, 185, 11, 0.46);
+  --onboarding-accent-foreground: rgba(255, 250, 238, 0.98);
+  --onboarding-panel-bg: rgba(6, 7, 8, 0.6);
+  --onboarding-panel-border: rgba(255, 255, 255, 0.11);
+  --onboarding-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
+  --onboarding-input-bg: rgba(10, 10, 12, 0.68);
+  --onboarding-input-border: rgba(255, 255, 255, 0.13);
+  --onboarding-text-support-bg: rgba(9, 12, 18, 0.22);
+  --onboarding-text-support-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  --onboarding-divider: rgba(49, 49, 56, 0.22);
+  --onboarding-footer-border: rgba(255, 255, 255, 0.08);
+  --onboarding-link: var(--highlight-gold);
+  --onboarding-ripple: rgba(240, 185, 11, 0.12);
+  --onboarding-secondary-hover-bg: rgba(240, 185, 11, 0.08);
+  --onboarding-secondary-pressed-bg: rgba(240, 185, 11, 0.14);
+  --onboarding-secondary-focus-ring: rgba(240, 185, 11, 0.42);
+  --onboarding-roster-bg: rgba(7, 10, 14, 0.8);
+  --onboarding-roster-border: rgba(255, 255, 255, 0.1);
+  --onboarding-field-focus-border: rgba(240, 185, 11, 0.46);
+  --onboarding-field-focus-shadow: 0 0 0 3px rgba(240, 185, 11, 0.14);
+}
+
+/* ── Onboarding theme variables ────────────────────────────────────────
+ * Used across all onboarding screens (hosting, providers, identity, etc.).
+ * Dark variant by default; light-mode overrides below.
+ */
+:root {
+  /* Text hierarchy */
+  --onboarding-text-strong: rgba(255, 255, 255, 0.97);
+  --onboarding-text-primary: rgba(240, 242, 245, 0.94);
+  --onboarding-text-subtle: rgba(209, 214, 221, 0.84);
+  --onboarding-text-muted: rgba(191, 196, 205, 0.82);
+  --onboarding-text-faint: rgba(171, 177, 188, 0.72);
+  --onboarding-text-stroke: rgba(4, 8, 14, 0.78);
+  --onboarding-text-shadow-strong:
+    0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 14px rgba(3, 5, 10, 0.62),
+    0 0 24px rgba(3, 5, 10, 0.24);
+  --onboarding-text-shadow-primary: 0 1px 5px rgba(3, 5, 10, 0.34);
+  --onboarding-text-shadow-muted: 0 1px 4px rgba(3, 5, 10, 0.28);
+
+  /* Cards (Remote, Cloud buttons) */
+  --onboarding-card-bg: rgba(10, 10, 12, 0.56);
+  --onboarding-card-bg-hover: rgba(18, 18, 21, 0.64);
+  --onboarding-card-border: rgba(255, 255, 255, 0.11);
+  --onboarding-card-border-strong: rgba(240, 185, 11, 0.32);
+  --onboarding-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+
+  /* Recommended card (Local button) */
+  --onboarding-recommended-bg: rgba(240, 185, 11, 0.12);
+  --onboarding-recommended-bg-hover: rgba(240, 185, 11, 0.18);
+  --onboarding-recommended-border: rgba(240, 185, 11, 0.28);
+  --onboarding-recommended-border-strong: rgba(240, 185, 11, 0.44);
+
+  /* Accent (badges, active indicators) */
+  --onboarding-accent-bg: rgba(240, 185, 11, 0.16);
+  --onboarding-accent-bg-hover: rgba(240, 185, 11, 0.24);
+  --onboarding-accent-border: rgba(240, 185, 11, 0.24);
+  --onboarding-accent-border-hover: rgba(240, 185, 11, 0.46);
+  --onboarding-accent-foreground: var(--highlight-gold);
+
+  /* Panel (main onboarding container) */
+  --onboarding-panel-bg: rgba(6, 7, 8, 0.6);
+  --onboarding-panel-border: rgba(255, 255, 255, 0.11);
+  --onboarding-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
+  --onboarding-input-bg: rgba(10, 10, 12, 0.68);
+  --onboarding-input-border: rgba(255, 255, 255, 0.13);
+  --onboarding-text-support-bg: rgba(9, 12, 18, 0.22);
+  --onboarding-text-support-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+
+  /* Misc */
+  --onboarding-divider: rgba(49, 49, 56, 0.22);
+  --onboarding-footer-border: rgba(49, 49, 56, 0.16);
+  --onboarding-link: var(--classic-gold);
+  --onboarding-ripple: rgba(240, 185, 11, 0.08);
+  --onboarding-secondary-hover-bg: rgba(240, 185, 11, 0.08);
+  --onboarding-secondary-pressed-bg: rgba(240, 185, 11, 0.14);
+  --onboarding-secondary-focus-ring: rgba(240, 185, 11, 0.42);
+  --onboarding-roster-bg: rgba(8, 10, 13, 0.76);
+  --onboarding-roster-border: rgba(49, 49, 56, 0.18);
+  --onboarding-field-focus-border: rgba(240, 185, 11, 0.42);
+  --onboarding-field-focus-shadow: 0 0 0 3px rgba(240, 185, 11, 0.12);
+}
+
+.onboarding-step-list::after {
+  background: linear-gradient(
+    180deg,
+    rgba(240, 185, 11, 0.54) 0%,
+    rgba(255, 210, 77, 0.46) 58%,
+    rgba(255, 210, 77, 0.18) 100%
+  );
+}
+
+.onboarding-step-item--done .onboarding-step-dot {
+  background: rgba(240, 185, 11, 0.18);
+  border-color: rgba(240, 185, 11, 0.34);
+}
+
+.onboarding-step-item--active .onboarding-step-dot {
+  background: var(--classic-gold);
+  border-color: rgba(245, 247, 250, 0.86);
+  box-shadow:
+    0 0 12px var(--gold-glow),
+    0 0 22px rgba(240, 185, 11, 0.12);
+}
+
+@keyframes onboarding-dot-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 12px var(--gold-glow),
+      0 0 22px rgba(240, 185, 11, 0.12);
+    transform: rotate(45deg) scale(1);
+  }
+  50% {
+    box-shadow:
+      0 0 16px rgba(240, 185, 11, 0.24),
+      0 0 28px rgba(240, 185, 11, 0.14);
+    transform: rotate(45deg) scale(1.15);
+  }
+}
+
+.onboarding-step-item--active .onboarding-step-sub {
+  color: var(--highlight-gold);
+}
+
+[data-theme="dark"],
+.dark {
+  font-family: var(--font-sans);
+
+  --bg: #09090d;
+  --bg-accent: #111118;
+  --bg-elevated: #181820;
+  --bg-hover: #222230;
+  --bg-muted: #111118;
+
+  --card: #151518;
+  --card-foreground: #e4e4ea;
+  --surface: #1c1c26;
+
+  --text: #d0d0d8;
+  --text-strong: #f0f0f4;
+  --chat-text: #d0d0d8;
+  --muted: #7e7e8a;
+  --muted-strong: #a0a0ac;
+
+  --border: #32323c;
+  --border-strong: #44444e;
+  --border-subtle: #1c1c22;
+  --input: #282830;
+
+  --accent-foreground: var(--jet-black);
+  --primary-foreground: var(--jet-black);
+
+  --header-bar-bg: var(--jet-black);
+  --header-bar-fg: #e8e8ec;
+  --section-bar-bg: var(--rich-black);
+  --section-bar-fg: #e8e8ec;
+}
+
+[data-testid="companion-header-chat-controls"] > button {
+  color: #eaecef;
+  background: rgba(10, 10, 12, 0.9);
+  border-color: rgba(49, 49, 56, 0.4);
+  box-shadow:
+    0 14px 26px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+[data-testid="companion-header-chat-controls"] > button svg {
+  color: inherit;
+}
+
+[data-testid="companion-header-chat-controls"] > button:hover,
+[data-testid="companion-header-chat-controls"] > button:focus-visible {
+  color: var(--chrome-highlight);
+  background: linear-gradient(
+    135deg,
+    rgba(18, 18, 21, 0.96) 0%,
+    rgba(10, 10, 12, 0.94) 100%
+  );
+  border-color: rgba(240, 185, 11, 0.36);
+  box-shadow:
+    0 0 0 1px rgba(240, 185, 11, 0.14),
+    0 16px 28px rgba(0, 0, 0, 0.34),
+    0 0 18px rgba(240, 185, 11, 0.08);
+}
+
+[data-testid="companion-header-chat-controls"] > button[aria-pressed="true"] {
+  border-color: rgba(240, 185, 11, 0.32);
+}
+
+.settings-icon-sidebar {
+  background: linear-gradient(
+    180deg,
+    rgba(10, 10, 12, 0.98) 0%,
+    rgba(5, 5, 6, 0.96) 100%
+  );
+  border-right-color: rgba(49, 49, 56, 0.24);
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
+}
+
+.settings-content-area {
+  --s-panel-bg: rgba(10, 10, 12, 0.97);
+  --s-card-bg: rgba(18, 18, 21, 0.92);
+  --s-card-bg-hover: rgba(24, 24, 28, 0.96);
+  --s-input-bg: rgba(5, 5, 6, 0.92);
+  --s-input-bg-hover: rgba(10, 10, 12, 0.95);
+  --s-input-bg-focus: rgba(18, 18, 21, 0.98);
+  --s-sidebar-bg: rgba(5, 5, 6, 0.98);
+  --s-text: var(--chrome-highlight);
+  --s-text-secondary: #eaecef;
+  --s-text-muted: #848e9c;
+  --s-text-txt: var(--chrome-highlight);
+  --s-border-subtle: rgba(49, 49, 56, 0.28);
+  --s-border: rgba(49, 49, 56, 0.42);
+  --s-border-medium: rgba(138, 138, 148, 0.34);
+  --s-border-strong: rgba(177, 183, 191, 0.2);
+  --s-accent: var(--classic-gold);
+  --s-accent-glow: rgba(240, 185, 11, 0.16);
+  --s-accent-subtle: rgba(240, 185, 11, 0.1);
+  --s-grid-line: rgba(240, 185, 11, 0.018);
+  --s-glow-edge: rgba(240, 185, 11, 0.08);
+
+  background:
+    radial-gradient(
+      circle at top right,
+      rgba(240, 185, 11, 0.06),
+      transparent 26%
+    ),
+    linear-gradient(180deg, rgba(10, 10, 12, 0.98), rgba(5, 5, 6, 1));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
+}
+
+.settings-content-area::after {
+  background: linear-gradient(
+    180deg,
+    transparent 8%,
+    rgba(240, 185, 11, 0.16) 48%,
+    transparent 92%
+  );
+  box-shadow: 0 0 18px rgba(240, 185, 11, 0.08);
+}
+
+.settings-content-area::before {
+  opacity: 0.42;
+  background-size: 52px 52px;
+}
+
+.settings-content-area > [class*="sticky top-0"][class*="border-b"] {
+  border-color: rgba(49, 49, 56, 0.4);
+  background: linear-gradient(
+    180deg,
+    rgba(10, 10, 12, 0.94) 0%,
+    rgba(5, 5, 6, 0.88) 100%
+  );
+  box-shadow:
+    0 18px 38px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.settings-content-area [class*="bg-black/5"],
+.settings-content-area [class*="bg-black/10"],
+.settings-content-area [class*="bg-black/20"] {
+  background: rgba(5, 5, 6, 0.56);
+}
+
+.settings-content-area [class*="bg-card/40"],
+.settings-content-area [class*="bg-card/55"],
+.settings-content-area [class*="bg-card/60"],
+.settings-content-area [class*="bg-card/70"],
+.settings-content-area [class*="bg-card/90"] {
+  background: linear-gradient(
+    180deg,
+    rgba(18, 18, 21, 0.92) 0%,
+    rgba(10, 10, 12, 0.88) 100%
+  );
+  border-color: rgba(49, 49, 56, 0.4);
+  box-shadow:
+    0 16px 34px rgba(0, 0, 0, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.settings-content-area input[type="text"],
+.settings-content-area input[type="password"],
+.settings-content-area input[type="number"],
+.settings-content-area input[type="email"],
+.settings-content-area textarea,
+.settings-content-area select {
+  color: var(--chrome-highlight);
+}
+
+.settings-content-area input::placeholder,
+.settings-content-area textarea::placeholder {
+  color: #a1a1aa;
+}
+
+.plugins-game-card {
+  padding: 0.875rem 1rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(49, 49, 56, 0.42);
+  background: linear-gradient(
+    180deg,
+    rgba(18, 18, 21, 0.92) 0%,
+    rgba(10, 10, 12, 0.9) 100%
+  );
+  box-shadow:
+    0 14px 32px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.plugins-game-card::after {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.06),
+    transparent 30%
+  );
+  opacity: 0.45;
+}
+
+.plugins-game-card:hover {
+  background: linear-gradient(
+    180deg,
+    rgba(24, 24, 28, 0.96) 0%,
+    rgba(10, 10, 12, 0.92) 100%
+  );
+  border-color: rgba(183, 189, 198, 0.22);
+  box-shadow:
+    0 16px 34px rgba(0, 0, 0, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.plugins-game-card.is-selected {
+  border-color: rgba(240, 185, 11, 0.42);
+  border-left-color: var(--highlight-gold);
+  background: linear-gradient(
+    180deg,
+    rgba(240, 185, 11, 0.12) 0%,
+    rgba(18, 18, 21, 0.94) 100%
+  );
+  box-shadow:
+    0 0 0 1px rgba(240, 185, 11, 0.12),
+    0 18px 38px rgba(0, 0, 0, 0.28),
+    0 0 18px rgba(240, 185, 11, 0.08);
+}
+
+.plugins-game-card-icon-shell,
+.plugins-game-detail-icon-shell {
+  border-color: rgba(138, 138, 148, 0.24);
+  background: linear-gradient(
+    145deg,
+    rgba(245, 247, 250, 0.06),
+    rgba(10, 10, 12, 0.58)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 8px 18px rgba(0, 0, 0, 0.2);
+}
+
+.plugins-game-card-name {
+  color: var(--chrome-highlight);
+  letter-spacing: 0.03em;
+}
+
+.plugins-game-card-meta,
+.plugins-game-detail-meta {
+  color: #b7bdc6;
+}
+
+.plugins-game-badge {
+  border-color: rgba(49, 49, 56, 0.36);
+  background: rgba(5, 5, 6, 0.48);
+  color: #b7bdc6;
+}
+
+.plugins-game-badge.is-on {
+  border-color: rgba(240, 185, 11, 0.28);
+  background: rgba(240, 185, 11, 0.12);
+  color: var(--highlight-gold);
+}
+
+/* Component-level theme overrides removed — use theme variables directly. */

package/styles/electrobun-mac-window-drag.css

@@ -0,0 +1,106 @@
+/**
+ * macOS Electrobun main window uses titleBarStyle "hiddenInset" (no native title bar).
+ *
+ * WHY this file exists:
+ * - Chromium honors -webkit-app-region for drag/no-drag regions.
+ * - System WKWebView often does not — actual move/resize chrome lives in
+ *   apps/app/electrobun/native/macos/window-effects.mm (see docs/guides/electrobun-mac-window-chrome.md).
+ * - We still ship these rules so CEF or future web engines get sensible defaults
+ *   without duplicating policy only in native code.
+ *
+ * html.eliza-electrobun-macos-titlebar is toggled from apps/app/src/main.tsx
+ * and html.eliza-electrobun-custom-titlebar is toggled by Header when the
+ * main macOS Electrobun shell renders its custom titlebar.
+ */
+html.eliza-electrobun-macos-titlebar {
+  /**
+   * Leading inset so the header nav (Chat, Apps, ...) clears the traffic-light
+   * cluster while staying on the same vertical row. Electrobun repositions
+   * the buttons on the existing macOS dev window.
+   */
+  --eliza-macos-frame-left-inset: 80px;
+  --eliza-macos-frame-top-inset: 0px;
+  --eliza-mobile-nav-offset: 0px;
+}
+
+html.eliza-electrobun-macos-titlebar.eliza-electrobun-frameless:not(
+    .eliza-electrobun-custom-titlebar
+  )
+  body {
+  -webkit-app-region: drag;
+}
+
+html.eliza-electrobun-macos-titlebar [data-window-titlebar="true"] {
+  -webkit-app-region: drag;
+}
+
+html.eliza-electrobun-macos-titlebar [data-no-window-drag="true"],
+html.eliza-electrobun-macos-titlebar [data-no-window-drag="true"] *,
+html.eliza-electrobun-macos-titlebar [data-no-window-drag="true"]::before,
+html.eliza-electrobun-macos-titlebar [data-no-window-drag="true"]::after,
+html.eliza-electrobun-macos-titlebar [data-no-camera-drag="true"],
+html.eliza-electrobun-macos-titlebar [data-no-camera-drag="true"] *,
+html.eliza-electrobun-macos-titlebar [data-no-camera-drag="true"]::before,
+html.eliza-electrobun-macos-titlebar [data-no-camera-drag="true"]::after {
+  -webkit-app-region: no-drag;
+}
+
+html.eliza-electrobun-macos-titlebar [data-window-titlebar-padding] {
+  padding-inline-start: max(
+    env(safe-area-inset-left, 0px),
+    var(--eliza-macos-frame-left-inset)
+  );
+  padding-inline-end: 0.75rem;
+  padding-top: max(
+    env(safe-area-inset-top, 0px),
+    var(--eliza-macos-frame-top-inset)
+  );
+}
+
+html.eliza-electrobun-macos-titlebar [data-window-titlebar-banner="true"] {
+  padding-inline-start: max(
+    env(safe-area-inset-left, 0px),
+    var(--eliza-macos-frame-left-inset)
+  );
+}
+
+html.eliza-electrobun-macos-titlebar a,
+html.eliza-electrobun-macos-titlebar button,
+html.eliza-electrobun-macos-titlebar input,
+html.eliza-electrobun-macos-titlebar textarea,
+html.eliza-electrobun-macos-titlebar select,
+html.eliza-electrobun-macos-titlebar option,
+html.eliza-electrobun-macos-titlebar label,
+html.eliza-electrobun-macos-titlebar summary,
+html.eliza-electrobun-macos-titlebar iframe,
+html.eliza-electrobun-macos-titlebar canvas,
+html.eliza-electrobun-macos-titlebar video,
+html.eliza-electrobun-macos-titlebar audio,
+html.eliza-electrobun-macos-titlebar electrobun-wgpu,
+html.eliza-electrobun-macos-titlebar [role="button"],
+html.eliza-electrobun-macos-titlebar [role="link"],
+html.eliza-electrobun-macos-titlebar [role="menuitem"],
+html.eliza-electrobun-macos-titlebar [role="menuitemcheckbox"],
+html.eliza-electrobun-macos-titlebar [role="menuitemradio"],
+html.eliza-electrobun-macos-titlebar [role="option"],
+html.eliza-electrobun-macos-titlebar [role="radio"],
+html.eliza-electrobun-macos-titlebar [role="checkbox"],
+html.eliza-electrobun-macos-titlebar [role="switch"],
+html.eliza-electrobun-macos-titlebar [role="tab"],
+html.eliza-electrobun-macos-titlebar [role="slider"],
+html.eliza-electrobun-macos-titlebar [role="listbox"],
+html.eliza-electrobun-macos-titlebar [role="combobox"],
+html.eliza-electrobun-macos-titlebar [role="spinbutton"],
+html.eliza-electrobun-macos-titlebar [role="textbox"],
+html.eliza-electrobun-macos-titlebar [role="searchbox"],
+html.eliza-electrobun-macos-titlebar [contenteditable="true"],
+html.eliza-electrobun-macos-titlebar [aria-haspopup],
+html.eliza-electrobun-macos-titlebar [data-shell-scroll-region="true"] {
+  -webkit-app-region: no-drag;
+}
+
+/* Onboarding full-screen VRM canvas would otherwise stay no-drag (companion rule above). */
+html.eliza-electrobun-macos-titlebar.eliza-electrobun-frameless .onboarding-screen
+  canvas {
+  -webkit-app-region: drag;
+}