Vendor OpenClaw source as Adolf fork baseline

Adolf is a fork/vendored clone of github.com/openclaw/openclaw (v2026.6.11),
free to diverge. Tree copied sans upstream .git; upstream remote added for
future syncs. Node pinned to 24 (.nvmrc); engines already require >=22.19.
Preserves docs/ARCHITECTURE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LeqyaxJF2nbRXJtae2kNB2

ui/docs/design-system/glass-surfaces.md

@@ -0,0 +1,94 @@
+# Glass Surfaces
+
+OpenClaw uses two glass tiers to establish visual hierarchy. **Never use flat, fully-opaque backgrounds** in the main chrome — glass creates the lived-in depth that defines the visual language.
+
+---
+
+## Tier 1 — Navigation Chrome
+
+Used for: top nav, sidebar, persistent chrome overlays.
+
+```css
+/* Exact values from ui/src/styles/layout.css — .topbar */
+background: color-mix(in srgb, var(--bg) 82%, transparent);
+backdrop-filter: blur(12px) saturate(1.6);
+-webkit-backdrop-filter: blur(12px) saturate(1.6);
+```
+
+**Why these values:** the topbar mixes the root background with transparency so it stays readable while still refracting content behind it. `saturate(1.6)` brings out colour from blurred layers.
+
+---
+
+## Tier 2 — Card / Input Surfaces
+
+Used for: chat composer input box, modals, popovers, settings cards, dropdowns.
+
+```css
+/* Exact values from ui/src/styles/chat/layout.css — .agent-chat__input */
+background: var(--card); /* #161920 */
+border: 1px solid var(--border); /* #1e2028 */
+border-radius: var(--radius-lg); /* 14px */
+
+@supports (backdrop-filter: blur(1px)) {
+  backdrop-filter: blur(12px) saturate(1.6);
+  -webkit-backdrop-filter: blur(12px) saturate(1.6);
+}
+```
+
+Popovers and floating overlays reduce blur slightly:
+
+```css
+/* Exact values from source */
+backdrop-filter: blur(
+  8px
+); /* components.css action menu, cron-quick-create.css modal backdrop, workboard.css modal backdrop */
+backdrop-filter: blur(10px); /* skill-workshop.css revision dialog, dreams.css media lightbox */
+backdrop-filter: blur(14px); /* components.css markdown preview dialog backdrop */
+```
+
+---
+
+## The No-Solid-Panels Rule
+
+> **Do not** add `background: var(--bg)` or any fully-opaque fill to a surface that appears above other content.
+
+Use the `@supports` fallback pattern below instead. Browsers that lack `backdrop-filter` fall back gracefully to the semi-opaque base without breaking layout.
+
+### `@supports` Fallback Pattern
+
+```css
+.my-surface {
+  /* Fallback for older browsers / Firefox without backdrop-filter */
+  background: rgba(14, 16, 21, 0.92);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  .my-surface {
+    background: rgba(14, 16, 21, 0.75);
+    backdrop-filter: blur(12px) saturate(1.6);
+    -webkit-backdrop-filter: blur(12px) saturate(1.6);
+  }
+}
+```
+
+---
+
+## When to Use Each Tier
+
+| Context                | Tier | Blur |
+| ---------------------- | ---- | ---- |
+| Top nav / sidebar rail | 1    | 12px |
+| Chat composer          | 2    | 12px |
+| Modal / dialog         | 2    | 10px |
+| Dropdown / popover     | 2    | 8px  |
+| Tooltip                | 2    | 14px |
+| Workboard card         | 2    | 10px |
+
+---
+
+## Anti-Patterns
+
+- ❌ `background: var(--bg)` on a surface element (use glass instead)
+- ❌ `backdrop-filter` without `-webkit-backdrop-filter` (Safari still requires prefix)
+- ❌ Nesting glass surfaces more than 2 levels (causes noticeable blur stacking on macOS)
+- ❌ Using `blur(>16px)` outside of modal overlays (hurts performance on mid-tier devices)