diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/README.md b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/README.md new file mode 100644 index 0000000..5987d5f --- /dev/null +++ b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/README.md @@ -0,0 +1,68 @@ +# Miku Future Beats + Neon Skyline / 初音未来 × 霓虹天际 + +A **dual-mode** WorkBuddy theme that automatically switches between two visual styles based on the app's light/dark mode setting. + +| Mode | Theme | Vibe | +|------|-------|------| +| **Light** | Miku Future Beats | Soft pastel, aqua-teal, gentle character artwork | +| **Dark** | Neon Skyline | Deep navy, neon-cyan, futuristic cityscape with character | + +## How it works + +The CSS uses scoped selectors to bind each theme to a specific mode: + +- **Light mode**: All Miku rules are scoped under `html.codedrobe-host-workbuddy:not(.dark)` — they only activate when the `.dark` class is **absent** +- **Dark mode**: All Neon Skyline rules are scoped under `html.codedrobe-host-workbuddy.dark` — they only activate when the `.dark` class is **present** + +Toggle WorkBuddy's light/dark theme switch and the correct skin loads automatically — no restart or re-injection needed. + +## Assets (4 images) + +| Key | File | Mode | Usage | +|-----|------|------|-------| +| `miku-hero` | `assets/miku-hero.png` | Light | Home-page hero background (Miku character) | +| `miku-texture` | `assets/miku-texture.png` | Light | Sidebar/surface texture overlay | +| `hero` | `assets/hero.png` | Dark | Home-page hero background (neon city + character) | +| `miku-wink` | `assets/miku-wink.png` | Dark | Input-box polaroid photo frame (wink Miku) | + +## Build and apply + +```bash +# Pack into .codedrobe-theme package +node ./bin/codedrobe.mjs theme pack skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/theme.json \ + --output dual-miku-neon-wb-1.0.0.codedrobe-theme --force + +# Apply to running WorkBuddy (with CDP debug port) +node ./bin/codedrobe.mjs apply --app workbuddy \ + --theme dual-miku-neon-wb-1.0.0.codedrobe-theme \ + --app-path "F:/WorkBuddy" --port 9336 --no-launch + +# Verify with screenshot +node ./bin/codedrobe.mjs verify --app workbuddy \ + --theme dual-miku-neon-wb-1.0.0.codedrobe-theme \ + --app-path "F:/WorkBuddy" --port 9336 \ + --screenshot dual-miku-neon-preview.png +``` + +## Persistence (auto-apply on launch) + +For the theme to persist across WorkBuddy restarts, use a launcher that: + +1. Starts WorkBuddy with `--remote-debugging-port=9336` +2. Runs `codedrobe apply --watch` in the background to auto-inject when CDP port becomes available + +Example VBS launcher: + +```vbscript +Set Shell = CreateObject("WScript.Shell") +Shell.Run "powershell.exe -NoProfile -WindowStyle Hidden -ExecutionPolicy Bypass -File watch-apply.ps1", 0, False +Shell.Run """F:\WorkBuddy\WorkBuddy.exe"" --remote-debugging-port=9336", 1, False +``` + +Where `watch-apply.ps1` polls port 9336 and runs `codedrobe apply --watch --no-launch` once the port is open. + +## Credits + +- **Miku Future Beats** (light mode): Original character theme adapted from CodeDrobe store, re-scoped for WorkBuddy light mode +- **Neon Skyline** (dark mode): Originally `neon-skyline-codex` for Codex, migrated and adapted for WorkBuddy dark mode by [anhao](https://github.com/s17765152890) +- **Dual-mode merge**: CSS scoping strategy combining both themes into a single auto-switching package diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/hero.png b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/hero.png new file mode 100644 index 0000000..c1d8d8c Binary files /dev/null and b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/hero.png differ diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-hero.png b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-hero.png new file mode 100644 index 0000000..0379887 Binary files /dev/null and b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-hero.png differ diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-texture.png b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-texture.png new file mode 100644 index 0000000..82f47d9 Binary files /dev/null and b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-texture.png differ diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-wink.png b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-wink.png new file mode 100644 index 0000000..4768e7d Binary files /dev/null and b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/assets/miku-wink.png differ diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/theme.json b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/theme.json new file mode 100644 index 0000000..1cbf746 --- /dev/null +++ b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/theme.json @@ -0,0 +1 @@ +{"schemaVersion": 1, "id": "dual-miku-neon-wb", "displayName": "Miku × Neon Skyline / 初音未来 × 霓虹天际", "version": "1.0.0", "catalog": {"name": {"en": "Miku Future Beats + Neon Skyline", "zh": "初音未来 · 霓虹天际（双模式）"}, "description": {"en": "Dual-mode WorkBuddy theme: Miku Future Beats in light mode, Neon Skyline in dark mode. Auto-switches with the system/theme toggle. Features full hero artwork, character polaroid, neon accents, and deep-navy surfaces.", "zh": "双模式 WorkBuddy 主题：浅色模式下为初音未来（Miku Future Beats），深色模式下为霓虹天际（Neon Skyline）。跟随系统/主题开关自动切换。全幅主视觉、角色相框、霓虹光效与深海蓝表面。"}, "categories": ["character", "futuristic", "artistic", "dual-mode", "vocaloid"]}, "images": {"hero": "assets/hero.png", "miku-wink": "assets/miku-wink.png", "miku-hero": "assets/miku-hero.png", "miku-texture": "assets/miku-texture.png"}, "copy": {"brandTitle": "初音未来 × 霓虹天际", "brandSubtitle": "WorkBuddy · 双模式主题", "signature": "Miku ♫ Neon", "tagline": "浅色初音未来 · 深色霓虹天际 — 跟随主题自动切换", "ribbon": "♫"}, "targets": {"workbuddy": {"css": "workbuddy.css", "options": {"baseTheme": {"mode": "auto", "codeTheme": "workbuddy", "accent": "#61DDFF", "contrast": 84, "ink": "#F4F8FF", "surface": "#07142F", "opaqueWindows": true, "fonts": {"windowsCode": "Cascadia Code", "windowsUi": "Microsoft YaHei UI", "macCode": "SF Mono", "macUi": "PingFang SC"}, "semanticColors": {"diffAdded": "#153D4D", "diffRemoved": "#4A203F", "skill": "#A992FF"}}}, "verification": {"required": [{"name": "chat-surface", "any": [".chat-container", ".wb-cb-chat"]}], "contexts": [{"name": "home-light", "when": {"any": [".wb-home-page"]}, "required": [{"name": "home-hero", "any": [".wb-home-header"]}, {"name": "home-composer", "any": [".wb-home-composer"]}]}, {"name": "home-dark", "when": {"any": [".wb-home-page"]}, "required": [{"name": "home-hero", "any": [".wb-home-header"]}, {"name": "home-composer", "any": [".wb-home-composer"]}]}, {"name": "conversation", "when": {"any": [".chat-container:not(.chat-container--welcome)"]}, "required": [{"name": "conversation-composer-shell", "any": [".chat-container:not(.chat-container--welcome) section:has([role='textbox'][contenteditable='true'])"}]}]}}}} \ No newline at end of file diff --git a/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/workbuddy.css b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/workbuddy.css new file mode 100644 index 0000000..fa38cc7 --- /dev/null +++ b/skills/codedrobe-theme/assets/examples/dual-miku-neon-wb/workbuddy.css @@ -0,0 +1,1411 @@ +/* ======================================== + Miku Future Beats (Light Mode) + Active when html.codedrobe-host-workbuddy has NO .dark class + ======================================== */ +:root.codedrobe-host-workbuddy:not(.dark) { + color-scheme: light !important; + --miku-wb-ink: #163f4b; + --miku-wb-muted: #557480; + --miku-wb-teal: #16bfc4; + --miku-wb-deep-teal: #087b86; + --miku-wb-cyan: #74dce4; + --miku-wb-pink: #ff8fc8; + --miku-wb-lavender: #9f92f8; + --miku-wb-ice: #eefbff; + --miku-wb-line: rgba(22, 191, 196, .24); + --miku-wb-shadow: rgba(20, 102, 118, .14); + --doll-wb-ink: var(--miku-wb-ink); + --doll-wb-muted: var(--miku-wb-muted); + --doll-wb-plum: var(--miku-wb-deep-teal); + --doll-wb-lavender: var(--miku-wb-lavender); + --doll-wb-pink: var(--miku-wb-pink); + --doll-wb-cream: #fbfdff; + --doll-wb-line: var(--miku-wb-line); + --doll-wb-shadow: var(--miku-wb-shadow); +} + +html.codedrobe-host-workbuddy:not(.dark), +html.codedrobe-host-workbuddy:not(.dark) body, +html.codedrobe-host-workbuddy:not(.dark) #root, +html.codedrobe-host-workbuddy:not(.dark) .teams-container { + background: + linear-gradient(rgba(255, 250, 248, .88), rgba(251, 239, 244, .92)), + var(--codedrobe-image-miku-texture) center / 720px auto repeat !important; + color: var(--doll-wb-ink) !important; + font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei UI", sans-serif !important; +} + +html.codedrobe-host-workbuddy:not(.dark) body::before { + content: ""; + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background: + radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .98) 0 2px, transparent 3px), + radial-gradient(circle at 16% 19%, rgba(220, 159, 182, .42) 0 1px, transparent 2px); + background-size: 83px 83px, 67px 67px; + opacity: .42; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-sidebar, +html.codedrobe-host-workbuddy:not(.dark) .conversation-list { + background: + linear-gradient(180deg, rgba(255, 252, 250, .95), rgba(248, 231, 238, .92)), + var(--codedrobe-image-miku-texture) center / 590px auto repeat !important; + border-right: 1px solid var(--doll-wb-line) !important; + box-shadow: 12px 0 32px rgba(86, 55, 91, .08), inset -1px 0 rgba(255, 255, 255, .92) !important; + color: var(--doll-wb-ink) !important; + backdrop-filter: blur(18px) saturate(1.06) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-sidebar :is(a, button, div, p, span, svg) { + color: var(--doll-wb-ink) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-sidebar svg { + stroke: currentColor !important; +} + +html.codedrobe-host-workbuddy :is( + .conversation-list-topbar, + .conversation-list-header, + .conversation-list-content, + .conversation-list-footer +) { + background: transparent !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-list-logo { + color: #754e7d !important; + font-family: "Iowan Old Style", "Songti SC", serif !important; + font-weight: 750 !important; + letter-spacing: .02em; + text-shadow: 0 1px 0 white; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-list-logo::after { + content: " ♡"; + color: #d391aa; +} + +html.codedrobe-host-workbuddy :is( + .conversation-list-version-badge, + .conversation-section-label, + .conversation-show-more-button, + .conversation-list-tab-button-sub +) { + color: rgba(75, 56, 81, .52) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-list-tab-button, +html.codedrobe-host-workbuddy:not(.dark) .conversation-agent-card, +html.codedrobe-host-workbuddy:not(.dark) .conversation-list-topbar button { + border: 1px solid transparent !important; + border-radius: 12px !important; + background: transparent !important; + transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important; +} + +html.codedrobe-host-workbuddy :is( + .conversation-list-tab-button:hover, + .conversation-agent-card:hover, + .conversation-list-topbar button:hover +) { + background: linear-gradient(90deg, rgba(237, 214, 232, .75), rgba(253, 242, 246, .88)) !important; + border-color: rgba(145, 99, 151, .15) !important; + box-shadow: 0 4px 13px rgba(86, 55, 91, .07) !important; + transform: translateX(2px); +} + +html.codedrobe-host-workbuddy :is( + .conversation-list-tab-button.active, + .conversation-agent-card[aria-selected="true"], + .conversation-agent-card.active +) { + background: linear-gradient(90deg, rgba(231, 204, 226, .93), rgba(251, 237, 242, .94)) !important; + border-color: rgba(145, 99, 151, .27) !important; + box-shadow: 0 5px 16px rgba(86, 55, 91, .09), inset 0 0 0 2px rgba(255, 255, 255, .46) !important; +} + +html.codedrobe-host-workbuddy :is( + .teams-content-wrapper, + .teams-main-content, + .main-content, + .chat-container, + .wb-cb-chat +) { + background: transparent !important; + color: var(--doll-wb-ink) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .teams-content-wrapper { + position: relative; + border-radius: 26px 0 0 0; + box-shadow: inset 1px 1px rgba(255, 255, 255, .92), -7px 0 25px rgba(86, 55, 91, .06); + overflow: hidden; +} + +html.codedrobe-host-workbuddy:not(.dark) .main-content--welcome { + background: + linear-gradient(rgba(255, 251, 249, .90), rgba(255, 247, 248, .94)), + var(--codedrobe-image-miku-texture) center / 820px auto repeat !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-page { + width: min(860px, calc(100% - 32px)) !important; + max-width: none !important; + min-height: 638px !important; + height: 638px !important; + display: flex !important; + flex-direction: column !important; + gap: 13px !important; + justify-content: flex-start !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header { + position: relative !important; + isolation: isolate; + box-sizing: border-box !important; + width: 100% !important; + height: 244px !important; + min-height: 244px !important; + display: flex !important; + flex: 0 0 244px !important; + flex-direction: column !important; + align-items: flex-start !important; + justify-content: center !important; + padding: 0 0 0 42px !important; + overflow: hidden !important; + border: 1px solid rgba(145, 99, 151, .30) !important; + border-radius: 28px !important; + background-color: #fff9f7 !important; + background-image: + linear-gradient(90deg, #fff9f7 0%, rgba(255, 249, 247, .99) 45%, rgba(255, 249, 247, .75) 62%, rgba(255, 249, 247, .06) 83%), + var(--codedrobe-image-miku-hero) !important; + background-repeat: no-repeat, no-repeat !important; + background-size: 100% 100%, auto 222% !important; + background-position: center, right 12% !important; + box-shadow: 0 16px 38px rgba(86, 55, 91, .15), inset 0 0 0 4px rgba(255, 255, 255, .34) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + pointer-events: none; + background: + radial-gradient(circle at 55% 27%, rgba(255, 249, 219, .95) 0 2px, transparent 3px), + radial-gradient(circle at 28% 75%, rgba(218, 158, 182, .50) 0 1px, transparent 2px); + background-size: 73px 73px, 91px 91px; + opacity: .72; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header::after { + content: "Miku Future Beats ♫ WorkBuddy"; + position: absolute; + left: 42px; + bottom: 28px; + color: #9a719f; + font: italic 15px/1.2 "Snell Roundhand", "Segoe Script", cursive; + letter-spacing: .04em; + text-shadow: 0 1px white; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__title, +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__subtitle { + width: 56% !important; + height: auto !important; + margin: 0 !important; + text-align: left !important; + color: var(--doll-wb-ink) !important; + text-shadow: 0 1px rgba(255, 255, 255, .96) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__title { + font-size: 0 !important; + line-height: 1 !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__title::before { + content: "初音未来 × WorkBuddy"; + display: block; + font: 760 clamp(25px, 3vw, 34px)/1.22 "Iowan Old Style", "Songti SC", serif; + letter-spacing: .025em; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__subtitle { + margin-top: 13px !important; + font-size: 0 !important; + line-height: 1 !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__subtitle::before { + content: "把灵感缝进今天的每一项工作 ♡"; + display: block; + color: #765f7d; + font: 540 14px/1.55 "Avenir Next", "PingFang SC", sans-serif; + letter-spacing: .035em; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-page > div:has(> .wb-scene-tabs) { + box-sizing: border-box !important; + width: 100% !important; + height: 52px !important; + min-height: 52px !important; + display: flex !important; + align-items: center !important; + padding: 6px 10px !important; + border: 1px solid rgba(145, 99, 151, .20) !important; + border-radius: 18px !important; + background: linear-gradient(90deg, rgba(255, 253, 251, .91), rgba(245, 225, 235, .86)) !important; + box-shadow: 0 7px 18px rgba(86, 55, 91, .08), inset 0 0 0 3px rgba(255, 255, 255, .44) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs { + width: auto !important; + height: 38px !important; + padding: 3px !important; + border: 0 !important; + border-radius: 14px !important; + background: rgba(235, 211, 231, .68) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs__pill { + height: 32px !important; + border: 1px solid transparent !important; + border-radius: 11px !important; + background: transparent !important; + color: #735778 !important; + transition: transform .18s ease, box-shadow .18s ease !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs__pill:hover { + transform: translateY(-1px); +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs__pill--active { + border-color: rgba(145, 99, 151, .21) !important; + background: linear-gradient(145deg, #d9a5bd, #a976b0) !important; + color: white !important; + box-shadow: 0 5px 13px rgba(86, 55, 91, .18), inset 0 1px rgba(255, 255, 255, .35) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs__pill--active :is(span, svg) { + color: white !important; + stroke: currentColor !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer { + position: relative !important; + box-sizing: border-box !important; + width: 100% !important; + height: 303px !important; + min-height: 303px !important; + display: flex !important; + flex: 0 0 303px !important; + flex-direction: column !important; + gap: 10px !important; + padding: 0 !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__chips { + width: calc(100% - 126px) !important; + height: 36px !important; + min-height: 36px !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .quick-actions, +html.codedrobe-host-workbuddy:not(.dark) .quick-actions-container, +html.codedrobe-host-workbuddy:not(.dark) .quick-actions__list { + width: 100% !important; + height: 36px !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .quick-actions__item { + min-height: 34px !important; + border: 1px solid rgba(145, 99, 151, .23) !important; + border-radius: 13px !important; + background: + linear-gradient(rgba(255, 253, 251, .92), rgba(249, 232, 240, .90)), + var(--codedrobe-image-miku-texture) center / 480px auto !important; + color: #66506c !important; + box-shadow: 0 5px 13px rgba(86, 55, 91, .08), inset 0 1px rgba(255, 255, 255, .85) !important; + transition: transform .18s ease, box-shadow .18s ease !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .quick-actions__item:hover { + transform: translateY(-3px) rotate(-.25deg) !important; + box-shadow: 0 10px 19px rgba(86, 55, 91, .13) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .quick-actions__item :is(span, svg) { + color: #76507e !important; + stroke: currentColor !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot { + position: relative !important; + box-sizing: border-box !important; + width: 100% !important; + height: 247px !important; + min-height: 247px !important; + padding: 0 !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot > section { + box-sizing: border-box !important; + width: 100% !important; + height: 236px !important; + min-height: 236px !important; + border: 1px solid rgba(145, 99, 151, .30) !important; + border-radius: 27px !important; + background: + linear-gradient(145deg, rgba(255, 253, 251, .96), rgba(248, 231, 238, .93)), + var(--codedrobe-image-miku-texture) center / 620px auto !important; + color: var(--doll-wb-ink) !important; + box-shadow: 0 12px 29px rgba(86, 55, 91, .13), inset 0 0 0 4px rgba(255, 255, 255, .52) !important; + backdrop-filter: blur(18px) saturate(1.06) !important; + overflow: hidden !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot::before { + content: "🎀"; + position: absolute; + left: -15px; + top: -15px; + z-index: 20; + width: 34px; + height: 34px; + display: grid; + place-items: center; + border-radius: 50%; + font-size: 19px; + background: linear-gradient(145deg, #f7dce6, #c99dce); + box-shadow: 0 5px 14px rgba(86, 55, 91, .18), 0 0 0 3px rgba(255, 255, 255, .72); + pointer-events: none; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot::after { + content: ""; + position: absolute; + right: 19px; + top: -95px; + z-index: 10; + width: 91px; + height: 116px; + border: 7px solid rgba(255, 253, 252, .98); + border-bottom-width: 19px; + border-radius: 3px; + background-image: var(--codedrobe-image-miku-hero); + background-repeat: no-repeat; + background-size: 285% auto; + background-position: 82% center; + box-shadow: 0 10px 24px rgba(86, 55, 91, .18), 0 0 0 1px rgba(145, 99, 151, .20); + transform: rotate(5deg); + pointer-events: none; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot img { + opacity: 0 !important; + pointer-events: none !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer [role="textbox"][contenteditable="true"] { + color: var(--doll-wb-ink) !important; + caret-color: #895b92 !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer [role="textbox"][contenteditable="true"] :is(p, span) { + color: rgba(75, 56, 81, .56) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer button, +html.codedrobe-host-workbuddy:not(.dark) .wb-input-footer button { + border-color: rgba(145, 99, 151, .18) !important; + border-radius: 11px !important; + color: #66506c !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-input-footer { + border-top-color: rgba(145, 99, 151, .12) !important; + background: rgba(255, 250, 248, .35) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .main-content:not(.main-content--welcome), +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) { + background: + linear-gradient(rgba(255, 251, 249, .90), rgba(255, 247, 248, .94)), + var(--codedrobe-image-miku-texture) center / 820px auto repeat !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) [role="textbox"][contenteditable="true"] { + color: var(--doll-wb-ink) !important; + caret-color: #895b92 !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"]) { + position: relative !important; + border: 1px solid rgba(145, 99, 151, .28) !important; + border-radius: 24px !important; + background: + linear-gradient(145deg, rgba(255, 253, 251, .96), rgba(248, 231, 238, .92)), + var(--codedrobe-image-miku-texture) center / 620px auto !important; + color: var(--doll-wb-ink) !important; + box-shadow: 0 11px 27px rgba(86, 55, 91, .12), inset 0 0 0 3px rgba(255, 255, 255, .50) !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"])::before { + content: "🎀"; + position: absolute; + left: -13px; + top: -14px; + z-index: 10; + width: 29px; + height: 29px; + display: grid; + place-items: center; + border-radius: 50%; + font-size: 16px; + background: linear-gradient(145deg, #f7dce6, #c99dce); + box-shadow: 0 4px 12px rgba(86, 55, 91, .16), 0 0 0 3px rgba(255, 255, 255, .70); + pointer-events: none; +} + +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) :is(table, th, td) { + border-color: rgba(145, 99, 151, .16) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) th { + background: rgba(240, 221, 234, .55) !important; + color: #5e4864 !important; +} + +/* Miku Future Beats: WorkBuddy cyber-pop visual layer */ +html.codedrobe-host-workbuddy:not(.dark), +html.codedrobe-host-workbuddy:not(.dark) body, +html.codedrobe-host-workbuddy:not(.dark) #root, +html.codedrobe-host-workbuddy:not(.dark) .teams-container { + background: + linear-gradient(135deg, rgba(247, 253, 255, .88), rgba(230, 248, 251, .92) 48%, rgba(249, 239, 255, .91)), + var(--codedrobe-image-miku-texture) center / 650px auto repeat !important; + color: var(--miku-wb-ink) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) body::before { + background: + radial-gradient(circle at 85% 8%, rgba(255, 255, 255, .98) 0 2px, transparent 3px), + radial-gradient(circle at 15% 19%, rgba(22, 191, 196, .42) 0 1px, transparent 2px), + linear-gradient(118deg, transparent 0 47%, rgba(159, 146, 248, .08) 49%, transparent 52%); + background-size: 79px 79px, 67px 67px, 100% 100%; + opacity: .60; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-sidebar, +html.codedrobe-host-workbuddy:not(.dark) .conversation-list { + background: + linear-gradient(180deg, rgba(247, 253, 255, .96), rgba(218, 247, 250, .92) 62%, rgba(246, 236, 255, .90)), + var(--codedrobe-image-miku-texture) center / 540px auto repeat !important; + border-right-color: rgba(22, 191, 196, .25) !important; + box-shadow: 12px 0 34px rgba(12, 105, 119, .10), inset -1px 0 rgba(255, 255, 255, .94) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .conversation-list-logo { + color: var(--miku-wb-deep-teal) !important; + font-family: "Avenir Next", "PingFang SC", sans-serif !important; + text-shadow: 0 2px 12px rgba(22, 191, 196, .18); +} +html.codedrobe-host-workbuddy .conversation-list-logo::after { content: " ♫"; color: var(--miku-wb-pink); } + +html.codedrobe-host-workbuddy :is( + .conversation-list-tab-button:hover, + .conversation-agent-card:hover, + .conversation-list-topbar button:hover +) { + background: linear-gradient(90deg, rgba(160, 238, 239, .45), rgba(255, 224, 241, .58)) !important; + border-color: rgba(22, 191, 196, .18) !important; + box-shadow: 0 5px 14px rgba(12, 105, 119, .08) !important; +} + +html.codedrobe-host-workbuddy :is( + .conversation-list-tab-button.active, + .conversation-agent-card[aria-selected="true"], + .conversation-agent-card.active +) { + background: linear-gradient(90deg, rgba(145, 233, 236, .72), rgba(255, 216, 238, .72)) !important; + border-color: rgba(22, 191, 196, .31) !important; + box-shadow: 0 6px 18px rgba(12, 105, 119, .11), inset 0 0 0 2px rgba(255, 255, 255, .53) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .teams-content-wrapper { + box-shadow: inset 1px 1px rgba(255, 255, 255, .95), -8px 0 27px rgba(12, 105, 119, .07); +} + +html.codedrobe-host-workbuddy:not(.dark) .main-content--welcome, +html.codedrobe-host-workbuddy:not(.dark) .main-content:not(.main-content--welcome), +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) { + background: + linear-gradient(rgba(248, 254, 255, .91), rgba(235, 250, 252, .94)), + var(--codedrobe-image-miku-texture) center / 760px auto repeat !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .workbuddy-topbar { + border-bottom: 1px solid rgba(22, 191, 196, .20) !important; + background: linear-gradient(90deg, rgba(249, 254, 255, .96), rgba(214, 247, 250, .90), rgba(240, 226, 255, .88)) !important; + backdrop-filter: blur(18px) saturate(1.08) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .main-content--chat .workbuddy-topbar::after { + content: "♫ Miku Future Beats · 灵感同频中"; + position: absolute; + left: 50%; + top: 10px; + z-index: 3; + height: 32px; + display: inline-flex; + align-items: center; + padding: 0 17px; + border: 1px solid rgba(22, 191, 196, .28); + border-radius: 999px; + background: linear-gradient(135deg, rgba(249, 254, 255, .96), rgba(212, 247, 250, .93), rgba(249, 226, 243, .91)); + color: var(--miku-wb-deep-teal); + font: 750 13px/1 "Avenir Next", "PingFang SC", sans-serif; + letter-spacing: .04em; + white-space: nowrap; + text-shadow: 0 1px white; + box-shadow: 0 5px 15px rgba(12, 105, 119, .12), inset 0 0 0 2px rgba(255, 255, 255, .46); + transform: translateX(-50%); + pointer-events: none; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header { + border-color: rgba(22, 191, 196, .34) !important; + background-color: #f5fcff !important; + background-image: + linear-gradient(90deg, #f7fdff 0%, rgba(247, 253, 255, .99) 42%, rgba(235, 251, 253, .70) 61%, rgba(239, 245, 255, .05) 83%), + var(--codedrobe-image-miku-hero) !important; + background-size: 100% 100%, auto 164% !important; + background-position: center, right 5% center !important; + box-shadow: 0 18px 42px rgba(12, 105, 119, .17), 0 7px 22px rgba(159, 146, 248, .08), inset 0 0 0 4px rgba(255, 255, 255, .42) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header::before { + background: + radial-gradient(circle at 54% 25%, rgba(255, 255, 255, .98) 0 2px, transparent 3px), + radial-gradient(circle at 26% 76%, rgba(22, 191, 196, .48) 0 1px, transparent 2px), + linear-gradient(110deg, transparent 0 58%, rgba(255, 143, 200, .10) 61%, transparent 65%); + background-size: 73px 73px, 91px 91px, 100% 100%; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header::after { + content: "Miku Future Beats ♫ WorkBuddy"; + color: var(--miku-wb-deep-teal); + font-family: "Avenir Next", "PingFang SC", sans-serif; + font-style: italic; + font-weight: 650; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__title::before { + content: "初音未来 × WorkBuddy"; + font-family: "Avenir Next", "PingFang SC", sans-serif; + color: var(--miku-wb-ink); +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-header__subtitle::before { + content: "让灵感、代码与旋律在今天同频闪耀 ♫"; + color: var(--miku-wb-muted); +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-page > div:has(> .wb-scene-tabs) { + border-color: rgba(22, 191, 196, .22) !important; + background: linear-gradient(90deg, rgba(251, 254, 255, .93), rgba(212, 246, 249, .88), rgba(248, 226, 243, .84)) !important; + box-shadow: 0 8px 19px rgba(12, 105, 119, .09), inset 0 0 0 3px rgba(255, 255, 255, .48) !important; +} + +html.codedrobe-host-workbuddy .wb-scene-tabs { background: rgba(164, 234, 237, .52) !important; } +html.codedrobe-host-workbuddy .wb-scene-tabs__pill { color: #276d78 !important; } +html.codedrobe-host-workbuddy:not(.dark) .wb-scene-tabs__pill--active { + border-color: rgba(22, 191, 196, .24) !important; + background: linear-gradient(145deg, #ff9dcc, #9f92f8 46%, #0cb7bf) !important; + box-shadow: 0 6px 14px rgba(12, 105, 119, .20), inset 0 1px rgba(255, 255, 255, .38) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .quick-actions__item { + border-color: rgba(22, 191, 196, .25) !important; + background: + linear-gradient(145deg, rgba(251, 254, 255, .94), rgba(216, 247, 250, .90), rgba(249, 229, 244, .87)), + var(--codedrobe-image-miku-texture) center / 460px auto !important; + color: #2c6873 !important; + box-shadow: 0 6px 14px rgba(12, 105, 119, .09), inset 0 1px rgba(255, 255, 255, .88) !important; +} +html.codedrobe-host-workbuddy .quick-actions__item:hover { box-shadow: 0 11px 21px rgba(12, 105, 119, .15) !important; } +html.codedrobe-host-workbuddy .quick-actions__item :is(span, svg) { color: var(--miku-wb-deep-teal) !important; } + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot > section, +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"]) { + border-color: rgba(22, 191, 196, .34) !important; + background: + linear-gradient(145deg, rgba(251, 254, 255, .97), rgba(214, 247, 250, .93) 65%, rgba(248, 226, 243, .90)), + var(--codedrobe-image-miku-texture) center / 580px auto !important; + color: var(--miku-wb-ink) !important; + box-shadow: 0 13px 31px rgba(12, 105, 119, .14), inset 0 0 0 4px rgba(255, 255, 255, .56) !important; +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot::before, +html.codedrobe-host-workbuddy:not(.dark) .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"])::before { + content: "♫"; + color: white; + background: linear-gradient(145deg, #ff9dcc, #16bfc4 62%, #9f92f8); + box-shadow: 0 5px 14px rgba(12, 105, 119, .19), 0 0 0 3px rgba(255, 255, 255, .74); +} + +html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot::after { + border-color: rgba(252, 254, 255, .98); + box-shadow: 0 11px 25px rgba(12, 105, 119, .20), 0 0 0 1px rgba(22, 191, 196, .22); +} + +html.codedrobe-host-workbuddy :is( + .wb-home-composer [role="textbox"][contenteditable="true"], + .chat-container:not(.chat-container--welcome) [role="textbox"][contenteditable="true"] +) { + color: var(--miku-wb-ink) !important; + caret-color: var(--miku-wb-teal) !important; +} + +html.codedrobe-host-workbuddy .wb-input-footer { border-top-color: rgba(22, 191, 196, .14) !important; background: rgba(248, 254, 255, .38) !important; } +html.codedrobe-host-workbuddy :is(.cb-markdown-pre, .cb-markdown-pre-container, .cb-markdown-pre-wrapper) { border-color: rgba(22, 191, 196, .18) !important; background: linear-gradient(145deg, rgba(245, 252, 255, .97), rgba(228, 246, 249, .94)) !important; } +html.codedrobe-host-workbuddy .chat-container:not(.chat-container--welcome) :is(table, th, td) { border-color: rgba(22, 191, 196, .20) !important; } +html.codedrobe-host-workbuddy .chat-container:not(.chat-container--welcome) th { background: linear-gradient(90deg, rgba(199, 242, 246, .64), rgba(244, 224, 242, .58)) !important; color: #2e606a !important; } +html.codedrobe-host-workbuddy *:focus-visible { outline-color: rgba(22, 191, 196, .78) !important; box-shadow: 0 0 0 3px rgba(22, 191, 196, .17) !important; } + +@media (max-width: 960px) { + html.codedrobe-host-workbuddy .main-content--chat .workbuddy-topbar::after { display: none; } +} + +@media (max-width: 1050px) { + html.codedrobe-host-workbuddy:not(.dark) .wb-home-page { + width: calc(100% - 24px) !important; + } + + html.codedrobe-host-workbuddy:not(.dark) .wb-home-header { + background-size: 100% 100%, auto 205% !important; + } +} + +@media (max-height: 720px) { + html.codedrobe-host-workbuddy:not(.dark) .wb-home-page { + min-height: 566px !important; + height: 566px !important; + } + + html.codedrobe-host-workbuddy:not(.dark) .wb-home-header { + height: 195px !important; + min-height: 195px !important; + flex-basis: 195px !important; + background-size: 100% 100%, auto 230% !important; + } + + html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer { + height: 254px !important; + min-height: 254px !important; + flex-basis: 254px !important; + } + + html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot, + html.codedrobe-host-workbuddy:not(.dark) .wb-home-composer__input-slot > section { + height: 198px !important; + min-height: 198px !important; + } +} + +@media (prefers-reduced-motion: reduce) { + html.codedrobe-host-workbuddy :is( + .conversation-list-tab-button, + .conversation-agent-card, + .wb-scene-tabs__pill, + .quick-actions__item + ) { + transition: none !important; + } +} + + +/* ======================================== + Neon Skyline (Dark Mode) + Active when html.codedrobe-host-workbuddy has .dark class + ======================================== */ +/* + * Neon Skyline for WorkBuddy — dark-mode adaptation of neon-skyline-codex v1.0.1 + * Scoped to WorkBuddy dark mode (html.dark / html.cb-dark). + * Deep navy base, neon cyan/pink/violet accents, hero artwork. + */ + +:root.codedrobe-host-workbuddy.dark, +:root.codedrobe-host-workbuddy.cb-dark { + color-scheme: dark !important; + + --neon-bg: #04091d; + --neon-bg-soft: #07142f; + --neon-surface: rgba(8, 18, 46, 0.86); + --neon-surface-strong: rgba(10, 23, 57, 0.96); + --neon-sidebar: rgba(4, 11, 31, 0.9); + --neon-text: #f4f8ff; + --neon-muted: #aebcdf; + --neon-cyan: #61ddff; + --neon-blue: #347dff; + --neon-pink: #ff83d5; + --neon-violet: #a992ff; + --neon-border: rgba(112, 207, 255, 0.24); + --neon-border-strong: rgba(97, 221, 255, 0.54); + --neon-shadow: rgba(0, 4, 24, 0.52); + --neon-glow: rgba(71, 179, 255, 0.22); +} + +/* ---- Base canvas ---- */ +html.codedrobe-host-workbuddy.dark, +html.codedrobe-host-workbuddy.dark body, +html.codedrobe-host-workbuddy.dark #root, +html.codedrobe-host-workbuddy.dark .teams-container { + background: + radial-gradient(circle at 76% 2%, rgba(43, 108, 255, 0.26), transparent 32%), + radial-gradient(circle at 34% 100%, rgba(255, 73, 190, 0.18), transparent 30%), + linear-gradient(145deg, #020718, #071533 52%, #0b1638) !important; + color: var(--neon-text) !important; +} + +html.codedrobe-host-workbuddy.dark body::before { + content: ""; + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background: + radial-gradient(circle at 86% 8%, rgba(255, 255, 255, 0.06) 0 2px, transparent 3px), + radial-gradient(circle at 16% 19%, rgba(97, 221, 255, 0.08) 0 1px, transparent 2px); + background-size: 83px 83px, 67px 67px; + opacity: 0.42; +} + +/* ---- Sidebar ---- */ +html.codedrobe-host-workbuddy.dark .conversation-sidebar, +html.codedrobe-host-workbuddy.dark .conversation-list { + background: + linear-gradient(180deg, rgba(4, 11, 31, 0.94), rgba(7, 17, 45, 0.9)), + radial-gradient(circle at 20% 8%, rgba(43, 127, 255, 0.17), transparent 28%) !important; + border-right: 1px solid rgba(103, 211, 255, 0.2) !important; + box-shadow: + 12px 0 38px rgba(0, 4, 22, 0.32), + inset -1px 0 rgba(120, 219, 255, 0.06) !important; + color: var(--neon-text) !important; + backdrop-filter: blur(20px) saturate(1.16); +} + +html.codedrobe-host-workbuddy.dark .conversation-sidebar :is(a, button, div, p, span, svg) { + color: #cbd8f3 !important; +} + +html.codedrobe-host-workbuddy.dark .conversation-sidebar svg { + stroke: currentColor !important; +} + +html.codedrobe-host-workbuddy.dark :is( + .conversation-list-topbar, + .conversation-list-header, + .conversation-list-content, + .conversation-list-footer +) { + background: transparent !important; +} + +html.codedrobe-host-workbuddy.dark .conversation-list-logo { + color: #7fe5ff !important; + font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei UI", sans-serif !important; + font-weight: 750 !important; + letter-spacing: 0.02em; + text-shadow: 0 0 12px rgba(97, 221, 255, 0.3); +} + +html.codedrobe-host-workbuddy.dark .conversation-list-logo::after { + content: " ♫"; + color: var(--neon-pink); +} + +html.codedrobe-host-workbuddy.dark :is( + .conversation-list-version-badge, + .conversation-section-label, + .conversation-show-more-button, + .conversation-list-tab-button-sub +) { + color: rgba(174, 188, 223, 0.52) !important; +} + +html.codedrobe-host-workbuddy.dark .conversation-list-tab-button, +html.codedrobe-host-workbuddy.dark .conversation-agent-card, +html.codedrobe-host-workbuddy.dark .conversation-list-topbar button { + border: 1px solid transparent !important; + border-radius: 12px !important; + background: transparent !important; + transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important; +} + +html.codedrobe-host-workbuddy.dark :is( + .conversation-list-tab-button:hover, + .conversation-agent-card:hover, + .conversation-list-topbar button:hover +) { + background: + linear-gradient(90deg, rgba(52, 125, 255, 0.18), rgba(255, 91, 197, 0.1)) !important; + border-color: rgba(97, 221, 255, 0.12) !important; + box-shadow: inset 0 0 0 1px rgba(97, 221, 255, 0.12), 0 4px 13px rgba(18, 86, 207, 0.07) !important; + transform: translateX(2px); +} + +html.codedrobe-host-workbuddy.dark :is( + .conversation-list-tab-button.active, + .conversation-agent-card[aria-selected="true"], + .conversation-agent-card.active +) { + background: + linear-gradient(90deg, rgba(45, 126, 255, 0.28), rgba(179, 74, 255, 0.18)) !important; + border-color: rgba(97, 221, 255, 0.27) !important; + box-shadow: + inset 3px 0 var(--neon-cyan), + inset 0 0 0 1px rgba(97, 221, 255, 0.14), + 0 7px 22px rgba(18, 86, 207, 0.12) !important; +} + +/* ---- Main content / workspace ---- */ +html.codedrobe-host-workbuddy.dark :is( + .teams-content-wrapper, + .teams-main-content, + .main-content, + .chat-container, + .wb-cb-chat +) { + background: transparent !important; + color: var(--neon-text) !important; +} + +html.codedrobe-host-workbuddy.dark .teams-content-wrapper { + position: relative; + border-radius: 26px 0 0 0; + box-shadow: + inset 1px 1px rgba(255, 255, 255, 0.04), + -7px 0 25px rgba(0, 4, 22, 0.06); + overflow: hidden; +} + +html.codedrobe-host-workbuddy.dark .main-content--welcome { + background: + linear-gradient(rgba(4, 10, 29, 0.92), rgba(5, 13, 36, 0.96)), + var(--codedrobe-image-hero, linear-gradient(145deg, #07142f, #0a1c43)) + center 48% / cover no-repeat !important; +} + +/* ---- Top bar ---- */ +html.codedrobe-host-workbuddy.dark .workbuddy-topbar { + border-bottom: 1px solid rgba(97, 221, 255, 0.16) !important; + background: + linear-gradient( + 90deg, + rgba(5, 13, 35, 0.96), + rgba(10, 27, 62, 0.9), + rgba(23, 18, 58, 0.9) + ) !important; + backdrop-filter: blur(18px) saturate(1.18); +} + +html.codedrobe-host-workbuddy.dark .main-content--chat .workbuddy-topbar::after { + content: "♫ Neon Skyline · 灵感同频中"; + position: absolute; + left: 50%; + top: 10px; + z-index: 3; + height: 32px; + display: inline-flex; + align-items: center; + padding: 0 17px; + border: 1px solid rgba(97, 221, 255, 0.28); + border-radius: 999px; + background: + linear-gradient( + 135deg, + rgba(5, 13, 35, 0.96), + rgba(15, 43, 91, 0.93), + rgba(40, 20, 74, 0.91) + ); + color: #7fe5ff; + font: 750 13px/1 "Avenir Next", "PingFang SC", sans-serif; + letter-spacing: 0.04em; + white-space: nowrap; + text-shadow: 0 0 10px rgba(97, 221, 255, 0.4); + box-shadow: + 0 5px 15px rgba(0, 4, 24, 0.42), + inset 0 0 0 2px rgba(97, 221, 255, 0.06), + 0 0 18px rgba(71, 179, 255, 0.15); + transform: translateX(-50%); + pointer-events: none; +} + +/* ---- Home page ---- */ +html.codedrobe-host-workbuddy.dark .wb-home-page { + width: min(860px, calc(100% - 32px)) !important; + max-width: none !important; + min-height: 638px !important; + height: 638px !important; + display: flex !important; + flex-direction: column !important; + gap: 13px !important; + justify-content: flex-start !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header { + position: relative !important; + isolation: isolate; + box-sizing: border-box !important; + width: 100% !important; + height: 244px !important; + min-height: 244px !important; + display: flex !important; + flex: 0 0 244px !important; + flex-direction: column !important; + align-items: flex-start !important; + justify-content: center !important; + padding: 0 0 0 42px !important; + overflow: hidden !important; + border: 1px solid rgba(97, 221, 255, 0.30) !important; + border-radius: 28px !important; + background-color: #04091d !important; + background-image: + var(--codedrobe-image-hero) !important; + background-repeat: no-repeat !important; + background-size: auto 190% !important; + background-position: right 0% center !important; + box-shadow: + 0 18px 42px rgba(0, 4, 24, 0.32), + 0 7px 22px rgba(169, 146, 248, 0.08), + inset 0 0 0 4px rgba(97, 221, 255, 0.06), + 0 0 28px rgba(71, 179, 255, 0.12) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header::before { + content: none !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header::after { + content: "Neon Skyline ♫ WorkBuddy"; + position: absolute; + left: 42px; + bottom: 28px; + color: #5f9ecf; + font: italic 15px/1.2 "Snell Roundhand", "Segoe Script", cursive; + letter-spacing: 0.04em; + text-shadow: 0 0 8px rgba(97, 221, 255, 0.3); +} + +html.codedrobe-host-workbuddy.dark .wb-home-header__title, +html.codedrobe-host-workbuddy.dark .wb-home-header__subtitle { + width: 56% !important; + height: auto !important; + margin: 0 !important; + text-align: left !important; + color: var(--neon-text) !important; + text-shadow: 0 0 12px rgba(97, 221, 255, 0.3) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header__title { + font-size: 0 !important; + line-height: 1 !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header__title::before { + content: "霓虹天际 × WorkBuddy"; + display: block; + font: 760 clamp(25px, 3vw, 34px)/1.22 "Iowan Old Style", "Songti SC", serif; + letter-spacing: 0.025em; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header__subtitle { + margin-top: 13px !important; + font-size: 0 !important; + line-height: 1 !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-header__subtitle::before { + content: "深海蓝、霓虹青与星云粉交织的未来都市工作台 ♫"; + display: block; + color: #8a9cc4; + font: 540 14px/1.55 "Avenir Next", "PingFang SC", sans-serif; + letter-spacing: 0.035em; +} + +/* ---- Scene tabs ---- */ +html.codedrobe-host-workbuddy.dark .wb-home-page > div:has(> .wb-scene-tabs) { + box-sizing: border-box !important; + width: 100% !important; + height: 52px !important; + min-height: 52px !important; + display: flex !important; + align-items: center !important; + padding: 6px 10px !important; + border: 1px solid rgba(97, 221, 255, 0.22) !important; + border-radius: 18px !important; + background: + linear-gradient(90deg, rgba(7, 22, 55, 0.93), rgba(31, 16, 66, 0.88), rgba(15, 43, 91, 0.84)) !important; + box-shadow: + 0 8px 19px rgba(0, 4, 24, 0.42), + inset 0 0 0 3px rgba(97, 221, 255, 0.06) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-scene-tabs { + background: rgba(97, 221, 255, 0.10) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-scene-tabs__pill { + color: #6a8ab8 !important; + transition: transform 0.18s ease, box-shadow 0.18s ease !important; +} + +html.codedrobe-host-workbuddy.dark .wb-scene-tabs__pill:hover { + transform: translateY(-1px); +} + +html.codedrobe-host-workbuddy.dark .wb-scene-tabs__pill--active { + border-color: rgba(97, 221, 255, 0.24) !important; + background: + linear-gradient(145deg, rgba(45, 126, 255, 0.42), rgba(169, 146, 248, 0.35) 46%, rgba(255, 83, 199, 0.28)) !important; + color: #f7fbff !important; + box-shadow: + 0 6px 14px rgba(18, 86, 207, 0.22), + inset 0 1px rgba(255, 255, 255, 0.10), + 0 0 14px rgba(71, 179, 255, 0.15) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-scene-tabs__pill--active :is(span, svg) { + color: #f7fbff !important; + stroke: currentColor !important; +} + +/* ---- Quick actions ---- */ +html.codedrobe-host-workbuddy.dark .quick-actions__item { + border: 1px solid rgba(97, 221, 255, 0.25) !important; + border-radius: 13px !important; + background: + linear-gradient(145deg, rgba(8, 22, 56, 0.94), rgba(15, 35, 74, 0.90), rgba(40, 20, 74, 0.87)) !important; + color: #5a8ac0 !important; + box-shadow: + 0 6px 14px rgba(0, 4, 24, 0.42), + inset 0 1px rgba(255, 255, 255, 0.06) !important; + transition: transform 0.18s ease, box-shadow 0.18s ease !important; +} + +html.codedrobe-host-workbuddy.dark .quick-actions__item:hover { + transform: translateY(-3px) rotate(-0.25deg) !important; + box-shadow: 0 11px 21px rgba(0, 4, 24, 0.52), 0 0 16px rgba(71, 179, 255, 0.12) !important; +} + +html.codedrobe-host-workbuddy.dark .quick-actions__item :is(span, svg) { + color: #7fe5ff !important; + stroke: currentColor !important; +} + +/* ---- Composer (home) ---- */ +html.codedrobe-host-workbuddy.dark .wb-home-composer { + position: relative !important; + box-sizing: border-box !important; + width: 100% !important; + height: 303px !important; + min-height: 303px !important; + display: flex !important; + flex: 0 0 303px !important; + flex-direction: column !important; + gap: 10px !important; + padding: 0 !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__chips { + width: calc(100% - 126px) !important; + height: 36px !important; + min-height: 36px !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy.dark .quick-actions, +html.codedrobe-host-workbuddy.dark .quick-actions-container, +html.codedrobe-host-workbuddy.dark .quick-actions__list { + width: 100% !important; + height: 36px !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot { + position: relative !important; + box-sizing: border-box !important; + width: 100% !important; + height: 247px !important; + min-height: 247px !important; + padding: 0 !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot > section { + box-sizing: border-box !important; + width: 100% !important; + height: 236px !important; + min-height: 236px !important; + border: 1px solid rgba(97, 221, 255, 0.34) !important; + border-radius: 27px !important; + background: + linear-gradient(145deg, rgba(7, 22, 56, 0.96), rgba(14, 29, 66, 0.94) 58%, rgba(40, 20, 74, 0.92)) !important; + color: var(--neon-text) !important; + box-shadow: + 0 12px 29px rgba(0, 4, 24, 0.42), + 0 0 0 1px rgba(255, 113, 213, 0.08), + inset 0 0 0 4px rgba(97, 221, 255, 0.06), + 0 0 24px rgba(71, 179, 255, 0.10) !important; + backdrop-filter: blur(22px) saturate(1.24) !important; + overflow: hidden !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot > section::after { + content: ""; + position: absolute; + inset: -1px; + z-index: -1; + border-radius: inherit; + background: + linear-gradient(115deg, rgba(97, 221, 255, 0.44), transparent 34%, rgba(255, 92, 201, 0.36)); + filter: blur(10px); + opacity: 0.5; + pointer-events: none; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot::before { + content: "♫"; + position: absolute; + left: -15px; + top: -15px; + z-index: 20; + width: 34px; + height: 34px; + display: grid; + place-items: center; + border-radius: 50%; + font-size: 19px; + color: white; + background: linear-gradient(145deg, #347dff, #61ddff 62%, #a992ff); + box-shadow: + 0 5px 14px rgba(18, 86, 207, 0.32), + 0 0 0 3px rgba(97, 221, 255, 0.22), + 0 0 18px rgba(71, 179, 255, 0.2); + pointer-events: none; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot::after { + content: ""; + position: absolute; + right: 19px; + top: -95px; + z-index: 10; + width: 108px; + height: 136px; + border: 7px solid rgba(10, 23, 57, 0.98); + border-bottom-width: 19px; + border-radius: 3px; + background-image: var(--codedrobe-image-miku-wink); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + box-shadow: + 0 10px 24px rgba(0, 4, 24, 0.42), + 0 0 0 1px rgba(97, 221, 255, 0.22), + 0 0 18px rgba(71, 179, 255, 0.15); + transform: rotate(5deg); + pointer-events: none; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot img { + opacity: 0 !important; + pointer-events: none !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer [role="textbox"][contenteditable="true"] { + color: var(--neon-text) !important; + caret-color: var(--neon-cyan) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer [role="textbox"][contenteditable="true"] :is(p, span) { + color: rgba(174, 188, 223, 0.56) !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer button, +html.codedrobe-host-workbuddy.dark .wb-input-footer button { + border-color: rgba(97, 221, 255, 0.18) !important; + border-radius: 11px !important; + color: #6a8ab8 !important; +} + +html.codedrobe-host-workbuddy.dark .wb-home-composer button:hover { + background: rgba(81, 148, 255, 0.14) !important; + color: #ffffff !important; +} + +html.codedrobe-host-workbuddy.dark .wb-input-footer { + border-top-color: rgba(97, 221, 255, 0.12) !important; + background: rgba(4, 11, 31, 0.35) !important; +} + +/* ---- Composer (conversation) ---- */ +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) [role="textbox"][contenteditable="true"] { + color: var(--neon-text) !important; + caret-color: var(--neon-cyan) !important; +} + +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"]) { + position: relative !important; + border: 1px solid rgba(97, 221, 255, 0.28) !important; + border-radius: 24px !important; + background: + linear-gradient(145deg, rgba(7, 22, 56, 0.96), rgba(14, 29, 66, 0.94) 58%, rgba(40, 20, 74, 0.92)) !important; + color: var(--neon-text) !important; + box-shadow: + 0 11px 27px rgba(0, 4, 24, 0.42), + inset 0 0 0 3px rgba(97, 221, 255, 0.06), + 0 0 20px rgba(71, 179, 255, 0.08) !important; + overflow: visible !important; +} + +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) section:has([role="textbox"][contenteditable="true"])::before { + content: "♫"; + position: absolute; + left: -13px; + top: -14px; + z-index: 10; + width: 29px; + height: 29px; + display: grid; + place-items: center; + border-radius: 50%; + font-size: 16px; + color: white; + background: linear-gradient(145deg, #347dff, #61ddff 62%, #a992ff); + box-shadow: + 0 4px 12px rgba(18, 86, 207, 0.32), + 0 0 0 3px rgba(97, 221, 255, 0.22), + 0 0 14px rgba(71, 179, 255, 0.15); + pointer-events: none; +} + +/* ---- Conversation content ---- */ +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) { + background: + linear-gradient(rgba(4, 10, 29, 0.91), rgba(5, 13, 36, 0.96)), + var(--codedrobe-image-hero, linear-gradient(145deg, #07142f, #0a1c43)) + center 48% / cover no-repeat !important; +} + +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) :is(table, th, td) { + border-color: rgba(97, 221, 255, 0.18) !important; +} + +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) th { + background: + linear-gradient(90deg, rgba(31, 77, 139, 0.58), rgba(65, 31, 100, 0.5)) !important; + color: #8ab4e6 !important; +} + +html.codedrobe-host-workbuddy.dark .chat-container:not(.chat-container--welcome) blockquote { + border-left-color: var(--neon-pink) !important; + background: rgba(35, 28, 76, 0.46) !important; +} + +/* ---- Code blocks ---- */ +html.codedrobe-host-workbuddy.dark :is(.cb-markdown-pre, .cb-markdown-pre-container, .cb-markdown-pre-wrapper) { + border: 1px solid rgba(97, 221, 255, 0.18) !important; + border-radius: 13px !important; + background: + linear-gradient(145deg, rgba(2, 8, 27, 0.96), rgba(8, 21, 50, 0.94)) !important; + box-shadow: + inset 3px 0 rgba(97, 221, 255, 0.42), + 0 10px 24px rgba(0, 3, 20, 0.22) !important; +} + +html.codedrobe-host-workbuddy.dark code { + color: #d9f7ff !important; +} + +/* ---- Focus states ---- */ +html.codedrobe-host-workbuddy.dark :is(button, [role="button"]):focus-visible, +html.codedrobe-host-workbuddy.dark :is(a, input, textarea, [contenteditable="true"]):focus-visible { + outline: 2px solid rgba(97, 221, 255, 0.86) !important; + outline-offset: 2px !important; + box-shadow: 0 0 0 4px rgba(71, 179, 255, 0.17) !important; +} + +html.codedrobe-host-workbuddy.dark :is(a, button, input, textarea, [contenteditable="true"]) { + accent-color: var(--neon-cyan); +} + +/* ---- Scrollbars ---- */ +html.codedrobe-host-workbuddy.dark * { + scrollbar-color: rgba(92, 159, 255, 0.5) transparent; +} + +/* ---- Responsive ---- */ +@media (max-width: 960px) { + html.codedrobe-host-workbuddy.dark .main-content--chat .workbuddy-topbar::after { display: none; } +} + +@media (max-width: 1050px) { + html.codedrobe-host-workbuddy.dark .wb-home-page { + width: calc(100% - 24px) !important; + } + + html.codedrobe-host-workbuddy.dark .wb-home-header { + background-size: 100% 100%, auto 205% !important; + } +} + +@media (max-height: 720px) { + html.codedrobe-host-workbuddy.dark .wb-home-page { + min-height: 566px !important; + height: 566px !important; + } + + html.codedrobe-host-workbuddy.dark .wb-home-header { + height: 195px !important; + min-height: 195px !important; + flex-basis: 195px !important; + background-size: 100% 100%, auto 230% !important; + } + + html.codedrobe-host-workbuddy.dark .wb-home-composer { + height: 254px !important; + min-height: 254px !important; + flex-basis: 254px !important; + } + + html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot, + html.codedrobe-host-workbuddy.dark .wb-home-composer__input-slot > section { + height: 198px !important; + min-height: 198px !important; + } +} + +@media (prefers-reduced-motion: reduce) { + html.codedrobe-host-workbuddy.dark :is( + .conversation-list-tab-button, + .conversation-agent-card, + .wb-scene-tabs__pill, + .quick-actions__item + ) { + transition: none !important; + } +}